Run details
- Model
- google/gemini-4-carbon
- Route
- OpenRouter API, one user message
- Served by
- Effort
- medium, OpenRouter's default for this model
- Limits
- 60 min · 32,768 output tokens (the model's limit)
- Date
- 10 Nov 2026
- Time
- 5 min 21 s
- Size
- 41 kB
- Tokens
- 108 in, 22,181 out (5,160 of them thinking)
- List price
- $0.22 at today's price ($2.00 in / $10.00 out per M)
- Paid
- $0.22
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 962 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valmont & Cie — Genève Chronomètre</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #07080c;
background-image:
radial-gradient(circle at 50% 46%, #181c28 0%, #0b0d13 48%, #040507 100%);
display: flex;
align-items: center;
justify-content: center;
user-select: none;
-webkit-font-smoothing: antialiased;
}
.stage {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* Subtle warm ambient showcase glow behind the timepiece */
.stage::before {
content: "";
position: absolute;
width: min(75vw, 75vh);
height: min(75vw, 75vh);
border-radius: 50%;
background: radial-gradient(circle, rgba(226, 168, 120, 0.10) 0%, rgba(28, 48, 88, 0.08) 45%, transparent 72%);
pointer-events: none;
filter: blur(20px);
}
svg#watch {
width: auto;
height: 95vh;
max-width: 95vw;
display: block;
filter: drop-shadow(0 32px 55px rgba(0, 0, 0, 0.88))
drop-shadow(0 8px 18px rgba(0, 0, 0, 0.65));
}
.brand-title {
font-family: "Didot", "Bodoni MT", "Palatino Linotype", "Book Antiqua", Georgia, serif;
font-weight: 400;
letter-spacing: 3.6px;
fill: #f3d5b8;
}
.brand-sub {
font-family: "Optima", "Gill Sans", "Candara", "Trebuchet MS", sans-serif;
font-weight: 500;
letter-spacing: 2.8px;
fill: #cfb093;
}
.dial-micro {
font-family: "Optima", "Gill Sans", "Trebuchet MS", sans-serif;
font-weight: 400;
letter-spacing: 1.8px;
fill: #a9b6cc;
}
.date-text {
font-family: "Didot", "Bodoni MT", "Times New Roman", Georgia, serif;
font-weight: 600;
fill: #101724;
font-variant-numeric: tabular-nums;
}
</style>
</head>
<body>
<div class="stage">
<svg id="watch" viewBox="0 0 800 1000" xmlns="http://www.w3.org/2000/svg" aria-label="Luxury Mechanical Wristwatch">
<defs>
<!-- 18k 5N Rose Gold Gradients -->
<linearGradient id="roseGoldCase" x1="12%" y1="8%" x2="88%" y2="92%">
<stop offset="0%" stop-color="#fff0e0"/>
<stop offset="14%" stop-color="#eab891"/>
<stop offset="28%" stop-color="#b97b50"/>
<stop offset="44%" stop-color="#fae1cb"/>
<stop offset="58%" stop-color="#c98b5f"/>
<stop offset="75%" stop-color="#6d3e1e"/>
<stop offset="89%" stop-color="#d79c71"/>
<stop offset="100%" stop-color="#8a522d"/>
</linearGradient>
<linearGradient id="roseGoldBezelOuter" x1="18%" y1="6%" x2="82%" y2="94%">
<stop offset="0%" stop-color="#fae4cf"/>
<stop offset="18%" stop-color="#d4966a"/>
<stop offset="34%" stop-color="#784523"/>
<stop offset="50%" stop-color="#ffeede"/>
<stop offset="68%" stop-color="#b6774c"/>
<stop offset="84%" stop-color="#5e3317"/>
<stop offset="100%" stop-color="#e3ab82"/>
</linearGradient>
<linearGradient id="roseGoldBezelInner" x1="82%" y1="12%" x2="18%" y2="88%">
<stop offset="0%" stop-color="#693a1b"/>
<stop offset="22%" stop-color="#e0a67b"/>
<stop offset="46%" stop-color="#fff1e3"/>
<stop offset="68%" stop-color="#9b5f37"/>
<stop offset="88%" stop-color="#f2c4a0"/>
<stop offset="100%" stop-color="#5b3116"/>
</linearGradient>
<linearGradient id="lugSatinLeft" x1="0%" y1="0%" x2="100%" y2="85%">
<stop offset="0%" stop-color="#f5d5b8"/>
<stop offset="45%" stop-color="#c88b60"/>
<stop offset="100%" stop-color="#6e3e1f"/>
</linearGradient>
<linearGradient id="lugSatinRight" x1="0%" y1="15%" x2="100%" y2="95%">
<stop offset="0%" stop-color="#8b522c"/>
<stop offset="52%" stop-color="#e6b289"/>
<stop offset="100%" stop-color="#7a4623"/>
</linearGradient>
<linearGradient id="chamferBright" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fff6ec"/>
<stop offset="45%" stop-color="#e3aa80"/>
<stop offset="100%" stop-color="#633619"/>
</linearGradient>
<linearGradient id="crownBodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#754321"/>
<stop offset="16%" stop-color="#f7dac0"/>
<stop offset="32%" stop-color="#fff4e8"/>
<stop offset="52%" stop-color="#c4865b"/>
<stop offset="76%" stop-color="#5e3317"/>
<stop offset="90%" stop-color="#dda278"/>
<stop offset="100%" stop-color="#4b2710"/>
</linearGradient>
<linearGradient id="goldEmblemGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fff3e6"/>
<stop offset="48%" stop-color="#df9f71"/>
<stop offset="100%" stop-color="#7c4722"/>
</linearGradient>
<!-- Deep Rehaut (Inner Bezel Wall) -->
<linearGradient id="rehautGrad" x1="15%" y1="15%" x2="85%" y2="85%">
<stop offset="0%" stop-color="#030711"/>
<stop offset="45%" stop-color="#0a162b"/>
<stop offset="78%" stop-color="#1d3254"/>
<stop offset="100%" stop-color="#354f78"/>
</linearGradient>
<!-- Midnight Royal Blue Sunburst Dial -->
<radialGradient id="dialBase" cx="44%" cy="42%" r="62%">
<stop offset="0%" stop-color="#19325c"/>
<stop offset="38%" stop-color="#0e203f"/>
<stop offset="75%" stop-color="#071226"/>
<stop offset="100%" stop-color="#030813"/>
</radialGradient>
<linearGradient id="sunburstSheen1" x1="15%" y1="5%" x2="85%" y2="95%">
<stop offset="0%" stop-color="rgba(125, 175, 255, 0.18)"/>
<stop offset="42%" stop-color="rgba(16, 35, 68, 0.0)"/>
<stop offset="58%" stop-color="rgba(16, 35, 68, 0.0)"/>
<stop offset="100%" stop-color="rgba(110, 160, 240, 0.14)"/>
</linearGradient>
<linearGradient id="sunburstSheen2" x1="88%" y1="12%" x2="12%" y2="88%">
<stop offset="0%" stop-color="rgba(4, 8, 18, 0.55)"/>
<stop offset="50%" stop-color="rgba(12, 26, 52, 0.0)"/>
<stop offset="100%" stop-color="rgba(4, 8, 18, 0.55)"/>
</linearGradient>
<!-- Alligator Leather Strap Gradients -->
<linearGradient id="strapTopGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#05070b"/>
<stop offset="28%" stop-color="#0e131f"/>
<stop offset="85%" stop-color="#141c2c"/>
<stop offset="100%" stop-color="#080b12"/>
</linearGradient>
<linearGradient id="strapBottomGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#080b12"/>
<stop offset="15%" stop-color="#141c2c"/>
<stop offset="72%" stop-color="#0e131f"/>
<stop offset="100%" stop-color="#05070b"/>
</linearGradient>
<linearGradient id="strapBolster" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="rgba(0,0,0,0.65)"/>
<stop offset="16%" stop-color="rgba(255,255,255,0.05)"/>
<stop offset="50%" stop-color="rgba(130,160,215,0.08)"/>
<stop offset="84%" stop-color="rgba(255,255,255,0.03)"/>
<stop offset="100%" stop-color="rgba(0,0,0,0.7)"/>
</linearGradient>
<!-- Date Disc Porcelain Gradient -->
<linearGradient id="dateDiscGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#d5d0c5"/>
<stop offset="18%" stop-color="#f6f3ec"/>
<stop offset="50%" stop-color="#fcfaf5"/>
<stop offset="82%" stop-color="#f1ede4"/>
<stop offset="100%" stop-color="#cac4b8"/>
</linearGradient>
<!-- Moonphase Lapis Sky & Gold Moon -->
<radialGradient id="lapisSky" cx="50%" cy="38%" r="65%">
<stop offset="0%" stop-color="#142c5e"/>
<stop offset="65%" stop-color="#091736"/>
<stop offset="100%" stop-color="#040b1c"/>
</radialGradient>
<radialGradient id="goldMoon" cx="35%" cy="32%" r="68%">
<stop offset="0%" stop-color="#fff7eb"/>
<stop offset="38%" stop-color="#f0be93"/>
<stop offset="78%" stop-color="#b8794b"/>
<stop offset="100%" stop-color="#784522"/>
</radialGradient>
<!-- Sapphire Crystal Anti-Reflective Glare -->
<linearGradient id="sapphireGlare" x1="12%" y1="8%" x2="62%" y2="58%">
<stop offset="0%" stop-color="rgba(215, 232, 255, 0.16)"/>
<stop offset="38%" stop-color="rgba(160, 200, 255, 0.05)"/>
<stop offset="65%" stop-color="rgba(140, 185, 255, 0.0)"/>
<stop offset="100%" stop-color="rgba(255, 255, 255, 0.0)"/>
</linearGradient>
<radialGradient id="sapphireRim" cx="50%" cy="50%" r="50%">
<stop offset="92%" stop-color="rgba(120, 170, 255, 0.0)"/>
<stop offset="97.5%" stop-color="rgba(145, 190, 255, 0.10)"/>
<stop offset="100%" stop-color="rgba(255, 255, 255, 0.18)"/>
</radialGradient>
<!-- Clips -->
<clipPath id="dialClip">
<circle cx="400" cy="500" r="233"/>
</clipPath>
<clipPath id="strapTopClip">
<path d="M 302 28 L 498 28 L 510 245 L 290 245 Z"/>
</clipPath>
<clipPath id="strapBottomClip">
<path d="M 290 755 L 510 755 L 498 972 L 302 972 Z"/>
</clipPath>
<clipPath id="moonApertureClip">
<circle cx="400" cy="602" r="45"/>
</clipPath>
<clipPath id="dateWindowClip">
<rect x="524" y="481" width="54" height="38" rx="2"/>
</clipPath>
<!-- UserSpaceOnUse Shadow Filters (prevents clipping when hands align vertically/horizontally) -->
<filter id="indexShadow" filterUnits="userSpaceOnUse" x="140" y="240" width="520" height="520">
<feDropShadow dx="1.8" dy="2.8" stdDeviation="1.8" flood-color="#01040a" flood-opacity="0.78"/>
</filter>
<filter id="hourHandShadow" filterUnits="userSpaceOnUse" x="140" y="240" width="520" height="520">
<feDropShadow dx="3.2" dy="5.2" stdDeviation="2.8" flood-color="#000308" flood-opacity="0.72"/>
</filter>
<filter id="minuteHandShadow" filterUnits="userSpaceOnUse" x="140" y="240" width="520" height="520">
<feDropShadow dx="4.5" dy="7.0" stdDeviation="3.4" flood-color="#000308" flood-opacity="0.68"/>
</filter>
<filter id="secondHandShadow" filterUnits="userSpaceOnUse" x="140" y="240" width="520" height="520">
<feDropShadow dx="5.5" dy="8.5" stdDeviation="3.2" flood-color="#000308" flood-opacity="0.58"/>
</filter>
<filter id="dateInnerShadow" filterUnits="userSpaceOnUse" x="515" y="472" width="75" height="56">
<feDropShadow dx="1.5" dy="2.2" stdDeviation="1.8" flood-color="#040812" flood-opacity="0.55"/>
</filter>
</defs>
<!-- ==================== ALLIGATOR LEATHER STRAP ==================== -->
<g id="leather-straps">
<!-- Top Strap -->
<g clip-path="url(#strapTopClip)">
<path d="M 302 28 L 498 28 L 510 245 L 290 245 Z" fill="url(#strapTopGrad)"/>
<!-- Alligator rectangular scale creases -->
<g stroke="#04060b" stroke-width="2.2" fill="rgba(25, 36, 58, 0.22)">
<rect x="286" y="42" width="228" height="28" rx="6"/>
<rect x="286" y="75" width="228" height="31" rx="7"/>
<rect x="285" y="111" width="230" height="34" rx="7"/>
<rect x="284" y="150" width="232" height="37" rx="8"/>
<rect x="284" y="192" width="232" height="40" rx="8"/>
</g>
<!-- Scale vertical natural divisions -->
<g stroke="#05080f" stroke-width="1.6" opacity="0.85">
<path d="M 342 42 L 338 232 M 458 42 L 462 232"/>
<path d="M 398 42 L 401 70 M 403 111 L 399 145 M 401 192 L 398 232" opacity="0.45"/>
</g>
<!-- Padded bolster shading -->
<path d="M 302 28 L 498 28 L 510 245 L 290 245 Z" fill="url(#strapBolster)"/>
<!-- Hand-sewn saddle stitching -->
<line x1="312" y1="36" x2="302" y2="232" stroke="#2c3a54" stroke-width="2.3" stroke-dasharray="7 5" stroke-linecap="round"/>
<line x1="488" y1="36" x2="498" y2="232" stroke="#2c3a54" stroke-width="2.3" stroke-dasharray="7 5" stroke-linecap="round"/>
</g>
<!-- Bottom Strap -->
<g clip-path="url(#strapBottomClip)">
<path d="M 290 755 L 510 755 L 498 972 L 302 972 Z" fill="url(#strapBottomGrad)"/>
<g stroke="#04060b" stroke-width="2.2" fill="rgba(25, 36, 58, 0.22)">
<rect x="284" y="768" width="232" height="40" rx="8"/>
<rect x="284" y="813" width="232" height="37" rx="8"/>
<rect x="285" y="855" width="230" height="34" rx="7"/>
<rect x="286" y="894" width="228" height="31" rx="7"/>
<rect x="286" y="930" width="228" height="28" rx="6"/>
</g>
<g stroke="#05080f" stroke-width="1.6" opacity="0.85">
<path d="M 338 768 L 342 958 M 462 768 L 458 958"/>
<path d="M 401 768 L 398 808 M 399 855 L 402 889 M 400 930 L 402 958" opacity="0.45"/>
</g>
<path d="M 290 755 L 510 755 L 498 972 L 302 972 Z" fill="url(#strapBolster)"/>
<line x1="302" y1="768" x2="312" y2="964" stroke="#2c3a54" stroke-width="2.3" stroke-dasharray="7 5" stroke-linecap="round"/>
<line x1="498" y1="768" x2="488" y2="964" stroke="#2c3a54" stroke-width="2.3" stroke-dasharray="7 5" stroke-linecap="round"/>
</g>
</g>
<!-- ==================== SCULPTED 18K ROSE GOLD LUGS ==================== -->
<g id="case-lugs">
<!-- Top-Left Lug -->
<path d="M 236 305 C 242 252, 256 205, 270 172 L 294 177 L 295 256 Z" fill="url(#lugSatinLeft)"/>
<path d="M 236 305 C 242 252, 256 205, 270 172 L 278 174 C 265 208, 252 254, 246 302 Z" fill="url(#chamferBright)"/>
<!-- Top-Right Lug -->
<path d="M 564 305 C 558 252, 544 205, 530 172 L 506 177 L 505 256 Z" fill="url(#lugSatinRight)"/>
<path d="M 564 305 C 558 252, 544 205, 530 172 L 522 174 C 535 208, 548 254, 554 302 Z" fill="url(#chamferBright)"/>
<!-- Bottom-Left Lug -->
<path d="M 236 695 C 242 748, 256 795, 270 828 L 294 823 L 295 744 Z" fill="url(#lugSatinLeft)"/>
<path d="M 236 695 C 242 748, 256 795, 270 828 L 278 826 C 265 792, 252 746, 246 698 Z" fill="url(#chamferBright)"/>
<!-- Bottom-Right Lug -->
<path d="M 564 695 C 558 748, 544 795, 530 828 L 506 823 L 505 744 Z" fill="url(#lugSatinRight)"/>
<path d="M 564 695 C 558 748, 544 795, 530 828 L 522 826 C 535 792, 548 746, 554 698 Z" fill="url(#chamferBright)"/>
<!-- Curved Spring-Bar Case End-Links / Inter-horn shadow -->
<path d="M 293 236 Q 400 226 507 236 L 507 248 Q 400 238 293 248 Z" fill="#05070c" opacity="0.85"/>
<path d="M 293 764 Q 400 774 507 764 L 507 752 Q 400 762 293 752 Z" fill="#05070c" opacity="0.85"/>
</g>
<!-- ==================== KNURLED SCREW-DOWN CROWN & GUARDS ==================== -->
<g id="crown-assembly">
<!-- Subtle sculpted crown shoulders -->
<path d="M 662 430 C 676 446, 682 458, 683 472 L 668 474 Z" fill="url(#roseGoldBezelOuter)"/>
<path d="M 662 570 C 676 554, 682 542, 683 528 L 668 526 Z" fill="url(#roseGoldBezelOuter)"/>
<!-- Crown tube -->
<rect x="670" y="474" width="14" height="52" fill="#4e2912"/>
<rect x="670" y="480" width="14" height="16" fill="#d89d72" opacity="0.6"/>
<!-- Main Crown Body -->
<rect x="681" y="458" width="29" height="84" rx="5" fill="url(#crownBodyGrad)" stroke="#4c2810" stroke-width="0.8"/>
<!-- End Cap Dome -->
<path d="M 708 461 C 716 472, 716 528, 708 539 Z" fill="url(#crownBodyGrad)"/>
<!-- Knurling Flutes -->
<g id="crown-flutes"></g>
</g>
<!-- ==================== STEPPED 18K ROSE GOLD CASE & BEZEL ==================== -->
<g id="watch-case">
<!-- Outer Case Cushion/Barrel Rim -->
<circle cx="400" cy="500" r="277" fill="url(#roseGoldCase)" stroke="#4d2911" stroke-width="0.8"/>
<!-- Specular Bevel Wire -->
<circle cx="400" cy="500" r="274.5" fill="none" stroke="rgba(255,244,232,0.45)" stroke-width="1"/>
<!-- First Stepped Bezel -->
<circle cx="400" cy="500" r="264" fill="url(#roseGoldBezelOuter)" stroke="#5b3116" stroke-width="1"/>
<!-- Engine-turned Clous/Fluted Micro-ring between bezel steps -->
<circle cx="400" cy="500" r="250.5" fill="#46240e"/>
<g id="bezel-fluting"></g>
<!-- Inner Mirror-Polished Bezel Concave Lip -->
<circle cx="400" cy="500" r="245" fill="url(#roseGoldBezelInner)" stroke="#532b12" stroke-width="0.9"/>
<circle cx="400" cy="500" r="236" fill="none" stroke="rgba(255, 240, 224, 0.55)" stroke-width="1.1"/>
<!-- Deep Angled Rehaut / Dial Recess Wall -->
<circle cx="400" cy="500" r="235" fill="url(#rehautGrad)"/>
</g>
<!-- ==================== HAUTE HORLOGERIE DIAL ==================== -->
<g id="dial" clip-path="url(#dialClip)">
<!-- Sunburst Royal Midnight Blue Base -->
<circle cx="400" cy="500" r="233" fill="url(#dialBase)"/>
<circle cx="400" cy="500" r="233" fill="url(#sunburstSheen1)"/>
<circle cx="400" cy="500" r="233" fill="url(#sunburstSheen2)"/>
<!-- Fine Metallic Radial Sunburst Grain -->
<g id="sunburst-grain" opacity="0.22"></g>
<!-- Recessed Guilloché Center Medallion -->
<circle cx="400" cy="500" r="162" fill="rgba(5, 12, 26, 0.28)" stroke="rgba(235, 190, 148, 0.24)" stroke-width="0.9"/>
<circle cx="400" cy="500" r="159.5" fill="none" stroke="rgba(235, 190, 148, 0.12)" stroke-width="0.6"/>
<!--Procedural Rose-Engine Guilloché Pattern -->
<g id="guilloche-pattern"></g>
<!-- Outer Chapter Ring & Chemin-de-fer Minute/1-5th Second Track -->
<circle cx="400" cy="500" r="226" fill="none" stroke="rgba(226, 188, 152, 0.35)" stroke-width="0.7"/>
<circle cx="400" cy="500" r="213" fill="none" stroke="rgba(226, 188, 152, 0.32)" stroke-width="0.7"/>
<g id="minute-track"></g>
<!-- ==================== 12 O'CLOCK BRANDING & APPLIED EMBLEM ==================== -->
<g id="branding">
<!-- Clear dial cartouche behind text for crisp legibility over guilloché -->
<rect x="330" y="388" width="140" height="44" rx="8" fill="#0a1832" opacity="0.72"/>
<!-- Applied 18k Rose Gold Maltese/Calatrava Star Emblem -->
<g transform="translate(400, 366)" filter="url(#indexShadow)">
<path d="M 0 -14 L 3.4 -4.2 L 14 0 L 3.4 4.2 L 0 14 L -3.4 4.2 L -14 0 L -3.4 -4.2 Z" fill="url(#goldEmblemGrad)"/>
<path d="M -7 -7 L -1.8 -3.2 L 0 0 L -3.2 -1.8 Z M 7 -7 L 3.2 -1.8 L 0 0 L 1.8 -3.2 Z M 7 7 L 1.8 3.2 L 0 0 L 3.2 1.8 Z M -7 7 L -3.2 1.8 L 0 0 L -1.8 3.2 Z" fill="#f7dec6"/>
<circle cx="0" cy="0" r="2.1" fill="#fff4e8"/>
</g>
<text x="400" y="405" text-anchor="middle" font-size="13.5" class="brand-title">VALMONT & CIE</text>
<text x="400" y="421" text-anchor="middle" font-size="8.2" class="brand-sub">GENÈVE • CHRONOMÈTRE</text>
</g>
<!-- ==================== 6 O'CLOCK ASTRONOMICAL MOONPHASE ==================== -->
<g id="moonphase-complication">
<!-- Gold Beveled Subdial Frame -->
<circle cx="400" cy="602" r="47.5" fill="url(#roseGoldBezelInner)"/>
<circle cx="400" cy="602" r="45.5" fill="#040917"/>
<!-- Moonphase Aperture Contents -->
<g clip-path="url(#moonApertureClip)">
<!-- Lapis Lazuli Night Sky -->
<circle cx="400" cy="602" r="45.5" fill="url(#lapisSky)"/>
<!--Rotating Lunar Disc (rotates around subdial center 400, 602) -->
<g id="lunar-disc" transform="rotate(0 400 602)">
<!-- Delicate Gold Stars -->
<g fill="#f6d8b8">
<circle cx="378" cy="576" r="1.0"/>
<circle cx="392" cy="567" r="0.8"/>
<circle cx="418" cy="572" r="1.2"/>
<circle cx="428" cy="586" r="0.7"/>
<circle cx="370" cy="592" r="0.8"/>
<circle cx="406" cy="582" r="0.9"/>
<circle cx="382" cy="628" r="1.0"/>
<circle cx="416" cy="632" r="0.9"/>
<circle cx="394" cy="637" r="1.1"/>
<circle cx="429" cy="618" r="0.8"/>
<circle cx="369" cy="614" r="0.9"/>
<!-- Tiny 4-point sparkles -->
<path d="M 386 574 L 387 577 L 390 578 L 387 579 L 386 582 L 385 579 L 382 578 L 385 577 Z"/>
<path d="M 412 624 L 413 627 L 416 628 L 413 629 L 412 632 L 411 629 L 408 628 L 411 627 Z"/>
</g>
<!-- Twin 18k Solid Gold Moons (opposite sides of 59-tooth lunar wheel) -->
<g transform="translate(400, 577)">
<circle cx="0" cy="0" r="14.5" fill="url(#goldMoon)"/>
<!-- Subtle lunar mare shading -->
<circle cx="-4" cy="-3" r="3.2" fill="rgba(120, 68, 32, 0.18)"/>
<circle cx="4.5" cy="2" r="4.2" fill="rgba(120, 68, 32, 0.15)"/>
<circle cx="-1" cy="5.5" r="2.5" fill="rgba(120, 68, 32, 0.14)"/>
</g>
<g transform="translate(400, 627)">
<circle cx="0" cy="0" r="14.5" fill="url(#goldMoon)"/>
<circle cx="4" cy="3" r="3.2" fill="rgba(120, 68, 32, 0.18)"/>
<circle cx="-4.5" cy="-2" r="4.2" fill="rgba(120, 68, 32, 0.15)"/>
<circle cx="1" cy="-5.5" r="2.5" fill="rgba(120, 68, 32, 0.14)"/>
</g>
</g>
<!-- Traditional Double-Humped Bosom Cutout Bridge -->
<path d="M 350 603
A 26 26 0 0 1 400 605
A 26 26 0 0 1 450 603
L 450 655 L 350 655 Z"
fill="#0b1a36" stroke="url(#roseGoldCase)" stroke-width="1.2"/>
<!-- Engraved Automatic Calibre Text inside Lower Bridge -->
<text x="400" y="625" text-anchor="middle" font-size="7.2" class="brand-sub" letter-spacing="2.2">AUTOMATIC</text>
<text x="400" y="636" text-anchor="middle" font-size="6.2" class="dial-micro" opacity="0.82">29½ LUNAR</text>
</g>
<!-- Crisp Inner Rim Shadow of Moon Aperture -->
<circle cx="400" cy="602" r="45" fill="none" stroke="rgba(0, 4, 12, 0.72)" stroke-width="1.4"/>
</g>
<!-- ==================== 3 O'CLOCK FRAMED DATE WINDOW ==================== -->
<g id="date-window">
<!-- Outer Drop Shadow on Dial -->
<rect x="517" y="474" width="68" height="52" rx="3" fill="#030711" opacity="0.7"/>
<!-- 3D Faceted 18k Rose Gold Trapezoidal Frame -->
<!-- Top outer bevel -->
<polygon points="518,475 584,475 578,481 524,481" fill="#f7dac0"/>
<!-- Bottom outer bevel -->
<polygon points="524,519 578,519 584,525 518,525" fill="#7c4723"/>
<!-- Left outer bevel -->
<polygon points="518,475 524,481 524,519 518,525" fill="#dfa378"/>
<!-- Right outer bevel -->
<polygon points="584,475 584,525 578,519 578,481" fill="#8f542c"/>
<!-- Inner Sunken Aperture Chamfers (light catches opposite side!) -->
<rect x="522.5" y="479.5" width="57" height="41" fill="#4f2b13"/>
<polygon points="522.5,520.5 579.5,520.5 578,519 524,519" fill="#ffeede"/>
<polygon points="579.5,479.5 579.5,520.5 578,519 578,481" fill="#f5cea9"/>
<!-- Porcelain Lacquer Date Wheel -->
<g clip-path="url(#dateWindowClip)">
<rect x="524" y="481" width="54" height="38" fill="url(#dateDiscGrad)"/>
<!-- Date Numeral -->
<text id="date-number" x="551" y="509.5" text-anchor="middle" font-size="25.5" class="date-text">28</text>
<!-- Recessed Aperture Shadow Cast onto Date Disc -->
<rect x="524" y="481" width="54" height="38" fill="none" stroke="#050b18" stroke-width="3.2" opacity="0.42" filter="url(#dateInnerShadow)"/>
<line x1="524" y1="482" x2="578" y2="482" stroke="rgba(0,0,0,0.38)" stroke-width="2"/>
</g>
<!-- Subtle Cyclops Magnifier Crystal Bevel Sheen -->
<rect x="515" y="472" width="72" height="56" rx="5" fill="rgba(210, 230, 255, 0.035)" stroke="rgba(220, 238, 255, 0.16)" stroke-width="0.9"/>
<path d="M 518 475 L 558 475 L 542 492 L 518 492 Z" fill="rgba(255, 255, 255, 0.07)"/>
</g>
<!-- ==================== APPLIED 3D FACETED GOLD INDICES ==================== -->
<g id="applied-indices" filter="url(#indexShadow)"></g>
<!-- Swiss Made Origin Signature at 6 o'clock -->
<text x="381" y="720" text-anchor="end" font-size="6.6" class="dial-micro">SWISS</text>
<text x="419" y="720" text-anchor="start" font-size="6.6" class="dial-micro">MADE</text>
<!-- Inner Dial Vignette Depth Shadow (cast by Rehaut) -->
<circle cx="400" cy="500" r="233" fill="none" stroke="rgba(1, 4, 12, 0.85)" stroke-width="7"/>
</g>
<!-- ==================== DYNAMICALLY LIT DAUPHINE HANDS ==================== -->
<!-- Note: Shadow filters sit on stationary parent groups so shadows always cast toward bottom-right regardless of hand rotation! -->
<!-- HOUR HAND -->
<g filter="url(#hourHandShadow)">
<g id="hour-hand" transform="rotate(308 400 500)">
<!-- Left Facet -->
<polygon id="hour-facet-left" points="400,362 388.5,500 400,530 400,362" fill="#f6d6b8"/>
<!-- Right Facet -->
<polygon id="hour-facet-right" points="400,362 411.5,500 400,530 400,362" fill="#9e6238"/>
<!-- Razor Center Spine Highlight -->
<line x1="400" y1="363" x2="400" y2="529" stroke="rgba(255, 248, 240, 0.55)" stroke-width="0.65"/>
</g>
</g>
<!-- MINUTE HAND -->
<g filter="url(#minuteHandShadow)">
<g id="minute-hand" transform="rotate(64 400 500)">
<!-- Left Facet -->
<polygon id="minute-facet-left" points="400,294 391.2,500 400,538 400,294" fill="#ffe9d2"/>
<!-- Right Facet -->
<polygon id="minute-facet-right" points="400,294 408.8,500 400,538 400,294" fill="#8b522a"/>
<!-- Razor Center Spine Highlight -->
<line x1="400" y1="295" x2="400" y2="537" stroke="rgba(255, 248, 240, 0.6)" stroke-width="0.65"/>
</g>
</g>
<!-- SWEEPING SECONDS HAND -->
<g filter="url(#secondHandShadow)">
<g id="second-hand" transform="rotate(195 400 500)">
<!-- Counterweight Open Lancet Tail -->
<path d="M 400 500 L 398.2 542 L 400 554 L 401.8 542 Z" fill="none" stroke="#f5cfa9" stroke-width="1.8"/>
<polygon points="400,552 396.5,563 400,572 403.5,563" fill="#eab58b"/>
<!-- Ultra-fine Sweeping Needle -->
<polygon id="second-needle" points="399.4,277 400.6,277 401.6,508 398.4,508" fill="#f9d8b7"/>
<!-- Polished Boss Collar -->
<circle cx="400" cy="500" r="6.8" fill="url(#roseGoldCase)" stroke="#5c3217" stroke-width="0.6"/>
<circle cx="400" cy="500" r="3.4" fill="#fae0c7"/>
<circle cx="399.2" cy="499.2" r="1.3" fill="#ffffff" opacity="0.9"/>
</g>
</g>
<!-- ==================== DOMED SAPPHIRE CRYSTAL & AR COATING ==================== -->
<g id="sapphire-crystal" pointer-events="none">
<!-- Subtle AR Blue-Violet Rim Sheen -->
<circle cx="400" cy="500" r="234" fill="url(#sapphireRim)"/>
<!-- Domed Specular Light Reflection Arc -->
<path d="M 212 365
A 232 232 0 0 1 545 318
Q 412 362 252 522
A 232 232 0 0 1 212 365 Z"
fill="url(#sapphireGlare)"/>
<!-- Secondary faint lower-right internal crystal bounce -->
<path d="M 596 620 A 226 226 0 0 1 462 718 A 238 238 0 0 0 596 620 Z"
fill="rgba(165, 205, 255, 0.045)"/>
</g>
</svg>
</div>
<script>
(() => {
const SVG_NS = "http://www.w3.org/2000/svg";
const CX = 400;
const CY = 500;
const DEG_TO_RAD = Math.PI / 180;
// World light direction: -52 degrees (upper-left studio softbox)
const LIGHT_ANGLE = -52 * DEG_TO_RAD;
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;
}
// Interpolate rose gold color based on surface normal alignment with studio light [-1, 1]
function shadeRoseGold(dot) {
// Clamp dot in [-1, 1] and remap to [0, 1] with specular curve
const t = Math.max(0, Math.min(1, (dot + 1) * 0.5));
const spec = Math.pow(t, 2.6);
// Rich 5N 18k Rose Gold stops: shadow (#5c3217) -> mid (#d6986c) -> specular (#fff3e6)
let r, g, b;
if (t < 0.55) {
const k = t / 0.55;
r = 92 + (214 - 92) * k;
g = 50 + (152 - 50) * k;
b = 23 + (108 - 23) * k;
} else {
const k = (t - 0.55) / 0.45;
r = 214 + (255 - 214) * k;
g = 152 + (243 - 152) * k;
b = 108 + (230 - 108) * k;
}
r = Math.min(255, Math.round(r + spec * 18));
g = Math.min(255, Math.round(g + spec * 16));
b = Math.min(255, Math.round(b + spec * 14));
return `rgb(${r},${g},${b})`;
}
// 1. Build Crown Knurling Flutes
(function buildCrownFlutes() {
const group = document.getElementById("crown-flutes");
const topY = 461;
const botY = 539;
const count = 17;
for (let i = 0; i < count; i++) {
const frac = i / (count - 1);
const y = topY + frac * (botY - topY);
// Cylindrical foreshortening near top and bottom edges
const distFromCenter = Math.abs(frac - 0.5) * 2;
const h = Math.max(1.1, 2.7 * (1 - distFromCenter * 0.55));
const highlight = 1 - Math.abs(frac - 0.28) * 1.5;
const ridgeColor = highlight > 0.4 ? "#fce4cc" : "#8b522c";
group.appendChild(createSvgEl("rect", {
x: 682,
y: (y - h / 2).toFixed(2),
width: 26.5,
height: h.toFixed(2),
rx: 0.8,
fill: "#4a260f",
opacity: 0.78
}));
group.appendChild(createSvgEl("line", {
x1: 682.5,
y1: (y + h * 0.42).toFixed(2),
x2: 708,
y2: (y + h * 0.42).toFixed(2),
stroke: ridgeColor,
"stroke-width": "0.85",
opacity: 0.75
}));
}
})();
// 2. Build Fine Bezel Engine-Turned Notches
(function buildBezelFluting() {
const group = document.getElementById("bezel-fluting");
const notches = 180;
const rIn = 245.5;
const rOut = 250.2;
for (let i = 0; i < notches; i++) {
const ang = (i * 360 / notches) * DEG_TO_RAD;
const sin = Math.sin(ang);
const cos = -Math.cos(ang);
const dot = Math.cos(ang - LIGHT_ANGLE);
group.appendChild(createSvgEl("line", {
x1: (CX + sin * rIn).toFixed(2),
y1: (CY + cos * rIn).toFixed(2),
x2: (CX + sin * rOut).toFixed(2),
y2: (CY + cos * rOut).toFixed(2),
stroke: shadeRoseGold(dot),
"stroke-width": "1.6"
}));
}
})();
// 3. Build Sunburst Radial Metallic Grain
(function buildSunburstGrain() {
const group = document.getElementById("sunburst-grain");
const rays = 280;
for (let i = 0; i < rays; i++) {
const ang = (i * 360 / rays) * DEG_TO_RAD;
const sin = Math.sin(ang);
const cos = -Math.cos(ang);
const bright = i % 2 === 0;
group.appendChild(createSvgEl("line", {
x1: (CX + sin * 24).toFixed(1),
y1: (CY + cos * 24).toFixed(1),
x2: (CX + sin * 233).toFixed(1),
y2: (CY + cos * 233).toFixed(1),
stroke: bright ? "#6fa3f7" : "#020610",
"stroke-width": "0.55",
opacity: bright ? "0.28" : "0.35"
}));
}
})();
// 4. Build Traditional Rose-Engine Guilloché (Barleycorn / Rosette)
(function buildGuilloche() {
const group = document.getElementById("guilloche-pattern");
// Concentric engine-turned harmonic waves inside central medallion (r = 18..158)
const rings = 38;
const steps = 240;
const lobes = 24;
for (let rIdx = 0; rIdx < rings; rIdx++) {
const baseR = 16 + rIdx * 3.72;
const phase = (rIdx % 2) * (Math.PI / lobes);
const amp = 1.45 * (0.45 + 0.55 * (baseR / 158));
let d = "";
for (let s = 0; s <= steps; s++) {
const theta = (s / steps) * Math.PI * 2;
const r = baseR + amp * Math.sin(lobes * theta + phase);
const x = CX + Math.cos(theta) * r;
const y = CY + Math.sin(theta) * r;
d += (s === 0 ? "M " : " L ") + x.toFixed(2) + " " + y.toFixed(2);
}
d += " Z";
group.appendChild(createSvgEl("path", {
d,
fill: "none",
stroke: rIdx % 2 === 0 ? "rgba(185, 212, 255, 0.085)" : "rgba(242, 200, 162, 0.055)",
"stroke-width": "0.65"
}));
}
})();
// 5. Build Chemin-de-fer Minute & 1/5th-Second Track (28,800 vph Chronometer Scale)
(function buildMinuteTrack() {
const group = document.getElementById("minute-track");
const totalSubTicks = 300; // 60 seconds * 5 subdivisions
for (let i = 0; i < totalSubTicks; i++) {
const deg = i * (360 / totalSubTicks);
const ang = deg * DEG_TO_RAD;
const sin = Math.sin(ang);
const cos = -Math.cos(ang);
const isFiveMin = i % 25 === 0;
const isMinute = i % 5 === 0;
if (isFiveMin) {
// Crisp gold cabochon pearl at each 5-minute station + outer tick
group.appendChild(createSvgEl("line", {
x1: (CX + sin * 213).toFixed(2),
y1: (CY + cos * 213).toFixed(2),
x2: (CX + sin * 226).toFixed(2),
y2: (CY + cos * 226).toFixed(2),
stroke: "#f0c39b",
"stroke-width": "1.35"
}));
group.appendChild(createSvgEl("circle", {
cx: (CX + sin * 219.5).toFixed(2),
cy: (CY + cos * 219.5).toFixed(2),
r: "1.9",
fill: "#ffe6ce"
}));
} else if (isMinute) {
group.appendChild(createSvgEl("line", {
x1: (CX + sin * 213.5).toFixed(2),
y1: (CY + cos * 213.5).toFixed(2),
x2: (CX + sin * 225.5).toFixed(2),
y2: (CY + cos * 225.5).toFixed(2),
stroke: "rgba(232, 198, 168, 0.78)",
"stroke-width": "0.95"
}));
} else {
// 1/5th second chronometer hair-ticks
group.appendChild(createSvgEl("line", {
x1: (CX + sin * 217.5).toFixed(2),
y1: (CY + cos * 217.5).toFixed(2),
x2: (CX + sin * 225.5).toFixed(2),
y2: (CY + cos * 225.5).toFixed(2),
stroke: "rgba(188, 206, 235, 0.45)",
"stroke-width": "0.55"
}));
}
}
})();
// 6. Build 3D Multi-Faceted Applied 18k Rose Gold Hour Indices
(function buildAppliedIndices() {
const group = document.getElementById("applied-indices");
// Helper to construct a 4-facet tapered baton marker at angle `deg`, shifted sideways by `lateralOffset`
function addFacetedBaton(deg, rInner, rOuter, halfWidthInner, halfWidthOuter, lateralOffset = 0) {
const rad = deg * DEG_TO_RAD;
const ux = Math.sin(rad);
const uy = -Math.cos(rad);
// Perpendicular unit vector (clockwise)
const px = Math.cos(rad);
const py = Math.sin(rad);
const pt = (r, w) => {
const totalW = w + lateralOffset;
return `${(CX + ux * r + px * totalW).toFixed(2)},${(CY + uy * r + py * totalW).toFixed(2)}`;
};
const tipR = rInner - 4.5; // Pointed diamond tip toward dial center
const pTip = pt(tipR, 0);
const pInL = pt(rInner, -halfWidthInner);
const pInR = pt(rInner, halfWidthInner);
const pOutL = pt(rOuter, -halfWidthOuter);
const pOutR = pt(rOuter, halfWidthOuter);
const pSpineIn = pt(rInner + 2.5, 0);
const pSpineOut = pt(rOuter - 3.0, 0);
// Compute realistic facet normals in world space
const leftNormal = rad - Math.PI * 0.5;
const rightNormal = rad + Math.PI * 0.5;
const tipNormal = rad + Math.PI;
const tailNormal = rad;
const leftColor = shadeRoseGold(Math.cos(leftNormal - LIGHT_ANGLE));
const rightColor = shadeRoseGold(Math.cos(rightNormal - LIGHT_ANGLE));
const tipColor = shadeRoseGold(Math.cos(tipNormal - LIGHT_ANGLE));
const tailColor = shadeRoseGold(Math.cos(tailNormal - LIGHT_ANGLE));
// Left long bevel
group.appendChild(createSvgEl("polygon", {
points: `${pTip} ${pInL} ${pOutL} ${pSpineOut} ${pSpineIn}`,
fill: leftColor
}));
// Right long bevel
group.appendChild(createSvgEl("polygon", {
points: `${pTip} ${pSpineIn} ${pSpineOut} ${pOutR} ${pInR}`,
fill: rightColor
}));
// Outer tail bevel
group.appendChild(createSvgEl("polygon", {
points: `${pOutL} ${pOutR} ${pSpineOut}`,
fill: tailColor
}));
// Tip jewel facet
group.appendChild(createSvgEl("polygon", {
points: `${pTip} ${pInL} ${pSpineIn} ${pInR}`,
fill: tipColor,
opacity: "0.85"
}));
}
for (let h = 0; h < 12; h++) {
const deg = h * 30;
if (h === 0) {
// Double Applied Baton at 12 o'clock
addFacetedBaton(0, 169, 208, 3.2, 4.1, -5.2);
addFacetedBaton(0, 169, 208, 3.2, 4.1, 5.2);
} else if (h === 3) {
// Shortened Luminous Gold Baton outside 3 o'clock Date Window
addFacetedBaton(90, 193, 209, 3.4, 4.0, 0);
} else if (h === 6) {
// Shortened Applied Baton beneath Moonphase Subdial
addFacetedBaton(180, 161, 207, 3.3, 4.2, 0);
// Wait: Moonphase outer ring extends to y = 602 + 47.5 = 649.5 (which is r = 149.5 from CY=500).
// Let's keep 6 o'clock baton crisp from r = 158..207, leaving clean breathing room above SWISS MADE!
} else {
// Standard Full-Length Applied Hour Markers
addFacetedBaton(deg, 166, 208, 3.4, 4.6, 0);
}
}
})();
// 7. Accurate Astronomical Moonphase Calculation
function updateMoonphase(now) {
// Reference known astronomical New Moon: Jan 6, 2000 18:14 UTC
const synodicMonthMs = 29.530588853 * 86400 * 1000;
const refNewMoonMs = Date.UTC(2000, 0, 6, 18, 14, 0);
const elapsed = now.getTime() - refNewMoonMs;
const lunarCycle = ((elapsed % synodicMonthMs) + synodicMonthMs) % synodicMonthMs;
const phaseFraction = lunarCycle / synodicMonthMs; // 0 = New Moon, 0.5 = Full Moon
// On a 59-tooth double-moon mechanical disc:
// Full cycle of 1 synodic month rotates the disc by 180 degrees.
// At Full Moon (0.5), top moon sits directly centered at (400, 577) -> angle = 0 deg.
// At New Moon (0.0), moon is hidden under bosom bridge at +/- 90 deg.
const discAngle = (phaseFraction - 0.5) * 180;
document.getElementById("lunar-disc").setAttribute("transform", `rotate(${discAngle.toFixed(2)} 400 602)`);
}
// 8. Real-Time Mechanical Sweep & Dynamic Hand Facet Lighting
const hourHandEl = document.getElementById("hour-hand");
const minuteHandEl = document.getElementById("minute-hand");
const secondHandEl = document.getElementById("second-hand");
const hourFacetLeft = document.getElementById("hour-facet-left");
const hourFacetRight = document.getElementById("hour-facet-right");
const minuteFacetLeft = document.getElementById("minute-facet-left");
const minuteFacetRight = document.getElementById("minute-facet-right");
const secondNeedleEl = document.getElementById("second-needle");
const dateNumberEl = document.getElementById("date-number");
let lastRenderedDate = -1;
function updateDauphineShading(angleDeg, leftPoly, rightPoly) {
const rad = angleDeg * DEG_TO_RAD;
const leftNormal = rad - Math.PI * 0.5;
const rightNormal = rad + Math.PI * 0.5;
leftPoly.setAttribute("fill", shadeRoseGold(Math.cos(leftNormal - LIGHT_ANGLE)));
rightPoly.setAttribute("fill", shadeRoseGold(Math.cos(rightNormal - LIGHT_ANGLE)));
}
function tick() {
const now = new Date();
const ms = now.getMilliseconds();
const sec = now.getSeconds() + ms / 1000;
const min = now.getMinutes() + sec / 60;
const hr = (now.getHours() % 12) + min / 60;
const secDeg = sec * 6;
const minDeg = min * 6;
const hrDeg = hr * 30;
hourHandEl.setAttribute("transform", `rotate(${hrDeg.toFixed(3)} ${CX} ${CY})`);
minuteHandEl.setAttribute("transform", `rotate(${minDeg.toFixed(3)} ${CX} ${CY})`);
secondHandEl.setAttribute("transform", `rotate(${secDeg.toFixed(3)} ${CX} ${CY})`);
// Dynamically shimmer solid 18k gold Dauphine facets as hands sweep around the dial
updateDauphineShading(hrDeg, hourFacetLeft, hourFacetRight);
updateDauphineShading(minDeg, minuteFacetLeft, minuteFacetRight);
const secShimmer = Math.cos(secDeg * DEG_TO_RAD - LIGHT_ANGLE) * 0.4 + 0.55;
secondNeedleEl.setAttribute("fill", shadeRoseGold(secShimmer));
// Update Date Window & Moonphase when day changes (or on initial frame)
const dayOfMonth = now.getDate();
if (dayOfMonth !== lastRenderedDate) {
lastRenderedDate = dayOfMonth;
dateNumberEl.textContent = String(dayOfMonth);
updateMoonphase(now);
}
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
})();
</script>
</body>
</html>

