hypeorcode
Network offOpen alone (new tab)

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

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

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 &amp; 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>

Compare with

Gemini 4 Argon: other attempts