Simple Clock

Clock

24-hour

00:00:00

Loading date...

:root { --bg: #0f1724; --card: #0b1220; --accent: #06b6d4; --muted: #94a3b8; --glass: rgba(255,255,255,0.03); --white: #e6eef6; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, #07112a 0%, #041025 100%); color: var(--white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .app { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .clock-card { width: 360px; max-width: 94vw; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); border-radius: 12px; padding: 20px; box-shadow: 0 8px 30px rgba(2,6,23,0.6); display: flex; flex-direction: column; gap: 12px; align-items: center; } .clock-header { width: 100%; display: flex; justify-content: space-between; align-items: center; } .clock-header h1 { margin: 0; font-size: 18px; font-weight: 600; color: var(--white); } .controls { display: flex; gap: 8px; align-items: center; } .toggle { display: inline-flex; align-items: center; gap: 8px; user-select: none; cursor: pointer; } .toggle input { width: 40px; height: 22px; -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.06); border-radius: 999px; position: relative; outline: none; cursor: pointer; transition: background .18s ease; } .toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .18s ease; transform: translateX(0); } .toggle input:checked { background: var(--accent); } .toggle input:checked::after { transform: translateX(18px); } .label-text { font-size: 13px; color: var(--muted); } .clock-body { width: 100%; display: flex; flex-direction: column; gap: 14px; align-items: center; } .digital { text-align: center; padding: 10px 14px; background: var(--glass); border-radius: 10px; width: 100%; } .time { font-size: 28px; font-weight: 700; letter-spacing: 0.5px; color: var(--white); } .date { font-size: 13px; color: var(--muted); margin-top: 6px; } .analog { width: 240px; height: 240px; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(6,182,212,0.03), transparent 20%), transparent; border-radius: 50%; box-shadow: inset 0 2px 12px rgba(255,255,255,0.02); } svg.clock-face { width: 100%; height: 100%; display: block; } .clock-footer { width: 100%; text-align: center; color: var(--muted); font-size: 12px; } /* Hands */ .hand { stroke-linecap: round; transform-origin: 50% 50%; } .hand.hour { stroke: #e6eef6; stroke-width: 5; } .hand.minute { stroke: #fff; stroke-width: 3; } .hand.second { stroke: var(--accent); stroke-width: 2; } .center-dot { fill: var(--accent); stroke: transparent; } @media (max-width: 420px) { .clock-card { width: 320px; } .analog { width: 200px; height: 200px; } .time { font-size: 24px; } } export function createDigital(element) { const timeEl = element.querySelector('#time'); const dateEl = element.querySelector('#date'); let use24 = localStorage.getItem('clock-use24') === 'true'; function setFormat(is24) { use24 = !!is24; localStorage.setItem('clock-use24', String(use24)); } function pad(n) { return n.toString().padStart(2, '0'); } function update(now) { const hours = now.getHours(); const minutes = now.getMinutes(); const seconds = now.getSeconds(); let displayHours = hours; let suffix = ''; if (!use24) { suffix = hours >= 12 ? ' PM' : ' AM'; displayHours = hours % 12 || 12; } timeEl.textContent = `${pad(displayHours)}:${pad(minutes)}:${pad(seconds)}${!use24 ? suffix : ''}`; const opts = { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' }; dateEl.textContent = now.toLocaleDateString(undefined, opts); } // initial update(new Date()); return { update, setFormat, getFormat: () => use24 }; } export function createAnalog(container) { const NS = "http://www.w3.org/2000/svg"; const size = 240; const viewBox = `0 0 ${size} ${size}`; const center = size / 2; const radius = center - 12; const svg = document.createElementNS(NS, 'svg'); svg.setAttribute('viewBox', viewBox); svg.classList.add('clock-face'); // face const face = document.createElementNS(NS, 'circle'); face.setAttribute('cx', center); face.setAttribute('cy', center); face.setAttribute('r', radius); face.setAttribute('fill', 'transparent'); face.setAttribute('stroke', 'rgba(255,255,255,0.04)'); face.setAttribute('stroke-width', '1'); svg.appendChild(face); // ticks for (let i = 0; i < 60; i++) { const tick = document.createElementNS(NS, 'line'); const angle = (i / 60) * Math.PI * 2; const outerR = radius - 6; const innerR = i % 5 === 0 ? outerR - 10 : outerR - 6; const x1 = center + outerR * Math.cos(angle); const y1 = center + outerR * Math.sin(angle); const x2 = center + innerR * Math.cos(angle); const y2 = center + innerR * Math.sin(angle); tick.setAttribute('x1', x1); tick.setAttribute('y1', y1); tick.setAttribute('x2', x2); tick.setAttribute('y2', y2); tick.setAttribute('stroke', i % 5 === 0 ? 'rgba(230,238,246,0.12)' : 'rgba(230,238,246,0.06)'); tick.setAttribute('stroke-width', i % 5 === 0 ? '2' : '1'); svg.appendChild(tick); } // hands group const g = document.createElementNS(NS, 'g'); g.setAttribute('transform', `translate(${center}, ${center})`); svg.appendChild(g); // hour const hourHand = document.createElementNS(NS, 'line'); hourHand.setAttribute('class', 'hand hour'); hourHand.setAttribute('x1', '0'); hourHand.setAttribute('y1', '10'); hourHand.setAttribute('x2', '0'); hourHand.setAttribute('y2', String(-radius * 0.45)); hourHand.setAttribute('stroke-linecap', 'round'); g.appendChild(hourHand); // minute const minuteHand = document.createElementNS(NS, 'line'); minuteHand.setAttribute('class', 'hand minute'); minuteHand.setAttribute('x1', '0'); minuteHand.setAttribute('y1', '14'); minuteHand.setAttribute('x2', '0'); minuteHand.setAttribute('y2', String(-radius * 0.65)); minuteHand.setAttribute('stroke-linecap', 'round'); g.appendChild(minuteHand); // second const secondHand = document.createElementNS(NS, 'line'); secondHand.setAttribute('class', 'hand second'); secondHand.setAttribute('x1', '0'); secondHand.setAttribute('y1', '18'); secondHand.setAttribute('x2', '0'); secondHand.setAttribute('y2', String(-radius * 0.78)); secondHand.setAttribute('stroke-linecap', 'round'); g.appendChild(secondHand); // center dot const dot = document.createElementNS(NS, 'circle'); dot.setAttribute('cx', center); dot.setAttribute('cy', center); dot.setAttribute('r', '4'); dot.setAttribute('class', 'center-dot'); dot.setAttribute('fill', 'var(--accent)'); svg.appendChild(dot); // append svg to container container.innerHTML = ''; container.appendChild(svg); function setRotation(el, deg) { el.setAttribute('transform', `rotate(${deg})`); } function update(now) { const ms = now.getMilliseconds(); const s = now.getSeconds() + ms / 1000; const m = now.getMinutes() + s / 60; const h = (now.getHours() % 12) + m / 60; const hourDeg = (h / 12) * 360; const minuteDeg = (m / 60) * 360; const secondDeg = (s / 60) * 360; setRotation(hourHand, hourDeg); setRotation(minuteHand, minuteDeg); setRotation(secondHand, secondDeg); } // initial update update(new Date()); return { update, el: svg }; } import { createDigital } from './digital.js'; import { createAnalog } from './analog.js'; const digitalContainer = document.getElementById('digital'); const analogContainer = document.getElementById('analog'); const toggle = document.getElementById('formatToggle'); const digital = createDigital(digitalContainer); const analog = createAnalog(analogContainer); // initialize toggle from storage toggle.checked = digital.getFormat(); toggle.addEventListener('change', () => { digital.setFormat(toggle.checked); // immediate update so displayed format changes instantly digital.update(new Date()); }); let rafId = null; function tick() { const now = new Date(); digital.update(now); analog.update(now); rafId = requestAnimationFrame(tick); } // Start ticking (use RAF for smooth second hand) tick(); // Optional: stop when page hidden to save CPU document.addEventListener('visibilitychange', () => { if (document.hidden) { if (rafId != null) cancelAnimationFrame(rafId); rafId = null; } else { if (rafId == null) tick(); } });