• 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 K3Moonshot AI

Network offOpen alone

Run details

Model
moonshotai/kimi-k3
Route
OpenRouter API, one user message
Served by
Sail Research
Effort
max, OpenRouter's default for this model
Limits
60 min · 277,777 output tokens (our $3.00 stop per request at $15/M)
Date
24 Oct 2026
Time
3 min 36 s
Size
17 kB
Tokens
161 in, 29,455 out (23,433 of them thinking)
List price
$0.44 at today's price ($0.192 in / $15 out per M)
Paid
$0.16

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

17 kB 326 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aurelian Automatic — Wristwatch</title>
<style>
  html,body{height:100%;margin:0}
  body{
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(1100px 760px at 50% 30%, #363d46 0%, #1b1f24 55%, #0c0e11 100%);
  }
  .stage{position:relative;line-height:0}
  .stage::before{
    content:"";position:absolute;inset:-12%;z-index:-1;
    background:radial-gradient(closest-side, rgba(110,150,205,.15), rgba(110,150,205,0) 72%);
  }
  svg{
    width:min(86vmin,680px);height:auto;display:block;
    filter:drop-shadow(0 36px 46px rgba(0,0,0,.6)) drop-shadow(0 8px 14px rgba(0,0,0,.45));
  }
</style>
</head>
<body>
<div class="stage">
<svg viewBox="0 0 900 1000" role="img" aria-label="Luxury mechanical wristwatch showing the current local time">
  <title>Aurelian Automatic Chronometer</title>
  <defs>
    <linearGradient id="steelUS" gradientUnits="userSpaceOnUse" x1="150" y1="120" x2="760" y2="880">
      <stop offset="0" stop-color="#fbfcfd"/>
      <stop offset=".16" stop-color="#c9cfd6"/>
      <stop offset=".36" stop-color="#878f98"/>
      <stop offset=".52" stop-color="#eef1f4"/>
      <stop offset=".68" stop-color="#77808a"/>
      <stop offset=".85" stop-color="#c7cdd3"/>
      <stop offset="1" stop-color="#8d959d"/>
    </linearGradient>
    <radialGradient id="dialGrad" cx=".5" cy=".44" r=".62">
      <stop offset="0" stop-color="#3a7ab0"/>
      <stop offset=".35" stop-color="#1c4a7c"/>
      <stop offset=".7" stop-color="#0e2f52"/>
      <stop offset="1" stop-color="#071a30"/>
    </radialGradient>
    <linearGradient id="idxGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#f8fafb"/>
      <stop offset=".42" stop-color="#c2c9d0"/>
      <stop offset=".58" stop-color="#eef1f4"/>
      <stop offset="1" stop-color="#77808a"/>
    </linearGradient>
    <linearGradient id="idxLen" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ffffff" stop-opacity=".55"/>
      <stop offset=".5" stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="1" stop-color="#000000" stop-opacity=".3"/>
    </linearGradient>
    <linearGradient id="frameGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f6f8fa"/>
      <stop offset=".5" stop-color="#c4cbd2"/>
      <stop offset="1" stop-color="#7d868e"/>
    </linearGradient>
    <linearGradient id="dateBg" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ffffff"/>
      <stop offset="1" stop-color="#eae8e0"/>
    </linearGradient>
    <linearGradient id="wellShadow" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#000000" stop-opacity=".32"/>
      <stop offset=".14" stop-color="#000000" stop-opacity="0"/>
      <stop offset=".86" stop-color="#000000" stop-opacity="0"/>
      <stop offset="1" stop-color="#000000" stop-opacity=".24"/>
    </linearGradient>
    <radialGradient id="capGrad" cx=".38" cy=".34" r=".9">
      <stop offset="0" stop-color="#f7f9fb"/>
      <stop offset=".55" stop-color="#b3bbc2"/>
      <stop offset="1" stop-color="#6e777f"/>
    </radialGradient>
    <linearGradient id="handL" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#fcfdfe"/><stop offset="1" stop-color="#ccd3da"/>
    </linearGradient>
    <linearGradient id="handR" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#aeb6bd"/><stop offset="1" stop-color="#6f7880"/>
    </linearGradient>
    <linearGradient id="leather" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#7c4e2d"/>
      <stop offset=".5" stop-color="#59371d"/>
      <stop offset="1" stop-color="#39210f"/>
    </linearGradient>
    <linearGradient id="sheen" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#ffffff" stop-opacity=".13"/>
      <stop offset=".35" stop-color="#ffffff" stop-opacity="0"/>
      <stop offset=".7" stop-color="#000000" stop-opacity="0"/>
      <stop offset="1" stop-color="#000000" stop-opacity=".28"/>
    </linearGradient>
    <radialGradient id="glare1" cx=".5" cy=".5" r=".5">
      <stop offset="0" stop-color="#ffffff" stop-opacity=".2"/>
      <stop offset=".55" stop-color="#ffffff" stop-opacity=".05"/>
      <stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="crownGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#eef1f4"/>
      <stop offset=".45" stop-color="#a9b1b8"/>
      <stop offset=".8" stop-color="#69727a"/>
      <stop offset="1" stop-color="#d7dce0"/>
    </linearGradient>

    <filter id="handShadow" x="-60%" y="-60%" width="220%" height="220%">
      <feDropShadow dx="0" dy="10" stdDeviation="7" flood-color="#000000" flood-opacity=".42"/>
    </filter>
    <filter id="secShadow" x="-60%" y="-60%" width="220%" height="220%">
      <feDropShadow dx="0" dy="6" stdDeviation="5" flood-color="#000000" flood-opacity=".38"/>
    </filter>
    <filter id="idxShadow" x="-40%" y="-40%" width="180%" height="180%">
      <feDropShadow dx="0" dy="4" stdDeviation="3" flood-color="#000000" flood-opacity=".5"/>
    </filter>
    <filter id="dateShadow" x="-40%" y="-40%" width="180%" height="180%">
      <feDropShadow dx="0" dy="3" stdDeviation="2.5" flood-color="#000000" flood-opacity=".45"/>
    </filter>
    <filter id="blur2" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="2"/></filter>
    <filter id="blur6" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="6"/></filter>

    <clipPath id="dialClip"><circle cx="450" cy="500" r="320"/></clipPath>
    <clipPath id="crystalClip"><circle cx="450" cy="500" r="362"/></clipPath>
  </defs>

  <!-- ============ STRAP ============ -->
  <g>
    <path d="M302 0 L598 0 Q642 132 648 262 L252 262 Q258 132 302 0 Z" fill="url(#leather)" stroke="#201206" stroke-width="3"/>
    <path d="M302 0 L598 0 Q642 132 648 262 L252 262 Q258 132 302 0 Z" fill="url(#sheen)"/>
    <path d="M320 22 Q278 132 274 246" fill="none" stroke="#cfa96f" stroke-width="3" stroke-dasharray="9 7" opacity=".85"/>
    <path d="M580 22 Q622 132 626 246" fill="none" stroke="#cfa96f" stroke-width="3" stroke-dasharray="9 7" opacity=".85"/>
    <path d="M252 738 L648 738 Q642 868 598 1000 L302 1000 Q258 868 252 738 Z" fill="url(#leather)" stroke="#201206" stroke-width="3"/>
    <path d="M252 738 L648 738 Q642 868 598 1000 L302 1000 Q258 868 252 738 Z" fill="url(#sheen)"/>
    <path d="M274 754 Q278 866 320 978" fill="none" stroke="#cfa96f" stroke-width="3" stroke-dasharray="9 7" opacity=".85"/>
    <path d="M626 754 Q622 866 580 978" fill="none" stroke="#cfa96f" stroke-width="3" stroke-dasharray="9 7" opacity=".85"/>
    <ellipse cx="450" cy="866" rx="6" ry="8" fill="#160c05" stroke="#170d05"/>
    <ellipse cx="450" cy="916" rx="6" ry="8" fill="#160c05" stroke="#170d05"/>
    <ellipse cx="450" cy="966" rx="6" ry="8" fill="#160c05" stroke="#170d05"/>
  </g>

  <!-- end links / lugs -->
  <rect x="282" y="138" width="96" height="66" rx="14" transform="rotate(-18 330 171)" fill="url(#steelUS)" stroke="#3a4249"/>
  <rect x="522" y="138" width="96" height="66" rx="14" transform="rotate(18 570 171)"  fill="url(#steelUS)" stroke="#3a4249"/>
  <rect x="282" y="796" width="96" height="66" rx="14" transform="rotate(18 330 829)"  fill="url(#steelUS)" stroke="#3a4249"/>
  <rect x="522" y="796" width="96" height="66" rx="14" transform="rotate(-18 570 829)" fill="url(#steelUS)" stroke="#3a4249"/>

  <!-- crown -->
  <path d="M830 458 Q804 500 830 542 L818 542 Q790 500 818 458 Z" fill="url(#steelUS)" stroke="#39414a"/>
  <rect x="822" y="480" width="20" height="40" fill="url(#crownGrad)" stroke="#39414a"/>
  <rect x="838" y="464" width="44" height="72" rx="13" fill="url(#crownGrad)" stroke="#39414a"/>
  <g stroke="#4b545c" stroke-width="2.2" opacity=".75">
    <line x1="846" y1="469" x2="846" y2="531"/>
    <line x1="853" y1="468" x2="853" y2="532"/>
    <line x1="860" y1="468" x2="860" y2="532"/>
    <line x1="867" y1="468" x2="867" y2="532"/>
    <line x1="874" y1="469" x2="874" y2="531"/>
  </g>
  <rect x="880" y="470" width="9" height="60" rx="4.5" fill="#cbd2d8" stroke="#39414a"/>

  <!-- ============ CASE ============ -->
  <circle cx="450" cy="500" r="380" fill="url(#steelUS)"/>
  <circle cx="450" cy="500" r="379" fill="none" stroke="#0e1216" stroke-opacity=".55" stroke-width="2"/>
  <circle cx="450" cy="500" r="366" fill="#151a1f"/>

  <!-- fluted bezel -->
  <circle cx="450" cy="500" r="343" fill="none" stroke="#454e56" stroke-width="42"/>
  <circle cx="450" cy="500" r="343" fill="none" stroke="#e8edf1" stroke-width="42" stroke-dasharray="20.35 15.57"/>
  <circle cx="450" cy="500" r="343" fill="none" stroke="#a8b1b9" stroke-width="42" stroke-dasharray="10.78 25.14" stroke-dashoffset="-4.8"/>
  <circle cx="450" cy="500" r="343" fill="none" stroke="#232a30" stroke-width="42" stroke-dasharray="3.2 32.72" stroke-dashoffset="-18.5" opacity=".85"/>
  <circle cx="450" cy="500" r="343" fill="none" stroke="url(#steelUS)" stroke-width="42" opacity=".28"/>
  <circle cx="450" cy="500" r="364" fill="none" stroke="#f4f7f9" stroke-opacity=".7" stroke-width="2"/>
  <circle cx="450" cy="500" r="322" fill="none" stroke="#0a0e12" stroke-width="4" opacity=".9"/>

  <!-- ============ DIAL ============ -->
  <circle cx="450" cy="500" r="320" fill="url(#dialGrad)"/>
  <g clip-path="url(#dialClip)">
    <g id="sunburst"></g>
    <circle cx="450" cy="500" r="56" fill="#ffffff" opacity=".03"/>
    <circle cx="450" cy="500" r="312" fill="none" stroke="#04101e" stroke-width="20" opacity=".5" filter="url(#blur6)"/>
    <circle cx="450" cy="500" r="301" fill="none" stroke="#e6ecf1" stroke-opacity=".14" stroke-width="1"/>
    <circle cx="450" cy="500" r="318.5" fill="none" stroke="#e6ecf1" stroke-opacity=".14" stroke-width="1"/>
    <g id="ticks"></g>
    <g id="indices" filter="url(#idxShadow)"></g>

    <!-- brand & dial text -->
    <path d="M432 303 L436 285 L444 298 L450 282 L456 298 L464 285 L468 303 Z" fill="#e8e3d2"/>
    <rect x="432" y="305" width="36" height="4" rx="2" fill="#e8e3d2"/>
    <text x="450" y="342" text-anchor="middle" font-family="'Palatino Linotype', Palatino, Georgia, serif"
          font-size="33" style="letter-spacing:7px" fill="#e8e3d2">AURELIAN</text>
    <text x="450" y="366" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif"
          font-size="12" style="letter-spacing:5px" fill="#b9c3cb">GENÈVE</text>
    <text x="450" y="652" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif"
          font-size="15" style="letter-spacing:4px" fill="#cdd6dd">AUTOMATIC</text>
    <text x="450" y="676" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif"
          font-size="12" style="letter-spacing:4px" fill="#9fb0bc">CHRONOMETER</text>
    <text x="450" y="795" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif"
          font-size="11" style="letter-spacing:3px" fill="#a7b3bd" opacity=".85">SWISS MADE</text>

    <!-- date window at 3 o'clock -->
    <g filter="url(#dateShadow)">
      <rect x="652" y="464" width="92" height="72" rx="9" fill="url(#frameGrad)" stroke="#2c3339" stroke-width="1.2"/>
    </g>
    <rect x="659" y="471" width="78" height="58" rx="5" fill="url(#dateBg)" stroke="#8f9296" stroke-width=".8"/>
    <rect x="659" y="471" width="78" height="58" rx="5" fill="url(#wellShadow)"/>
    <text id="dateNum" x="698" y="501" text-anchor="middle" dy=".35em"
          font-family="Georgia, 'Times New Roman', serif" font-size="40" font-weight="600" fill="#191c20">–</text>
  </g>

  <!-- ============ HANDS ============ -->
  <g transform="translate(450 500)" filter="url(#handShadow)">
    <g id="hourRot">
      <polygon points="0,-185 -13,-28 -7,52 0,52" fill="url(#handL)"/>
      <polygon points="0,-185 13,-28 7,52 0,52" fill="url(#handR)"/>
      <polygon points="0,-158 -5.5,-32 -3.6,30 3.6,30 5.5,-32" fill="#f2eedd" opacity=".92"/>
      <polygon points="0,-185 13,-28 7,52 -7,52 -13,-28" fill="none" stroke="#333b42" stroke-width="1"/>
    </g>
  </g>
  <g transform="translate(450 500)" filter="url(#handShadow)">
    <g id="minRot">
      <polygon points="0,-288 -10,-43 -6,58 0,58" fill="url(#handL)"/>
      <polygon points="0,-288 10,-43 6,58 0,58" fill="url(#handR)"/>
      <polygon points="0,-256 -4.6,-46 -3,38 3,38 4.6,-46" fill="#f2eedd" opacity=".92"/>
      <polygon points="0,-288 10,-43 6,58 -6,58 -10,-43" fill="none" stroke="#333b42" stroke-width="1"/>
    </g>
  </g>
  <g transform="translate(450 500)" filter="url(#secShadow)">
    <g id="secRot">
      <polygon points="0,-312 1.7,-296 -1.7,-296" fill="#e4e9ee"/>
      <polygon points="-1.7,-296 1.7,-296 1.1,74 -1.1,74" fill="#e4e9ee" stroke="#4a545c" stroke-width=".6"/>
      <circle cx="0" cy="-264" r="5" fill="#f2eedd" stroke="#8b8574" stroke-width=".8"/>
      <circle cx="0" cy="84" r="12" fill="url(#capGrad)" stroke="#3f474e" stroke-width="1"/>
    </g>
  </g>
  <circle cx="450" cy="500" r="13.5" fill="url(#capGrad)" stroke="#333b42" stroke-width="1.2"/>
  <circle cx="450" cy="500" r="3" fill="#1f252a"/>
  <path d="M441 496 A 10 10 0 0 1 452 488" stroke="#ffffff" stroke-opacity=".7" stroke-width="2" fill="none" stroke-linecap="round"/>

  <!-- ============ CRYSTAL GLARE & CASE LIGHT ============ -->
  <g clip-path="url(#crystalClip)">
    <ellipse cx="330" cy="300" rx="330" ry="215" transform="rotate(-24 330 300)" fill="url(#glare1)"/>
    <ellipse cx="585" cy="735" rx="190" ry="120" transform="rotate(-24 585 735)" fill="url(#glare1)" opacity=".35"/>
    <path d="M166 397 A 302 302 0 0 1 398 202" stroke="#ffffff" stroke-opacity=".18" stroke-width="5" fill="none" stroke-linecap="round" filter="url(#blur2)"/>
  </g>
  <path d="M96.7 628.6 A 376 376 0 0 1 321.4 146.6" stroke="#ffffff" stroke-opacity=".3" stroke-width="3" fill="none" stroke-linecap="round" filter="url(#blur2)"/>
  <path d="M803.3 371.4 A 376 376 0 0 1 578.6 853.4" stroke="#000000" stroke-opacity=".35" stroke-width="5" fill="none" stroke-linecap="round" filter="url(#blur2)"/>
</svg>
</div>

<script>
(function(){
  "use strict";
  var NS = 'http://www.w3.org/2000/svg';
  var CX = 450, CY = 500;

  function el(name, attrs, parent){
    var e = document.createElementNS(NS, name);
    for (var k in attrs) e.setAttribute(k, attrs[k]);
    parent.appendChild(e);
    return e;
  }

  /* ---- sunburst brushing on the dial ---- */
  var sb = document.getElementById('sunburst');
  for (var i = 0; i < 240; i++){
    var a = i * 1.5 * Math.PI / 180, s = Math.sin(a), c = Math.cos(a);
    el('line', {
      x1: CX + s*46,  y1: CY - c*46,
      x2: CX + s*318, y2: CY - c*318,
      stroke: (i % 2) ? '#000000' : '#ffffff',
      'stroke-opacity': (i % 2) ? .05 : .045,
      'stroke-width': 1
    }, sb);
  }

  /* ---- minute track ---- */
  var ticks = document.getElementById('ticks');
  for (var m = 0; m < 60; m++){
    var ta = m * 6 * Math.PI / 180, ts = Math.sin(ta), tc = Math.cos(ta);
    var isHour = (m % 5 === 0);
    var r1 = isHour ? 302 : 309, r2 = 318;
    el('line', {
      x1: CX + ts*r1, y1: CY - tc*r1,
      x2: CX + ts*r2, y2: CY - tc*r2,
      stroke: isHour ? '#e8edf1' : '#aeb9c2',
      'stroke-width': isHour ? 3.6 : 1.6,
      'stroke-opacity': isHour ? .95 : .8
    }, ticks);
  }

  /* ---- applied indices (drawn pointing up, then rotated) ---- */
  var indices = document.getElementById('indices');
  function baton(g, dx){
    var outer = (dx-8)+',-271 '+(dx+8)+',-271 '+(dx+5)+',-225 '+(dx-5)+',-225';
    el('polygon', {points: outer, fill:'url(#idxGrad)', stroke:'#31383f', 'stroke-width':.8}, g);
    el('polygon', {points: outer, fill:'url(#idxLen)'}, g);
    el('polygon', {points:(dx-3.4)+',-262 '+(dx+3.4)+',-262 '+(dx+2.4)+',-234 '+(dx-2.4)+',-234',
                   fill:'#f2eedd', opacity:.95}, g);
  }
  for (var h = 0; h < 12; h++){
    if (h === 3) continue; /* date window lives here */
    var g = el('g', {transform:'translate(450 500) rotate(' + (h*30) + ')'}, indices);
    if (h === 0){ baton(g, -15); baton(g, 15); }
    else { baton(g, 0); }
  }

  /* ---- live time with a true sweeping seconds hand ---- */
  var hourRot = document.getElementById('hourRot');
  var minRot  = document.getElementById('minRot');
  var secRot  = document.getElementById('secRot');
  var dateNum = document.getElementById('dateNum');
  var lastDate = -1;

  function tick(){
    var now = new Date();
    var s = now.getSeconds() + now.getMilliseconds() / 1000;  /* smooth sweep */
    var m = now.getMinutes() + s / 60;
    var h = (now.getHours() % 12) + m / 60;
    secRot.setAttribute('transform',  'rotate(' + (s * 6)  + ')');
    minRot.setAttribute('transform',  'rotate(' + (m * 6)  + ')');
    hourRot.setAttribute('transform', 'rotate(' + (h * 30) + ')');
    var d = now.getDate();
    if (d !== lastDate){ lastDate = d; dateNum.textContent = d; }
    requestAnimationFrame(tick);
  }
  tick();
})();
</script>
</body>
</html>

Compare with

Ember-1Kimi K3.1 ProGemini 4 Argon

Kimi K3: other attempts