Something went wrong. Try again.
2025 refresh of the landing page in Astro
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Countdown Timer Configurator</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; color: #333; } h1 { color: #2c3e50; text-align: center; margin-bottom: 30px; } .container { background-color: #f9f9f9; border-radius: 10px; padding: 25px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .form-section { margin-bottom: 20px; } .form-section h2 { font-size: 1.2em; margin-bottom: 10px; color: #3498db; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input[type="date"], input[type="time"], input[type="number"], button { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } .duration-inputs { display: flex; gap: 10px; } .duration-inputs input { flex: 1; } button { background-color: #3498db; color: white; border: none; padding: 12px; cursor: pointer; font-weight: bold; margin-top: 10px; transition: background-color 0.3s; } button:hover { background-color: #2980b9; } .result-section { margin-top: 30px; } .result-box { background-color: #eee; padding: 15px; border-radius: 5px; border-left: 5px solid #3498db; margin-bottom: 15px; word-break: break-all; } .copy-btn { background-color: #2ecc71; } .copy-btn:hover { background-color: #27ae60; } .copy-success { color: #2ecc71; font-weight: bold; margin-top: 10px; text-align: center; opacity: 0; transition: opacity 0.3s; } .copy-success.show { opacity: 1; } .tabs { display: flex; margin-bottom: 20px; } .tab { padding: 10px 20px; background-color: #ddd; cursor: pointer; border-radius: 5px 5px 0 0; margin-right: 5px; } .tab.active { background-color: #3498db; color: white; } .tab-content { display: none; } .tab-content.active { display: block; } @media (max-width: 600px) { .duration-inputs { flex-direction: column; } } </style></head><body> <div class="container"> <h1>Countdown Timer Configurator</h1> <div class="tabs"> <div class="tab active" data-tab="start-time">Start Time</div> <div class="tab" data-tab="duration">Duration</div> </div> <form id="configForm"> <div class="tab-content active" id="start-time-tab"> <div class="form-section"> <h2>Set Start Date & Time</h2> <div class="form-group"> <label for="startDate">Start Date:</label> <input type="date" id="startDate" required> </div> <div class="form-group"> <label for="startTime">Start Time:</label> <input type="time" id="startTime" required> </div> </div> <button type="button" class="next-btn">Next: Set Duration</button> </div> <div class="tab-content" id="duration-tab"> <div class="form-section"> <h2>Set Countdown Duration</h2> <div class="form-group"> <label>Duration:</label> <div class="duration-inputs"> <input type="number" id="hours" min="0" placeholder="Hours" value="0"> <input type="number" id="minutes" min="0" max="59" placeholder="Minutes" value="0"> <input type="number" id="seconds" min="0" max="59" placeholder="Seconds" value="0"> </div> </div> </div> <button type="button" class="prev-btn">Back: Start Time</button> <button type="button" id="generateBtn">Generate Link</button> </div> </form> <div class="result-section" style="display: none;"> <h2>Your Countdown Timer Link</h2> <div class="result-box" id="resultLink"></div> <button type="button" class="copy-btn" id="copyBtn">Copy Link to Clipboard</button> <div class="copy-success" id="copySuccess">Link copied to clipboard!</div> <button type="button" id="resetBtn">Create Another Link</button> </div> </div>
<script> document.addEventListener('DOMContentLoaded', function() { // Set default date to today const today = new Date(); const formattedDate = today.toISOString().split('T')[0]; document.getElementById('startDate').value = formattedDate; // Set default time to now const hours = String(today.getHours()).padStart(2, '0'); const minutes = String(today.getMinutes()).padStart(2, '0'); document.getElementById('startTime').value = `${hours}:${minutes}`; // Tab navigation const tabs = document.querySelectorAll('.tab'); tabs.forEach(tab => { tab.addEventListener('click', function() { const tabId = this.getAttribute('data-tab'); // Activate tab document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); this.classList.add('active'); // Show tab content document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); document.getElementById(`${tabId}-tab`).classList.add('active'); }); }); // Next button document.querySelector('.next-btn').addEventListener('click', function() { if (!document.getElementById('startDate').value) { alert('Please select a start date'); return; } if (!document.getElementById('startTime').value) { alert('Please select a start time'); return; } document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelector('[data-tab="duration"]').classList.add('active'); document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); document.getElementById('duration-tab').classList.add('active'); }); // Previous button document.querySelector('.prev-btn').addEventListener('click', function() { document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelector('[data-tab="start-time"]').classList.add('active'); document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); document.getElementById('start-time-tab').classList.add('active'); }); // Generate link button document.getElementById('generateBtn').addEventListener('click', function() { // Validate all inputs const hours = parseInt(document.getElementById('hours').value) || 0; const minutes = parseInt(document.getElementById('minutes').value) || 0; const seconds = parseInt(document.getElementById('seconds').value) || 0; if (hours === 0 && minutes === 0 && seconds === 0) { alert('Please set a duration greater than zero'); return; } generateLink(); }); // Copy button document.getElementById('copyBtn').addEventListener('click', function() { const resultLink = document.getElementById('resultLink').textContent; navigator.clipboard.writeText(resultLink).then(function() { const copySuccess = document.getElementById('copySuccess'); copySuccess.classList.add('show'); setTimeout(function() { copySuccess.classList.remove('show'); }, 2000); }); }); // Reset button document.getElementById('resetBtn').addEventListener('click', function() { document.getElementById('hours').value = '0'; document.getElementById('minutes').value = '0'; document.getElementById('seconds').value = '0'; const today = new Date(); const formattedDate = today.toISOString().split('T')[0]; document.getElementById('startDate').value = formattedDate; const hours = String(today.getHours()).padStart(2, '0'); const minutes = String(today.getMinutes()).padStart(2, '0'); document.getElementById('startTime').value = `${hours}:${minutes}`; document.querySelector('.result-section').style.display = 'none'; document.getElementById('configForm').style.display = 'block'; document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelector('[data-tab="start-time"]').classList.add('active'); document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); document.getElementById('start-time-tab').classList.add('active'); }); function generateLink() { // Get start date and time const startDate = document.getElementById('startDate').value; const startTime = document.getElementById('startTime').value; if (!startDate || !startTime) { alert('Please select both start date and time'); return; } const [year, month, day] = startDate.split('-'); const [hours, minutes] = startTime.split(':'); // Calculate duration in seconds const durationHours = parseInt(document.getElementById('hours').value) || 0; const durationMinutes = parseInt(document.getElementById('minutes').value) || 0; const durationSeconds = parseInt(document.getElementById('seconds').value) || 0; const totalSeconds = (durationHours * 3600) + (durationMinutes * 60) + durationSeconds; if (totalSeconds <= 0) { alert('Please set a duration greater than zero'); return; } // Build the fragment const fragment = `startYear=${year}&startMonth=${month}&startDay=${day}&startHour=${hours}&startMinute=${minutes}&startSecond=0&lengthSeconds=${totalSeconds}`; // Build the full URL const baseUrl = 'https://dummy.cafe/countdown.html'; const fullUrl = `${baseUrl}#${fragment}`; // Show result document.getElementById('resultLink').textContent = fullUrl; document.querySelector('.result-section').style.display = 'block'; document.getElementById('configForm').style.display = 'none'; } }); </script></body></html>