Run details
- Model
- google/gemini-4-hydrogen
- Route
- OpenRouter API, one user message
- Served by
- Effort
- medium, OpenRouter's default for this model
- Limits
- 60 min · 400,000 output tokens (our $3.00 stop per request at $7.50/M)
- Date
- 12 Nov 2026
- Time
- 80 s
- Size
- 27 kB
- Tokens
- 108 in, 12,578 out (1,941 of them thinking)
- List price
- $0.094 at today's price ($1.50 in / $7.50 out per M)
- Paid
- $0.094
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 649 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chronomètre Genève — Mechanical Wristwatch</title>
<style>
:root {
--bg-inner: #1b1e26;
--bg-outer: #090a0d;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: radial-gradient(circle at 50% 42%, var(--bg-inner) 0%, #101218 48%, var(--bg-outer) 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: "Didot", "Bodoni MT", "Palatino Linotype", "Book Antiqua", Georgia, serif;
-webkit-font-smoothing: antialiased;
user-select: none;
}
/* Subtle ambient studio glow */
.stage {
position: relative;
width: min(94vw, 560px);
height: min(94vh, 720px);
display: flex;
align-items: center;
justify-content: center;
}
svg#watch {
width: 100%;
height: 100%;
max-height: 94vh;
filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.78));
overflow: visible;
}
.brand-main {
font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
letter-spacing: 0.26em;
font-weight: 600;
}
.brand-sub {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
letter-spacing: 0.34em;
font-weight: 500;
}
.date-text {
font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
font-weight: 700;
font-variant-numeric: lining-nums;
}
</style>
</head>
<body>
<div class="stage" id="stage">
<svg id="watch" viewBox="0 0 600 760" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Mechanical luxury wristwatch displaying current local time and date">
<defs>
<!-- Case & Bezel 18k Rose Gold Gradients -->
<linearGradient id="gold-case-body" x1="15%" y1="10%" x2="85%" y2="90%">
<stop offset="0%" stop-color="#f7dfca" />
<stop offset="22%" stop-color="#d8a382" />
<stop offset="48%" stop-color="#9c6649" />
<stop offset="72%" stop-color="#e7be9f" />
<stop offset="90%" stop-color="#8b593e" />
<stop offset="100%" stop-color="#c99270" />
</linearGradient>
<linearGradient id="gold-bezel-outer" x1="20%" y1="0%" x2="80%" y2="100%">
<stop offset="0%" stop-color="#fae6d4" />
<stop offset="18%" stop-color="#dfa987" />
<stop offset="42%" stop-color="#7c4f37" />
<stop offset="60%" stop-color="#f3d2b8" />
<stop offset="82%" stop-color="#9b6649" />
<stop offset="100%" stop-color="#d49e7c" />
</linearGradient>
<linearGradient id="gold-bezel-inner" x1="80%" y1="10%" x2="20%" y2="90%">
<stop offset="0%" stop-color="#784b34" />
<stop offset="30%" stop-color="#e8c1a3" />
<stop offset="55%" stop-color="#f9e6d5" />
<stop offset="80%" stop-color="#9e694b" />
<stop offset="100%" stop-color="#5d3825" />
</linearGradient>
<linearGradient id="gold-lug-left" x1="0%" y1="0%" x2="100%" y2="30%">
<stop offset="0%" stop-color="#f5dbc5" />
<stop offset="40%" stop-color="#c68d6c" />
<stop offset="80%" stop-color="#7e4f36" />
<stop offset="100%" stop-color="#b47d5d" />
</linearGradient>
<linearGradient id="gold-lug-right" x1="100%" y1="0%" x2="0%" y2="30%">
<stop offset="0%" stop-color="#85543a" />
<stop offset="35%" stop-color="#dfaa88" />
<stop offset="75%" stop-color="#f6dec9" />
<stop offset="100%" stop-color="#9c6649" />
</linearGradient>
<linearGradient id="gold-rehaut" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#6b412c" />
<stop offset="35%" stop-color="#c89271" />
<stop offset="65%" stop-color="#4e2e1e" />
<stop offset="100%" stop-color="#e3b797" />
</linearGradient>
<!-- Hand & Index Facet Gradients -->
<linearGradient id="facet-light" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fff4ea" />
<stop offset="55%" stop-color="#eec5a6" />
<stop offset="100%" stop-color="#c89170" />
</linearGradient>
<linearGradient id="facet-dark" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#c48a68" />
<stop offset="55%" stop-color="#8b583c" />
<stop offset="100%" stop-color="#5e3823" />
</linearGradient>
<linearGradient id="second-hand-gold" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#fff0e2" />
<stop offset="50%" stop-color="#e2ac89" />
<stop offset="100%" stop-color="#a87051" />
</linearGradient>
<!-- Deep Sunburst Midnight Navy Dial -->
<radialGradient id="dial-base" cx="50%" cy="46%" r="58%">
<stop offset="0%" stop-color="#172c52" />
<stop offset="45%" stop-color="#0f1f3d" />
<stop offset="82%" stop-color="#091326" />
<stop offset="100%" stop-color="#040812" />
</radialGradient>
<!-- Inner dial vignette for depth -->
<radialGradient id="dial-vignette" cx="50%" cy="50%" r="50%">
<stop offset="72%" stop-color="#000000" stop-opacity="0" />
<stop offset="94%" stop-color="#000000" stop-opacity="0.38" />
<stop offset="100%" stop-color="#000000" stop-opacity="0.72" />
</radialGradient>
<!-- Date Aperture Disc -->
<linearGradient id="date-disc-grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#dfd9cd" />
<stop offset="25%" stop-color="#f7f4ed" />
<stop offset="75%" stop-color="#f5f1e8" />
<stop offset="100%" stop-color="#d3ccbe" />
</linearGradient>
<!-- Strap Leather Gradients -->
<linearGradient id="leather-body" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0a0e18" />
<stop offset="14%" stop-color="#172034" />
<stop offset="50%" stop-color="#1d2840" />
<stop offset="86%" stop-color="#151e30" />
<stop offset="100%" stop-color="#080b12" />
</linearGradient>
<linearGradient id="leather-fade-top" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#090a0d" stop-opacity="0.92" />
<stop offset="40%" stop-color="#090a0d" stop-opacity="0.18" />
<stop offset="100%" stop-color="#090a0d" stop-opacity="0" />
</linearGradient>
<linearGradient id="leather-fade-bottom" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#090a0d" stop-opacity="0.92" />
<stop offset="40%" stop-color="#090a0d" stop-opacity="0.18" />
<stop offset="100%" stop-color="#090a0d" stop-opacity="0" />
</linearGradient>
<!-- Alligator Scale Pattern -->
<pattern id="gator-scales" width="46" height="32" patternUnits="userSpaceOnUse">
<rect width="46" height="32" fill="none" />
<path d="M2,2 C14,0 32,0 44,2 C45,10 45,22 44,30 C32,32 14,32 2,30 C1,22 1,10 2,2 Z"
fill="rgba(255,255,255,0.025)" stroke="rgba(0,0,0,0.52)" stroke-width="1.6" />
<path d="M5,5 C15,3.5 31,3.5 41,5" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.8" />
</pattern>
<!-- Fine leather grain filter -->
<filter id="leather-grain" x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" result="noise" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0" in="noise" result="grain" />
<feComposite in="grain" in2="SourceGraphic" operator="atop" />
</filter>
<!-- Sapphire Glass Reflections -->
<linearGradient id="sapphire-sheen" x1="15%" y1="10%" x2="85%" y2="90%">
<stop offset="0%" stop-color="#dbeafe" stop-opacity="0.17" />
<stop offset="28%" stop-color="#ffffff" stop-opacity="0.06" />
<stop offset="45%" stop-color="#ffffff" stop-opacity="0" />
<stop offset="82%" stop-color="#60a5fa" stop-opacity="0.03" />
<stop offset="100%" stop-color="#93c5fd" stop-opacity="0.11" />
</linearGradient>
<radialGradient id="sapphire-ar" cx="50%" cy="50%" r="50%">
<stop offset="86%" stop-color="#3b82f6" stop-opacity="0" />
<stop offset="97%" stop-color="#38bdf8" stop-opacity="0.08" />
<stop offset="100%" stop-color="#60a5fa" stop-opacity="0.18" />
</radialGradient>
<!-- Clip paths -->
<clipPath id="dial-clip">
<circle cx="300" cy="380" r="172" />
</clipPath>
<clipPath id="sapphire-clip">
<circle cx="300" cy="380" r="178" />
</clipPath>
<clipPath id="strap-top-clip">
<path d="M214,22 L386,22 L392,214 L208,214 Z" />
</clipPath>
<clipPath id="strap-bottom-clip">
<path d="M208,546 L392,546 L386,738 L214,738 Z" />
</clipPath>
<!-- Soft dial element shadows -->
<filter id="index-shadow" x="-30%" y="-30%" width="160%" height="160%">
<feDropShadow dx="1.4" dy="2.4" stdDeviation="1.6" flood-color="#000000" flood-opacity="0.65" />
</filter>
<filter id="hand-shadow-blur" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="2.1" />
</filter>
</defs>
<!-- ===================== TOP & BOTTOM LEATHER STRAPS ===================== -->
<g id="straps">
<!-- Top Strap -->
<g clip-path="url(#strap-top-clip)">
<path d="M214,22 L386,22 L392,214 L208,214 Z" fill="url(#leather-body)" />
<rect x="200" y="20" width="200" height="200" fill="url(#gator-scales)" />
<!-- Padded bolster edge shadows -->
<rect x="208" y="22" width="14" height="195" fill="rgba(0,0,0,0.42)" />
<rect x="378" y="22" width="14" height="195" fill="rgba(0,0,0,0.45)" />
<!-- Cream saddle stitching -->
<g id="stitching-top" stroke="#cbbba3" stroke-width="1.45" stroke-linecap="round" stroke-dasharray="5.5, 4.5" opacity="0.72">
<line x1="224" y1="24" x2="220" y2="210" />
<line x1="376" y1="24" x2="380" y2="210" />
</g>
<rect x="200" y="20" width="200" height="196" fill="url(#leather-fade-top)" />
</g>
<!-- Bottom Strap -->
<g clip-path="url(#strap-bottom-clip)">
<path d="M208,546 L392,546 L386,738 L214,738 Z" fill="url(#leather-body)" />
<rect x="200" y="544" width="200" height="200" fill="url(#gator-scales)" />
<rect x="208" y="544" width="14" height="195" fill="rgba(0,0,0,0.42)" />
<rect x="378" y="544" width="14" height="195" fill="rgba(0,0,0,0.45)" />
<g id="stitching-bottom" stroke="#cbbba3" stroke-width="1.45" stroke-linecap="round" stroke-dasharray="5.5, 4.5" opacity="0.72">
<line x1="220" y1="550" x2="224" y2="736" />
<line x1="380" y1="550" x2="376" y2="736" />
</g>
<rect x="200" y="544" width="200" height="196" fill="url(#leather-fade-bottom)" />
</g>
<!-- Subtle springbar shadow where strap meets case -->
<path d="M205,190 Q300,174 395,190 L395,210 L205,210 Z" fill="rgba(0,0,0,0.55)" />
<path d="M205,570 Q300,586 395,570 L395,550 L205,550 Z" fill="rgba(0,0,0,0.55)" />
</g>
<!-- ===================== WINDING CROWN (3 O'CLOCK) ===================== -->
<g id="crown" transform="translate(510, 380)">
<!-- Crown tube -->
<rect x="-10" y="-14" width="14" height="28" rx="2" fill="#7c4f37" />
<!-- Crown body -->
<rect x="0" y="-24" width="21" height="48" rx="5" fill="url(#gold-case-body)" stroke="#5b3724" stroke-width="0.8" />
<!-- Knurled ridges -->
<g id="crown-knurls"></g>
<!-- Polished outer cap -->
<path d="M18,-22 C24,-18 25,18 18,22 Z" fill="url(#gold-bezel-outer)" />
</g>
<!-- ===================== CASE & INTEGRATED LUGS ===================== -->
<g id="watch-case">
<!-- Upper & Lower Sculpted Lugs -->
<!-- Top Left Lug -->
<path d="M168,214 C178,176 186,144 195,128 L216,128 C214,158 214,185 218,208 Z" fill="url(#gold-lug-left)" />
<path d="M195,128 L201,128 C196,154 196,184 198,210 L185,212 C186,178 189,150 195,128 Z" fill="rgba(255,244,232,0.34)" />
<!-- Top Right Lug -->
<path d="M432,214 C422,176 414,144 405,128 L384,128 C386,158 386,185 382,208 Z" fill="url(#gold-lug-right)" />
<path d="M405,128 L399,128 C404,154 404,184 402,210 L415,212 C414,178 411,150 405,128 Z" fill="rgba(255,244,232,0.2)" />
<!-- Bottom Left Lug -->
<path d="M168,546 C178,584 186,616 195,632 L216,632 C214,602 214,575 218,552 Z" fill="url(#gold-lug-left)" />
<path d="M195,632 L201,632 C196,606 196,576 198,550 L185,548 C186,582 189,610 195,632 Z" fill="rgba(255,244,232,0.28)" />
<!-- Bottom Right Lug -->
<path d="M432,546 C422,584 414,616 405,632 L384,632 C386,602 386,575 382,552 Z" fill="url(#gold-lug-right)" />
<!-- Outer Case Flank -->
<circle cx="300" cy="380" r="214" fill="url(#gold-case-body)" />
<!-- Crisp outer chamfer highlight -->
<circle cx="300" cy="380" r="213" fill="none" stroke="rgba(255,238,220,0.42)" stroke-width="1.2" />
<!-- Stepped Concave Bezel -->
<circle cx="300" cy="380" r="204" fill="url(#gold-bezel-outer)" />
<circle cx="300" cy="380" r="192" fill="url(#gold-bezel-inner)" />
<circle cx="300" cy="380" r="181" fill="#3b2316" />
<!-- Inner Rehaut (angled chapter ring) -->
<circle cx="300" cy="380" r="179" fill="url(#gold-rehaut)" />
<circle cx="300" cy="380" r="173.5" fill="#070c17" />
</g>
<!-- ===================== WATCH DIAL ===================== -->
<g id="dial" clip-path="url(#dial-clip)">
<!-- Deep Sunburst Navy Base -->
<circle cx="300" cy="380" r="172" fill="url(#dial-base)" />
<!-- Sunburst Radial Brushing Lines (populated via JS) -->
<g id="sunburst-rays" opacity="0.22"></g>
<!-- Subtle Concentric Guilloché Groove Rings -->
<circle cx="300" cy="380" r="145" fill="none" stroke="rgba(255,255,255,0.035)" stroke-width="0.7" />
<circle cx="300" cy="380" r="110" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.7" />
<!-- Outer Minute / 1/5th-Second Precision Track -->
<g id="minute-track"></g>
<!-- Vignette depth -->
<circle cx="300" cy="380" r="172" fill="url(#dial-vignette)" />
<!-- Brand & Horological Inscriptions -->
<text x="300" y="294" text-anchor="middle" fill="#e8d6c3" font-size="12.5" class="brand-main">VALMONT</text>
<text x="300" y="309" text-anchor="middle" fill="#c39d82" font-size="7.2" class="brand-sub">GENÈVE</text>
<text x="300" y="454" text-anchor="middle" fill="#c9b49f" font-size="6.8" class="brand-sub">CHRONOMÈTRE</text>
<text x="300" y="466" text-anchor="middle" fill="#9a8878" font-size="6.2" class="brand-sub">AUTOMATIC</text>
<!-- Subtle Swiss Made signature at 6 o'clock -->
<text x="300" y="536" text-anchor="middle" fill="#8b9ab2" font-size="5.8" class="brand-sub">SWISS MADE</text>
<!-- ===================== DATE WINDOW (3 O'CLOCK) ===================== -->
<g id="date-window" transform="translate(413, 380)">
<!-- Outer applied rose-gold frame -->
<rect x="-21" y="-15" width="42" height="30" rx="2.5" fill="url(#gold-bezel-outer)" filter="url(#index-shadow)" />
<!-- Stepped inner bevel -->
<rect x="-18.5" y="-12.5" width="37" height="25" rx="1.6" fill="#5b3826" />
<!-- Recessed ivory date disc -->
<rect x="-17" y="-11" width="34" height="22" rx="1" fill="url(#date-disc-grad)" />
<!-- Inner aperture shadow from top/left -->
<path d="M-17,11 L-17,-11 L17,-11" fill="none" stroke="rgba(0,0,0,0.42)" stroke-width="2" />
<path d="M-17,11 L17,11 L17,-11" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="0.8" />
<!-- Current Day Number -->
<text id="date-number" x="0" y="5.8" text-anchor="middle" fill="#141822" font-size="16.5" class="date-text">18</text>
</g>
<!-- Applied Faceted Rose Gold Indices (populated via JS) -->
<g id="indices" filter="url(#index-shadow)"></g>
<!-- ===================== WATCH HANDS & SHADOWS ===================== -->
<!-- Dynamic directional shadow layer (light from top-left) -->
<g id="hands-shadows" transform="translate(3.5, 5.5)" opacity="0.52" filter="url(#hand-shadow-blur)">
<g id="hour-shadow">
<polygon points="300,398 294.5,380 298.8,274 300,268 301.2,274 305.5,380" fill="#000000" />
</g>
<g id="minute-shadow">
<polygon points="300,404 295.8,380 299.1,230 300,223 300.9,230 304.2,380" fill="#000000" />
</g>
<g id="second-shadow">
<polygon points="299.2,422 300.8,422 300.4,218 299.6,218" fill="#000000" />
<circle cx="300" cy="408" r="4.5" fill="#000000" />
</g>
</g>
<!-- Hour Hand (Faceted Dauphine) -->
<g id="hour-hand">
<!-- Left Bright Facet -->
<polygon points="300,398 294.2,380 298.6,274 300,268" fill="url(#facet-light)" />
<!-- Right Shaded Facet -->
<polygon points="300,398 305.8,380 301.4,274 300,268" fill="url(#facet-dark)" />
<!-- Crisp Central Ridge -->
<line x1="300" y1="397" x2="300" y2="269" stroke="rgba(255,250,245,0.65)" stroke-width="0.6" />
</g>
<!-- Minute Hand (Long Faceted Dauphine) -->
<g id="minute-hand">
<!-- Left Bright Facet -->
<polygon points="300,404 295.6,380 298.9,230 300,222" fill="url(#facet-light)" />
<!-- Right Shaded Facet -->
<polygon points="300,404 304.4,380 301.1,230 300,222" fill="url(#facet-dark)" />
<!-- Crisp Central Ridge -->
<line x1="300" y1="403" x2="300" y2="223" stroke="rgba(255,250,245,0.65)" stroke-width="0.55" />
</g>
<!-- Sweeping Seconds Hand -->
<g id="second-hand">
<!-- Counterweight ring & tail -->
<polygon points="298.4,424 301.6,424 300.6,216 299.4,216" fill="url(#second-hand-gold)" />
<!-- Pierced counterweight circle -->
<circle cx="300" cy="410" r="5" fill="#0d1b36" stroke="url(#facet-light)" stroke-width="1.8" />
<!-- Central cap -->
<circle cx="300" cy="380" r="6.8" fill="url(#gold-bezel-outer)" stroke="#5b3724" stroke-width="0.7" />
<circle cx="300" cy="380" r="2.6" fill="url(#facet-light)" />
<circle cx="300" cy="380" r="1.1" fill="#5e3823" />
</g>
</g>
<!-- ===================== SAPPHIRE CRYSTAL OVERLAY ===================== -->
<g id="sapphire-crystal" clip-path="url(#sapphire-clip)" pointer-events="none">
<!-- Subtle AR Coating Rim -->
<circle cx="300" cy="380" r="178" fill="url(#sapphire-ar)" />
<!-- Curved Specular Reflection (moves subtly with pointer) -->
<g id="crystal-glare">
<path d="M130,305 C185,205 335,180 445,250 C340,225 215,260 130,305 Z" fill="rgba(255,255,255,0.085)" />
<circle cx="300" cy="380" r="178" fill="url(#sapphire-sheen)" />
</g>
<!-- Crisp inner bezel lip reflection -->
<circle cx="300" cy="380" r="172.5" fill="none" stroke="rgba(255,244,232,0.22)" stroke-width="0.9" />
</g>
</svg>
</div>
<script>
(function () {
const SVG_NS = "http://www.w3.org/2000/svg";
const CX = 300;
const CY = 380;
function createSvgEl(tag, attrs) {
const el = document.createElementNS(SVG_NS, tag);
for (const [k, v] of Object.entries(attrs)) {
el.setAttribute(k, v);
}
return el;
}
// 1. Crown Knurling Ridges
const crownKnurls = document.getElementById("crown-knurls");
for (let y = -20; y <= 20; y += 3.6) {
crownKnurls.appendChild(
createSvgEl("line", {
x1: "1",
y1: y.toFixed(1),
x2: "17",
y2: y.toFixed(1),
stroke: "rgba(65, 34, 18, 0.55)",
"stroke-width": "1.2"
})
);
crownKnurls.appendChild(
createSvgEl("line", {
x1: "1",
y1: (y + 1.1).toFixed(1),
x2: "17",
y2: (y + 1.1).toFixed(1),
stroke: "rgba(255, 236, 218, 0.36)",
"stroke-width": "0.6"
})
);
}
// 2. Dial Sunburst Brushing Rays
const sunburstGroup = document.getElementById("sunburst-rays");
for (let i = 0; i < 180; i++) {
const angle = (i * 2) * (Math.PI / 180);
const x2 = CX + Math.cos(angle) * 172;
const y2 = CY + Math.sin(angle) * 172;
const light = i % 3 === 0 ? "rgba(120, 170, 255, 0.14)" : "rgba(0, 0, 0, 0.25)";
sunburstGroup.appendChild(
createSvgEl("line", {
x1: CX,
y1: CY,
x2: x2.toFixed(2),
y2: y2.toFixed(2),
stroke: light,
"stroke-width": i % 5 === 0 ? "1.1" : "0.55"
})
);
}
// 3. Precision Minute & 1/5th-Second Track (300 ticks)
const minuteTrack = document.getElementById("minute-track");
// Subtle outer framing hairlines
minuteTrack.appendChild(
createSvgEl("circle", {
cx: CX,
cy: CY,
r: "165.5",
fill: "none",
stroke: "rgba(226, 188, 155, 0.28)",
"stroke-width": "0.6"
})
);
for (let i = 0; i < 300; i++) {
const deg = i * 1.2;
const isHour = i % 25 === 0;
const isMinute = i % 5 === 0;
// Keep track ultra-clean right near the 3 o'clock edge
const rOuter = 164.5;
const rInner = isHour ? 156 : isMinute ? 157.5 : 161;
const rad = (deg - 90) * (Math.PI / 180);
const x1 = CX + Math.cos(rad) * rInner;
const y1 = CY + Math.sin(rad) * rInner;
const x2 = CX + Math.cos(rad) * rOuter;
const y2 = CY + Math.sin(rad) * rOuter;
minuteTrack.appendChild(
createSvgEl("line", {
x1: x1.toFixed(2),
y1: y1.toFixed(2),
x2: x2.toFixed(2),
y2: y2.toFixed(2),
stroke: isMinute ? "#ecd4be" : "rgba(210, 188, 168, 0.45)",
"stroke-width": isHour ? "1.45" : isMinute ? "1.05" : "0.5",
"stroke-linecap": "butt"
})
);
}
// 4. Applied Faceted Rose Gold Hour Indices
const indicesGroup = document.getElementById("indices");
function addFacetedBaton(deg, offsetX = 0, width = 6.2, rTop = 127, rBottom = 152) {
const g = createSvgEl("g", {
transform: `rotate(${deg} ${CX} ${CY}) translate(${offsetX}, 0)`
});
const yTop = CY - rBottom;
const yBot = CY - rTop;
const halfW = width / 2;
const tipInset = 3.2;
// Left bright facet
g.appendChild(
createSvgEl("polygon", {
points: `${CX},${yTop} ${CX - halfW},${yTop + tipInset} ${CX - halfW},${yBot - tipInset} ${CX},${yBot}`,
fill: "url(#facet-light)"
})
);
// Right darker facet
g.appendChild(
createSvgEl("polygon", {
points: `${CX},${yTop} ${CX + halfW},${yTop + tipInset} ${CX + halfW},${yBot - tipInset} ${CX},${yBot}`,
fill: "url(#facet-dark)"
})
);
// Top highlight ridge
g.appendChild(
createSvgEl("line", {
x1: CX,
y1: yTop + 0.5,
x2: CX,
y2: yBot - 0.5,
stroke: "rgba(255, 248, 240, 0.72)",
"stroke-width": "0.55"
})
);
indicesGroup.appendChild(g);
}
for (let h = 0; h < 12; h++) {
// 3 o'clock is replaced by the framed date window
if (h === 3) continue;
const deg = h * 30;
if (h === 0) {
// Double applied baton at 12 o'clock
addFacetedBaton(0, -4.8, 5.4, 125, 152);
addFacetedBaton(0, 4.8, 5.4, 125, 152);
} else {
addFacetedBaton(deg, 0, 5.8, 129, 152);
}
}
// 5. Real-time Mechanical Movement & Date Synchronization
const hourHand = document.getElementById("hour-hand");
const minuteHand = document.getElementById("minute-hand");
const secondHand = document.getElementById("second-hand");
const hourShadow = document.getElementById("hour-shadow");
const minuteShadow = document.getElementById("minute-shadow");
const secondShadow = document.getElementById("second-shadow");
const dateNumberEl = document.getElementById("date-number");
let lastRenderedDate = null;
function updateWatch() {
const now = new Date();
const ms = now.getMilliseconds();
const seconds = now.getSeconds() + ms / 1000;
const minutes = now.getMinutes() + seconds / 60;
const hours = (now.getHours() % 12) + minutes / 60;
const date = now.getDate();
const secAngle = seconds * 6;
const minAngle = minutes * 6;
const hourAngle = hours * 30;
const rotHour = `rotate(${hourAngle.toFixed(4)} ${CX} ${CY})`;
const rotMin = `rotate(${minAngle.toFixed(4)} ${CX} ${CY})`;
const rotSec = `rotate(${secAngle.toFixed(4)} ${CX} ${CY})`;
hourHand.setAttribute("transform", rotHour);
minuteHand.setAttribute("transform", rotMin);
secondHand.setAttribute("transform", rotSec);
hourShadow.setAttribute("transform", rotHour);
minuteShadow.setAttribute("transform", rotMin);
secondShadow.setAttribute("transform", rotSec);
if (date !== lastRenderedDate) {
dateNumberEl.textContent = String(date);
lastRenderedDate = date;
}
requestAnimationFrame(updateWatch);
}
requestAnimationFrame(updateWatch);
// 6. Subtle Interactive Sapphire Glare Shift on Pointer Move
const crystalGlare = document.getElementById("crystal-glare");
window.addEventListener(
"pointermove",
(e) => {
const nx = e.clientX / window.innerWidth - 0.5;
const ny = e.clientY / window.innerHeight - 0.5;
crystalGlare.setAttribute(
"transform",
`translate(${(nx * 14).toFixed(2)}, ${(ny * 10).toFixed(2)})`
);
},
{ passive: true }
);
})();
</script>
</body>
</html>

