\n \n \n \n",[],[145,133],"18a9a9a0-56a1-11f0-a86a-f69ea79377d9",["D",1751391035109],"\n",[],[145,151],"56228e96-6ebb-11f0-b647-0224a6c84d84",["D",1754041133135],"/** @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}",[],[145,121,114],"18a9a842-56a1-11f0-a86a-f69ea79377d9",["D",1751391035109],[419],[145,121],["D",1751391035109],[418,420,421,422,423],[145],"18a9a054-56a1-11f0-a86a-f69ea79377d9",["D",1751391035109],"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",[],[96,107],["D",1751391035109],[416],[96],["D",1751391035109],{"_11":12,"_343":101},{"_11":12,"_339":-5,"_100":101,"_25":-5,"_340":341,"_342":305},{"_52":288,"_13":16,"_46":49,"_328":293,"_329":91,"_330":331,"_332":297,"_333":334,"_335":336,"_337":14,"_338":12},"ctx",{"_65":-5,"_365":515,"_516":517,"_518":519,"_520":24,"_521":24,"_522":24,"_523":305,"_524":-5,"_525":-7,"_526":-7,"_527":20,"_528":24,"_529":24,"_530":-5,"_531":24,"_532":24,"_533":24,"_534":-5},"ENV",{"_486":487,"_488":489,"_490":16,"_491":492,"_493":494,"_495":496,"_497":498,"_499":500,"_501":502,"_503":504,"_505":506,"_507":508,"_509":510,"_511":512,"_513":514},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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