Run details
- Model
- nvidia/nemotron-3.5-super-vl:free
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 9,254 reasoning tokens
- Limits
- 60 min · 131,072 output tokens
- Date
- 21 Oct 2026
- Time
- 78 s
- Size
- 11 kB
- Tokens
- 93 in, 13,533 out
- List price
- $0.007 ($0.15 in / $0.5 out per M)
- Paid
- $0 (free route)
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 419 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aurum — Mechanical Wristwatch</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: radial-gradient(circle at center, #121214 0%, #050507 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
color: #eaeaea;
font-family: Georgia, 'Times New Roman', Times, serif;
}
canvas {
display: block;
max-width: 92vw;
max-height: 92vh;
box-shadow: 0 0 80px rgba(0,0,0,0.9);
}
</style>
</head>
<body>
<canvas id="watch"></canvas>
<script>
const canvas = document.getElementById('watch');
const ctx = canvas.getContext('2d', { alpha: false });
const LOGICAL = 500;
const CX = LOGICAL / 2;
const CY = LOGICAL / 2;
const R = 200; // dial radius
let dpr = 1;
function resize() {
dpr = window.devicePixelRatio || 1;
const fit = Math.min(window.innerWidth, window.innerHeight) * 0.92;
canvas.width = LOGICAL * dpr;
canvas.height = LOGICAL * dpr;
canvas.style.width = fit + 'px';
canvas.style.height = fit + 'px';
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
window.addEventListener('resize', resize);
resize();
function save(fn) { ctx.save(); fn(); ctx.restore(); }
function toCenter() { ctx.translate(CX, CY); }
// Rounded rectangle helper (no reliance on roundRect)
function roundRect(x, y, w, h, r) {
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
ctx.lineTo(x + w, y + h - r);
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
ctx.lineTo(x + r, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
ctx.lineTo(x, y + r);
ctx.quadraticCurveTo(x, y, x + r, y);
ctx.closePath();
}
function radial(cx, cy, r0, r1, c0, c1) {
const g = ctx.createRadialGradient(cx, cy, r0, cx, cy, r1);
g.addColorStop(0, c0);
g.addColorStop(1, c1);
return g;
}
// ---------- Strap ----------
function drawStrap() {
save(() => {
toCenter();
const leather = '#5c4033';
const leatherDark = '#382418';
const stitch = '#c9b18e';
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
// Top strap
ctx.beginPath();
ctx.moveTo(-R - 30, -R - 10);
ctx.quadraticCurveTo(0, -R + 45, R + 30, -R - 10);
ctx.lineTo(R + 20, -R + 55);
ctx.quadraticCurveTo(0, -R + 105, -R - 20, -R + 55);
ctx.closePath();
ctx.fillStyle = radial(0, -R + 25, 0, 110, leather, leatherDark);
ctx.fill();
ctx.strokeStyle = stitch;
ctx.lineWidth = 2.5;
ctx.setLineDash([5, 5]);
ctx.stroke();
ctx.setLineDash([]);
// Bottom strap
ctx.beginPath();
ctx.moveTo(-R - 30, R + 10);
ctx.quadraticCurveTo(0, R - 45, R + 30, R + 10);
ctx.lineTo(R + 20, R - 55);
ctx.quadraticCurveTo(0, R - 105, -R - 20, R - 55);
ctx.closePath();
ctx.fillStyle = radial(0, R - 25, 0, 110, leather, leatherDark);
ctx.fill();
ctx.strokeStyle = stitch;
ctx.lineWidth = 2.5;
ctx.setLineDash([5, 5]);
ctx.stroke();
ctx.setLineDash([]);
});
}
// ---------- Case ----------
function drawCase() {
save(() => {
toCenter();
// Outer bezel (rose gold)
const bezel = radial(0, 0, 0, R + 22, '#e8c87a', '#7a521e');
ctx.beginPath();
ctx.arc(0, 0, R + 22, 0, Math.PI * 2);
ctx.fillStyle = bezel;
ctx.fill();
ctx.lineWidth = 6;
ctx.strokeStyle = '#5d3a15';
ctx.stroke();
// Inner flange
const flange = radial(0, 0, R + 6, R + 18, '#c9a55f', '#6b4018');
ctx.beginPath();
ctx.arc(0, 0, R + 18, 0, Math.PI * 2);
ctx.arc(0, 0, R + 6, 0, Math.PI * 2, true);
ctx.fillStyle = flange;
ctx.fill();
// Crystal rim highlight
ctx.beginPath();
ctx.arc(0, 0, R + 2, 0, Math.PI * 2);
ctx.strokeStyle = 'rgba(255,255,255,0.35)';
ctx.lineWidth = 2;
ctx.stroke();
// Crown at 3 o'clock
ctx.save();
ctx.translate(R + 22, 0);
ctx.rotate(Math.PI / 2);
const crownGrad = radial(0, 0, 0, 14, '#e8c87a', '#7a521e');
ctx.fillStyle = crownGrad;
roundRect(-8, -10, 16, 20, 3);
ctx.fill();
ctx.strokeStyle = '#5d3a15';
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.strokeStyle = 'rgba(0,0,0,0.25)';
for (let i = -6; i <= 6; i += 4) {
ctx.beginPath();
ctx.moveTo(i, -9);
ctx.lineTo(i, 9);
ctx.stroke();
}
ctx.restore();
// Lugs over strap
ctx.fillStyle = '#d4a76a';
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = 6;
roundRect(-14, -R - 30, 28, 22, 4);
ctx.fill();
roundRect(-14, R + 8, 28, 22, 4);
ctx.fill();
ctx.shadowBlur = 0;
});
}
// ---------- Dial ----------
function drawDial() {
save(() => {
toCenter();
// Silver sunburst dial
const dialGrad = radial(0, 0, 0, R, '#f2f2f2', '#c9c9c9');
ctx.beginPath();
ctx.arc(0, 0, R, 0, Math.PI * 2);
ctx.fillStyle = dialGrad;
ctx.fill();
// Guilloché texture: concentric waves
ctx.strokeStyle = 'rgba(0,0,0,0.05)';
ctx.lineWidth = 1;
for (let rr = 28; rr < R; rr += 13) {
ctx.beginPath();
ctx.arc(0, 0, rr, 0, Math.PI * 2);
ctx.stroke();
}
// Radial sunburst lines
ctx.strokeStyle = 'rgba(255,255,255,0.12)';
for (let i = 0; i < 60; i++) {
const a = (i / 60) * Math.PI * 2;
ctx.beginPath();
ctx.moveTo(Math.cos(a) * 36, Math.sin(a) * 36);
ctx.lineTo(Math.cos(a) * R, Math.sin(a) * R);
ctx.stroke();
}
// Chapter ring (minute / second track)
for (let i = 0; i < 60; i++) {
const a = (i / 60) * Math.PI * 2 - Math.PI / 2;
const long = (i % 5 === 0);
const len = long ? 16 : 7;
const w = long ? 3.5 : 1.2;
ctx.beginPath();
ctx.moveTo(Math.cos(a) * (R - len - 2), Math.sin(a) * (R - len - 2));
ctx.lineTo(Math.cos(a) * (R - 2), Math.sin(a) * (R - 2));
ctx.lineWidth = w;
ctx.strokeStyle = long ? '#8b6b3a' : '#5a5a5a';
ctx.stroke();
}
// Applied hour markers
ctx.lineCap = 'round';
for (let i = 0; i < 12; i++) {
const a = (i / 12) * Math.PI * 2 - Math.PI / 2;
const cardinal = (i % 3 === 0);
const outer = R - 24;
const inner = cardinal ? R - 56 : R - 40;
const thick = cardinal ? 7 : 5;
ctx.save();
ctx.rotate(a);
const markerGrad = radial(0, 0, 0, thick, '#f0d89e', '#b88624');
ctx.fillStyle = markerGrad;
ctx.shadowColor = 'rgba(0,0,0,0.4)';
ctx.shadowBlur = 3;
roundRect(-thick / 2, -outer, thick, outer - inner, 2);
ctx.fill();
ctx.shadowBlur = 0;
ctx.restore();
}
// Branding
ctx.fillStyle = '#4a3728';
ctx.font = 'bold 17px "Times New Roman", Times, serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('AURUM', 0, -64);
ctx.font = '11px "Times New Roman", Times, serif';
ctx.fillText('SWISS MADE', 0, 150);
// Center pivot / jewel
ctx.fillStyle = radial(0, 0, 0, 10, '#f0d89e', '#8b6b3a');
ctx.beginPath();
ctx.arc(0, 0, 10, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = '#5d3a15';
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.fillStyle = '#222';
ctx.beginPath();
ctx.arc(0, 0, 3, 0, Math.PI * 2);
ctx.fill();
});
}
// ---------- Date Window ----------
function drawDateWindow(date) {
save(() => {
toCenter();
const wx = R - 50; // 3 o'clock position inside dial
const wy = 0;
const w = 48;
const h = 30;
// Cyclops lens glow
const lensGrad = ctx.createRadialGradient(wx, wy, 2, wx, wy, 38);
lensGrad.addColorStop(0, 'rgba(255,255,255,0.25)');
lensGrad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = lensGrad;
ctx.beginPath();
ctx.arc(wx, wy, 38, 0, Math.PI * 2);
ctx.fill();
// Date window
ctx.beginPath();
roundRect(wx - w / 2, wy - h / 2, w, h, 7);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.strokeStyle = '#b88624';
ctx.lineWidth = 3;
ctx.stroke();
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(0,0,0,0.12)';
ctx.stroke();
// Date numeral
ctx.fillStyle = '#222';
ctx.font = 'bold 20px "Times New Roman", Times, serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(String(date).padStart(2, '0'), wx, wy + 1);
});
}
// ---------- Hands ----------
function drawHand(angle, length, width, color, counterWeight) {
save(() => {
toCenter();
ctx.rotate(angle);
ctx.lineCap = 'round';
const grad = ctx.createLinearGradient(0, 14, 0, -length);
grad.addColorStop(0, color.light);
grad.addColorStop(1, color.dark);
ctx.fillStyle = grad;
ctx.shadowColor = 'rgba(0,0,0,0.45)';
ctx.shadowBlur = 6;
ctx.beginPath();
if (counterWeight) {
// Sweeping seconds: thin blade with counterweight
ctx.moveTo(-width / 2, 24);
ctx.lineTo(width / 2, 24);
ctx.lineTo(width / 2, -length + 8);
ctx.lineTo(-width / 2, -length + 8);
ctx.closePath();
} else {
// Spade style hour / minute
ctx.moveTo(-width / 2, 14);
ctx.lineTo(width / 2, 14);
ctx.lineTo(width * 0.6, -length * 0.55);
ctx.lineTo(0, -length + 7);
ctx.lineTo(-width * 0.6, -length * 0.55);
ctx.closePath();
}
ctx.fill();
ctx.shadowBlur = 0;
ctx.strokeStyle = 'rgba(0,0,0,0.2)';
ctx.lineWidth = 1;
ctx.stroke();
});
}
function drawHands(hours, minutes, totalSeconds) {
const secAngle = (totalSeconds / 60) * Math.PI * 2 - Math.PI / 2;
const minAngle = ((minutes + totalSeconds / 60) / 60) * Math.PI * 2 - Math.PI / 2;
const hourAngle = (((hours % 12) + minutes / 60 + totalSeconds / 3600) / 12) * Math.PI * 2 - Math.PI / 2;
drawHand(hourAngle, 82, 9, { light: '#e8c87a', dark: '#8b6b3a' });
drawHand(minAngle, 132, 6, { light: '#e8c87a', dark: '#8b6b3a' });
drawHand(secAngle, 168, 2.2, { light: '#5a6b8a', dark: '#2c3e50' }, true);
// Center cap
save(() => {
toCenter();
ctx.fillStyle = radial(0, 0, 0, 8, '#f0d89e', '#8b6b3a');
ctx.beginPath();
ctx.arc(0, 0, 8, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = '#5d3a15';
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.fillStyle = '#222';
ctx.beginPath();
ctx.arc(0, 0, 2.5, 0, Math.PI * 2);
ctx.fill();
});
}
// ---------- Glare ----------
function drawGlare() {
save(() => {
toCenter();
const g = ctx.createRadialGradient(-90, -90, 20, 0, 0, R + 30);
g.addColorStop(0, 'rgba(255,255,255,0.30)');
g.addColorStop(0.35, 'rgba(255,255,255,0.04)');
g.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = g;
ctx.beginPath();
ctx.arc(0, 0, R + 24, 0, Math.PI * 2);
ctx.fill();
// Top rim reflection
ctx.beginPath();
ctx.arc(0, 0, R + 16, Math.PI * 1.25, Math.PI * 1.95);
ctx.strokeStyle = 'rgba(255,255,255,0.45)';
ctx.lineWidth = 6;
ctx.lineCap = 'round';
ctx.stroke();
});
}
// ---------- Loop ----------
function draw() {
const now = new Date();
const h = now.getHours();
const m = now.getMinutes();
const s = now.getSeconds();
const ms = now.getMilliseconds();
const totalSeconds = s + ms / 1000;
const date = now.getDate();
ctx.clearRect(0, 0, LOGICAL, LOGICAL);
drawStrap();
drawCase();
drawDial();
drawDateWindow(date);
drawHands(h, m, totalSeconds);
drawGlare();
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
