105 lines
5.2 KiB
HTML
105 lines
5.2 KiB
HTML
{{ define "main" }}
|
|
<div class="bg-[url('/images/devon_starfield.png')] bg-cover bg-fixed min-h-screen flex flex-col items-center justify-center p-4">
|
|
<div class="text-center max-w-3xl mx-auto">
|
|
<figure class="flex justify-center items-center mb-8">
|
|
{{ $constructionBanner := "/images/under-construction.svg" }}
|
|
{{ if .Params.Image }}
|
|
{{ $constructionBanner = .Params.Image }}
|
|
{{ end }}
|
|
{{ partial "image" (dict "Src" $constructionBanner "Alt" "Banner" "Class" "w-1/2 md:w-1/3" ) }}
|
|
</figure>
|
|
|
|
<h1 class="text-3xl md:text-5xl font-bold text-white mb-4">{{ .Title | default "Tickets Coming Soon" }}</h1>
|
|
<p class="text-lg text-white text-center mb-12">{{ .Params.subtitle | default "We're preparing something special. Stay tuned!" }}</p>
|
|
|
|
<!-- Countdown Timer -->
|
|
<div class="countdown-container bg-black bg-opacity-50 backdrop-blur-sm p-6 rounded-xl shadow-lg mb-12">
|
|
<h2 class="text-xl md:text-2xl font-semibold text-white mb-6">Discounted Tickets Begin In:</h2>
|
|
<div class="grid grid-cols-4 gap-4 text-center" id="countdown">
|
|
<div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg">
|
|
<div id="days" class="text-2xl md:text-4xl font-bold text-white">00</div>
|
|
<div class="text-xs md:text-sm text-gray-300 uppercase tracking-wide">Days</div>
|
|
</div>
|
|
<div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg">
|
|
<div id="hours" class="text-2xl md:text-4xl font-bold text-white">00</div>
|
|
<div class="text-xs md:text-sm text-gray-300 uppercase tracking-wide">Hours</div>
|
|
</div>
|
|
<div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg">
|
|
<div id="minutes" class="text-2xl md:text-4xl font-bold text-white">00</div>
|
|
<div class="text-xs md:text-sm text-gray-300 uppercase tracking-wide">Minutes</div>
|
|
</div>
|
|
<div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg">
|
|
<div id="seconds" class="text-2xl md:text-4xl font-bold text-white">00</div>
|
|
<div class="text-xs md:text-sm text-gray-300 uppercase tracking-wide">Seconds</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification Form -->
|
|
{{ if .Params.enable_notification }}
|
|
<div class="bg-black bg-opacity-50 backdrop-blur-sm p-6 rounded-xl shadow-lg max-w-md mx-auto">
|
|
<h3 class="text-xl font-semibold text-white mb-4">Get Notified When Tickets Go Live</h3>
|
|
<form id="notification-form" class="space-y-4">
|
|
<div>
|
|
<input type="email" placeholder="Your email address" class="w-full px-4 py-2 rounded-md bg-gray-800 border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
</div>
|
|
<button type="submit" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition-colors">
|
|
Notify Me
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Set the date we're counting down to
|
|
// Format: Year, Month (0-11), Day, Hour, Minute, Second
|
|
const countDownDate = new Date("{{ .Params.countdown_date | default "2025-06-01T09:00:00-07:00" }}").getTime();
|
|
|
|
// Update the countdown every 1 second
|
|
const x = setInterval(function() {
|
|
// Get current date and time
|
|
const now = new Date().getTime();
|
|
|
|
// Find the distance between now and the countdown date
|
|
const distance = countDownDate - now;
|
|
|
|
// Time calculations for days, hours, minutes and seconds
|
|
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
|
|
|
// Display the result
|
|
document.getElementById("days").innerHTML = days.toString().padStart(2, '0');
|
|
document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0');
|
|
document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0');
|
|
document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0');
|
|
|
|
// If the countdown is finished, show expired message
|
|
if (distance < 0) {
|
|
clearInterval(x);
|
|
document.getElementById("countdown").innerHTML = "<div class='col-span-4 text-2xl font-bold text-white'>Tickets are now available!</div>";
|
|
// Optional: redirect to ticket page
|
|
// window.location.href = "/tickets";
|
|
}
|
|
}, 1000);
|
|
|
|
// Optional: Handle notification form submission
|
|
const form = document.getElementById('notification-form');
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
// Here you would typically send this to your backend
|
|
const email = e.target.querySelector('input[type="email"]').value;
|
|
console.log('Email submitted:', email);
|
|
// Replace form with success message
|
|
form.innerHTML = '<div class="text-green-400 text-center py-4">Thanks! We\'ll notify you when tickets are available.</div>';
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
{{ end }}
|