Analog Clock with Reflection

\n {hourMarks.map((hour) => (\n

\n ))}\n {minuteMarks.map((minute) => (\n

\n ))}\n \n

\n \n );\n}\n\nfunction App() {\n const [time, setTime] = useState(new Date());\n\n useEffect(() => {\n const timer = setInterval(() => {\n setTime(new Date());\n }, 1000);\n\n return () => {\n clearInterval(timer);\n };\n }, []);\n\n return (\n

\n \n

\n );\n}\n\nfunction client() {\n const root = document.getElementById('root');\n if (root) {\n createRoot(root).render();\n }\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Analog Clock with Reflection\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n margin: 0;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background: linear-gradient(to bottom, #87CEEB, #E0F6FF);\n perspective: 1000px;\n overflow: hidden;\n}\n\n.container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.clock {\n width: 200px;\n height: 200px;\n border: 10px solid #333;\n border-radius: 50%;\n position: relative;\n background: white;\n}\n\n.tick-marks {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.tick {\n position: absolute;\n width: 100%;\n height: 100%;\n text-align: center;\n}\n\n.tick::before {\n content: '';\n display: inline-block;\n}\n\n.clock-face {\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n.hand {\n width: 50%;\n height: 6px;\n background: #333;\n position: absolute;\n top: 50%;\n transform-origin: 100%;\n transform: rotate(90deg);\n transition: all 0.05s;\n transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);\n}\n\n.hour-hand {\n width: 30%;\n left: 20%;\n height: 8px;\n}\n\n.minute-hand {\n height: 4px;\n}\n\n.second-hand {\n height: 2px;\n background: #f00;\n}\n\n.hour-tick::before {\n width: 2px;\n height: 15px;\n background: #333;\n margin-top: -7px;\n}\n\n.minute-tick::before {\n width: 1px;\n height: 5px;\n background: #999;\n margin-top: -2px;\n}\n\n.reflection .tick::before {\n background: rgba(51, 51, 51, 0.5);\n}\n\n.reflection .minute-tick::before {\n background: rgba(153, 153, 153, 0.5);\n}\n\n.reflection {\n transform: scaleY(-0.5) translateY(-50%);\n opacity: 0.5;\n filter: blur(1px);\n}\n\n.reflection .clock {\n border-color: rgba(51, 51, 51, 0.5);\n background: rgba(255, 255, 255, 0.7);\n}\n\n.reflection .hand {\n background: rgba(51, 51, 51, 0.5);\n}\n\n.reflection .second-hand {\n background: rgba(255, 0, 0, 0.5);\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/rozek/GDI_AnalogClock/code/main.tsx","extension","actionData","errors"]