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
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>

