Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Your Time Zone - Share Times Across Timezones</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .container { | |
| background: white; | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| padding: 40px; | |
| max-width: 600px; | |
| width: 100%; | |
| text-align: center; | |
| } | |
| h1 { | |
| color: #000; | |
| margin-bottom: 30px; | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| } | |
| .time-input-section { | |
| margin-bottom: 30px; | |
| } | |
| .input-group { | |
| display: flex; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| input[type="time"] { | |
| padding: 15px; | |
| border: 2px solid #e1e5e9; | |
| border-radius: 10px; | |
| font-size: 1.1rem; | |
| outline: none; | |
| transition: border-color 0.3s ease; | |
| } | |
| input[type="time"]:focus { | |
| border-color: #f7931e; | |
| } | |
| select { | |
| padding: 15px; | |
| border: 2px solid #e1e5e9; | |
| border-radius: 10px; | |
| font-size: 1.1rem; | |
| outline: none; | |
| background: white; | |
| cursor: pointer; | |
| transition: border-color 0.3s ease; | |
| } | |
| select:focus { | |
| border-color: #f7931e; | |
| } | |
| .generate-btn { | |
| background: linear-gradient(135deg, #000 0%, #333 100%); | |
| color: white; | |
| border: none; | |
| padding: 15px 30px; | |
| border-radius: 10px; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.2s ease; | |
| margin-bottom: 20px; | |
| } | |
| .generate-btn:hover { | |
| transform: translateY(-2px); | |
| } | |
| .shareable-url { | |
| background: #f8f9fa; | |
| border: 2px solid #e1e5e9; | |
| border-radius: 10px; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| word-break: break-all; | |
| } | |
| .shareable-url a { | |
| color: #f7931e; | |
| text-decoration: none; | |
| font-weight: 600; | |
| } | |
| .shareable-url a:hover { | |
| text-decoration: underline; | |
| } | |
| .copy-btn { | |
| background: #ff6b35; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| .copy-btn:hover { | |
| background: #e55a2b; | |
| } | |
| .conversion-result { | |
| background: #f8f9fa; | |
| border: 2px solid #e1e5e9; | |
| border-radius: 10px; | |
| padding: 30px; | |
| margin-top: 20px; | |
| display: none; | |
| } | |
| .conversion-result.show { | |
| display: block; | |
| } | |
| .original-time { | |
| font-size: 1.2rem; | |
| color: #666; | |
| margin-bottom: 15px; | |
| } | |
| .converted-time { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: #000; | |
| margin-bottom: 10px; | |
| } | |
| .timezone-info { | |
| font-size: 1rem; | |
| color: #666; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| @media (max-width: 600px) { | |
| .container { | |
| padding: 20px; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .input-group { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| input[type="time"], select { | |
| width: 100%; | |
| max-width: 200px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Your Time Zone</h1> | |
| <div class="time-input-section"> | |
| <div class="input-group"> | |
| <input type="time" id="timeInput" value="09:00" required> | |
| <select id="timezoneSelect"> | |
| <option value="">Select your timezone</option> | |
| </select> | |
| </div> | |
| <button class="generate-btn" onclick="generateShareableUrl()">Generate Shareable Link</button> | |
| </div> | |
| <div id="shareableUrlSection" class="hidden"> | |
| <h3>Share this link with others:</h3> | |
| <div class="shareable-url"> | |
| <a id="shareableUrl" href="#" target="_blank"></a> | |
| </div> | |
| <button class="copy-btn" onclick="copyToClipboard()">Copy Link</button> | |
| </div> | |
| <div id="conversionResult" class="conversion-result"> | |
| <div class="original-time" id="originalTime"></div> | |
| <div class="converted-time" id="convertedTime"></div> | |
| <div class="timezone-info" id="timezoneInfo"></div> | |
| </div> | |
| </div> | |
| <script> | |
| const timezones = [ | |
| // Americas | |
| { value: 'Pacific/Honolulu', label: 'Hawaii Time (HST) GMT-10' }, | |
| { value: 'America/Anchorage', label: 'Alaska Time (AKT) GMT-9' }, | |
| { value: 'America/Los_Angeles', label: 'Pacific Time (PT) GMT-8' }, | |
| { value: 'America/Phoenix', label: 'Arizona Time (MST) GMT-7' }, | |
| { value: 'America/Denver', label: 'Mountain Time (MT) GMT-7' }, | |
| { value: 'America/Chicago', label: 'Central Time (CT) GMT-6' }, | |
| { value: 'America/Mexico_City', label: 'Mexico City (CST) GMT-6' }, | |
| { value: 'America/New_York', label: 'Eastern Time (ET) GMT-5' }, | |
| { value: 'America/Toronto', label: 'Toronto (EST) GMT-5' }, | |
| { value: 'America/Caracas', label: 'Caracas (VET) GMT-4' }, | |
| { value: 'America/Santiago', label: 'Santiago (CLT) GMT-3' }, | |
| { value: 'America/Sao_Paulo', label: 'São Paulo (BRT) GMT-3' }, | |
| { value: 'America/Argentina/Buenos_Aires', label: 'Buenos Aires (ART) GMT-3' }, | |
| { value: 'Atlantic/Azores', label: 'Azores (AZOT) GMT-1' }, | |
| // Europe & Africa | |
| { value: 'Europe/London', label: 'London (GMT) GMT+0' }, | |
| { value: 'Europe/Dublin', label: 'Dublin (IST) GMT+1' }, | |
| { value: 'Europe/Lisbon', label: 'Lisbon (WET) GMT+0' }, | |
| { value: 'Africa/Lagos', label: 'Lagos (WAT) GMT+1' }, | |
| { value: 'Europe/Paris', label: 'Paris (CET) GMT+1' }, | |
| { value: 'Europe/Berlin', label: 'Berlin (CET) GMT+1' }, | |
| { value: 'Europe/Rome', label: 'Rome (CET) GMT+1' }, | |
| { value: 'Europe/Madrid', label: 'Madrid (CET) GMT+1' }, | |
| { value: 'Europe/Amsterdam', label: 'Amsterdam (CET) GMT+1' }, | |
| { value: 'Europe/Brussels', label: 'Brussels (CET) GMT+1' }, | |
| { value: 'Europe/Vienna', label: 'Vienna (CET) GMT+1' }, | |
| { value: 'Europe/Warsaw', label: 'Warsaw (CET) GMT+1' }, | |
| { value: 'Africa/Cairo', label: 'Cairo (EET) GMT+2' }, | |
| { value: 'Africa/Johannesburg', label: 'Johannesburg (SAST) GMT+2' }, | |
| { value: 'Europe/Athens', label: 'Athens (EET) GMT+2' }, | |
| { value: 'Europe/Helsinki', label: 'Helsinki (EET) GMT+2' }, | |
| { value: 'Europe/Istanbul', label: 'Istanbul (TRT) GMT+3' }, | |
| { value: 'Europe/Moscow', label: 'Moscow (MSK) GMT+3' }, | |
| { value: 'Africa/Nairobi', label: 'Nairobi (EAT) GMT+3' }, | |
| // Middle East & Asia | |
| { value: 'Asia/Dubai', label: 'Dubai (GST) GMT+4' }, | |
| { value: 'Asia/Karachi', label: 'Karachi (PKT) GMT+5' }, | |
| { value: 'Asia/Kolkata', label: 'India (IST) GMT+5:30' }, | |
| { value: 'Asia/Dhaka', label: 'Dhaka (BST) GMT+6' }, | |
| { value: 'Asia/Bangkok', label: 'Bangkok (ICT) GMT+7' }, | |
| { value: 'Asia/Jakarta', label: 'Jakarta (WIB) GMT+7' }, | |
| { value: 'Asia/Singapore', label: 'Singapore (SGT) GMT+8' }, | |
| { value: 'Asia/Hong_Kong', label: 'Hong Kong (HKT) GMT+8' }, | |
| { value: 'Asia/Shanghai', label: 'Beijing/Shanghai (CST) GMT+8' }, | |
| { value: 'Asia/Taipei', label: 'Taipei (CST) GMT+8' }, | |
| { value: 'Asia/Seoul', label: 'Seoul (KST) GMT+9' }, | |
| { value: 'Asia/Tokyo', label: 'Tokyo (JST) GMT+9' }, | |
| // Oceania | |
| { value: 'Australia/Perth', label: 'Perth (AWST) GMT+8' }, | |
| { value: 'Australia/Adelaide', label: 'Adelaide (ACST) GMT+9:30' }, | |
| { value: 'Australia/Brisbane', label: 'Brisbane (AEST) GMT+10' }, | |
| { value: 'Australia/Sydney', label: 'Sydney (AEDT) GMT+11' }, | |
| { value: 'Australia/Melbourne', label: 'Melbourne (AEDT) GMT+11' }, | |
| { value: 'Pacific/Auckland', label: 'Auckland (NZDT) GMT+13' }, | |
| { value: 'Pacific/Fiji', label: 'Fiji (FJT) GMT+12' } | |
| ]; | |
| function populateTimezones() { | |
| const select = document.getElementById('timezoneSelect'); | |
| timezones.forEach(tz => { | |
| const option = document.createElement('option'); | |
| option.value = tz.value; | |
| option.textContent = tz.label; | |
| select.appendChild(option); | |
| }); | |
| const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; | |
| const matchingOption = Array.from(select.options).find(option => option.value === userTimezone); | |
| if (matchingOption) { | |
| matchingOption.selected = true; | |
| } | |
| } | |
| function generateShareableUrl() { | |
| const time = document.getElementById('timeInput').value; | |
| const timezone = document.getElementById('timezoneSelect').value; | |
| if (!time || !timezone) { | |
| alert('Please select both time and timezone'); | |
| return; | |
| } | |
| const url = new URL(window.location.href); | |
| url.searchParams.set('time', time); | |
| url.searchParams.set('tz', timezone); | |
| document.getElementById('shareableUrl').href = url.toString(); | |
| document.getElementById('shareableUrl').textContent = url.toString(); | |
| document.getElementById('shareableUrlSection').classList.remove('hidden'); | |
| } | |
| function copyToClipboard() { | |
| const url = document.getElementById('shareableUrl').href; | |
| navigator.clipboard.writeText(url).then(() => { | |
| const btn = document.querySelector('.copy-btn'); | |
| const originalText = btn.textContent; | |
| btn.textContent = 'Copied!'; | |
| setTimeout(() => { | |
| btn.textContent = originalText; | |
| }, 2000); | |
| }); | |
| } | |
| function convertTime() { | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const time = urlParams.get('time'); | |
| const timezone = urlParams.get('tz'); | |
| if (time && timezone) { | |
| const resultDiv = document.getElementById('conversionResult'); | |
| const originalTimeDiv = document.getElementById('originalTime'); | |
| const convertedTimeDiv = document.getElementById('convertedTime'); | |
| const timezoneInfoDiv = document.getElementById('timezoneInfo'); | |
| const [hours, minutes] = time.split(':'); | |
| // Get current date | |
| const now = new Date(); | |
| // Create a date string for today in the format that works universally | |
| const year = now.getFullYear(); | |
| const month = String(now.getMonth() + 1).padStart(2, '0'); | |
| const day = String(now.getDate()).padStart(2, '0'); | |
| // Build a date-time string | |
| const dateTimeString = `${year}-${month}-${day} ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:00`; | |
| // Create dates for multiple possible interpretations and find the right one | |
| // Try creating dates at different hours to find which one matches our target time in the source timezone | |
| let correctDate = null; | |
| // We'll iterate through possible UTC times to find the one that matches our target time in the source timezone | |
| // Search around today's date | |
| const baseTime = Date.UTC(year, now.getMonth(), now.getDate(), 12, 0, 0); | |
| // First try hourly increments | |
| for (let offsetHours = -24; offsetHours <= 24; offsetHours++) { | |
| const testTime = baseTime + (offsetHours * 60 * 60 * 1000); | |
| const testDate = new Date(testTime); | |
| // Check what time this UTC time appears as in the source timezone | |
| const testTimeInSourceTz = testDate.toLocaleTimeString('en-US', { | |
| hour: '2-digit', | |
| minute: '2-digit', | |
| hour12: false, | |
| timeZone: timezone | |
| }); | |
| const targetTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`; | |
| if (testTimeInSourceTz === targetTime) { | |
| correctDate = testDate; | |
| break; | |
| } | |
| } | |
| // If we couldn't find an exact match with hourly search, try with finer granularity | |
| if (!correctDate) { | |
| for (let offsetMinutes = -1440; offsetMinutes <= 1440; offsetMinutes += 15) { | |
| const testTime = baseTime + (offsetMinutes * 60 * 1000); | |
| const testDate = new Date(testTime); | |
| const testTimeInSourceTz = testDate.toLocaleTimeString('en-US', { | |
| hour: '2-digit', | |
| minute: '2-digit', | |
| hour12: false, | |
| timeZone: timezone | |
| }); | |
| const targetTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`; | |
| if (testTimeInSourceTz === targetTime) { | |
| correctDate = testDate; | |
| break; | |
| } | |
| } | |
| } | |
| // Display the original time exactly as entered | |
| const originalHour = parseInt(hours); | |
| const originalTimeString = `${originalHour % 12 || 12}:${String(minutes).padStart(2, '0')} ${originalHour >= 12 ? 'PM' : 'AM'}`; | |
| const originalTimezoneAbbr = getTimezoneAbbr(timezone); | |
| originalTimeDiv.textContent = `Original time: ${originalTimeString} ${originalTimezoneAbbr}`; | |
| // Get user's timezone | |
| const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; | |
| const userTimezoneAbbr = getTimezoneAbbr(userTimezone); | |
| // Convert to user's timezone if we found a valid date | |
| if (correctDate) { | |
| const convertedTimeString = correctDate.toLocaleTimeString('en-US', { | |
| hour: 'numeric', | |
| minute: '2-digit', | |
| hour12: true, | |
| timeZone: userTimezone | |
| }); | |
| convertedTimeDiv.textContent = `${convertedTimeString} ${userTimezoneAbbr} for you!`; | |
| } else { | |
| // Fallback if conversion failed | |
| convertedTimeDiv.textContent = `Unable to convert time accurately`; | |
| } | |
| timezoneInfoDiv.textContent = `Your timezone: ${userTimezone}`; | |
| resultDiv.classList.add('show'); | |
| document.querySelector('.time-input-section').style.display = 'none'; | |
| document.getElementById('shareableUrlSection').style.display = 'none'; | |
| } | |
| } | |
| function getTimezoneAbbr(timezone) { | |
| const date = new Date(); | |
| const abbr = date.toLocaleString('en-US', { | |
| timeZone: timezone, | |
| timeZoneName: 'short' | |
| }).split(' ').pop(); | |
| return abbr; | |
| } | |
| window.onload = function() { | |
| populateTimezones(); | |
| convertTime(); | |
| }; | |
| </script> | |
| </body> | |
| </html> | |