\n \n \n \n",[],[98,149],"18a9a9a0-56a1-11f0-a86a-f69ea79377d9","favicon.svg","76f9d322-9a95-4790-9983-c7d9525e6afc",["D",1751391035109],"\n",[],[98,157],"18a9a842-56a1-11f0-a86a-f69ea79377d9","components","daeac15d-5b80-4e94-8a9d-bc3d737aeec7",["D",1751391035109],[169],[98,164],{"_35":170,"_13":171,"_66":172,"_68":165,"_69":70,"_71":173,"_73":74,"_37":174,"_17":175,"_77":144,"_78":176,"_80":50,"_81":-5,"_114":177,"_18":178},"56228e96-6ebb-11f0-b647-0224a6c84d84","App.tsx","04da3ad1-5aa9-4054-8911-79b025f3f24c",20,["D",1754041133135],13,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface TimeRemaining {\n days: number;\n hours: number;\n minutes: number;\n seconds: number;\n}\n\ninterface TimeElapsed {\n days: number;\n hours: number;\n minutes: number;\n}\n\nexport function App() {\n const [timeRemaining, setTimeRemaining] = useState(null);\n const [timeElapsed, setTimeElapsed] = useState(null);\n const [targetTime, setTargetTime] = useState(null);\n const [error, setError] = useState(\"\");\n const [isExpired, setIsExpired] = useState(false);\n const [showInstructions, setShowInstructions] = useState(false);\n const [showTimeInput, setShowTimeInput] = useState(false);\n const [timeInput, setTimeInput] = useState(\"\");\n\n // Parse query string to get target time\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const timeParam = urlParams.get('time');\n\n if (!timeParam) {\n setShowTimeInput(true);\n return;\n }\n\n try {\n let parsedTime: Date;\n\n // Check if it's a Unix timestamp (all digits)\n if (/^\\d+$/.test(timeParam)) {\n const timestamp = parseInt(timeParam);\n // Handle both seconds and milliseconds timestamps\n parsedTime = new Date(timestamp < 10000000000 ? timestamp * 1000 : timestamp);\n } else {\n // Try to parse as ISO date string\n parsedTime = new Date(timeParam);\n }\n\n if (isNaN(parsedTime.getTime())) {\n setError(\"Invalid time format. Please use ISO date format with timezone (YYYY-MM-DDTHH:MM:SSZ) or Unix timestamp.\");\n return;\n }\n\n setTargetTime(parsedTime);\n setError(\"\");\n } catch (err) {\n setError(\"Failed to parse the provided time. Please check the format.\");\n }\n }, []);\n\n // Update countdown every second\n useEffect(() => {\n if (!targetTime) return;\n\n const updateCountdown = () => {\n const now = new Date();\n const difference = targetTime.getTime() - now.getTime();\n\n if (difference <= 0) {\n setIsExpired(true);\n setTimeRemaining({ days: 0, hours: 0, minutes: 0, seconds: 0 });\n\n // Calculate elapsed time since target\n const elapsed = now.getTime() - targetTime.getTime();\n const elapsedDays = Math.floor(elapsed / (1000 * 60 * 60 * 24));\n const elapsedHours = Math.floor((elapsed % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n const elapsedMinutes = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60));\n\n setTimeElapsed({ days: elapsedDays, hours: elapsedHours, minutes: elapsedMinutes });\n return;\n }\n\n const days = Math.floor(difference / (1000 * 60 * 60 * 24));\n const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));\n const seconds = Math.floor((difference % (1000 * 60)) / 1000);\n\n setTimeRemaining({ days, hours, minutes, seconds });\n setIsExpired(false);\n };\n\n // Update immediately\n updateCountdown();\n\n // Set up interval to update every second\n const interval = setInterval(updateCountdown, 1000);\n\n return () => clearInterval(interval);\n }, [targetTime]);\n\n const handleTimeSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!timeInput.trim()) return;\n\n // Redirect to the same page with the time parameter\n const newUrl = new URL(window.location.href);\n newUrl.searchParams.set('time', timeInput.trim());\n window.location.href = newUrl.toString();\n };\n\n // Time input state\n if (showTimeInput) {\n return (\n

⏱️

Set Countdown Timer

Enter a target date and time to start your countdown:

\n\n

\n \n Target Time\n \n setTimeInput(e.target.value)}\n placeholder=\"2025-12-31T23:59:59Z or 1735689600000\"\n className=\"w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 transition-colors\"\n style={{\n borderColor: '#dce0e8',\n backgroundColor: '#e6e9ef',\n color: '#4c4f69'\n }}\n onFocus={(e) => {\n e.target.style.borderColor = '#8839ef';\n e.target.style.boxShadow = '0 0 0 2px rgba(136, 57, 239, 0.2)';\n }}\n onBlur={(e) => {\n e.target.style.borderColor = '#dce0e8';\n e.target.style.boxShadow = 'none';\n }}\n />\n

\n\n (e.target as HTMLElement).style.backgroundColor = '#7c3aed'}\n onMouseLeave={(e) => (e.target as HTMLElement).style.backgroundColor = '#8839ef'}\n >\n Start Countdown\n \n \n\n

Supported formats:

• ISO with timezone: 2025-12-31T23:59:59Z

• ISO with offset: 2025-12-31T18:59:59-05:00

• ISO local time: 2025-12-31T23:59:59

• Unix timestamp: 1735689600000

\n );\n }\n\n // Error state\n if (error) {\n return (\n

⚠️

Error

{error}

Examples:

?time=2025-12-31T23:59:59Z (UTC)

?time=2025-12-31T18:59:59-05:00 (EST)

?time=2025-12-31T23:59:59 (local time)

?time=1735689600000 (Unix timestamp)

\n );\n }\n\n // Expired state\n if (isExpired) {\n const formatElapsedTime = (elapsed: TimeElapsed) => {\n const parts = [];\n if (elapsed.days > 0) parts.push(`${elapsed.days} day${elapsed.days !== 1 ? 's' : ''}`);\n if (elapsed.hours > 0) parts.push(`${elapsed.hours} hour${elapsed.hours !== 1 ? 's' : ''}`);\n if (elapsed.minutes > 0) parts.push(`${elapsed.minutes} minute${elapsed.minutes !== 1 ? 's' : ''}`);\n\n if (parts.length === 0) return 'just now';\n if (parts.length === 1) return parts[0];\n if (parts.length === 2) return `${parts[0]} and ${parts[1]}`;\n return `${parts[0]}, ${parts[1]}, and ${parts[2]}`;\n };\n\n return (\n

⏰

Time's Up!

The countdown has reached zero.

\n {targetTime && (\n

\n Target time was: {targetTime.toLocaleString()}\n

\n {timeElapsed && (\n

\n {formatElapsedTime(timeElapsed)} ago\n

\n )}\n

\n );\n }\n\n // Loading state\n if (!timeRemaining) {\n return (\n

Loading countdown...

\n );\n }\n\n // Main countdown display\n return (\n

\n Countdown Timer\n

\n\n {targetTime && (\n

\n Counting down to: {targetTime.toLocaleString()}\n

\n UTC: {targetTime.toISOString()} | Local: {targetTime.toLocaleString()}\n

\n )}\n\n

\n {timeRemaining.days.toString().padStart(2, '0')}\n

\n Days\n

\n\n

\n {timeRemaining.hours.toString().padStart(2, '0')}\n

\n Hours\n

\n\n

\n {timeRemaining.minutes.toString().padStart(2, '0')}\n

\n Minutes\n

\n\n

\n {timeRemaining.seconds.toString().padStart(2, '0')}\n

\n Seconds\n

\n\n

\n setShowInstructions(!showInstructions)}\n className=\"inline-flex items-center text-sm font-medium transition-colors duration-200\"\n style={{ color: '#9ca0b0' }}\n onMouseEnter={(e) => (e.target as HTMLElement).style.color = '#6c6f85'}\n onMouseLeave={(e) => (e.target as HTMLElement).style.color = '#9ca0b0'}\n >\n How does this work?\n \n ▼\n \n \n\n {showInstructions && (\n

Setting a Target Time

Add a target time to the URL using the ?time= parameter:

\n\n

\n ?time=2025-07-26T00:00:00Z\n

UTC timezone

\n\n

\n ?time=2025-07-26T00:00:00-05:00\n

With timezone offset

\n\n

\n ?time=1735689600000\n

Unix timestamp

\n )}\n

\n );\n}",[],[98,164,171],["D",1751391035109],[182],[104],{"_35":183,"_13":184,"_66":185,"_68":105,"_69":70,"_71":86,"_73":74,"_37":186,"_17":76,"_77":187,"_78":188,"_80":50,"_81":189,"_114":190,"_18":191},"18a9a054-56a1-11f0-a86a-f69ea79377d9","index.ts","0a9fcfa3-39c8-41b9-b6ff-d5f90bb6b495",["D",1751391035109],"http","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;","countdown",[],[104,184],"18a05c10-56a1-11f0-a86a-f69ea79377d9",["D",1751391035109],"legacyEnvVars","httpPrivacy","description","URL-shareable countdown timer","imageUrl","userId","7537ab70-4dd9-11f0-af69-ad2d81fb9912","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","d95f9e62-1d7b-4f0c-9b4c-91e2bf8736e5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_236":232},"org",{"_11":12,"_230":-5,"_231":232,"_199":-5,"_233":234,"_235":74},"branch",{"_17":173,"_13":16,"_35":70,"_41":192,"_44":36,"_45":226,"_227":52,"_228":42,"_229":56,"_57":14,"_53":12},67,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a879b34a-e7a4-4fd4-0f43-db7c3cde6200/square512?exp=1789581599&sig=d4f81a9f290ab66586f5f2ce39824ba8fce5edcd73f216d778dc7fb30ceb1b54","tier","business","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":192,"_13":14,"_37":318,"_48":-5,"_194":50,"_51":52,"_195":52,"_196":197,"_198":-5,"_199":200,"_201":185,"_202":74,"_203":74,"_204":-5,"_205":76,"_55":206,"_207":-5,"_208":-5,"_209":-5,"_210":-5,"_211":212,"_213":212,"_214":215,"_216":215,"_217":215,"_218":212,"_219":212,"_220":319,"_222":320,"_224":321,"_49":50},[282,284,291,292,293],"files",[282,283,284,285,286,287,288,289,290,291,292,293],"counts",{"_273":76,"_274":86,"_275":76,"_34":276,"_277":278},[263,264,265,266,267],"upstreamProject",{"_35":42,"_13":58,"_196":259,"_198":260,"_51":52,"_220":261},"upstreamBranch",{"_35":36,"_37":257,"_39":258,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789581599&sig=be8c9241dcaf80ae72eff5d4763f3300ec6426a8bddc365a5efaae5f85e4dee1",{"_11":54,"_236":262},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789581599&sig=bed85510764f48a9de82762af4b4ce99c525d0ab75e5b57f327c71a53e183d4a",{"_35":103,"_13":104,"_66":105,"_68":-5,"_69":70,"_71":86,"_73":74,"_37":106,"_17":76,"_77":101,"_78":-5,"_80":50,"_81":-5,"_18":272},{"_35":97,"_13":98,"_66":99,"_68":-5,"_69":70,"_71":86,"_73":74,"_37":100,"_17":76,"_77":101,"_78":-5,"_80":50,"_81":-5,"_18":271},{"_35":90,"_13":91,"_66":92,"_68":-5,"_69":70,"_71":93,"_73":74,"_37":94,"_17":76,"_77":24,"_78":95,"_80":50,"_81":-5,"_18":270},{"_35":83,"_13":84,"_66":85,"_68":-5,"_69":70,"_71":86,"_73":74,"_37":87,"_17":76,"_77":24,"_78":88,"_80":50,"_81":-5,"_18":269},{"_35":64,"_13":65,"_66":67,"_68":-5,"_69":70,"_71":72,"_73":74,"_37":75,"_17":76,"_77":24,"_78":79,"_80":50,"_81":-5,"_18":268},[65],[84],[91],[98],[104],"pulls","branches","forks",{"_279":76,"_281":76},"connections",{"_279":76,"_280":76},"count","unfilledCount","emptyCount",{"_35":103,"_13":104,"_66":105,"_68":-5,"_69":70,"_71":86,"_73":74,"_37":179,"_17":76,"_77":101,"_78":-5,"_80":50,"_81":-5,"_114":316,"_18":317},{"_35":183,"_13":184,"_66":185,"_68":105,"_69":70,"_71":86,"_73":74,"_37":186,"_17":76,"_77":187,"_78":188,"_80":50,"_81":189,"_114":314,"_18":315},{"_35":97,"_13":98,"_66":99,"_68":-5,"_69":70,"_71":86,"_73":74,"_37":123,"_17":76,"_77":101,"_78":-5,"_80":50,"_81":-5,"_114":312,"_18":313},{"_35":163,"_13":164,"_66":165,"_68":99,"_69":70,"_71":86,"_73":74,"_37":166,"_17":76,"_77":101,"_78":-5,"_80":50,"_81":-5,"_114":310,"_18":311},{"_35":170,"_13":171,"_66":172,"_68":165,"_69":70,"_71":173,"_73":74,"_37":174,"_17":175,"_77":144,"_78":176,"_80":50,"_81":-5,"_114":308,"_18":309},{"_35":156,"_13":157,"_66":158,"_68":99,"_69":70,"_71":86,"_73":74,"_37":159,"_17":76,"_77":24,"_78":160,"_80":50,"_81":-5,"_114":306,"_18":307},{"_35":148,"_13":149,"_66":150,"_68":99,"_69":70,"_71":151,"_73":74,"_37":152,"_17":86,"_77":24,"_78":153,"_80":50,"_81":-5,"_114":304,"_18":305},{"_35":139,"_13":140,"_66":141,"_68":99,"_69":70,"_71":142,"_73":74,"_37":143,"_17":93,"_77":144,"_78":145,"_80":50,"_81":-5,"_114":302,"_18":303},{"_35":131,"_13":132,"_66":133,"_68":99,"_69":70,"_71":134,"_73":74,"_37":135,"_17":86,"_77":24,"_78":136,"_80":50,"_81":-5,"_114":300,"_18":301},{"_35":90,"_13":91,"_66":92,"_68":-5,"_69":70,"_71":93,"_73":74,"_37":120,"_17":76,"_77":24,"_78":95,"_80":50,"_81":-5,"_114":298,"_18":299},{"_35":83,"_13":84,"_66":85,"_68":-5,"_69":70,"_71":86,"_73":74,"_37":117,"_17":76,"_77":24,"_78":88,"_80":50,"_81":-5,"_114":296,"_18":297},{"_35":64,"_13":65,"_66":67,"_68":-5,"_69":70,"_71":72,"_73":74,"_37":113,"_17":76,"_77":24,"_78":79,"_80":50,"_81":-5,"_114":294,"_18":295},[],[65],[],[84],[],[91],[],[98,132],[],[98,140],[],[98,149],[],[98,157],[],[98,164,171],[286],[98,164],[285,287,288,289,290],[98],[],[104,184],[283],[104],["D",1751391035109],{"_11":12,"_236":232},{"_11":12,"_230":-5,"_231":232,"_199":-5,"_233":234,"_235":74},{"_17":173,"_13":16,"_35":70,"_41":192,"_44":36,"_45":226,"_227":52,"_228":42,"_229":56,"_57":14,"_53":12},"ctx",{"_220":-5,"_254":355,"_356":357,"_358":359,"_360":50,"_361":50,"_362":50,"_363":74,"_364":-5,"_365":-7,"_366":-7,"_367":76,"_368":50,"_369":50,"_370":-5,"_371":50,"_372":50,"_373":50,"_374":-5},"ENV",{"_326":327,"_328":329,"_330":16,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Code