[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_212":213,"_214":215},"routes/_app.x.$handle.$name",{"_92":91,"_31":42,"_100":82,"_26":101,"_13":14,"_102":-5,"_11":103,"_104":105,"_106":107,"_108":109,"_110":111,"_20":-5,"_112":-5,"_113":-5,"_114":24,"_115":116,"_117":118,"_119":-5,"_120":-5,"_121":122},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":-5,"_54":24,"_55":-5,"_56":-5,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":-5,"_64":-5,"_65":66,"_67":66,"_68":69,"_70":69,"_71":69,"_72":66,"_73":66,"_74":75,"_76":77,"_78":79,"_80":24},"version",10,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","index-with-map.html","latestPath","fileId","0ee599e2-31a8-11f0-ae47-569c3dd06744","name","fileType","content","\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","createdAt",["D",1747325832263],"branchVersion","branchId","1ab6fee8-31a6-11f0-b87b-569c3dd06744","id","1ab6a74a-31a6-11f0-b87b-569c3dd06744","worldclock",["D",1747324993095],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A simple, interactive world clock","imageUrl","3a4facd0-197a-11f0-a97f-49be2029e0a3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","9659b6c6-5985-4ad1-8fef-2b6e8ce6def7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_92":91,"_99":95},"org",{"_92":91,"_93":-5,"_94":95,"_18":52,"_96":97,"_98":24},"branch",{"_13":81,"_31":82,"_40":39,"_83":41,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":42,"_90":91},"isOwned",19,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","evilmathwalnuts","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydmpuSzVwNEtyblBsUW9MNjZrUFFpbEdkdEYifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":208,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":-5,"_54":24,"_55":-5,"_56":-5,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":-5,"_64":-5,"_65":66,"_67":66,"_68":69,"_70":69,"_71":69,"_72":66,"_73":66,"_74":209,"_76":210,"_78":211,"_80":24},"tree",[183,184,185,186,187,188],"files",[183,184,185,186,187,188],"counts",{"_173":58,"_174":144,"_175":58,"_176":177,"_178":179},"contents",[123,124,125,126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_40":166,"_31":167,"_29":168,"_132":-5,"_38":39,"_37":169,"_134":24,"_35":170,"_13":144,"_32":20,"_33":171,"_23":24,"_137":-5,"_26":172},{"_40":163,"_31":27,"_29":30,"_132":-5,"_38":39,"_37":14,"_134":118,"_35":164,"_13":58,"_32":20,"_33":34,"_23":24,"_137":-5,"_26":165},{"_40":156,"_31":157,"_29":158,"_132":-5,"_38":39,"_37":159,"_134":118,"_35":160,"_13":133,"_32":20,"_33":161,"_23":24,"_137":-5,"_26":162},{"_40":148,"_31":149,"_29":150,"_132":-5,"_38":39,"_37":151,"_134":118,"_35":152,"_13":58,"_32":153,"_33":154,"_23":24,"_137":-5,"_26":155},{"_40":139,"_31":140,"_29":141,"_132":-5,"_38":39,"_37":142,"_134":24,"_35":143,"_13":144,"_32":145,"_33":146,"_23":24,"_137":-5,"_26":147},{"_40":129,"_31":130,"_29":131,"_132":-5,"_38":39,"_37":133,"_134":118,"_35":135,"_13":58,"_32":20,"_33":136,"_23":24,"_137":-5,"_26":138},"4e2126b4-31a6-11f0-b87b-569c3dd06744","style.css","4e212772-31a6-11f0-b87b-569c3dd06744","parentId",2,"latest",["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}","label",[130],"9b532d06-31a6-11f0-a61a-569c3dd06744","server.js","9537c33c-31a6-11f0-ae66-569c3dd06744",8,["D",1747325208864],1,"http","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}",[140],"5c27cbdc-31a6-11f0-8d22-569c3dd06744","script.js","5c27ccb8-31a6-11f0-8d22-569c3dd06744",3,["D",1747325102881],"script","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});",[149],"9900eb9c-31a6-11f0-a334-569c3dd06744","index.html","4a7a4e82-31a6-11f0-92f1-569c3dd06744",7,["D",1747325204969],"\n\n\n \n \n World Clock\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 \n \n\n",[157],"0ee59938-31a8-11f0-ae47-569c3dd06744",["D",1747325832263],[27],"a07a6c54-31a6-11f0-828d-569c3dd06744","README.md","63080908-31a6-11f0-99fd-569c3dd06744",9,["D",1747325217509],"# 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 a map visualization of the selected timezone\n- Add multiple clocks on the same page for comparison",[167],"pulls","branches","forks","envVars",{"_180":58,"_182":58},"connections",{"_180":58,"_181":58},"count","unfilledCount","emptyCount",{"_40":166,"_31":167,"_29":168,"_132":-5,"_38":39,"_37":169,"_134":24,"_35":205,"_13":144,"_32":20,"_33":171,"_23":24,"_137":-5,"_190":206,"_26":207},{"_40":163,"_31":27,"_29":30,"_132":-5,"_38":39,"_37":14,"_134":118,"_35":202,"_13":58,"_32":20,"_33":34,"_23":24,"_137":-5,"_190":203,"_26":204},{"_40":156,"_31":157,"_29":158,"_132":-5,"_38":39,"_37":159,"_134":118,"_35":199,"_13":133,"_32":20,"_33":161,"_23":24,"_137":-5,"_190":200,"_26":201},{"_40":148,"_31":149,"_29":150,"_132":-5,"_38":39,"_37":151,"_134":118,"_35":196,"_13":58,"_32":153,"_33":154,"_23":24,"_137":-5,"_190":197,"_26":198},{"_40":139,"_31":140,"_29":141,"_132":-5,"_38":39,"_37":142,"_134":24,"_35":193,"_13":144,"_32":145,"_33":146,"_23":24,"_137":-5,"_190":194,"_26":195},{"_40":129,"_31":130,"_29":131,"_132":-5,"_38":39,"_37":133,"_134":118,"_35":189,"_13":58,"_32":20,"_33":136,"_23":24,"_137":-5,"_190":191,"_26":192},["D",1747325079355],"children",[],[130],["D",1747325208864],[],[140],["D",1747325102881],[],[149],["D",1747325204969],[],[157],["D",1747325832263],[],[27],["D",1747325217509],[],[167],["D",1747324993095],{"_92":91,"_99":95},{"_92":91,"_93":-5,"_94":95,"_18":52,"_96":97,"_98":24},{"_13":81,"_31":82,"_40":39,"_83":41,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":42,"_90":91},"ctx",{"_74":-5,"_120":245,"_246":247,"_248":249,"_250":24,"_251":24,"_252":24,"_253":118,"_254":-5,"_255":-7,"_256":-7,"_257":58,"_258":24,"_259":24,"_260":-5,"_261":24,"_262":24,"_263":24,"_264":-5},"ENV",{"_216":217,"_218":219,"_220":82,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244},"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"]

Diff · v10