Update templates/index.html

This commit is contained in:
Sangye Ince-Johannsen 2025-02-05 05:32:02 +00:00
parent 617136fdc7
commit 8102a827c3

View file

@ -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>