Run details
- Model
- nex-agi/nex-n2.6
- Route
- OpenRouter API, one user message
- Served by
- Nex AGI
- Effort
- high, OpenRouter's default for this model
- Limits
- 60 min · 235,929 output tokens (the model's limit)
- Date
- 10 Nov 2026
- Time
- 6 min 53 s
- Size
- 27 kB
- Tokens
- 87 in, 44,664 out (34,864 of them thinking)
- List price
- $0.018 at today's price ($0.12 in / $0.40 out per M)
- Paid
- $0.018
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
27 kB 493 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="color-scheme" content="dark"/>
<title>AURELINE — Calibre A-47</title>
<style>
:root{
--serif:"Didot","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;
--sans:"Avenir Next","Avenir","Gill Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
--gold:#c9ab63;
--text:#e6dcc2;
--dim:#9a8f78;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
background:#070605 radial-gradient(130vmax 90vmax at 50% 28%, #221e17 0%, #12100b 46%, #070605 100%);
color:var(--text);
font-family:var(--serif);
overflow:hidden;
}
::selection{background:rgba(201,171,99,.35);color:#fff}
.grain{position:fixed;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.55;z-index:30}
.scene{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center}
.stage{position:relative}
.shadow{
position:absolute;left:50%;bottom:-7vh;z-index:0;
width:72vmin;max-width:620px;height:14vmin;
transform:translateX(-50%) scale(1);
background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.7), rgba(0,0,0,0) 70%);
filter:blur(8px);
animation:shpulse 7.5s ease-in-out infinite;
}
@keyframes shpulse{
0%,100%{transform:translateX(-50%) scale(1);opacity:.9}
50%{transform:translateX(-50%) scale(1.06);opacity:.55}
}
.bob{animation:bob 7.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4vh)}}
.tilt{position:relative;z-index:1;perspective:1600px}
.watch{
position:relative;height:min(80vh,124vw);aspect-ratio:2/3;
transform-style:preserve-3d;will-change:transform;
filter:drop-shadow(0 34px 44px rgba(0,0,0,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
.watch svg{display:block;width:100%;height:100%}
.glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.corner{position:fixed;top:26px;left:30px;z-index:40;display:flex;flex-direction:column;gap:6px}
.c-brand{font-family:var(--serif);letter-spacing:.42em;font-size:14px;color:var(--text)}
.c-sub{font-family:var(--sans);font-size:9.5px;letter-spacing:.34em;color:var(--dim)}
.sound{
position:fixed;top:24px;right:28px;z-index:40;
display:flex;align-items:center;gap:9px;padding:9px 14px;
background:rgba(18,15,11,.55);border:1px solid rgba(201,171,99,.28);border-radius:999px;
color:var(--dim);font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;cursor:pointer;
backdrop-filter:blur(6px);transition:border-color .25s,color .25s;
}
.sound:hover{border-color:rgba(212,184,120,.6);color:var(--text)}
.sound:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.sound.is-on{color:var(--gold);border-color:rgba(212,184,120,.55)}
.sound svg{display:block}
.sound .w{display:none}
.sound.is-on .w{display:initial}
.sound.is-on .x{display:none}
.caption{
position:fixed;left:50%;bottom:3.2vh;transform:translateX(-50%);z-index:40;
display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:max-content;max-width:92vw;
}
.hair{width:52px;height:1px;background:rgba(201,171,99,.45)}
.spec{font-family:var(--sans);font-size:9.5px;letter-spacing:.32em;color:var(--dim)}
.time{font-family:var(--serif);font-size:15px;letter-spacing:.18em;color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:640px){
.corner{left:18px;top:20px}
.c-brand{font-size:12px}
.c-sub{font-size:8px}
.sound{right:14px;top:18px;padding:8px 11px}
.sound span{display:none}
.spec{font-size:8px;letter-spacing:.22em}
.time{font-size:12.5px;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
.bob,.shadow{animation:none}
}
</style>
</head>
<body>
<div class="grain" id="grain"></div>
<header class="corner">
<span class="c-brand">AURELINE</span>
<span class="c-sub">HAUTE HORLOGERIE · EST. 1928</span>
</header>
<button id="tickBtn" class="sound" aria-pressed="false" aria-label="Toggle movement sound">
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M11 5 6 9H3v6h3l5 4z" fill="currentColor" stroke="none"/>
<path class="w" d="M15.5 8.5a5 5 0 0 1 0 7"/>
<path class="w" d="M18 6a8.5 8.5 0 0 1 0 12"/>
<line class="x" x1="15" y1="9" x2="21" y2="15"/>
<line class="x" x1="21" y1="9" x2="15" y2="15"/>
</svg>
<span>MOVEMENT</span>
</button>
<div class="scene">
<div class="stage">
<div class="shadow"></div>
<div class="tilt">
<div class="bob">
<div class="watch" id="watch">
<svg id="watchSvg" viewBox="0 0 1000 1500" role="img"
aria-label="Aureline Calibre A-47 mechanical wristwatch showing the current local time">
<defs>
<radialGradient id="gCase" cx="0.36" cy="0.28" r="1">
<stop offset="0" stop-color="#f9ecc4"/><stop offset="0.4" stop-color="#dabb6d"/>
<stop offset="0.75" stop-color="#a17c36"/><stop offset="1" stop-color="#5f471c"/>
</radialGradient>
<radialGradient id="gDial" cx="0.5" cy="0.4" r="0.75">
<stop offset="0" stop-color="#1a5f41"/><stop offset="0.5" stop-color="#0e4630"/>
<stop offset="0.8" stop-color="#08301f"/><stop offset="1" stop-color="#03170e"/>
</radialGradient>
<radialGradient id="gShade" cx="0.5" cy="0.42" r="0.65">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.13"/>
<stop offset="0.45" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="0.8" stop-color="#000000" stop-opacity="0.12"/>
<stop offset="1" stop-color="#000000" stop-opacity="0.5"/>
</radialGradient>
<linearGradient id="gSheen" x1="0" y1="0" x2="0.85" y2="1">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.10"/>
<stop offset="0.35" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="0.7" stop-color="#000000" stop-opacity="0"/>
<stop offset="1" stop-color="#000000" stop-opacity="0.24"/>
</linearGradient>
<linearGradient id="gIdx" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff4d2"/><stop offset="0.35" stop-color="#e9ca7a"/>
<stop offset="0.7" stop-color="#b48c40"/><stop offset="1" stop-color="#7c5e24"/>
</linearGradient>
<linearGradient id="gHandL" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff6da"/><stop offset="0.5" stop-color="#edcf80"/><stop offset="1" stop-color="#b98f3e"/>
</linearGradient>
<linearGradient id="gHandR" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#e2c176"/><stop offset="0.5" stop-color="#a8843c"/><stop offset="1" stop-color="#6e521e"/>
</linearGradient>
<linearGradient id="gSec" gradientUnits="userSpaceOnUse" x1="500" y1="482" x2="500" y2="806">
<stop offset="0" stop-color="#aed0f2"/><stop offset="0.5" stop-color="#4f7fbd"/><stop offset="1" stop-color="#1c3c6e"/>
</linearGradient>
<radialGradient id="gDate" cx="0.5" cy="0.35" r="0.9">
<stop offset="0" stop-color="#fdfaf0"/><stop offset="0.7" stop-color="#eae0c7"/><stop offset="1" stop-color="#cfc2a0"/>
</radialGradient>
<linearGradient id="gApShadow" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#000000" stop-opacity="0.38"/><stop offset="1" stop-color="#000000" stop-opacity="0"/>
</linearGradient>
<radialGradient id="gCrystal" cx="0.5" cy="0.45" r="0.6">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.10"/>
<stop offset="0.4" stop-color="#ffffff" stop-opacity="0.03"/>
<stop offset="0.78" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0.08"/>
</radialGradient>
<linearGradient id="gStrap" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#2b2118"/><stop offset="0.6" stop-color="#1a130c"/><stop offset="1" stop-color="#0f0a05"/>
</linearGradient>
<linearGradient id="gStrapSheen" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.07"/>
<stop offset="0.3" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="0.72" stop-color="#000000" stop-opacity="0"/>
<stop offset="1" stop-color="#000000" stop-opacity="0.3"/>
</linearGradient>
<linearGradient id="gKeeper" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#3a2d1e"/><stop offset="1" stop-color="#1c140c"/>
</linearGradient>
<linearGradient id="gCrown" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f3e0ac"/><stop offset="0.5" stop-color="#c9a45c"/><stop offset="1" stop-color="#7a5c24"/>
</linearGradient>
<pattern id="patLeather" width="22" height="22" patternUnits="userSpaceOnUse">
<path d="M0 11 Q5.5 3 11 11 T22 11" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1.4"/>
<path d="M0 0 Q5.5 8 11 0 T22 0" fill="none" stroke="rgba(0,0,0,0.5)" stroke-width="1.4"/>
</pattern>
<linearGradient id="gFade" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="0.14" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="0.86" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
<mask id="mFade"><rect x="0" y="0" width="1000" height="1500" fill="url(#gFade)"/></mask>
<filter id="f4" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="4"/></filter>
<filter id="f12" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="12"/></filter>
</defs>
<!-- Leather straps (fade out toward the edges, product-shot style) -->
<g mask="url(#mFade)">
<path d="M380 440 L620 440 L610 60 Q609 26 575 26 L425 26 Q391 26 390 60 Z" fill="url(#gStrap)"/>
<path d="M380 440 L620 440 L610 60 Q609 26 575 26 L425 26 Q391 26 390 60 Z" fill="url(#patLeather)"/>
<path d="M380 440 L620 440 L610 60 Q609 26 575 26 L425 26 Q391 26 390 60 Z" fill="url(#gStrapSheen)"/>
<path d="M380 440 L620 440 L610 60 Q609 26 575 26 L425 26 Q391 26 390 60 Z" fill="none" stroke="rgba(0,0,0,0.55)" stroke-width="2"/>
<path d="M398 434 L408 46" stroke="#b98f4a" stroke-width="2.4" stroke-dasharray="8 7" stroke-linecap="round" fill="none" opacity="0.7"/>
<path d="M602 434 L592 46" stroke="#b98f4a" stroke-width="2.4" stroke-dasharray="8 7" stroke-linecap="round" fill="none" opacity="0.7"/>
<path d="M380 1050 L620 1050 L616 1458 Q616 1478 596 1478 L404 1478 Q384 1478 384 1458 Z" fill="url(#gStrap)"/>
<path d="M380 1050 L620 1050 L616 1458 Q616 1478 596 1478 L404 1478 Q384 1478 384 1458 Z" fill="url(#patLeather)"/>
<path d="M380 1050 L620 1050 L616 1458 Q616 1478 596 1478 L404 1478 Q384 1478 384 1458 Z" fill="url(#gStrapSheen)"/>
<path d="M380 1050 L620 1050 L616 1458 Q616 1478 596 1478 L404 1478 Q384 1478 384 1458 Z" fill="none" stroke="rgba(0,0,0,0.55)" stroke-width="2"/>
<path d="M398 1086 L402 1462" stroke="#b98f4a" stroke-width="2.4" stroke-dasharray="8 7" stroke-linecap="round" fill="none" opacity="0.7"/>
<path d="M602 1086 L598 1462" stroke="#b98f4a" stroke-width="2.4" stroke-dasharray="8 7" stroke-linecap="round" fill="none" opacity="0.7"/>
<rect x="384" y="1176" width="232" height="36" rx="7" fill="url(#gKeeper)" stroke="rgba(0,0,0,0.5)" stroke-width="1.5"/>
<circle cx="500" cy="1258" r="8" fill="#0b0805" stroke="rgba(201,163,90,0.4)" stroke-width="1.5"/>
<circle cx="500" cy="1302" r="8" fill="#0b0805" stroke="rgba(201,163,90,0.4)" stroke-width="1.5"/>
<circle cx="500" cy="1346" r="8" fill="#0b0805" stroke="rgba(201,163,90,0.4)" stroke-width="1.5"/>
</g>
<!-- Lugs -->
<g fill="url(#gIdx)" stroke="rgba(56,40,12,0.9)" stroke-width="1.5">
<rect x="328" y="358" width="50" height="112" rx="17"/>
<rect x="622" y="358" width="50" height="112" rx="17"/>
<rect x="328" y="1030" width="50" height="112" rx="17"/>
<rect x="622" y="1030" width="50" height="112" rx="17"/>
</g>
<!-- Case, crown, fluted bezel -->
<circle cx="500" cy="750" r="340" fill="url(#gCase)" stroke="#241a08" stroke-width="2.5"/>
<g id="gCrown">
<rect x="824" y="736" width="24" height="28" fill="#7a5c24"/>
<rect x="840" y="712" width="44" height="76" rx="9" fill="url(#gCrown)" stroke="rgba(50,36,12,0.8)" stroke-width="1.5"/>
<g id="gKnurl"></g>
<ellipse cx="884" cy="750" rx="7" ry="37" fill="url(#gIdx)" stroke="rgba(50,36,12,0.7)" stroke-width="1"/>
</g>
<g id="gFlutes"></g>
<circle cx="500" cy="750" r="339" fill="url(#gSheen)"/>
<circle cx="500" cy="750" r="335.5" fill="none" stroke="rgba(255,243,210,0.3)" stroke-width="1.5"/>
<circle cx="500" cy="750" r="331.5" fill="none" stroke="rgba(0,0,0,0.45)" stroke-width="2.5"/>
<!-- Dial -->
<circle cx="500" cy="750" r="296" fill="url(#gDial)"/>
<g id="gRays"></g>
<circle cx="500" cy="750" r="296" fill="url(#gShade)"/>
<circle cx="500" cy="750" r="296" fill="url(#gSheen)"/>
<circle cx="500" cy="750" r="297.5" fill="none" stroke="#3c2d10" stroke-width="2.5"/>
<circle cx="500" cy="750" r="293" fill="none" stroke="rgba(0,0,0,0.35)" stroke-width="3"/>
<g id="gGuillo"></g>
<!-- Minute track -->
<circle cx="500" cy="750" r="278" fill="none" stroke="rgba(236,222,182,0.35)" stroke-width="1.2"/>
<circle cx="500" cy="750" r="258" fill="none" stroke="rgba(236,222,182,0.2)" stroke-width="1"/>
<g id="gTicks"></g>
<g id="gIndices"></g>
<!-- Dial printing -->
<text x="506" y="614" text-anchor="middle" font-family="Didot, 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif"
font-size="34" letter-spacing="12" fill="#ecdcae" opacity="0.95">AURELINE</text>
<text x="503.5" y="644" text-anchor="middle" font-family="Didot, 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif"
font-size="13" letter-spacing="7" fill="#b9ad8e" opacity="0.8">GENÈVE</text>
<text x="503" y="886" text-anchor="middle" font-family="Didot, 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif"
font-size="14" letter-spacing="6" fill="#c7ba98" opacity="0.85">AUTOMATIC</text>
<text x="501.5" y="908" text-anchor="middle" font-family="Didot, 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif"
font-size="11" letter-spacing="3" fill="#a2977c" opacity="0.6">CAL. A-47</text>
<!-- Date window at 3 o'clock -->
<g>
<rect x="682" y="719" width="86" height="62" rx="7" fill="url(#gIdx)" stroke="rgba(50,36,12,0.8)" stroke-width="1.5"/>
<rect x="689" y="726" width="72" height="48" rx="4" fill="#4e3a16"/>
<rect x="693" y="729" width="64" height="42" rx="2.5" fill="url(#gDate)"/>
<text id="dateNum" x="725" y="761" text-anchor="middle"
font-family="Didot, 'Bodoni MT', Georgia, 'Times New Roman', serif" font-size="32" fill="#221d12">14</text>
<rect x="693" y="729" width="64" height="10" fill="url(#gApShadow)"/>
</g>
<!-- Hands -->
<g id="hH">
<path d="M500 550 L486 612 L500 792 Z" fill="url(#gHandL)"/>
<path d="M500 550 L514 612 L500 792 Z" fill="url(#gHandR)"/>
<path d="M500 550 L514 612 L500 792 L486 612 Z" fill="none" stroke="rgba(56,40,12,0.55)" stroke-width="1"/>
<line x1="500" y1="556" x2="500" y2="786" stroke="rgba(255,248,220,0.55)" stroke-width="1"/>
</g>
<g id="hM">
<path d="M500 488 L490 640 L500 800 Z" fill="url(#gHandL)"/>
<path d="M500 488 L510 640 L500 800 Z" fill="url(#gHandR)"/>
<path d="M500 488 L510 640 L500 800 L490 640 Z" fill="none" stroke="rgba(56,40,12,0.55)" stroke-width="1"/>
<line x1="500" y1="492" x2="500" y2="796" stroke="rgba(255,248,220,0.5)" stroke-width="1"/>
</g>
<g id="hS">
<line x1="500" y1="482" x2="500" y2="806" stroke="url(#gSec)" stroke-width="3.4" stroke-linecap="round"/>
<circle cx="500" cy="786" r="12.5" fill="url(#gSec)" stroke="rgba(10,20,40,0.5)" stroke-width="1"/>
<circle cx="500" cy="750" r="7.5" fill="#1d3f74"/>
</g>
<circle cx="500" cy="750" r="15" fill="url(#gIdx)" stroke="#3c2d10" stroke-width="1.5"/>
<circle cx="500" cy="750" r="6" fill="#20180a"/>
<circle cx="497.5" cy="747.5" r="2" fill="rgba(255,255,255,0.35)"/>
<!-- Crystal: reflections, cyclops over the date, edge highlight -->
<g>
<circle cx="500" cy="750" r="250" fill="none" stroke="#ffffff" stroke-width="30" stroke-dasharray="170 1401"
transform="rotate(-118 500 750)" opacity="0.10" filter="url(#f12)"/>
<circle cx="500" cy="750" r="268" fill="none" stroke="#ffffff" stroke-width="10" stroke-dasharray="110 1573"
transform="rotate(-128 500 750)" opacity="0.22" filter="url(#f4)"/>
<circle cx="500" cy="750" r="255" fill="none" stroke="#ffffff" stroke-width="22" stroke-dasharray="140 1462"
transform="rotate(48 500 750)" opacity="0.05" filter="url(#f12)"/>
<ellipse cx="725" cy="748" rx="46" ry="40" fill="rgba(255,255,255,0.05)"/>
<ellipse cx="725" cy="748" rx="46" ry="40" fill="none" stroke="rgba(255,255,255,0.09)" stroke-width="1.5"/>
<circle cx="500" cy="750" r="299" fill="url(#gCrystal)"/>
<circle cx="500" cy="750" r="297.5" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="2"/>
</g>
</svg>
<div class="glare" id="glare"></div>
</div>
</div>
</div>
</div>
</div>
<footer class="caption">
<div class="hair"></div>
<p class="spec">CALIBRE A-47 · AUTOMATIC · 28 800 A/H · 18-KARAT GOLD</p>
<p class="time" id="readout">—</p>
</footer>
<script>
(function(){
"use strict";
var NS = "http://www.w3.org/2000/svg";
var CX = 500, CY = 750;
var $ = function(id){ return document.getElementById(id); };
var rad = function(d){ return d * Math.PI / 180; };
var polar = function(r, a){ return [CX + r * Math.sin(rad(a)), CY - r * Math.cos(rad(a))]; };
function add(parent, name, attrs){
var e = document.createElementNS(NS, name);
for (var k in attrs) e.setAttribute(k, attrs[k]);
parent.appendChild(e);
return e;
}
/* ---- Sunburst dial: fine radial brush lines, brightest toward the upper-left light ---- */
var gRays = $("gRays");
for (var i = 0; i < 240; i++){
var a = i * 1.5;
var c = Math.cos(rad(a + 50));
var t = Math.pow(Math.max(0, c), 10) * 0.12 + Math.pow(Math.max(0, -c), 16) * 0.05 + 0.015;
var p1 = polar(26, a), p2 = polar(293, a);
add(gRays, "line", {x1:p1[0], y1:p1[1], x2:p2[0], y2:p2[1],
stroke:"rgba(215,255,233," + t.toFixed(3) + ")", "stroke-width":1.1});
}
/* ---- Subtle engine-turned concentric rings in the centre ---- */
var gG = $("gGuillo");
for (var r = 18; r <= 104; r += 7){
add(gG, "circle", {cx:CX, cy:CY, r:r, fill:"none", stroke:"rgba(255,255,255,0.04)", "stroke-width":1});
add(gG, "circle", {cx:CX, cy:CY, r:r + 3.5, fill:"none", stroke:"rgba(0,0,0,0.10)", "stroke-width":1});
}
/* ---- Minute track (skips the ticks hidden under the date aperture) ---- */
var gT = $("gTicks");
for (var m = 0; m < 60; m++){
if (m >= 14 && m <= 16) continue;
var long = (m % 5 === 0);
var q1 = polar(long ? 250 : 262, m * 6), q2 = polar(276, m * 6);
add(gT, "line", {x1:q1[0], y1:q1[1], x2:q2[0], y2:q2[1],
stroke: long ? "#e8daa9" : "rgba(232,218,169,0.7)",
"stroke-width": long ? 3 : 1.5, "stroke-linecap":"round"});
}
/* ---- Applied gold indices (double baton at 12, date window replaces 3) ---- */
var gI = $("gIndices");
function baton(dx, ang){
add(gI, "rect", {x:CX + dx - 7.5, y:CY - 254, width:15, height:54, rx:3.5,
fill:"url(#gIdx)", stroke:"rgba(56,40,12,0.85)", "stroke-width":1,
transform:"rotate(" + ang + " " + CX + " " + CY + ")"});
}
for (var h = 0; h < 12; h++){
if (h === 3) continue;
if (h === 0){ baton(-12, 0); baton(12, 0); } else { baton(0, h * 30); }
}
/* ---- Fluted bezel: 72 facets shaded by their angle to the light ---- */
var gF = $("gFlutes");
var cA = [84, 64, 26], cB = [248, 232, 186];
for (var f = 0; f < 72; f++){
var fa = f * 5 + 2.5;
var tt = Math.pow((Math.cos(rad(fa + 52)) + 1) / 2, 2.6);
var col = cA.map(function(v, k){ return Math.round(v + (cB[k] - v) * tt); });
var f1 = polar(297, fa - 2.6), f2 = polar(297, fa + 2.6),
f3 = polar(331, fa + 1.2), f4 = polar(331, fa - 1.2);
add(gF, "path", {d:"M" + f1 + " L" + f2 + " L" + f3 + " L" + f4 + " Z",
fill:"rgb(" + col + ")"});
}
/* ---- Crown knurling ---- */
var gK = $("gKnurl");
for (var k = 0; k < 6; k++){
add(gK, "line", {x1:847 + k * 6, y1:717, x2:847 + k * 6, y2:783,
stroke:"rgba(0,0,0,0.35)", "stroke-width":2.2});
}
/* ---- Today's date in the window ---- */
$("dateNum").textContent = String(new Date().getDate());
/* ---- Film grain tile, generated locally on a canvas (no assets) ---- */
(function(){
var c = document.createElement("canvas"); c.width = c.height = 160;
var x = c.getContext("2d"), d = x.createImageData(160, 160);
for (var i = 0; i < d.data.length; i += 4){
var v = (Math.random() * 255) | 0;
d.data[i] = d.data[i+1] = d.data[i+2] = v; d.data[i+3] = 18;
}
x.putImageData(d, 0, 0);
$("grain").style.backgroundImage = "url(" + c.toDataURL() + ")";
})();
/* ---- Live time: hands sweep continuously via requestAnimationFrame ---- */
var hH = $("hH"), hM = $("hM"), hS = $("hS"), readout = $("readout");
var watch = $("watch"), glare = $("glare");
var DAYS = ["SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"];
var MONTHS = ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"];
var p2 = function(n){ return String(n).padStart(2, "0"); };
var RM = window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches;
var last = "";
/* ---- Cursor parallax: the watch tilts, the glare slides across the crystal ---- */
var tx = 0, ty = 0, gx = 0, gy = 0;
addEventListener("pointermove", function(e){
tx = (e.clientX / innerWidth - 0.5) * 2;
ty = (e.clientY / innerHeight - 0.5) * 2;
});
document.addEventListener("mouseleave", function(){ tx = 0; ty = 0; });
function frame(){
var now = new Date();
var s = now.getSeconds() + now.getMilliseconds() / 1000;
var mi = now.getMinutes() + s / 60;
var h = now.getHours() % 12 + mi / 60;
hH.setAttribute("transform", "rotate(" + (h * 30) + " " + CX + " " + CY + ")");
hM.setAttribute("transform", "rotate(" + (mi * 6) + " " + CX + " " + CY + ")");
hS.setAttribute("transform", "rotate(" + (s * 6) + " " + CX + " " + CY + ")");
var key = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
if (key !== last){
last = key;
readout.textContent = DAYS[now.getDay()] + ", " + MONTHS[now.getMonth()] + " " +
now.getDate() + " \u2014 " + p2(now.getHours()) + ":" + p2(now.getMinutes()) + ":" + p2(now.getSeconds());
}
if (!RM){
gx += (tx - gx) * 0.07;
gy += (ty - gy) * 0.07;
watch.style.transform = "rotateX(" + (-gy * 7).toFixed(2) + "deg) rotateY(" + (gx * 9).toFixed(2) + "deg)";
glare.style.background = "radial-gradient(circle at " + (50 + gx * 38).toFixed(1) + "% " +
(42 + gy * 30).toFixed(1) + "%, rgba(255,255,255,0.14), rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 58%)";
}
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
/* ---- Optional mechanical tick: 8 beats per second, like a 28,800 vph movement ---- */
var btn = $("tickBtn"), actx = null, timer = null, beat = 0, on = false;
function tick(){
if (document.hidden || !actx) return;
var t = actx.currentTime;
beat ^= 1;
var o = actx.createOscillator(), g = actx.createGain();
o.type = "square";
o.frequency.value = (beat ? 2450 : 2900) + Math.random() * 160;
g.gain.setValueAtTime(0.0001, t);
g.gain.exponentialRampToValueAtTime(0.05, t + 0.004);
g.gain.exponentialRampToValueAtTime(0.0001, t + 0.03);
o.connect(g).connect(actx.destination); o.start(t); o.stop(t + 0.04);
var o2 = actx.createOscillator(), g2 = actx.createGain();
o2.type = "sine"; o2.frequency.value = 170;
g2.gain.setValueAtTime(0.0001, t);
g2.gain.exponentialRampToValueAtTime(0.035, t + 0.006);
g2.gain.exponentialRampToValueAtTime(0.0001, t + 0.05);
o2.connect(g2).connect(actx.destination); o2.start(t); o2.stop(t + 0.06);
}
btn.addEventListener("click", function(){
on = !on;
btn.setAttribute("aria-pressed", String(on));
btn.classList.toggle("is-on", on);
if (on){
if (!actx) actx = new (window.AudioContext || window.webkitAudioContext)();
if (actx.resume) actx.resume();
if (!timer) timer = setInterval(tick, 125);
} else {
clearInterval(timer); timer = null;
}
});
})();
</script>
</body>
</html>

