Update templates/index.html
This commit is contained in:
parent
617136fdc7
commit
8102a827c3
1 changed files with 57 additions and 49 deletions
|
@ -1,57 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Request an account on {{ homeserver }}</title>
|
||||
<link rel="icon" href="/static/favicon.ico">
|
||||
<link rel="stylesheet" href="/static/styles.css">
|
||||
<script>
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
const utcHours = String(now.getUTCHours()).padStart(2, '0');
|
||||
const utcMinutes = String(now.getUTCMinutes()).padStart(2, '0');
|
||||
const utcSeconds = String(now.getUTCSeconds()).padStart(2, '0');
|
||||
document.getElementById("clock").innerText =
|
||||
`${utcHours}:${utcMinutes}:${utcSeconds}`;
|
||||
}
|
||||
|
||||
// Wait for DOM to be ready before starting the clock
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateClock();
|
||||
setInterval(updateClock, 1000);
|
||||
});
|
||||
</script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Request an account</title>
|
||||
<link rel="stylesheet" href="/static/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-container">
|
||||
<div class="logo-container">
|
||||
<img src="/static/logo.png" alt="{{ homeserver }} logo" class="logo">
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<h1>Request an account on {{ homeserver }}</h1>
|
||||
</header>
|
||||
|
||||
<div id="clock" class="clock">--:--:--</div>
|
||||
|
||||
<div class="status-message">
|
||||
{{ message }}
|
||||
<div class="card">
|
||||
<div class="logo-container">
|
||||
<img src="/static/logo.png" alt="Logo" class="logo">
|
||||
</div>
|
||||
|
||||
<div id="registration-form">
|
||||
<form action="/register" method="post">
|
||||
<input type="text" name="requested_username" placeholder="Requested Username" required>
|
||||
<input type="email" name="email" placeholder="Valid Email Address" required>
|
||||
<button type="submit">Request Registration Token</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="registration-closed" class="registration-closed" style="display: none;">
|
||||
Registration is currently closed
|
||||
</div>
|
||||
|
||||
<p class="info-text">
|
||||
A registration token will be emailed to you.<br>
|
||||
Token resets in: <span id="countdown" class="countdown">--:--:--</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% if registration_closed %}
|
||||
<!-- Registration is closed -->
|
||||
{% else %}
|
||||
<form action="/register" method="post">
|
||||
<input type="text" name="requested_username" placeholder="Requested Username" required>
|
||||
<input type="email" name="email" placeholder="Valid Email Address" required>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<div class="footer-spacer"></div>
|
||||
<footer>
|
||||
<p>Matrix Homeserver: {{ homeserver }}</p>
|
||||
</footer>
|
||||
</div>
|
||||
<script>
|
||||
function updateCountdown() {
|
||||
const now = new Date();
|
||||
const tomorrow = new Date();
|
||||
tomorrow.setUTCHours(24, 0, 0, 0);
|
||||
|
||||
// Registration closes 15 minutes before midnight UTC
|
||||
const registrationCloseTime = new Date(tomorrow);
|
||||
registrationCloseTime.setUTCMinutes(-15);
|
||||
|
||||
const timeUntilClose = registrationCloseTime - now;
|
||||
const isRegistrationOpen = timeUntilClose > 0;
|
||||
|
||||
// Update UI based on registration status
|
||||
document.getElementById('registration-form').style.display =
|
||||
isRegistrationOpen ? 'block' : 'none';
|
||||
document.getElementById('registration-closed').style.display =
|
||||
isRegistrationOpen ? 'none' : 'block';
|
||||
|
||||
// Format time remaining
|
||||
const hours = String(Math.floor(timeUntilClose / (1000 * 60 * 60))).padStart(2, '0');
|
||||
const minutes = String(Math.floor((timeUntilClose % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
|
||||
const seconds = String(Math.floor((timeUntilClose % (1000 * 60)) / 1000)).padStart(2, '0');
|
||||
|
||||
document.getElementById('countdown').textContent = `${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
// Update immediately and then every second
|
||||
updateCountdown();
|
||||
setInterval(updateCountdown, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
Loading…
Add table
Reference in a new issue