Run details
- Model
- qwen/qwen3.8-max-prime
- Route
- OpenRouter API, one user message
- Served by
- Alibaba
- Effort
- xhigh, OpenRouter's default for this model
- Limits
- 60 min · 131,072 output tokens (the model's limit)
- Date
- 1 Nov 2026
- Time
- 6 min 44 s
- Size
- 24 kB
- Tokens
- 137 in, 31,099 out (21,412 of them thinking)
- List price
- $0.37 at today's price ($4.00 in / $12.00 out per M)
- Paid
- $0.37
Exact prompt
Draw a mechanical wristwatch that shows the current local time, with a sweeping seconds hand and a date window. Make it look expensive. It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.
Source
24 kB 499 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lumière — Calibre L-888</title>
<style>
:root{
--disp: "Didot","Bodoni MT","Bodoni 72","Playfair Display","Times New Roman",serif;
--body: "Optima","Candara","Gill Sans","Gill Sans MT","Segoe UI","Trebuchet MS",sans-serif;
--champ:#e9d3a4;
--champ-dim:rgba(233,211,164,.55);
--gold:#c99b57;
--line:rgba(233,211,164,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:var(--body);
color:#d9cba9;
background:
radial-gradient(1100px 720px at 38% 28%, #261a0e 0%, #130d08 46%, #070605 100%);
overflow-x:hidden;
min-height:100svh;
display:flex;align-items:center;justify-content:center;
}
::selection{background:#c99b57;color:#120d08}
/* ---------- ambient layers ---------- */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:4;
background:radial-gradient(130% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.62) 100%);}
.grain{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:.06}
.dust{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.dust span{
position:absolute;left:var(--l);top:var(--t);
width:var(--s);height:var(--s);border-radius:50%;
background:radial-gradient(circle,rgba(246,216,158,.95),rgba(246,216,158,0) 70%);
filter:blur(1px);opacity:0;
animation:mote var(--dur) linear infinite;animation-delay:var(--del);
}
@keyframes mote{
0%{transform:translate3d(0,24px,0);opacity:0}
12%{opacity:var(--o)}
82%{opacity:var(--o)}
100%{transform:translate3d(var(--dx),-150px,0);opacity:0}
}
/* ---------- frame bars ---------- */
.bar{position:fixed;left:0;right:0;z-index:6;pointer-events:none;
display:flex;justify-content:space-between;gap:1rem;
padding:1.05rem clamp(1rem,3vw,2.4rem);
font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
color:var(--champ-dim);}
.bar.top{top:0}
.bar.bottom{bottom:0}
/* ---------- stage ---------- */
.stage{
display:flex;align-items:center;justify-content:center;
gap:clamp(2.2rem,6vw,7rem);
padding:5.5rem clamp(1rem,4vw,3rem) 5rem;
width:100%;
}
.watchstage{perspective:1300px;position:relative}
.halo{
position:absolute;left:50%;top:50%;width:135%;aspect-ratio:1;
transform:translate(-50%,-52%);z-index:0;pointer-events:none;
background:radial-gradient(closest-side,rgba(242,204,142,.17),rgba(242,204,142,.05) 45%,transparent 70%);
filter:blur(24px);
animation:breathe 7.5s ease-in-out infinite;
}
@keyframes breathe{50%{transform:translate(-50%,-52%) scale(1.06);opacity:.85}}
#tilt{position:relative;z-index:2;transform-style:preserve-3d;will-change:transform}
.float{animation:bob 9s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-7px)}}
.watchstage svg{
display:block;
height:min(86svh,900px);width:auto;aspect-ratio:640/980;max-width:88vw;
filter:drop-shadow(0 34px 44px rgba(0,0,0,.6)) drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
/* ---------- the movement's heartbeat ---------- */
.balance{animation:beat .16s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes beat{from{transform:rotate(-138deg)}to{transform:rotate(138deg)}}
.sweepband{animation:sweep 9s ease-in-out infinite}
@keyframes sweep{
0%{transform:translateX(-300px);opacity:0}
8%{opacity:1}
46%{transform:translateX(300px);opacity:1}
52%{opacity:0}
100%{transform:translateX(300px);opacity:0}
}
/* ---------- plaque ---------- */
.plate{max-width:400px}
.over{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--champ-dim)}
.plate h1{
font-family:var(--disp);font-weight:400;
font-size:clamp(3rem,6vw,4.7rem);line-height:1.02;
color:#f0dfb6;letter-spacing:.02em;margin:.32em 0 .12em;
text-shadow:0 0 34px rgba(233,200,140,.18);
}
.sub{font-family:var(--disp);font-style:italic;color:#c9b586;font-size:1.06rem;letter-spacing:.04em}
.rule{height:1px;margin:1.7rem 0 1.5rem;
background:linear-gradient(90deg,var(--gold),rgba(201,155,87,.05) 72%);}
.lede{font-size:.98rem;line-height:1.68;color:#b9ab8b;max-width:36ch}
.specs{display:grid;margin-top:1.35rem}
.specs>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
padding:.58rem 0;border-bottom:1px solid var(--line)}
.specs dt{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--champ-dim)}
.specs dd{font-family:var(--disp);font-size:1rem;color:#e6d6ae;letter-spacing:.02em}
.live{margin-top:1.9rem;display:flex;flex-direction:column;gap:.32rem}
.live-label{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--champ-dim)}
.clock{
font-family:var(--disp);font-variant-numeric:tabular-nums;
font-size:clamp(2rem,3.4vw,2.9rem);color:#f3e3ba;letter-spacing:.06em;
text-shadow:0 0 26px rgba(240,205,140,.2);
}
.dateline{color:#b9ab8b;font-size:.9rem;letter-spacing:.08em}
.calnote{margin-top:.7rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(185,171,139,.55)}
@media (max-width:980px){
.stage{flex-direction:column;gap:2.6rem;padding-top:5rem}
.watchstage svg{height:min(70svh,680px)}
.plate{text-align:left}
}
@media (prefers-reduced-motion:reduce){
.balance,.sweepband,.halo,.float,.dust span{animation:none}
}
</style>
</head>
<body>
<div class="dust" aria-hidden="true">
<span style="--l:16%;--t:64%;--s:3px;--dur:17s;--del:-2s;--o:.5;--dx:34px"></span>
<span style="--l:24%;--t:30%;--s:2px;--dur:21s;--del:-9s;--o:.4;--dx:-26px"></span>
<span style="--l:38%;--t:78%;--s:2.5px;--dur:15s;--del:-5s;--o:.55;--dx:18px"></span>
<span style="--l:47%;--t:18%;--s:2px;--dur:23s;--del:-13s;--o:.35;--dx:40px"></span>
<span style="--l:55%;--t:70%;--s:3px;--dur:19s;--del:-1s;--o:.45;--dx:-30px"></span>
<span style="--l:66%;--t:36%;--s:2px;--dur:26s;--del:-17s;--o:.4;--dx:22px"></span>
<span style="--l:74%;--t:60%;--s:2.6px;--dur:18s;--del:-7s;--o:.5;--dx:-16px"></span>
<span style="--l:83%;--t:26%;--s:2px;--dur:22s;--del:-11s;--o:.35;--dx:28px"></span>
</div>
<header class="bar top" aria-hidden="true">
<span>Maison Lumière — Genève</span><span>Pièce n° 088 / 888</span>
</header>
<main class="stage">
<div class="watchstage">
<div class="halo" aria-hidden="true"></div>
<div id="tilt">
<div class="float">
<svg id="watch" viewBox="0 0 640 980" role="img" aria-label="Mechanical wristwatch showing the current local time">
<defs>
<linearGradient id="rgCase" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#fbeccd"/><stop offset=".3" stop-color="#e3b57f"/>
<stop offset=".55" stop-color="#a5713f"/><stop offset=".78" stop-color="#6b4526"/>
<stop offset="1" stop-color="#d9a86b"/>
</linearGradient>
<linearGradient id="rgBezel" x1="1" y1="1" x2="0" y2="0">
<stop offset="0" stop-color="#f9e9c6"/><stop offset=".42" stop-color="#caa06a"/>
<stop offset=".72" stop-color="#7c5430"/><stop offset="1" stop-color="#b98a52"/>
</linearGradient>
<radialGradient id="rgDial" cx=".42" cy=".36" r=".8">
<stop offset="0" stop-color="#2f5480"/><stop offset=".45" stop-color="#1a3155"/>
<stop offset=".78" stop-color="#0c1830"/><stop offset="1" stop-color="#070e1c"/>
</radialGradient>
<linearGradient id="rgMarker" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f8e6bd"/><stop offset=".5" stop-color="#d3a668"/>
<stop offset="1" stop-color="#9a6a38"/>
</linearGradient>
<linearGradient id="rgGoldText" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f3dcab"/><stop offset=".55" stop-color="#c99b57"/>
<stop offset="1" stop-color="#efd7a0"/>
</linearGradient>
<linearGradient id="rgStrap" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#57371e"/><stop offset=".22" stop-color="#2e1a0d"/>
<stop offset=".5" stop-color="#190d06"/><stop offset=".78" stop-color="#2e1a0d"/>
<stop offset="1" stop-color="#57371e"/>
</linearGradient>
<radialGradient id="rgCrystal" cx=".5" cy=".5" r=".5">
<stop offset="0" stop-color="rgba(255,255,255,.32)"/>
<stop offset=".6" stop-color="rgba(255,255,255,.06)"/>
<stop offset="1" stop-color="rgba(255,255,255,0)"/>
</radialGradient>
<linearGradient id="rgBand" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="rgba(255,255,255,0)"/>
<stop offset=".5" stop-color="rgba(255,255,255,.5)"/>
<stop offset="1" stop-color="rgba(255,255,255,0)"/>
</linearGradient>
<linearGradient id="rgHandL" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff6dd"/><stop offset=".6" stop-color="#e6c88c"/>
<stop offset="1" stop-color="#caa05f"/>
</linearGradient>
<linearGradient id="rgHandR" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#b8894c"/><stop offset="1" stop-color="#7a4f28"/>
</linearGradient>
<linearGradient id="rgSec" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f6cd8a"/><stop offset="1" stop-color="#c58f4a"/>
</linearGradient>
<radialGradient id="rgJewel" cx=".35" cy=".3" r=".8">
<stop offset="0" stop-color="#ff7284"/><stop offset=".55" stop-color="#c22339"/>
<stop offset="1" stop-color="#7c0f20"/>
</radialGradient>
<linearGradient id="rgDate" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fbf7ea"/><stop offset="1" stop-color="#e6dcbd"/>
</linearGradient>
<filter id="fHand" x="-60%" y="-60%" width="220%" height="220%">
<feDropShadow dx="0" dy="7" stdDeviation="6" flood-color="#000" flood-opacity="0.45"/>
</filter>
<filter id="fSoft" x="-40%" y="-40%" width="180%" height="180%">
<feDropShadow dx="0" dy="2.5" stdDeviation="2" flood-color="#000" flood-opacity="0.5"/>
</filter>
<clipPath id="cpDial"><circle cx="320" cy="470" r="176"/></clipPath>
<clipPath id="cpAp"><circle cx="0" cy="0" r="41"/></clipPath>
<path id="arcB" d="M184 565 A166 166 0 0 0 456 565" fill="none"/>
</defs>
<!-- straps -->
<g>
<rect x="261" y="-40" width="118" height="320" fill="url(#rgStrap)" stroke="rgba(0,0,0,.55)" stroke-width="1.5"/>
<rect x="261" y="650" width="118" height="340" fill="url(#rgStrap)" stroke="rgba(0,0,0,.55)" stroke-width="1.5"/>
<g stroke="#d8b57f" stroke-width="2" stroke-dasharray="7 6" opacity=".75" fill="none">
<path d="M272 -20 V268"/><path d="M368 -20 V268"/>
<path d="M272 690 V975"/><path d="M368 690 V975"/>
</g>
<rect x="257" y="118" width="126" height="17" rx="4" fill="#20120a" stroke="rgba(216,181,127,.28)"/>
<rect x="257" y="756" width="126" height="17" rx="4" fill="#20120a" stroke="rgba(216,181,127,.28)"/>
<g fill="#0c0603" stroke="rgba(216,181,127,.35)">
<circle cx="320" cy="806" r="3.2"/><circle cx="320" cy="836" r="3.2"/>
<circle cx="320" cy="866" r="3.2"/><circle cx="320" cy="896" r="3.2"/>
</g>
</g>
<!-- lugs -->
<g fill="url(#rgCase)" stroke="rgba(70,45,22,.6)" stroke-width="1">
<path d="M258 330 C252 294 256 260 268 240 L296 248 C285 272 282 300 286 330 Z"/>
<path d="M382 330 C388 294 384 260 372 240 L344 248 C355 272 358 300 354 330 Z"/>
<path d="M258 610 C252 646 256 680 268 700 L296 692 C285 668 282 640 286 610 Z"/>
<path d="M382 610 C388 646 384 680 372 700 L344 692 C355 668 358 640 354 610 Z"/>
</g>
<!-- crown -->
<g filter="url(#fSoft)">
<rect x="550" y="458" width="16" height="24" rx="3" fill="url(#rgCase)" stroke="rgba(70,45,22,.7)"/>
<rect x="564" y="446" width="30" height="48" rx="10" fill="url(#rgCase)" stroke="rgba(70,45,22,.7)"/>
<g stroke="rgba(60,35,15,.55)" stroke-width="2">
<line x1="570" y1="450" x2="570" y2="490"/><line x1="574.5" y1="448" x2="574.5" y2="492"/>
<line x1="579" y1="447" x2="579" y2="493"/><line x1="583.5" y1="447" x2="583.5" y2="493"/>
<line x1="588" y1="448" x2="588" y2="492"/>
</g>
<circle cx="597" cy="470" r="5" fill="url(#rgJewel)" stroke="#8a5c2e"/>
</g>
<!-- case + bezel -->
<circle cx="320" cy="470" r="236" fill="#14100a"/>
<circle cx="320" cy="470" r="232" fill="url(#rgCase)" stroke="rgba(60,38,18,.8)"/>
<circle cx="320" cy="470" r="214" fill="url(#rgBezel)"/>
<circle cx="320" cy="470" r="214" fill="none" stroke="rgba(255,244,214,.35)" stroke-width="1"/>
<circle cx="320" cy="470" r="199" fill="#0a0e16"/>
<circle cx="320" cy="470" r="196" fill="none" stroke="rgba(244,226,190,.18)" stroke-width="1"/>
<!-- dial -->
<circle cx="320" cy="470" r="176" fill="url(#rgDial)"/>
<g id="rays" clip-path="url(#cpDial)"></g>
<circle cx="320" cy="470" r="175" fill="none" stroke="rgba(0,0,0,.5)" stroke-width="7"/>
<g id="ticks"></g>
<g id="markers" filter="url(#fSoft)"></g>
<!-- dial printing -->
<text x="320" y="388" dx="4" text-anchor="middle" font-family="Didot,'Bodoni MT','Bodoni 72',Georgia,serif"
font-size="30" letter-spacing="8" fill="url(#rgGoldText)">LUMIÈRE</text>
<text x="320" y="410" dx="2.5" text-anchor="middle" font-family="Optima,Candara,'Gill Sans',sans-serif"
font-size="10.5" letter-spacing="5" fill="#cbb88f" opacity=".85">GENÈVE</text>
<text x="320" y="506" dx="2" text-anchor="middle" font-family="Optima,Candara,'Gill Sans',sans-serif"
font-size="9.5" letter-spacing="4" fill="#cbb88f" opacity=".7">AUTOMATIQUE</text>
<text font-family="Optima,Candara,'Gill Sans',sans-serif" font-size="9.5" letter-spacing="2.6" fill="#b7a274" opacity=".8">
<textPath href="#arcB" startOffset="50%" text-anchor="middle">MAISON LUMIÈRE · GENÈVE · 1888</textPath>
</text>
<!-- open-heart balance at six -->
<g transform="translate(320 562)" filter="url(#fSoft)">
<circle r="46" fill="url(#rgMarker)"/>
<circle r="41" fill="#060a12"/>
<g clip-path="url(#cpAp)">
<g transform="rotate(32)" opacity=".95">
<rect x="-44" y="-5" width="88" height="10" rx="5" fill="url(#rgCase)"/>
<circle cx="31" cy="0" r="4.2" fill="url(#rgJewel)" stroke="#8a5c2e"/>
<circle cx="-34" cy="0" r="2.4" fill="#e8d3a0"/>
</g>
<g stroke="#caa76f" opacity=".3" stroke-width=".8" fill="none">
<circle r="8"/><circle r="11"/><circle r="14"/>
</g>
<g class="balance">
<circle r="26" fill="none" stroke="url(#rgMarker)" stroke-width="5"/>
<rect x="-26" y="-2" width="52" height="4" fill="#d9b072"/>
<rect x="-2" y="-26" width="4" height="52" fill="#c8a05f"/>
<g fill="#f6e2b4" stroke="#7a5426" stroke-width=".6">
<circle cx="18.4" cy="18.4" r="2.2"/><circle cx="-18.4" cy="18.4" r="2.2"/>
<circle cx="-18.4" cy="-18.4" r="2.2"/><circle cx="18.4" cy="-18.4" r="2.2"/>
</g>
<circle r="4" fill="#e8c07c" stroke="#7a5426" stroke-width=".6"/>
<circle cx="0" cy="-9" r="1.7" fill="#c0303f"/>
</g>
</g>
<circle r="41" fill="none" stroke="rgba(0,0,0,.7)" stroke-width="3.5"/>
<circle r="46" fill="none" stroke="rgba(60,35,15,.6)"/>
</g>
<!-- date window at three -->
<g filter="url(#fSoft)">
<rect x="429" y="452" width="46" height="36" rx="4" fill="url(#rgMarker)" stroke="rgba(60,35,15,.6)"/>
<rect x="433" y="456" width="38" height="28" rx="2" fill="url(#rgDate)"/>
<rect x="433" y="456" width="38" height="7" fill="rgba(0,0,0,.28)"/>
</g>
<text id="dateText" x="452" y="477" text-anchor="middle"
font-family="Didot,'Bodoni MT',Georgia,serif" font-size="20" fill="#241a0d">1</text>
<ellipse cx="446" cy="461" rx="15" ry="5" fill="rgba(255,255,255,.16)" transform="rotate(-18 446 461)"/>
<!-- hands -->
<g id="hourHand" filter="url(#fHand)">
<polygon points="0,-118 -9,16 0,16" fill="url(#rgHandL)" stroke="rgba(50,30,12,.5)" stroke-width=".5"/>
<polygon points="0,-118 9,16 0,16" fill="url(#rgHandR)" stroke="rgba(50,30,12,.5)" stroke-width=".5"/>
</g>
<g id="minHand" filter="url(#fHand)">
<polygon points="0,-172 -7,16 0,16" fill="url(#rgHandL)" stroke="rgba(50,30,12,.5)" stroke-width=".5"/>
<polygon points="0,-172 7,16 0,16" fill="url(#rgHandR)" stroke="rgba(50,30,12,.5)" stroke-width=".5"/>
</g>
<g id="secHand" filter="url(#fSoft)">
<rect x="-1" y="-180" width="2" height="242" fill="url(#rgSec)"/>
<circle cx="0" cy="48" r="8" fill="none" stroke="url(#rgSec)" stroke-width="3"/>
</g>
<circle cx="320" cy="470" r="7.5" fill="url(#rgCase)" stroke="#5a3a1d"/>
<circle cx="320" cy="470" r="3.2" fill="url(#rgJewel)"/>
<circle cx="319" cy="469" r="1" fill="#ffd9dd" opacity=".9"/>
<!-- crystal -->
<g clip-path="url(#cpDial)">
<g id="glare">
<ellipse cx="262" cy="372" rx="132" ry="84" fill="url(#rgCrystal)" opacity=".5" transform="rotate(-24 262 372)"/>
<path d="M174.5 386 A168 168 0 0 1 465.5 386" fill="none" stroke="rgba(255,255,255,.14)" stroke-width="3" stroke-linecap="round"/>
</g>
<g class="sweepband">
<rect x="255" y="240" width="110" height="470" fill="url(#rgBand)" opacity=".55" transform="rotate(26 320 470)"/>
</g>
</g>
</svg>
</div>
</div>
</div>
<aside class="plate">
<p class="over">Manufacture d'Horlogerie · Est. 1888</p>
<h1>Lumière</h1>
<p class="sub">Grand Classique — or rose, cadran midnight</p>
<div class="rule"></div>
<p class="lede">Twenty-one jewels beneath a box sapphire. The balance breathes at six o'clock,
and the centre seconds glides in a true sweep — it never ticks.</p>
<dl class="specs">
<div><dt>Calibre</dt><dd>L-888 · automatic</dd></div>
<div><dt>Frequency</dt><dd>28 800 vph</dd></div>
<div><dt>Power reserve</dt><dd>72 hours</dd></div>
<div><dt>Case</dt><dd>18 ct rose gold · 39 mm</dd></div>
</dl>
<div class="live">
<span class="live-label">Local time</span>
<span class="clock" id="clock">00:00:00</span>
<span class="dateline" id="dateline">—</span>
<span class="calnote">Set by the movement · date at three</span>
</div>
</aside>
</main>
<footer class="bar bottom" aria-hidden="true">
<span>Cal. L-888 · 21 jewels</span><span>Or rose 18 ct · cuir de veau</span>
</footer>
<div class="vignette" aria-hidden="true"></div>
<svg class="grain" aria-hidden="true">
<filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/><feColorMatrix type="saturate" values="0"/></filter>
<rect width="100%" height="100%" filter="url(#n)"/>
</svg>
<script>
(function(){
"use strict";
var SVGNS = "http://www.w3.org/2000/svg";
var CX = 320, CY = 470;
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
function el(name, attrs){
var e = document.createElementNS(SVGNS, name);
for (var k in attrs) e.setAttribute(k, attrs[k]);
return e;
}
/* --- sunburst brushing on the dial --- */
var rays = document.getElementById("rays");
for (var a = 0, i = 0; a < 360; a += 1.2, i++){
var rad = a * Math.PI / 180;
var x2 = CX + 176 * Math.cos(rad), y2 = CY + 176 * Math.sin(rad);
var light = (i % 2 === 0);
rays.appendChild(el("line", {
x1: CX, y1: CY, x2: x2, y2: y2,
stroke: light ? "rgba(255,255,255," + (0.02 + 0.045 * Math.abs(Math.sin(i * 0.7))).toFixed(3) + ")"
: "rgba(2,6,18," + (0.05 + 0.06 * Math.abs(Math.cos(i * 0.5))).toFixed(3) + ")",
"stroke-width": 1.4
}));
}
/* --- minute track on the chapter ring --- */
var ticks = document.getElementById("ticks");
for (var t = 0; t < 60; t++){
var ta = t * 6 * Math.PI / 180;
var long = (t % 5 === 0);
var r1 = long ? 180 : 185, r2 = 191;
ticks.appendChild(el("line", {
x1: CX + r1 * Math.cos(ta), y1: CY + r1 * Math.sin(ta),
x2: CX + r2 * Math.cos(ta), y2: CY + r2 * Math.sin(ta),
stroke: long ? "#dcc391" : "rgba(220,195,145,.45)",
"stroke-width": long ? 2.6 : 1.3,
"stroke-linecap": "round"
}));
}
/* --- applied hour markers (double baton at 12, date takes 3) --- */
var markers = document.getElementById("markers");
for (var h = 0; h < 12; h++){
if (h === 3) continue;
var g = el("g", { transform: "rotate(" + (h * 30) + " " + CX + " " + CY + ")" });
var xs = (h === 0) ? [CX - 11.5, CX + 2.5] : [CX - 4.5];
xs.forEach(function(x){
g.appendChild(el("rect", {
x: x, y: CY - 170, width: 9, height: 36, rx: 2,
fill: "url(#rgMarker)", stroke: "rgba(60,35,15,.55)", "stroke-width": .7
}));
});
markers.appendChild(g);
}
/* --- references --- */
var hourHand = document.getElementById("hourHand");
var minHand = document.getElementById("minHand");
var secHand = document.getElementById("secHand");
var dateText = document.getElementById("dateText");
var clockEl = document.getElementById("clock");
var dateEl = document.getElementById("dateline");
var glare = document.getElementById("glare");
var tiltEl = document.getElementById("tilt");
function pad(n){ return (n < 10 ? "0" : "") + n; }
var lastDay = -1;
function tick(){
var d = new Date();
var ms = d.getMilliseconds();
var s = d.getSeconds() + ms / 1000; /* true mechanical sweep */
var m = d.getMinutes() + s / 60;
var hr = (d.getHours() % 12) + m / 60;
secHand.setAttribute("transform", "rotate(" + (s * 6) + " " + CX + " " + CY + ")");
minHand.setAttribute("transform", "rotate(" + (m * 6) + " " + CX + " " + CY + ")");
hourHand.setAttribute("transform", "rotate(" + (hr * 30) + " " + CX + " " + CY + ")");
if (d.getDate() !== lastDay){
lastDay = d.getDate();
dateText.textContent = String(d.getDate());
dateEl.textContent = d.toLocaleDateString(undefined,
{ weekday: "long", day: "numeric", month: "long", year: "numeric" });
}
clockEl.textContent = pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds());
}
/* --- gentle parallax tilt + travelling glare --- */
var tx = 0, ty = 0, cx = 0, cy = 0;
if (!reduceMotion){
window.addEventListener("pointermove", function(e){
tx = ((e.clientX / window.innerWidth) - 0.5) * 10;
ty = -((e.clientY / window.innerHeight) - 0.5) * 8;
}, { passive: true });
}
function frame(){
tick();
if (!reduceMotion){
cx += (tx - cx) * 0.06;
cy += (ty - cy) * 0.06;
tiltEl.style.transform = "rotateX(" + cy.toFixed(3) + "deg) rotateY(" + cx.toFixed(3) + "deg)";
glare.setAttribute("transform", "translate(" + (cx * 2.4).toFixed(2) + " " + (-cy * 2.4).toFixed(2) + ")");
}
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
})();
</script>
</body>
</html>

