World Clock

\n \n

\n Select Timezone:\n \n

\n \n

00:00:00

Loading date...

Loading timezone...

\n \n \n \n \n\n","label",[18],"pulls","branches","forks","envVars",{"_173":26,"_175":26},"connections",{"_173":26,"_174":26},"count","unfilledCount","emptyCount",{"_34":245,"_13":246,"_62":247,"_44":-5,"_36":37,"_157":248,"_158":159,"_38":249,"_40":26,"_64":21,"_162":250,"_65":24,"_164":-5,"_190":251,"_17":252},{"_34":237,"_13":238,"_62":239,"_44":-5,"_36":37,"_157":240,"_158":159,"_38":241,"_40":161,"_64":21,"_162":242,"_65":24,"_164":-5,"_190":243,"_17":244},{"_34":229,"_13":230,"_62":231,"_44":-5,"_36":37,"_157":232,"_158":159,"_38":233,"_40":26,"_64":21,"_162":234,"_65":24,"_164":-5,"_190":235,"_17":236},{"_34":156,"_13":18,"_62":63,"_44":-5,"_36":37,"_157":80,"_158":159,"_38":226,"_40":161,"_64":21,"_162":163,"_65":24,"_164":-5,"_190":227,"_17":228},{"_34":218,"_13":219,"_62":220,"_44":-5,"_36":37,"_157":221,"_158":159,"_38":222,"_40":26,"_64":198,"_162":223,"_65":24,"_164":-5,"_190":224,"_17":225},{"_34":210,"_13":211,"_62":212,"_44":-5,"_36":37,"_157":213,"_158":159,"_38":214,"_40":26,"_64":198,"_162":215,"_65":24,"_164":-5,"_190":216,"_17":217},{"_34":202,"_13":203,"_62":204,"_44":-5,"_36":37,"_157":205,"_158":159,"_38":206,"_40":26,"_64":198,"_162":207,"_65":24,"_164":-5,"_190":208,"_17":209},{"_34":193,"_13":194,"_62":195,"_44":-5,"_36":37,"_157":121,"_158":159,"_38":196,"_40":197,"_64":198,"_162":199,"_65":24,"_164":-5,"_190":200,"_17":201},{"_34":185,"_13":186,"_62":187,"_44":-5,"_36":37,"_157":161,"_158":159,"_38":188,"_40":26,"_64":21,"_162":189,"_65":24,"_164":-5,"_190":191,"_17":192},"4e2126b4-31a6-11f0-b87b-569c3dd06744","style.css","4e212772-31a6-11f0-b87b-569c3dd06744",["D",1747325079355],"/* Additional custom styles beyond Tailwind */\n#clock {\n font-feature-settings: \"tnum\";\n letter-spacing: 0.05em;\n}\n\n.timezone-option-group {\n font-weight: bold;\n color: #4a5568;\n}\n\n/* Animation for clock updates */\n@keyframes pulse {\n 0% { opacity: 1; }\n 50% { opacity: 0.7; }\n 100% { opacity: 1; }\n}\n\n.time-update {\n animation: pulse 0.5s ease-in-out;\n}","children",[],[186],"2abcebb2-31ac-11f0-b7d0-569c3dd06744","server.js","9537c33c-31a6-11f0-ae66-569c3dd06744",["D",1747327596954],4,"script","import { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nexport default async function(req) {\n const url = new URL(req.url);\n const path = url.pathname;\n \n try {\n // Check if the map feature flag is enabled\n const useMap = url.searchParams.has('map') || path === '/map';\n \n // Redirect /map to /?map=true\n if (path === '/map') {\n return new Response(null, {\n status: 302,\n headers: {\n \"Location\": \"/?map=true\"\n }\n });\n }\n \n // Serve the main HTML file for the root path\n if (path === \"/\" || path === \"\") {\n // Choose which HTML file to serve based on the feature flag\n const htmlFile = useMap ? \"/index-with-map.html\" : \"/index.html\";\n const html = await readFile(htmlFile, import.meta.url);\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\"\n }\n });\n }\n \n // Serve CSS file\n if (path === \"/style.css\") {\n const css = await readFile(\"/style.css\", import.meta.url);\n return new Response(css, {\n headers: {\n \"Content-Type\": \"text/css; charset=utf-8\"\n }\n });\n }\n \n // Serve JavaScript files - ensure they're served as static files, not executed\n if (path === \"/script.js\") {\n const js = await readFile(\"/script.js\", import.meta.url);\n return new Response(js, {\n headers: {\n \"Content-Type\": \"text/javascript; charset=utf-8\"\n }\n });\n }\n \n if (path === \"/script-with-map.js\") {\n const js = await readFile(\"/script-with-map.js\", import.meta.url);\n return new Response(js, {\n headers: {\n \"Content-Type\": \"text/javascript; charset=utf-8\"\n }\n });\n }\n \n // Return 404 for any other paths\n return new Response(\"Not Found\", {\n status: 404,\n headers: {\n \"Content-Type\": \"text/plain\"\n }\n });\n } catch (error) {\n console.error(\"Error serving file:\", error);\n return new Response(`Server Error: ${error.message}`, {\n status: 500,\n headers: {\n \"Content-Type\": \"text/plain\"\n }\n });\n }\n}",[],[194],"0edc2d8e-31a9-11f0-a8db-569c3dd06744","server-backup.js","0edc2e56-31a9-11f0-a8db-569c3dd06744",15,["D",1747326261696],"import { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nexport default async function(req) {\n const url = new URL(req.url);\n const path = url.pathname;\n \n try {\n // Serve the main HTML file for the root path\n if (path === \"/\" || path === \"\") {\n const html = await readFile(\"/index.html\", import.meta.url);\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\"\n }\n });\n }\n \n // Serve CSS file\n if (path === \"/style.css\") {\n const css = await readFile(\"/style.css\", import.meta.url);\n return new Response(css, {\n headers: {\n \"Content-Type\": \"text/css; charset=utf-8\"\n }\n });\n }\n \n // Serve JavaScript file\n if (path === \"/script.js\") {\n const js = await readFile(\"/script.js\", import.meta.url);\n return new Response(js, {\n headers: {\n \"Content-Type\": \"application/javascript; charset=utf-8\"\n }\n });\n }\n \n // Return 404 for any other paths\n return new Response(\"Not Found\", {\n status: 404,\n headers: {\n \"Content-Type\": \"text/plain\"\n }\n });\n } catch (error) {\n console.error(\"Error serving file:\", error);\n return new Response(`Server Error: ${error.message}`, {\n status: 500,\n headers: {\n \"Content-Type\": \"text/plain\"\n }\n });\n }\n}",[],[203],"5c27cbdc-31a6-11f0-8d22-569c3dd06744","script.js","5c27ccb8-31a6-11f0-8d22-569c3dd06744",3,["D",1747325102881],"document.addEventListener('DOMContentLoaded', () => {\n const clockElement = document.getElementById('clock');\n const dateElement = document.getElementById('date');\n const timezoneElement = document.getElementById('timezone-display');\n const timezoneSelect = document.getElementById('timezone');\n \n // Common timezone groups\n const timezoneGroups = {\n 'Popular': [\n 'America/New_York',\n 'America/Los_Angeles',\n 'Europe/London',\n 'Europe/Paris',\n 'Asia/Tokyo',\n 'Australia/Sydney',\n 'Asia/Dubai',\n 'Asia/Shanghai'\n ],\n 'North America': [\n 'America/New_York',\n 'America/Chicago',\n 'America/Denver',\n 'America/Los_Angeles',\n 'America/Anchorage',\n 'America/Halifax',\n 'America/Toronto',\n 'America/Vancouver'\n ],\n 'Europe': [\n 'Europe/London',\n 'Europe/Paris',\n 'Europe/Berlin',\n 'Europe/Rome',\n 'Europe/Madrid',\n 'Europe/Moscow',\n 'Europe/Athens',\n 'Europe/Istanbul'\n ],\n 'Asia': [\n 'Asia/Tokyo',\n 'Asia/Shanghai',\n 'Asia/Hong_Kong',\n 'Asia/Singapore',\n 'Asia/Dubai',\n 'Asia/Kolkata',\n 'Asia/Seoul',\n 'Asia/Bangkok'\n ],\n 'Pacific': [\n 'Pacific/Honolulu',\n 'Pacific/Auckland',\n 'Pacific/Fiji',\n 'Pacific/Guam'\n ],\n 'Australia': [\n 'Australia/Sydney',\n 'Australia/Melbourne',\n 'Australia/Perth',\n 'Australia/Brisbane'\n ],\n 'South America': [\n 'America/Sao_Paulo',\n 'America/Buenos_Aires',\n 'America/Santiago',\n 'America/Lima'\n ],\n 'Africa': [\n 'Africa/Cairo',\n 'Africa/Johannesburg',\n 'Africa/Lagos',\n 'Africa/Nairobi'\n ]\n };\n\n // Populate timezone dropdown with optgroups\n function populateTimezoneSelect() {\n // Clear existing options\n timezoneSelect.innerHTML = '';\n \n // Add user's local timezone at the top\n const localOption = document.createElement('option');\n localOption.value = 'local';\n localOption.textContent = 'Local Time';\n timezoneSelect.appendChild(localOption);\n \n // Add timezone groups\n for (const [group, timezones] of Object.entries(timezoneGroups)) {\n const optgroup = document.createElement('optgroup');\n optgroup.label = group;\n optgroup.className = 'timezone-option-group';\n \n timezones.forEach(timezone => {\n const option = document.createElement('option');\n option.value = timezone;\n \n // Format the timezone name for display\n const formattedName = timezone.replace('_', ' ').split('/').pop();\n \n // Get current time in this timezone for display\n const timeInZone = new Date().toLocaleTimeString('en-US', { \n timeZone: timezone,\n hour: '2-digit',\n minute: '2-digit',\n hour12: true\n });\n \n option.textContent = `${formattedName} (${timeInZone})`;\n optgroup.appendChild(option);\n });\n \n timezoneSelect.appendChild(optgroup);\n }\n }\n\n // Update the clock display\n function updateClock() {\n const selectedTimezone = timezoneSelect.value;\n const now = new Date();\n let timeOptions, dateOptions;\n \n // Apply the pulse animation\n clockElement.classList.add('time-update');\n setTimeout(() => {\n clockElement.classList.remove('time-update');\n }, 500);\n \n if (selectedTimezone === 'local') {\n // Local time\n timeOptions = { \n hour: '2-digit', \n minute: '2-digit', \n second: '2-digit',\n hour12: false\n };\n \n dateOptions = { \n weekday: 'long', \n year: 'numeric', \n month: 'long', \n day: 'numeric'\n };\n \n timezoneElement.textContent = `Local Time (${Intl.DateTimeFormat().resolvedOptions().timeZone})`;\n } else {\n // Specific timezone\n timeOptions = { \n timeZone: selectedTimezone,\n hour: '2-digit', \n minute: '2-digit', \n second: '2-digit',\n hour12: false\n };\n \n dateOptions = { \n timeZone: selectedTimezone,\n weekday: 'long', \n year: 'numeric', \n month: 'long', \n day: 'numeric'\n };\n \n timezoneElement.textContent = selectedTimezone.replace('_', ' ');\n }\n \n const timeString = now.toLocaleTimeString('en-US', timeOptions);\n const dateString = now.toLocaleDateString('en-US', dateOptions);\n \n clockElement.textContent = timeString;\n dateElement.textContent = dateString;\n }\n\n // Initialize the page\n populateTimezoneSelect();\n \n // Set initial timezone to local\n timezoneSelect.value = 'local';\n \n // Update clock immediately and then every second\n updateClock();\n setInterval(updateClock, 1000);\n \n // Handle timezone changes\n timezoneSelect.addEventListener('change', () => {\n updateClock();\n \n // Update all timezone options with current time\n const optgroups = timezoneSelect.querySelectorAll('optgroup');\n optgroups.forEach(optgroup => {\n const options = optgroup.querySelectorAll('option');\n options.forEach(option => {\n if (option.value !== 'local') {\n const timezone = option.value;\n const formattedName = timezone.replace('_', ' ').split('/').pop();\n \n const timeInZone = new Date().toLocaleTimeString('en-US', { \n timeZone: timezone,\n hour: '2-digit',\n minute: '2-digit',\n hour12: true\n });\n \n option.textContent = `${formattedName} (${timeInZone})`;\n }\n });\n });\n });\n});",[],[211],"2e8dabe0-31a8-11f0-9943-569c3dd06744","script-with-map.js","2e8dac76-31a8-11f0-9943-569c3dd06744",11,["D",1747325885357],"document.addEventListener('DOMContentLoaded', () => {\n const clockElement = document.getElementById('clock');\n const dateElement = document.getElementById('date');\n const timezoneElement = document.getElementById('timezone-display');\n const timezoneSelect = document.getElementById('timezone');\n \n // Map initialization\n let map = null;\n let marker = null;\n \n // Initialize the map\n function initMap() {\n // Create the map with a default view\n map = L.map('map').setView([0, 0], 2);\n \n // Add the tile layer (OpenStreetMap)\n L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap contributors',\n maxZoom: 18\n }).addTo(map);\n \n // Prevent scrolling the page when scrolling the map\n map.getContainer().addEventListener('wheel', function(e) {\n e.stopPropagation();\n });\n }\n \n // Timezone to coordinates mapping (approximate central points)\n const timezoneCoordinates = {\n // North America\n 'America/New_York': { lat: 40.7128, lng: -74.0060, zoom: 4 },\n 'America/Chicago': { lat: 41.8781, lng: -87.6298, zoom: 4 },\n 'America/Denver': { lat: 39.7392, lng: -104.9903, zoom: 4 },\n 'America/Los_Angeles': { lat: 34.0522, lng: -118.2437, zoom: 4 },\n 'America/Anchorage': { lat: 61.2181, lng: -149.9003, zoom: 4 },\n 'America/Halifax': { lat: 44.6488, lng: -63.5752, zoom: 4 },\n 'America/Toronto': { lat: 43.6532, lng: -79.3832, zoom: 4 },\n 'America/Vancouver': { lat: 49.2827, lng: -123.1207, zoom: 4 },\n \n // Europe\n 'Europe/London': { lat: 51.5074, lng: -0.1278, zoom: 4 },\n 'Europe/Paris': { lat: 48.8566, lng: 2.3522, zoom: 4 },\n 'Europe/Berlin': { lat: 52.5200, lng: 13.4050, zoom: 4 },\n 'Europe/Rome': { lat: 41.9028, lng: 12.4964, zoom: 4 },\n 'Europe/Madrid': { lat: 40.4168, lng: -3.7038, zoom: 4 },\n 'Europe/Moscow': { lat: 55.7558, lng: 37.6173, zoom: 4 },\n 'Europe/Athens': { lat: 37.9838, lng: 23.7275, zoom: 4 },\n 'Europe/Istanbul': { lat: 41.0082, lng: 28.9784, zoom: 4 },\n \n // Asia\n 'Asia/Tokyo': { lat: 35.6762, lng: 139.6503, zoom: 4 },\n 'Asia/Shanghai': { lat: 31.2304, lng: 121.4737, zoom: 4 },\n 'Asia/Hong_Kong': { lat: 22.3193, lng: 114.1694, zoom: 4 },\n 'Asia/Singapore': { lat: 1.3521, lng: 103.8198, zoom: 4 },\n 'Asia/Dubai': { lat: 25.2048, lng: 55.2708, zoom: 4 },\n 'Asia/Kolkata': { lat: 28.6139, lng: 77.2090, zoom: 4 },\n 'Asia/Seoul': { lat: 37.5665, lng: 126.9780, zoom: 4 },\n 'Asia/Bangkok': { lat: 13.7563, lng: 100.5018, zoom: 4 },\n \n // Pacific\n 'Pacific/Honolulu': { lat: 21.3069, lng: -157.8583, zoom: 4 },\n 'Pacific/Auckland': { lat: -36.8485, lng: 174.7633, zoom: 4 },\n 'Pacific/Fiji': { lat: -17.7134, lng: 178.0650, zoom: 4 },\n 'Pacific/Guam': { lat: 13.4443, lng: 144.7937, zoom: 4 },\n \n // Australia\n 'Australia/Sydney': { lat: -33.8688, lng: 151.2093, zoom: 4 },\n 'Australia/Melbourne': { lat: -37.8136, lng: 144.9631, zoom: 4 },\n 'Australia/Perth': { lat: -31.9505, lng: 115.8605, zoom: 4 },\n 'Australia/Brisbane': { lat: -27.4698, lng: 153.0251, zoom: 4 },\n \n // South America\n 'America/Sao_Paulo': { lat: -23.5505, lng: -46.6333, zoom: 4 },\n 'America/Buenos_Aires': { lat: -34.6037, lng: -58.3816, zoom: 4 },\n 'America/Santiago': { lat: -33.4489, lng: -70.6693, zoom: 4 },\n 'America/Lima': { lat: -12.0464, lng: -77.0428, zoom: 4 },\n \n // Africa\n 'Africa/Cairo': { lat: 30.0444, lng: 31.2357, zoom: 4 },\n 'Africa/Johannesburg': { lat: -26.2041, lng: 28.0473, zoom: 4 },\n 'Africa/Lagos': { lat: 6.5244, lng: 3.3792, zoom: 4 },\n 'Africa/Nairobi': { lat: -1.2921, lng: 36.8219, zoom: 4 }\n };\n \n // Update the map based on selected timezone\n function updateMap(timezone) {\n if (!map) return;\n \n if (timezone === 'local') {\n // For local timezone, try to get user's location or use a default view\n const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n \n if (timezoneCoordinates[userTimezone]) {\n const coords = timezoneCoordinates[userTimezone];\n map.setView([coords.lat, coords.lng], coords.zoom);\n \n // Update or create marker\n if (marker) {\n marker.setLatLng([coords.lat, coords.lng]);\n } else {\n marker = L.marker([coords.lat, coords.lng]).addTo(map);\n }\n \n marker.bindPopup(`Local Time: ${userTimezone}`).openPopup();\n } else {\n // Default world view if we can't determine location\n map.setView([0, 0], 2);\n if (marker) {\n map.removeLayer(marker);\n marker = null;\n }\n }\n } else if (timezoneCoordinates[timezone]) {\n // Set view to the selected timezone\n const coords = timezoneCoordinates[timezone];\n map.setView([coords.lat, coords.lng], coords.zoom);\n \n // Update or create marker\n if (marker) {\n marker.setLatLng([coords.lat, coords.lng]);\n } else {\n marker = L.marker([coords.lat, coords.lng]).addTo(map);\n }\n \n // Format the timezone name for display\n const formattedName = timezone.replace('_', ' ').split('/').pop();\n marker.bindPopup(`${formattedName}`).openPopup();\n } else {\n // If timezone not in our coordinates list, show world view\n map.setView([0, 0], 2);\n if (marker) {\n map.removeLayer(marker);\n marker = null;\n }\n }\n }\n \n // Common timezone groups\n const timezoneGroups = {\n 'Popular': [\n 'America/New_York',\n 'America/Los_Angeles',\n 'Europe/London',\n 'Europe/Paris',\n 'Asia/Tokyo',\n 'Australia/Sydney',\n 'Asia/Dubai',\n 'Asia/Shanghai'\n ],\n 'North America': [\n 'America/New_York',\n 'America/Chicago',\n 'America/Denver',\n 'America/Los_Angeles',\n 'America/Anchorage',\n 'America/Halifax',\n 'America/Toronto',\n 'America/Vancouver'\n ],\n 'Europe': [\n 'Europe/London',\n 'Europe/Paris',\n 'Europe/Berlin',\n 'Europe/Rome',\n 'Europe/Madrid',\n 'Europe/Moscow',\n 'Europe/Athens',\n 'Europe/Istanbul'\n ],\n 'Asia': [\n 'Asia/Tokyo',\n 'Asia/Shanghai',\n 'Asia/Hong_Kong',\n 'Asia/Singapore',\n 'Asia/Dubai',\n 'Asia/Kolkata',\n 'Asia/Seoul',\n 'Asia/Bangkok'\n ],\n 'Pacific': [\n 'Pacific/Honolulu',\n 'Pacific/Auckland',\n 'Pacific/Fiji',\n 'Pacific/Guam'\n ],\n 'Australia': [\n 'Australia/Sydney',\n 'Australia/Melbourne',\n 'Australia/Perth',\n 'Australia/Brisbane'\n ],\n 'South America': [\n 'America/Sao_Paulo',\n 'America/Buenos_Aires',\n 'America/Santiago',\n 'America/Lima'\n ],\n 'Africa': [\n 'Africa/Cairo',\n 'Africa/Johannesburg',\n 'Africa/Lagos',\n 'Africa/Nairobi'\n ]\n };\n\n // Populate timezone dropdown with optgroups\n function populateTimezoneSelect() {\n // Clear existing options\n timezoneSelect.innerHTML = '';\n \n // Add user's local timezone at the top\n const localOption = document.createElement('option');\n localOption.value = 'local';\n localOption.textContent = 'Local Time';\n timezoneSelect.appendChild(localOption);\n \n // Add timezone groups\n for (const [group, timezones] of Object.entries(timezoneGroups)) {\n const optgroup = document.createElement('optgroup');\n optgroup.label = group;\n optgroup.className = 'timezone-option-group';\n \n timezones.forEach(timezone => {\n const option = document.createElement('option');\n option.value = timezone;\n \n // Format the timezone name for display\n const formattedName = timezone.replace('_', ' ').split('/').pop();\n \n // Get current time in this timezone for display\n const timeInZone = new Date().toLocaleTimeString('en-US', { \n timeZone: timezone,\n hour: '2-digit',\n minute: '2-digit',\n hour12: true\n });\n \n option.textContent = `${formattedName} (${timeInZone})`;\n optgroup.appendChild(option);\n });\n \n timezoneSelect.appendChild(optgroup);\n }\n }\n\n // Update the clock display\n function updateClock() {\n const selectedTimezone = timezoneSelect.value;\n const now = new Date();\n let timeOptions, dateOptions;\n \n // Apply the pulse animation\n clockElement.classList.add('time-update');\n setTimeout(() => {\n clockElement.classList.remove('time-update');\n }, 500);\n \n if (selectedTimezone === 'local') {\n // Local time\n timeOptions = { \n hour: '2-digit', \n minute: '2-digit', \n second: '2-digit',\n hour12: false\n };\n \n dateOptions = { \n weekday: 'long', \n year: 'numeric', \n month: 'long', \n day: 'numeric'\n };\n \n timezoneElement.textContent = `Local Time (${Intl.DateTimeFormat().resolvedOptions().timeZone})`;\n } else {\n // Specific timezone\n timeOptions = { \n timeZone: selectedTimezone,\n hour: '2-digit', \n minute: '2-digit', \n second: '2-digit',\n hour12: false\n };\n \n dateOptions = { \n timeZone: selectedTimezone,\n weekday: 'long', \n year: 'numeric', \n month: 'long', \n day: 'numeric'\n };\n \n timezoneElement.textContent = selectedTimezone.replace('_', ' ');\n }\n \n const timeString = now.toLocaleTimeString('en-US', timeOptions);\n const dateString = now.toLocaleDateString('en-US', dateOptions);\n \n clockElement.textContent = timeString;\n dateElement.textContent = dateString;\n }\n\n // Initialize the page\n populateTimezoneSelect();\n \n // Set initial timezone to local\n timezoneSelect.value = 'local';\n \n // Initialize map after DOM is fully loaded\n initMap();\n \n // Update clock and map immediately\n updateClock();\n updateMap('local');\n \n // Update clock every second\n setInterval(updateClock, 1000);\n \n // Handle timezone changes\n timezoneSelect.addEventListener('change', () => {\n const selectedTimezone = timezoneSelect.value;\n \n // Update clock\n updateClock();\n \n // Update map\n updateMap(selectedTimezone);\n \n // Update all timezone options with current time\n const optgroups = timezoneSelect.querySelectorAll('optgroup');\n optgroups.forEach(optgroup => {\n const options = optgroup.querySelectorAll('option');\n options.forEach(option => {\n if (option.value !== 'local') {\n const timezone = option.value;\n const formattedName = timezone.replace('_', ' ').split('/').pop();\n \n const timeInZone = new Date().toLocaleTimeString('en-US', { \n timeZone: timezone,\n hour: '2-digit',\n minute: '2-digit',\n hour12: true\n });\n \n option.textContent = `${formattedName} (${timeInZone})`;\n }\n });\n });\n });\n \n // Handle window resize to fix map rendering issues\n window.addEventListener('resize', () => {\n if (map) {\n map.invalidateSize();\n }\n });\n});",[],[219],["D",1747325204969],[],[18],"0ee59938-31a8-11f0-ae47-569c3dd06744","index-with-map.html","0ee599e2-31a8-11f0-ae47-569c3dd06744",10,["D",1747325832263],"\n\n\n \n \n World Clock with Map\n \n \n \n \n \n \n \n\n\n

World Clock

\n \n

\n Select Timezone:\n \n

\n \n

00:00:00

Loading date...

Loading timezone...

\n \n

\n Map shows approximate location of selected timezone\n

\n \n \n \n \n\n",[],[230],"48651a12-31a8-11f0-851a-569c3dd06744","README.md","63080908-31a6-11f0-99fd-569c3dd06744",14,["D",1747325928722],"# World Clock\n\nA simple, interactive world clock web application that allows users to view the current time in different timezones around the world.\n\n## Features\n\n- Display current time and date\n- Select from a wide range of timezones organized by region\n- Real-time clock updates\n- Responsive design that works on mobile and desktop\n- Visual feedback when time updates\n\n## Implementation Details\n\nThis project is built with:\n\n- Vanilla JavaScript (no frameworks)\n- Tailwind CSS for styling (via CDN)\n- HTML5\n\nThe application uses the browser's built-in `Date` object and `Intl.DateTimeFormat` API to handle timezone conversions and formatting.\n\n## File Structure\n\n- `index.html` - Main HTML file with the clock display and timezone selector\n- `script.js` - JavaScript to handle the clock functionality and timezone selection\n- `style.css` - Additional CSS styles beyond Tailwind\n- `server.js` - Server-side code to handle HTTP requests and serve the static files\n\n## How It Works\n\n1. The application loads with the user's local timezone selected by default\n2. Users can select a different timezone from the dropdown menu\n3. The clock updates every second to show the current time in the selected timezone\n4. The date and timezone information are also displayed\n\n## Future Improvements\n\n- Add ability to save favorite timezones\n- Add a dark mode toggle\n- Add multiple clocks on the same page for comparison\n\n## Feature Branches\n\n### Map Visualization (In Progress)\n\nA feature branch is in progress to add a map visualization of the selected timezone. This feature:\n\n- Shows an interactive map that highlights the selected timezone location\n- Updates the map view when a different timezone is selected\n- Provides a visual context for the time differences\n\nTo test this feature:\n- Access the application with `?map=true` parameter\n- Or navigate to `/map` endpoint\n\nSee `MAP-FEATURE-README.md` for more details.",[],[238],"402f7fa4-31a8-11f0-98fc-569c3dd06744","MAP-FEATURE-README.md","402f8094-31a8-11f0-98fc-569c3dd06744",13,["D",1747325914952],"# Map Visualization Feature for World Clock\n\nThis feature branch adds an interactive map visualization to the world clock application. The map shows the approximate location of the selected timezone.\n\n## New Features\n\n- Interactive map that updates when a timezone is selected\n- Visual representation of the current timezone location\n- Responsive design that works on both mobile and desktop\n- Feature flag to enable/disable the map functionality\n\n## Implementation Details\n\nThis feature uses:\n- Leaflet.js for the map visualization\n- A mapping of timezone identifiers to geographic coordinates\n- Responsive layout with grid for desktop and stacked for mobile\n\n## Files Added/Modified\n\n- `index-with-map.html` - HTML file with map component added\n- `script-with-map.js` - JavaScript file with map functionality\n- `server-with-map.js` - Updated server file with feature flag support\n\n## How to Test\n\n1. Access the application with the map feature by adding `?map=true` to the URL\n2. Or navigate to `/map` which will redirect to the map version\n3. Select different timezones from the dropdown\n4. Observe how the map updates to show the approximate location\n5. Test on different screen sizes to ensure responsive behavior\n\n## Implementation Notes\n\n- The map uses OpenStreetMap tiles which don't require an API key\n- Each timezone has an approximate geographic coordinate associated with it\n- When a timezone is selected, the map centers on that location\n- For local time, the map attempts to use the browser's timezone to determine location\n- The map includes a marker with a popup showing the timezone name\n\n## Future Improvements\n\n- Add timezone boundary polygons instead of just center points\n- Add day/night visualization overlay\n- Allow clicking on the map to select the nearest timezone\n- Add search functionality for locations",[],[246],["D",1747324993095],{"_11":12,"_134":68},{"_11":12,"_130":-5,"_67":68,"_30":66,"_131":132,"_133":24},{"_40":121,"_13":16,"_34":37,"_122":87,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":-5,"_128":14,"_129":12},"ctx",{"_52":-5,"_153":290,"_291":292,"_293":294,"_295":24,"_296":24,"_297":24,"_298":159,"_299":-5,"_300":-7,"_301":-7,"_302":26,"_303":24,"_304":24,"_305":-5,"_306":24,"_307":24,"_308":24,"_309":-5},"ENV",{"_261":262,"_263":264,"_265":16,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html