207 lines
6.5 KiB
HTML
207 lines
6.5 KiB
HTML
{{block "timer" .}}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>November Countdown</title>
|
|
<link rel="stylesheet" href="/css/main.css?v={{.BuildNumber}}" integrity="{{index .Integrity.CSS "main.css" }}" crossorigin="anonymous" />
|
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
|
|
<style>
|
|
.countdown-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 60vh;
|
|
text-align: center;
|
|
}
|
|
|
|
.countdown-title {
|
|
font-size: 2rem;
|
|
margin-bottom: 2rem;
|
|
color: var(--color);
|
|
}
|
|
|
|
.countdown-timer {
|
|
font-family: var(--font-family);
|
|
font-size: 4rem;
|
|
font-weight: bold;
|
|
color: var(--secondary);
|
|
margin-bottom: 1rem;
|
|
letter-spacing: 0.1em;
|
|
text-shadow: 0 0 10px rgba(197, 134, 192, 0.3);
|
|
}
|
|
|
|
.countdown-labels {
|
|
display: flex;
|
|
gap: 3rem;
|
|
font-size: 0.9rem;
|
|
color: var(--color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.countdown-unit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.countdown-number {
|
|
font-size: 4rem;
|
|
font-weight: bold;
|
|
color: var(--secondary);
|
|
line-height: 1;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.countdown-label {
|
|
font-size: 0.9rem;
|
|
color: var(--color);
|
|
opacity: 0.8;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.countdown-timer {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.countdown-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.countdown-number {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.countdown-labels {
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.countdown-timer {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.countdown-title {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.countdown-number {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.countdown-labels {
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="logo">
|
|
<a href="/">
|
|
<svg width="64" height="64" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Background circle for better visibility -->
|
|
<circle cx="16" cy="16" r="15" fill="#1e1e1e" stroke="var(--color)" stroke-width="2"/>
|
|
<!-- Vertical line of K -->
|
|
<line x1="10" y1="8" x2="10" y2="24" stroke="var(--color)" stroke-width="2" stroke-linecap="round"/>
|
|
<!-- Upper diagonal of K -->
|
|
<line x1="10" y1="16" x2="22" y2="8" stroke="var(--color)" stroke-width="2" stroke-linecap="round"/>
|
|
<!-- Lower diagonal of K -->
|
|
<line x1="10" y1="16" x2="22" y2="24" stroke="var(--color)" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="countdown-container">
|
|
<h1 class="countdown-title">Countdown to December 1st</h1>
|
|
<div class="countdown-display">
|
|
<div class="countdown-labels">
|
|
<div class="countdown-unit">
|
|
<div class="countdown-number" id="days">00</div>
|
|
<div class="countdown-label">Days</div>
|
|
</div>
|
|
<div class="countdown-unit">
|
|
<div class="countdown-number" id="hours">00</div>
|
|
<div class="countdown-label">Hours</div>
|
|
</div>
|
|
<div class="countdown-unit">
|
|
<div class="countdown-number" id="minutes">00</div>
|
|
<div class="countdown-label">Minutes</div>
|
|
</div>
|
|
<div class="countdown-unit">
|
|
<div class="countdown-number" id="seconds">00</div>
|
|
<div class="countdown-label">Seconds</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<a href="https://www.goodreads.com/jurajk">Goodreads</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://open.spotify.com/playlist/1X6PkYyptMu0kOFhVGTTkS?si=f55894a8c1e74f42">Current vibe Spotify Playlist</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/JurajKubrican">Github</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.linkedin.com/in/juraj-kubri%C4%8Dan-614b3274/">LinkedIn</a >
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</footer>
|
|
|
|
<script>
|
|
function updateCountdown() {
|
|
const now = new Date().getTime();
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
// Target is December 1st of current year at 00:00:00
|
|
// If we're already past December 1st, target next year's December 1st
|
|
let targetDate = new Date(currentYear, 11, 1, 0, 0, 0, 0); // Month 11 = December
|
|
|
|
if (now > targetDate.getTime()) {
|
|
targetDate = new Date(currentYear + 1, 11, 1, 0, 0, 0, 0);
|
|
}
|
|
|
|
const distance = targetDate.getTime() - now;
|
|
|
|
if (distance < 0) {
|
|
document.getElementById('days').textContent = '00';
|
|
document.getElementById('hours').textContent = '00';
|
|
document.getElementById('minutes').textContent = '00';
|
|
document.getElementById('seconds').textContent = '00';
|
|
return;
|
|
}
|
|
|
|
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);
|
|
|
|
document.getElementById('days').textContent = days.toString().padStart(2, '0');
|
|
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
|
|
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
|
|
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
|
|
}
|
|
|
|
// Update countdown immediately and then every second
|
|
updateCountdown();
|
|
setInterval(updateCountdown, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
{{end}} |