Run details
- Model
- stepfun/step-5-preview
- Route
- OpenRouter API, one user message
- Reasoning
- provider default
- Limits
- 60 min · 64,000 output tokens
- Date
- 21 Oct 2026
- Time
- 22 s
- Size
- 15 kB
- Tokens
- 86 in, 4,887 out
- List price
- $0.013 ($1 in / $2.7 out per M)
- Paid
- $0.013
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
15 kB 441 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Luxury Mechanical Watch</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: radial-gradient(circle at 50% 30%, #2a2a35, #0a0a0f);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
.watch-stage {
position: relative;
width: 420px;
height: 560px;
display: flex;
flex-direction: column;
align-items: center;
filter: drop-shadow(0 40px 60px rgba(0,0,0,0.8));
}
/* Lugs & Strap */
.strap-top, .strap-bottom {
width: 90px;
height: 130px;
background: linear-gradient(90deg, #1a1a1a, #3a3a3a, #1a1a1a);
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 0;
}
.strap-top { top: -110px; border-radius: 20px 20px 0 0; box-shadow: inset 0 -5px 10px rgba(0,0,0,0.5); }
.strap-bottom { bottom: -110px; border-radius: 0 0 20px 20px; box-shadow: inset 0 5px 10px rgba(0,0,0,0.5); }
.lug {
width: 50px;
height: 45px;
background: linear-gradient(135deg, #c5a059, #8a6d3b, #d4af37);
position: absolute;
z-index: 1;
border-radius: 6px;
}
.lug.tl { top: -10px; left: 50%; transform: translateX(-115%) skewY(10deg); }
.lug.tr { top: -10px; left: 50%; transform: translateX(15%) skewY(-10deg); }
.lug.bl { bottom: -10px; left: 50%; transform: translateX(-115%) skewY(-10deg); }
.lug.br { bottom: -10px; left: 50%; transform: translateX(15%) skewY(10deg); }
/* Case */
.case {
width: 340px;
height: 340px;
border-radius: 50%;
background: linear-gradient(135deg, #f2d57e, #b8860b, #f2d57e, #8a6d3b, #f2d57e);
position: relative;
z-index: 2;
box-shadow:
0 10px 20px rgba(0,0,0,0.6),
inset 0 2px 5px rgba(255,255,255,0.6),
inset 0 -2px 5px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
}
/* Bezel */
.bezel {
width: 310px;
height: 310px;
border-radius: 50%;
background: linear-gradient(135deg, #d4af37, #f2d57e, #8a6d3b, #d4af37);
position: absolute;
box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
}
.bezel::after {
content: '';
position: absolute;
top: 5px; left: 5px; right: 5px; bottom: 5px;
border-radius: 50%;
background: linear-gradient(135deg, #f2d57e, #c5a059);
}
/* Crystal */
.crystal {
width: 290px;
height: 290px;
border-radius: 50%;
background: #111;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
}
.crystal::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
pointer-events: none;
z-index: 20;
}
/* Dial */
.dial {
width: 100%;
height: 100%;
border-radius: 50%;
background:
radial-gradient(circle at 30% 20%, #1a2a3a, #0d1520);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Guilloche pattern */
.dial::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 8px),
repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 8px);
border-radius: 50%;
}
/* Indices */
.index {
position: absolute;
width: 4px;
height: 18px;
background: linear-gradient(to bottom, #f2d57e, #c5a059);
left: 50%;
top: 12px;
transform-origin: 50% 133px;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.index.major { width: 6px; height: 28px; background: linear-gradient(to bottom, #fff, #c5a059); }
.index.twelve { width: 8px; height: 34px; background: linear-gradient(to bottom, #fff, #d4af37); }
/* Numbers */
.number {
position: absolute;
color: #e0c56e;
font-size: 28px;
font-weight: bold;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
font-family: 'Playfair Display', Georgia, serif;
}
/* Logo */
.logo {
position: absolute;
top: 85px;
text-align: center;
color: #d4af37;
font-size: 16px;
letter-spacing: 4px;
text-transform: uppercase;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
font-weight: bold;
}
.logo-sub {
font-size: 9px;
letter-spacing: 2px;
color: #a89050;
margin-top: 2px;
}
/* Text */
.dial-text {
position: absolute;
bottom: 75px;
color: #8a9bb0;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
/* Date Window */
.date-window {
position: absolute;
right: 35px;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 32px;
background: #f5f5f0;
border: 2px solid #c5a059;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #1a1a1a;
font-weight: bold;
box-shadow:
inset 0 2px 4px rgba(0,0,0,0.2),
0 2px 6px rgba(0,0,0,0.5);
z-index: 10;
font-family: Georgia, serif;
overflow: hidden;
}
.date-window::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 50%;
background: linear-gradient(to bottom, rgba(0,0,0,0.08), transparent);
pointer-events: none;
}
/* Hands */
.hand {
position: absolute;
left: 50%;
bottom: 50%;
transform-origin: 50% 100%;
border-radius: 4px;
z-index: 15;
}
.hand-hour {
width: 10px;
height: 85px;
background: linear-gradient(to bottom, #f2d57e, #c5a059);
margin-left: -5px;
box-shadow: 0 3px 6px rgba(0,0,0,0.7);
}
.hand-hour::after {
content: '';
position: absolute;
top: 8px; left: 50%;
transform: translateX(-50%);
width: 16px; height: 35px;
background: #1a2a3a;
border-radius: 2px;
border: 1px solid rgba(255,255,255,0.1);
}
.hand-minute {
width: 6px;
height: 115px;
background: linear-gradient(to bottom, #f2d57e, #c5a059);
margin-left: -3px;
box-shadow: 0 3px 6px rgba(0,0,0,0.7);
}
.hand-minute::after {
content: '';
position: absolute;
top: 10px; left: 50%;
transform: translateX(-50%);
width: 12px; height: 50px;
background: #1a2a3a;
border-radius: 2px;
border: 1px solid rgba(255,255,255,0.1);
}
.hand-second {
width: 2px;
height: 130px;
background: #d4af37;
margin-left: -1px;
box-shadow: 0 2px 4px rgba(0,0,0,0.7);
z-index: 16;
}
.hand-second::after {
content: '';
position: absolute;
bottom: -12px; left: 50%;
transform: translateX(-50%);
width: 8px; height: 8px;
background: #d4af37;
border-radius: 50%;
}
.hand-second::before {
content: '';
position: absolute;
top: 30px; left: 50%;
transform: translateX(-50%);
width: 5px; height: 5px;
background: #d4af37;
border-radius: 50%;
}
/* Center cap */
.center-cap {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 16px; height: 16px;
background: radial-gradient(circle at 30% 30%, #fff, #c5a059, #8a6d3b);
border-radius: 50%;
z-index: 17;
box-shadow: 0 2px 4px rgba(0,0,0,0.7);
}
/* Crown */
.crown {
position: absolute;
right: -18px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 40px;
background: linear-gradient(90deg, #8a6d3b, #d4af37, #8a6d3b);
border-radius: 4px;
z-index: 1;
box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.crown::after {
content: '';
position: absolute;
top: 3px; left: 3px; right: 3px; bottom: 3px;
background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px);
border-radius: 2px;
}
/* Reflection */
.glass-reflection {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.05) 30%,
transparent 50%,
rgba(255,255,255,0.03) 100%);
border-radius: 50%;
pointer-events: none;
z-index: 25;
}
/* Ambient glow */
.ambient-glow {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 70%);
pointer-events: none;
z-index: -1;
}
</style>
</head>
<body>
<div class="watch-stage">
<div class="ambient-glow"></div>
<div class="strap-top"></div>
<div class="strap-bottom"></div>
<div class="lug tl"></div>
<div class="lug tr"></div>
<div class="lug bl"></div>
<div class="lug br"></div>
<div class="case">
<div class="bezel"></div>
<div class="crystal">
<div class="dial" id="dial">
<div class="logo">Aurelius<br><div class="logo-sub">Genève</div></div>
<div class="dial-text">Automatic Chronometer</div>
<div class="date-window" id="dateWindow">15</div>
</div>
<div class="glass-reflection"></div>
</div>
<div class="crown"></div>
<div class="hand hand-hour" id="hourHand"></div>
<div class="hand hand-minute" id="minuteHand"></div>
<div class="hand hand-second" id="secondHand"></div>
<div class="center-cap"></div>
</div>
</div>
<script>
// Generate indices
const dial = document.getElementById('dial');
for (let i = 0; i < 60; i++) {
const index = document.createElement('div');
index.className = 'index';
if (i % 5 === 0) {
index.classList.add('major');
if (i === 0) index.classList.add('twelve');
}
index.style.transform = `rotate(${i * 6}deg)`;
dial.appendChild(index);
}
// Numbers (skip 3 and 6 for complication placement, standard practice varies but let's put 12, 6, 9 and skip 3 for date)
const numbers = [
{ num: '12', angle: 0 },
{ num: '1', angle: 30 },
{ num: '2', angle: 60 },
{ num: '4', angle: 120 },
{ num: '5', angle: 150 },
{ num: '6', angle: 180 },
{ num: '7', angle: 210 },
{ num: '8', angle: 240 },
{ num: '9', angle: 270 },
{ num: '10', angle: 300 },
{ num: '11', angle: 330 }
];
numbers.forEach(n => {
const el = document.createElement('div');
el.className = 'number';
el.textContent = n.num;
const radius = 110;
const rad = (n.angle - 90) * Math.PI / 180;
const x = 145 + radius * Math.cos(rad);
const y = 145 + radius * Math.sin(rad);
el.style.left = x + 'px';
el.style.top = y + 'px';
el.style.transform = 'translate(-50%, -50%)';
dial.appendChild(el);
});
const hourHand = document.getElementById('hourHand');
const minuteHand = document.getElementById('minuteHand');
const secondHand = document.getElementById('secondHand');
const dateWindow = document.getElementById('dateWindow');
function updateWatch() {
const now = new Date();
const ms = now.getMilliseconds();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
const date = now.getDate();
// Smooth sweeping seconds (mechanical feel)
const smoothSeconds = seconds + (ms / 1000);
const secondDeg = smoothSeconds * 6;
const minuteDeg = minutes * 6 + (seconds * 0.1);
const hourDeg = (hours % 12) * 30 + (minutes * 0.5);
secondHand.style.transform = `rotate(${secondDeg}deg)`;
minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
hourHand.style.transform = `rotate(${hourDeg}deg)`;
// Update date if changed
const dateStr = date < 10 ? '0' + date : date.toString();
if (dateWindow.textContent !== dateStr) {
dateWindow.textContent = dateStr;
}
requestAnimationFrame(updateWatch);
}
updateWatch();
</script>
</body>
</html>
