diff --git a/templates/index.html b/templates/index.html
index f9d589c..f99cf02 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -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>
\ No newline at end of file