Clock

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_186":187,"_188":189},"routes/_app.x.$handle.$name",{"_102":101,"_38":51,"_111":92,"_33":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_26":-5,"_123":-5,"_124":-5,"_125":31,"_126":127,"_128":64,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":37,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":31},"version",8,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","2207d1a4-433b-40b7-973c-f2c60744b052","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","60f3e03a-6a83-11f1-b5c1-1607ee4eb77e","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18 */\nimport { renderToString } from \"https://esm.sh/react-dom@18/server\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst FONTS = [\n [\"system-ui, -apple-system, sans-serif\", \"System Sans\"],\n [\"Georgia, 'Times New Roman', serif\", \"Serif\"],\n [\"'Courier New', monospace\", \"Monospace\"],\n [\"'Trebuchet MS', sans-serif\", \"Trebuchet\"],\n [\"'Comic Sans MS', cursive\", \"Comic Sans\"],\n [\"Impact, sans-serif\", \"Impact\"],\n];\n\nconst WEIGHTS = [\n [\"300\", \"Light\"],\n [\"400\", \"Regular\"],\n [\"700\", \"Bold\"],\n [\"900\", \"Black\"],\n];\n\nfunction Page() {\n return (\n \n \n \n \n Clock\n \n \n \n \n\n

--:--:--

\n\n \n\n \n \n \n );\n}\n\nexport default async function (req: Request): Promise {\n const { pathname } = new URL(req.url);\n if (pathname === \"/style.css\") return serveFile(\"/style.css\", import.meta.url);\n if (pathname === \"/clock.js\") return serveFile(\"/clock.js\", import.meta.url);\n return new Response(\"\" + renderToString(), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n","createdAt",["D",1781724989944],"branchVersion","branchId","e5d5f0fe-86c0-4459-a0ec-dd66dc1d615c","id","b987eb80-8d68-49b2-996e-9db99cf611e8","simple-clock",["D",1781724779384],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A simple live clock web page","imageUrl","5a43b2e2-dfb4-4e2f-9e23-c08c11ec9f72","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019ed712-094e-718a-98f0-73e73c2c5464","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_110":106},"org",{"_102":101,"_103":104,"_105":106,"_19":61,"_107":108,"_109":31},"branch",{"_13":91,"_38":92,"_49":48,"_93":50,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":51,"_100":101},"isOwned",11,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","ben78","handle","displayName","Benjamin Hyland","avatar","https://lh3.googleusercontent.com/a/ACg8ocIZPuHkau3g_0jdSA3RNuuHCyYET7Xzrcw7vzD6vAsE-eqx-dyu=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_38":51,"_44":182,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":37,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":183,"_86":184,"_88":185,"_90":31},"tree",[169,170,171],"files",[169,170,171],"counts",{"_158":68,"_159":160,"_161":68,"_162":163,"_164":165},"contents",[133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_49":150,"_38":151,"_36":152,"_139":-5,"_47":48,"_46":153,"_141":31,"_44":154,"_13":68,"_39":155,"_41":156,"_30":31,"_144":-5,"_33":157},{"_49":146,"_38":34,"_36":37,"_139":-5,"_47":48,"_46":14,"_141":64,"_44":147,"_13":148,"_39":40,"_41":43,"_30":31,"_144":-5,"_33":149},{"_49":136,"_38":137,"_36":138,"_139":-5,"_47":48,"_46":140,"_141":31,"_44":142,"_13":68,"_39":26,"_41":143,"_30":31,"_144":-5,"_33":145},"9c4010cb-03d7-4a5d-8025-29881c960c3c","style.css","93d9c35c-6a83-11f1-8302-1607ee4eb77e","parentId",2,"latest",["D",1781724877891],"* { margin: 0; box-sizing: border-box; }\nbody {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: system-ui, -apple-system, sans-serif;\n background: #0a0f1c;\n color: #fff;\n transition: background 0.3s;\n}\n#clock { display: flex; flex-direction: column; align-items: center; gap: 1rem; }\n#time {\n font-size: clamp(3rem, 18vw, 9rem);\n font-weight: 700;\n font-variant-numeric: tabular-nums;\n letter-spacing: 0.05em;\n}\n#time.glow { text-shadow: 0 0 30px currentColor; }\n#date { font-size: clamp(1rem, 4vw, 1.5rem); opacity: 0.7; }\n\n#gear {\n position: fixed;\n top: 1rem;\n right: 1rem;\n background: rgba(255,255,255,0.1);\n border: none;\n border-radius: 50%;\n width: 2.75rem;\n height: 2.75rem;\n font-size: 1.25rem;\n cursor: pointer;\n transition: transform 0.2s, background 0.2s;\n}\n#gear:hover { transform: rotate(45deg); background: rgba(255,255,255,0.2); }\n\n#panel {\n position: fixed;\n top: 0;\n right: 0;\n height: 100vh;\n width: min(320px, 85vw);\n background: rgba(20, 28, 45, 0.97);\n backdrop-filter: blur(8px);\n border-left: 1px solid rgba(255,255,255,0.1);\n padding: 1.5rem;\n display: flex;\n flex-direction: column;\n gap: 1.1rem;\n overflow-y: auto;\n box-shadow: -10px 0 40px rgba(0,0,0,0.4);\n}\n#panel h2 { font-size: 1.1rem; font-weight: 600; }\n#panel label {\n display: flex;\n flex-direction: column;\n gap: 0.35rem;\n font-size: 0.85rem;\n opacity: 0.85;\n}\n#panel label.checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }\n#panel select, #panel input[type=color] {\n font-size: 0.95rem;\n padding: 0.4rem;\n border-radius: 6px;\n border: 1px solid rgba(255,255,255,0.15);\n background: rgba(255,255,255,0.05);\n color: #fff;\n}\n#panel input[type=color] { height: 2.5rem; padding: 2px; cursor: pointer; }\n#reset {\n margin-top: 0.5rem;\n padding: 0.6rem;\n border-radius: 6px;\n border: 1px solid rgba(255,255,255,0.2);\n background: transparent;\n color: #fff;\n cursor: pointer;\n}\n#reset:hover { background: rgba(255,255,255,0.1); }\n","label",[137],"a5f4bd16-296e-4004-b303-fb7a3918c212",["D",1781724989944],5,[34],"1ce54510-3cfb-4b4c-a52a-005563688294","clock.js","98b2847c-6a83-11f1-bd3a-1607ee4eb77e",3,["D",1781724886022],"script","const DEFAULTS = {\n font: \"system-ui, -apple-system, sans-serif\",\n weight: \"700\",\n style: \"normal\",\n color: \"#ffffff\",\n bg: \"#0a0f1c\",\n glow: true,\n showDate: true,\n};\n\nconst timeEl = document.getElementById(\"time\");\nconst dateEl = document.getElementById(\"date\");\nconst panel = document.getElementById(\"panel\");\nconst controls = {\n font: document.getElementById(\"font\"),\n weight: document.getElementById(\"weight\"),\n style: document.getElementById(\"style\"),\n color: document.getElementById(\"color\"),\n bg: document.getElementById(\"bg\"),\n glow: document.getElementById(\"glow\"),\n showDate: document.getElementById(\"showDate\"),\n};\n\nfunction load() {\n try {\n return { ...DEFAULTS, ...JSON.parse(localStorage.getItem(\"clockSettings\") || \"{}\") };\n } catch {\n return { ...DEFAULTS };\n }\n}\n\nfunction save(s) {\n localStorage.setItem(\"clockSettings\", JSON.stringify(s));\n}\n\nfunction apply(s) {\n timeEl.style.fontFamily = s.font;\n dateEl.style.fontFamily = s.font;\n timeEl.style.fontWeight = s.weight;\n timeEl.style.fontStyle = s.style;\n timeEl.style.color = s.color;\n dateEl.style.color = s.color;\n document.body.style.background = s.bg;\n timeEl.classList.toggle(\"glow\", s.glow);\n dateEl.style.display = s.showDate ? \"\" : \"none\";\n\n controls.font.value = s.font;\n controls.weight.value = s.weight;\n controls.style.value = s.style;\n controls.color.value = s.color;\n controls.bg.value = s.bg;\n controls.glow.checked = s.glow;\n controls.showDate.checked = s.showDate;\n}\n\nlet settings = load();\napply(settings);\n\nfunction readControls() {\n settings = {\n font: controls.font.value,\n weight: controls.weight.value,\n style: controls.style.value,\n color: controls.color.value,\n bg: controls.bg.value,\n glow: controls.glow.checked,\n showDate: controls.showDate.checked,\n };\n apply(settings);\n save(settings);\n}\n\nObject.values(controls).forEach((el) => {\n el.addEventListener(\"input\", readControls);\n el.addEventListener(\"change\", readControls);\n});\n\ndocument.getElementById(\"gear\").addEventListener(\"click\", () => {\n panel.hidden = !panel.hidden;\n});\n\ndocument.getElementById(\"reset\").addEventListener(\"click\", () => {\n settings = { ...DEFAULTS };\n apply(settings);\n save(settings);\n});\n\nfunction tick() {\n const now = new Date();\n timeEl.textContent = now.toLocaleTimeString();\n dateEl.textContent = now.toLocaleDateString(undefined, {\n weekday: \"long\", year: \"numeric\", month: \"long\", day: \"numeric\",\n });\n}\ntick();\nsetInterval(tick, 1000);\n",[151],"pulls","branches",1,"forks","envVars",{"_166":68,"_168":68},"connections",{"_166":68,"_167":68},"count","unfilledCount","emptyCount",{"_49":150,"_38":151,"_36":152,"_139":-5,"_47":48,"_46":153,"_141":31,"_44":179,"_13":68,"_39":155,"_41":156,"_30":31,"_144":-5,"_173":180,"_33":181},{"_49":146,"_38":34,"_36":37,"_139":-5,"_47":48,"_46":14,"_141":64,"_44":176,"_13":148,"_39":40,"_41":43,"_30":31,"_144":-5,"_173":177,"_33":178},{"_49":136,"_38":137,"_36":138,"_139":-5,"_47":48,"_46":140,"_141":31,"_44":172,"_13":68,"_39":26,"_41":143,"_30":31,"_144":-5,"_173":174,"_33":175},["D",1781724877891],"children",[],[137],["D",1781724989944],[],[34],["D",1781724886022],[],[151],["D",1781724779384],{"_102":101,"_110":106},{"_102":101,"_103":104,"_105":106,"_19":61,"_107":108,"_109":31},{"_13":91,"_38":92,"_49":48,"_93":50,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":51,"_100":101},"ctx",{"_84":-5,"_130":219,"_220":221,"_222":223,"_224":31,"_225":31,"_226":31,"_227":64,"_228":-5,"_229":-7,"_230":-7,"_231":68,"_232":31,"_233":31,"_234":-5,"_235":31,"_236":31,"_237":31,"_238":-5},"ENV",{"_190":191,"_192":193,"_194":92,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","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"]

Customize

Customize

Diff · v8