Run details
- Model
- poolside/laguna-s-2.1
- Route
- OpenRouter API, one user message
- Reasoning
- provider default
- Limits
- 60 min · 131,072 output tokens
- Date
- 21 Oct 2026
- Time
- 25 s
- Size
- 9.7 kB
- Tokens
- 118 in, 3,021 out
- List price
- <$0.001 ($0.09 in / $0.18 out per M)
- Paid
- <$0.001
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
9.7 kB 295 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 {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
font-family: 'Courier New', monospace;
overflow: hidden;
}
.watch-container {
position: relative;
width: 400px;
height: 400px;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}
.watch-case {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle, #c5a880 0%, #a67c52 30%, #8b5a2b 60%, #654321 100%);
border: 8px solid #5d4037;
box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0.6),
0 0 40px rgba(165, 124, 89, 0.4),
0 0 80px rgba(139, 90, 43, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.bezel {
position: absolute;
width: 95%;
height: 95%;
border-radius: 50%;
border: 2px solid #3e2723;
z-index: 2;
}
.dial {
position: relative;
width: 75%;
height: 75%;
border-radius: 50%;
background: radial-gradient(circle, #2c2c3a 0%, #1a1a26 100%);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}
/* Hour markers */
.marker {
position: absolute;
width: 6px;
height: 20px;
background: linear-gradient(to bottom, #e0e0e0 0%, #a0a0a0 100%);
border-radius: 3px;
box-shadow: 0 0 8px rgba(224, 224, 224, 0.6);
z-index: 3;
}
/* Hour numbers */
.number {
position: absolute;
font-size: 24px;
font-weight: 300;
color: #e0e0e0;
text-shadow: 0 0 10px rgba(224, 224, 224, 0.7);
z-index: 3;
letter-spacing: 2px;
}
/* Date window */
.date-window {
position: absolute;
top: 25%;
right: 10%;
width: 45px;
height: 25px;
background: rgba(26, 26, 38, 0.9);
border: 2px solid #5d4037;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: #e0e0e0;
text-shadow: 0 0 5px rgba(224, 224, 224, 0.7);
z-index: 4;
box-shadow: 0 0 10px rgba(165, 124, 89, 0.3);
}
/* Hands */
.hand {
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom center;
z-index: 5;
}
.hour-hand {
width: 8px;
height: 35%;
background: linear-gradient(to bottom, #37474f 0%, #263238 100%);
border-radius: 4px;
box-shadow: 0 0 6px rgba(55, 71, 79, 0.8);
}
.minute-hand {
width: 6px;
height: 45%;
background: linear-gradient(to bottom, #455a64 0%, #37474f 100%);
border-radius: 3px;
box-shadow: 0 0 6px rgba(69, 90, 100, 0.8);
}
.second-hand {
width: 2px;
height: 42%;
background: linear-gradient(to bottom, #ff5252 0%, #d32f2f 100%);
border-radius: 1px;
box-shadow: 0 0 6px rgba(255, 82, 82, 0.8);
z-index: 6;
}
/* Center cap */
.center-cap {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: radial-gradient(circle, #a67c52 0%, #654321 100%);
border: 2px solid #3e2723;
z-index: 7;
box-shadow: 0 0 10px rgba(165, 124, 89, 0.5);
}
.sweep {
position: absolute;
width: 120%;
height: 120%;
top: -10%;
left: -10%;
border-radius: 50%;
pointer-events: none;
z-index: 4;
opacity: 0;
animation: sweep-animation 60s infinite;
}
.sweep::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border-top: 2px solid rgba(255, 82, 82, 0.4);
}
@keyframes sweep-animation {
0% { transform: rotate(0deg); opacity: 0; }
1% { opacity: 0.6; }
85% { opacity: 0; }
100% { transform: rotate(360deg); opacity: 0; }
}
.brand-name {
position: absolute;
top: 8%;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
font-weight: 400;
color: #a67c52;
letter-spacing: 3px;
text-shadow: 0 0 8px rgba(166, 124, 82, 0.7);
z-index: 3;
}
</style>
</head>
<body>
<div class="watch-container">
<div class="watch-case">
<div class="bezel"></div>
<div class="brand-name">MECHANICAL</div>
<div class="dial">
<div class="date-window" id="dateWindow">12</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const dateWindow = document.getElementById('dateWindow');
const today = new Date();
const day = today.getDate();
dateWindow.textContent = day < 10 ? '0' + day : day;
});
</script>
<div class="sweep"></div>
<div class="hand hour-hand" id="hourHand"></div>
<div class="hand minute-hand" id="minuteHand"></div>
<div class="hand second-hand" id="secondHand"></div>
<div class="center-cap"></div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const hourHand = document.getElementById('hourHand');
const minuteHand = document.getElementById('minuteHand');
const secondHand = document.getElementById('secondHand');
const dateWindow = document.getElementById('dateWindow');
// Create hour markers
const dial = document.querySelector('.dial');
for (let i = 1; i <= 12; i++) {
const marker = document.createElement('div');
marker.classList.add('marker');
// Make every 3rd marker (12, 3, 6, 9) slightly larger/bolder
if (i % 3 === 0) {
marker.style.height = '30px';
marker.style.width = '8px';
marker.style.boxShadow = '0 0 12px rgba(224, 224, 224, 0.8)';
}
const angle = (i * 30) - 90;
const radian = angle * Math.PI / 180;
const x = 50 + 40 * Math.cos(radian);
const y = 50 + 40 * Math.sin(radian);
marker.style.left = x + '%';
marker.style.top = y + '%';
marker.style.transform = 'rotate(' + angle + 'deg)';
dial.appendChild(marker);
// Add numbers
const number = document.createElement('div');
number.classList.add('number');
number.textContent = i;
const numAngle = (i * 30) - 90;
const numRadian = numAngle * Math.PI / 180;
const numRadius = 32;
const numX = 50 + numRadius * Math.cos(numRadian);
const numY = 50 + numRadius * Math.sin(numRadian);
number.style.left = numX + '%';
number.style.top = numY + '%';
number.style.transform = 'translate(-50%, -50%)';
dial.appendChild(number);
}
function updateTime() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
// Update date
dateWindow.textContent = now.getDate() < 10 ? '0' + now.getDate() : now.getDate();
// Calculate rotations
const secondDeg = seconds * 6; // 360/60 = 6 degrees per second
const minuteDeg = minutes * 6 + seconds * 0.1; // 360/60 = 6 degrees per minute, plus small adjustment for seconds
const hourDeg = hours * 30 + minutes * 0.5; // 360/12 = 30 degrees per hour, plus small adjustment for minutes
// Apply rotations
secondHand.style.transform = 'rotate(' + secondDeg + 'deg)';
minuteHand.style.transform = 'rotate(' + minuteDeg + 'deg)';
hourHand.style.transform = 'rotate(' + hourDeg + 'deg)';
}
// Update time immediately
updateTime();
// Update every second
setInterval(updateTime, 1000);
});
</script>
</body>
</html>
