Run details
- Model
- tencent/hy4-preview
- Route
- OpenRouter API, one user message
- Served by
- Cohere
- Effort
- high, OpenRouter's default for this model
- Limits
- 60 min · 64,000 output tokens (the model's limit)
- Date
- 23 Oct 2026
- Time
- 44 s
- Size
- 13 kB
- Tokens
- 96 in, 4,207 out (468 of them thinking)
- List price
- $0.010 at today's price ($0.751 in / $2.25 out per M)
- Paid
- $0.011
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
13 kB 420 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>
:root {
--watch-size: 420px;
--bezel-width: 35px;
--dial-size: calc(var(--watch-size) - (var(--bezel-width) * 2));
--gold: #e3c28d;
--steel-light: #f4f5f7;
--steel-mid: #b8bcc1;
--steel-dark: #4c5156;
--dial-blue: #0c182c;
--dial-light: #1f3a63;
}
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, #2a2d34 0%, #0d0e12 100%);
font-family: 'Times New Roman', Times, serif;
overflow: hidden;
}
/* Lugs (the metal attachments for the strap) */
.lugs {
position: absolute;
width: 140px;
height: calc(var(--watch-size) + 60px);
pointer-events: none;
}
.lug {
position: absolute;
width: 34px;
height: 90px;
background: linear-gradient(90deg, var(--steel-dark), var(--steel-light), var(--steel-mid), var(--steel-dark));
border-radius: 5px;
box-shadow: 2px 4px 10px rgba(0,0,0,0.5);
}
.lug.tl { top: -30px; left: 0; transform: rotate(-15deg); }
.lug.tr { top: -30px; right: 0; transform: rotate(15deg); }
.lug.bl { bottom: -30px; left: 0; transform: rotate(15deg); }
.lug.br { bottom: -30px; right: 0; transform: rotate(-15deg); }
/* Main Watch Case */
.watch-case {
position: relative;
width: var(--watch-size);
height: var(--watch-size);
border-radius: 50%;
background: conic-gradient(
var(--steel-mid) 0deg, var(--steel-light) 45deg, var(--steel-dark) 90deg, var(--steel-light) 135deg,
var(--steel-mid) 180deg, var(--steel-light) 225deg, var(--steel-dark) 270deg, var(--steel-light) 315deg, var(--steel-mid) 360deg
);
box-shadow:
15px 25px 40px rgba(0,0,0,0.7),
inset 0px 2px 5px rgba(255,255,255,0.8),
inset 0px -2px 5px rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
/* Fluted Bezel Ring */
.bezel {
position: absolute;
width: calc(var(--watch-size) - 12px);
height: calc(var(--watch-size) - 12px);
border-radius: 50%;
background: repeating-conic-gradient(
from 0deg,
var(--steel-light) 0deg,
var(--steel-mid) 1.5deg,
var(--steel-dark) 3deg,
var(--steel-mid) 4.5deg,
var(--steel-light) 6deg
);
box-shadow:
inset 0 0 15px rgba(0,0,0,0.6),
0 5px 15px rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
}
/* Polished inner bezel slope */
.inner-bezel {
position: absolute;
width: calc(var(--dial-size) + 16px);
height: calc(var(--dial-size) + 16px);
border-radius: 50%;
background: linear-gradient(135deg, #fff 0%, var(--gold) 25%, #8a6a35 50%, var(--gold) 75%, #fff 100%);
box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
/* Watch Dial */
.dial {
position: absolute;
width: var(--dial-size);
height: var(--dial-size);
border-radius: 50%;
background:
repeating-conic-gradient(from 0deg, rgba(255,255,255,0.02) 0deg 1deg, transparent 1deg 2deg),
radial-gradient(circle at center, var(--dial-light) 0%, var(--dial-blue) 70%, #050a14 100%);
box-shadow: inset 0 8px 25px rgba(0,0,0,0.9);
display: flex;
justify-content: center;
align-items: center;
}
/* Brand & Text */
.brand {
position: absolute;
top: 22%;
width: 100%;
text-align: center;
color: var(--gold);
font-size: 20px;
letter-spacing: 3px;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
z-index: 2;
}
.brand span {
display: block;
font-size: 9px;
letter-spacing: 2px;
color: var(--steel-mid);
margin-top: 4px;
font-family: sans-serif;
}
.swiss-made {
position: absolute;
bottom: 22%;
width: 100%;
text-align: center;
color: var(--steel-mid);
font-size: 10px;
letter-spacing: 1px;
font-family: sans-serif;
z-index: 2;
}
/* Ticks & Markers */
.marker {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.tick {
position: absolute;
left: 50%;
top: 2%;
transform-origin: 50% calc(var(--dial-size) / 2 - 4%);
}
.tick.minute {
width: 2px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
margin-left: -1px;
}
.tick.hour {
width: 6px;
height: 20px;
background: linear-gradient(to bottom, var(--gold), #b38741);
margin-left: -3px;
border-radius: 1px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.8);
top: 3.5%;
transform-origin: 50% calc(var(--dial-size) / 2 - 7%);
}
/* Date Window */
.date-window {
position: absolute;
right: 12%;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 26px;
background: #fdfdfd;
border: 2px solid var(--gold);
border-radius: 3px;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.4),
2px 2px 5px rgba(0,0,0,0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.date-text {
color: #111;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
line-height: 1;
transform: scaleY(1.1);
}
/* Watch Hands */
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom center;
border-radius: 4px 4px 0 0;
z-index: 10;
}
.hour-hand {
width: 8px;
height: 25%;
margin-left: -4px;
background: linear-gradient(to right, #fff, var(--gold) 50%, #b38741);
clip-path: polygon(50% 0%, 100% 20%, 80% 100%, 20% 100%, 0% 20%);
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.minute-hand {
width: 6px;
height: 38%;
margin-left: -3px;
background: linear-gradient(to right, #fff, var(--gold) 50%, #b38741);
clip-path: polygon(50% 0%, 100% 15%, 80% 100%, 20% 100%, 0% 15%);
box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
}
.second-hand {
width: 2px;
height: 45%;
margin-left: -1px;
background: #d32f2f;
border-radius: 2px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}
.second-hand::after {
content: '';
position: absolute;
bottom: -15%;
width: 2px;
height: 15%;
background: #d32f2f;
}
/* Center Pin */
.center-pin {
position: absolute;
width: 12px;
height: 12px;
background: radial-gradient(circle at center, var(--steel-light) 0%, var(--steel-dark) 100%);
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.6);
z-index: 11;
}
/* Crown */
.crown {
position: absolute;
right: -18px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 36px;
background: repeating-linear-gradient(
to bottom,
var(--steel-dark) 0px,
var(--steel-light) 2px,
var(--steel-mid) 4px,
var(--steel-dark) 6px
);
border-radius: 3px 6px 6px 3px;
box-shadow: 4px 2px 8px rgba(0,0,0,0.6);
z-index: -1;
}
.crown::before {
content: '';
position: absolute;
left: -6px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 20px;
background: linear-gradient(to bottom, var(--steel-dark), var(--steel-light), var(--steel-dark));
border-radius: 2px;
}
/* Sapphire Crystal Reflection */
.crystal {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.05) 100%);
pointer-events: none;
z-index: 20;
box-shadow: inset 0 0 20px rgba(255,255,255,0.1);
}
</style>
</head>
<body>
<div class="lugs">
<div class="lug tl"></div>
<div class="lug tr"></div>
<div class="lug bl"></div>
<div class="lug br"></div>
</div>
<div class="watch-case">
<div class="crown"></div>
<div class="bezel">
<div class="inner-bezel">
<div class="dial">
<div class="brand">
AURELIA
<span>CHRONOMETER</span>
</div>
<div class="swiss-made">SWISS MADE</div>
<div class="date-window">
<div class="date-text" id="date-display">1</div>
</div>
<div class="marker-container" id="markers"></div>
<div class="hand hour-hand" id="hour-hand"></div>
<div class="hand minute-hand" id="minute-hand"></div>
<div class="hand second-hand" id="second-hand"></div>
<div class="center-pin"></div>
<div class="crystal"></div>
</div>
</div>
</div>
</div>
<script>
const markerContainer = document.getElementById('markers');
const dialSize = 350; // var(--dial-size) computing to approx 350px
// Generate Dial Markers
for (let i = 0; i < 60; i++) {
const tick = document.createElement('div');
tick.className = `tick ${i % 5 === 0 ? 'hour' : 'minute'}`;
tick.style.transform = `rotate(${i * 6}deg)`;
// Skip the 3 o'clock hour marker to make room for the date window
if (i === 15) {
tick.style.display = 'none';
}
markerContainer.appendChild(tick);
}
const hourHand = document.getElementById('hour-hand');
const minuteHand = document.getElementById('minute-hand');
const secondHand = document.getElementById('second-hand');
const dateDisplay = document.getElementById('date-display');
let lastDate = -1;
function updateTime() {
const now = new Date();
// Get time components
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const milliseconds = now.getMilliseconds();
const date = now.getDate();
// Continuous sweep calculations
const secondsAngle = (seconds + milliseconds / 1000) * 6;
const minutesAngle = (minutes + seconds / 60) * 6;
const hoursAngle = ((hours % 12) + minutes / 60) * 30;
// Apply rotations
secondHand.style.transform = `rotate(${secondsAngle}deg)`;
minuteHand.style.transform = `rotate(${minutesAngle}deg)`;
hourHand.style.transform = `rotate(${hoursAngle}deg)`;
// Update date if changed
if (date !== lastDate) {
dateDisplay.textContent = date;
lastDate = date;
}
// Use requestAnimationFrame for fluid sweeping motion
requestAnimationFrame(updateTime);
}
// Start the clock
requestAnimationFrame(updateTime);
</script>
</body>
</html>
