hypeorcode
Network offOpen alone (new tab)

Run details

Model
minimax/minimax-m3.1-flash:free
Route
OpenRouter API, one user message
Reasoning
provider default, 16,026 reasoning tokens
Limits
60 min · 524,288 output tokens
Date
21 Oct 2026
Time
4 min 3 s
Size
25 kB
Tokens
278 in, 23,913 out
List price
free (list price $0)
Paid
$0 (free route)

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

25 kB 669 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="dark">
  <title>Luxury Mechanical Wristwatch</title>
  <style>
    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
    }

    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 16px 0;
      overflow-x: hidden;
      background:
        radial-gradient(ellipse at 50% 20%, rgba(91, 116, 135, 0.22), transparent 42%),
        radial-gradient(ellipse at 50% 78%, rgba(32, 48, 60, 0.32), transparent 45%),
        linear-gradient(145deg, #11161b 0%, #07090c 58%, #030507 100%);
      font-family: Arial, Helvetica, sans-serif;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          118deg,
          rgba(255, 255, 255, 0.012) 0,
          rgba(255, 255, 255, 0.012) 1px,
          transparent 1px,
          transparent 5px
        );
      opacity: 0.45;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 180px 45px rgba(0, 0, 0, 0.62);
    }

    .scene {
      width: min(92vw, 520px, calc(68.29vh - 24px));
      position: relative;
      isolation: isolate;
      filter: drop-shadow(0 32px 38px rgba(0, 0, 0, 0.45));
    }

    .scene svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .dial-numeral {
      fill: #e7ecec;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 32px;
      font-weight: 400;
      text-anchor: middle;
      filter: url(#typeShadow);
    }

    .brand {
      fill: #eef1ef;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 17px;
      letter-spacing: 4px;
      text-anchor: middle;
      filter: url(#typeShadow);
    }

    .sub-brand,
    .movement-text,
    .origin-text {
      fill: #aeb9bf;
      font-family: Arial, Helvetica, sans-serif;
      text-anchor: middle;
    }

    .sub-brand {
      font-size: 8px;
      letter-spacing: 3px;
    }

    .movement-text {
      font-size: 10px;
      letter-spacing: 3px;
    }

    .origin-text {
      font-size: 8px;
      letter-spacing: 2px;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  </style>
</head>
<body>
  <main class="scene">
    <svg
      viewBox="0 0 560 820"
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      aria-labelledby="watchTitle watchDescription"
    >
      <title id="watchTitle">Luxury mechanical wristwatch showing the current local time</title>
      <desc id="watchDescription">A polished steel watch with a midnight-blue sunburst dial, luminous hands, a smooth sweeping gold seconds hand, and a live date window.</desc>

      <defs>
        <linearGradient id="caseSteel" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0" stop-color="#465159"/>
          <stop offset="0.10" stop-color="#f9fcfd"/>
          <stop offset="0.21" stop-color="#909da5"/>
          <stop offset="0.34" stop-color="#303a41"/>
          <stop offset="0.48" stop-color="#e8eff2"/>
          <stop offset="0.61" stop-color="#66737c"/>
          <stop offset="0.79" stop-color="#f7fafb"/>
          <stop offset="1" stop-color="#252d32"/>
        </linearGradient>

        <linearGradient id="bezelSteel" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0" stop-color="#d7dfe3"/>
          <stop offset="0.18" stop-color="#5a666e"/>
          <stop offset="0.43" stop-color="#eef3f5"/>
          <stop offset="0.62" stop-color="#333d43"/>
          <stop offset="0.84" stop-color="#aeb9bf"/>
          <stop offset="1" stop-color="#4c575e"/>
        </linearGradient>

        <linearGradient id="gold" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0" stop-color="#76501d"/>
          <stop offset="0.22" stop-color="#f2d27a"/>
          <stop offset="0.48" stop-color="#9d681f"/>
          <stop offset="0.72" stop-color="#ffe6a1"/>
          <stop offset="1" stop-color="#76501d"/>
        </linearGradient>

        <linearGradient id="indexGold" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0" stop-color="#fff0b0"/>
          <stop offset="0.28" stop-color="#bd8b32"/>
          <stop offset="0.58" stop-color="#f3d58d"/>
          <stop offset="1" stop-color="#7a521b"/>
        </linearGradient>

        <radialGradient id="dialBlue" cx="38%" cy="29%" r="78%">
          <stop offset="0" stop-color="#2a4b61"/>
          <stop offset="0.38" stop-color="#153348"/>
          <stop offset="0.72" stop-color="#0a2030"/>
          <stop offset="1" stop-color="#030b12"/>
        </radialGradient>

        <radialGradient id="dialVignette" cx="50%" cy="48%" r="52%">
          <stop offset="0.58" stop-color="#000000" stop-opacity="0"/>
          <stop offset="0.82" stop-color="#000000" stop-opacity="0.08"/>
          <stop offset="1" stop-color="#000000" stop-opacity="0.62"/>
        </radialGradient>

        <linearGradient id="leather" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0" stop-color="#050708"/>
          <stop offset="0.16" stop-color="#252a2d"/>
          <stop offset="0.48" stop-color="#101416"/>
          <stop offset="0.80" stop-color="#282d30"/>
          <stop offset="1" stop-color="#040607"/>
        </linearGradient>

        <linearGradient id="leatherDepth" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0" stop-color="#ffffff" stop-opacity="0.07"/>
          <stop offset="0.45" stop-color="#000000" stop-opacity="0"/>
          <stop offset="1" stop-color="#000000" stop-opacity="0.5"/>
        </linearGradient>

        <linearGradient id="datePaper" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0" stop-color="#d7d5cc"/>
          <stop offset="0.18" stop-color="#fffdf2"/>
          <stop offset="1" stop-color="#e8e5d9"/>
        </linearGradient>

        <linearGradient id="glassWash" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0" stop-color="#ffffff" stop-opacity="0.13"/>
          <stop offset="0.28" stop-color="#ffffff" stop-opacity="0.025"/>
          <stop offset="0.60" stop-color="#ffffff" stop-opacity="0"/>
          <stop offset="1" stop-color="#9fc6d8" stop-opacity="0.045"/>
        </linearGradient>

        <linearGradient id="glassSheen" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0" stop-color="#ffffff" stop-opacity="0.3"/>
          <stop offset="0.62" stop-color="#d9edf4" stop-opacity="0.08"/>
          <stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
        </linearGradient>

        <pattern id="leatherScales" width="60" height="46" patternUnits="userSpaceOnUse">
          <path
            d="M1 4 Q30 -4 59 4 Q57 20 30 24 Q3 20 1 4Z"
            fill="none"
            stroke="#899399"
            stroke-width="1.1"
            opacity="0.27"
          />
          <path
            d="M2 27 Q30 23 58 27 Q56 42 30 45 Q4 42 2 27Z"
            fill="none"
            stroke="#899399"
            stroke-width="1.1"
            opacity="0.24"
          />
          <path d="M0 24 H60 M30 0 V24" fill="none" stroke="#020304" stroke-width="1" opacity="0.42"/>
        </pattern>

        <filter id="caseShadow" x="-40%" y="-40%" width="180%" height="190%">
          <feDropShadow dx="0" dy="18" stdDeviation="17" flood-color="#000000" flood-opacity="0.82"/>
        </filter>

        <filter id="strapShadow" x="-30%" y="-20%" width="160%" height="150%">
          <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#000000" flood-opacity="0.6"/>
        </filter>

        <filter id="handShadow" x="-50%" y="-30%" width="200%" height="170%">
          <feDropShadow dx="2" dy="5" stdDeviation="3" flood-color="#000000" flood-opacity="0.62"/>
        </filter>

        <filter id="indexShadow" x="-80%" y="-40%" width="260%" height="190%">
          <feDropShadow dx="1" dy="2" stdDeviation="1.5" flood-color="#000000" flood-opacity="0.72"/>
        </filter>

        <filter id="typeShadow" x="-30%" y="-30%" width="160%" height="170%">
          <feDropShadow dx="0" dy="1.5" stdDeviation="1.1" flood-color="#000000" flood-opacity="0.85"/>
        </filter>

        <filter id="leatherGrain" x="0" y="0" width="100%" height="100%">
          <feTurbulence type="fractalNoise" baseFrequency="0.11 0.72" numOctaves="2" seed="12" result="noise"/>
          <feColorMatrix in="noise" type="saturate" values="0" result="mono"/>
          <feComponentTransfer in="mono" result="faintNoise">
            <feFuncA type="linear" slope="0.18"/>
          </feComponentTransfer>
          <feComposite in="faintNoise" in2="SourceGraphic" operator="in" result="grain"/>
          <feBlend in="SourceGraphic" in2="grain" mode="soft-light"/>
        </filter>

        <filter id="dialNoise" x="0" y="0" width="100%" height="100%">
          <feTurbulence type="fractalNoise" baseFrequency="0.72" numOctaves="2" seed="8" result="noise"/>
          <feColorMatrix in="noise" type="saturate" values="0" result="mono"/>
          <feComponentTransfer in="mono" result="faintNoise">
            <feFuncA type="linear" slope="0.22"/>
          </feComponentTransfer>
          <feComposite in="faintNoise" in2="SourceGraphic" operator="in"/>
        </filter>

        <clipPath id="dialClip">
          <circle cx="280" cy="410" r="210"/>
        </clipPath>

        <path id="topStrap" d="M205 -15 C201 55 198 132 205 224 L355 224 C362 132 359 55 355 -15Z"/>
        <path id="bottomStrap" d="M205 596 C198 662 191 744 187 835 L373 835 C369 744 362 662 355 596Z"/>
      </defs>

      <!-- Soft studio shadow -->
      <ellipse cx="280" cy="790" rx="164" ry="22" fill="#000000" opacity="0.36"/>

      <!-- Alligator leather straps -->
      <g filter="url(#strapShadow)">
        <use href="#topStrap" fill="url(#leather)" filter="url(#leatherGrain)"/>
        <use href="#topStrap" fill="url(#leatherScales)" opacity="0.36"/>
        <use href="#topStrap" fill="url(#leatherDepth)"/>
        <use href="#bottomStrap" fill="url(#leather)" filter="url(#leatherGrain)"/>
        <use href="#bottomStrap" fill="url(#leatherScales)" opacity="0.36"/>
        <use href="#bottomStrap" fill="url(#leatherDepth)"/>
      </g>

      <!-- Strap edge stitching -->
      <g fill="none" stroke-linecap="round">
        <g stroke="#050607" stroke-width="3.2" opacity="0.9">
          <path d="M214 5 C211 70 210 143 215 213"/>
          <path d="M346 5 C349 70 350 143 345 213"/>
          <path d="M215 606 C208 674 201 751 198 814"/>
          <path d="M345 606 C352 674 359 751 362 814"/>
        </g>
        <g stroke="#b9b19a" stroke-width="1.25" stroke-dasharray="5 7" opacity="0.72">
          <path d="M214 5 C211 70 210 143 215 213"/>
          <path d="M346 5 C349 70 350 143 345 213"/>
          <path d="M215 606 C208 674 201 751 198 814"/>
          <path d="M345 606 C352 674 359 751 362 814"/>
        </g>
      </g>

      <!-- Polished buckle and keeper -->
      <g>
        <path
          d="M192 16 H368 V80 H192Z M204 28 H356 V68 H204Z"
          fill="url(#caseSteel)"
          fill-rule="evenodd"
          stroke="#12181c"
          stroke-width="1.5"
        />
        <path d="M282 80 L278 27 L282 22 L286 80Z" fill="url(#caseSteel)" stroke="#4c555b" stroke-width="0.8"/>
        <rect x="195" y="107" width="170" height="27" rx="8" fill="#111518" stroke="#050708" stroke-width="3"/>
        <path d="M200 110 H360" stroke="#535b60" stroke-width="1" opacity="0.5"/>
        <path d="M201 130 H359" stroke="#000000" stroke-width="2" opacity="0.75"/>
      </g>

      <!-- Strap holes -->
      <g>
        <ellipse cx="280" cy="695" rx="7" ry="9" fill="#020304" stroke="#51595e" stroke-width="1.4"/>
        <ellipse cx="280" cy="731" rx="7" ry="9" fill="#020304" stroke="#51595e" stroke-width="1.4"/>
        <ellipse cx="280" cy="767" rx="7" ry="9" fill="#020304" stroke="#51595e" stroke-width="1.4"/>
        <ellipse cx="280" cy="803" rx="7" ry="9" fill="#020304" stroke="#51595e" stroke-width="1.4"/>
        <path d="M274 698 Q280 701 286 698 M274 734 Q280 737 286 734 M274 770 Q280 773 286 770" fill="none" stroke="#737b80" stroke-width="0.7" opacity="0.5"/>
      </g>

      <!-- Sculpted lugs -->
      <g fill="url(#caseSteel)" stroke="#1a2227" stroke-width="1.5">
        <path d="M179 247 C157 237 145 214 151 191 C155 177 165 165 179 158 L218 187 L213 231Z"/>
        <path d="M381 247 C403 237 415 214 409 191 C405 177 395 165 381 158 L342 187 L347 231Z"/>
        <path d="M179 573 C157 583 145 606 151 629 C155 643 165 655 179 662 L218 633 L213 589Z"/>
        <path d="M381 573 C403 583 415 606 409 629 C405 643 395 655 381 662 L342 633 L347 589Z"/>
      </g>

      <!-- Fluted crown -->
      <g>
        <rect x="503" y="398" width="23" height="24" rx="5" fill="url(#caseSteel)" stroke="#11181c"/>
        <rect x="520" y="385" width="30" height="50" rx="10" fill="url(#caseSteel)" stroke="#151c20" stroke-width="1.4"/>
        <g stroke="#343d43" stroke-width="1.4" opacity="0.85">
          <path d="M525 391 V429"/>
          <path d="M531 388 V432"/>
          <path d="M537 388 V432"/>
          <path d="M543 391 V429"/>
        </g>
        <path d="M522 389 Q535 384 547 390" fill="none" stroke="#ffffff" stroke-width="1.4" opacity="0.6"/>
      </g>

      <!-- Steel case and bezel -->
      <circle cx="280" cy="410" r="238" fill="url(#caseSteel)" stroke="#090d10" stroke-width="2" filter="url(#caseShadow)"/>
      <circle cx="280" cy="410" r="231" fill="none" stroke="#f4f8f9" stroke-width="1.2" opacity="0.42"/>
      <circle cx="280" cy="410" r="225" fill="url(#bezelSteel)" stroke="#20282d" stroke-width="1.5"/>
      <circle cx="280" cy="410" r="218" fill="#03080c" stroke="#e9eef0" stroke-width="0.8" opacity="0.95"/>
      <circle cx="280" cy="410" r="211" fill="url(#dialBlue)" stroke="#000000" stroke-width="2"/>

      <!-- Reflected bezel highlights -->
      <circle
        cx="280"
        cy="410"
        r="225"
        fill="none"
        stroke="#ffffff"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-dasharray="155 1260"
        transform="rotate(-58 280 410)"
        opacity="0.58"
      />
      <circle
        cx="280"
        cy="410"
        r="224"
        fill="none"
        stroke="#000000"
        stroke-width="3"
        stroke-linecap="round"
        stroke-dasharray="185 1224"
        transform="rotate(123 280 410)"
        opacity="0.5"
      />

      <!-- Sunburst dial texture -->
      <g id="sunburst" clip-path="url(#dialClip)" opacity="0.95"></g>
      <circle cx="280" cy="410" r="210" fill="#ffffff" filter="url(#dialNoise)" opacity="0.17"/>
      <circle cx="280" cy="410" r="210" fill="url(#dialVignette)"/>

      <!-- Chapter ring and minute track -->
      <circle cx="280" cy="410" r="205" fill="none" stroke="#b5c2c9" stroke-width="0.65" opacity="0.28"/>
      <g id="minuteTrack" fill="none" stroke-linecap="round"></g>

      <!-- Applied gold hour markers -->
      <g id="hourMarkers" filter="url(#indexShadow)"></g>

      <!-- Dial typography -->
      <text x="280" y="258" class="dial-numeral">12</text>
      <text x="101" y="419" class="dial-numeral">9</text>
      <text x="280" y="568" class="dial-numeral">6</text>

      <path
        d="M280 276 L283 286 L293 289 L283 292 L280 302 L277 292 L267 289 L277 286Z"
        fill="url(#gold)"
        filter="url(#typeShadow)"
      />
      <text x="280" y="321" class="brand">AURELIS</text>
      <text x="280" y="337" class="sub-brand">GENÈVE</text>

      <text x="280" y="492" class="movement-text">AUTOMATIC</text>
      <text x="280" y="507" class="movement-text" style="font-size:7px; letter-spacing:2px;">25 JEWELS</text>
      <text x="280" y="601" class="origin-text">SWISS MADE</text>

      <!-- Date aperture -->
      <g id="dateWindow" filter="url(#indexShadow)">
        <rect x="408" y="381" width="61" height="58" rx="4" fill="#020507" stroke="#020304" stroke-width="2"/>
        <rect x="410" y="383" width="57" height="54" rx="3" fill="url(#caseSteel)"/>
        <rect x="415" y="388" width="47" height="44" rx="1.5" fill="url(#datePaper)"/>
        <path d="M415 432 V388 H462" fill="none" stroke="#000000" stroke-width="1.3" opacity="0.28"/>
        <path d="M416 389 H461" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.65"/>
        <text
          id="dateText"
          x="438.5"
          y="419"
          text-anchor="middle"
          fill="#17191a"
          font-family="Arial, Helvetica, sans-serif"
          font-size="26"
          font-weight="600"
          font-variant-numeric="tabular-nums"
        >00</text>
      </g>

      <!-- Luminous hour hand -->
      <g id="hourHand" filter="url(#handShadow)">
        <path
          d="M272.5 430 L271.8 344 L275.8 293 Q280 278 284.2 293 L288.2 344 L287.5 430 Q280 436 272.5 430Z"
          fill="url(#caseSteel)"
          stroke="#182127"
          stroke-width="1.2"
        />
        <path
          d="M277.6 408 L277.1 344 L279 302 Q280 294 281 302 L282.9 344 L282.4 408Z"
          fill="#dce8df"
          opacity="0.92"
        />
        <path d="M280 303 V405" stroke="#ffffff" stroke-width="0.8" opacity="0.55"/>
      </g>

      <!-- Luminous minute hand -->
      <g id="minuteHand" filter="url(#handShadow)">
        <path
          d="M275.8 431 L274.6 273 L278 236 Q280 222 282 236 L285.4 273 L284.2 431 Q280 436 275.8 431Z"
          fill="url(#caseSteel)"
          stroke="#162027"
          stroke-width="1.15"
        />
        <path
          d="M278.4 409 L277.9 273 L279.4 241 Q280 230 280.6 241 L282.1 273 L281.6 409Z"
          fill="#dce8df"
          opacity="0.92"
        />
        <path d="M280 239 V406" stroke="#ffffff" stroke-width="0.7" opacity="0.52"/>
      </g>

      <!-- Smooth sweeping gold seconds hand -->
      <g id="secondHand" filter="url(#handShadow)">
        <line x1="280" y1="447" x2="280" y2="195" stroke="#5d3b12" stroke-width="3" opacity="0.55"/>
        <line x1="280" y1="447" x2="280" y2="195" stroke="url(#gold)" stroke-width="1.55" stroke-linecap="round"/>
        <path d="M277.5 198 L280 187 L282.5 198Z" fill="url(#gold)"/>
        <circle cx="280" cy="445" r="7" fill="none" stroke="url(#gold)" stroke-width="1.4"/>
      </g>

      <!-- Central polished cap -->
      <g filter="url(#indexShadow)">
        <circle cx="280" cy="410" r="11" fill="url(#gold)" stroke="#34230c" stroke-width="1"/>
        <circle cx="280" cy="410" r="6.5" fill="url(#caseSteel)"/>
        <circle cx="280" cy="410" r="2.4" fill="#10171b"/>
      </g>

      <!-- Sapphire crystal reflections -->
      <g clip-path="url(#dialClip)" pointer-events="none">
        <circle cx="280" cy="410" r="210" fill="url(#glassWash)"/>
        <path
          d="M77 326 C115 237 216 187 338 194 C266 211 187 267 138 348 C120 377 95 367 77 326Z"
          fill="url(#glassSheen)"
          opacity="0.38"
        />
        <path
          d="M110 284 C151 235 208 207 267 199"
          fill="none"
          stroke="#ffffff"
          stroke-width="2"
          stroke-linecap="round"
          opacity="0.12"
        />
        <path
          d="M380 588 C424 556 454 515 473 469"
          fill="none"
          stroke="#9ac5d8"
          stroke-width="1.2"
          stroke-linecap="round"
          opacity="0.09"
        />
      </g>

      <!-- Fine crystal edge -->
      <circle cx="280" cy="410" r="209.5" fill="none" stroke="#eaf6fa" stroke-width="0.9" opacity="0.36"/>
    </svg>

    <p id="accessibleTime" class="sr-only" aria-live="off"></p>
  </main>

  <script>
    (() => {
      "use strict";

      const SVG_NS = "http://www.w3.org/2000/svg";
      const centerX = 280;
      const centerY = 410;
      const sunburst = document.getElementById("sunburst");
      const minuteTrack = document.getElementById("minuteTrack");
      const hourMarkers = document.getElementById("hourMarkers");
      const hourHand = document.getElementById("hourHand");
      const minuteHand = document.getElementById("minuteHand");
      const secondHand = document.getElementById("secondHand");
      const dateText = document.getElementById("dateText");
      const description = document.getElementById("watchDescription");
      const accessibleTime = document.getElementById("accessibleTime");

      function polar(radius, degrees) {
        const radians = degrees * Math.PI / 180;
        return {
          x: centerX + Math.sin(radians) * radius,
          y: centerY - Math.cos(radians) * radius
        };
      }

      function makeLine(x1, y1, x2, y2) {
        const line = document.createElementNS(SVG_NS, "line");
        line.setAttribute("x1", x1.toFixed(2));
        line.setAttribute("y1", y1.toFixed(2));
        line.setAttribute("x2", x2.toFixed(2));
        line.setAttribute("y2", y2.toFixed(2));
        return line;
      }

      for (let index = 0; index < 120; index += 1) {
        const angle = index * 3;
        const inner = polar(30, angle);
        const outer = polar(208, angle);
        const ray = makeLine(inner.x, inner.y, outer.x, outer.y);

        ray.setAttribute("stroke", index % 2 === 0 ? "#8ba8ba" : "#02080e");
        ray.setAttribute("stroke-width", index % 10 === 0 ? "1.2" : "0.65");
        ray.setAttribute("stroke-opacity", index % 10 === 0 ? "0.13" : "0.075");
        ray.setAttribute("vector-effect", "non-scaling-stroke");
        sunburst.appendChild(ray);
      }

      for (let index = 0; index < 60; index += 1) {
        const angle = index * 6;
        const isHour = index % 5 === 0;
        const outer = polar(202, angle);
        const inner = polar(isHour ? 190 : 197.5, angle);
        const tick = makeLine(inner.x, inner.y, outer.x, outer.y);

        tick.setAttribute("stroke", isHour ? "#e1e7e8" : "#aebbc2");
        tick.setAttribute("stroke-width", isHour ? "1.75" : "0.7");
        tick.setAttribute("stroke-opacity", isHour ? "0.9" : "0.58");
        tick.setAttribute("vector-effect", "non-scaling-stroke");
        minuteTrack.appendChild(tick);
      }

      [1, 2, 4, 5, 7, 8, 10, 11].forEach((hour) => {
        const marker = document.createElementNS(SVG_NS, "g");
        marker.setAttribute("transform", `rotate(${hour * 30} ${centerX} ${centerY})`);

        const body = document.createElementNS(SVG_NS, "rect");
        body.setAttribute("x", "275.8");
        body.setAttribute("y", "213.5");
        body.setAttribute("width", "8.4");
        body.setAttribute("height", "29");
        body.setAttribute("rx", "3.5");
        body.setAttribute("fill", "url(#indexGold)");
        body.setAttribute("stroke", "#4c3514");
        body.setAttribute("stroke-width", "0.65");

        const lume = document.createElementNS(SVG_NS, "rect");
        lume.setAttribute("x", "278.3");
        lume.setAttribute("y", "218");
        lume.setAttribute("width", "3.4");
        lume.setAttribute("height", "20");
        lume.setAttribute("rx", "1.6");
        lume.setAttribute("fill", "#dbe7df");
        lume.setAttribute("opacity", "0.92");

        marker.appendChild(body);
        marker.appendChild(lume);
        hourMarkers.appendChild(marker);
      });

      let lastSecond = -1;

      function updateWatch() {
        const now = new Date();
        const milliseconds = now.getMilliseconds();
        const seconds = now.getSeconds() + milliseconds / 1000;
        const minutes = now.getMinutes() + seconds / 60;
        const hours = (now.getHours() % 12) + minutes / 60;

        const secondAngle = seconds * 6;
        const minuteAngle = minutes * 6;
        const hourAngle = hours * 30;

        secondHand.setAttribute(
          "transform",
          `rotate(${secondAngle.toFixed(3)} ${centerX} ${centerY})`
        );
        minuteHand.setAttribute(
          "transform",
          `rotate(${minuteAngle.toFixed(3)} ${centerX} ${centerY})`
        );
        hourHand.setAttribute(
          "transform",
          `rotate(${hourAngle.toFixed(3)} ${centerX} ${centerY})`
        );

        const currentDay = String(now.getDate()).padStart(2, "0");
        if (dateText.textContent !== currentDay) {
          dateText.textContent = currentDay;
        }

        if (now.getSeconds() !== lastSecond) {
          lastSecond = now.getSeconds();

          const localTime = now.toLocaleTimeString(undefined, {
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit"
          });

          const localDate = now.toLocaleDateString(undefined, {
            weekday: "long",
            year: "numeric",
            month: "long",
            day: "numeric"
          });

          description.textContent =
            `A polished steel luxury mechanical wristwatch showing the current local time ` +
            `${localTime} on ${localDate}, with a smoothly sweeping gold seconds hand ` +
            `and a date window displaying ${currentDay}.`;

          accessibleTime.textContent = `${localDate}, ${localTime}`;
        }

        requestAnimationFrame(updateWatch);
      }

      updateWatch();
    })();
  </script>
</body>
</html>

Compare with

MiniMax M3.1 Flash: other attempts