hypeorcode
Network offOpen alone (new tab)

Run details

Model
openai/gpt-6.1-sol
Route
OpenRouter API, one user message
Reasoning
provider default, 398 reasoning tokens
Limits
60 min · 60,000 output tokens
Date
21 Oct 2026
Time
2 min 22 s
Size
20 kB
Tokens
82 in, 7,040 out
List price
$0.071 ($2 in / $10 out per M)
Paid
$0.071

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 451 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="#0a1016">
<title>Meridian — Automatic</title>
<style>
  :root {
    color-scheme: dark;
    --gold: #d4b581;
    --muted: #7f8990;
    --ivory: #eee8dc;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; }
  body {
    background: #0a1016;
    color: var(--ivory);
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 48% 42%, #25303955, transparent 57%),
      linear-gradient(115deg, #ffffff03, transparent 45%, #00000055);
  }
  .page {
    position: relative;
    min-height: 100svh;
    max-width: 1440px;
    margin: auto;
    padding: 32px 48px 25px;
    display: flex;
    flex-direction: column;
  }
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
  }
  .wordmark { font-family: Georgia, serif; font-size: 21px; letter-spacing: 6px; }
  .edition { font-size: 9px; letter-spacing: 3px; color: var(--muted); }
  main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr minmax(340px, 600px) 1fr;
    align-items: center;
    min-height: 0;
  }
  .intro { z-index: 1; margin-right: -50px; }
  .eyebrow { color: var(--gold); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; }
  h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(32px, 3.5vw, 50px);
    font-weight: 400;
    line-height: 1.15;
    margin: 19px 0 20px;
  }
  .intro p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9;
    max-width: 180px;
    margin: 0;
  }
  .rule { width: 34px; height: 1px; background: #b4966270; margin: 26px 0; }
  .reference { color: #67747c; font-size: 9px; letter-spacing: 2px; }
  .watch-stage { position: relative; width: 100%; }
  .watch-stage::before {
    content: "";
    position: absolute;
    width: 68%;
    height: 62%;
    left: 19%;
    top: 24%;
    background: #000;
    filter: blur(48px);
    opacity: .6;
    transform: rotate(-15deg);
  }
  svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
  .specs { justify-self: end; padding-left: 18px; }
  .spec { margin: 35px 0; }
  .spec strong {
    display: block;
    color: #c9c3b7;
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: normal;
    margin-bottom: 7px;
  }
  .spec span { color: var(--muted); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; }
  footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #ffffff0d;
    padding-top: 19px;
  }
  .time-label { font-size: 8px; letter-spacing: 2px; color: var(--muted); margin-bottom: 8px; }
  #digital-time { font-size: 13px; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
  .live { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); margin: 0 10px 2px 0; box-shadow: 0 0 8px #d4b58144; }
  #local-date { color: #929a9e; font-size: 10px; letter-spacing: 1px; text-align: right; }
  .balance { transform-origin: 300px 470px; animation: oscillate .55s ease-in-out infinite alternate; }
  @keyframes oscillate { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
  @media (min-width: 1000px) {
    .watch-stage { margin: -15px 0; }
    svg { max-height: calc(100svh - 130px); min-height: 500px; }
  }
  @media (max-width: 850px) {
    .page { padding: 25px 25px 22px; }
    main { grid-template-columns: 1fr minmax(300px, 520px) 1fr; }
    .intro { margin-right: -70px; }
    h1 { font-size: 30px; }
    .intro p, .reference, .rule, .specs { display: none; }
  }
  @media (max-width: 600px) {
    .page { padding: 24px 22px 20px; }
    .wordmark { font-size: 17px; letter-spacing: 4px; }
    .edition { font-size: 7px; letter-spacing: 1.5px; }
    main { display: flex; flex-direction: column; justify-content: center; }
    .intro { text-align: center; margin: 32px 0 -13px; }
    .eyebrow { font-size: 8px; }
    h1 { font-size: 27px; margin: 10px 0 0; }
    h1 br { display: none; }
    .watch-stage { width: min(110%, 430px); flex-shrink: 0; }
    footer { padding-top: 15px; }
    #local-date { max-width: 150px; font-size: 9px; line-height: 1.7; }
  }
  @media (prefers-reduced-motion: reduce) { .balance { animation: none; } }
</style>
</head>
<body>
<div class="page">
  <header>
    <div class="wordmark">MERIDIAN</div>
    <div class="edition">THE ATELIER COLLECTION</div>
  </header>

  <main>
    <section class="intro">
      <div class="eyebrow">No. 01 / Midnight</div>
      <h1>A moment.<br>Made timeless.</h1>
      <p>Warm gold. Midnight blue.<br>The quiet art of keeping time.</p>
      <div class="rule"></div>
      <div class="reference">REF. M—1926</div>
    </section>

    <div class="watch-stage">
      <svg id="watch" viewBox="0 0 600 760" role="img" aria-labelledby="watch-title watch-description">
        <title id="watch-title">Meridian midnight-blue mechanical wristwatch</title>
        <desc id="watch-description">A gold automatic watch with a sweeping seconds hand and a date window, displaying your current local time.</desc>
        <defs>
          <linearGradient id="leather" x1="0" x2="1">
            <stop stop-color="#080e12"/>
            <stop offset=".16" stop-color="#172129"/>
            <stop offset=".45" stop-color="#202a31"/>
            <stop offset=".8" stop-color="#101920"/>
            <stop offset="1" stop-color="#050a0e"/>
          </linearGradient>
          <pattern id="grain" width="36" height="43" patternUnits="userSpaceOnUse">
            <path d="M0 4Q18 -4 36 4M0 40Q18 47 36 40M3 7Q0 22 4 36M32 6Q38 20 32 37" fill="none" stroke="#000" stroke-opacity=".35" stroke-width="1.8"/>
            <path d="M7 10Q18 5 28 11M7 13L9 31M13 35L27 33" fill="none" stroke="#91a0a6" stroke-opacity=".06"/>
          </pattern>
          <linearGradient id="gold" x1=".1" y1="0" x2=".9" y2="1">
            <stop stop-color="#705335"/>
            <stop offset=".14" stop-color="#e5c18a"/>
            <stop offset=".26" stop-color="#fff0bd"/>
            <stop offset=".4" stop-color="#b08a53"/>
            <stop offset=".61" stop-color="#80603c"/>
            <stop offset=".79" stop-color="#e9c892"/>
            <stop offset=".9" stop-color="#f7dfac"/>
            <stop offset="1" stop-color="#8a683e"/>
          </linearGradient>
          <linearGradient id="bezel" x1="0" y1="0" x2="1" y2="1">
            <stop stop-color="#fff0c2"/>
            <stop offset=".22" stop-color="#b8935c"/>
            <stop offset=".48" stop-color="#64492d"/>
            <stop offset=".7" stop-color="#d6b17a"/>
            <stop offset=".88" stop-color="#ffeac0"/>
            <stop offset="1" stop-color="#8e693c"/>
          </linearGradient>
          <linearGradient id="hand-metal" x1="0" x2="1">
            <stop stop-color="#80623d"/>
            <stop offset=".46" stop-color="#fff2c8"/>
            <stop offset=".51" stop-color="#c8a36b"/>
            <stop offset="1" stop-color="#a37c48"/>
          </linearGradient>
          <radialGradient id="dial" cx=".38" cy=".28" r=".85">
            <stop stop-color="#254657"/>
            <stop offset=".45" stop-color="#122e40"/>
            <stop offset=".8" stop-color="#0b1c2b"/>
            <stop offset="1" stop-color="#050e17"/>
          </radialGradient>
          <radialGradient id="crystal" cx=".24" cy=".12" r=".95">
            <stop stop-color="#d7e8f3" stop-opacity=".12"/>
            <stop offset=".5" stop-color="#c8e2f1" stop-opacity="0"/>
            <stop offset=".85" stop-color="#94b4d0" stop-opacity=".025"/>
            <stop offset="1" stop-color="#000" stop-opacity=".25"/>
          </radialGradient>
          <linearGradient id="date-gold" x1="0" y1="0" x2="1" y2="1">
            <stop stop-color="#725233"/>
            <stop offset=".5" stop-color="#e8c68c"/>
            <stop offset="1" stop-color="#9b773f"/>
          </linearGradient>
          <filter id="case-shadow" x="-40%" y="-30%" width="180%" height="180%">
            <feDropShadow dx="7" dy="19" stdDeviation="13" flood-color="#000" flood-opacity=".65"/>
          </filter>
          <filter id="hand-shadow" x="-100%" y="-100%" width="300%" height="300%">
            <feDropShadow dx="2" dy="3" stdDeviation="2" flood-opacity=".7"/>
          </filter>
          <clipPath id="dial-clip"><circle cx="300" cy="380" r="194"/></clipPath>
        </defs>

        <!-- Padded, stitched leather strap -->
        <path d="M204 -30Q300 -42 396 -30L410 178L391 211H209L190 178Z" fill="url(#leather)" stroke="#03080b" stroke-width="3"/>
        <path d="M209 555H391L410 585L393 791Q300 807 207 791L190 585Z" fill="url(#leather)" stroke="#03080b" stroke-width="3"/>
        <path d="M204 -30H396L409 179H191ZM192 586H408L393 790H207Z" fill="url(#grain)" opacity=".85"/>
        <g fill="none" stroke="#8b8066" stroke-opacity=".35" stroke-width="1.3" stroke-dasharray="3.5 5">
          <path d="M215 -10L203 166M385 -10L397 166M203 599L218 773M397 599L382 773"/>
        </g>
        <g fill="#04090d" stroke="#324049" stroke-width=".8">
          <ellipse cx="300" cy="669" rx="3.3" ry="6"/>
          <ellipse cx="300" cy="706" rx="3.3" ry="6"/>
          <ellipse cx="300" cy="743" rx="3.3" ry="6"/>
        </g>

        <g filter="url(#case-shadow)">
          <!-- Sculpted lugs -->
          <g fill="url(#gold)" stroke="#795b36" stroke-width="1">
            <path d="M168 222L179 149Q189 134 207 139L225 177L209 226Z"/>
            <path d="M432 222L421 149Q411 134 393 139L375 177L391 226Z"/>
            <path d="M168 538L179 611Q189 626 207 621L225 583L209 534Z"/>
            <path d="M432 538L421 611Q411 626 393 621L375 583L391 534Z"/>
          </g>
          <g fill="none" stroke="#ffe3ad" stroke-opacity=".45">
            <path d="M184 159L176 203M416 159L424 203M184 601L176 557M416 601L424 557"/>
          </g>
          <!-- Crown and case -->
          <rect x="516" y="363" width="24" height="34" rx="5" fill="url(#gold)"/>
          <rect x="536" y="357" width="27" height="46" rx="7" fill="url(#bezel)" stroke="#8c6a3d"/>
          <g stroke="#5a4027" stroke-width="1.5" opacity=".8">
            <path d="M540 362V398M545 359V401M550 359V401M555 360V400M560 364V396"/>
          </g>
          <circle cx="300" cy="380" r="225" fill="url(#gold)" stroke="#bd9c69" stroke-width="1"/>
          <circle cx="300" cy="380" r="219" fill="none" stroke="#fff1c2" stroke-opacity=".5" stroke-width="1"/>
          <circle cx="300" cy="380" r="215" fill="url(#bezel)"/>
          <circle cx="300" cy="380" r="204" fill="#2d251c" stroke="#604a31" stroke-width="2"/>
          <circle cx="300" cy="380" r="199" fill="url(#dial)" stroke="#e1c18a" stroke-width="2"/>
        </g>

        <g clip-path="url(#dial-clip)">
          <g id="sunburst"></g>
          <g id="dial-rings" fill="none" stroke="#8aafc0" stroke-opacity=".065" stroke-width=".5"></g>
          <circle cx="300" cy="380" r="182" fill="none" stroke="#cbb687" stroke-opacity=".35" stroke-width=".6"/>
          <circle cx="300" cy="380" r="157" fill="none" stroke="#cbb687" stroke-opacity=".2" stroke-width=".5"/>
          <g id="minute-marks"></g>
          <g id="hour-marks" filter="url(#hand-shadow)"></g>

          <g text-anchor="middle">
            <path d="M290 263L295 251L300 259L305 251L310 263Z" fill="none" stroke="#dbbf8d" stroke-width="1.2"/>
            <text x="300" y="287" fill="#e7d2a9" font-family="Georgia, serif" font-size="17" letter-spacing="4">MERIDIAN</text>
            <text x="300" y="304" fill="#a4b1b5" font-family="Arial, sans-serif" font-size="6.5" letter-spacing="3">ATELIER • AUTOMATIC</text>
            <text x="300" y="519" fill="#c8b78f" font-family="Georgia, serif" font-size="9" letter-spacing="2.5">28 JEWELS</text>
            <text x="300" y="553" fill="#a9a795" font-family="Arial, sans-serif" font-size="5.5" letter-spacing="2">MECHANICAL MOVEMENT</text>
          </g>

          <!-- Beveled date aperture -->
          <rect x="414" y="365" width="53" height="30" rx="1" fill="url(#date-gold)"/>
          <rect x="417" y="368" width="47" height="24" fill="#e8e0cc"/>
          <path d="M417 392V368H464" fill="none" stroke="#302c27" stroke-width="2.5"/>
          <text id="date-number" x="440.5" y="385.5" text-anchor="middle" fill="#1e2529" font-family="Georgia, serif" font-size="18">1</text>

          <!-- Open-heart balance, beneath the dial -->
          <circle cx="300" cy="470" r="30" fill="#060b10" stroke="#9d8053" stroke-width="1.5"/>
          <circle cx="300" cy="470" r="25" fill="#121a21" stroke="#344047" stroke-width="3"/>
          <g class="balance">
            <circle cx="300" cy="470" r="21" fill="none" stroke="#b4975e" stroke-width="3"/>
            <circle cx="300" cy="470" r="16" fill="none" stroke="#6d7780" stroke-width=".8"/>
            <circle cx="300" cy="470" r="12" fill="none" stroke="#927d59" stroke-width=".7"/>
            <path d="M300 449V491M279 470H321M285 455L315 485M285 485L315 455" stroke="#b4975e" stroke-width="2"/>
            <g fill="#e5c78d">
              <circle cx="300" cy="449" r="2.3"/><circle cx="300" cy="491" r="2.3"/>
              <circle cx="279" cy="470" r="2.3"/><circle cx="321" cy="470" r="2.3"/>
            </g>
          </g>
          <path d="M273 475L288 467H312L327 475L325 480L311 475H289L275 480Z" fill="url(#gold)" stroke="#4d3d29" stroke-width=".6"/>
          <circle cx="300" cy="470" r="4.3" fill="#a68d63"/>
          <circle cx="300" cy="470" r="2" fill="#7b2940"/>
          <g fill="#b4b8b6" stroke="#2e3435" stroke-width=".7">
            <circle cx="276" cy="476" r="2.4"/><circle cx="324" cy="476" r="2.4"/>
          </g>
          <path d="M274 476H278M322 476H326" stroke="#3d4447" stroke-width=".8"/>
        </g>

        <!-- Faceted hands, all pivoting on the same arbor -->
        <g filter="url(#hand-shadow)">
          <g id="hour-hand">
            <path d="M295 398L292 367L294 289L300 265L306 289L308 367L305 398Z" fill="url(#hand-metal)" stroke="#cbb080" stroke-width=".5"/>
            <path d="M300 278L300 385L295 365L297 291Z" fill="#fff0ca" opacity=".45"/>
            <path d="M298 290H302L303 348H297Z" fill="#c4cfc0"/>
          </g>
          <g id="minute-hand">
            <path d="M297 408L294.5 370L296.8 236L300 211L303.2 236L305.5 370L303 408Z" fill="url(#hand-metal)" stroke="#d4b882" stroke-width=".5"/>
            <path d="M299 239H301L302 345H298Z" fill="#d5ded0"/>
            <path d="M300 218V398" fill="none" stroke="#ffedbc" stroke-opacity=".5" stroke-width=".6"/>
          </g>
        </g>
        <g id="second-hand">
          <path d="M299.3 424L299.3 213L300 198L300.7 213L300.7 424Z" fill="#e4c28a"/>
          <circle cx="300" cy="414" r="6.5" fill="none" stroke="#dbb77c" stroke-width="1.8"/>
          <path d="M300 421V432" stroke="#dbb77c" stroke-width="1.8"/>
        </g>
        <circle cx="300" cy="380" r="7.5" fill="url(#gold)" stroke="#6c5233" stroke-width=".7"/>
        <circle cx="300" cy="380" r="3" fill="#e8d4ab"/>
        <circle cx="300" cy="380" r="1.2" fill="#9c794c"/>

        <!-- Sapphire surface and polished edge -->
        <circle cx="300" cy="380" r="197" fill="url(#crystal)" pointer-events="none"/>
        <path d="M118 333A190 190 0 0 1 352 195" fill="none" stroke="#fff" stroke-width="1.5" opacity=".17"/>
        <path d="M451 502A191 191 0 0 1 253 566" fill="none" stroke="#b6d9ec" stroke-width=".8" opacity=".12"/>
      </svg>
    </div>

    <aside class="specs" aria-label="Design details">
      <div class="spec"><strong>Automatic</strong><span>Mechanical soul</span></div>
      <div class="spec"><strong>Midnight</strong><span>Sunburst dial</span></div>
      <div class="spec"><strong>Rose gold</strong><span>Polished finish</span></div>
    </aside>
  </main>

  <footer>
    <div>
      <div class="time-label">YOUR LOCAL TIME</div>
      <span class="live" aria-hidden="true"></span><time id="digital-time">—</time>
    </div>
    <div id="local-date"></div>
  </footer>
</div>

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

  const rays = document.getElementById('sunburst');
  for (let i = 0; i < 240; i++) {
    const angle = i * Math.PI / 120;
    make('line', {
      x1: 300 + Math.sin(angle) * 42,
      y1: 380 - Math.cos(angle) * 42,
      x2: 300 + Math.sin(angle) * 195,
      y2: 380 - Math.cos(angle) * 195,
      stroke: i % 3 ? '#90c0d5' : '#030e18',
      'stroke-opacity': i % 3 ? '.035' : '.14',
      'stroke-width': '.65'
    }, rays);
  }
  const rings = document.getElementById('dial-rings');
  for (let r = 48; r < 157; r += 3) {
    make('circle', { cx: 300, cy: 380, r }, rings);
  }

  const minutes = document.getElementById('minute-marks');
  for (let i = 0; i < 60; i++) {
    make('line', {
      x1: 300, y1: 190, x2: 300, y2: i % 5 === 0 ? 199 : 195,
      stroke: '#d8c69d',
      'stroke-opacity': i % 5 === 0 ? '.95' : '.65',
      'stroke-width': i % 5 === 0 ? '1.5' : '.85',
      transform: `rotate(${i * 6} 300 380)`
    }, minutes);
  }

  const hours = document.getElementById('hour-marks');
  for (let i = 0; i < 12; i++) {
    if (i === 3) continue;
    const group = make('g', { transform: `rotate(${i * 30} 300 380)` }, hours);
    if (i === 0) {
      for (const x of [293, 302]) {
        make('path', { d: `M${x} 208H${x + 5}L${x + 4} 231H${x + 1}Z`, fill: 'url(#hand-metal)', stroke: '#e9d4a7', 'stroke-width': '.4' }, group);
      }
    } else {
      make('path', {
        d: 'M296 208H304L302.7 230L300 234L297.3 230Z',
        fill: 'url(#hand-metal)', stroke: '#e9d4a7', 'stroke-width': '.4'
      }, group);
      make('path', { d: 'M300 211V229', stroke: '#f7e3b7', 'stroke-opacity': '.55', 'stroke-width': '.7' }, group);
    }
  }

  const hourHand = document.getElementById('hour-hand');
  const minuteHand = document.getElementById('minute-hand');
  const secondHand = document.getElementById('second-hand');
  const dateNumber = document.getElementById('date-number');
  const digitalTime = document.getElementById('digital-time');
  const localDate = document.getElementById('local-date');
  const description = document.getElementById('watch-description');
  const timeFormat = new Intl.DateTimeFormat(undefined, {
    hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
  });
  const dateFormat = new Intl.DateTimeFormat(undefined, {
    weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'
  });
  let previousSecond = '';
  let previousDay = '';

  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;

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

    const secondKey = Math.floor(now.getTime() / 1000);
    if (secondKey !== previousSecond) {
      const formattedTime = timeFormat.format(now);
      digitalTime.textContent = formattedTime;
      digitalTime.dateTime = now.toISOString();
      description.textContent = `A gold automatic wristwatch displaying the current local time, ${formattedTime}, with a sweeping seconds hand and date window.`;
      previousSecond = secondKey;
    }
    const dayKey = `${now.getFullYear()}-${now.getMonth()}-${now.getDate()}`;
    if (dayKey !== previousDay) {
      dateNumber.textContent = now.getDate();
      localDate.textContent = dateFormat.format(now);
      previousDay = dayKey;
    }
    requestAnimationFrame(update);
  }
  update();
})();
</script>
</body>
</html>

Compare with

GPT-6.1 Sol: other attempts