Run details
- Model
- z-ai/glm-5.3-prime
- Route
- OpenRouter API, one user message
- Served by
- Alibaba
- Effort
- max, OpenRouter's default for this model
- Limits
- 60 min · 131,072 output tokens (the model's limit)
- Date
- 23 Oct 2026
- Time
- 14 min 23 s
- Size
- 41 kB
- Tokens
- 87 in, 76,145 out (61,054 of them thinking)
- List price
- $0.67 at today's price ($2.8 in / $8.8 out per M)
- Paid
- $0.67
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
41 kB 720 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aurelian · Calibre A-72</title>
<style>
:root{
--serif:"Didot","Bodoni MT","Didot LT STD","Hoefler Text",Georgia,"Times New Roman",serif;
--sans:"Helvetica Neue","Segoe UI",Arial,sans-serif;
--w:min(58vh,78vw);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
background:#0B0A08 radial-gradient(130% 100% at 50% 40%, #14100B 0%, #0B0A08 52%, #060504 100%);
color:#D8CDB4; font-family:var(--serif);
overflow:hidden; display:flex; flex-direction:column;
-webkit-font-smoothing:antialiased; user-select:none;
}
/* ---------- ambience ---------- */
.spot{position:fixed;left:50%;top:46%;width:120vmin;height:120vmin;transform:translate(-50%,-50%);
background:radial-gradient(closest-side, rgba(216,186,138,.10), rgba(216,186,138,.03) 45%, transparent 70%);
pointer-events:none;z-index:0}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:6;
background:radial-gradient(115% 90% at 50% 42%, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%)}
.grain{position:fixed;inset:0;width:100vw;height:100vh;opacity:.05;mix-blend-mode:overlay;
pointer-events:none;z-index:7}
/* ---------- page furniture ---------- */
header{padding:26px 20px 6px;text-align:center;pointer-events:none;z-index:1;
animation:fadeIn 1.2s ease .15s backwards}
h1{font-weight:400;font-size:clamp(15px,2.4vw,23px);letter-spacing:.55em;padding-left:.55em;color:#E6D9BC}
header p{margin-top:7px;font-size:9px;letter-spacing:.42em;padding-left:.42em;color:#8B7E63}
footer{padding:6px 20px 24px;text-align:center;z-index:1;animation:fadeIn 1.2s ease .35s backwards}
.clock{font-family:var(--sans);font-size:13px;letter-spacing:.16em;color:#E6D8B8;
font-variant-numeric:tabular-nums}
.clock .dim{color:#7C6F55}
.ctrl{margin-top:14px;display:inline-flex;align-items:center;gap:9px;background:none;
border:1px solid rgba(214,190,140,.28);color:#D6BE8C;font-family:var(--serif);
font-size:10.5px;letter-spacing:.3em;padding:10px 20px 10px 17px;border-radius:999px;cursor:pointer;
transition:border-color .3s,background .3s,color .3s}
.ctrl:hover{border-color:rgba(214,190,140,.6);background:rgba(214,190,140,.06);color:#EBDDB6}
.ctrl:focus-visible{outline:1px solid rgba(214,190,140,.5);outline-offset:3px}
.ctrl svg{display:block;flex:none}
.corner{position:fixed;bottom:16px;font-size:9px;letter-spacing:.22em;color:#6E6350;z-index:1}
.corner.left{left:22px}.corner.right{right:22px}
@keyframes fadeIn{from{opacity:0}}
/* ---------- the watch ---------- */
main{flex:1;display:grid;place-items:center;perspective:1500px;position:relative;min-height:0;z-index:1}
.floorShadow{position:absolute;left:50%;top:calc(50% + var(--w)*.64);
width:calc(var(--w)*.82);height:calc(var(--w)*.11);transform:translateX(-50%);
background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.62), rgba(0,0,0,0) 68%);
filter:blur(8px);z-index:0}
.tilt{width:var(--w);height:calc(var(--w)*760/600);transform-style:preserve-3d;
will-change:transform;position:relative;z-index:2;cursor:pointer;
animation:fadeIn 1.4s ease .1s backwards}
.lift{position:absolute;inset:0;transform-style:preserve-3d}
.lift.go{animation:flipLift .95s cubic-bezier(.45,.05,.3,1)}
@keyframes flipLift{0%,100%{transform:translateZ(0)}48%{transform:translateZ(70px)}}
.flipper{position:absolute;inset:0;transform-style:preserve-3d;
transition:transform .92s cubic-bezier(.66,-.02,.28,1.02);will-change:transform}
.flipper.flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;width:100%;height:100%;
backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.back{transform:rotateY(180deg)}
#f_crown,#b_crown{cursor:pointer}
svg text{font-family:var(--serif)}
#f_dateText{font-family:var(--sans)}
@media (max-width:640px){.corner{display:none}:root{--w:min(52vh,88vw)}}
@media (max-height:640px){header{padding-top:12px}.corner{display:none}}
</style>
</head>
<body>
<div class="spot"></div>
<header>
<h1>AURELIAN</h1>
<p>HAUTE HORLOGERIE · GENÈVE</p>
</header>
<main>
<div class="floorShadow"></div>
<div class="tilt" id="tilt">
<div class="lift" id="lift">
<div class="flipper" id="flipper">
<!-- ================= DIAL SIDE ================= -->
<svg class="face front" id="watchFront" viewBox="0 0 600 760" role="img"
aria-label="Aurelian wristwatch dial showing the current local time">
<defs>
<linearGradient id="f_case" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#F2D9AE"/><stop offset=".25" stop-color="#DDAF70"/>
<stop offset=".5" stop-color="#9F7139"/><stop offset=".72" stop-color="#C89355"/>
<stop offset="1" stop-color="#6B471E"/>
</linearGradient>
<linearGradient id="f_bezel" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#FDF2D8"/><stop offset=".22" stop-color="#EDC88D"/>
<stop offset=".48" stop-color="#AD7F45"/><stop offset=".66" stop-color="#8F6230"/>
<stop offset=".85" stop-color="#DDB26E"/><stop offset="1" stop-color="#5E3F1A"/>
</linearGradient>
<radialGradient id="f_rehaut" cx=".5" cy=".5" r=".5">
<stop offset="0" stop-color="#143626"/><stop offset=".75" stop-color="#0D2A1C"/>
<stop offset="1" stop-color="#07170F"/>
</radialGradient>
<radialGradient id="f_dial" cx=".5" cy=".42" r=".65">
<stop offset="0" stop-color="#29684C"/><stop offset=".45" stop-color="#1C4B36"/>
<stop offset=".8" stop-color="#133325"/><stop offset="1" stop-color="#0B2418"/>
</radialGradient>
<radialGradient id="f_cap" cx=".38" cy=".35" r=".8">
<stop offset="0" stop-color="#FFF1C9"/><stop offset=".5" stop-color="#E6BC74"/>
<stop offset="1" stop-color="#7B531F"/>
</radialGradient>
<linearGradient id="f_secG" gradientUnits="userSpaceOnUse" x1="300" y1="216" x2="300" y2="424">
<stop offset="0" stop-color="#FFEDBB"/><stop offset=".5" stop-color="#DFB266"/>
<stop offset="1" stop-color="#8F6428"/>
</linearGradient>
<linearGradient id="f_dateFrame" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#F1DBA4"/><stop offset=".5" stop-color="#B8874A"/>
<stop offset="1" stop-color="#6E4B20"/>
</linearGradient>
<linearGradient id="f_crownG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#F6E4B4"/><stop offset=".5" stop-color="#C79A5B"/>
<stop offset="1" stop-color="#7C5526"/>
</linearGradient>
<linearGradient id="f_strapG" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#0E0805"/><stop offset=".1" stop-color="#221510"/>
<stop offset=".5" stop-color="#301E13"/><stop offset=".9" stop-color="#221510"/>
<stop offset="1" stop-color="#0E0805"/>
</linearGradient>
<linearGradient id="f_fadeT" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#0A0908"/><stop offset="1" stop-color="#0A0908" stop-opacity="0"/>
</linearGradient>
<linearGradient id="f_fadeB" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#0A0908" stop-opacity="0"/><stop offset="1" stop-color="#0A0908"/>
</linearGradient>
<pattern id="f_leather" width="64" height="30" patternUnits="userSpaceOnUse">
<rect width="64" height="30" fill="#1B120B"/>
<rect x="1" y="1" width="28" height="13" rx="6" fill="#231610" stroke="#332212" stroke-opacity=".55"/>
<rect x="33" y="1" width="28" height="13" rx="6" fill="#231610" stroke="#332212" stroke-opacity=".55"/>
<rect x="-14" y="16" width="28" height="13" rx="6" fill="#1E130C" stroke="#2E1C12" stroke-opacity=".55"/>
<rect x="18" y="16" width="28" height="13" rx="6" fill="#1E130C" stroke="#2E1C12" stroke-opacity=".55"/>
<rect x="50" y="16" width="28" height="13" rx="6" fill="#1E130C" stroke="#2E1C12" stroke-opacity=".55"/>
</pattern>
<radialGradient id="f_glow" cx=".5" cy=".5" r=".5">
<stop offset="0" stop-color="#FFFFFF" stop-opacity=".18"/>
<stop offset=".6" stop-color="#FFFFFF" stop-opacity=".05"/>
<stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/>
</radialGradient>
<filter id="f_hs" x="-60%" y="-60%" width="220%" height="220%">
<feDropShadow dx="1.5" dy="4.5" stdDeviation="2.6" flood-color="#000000" flood-opacity=".45"/>
</filter>
<filter id="f_blur"><feGaussianBlur stdDeviation="3.5"/></filter>
<clipPath id="f_cryst"><circle cx="300" cy="380" r="191"/></clipPath>
</defs>
<!-- alligator straps, running off into the dark -->
<g>
<rect x="252" y="-4" width="96" height="198" rx="9" fill="#1A110A"/>
<rect x="252" y="-4" width="96" height="198" rx="9" fill="url(#f_leather)"/>
<rect x="252" y="-4" width="96" height="198" rx="9" fill="url(#f_strapG)" opacity=".9"/>
<line x1="262" y1="4" x2="262" y2="182" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
<line x1="338" y1="4" x2="338" y2="182" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
<rect x="250" y="-4" width="100" height="78" fill="url(#f_fadeT)"/>
</g>
<g>
<rect x="252" y="566" width="96" height="198" rx="9" fill="#1A110A"/>
<rect x="252" y="566" width="96" height="198" rx="9" fill="url(#f_leather)"/>
<rect x="252" y="566" width="96" height="198" rx="9" fill="url(#f_strapG)" opacity=".9"/>
<line x1="262" y1="574" x2="262" y2="752" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
<line x1="338" y1="574" x2="338" y2="752" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
<rect x="250" y="682" width="100" height="82" fill="url(#f_fadeB)"/>
</g>
<!-- lugs -->
<g>
<g transform="rotate(24 300 380)">
<path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z"
fill="url(#f_case)" stroke="#503716" stroke-width=".8"/>
<path d="M 293.5 168 C 292 148 294 134 297 126" fill="none" stroke="#F2D9A8" stroke-width="1.2" opacity=".3"/>
</g>
<g transform="rotate(-24 300 380)">
<path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z"
fill="url(#f_case)" stroke="#503716" stroke-width=".8"/>
<path d="M 293.5 168 C 292 148 294 134 297 126" fill="none" stroke="#F2D9A8" stroke-width="1.2" opacity=".3"/>
</g>
<g transform="rotate(156 300 380)">
<path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z"
fill="url(#f_case)" stroke="#503716" stroke-width=".8"/>
</g>
<g transform="rotate(204 300 380)">
<path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z"
fill="url(#f_case)" stroke="#503716" stroke-width=".8"/>
</g>
</g>
<!-- case, bezel, rehaut, dial -->
<circle cx="300" cy="380" r="219" fill="url(#f_case)"/>
<circle cx="300" cy="380" r="219" fill="none" stroke="#3A2712" stroke-opacity=".5"/>
<circle cx="300" cy="380" r="214" fill="url(#f_bezel)"/>
<path d="M 102.9 327.2 A 204 204 0 0 1 247.2 182.8" fill="none" stroke="#FFEFC6" stroke-width="2.5" opacity=".3"/>
<path d="M 497.1 432.8 A 204 204 0 0 1 352.8 577.2" fill="none" stroke="#3A2410" stroke-width="2.5" opacity=".4"/>
<circle cx="300" cy="380" r="192" fill="#0A1B12"/>
<circle cx="300" cy="380" r="190" fill="url(#f_rehaut)"/>
<circle cx="300" cy="380" r="176" fill="url(#f_dial)"/>
<!-- sunray brushing, minute track, indices (generated) -->
<g id="f_rays"></g>
<circle cx="300" cy="380" r="173" fill="none" stroke="#000000" stroke-opacity=".28" stroke-width="8"/>
<g id="f_ticks"></g>
<g id="f_idx"></g>
<!-- printing -->
<text x="303" y="301" text-anchor="middle" font-size="25" letter-spacing="7" fill="#EFE5CC">AURELIAN</text>
<text x="302" y="323" text-anchor="middle" font-size="10.5" letter-spacing="4.5" fill="#C9BFA5">GENÈVE</text>
<text x="301.5" y="468" text-anchor="middle" font-size="11" letter-spacing="3.5" fill="#C9BFA5">AUTOMATIQUE</text>
<text x="301" y="486" text-anchor="middle" font-size="8.5" letter-spacing="2.5" fill="#A69C82">CALIBRE A-72</text>
<text x="262" y="551" text-anchor="middle" font-size="6.8" letter-spacing="1.6" fill="#B7AD93">SWISS</text>
<text x="338" y="551" text-anchor="middle" font-size="6.8" letter-spacing="1.6" fill="#B7AD93">MADE</text>
<!-- date window at 3 o'clock -->
<g>
<rect x="399" y="357" width="58" height="46" rx="6" fill="#07130C"/>
<rect x="401" y="359" width="54" height="42" rx="5" fill="url(#f_dateFrame)" stroke="#55391A" stroke-width=".8"/>
<rect x="405" y="363" width="46" height="34" rx="3" fill="#F4EEDF"/>
<rect x="405" y="363" width="46" height="8" rx="3" fill="#1F1A14" opacity=".14"/>
<text id="f_dateText" x="428" y="388" text-anchor="middle" font-size="23" font-weight="600" fill="#23201A">1</text>
</g>
<!-- hands (shadow wrapper stays unrotated so shadows fall the same way) -->
<g filter="url(#f_hs)">
<g id="f_hour">
<polygon points="300,278 291,396 300,410" fill="#F3DD9F"/>
<polygon points="300,278 309,396 300,410" fill="#A87834"/>
<polygon points="300,278 309,396 300,410 291,396" fill="none" stroke="#5A3F17" stroke-width=".8"/>
</g>
</g>
<g filter="url(#f_hs)">
<g id="f_min">
<polygon points="300,220 292,397 300,412" fill="#F3DD9F"/>
<polygon points="300,220 308,397 300,412" fill="#A87834"/>
<polygon points="300,220 308,397 300,412 292,397" fill="none" stroke="#5A3F17" stroke-width=".8"/>
</g>
</g>
<g filter="url(#f_hs)">
<g id="f_sec">
<polygon points="300,214 301.8,336 301.8,414 298.2,414 298.2,336"
fill="url(#f_secG)" stroke="#6B471E" stroke-width=".5"/>
<circle cx="300" cy="421" r="8" fill="url(#f_secG)" stroke="#6B471E" stroke-width=".6"/>
</g>
</g>
<circle cx="300" cy="380" r="11.5" fill="url(#f_cap)" stroke="#5F4419" stroke-width=".7"/>
<circle cx="300" cy="377" r="3.2" fill="#FFF3CF" opacity=".9"/>
<!-- sapphire reflections (shift with the light as you tilt) -->
<g clip-path="url(#f_cryst)">
<g id="f_sheen">
<ellipse cx="240" cy="292" rx="120" ry="78" fill="url(#f_glow)" transform="rotate(-22 240 292)" opacity=".8"/>
<ellipse cx="372" cy="468" rx="62" ry="38" fill="url(#f_glow)" transform="rotate(-22 372 468)" opacity=".5"/>
<path d="M 131.4 301.4 A 186 186 0 0 1 251.9 200.3" fill="none"
stroke="#FFFFFF" stroke-width="9" opacity=".1" filter="url(#f_blur)"/>
</g>
</g>
<!-- crown -->
<g id="f_crown">
<title>Flip the watch over</title>
<rect x="512" y="367" width="10" height="26" fill="url(#f_crownG)"/>
<rect x="520" y="360" width="30" height="40" rx="9" fill="url(#f_crownG)" stroke="#5A3E1A" stroke-width=".8"/>
<path d="M 525 363 V 397 M 529.5 362.5 V 397.5 M 534 362 V 398 M 538.5 362.5 V 397.5 M 543 363 V 397"
stroke="#7A5526" stroke-width="1.1" opacity=".55" fill="none"/>
<ellipse cx="550" cy="380" rx="4" ry="16.5" fill="#7A5323"/>
<circle cx="535" cy="380" r="30" fill="transparent"/>
</g>
</svg>
<!-- ================= CASEBACK / MOVEMENT ================= -->
<svg class="face back" id="watchBack" viewBox="0 0 600 760" role="img"
aria-label="Exhibition caseback revealing the Calibre A-72 movement">
<defs>
<linearGradient id="b_case" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#F2D9AE"/><stop offset=".25" stop-color="#DDAF70"/>
<stop offset=".5" stop-color="#9F7139"/><stop offset=".72" stop-color="#C89355"/>
<stop offset="1" stop-color="#6B471E"/>
</linearGradient>
<radialGradient id="b_brushed" cx=".5" cy=".5" r=".5">
<stop offset=".82" stop-color="#B58647"/><stop offset=".845" stop-color="#E9C88A"/>
<stop offset=".85" stop-color="#A8763C"/><stop offset=".87" stop-color="#D9AF6C"/>
<stop offset=".875" stop-color="#966A34"/><stop offset=".90" stop-color="#CFA45F"/>
<stop offset=".91" stop-color="#8E6231"/><stop offset=".945" stop-color="#C49755"/>
<stop offset=".96" stop-color="#7E5623"/><stop offset=".99" stop-color="#BD9053"/>
<stop offset="1" stop-color="#6B471E"/>
</radialGradient>
<radialGradient id="b_perlDot" cx=".38" cy=".35" r=".8">
<stop offset="0" stop-color="#D6D2C6"/><stop offset=".65" stop-color="#BCB8AC"/>
<stop offset="1" stop-color="#A29E92"/>
</radialGradient>
<pattern id="b_perlage" width="30" height="30" patternUnits="userSpaceOnUse">
<circle cx="7" cy="7" r="10" fill="url(#b_perlDot)"/>
<circle cx="22" cy="22" r="10" fill="url(#b_perlDot)"/>
</pattern>
<pattern id="b_cotes" width="42" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(24)">
<rect width="42" height="20" fill="#BEBAAE"/>
<rect width="20" height="20" fill="#C9C5B9"/>
<rect x="20" width="2" height="20" fill="#8F8B7E"/>
<rect x="0.6" width="1.2" height="20" fill="#E8E4D8" opacity=".8"/>
<rect x="39.6" width="1.2" height="20" fill="#E8E4D8" opacity=".8"/>
</pattern>
<pattern id="b_cotes2" width="42" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(-16)">
<rect width="42" height="20" fill="#BCB8AC"/>
<rect width="20" height="20" fill="#C6C2B6"/>
<rect x="20" width="2" height="20" fill="#8B877A"/>
<rect x="0.6" width="1.2" height="20" fill="#E6E2D6" opacity=".8"/>
</pattern>
<radialGradient id="b_steelG" cx=".38" cy=".35" r=".8">
<stop offset="0" stop-color="#EDE9DD"/><stop offset="1" stop-color="#9C988C"/>
</radialGradient>
<radialGradient id="b_rubyG" cx=".38" cy=".35" r=".8">
<stop offset="0" stop-color="#E46B84"/><stop offset=".55" stop-color="#A81E3D"/>
<stop offset="1" stop-color="#64101F"/>
</radialGradient>
<radialGradient id="b_chaton" cx=".38" cy=".35" r=".8">
<stop offset="0" stop-color="#F0D9A0"/><stop offset="1" stop-color="#8A6229"/>
</radialGradient>
<radialGradient id="b_hubG" cx=".38" cy=".35" r=".8">
<stop offset="0" stop-color="#F4E0AC"/><stop offset=".55" stop-color="#C89355"/>
<stop offset="1" stop-color="#7A5323"/>
</radialGradient>
<linearGradient id="b_beamG" gradientUnits="userSpaceOnUse" x1="446" y1="430" x2="404" y2="354">
<stop offset="0" stop-color="#DBD7CB"/><stop offset="1" stop-color="#A29E92"/>
</linearGradient>
<linearGradient id="b_rotorG" gradientUnits="userSpaceOnUse" x1="180" y1="480" x2="420" y2="540">
<stop offset="0" stop-color="#E9C285"/><stop offset=".45" stop-color="#C08D49"/>
<stop offset="1" stop-color="#7E5622"/>
</linearGradient>
<linearGradient id="b_crownG" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#F6E4B4"/><stop offset=".5" stop-color="#C79A5B"/>
<stop offset="1" stop-color="#7C5526"/>
</linearGradient>
<linearGradient id="b_strapG" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#0E0805"/><stop offset=".1" stop-color="#221510"/>
<stop offset=".5" stop-color="#301E13"/><stop offset=".9" stop-color="#221510"/>
<stop offset="1" stop-color="#0E0805"/>
</linearGradient>
<linearGradient id="b_fadeT" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#0A0908"/><stop offset="1" stop-color="#0A0908" stop-opacity="0"/>
</linearGradient>
<linearGradient id="b_fadeB" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#0A0908" stop-opacity="0"/><stop offset="1" stop-color="#0A0908"/>
</linearGradient>
<pattern id="b_leather" width="64" height="30" patternUnits="userSpaceOnUse">
<rect width="64" height="30" fill="#1B120B"/>
<rect x="1" y="1" width="28" height="13" rx="6" fill="#231610" stroke="#332212" stroke-opacity=".55"/>
<rect x="33" y="1" width="28" height="13" rx="6" fill="#231610" stroke="#332212" stroke-opacity=".55"/>
<rect x="-14" y="16" width="28" height="13" rx="6" fill="#1E130C" stroke="#2E1C12" stroke-opacity=".55"/>
<rect x="18" y="16" width="28" height="13" rx="6" fill="#1E130C" stroke="#2E1C12" stroke-opacity=".55"/>
<rect x="50" y="16" width="28" height="13" rx="6" fill="#1E130C" stroke="#2E1C12" stroke-opacity=".55"/>
</pattern>
<filter id="b_blur"><feGaussianBlur stdDeviation="5"/></filter>
<clipPath id="b_mov"><circle cx="300" cy="380" r="173"/></clipPath>
<path id="b_ct" d="M 300 184 a 196 196 0 1 1 -0.02 0" fill="none"/>
<path id="b_rotArc" d="M 164.2 458.5 A 157 157 0 0 0 435.8 458.5" fill="none"/>
<mask id="b_rotorMask" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="760">
<path d="M 457.9 437.5 A 168 168 0 0 1 142.1 437.5 L 201.3 416 A 105 105 0 0 0 398.7 416 Z" fill="#FFFFFF"/>
<g fill="none" stroke="#000000" stroke-width="26" stroke-linecap="round">
<path d="M 404.1 467.4 A 136 136 0 0 1 355.3 504.3"/>
<path d="M 337.5 510.7 A 136 136 0 0 1 276.4 514.0"/>
<path d="M 257.9 509.3 A 136 136 0 0 1 205.6 478.0"/>
</g>
</mask>
</defs>
<!-- straps -->
<g>
<rect x="252" y="-4" width="96" height="198" rx="9" fill="#1A110A"/>
<rect x="252" y="-4" width="96" height="198" rx="9" fill="url(#b_leather)"/>
<rect x="252" y="-4" width="96" height="198" rx="9" fill="url(#b_strapG)" opacity=".9"/>
<line x1="262" y1="4" x2="262" y2="182" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
<line x1="338" y1="4" x2="338" y2="182" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
<rect x="250" y="-4" width="100" height="78" fill="url(#b_fadeT)"/>
</g>
<g>
<rect x="252" y="566" width="96" height="198" rx="9" fill="#1A110A"/>
<rect x="252" y="566" width="96" height="198" rx="9" fill="url(#b_leather)"/>
<rect x="252" y="566" width="96" height="198" rx="9" fill="url(#b_strapG)" opacity=".9"/>
<line x1="262" y1="574" x2="262" y2="752" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
<line x1="338" y1="574" x2="338" y2="752" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
<rect x="250" y="682" width="100" height="82" fill="url(#b_fadeB)"/>
</g>
<!-- lugs -->
<g>
<g transform="rotate(24 300 380)"><path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z" fill="url(#b_case)" stroke="#503716" stroke-width=".8"/></g>
<g transform="rotate(-24 300 380)"><path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z" fill="url(#b_case)" stroke="#503716" stroke-width=".8"/></g>
<g transform="rotate(156 300 380)"><path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z" fill="url(#b_case)" stroke="#503716" stroke-width=".8"/></g>
<g transform="rotate(204 300 380)"><path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z" fill="url(#b_case)" stroke="#503716" stroke-width=".8"/></g>
</g>
<!-- caseback -->
<circle cx="300" cy="380" r="219" fill="url(#b_case)"/>
<circle cx="300" cy="380" r="219" fill="none" stroke="#3A2712" stroke-opacity=".5"/>
<circle cx="300" cy="380" r="214" fill="url(#b_brushed)"/>
<circle cx="300" cy="380" r="176" fill="#221910"/>
<!-- the calibre -->
<g clip-path="url(#b_mov)">
<circle cx="300" cy="380" r="173" fill="#B3AFA4"/>
<rect x="125" y="205" width="350" height="350" fill="url(#b_perlage)"/>
<g id="b_gearLayer"></g>
<path d="M 194 350 C 186 302 212 260 258 248 C 306 236 350 248 364 276 C 374 298 362 322 336 336 C 302 354 244 366 216 360 C 200 356 196 356 194 350 Z"
fill="url(#b_cotes)" stroke="#847F72" stroke-width="1"/>
<path d="M 198 472 C 208 444 248 432 298 432 C 350 432 392 444 404 470 C 412 490 396 512 364 524 C 328 534 252 532 224 516 C 206 506 194 492 198 472 Z"
fill="url(#b_cotes2)" stroke="#847F72" stroke-width="1"/>
<text x="240" y="322" text-anchor="middle" font-size="9" letter-spacing="2.2" fill="#8B8779" transform="rotate(-24 240 322)">AURELIAN</text>
<text x="300" y="486" text-anchor="middle" font-size="8.5" letter-spacing="2" fill="#8B8779" transform="rotate(-4 300 486)">N° 072 · ADJUSTED</text>
<g id="b_furni"></g>
<!-- hairspring + balance wheel, beating at 4 Hz -->
<g id="b_springG"><polyline id="b_spring" fill="none" stroke="#4C5F80" stroke-width="1.2" stroke-opacity=".9"/></g>
<g id="b_balance">
<circle cx="404" cy="354" r="44" fill="none" stroke="#D9A94F" stroke-width="7.5"/>
<circle cx="404" cy="354" r="40" fill="none" stroke="#7A5323" stroke-width="1" opacity=".7"/>
<line x1="366" y1="336.2" x2="442" y2="371.8" stroke="#D9A94F" stroke-width="5.5"/>
<circle cx="435" cy="323" r="2.8" fill="#E8C88F" stroke="#8A6229" stroke-width=".5"/>
<circle cx="435" cy="385" r="2.8" fill="#E8C88F" stroke="#8A6229" stroke-width=".5"/>
<circle cx="373" cy="323" r="2.8" fill="#E8C88F" stroke="#8A6229" stroke-width=".5"/>
<circle cx="373" cy="385" r="2.8" fill="#E8C88F" stroke="#8A6229" stroke-width=".5"/>
<circle cx="404" cy="354" r="4.5" fill="#EDE7D6"/>
</g>
<g id="b_cock">
<line x1="446" y1="430" x2="404" y2="354" stroke="url(#b_beamG)" stroke-width="24" stroke-linecap="round"/>
<circle cx="446" cy="430" r="12" fill="url(#b_steelG)" stroke="#6E6A5E"/>
<line x1="441" y1="425" x2="451" y2="435" stroke="#5A564C" stroke-width="1.6"/>
<circle cx="404" cy="354" r="13" fill="url(#b_steelG)" stroke="#6E6A5E"/>
<circle cx="404" cy="354" r="4.4" fill="url(#b_rubyG)"/>
<circle cx="402.6" cy="352.6" r="1.3" fill="#F79BAC" opacity=".85"/>
</g>
</g>
<!-- oscillating weight (simulated rotor) -->
<g id="b_rotor">
<g mask="url(#b_rotorMask)">
<path d="M 457.9 437.5 A 168 168 0 0 1 142.1 437.5 L 201.3 416 A 105 105 0 0 0 398.7 416 Z"
fill="url(#b_rotorG)" stroke="#6B471E" stroke-width="1.5"/>
<path d="M 453.9 442.3 A 166 166 0 0 1 146.1 442.3" fill="none" stroke="#F6E3B4" stroke-width="2.4" opacity=".5"/>
<path d="M 397 425.3 A 107 107 0 0 1 203 425.3" fill="none" stroke="#4A3113" stroke-width="1.6" opacity=".5"/>
<text font-size="11.5" letter-spacing="3" fill="#6B471E" opacity=".9">
<textPath href="#b_rotArc" startOffset="60">AURELIAN · AUTOMATIQUE</textPath>
</text>
</g>
<circle cx="300" cy="380" r="16" fill="url(#b_hubG)" stroke="#6B471E" stroke-width="1.2"/>
<circle cx="300" cy="380" r="4.5" fill="url(#b_rubyG)"/>
<circle cx="300" cy="376.5" r="1.4" fill="#F79BAC" opacity=".8"/>
<circle cx="300" cy="390.5" r="2" fill="#E8C88F" stroke="#8A6229" stroke-width=".4"/>
<circle cx="290.9" cy="374.8" r="2" fill="#E8C88F" stroke="#8A6229" stroke-width=".4"/>
<circle cx="309.1" cy="374.8" r="2" fill="#E8C88F" stroke="#8A6229" stroke-width=".4"/>
</g>
<!-- sapphire rim, engraving, reflection -->
<circle cx="300" cy="380" r="174.5" fill="none" stroke="#9A7337" stroke-width="2.6" opacity=".8"/>
<text font-size="12" letter-spacing="3.2" transform="translate(0 1.1)" fill="#EFDBA9" opacity=".5">
<textPath href="#b_ct">AURELIAN · GENÈVE · CALIBRE A-72 · TWENTY-FIVE JEWELS · AUTOMATIQUE · 28 800 A/H · SWISS MADE · ADJUSTED TO FIVE POSITIONS ·</textPath>
</text>
<text font-size="12" letter-spacing="3.2" fill="#6E4C22">
<textPath href="#b_ct">AURELIAN · GENÈVE · CALIBRE A-72 · TWENTY-FIVE JEWELS · AUTOMATIQUE · 28 800 A/H · SWISS MADE · ADJUSTED TO FIVE POSITIONS ·</textPath>
</text>
<g id="b_sheen">
<path d="M 142.1 322.5 A 168 168 0 0 1 242.5 222.1" fill="none"
stroke="#FFFFFF" stroke-width="16" opacity=".06" filter="url(#b_blur)"/>
</g>
<!-- crown, seen from the other side -->
<g id="b_crown">
<rect x="78" y="367" width="10" height="26" fill="url(#b_crownG)"/>
<rect x="50" y="360" width="30" height="40" rx="9" fill="url(#b_crownG)" stroke="#5A3E1A" stroke-width=".8"/>
<path d="M 57 363 V 397 M 61.5 362.5 V 397.5 M 66 362 V 398 M 70.5 362.5 V 397.5 M 75 363 V 397"
stroke="#7A5526" stroke-width="1.1" opacity=".55" fill="none"/>
<ellipse cx="50" cy="380" rx="4" ry="16.5" fill="#7A5323"/>
<circle cx="65" cy="380" r="30" fill="transparent"/>
</g>
</svg>
</div>
</div>
</div>
</main>
<footer>
<p class="clock">
<span id="clockTime">--:--:--</span>
<span class="dim"> · <span id="clockZone"></span> · <span id="clockUTC"></span></span>
</p>
<button class="ctrl" id="flipBtn" type="button">
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 7a5 5 0 1 1-1.46-3.54"/>
<path d="M10.9 1v2.7H8.2"/>
</svg>
<span id="flipLabel">VIEW MOVEMENT</span>
</button>
</footer>
<span class="corner left">CALIBRE A-72 · 28,800 VPH · 25 JEWELS</span>
<span class="corner right">ROSE GOLD · ALLIGATOR · SAPPHIRE</span>
<div class="vignette"></div>
<svg class="grain" aria-hidden="true">
<filter id="grF"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/>
<feColorMatrix type="saturate" values="0"/></filter>
<rect width="100%" height="100%" filter="url(#grF)"/>
</svg>
<script>
(function(){
"use strict";
var NS = "http://www.w3.org/2000/svg";
var $ = function(id){ return document.getElementById(id); };
function el(name, attrs, parent){
var e = document.createElementNS(NS, name);
for (var k in attrs) e.setAttribute(k, attrs[k]);
parent.appendChild(e);
return e;
}
/* ---------- generated dial furniture (front) ---------- */
var rays = $("f_rays");
for (var i = 0; i < 90; i++){
el("line", {
x1:300, y1:362, x2:300, y2:212,
transform:"rotate(" + (i*4) + " 300 380)",
stroke: (i % 2) ? "#0A1C12" : "#48936C",
"stroke-opacity": (i % 2) ? .22 : .09,
"stroke-width": 2.2, "stroke-linecap":"round"
}, rays);
}
var ticks = $("f_ticks");
for (var n = 0; n < 60; n++){
var M = (n % 5 === 0);
el("line", {
x1:300, y1:380 - (M ? 158 : 162), x2:300, y2:380 - (M ? 172 : 169),
transform:"rotate(" + (n*6) + " 300 380)",
stroke:"#EDE3C9", "stroke-width": M ? 2.6 : 1.1, "stroke-opacity": M ? .95 : .8
}, ticks);
}
var idx = $("f_idx");
function baton(g, dx){
var cx = 300 + dx;
var outline = "M " + cx + " 222 L " + (cx+5) + " 227.5 L " + (cx+5) + " 264 L " + (cx-5) + " 264 L " + (cx-5) + " 227.5 Z";
el("path", { d:outline, transform:"translate(1.6 3.6)", fill:"rgba(0,0,0,.35)" }, g);
el("path", { d:"M " + cx + " 222 L " + (cx-5) + " 227.5 L " + (cx-5) + " 264 L " + cx + " 264 Z", fill:"#F0D896" }, g);
el("path", { d:"M " + cx + " 222 L " + (cx+5) + " 227.5 L " + (cx+5) + " 264 L " + cx + " 264 Z", fill:"#A87834" }, g);
el("path", { d:outline, fill:"none", stroke:"#573D16", "stroke-width":.7 }, g);
}
for (var h = 0; h < 12; h++){
if (h === 3) continue; // date window lives there
var g = el("g", { transform:"rotate(" + (h*30) + " 300 380)" }, idx);
if (h === 0){ baton(g, -7.5); baton(g, 7.5); } // double baton at twelve
else baton(g, 0);
}
/* ---------- generated movement furniture (back) ---------- */
function makeGear(parent, cx, cy, r, teeth, armAngle){
var outer = el("g", { transform:"translate(" + cx + " " + cy + ")" }, parent);
var g = el("g", {}, outer);
for (var t = 0; t < teeth; t++){
el("rect", { x:-2.2, y:-r-4, width:4.4, height:5, rx:1, fill:"#B9974F",
transform:"rotate(" + (t*360/teeth) + ")" }, g);
}
el("circle", { r:r, fill:"#C9AE5E", stroke:"#8F7A42", "stroke-width":1 }, g);
for (var a = 0; a < 4; a++){
el("line", { x1:0, y1:0, x2:0, y2:-r, stroke:"#C9AE5E", "stroke-width":5.5,
transform:"rotate(" + (a*90 + armAngle) + ")" }, g);
}
el("circle", { r:r*.42, fill:"#C9AE5E", stroke:"#8F7A42", "stroke-width":1 }, g);
el("circle", { r:4, fill:"url(#b_rubyG)" }, outer);
return g;
}
var gearLayer = $("b_gearLayer");
var g1 = makeGear(gearLayer, 332, 400, 34, 22, 0);
var g2 = makeGear(gearLayer, 238, 414, 20, 15, 45);
var g3 = makeGear(gearLayer, 380, 268, 17, 13, 20);
var furni = $("b_furni");
function screw(x, y, a){
var s = el("g", { transform:"translate(" + x + " " + y + ")" }, furni);
el("circle", { r:4.6, fill:"url(#b_steelG)", stroke:"#6E6A5E", "stroke-width":1 }, s);
el("line", { x1:-2.9, y1:0, x2:2.9, y2:0, stroke:"#57534B", "stroke-width":1.5, transform:"rotate(" + a + ")" }, s);
el("circle", { r:1.1, cx:-1.5, cy:-1.6, fill:"#FFFFFF", opacity:.5 }, s);
}
function jewel(x, y){
var j = el("g", { transform:"translate(" + x + " " + y + ")" }, furni);
el("circle", { r:7.6, fill:"url(#b_chaton)", stroke:"#7A5323", "stroke-width":.8 }, j);
el("circle", { r:4.1, fill:"url(#b_rubyG)" }, j);
el("circle", { r:1.2, cx:-1.3, cy:-1.4, fill:"#F79BAC", opacity:.8 }, j);
}
screw(270,268,15); screw(348,300,72); screw(232,500,112); screw(342,514,38); screw(388,466,20);
jewel(238,292); jewel(330,266); jewel(252,462); jewel(358,488);
/* hairspring: an Archimedean spiral around the balance staff */
(function(){
var pts = [], turns = 4.5, steps = 360*turns/12;
for (var k = 0; k <= steps; k++){
var ang = k * 12 * Math.PI/180;
var rr = 5 + 30 * (k/steps);
pts.push((404 + rr*Math.cos(ang)).toFixed(1) + " " + (354 + rr*Math.sin(ang)).toFixed(1));
}
$("b_spring").setAttribute("points", pts.join(" "));
})();
/* ---------- state & elements ---------- */
var hourH = $("f_hour"), minH = $("f_min"), secH = $("f_sec");
var bBalance = $("b_balance"), bSpringG = $("b_springG"), bRotor = $("b_rotor");
var fSheen = $("f_sheen"), bSheen = $("b_sheen");
var tiltEl = $("tilt"), liftEl = $("lift"), flipperEl = $("flipper");
var dateText = $("f_dateText"), clockTime = $("clockTime");
var reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
var flipped = false, lastSec = -1, lastDate = -1;
var p2 = function(n){ return String(n).padStart(2, "0"); };
/* timezone caption */
try {
$("clockZone").textContent = (Intl.DateTimeFormat().resolvedOptions().timeZone || "Local time").replace(/_/g, " ");
} catch(e){ $("clockZone").textContent = "Local time"; }
(function(){
var off = -new Date().getTimezoneOffset();
var sgn = off < 0 ? "−" : "+", ao = Math.abs(off);
var oh = Math.floor(ao/60), om = ao % 60;
$("clockUTC").textContent = "UTC" + sgn + oh + (om ? ":" + p2(om) : "");
})();
/* rotor physics: heavy side wants to hang down, your mouse shakes it */
var rot = { a: 0.6, v: 2.4 };
/* pointer parallax */
var tx = 0, ty = 0, px = 0, py = 0, lastX = null, lastY = null;
window.addEventListener("pointermove", function(e){
if (lastX !== null && !reduced){
var dx = Math.max(-30, Math.min(30, e.clientX - lastX));
var dy = Math.max(-30, Math.min(30, e.clientY - lastY));
rot.v = Math.max(-9, Math.min(9, rot.v + dx*0.0016 + dy*0.0009));
}
lastX = e.clientX; lastY = e.clientY;
tx = (e.clientX / window.innerWidth - 0.5) * 2;
ty = (e.clientY / window.innerHeight - 0.5) * 2;
});
/* flip */
function setFlip(f){
flipped = f;
flipperEl.classList.toggle("flipped", f);
$("flipLabel").textContent = f ? "VIEW DIAL" : "VIEW MOVEMENT";
rot.v = Math.max(-9, Math.min(9, rot.v + (f ? 1 : -1) * 3.2)); // give the rotor a twirl
if (!reduced){
liftEl.classList.remove("go"); void liftEl.offsetWidth; liftEl.classList.add("go");
}
}
tiltEl.addEventListener("click", function(){ setFlip(!flipped); });
$("flipBtn").addEventListener("click", function(){ setFlip(!flipped); });
window.addEventListener("keydown", function(e){
if (e.key === "f" || e.key === "F") setFlip(!flipped);
});
/* ---------- the loop: real local time, sweeping seconds ---------- */
var last = performance.now();
function frame(now){
var dt = Math.min(0.05, (now - last) / 1000); last = now;
var t = now / 1000;
var d = new Date();
var s = d.getSeconds() + d.getMilliseconds()/1000; // continuous -> true sweep
var m = d.getMinutes() + s/60; // minute hand creeps, as on a real movement
var h = d.getHours() % 12 + m/60;
hourH.setAttribute("transform", "rotate(" + (h*30).toFixed(3) + " 300 380)");
minH.setAttribute("transform", "rotate(" + (m*6).toFixed(3) + " 300 380)");
secH.setAttribute("transform", "rotate(" + (s*6).toFixed(3) + " 300 380)");
if (d.getSeconds() !== lastSec){
lastSec = d.getSeconds();
clockTime.textContent = p2(d.getHours()) + ":" + p2(d.getMinutes()) + ":" + p2(d.getSeconds());
if (d.getDate() !== lastDate){ lastDate = d.getDate(); dateText.textContent = String(lastDate); }
}
/* balance wheel oscillating at 28,800 vph (4 Hz) + breathing hairspring */
var w = 2 * Math.PI * 4 * t;
var phi = 2.6 * Math.sin(w);
bBalance.setAttribute("transform", "rotate(" + (phi*180/Math.PI).toFixed(2) + " 404 354)");
var sc = 1 + 0.05 * Math.sin(w + 1.25);
bSpringG.setAttribute("transform", "translate(404 354) scale(" + sc.toFixed(4) + ") translate(-404 -354)");
/* going train */
g1.setAttribute("transform", "rotate(" + (t*6).toFixed(2) + ")");
g2.setAttribute("transform", "rotate(" + (-t*48).toFixed(2) + ")");
g3.setAttribute("transform", "rotate(" + (t*60).toFixed(2) + ")");
/* rotor: gravity toward bottom, damping, a whisper of idle life */
rot.v += (-Math.sin(rot.a) * 7 + 0.15 * Math.sin(t*0.9)) * dt;
rot.v *= Math.exp(-0.9 * dt);
rot.a += rot.v * dt;
bRotor.setAttribute("transform", "rotate(" + (rot.a*180/Math.PI).toFixed(2) + " 300 380)");
/* parallax tilt + travelling crystal reflections */
var k = Math.min(1, dt * 4.5);
px += (tx - px) * k; py += (ty - py) * k;
if (!reduced){
tiltEl.style.transform = "rotateY(" + (px*7).toFixed(2) + "deg) rotateX(" + (-py*5.5).toFixed(2) + "deg)";
fSheen.setAttribute("transform", "translate(" + (px*16).toFixed(1) + " " + (py*11).toFixed(1) + ")");
bSheen.setAttribute("transform", "translate(" + ((flipped?-1:1)*px*14).toFixed(1) + " " + (py*10).toFixed(1) + ")");
}
requestAnimationFrame(frame);
}
dateText.textContent = String(new Date().getDate());
requestAnimationFrame(frame);
})();
</script>
</body>
</html>

