\n \n \n \n",[],[117,145],"18a9a9a0-56a1-11f0-a86a-f69ea79377d9","favicon.svg","76f9d322-9a95-4790-9983-c7d9525e6afc",["D",1751391035109],"\n",[],[117,153],"18a9a842-56a1-11f0-a86a-f69ea79377d9","components","daeac15d-5b80-4e94-8a9d-bc3d737aeec7",["D",1751391035109],[165],[117,160],{"_36":166,"_13":167,"_63":168,"_65":161,"_67":68,"_69":169,"_71":72,"_38":170,"_17":171,"_75":140,"_77":172,"_79":51,"_80":-5,"_98":173,"_18":174},"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}",[],[117,160,167],["D",1751391035109],[178],[19],{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_38":179,"_17":74,"_75":76,"_77":78,"_79":51,"_80":81,"_98":180,"_18":181},["D",1751391035109],[],[19,62],"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,"_226":222},"org",{"_11":12,"_220":-5,"_221":222,"_189":-5,"_223":224,"_225":72},"branch",{"_17":169,"_13":16,"_36":68,"_42":182,"_45":37,"_46":216,"_217":53,"_218":43,"_219":57,"_58":14,"_54":12},67,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a879b34a-e7a4-4fd4-0f43-db7c3cde6200/square512?exp=1789577999&sig=2dbc3f5d1ee5cd50eb8aa60001f635c3c1646ff7c108f509dcc5257318afdad7","tier","business","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":182,"_13":14,"_38":302,"_49":-5,"_184":51,"_52":53,"_185":53,"_186":187,"_188":-5,"_189":190,"_191":64,"_192":72,"_193":72,"_194":-5,"_195":74,"_56":196,"_197":-5,"_198":-5,"_199":-5,"_200":-5,"_201":202,"_203":202,"_204":205,"_206":205,"_207":205,"_208":202,"_209":202,"_210":303,"_212":304,"_214":305,"_50":51},[266,268,275,276,277],"files",[266,267,268,269,270,271,272,273,274,275,276,277],"counts",{"_257":74,"_258":70,"_259":74,"_35":260,"_261":262},[255],{"_36":83,"_13":19,"_63":66,"_65":-5,"_67":68,"_69":70,"_71":72,"_38":84,"_17":74,"_75":85,"_77":-5,"_79":51,"_80":-5,"_18":254},"upstreamProject",{"_36":43,"_13":59,"_186":250,"_188":251,"_52":53,"_210":252},"upstreamBranch",{"_36":37,"_38":248,"_40":249,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"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=1789577999&sig=2ab81189fced4fb576e9436da67acbaf730951eef80212e8dc3c2bf0f6be2f57",{"_11":55,"_226":253},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789577999&sig=aa7aec25480c67f41f9650e8445afc21cf1a6c5fd3969752b90fbd3f6a604c46",[19],{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_38":73,"_17":74,"_75":76,"_77":78,"_79":51,"_80":81,"_18":256},[19,62],"pulls","branches","forks",{"_263":74,"_265":74},"connections",{"_263":74,"_264":74},"count","unfilledCount","emptyCount",{"_36":83,"_13":19,"_63":66,"_65":-5,"_67":68,"_69":70,"_71":72,"_38":175,"_17":74,"_75":85,"_77":-5,"_79":51,"_80":-5,"_98":300,"_18":301},{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_38":179,"_17":74,"_75":76,"_77":78,"_79":51,"_80":81,"_98":298,"_18":299},{"_36":116,"_13":117,"_63":118,"_65":-5,"_67":68,"_69":70,"_71":72,"_38":119,"_17":74,"_75":85,"_77":-5,"_79":51,"_80":-5,"_98":296,"_18":297},{"_36":159,"_13":160,"_63":161,"_65":118,"_67":68,"_69":70,"_71":72,"_38":162,"_17":74,"_75":85,"_77":-5,"_79":51,"_80":-5,"_98":294,"_18":295},{"_36":166,"_13":167,"_63":168,"_65":161,"_67":68,"_69":169,"_71":72,"_38":170,"_17":171,"_75":140,"_77":172,"_79":51,"_80":-5,"_98":292,"_18":293},{"_36":152,"_13":153,"_63":154,"_65":118,"_67":68,"_69":70,"_71":72,"_38":155,"_17":74,"_75":24,"_77":156,"_79":51,"_80":-5,"_98":290,"_18":291},{"_36":144,"_13":145,"_63":146,"_65":118,"_67":68,"_69":147,"_71":72,"_38":148,"_17":70,"_75":24,"_77":149,"_79":51,"_80":-5,"_98":288,"_18":289},{"_36":135,"_13":136,"_63":137,"_65":118,"_67":68,"_69":138,"_71":72,"_38":139,"_17":111,"_75":140,"_77":141,"_79":51,"_80":-5,"_98":286,"_18":287},{"_36":127,"_13":128,"_63":129,"_65":118,"_67":68,"_69":130,"_71":72,"_38":131,"_17":70,"_75":24,"_77":132,"_79":51,"_80":-5,"_98":284,"_18":285},{"_36":108,"_13":109,"_63":110,"_65":-5,"_67":68,"_69":111,"_71":72,"_38":112,"_17":74,"_75":24,"_77":113,"_79":51,"_80":-5,"_98":282,"_18":283},{"_36":101,"_13":102,"_63":103,"_65":-5,"_67":68,"_69":70,"_71":72,"_38":104,"_17":74,"_75":24,"_77":105,"_79":51,"_80":-5,"_98":280,"_18":281},{"_36":92,"_13":93,"_63":94,"_65":-5,"_67":68,"_69":95,"_71":72,"_38":96,"_17":74,"_75":24,"_77":97,"_79":51,"_80":-5,"_98":278,"_18":279},[],[93],[],[102],[],[109],[],[117,128],[],[117,136],[],[117,145],[],[117,153],[],[117,160,167],[270],[117,160],[269,271,272,273,274],[117],[],[19,62],[267],[19],["D",1751391035109],{"_11":12,"_226":222},{"_11":12,"_220":-5,"_221":222,"_189":-5,"_223":224,"_225":72},{"_17":169,"_13":16,"_36":68,"_42":182,"_45":37,"_46":216,"_217":53,"_218":43,"_219":57,"_58":14,"_54":12},"ctx",{"_210":-5,"_245":339,"_340":341,"_342":343,"_344":51,"_345":51,"_346":51,"_347":72,"_348":-5,"_349":-7,"_350":-7,"_351":74,"_352":51,"_353":51,"_354":-5,"_355":51,"_356":51,"_357":51,"_358":-5},"ENV",{"_310":311,"_312":313,"_314":16,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338},"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"]