sw1tch/templates/index.html

79 lines
3.4 KiB
HTML
Raw Normal View History

2025-02-02 15:01:16 -08:00
<!DOCTYPE html>
<html lang="en">
<head>
2025-02-05 05:32:02 +00:00
<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">
2025-02-02 15:01:16 -08:00
</head>
<body>
2025-02-05 05:32:02 +00:00
<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">
2025-02-08 00:25:01 +00:00
<span id="info-message">A registration token will be emailed to you.</span><br>
Token resets at: <span id="countdown" class="countdown">--:--:--</span> UTC
2025-02-05 05:32:02 +00:00
</p>
2025-02-02 15:01:16 -08:00
</div>
2025-02-05 05:32:02 +00:00
<script>
2025-02-08 00:25:01 +00:00
// Configuration values provided by the server
2025-02-08 00:48:17 +00:00
const TOKEN_RESET_HOUR = {{ token_reset_time_utc }}; // e.g., 0 for midnight UTC
const DOWNTIME_MINUTES = {{ downtime_before_token_reset }}; // e.g., 30 minutes
2025-02-08 00:25:01 +00:00
2025-02-05 05:32:02 +00:00
function updateCountdown() {
const now = new Date();
2025-02-08 00:25:01 +00:00
2025-02-08 00:47:05 +00:00
// Calculate next reset time
const resetTime = new Date();
2025-02-08 00:25:01 +00:00
resetTime.setUTCHours(TOKEN_RESET_HOUR, 0, 0, 0);
if (now > resetTime) {
resetTime.setDate(resetTime.getDate() + 1);
}
2025-02-05 05:32:02 +00:00
2025-02-08 00:47:05 +00:00
// Calculate when registration should close
2025-02-08 00:25:01 +00:00
const downtimeStart = new Date(resetTime);
downtimeStart.setMinutes(downtimeStart.getMinutes() - DOWNTIME_MINUTES);
2025-02-05 05:32:02 +00:00
2025-02-08 00:47:05 +00:00
// Update form visibility based on whether we're in downtime
2025-02-08 00:25:01 +00:00
const isRegistrationOpen = now < downtimeStart;
2025-02-05 05:32:02 +00:00
document.getElementById('registration-form').style.display =
isRegistrationOpen ? 'block' : 'none';
document.getElementById('registration-closed').style.display =
isRegistrationOpen ? 'none' : 'block';
2025-02-08 00:47:05 +00:00
// Update info message based on registration status
2025-02-08 00:25:01 +00:00
const infoMessage = document.getElementById('info-message');
infoMessage.textContent = isRegistrationOpen
? 'A registration token will be emailed to you.'
: 'Please come back after the token resets.';
2025-02-08 00:47:05 +00:00
// Always show countdown to reset time (not downtime)
2025-02-08 00:25:01 +00:00
const timeUntilReset = resetTime - now;
const hours = String(Math.floor(timeUntilReset / (1000 * 60 * 60))).padStart(2, '0');
const minutes = String(Math.floor((timeUntilReset % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
const seconds = String(Math.floor((timeUntilReset % (1000 * 60)) / 1000)).padStart(2, '0');
2025-02-05 05:32:02 +00:00
document.getElementById('countdown').textContent = `${hours}:${minutes}:${seconds}`;
}
// Update immediately and then every second
updateCountdown();
setInterval(updateCountdown, 1000);
</script>
2025-02-02 15:01:16 -08:00
</body>
2025-02-05 05:32:02 +00:00
</html>