Run details
- Model
- mistralai/mistral-large-4-0
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 9,319 reasoning tokens
- Limits
- 60 min · 143,540 output tokens
- Date
- 21 Oct 2026
- Time
- 1 min 59 s
- Size
- 11 kB
- Tokens
- 81 in, 13,438 out
- List price
- $0.056 ($1.36 in / $4.18 out per M)
- Paid
- $0.056
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
11 kB 267 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Aureus Automatic — Local Time</title>
<style>
:root{ color-scheme:dark; }
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
background:
radial-gradient(120% 90% at 50% 10%, #18202b 0%, #070a10 55%, #020304 100%);
overflow:hidden;
user-select:none;
-webkit-user-select:none;
font-family:Georgia,'Times New Roman',serif;
}
.stage{
height:100vh;
display:grid;
place-items:center;
overflow:hidden;
}
.scaler{
width:560px; height:560px;
position:relative;
transform-origin:center center;
}
.watch{ position:absolute; inset:0; }
/* bracelet */
.strap{
position:absolute; left:50%; transform:translateX(-50%);
width:252px; height:235px; z-index:0;
border-radius:18px;
background:
repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 2px, rgba(0,0,0,.22) 2px 5px, rgba(255,255,255,0) 5px 36px),
repeating-linear-gradient(90deg, rgba(20,22,26,.55) 0 3px, rgba(255,255,255,0) 3px 82px, rgba(20,22,26,.55) 82px 86px, rgba(255,255,255,0) 86px 166px, rgba(20,22,26,.55) 166px 170px, rgba(255,255,255,0) 170px 252px),
linear-gradient(90deg,#c7ccd2 0 33%, #e9c75f 33% 66%, #c7ccd2 66% 100%);
box-shadow:
0 18px 35px rgba(0,0,0,.65),
inset 0 3px 5px rgba(255,255,255,.55),
inset 0 -8px 14px rgba(0,0,0,.55);
}
.strap.top{ top:-208px; clip-path:polygon(12% 0,88% 0,100% 100%,0 100%); }
.strap.bottom{ bottom:-208px; clip-path:polygon(0 0,100% 0,88% 100%,12% 100%); }
.strap.bottom::after{
content:""; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
width:112px; height:24px; border-radius:6px;
background:linear-gradient(180deg,#ffe58a,#a97c22 55%,#5e430f);
box-shadow:inset 0 2px 2px rgba(255,255,255,.7), inset 0 -3px 5px rgba(0,0,0,.5);
}
/* case */
.case{
position:absolute; inset:0; z-index:2; border-radius:50%;
background:conic-gradient(from 220deg at 50% 50%,
#ffffff 0deg, #aeb6bf 38deg, #f5f7f9 78deg, #6e767f 128deg,
#e9edf0 170deg, #8b939c 218deg, #ffffff 258deg, #79818a 318deg, #ffffff 360deg);
box-shadow:
0 34px 70px rgba(0,0,0,.72),
0 8px 18px rgba(0,0,0,.55),
inset 0 3px 6px rgba(255,255,255,.75),
inset 0 -12px 24px rgba(0,0,0,.5);
}
.bezel{
position:absolute; inset:16px; z-index:3; border-radius:50%;
background:repeating-conic-gradient(from 0deg,
#fff0a8 0deg 4.5deg, #c99a2c 4.5deg 9deg, #5e430f 9deg 11.5deg,
#f6d76e 11.5deg 16deg, #8a641f 16deg 22deg);
-webkit-mask:radial-gradient(closest-side, transparent 76%, #000 77%);
mask:radial-gradient(closest-side, transparent 76%, #000 77%);
filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));
}
.dial{
position:absolute; inset:58px; z-index:4; border-radius:50%; overflow:hidden;
background:
repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.055) 0deg 1.1deg, rgba(0,0,0,.055) 1.1deg 2.2deg, rgba(0,0,0,0) 2.2deg 5deg),
radial-gradient(circle at 50% 42%, #1d639f 0%, #0e3c6b 34%, #081b34 68%, #030a16 100%);
box-shadow:
inset 0 0 70px rgba(0,0,0,.72),
inset 0 0 0 3px rgba(255,255,255,.07),
inset 0 0 0 8px rgba(0,0,0,.28);
}
.dial svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.crystal{
position:absolute; inset:58px; z-index:5; border-radius:50%; pointer-events:none;
background:
radial-gradient(115% 85% at 30% 18%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 34%, rgba(255,255,255,0) 58%),
radial-gradient(80% 55% at 72% 88%, rgba(150,215,255,.13) 0%, rgba(255,255,255,0) 62%);
box-shadow:
inset 0 0 45px rgba(255,255,255,.08),
inset 0 -24px 45px rgba(0,0,0,.38),
inset 0 2px 3px rgba(255,255,255,.35);
}
.crystal::after{
content:""; position:absolute; left:12%; top:8%; width:52%; height:24%;
border-radius:50%; transform:rotate(-24deg);
background:linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,0));
filter:blur(2px);
}
.crown{
position:absolute; right:-42px; top:50%; transform:translateY(-50%);
width:58px; height:82px; z-index:6; border-radius:14px;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 3px, rgba(0,0,0,.38) 3px 7px, rgba(255,255,255,.16) 7px 12px),
linear-gradient(180deg,#ffe89a 0%,#b98a24 48%,#5e430f 100%);
box-shadow:
6px 8px 16px rgba(0,0,0,.6),
inset 0 2px 3px rgba(255,255,255,.75),
inset 0 -5px 8px rgba(0,0,0,.55);
}
.crown::before{
content:""; position:absolute; left:-18px; top:50%; transform:translateY(-50%);
width:24px; height:34px; border-radius:6px;
background:linear-gradient(90deg,#7d858e,#f2f4f6 45%,#697078);
box-shadow:inset 0 2px 2px rgba(255,255,255,.6), inset 0 -3px 5px rgba(0,0,0,.5);
}
.brand text{ paint-order:stroke; stroke:rgba(0,0,0,.65); stroke-width:1px; }
</style>
</head>
<body>
<main class="stage">
<div class="scaler" id="scaler">
<div class="watch" role="img" aria-label="Luxury mechanical wristwatch showing the current local time">
<div class="strap top"></div>
<div class="strap bottom"></div>
<div class="case"></div>
<div class="bezel"></div>
<div class="dial">
<svg viewBox="0 0 520 520" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="gold" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#fff3b0"/>
<stop offset=".35" stop-color="#d8a937"/>
<stop offset=".68" stop-color="#8a641f"/>
<stop offset="1" stop-color="#f7dc7a"/>
</linearGradient>
<linearGradient id="goldText" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#fff6c4"/>
<stop offset=".5" stop-color="#d6ad3a"/>
<stop offset="1" stop-color="#7c5a17"/>
</linearGradient>
<linearGradient id="steel" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset=".45" stop-color="#aeb6bf"/>
<stop offset="1" stop-color="#f2f4f6"/>
</linearGradient>
<radialGradient id="cyclops" cx="35%" cy="28%" r="78%">
<stop offset="0" stop-color="rgba(255,255,255,.55)"/>
<stop offset=".34" stop-color="rgba(205,235,255,.13)"/>
<stop offset=".78" stop-color="rgba(0,0,0,.08)"/>
<stop offset="1" stop-color="rgba(0,0,0,.3)"/>
</radialGradient>
<filter id="ds" x="-60%" y="-60%" width="220%" height="220%">
<feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#000000" flood-opacity="0.58"/>
</filter>
<clipPath id="dateClip">
<rect x="342" y="242" width="76" height="36" rx="5"/>
</clipPath>
</defs>
<g id="markers" filter="url(#ds)"></g>
<g class="brand">
<path d="M260 116 l11 13 -11 13 -11 -13 z" fill="url(#gold)" opacity=".95"/>
<text x="260" y="164" text-anchor="middle" font-size="34" letter-spacing="7" fill="url(#goldText)">AUREUS</text>
<text x="260" y="190" text-anchor="middle" font-size="11" letter-spacing="5" fill="#d8e7f6" opacity=".86">AUTOMATIC</text>
<text x="260" y="389" text-anchor="middle" font-size="10" letter-spacing="3" fill="#c8d8e8" opacity=".78">SWISS MADE</text>
</g>
<g id="datewin">
<rect x="338" y="238" width="84" height="44" rx="7" fill="#f8f6ef" stroke="url(#gold)" stroke-width="3"/>
<rect x="342" y="242" width="76" height="36" rx="5" fill="#fffdf6" stroke="rgba(0,0,0,.25)" stroke-width="1"/>
<g clip-path="url(#dateClip)">
<text id="dateText" x="380" y="271" text-anchor="middle" font-family="Arial,Helvetica,sans-serif" font-weight="700" font-size="30" fill="#101114" transform="translate(380 260) scale(1.16) translate(-380 -260)">1</text>
</g>
</g>
<g id="hourHand" filter="url(#ds)">
<path d="M260 104 L270 176 L274 252 L268 292 L252 292 L246 252 L250 176 Z" fill="url(#gold)" stroke="#4a340c" stroke-width="1.2"/>
<line x1="260" y1="132" x2="260" y2="252" stroke="#dff6ff" stroke-width="9" stroke-linecap="round" opacity=".78"/>
</g>
<g id="minHand" filter="url(#ds)">
<path d="M260 64 L268 150 L272 240 L266 306 L254 306 L248 240 L252 150 Z" fill="url(#gold)" stroke="#4a340c" stroke-width="1.1"/>
<line x1="260" y1="96" x2="260" y2="244" stroke="#dff6ff" stroke-width="6" stroke-linecap="round" opacity=".78"/>
</g>
<g id="secHand" filter="url(#ds)">
<line x1="260" y1="318" x2="260" y2="58" stroke="url(#gold)" stroke-width="4" stroke-linecap="round"/>
<circle cx="260" cy="318" r="13" fill="url(#gold)" stroke="#5b4210" stroke-width="1"/>
<circle cx="260" cy="70" r="5" fill="#fff3b0" stroke="#5b4210" stroke-width="1"/>
</g>
<circle cx="260" cy="260" r="17" fill="url(#steel)" stroke="#ffffff" stroke-width="1"/>
<circle cx="260" cy="260" r="6.5" fill="#0b1b2d"/>
<circle cx="257" cy="257" r="2" fill="#9fd8ff" opacity=".9"/>
<circle cx="380" cy="260" r="43" fill="url(#cyclops)" stroke="rgba(255,255,255,.35)" stroke-width="1"/>
</svg>
</div>
<div class="crystal"></div>
<div class="crown"></div>
</div>
</div>
</main>
<script>
(function(){
var NS = 'http://www.w3.org/2000/svg';
var markers = document.getElementById('markers');
var hourHand = document.getElementById('hourHand');
var minHand = document.getElementById('minHand');
var secHand = document.getElementById('secHand');
var dateText = document.getElementById('dateText');
var scaler = document.getElementById('scaler');
for (var i = 0; i < 60; i++) {
var angles = (i === 0) ? [-3.5, 3.5] : [i * 6];
var isHour = (i % 5 === 0);
for (var k = 0; k < angles.length; k++) {
var rOut = 224;
var rIn = isHour ? 188 : 207;
var ln = document.createElementNS(NS, 'line');
ln.setAttribute('x1', '260');
ln.setAttribute('y1', String(260 - rOut));
ln.setAttribute('x2', '260');
ln.setAttribute('y2', String(260 - rIn));
ln.setAttribute('stroke', 'url(#gold)');
ln.setAttribute('stroke-width', isHour ? '6.5' : '2.2');
ln.setAttribute('stroke-linecap', 'round');
ln.setAttribute('opacity', isHour ? '.98' : '.78');
ln.setAttribute('transform', 'rotate(' + angles[k] + ' 260 260)');
markers.appendChild(ln);
}
}
function update(){
var now = new Date();
var s = now.getSeconds() + now.getMilliseconds() / 1000;
var m = now.getMinutes() + s / 60;
var h = (now.getHours() % 12) + m / 60;
secHand.setAttribute('transform', 'rotate(' + (s * 6) + ' 260 260)');
minHand.setAttribute('transform', 'rotate(' + (m * 6) + ' 260 260)');
hourHand.setAttribute('transform', 'rotate(' + (h * 30) + ' 260 260)');
dateText.textContent = String(now.getDate());
requestAnimationFrame(update);
}
requestAnimationFrame(update);
function fit(){
var s = Math.min(1, (window.innerWidth * 0.96) / 560, (window.innerHeight * 0.96) / 1010);
scaler.style.transform = 'scale(' + s + ')';
}
window.addEventListener('resize', fit);
fit();
})();
</script>
</body>
</html>
