• Updated 22 Oct, 10:10 UTC
  • Next run 23 Oct, 05:17 UTCNext 23 Oct 05:17
  • Last 7 days: 7 new models, 157 runs7 d: 7 models, 157 runs
Network offOpen alone (new tab)

Run details

Model
unbiased/pareto-26.9
Route
OpenRouter API, one user message
Served by
Unbiased
Reasoning
provider default
Limits
60 min · 80,000 output tokens ($0.60 at $7.5/M)
Date
22 Oct 2026
Time
2 min
Size
20 kB
Tokens
99 in, 6,944 out
List price
$0.052 ($2.5 in / $7.5 out per M)
Paid
$0.052

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

20 kB 501 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#101311">
<title>AUREL — Nocturne Automatic</title>
<style>
  :root {
    color-scheme: dark;
    --gold: #c7ad79;
    --muted: #82877f;
    --paper: #ede8dc;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100svh;
    background:
      radial-gradient(ellipse at 52% 45%, #293129 0%, #171c18 36%, #0c0f0d 78%);
    color: var(--paper);
    font-family: Arial, Helvetica, sans-serif;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .13;
    background: repeating-linear-gradient(115deg, transparent 0 3px, #98a18c09 3px 4px);
  }
  .page {
    max-width: 1440px;
    min-height: 100svh;
    margin: auto;
    padding: 30px 5vw 22px;
    display: flex;
    flex-direction: column;
  }
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 23px;
    border-bottom: 1px solid #c7ad7926;
  }
  .wordmark {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 24px;
    letter-spacing: .27em;
  }
  .edition, .eyebrow, .caption, .specs, .live {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .22em;
  }
  .edition { color: var(--muted); }
  main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1.65fr 0.7fr;
    align-items: center;
    gap: 16px;
    min-height: 610px;
  }
  .intro { padding-bottom: 38px; }
  .eyebrow { color: var(--gold); line-height: 1.8; }
  h1 {
    margin: 20px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(38px, 4.1vw, 62px);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: 1.07;
  }
  .description {
    color: #92998e;
    font-size: 13px;
    line-height: 1.9;
    max-width: 215px;
  }
  .rule { width: 32px; height: 1px; background: var(--gold); margin: 28px 0; }
  .reference { color: #697166; font-size: 9px; letter-spacing: .17em; }
  .watch-wrap { position: relative; width: 100%; }
  .watch-wrap::after {
    content: "";
    position: absolute;
    width: 64%;
    height: 6%;
    left: 18%;
    bottom: 5%;
    border-radius: 50%;
    background: #0008;
    filter: blur(22px);
    z-index: -1;
  }
  #watch {
    display: block;
    width: 100%;
    max-height: 760px;
    overflow: visible;
    filter: drop-shadow(14px 22px 15px #0009);
  }
  .specs {
    justify-self: end;
    color: #828b7d;
    line-height: 1.8;
    border-left: 1px solid #c7ad7933;
    padding-left: 23px;
  }
  .specs p { margin: 0 0 28px; }
  .specs p:last-child { margin-bottom: 0; }
  .specs strong {
    display: block;
    color: #d0c5ad;
    font-family: Georgia, 'Times New Roman', serif;
    text-transform: none;
    letter-spacing: 0;
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 4px;
  }
  footer {
    border-top: 1px solid #c7ad7926;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }
  .live { color: #aaa995; display: flex; align-items: center; gap: 10px; }
  .live::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #baa675;
    box-shadow: 0 0 9px #baa67555;
  }
  .time-info { text-align: right; }
  #digital { font-size: 13px; letter-spacing: .13em; font-variant-numeric: tabular-nums; }
  #zone { margin-top: 6px; color: #798171; font-size: 9px; letter-spacing: .12em; }
  @media (min-width: 1400px) {
    #watch { height: 740px; }
  }
  @media (max-width: 900px) {
    main { grid-template-columns: 1fr 1.85fr; min-height: 540px; }
    .specs { display: none; }
    .edition { font-size: 8px; }
  }
  @media (max-width: 600px) {
    .page { padding: 23px 23px 20px; }
    header { padding-bottom: 18px; }
    .wordmark { font-size: 21px; }
    .edition { letter-spacing: .12em; max-width: 115px; text-align: right; line-height: 1.7; }
    main { display: flex; flex-direction: column; gap: 0; min-height: auto; }
    .intro { text-align: center; padding: 30px 0 0; }
    .eyebrow { font-size: 8px; }
    h1 { font-size: 37px; margin: 9px 0 0; }
    h1 br { display: none; }
    .description, .rule, .reference { display: none; }
    .watch-wrap { max-width: 430px; margin: -4px 0 0; }
    #watch { max-height: 590px; }
    footer { padding-top: 17px; }
    .live { font-size: 8px; letter-spacing: .12em; }
    #digital { font-size: 11px; }
    #zone { font-size: 8px; letter-spacing: .05em; }
  }
</style>
</head>
<body>
<div class="page">
  <header>
    <div class="wordmark">AUREL</div>
    <div class="edition">The art of keeping time · Nº 01</div>
  </header>

  <main>
    <section class="intro">
      <div class="eyebrow">The Nocturne Collection</div>
      <h1>Time, <br>beautifully<br> considered.</h1>
      <p class="description">A midnight dial. The warmth of gold. A quiet tribute to the mechanical heart.</p>
      <div class="rule"></div>
      <div class="reference">NOCTURNE / AUTOMATIC DATE</div>
    </section>

    <div class="watch-wrap">
      <svg id="watch" viewBox="0 0 520 740" role="img" aria-labelledby="watchTitle watchDesc">
        <title id="watchTitle">Aurel Nocturne mechanical wristwatch</title>
        <desc id="watchDesc">A gold wristwatch with a midnight-green dial, leather strap, sweeping seconds hand, and a date window. It displays your current local time.</desc>
        <defs>
          <linearGradient id="leather" x1="0" x2="1">
            <stop stop-color="#080d0b"/>
            <stop offset=".14" stop-color="#1c2821"/>
            <stop offset=".45" stop-color="#25332b"/>
            <stop offset=".8" stop-color="#17231d"/>
            <stop offset="1" stop-color="#070d0a"/>
          </linearGradient>
          <linearGradient id="gold" x1="0" y1="0" x2="1" y2="1">
            <stop stop-color="#6b512c"/>
            <stop offset=".16" stop-color="#d7bc7e"/>
            <stop offset=".29" stop-color="#fff0b9"/>
            <stop offset=".44" stop-color="#b2945d"/>
            <stop offset=".62" stop-color="#67502c"/>
            <stop offset=".79" stop-color="#d1af70"/>
            <stop offset=".9" stop-color="#f7df9e"/>
            <stop offset="1" stop-color="#8b6c3b"/>
          </linearGradient>
          <linearGradient id="bezel" x1="0" y1="0" x2=".8" y2="1">
            <stop stop-color="#ffe9b0"/>
            <stop offset=".23" stop-color="#c9a76a"/>
            <stop offset=".5" stop-color="#7f653c"/>
            <stop offset=".77" stop-color="#bda06a"/>
            <stop offset="1" stop-color="#f1d8a0"/>
          </linearGradient>
          <linearGradient id="handGold" x1="0" x2="1">
            <stop stop-color="#8c7041"/>
            <stop offset=".48" stop-color="#e6ca8f"/>
            <stop offset=".5" stop-color="#fff0be"/>
            <stop offset="1" stop-color="#a48249"/>
          </linearGradient>
          <radialGradient id="dial" cx=".4" cy=".3" r=".78">
            <stop stop-color="#213c35"/>
            <stop offset=".45" stop-color="#142b26"/>
            <stop offset=".8" stop-color="#0b1c19"/>
            <stop offset="1" stop-color="#050e0d"/>
          </radialGradient>
          <radialGradient id="dialShade">
            <stop offset=".78" stop-color="#000" stop-opacity="0"/>
            <stop offset="1" stop-color="#000" stop-opacity=".72"/>
          </radialGradient>
          <linearGradient id="glass" x1="0" y1="0" x2=".65" y2="1">
            <stop stop-color="#e5f7e6" stop-opacity=".11"/>
            <stop offset=".42" stop-color="#e5f7e6" stop-opacity=".015"/>
            <stop offset=".6" stop-color="#e5f7e6" stop-opacity="0"/>
            <stop offset="1" stop-color="#d5e4d4" stop-opacity=".035"/>
          </linearGradient>
          <pattern id="grain" width="13" height="19" patternUnits="userSpaceOnUse">
            <path d="M1 4Q5 1 10 4M3 12Q8 9 12 12M0 18L5 17" fill="none" stroke="#020806" stroke-width=".65" opacity=".5"/>
            <path d="M2 5L8 4M5 13L10 12" stroke="#637062" stroke-width=".4" opacity=".3"/>
          </pattern>
          <pattern id="crownRidges" width="4" height="4" patternUnits="userSpaceOnUse">
            <path d="M1 0V4" stroke="#4a361c" stroke-width="1"/>
            <path d="M2 0V4" stroke="#e5c68a" stroke-width=".7"/>
          </pattern>
          <clipPath id="dialClip"><circle cx="250" cy="370" r="161"/></clipPath>
          <filter id="handShadow" x="-100%" y="-50%" width="300%" height="220%">
            <feDropShadow dx="2" dy="3" stdDeviation="2" flood-opacity=".65"/>
          </filter>
          <filter id="indexShadow" x="-70%" y="-30%" width="240%" height="180%">
            <feDropShadow dx="1" dy="1.5" stdDeviation=".8" flood-opacity=".9"/>
          </filter>
        </defs>

        <!-- Hand-finished leather strap -->
        <path d="M176 24Q250 12 324 24L331 222H169Z" fill="url(#leather)" stroke="#080c09" stroke-width="2"/>
        <path d="M169 518H331L322 713Q250 730 178 713Z" fill="url(#leather)" stroke="#080c09" stroke-width="2"/>
        <path d="M176 24Q250 12 324 24L331 222H169ZM169 518H331L322 713Q250 730 178 713Z" fill="url(#grain)"/>
        <g fill="none" stroke="#72806a" stroke-width="1.2" stroke-dasharray="3 5" opacity=".48">
          <path d="M185 28L179 213M315 28L321 213"/>
          <path d="M179 529L188 710M321 529L312 710"/>
        </g>
        <g fill="none" stroke="#050b08" stroke-width="2" opacity=".7">
          <path d="M190 24L184 213M310 24L316 213"/>
          <path d="M184 530L193 714M316 530L307 714"/>
        </g>
        <!-- Sculpted lugs -->
        <g fill="url(#gold)" stroke="#80643b" stroke-width="1">
          <path d="M144 226L154 168Q160 157 176 156L183 211Z"/>
          <path d="M356 226L346 168Q340 157 324 156L317 211Z"/>
          <path d="M144 514L154 572Q160 583 176 584L183 529Z"/>
          <path d="M356 514L346 572Q340 583 324 584L317 529Z"/>
        </g>
        <g fill="none" stroke="#f1d39a" opacity=".65">
          <path d="M150 216L160 173Q162 166 174 163"/>
          <path d="M350 216L340 173Q338 166 326 163"/>
          <path d="M150 524L160 567Q162 574 174 577"/>
          <path d="M350 524L340 567Q338 574 326 577"/>
        </g>

        <!-- Fluted winding crown -->
        <rect x="433" y="359" width="22" height="23" rx="4" fill="url(#gold)"/>
        <rect x="447" y="349" width="28" height="43" rx="7" fill="url(#gold)" stroke="#80623a"/>
        <rect x="450" y="352" width="22" height="37" rx="4" fill="url(#crownRidges)" opacity=".85"/>
        <path d="M473 358V383" stroke="#f1d69d" stroke-width="1.5"/>

        <!-- Polished case and stepped bezel -->
        <circle cx="250" cy="370" r="190" fill="url(#gold)" stroke="#bd9e69" stroke-width="1"/>
        <circle cx="250" cy="370" r="185" fill="none" stroke="#f9dfa5" stroke-opacity=".6"/>
        <circle cx="250" cy="370" r="180" fill="url(#bezel)" stroke="#755930" stroke-width="1.5"/>
        <circle cx="250" cy="370" r="170" fill="#4d3e27" stroke="#f0d298" stroke-width="1.5"/>
        <circle cx="250" cy="370" r="165" fill="#07110e" stroke="#977e51" stroke-width="3"/>
        <circle cx="250" cy="370" r="161" fill="url(#dial)"/>

        <g clip-path="url(#dialClip)">
          <g id="sunburst"></g>
          <g id="grooves" fill="none" stroke="#91ac8d" stroke-width=".35" opacity=".1"></g>
          <circle cx="250" cy="370" r="161" fill="url(#dialShade)"/>
        </g>

        <!-- Chapter ring -->
        <circle cx="250" cy="370" r="150" fill="none" stroke="#baa372" stroke-width=".45" opacity=".6"/>
        <circle cx="250" cy="370" r="139" fill="none" stroke="#baa372" stroke-width=".35" opacity=".24"/>
        <g id="ticks"></g>
        <g id="indices" filter="url(#indexShadow)"></g>

        <!-- Dial typography -->
        <g text-anchor="middle" fill="#d5bd86">
          <path d="M240 276L244 267L250 275L256 267L260 276ZM242 280H258" fill="none" stroke="#d5bd86" stroke-width="1"/>
          <text x="252" y="302" font-family="Georgia, 'Times New Roman', serif" font-size="20" letter-spacing="4">AUREL</text>
          <text x="250" y="318" font-family="Arial, sans-serif" font-size="6.5" letter-spacing="2.6">HAUTE HORLOGERIE</text>
          <text x="250" y="429" font-family="Georgia, 'Times New Roman', serif" font-size="15" font-style="italic" letter-spacing="1">Nocturne</text>
          <text x="251" y="447" font-family="Arial, sans-serif" font-size="7" letter-spacing="2.3">AUTOMATIC</text>
          <path d="M232 458H245M255 458H268" stroke="#c5aa73" stroke-width=".6"/>
          <path d="M250 455L253 458L250 461L247 458Z" fill="#c5aa73"/>
          <text x="250" y="499" font-family="Arial, sans-serif" font-size="5.5" letter-spacing="1.8" opacity=".65">PRECISION · PERPETUAL</text>
        </g>

        <!-- Recessed date aperture at three o'clock -->
        <rect x="351" y="356" width="39" height="28" rx="1" fill="url(#gold)" stroke="#070e0b" stroke-width="1"/>
        <rect x="354" y="359" width="33" height="22" fill="#070f0c"/>
        <path d="M354 381V359H387" fill="none" stroke="#000" stroke-width="2"/>
        <path d="M354 381H387V359" fill="none" stroke="#d8bb813f" stroke-width="1"/>
        <text id="date" x="370.5" y="375.5" text-anchor="middle" fill="#e8ddbf" font-family="Georgia, 'Times New Roman', serif" font-size="17">—</text>

        <!-- Hand assemblies; each rotates around the dial's center -->
        <g transform="translate(250 370)">
          <g id="hourHand">
            <g filter="url(#handShadow)">
              <path d="M0 23L-6 12L-6-65L0-94L6-65L6 12Z" fill="url(#handGold)" stroke="#e8c98d" stroke-width=".5"/>
              <path d="M-2-12L-2-64L0-77L2-64L2-12Z" fill="#b7c6ae"/>
              <path d="M0-90V-79M0-10V17" stroke="#fff0bc" stroke-width=".7"/>
            </g>
          </g>
          <g id="minuteHand">
            <g filter="url(#handShadow)">
              <path d="M0 25L-4.3 12L-3.8-101L0-135L3.8-101L4.3 12Z" fill="url(#handGold)" stroke="#e8c98d" stroke-width=".5"/>
              <path d="M-1.4-17L-1.4-100L0-116L1.4-100L1.4-17Z" fill="#c0cdb6"/>
              <path d="M0-132V-119" stroke="#fff0bc" stroke-width=".7"/>
            </g>
          </g>
          <g id="secondHand">
            <g filter="url(#handShadow)">
              <path d="M0 44V-143" fill="none" stroke="#e0be7a" stroke-width="1.3"/>
              <path d="M0-147L-1.6-136H1.6Z" fill="#f5d999"/>
              <circle cy="33" r="5" fill="#15231b" stroke="#d8b574" stroke-width="1.7"/>
            </g>
          </g>
          <circle r="7.3" fill="#745933" stroke="#e4c588" stroke-width=".7"/>
          <circle r="5.1" fill="url(#handGold)"/>
          <circle r="1.8" fill="#eedeaa"/>
        </g>

        <!-- Sapphire crystal highlights -->
        <circle cx="250" cy="370" r="162" fill="url(#glass)" pointer-events="none"/>
        <path d="M109 306A155 155 0 0 1 310 227" fill="none" stroke="#f1f9e8" stroke-opacity=".16" stroke-width="1.1"/>
        <path d="M319 511A156 156 0 0 0 398 418" fill="none" stroke="#f1f9e8" stroke-opacity=".08" stroke-width="1.2"/>
      </svg>
    </div>

    <aside class="specs" aria-label="Watch design details">
      <p><strong>01</strong>Nocturne</p>
      <p><strong>Gold</strong>Polished case</p>
      <p><strong>Midnight</strong>Sunray dial</p>
      <p><strong>Automatic</strong>Continuous sweep</p>
    </aside>
  </main>

  <footer>
    <div class="live">Your time. Precisely.</div>
    <div class="time-info">
      <div id="digital">—</div>
      <div id="zone">LOCAL TIME</div>
    </div>
  </footer>
</div>

<script>
(() => {
  "use strict";
  const NS = "http://www.w3.org/2000/svg";
  const make = (name, attributes, parent) => {
    const element = document.createElementNS(NS, name);
    for (const [key, value] of Object.entries(attributes)) {
      element.setAttribute(key, value);
    }
    parent.appendChild(element);
    return element;
  };

  // Fine radial brushing catches the light across the sunray dial.
  const sunburst = document.getElementById("sunburst");
  for (let i = 0; i < 480; i++) {
    const angle = i * Math.PI * 2 / 480;
    const intensity = .023 + .028 * Math.pow(Math.cos(angle + .7), 8);
    make("line", {
      x1: 250 + Math.sin(angle) * 9,
      y1: 370 - Math.cos(angle) * 9,
      x2: 250 + Math.sin(angle) * 163,
      y2: 370 - Math.cos(angle) * 163,
      stroke: i % 3 === 0 ? "#dce8c2" : "#688b71",
      "stroke-width": i % 3 === 0 ? ".55" : ".35",
      opacity: intensity
    }, sunburst);
  }

  const grooves = document.getElementById("grooves");
  for (let r = 141; r < 150; r += 1.6) {
    make("circle", { cx: 250, cy: 370, r }, grooves);
  }

  const ticks = document.getElementById("ticks");
  for (let i = 0; i < 60; i++) {
    make("line", {
      x1: 250, y1: 219,
      x2: 250, y2: i % 5 === 0 ? 226 : 223,
      stroke: "#dac18a",
      "stroke-width": i % 5 === 0 ? 1.4 : .8,
      opacity: i % 5 === 0 ? .95 : .65,
      transform: `rotate(${i * 6} 250 370)`
    }, ticks);
  }

  const indices = document.getElementById("indices");
  for (let i = 0; i < 12; i++) {
    if (i === 3) continue; // Leave room for the date.
    const group = make("g", { transform: `rotate(${i * 30} 250 370)` }, indices);
    const offsets = i === 0 ? [-4.2, 4.2] : [0];
    for (const offset of offsets) {
      make("path", {
        d: `M${247.7 + offset} 232 L${252.3 + offset} 232 L${251.8 + offset} 251 L${248.2 + offset} 251Z`,
        fill: "url(#handGold)",
        stroke: "#f4d79c",
        "stroke-width": ".4"
      }, group);
      make("line", {
        x1: 249.5 + offset, y1: 234,
        x2: 249.5 + offset, y2: 248,
        stroke: "#fff1c7",
        "stroke-width": ".7",
        opacity: ".65"
      }, group);
    }
  }

  const hourHand = document.getElementById("hourHand");
  const minuteHand = document.getElementById("minuteHand");
  const secondHand = document.getElementById("secondHand");
  const dateWindow = document.getElementById("date");
  const digital = document.getElementById("digital");
  const zone = document.getElementById("zone");
  const description = document.getElementById("watchDesc");

  const timeFormat = new Intl.DateTimeFormat(undefined, {
    hour: "2-digit", minute: "2-digit", second: "2-digit"
  });
  const dateFormat = new Intl.DateTimeFormat(undefined, {
    weekday: "long", year: "numeric", month: "long", day: "numeric"
  });
  let previousSecond = -1;
  let previousDay = "";
  let previousZone = "";

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

    secondHand.setAttribute("transform", `rotate(${seconds * 6})`);
    minuteHand.setAttribute("transform", `rotate(${minutes * 6})`);
    hourHand.setAttribute("transform", `rotate(${hours * 30})`);

    const timestamp = Math.floor(now.getTime() / 1000);
    if (timestamp !== previousSecond) {
      previousSecond = timestamp;
      digital.textContent = timeFormat.format(now);
      description.textContent =
        `Gold Aurel Nocturne wristwatch. Local time: ${timeFormat.format(now)}. ${dateFormat.format(now)}.`;

      const day = `${now.getFullYear()}-${now.getMonth()}-${now.getDate()}`;
      if (day !== previousDay) {
        previousDay = day;
        dateWindow.textContent = String(now.getDate());
      }

      const currentZone = Intl.DateTimeFormat().resolvedOptions().timeZone || "Local time";
      if (currentZone !== previousZone) {
        previousZone = currentZone;
        zone.textContent = currentZone.replace(/_/g, " ").replace(/\//g, " / ").toUpperCase();
      }
    }
    requestAnimationFrame(update);
  }

  // Wall-clock time is read on every frame, so returning from a sleeping
  // tab immediately restores the correct local time and calendar date.
  update();
})();
</script>
</body>
</html>

Compare with

Pareto 26.9: other attempts