Run details
- Model
- google/gemini-4-argon
- Route
- OpenRouter API, one user message
- Reasoning
- provider default
- Limits
- 60 min · 60,000 output tokens
- Date
- 21 Oct 2026
- Time
- 2 min 32 s
- Size
- 33 kB
- Tokens
- 108 in, 12,715 out
- List price
- $0.13 ($2 in / $10 out per M)
- Paid
- $0.13
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
33 kB 666 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aurelius & Co. — Genève</title>
<style>
:root {
--bg-dark: #07080b;
--bg-light: #161820;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: radial-gradient(circle at 50% 45%, var(--bg-light) 0%, var(--bg-dark) 75%, #020203 100%);
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-family: 'Didot', 'Bodoni MT', 'Cinzel', 'Playfair Display', 'Times New Roman', serif;
user-select: none;
-webkit-font-smoothing: antialiased;
}
.watch-viewport {
width: min(92vw, 92vh);
height: min(92vw, 92vh);
max-width: 780px;
max-height: 780px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
filter: drop-shadow(0 35px 60px rgba(0, 0, 0, 0.95));
}
svg {
width: 100%;
height: 100%;
overflow: visible;
}
/* Subtle glint animation on the crystal */
@keyframes crystalShimmer {
0%, 100% { transform: rotate(-28deg) translateY(0px); opacity: 0.7; }
50% { transform: rotate(-26deg) translateY(-6px); opacity: 0.85; }
}
.crystal-glare {
transform-origin: 400px 400px;
animation: crystalShimmer 14s ease-in-out infinite;
pointer-events: none;
}
</style>
</head>
<body>
<div class="watch-viewport">
<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- ================= FILTERS ================= -->
<filter id="case-shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="22" stdDeviation="20" flood-color="#000" flood-opacity="0.8"/>
</filter>
<filter id="hand-shadow" x="-30%" y="-30%" width="160%" height="160%">
<feDropShadow dx="3" dy="7" stdDeviation="4" flood-color="#000" flood-opacity="0.6"/>
</filter>
<filter id="sec-shadow" x="-30%" y="-30%" width="160%" height="160%">
<feDropShadow dx="4" dy="10" stdDeviation="3.5" flood-color="#000" flood-opacity="0.55"/>
</filter>
<filter id="index-shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="1" dy="2" stdDeviation="1.5" flood-color="#000" flood-opacity="0.75"/>
</filter>
<filter id="inset-shadow" x="-20%" y="-20%" width="140%" height="140%">
<feOffset dx="0" dy="3"/>
<feGaussianBlur stdDeviation="3" result="offset-blur"/>
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
<feFlood flood-color="black" flood-opacity="0.85" result="color"/>
<feComposite operator="in" in="color" in2="inverse" result="shadow"/>
<feComposite operator="over" in="shadow" in2="SourceGraphic"/>
</filter>
<!-- ================= METALLIC GRADIENTS ================= -->
<!-- 18k Rose Gold Main -->
<linearGradient id="rose-gold" x1="15%" y1="10%" x2="85%" y2="90%">
<stop offset="0%" stop-color="#f9d5be"/>
<stop offset="18%" stop-color="#dfb79c"/>
<stop offset="38%" stop-color="#8b5c43"/>
<stop offset="50%" stop-color="#f4cbb1"/>
<stop offset="68%" stop-color="#fff0e6"/>
<stop offset="84%" stop-color="#b88468"/>
<stop offset="100%" stop-color="#4e3021"/>
</linearGradient>
<!-- Rose Gold Angled (Conic simulation) -->
<linearGradient id="rose-gold-bezel" x1="85%" y1="15%" x2="15%" y2="85%">
<stop offset="0%" stop-color="#5c3826"/>
<stop offset="22%" stop-color="#d5a385"/>
<stop offset="45%" stop-color="#fff2e8"/>
<stop offset="55%" stop-color="#be8a6d"/>
<stop offset="78%" stop-color="#6e4531"/>
<stop offset="92%" stop-color="#e8bfa5"/>
<stop offset="100%" stop-color="#422719"/>
</linearGradient>
<!-- Concave Rehaut (Inner Bezel) -->
<linearGradient id="rehaut-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3d2417"/>
<stop offset="30%" stop-color="#9e6d52"/>
<stop offset="50%" stop-color="#704732"/>
<stop offset="75%" stop-color="#f5ceb6"/>
<stop offset="100%" stop-color="#cfa084"/>
</linearGradient>
<!-- Faceted Gold Hands & Markers (Left / Right Split) -->
<linearGradient id="gold-facet-light" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#fff6f0"/>
<stop offset="35%" stop-color="#f2c6ab"/>
<stop offset="100%" stop-color="#d49e7d"/>
</linearGradient>
<linearGradient id="gold-facet-dark" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#9a684d"/>
<stop offset="50%" stop-color="#68412c"/>
<stop offset="100%" stop-color="#3d2214"/>
</linearGradient>
<!-- Lug Shading -->
<linearGradient id="lug-left" x1="0%" y1="20%" x2="100%" y2="60%">
<stop offset="0%" stop-color="#472a1b"/>
<stop offset="35%" stop-color="#d7a688"/>
<stop offset="70%" stop-color="#fce0ce"/>
<stop offset="100%" stop-color="#7a4e37"/>
</linearGradient>
<linearGradient id="lug-right" x1="100%" y1="20%" x2="0%" y2="60%">
<stop offset="0%" stop-color="#382014"/>
<stop offset="35%" stop-color="#b88467"/>
<stop offset="70%" stop-color="#f3c8ad"/>
<stop offset="100%" stop-color="#613b27"/>
</linearGradient>
<!-- Crown Ridges -->
<linearGradient id="crown-knurl" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="repeat">
<stop offset="0%" stop-color="#3d2214"/>
<stop offset="40%" stop-color="#e8bea3"/>
<stop offset="60%" stop-color="#fff0e6"/>
<stop offset="100%" stop-color="#4a2b1b"/>
</linearGradient>
<!-- ================= DIAL & STRAP GRADIENTS ================= -->
<!-- Deep Royal Blue Sunburst Dial -->
<radialGradient id="dial-sunburst" cx="50%" cy="50%" r="50%" fx="38%" fy="35%">
<stop offset="0%" stop-color="#1e3c6e"/>
<stop offset="35%" stop-color="#0f2244"/>
<stop offset="72%" stop-color="#071124"/>
<stop offset="93%" stop-color="#040914"/>
<stop offset="100%" stop-color="#010308"/>
</radialGradient>
<!-- Guilloche Center Medallion Gradient -->
<radialGradient id="guilloche-grad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#071226" stop-opacity="0.7"/>
<stop offset="80%" stop-color="#040b18" stop-opacity="0.85"/>
<stop offset="100%" stop-color="#02050c" stop-opacity="0.95"/>
</radialGradient>
<!-- Alligator Leather Strap -->
<linearGradient id="strap-base" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#060403"/>
<stop offset="15%" stop-color="#1c110c"/>
<stop offset="50%" stop-color="#2c1b12"/>
<stop offset="85%" stop-color="#1c110c"/>
<stop offset="100%" stop-color="#060403"/>
</linearGradient>
<linearGradient id="scale-grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#3a2418"/>
<stop offset="45%" stop-color="#24150e"/>
<stop offset="95%" stop-color="#120a06"/>
<stop offset="100%" stop-color="#050302"/>
</linearGradient>
<!-- Sapphire Crystal AR Coating -->
<linearGradient id="sapphire-glare" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
<stop offset="30%" stop-color="#88bbff" stop-opacity="0.03"/>
<stop offset="48%" stop-color="#d8ecff" stop-opacity="0.16"/>
<stop offset="52%" stop-color="#ffffff" stop-opacity="0.0"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
<!-- Date Window Parchment -->
<linearGradient id="date-wheel" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#c2bdb6"/>
<stop offset="22%" stop-color="#f7f4ef"/>
<stop offset="50%" stop-color="#ffffff"/>
<stop offset="78%" stop-color="#f7f4ef"/>
<stop offset="100%" stop-color="#b8b3ac"/>
</linearGradient>
<!-- Blued Steel Screw -->
<linearGradient id="blued-steel" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0d234a"/>
<stop offset="45%" stop-color="#2968c8"/>
<stop offset="55%" stop-color="#7ab3ff"/>
<stop offset="100%" stop-color="#061226"/>
</linearGradient>
<!-- ================= PATTERNS ================= -->
<!-- Clous de Paris / Hobnail Guilloché -->
<pattern id="hobnail" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
<rect width="6" height="6" fill="#091730"/>
<polygon points="0,0 6,0 3,3" fill="#18325e" opacity="0.65"/>
<polygon points="6,0 6,6 3,3" fill="#0d1e3b" opacity="0.75"/>
<polygon points="0,6 6,6 3,3" fill="#030812" opacity="0.9"/>
<polygon points="0,0 0,6 3,3" fill="#22447d" opacity="0.5"/>
</pattern>
</defs>
<!-- ================================================================= -->
<!-- 1. ALLIGATOR LEATHER STRAP -->
<!-- ================================================================= -->
<g id="leather-strap" filter="url(#case-shadow)">
<!-- Top Strap -->
<path d="M 285,0 L 515,0 L 528,155 L 272,155 Z" fill="url(#strap-base)"/>
<!-- Top Alligator Scales -->
<g opacity="0.88">
<rect x="335" y="-10" width="130" height="36" rx="8" fill="url(#scale-grad)" stroke="#080503" stroke-width="2"/>
<rect x="332" y="30" width="136" height="40" rx="8" fill="url(#scale-grad)" stroke="#080503" stroke-width="2"/>
<rect x="328" y="74" width="144" height="44" rx="9" fill="url(#scale-grad)" stroke="#080503" stroke-width="2"/>
<!-- Side Scales -->
<path d="M 286,-5 L 328,-5 L 325,26 L 283,26 Z" fill="url(#scale-grad)" stroke="#080503" stroke-width="1.5"/>
<path d="M 282,30 L 325,30 L 321,70 L 278,70 Z" fill="url(#scale-grad)" stroke="#080503" stroke-width="1.5"/>
<path d="M 277,74 L 321,74 L 317,118 L 273,118 Z" fill="url(#scale-grad)" stroke="#080503" stroke-width="1.5"/>
<path d="M 514,-5 L 472,-5 L 475,26 L 517,26 Z" fill="url(#scale-grad)" stroke="#080503" stroke-width="1.5"/>
<path d="M 518,30 L 475,30 L 479,70 L 522,70 Z" fill="url(#scale-grad)" stroke="#080503" stroke-width="1.5"/>
<path d="M 523,74 L 479,74 L 483,118 L 527,118 Z" fill="url(#scale-grad)" stroke="#080503" stroke-width="1.5"/>
</g>
<!-- Hand-sewn Waxed Thread (Top) -->
<path d="M 298,6 L 286,125 M 502,6 L 514,125" stroke="#d8b89c" stroke-width="2.6" stroke-dasharray="9 6" stroke-linecap="round" opacity="0.8"/>
<!-- Bottom Strap -->
<path d="M 272,645 L 528,645 L 515,800 L 285,800 Z" fill="url(#strap-base)"/>
<!-- Bottom Alligator Scales -->
<g opacity="0.88">
<rect x="328" y="682" width="144" height="44" rx="9" fill="url(#scale-grad)" stroke="#080503" stroke-width="2"/>
<rect x="332" y="730" width="136" height="40" rx="8" fill="url(#scale-grad)" stroke="#080503" stroke-width="2"/>
<rect x="335" y="774" width="130" height="36" rx="8" fill="url(#scale-grad)" stroke="#080503" stroke-width="2"/>
<!-- Side Scales -->
<path d="M 273,682 L 317,682 L 321,726 L 277,726 Z" fill="url(#scale-grad)" stroke="#080503" stroke-width="1.5"/>
<path d="M 278,730 L 321,730 L 325,770 L 282,770 Z" fill="url(#scale-grad)" stroke="#080503" stroke-width="1.5"/>
<path d="M 283,774 L 325,774 L 328,805 L 286,805 Z" fill="url(#scale-grad)" stroke="#080503" stroke-width="1.5"/>
<path d="M 527,682 L 483,682 L 479,726 L 523,726 Z" fill="url(#scale-grad)" stroke="#080503" stroke-width="1.5"/>
<path d="M 522,730 L 479,730 L 475,770 L 518,770 Z" fill="url(#scale-grad)" stroke="#080503" stroke-width="1.5"/>
<path d="M 517,774 L 475,774 L 472,805 L 514,805 Z" fill="url(#scale-grad)" stroke="#080503" stroke-width="1.5"/>
</g>
<!-- Hand-sewn Waxed Thread (Bottom) -->
<path d="M 286,675 L 298,794 M 514,675 L 502,794" stroke="#d8b89c" stroke-width="2.6" stroke-dasharray="9 6" stroke-linecap="round" opacity="0.8"/>
</g>
<!-- ================================================================= -->
<!-- 2. 18K ROSE GOLD CASE, LUGS & CROWN -->
<!-- ================================================================= -->
<g id="watch-case" filter="url(#case-shadow)">
<!-- Sculpted Lugs (4x with polished bevels) -->
<!-- Top Left Lug -->
<path d="M 225,215 C 232,145 250,100 266,82 L 285,90 L 282,190 Z" fill="url(#lug-left)"/>
<path d="M 225,215 C 232,145 250,100 266,82 L 274,85 C 258,108 242,150 236,215 Z" fill="#fff0e5" opacity="0.65"/>
<!-- Top Right Lug -->
<path d="M 575,215 C 568,145 550,100 534,82 L 515,90 L 518,190 Z" fill="url(#lug-right)"/>
<path d="M 575,215 C 568,145 550,100 534,82 L 526,85 C 542,108 558,150 564,215 Z" fill="#fff0e5" opacity="0.5"/>
<!-- Bottom Left Lug -->
<path d="M 225,585 C 232,655 250,700 266,718 L 285,710 L 282,610 Z" fill="url(#lug-left)"/>
<path d="M 225,585 C 232,655 250,700 266,718 L 274,715 C 258,692 242,650 236,585 Z" fill="#fff0e5" opacity="0.5"/>
<!-- Bottom Right Lug -->
<path d="M 575,585 C 568,655 550,700 534,718 L 515,710 L 518,610 Z" fill="url(#lug-right)"/>
<path d="M 575,585 C 568,655 550,700 534,718 L 526,715 C 542,692 558,650 564,585 Z" fill="#fff0e5" opacity="0.65"/>
<!-- Crown Guards -->
<path d="M 642,330 C 668,342 678,355 680,368 L 650,375 Z" fill="url(#rose-gold)"/>
<path d="M 642,470 C 668,458 678,445 680,432 L 650,425 Z" fill="url(#rose-gold-bezel)"/>
<!-- Fluted Winding Crown -->
<g id="winding-crown">
<rect x="665" y="366" width="22" height="68" rx="3" fill="url(#rose-gold)"/>
<rect x="678" y="362" width="26" height="76" rx="5" fill="url(#rose-gold)"/>
<!-- Knurling Ridges -->
<g fill="#422618" opacity="0.75">
<rect x="680" y="366" width="22" height="3" rx="1"/>
<rect x="680" y="372" width="22" height="3" rx="1"/>
<rect x="680" y="378" width="22" height="3" rx="1"/>
<rect x="680" y="384" width="22" height="3" rx="1"/>
<rect x="680" y="390" width="22" height="3" rx="1"/>
<rect x="680" y="396" width="22" height="3.5" rx="1"/>
<rect x="680" y="403" width="22" height="3" rx="1"/>
<rect x="680" y="409" width="22" height="3" rx="1"/>
<rect x="680" y="415" width="22" height="3" rx="1"/>
<rect x="680" y="421" width="22" height="3" rx="1"/>
<rect x="680" y="427" width="22" height="3" rx="1"/>
</g>
<g fill="#fff2e8" opacity="0.6">
<rect x="680" y="369" width="22" height="1.5"/>
<rect x="680" y="375" width="22" height="1.5"/>
<rect x="680" y="381" width="22" height="1.5"/>
<rect x="680" y="387" width="22" height="1.5"/>
<rect x="680" y="393" width="22" height="1.5"/>
<rect x="680" y="400" width="22" height="1.5"/>
<rect x="680" y="406" width="22" height="1.5"/>
<rect x="680" y="412" width="22" height="1.5"/>
<rect x="680" y="418" width="22" height="1.5"/>
<rect x="680" y="424" width="22" height="1.5"/>
</g>
<!-- Sapphire Cabochon in Crown Tip -->
<path d="M 704,386 C 711,392 711,408 704,414 Z" fill="#0f2b5c" stroke="#d5a385" stroke-width="1"/>
</g>
<!-- Outer Case Cushion -->
<circle cx="400" cy="400" r="282" fill="url(#rose-gold)"/>
<circle cx="400" cy="400" r="281" fill="none" stroke="#fff3eb" stroke-width="1.2" opacity="0.6"/>
<!-- Stepped Middle Bezel -->
<circle cx="400" cy="400" r="268" fill="url(#rose-gold-bezel)"/>
<circle cx="400" cy="400" r="268" fill="none" stroke="#361f13" stroke-width="1.5" opacity="0.8"/>
<!-- Inner Polished Bezel Lip -->
<circle cx="400" cy="400" r="250" fill="url(#rose-gold)"/>
<circle cx="400" cy="400" r="249" fill="none" stroke="#ffffff" stroke-width="0.8" opacity="0.65"/>
<!-- Deep Rehaut (Angled Flange Ring) -->
<circle cx="400" cy="400" r="243" fill="url(#rehaut-grad)"/>
</g>
<!-- ================================================================= -->
<!-- 3. SUNBURST & GUILLOCHÉ DIAL -->
<!-- ================================================================= -->
<g id="watch-dial">
<!-- Main Sunburst Lacquer Base -->
<circle cx="400" cy="400" r="236" fill="url(#dial-sunburst)"/>
<!-- Subtle Metallic Sunburst Rays -->
<g opacity="0.06" stroke="#ffffff" stroke-width="0.6">
<circle cx="400" cy="400" r="118" fill="none" stroke-width="236" stroke-dasharray="1.2 3.8"/>
</g>
<!-- Inner Dial Shadow (Depth from Rehaut) -->
<circle cx="400" cy="400" r="236" fill="none" stroke="#000000" stroke-width="8" opacity="0.75"/>
<circle cx="400" cy="400" r="232" fill="none" stroke="#d5a385" stroke-width="0.6" opacity="0.4"/>
<!-- Outer Railway Minute Track Ring -->
<circle cx="400" cy="400" r="225" fill="none" stroke="#e4bba1" stroke-width="0.75" opacity="0.7"/>
<circle cx="400" cy="400" r="213" fill="none" stroke="#e4bba1" stroke-width="0.75" opacity="0.7"/>
<!-- Center Guilloché Medallion (Clous de Paris) -->
<circle cx="400" cy="400" r="146" fill="url(#hobnail)"/>
<circle cx="400" cy="400" r="146" fill="url(#guilloche-grad)"/>
<!-- Gold Frame around Guilloché -->
<circle cx="400" cy="400" r="146" fill="none" stroke="url(#rose-gold)" stroke-width="1.6"/>
<circle cx="400" cy="400" r="144" fill="none" stroke="#000000" stroke-width="1.2" opacity="0.8"/>
<!-- Dynamically Populated Ticks & Applied Indices -->
<g id="minute-ticks"></g>
<g id="hour-indices" filter="url(#index-shadow)"></g>
<!-- ================= BRANDING & TYPOGRAPHY ================= -->
<g id="dial-typography" text-anchor="middle" fill="#f5d2bc">
<!-- Applied Gold Maltese-style Emblem -->
<g transform="translate(400, 286) scale(0.95)" filter="url(#index-shadow)">
<path d="M 0,-15 L 4,-4 L 15,0 L 4,4 L 0,15 L -4,4 L -15,0 L -4,-4 Z" fill="url(#rose-gold)"/>
<path d="M -9,-9 L -2,-3 L -3,2 L -9,-9 Z M 9,-9 L 2,-3 L 3,2 L 9,-9 Z M -9,9 L -2,3 L -3,-2 L -9,9 Z M 9,9 L 2,3 L 3,-2 L 9,9 Z" fill="url(#gold-facet-light)"/>
<circle cx="0" cy="0" r="2.2" fill="#fff"/>
</g>
<!-- Cartouche Plate -->
<text x="400" y="320" font-size="16.5" font-weight="600" letter-spacing="4.5" fill="#fce2d0">AURELIUS & CO.</text>
<text x="400" y="335" font-size="8.5" letter-spacing="3.5" fill="#d8ab90" font-family="sans-serif">GENÈVE</text>
<text x="400" y="352" font-size="11" font-style="italic" letter-spacing="1" fill="#cfa084">Chronomètre Souverain</text>
<!-- Lower Dial Reserve / Tourbillon Style Bridge & Small Text -->
<text x="400" y="468" font-size="8.5" font-family="sans-serif" letter-spacing="2.8" fill="#d8ab90">AUTOMATIC</text>
<text x="400" y="482" font-size="9.5" font-style="italic" letter-spacing="1.2" fill="#b88a70">36 Rubis — Cal. 891</text>
<!-- Exposed Balance Cock / Haute Horlogerie Bridge at 6 o'clock -->
<g transform="translate(400, 514)" filter="url(#index-shadow)">
<path d="M -38,0 L -16,-6 L 16,-6 L 38,0 L 16,6 L -16,6 Z" fill="url(#rose-gold)"/>
<!-- Chatons & Rubies -->
<circle cx="-26" cy="0" r="3" fill="url(#blued-steel)"/>
<line x1="-28" y1="-1.5" x2="-24" y2="1.5" stroke="#040b18" stroke-width="0.7"/>
<circle cx="26" cy="0" r="3" fill="url(#blued-steel)"/>
<line x1="24" y1="-1.5" x2="28" y2="1.5" stroke="#040b18" stroke-width="0.7"/>
<!-- Center Ruby Jewel -->
<circle cx="0" cy="0" r="6.5" fill="url(#rose-gold-bezel)"/>
<circle cx="0" cy="0" r="4.2" fill="#a80f30"/>
<circle cx="-1.2" cy="-1.2" r="1.4" fill="#ff7a95" opacity="0.8"/>
</g>
<!-- Swiss Made Footer -->
<text x="400" y="622" font-size="7" font-family="sans-serif" letter-spacing="2.5" fill="#cfa084" opacity="0.8">SWISS</text>
<text x="400" y="622" font-size="7" font-family="sans-serif" letter-spacing="2.5" fill="#cfa084" opacity="0.8" dx="36">MADE</text>
<text x="382" y="622" font-size="7" font-family="sans-serif" letter-spacing="2.5" fill="#cfa084" opacity="0.8" dx="-18"></text>
</g>
<!-- ================= DATE APERTURE (3 O'CLOCK) ================= -->
<g id="date-window" transform="translate(556, 400)">
<!-- Outer Beveled Rose Gold Frame -->
<polygon points="-29,-22 29,-22 23,-16 -23,-16" fill="#fff0e5"/>
<polygon points="29,-22 29,22 23,16 23,-16" fill="#8b5c43"/>
<polygon points="-29,22 29,22 23,16 -23,16" fill="#4e3021"/>
<polygon points="-29,-22 -29,22 -23,16 -23,-16" fill="#dfb79c"/>
<rect x="-29" y="-22" width="58" height="44" rx="2" fill="none" stroke="#2a160d" stroke-width="1" filter="url(#index-shadow)"/>
<!-- Date Disc Background -->
<rect x="-23" y="-16" width="46" height="32" fill="url(#date-wheel)" filter="url(#inset-shadow)"/>
<rect x="-23" y="-16" width="46" height="32" fill="none" stroke="#8c6249" stroke-width="0.7"/>
<!-- Current Date Numeral -->
<text id="date-text" x="0" y="8.5" text-anchor="middle" font-size="24" font-weight="700" fill="#111722" letter-spacing="-0.5">28</text>
<!-- Cyclops Magnifier Lens Effect -->
<rect x="-33" y="-25" width="66" height="50" rx="10" fill="url(#sapphire-glare)" stroke="#ffffff" stroke-width="0.7" stroke-opacity="0.35"/>
<path d="M -29,-21 L 15,-21 C 5,-10 -15,-6 -29,2 Z" fill="#ffffff" opacity="0.14"/>
</g>
</g>
<!-- ================================================================= -->
<!-- 4. DAUPHINE HANDS & SWEEPING SECONDS -->
<!-- ================================================================= -->
<g id="watch-hands">
<!-- HOUR HAND (3D Diamond-Cut Dauphine) -->
<g id="hour-hand" filter="url(#hand-shadow)" transform="rotate(305, 400, 400)">
<!-- Left Facet (Illuminated) -->
<polygon points="400,262 387,400 400,432" fill="url(#gold-facet-light)"/>
<!-- Right Facet (Shaded) -->
<polygon points="400,262 413,400 400,432" fill="url(#gold-facet-dark)"/>
<!-- Center Ridge Line -->
<line x1="400" y1="262" x2="400" y2="432" stroke="#fff8f2" stroke-width="0.6" opacity="0.8"/>
<!-- Super-LumiNova Insert -->
<polygon points="400,285 396.8,378 403.2,378" fill="#f4f9f5" opacity="0.92"/>
</g>
<!-- MINUTE HAND (3D Diamond-Cut Dauphine) -->
<g id="minute-hand" filter="url(#hand-shadow)" transform="rotate(60, 400, 400)">
<!-- Left Facet (Illuminated) -->
<polygon points="400,192 389.5,400 400,440" fill="url(#gold-facet-light)"/>
<!-- Right Facet (Shaded) -->
<polygon points="400,192 410.5,400 400,440" fill="url(#gold-facet-dark)"/>
<!-- Center Ridge Line -->
<line x1="400" y1="192" x2="400" y2="440" stroke="#fff8f2" stroke-width="0.6" opacity="0.8"/>
<!-- Super-LumiNova Insert -->
<polygon points="400,218 397.5,375 402.5,375" fill="#f4f9f5" opacity="0.92"/>
</g>
<!-- SWEEPING SECONDS HAND -->
<g id="second-hand" filter="url(#sec-shadow)" transform="rotate(180, 400, 400)">
<!-- Breguet-style Open Counterweight -->
<path d="M 400,400 L 400,452" stroke="url(#rose-gold)" stroke-width="2.5"/>
<circle cx="400" cy="462" r="6.5" fill="none" stroke="url(#rose-gold)" stroke-width="2.4"/>
<polygon points="397,468 403,468 400,485" fill="url(#rose-gold)"/>
<!-- Main Needle -->
<polygon points="398.6,400 401.4,400 400.4,180 399.6,180" fill="url(#gold-facet-light)"/>
<!-- Center Boss Ring -->
<circle cx="400" cy="400" r="8.5" fill="url(#rose-gold-bezel)" stroke="#4e3021" stroke-width="0.6"/>
</g>
<!-- Center Pinion Cap -->
<circle cx="400" cy="400" r="5" fill="url(#rose-gold)"/>
<circle cx="400" cy="400" r="2" fill="#fff5ed"/>
</g>
<!-- ================================================================= -->
<!-- 5. DOMED SAPPHIRE CRYSTAL & AR REFLECTION -->
<!-- ================================================================= -->
<g id="sapphire-crystal" pointer-events="none">
<!-- Anti-Reflective Glare Sweep -->
<g class="crystal-glare">
<ellipse cx="340" cy="275" rx="215" ry="110" fill="url(#sapphire-glare)"/>
</g>
<!-- Domed Edge Specular Rim Highlight -->
<circle cx="400" cy="400" r="241" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.18"/>
<path d="M 195,275 A 240,240 0 0,1 525,195" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" opacity="0.28"/>
<path d="M 275,605 A 240,240 0 0,0 605,525" fill="none" stroke="#88bbff" stroke-width="2" stroke-linecap="round" opacity="0.15"/>
</g>
</svg>
</div>
<script>
(function () {
const svgNS = "http://www.w3.org/2000/svg";
const ticksContainer = document.getElementById("minute-ticks");
const indicesContainer = document.getElementById("hour-indices");
// 1. Generate 300 Sub-second / 1/5th-second Chronometer Railway Ticks
const totalSubTicks = 300; // 60 seconds * 5 beats per second (36,000 vph / 5Hz)
for (let i = 0; i < totalSubTicks; i++) {
const angle = i * (360 / totalSubTicks);
const isHour = i % 25 === 0;
const isMinute = i % 5 === 0;
const line = document.createElementNS(svgNS, "line");
line.setAttribute("x1", "400");
line.setAttribute("x2", "400");
if (isHour) {
line.setAttribute("y1", "175");
line.setAttribute("y2", "187");
line.setAttribute("stroke", "#fce2d0");
line.setAttribute("stroke-width", "2.0");
} else if (isMinute) {
line.setAttribute("y1", "176");
line.setAttribute("y2", "186");
line.setAttribute("stroke", "#e4bba1");
line.setAttribute("stroke-width", "1.1");
} else {
line.setAttribute("y1", "178");
line.setAttribute("y2", "184");
line.setAttribute("stroke", "#c29478");
line.setAttribute("stroke-width", "0.55");
line.setAttribute("opacity", "0.75");
}
line.setAttribute("transform", `rotate(${angle}, 400, 400)`);
ticksContainer.appendChild(line);
// Add subtle Arabic 5-minute numerals along the outer track (05, 10 ... 60)
if (isHour) {
const numVal = (i / 5) === 0 ? 60 : (i / 5);
const rad = (angle - 90) * (Math.PI / 180);
const r = 230.5;
const x = 400 + r * Math.cos(rad);
const y = 400 + r * Math.sin(rad);
const txt = document.createElementNS(svgNS, "text");
txt.setAttribute("x", x);
txt.setAttribute("y", y);
txt.setAttribute("fill", "#d8ab90");
txt.setAttribute("font-size", "6.2");
txt.setAttribute("font-family", "sans-serif");
txt.setAttribute("font-weight", "600");
txt.setAttribute("text-anchor", "middle");
txt.setAttribute("dominant-baseline", "central");
txt.setAttribute("opacity", "0.85");
const rot = (angle > 90 && angle < 270) ? angle + 180 : angle;
txt.setAttribute("transform", `rotate(${rot}, ${x}, ${y})`);
txt.textContent = numVal < 10 ? "0" + numVal : numVal;
ticksContainer.appendChild(txt);
}
}
// 2. Generate 3D Faceted Applied Rose-Gold Hour Indices
for (let h = 0; h < 12; h++) {
const angle = h * 30;
const g = document.createElementNS(svgNS, "g");
g.setAttribute("transform", `rotate(${angle}, 400, 400)`);
if (h === 0) {
// 12 o'clock Double Faceted Baton
[-7, 7].forEach(dx => {
const baton = createFacetedBaton(400 + dx, 192, 236, 4.6);
g.appendChild(baton);
});
} else if (h === 3) {
// 3 o'clock shortened baton to make room for the Date Aperture
const baton = createFacetedBaton(400, 192, 207, 4.6);
g.appendChild(baton);
} else if (h === 6 || h === 9) {
// Wide Cardinal Batons at 6 & 9
const baton = createFacetedBaton(400, 192, 234, 5.4);
g.appendChild(baton);
} else {
// Standard Faceted Hour Batons
const baton = createFacetedBaton(400, 192, 232, 4.2);
g.appendChild(baton);
}
// Luminous Pearl Dot outside each index
const pearl = document.createElementNS(svgNS, "circle");
pearl.setAttribute("cx", "400");
pearl.setAttribute("cy", "181");
pearl.setAttribute("r", "1.7");
pearl.setAttribute("fill", "#f4f9f5");
pearl.setAttribute("stroke", "#b88468");
pearl.setAttribute("stroke-width", "0.5");
g.appendChild(pearl);
indicesContainer.appendChild(g);
}
function createFacetedBaton(cx, yTop, yBottom, halfWidth) {
const group = document.createElementNS(svgNS, "g");
const bevel = 4.5;
// Top facet
const topPoly = document.createElementNS(svgNS, "polygon");
topPoly.setAttribute("points", `${cx - halfWidth},${yTop} ${cx + halfWidth},${yTop} ${cx},${yTop + bevel}`);
topPoly.setAttribute("fill", "#fff5ed");
// Left facet (light)
const leftPoly = document.createElementNS(svgNS, "polygon");
leftPoly.setAttribute("points", `${cx - halfWidth},${yTop} ${cx},${yTop + bevel} ${cx},${yBottom - bevel} ${cx - halfWidth * 0.72},${yBottom}`);
leftPoly.setAttribute("fill", "url(#gold-facet-light)");
// Right facet (dark)
const rightPoly = document.createElementNS(svgNS, "polygon");
rightPoly.setAttribute("points", `${cx + halfWidth},${yTop} ${cx},${yTop + bevel} ${cx},${yBottom - bevel} ${cx + halfWidth * 0.72},${yBottom}`);
rightPoly.setAttribute("fill", "url(#gold-facet-dark)");
// Bottom point facet
const botPoly = document.createElementNS(svgNS, "polygon");
botPoly.setAttribute("points", `${cx - halfWidth * 0.72},${yBottom} ${cx + halfWidth * 0.72},${yBottom} ${cx},${yBottom - bevel}`);
botPoly.setAttribute("fill", "#4e3021");
group.appendChild(leftPoly);
group.appendChild(rightPoly);
group.appendChild(topPoly);
group.appendChild(botPoly);
return group;
}
// 3. Real-Time High-Beat Mechanical Movement Loop
const hourHand = document.getElementById("hour-hand");
const minuteHand = document.getElementById("minute-hand");
const secondHand = document.getElementById("second-hand");
const dateText = document.getElementById("date-text");
function updateTime() {
const now = new Date();
const ms = now.getMilliseconds();
const seconds = now.getSeconds() + ms / 1000;
const minutes = now.getMinutes() + seconds / 60;
const hours = (now.getHours() % 12) + minutes / 60;
const secAngle = seconds * 6;
const minAngle = minutes * 6;
const hourAngle = hours * 30;
hourHand.setAttribute("transform", `rotate(${hourAngle.toFixed(3)}, 400, 400)`);
minuteHand.setAttribute("transform", `rotate(${minAngle.toFixed(3)}, 400, 400)`);
secondHand.setAttribute("transform", `rotate(${secAngle.toFixed(3)}, 400, 400)`);
const day = now.getDate();
if (dateText.textContent !== String(day)) {
dateText.textContent = day;
}
requestAnimationFrame(updateTime);
}
requestAnimationFrame(updateTime);
})();
</script>
</body>
</html>

