hypeorcode
Wristwatch that shows the current time

MiMo v2.6 ProXiaomi

Network offOpen alone

Run details

Model
xiaomi/mimo-v2.6-pro
Route
OpenRouter API, one user message
Reasoning
provider default, 21,152 reasoning tokens
Limits
60 min · 131,072 output tokens
Date
21 Oct 2026
Time
7 min 54 s
Size
17 kB
Tokens
82 in, 28,326 out
List price
$0.025 ($0.435 in / $0.87 out per M)
Paid
$0.022

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 400 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Aurore — Mechanical Wristwatch</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:radial-gradient(125% 105% at 50% 18%, #2b2e33 0%, #191a1e 42%, #0a0b0d 100%);
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    font-family:Georgia,"Times New Roman",Times,serif;
  }
  .stage{width:min(92vw,74vh);aspect-ratio:3 / 4}
  svg#watch{width:100%;height:100%;display:block}
</style>
</head>
<body>

<div class="stage">
<svg id="watch" viewBox="0 0 720 960" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Luxury mechanical wristwatch showing local time">
  <title>Aurore Manufacture — mechanical wristwatch</title>

  <defs>
    <radialGradient id="backdrop" cx="50%" cy="38%" r="80%">
      <stop offset="0" stop-color="#2c2f35"/>
      <stop offset="0.55" stop-color="#181a1e"/>
      <stop offset="1" stop-color="#0a0b0d"/>
    </radialGradient>

    <radialGradient id="halo" cx="50%" cy="50%" r="50%">
      <stop offset="0" stop-color="#d9b25c" stop-opacity="0.20"/>
      <stop offset="0.55" stop-color="#d9b25c" stop-opacity="0.06"/>
      <stop offset="1" stop-color="#d9b25c" stop-opacity="0"/>
    </radialGradient>

    <linearGradient id="goldMain" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#5c4214"/>
      <stop offset="0.10" stop-color="#d8b45c"/>
      <stop offset="0.22" stop-color="#fff2c2"/>
      <stop offset="0.34" stop-color="#c69a34"/>
      <stop offset="0.48" stop-color="#7d5a1c"/>
      <stop offset="0.62" stop-color="#f2dd9c"/>
      <stop offset="0.76" stop-color="#c8992f"/>
      <stop offset="0.90" stop-color="#6b4c17"/>
      <stop offset="1" stop-color="#e6c67a"/>
    </linearGradient>

    <radialGradient id="goldRadial" cx="34%" cy="18%" r="90%">
      <stop offset="0" stop-color="#fff6d6"/>
      <stop offset="0.20" stop-color="#edd18a"/>
      <stop offset="0.46" stop-color="#c39630"/>
      <stop offset="0.72" stop-color="#8a6522"/>
      <stop offset="0.90" stop-color="#d7b055"/>
      <stop offset="1" stop-color="#77541a"/>
    </radialGradient>

    <linearGradient id="goldPolish" x1="0" y1="0" x2="0.35" y2="1">
      <stop offset="0" stop-color="#fff9e2"/>
      <stop offset="0.33" stop-color="#e2bd68"/>
      <stop offset="0.62" stop-color="#8c6a24"/>
      <stop offset="1" stop-color="#eed48f"/>
    </linearGradient>

    <linearGradient id="goldIndex" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#fff7d8"/>
      <stop offset="0.38" stop-color="#e2c072"/>
      <stop offset="0.72" stop-color="#b2882e"/>
      <stop offset="1" stop-color="#6f4f16"/>
    </linearGradient>

    <linearGradient id="goldHand" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#fff9e2"/>
      <stop offset="0.45" stop-color="#e3c274"/>
      <stop offset="1" stop-color="#7c5a1a"/>
    </linearGradient>

    <linearGradient id="blueSteel" x1="0" y1="0" x2="1" y2="0.25">
      <stop offset="0" stop-color="#06122c"/>
      <stop offset="0.18" stop-color="#2c59ab"/>
      <stop offset="0.42" stop-color="#93b6f2"/>
      <stop offset="0.58" stop-color="#2f5cb0"/>
      <stop offset="0.82" stop-color="#081a3c"/>
      <stop offset="1" stop-color="#2b57a5"/>
    </linearGradient>

    <radialGradient id="dialGrad" cx="46%" cy="34%" r="78%">
      <stop offset="0" stop-color="#2d5190"/>
      <stop offset="0.36" stop-color="#1c3767"/>
      <stop offset="0.72" stop-color="#102348"/>
      <stop offset="1" stop-color="#05102a"/>
    </radialGradient>

    <radialGradient id="dialShade" cx="50%" cy="46%" r="52%">
      <stop offset="0.60" stop-color="#000000" stop-opacity="0"/>
      <stop offset="0.86" stop-color="#000814" stop-opacity="0.30"/>
      <stop offset="1" stop-color="#000814" stop-opacity="0.75"/>
    </radialGradient>

    <linearGradient id="ivory" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#fffdf8"/>
      <stop offset="0.55" stop-color="#f4eee3"/>
      <stop offset="1" stop-color="#dbd2c1"/>
    </linearGradient>

    <linearGradient id="sheen" x1="0" y1="0" x2="0.75" y2="1">
      <stop offset="0" stop-color="#ffffff" stop-opacity="0.32"/>
      <stop offset="0.30" stop-color="#ffffff" stop-opacity="0.07"/>
      <stop offset="0.62" stop-color="#ffffff" stop-opacity="0.015"/>
      <stop offset="1" stop-color="#ffffff" stop-opacity="0.13"/>
    </linearGradient>

    <linearGradient id="leather" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#140b06"/>
      <stop offset="0.14" stop-color="#3d2415"/>
      <stop offset="0.38" stop-color="#6b422a"/>
      <stop offset="0.55" stop-color="#7c4f31"/>
      <stop offset="0.80" stop-color="#402616"/>
      <stop offset="1" stop-color="#120a05"/>
    </linearGradient>

    <pattern id="grain" width="9" height="9" patternUnits="userSpaceOnUse" patternTransform="rotate(28)">
      <line x1="0" y1="0" x2="0" y2="9" stroke="#000000" stroke-width="1.7" opacity="0.17"/>
      <line x1="4.5" y1="0" x2="4.5" y2="9" stroke="#ffffff" stroke-width="0.9" opacity="0.05"/>
    </pattern>

    <clipPath id="dialClip"><circle cx="360" cy="480" r="222"/></clipPath>
    <clipPath id="crystalClip"><circle cx="360" cy="480" r="223"/></clipPath>
    <clipPath id="strapClip">
      <path d="M265 -12 C261 90, 256 190, 252 268 L468 268 C464 190, 459 90, 455 -12 Z"/>
      <path d="M265 972 C261 870, 256 770, 252 692 L468 692 C464 770, 459 870, 455 972 Z"/>
    </clipPath>

    <filter id="bigShadow" x="-45%" y="-45%" width="190%" height="190%">
      <feDropShadow dx="0" dy="26" stdDeviation="26" flood-color="#000000" flood-opacity="0.72"/>
    </filter>
    <filter id="blur18"><feGaussianBlur stdDeviation="18"/></filter>
    <filter id="blur10"><feGaussianBlur stdDeviation="10"/></filter>
    <filter id="blur4"><feGaussianBlur stdDeviation="4"/></filter>
  </defs>

  <!-- backdrop -->
  <rect width="720" height="960" fill="url(#backdrop)"/>
  <ellipse cx="360" cy="500" rx="345" ry="435" fill="url(#halo)"/>

  <!-- strap -->
  <g id="strap">
    <path d="M265 -12 C261 90, 256 190, 252 268 L468 268 C464 190, 459 90, 455 -12 Z" fill="url(#leather)"/>
    <path d="M265 972 C261 870, 256 770, 252 692 L468 692 C464 770, 459 870, 455 972 Z" fill="url(#leather)"/>
    <g clip-path="url(#strapClip)">
      <rect x="0" y="0" width="720" height="960" fill="url(#grain)"/>
      <path d="M279 -12 C275 90, 270 190, 266 268" fill="none" stroke="#c99b62" stroke-width="3.2" stroke-dasharray="13 11" opacity="0.5"/>
      <path d="M441 -12 C445 90, 450 190, 454 268" fill="none" stroke="#c99b62" stroke-width="3.2" stroke-dasharray="13 11" opacity="0.5"/>
      <path d="M279 972 C275 870, 270 770, 266 692" fill="none" stroke="#c99b62" stroke-width="3.2" stroke-dasharray="13 11" opacity="0.5"/>
      <path d="M441 972 C445 870, 450 770, 454 692" fill="none" stroke="#c99b62" stroke-width="3.2" stroke-dasharray="13 11" opacity="0.5"/>
      <path d="M360 -12 L360 268" stroke="#ffffff" stroke-width="46" opacity="0.05"/>
      <path d="M360 692 L360 972" stroke="#ffffff" stroke-width="46" opacity="0.05"/>
    </g>
  </g>

  <!-- shadow cast by the case onto the strap -->
  <ellipse cx="360" cy="506" rx="300" ry="288" fill="#000000" opacity="0.36" filter="url(#blur18)"/>

  <!-- lugs -->
  <g id="lugs" filter="url(#bigShadow)" fill="url(#goldMain)">
    <rect x="258" y="172" width="58" height="156" rx="27" transform="rotate(-7 287 250)"/>
    <rect x="404" y="172" width="58" height="156" rx="27" transform="rotate(7 433 250)"/>
    <rect x="258" y="632" width="58" height="156" rx="27" transform="rotate(7 287 710)"/>
    <rect x="404" y="632" width="58" height="156" rx="27" transform="rotate(-7 433 710)"/>
  </g>

  <!-- crown -->
  <g id="crown">
    <rect x="594" y="462" width="28" height="36" rx="5" fill="url(#goldMain)"/>
    <rect x="612" y="450" width="42" height="60" rx="8" fill="url(#goldRadial)" stroke="#3a2709" stroke-width="1.6"/>
    <g stroke="#4b3413" stroke-width="1.7" opacity="0.5">
      <line x1="620" y1="457" x2="620" y2="503"/>
      <line x1="627" y1="457" x2="627" y2="503"/>
      <line x1="634" y1="457" x2="634" y2="503"/>
      <line x1="641" y1="457" x2="641" y2="503"/>
      <line x1="648" y1="457" x2="648" y2="503"/>
    </g>
    <rect x="644" y="455" width="7" height="50" rx="3" fill="#fff3c9" opacity="0.30"/>
  </g>

  <!-- case -->
  <g id="case">
    <circle cx="360" cy="480" r="252" fill="url(#goldMain)"/>
    <circle cx="360" cy="480" r="251" fill="none" stroke="#2a1c07" stroke-width="2.5" opacity="0.55"/>
    <circle cx="360" cy="480" r="238" fill="none" stroke="url(#goldRadial)" stroke-width="26"/>
    <circle cx="360" cy="480" r="225.5" fill="none" stroke="url(#goldPolish)" stroke-width="6"/>
    <circle cx="360" cy="480" r="222.5" fill="none" stroke="#0b1226" stroke-width="3" opacity="0.85"/>
  </g>

  <!-- dial -->
  <g id="dial">
    <circle cx="360" cy="480" r="222" fill="url(#dialGrad)"/>

    <g clip-path="url(#dialClip)">
      <path id="sunburst" fill="none" stroke="#efd59a" stroke-width="1.3" opacity="0.055"/>
      <path id="guilloche" fill="none" stroke="#cfe2ff" stroke-width="1" opacity="0.05"/>
      <ellipse cx="296" cy="352" rx="215" ry="185" fill="#86ade9" opacity="0.11" filter="url(#blur18)"/>
    </g>

    <circle cx="360" cy="480" r="222" fill="url(#dialShade)"/>

    <!-- minute track -->
    <path id="ticksMinor" fill="none" stroke="#d8c290" stroke-width="1.9" opacity="0.85" stroke-linecap="butt"/>
    <path id="ticksMajor" fill="none" stroke="#f0dcae" stroke-width="3.4" opacity="0.95" stroke-linecap="butt"/>

    <!-- applied hour markers -->
    <g id="indices"></g>

    <!-- dial text -->
    <g text-anchor="middle" font-family="Georgia, 'Times New Roman', Times, serif">
      <text x="364.5" y="382" font-size="27" letter-spacing="9" fill="#f2e2b8">AURORE</text>
      <text x="362.3" y="409" font-size="10.5" letter-spacing="4.5" fill="#c9b287">MANUFACTURE</text>
      <text x="362" y="562" font-size="11" letter-spacing="4" fill="#c9b287">CHRONOMÈTRE</text>
      <text x="361.8" y="593" font-size="9.5" letter-spacing="3.5" fill="#a3906c">AUTOMATIC</text>
    </g>

    <!-- date window -->
    <g id="dateWindow">
      <rect x="472" y="452" width="76" height="56" rx="5" fill="#02101f" opacity="0.55"/>
      <rect x="475" y="455" width="70" height="50" rx="3" fill="url(#ivory)"/>
      <rect x="475" y="455" width="70" height="50" rx="3" fill="none" stroke="url(#goldIndex)" stroke-width="3.6"/>
      <rect x="479" y="459" width="62" height="42" rx="2" fill="none" stroke="#8b7f66" stroke-width="1" opacity="0.55"/>
      <text id="dateText" x="510" y="481" text-anchor="middle" dominant-baseline="central"
            font-family="Georgia, 'Times New Roman', Times, serif" font-size="31" fill="#232830">12</text>
    </g>
  </g>

  <!-- hand shadows -->
  <g id="handShadows" transform="translate(7,11)" opacity="0.42" fill="#020c1c">
    <g id="hourShadow">
      <path d="M0,-112 L9,-42 L5.5,26 L0,50 L-5.5,26 L-9,-42 Z"/>
    </g>
    <g id="minShadow">
      <path d="M0,-176 L11,-46 L6.5,30 L0,56 L-6.5,30 L-11,-46 Z"/>
    </g>
    <g id="secShadow">
      <path d="M0,-196 L2.2,-196 L2.2,58 L-2.2,58 L-2.2,-196 Z"/>
      <circle cx="0" cy="42" r="9"/>
    </g>
  </g>

  <!-- hands -->
  <g id="hands">
    <g id="hourHand">
      <path d="M0,-112 L9,-42 L5.5,26 L0,50 L-5.5,26 L-9,-42 Z" fill="url(#goldHand)" stroke="#2c1e08" stroke-width="1" stroke-opacity="0.5"/>
      <path d="M0,-112 L9,-42 L0,-33 Z" fill="#fff8de" opacity="0.38"/>
      <path d="M0,-96 L3.2,-48 L2.3,10 L0,20 L-2.3,10 L-3.2,-48 Z" fill="#f2ead0" opacity="0.85"/>
    </g>

    <g id="minHand">
      <path d="M0,-176 L11,-46 L6.5,30 L0,56 L-6.5,30 L-11,-46 Z" fill="url(#goldHand)" stroke="#2c1e08" stroke-width="1" stroke-opacity="0.5"/>
      <path d="M0,-176 L11,-46 L0,-37 Z" fill="#fff8de" opacity="0.38"/>
      <path d="M0,-158 L4,-54 L2.7,14 L0,26 L-2.7,14 L-4,-54 Z" fill="#f2ead0" opacity="0.85"/>
    </g>

    <g id="secHand">
      <line x1="0" y1="-196" x2="0" y2="58" stroke="url(#blueSteel)" stroke-width="3.2" stroke-linecap="round"/>
      <circle cx="0" cy="42" r="9.5" fill="url(#blueSteel)"/>
      <circle cx="0" cy="42" r="3.2" fill="#e8d6a2" opacity="0.55"/>
      <circle cx="0" cy="-178" r="5.5" fill="url(#blueSteel)"/>
      <circle cx="0" cy="-178" r="2" fill="#e8d6a2" opacity="0.5"/>
    </g>

    <circle cx="360" cy="480" r="11" fill="url(#goldHand)"/>
    <circle cx="360" cy="480" r="4.6" fill="#0b1730"/>
    <circle cx="357" cy="477" r="2" fill="#fff6d5" opacity="0.5"/>
  </g>

  <!-- crystal -->
  <g id="crystal" clip-path="url(#crystalClip)">
    <ellipse cx="272" cy="326" rx="118" ry="252" transform="rotate(-32 272 326)" fill="url(#sheen)" opacity="0.75" filter="url(#blur10)"/>
    <ellipse cx="476" cy="648" rx="88" ry="168" transform="rotate(-32 476 648)" fill="url(#sheen)" opacity="0.32" filter="url(#blur18)"/>
    <path d="M170 618 C242 692 424 708 546 632" fill="none" stroke="#ffffff" stroke-width="32" opacity="0.055" filter="url(#blur18)"/>
    <path d="M166 592 A224 224 0 0 1 283.4 269.5" fill="none" stroke="#ffffff" stroke-width="3" opacity="0.32" stroke-linecap="round"/>
    <path d="M570.5 556.6 A224 224 0 0 1 398.9 700.6" fill="none" stroke="#000814" stroke-width="9" opacity="0.28" stroke-linecap="round" filter="url(#blur4)"/>
    <path d="M232 306 A224 224 0 0 1 452 276" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.18" stroke-linecap="round"/>
  </g>
</svg>
</div>

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

  var NS = "http://www.w3.org/2000/svg";
  var CX = 360, CY = 480;

  function pt(r, deg) {
    var a = (deg - 90) * Math.PI / 180;
    return [CX + r * Math.cos(a), CY + r * Math.sin(a)];
  }
  function f(n) { return Math.round(n * 100) / 100; }

  /* ---------- sunburst guilloché ---------- */
  var d = "", i, p, r;
  for (i = 0; i < 240; i++) {
    p = pt(222, i * 1.5);
    d += "M" + CX + " " + CY + "L" + f(p[0]) + " " + f(p[1]);
  }
  document.getElementById("sunburst").setAttribute("d", d);

  /* ---------- concentric engine-turned rings ---------- */
  d = "";
  for (r = 10; r <= 222; r += 6) {
    d += "M" + f(CX - r) + " " + CY +
         "a" + r + " " + r + " 0 1 0 " + (2 * r) + " 0" +
         "a" + r + " " + r + " 0 1 0 " + (-2 * r) + " 0";
  }
  document.getElementById("guilloche").setAttribute("d", d);

  /* ---------- minute track ---------- */
  var minor = "", major = "";
  for (i = 0; i < 60; i++) {
    var isMajor = (i % 5 === 0);
    var a1 = pt(isMajor ? 186 : 196, i * 6);
    var a2 = pt(210, i * 6);
    var seg = "M" + f(a1[0]) + " " + f(a1[1]) + "L" + f(a2[0]) + " " + f(a2[1]);
    if (isMajor) { major += seg; } else { minor += seg; }
  }
  document.getElementById("ticksMinor").setAttribute("d", minor);
  document.getElementById("ticksMajor").setAttribute("d", major);

  /* ---------- applied hour markers ---------- */
  var idxG = document.getElementById("indices");
  for (i = 0; i < 12; i++) {
    if (i === 3) { continue; }              /* date aperture at 3 o'clock */
    var ang = i * 30;
    var offs = (i === 0) ? [-11, 11] : [0]; /* double baton at 12 */
    for (var k = 0; k < offs.length; k++) {
      var off = offs[k];

      var sh = document.createElementNS(NS, "rect");
      sh.setAttribute("x", CX + off - 4);
      sh.setAttribute("y", CY - 190);
      sh.setAttribute("width", 8);
      sh.setAttribute("height", 50);
      sh.setAttribute("rx", 2.5);
      sh.setAttribute("fill", "#02101f");
      sh.setAttribute("opacity", "0.45");
      sh.setAttribute("transform", "translate(2.5,4) rotate(" + ang + " " + CX + " " + CY + ")");
      idxG.appendChild(sh);

      var mr = document.createElementNS(NS, "rect");
      mr.setAttribute("x", CX + off - 4);
      mr.setAttribute("y", CY - 192);
      mr.setAttribute("width", 8);
      mr.setAttribute("height", 52);
      mr.setAttribute("rx", 2.5);
      mr.setAttribute("fill", "url(#goldIndex)");
      mr.setAttribute("transform", "rotate(" + ang + " " + CX + " " + CY + ")");
      idxG.appendChild(mr);
    }
  }

  /* ---------- movement ---------- */
  var hourHand = document.getElementById("hourHand"),
      minHand  = document.getElementById("minHand"),
      secHand  = document.getElementById("secHand"),
      hourSh   = document.getElementById("hourShadow"),
      minSh    = document.getElementById("minShadow"),
      secSh    = document.getElementById("secShadow"),
      dateText = document.getElementById("dateText");

  function setRot(el, deg) {
    el.setAttribute("transform", "rotate(" + deg + " " + CX + " " + CY + ")");
  }

  var lastDay = -1;

  function frame() {
    var now = new Date();
    var s = now.getSeconds() + now.getMilliseconds() / 1000;
    var m = now.getMinutes() + s / 60;
    var h = (now.getHours() % 12) + m / 60;

    setRot(hourHand, h * 30);  setRot(hourSh, h * 30);
    setRot(minHand,  m * 6);   setRot(minSh,  m * 6);
    setRot(secHand,  s * 6);   setRot(secSh,  s * 6);

    var day = now.getDate();
    if (day !== lastDay) {
      lastDay = day;
      dateText.textContent = (day < 10 ? "0" : "") + day;
    }

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
})();
</script>

</body>
</html>

Compare with

Beam 1.0DeepSeek V4.1 Flash 1017MiniMax M3

MiMo v2.6 Pro: other attempts