Spaces:
Running
Running
File size: 13,579 Bytes
3714a3e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Season Countdown Timer</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@300;400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
.title-font {
font-family: 'Playfair Display', serif;
}
.season-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.season-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.countdown-item {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 12px;
}
.progress-bar {
height: 6px;
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
border-radius: 3px;
transition: width 0.5s ease;
}
.leaf {
position: absolute;
opacity: 0.7;
animation: float 10s infinite ease-in-out;
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(10deg);
}
}
</style>
</head>
<body class="flex flex-col items-center justify-center p-4">
<div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
<i class="leaf fas fa-leaf text-green-400 text-xl" style="top: 10%; left: 5%; animation-delay: 0s;"></i>
<i class="leaf fas fa-leaf text-yellow-400 text-2xl" style="top: 30%; left: 15%; animation-delay: 2s;"></i>
<i class="leaf fas fa-leaf text-orange-500 text-lg" style="top: 20%; right: 10%; animation-delay: 4s;"></i>
<i class="leaf fas fa-leaf text-red-400 text-xl" style="bottom: 15%; left: 20%; animation-delay: 1s;"></i>
<i class="leaf fas fa-leaf text-green-500 text-2xl" style="bottom: 25%; right: 15%; animation-delay: 3s;"></i>
</div>
<div class="text-center mb-8">
<h1 class="title-font text-4xl md:text-5xl font-bold text-gray-800 mb-2">Season Countdown</h1>
<p class="text-gray-600 max-w-md">Mark your calendars! The excitement begins soon with the Golden Ticket tournament leading into the new season.</p>
</div>
<div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Golden Ticket Tournament Card -->
<div class="season-card p-6 relative overflow-hidden">
<div class="absolute -right-10 -top-10 w-32 h-32 bg-purple-200 rounded-full opacity-20"></div>
<div class="absolute -left-10 -bottom-10 w-40 h-40 bg-yellow-200 rounded-full opacity-20"></div>
<div class="relative z-10">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
<i class="fas fa-ticket-alt text-purple-600 text-xl"></i>
</div>
<h2 class="title-font text-2xl font-bold text-gray-800">Golden Ticket Tournament</h2>
</div>
<p class="text-gray-600 mb-6">The exclusive tournament that kicks off the competitive season.</p>
<div class="mb-4">
<p class="text-sm text-gray-500 mb-1">Starts in:</p>
<div class="grid grid-cols-4 gap-2">
<div class="countdown-item p-3 text-center">
<div class="text-2xl font-bold" id="gt-days">00</div>
<div class="text-xs">Days</div>
</div>
<div class="countdown-item p-3 text-center">
<div class="text-2xl font-bold" id="gt-hours">00</div>
<div class="text-xs">Hours</div>
</div>
<div class="countdown-item p-3 text-center">
<div class="text-2xl font-bold" id="gt-minutes">00</div>
<div class="text-xs">Minutes</div>
</div>
<div class="countdown-item p-3 text-center">
<div class="text-2xl font-bold" id="gt-seconds">00</div>
<div class="text-xs">Seconds</div>
</div>
</div>
</div>
<div class="mb-2">
<p class="text-sm text-gray-500">Countdown progress:</p>
<div class="w-full bg-gray-200 rounded-full h-2 mt-1">
<div class="progress-bar h-2 rounded-full" id="gt-progress"></div>
</div>
</div>
<div class="flex items-center text-sm text-gray-500 mt-4">
<i class="far fa-calendar-alt mr-2"></i>
<span>September 1, 2025</span>
</div>
</div>
</div>
<!-- Season Start Card -->
<div class="season-card p-6 relative overflow-hidden">
<div class="absolute -right-10 -top-10 w-32 h-32 bg-blue-200 rounded-full opacity-20"></div>
<div class="absolute -left-10 -bottom-10 w-40 h-40 bg-green-200 rounded-full opacity-20"></div>
<div class="relative z-10">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
<i class="fas fa-flag-checkered text-blue-600 text-xl"></i>
</div>
<h2 class="title-font text-2xl font-bold text-gray-800">Season Start</h2>
</div>
<p class="text-gray-600 mb-6">The official beginning of the competitive season.</p>
<div class="mb-4">
<p class="text-sm text-gray-500 mb-1">Starts in:</p>
<div class="grid grid-cols-4 gap-2">
<div class="countdown-item p-3 text-center">
<div class="text-2xl font-bold" id="season-days">00</div>
<div class="text-xs">Days</div>
</div>
<div class="countdown-item p-3 text-center">
<div class="text-2xl font-bold" id="season-hours">00</div>
<div class="text-xs">Hours</div>
</div>
<div class="countdown-item p-3 text-center">
<div class="text-2xl font-bold" id="season-minutes">00</div>
<div class="text-xs">Minutes</div>
</div>
<div class="countdown-item p-3 text-center">
<div class="text-2xl font-bold" id="season-seconds">00</div>
<div class="text-xs">Seconds</div>
</div>
</div>
</div>
<div class="mb-2">
<p class="text-sm text-gray-500">Countdown progress:</p>
<div class="w-full bg-gray-200 rounded-full h-2 mt-1">
<div class="progress-bar h-2 rounded-full" id="season-progress"></div>
</div>
</div>
<div class="flex items-center text-sm text-gray-500 mt-4">
<i class="far fa-calendar-alt mr-2"></i>
<span>September 4, 2025</span>
</div>
</div>
</div>
</div>
<div class="mt-8 text-center text-gray-500 text-sm">
<p>Get ready for an exciting season of competition!</p>
</div>
<script>
// Set the target dates
const goldenTicketDate = new Date('September 1, 2025 00:00:00').getTime();
const seasonStartDate = new Date('September 4, 2025 00:00:00').getTime();
// Get current date for reference point
const now = new Date().getTime();
// Calculate the full duration from now to each event
const fullGtDuration = goldenTicketDate - now;
const fullSeasonDuration = seasonStartDate - now;
// Update the countdown every second
const countdown = setInterval(function() {
const now = new Date().getTime();
// Golden Ticket calculations
const gtDistance = goldenTicketDate - now;
const gtDays = Math.floor(gtDistance / (1000 * 60 * 60 * 24));
const gtHours = Math.floor((gtDistance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const gtMinutes = Math.floor((gtDistance % (1000 * 60 * 60)) / (1000 * 60));
const gtSeconds = Math.floor((gtDistance % (1000 * 60)) / 1000);
// Update Golden Ticket display
document.getElementById("gt-days").innerHTML = gtDays.toString().padStart(2, '0');
document.getElementById("gt-hours").innerHTML = gtHours.toString().padStart(2, '0');
document.getElementById("gt-minutes").innerHTML = gtMinutes.toString().padStart(2, '0');
document.getElementById("gt-seconds").innerHTML = gtSeconds.toString().padStart(2, '0');
// Calculate Golden Ticket progress (inverse since we're counting down)
const gtProgress = ((fullGtDuration - gtDistance) / fullGtDuration) * 100;
document.getElementById("gt-progress").style.width = Math.min(100, Math.max(0, gtProgress)) + "%";
// Season Start calculations
const seasonDistance = seasonStartDate - now;
const seasonDays = Math.floor(seasonDistance / (1000 * 60 * 60 * 24));
const seasonHours = Math.floor((seasonDistance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const seasonMinutes = Math.floor((seasonDistance % (1000 * 60 * 60)) / (1000 * 60));
const seasonSeconds = Math.floor((seasonDistance % (1000 * 60)) / 1000);
// Update Season Start display
document.getElementById("season-days").innerHTML = seasonDays.toString().padStart(2, '0');
document.getElementById("season-hours").innerHTML = seasonHours.toString().padStart(2, '0');
document.getElementById("season-minutes").innerHTML = seasonMinutes.toString().padStart(2, '0');
document.getElementById("season-seconds").innerHTML = seasonSeconds.toString().padStart(2, '0');
// Calculate Season Start progress (inverse since we're counting down)
const seasonProgress = ((fullSeasonDuration - seasonDistance) / fullSeasonDuration) * 100;
document.getElementById("season-progress").style.width = Math.min(100, Math.max(0, seasonProgress)) + "%";
// If the countdown is finished for either event
if (gtDistance < 0) {
clearInterval(countdown);
document.getElementById("gt-days").innerHTML = "00";
document.getElementById("gt-hours").innerHTML = "00";
document.getElementById("gt-minutes").innerHTML = "00";
document.getElementById("gt-seconds").innerHTML = "00";
document.getElementById("gt-progress").style.width = "100%";
}
if (seasonDistance < 0) {
clearInterval(countdown);
document.getElementById("season-days").innerHTML = "00";
document.getElementById("season-hours").innerHTML = "00";
document.getElementById("season-minutes").innerHTML = "00";
document.getElementById("season-seconds").innerHTML = "00";
document.getElementById("season-progress").style.width = "100%";
}
}, 1000);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cyberheronova69/timer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |