• Updated 30 Oct, 21:11 UTC
  • Next run 31 Oct, 05:17 UTCNext 31 Oct 05:17
  • Last 7 days: 4 new models · 475 runs7 d: 4 models · 475 runs
Wristwatch that shows the current time

Qwen3.8 Max (0902)Alibaba

Network offOpen alone (new tab)

Run details

Model
qwen/qwen3.8-max-0902
Route
OpenRouter API, one user message
Served by
Alibaba
Effort
xhigh, OpenRouter's default for this model
Limits
60 min · 131,072 output tokens (the model's limit)
Date
27 Oct 2026
Time
19 min 9 s
Size
27 kB
Tokens
137 in, 46,236 out (35,226 of them thinking)
List price
$0.28 at today's price ($2 in / $6 out per M)
Paid
$0.28

Raw files: output · meta.json

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 492 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 Genève · Cœur Battant</title>
<style>
:root{
  --serif:'Didot','Bodoni MT','Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Avenir Next','Avenir','Futura','Century Gothic','Segoe UI','Trebuchet MS',Verdana,sans-serif;
  --ws:clamp(242px,60vmin,446px);
  --gold:#d8b98c; --gold-dim:#9b8259; --gold-faint:rgba(216,185,140,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  min-height:100vh;min-height:100svh;
  color:var(--gold);font-family:var(--sans);overflow-x:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(214,164,90,.13), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 115%, #2a1c10 0%, rgba(42,28,16,0) 55%),
    radial-gradient(ellipse 120% 100% at 50% 50%, #141009 0%, #0a0806 68%, #060504 100%);
  -webkit-user-select:none;user-select:none;
}
body::before{content:'';position:fixed;inset:0;z-index:40;pointer-events:none;
  background:radial-gradient(ellipse 90% 88% at 50% 46%, transparent 58%, rgba(0,0,0,.55) 100%);}
.grain{position:fixed;inset:0;z-index:41;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");}

.stage{min-height:100svh;display:flex;flex-direction:column;align-items:center;
  padding:clamp(14px,2.6vh,32px) clamp(16px,4vw,52px);gap:clamp(6px,1.4vh,16px);position:relative;}

/* ---------- corner typography ---------- */
.corner{width:min(1120px,100%);display:flex;justify-content:space-between;align-items:baseline;gap:16px;z-index:3;flex-wrap:wrap;}
.top{border-bottom:1px solid var(--gold-faint);padding-bottom:13px}
.bottom{border-top:1px solid var(--gold-faint);padding-top:13px}
.brand{font-family:var(--serif);font-size:15px;letter-spacing:.5em;color:#e5c99a;white-space:nowrap}
.brand b{color:var(--gold-dim);font-weight:400}
.edition{font-size:10px;letter-spacing:.32em;color:var(--gold-dim)}
.cell{display:flex;flex-direction:column;gap:5px}
.cell.right{align-items:flex-end;text-align:right}
.lbl{font-size:9px;letter-spacing:.34em;color:#6d5a40}
.val{font-size:12px;letter-spacing:.12em;color:#cbb287;font-variant-numeric:tabular-nums}
.val.big{font-family:var(--serif);font-style:italic;font-size:15.5px;letter-spacing:.05em;color:#e5c99a}

/* ---------- podium / ambience ---------- */
.podium{flex:1;display:grid;place-items:center;position:relative;width:100%;padding:calc(var(--ws)*.06) 0;z-index:2}
.podium::before{content:'';position:absolute;left:50%;top:50%;width:calc(var(--ws)*1.4);height:calc(var(--ws)*1.4);
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle, rgba(224,178,110,.13), rgba(224,178,110,.035) 45%, transparent 68%);}
.halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.h1{width:calc(var(--ws)*1.42);height:calc(var(--ws)*1.42);border:1px solid rgba(216,185,140,.07)}
.h2{width:calc(var(--ws)*1.78);height:calc(var(--ws)*1.78);border:1px dashed rgba(216,185,140,.09);animation:halospin 160s linear infinite}
@keyframes halospin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.float{position:relative;z-index:2;perspective:1200px;animation:floaty 9s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(-5px)}50%{transform:translateY(6px)}}

/* ---------- the watch ---------- */
.watch{position:relative;width:var(--ws);height:var(--ws);transform-style:preserve-3d;will-change:transform}

.straps{position:absolute;inset:0;z-index:0;pointer-events:none}
.strap{position:absolute;left:50%;transform:translateX(-50%);width:52%;
  background:
    linear-gradient(90deg, transparent 46%, rgba(255,222,176,.10) 50%, transparent 54%),
    linear-gradient(90deg,#160b05 0%,#33200f 10%,#5b3a1e 30%,#7a4e28 50%,#5b3a1e 70%,#33200f 90%,#160b05 100%);
  box-shadow:0 18px 40px rgba(0,0,0,.55);}
.strap::before{content:'';position:absolute;inset:0;opacity:.8;
  background:
    repeating-linear-gradient(180deg, rgba(230,196,146,.5) 0 7px, transparent 7px 14px) 8% 0 / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(230,196,146,.5) 0 7px, transparent 7px 14px) 92% 0 / 2px 100% no-repeat;}
.strap::after{content:'';position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(ellipse 46% 34% at 50% 50%, rgba(0,0,0,.30) 0 34%, transparent 62%),
    radial-gradient(ellipse 46% 34% at 50% 50%, rgba(0,0,0,.24) 0 34%, transparent 62%);
  background-size:26px 19px,26px 19px;background-position:0 0,13px 10px;}
.strap.top{top:-33%;height:37%;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%);}
.strap.bottom{bottom:-33%;height:37%;clip-path:polygon(0 0,100% 0,82% 100%,18% 100%);
  -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 34%);mask-image:linear-gradient(0deg,transparent 0,#000 34%);}

.lug{position:absolute;width:13%;height:13%;z-index:1;border-radius:34% 66% 30% 70%/40% 60% 40% 60%;
  background:linear-gradient(145deg,#e8c293 0%,#a9794b 45%,#6b4123 100%);
  box-shadow:inset 0 1px 2px rgba(255,240,210,.4), inset 0 -2px 4px rgba(40,15,3,.5);}
.lug.tl{left:14.5%;top:-1.5%;transform:rotate(-38deg)}
.lug.tr{right:14.5%;top:-1.5%;transform:rotate(38deg) scaleX(-1)}
.lug.bl{left:14.5%;bottom:-1.5%;transform:rotate(38deg) scaleX(-1) scaleY(-1)}
.lug.br{right:14.5%;bottom:-1.5%;transform:rotate(-38deg) scaleY(-1)}

.stem{position:absolute;left:94.6%;top:46.8%;width:6%;height:6.4%;z-index:1;border-radius:3px;
  background:linear-gradient(180deg,#c89b5e,#5d3a1c)}
.crown{position:absolute;left:96.2%;top:50%;transform:translateY(-50%);width:8.6%;height:10.5%;z-index:1;
  border-radius:22%/48%;overflow:hidden;cursor:pointer;transition:filter .25s;
  background:linear-gradient(180deg,#f6dcb2 0%,#d3a468 30%,#8a5a32 62%,#5d3a1c 100%);
  box-shadow:inset 0 2px 3px rgba(255,244,214,.5), inset 0 -3px 5px rgba(40,15,3,.6), 4px 6px 12px rgba(0,0,0,.5);}
.crown i{position:absolute;inset:6% 8%;border-radius:18%/45%;
  background:repeating-linear-gradient(90deg, rgba(48,20,4,.55) 0 2px, rgba(255,240,210,.18) 2px 3.5px, transparent 3.5px 6px);}
.crown:hover{filter:brightness(1.15)}
.crown.wind i{animation:knurl .6s linear}
@keyframes knurl{to{transform:translateX(12px)}}

.case{position:absolute;inset:0;border-radius:50%;z-index:2;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,240,214,.5), rgba(255,240,214,.08) 30%, transparent 55%),
    radial-gradient(circle at 70% 78%, rgba(60,20,5,.55), transparent 55%),
    conic-gradient(from 205deg,#6b4123,#f4d6ae 9%,#caa06a 20%,#7d4e29 32%,#f0cda0 44%,#a9794b 56%,#5f3a1d 68%,#f7ddb9 80%,#b98a58 90%,#6b4123);
  box-shadow:0 34px 90px -18px rgba(0,0,0,.9), 0 12px 34px rgba(0,0,0,.55), 0 0 90px rgba(216,164,90,.10),
    inset 0 2px 3px rgba(255,255,255,.35), inset 0 -3px 8px rgba(60,25,5,.6);}
.groove{position:absolute;inset:3.9%;border-radius:50%;z-index:3;background:#1b0e04;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.75)}
.bezel{position:absolute;inset:4.6%;border-radius:50%;z-index:4;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,244,218,.38), transparent 46%),
    conic-gradient(from 15deg,#7c4a26,#f7ddb9 10%,#d8a76c 22%,#8a5430 34%,#f2d2a4 47%,#a97648 59%,#6b4123 70%,#f6dcb4 82%,#bd8a58 91%,#7c4a26);
  box-shadow:inset 0 0 0 2px rgba(255,240,214,.22), inset 0 -7px 16px rgba(46,18,3,.55),
    inset 0 5px 10px rgba(255,240,214,.18), 0 2px 6px rgba(0,0,0,.5);}
.dialwrap{position:absolute;inset:9.4%;border-radius:50%;z-index:5;overflow:hidden;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,244,214,.16), rgba(255,244,214,0) 46%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.52) 96%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.06) 0deg .8deg, rgba(0,0,0,.10) .8deg 1.6deg),
    radial-gradient(circle at 50% 45%, #17603f 0%, #0e4a30 42%, #083322 74%, #052015 100%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.65), inset 0 8px 22px rgba(0,0,0,.5);}
#face{position:absolute;inset:0;width:100%;height:100%;display:block}
#face text{font-family:var(--serif);fill:#ecd7a8;text-anchor:middle}
.lg{font-size:46px;letter-spacing:12px}
.sm{font-size:19px;letter-spacing:9px;fill:#d9c08c}
.md{font-size:16px;letter-spacing:7px;fill:#cbb287}
.xs{font-size:14px;letter-spacing:3.5px;fill:#a08a5f}
#dateNum{font-size:44px;fill:#f3dfb4;letter-spacing:0}

.crystal{position:absolute;inset:9.4%;border-radius:50%;pointer-events:none;z-index:6;
  background:
    radial-gradient(ellipse 62% 40% at 31% 22%, rgba(255,255,255,.17), rgba(255,255,255,.04) 48%, transparent 68%),
    radial-gradient(ellipse 55% 32% at 74% 84%, rgba(255,255,255,.05), transparent 62%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(0,0,0,.32) 99%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 12px 26px rgba(255,255,255,.05),
    inset 0 -16px 34px rgba(0,0,0,.38);}
.glare{position:absolute;inset:4%;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle at calc(32% + var(--gx,0%)) calc(26% + var(--gy,0%)),
    rgba(255,250,235,.30), rgba(255,250,235,.05) 30%, transparent 52%);}
.crystal::after{content:'';position:absolute;inset:-2%;border-radius:50%;
  background:linear-gradient(118deg,transparent 43%,rgba(255,255,255,.4) 50%,transparent 57%);
  opacity:0;transform:translateX(-85%) skewX(-6deg);}
.crystal.flash::after{animation:sweep 1.15s cubic-bezier(.4,.6,.3,1)}
@keyframes sweep{0%{opacity:0;transform:translateX(-85%) skewX(-6deg)}12%{opacity:.85}100%{opacity:0;transform:translateX(85%) skewX(-6deg)}}

/* movement life */
.wheel{animation:rot360 60s linear infinite;transform-box:fill-box;transform-origin:center}
.wheel.rev{animation-direction:reverse}
@keyframes rot360{to{transform:rotate(360deg)}}
.beat{animation:beat .14s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes beat{from{transform:rotate(-30deg)}to{transform:rotate(30deg)}}

/* ---------- model block ---------- */
.model{text-align:center;z-index:3;margin-top:clamp(4px,1.2vh,14px)}
.orn{display:flex;align-items:center;justify-content:center;gap:12px;color:#8a6f4a;font-size:9px;margin-bottom:9px}
.orn::before,.orn::after{content:'';height:1px;width:clamp(40px,8vw,90px);
  background:linear-gradient(90deg,transparent,rgba(216,185,140,.5))}
.orn::after{transform:scaleX(-1)}
.model h1{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(26px,4.6vmin,42px);color:#ecd7a8;letter-spacing:.02em;margin-bottom:8px}
.model .spec{font-size:10px;letter-spacing:.42em;color:var(--gold-dim)}

/* ---------- dust ---------- */
#dust{position:fixed;inset:0;pointer-events:none;z-index:1}
#dust s{position:absolute;bottom:-3vh;border-radius:50%;filter:blur(.6px);
  background:radial-gradient(circle,rgba(255,226,170,.9),rgba(255,226,170,0) 70%);
  animation:rise var(--dur) linear var(--del) infinite;}
@keyframes rise{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:.75}85%{opacity:.45}
  100%{transform:translate3d(var(--dx),-108vh,0);opacity:0}}

@media (max-width:640px){
  .brand{letter-spacing:.3em;font-size:13px}
  .edition{display:none}
  .val{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .wheel,.beat,#dust s,.halo.h2,.crystal::after,.float,.crown.wind i{animation:none !important}
}
</style>
</head>
<body>
<div class="grain"></div>
<div id="dust"></div>

<main class="stage">
  <header class="corner top">
    <div class="brand">AURELINE <b>·</b> GENÈVE</div>
    <div class="edition">ÉDITION LIMITÉE — Nº 087 ⁄ 300</div>
  </header>

  <section class="podium">
    <div class="halo h1"></div>
    <div class="halo h2"></div>
    <div class="float">
      <div class="watch" id="watch" role="img" aria-label="Mechanical wristwatch showing the current local time">
        <div class="straps"><div class="strap top"></div><div class="strap bottom"></div></div>
        <div class="lug tl"></div><div class="lug tr"></div><div class="lug bl"></div><div class="lug br"></div>
        <div class="stem"></div>
        <div class="crown" id="crown" title="Winding crown"><i></i></div>
        <div class="case"></div>
        <div class="groove"></div>
        <div class="bezel"></div>
        <div class="dialwrap">
          <svg id="face" viewBox="0 0 1000 1000" aria-hidden="true">
            <defs>
              <linearGradient id="goldV" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="#f8e7c0"/><stop offset=".45" stop-color="#d8ad72"/><stop offset="1" stop-color="#8a5a30"/>
              </linearGradient>
              <linearGradient id="facetL" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stop-color="#fbf0d4"/><stop offset="1" stop-color="#cfa76b"/>
              </linearGradient>
              <linearGradient id="facetR" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stop-color="#b98a50"/><stop offset="1" stop-color="#6f4626"/>
              </linearGradient>
              <linearGradient id="steel" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stop-color="#0e2a66"/><stop offset=".5" stop-color="#4f7fd0"/><stop offset="1" stop-color="#16336e"/>
              </linearGradient>
              <linearGradient id="goldFrame" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stop-color="#f6e0b2"/><stop offset=".5" stop-color="#b98a50"/><stop offset="1" stop-color="#6a4020"/>
              </linearGradient>
              <linearGradient id="goldH" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="#e9c98c"/><stop offset="1" stop-color="#8a5a30"/>
              </linearGradient>
              <linearGradient id="gearGold" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stop-color="#eccf9a"/><stop offset="1" stop-color="#9a6b38"/>
              </linearGradient>
              <radialGradient id="cavity" cx=".5" cy=".42" r=".75">
                <stop offset="0" stop-color="#1d2f24"/><stop offset=".7" stop-color="#0c1712"/><stop offset="1" stop-color="#050b08"/>
              </radialGradient>
              <radialGradient id="capGrad" cx=".35" cy=".3" r=".9">
                <stop offset="0" stop-color="#ffe9c4"/><stop offset=".5" stop-color="#d8ab6d"/><stop offset="1" stop-color="#7a4a26"/>
              </radialGradient>
              <radialGradient id="ruby" cx=".35" cy=".3" r=".9">
                <stop offset="0" stop-color="#ff9d9d"/><stop offset=".45" stop-color="#d01f3c"/><stop offset="1" stop-color="#6b0a1e"/>
              </radialGradient>
              <pattern id="cotes" width="30" height="30" patternUnits="userSpaceOnUse" patternTransform="rotate(38)">
                <rect width="30" height="30" fill="#101d16"/><rect width="15" height="30" fill="#16281e"/>
              </pattern>
              <clipPath id="ahole"><circle cx="500" cy="676" r="88"/></clipPath>
              <filter id="idxShadow" x="-30%" y="-30%" width="160%" height="160%">
                <feDropShadow dx="0" dy="6" stdDeviation="5" flood-color="#000" flood-opacity=".55"/>
              </filter>
              <filter id="handShadow" x="-40%" y="-30%" width="180%" height="170%">
                <feDropShadow dx="0" dy="12" stdDeviation="9" flood-color="#000" flood-opacity=".45"/>
              </filter>
              <filter id="secShadow" x="-60%" y="-20%" width="220%" height="150%">
                <feDropShadow dx="0" dy="7" stdDeviation="5" flood-color="#000" flood-opacity=".4"/>
              </filter>
              <rect id="baton" x="-9" y="-424" width="18" height="96" rx="6"/>
            </defs>

            <!-- rehaut -->
            <circle cx="500" cy="500" r="455" fill="none" stroke="rgba(0,0,0,.55)" stroke-width="14"/>
            <circle cx="500" cy="500" r="447" fill="none" stroke="rgba(255,255,255,.10)" stroke-width="1.5"/>
            <g id="track"></g>

            <!-- applied indices -->
            <g filter="url(#idxShadow)" fill="url(#goldV)" stroke="#5a3a1c" stroke-width="1">
              <use href="#baton" transform="translate(-13 0)"/>
              <use href="#baton" transform="translate(13 0)"/>
              <use href="#baton" transform="rotate(30 500 500)"/>
              <use href="#baton" transform="rotate(60 500 500)"/>
              <use href="#baton" transform="rotate(120 500 500)"/>
              <use href="#baton" transform="rotate(150 500 500)"/>
              <use href="#baton" transform="rotate(180 500 500)"/>
              <use href="#baton" transform="rotate(210 500 500)"/>
              <use href="#baton" transform="rotate(240 500 500)"/>
              <use href="#baton" transform="rotate(300 500 500)"/>
              <use href="#baton" transform="rotate(330 500 500)"/>
            </g>

            <!-- dial lettering -->
            <text class="lg" x="500" y="284" dx="6">AURELINE</text>
            <text class="sm" x="500" y="318" dx="4">GENÈVE</text>
            <polygon points="500 352 508 362 500 372 492 362" fill="#d8b98c" opacity=".9"/>
            <text class="md" x="500" y="556" dx="3">CŒUR BATTANT</text>
            <text class="xs" x="500" y="802" dx="2">39 RUBIS · RÉSERVE DE 42 HEURES</text>
            <text class="xs" x="500" y="880" dx="2">FABRIQUÉ À GENÈVE</text>

            <!-- open heart -->
            <circle cx="500" cy="676" r="88" fill="url(#cavity)"/>
            <circle cx="500" cy="676" r="88" fill="url(#cotes)" opacity=".5"/>
            <g clip-path="url(#ahole)">
              <polyline id="spiral" fill="none" stroke="#a9bedd" stroke-opacity=".45" stroke-width="1.4"/>
              <g id="wheels" opacity=".97"></g>
              <g>
                <circle cx="455" cy="606" r="6.5" fill="url(#gearGold)" stroke="#4a2f15"/>
                <line x1="451" y1="604" x2="459" y2="608" stroke="#2a180a" stroke-width="2"/>
              </g>
              <g>
                <circle cx="545" cy="655" r="6.5" fill="url(#gearGold)" stroke="#4a2f15"/>
                <line x1="541" y1="652" x2="549" y2="658" stroke="#2a180a" stroke-width="2"/>
              </g>
              <g class="beat" id="balance">
                <circle cx="500" cy="648" r="36" fill="none" stroke="url(#goldV)" stroke-width="7"/>
                <path d="M500 648 L500 614 M500 648 L470 665 M500 648 L530 665" stroke="#d9b878" stroke-width="4" stroke-linecap="round"/>
                <circle cx="500" cy="648" r="6" fill="#f0d8a6" stroke="#7c4f2c"/>
              </g>
              <rect x="450" y="641" width="100" height="13" rx="6.5" fill="url(#goldH)" stroke="#55351a"/>
              <circle cx="500" cy="648" r="10" fill="rgba(220,40,60,.22)"/>
              <circle cx="500" cy="648" r="9" fill="none" stroke="#d9b878" stroke-width="2"/>
              <circle cx="500" cy="648" r="6.5" fill="url(#ruby)"/>
            </g>
            <circle cx="500" cy="676" r="97" fill="none" stroke="#04120b" stroke-width="9"/>
            <circle cx="500" cy="676" r="91.5" fill="none" stroke="url(#goldFrame)" stroke-width="4"/>
            <circle cx="500" cy="676" r="100" fill="none" stroke="rgba(255,255,255,.12)" stroke-width="1"/>

            <!-- date window -->
            <rect x="766" y="468" width="88" height="64" rx="10" fill="#060504"/>
            <rect x="772" y="474" width="76" height="52" rx="6" fill="#0e0d0b" stroke="rgba(255,255,255,.07)"/>
            <text id="dateNum" x="810" y="515">28</text>
            <rect x="766" y="468" width="88" height="64" rx="10" fill="none" stroke="url(#goldFrame)" stroke-width="6"/>
            <rect x="763" y="465" width="94" height="70" rx="12" fill="none" stroke="rgba(0,0,0,.5)" stroke-width="2"/>

            <!-- hands -->
            <g id="hourHand" filter="url(#handShadow)">
              <path d="M500 252 L484 510 L500 526 Z" fill="url(#facetL)"/>
              <path d="M500 252 L516 510 L500 526 Z" fill="url(#facetR)"/>
            </g>
            <g id="minHand" filter="url(#handShadow)">
              <path d="M500 118 L488 506 L500 520 Z" fill="url(#facetL)"/>
              <path d="M500 118 L512 506 L500 520 Z" fill="url(#facetR)"/>
            </g>
            <g id="secHand" filter="url(#secShadow)">
              <path d="M500 100 L503 136 L497 136 Z" fill="#3c66b8"/>
              <path d="M497.2 134 L502.8 134 L503.8 552 L496.2 552 Z" fill="url(#steel)"/>
              <path d="M497.6 552 L502.4 552 L502.4 598 L497.6 598 Z" fill="url(#steel)"/>
              <circle cx="500" cy="584" r="11" fill="url(#steel)" stroke="#0d2350" stroke-width="1.5"/>
            </g>
            <g id="cap">
              <circle cx="500" cy="500" r="17" fill="url(#capGrad)" stroke="#5d3a1e" stroke-width="1.5"/>
              <circle cx="494" cy="494" r="3" fill="rgba(255,255,255,.5)"/>
            </g>
            <circle cx="500" cy="500" r="5" fill="#274b96" stroke="#101f3f"/>
          </svg>
          <div class="crystal" id="crystal"><div class="glare"></div></div>
        </div>
      </div>
    </div>
  </section>

  <section class="model">
    <div class="orn">◆</div>
    <h1>« Cœur Battant »</h1>
    <p class="spec">CALIBRE AU·87 · MANUFACTURE · 28 800 A/H</p>
  </section>

  <footer class="corner bottom">
    <div class="cell">
      <span class="lbl">MOVEMENT</span>
      <span class="val">Automatique · 39 rubis · or rose 18 ct</span>
    </div>
    <div class="cell right">
      <span class="lbl">LOCAL TIME</span>
      <span class="val big" id="readout">—</span>
    </div>
  </footer>
</main>

<script>
(function(){
  'use strict';
  var NS='http://www.w3.org/2000/svg';
  var $=function(id){return document.getElementById(id);};
  var watch=$('watch'),crystal=$('crystal'),crown=$('crown');
  var hourH=$('hourHand'),minH=$('minHand'),secH=$('secHand'),dateNum=$('dateNum'),readout=$('readout');

  /* ---- minute track ---- */
  var track=$('track');
  for(var i=0;i<60;i++){
    var a=i*6*Math.PI/180,maj=i%5===0,r1=maj?426:431,r2=447;
    var l=document.createElementNS(NS,'line');
    l.setAttribute('x1',(500+Math.sin(a)*r1).toFixed(1));
    l.setAttribute('y1',(500-Math.cos(a)*r1).toFixed(1));
    l.setAttribute('x2',(500+Math.sin(a)*r2).toFixed(1));
    l.setAttribute('y2',(500-Math.cos(a)*r2).toFixed(1));
    l.setAttribute('stroke',maj?'#e6c896':'#bfa06b');
    l.setAttribute('stroke-opacity',maj?'.95':'.55');
    l.setAttribute('stroke-width',maj?3.4:2);
    l.setAttribute('stroke-linecap','round');
    track.appendChild(l);
  }

  /* ---- hairspring spiral ---- */
  var sp=$('spiral'),pts='';
  for(var t=0;t<=7*Math.PI;t+=0.1){
    var r=5+t*1.28;
    pts+=(500+Math.cos(t)*r).toFixed(1)+','+(648+Math.sin(t)*r).toFixed(1)+' ';
  }
  sp.setAttribute('points',pts);

  /* ---- movement wheels ---- */
  function gearD(cx,cy,R,teeth,depth,hole){
    var d='',n=teeth*4;
    for(var i=0;i<n;i++){
      var a=(i/n)*Math.PI*2,rr=(i%4<2)?R:R-depth;
      d+=(i?'L':'M')+(cx+Math.cos(a)*rr).toFixed(1)+' '+(cy+Math.sin(a)*rr).toFixed(1);
    }
    d+='Z';
    d+='M'+(cx+hole).toFixed(1)+' '+cy.toFixed(1)+'A'+hole+' '+hole+' 0 1 0 '+(cx-hole).toFixed(1)+' '+cy.toFixed(1)+
       'A'+hole+' '+hole+' 0 1 0 '+(cx+hole).toFixed(1)+' '+cy.toFixed(1)+'Z';
    return d;
  }
  function addWheel(cx,cy,R,teeth,depth,dur,rev){
    var g=document.createElementNS(NS,'g');
    g.setAttribute('class','wheel'+(rev?' rev':''));
    g.style.animationDuration=dur+'s';
    var hole=R*0.58;
    var p=document.createElementNS(NS,'path');
    p.setAttribute('d',gearD(cx,cy,R,teeth,depth,hole));
    p.setAttribute('fill','url(#gearGold)');
    p.setAttribute('fill-rule','evenodd');
    p.setAttribute('stroke','#5f3d1d');
    p.setAttribute('stroke-width','1.2');
    g.appendChild(p);
    for(var k=0;k<4;k++){
      var a=k*Math.PI/2+Math.PI/8,ln=document.createElementNS(NS,'line');
      ln.setAttribute('x1',(cx+Math.cos(a)*R*0.18).toFixed(1));
      ln.setAttribute('y1',(cy+Math.sin(a)*R*0.18).toFixed(1));
      ln.setAttribute('x2',(cx+Math.cos(a)*hole).toFixed(1));
      ln.setAttribute('y2',(cy+Math.sin(a)*hole).toFixed(1));
      ln.setAttribute('stroke','#b28348');ln.setAttribute('stroke-width','4.5');
      ln.setAttribute('stroke-linecap','round');
      g.appendChild(ln);
    }
    var hub=document.createElementNS(NS,'circle');
    hub.setAttribute('cx',cx);hub.setAttribute('cy',cy);hub.setAttribute('r',R*0.17);
    hub.setAttribute('fill','url(#gearGold)');hub.setAttribute('stroke','#5f3d1d');
    g.appendChild(hub);
    $('wheels').appendChild(g);
  }
  addWheel(470,710,40,22,7,240,false);  /* barrel — slow */
  addWheel(552,700,26,14,6,60,true);    /* fourth wheel — one turn per minute */
  addWheel(538,732,15,12,5,9,false);    /* escape wheel */

  /* ---- ambient dust ---- */
  var dust=$('dust');
  for(var d=0;d<16;d++){
    var s=document.createElement('s'),sz=(1.5+Math.random()*2.6).toFixed(1);
    s.style.cssText='left:'+(Math.random()*100).toFixed(1)+'%;width:'+sz+'px;height:'+sz+'px;'+
      '--dx:'+((Math.random()*120-60)|0)+'px;--dur:'+(14+Math.random()*22).toFixed(1)+'s;'+
      '--del:'+(-Math.random()*30).toFixed(1)+'s;';
    dust.appendChild(s);
  }

  /* ---- timekeeping + tilt ---- */
  var lastDate=-1,tX=0,tY=0,cX=0,cY=0;
  addEventListener('pointermove',function(e){
    tX=(e.clientX/innerWidth-0.5)*2;
    tY=(e.clientY/innerHeight-0.5)*2;
  });
  function loop(){
    var now=new Date(),ms=now.getMilliseconds(),
        s=now.getSeconds()+ms/1000,
        m=now.getMinutes()+s/60,
        h=(now.getHours()%12)+m/60;
    secH.setAttribute('transform','rotate('+(s*6).toFixed(3)+' 500 500)');
    minH.setAttribute('transform','rotate('+(m*6).toFixed(3)+' 500 500)');
    hourH.setAttribute('transform','rotate('+(h*30).toFixed(3)+' 500 500)');
    if(now.getDate()!==lastDate){dateNum.textContent=now.getDate();lastDate=now.getDate();}
    cX+=(tX-cX)*0.055;cY+=(tY-cY)*0.055;
    watch.style.transform='rotateX('+(-cY*6).toFixed(2)+'deg) rotateY('+(cX*8).toFixed(2)+'deg)';
    crystal.style.setProperty('--gx',(cX*9).toFixed(2)+'%');
    crystal.style.setProperty('--gy',(cY*7).toFixed(2)+'%');
    requestAnimationFrame(loop);
  }
  loop();

  /* ---- readout ---- */
  var days=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  var months=['January','February','March','April','May','June','July','August','September','October','November','December'];
  function pad(n){return String(n).padStart(2,'0');}
  function fmt(){
    var d=new Date();
    readout.textContent=pad(d.getHours())+':'+pad(d.getMinutes())+':'+pad(d.getSeconds())+
      '  ·  '+days[d.getDay()]+', '+d.getDate()+' '+months[d.getMonth()]+' '+d.getFullYear();
  }
  fmt();setInterval(fmt,500);

  /* ---- crown micro-interaction ---- */
  crown.addEventListener('click',function(){
    crown.classList.remove('wind');void crown.offsetWidth;crown.classList.add('wind');
    crystal.classList.remove('flash');void crystal.offsetWidth;crystal.classList.add('flash');
  });
  crystal.addEventListener('animationend',function(){crystal.classList.remove('flash');});
})();
</script>
</body>
</html>

Compare with

Qwen3.8 Max (0902): other attempts