Run details
- Model
- deepseek/deepseek-v4.1-flash-1017
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 12,569 reasoning tokens
- Limits
- 60 min · 393,216 output tokens
- Date
- 21 Oct 2026
- Time
- 2 min 20 s
- Size
- 14 kB
- Tokens
- 79 in, 17,288 out
- List price
- $0.010 ($0.15 in / $0.6 out per M)
- Paid
- $0.009
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
14 kB 362 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Aurelius Genève — Automatique</title>
<style>
html,body{height:100%;margin:0;}
body{
display:flex;align-items:center;justify-content:center;
background:radial-gradient(ellipse at 50% 32%,#242b38 0%,#12161d 46%,#05070a 100%);
overflow:hidden;
}
.stage{
width:min(88vmin,660px);
aspect-ratio:1/1;
filter:drop-shadow(0 3.2vmin 4.5vmin rgba(0,0,0,.85));
}
svg{width:100%;height:100%;display:block;overflow:visible;}
</style>
</head>
<body>
<div class="stage">
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- ============ METALS ============ -->
<linearGradient id="caseGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fff8dc"/>
<stop offset="14%" stop-color="#e8ca82"/>
<stop offset="34%" stop-color="#a67e30"/>
<stop offset="50%" stop-color="#6d4f13"/>
<stop offset="66%" stop-color="#b78e3c"/>
<stop offset="86%" stop-color="#f2dc9a"/>
<stop offset="100%" stop-color="#fffdf0"/>
</linearGradient>
<linearGradient id="bezelGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fffbe8"/>
<stop offset="20%" stop-color="#dcbc6d"/>
<stop offset="45%" stop-color="#7b5a18"/>
<stop offset="55%" stop-color="#9a742a"/>
<stop offset="78%" stop-color="#f0d995"/>
<stop offset="100%" stop-color="#fffef5"/>
</linearGradient>
<linearGradient id="lugGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#8a6a22"/>
<stop offset="35%" stop-color="#e6c980"/>
<stop offset="60%" stop-color="#b98f3c"/>
<stop offset="100%" stop-color="#6b4d12"/>
</linearGradient>
<!-- ============ DIAL ============ -->
<radialGradient id="dialGrad" cx="50%" cy="40%" r="76%">
<stop offset="0%" stop-color="#21508f"/>
<stop offset="35%" stop-color="#163667"/>
<stop offset="68%" stop-color="#0c1e3d"/>
<stop offset="90%" stop-color="#071427"/>
<stop offset="100%" stop-color="#040b18"/>
</radialGradient>
<radialGradient id="vignette" cx="50%" cy="50%" r="50%">
<stop offset="72%" stop-color="#000000" stop-opacity="0"/>
<stop offset="100%" stop-color="#000000" stop-opacity="0.62"/>
</radialGradient>
<radialGradient id="glareGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.55"/>
<stop offset="55%" stop-color="#cfe4ff" stop-opacity="0.14"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</radialGradient>
<!-- ============ HANDS ============ -->
<linearGradient id="handLight" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#fff9e2"/>
<stop offset="55%" stop-color="#f3dd9d"/>
<stop offset="100%" stop-color="#c8a353"/>
</linearGradient>
<linearGradient id="handDark" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#a87e2c"/>
<stop offset="55%" stop-color="#c9a253"/>
<stop offset="100%" stop-color="#8a6520"/>
</linearGradient>
<linearGradient id="goldText" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fff3c4"/>
<stop offset="45%" stop-color="#e2c47c"/>
<stop offset="100%" stop-color="#a8812f"/>
</linearGradient>
<!-- ============ DATE WINDOW ============ -->
<linearGradient id="dateShadow" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#000000" stop-opacity="0.42"/>
<stop offset="55%" stop-color="#000000" stop-opacity="0"/>
<stop offset="100%" stop-color="#000000" stop-opacity="0"/>
</linearGradient>
<!-- ============ FILTERS / CLIPS ============ -->
<filter id="handShadow" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
<feDropShadow dx="1.6" dy="2.6" stdDeviation="2.2" flood-color="#000" flood-opacity="0.6"/>
</filter>
<clipPath id="dialClip"><circle cx="200" cy="200" r="155"/></clipPath>
</defs>
<!-- ================= LUGS ================= -->
<g fill="url(#lugGrad)">
<rect x="159" y="-10" width="23" height="62" rx="10"/>
<rect x="218" y="-10" width="23" height="62" rx="10"/>
<rect x="159" y="348" width="23" height="62" rx="10"/>
<rect x="218" y="348" width="23" height="62" rx="10"/>
</g>
<!-- ================= CASE ================= -->
<circle cx="200" cy="200" r="182" fill="url(#caseGrad)"/>
<g id="coinEdge"></g>
<circle cx="200" cy="200" r="181" fill="none" stroke="#fffbe8" stroke-opacity="0.5" stroke-width="1.4"/>
<circle cx="200" cy="200" r="163" fill="none" stroke="#6b4d12" stroke-opacity="0.55" stroke-width="1.2"/>
<!-- bezel inner slope -->
<circle cx="200" cy="200" r="158" fill="none" stroke="url(#bezelGrad)" stroke-width="9"/>
<!-- ================= DIAL ================= -->
<circle cx="200" cy="200" r="155" fill="url(#dialGrad)"/>
<g clip-path="url(#dialClip)">
<!-- sunburst brushing -->
<g id="sunburst"></g>
<!-- depth vignette -->
<circle cx="200" cy="200" r="155" fill="url(#vignette)"/>
</g>
<!-- minute track -->
<g id="minuteTrack"></g>
<!-- applied hour indices -->
<g id="indices" filter="url(#handShadow)"></g>
<!-- ================= DATE WINDOW ================= -->
<g>
<rect x="306" y="186" width="34" height="28" rx="2.5"
fill="#f4efe2" stroke="url(#goldText)" stroke-width="2.6"/>
<rect x="307.4" y="187.4" width="31.2" height="25.2" rx="1.6" fill="url(#dateShadow)"/>
<text id="dateNum" x="323" y="207.4" text-anchor="middle"
font-family="Georgia,'Times New Roman',serif" font-size="18"
font-weight="600" fill="#101010">1</text>
</g>
<!-- ================= DIAL TEXT ================= -->
<g font-family="Georgia,'Times New Roman',serif" text-anchor="middle">
<text x="200" y="136" font-size="15.5" letter-spacing="5.5" fill="url(#goldText)">AURELIUS</text>
<text x="200" y="154" font-size="7" letter-spacing="3.4" fill="#c2a86a">GENÈVE</text>
<text x="200" y="258" font-size="7.5" letter-spacing="2.8" fill="#c2a86a">AUTOMATIQUE</text>
<text x="200" y="300" font-size="6" letter-spacing="3.4" fill="#8f7c52">SWISS MADE</text>
</g>
<!-- ================= HANDS ================= -->
<g filter="url(#handShadow)">
<!-- hour hand -->
<g id="hourHand" transform="rotate(0 200 200)">
<g transform="translate(200,200)">
<path d="M0,-88 L-7.2,-30 L-5,20 L0,20 Z" fill="url(#handLight)"/>
<path d="M0,-88 L7.2,-30 L5,20 L0,20 Z" fill="url(#handDark)"/>
<line x1="0" y1="-85" x2="0" y2="18" stroke="#6b4d12" stroke-width="0.8" opacity="0.5"/>
</g>
</g>
<!-- minute hand -->
<g id="minuteHand" transform="rotate(0 200 200)">
<g transform="translate(200,200)">
<path d="M0,-133 L-6.4,-46 L-4.4,22 L0,22 Z" fill="url(#handLight)"/>
<path d="M0,-133 L6.4,-46 L4.4,22 L0,22 Z" fill="url(#handDark)"/>
<line x1="0" y1="-130" x2="0" y2="20" stroke="#6b4d12" stroke-width="0.75" opacity="0.5"/>
</g>
</g>
<!-- sweeping seconds hand (blued steel) -->
<g id="secondHand" transform="rotate(0 200 200)">
<line x1="200" y1="228" x2="200" y2="60" stroke="#2f5aa0" stroke-width="1.7" stroke-linecap="round"/>
<circle cx="200" cy="228" r="6.2" fill="#2f5aa0"/>
<circle cx="200" cy="228" r="2.2" fill="#12243f"/>
<circle cx="200" cy="61" r="5.2" fill="none" stroke="#2f5aa0" stroke-width="1.9"/>
</g>
</g>
<!-- centre cap -->
<g>
<circle cx="200" cy="200" r="6.4" fill="url(#goldText)"/>
<circle cx="200" cy="200" r="3.4" fill="#8a6520"/>
<circle cx="199" cy="198.6" r="1.6" fill="#fff6d8" opacity="0.9"/>
</g>
<!-- ================= CRYSTAL GLARE ================= -->
<g clip-path="url(#dialClip)">
<ellipse cx="128" cy="118" rx="150" ry="72" fill="url(#glareGrad)"
transform="rotate(-34 128 118)" opacity="0.55"/>
<ellipse cx="272" cy="292" rx="120" ry="52" fill="url(#glareGrad)"
transform="rotate(-34 272 292)" opacity="0.22"/>
</g>
</svg>
</div>
<script>
(function () {
"use strict";
var NS = "http://www.w3.org/2000/svg";
var CX = 200, CY = 200;
/* ---------------------------------------------------------
1. Sunburst brushing on the dial
--------------------------------------------------------- */
(function buildSunburst() {
var host = document.getElementById("sunburst");
var frag = document.createDocumentFragment();
for (var i = 0; i < 240; i++) {
var a = (i * 1.5) * Math.PI / 180;
var ln = document.createElementNS(NS, "line");
ln.setAttribute("x1", CX + Math.sin(a) * 12);
ln.setAttribute("y1", CY - Math.cos(a) * 12);
ln.setAttribute("x2", CX + Math.sin(a) * 156);
ln.setAttribute("y2", CY - Math.cos(a) * 156);
ln.setAttribute("stroke", (i % 2) ? "#8fbaff" : "#2f6ab5");
ln.setAttribute("stroke-width", (i % 2) ? 0.9 : 1.25);
ln.setAttribute("stroke-opacity", (i % 2) ? 0.035 : 0.065);
frag.appendChild(ln);
}
host.appendChild(frag);
})();
/* ---------------------------------------------------------
2. Coin edge (fluted) detail on the case band
--------------------------------------------------------- */
(function buildCoinEdge() {
var host = document.getElementById("coinEdge");
var frag = document.createDocumentFragment();
for (var i = 0; i < 132; i++) {
var a = (i * (360 / 132)) * Math.PI / 180;
var ln = document.createElementNS(NS, "line");
ln.setAttribute("x1", CX + Math.sin(a) * 171);
ln.setAttribute("y1", CY - Math.cos(a) * 171);
ln.setAttribute("x2", CX + Math.sin(a) * 180.5);
ln.setAttribute("y2", CY - Math.cos(a) * 180.5);
ln.setAttribute("stroke", i % 2 ? "#5f4410" : "#fff3cc");
ln.setAttribute("stroke-width", 1.1);
ln.setAttribute("stroke-opacity", i % 2 ? 0.35 : 0.30);
ln.setAttribute("stroke-linecap", "round");
frag.appendChild(ln);
}
host.appendChild(frag);
})();
/* ---------------------------------------------------------
3. Minute track (60 ticks, longer every 5 min)
--------------------------------------------------------- */
(function buildMinuteTrack() {
var host = document.getElementById("minuteTrack");
var frag = document.createDocumentFragment();
for (var i = 0; i < 60; i++) {
if (i === 15) continue; /* gap for date window at 3 o'clock */
var a = (i * 6) * Math.PI / 180;
var isFive = (i % 5 === 0);
var r1 = isFive ? 137 : 143.5;
var r2 = 151;
var ln = document.createElementNS(NS, "line");
ln.setAttribute("x1", CX + Math.sin(a) * r1);
ln.setAttribute("y1", CY - Math.cos(a) * r1);
ln.setAttribute("x2", CX + Math.sin(a) * r2);
ln.setAttribute("y2", CY - Math.cos(a) * r2);
ln.setAttribute("stroke", isFive ? "#e9d296" : "#8d7a50");
ln.setAttribute("stroke-width", isFive ? 2.3 : 1.05);
ln.setAttribute("stroke-linecap", "round");
frag.appendChild(ln);
}
host.appendChild(frag);
})();
/* ---------------------------------------------------------
4. Applied hour indices (faceted gold batons)
--------------------------------------------------------- */
(function buildIndices() {
var host = document.getElementById("indices");
var frag = document.createDocumentFragment();
function baton(angleDeg, offsetX) {
var g = document.createElementNS(NS, "g");
g.setAttribute("transform",
"rotate(" + angleDeg + " " + CX + " " + CY + ") translate(" + offsetX + ",0)");
var outer = document.createElementNS(NS, "rect");
outer.setAttribute("x", CX - 3.1);
outer.setAttribute("y", CY - 134);
outer.setAttribute("width", 6.2);
outer.setAttribute("height", 23);
outer.setAttribute("rx", 1.1);
outer.setAttribute("fill", "url(#handLight)");
g.appendChild(outer);
var inner = document.createElementNS(NS, "rect");
inner.setAttribute("x", CX + 0.35);
inner.setAttribute("y", CY - 134);
inner.setAttribute("width", 2.75);
inner.setAttribute("height", 23);
inner.setAttribute("rx", 0.8);
inner.setAttribute("fill", "url(#handDark)");
g.appendChild(inner);
return g;
}
for (var i = 0; i < 12; i++) {
if (i === 3) continue; /* replaced by the date window */
var ang = i * 30;
if (i === 0) {
frag.appendChild(baton(ang, -8.5));
frag.appendChild(baton(ang, 8.5));
} else {
frag.appendChild(baton(ang, 0));
}
}
host.appendChild(frag);
})();
/* ---------------------------------------------------------
5. Live time — smooth sweeping seconds hand
--------------------------------------------------------- */
var hourHand = document.getElementById("hourHand");
var minuteHand = document.getElementById("minuteHand");
var secondHand = document.getElementById("secondHand");
var dateNum = document.getElementById("dateNum");
var lastDate = 0;
function rot(el, deg) {
el.setAttribute("transform", "rotate(" + deg.toFixed(4) + " " + CX + " " + CY + ")");
}
function render() {
var now = new Date();
var ms = now.getMilliseconds();
var s = now.getSeconds() + ms / 1000;
var m = now.getMinutes() + s / 60;
var h = (now.getHours() % 12) + m / 60;
rot(secondHand, s * 6);
rot(minuteHand, m * 6);
rot(hourHand, h * 30);
var d = now.getDate();
if (d !== lastDate) {
dateNum.textContent = d;
lastDate = d;
}
requestAnimationFrame(render);
}
requestAnimationFrame(render);
})();
</script>
</body>
</html>
