Run details
- Model
- xiaomi/mimo-v2.6-flash
- Route
- OpenRouter API, one user message
- Served by
- Relace
- Effort
- the model's default
- Limits
- 60 min · 131,072 output tokens (the model's limit)
- Date
- 24 Oct 2026
- Time
- 11 min 19 s
- Size
- 27 kB
- Tokens
- 82 in, 50,174 out (28,618 of them thinking)
- List price
- $0.014 at today's price ($0.14 in / $0.28 out per M)
- Paid
- $0.014
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 595 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aurelia Chronomètre — Mechanical Wristwatch</title>
<style>
html, body { height: 100%; margin: 0; }
body {
background:
radial-gradient(1300px 900px at 50% 28%, #2c2d33 0%, #1a1b1f 42%, #0c0c0f 78%, #070709 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
body::before {
content: "";
position: fixed;
left: 50%; top: 42%;
width: 70vmin; height: 70vmin;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, rgba(255, 236, 205, 0.13), rgba(255, 236, 205, 0.04) 55%, transparent 75%);
pointer-events: none;
}
body::after {
content: "";
position: fixed;
inset: 0;
background: radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.85) 100%);
pointer-events: none;
}
.stage {
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
svg.watch {
height: 97vh;
width: auto;
max-width: 97vw;
display: block;
font-family: Georgia, "Times New Roman", Times, serif;
text-rendering: geometricPrecision;
}
</style>
</head>
<body>
<div class="stage">
<svg class="watch" viewBox="0 0 620 1020" xmlns="http://www.w3.org/2000/svg" role="img"
aria-label="Aurelia mechanical wristwatch showing the current local time with a sweeping seconds hand and date window">
<title>Aurelia Chronomètre — automatic mechanical wristwatch</title>
<defs>
<!-- ============ FILTERS ============ -->
<filter id="watchShadow" filterUnits="userSpaceOnUse" x="-60" y="-60" width="740" height="1120">
<feDropShadow dx="0" dy="26" stdDeviation="28" flood-color="#000000" flood-opacity="0.62"/>
<feDropShadow dx="0" dy="5" stdDeviation="7" flood-color="#000000" flood-opacity="0.40"/>
</filter>
<filter id="handShadow" filterUnits="userSpaceOnUse" x="60" y="230" width="500" height="520">
<feDropShadow dx="4" dy="7" stdDeviation="5" flood-color="#4a3315" flood-opacity="0.42"/>
</filter>
<filter id="tinyBlur" filterUnits="userSpaceOnUse" x="400" y="430" width="240" height="140">
<feGaussianBlur stdDeviation="4"/>
</filter>
<!-- ============ CASE / METAL ============ -->
<linearGradient id="caseFlank" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f4d3a4"/>
<stop offset="0.28" stop-color="#dca76a"/>
<stop offset="0.55" stop-color="#b87e46"/>
<stop offset="0.82" stop-color="#8d5b2d"/>
<stop offset="1" stop-color="#67421f"/>
</linearGradient>
<linearGradient id="lugGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#7d5027"/>
<stop offset="0.16" stop-color="#e7bf88"/>
<stop offset="0.40" stop-color="#fdeacb"/>
<stop offset="0.58" stop-color="#d9a86e"/>
<stop offset="0.82" stop-color="#ac743c"/>
<stop offset="1" stop-color="#77491f"/>
</linearGradient>
<linearGradient id="crownBody" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fbe8c7"/>
<stop offset="0.22" stop-color="#d9a768"/>
<stop offset="0.5" stop-color="#a56f38"/>
<stop offset="0.76" stop-color="#eccb96"/>
<stop offset="1" stop-color="#875827"/>
</linearGradient>
<linearGradient id="crownTube" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#6d4520"/>
<stop offset="0.6" stop-color="#c79457"/>
<stop offset="1" stop-color="#7c4f24"/>
</linearGradient>
<radialGradient id="gemGrad" cx="34%" cy="28%" r="78%">
<stop offset="0" stop-color="#8cc4ff"/>
<stop offset="0.35" stop-color="#2a63d8"/>
<stop offset="0.75" stop-color="#12367f"/>
<stop offset="1" stop-color="#06123f"/>
</radialGradient>
<radialGradient id="capGrad" cx="35%" cy="30%" r="75%">
<stop offset="0" stop-color="#fff3d6"/>
<stop offset="0.5" stop-color="#dcae70"/>
<stop offset="1" stop-color="#9a6a33"/>
</radialGradient>
<!-- ============ STRAP ============ -->
<linearGradient id="leatherBase" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#7c5030"/>
<stop offset="0.42" stop-color="#5e3a21"/>
<stop offset="0.75" stop-color="#4a2c18"/>
<stop offset="1" stop-color="#3a2211"/>
</linearGradient>
<linearGradient id="strapShade" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#000000" stop-opacity="0.60"/>
<stop offset="0.14" stop-color="#000000" stop-opacity="0.16"/>
<stop offset="0.42" stop-color="#ffffff" stop-opacity="0.10"/>
<stop offset="0.70" stop-color="#000000" stop-opacity="0.10"/>
<stop offset="1" stop-color="#000000" stop-opacity="0.60"/>
</linearGradient>
<linearGradient id="strapShadeY" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.10"/>
<stop offset="0.45" stop-color="#000000" stop-opacity="0.00"/>
<stop offset="1" stop-color="#000000" stop-opacity="0.42"/>
</linearGradient>
<pattern id="gator" patternUnits="userSpaceOnUse" width="48" height="40">
<g fill="rgba(255,255,255,0.055)" stroke="rgba(0,0,0,0.34)" stroke-width="1.3">
<rect x="6" y="3" width="36" height="16" rx="7"/>
<rect x="-9" y="24" width="27" height="14" rx="6"/>
<rect x="30" y="24" width="27" height="14" rx="6"/>
</g>
</pattern>
<pattern id="grainPat" width="7" height="7" patternUnits="userSpaceOnUse">
<circle cx="1.4" cy="2.1" r="0.75" fill="#000000" opacity="0.30"/>
<circle cx="5.2" cy="5.6" r="0.65" fill="#ffffff" opacity="0.22"/>
<circle cx="6.1" cy="1.2" r="0.5" fill="#000000" opacity="0.20"/>
</pattern>
<clipPath id="strapClip">
<path d="M210 560 L210 430 C212 320 216 170 222 -12 L398 -12 C404 170 408 320 410 430 L410 560 Z"/>
<path d="M210 420 L210 720 C212 800 216 875 220 930 Q226 960 310 963 Q394 960 400 930 C404 875 408 800 410 720 L410 420 Z"/>
</clipPath>
<!-- ============ DIAL ============ -->
<radialGradient id="dialFace" cx="45%" cy="36%" r="74%">
<stop offset="0" stop-color="#fdfaf3"/>
<stop offset="0.52" stop-color="#f6f0e4"/>
<stop offset="1" stop-color="#e5dbc6"/>
</radialGradient>
<radialGradient id="dialVig" gradientUnits="userSpaceOnUse" cx="310" cy="490" r="226">
<stop offset="0.60" stop-color="#000000" stop-opacity="0"/>
<stop offset="0.90" stop-color="#4a3a1e" stop-opacity="0.14"/>
<stop offset="1" stop-color="#3d2f16" stop-opacity="0.42"/>
</radialGradient>
<radialGradient id="dialVig2" gradientUnits="userSpaceOnUse" cx="310" cy="490" r="226">
<stop offset="0.90" stop-color="#000000" stop-opacity="0"/>
<stop offset="1" stop-color="#3d2f16" stop-opacity="0.30"/>
</radialGradient>
<linearGradient id="trackGrad" gradientUnits="userSpaceOnUse" x1="150" y1="300" x2="480" y2="690">
<stop offset="0" stop-color="#f9f4e9"/>
<stop offset="0.5" stop-color="#ece2ce"/>
<stop offset="1" stop-color="#ddd1b7"/>
</linearGradient>
<linearGradient id="markerFacet" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#fdeecd"/>
<stop offset="0.20" stop-color="#e3b579"/>
<stop offset="0.46" stop-color="#a97134"/>
<stop offset="0.60" stop-color="#f2d49d"/>
<stop offset="0.84" stop-color="#d2a05f"/>
<stop offset="1" stop-color="#8a5a2c"/>
</linearGradient>
<linearGradient id="goldText" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#f9e6bb"/>
<stop offset="0.40" stop-color="#c9934f"/>
<stop offset="0.70" stop-color="#8f6430"/>
<stop offset="1" stop-color="#e9c88f"/>
</linearGradient>
<linearGradient id="recessShade" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#4a3a1e" stop-opacity="0.42"/>
<stop offset="0.34" stop-color="#4a3a1e" stop-opacity="0.05"/>
<stop offset="1" stop-color="#4a3a1e" stop-opacity="0.14"/>
</linearGradient>
<clipPath id="dialClip"><circle cx="310" cy="490" r="226"/></clipPath>
<!-- ============ HANDS ============ -->
<linearGradient id="handLight" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#93c3f8"/>
<stop offset="0.35" stop-color="#4d8ce8"/>
<stop offset="1" stop-color="#1c4fb0"/>
</linearGradient>
<linearGradient id="handDark" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#2a63c4"/>
<stop offset="0.45" stop-color="#123a8c"/>
<stop offset="1" stop-color="#0a2459"/>
</linearGradient>
<linearGradient id="secGrad" gradientUnits="userSpaceOnUse" x1="310" y1="276" x2="310" y2="534">
<stop offset="0" stop-color="#7fb2f2"/>
<stop offset="0.5" stop-color="#1e56b8"/>
<stop offset="1" stop-color="#0c2a68"/>
</linearGradient>
<!-- ============ CRYSTAL ============ -->
<radialGradient id="sheenGrad">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.24"/>
<stop offset="0.5" stop-color="#ffffff" stop-opacity="0.11"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="sheenGrad2">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.09"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<radialGradient id="saphTint">
<stop offset="0" stop-color="#5c86ff" stop-opacity="0.015"/>
<stop offset="0.70" stop-color="#5c86ff" stop-opacity="0.035"/>
<stop offset="1" stop-color="#4a74ee" stop-opacity="0.13"/>
</radialGradient>
<radialGradient id="lensGrad">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.03"/>
<stop offset="0.72" stop-color="#ffffff" stop-opacity="0.05"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0.17"/>
</radialGradient>
</defs>
<!-- =================== STATIC BODY (gets outer shadow) =================== -->
<g filter="url(#watchShadow)">
<!-- ---------- STRAP ---------- -->
<g>
<g clip-path="url(#strapClip)">
<rect x="0" y="0" width="620" height="1020" fill="url(#leatherBase)"/>
<rect x="0" y="0" width="620" height="1020" fill="url(#gator)"/>
<rect x="0" y="0" width="620" height="1020" fill="url(#strapShade)"/>
<rect x="0" y="0" width="620" height="1020" fill="url(#strapShadeY)"/>
<rect x="0" y="0" width="620" height="1020" fill="url(#grainPat)" opacity="0.55"/>
</g>
<path d="M210 560 L210 430 C212 320 216 170 222 -12 L398 -12 C404 170 408 320 410 430 L410 560 Z"
fill="none" stroke="#25130a" stroke-width="3.2" opacity="0.9"/>
<path d="M210 420 L210 720 C212 800 216 875 220 930 Q226 960 310 963 Q394 960 400 930 C404 875 408 800 410 720 L410 420 Z"
fill="none" stroke="#25130a" stroke-width="3.2" opacity="0.9"/>
<!-- saddle stitching -->
<g stroke="#dcc49b" stroke-width="3.2" stroke-linecap="round" stroke-dasharray="9 9" opacity="0.72">
<path d="M226 545 C228 430 233 200 238 -6" fill="none"/>
<path d="M394 545 C392 430 387 200 382 -6" fill="none"/>
<path d="M226 440 C227 600 231 780 235 916" fill="none"/>
<path d="M394 440 C393 600 389 780 385 916" fill="none"/>
</g>
<g stroke="#3a220f" stroke-width="5" stroke-linecap="round" stroke-dasharray="9 9" opacity="0.35" transform="translate(0.8,1.4)">
<path d="M226 545 C228 430 233 200 238 -6" fill="none"/>
<path d="M394 545 C392 430 387 200 382 -6" fill="none"/>
<path d="M226 440 C227 600 231 780 235 916" fill="none"/>
<path d="M394 440 C393 600 389 780 385 916" fill="none"/>
</g>
<!-- buckle holes -->
<g>
<g fill="#0b0a0c">
<circle cx="310" cy="766" r="6.6"/>
<circle cx="310" cy="818" r="6.6"/>
<circle cx="310" cy="870" r="6.6"/>
<circle cx="310" cy="922" r="6.6"/>
</g>
<g fill="none" stroke="#c79a63" stroke-width="1.4" opacity="0.45">
<path d="M303.4 769 A6.6 6.6 0 0 0 316.6 769"/>
<path d="M303.4 821 A6.6 6.6 0 0 0 316.6 821"/>
<path d="M303.4 873 A6.6 6.6 0 0 0 316.6 873"/>
<path d="M303.4 925 A6.6 6.6 0 0 0 316.6 925"/>
</g>
<g fill="none" stroke="#000000" stroke-width="1.2" opacity="0.5">
<path d="M303.4 763 A6.6 6.6 0 0 1 316.6 763"/>
<path d="M303.4 815 A6.6 6.6 0 0 1 316.6 815"/>
<path d="M303.4 867 A6.6 6.6 0 0 1 316.6 867"/>
<path d="M303.4 919 A6.6 6.6 0 0 1 316.6 919"/>
</g>
</g>
</g>
<!-- ---------- LUGS ---------- -->
<g id="lugs">
<g transform="rotate(-27 310 490)">
<rect x="288" y="210" width="44" height="172" rx="20" fill="url(#lugGrad)" stroke="#7d5027" stroke-width="1.2"/>
</g>
<g transform="rotate(27 310 490)">
<rect x="288" y="210" width="44" height="172" rx="20" fill="url(#lugGrad)" stroke="#7d5027" stroke-width="1.2"/>
</g>
<g transform="rotate(27 310 490)">
<rect x="288" y="598" width="44" height="172" rx="20" fill="url(#lugGrad)" stroke="#7d5027" stroke-width="1.2"/>
</g>
<g transform="rotate(-27 310 490)">
<rect x="288" y="598" width="44" height="172" rx="20" fill="url(#lugGrad)" stroke="#7d5027" stroke-width="1.2"/>
</g>
</g>
<!-- ---------- CASE ---------- -->
<g id="case">
<circle cx="310" cy="490" r="256" fill="url(#caseFlank)" stroke="#5f3c1b" stroke-width="1.4"/>
<g id="bezelSegs"></g>
<!-- polished outer bead -->
<circle cx="310" cy="490" r="251.5" fill="none" stroke="#f6dcb0" stroke-width="1.6" opacity="0.55"/>
<circle cx="310" cy="490" r="248.5" fill="none" stroke="#6d451f" stroke-width="1.4" opacity="0.55"/>
<!-- bezel inner edge -->
<circle cx="310" cy="490" r="227.2" fill="none" stroke="#6a421d" stroke-width="1.8" opacity="0.7"/>
<circle cx="310" cy="490" r="225.6" fill="none" stroke="#fbe7c4" stroke-width="1" opacity="0.35"/>
</g>
<!-- ---------- DIAL ---------- -->
<g id="dial">
<circle cx="310" cy="490" r="226" fill="url(#dialFace)"/>
<g id="sunburst" clip-path="url(#dialClip)"></g>
<circle cx="310" cy="490" r="226" fill="url(#dialVig)"/>
<!-- minute track band (satiné) -->
<circle cx="310" cy="490" r="214" fill="none" stroke="url(#trackGrad)" stroke-width="24"/>
<g id="azurage"></g>
<circle cx="310" cy="490" r="202" fill="none" stroke="#bd9459" stroke-width="1.2" opacity="0.85"/>
<circle cx="310" cy="490" r="225" fill="none" stroke="#bd9459" stroke-width="1" opacity="0.7"/>
<circle cx="310" cy="490" r="226" fill="url(#dialVig2)"/>
<g id="ticks"></g>
<g id="markers"></g>
<!-- brand -->
<text x="312" y="420.5" text-anchor="middle" font-size="25" letter-spacing="7"
fill="rgba(60,40,15,0.30)">AURELIA</text>
<text x="310" y="418" text-anchor="middle" font-size="25" letter-spacing="7" fill="url(#goldText)">AURELIA</text>
<text x="310" y="441" text-anchor="middle" font-size="10.5" letter-spacing="5.5" fill="#7b6b55">GENÈVE</text>
<!-- date window -->
<g id="dateWindow">
<rect x="459" y="475" width="50" height="38" rx="3" fill="#000000" opacity="0.30" filter="url(#tinyBlur)"/>
<rect x="456" y="471" width="50" height="38" rx="3" fill="#fbf7ef" stroke="#bb8d4d" stroke-width="3.6"/>
<rect x="458.6" y="473.6" width="44.8" height="32.8" rx="1.6" fill="none" stroke="#6d5636" stroke-width="0.9" opacity="0.75"/>
<rect x="458.6" y="473.6" width="44.8" height="32.8" fill="url(#recessShade)"/>
<text id="dateText" x="481.6" y="499.5" text-anchor="middle" font-size="27" font-weight="600"
letter-spacing="1" fill="#26262b">31</text>
</g>
<!-- lower signature -->
<text x="310" y="573" text-anchor="middle" font-size="11.5" letter-spacing="4.6" fill="#6a5c48">AUTOMATIQUE</text>
<text x="310" y="594" text-anchor="middle" font-size="9.5" letter-spacing="3.4" fill="#8a7a5e">CHRONOMÈTRE</text>
<text x="288" y="707" text-anchor="end" font-size="9" letter-spacing="1.6" fill="#7b6b55">SWISS</text>
<text x="332" y="707" text-anchor="start" font-size="9" letter-spacing="1.6" fill="#7b6b55">MADE</text>
</g>
<!-- ---------- CROWN ---------- -->
<g id="crown">
<ellipse cx="574" cy="514" rx="26" ry="8" fill="#000000" opacity="0.40" filter="url(#tinyBlur)"/>
<rect x="558" y="474" width="20" height="32" rx="4" fill="url(#crownTube)" stroke="#6a4320" stroke-width="0.8"/>
<rect x="572" y="465" width="32" height="50" rx="8" fill="url(#crownBody)" stroke="#7d5027" stroke-width="1"/>
<g stroke="#7d4f26" stroke-width="1.5" opacity="0.5">
<line x1="577" y1="468" x2="577" y2="512"/>
<line x1="583" y1="467" x2="583" y2="513"/>
<line x1="589" y1="466" x2="589" y2="514"/>
</g>
<g stroke="#ffeac6" stroke-width="1" opacity="0.4">
<line x1="580" y1="468" x2="580" y2="512"/>
<line x1="586" y1="467" x2="586" y2="513"/>
</g>
<circle cx="604" cy="490" r="15" fill="url(#crownBody)" stroke="#7d5027" stroke-width="1"/>
<circle cx="606" cy="490" r="13.4" fill="url(#gemGrad)"/>
<ellipse cx="601" cy="483.5" rx="4.6" ry="3.4" fill="#ffffff" opacity="0.55" transform="rotate(-32 601 483.5)"/>
<circle cx="611" cy="496" r="3.4" fill="#8cc4ff" opacity="0.35"/>
</g>
</g>
<!-- =================== HANDS =================== -->
<g id="handStack">
<!-- hour -->
<g filter="url(#handShadow)">
<g id="hourHand" transform="rotate(0 310 490)">
<polygon points="310,330 299,490 310,516" fill="url(#handLight)"/>
<polygon points="310,330 321,490 310,516" fill="url(#handDark)"/>
<polygon points="310,330 321,490 310,516 299,490" fill="none" stroke="#0b1f4e" stroke-width="1"/>
<line x1="310" y1="332" x2="310" y2="513" stroke="#a9cdfb" stroke-width="1.1" opacity="0.65"/>
</g>
</g>
<!-- minute -->
<g filter="url(#handShadow)">
<g id="minuteHand" transform="rotate(0 310 490)">
<polygon points="310,285 301,490 310,518" fill="url(#handLight)"/>
<polygon points="310,285 319,490 310,518" fill="url(#handDark)"/>
<polygon points="310,285 319,490 310,518 301,490" fill="none" stroke="#0b1f4e" stroke-width="1"/>
<line x1="310" y1="287" x2="310" y2="516" stroke="#a9cdfb" stroke-width="1" opacity="0.65"/>
</g>
</g>
<!-- seconds (sweeping) -->
<g filter="url(#handShadow)">
<g id="secHand" transform="rotate(0 310 490)">
<line x1="310" y1="276" x2="310" y2="521" stroke="url(#secGrad)" stroke-width="2.8" stroke-linecap="round"/>
<circle cx="310" cy="524" r="7.6" fill="none" stroke="url(#secGrad)" stroke-width="2.8"/>
<circle cx="310" cy="524" r="2.2" fill="#fbf7ef" opacity="0.85"/>
</g>
</g>
<!-- centre cap -->
<g filter="url(#handShadow)">
<circle cx="310" cy="490" r="9.6" fill="url(#capGrad)" stroke="#7d5027" stroke-width="0.8"/>
<circle cx="310" cy="490" r="4.6" fill="#8a5a2c"/>
<ellipse cx="306.6" cy="486.6" rx="3" ry="2.1" fill="#ffffff" opacity="0.6" transform="rotate(-30 306.6 486.6)"/>
</g>
</g>
<!-- =================== CRYSTAL =================== -->
<g id="crystal" clip-path="url(#dialClip)">
<ellipse cx="228" cy="348" rx="188" ry="106" transform="rotate(-38 228 348)" fill="url(#sheenGrad)"/>
<path d="M120 476 Q196 334 332 252 L354 278 Q228 356 152 496 Z" fill="#ffffff" opacity="0.10"/>
<ellipse cx="430" cy="624" rx="126" ry="72" transform="rotate(-36 430 624)" fill="url(#sheenGrad2)"/>
<path d="M470 348 Q520 420 522 512 L498 512 Q496 424 452 366 Z" fill="#ffffff" opacity="0.05"/>
</g>
<g id="crystalEdge">
<circle cx="310" cy="490" r="226" fill="url(#saphTint)"/>
<circle cx="310" cy="490" r="226" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.16"/>
<path d="M114 377 A226 226 0 0 1 233 278" fill="none" stroke="#ffffff" stroke-width="7"
opacity="0.22" stroke-linecap="round"/>
<path d="M418 664 A226 226 0 0 1 336 714" fill="none" stroke="#ffffff" stroke-width="5"
opacity="0.10" stroke-linecap="round"/>
<!-- cyclops magnifier over the date -->
<circle cx="481" cy="490" r="42" fill="url(#lensGrad)" stroke="rgba(255,255,255,0.22)" stroke-width="1.3"/>
<path d="M452 462 A42 42 0 0 1 505 462" fill="none" stroke="#ffffff" stroke-width="3" opacity="0.35" stroke-linecap="round"/>
<path d="M456 520 A42 42 0 0 0 508 519" fill="none" stroke="#000000" stroke-width="3" opacity="0.10" stroke-linecap="round"/>
</g>
</svg>
</div>
<script>
(function () {
"use strict";
var NS = "http://www.w3.org/2000/svg";
var CX = 310, CY = 490, RD = 226;
function add(tag, attrs, parent) {
var e = document.createElementNS(NS, tag);
for (var k in attrs) { if (Object.prototype.hasOwnProperty.call(attrs, k)) e.setAttribute(k, attrs[k]); }
parent.appendChild(e);
return e;
}
/* ---------- polished rose-gold conic colouring ---------- */
function metal(t) {
var k1 = Math.cos(t + 2.356); // key light : upper-left
var k2 = Math.cos(t - 0.90); // fill light: lower-right
var f = Math.pow(0.5 + 0.5 * k1, 1.5);
var g = Math.pow(0.5 + 0.5 * k2, 3) * 0.42;
var spec = Math.pow(Math.max(0, k1), 8);
var base = [236, 178, 120], out = [];
for (var i = 0; i < 3; i++) {
var v = base[i] * (0.32 + 0.76 * f) + g * 44 + spec * (255 - base[i]) * 0.85;
out.push(Math.max(0, Math.min(255, Math.round(v))));
}
return "rgb(" + out.join(",") + ")";
}
/* ---------- bezel: 112 milled segments ---------- */
(function () {
var host = document.getElementById("bezelSegs");
var N = 112, r0 = 226.5, r1 = 250;
for (var i = 0; i < N; i++) {
var a0 = i / N * Math.PI * 2;
var a1 = (i + 1) / N * Math.PI * 2 + 0.005;
var pts = [
[CX + Math.cos(a0) * r0, CY + Math.sin(a0) * r0],
[CX + Math.cos(a1) * r0, CY + Math.sin(a1) * r0],
[CX + Math.cos(a1) * r1, CY + Math.sin(a1) * r1],
[CX + Math.cos(a0) * r1, CY + Math.sin(a0) * r1]
];
var d = "M";
for (var p = 0; p < 4; p++) {
d += (p ? "L" : "") + pts[p][0].toFixed(2) + " " + pts[p][1].toFixed(2);
}
add("path", { d: d + "Z", fill: metal((a0 + a1) / 2) }, host);
}
})();
/* ---------- sunburst guilloché ---------- */
(function () {
var host = document.getElementById("sunburst");
for (var i = 0; i < 240; i++) {
var a = i / 240 * Math.PI * 2;
add("line", {
x1: (CX + Math.cos(a) * 3).toFixed(2),
y1: (CY + Math.sin(a) * 3).toFixed(2),
x2: (CX + Math.cos(a) * (RD - 4)).toFixed(2),
y2: (CY + Math.sin(a) * (RD - 4)).toFixed(2),
stroke: (i % 2) ? "rgba(255,255,255,0.45)" : "rgba(112,90,56,0.22)",
"stroke-width": 1.5
}, host);
}
})();
/* ---------- azurage rings on the minute track ---------- */
(function () {
var host = document.getElementById("azurage");
for (var r = 204; r <= 224; r += 2) {
add("circle", { cx: CX, cy: CY, r: r, fill: "none",
stroke: "rgba(90,70,40,0.075)", "stroke-width": 0.9 }, host);
}
})();
/* ---------- 1/5-second railway track ---------- */
(function () {
var host = document.getElementById("ticks");
for (var i = 0; i < 300; i++) {
var a = i / 300 * Math.PI * 2 - Math.PI / 2;
var major = (i % 5 === 0);
var ri = major ? 208 : 215, ro = 221;
add("line", {
x1: (CX + Math.cos(a) * ri).toFixed(2),
y1: (CY + Math.sin(a) * ri).toFixed(2),
x2: (CX + Math.cos(a) * ro).toFixed(2),
y2: (CY + Math.sin(a) * ro).toFixed(2),
stroke: major ? "#4b3c2a" : "#7a6a52",
"stroke-width": major ? 2.2 : 1,
opacity: major ? 0.9 : 0.75
}, host);
}
})();
/* ---------- applied solid-gold baton indices ---------- */
(function () {
var host = document.getElementById("markers");
var topY = CY - 198, hgt = 34;
function baton(x, y, w, h, parent) {
add("rect", { x: x + 2.5, y: y + 3, width: w, height: h, rx: 2, fill: "#000000", opacity: 0.22 }, parent);
add("rect", { x: x, y: y, width: w, height: h, rx: 2, fill: "url(#markerFacet)" }, parent);
add("line", { x1: x + w * 0.5, y1: y + 1.5, x2: x + w * 0.5, y2: y + h - 1.5,
stroke: "#fff6e2", "stroke-width": 0.9, opacity: 0.55 }, parent);
add("rect", { x: x, y: y, width: w, height: h, rx: 2, fill: "none",
stroke: "#9a6a33", "stroke-width": 0.8, opacity: 0.75 }, parent);
}
for (var hr = 0; hr < 12; hr++) {
if (hr === 3) continue; /* date aperture at 3 */
var g = add("g", { transform: "rotate(" + (hr * 30) + " " + CX + " " + CY + ")" }, host);
if (hr === 0) { /* double index at 12 */
baton(CX - 16, topY, 10, hgt, g);
baton(CX + 6, topY, 10, hgt, g);
} else {
baton(CX - 5.5, topY, 11, hgt, g);
}
}
})();
/* ---------- movement: sweeping 28,800 A/h seconds ---------- */
var hourHand = document.getElementById("hourHand");
var minuteHand = document.getElementById("minuteHand");
var secHand = document.getElementById("secHand");
var dateText = document.getElementById("dateText");
var lastDate = -1;
function pad(n) { return n < 10 ? "0" + n : "" + n; }
function frame() {
var now = new Date();
var ms = now.getMilliseconds();
/* 8 beats per second -> authentic mechanical sweep, not a quartz tick */
var sec = now.getSeconds() + (Math.floor(ms / 125) * 125) / 1000;
var min = now.getMinutes() + sec / 60;
var hr = (now.getHours() % 12) + min / 60;
secHand.setAttribute("transform", "rotate(" + (sec * 6).toFixed(3) + " 310 490)");
minuteHand.setAttribute("transform","rotate(" + (min * 6).toFixed(3) + " 310 490)");
hourHand.setAttribute("transform", "rotate(" + (hr * 30).toFixed(3) + " 310 490)");
var d = now.getDate();
if (d !== lastDate) { dateText.textContent = pad(d); lastDate = d; }
requestAnimationFrame(frame);
}
/* first paint immediately (no flash at 12:00) */
(function () {
var now = new Date();
var sec = now.getSeconds() + now.getMilliseconds() / 1000;
var min = now.getMinutes() + sec / 60;
var hr = (now.getHours() % 12) + min / 60;
secHand.setAttribute("transform", "rotate(" + (sec * 6) + " 310 490)");
minuteHand.setAttribute("transform", "rotate(" + (min * 6) + " 310 490)");
hourHand.setAttribute("transform", "rotate(" + (hr * 30) + " 310 490)");
dateText.textContent = pad(now.getDate());
lastDate = now.getDate();
})();
requestAnimationFrame(frame);
})();
</script>
</body>
</html>

