hypeorcode
Wristwatch that shows the current time

DeepSeek V4.1 FlashDeepSeek

Network offOpen alone

Run details

Model
deepseek/deepseek-v4.1-flash
Route
OpenRouter API, one user message
Reasoning
provider default, 21,980 reasoning tokens
Limits
60 min · 943,718 output tokens
Date
21 Oct 2026
Time
3 min 14 s
Size
14 kB
Tokens
105 in, 27,244 out
List price
$0.010 ($0.049 in / $0.375 out per M)
Paid
$0.033

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

14 kB 387 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Aurelius — Automatic</title>
<style>
  html, body { height: 100%; margin: 0; }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(ellipse 62% 52% at 50% 34%, #3b414a 0%, #1b1f25 38%, #0b0d10 72%, #050607 100%);
    overflow: hidden;
  }
  .stage {
    width: min(90vmin, 430px);
    filter: drop-shadow(0 28px 48px rgba(0, 0, 0, .85));
  }
  svg { display: block; width: 100%; height: auto; }
</style>
</head>
<body>

<div class="stage">
<svg viewBox="0 0 400 560" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- ============ METALS ============ -->
    <linearGradient id="caseGold" x1="0.05" y1="0" x2="0.95" y2="1">
      <stop offset="0"    stop-color="#fff6d8"/>
      <stop offset="0.13" stop-color="#e8cb84"/>
      <stop offset="0.27" stop-color="#a17a29"/>
      <stop offset="0.40" stop-color="#f7e6b3"/>
      <stop offset="0.53" stop-color="#c9a04a"/>
      <stop offset="0.67" stop-color="#7d5a15"/>
      <stop offset="0.80" stop-color="#e6c87c"/>
      <stop offset="0.92" stop-color="#b8902f"/>
      <stop offset="1"    stop-color="#f3e2ae"/>
    </linearGradient>

    <linearGradient id="innerGold" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0"   stop-color="#fbeec8"/>
      <stop offset="0.5" stop-color="#a8832f"/>
      <stop offset="1"   stop-color="#f2dda6"/>
    </linearGradient>

    <linearGradient id="markerGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0"    stop-color="#7c5a16"/>
      <stop offset="0.22" stop-color="#e9cf8d"/>
      <stop offset="0.45" stop-color="#c39a3f"/>
      <stop offset="0.62" stop-color="#fff3cd"/>
      <stop offset="0.82" stop-color="#c8a04a"/>
      <stop offset="1"    stop-color="#6f4f11"/>
    </linearGradient>

    <linearGradient id="handLight" x1="0" y1="0" x2="1" y2="0.6">
      <stop offset="0"    stop-color="#fff4d0"/>
      <stop offset="0.45" stop-color="#e3c47b"/>
      <stop offset="1"    stop-color="#a67d24"/>
    </linearGradient>

    <linearGradient id="handDark" x1="1" y1="0" x2="0" y2="0.6">
      <stop offset="0"    stop-color="#a47c28"/>
      <stop offset="0.5"  stop-color="#7d5a15"/>
      <stop offset="1"    stop-color="#c9a24a"/>
    </linearGradient>

    <!-- ============ DIAL ============ -->
    <radialGradient id="dialGrad" cx="50%" cy="42%" r="62%">
      <stop offset="0%"   stop-color="#2a4364"/>
      <stop offset="40%"  stop-color="#152440"/>
      <stop offset="78%"  stop-color="#0b1220"/>
      <stop offset="100%" stop-color="#04070d"/>
    </radialGradient>

    <radialGradient id="sunFade" cx="50%" cy="50%" r="50%">
      <stop offset="0"    stop-color="#000000"/>
      <stop offset="0.22" stop-color="#3a3a3a"/>
      <stop offset="0.62" stop-color="#d8d8d8"/>
      <stop offset="1"    stop-color="#ffffff"/>
    </radialGradient>

    <mask id="sunMask">
      <rect x="74" y="154" width="252" height="252" fill="url(#sunFade)"/>
    </mask>

    <clipPath id="dialClip">
      <circle cx="200" cy="280" r="126"/>
    </clipPath>

    <linearGradient id="glare" x1="0" y1="0" x2="0.65" y2="1">
      <stop offset="0"    stop-color="#ffffff" stop-opacity="0.17"/>
      <stop offset="0.30" stop-color="#ffffff" stop-opacity="0.02"/>
      <stop offset="0.55" stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="0.78" stop-color="#ffffff" stop-opacity="0.05"/>
      <stop offset="1"    stop-color="#ffffff" stop-opacity="0"/>
    </linearGradient>

    <!-- ============ LEATHER ============ -->
    <linearGradient id="leather" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0"    stop-color="#1a0f0b"/>
      <stop offset="0.16" stop-color="#3d2418"/>
      <stop offset="0.42" stop-color="#5b3725"/>
      <stop offset="0.58" stop-color="#5b3725"/>
      <stop offset="0.84" stop-color="#3d2418"/>
      <stop offset="1"    stop-color="#1a0f0b"/>
    </linearGradient>

    <!-- ============ FILTERS ============ -->
    <filter id="caseShadow" filterUnits="userSpaceOnUse"
            x="10" y="60" width="380" height="470">
      <feDropShadow dx="0" dy="16" stdDeviation="15"
                    flood-color="#000000" flood-opacity="0.78"/>
    </filter>

    <filter id="handShadow" filterUnits="userSpaceOnUse"
            x="70" y="150" width="260" height="260">
      <feDropShadow dx="1.6" dy="3" stdDeviation="2"
                    flood-color="#000000" flood-opacity="0.5"/>
    </filter>

    <filter id="winShadow" filterUnits="userSpaceOnUse"
            x="250" y="245" width="80" height="70">
      <feDropShadow dx="0" dy="1.6" stdDeviation="1.4"
                    flood-color="#000000" flood-opacity="0.7"/>
    </filter>
  </defs>

  <!-- ================= STRAPS ================= -->
  <g>
    <path d="M152 0 L248 0 L254 215 L146 215 Z" fill="url(#leather)"/>
    <path d="M146 345 L254 345 L248 560 L152 560 Z" fill="url(#leather)"/>

    <line x1="158" y1="0"   x2="152" y2="215" stroke="#b08a52" stroke-width="1.8"
          stroke-dasharray="8 7" opacity="0.55"/>
    <line x1="242" y1="0"   x2="248" y2="215" stroke="#b08a52" stroke-width="1.8"
          stroke-dasharray="8 7" opacity="0.55"/>
    <line x1="152" y1="345" x2="158" y2="560" stroke="#b08a52" stroke-width="1.8"
          stroke-dasharray="8 7" opacity="0.55"/>
    <line x1="248" y1="345" x2="242" y2="560" stroke="#b08a52" stroke-width="1.8"
          stroke-dasharray="8 7" opacity="0.55"/>
  </g>

  <!-- ================= LUGS ================= -->
  <g fill="url(#caseGold)" stroke="#5f440f" stroke-width="0.9">
    <rect x="118" y="118" width="32" height="74" rx="15" transform="rotate(-16 134 155)"/>
    <rect x="250" y="118" width="32" height="74" rx="15" transform="rotate(16 266 155)"/>
    <rect x="118" y="368" width="32" height="74" rx="15" transform="rotate(16 134 405)"/>
    <rect x="250" y="368" width="32" height="74" rx="15" transform="rotate(-16 266 405)"/>
  </g>

  <!-- ================= CROWN ================= -->
  <g>
    <rect x="344" y="259" width="28" height="42" rx="6"
          fill="url(#caseGold)" stroke="#5f440f" stroke-width="1"/>
    <g stroke="#6b4d12" stroke-width="1.2" opacity="0.65">
      <line x1="349" y1="262" x2="349" y2="298"/>
      <line x1="353" y1="262" x2="353" y2="298"/>
      <line x1="357" y1="262" x2="357" y2="298"/>
      <line x1="361" y1="262" x2="361" y2="298"/>
      <line x1="365" y1="262" x2="365" y2="298"/>
    </g>
    <rect x="344" y="259" width="28" height="42" rx="6"
          fill="none" stroke="#fff3cf" stroke-width="0.7" opacity="0.5"/>
  </g>

  <!-- ================= CASE ================= -->
  <g>
    <!-- outer case body -->
    <circle cx="200" cy="280" r="152" fill="url(#caseGold)" filter="url(#caseShadow)"/>

    <!-- fluted bezel (generated) -->
    <g id="flutes"></g>

    <!-- bezel rim highlights -->
    <circle cx="200" cy="280" r="151" fill="none" stroke="#fff6d8"
            stroke-width="1.4" opacity="0.55"/>
    <circle cx="200" cy="280" r="133" fill="none" stroke="#6b4d12"
            stroke-width="1.2" opacity="0.8"/>

    <!-- polished inner bezel -->
    <circle cx="200" cy="280" r="132" fill="url(#innerGold)"/>

    <!-- crystal gasket -->
    <circle cx="200" cy="280" r="128.5" fill="#04060b"/>

    <!-- dial -->
    <circle cx="200" cy="280" r="126" fill="url(#dialGrad)"/>
    <g id="sunburst" mask="url(#sunMask)" clip-path="url(#dialClip)"></g>

    <!-- minute track -->
    <g id="ticks"></g>

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

    <!-- date window -->
    <g filter="url(#winShadow)">
      <rect x="268" y="263" width="44" height="34" rx="4" fill="url(#caseGold)"/>
      <rect x="268" y="263" width="44" height="34" rx="4" fill="none"
            stroke="#6b4d12" stroke-width="0.9"/>
      <rect x="272" y="267" width="36" height="26" rx="2" fill="#f4efe2"/>
      <rect x="272" y="267" width="36" height="26" rx="2" fill="none"
            stroke="#000000" stroke-opacity="0.22" stroke-width="1"/>
    </g>
    <text id="dateText" x="290" y="287" text-anchor="middle"
          font-family="Georgia, 'Times New Roman', serif" font-size="18"
          fill="#15181d">1</text>

    <!-- dial text -->
    <text x="201" y="216" text-anchor="middle"
          font-family="Georgia, 'Times New Roman', serif" font-size="15"
          letter-spacing="3.2" fill="#e9d29a">AURELIUS</text>
    <text x="200" y="232" text-anchor="middle"
          font-family="Georgia, 'Times New Roman', serif" font-size="6.4"
          letter-spacing="2.6" fill="#b9a374" opacity="0.9">GENÈVE</text>
    <text x="200" y="352" text-anchor="middle"
          font-family="Georgia, 'Times New Roman', serif" font-size="6"
          letter-spacing="2.4" fill="#a99a78" opacity="0.85">SWISS MADE</text>

    <!-- crystal glare -->
    <circle cx="200" cy="280" r="126" fill="url(#glare)"
            clip-path="url(#dialClip)"/>
    <path d="M124 148.4 A152 152 0 0 1 200 128" fill="none"
          stroke="#ffffff" stroke-width="2.4" stroke-opacity="0.30"
          stroke-linecap="round"/>
    <path d="M276 148.4 A152 152 0 0 0 200 128" fill="none"
          stroke="#ffffff" stroke-width="1.6" stroke-opacity="0.16"
          stroke-linecap="round"/>
    <path d="M96 336 A152 152 0 0 0 150 415" fill="none"
          stroke="#ffffff" stroke-width="1.6" stroke-opacity="0.10"
          stroke-linecap="round"/>
  </g>

  <!-- ================= HANDS ================= -->
  <g filter="url(#handShadow)">
    <!-- hour hand -->
    <g id="hourHand">
      <path d="M200 200 L194.5 280 L200 296 Z" fill="url(#handDark)"/>
      <path d="M200 200 L205.5 280 L200 296 Z" fill="url(#handLight)"/>
    </g>

    <!-- minute hand -->
    <g id="minuteHand">
      <path d="M200 168 L195 280 L200 300 Z" fill="url(#handDark)"/>
      <path d="M200 168 L205 280 L200 300 Z" fill="url(#handLight)"/>
    </g>

    <!-- sweeping seconds hand -->
    <g id="secondHand">
      <path d="M200 162 L201.9 280 L200 306 L198.1 280 Z" fill="#f2dda6"/>
      <circle cx="200" cy="300" r="5.4" fill="url(#handLight)"/>
      <circle cx="200" cy="300" r="2" fill="#7d5a15" opacity="0.8"/>
    </g>
  </g>

  <!-- center cap -->
  <circle cx="200" cy="280" r="7" fill="url(#handLight)" stroke="#7d5a15" stroke-width="0.8"/>
  <circle cx="200" cy="280" r="2.6" fill="#5a3f0e" opacity="0.85"/>
  <circle cx="198.6" cy="278.4" r="1.6" fill="#fff8de" opacity="0.7"/>
</svg>
</div>

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

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

  function el(name, attrs) {
    var e = document.createElementNS(NS, name);
    for (var k in attrs) {
      if (Object.prototype.hasOwnProperty.call(attrs, k)) {
        e.setAttribute(k, attrs[k]);
      }
    }
    return e;
  }

  /* ---------------- fluted bezel ---------------- */
  var flutes = document.getElementById("flutes");
  var N = 180;
  for (var i = 0; i < N; i++) {
    var a = (i / N) * 360;
    flutes.appendChild(el("line", {
      x1: CX, y1: CY - 133,
      x2: CX, y2: CY - 151,
      transform: "rotate(" + a + " " + CX + " " + CY + ")",
      stroke: (i % 2) ? "#6b4d12" : "#fff2c9",
      "stroke-width": 2.2,
      opacity: (i % 2) ? 0.55 : 0.85
    }));
  }

  /* ---------------- sunburst brushing ---------------- */
  var sun = document.getElementById("sunburst");
  for (var s = 0; s < 200; s++) {
    sun.appendChild(el("line", {
      x1: CX, y1: CY - 30,
      x2: CX, y2: CY - 126,
      transform: "rotate(" + (s * 1.8) + " " + CX + " " + CY + ")",
      stroke: (s % 2) ? "#7fa6dd" : "#d5e4f8",
      "stroke-width": (s % 2) ? 0.85 : 0.5,
      opacity: (s % 2) ? 0.055 : 0.10
    }));
  }

  /* ---------------- minute track ---------------- */
  var ticks = document.getElementById("ticks");
  for (var t = 0; t < 60; t++) {
    var major = (t % 5 === 0);
    ticks.appendChild(el("line", {
      x1: CX, y1: CY - (major ? 111 : 116),
      x2: CX, y2: CY - 124,
      transform: "rotate(" + (t * 6) + " " + CX + " " + CY + ")",
      stroke: major ? "#e9d29a" : "#7e6f4a",
      "stroke-width": major ? 2.4 : 1,
      "stroke-linecap": "round"
    }));
  }

  /* ---------------- applied hour markers ---------------- */
  var markers = document.getElementById("markers");

  function addMarker(xOff, w, angle) {
    var r = el("rect", {
      x: CX + xOff,
      y: CY - 106,
      width: w,
      height: 19,
      rx: 1.2,
      fill: "url(#markerGrad)"
    });
    if (angle) {
      r.setAttribute("transform", "rotate(" + angle + " " + CX + " " + CY + ")");
    }
    markers.appendChild(r);
  }

  for (var m = 0; m < 12; m++) {
    if (m === 3) { continue; }          /* date window lives here */
    if (m === 0) {                      /* double baton at 12 */
      addMarker(-11, 8, 0);
      addMarker(3, 8, 0);
    } else {
      addMarker(-4.5, 9, m * 30);
    }
  }

  /* ---------------- timekeeping ---------------- */
  var hourHand   = document.getElementById("hourHand");
  var minuteHand = document.getElementById("minuteHand");
  var secondHand = document.getElementById("secondHand");
  var dateText   = document.getElementById("dateText");
  var lastDay    = -1;

  function update() {
    var now = new Date();

    var ms = now.getMilliseconds();
    var sec = now.getSeconds() + ms / 1000;
    var min = now.getMinutes() + sec / 60;
    var hr  = (now.getHours() % 12) + min / 60;

    hourHand.setAttribute("transform",
      "rotate(" + (hr * 30).toFixed(3) + " " + CX + " " + CY + ")");
    minuteHand.setAttribute("transform",
      "rotate(" + (min * 6).toFixed(3) + " " + CX + " " + CY + ")");
    secondHand.setAttribute("transform",
      "rotate(" + (sec * 6).toFixed(3) + " " + CX + " " + CY + ")");

    var day = now.getDate();
    if (day !== lastDay) {
      lastDay = day;
      dateText.textContent = day;
    }

    requestAnimationFrame(update);
  }

  requestAnimationFrame(update);
})();
</script>
</body>
</html>

Compare with

Mercury 3MiMo v2.6 FlashNemotron 3.5 Super VL

DeepSeek V4.1 Flash: other attempts