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

Kimi K3.1 ProMoonshot AI

Network offOpen alone (new tab)

Run details

Model
moonshotai/kimi-k3.1-pro
Route
OpenRouter API, one user message
Served by
Moonshot AI
Effort
max, OpenRouter's default for this model
Limits
60 min · 300,000 output tokens (our $3.00 stop per request at $10/M)
Date
24 Oct 2026
Time
7 min 57 s
Size
23 kB
Tokens
161 in, 25,009 out (17,804 of them thinking)
List price
$0.25 at today's price ($2 in / $10 out per M)
Paid
$0.25

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

23 kB 592 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>Aurelian — Automatic Chronometer</title>
  <style>
    * {
      box-sizing: border-box;
    }

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

    body {
      min-height: 100vh;
      min-height: 100svh;
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: 12px;
      background:
        radial-gradient(ellipse at 50% 38%, #29272c 0%, #15161b 34%, #0b0d11 65%, #06080b 100%);
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(115deg, transparent 20%, rgba(255, 231, 205, 0.018) 45%, transparent 68%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.008) 0 1px, transparent 1px 4px);
    }

    .stage {
      position: relative;
      width: 100%;
      display: grid;
      place-items: center;
    }

    .stage::before {
      content: "";
      position: absolute;
      width: min(70vw, 650px);
      height: min(70vw, 650px);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(197, 139, 99, 0.09), transparent 68%);
      filter: blur(35px);
    }

    .watch {
      position: relative;
      display: block;
      width: min(88vw, 58vh, 580px);
      height: auto;
      overflow: visible;
      shape-rendering: geometricPrecision;
      text-rendering: geometricPrecision;
    }

    .watch text {
      user-select: none;
    }

    .dial-serif {
      font-family: Baskerville, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    }

    .dial-sans {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .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="stage">
    <svg class="watch" viewBox="0 0 800 1200" width="800" height="1200"
         role="img" aria-labelledby="watchTitle watchDescription">
      <title id="watchTitle">Aurelian automatic mechanical wristwatch</title>
      <desc id="watchDescription">
        A rose-gold mechanical wristwatch with a midnight-blue sunburst dial,
        polished applied markers, continuously sweeping hands, an alligator
        leather strap, and a date aperture showing today’s local date.
      </desc>

      <defs>
        <linearGradient id="caseGold" x1="5%" y1="3%" x2="95%" y2="97%">
          <stop offset="0" stop-color="#67402f"/>
          <stop offset="0.09" stop-color="#d39a73"/>
          <stop offset="0.18" stop-color="#fff0d7"/>
          <stop offset="0.29" stop-color="#b87553"/>
          <stop offset="0.43" stop-color="#f2c49d"/>
          <stop offset="0.59" stop-color="#8c503a"/>
          <stop offset="0.75" stop-color="#dca47d"/>
          <stop offset="0.89" stop-color="#ffe6c6"/>
          <stop offset="1" stop-color="#754431"/>
        </linearGradient>

        <linearGradient id="bezelGold" x1="12%" y1="0%" x2="88%" y2="100%">
          <stop offset="0" stop-color="#9b6247"/>
          <stop offset="0.16" stop-color="#ffe6c5"/>
          <stop offset="0.31" stop-color="#b77554"/>
          <stop offset="0.48" stop-color="#f6d0aa"/>
          <stop offset="0.66" stop-color="#89503b"/>
          <stop offset="0.83" stop-color="#e4ae85"/>
          <stop offset="1" stop-color="#6d3e2e"/>
        </linearGradient>

        <linearGradient id="appliedGold" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0" stop-color="#76503d"/>
          <stop offset="0.2" stop-color="#c78d66"/>
          <stop offset="0.43" stop-color="#fff0d3"/>
          <stop offset="0.58" stop-color="#e5b48a"/>
          <stop offset="0.82" stop-color="#a3684b"/>
          <stop offset="1" stop-color="#f2c59c"/>
        </linearGradient>

        <linearGradient id="handLight" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0" stop-color="#a36749"/>
          <stop offset="0.45" stop-color="#ffe8c7"/>
          <stop offset="1" stop-color="#d69a70"/>
        </linearGradient>

        <linearGradient id="handDark" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0" stop-color="#f0bd91"/>
          <stop offset="0.48" stop-color="#aa6c4d"/>
          <stop offset="1" stop-color="#70412f"/>
        </linearGradient>

        <linearGradient id="secondGold" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0" stop-color="#9f6245"/>
          <stop offset="0.5" stop-color="#ffe0b9"/>
          <stop offset="1" stop-color="#c78159"/>
        </linearGradient>

        <linearGradient id="strapLeather" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0" stop-color="#02080d"/>
          <stop offset="0.12" stop-color="#0a1821"/>
          <stop offset="0.35" stop-color="#142c38"/>
          <stop offset="0.52" stop-color="#1a3440"/>
          <stop offset="0.72" stop-color="#0d202a"/>
          <stop offset="0.9" stop-color="#07131b"/>
          <stop offset="1" stop-color="#01060a"/>
        </linearGradient>

        <radialGradient id="dialBlue" cx="37%" cy="28%" r="82%">
          <stop offset="0" stop-color="#245467"/>
          <stop offset="0.25" stop-color="#153e51"/>
          <stop offset="0.57" stop-color="#0c293a"/>
          <stop offset="0.82" stop-color="#071b29"/>
          <stop offset="1" stop-color="#030e17"/>
        </radialGradient>

        <linearGradient id="rehaut" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0" stop-color="#32424a"/>
          <stop offset="0.22" stop-color="#0c171e"/>
          <stop offset="0.58" stop-color="#02080d"/>
          <stop offset="0.83" stop-color="#25343b"/>
          <stop offset="1" stop-color="#060c11"/>
        </linearGradient>

        <linearGradient id="datePaper" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0" stop-color="#fffdf5"/>
          <stop offset="0.55" stop-color="#eee9dd"/>
          <stop offset="1" stop-color="#d4cec1"/>
        </linearGradient>

        <linearGradient id="glassSheen" x1="8%" y1="0%" x2="90%" y2="100%">
          <stop offset="0" stop-color="#ffffff" stop-opacity="0.09"/>
          <stop offset="0.28" stop-color="#d8f2ff" stop-opacity="0.025"/>
          <stop offset="0.52" stop-color="#ffffff" stop-opacity="0"/>
          <stop offset="0.82" stop-color="#9fc6d5" stop-opacity="0.012"/>
          <stop offset="1" stop-color="#ffffff" stop-opacity="0.035"/>
        </linearGradient>

        <pattern id="alligator" width="96" height="84" patternUnits="userSpaceOnUse">
          <path d="M4 9 C17 1 35 1 45 8 L42 34 C29 41 14 39 3 31 Z
                   M50 7 C64 0 82 3 93 12 L90 35 C75 41 60 39 48 30 Z
                   M-9 48 C6 38 25 38 36 46 L34 74 C19 82 2 78 -9 68 Z
                   M41 47 C57 37 80 39 101 49 L100 75 C79 83 58 80 43 69 Z"
                fill="#102631" fill-opacity="0.28"
                stroke="#7c98a2" stroke-opacity="0.17" stroke-width="1.5"/>
          <path d="M5 33 C18 40 30 41 42 35
                   M49 32 C63 40 77 41 90 36
                   M36 48 L34 73
                   M43 69 C59 80 80 82 99 75"
                fill="none" stroke="#00070c" stroke-opacity="0.65" stroke-width="2"/>
          <path d="M9 10 C20 5 32 5 40 10
                   M55 9 C66 5 79 7 87 13
                   M47 49 C60 43 78 44 92 50"
                fill="none" stroke="#a0b4ba" stroke-opacity="0.08" stroke-width="1"/>
        </pattern>

        <path id="strapTopShape"
              d="M304 -28 H496
                 C497 96 507 221 535 344
                 C539 361 532 376 517 386
                 H283
                 C268 376 261 361 265 344
                 C293 221 303 96 304 -28 Z"/>

        <path id="strapBottomShape"
              d="M283 814 H517
                 C532 824 539 839 535 856
                 C507 979 497 1104 496 1228
                 H304
                 C303 1104 293 979 265 856
                 C261 839 268 824 283 814 Z"/>

        <g id="lug">
          <path d="M282 282
                   C255 285 239 305 233 334
                   L220 389
                   C216 407 231 418 246 404
                   L284 368 L330 339 L319 300 Z"
                fill="url(#caseGold)" stroke="#694131" stroke-width="2"/>
          <path d="M275 296 C254 305 250 327 245 349 L233 391"
                fill="none" stroke="#ffe7c7" stroke-opacity="0.58"
                stroke-width="4" stroke-linecap="round"/>
          <path d="M246 404 L284 368 L321 344"
                fill="none" stroke="#623a2b" stroke-opacity="0.7" stroke-width="3"/>
        </g>

        <g id="baton">
          <rect x="393" y="390" width="14" height="44" rx="2"
                fill="#01070b" opacity="0.65"/>
          <rect x="394" y="388" width="12" height="44" rx="1.5"
                fill="url(#appliedGold)" stroke="#f4d0aa" stroke-width="0.55"/>
          <path d="M397 391 V428" stroke="#fff4df" stroke-opacity="0.62"
                stroke-width="1"/>
          <path d="M404 391 V429" stroke="#684330" stroke-opacity="0.5"
                stroke-width="1"/>
        </g>

        <g id="doubleBaton">
          <use href="#baton" transform="translate(-10 0)"/>
          <use href="#baton" transform="translate(10 0)"/>
        </g>

        <clipPath id="dialClip">
          <circle cx="400" cy="600" r="248"/>
        </clipPath>

        <clipPath id="crownClip">
          <rect x="714" y="558" width="50" height="84" rx="15"/>
        </clipPath>

        <filter id="watchShadow" x="-40%" y="-40%" width="180%" height="190%"
                color-interpolation-filters="sRGB">
          <feDropShadow dx="0" dy="22" stdDeviation="22"
                        flood-color="#000000" flood-opacity="0.72"/>
        </filter>

        <filter id="markerShadow" x="-30%" y="-30%" width="160%" height="170%"
                color-interpolation-filters="sRGB">
          <feDropShadow dx="0" dy="2.5" stdDeviation="1.7"
                        flood-color="#000000" flood-opacity="0.75"/>
        </filter>

        <filter id="handShadow" x="-35%" y="-35%" width="170%" height="180%"
                color-interpolation-filters="sRGB">
          <feDropShadow dx="1.5" dy="3" stdDeviation="2.2"
                        flood-color="#000000" flood-opacity="0.72"/>
        </filter>
      </defs>

      <!-- Alligator leather strap -->
      <g aria-hidden="true">
        <use href="#strapTopShape" fill="url(#strapLeather)"
             stroke="#010508" stroke-width="8"/>
        <use href="#strapTopShape" fill="url(#alligator)" opacity="0.9"/>
        <use href="#strapBottomShape" fill="url(#strapLeather)"
             stroke="#010508" stroke-width="8"/>
        <use href="#strapBottomShape" fill="url(#alligator)" opacity="0.9"/>

        <path d="M320 -5 C320 108 309 231 283 350
                 M480 -5 C480 108 491 231 517 350
                 M283 850 C309 969 320 1092 320 1205
                 M517 850 C491 969 480 1092 480 1205"
              fill="none" stroke="#c2a083" stroke-opacity="0.6"
              stroke-width="2" stroke-dasharray="3 8" stroke-linecap="round"/>

        <path d="M337 0 C337 118 326 229 309 320
                 M463 0 C463 118 474 229 491 320
                 M309 880 C326 971 337 1082 337 1200
                 M491 880 C474 971 463 1082 463 1200"
              fill="none" stroke="#66808b" stroke-opacity="0.1"
              stroke-width="2"/>
      </g>

      <!-- Sculpted lugs -->
      <use href="#lug"/>
      <use href="#lug" transform="translate(800 0) scale(-1 1)"/>
      <use href="#lug" transform="translate(0 1200) scale(1 -1)"/>
      <use href="#lug" transform="translate(800 1200) scale(-1 -1)"/>

      <!-- Fluted crown and guards -->
      <g aria-hidden="true">
        <path d="M674 548 C696 542 714 550 724 568 L700 585 L676 570 Z"
              fill="url(#caseGold)" stroke="#714634" stroke-width="2"/>
        <path d="M676 630 L700 615 L724 632 C714 650 696 658 674 652 Z"
              fill="url(#caseGold)" stroke="#714634" stroke-width="2"/>
        <rect x="684" y="578" width="53" height="44" rx="10"
              fill="url(#caseGold)" stroke="#704330" stroke-width="2"/>
        <rect x="714" y="558" width="50" height="84" rx="15"
              fill="url(#caseGold)" stroke="#6d4130" stroke-width="2"/>
        <g clip-path="url(#crownClip)">
          <path d="M716 568 H762 M716 578 H762 M716 588 H762
                   M716 598 H762 M716 608 H762 M716 618 H762
                   M716 628 H762 M716 638 H762"
                fill="none" stroke="#6c4030" stroke-width="2.4" opacity="0.7"/>
          <path d="M716 570 H762 M716 580 H762 M716 590 H762
                   M716 600 H762 M716 610 H762 M716 620 H762
                   M716 630 H762"
                fill="none" stroke="#ffe4c1" stroke-width="0.8" opacity="0.6"/>
        </g>
        <rect x="756" y="566" width="10" height="68" rx="5"
              fill="url(#appliedGold)" stroke="#6c4231" stroke-width="1.5"/>
      </g>

      <!-- Case and polished bezel -->
      <circle cx="400" cy="600" r="302" fill="#08090b"
              filter="url(#watchShadow)"/>
      <circle cx="400" cy="600" r="300" fill="url(#caseGold)"
              stroke="#4f3025" stroke-width="2"/>
      <circle cx="400" cy="600" r="294" fill="none"
              stroke="#ffebce" stroke-opacity="0.58" stroke-width="2"/>
      <circle cx="400" cy="600" r="288" fill="url(#bezelGold)"
              stroke="#9f674c" stroke-width="1"/>
      <circle cx="400" cy="600" r="276" fill="#38271f"/>
      <circle cx="400" cy="600" r="271" fill="url(#rehaut)"
              stroke="#f5c99f" stroke-opacity="0.35" stroke-width="1.5"/>

      <path d="M176 393 C220 335 292 305 369 301"
            fill="none" stroke="#fff2dc" stroke-opacity="0.67"
            stroke-width="4" stroke-linecap="round"/>
      <path d="M625 811 C677 756 699 686 697 623"
            fill="none" stroke="#f6c49a" stroke-opacity="0.32"
            stroke-width="3" stroke-linecap="round"/>
      <path d="M150 735 C127 679 119 616 128 555"
            fill="none" stroke="#512f24" stroke-opacity="0.65"
            stroke-width="4" stroke-linecap="round"/>

      <!-- Midnight-blue sunburst dial -->
      <circle cx="400" cy="600" r="249" fill="url(#dialBlue)"
              stroke="#02090f" stroke-width="3"/>
      <g clip-path="url(#dialClip)">
        <g id="sunburst"></g>
        <circle cx="400" cy="600" r="239" fill="none"
                stroke="#90b0ba" stroke-opacity="0.07"/>
        <circle cx="400" cy="600" r="215" fill="none"
                stroke="#b8cbd0" stroke-opacity="0.035"/>
      </g>
      <circle cx="400" cy="600" r="246" fill="none"
              stroke="#78939e" stroke-opacity="0.2" stroke-width="1"/>

      <g id="minuteTrack"></g>

      <!-- Applied rose-gold hour indices -->
      <g filter="url(#markerShadow)">
        <use href="#doubleBaton"/>
        <use href="#baton" transform="rotate(30 400 600)"/>
        <use href="#baton" transform="rotate(60 400 600)"/>
        <use href="#baton" transform="rotate(120 400 600)"/>
        <use href="#baton" transform="rotate(150 400 600)"/>
        <use href="#baton" transform="rotate(180 400 600)"/>
        <use href="#baton" transform="rotate(210 400 600)"/>
        <use href="#baton" transform="rotate(240 400 600)"/>
        <use href="#baton" transform="rotate(270 400 600)"/>
        <use href="#baton" transform="rotate(300 400 600)"/>
        <use href="#baton" transform="rotate(330 400 600)"/>
      </g>

      <!-- Dial signature -->
      <g text-anchor="middle">
        <path d="M388 468 L400 444 L412 468 M392 460 H408"
              fill="none" stroke="#e7bb94" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round"/>
        <text x="400" y="509" class="dial-serif"
              font-size="24" letter-spacing="5" fill="#edc6a2">AURELIAN</text>
        <text x="400" y="532" class="dial-sans"
              font-size="9.5" letter-spacing="3.6" fill="#aebdc1">AUTOMATIQUE</text>

        <text x="400" y="705" class="dial-serif"
              font-size="11" letter-spacing="3" fill="#c3c9c7">CHRONOMÈTRE</text>
        <path d="M366 718 H434" stroke="#c59a78" stroke-opacity="0.42"
              stroke-width="0.8"/>

        <text x="351" y="825" class="dial-sans"
              font-size="7.5" letter-spacing="1.6" fill="#89999e">SWISS</text>
        <text x="449" y="825" class="dial-sans"
              font-size="7.5" letter-spacing="1.6" fill="#89999e">MADE</text>
      </g>

      <!-- Beveled date aperture at three o'clock -->
      <g aria-hidden="true">
        <rect x="534" y="571" width="82" height="60" rx="5"
              fill="#01070b" opacity="0.75"/>
        <rect x="537" y="573" width="76" height="56" rx="3.5"
              fill="url(#appliedGold)" stroke="#f5d0a9" stroke-width="0.7"/>
        <rect x="541" y="577" width="68" height="48" rx="1"
              fill="url(#datePaper)" stroke="#6f553f" stroke-width="1"/>
        <path d="M542 578 H608 L604 585 H546 Z"
              fill="#241b15" opacity="0.16"/>
        <path d="M543 623 H607" stroke="#ffffff" stroke-opacity="0.7"
              stroke-width="1"/>
        <text id="currentDate" x="575" y="611" text-anchor="middle"
              class="dial-sans" font-size="28" font-weight="500"
              font-variant-numeric="tabular-nums" fill="#172027">--</text>
      </g>

      <!-- Dauphine hour and minute hands, plus sweeping seconds -->
      <g filter="url(#handShadow)">
        <g id="hourHand">
          <path d="M400 475 L387.8 584 L390.5 608 L400 621
                   L409.5 608 L412.2 584 Z"
                fill="#754832"/>
          <path d="M400 475 L400 615 L391 606 L389 584 Z"
                fill="url(#handLight)"/>
          <path d="M400 475 L411 584 L408 607 L400 621 Z"
                fill="url(#handDark)"/>
          <path d="M400 486 V597" stroke="#fff1d8" stroke-opacity="0.5"
                stroke-width="0.8"/>
        </g>

        <g id="minuteHand">
          <path d="M400 401 L390.5 581 L392.5 610 L400 621
                   L407.5 610 L409.5 581 Z"
                fill="#70442f"/>
          <path d="M400 401 L400 615 L393.5 607 L391.5 581 Z"
                fill="url(#handLight)"/>
          <path d="M400 401 L408.5 581 L406.5 608 L400 621 Z"
                fill="url(#handDark)"/>
          <path d="M400 413 V594" stroke="#fff4df" stroke-opacity="0.58"
                stroke-width="0.75"/>
        </g>

        <g id="secondHand">
          <path d="M400 374 L398.4 600 L397.9 654
                   H402.1 L401.6 600 Z"
                fill="url(#secondGold)"/>
          <circle cx="400" cy="643" r="8.5" fill="none"
                  stroke="#dea679" stroke-width="2.2"/>
          <circle cx="400" cy="643" r="5.2" fill="none"
                  stroke="#6f4532" stroke-opacity="0.55" stroke-width="0.8"/>
        </g>
      </g>

      <!-- Polished central pivot -->
      <circle cx="400" cy="601" r="12" fill="#00070c" opacity="0.55"/>
      <circle cx="400" cy="600" r="9.5" fill="url(#caseGold)"
              stroke="#f3c69d" stroke-width="0.8"/>
      <circle cx="400" cy="600" r="4.2" fill="#e8b386"/>
      <circle cx="398.5" cy="598.5" r="1.6" fill="#fff1d8" opacity="0.85"/>

      <!-- Sapphire crystal reflections -->
      <g clip-path="url(#dialClip)" pointer-events="none">
        <circle cx="400" cy="600" r="248" fill="url(#glassSheen)"/>
        <path d="M174 489
                 C221 399 317 350 422 352
                 C330 382 254 443 209 535
                 C194 526 182 510 174 489 Z"
              fill="#ffffff" opacity="0.035"/>
        <path d="M524 821 C580 788 616 738 637 684"
              fill="none" stroke="#d8f3ff" stroke-opacity="0.035"
              stroke-width="18" stroke-linecap="round"/>
      </g>
      <circle cx="400" cy="600" r="248.5" fill="none"
              stroke="#d5edf3" stroke-opacity="0.16" stroke-width="1.4"/>
    </svg>

    <time id="localTime" class="sr-only"></time>
  </main>

  <script>
    (() => {
      const SVG_NS = "http://www.w3.org/2000/svg";

      function svgElement(name, attributes) {
        const element = document.createElementNS(SVG_NS, name);
        for (const [key, value] of Object.entries(attributes)) {
          element.setAttribute(key, value);
        }
        return element;
      }

      // Fine radial brushing beneath the dial furniture.
      const rays = document.getElementById("sunburst");
      const rayCount = 192;

      for (let i = 0; i < rayCount; i++) {
        const angle = (i / rayCount) * Math.PI * 2;
        const sin = Math.sin(angle);
        const cos = Math.cos(angle);
        const lightRay = i % 2 === 0;

        rays.appendChild(svgElement("line", {
          x1: 400 + sin * 24,
          y1: 600 - cos * 24,
          x2: 400 + sin * 252,
          y2: 600 - cos * 252,
          stroke: lightRay ? "#b4dce5" : "#000810",
          "stroke-opacity": lightRay ? "0.045" : "0.11",
          "stroke-width": i % 3 === 0 ? "0.9" : "0.55"
        }));
      }

      // Sixty individually drawn chapter-ring divisions.
      const minuteTrack = document.getElementById("minuteTrack");

      for (let i = 0; i < 60; i++) {
        const major = i % 5 === 0;
        minuteTrack.appendChild(svgElement("line", {
          x1: "400",
          y1: major ? "365" : "369",
          x2: "400",
          y2: major ? "379" : "377",
          transform: `rotate(${i * 6} 400 600)`,
          stroke: major ? "#dfb692" : "#a9b9bd",
          "stroke-opacity": major ? "0.82" : "0.52",
          "stroke-width": major ? "1.8" : "0.9",
          "stroke-linecap": "round"
        }));
      }

      const hourHand = document.getElementById("hourHand");
      const minuteHand = document.getElementById("minuteHand");
      const secondHand = document.getElementById("secondHand");
      const dateText = document.getElementById("currentDate");
      const localTime = document.getElementById("localTime");

      let previousDate = "";
      let previousSecond = -1;

      function setAngle(element, angle) {
        element.setAttribute(
          "transform",
          `rotate(${angle.toFixed(3)} 400 600)`
        );
      }

      function render() {
        const now = new Date();

        // Date() supplies the viewer's local time. Milliseconds keep the
        // seconds hand continuously sweeping instead of ticking once a second.
        const seconds = now.getSeconds() + now.getMilliseconds() / 1000;
        const minutes = now.getMinutes() + seconds / 60;
        const hours = (now.getHours() % 12) + minutes / 60;

        setAngle(secondHand, seconds * 6);
        setAngle(minuteHand, minutes * 6);
        setAngle(hourHand, hours * 30);

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

        if (now.getSeconds() !== previousSecond) {
          previousSecond = now.getSeconds();
          localTime.textContent =
            `Local time: ${now.toLocaleTimeString()}. ` +
            `Local date: ${now.toLocaleDateString()}.`;
        }

        requestAnimationFrame(render);
      }

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

Compare with

Kimi K3.1 Pro: other attempts