Spaces:

philipp-zettl
/

static-countdown

Running

App Files Files Community

philipp-zettl commited on Apr 30, 2025

Commit

009105c

verified ·

1 Parent(s): 82a58cc

Update index.html

Browse files

Files changed (1) hide show

index.html +244 -57

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Modern 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>
@@ -81,6 +81,30 @@
             border-color: #667eea;
             box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
         }
     </style>
 </head>
 <body class="min-h-screen text-gray-800 font-sans">
@@ -89,7 +113,7 @@
         <div id="main-page" class="text-center max-w-3xl mx-auto">
             <div class="glass-card p-8 mb-8">
                 <h1 class="text-4xl font-bold mb-4 text-gray-800">Countdown Timer</h1>
-                <p class="text-lg text-gray-600 mb-8">Create and share beautiful countdowns with custom durations and animations</p>
                 <form id="countdown-form" class="space-y-6">
                     <div class="text-left">
@@ -98,26 +122,49 @@
                             class="input-field w-full px-4 py-3 rounded-lg bg-white">
                     </div>
-                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                        <div class="text-left">
-                            <label for="days" class="block mb-2 text-gray-700">Days</label>
-                            <input type="number" id="days" min="0" value="0"
-                                class="input-field w-full px-4 py-3 rounded-lg bg-white">
-                        </div>
-                        <div class="text-left">
-                            <label for="hours" class="block mb-2 text-gray-700">Hours</label>
-                            <input type="number" id="hours" min="0" max="23" value="0"
-                                class="input-field w-full px-4 py-3 rounded-lg bg-white">
                         </div>
                         <div class="text-left">
-                            <label for="minutes" class="block mb-2 text-gray-700">Minutes</label>
-                            <input type="number" id="minutes" min="0" max="59" value="10"
-                                class="input-field w-full px-4 py-3 rounded-lg bg-white">
                         </div>
-                        <div class="text-left">
-                            <label for="seconds" class="block mb-2 text-gray-700">Seconds</label>
-                            <input type="number" id="seconds" min="0" max="59" value="0"
-                                class="input-field w-full px-4 py-3 rounded-lg bg-white">
                         </div>
                     </div>
@@ -152,10 +199,10 @@
             <div class="glass-card p-6">
                 <h2 class="text-2xl font-semibold mb-4 text-gray-800">How to Use</h2>
                 <div class="text-left space-y-2 text-gray-600">
-                    <p>1. Set your countdown duration using days, hours, minutes and seconds</p>
                     <p>2. Add a title and choose a finish animation</p>
                     <p>3. Share the URL with others - all settings are included</p>
-                    <p class="mt-4 font-medium">Example URL: <code class="bg-gray-100 px-2 py-1 rounded">?title=New+Year&days=30&hours=12&animation=fireworks</code></p>
                 </div>
             </div>
         </div>
@@ -184,6 +231,10 @@
                     </div>
                 </div>
                 <div id="finished-message" class="hidden text-2xl font-bold mb-6">
                     <div class="inline-block px-6 py-3 bg-indigo-600 text-white rounded-full">
                         Time's Up!
@@ -199,20 +250,78 @@
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             // Check URL parameters
             const urlParams = new URLSearchParams(window.location.search);
-            const hasParams = urlParams.has('days') || urlParams.has('hours') || urlParams.has('minutes') || urlParams.has('seconds');
-            if (hasParams) {
-                // Start countdown from URL params
                 const title = urlParams.get('title') || 'Countdown';
-                const days = parseInt(urlParams.get('days')) || 0;
-                const hours = parseInt(urlParams.get('hours')) || 0;
-                const minutes = parseInt(urlParams.get('minutes')) || 0;
-                const seconds = parseInt(urlParams.get('seconds')) || 0;
                 const animation = urlParams.get('animation') || 'fireworks';
-                startCountdown(title, days, hours, minutes, seconds, animation);
             }
             // Form submission
@@ -221,24 +330,74 @@
                 e.preventDefault();
                 const title = document.getElementById('title').value || 'Countdown';
-                const days = parseInt(document.getElementById('days').value) || 0;
-                const hours = parseInt(document.getElementById('hours').value) || 0;
-                const minutes = parseInt(document.getElementById('minutes').value) || 0;
-                const seconds = parseInt(document.getElementById('seconds').value) || 0;
                 const animation = document.querySelector('input[name="animation"]:checked').value;
-                // Update URL with parameters
-                const params = new URLSearchParams();
-                if (title !== 'Countdown') params.set('title', title);
-                if (days > 0) params.set('days', days);
-                if (hours > 0) params.set('hours', hours);
-                if (minutes > 0) params.set('minutes', minutes);
-                if (seconds > 0) params.set('seconds', seconds);
-                params.set('animation', animation);
-                window.history.pushState({}, '', `?${params.toString()}`);
-                startCountdown(title, days, hours, minutes, seconds, animation);
             });
             // New countdown button
@@ -248,31 +407,59 @@
                 document.getElementById('countdown-page').classList.add('hidden');
                 clearInterval(window.countdownInterval);
                 document.getElementById('finished-message').classList.add('hidden');
             });
         });
-        function startCountdown(title, days, hours, minutes, seconds, animationType) {
             // Switch to countdown page
             document.getElementById('main-page').classList.add('hidden');
             document.getElementById('countdown-page').classList.remove('hidden');
             document.getElementById('countdown-title').textContent = title;
             document.getElementById('finished-message').classList.add('hidden');
-            // Calculate total seconds
-            let totalSeconds = days * 86400 + hours * 3600 + minutes * 60 + seconds;
             // Start the countdown
             updateCountdownDisplay(totalSeconds);
-            window.countdownInterval = setInterval(function() {
-                totalSeconds--;
-                updateCountdownDisplay(totalSeconds);
-                if (totalSeconds <= 0) {
-                    clearInterval(window.countdownInterval);
-                    countdownFinished(animationType);
-                }
-            }, 1000);
         }
         function updateCountdownDisplay(totalSeconds) {
@@ -364,5 +551,5 @@
             }
         }
     </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=philipp-zettl/static-countdown" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Advanced 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>
             border-color: #667eea;
             box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
         }
+        .tab-btn {
+            transition: all 0.3s ease;
+            border-bottom: 3px solid transparent;
+        }
+        .tab-btn.active {
+            border-bottom-color: #667eea;
+            color: #667eea;
+            font-weight: 600;
+        }
+        .datetime-input {
+            position: relative;
+        }
+        .datetime-input::-webkit-calendar-picker-indicator {
+            background: transparent;
+            bottom: 0;
+            color: transparent;
+            cursor: pointer;
+            height: auto;
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: auto;
+        }
     </style>
 </head>
 <body class="min-h-screen text-gray-800 font-sans">
         <div id="main-page" class="text-center max-w-3xl mx-auto">
             <div class="glass-card p-8 mb-8">
                 <h1 class="text-4xl font-bold mb-4 text-gray-800">Countdown Timer</h1>
+                <p class="text-lg text-gray-600 mb-8">Create countdowns by selecting a future date or setting duration</p>
                 <form id="countdown-form" class="space-y-6">
                     <div class="text-left">
                             class="input-field w-full px-4 py-3 rounded-lg bg-white">
                     </div>
+                    <div class="flex border-b border-gray-200 mb-6">
+                        <button type="button" id="duration-tab" class="tab-btn active py-2 px-4">Duration</button>
+                        <button type="button" id="datetime-tab" class="tab-btn py-2 px-4">Date & Time</button>
+                    </div>
+                    <div id="duration-inputs">
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                            <div class="text-left">
+                                <label for="days" class="block mb-2 text-gray-700">Days</label>
+                                <input type="number" id="days" min="0" value="0"
+                                    class="input-field w-full px-4 py-3 rounded-lg bg-white">
+                            </div>
+                            <div class="text-left">
+                                <label for="hours" class="block mb-2 text-gray-700">Hours</label>
+                                <input type="number" id="hours" min="0" max="23" value="0"
+                                    class="input-field w-full px-4 py-3 rounded-lg bg-white">
+                            </div>
+                            <div class="text-left">
+                                <label for="minutes" class="block mb-2 text-gray-700">Minutes</label>
+                                <input type="number" id="minutes" min="0" max="59" value="10"
+                                    class="input-field w-full px-4 py-3 rounded-lg bg-white">
+                            </div>
+                            <div class="text-left">
+                                <label for="seconds" class="block mb-2 text-gray-700">Seconds</label>
+                                <input type="number" id="seconds" min="0" max="59" value="0"
+                                    class="input-field w-full px-4 py-3 rounded-lg bg-white">
+                            </div>
                         </div>
+                    </div>
+                    <div id="datetime-inputs" class="hidden">
                         <div class="text-left">
+                            <label for="target-datetime" class="block mb-2 text-gray-700">Target Date & Time</label>
+                            <input type="datetime-local" id="target-datetime"
+                                class="datetime-input input-field w-full px-4 py-3 rounded-lg bg-white"
+                                min="">
                         </div>
+                        <div class="mt-4 text-left">
+                            <label for="timezone" class="block mb-2 text-gray-700">Timezone</label>
+                            <select id="timezone" class="input-field w-full px-4 py-3 rounded-lg bg-white">
+                                <option value="local">Local Time</option>
+                                <option value="utc">UTC</option>
+                            </select>
                         </div>
                     </div>
             <div class="glass-card p-6">
                 <h2 class="text-2xl font-semibold mb-4 text-gray-800">How to Use</h2>
                 <div class="text-left space-y-2 text-gray-600">
+                    <p>1. Choose between setting a duration or selecting a specific future date/time</p>
                     <p>2. Add a title and choose a finish animation</p>
                     <p>3. Share the URL with others - all settings are included</p>
+                    <p class="mt-4 font-medium">Example URL: <code class="bg-gray-100 px-2 py-1 rounded">?title=New+Year&target=2024-01-01T00:00&timezone=utc&animation=fireworks</code></p>
                 </div>
             </div>
         </div>
                     </div>
                 </div>
+                <div id="target-time-display" class="text-gray-600 mb-4">
+                    Counting down to: <span id="target-time" class="font-medium"></span>
+                </div>
                 <div id="finished-message" class="hidden text-2xl font-bold mb-6">
                     <div class="inline-block px-6 py-3 bg-indigo-600 text-white rounded-full">
                         Time's Up!
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // Set min datetime to now
+            const now = new Date();
+            const timezoneOffset = now.getTimezoneOffset() * 60000;
+            const localISOTime = new Date(now - timezoneOffset).toISOString().slice(0, 16);
+            document.getElementById('target-datetime').min = localISOTime;
+            // Tab switching
+            const durationTab = document.getElementById('duration-tab');
+            const datetimeTab = document.getElementById('datetime-tab');
+            const durationInputs = document.getElementById('duration-inputs');
+            const datetimeInputs = document.getElementById('datetime-inputs');
+            durationTab.addEventListener('click', function() {
+                durationTab.classList.add('active');
+                datetimeTab.classList.remove('active');
+                durationInputs.classList.remove('hidden');
+                datetimeInputs.classList.add('hidden');
+            });
+            datetimeTab.addEventListener('click', function() {
+                datetimeTab.classList.add('active');
+                durationTab.classList.remove('active');
+                datetimeInputs.classList.remove('hidden');
+                durationInputs.classList.add('hidden');
+            });
             // Check URL parameters
             const urlParams = new URLSearchParams(window.location.search);
+            const hasDurationParams = urlParams.has('days') || urlParams.has('hours') || urlParams.has('minutes') || urlParams.has('seconds');
+            const hasDatetimeParam = urlParams.has('target');
+            if (hasDurationParams || hasDatetimeParam) {
                 const title = urlParams.get('title') || 'Countdown';
                 const animation = urlParams.get('animation') || 'fireworks';
+                if (hasDatetimeParam) {
+                    // Start countdown from datetime
+                    const target = urlParams.get('target');
+                    const timezone = urlParams.get('timezone') || 'local';
+                    // Switch to datetime tab
+                    datetimeTab.click();
+                    // Set the datetime input
+                    document.getElementById('target-datetime').value = target;
+                    document.getElementById('timezone').value = timezone;
+                    // Calculate time remaining
+                    const targetDate = new Date(target);
+                    const now = new Date();
+                    let diffInSeconds = Math.floor((targetDate - now) / 1000);
+                    if (diffInSeconds > 0) {
+                        startCountdown(title, diffInSeconds, animation, targetDate, timezone);
+                    } else {
+                        // If time is in the past, show finished state
+                        document.getElementById('main-page').classList.add('hidden');
+                        document.getElementById('countdown-page').classList.remove('hidden');
+                        document.getElementById('countdown-title').textContent = title;
+                        document.getElementById('finished-message').classList.remove('hidden');
+                        countdownFinished(animation);
+                    }
+                } else {
+                    // Start countdown from duration params
+                    const days = parseInt(urlParams.get('days')) || 0;
+                    const hours = parseInt(urlParams.get('hours')) || 0;
+                    const minutes = parseInt(urlParams.get('minutes')) || 0;
+                    const seconds = parseInt(urlParams.get('seconds')) || 0;
+                    const totalSeconds = days * 86400 + hours * 3600 + minutes * 60 + seconds;
+                    startCountdown(title, totalSeconds, animation);
+                }
             }
             // Form submission
                 e.preventDefault();
                 const title = document.getElementById('title').value || 'Countdown';
                 const animation = document.querySelector('input[name="animation"]:checked').value;
+                // Check which tab is active
+                const isDurationTabActive = durationTab.classList.contains('active');
+                if (isDurationTabActive) {
+                    // Duration mode
+                    const days = parseInt(document.getElementById('days').value) || 0;
+                    const hours = parseInt(document.getElementById('hours').value) || 0;
+                    const minutes = parseInt(document.getElementById('minutes').value) || 0;
+                    const seconds = parseInt(document.getElementById('seconds').value) || 0;
+                    const totalSeconds = days * 86400 + hours * 3600 + minutes * 60 + seconds;
+                    // Update URL with parameters
+                    const params = new URLSearchParams();
+                    if (title !== 'Countdown') params.set('title', title);
+                    if (days > 0) params.set('days', days);
+                    if (hours > 0) params.set('hours', hours);
+                    if (minutes > 0) params.set('minutes', minutes);
+                    if (seconds > 0) params.set('seconds', seconds);
+                    params.set('animation', animation);
+                    window.history.pushState({}, '', `?${params.toString()}`);
+                    startCountdown(title, totalSeconds, animation);
+                } else {
+                    // Datetime mode
+                    const targetDatetime = document.getElementById('target-datetime').value;
+                    const timezone = document.getElementById('timezone').value;
+                    if (!targetDatetime) {
+                        alert('Please select a future date and time');
+                        return;
+                    }
+                    // Calculate time remaining
+                    let targetDate = new Date(targetDatetime);
+                    const now = new Date();
+                    let diffInSeconds = Math.floor((targetDate - now) / 1000);
+                    if (diffInSeconds <= 0) {
+                        alert('Please select a time in the future');
+                        return;
+                    }
+                    // Format target date for URL
+                    let targetForUrl;
+                    if (timezone === 'utc') {
+                        targetForUrl = targetDate.toISOString().slice(0, 16);
+                    } else {
+                        // Local time - need to adjust for timezone offset
+                        const timezoneOffset = now.getTimezoneOffset() * 60000;
+                        const localISOTime = new Date(targetDate.getTime() - timezoneOffset).toISOString().slice(0, 16);
+                        targetForUrl = localISOTime;
+                    }
+                    // Update URL with parameters
+                    const params = new URLSearchParams();
+                    if (title !== 'Countdown') params.set('title', title);
+                    params.set('target', targetForUrl);
+                    params.set('timezone', timezone);
+                    params.set('animation', animation);
+                    window.history.pushState({}, '', `?${params.toString()}`);
+                    startCountdown(title, diffInSeconds, animation, targetDate, timezone);
+                }
             });
             // New countdown button
                 document.getElementById('countdown-page').classList.add('hidden');
                 clearInterval(window.countdownInterval);
                 document.getElementById('finished-message').classList.add('hidden');
+                document.getElementById('target-time-display').classList.add('hidden');
             });
         });
+        function startCountdown(title, totalSeconds, animationType, targetDate = null, timezone = null) {
             // Switch to countdown page
             document.getElementById('main-page').classList.add('hidden');
             document.getElementById('countdown-page').classList.remove('hidden');
             document.getElementById('countdown-title').textContent = title;
             document.getElementById('finished-message').classList.add('hidden');
+            // Show target time if available
+            if (targetDate) {
+                let displayDate;
+                if (timezone === 'utc') {
+                    displayDate = targetDate.toUTCString();
+                } else {
+                    displayDate = targetDate.toLocaleString();
+                }
+                document.getElementById('target-time').textContent = displayDate;
+                document.getElementById('target-time-display').classList.remove('hidden');
+            } else {
+                document.getElementById('target-time-display').classList.add('hidden');
+            }
             // Start the countdown
             updateCountdownDisplay(totalSeconds);
+            if (targetDate) {
+                // For datetime mode, we need to recalculate the remaining time each second
+                // to account for any time drift
+                window.countdownInterval = setInterval(function() {
+                    const now = new Date();
+                    totalSeconds = Math.floor((targetDate - now) / 1000);
+                    updateCountdownDisplay(totalSeconds);
+                    if (totalSeconds <= 0) {
+                        clearInterval(window.countdownInterval);
+                        countdownFinished(animationType);
+                    }
+                }, 1000);
+            } else {
+                // For duration mode, simple countdown is sufficient
+                window.countdownInterval = setInterval(function() {
+                    totalSeconds--;
+                    updateCountdownDisplay(totalSeconds);
+                    if (totalSeconds <= 0) {
+                        clearInterval(window.countdownInterval);
+                        countdownFinished(animationType);
+                    }
+                }, 1000);
+            }
         }
         function updateCountdownDisplay(totalSeconds) {
             }
         }
     </script>
+</body>
 </html>