Clock

--:--:--

\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",[134],"56efbc96-54e8-42ad-bf60-ec889d3edd7b","clock.js","98b2847c-6a83-11f1-bd3a-1607ee4eb77e",9,["D",1781724994713],1,"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\nfunction setPanel(open) {\n panel.hidden = !open;\n}\n\ndocument.getElementById(\"gear\").addEventListener(\"click\", () => {\n setPanel(panel.hidden);\n});\n\ndocument.getElementById(\"close\").addEventListener(\"click\", () => {\n setPanel(false);\n});\n\ndocument.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\") setPanel(false);\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",[142],"pulls","forks","envVars",{"_156":54,"_158":54},"connections",{"_156":54,"_157":54},"count","unfilledCount","emptyCount",{"_20":141,"_13":142,"_119":143,"_121":-5,"_122":21,"_123":144,"_124":50,"_22":169,"_29":146,"_127":147,"_128":148,"_130":38,"_131":-5,"_163":170,"_91":171},{"_20":133,"_13":134,"_119":48,"_121":-5,"_122":21,"_123":135,"_124":50,"_22":166,"_29":137,"_127":138,"_128":139,"_130":38,"_131":-5,"_163":167,"_91":168},{"_20":117,"_13":118,"_119":120,"_121":-5,"_122":21,"_123":30,"_124":50,"_22":162,"_29":126,"_127":103,"_128":129,"_130":38,"_131":-5,"_163":164,"_91":165},["D",1781725004430],"children",[],[118],["D",1781724989944],[],[134],["D",1781724994713],[],[142],["D",1781724779384],{"_11":12,"_89":85},{"_11":12,"_82":83,"_84":85,"_45":46,"_86":87,"_88":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_77":-5,"_78":-5,"_79":-5,"_80":14,"_81":12},"ctx",{"_70":-5,"_111":209,"_210":211,"_212":213,"_214":38,"_215":38,"_216":38,"_217":50,"_218":-5,"_219":-7,"_220":-7,"_221":54,"_222":38,"_223":38,"_224":-5,"_225":38,"_226":38,"_227":38,"_228":-5},"ENV",{"_180":181,"_182":183,"_184":26,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208},"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

Branches1

Branches
1