72 lines
2.5 KiB
Twig
72 lines
2.5 KiB
Twig
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>{{ title | default('Coming Soon') }}</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/css/novaconium.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
body {
|
|
background: url("{{ bg_image | default('https://w.wallhaven.cc/full/5y/wallhaven-5yymk9.jpg') }}") no-repeat center center fixed;
|
|
background-size: cover;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body id="coming-soon">
|
|
<div class="container">
|
|
<h1>{{ heading | default('Coming Soon') }}</h1>
|
|
{% block content %}{% endblock %}
|
|
|
|
{% if countdown %}
|
|
<div class="countdown" id="countdown"></div>
|
|
{% endif %}
|
|
|
|
{# TODO: listmonk #}
|
|
<form class="newsletter" action="#" method="post">
|
|
<label for="email">Subscribe to our newsletter:</label>
|
|
<input type="email" id="email" name="email" placeholder="Your email address" required>
|
|
<button type="submit">Subscribe</button>
|
|
</form>
|
|
|
|
{# Social media icons using Font Awesome #}
|
|
<div class="social-icons">
|
|
{% block social %}{% endblock %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% if countdown %}
|
|
<script>
|
|
{% if countdown %}
|
|
{% set default_launch = "now"|date_modify("+30 days")|date("Y-m-d\TH:i:s") %}
|
|
const launchDate = new Date('{{ launch_date | default(default_launch) }}').getTime();
|
|
const countdownEl = document.getElementById('countdown');
|
|
|
|
function updateCountdown() {
|
|
const now = new Date().getTime();
|
|
const distance = launchDate - now;
|
|
|
|
if (distance <= 0) {
|
|
countdownEl.innerText = 'Launched!';
|
|
return;
|
|
}
|
|
|
|
const days = Math.floor(distance / (1000*60*60*24));
|
|
const hours = Math.floor((distance % (1000*60*60*24)) / (1000*60*60));
|
|
const mins = Math.floor((distance % (1000*60*60)) / (1000*60));
|
|
const secs = Math.floor((distance % (1000*60)) / 1000);
|
|
|
|
countdownEl.innerText = `${days}d ${hours}h ${mins}m ${secs}s`;
|
|
}
|
|
|
|
updateCountdown();
|
|
setInterval(updateCountdown, 1000);
|
|
{% endif %}
|
|
</script>
|
|
{% endif %}
|
|
|
|
</body>
|
|
</html>
|