Run details
- Model
- meta/muse-ember
- Route
- OpenRouter API, one user message
- Served by
- Meta
- Effort
- max, OpenRouter's default for this model
- Limits
- 60 min · 943,718 output tokens (the model's limit)
- Date
- 9 Nov 2026
- Time
- 40 s
- Size
- 18 kB
- Tokens
- 84 in, 22,540 out (15,778 of them thinking)
- List price
- $0.011 at today's price ($0.10 in / $0.50 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
18 kB 399 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AURELE — Automatic Tourbillon</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
background:radial-gradient(ellipse at 50% 36%,#2b241c 0%,#131318 46%,#050506 100%);
color:#e8ddd0;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
display:grid;place-items:center;overflow:hidden;position:relative;
}
body::after{
content:"";position:fixed;inset:0;pointer-events:none;
background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.62) 100%);
}
.corner{
position:absolute;z-index:5;font-size:9px;letter-spacing:3px;
text-transform:uppercase;color:rgba(216,190,140,.58);white-space:nowrap;
}
.tl{top:26px;left:30px}.tr{top:26px;right:30px;text-align:right}
.bl{bottom:26px;left:30px}.br{bottom:26px;right:30px;text-align:right}
.scene{position:relative;display:flex;flex-direction:column;align-items:center;perspective:1200px;z-index:2}
.halo{
position:absolute;top:44%;left:50%;width:760px;height:760px;border-radius:50%;
transform:translate(-50%,-50%);pointer-events:none;
background:radial-gradient(circle,rgba(212,175,116,.17),rgba(212,175,116,.05) 42%,transparent 66%);
}
.tilt{transform-style:preserve-3d;will-change:transform}
.watch{
position:relative;display:flex;flex-direction:column;align-items:center;
user-select:none;-webkit-user-select:none;
filter:drop-shadow(0 34px 52px rgba(0,0,0,.78));
}
/* ---------- strap ---------- */
.strap{
width:164px;height:195px;position:relative;z-index:1;overflow:hidden;
background-color:#1c120d;
background-image:
radial-gradient(ellipse at 30% 18%,rgba(255,255,255,.08),transparent 52%),
repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 2px,transparent 2px 7px),
repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 3px,transparent 3px 10px),
linear-gradient(180deg,#2d1e15,#17100c 58%,#0f0907);
box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),inset -14px 0 22px rgba(0,0,0,.55),inset 14px 0 22px rgba(0,0,0,.55);
}
.strap::before{
content:"";position:absolute;inset:10px 12px;border-radius:10px;
border:1.5px dashed rgba(203,165,105,.55);
}
.strap-top{margin-bottom:-78px;border-radius:18px 18px 6px 6px}
.strap-bottom{margin-top:-78px;border-radius:6px 6px 18px 18px}
.buckle{
position:absolute;top:16px;left:50%;transform:translateX(-50%);
width:92px;height:54px;border:5px solid #c9a35f;border-radius:8px;
box-shadow:0 3px 8px rgba(0,0,0,.6),inset 0 1px 2px rgba(255,240,200,.8);
}
.buckle span{position:absolute;left:50%;top:7px;bottom:7px;width:2px;background:#c9a35f;transform:translateX(-50%)}
.keeper{
position:absolute;left:8px;right:8px;height:20px;
background:linear-gradient(180deg,#2f2017,#150e0a);
border-top:1px solid rgba(201,163,95,.38);border-bottom:1px solid rgba(0,0,0,.85);
box-shadow:0 2px 5px rgba(0,0,0,.5);
}
.keeper.upper{top:90px}
.keeper.lower{top:86px;height:18px}
.holes{
position:absolute;left:50%;top:148px;width:10px;height:88px;
transform:translate(-50%,-50%);
background-image:radial-gradient(circle,#050303 3.5px,#4a3423 4.5px,transparent 5.5px);
background-size:10px 26px;background-repeat:repeat-y;
}
/* ---------- case ---------- */
.case{
position:relative;width:360px;height:360px;z-index:2;border-radius:50%;
background:conic-gradient(from 210deg,#f7f7fa,#8f8f9a,#e9e9ee,#6f6f7b,#d7d7de,#898995,#f2f2f6,#777783,#f7f7fa);
box-shadow:0 26px 60px rgba(0,0,0,.8),0 4px 12px rgba(0,0,0,.6),inset 0 2px 2px rgba(255,255,255,.9),inset 0 -3px 6px rgba(0,0,0,.5);
}
.lug{position:absolute;width:26px;height:24px;border-radius:4px;z-index:1;background:linear-gradient(90deg,#8f8f9a,#ececf0 50%,#6f6f7b);box-shadow:0 2px 4px rgba(0,0,0,.5)}
.lug.tl{left:calc(50% - 56px);top:-9px}.lug.tr{left:calc(50% + 30px);top:-9px}
.lug.bl{left:calc(50% - 56px);bottom:-9px}.lug.br{left:calc(50% + 30px);bottom:-9px}
.bezel{
position:absolute;inset:4px;border-radius:50%;
background:repeating-conic-gradient(from 0deg,#f3c99b 0deg 3.6deg,#9c5a3c 3.6deg 7.2deg);
box-shadow:inset 0 2px 3px rgba(255,255,255,.85),inset 0 -3px 6px rgba(60,30,10,.65),0 1px 2px rgba(0,0,0,.4);
}
.bezel::after{
content:"";position:absolute;inset:11px;border-radius:50%;
background:linear-gradient(145deg,#eec39b,#b76e79 48%,#f6d1a8 76%,#8a4e38);
box-shadow:inset 0 1px 2px rgba(255,255,255,.85),inset 0 -2px 4px rgba(0,0,0,.45);
}
.crown{
position:absolute;right:-16px;top:50%;transform:translateY(-50%);
width:20px;height:32px;border-radius:5px;z-index:1;
background:repeating-linear-gradient(90deg,#e6c08a 0 3px,#8a5a2e 3px 5px);
box-shadow:0 2px 5px rgba(0,0,0,.6),inset 0 1px 2px rgba(255,255,255,.7);
}
.crown::after{
content:"A";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:Didot,"Bodoni MT",Georgia,serif;font-size:11px;font-weight:700;color:#3a2410;
}
.pusher{
position:absolute;right:-9px;width:13px;height:18px;border-radius:4px;z-index:1;
background:linear-gradient(90deg,#d7d7de,#8f8f9a,#f0f0f4);box-shadow:0 2px 4px rgba(0,0,0,.55);
}
.pusher.top{top:30%;transform:rotate(18deg)}
.pusher.bottom{top:calc(70% - 18px);transform:rotate(-18deg)}
/* ---------- dial ---------- */
.dial{
position:absolute;inset:26px;border-radius:50%;overflow:hidden;z-index:2;
background:
repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.035) 0deg .8deg,transparent .8deg 2.4deg),
repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.02) 0 1px,transparent 1px 5px),
radial-gradient(circle at 38% 32%,#1d3455 0%,#0f2138 38%,#081426 68%,#040a16 100%);
box-shadow:inset 0 0 0 1px rgba(212,175,116,.35),inset 0 0 45px rgba(0,0,0,.85),inset 0 12px 24px rgba(0,0,0,.5);
}
.dial::before{
content:"";position:absolute;inset:7px;border-radius:50%;pointer-events:none;
border:1px solid rgba(212,175,116,.22);
}
.ticks,.indices{position:absolute;inset:0}
.tick{
position:absolute;left:50%;top:50%;width:1.5px;height:9px;margin:-4.5px 0 0 -.75px;
background:rgba(232,220,195,.72);border-radius:1px;
}
.tick.major{width:2.5px;height:13px;margin:-6.5px 0 0 -1.25px;background:#d8c49a}
.index{
position:absolute;left:50%;top:50%;width:6px;height:20px;margin:-10px 0 0 -3px;border-radius:2px;
background:linear-gradient(90deg,#7a5527,#f2d5a0 45%,#fff0c8 54%,#9c743d);
box-shadow:0 2px 4px rgba(0,0,0,.7),inset 0 0 2px rgba(0,0,0,.35);
}
.index.double{
width:16px;margin-left:-8px;
background:
linear-gradient(90deg,#6e4f22,#f2d5a0 55%,#9c743d) 0 0/5px 100% no-repeat,
linear-gradient(90deg,#6e4f22,#f2d5a0 55%,#9c743d) 100% 0/5px 100% no-repeat;
}
.brand{position:absolute;top:56px;left:0;right:0;text-align:center;z-index:3}
.logo{
width:22px;height:22px;margin:0 auto 5px;border:1px solid rgba(230,201,143,.85);border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:Didot,"Bodoni MT",Georgia,serif;font-size:12px;color:#e6c98f;
}
.brand .name{font-family:Didot,"Bodoni MT",Georgia,serif;font-size:20px;font-weight:500;letter-spacing:6px;padding-left:6px;color:#e6c98f;text-shadow:0 1px 2px #000}
.brand .sub{margin-top:4px;font-size:7.5px;letter-spacing:3.5px;padding-left:3px;text-transform:uppercase;color:rgba(230,201,143,.75)}
.lower-text{
position:absolute;left:0;right:0;top:calc(50% + 33px);text-align:center;z-index:3;
font-size:7.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(230,201,143,.82);
}
.swiss{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:6.5px;letter-spacing:2px;color:rgba(230,201,143,.6);z-index:3}
/* date window */
.date-window{
position:absolute;left:calc(50% + 108px);top:50%;transform:translate(-50%,-50%);z-index:4;padding:3px;border-radius:3px;
background:linear-gradient(145deg,#f0c98f,#9c6b3f 55%,#e6c08a);
box-shadow:0 3px 7px rgba(0,0,0,.75),inset 0 1px 1px rgba(255,255,255,.8);
}
.date-inner{
width:32px;height:24px;background:linear-gradient(180deg,#fdf8ec,#ece2c8);
display:flex;align-items:center;justify-content:center;
font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:17px;color:#111;
box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
}
/* tourbillon */
.tourbillon{
position:absolute;left:50%;top:calc(50% + 84px);transform:translate(-50%,-50%);
width:70px;height:70px;border-radius:50%;z-index:3;overflow:hidden;
background:radial-gradient(circle at 35% 30%,#182233,#05080f 72%);
border:2px solid #c9a35f;
box-shadow:inset 0 0 0 3px rgba(0,0,0,.8),inset 0 0 0 5px rgba(201,163,95,.35),0 4px 10px rgba(0,0,0,.65);
}
.tourbillon::before{
content:"";position:absolute;inset:10px;border-radius:50%;opacity:.55;
background:repeating-conic-gradient(from 0deg,rgba(201,163,95,.35) 0deg 10deg,transparent 10deg 20deg);
}
.cage{position:absolute;inset:7px;border-radius:50%;border:1.5px solid rgba(230,201,143,.9);animation:spin 60s linear infinite}
.arm{
position:absolute;left:50%;top:50%;width:50%;height:2px;margin-top:-1px;
background:linear-gradient(90deg,#e6c98f,#8a642f);transform-origin:0 50%;transform:rotate(var(--r));
}
.balance{
position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
border:2.5px solid #cbd5e1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
animation:swing .85s ease-in-out infinite alternate;
}
.balance::before{content:"";position:absolute;left:50%;top:50%;width:100%;height:2px;background:#e2e8f0;transform:translate(-50%,-50%)}
.jewel{
position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;z-index:2;
background:radial-gradient(circle at 30% 30%,#ff9a9a,#b91c1c 72%);box-shadow:0 0 5px rgba(255,0,0,.65);
}
/* hands */
.hand{position:absolute;left:50%}
.hour-hand{
width:13px;height:86px;top:calc(50% - 86px);margin-left:-6.5px;transform-origin:50% 100%;z-index:5;
background:linear-gradient(90deg,#6e4f22,#e8c88a 42%,#fff3d0 50%,#c19a55 58%,#5f421e);
clip-path:polygon(50% 0%,78% 68%,100% 100%,0% 100%,22% 68%);
filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.minute-hand{
width:9px;height:130px;top:calc(50% - 130px);margin-left:-4.5px;transform-origin:50% 100%;z-index:6;
background:linear-gradient(90deg,#6e4f22,#e8c88a 42%,#fff3d0 50%,#c19a55 58%,#5f421e);
clip-path:polygon(50% 0%,80% 72%,100% 100%,0% 100%,20% 72%);
filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.second-hand{
width:3px;height:168px;top:calc(50% - 138px);margin-left:-1.5px;transform-origin:50% 138px;z-index:7;border-radius:2px;
background:linear-gradient(90deg,#8a642f,#f6dd9f 45%,#fff0bd 55%,#8a642f);
box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.second-hand::after{
content:"";position:absolute;left:50%;top:138px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
background:radial-gradient(circle at 32% 30%,#ffeec0,#c9a35f 55%,#7a551f);
box-shadow:0 1px 4px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.25);
}
.center-cap{
position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;z-index:8;
background:radial-gradient(circle at 34% 30%,#fff0c8,#c9a35f 52%,#6e4f22);
box-shadow:0 2px 5px rgba(0,0,0,.7),inset 0 1px 1px rgba(255,255,255,.9);
}
.center-cap::after{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a2a2a,#050505)}
/* sapphire glass */
.glass{
position:absolute;inset:0;border-radius:50%;z-index:9;pointer-events:none;
background:linear-gradient(118deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.07) 22%,transparent 42%,transparent 68%,rgba(255,255,255,.05) 84%,transparent 100%);
}
.glass::before{
content:"";position:absolute;left:12%;top:6%;width:52%;height:34%;border-radius:50%;
background:radial-gradient(ellipse at center,rgba(255,255,255,.22),transparent 68%);
transform:rotate(-18deg);filter:blur(2px);
}
.glass::after{
content:"";position:absolute;right:14%;bottom:9%;width:34%;height:20%;border-radius:50%;
background:radial-gradient(ellipse,rgba(255,255,255,.09),transparent 70%);transform:rotate(-18deg);
}
/* caption */
.caption{margin-top:26px;text-align:center;position:relative;z-index:3}
.caption .title{font-family:Didot,"Bodoni MT",Georgia,serif;font-size:13px;letter-spacing:6px;padding-left:6px;text-transform:uppercase;color:#d8c49a}
.caption .time{margin-top:9px;font-size:11px;letter-spacing:3px;color:rgba(232,221,200,.68);font-variant-numeric:tabular-nums}
.caption .date-full{margin-top:5px;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(232,221,200,.4)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes swing{from{transform:rotate(-135deg)}to{transform:rotate(135deg)}}
@media (max-width:520px){.scaler{transform:scale(.78)}}
@media (max-width:380px){.scaler{transform:scale(.62)}}
@media (max-height:720px){.scaler{transform:scale(.84)}}
@media (max-height:600px){.scaler{transform:scale(.68)}}
@media (max-width:720px){.corner{display:none}}
</style>
</head>
<body>
<div class="corner tl">Maison Aurele — Genève</div>
<div class="corner tr">Calibre A-01 · In-House Automatic</div>
<div class="corner bl">Haute Horlogerie</div>
<div class="corner br">Sapphire Crystal · 41 mm</div>
<main class="scene" aria-label="Mechanical wristwatch showing the current local time">
<div class="halo"></div>
<div class="scaler">
<div class="tilt" id="tilt">
<div class="watch">
<div class="strap strap-top">
<div class="buckle"><span></span></div>
<div class="keeper upper"></div>
</div>
<div class="case">
<div class="lug tl"></div><div class="lug tr"></div>
<div class="lug bl"></div><div class="lug br"></div>
<div class="pusher top"></div>
<div class="pusher bottom"></div>
<div class="bezel"></div>
<div class="dial" id="dial">
<div class="ticks" id="ticks"></div>
<div class="indices" id="indices"></div>
<div class="brand">
<div class="logo">A</div>
<div class="name">AURELE</div>
<div class="sub">Genève</div>
</div>
<div class="lower-text">Automatique · Chronomètre</div>
<div class="date-window"><div class="date-inner" id="dateNum">1</div></div>
<div class="tourbillon">
<div class="cage">
<div class="arm" style="--r:0deg"></div>
<div class="arm" style="--r:120deg"></div>
<div class="arm" style="--r:240deg"></div>
<div class="balance"></div>
</div>
<div class="jewel"></div>
</div>
<div class="swiss">SWISS MADE</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 class="glass"></div>
</div>
<div class="crown"></div>
</div>
<div class="strap strap-bottom">
<div class="keeper lower"></div>
<div class="holes"></div>
</div>
</div>
</div>
</div>
<div class="caption">
<div class="title">Aurele Tourbillon</div>
<div class="time" id="digitalTime">--:--:--</div>
<div class="date-full" id="fullDate"></div>
</div>
</main>
<script>
// Build minute track
var ticksEl = document.getElementById('ticks');
for (var i = 0; i < 60; i++) {
var t = document.createElement('div');
t.className = 'tick' + (i % 5 === 0 ? ' major' : '');
t.style.transform = 'rotate(' + (i * 6) + 'deg) translateY(-140px)';
ticksEl.appendChild(t);
}
// Build applied hour indices (3 o'clock = date window, 6 o'clock = tourbillon)
var indicesEl = document.getElementById('indices');
for (var h = 0; h < 12; h++) {
if (h === 3 || h === 6) continue;
var el = document.createElement('div');
el.className = 'index' + (h === 0 ? ' double' : '');
el.style.transform = 'rotate(' + (h * 30) + 'deg) translateY(-118px)';
indicesEl.appendChild(el);
}
var hourHand = document.getElementById('hourHand');
var minuteHand = document.getElementById('minuteHand');
var secondHand = document.getElementById('secondHand');
var dateNum = document.getElementById('dateNum');
var digitalTime= document.getElementById('digitalTime');
var fullDate = document.getElementById('fullDate');
var tilt = document.getElementById('tilt');
// Gentle 3D tilt following the cursor
var targetX = 0, targetY = 0, curX = 0, curY = 0;
window.addEventListener('mousemove', function (e) {
targetY = (e.clientX / window.innerWidth - 0.5) * 8;
targetX = -(e.clientY / window.innerHeight - 0.5) * 8;
});
var lastDay = -1;
var lastSec = -1;
function pad(n){ return String(n).padStart(2,'0'); }
function tick(){
var now = new Date();
var ms = now.getMilliseconds();
// Sweeping seconds: continuous motion using milliseconds
var s = now.getSeconds() + ms / 1000;
var m = now.getMinutes() + s / 60;
var hr = (now.getHours() % 12) + m / 60;
secondHand.style.transform = 'rotate(' + (s * 6) + 'deg)';
minuteHand.style.transform = 'rotate(' + (m * 6) + 'deg)';
hourHand.style.transform = 'rotate(' + (hr * 30) + 'deg)';
if (now.getDate() !== lastDay) {
lastDay = now.getDate();
dateNum.textContent = lastDay;
fullDate.textContent = now.toLocaleDateString(undefined, {
weekday:'long', day:'numeric', month:'long', year:'numeric'
});
}
if (now.getSeconds() !== lastSec) {
lastSec = now.getSeconds();
digitalTime.textContent = pad(now.getHours()) + ':' + pad(now.getMinutes()) + ':' + pad(now.getSeconds());
}
curX += (targetX - curX) * 0.06;
curY += (targetY - curY) * 0.06;
tilt.style.transform = 'rotateX(' + curX.toFixed(3) + 'deg) rotateY(' + curY.toFixed(3) + 'deg)';
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
</script>
</body>
</html>
