Run Detail
completedgemini-3.8-flashRecorded for these videos
47:51Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)
Nov 6, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
16:45DeepSeek V4.1 Flash Is Shockingly Good for the Price
Sep 10, 2026 · YouTube
17:14How much better is GPT-6 Astra over Claude Opus 5? Real Website and Coding Tests
Sep 5, 2026 · YouTube
29:13Implementing a multiplayer game with GPT-6 Astra (+ Gemini 3.8, Opus 5, Sol Pro)
Sep 5, 2026 · YouTube
19:42Meta Muse Spark 1.3 Review: A Huge Leap Forward
Sep 2, 2026 · YouTube
17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
Provider
openrouter
Challenge Version
v3.0
Turns
1
Duration
117.6s
Total Tokens
24,993
Input Tokens
543
Output Tokens
24,450
Reasoning Tokens
6,351
Reasoning Effort
default
Est. Cost
$0.0921
Started
9/2/2026, 4:01:16 PM
OR Provider
Google
Finish Reason
stop
Generation ID
gen-1788364876-ibdgCglPsVjfVY1jXPRJ
Turns (1)
Turn #1
543 in24,450 out6,351 reasoning24,993 total117.6s
user
Build one self-contained HTML page for a museum armoury exhibit: a standing figure and a slider that re-equips that same figure across three periods of human history.
Choose the periods
Choose any three periods from recorded human history, anywhere in the world. Put them in chronological order and keep adjacent choices at least 100 years apart. For each, name a specific year and place; if an exact year is impossible, give the tightest defensible date range and explain it in the label.
Choose periods you can depict accurately. You are judged on the drawing as well as the interface.
Requirements
- One body, one rig. Build one inline SVG body with fixed proportions and named attachment points; armour, clothing, and weapons attach to it. Arms may move to hold equipment, but the torso, head, and legs keep their size and anchors. Do not cross-fade three unrelated figures.
- Smooth and repeatable. Moving the slider must not make the figure jump, rescale, or drift. Returning to a period must recreate the same result exactly. No
Math.random, clocks, or accumulated state. - Accurate labels. Under the figure, show the date, place, equipment name, materials, and weapon. At an exact stop it describes that period; between stops it says which periods the drawing is between. The label must match the drawing.
- Date the weapon too. It must belong to the chosen period and place.
- Give every period equal care. The last stop is not allowed to become a simplified placeholder.
House rules
- One HTML file. Keep CSS, JavaScript, and SVG inline.
- No libraries, CDN assets, network access, canvas, raster images, or font glyphs for the figure. Do not use
localStorage,sessionStorage, cookies, orindexedDB. - It must work when opened as a local file.
- Return exactly these sections:
The timeline
One line per period: date, place, equipment, weapon, and one specific detail a non-specialist might miss.
The rig
One paragraph explaining the attachment points, layer order, and interpolation between periods.
The file
One fenced html block containing the complete page.
The weakest period
Name the least certain historical choice and any accuracy compromise you made for legibility.
Review
I will move the slider slowly in both directions, watch the feet and shoulders for drift, compare labels to drawings, inspect the SVG structure, and go straight to the final period before judging the rest.
assistant
The timeline
- 480 BCE, Sparta (Peloponnese, Greece): Archaic-to-Classical Hoplite panoply (chiseled bronze bell-cuirass, Corinthian helmet, bronze knemides, aspis shield); Dory spear (~2.6 m, ash shaft, leaf-shaped forged iron head, pointed cast-bronze sauroter); the heavy four-sided bronze butt-spike (sauroter) was designed not merely as a balance weight or ground-stand, but as an immediate secondary spearpoint when the primary ash shaft shattered against an opposing bronze shield-wall.
- 1415 CE, Agincourt (Kingdom of France / English field army): Bespoke plate "white harness" (hounskull/pig-faced bascinet with vervelles, maille standard, globose tapul breastplate with fauld and articulated tassets, full tubular arm and leg harness with winged poleyns); English/French Pollaxe (carbon steel top thrusting spike, forward convex axe blade, corrugated back-hammer, steel shaft langets); the breastplate features a pronounced medial vertical ridge (tapul) engineered to create steep deflection angles that turn lance and arrow strikes outward into glancing trajectories rather than absorbing kinetic energy.
- 1600 CE, Battle of Sekigahara (Mino Province, Japan): Sengoku/Momoyama Tosei-gusoku ("modern armour": suji-bachi kabuto with gilded crescent maedate, lacquered iron nimaido cuirass laced in silk odoshi, chu-sode, kote with mail and iron splints, kusazuri, and suneate); Jumonji Yari (cross-bladed spear with dual forward-swept side blades (eda), high-carbon steel tempered edge, black-lacquered shaft banded with ray-skin and copper habaki); unlike the heavy box-like Heian-period ō-yoroi built for mounted archery, this late Sengoku harness is lightened, articulated, and chemically blackened with lacquer specifically for close-quarter infantry slugging and musket-ball (tanegashima) deflection.
The rig
The figure relies on a single anatomically fixed vector skeleton plotted on a 700 × 880 coordinate space. All body landmarks remain stationary across all three historical configurations: the ground line and calcaneus anchors hold at (290, 810) and (410, 810), the patellar centers at (305, 590) and (395, 590), the pelvic center at (350, 445), the glenohumeral pivot shoulders at (275, 240) and (425, 240), and the cranial center at (350, 150). The stance is an invariant front-facing guard: the left forearm carries the defensive element (the dished hoplon, the articulated knightly couter and gauntlet, and the sode / open shield-arm), while the right hand rests firmly around the weapon haft at (455, 430), pinning the three respective polearms against the identical shoulder clearance vector. The rendering stack is structured in strict depth order: ground contact shadow $\rightarrow$ invariant base body armature $\rightarrow$ boots/greaves $\rightarrow$ faulds/skirts $\rightarrow$ breastplate/cuirass $\rightarrow$ upper arms $\rightarrow$ neck/aventail $\rightarrow$ helmet/crest $\rightarrow$ left defensive gear $\rightarrow$ right primary weapon. Interpolation between periods is computed continuously through a piecewise linear weight function over $t \in [0, 2]$; each period's dedicated vector layer adjusts its opacity and visibility simultaneously without modifying a single anatomical coordinate, ensuring zero skeletal drift, scale change, or limb jumping when moving back and forth across the timeline.
The file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Museum Armoury: Continuity of the Armed Human Rig</title>
<style>
:root {
--bg: #141619;
--surface: #1e2227;
--border: #333942;
--gold: #d4af37;
--gold-dim: #8c7324;
--text: #e6e8eb;
--text-muted: #9ba1ab;
--font-serif: "Palatino", "Georgia", "Times New Roman", serif;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--bg);
color: var(--text);
font-family: var(--font-sans);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 16px 48px;
}
header {
text-align: center;
max-width: 820px;
margin-bottom: 20px;
}
h1 {
font-family: var(--font-serif);
font-size: 1.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 6px;
}
.subtitle {
font-size: 0.95rem;
color: var(--text-muted);
letter-spacing: 0.04em;
}
.exhibit-container {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 12px 36px rgba(0,0,0,0.6);
max-width: 820px;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.viewport-wrapper {
position: relative;
width: 100%;
background: radial-gradient(circle at 50% 35%, #2a2f38 0%, #17191d 85%);
display: flex;
justify-content: center;
border-bottom: 1px solid var(--border);
}
svg {
display: block;
width: 100%;
max-width: 680px;
height: auto;
user-select: none;
}
.controls-panel {
padding: 22px 28px 16px;
background: #191c22;
}
.slider-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.slider-labels {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
font-family: var(--font-serif);
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.slider-labels span {
cursor: pointer;
transition: color 0.15s;
}
.slider-labels span:hover { color: var(--gold); }
.slider-labels span.active { color: var(--gold); }
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
background: #2f3540;
border-radius: 3px;
outline: none;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--gold);
border: 2px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
cursor: grab;
transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.15);
}
input[type="range"]::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--gold);
border: 2px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
cursor: grab;
}
.quick-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 8px;
}
button.era-btn {
background: #252a33;
border: 1px solid var(--border);
color: var(--text);
padding: 8px 12px;
border-radius: 4px;
font-size: 0.82rem;
font-family: var(--font-sans);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
button.era-btn:hover {
background: #2e3540;
border-color: var(--gold-dim);
color: #fff;
}
button.era-btn.active {
background: #332d1d;
border-color: var(--gold);
color: var(--gold);
font-weight: 600;
}
.dossier {
padding: 24px 28px;
border-top: 1px solid var(--border);
background: #1b1e24;
}
.dossier-header {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid var(--border);
padding-bottom: 12px;
margin-bottom: 16px;
}
.era-title {
font-family: var(--font-serif);
font-size: 1.35rem;
color: var(--gold);
letter-spacing: 0.04em;
}
.era-status {
font-size: 0.82rem;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
background: #121417;
padding: 3px 8px;
border-radius: 3px;
border: 1px solid #282d36;
}
.dossier-grid {
display: grid;
grid-template-columns: 140px 1fr;
row-gap: 12px;
column-gap: 18px;
font-size: 0.9rem;
line-height: 1.45;
}
.dossier-label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gold-dim);
padding-top: 2px;
}
.dossier-val {
color: var(--text);
}
.dossier-val strong {
color: #fff;
font-weight: 600;
}
</style>
</head>
<body>
<header>
<h1>Cast in Steel & Bronze</h1>
<p class="subtitle">Continuity of the Human Rig Across Twenty-One Centuries</p>
</header>
<main class="exhibit-container">
<div class="viewport-wrapper">
<svg id="armouryRig" viewBox="0 0 700 880" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients for Bronze (Greek) -->
<linearGradient id="bronzeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#d49b4b"/>
<stop offset="40%" stop-color="#ad6c2a"/>
<stop offset="80%" stop-color="#693c12"/>
<stop offset="100%" stop-color="#472609"/>
</linearGradient>
<linearGradient id="bronzeSheen" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#734216"/>
<stop offset="35%" stop-color="#dfaa5b"/>
<stop offset="60%" stop-color="#ad6c2a"/>
<stop offset="100%" stop-color="#4d290a"/>
</linearGradient>
<!-- Gradients for 15th c. White Armour Steel -->
<linearGradient id="steelGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f0f3f7"/>
<stop offset="25%" stop-color="#b0b7c2"/>
<stop offset="60%" stop-color="#6b7280"/>
<stop offset="100%" stop-color="#373e4a"/>
</linearGradient>
<linearGradient id="steelHighlight" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#555c69"/>
<stop offset="45%" stop-color="#ffffff"/>
<stop offset="65%" stop-color="#8a92a0"/>
<stop offset="100%" stop-color="#3b424d"/>
</linearGradient>
<!-- Gradients for Sengoku Lacquer & Gold -->
<linearGradient id="lacquerBlack" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3a3c42"/>
<stop offset="30%" stop-color="#1b1c1e"/>
<stop offset="70%" stop-color="#0f1012"/>
<stop offset="100%" stop-color="#050505"/>
</linearGradient>
<linearGradient id="goldKuwagata" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffe680"/>
<stop offset="50%" stop-color="#d4af37"/>
<stop offset="100%" stop-color="#8a6d1c"/>
</linearGradient>
</defs>
<!-- GROUND SHADOW: Locked to foot anchors -->
<ellipse cx="350" cy="815" rx="195" ry="16" fill="#000000" opacity="0.65"/>
<!-- ==========================================
RIG BASE: Anatomically fixed human mannequin
========================================== -->
<g id="rig-mannequin" opacity="1">
<!-- Neck -->
<path d="M336 195 L336 240 L364 240 L364 195 Z" fill="#b08a70"/>
<!-- Head -->
<ellipse cx="350" cy="155" rx="38" ry="48" fill="#b89076"/>
<!-- Torso Form -->
<path d="M280 240 L420 240 L395 380 L305 380 Z" fill="#9e7860"/>
<!-- Pelvis Form -->
<path d="M305 380 L395 380 L405 450 L295 450 Z" fill="#8c6852"/>
<!-- Left Leg Rig (Mannequin core) -->
<path d="M300 450 L322 450 L316 590 L296 590 Z" fill="#a47d64"/>
<path d="M296 590 L316 590 L305 790 L285 790 Z" fill="#967159"/>
<!-- Right Leg Rig -->
<path d="M378 450 L400 450 L404 590 L384 590 Z" fill="#a47d64"/>
<path d="M384 590 L404 590 L415 790 L395 790 Z" fill="#967159"/>
<!-- Left Arm Rig -->
<path d="M280 240 L260 255 L225 345 L245 352 Z" fill="#9e7860"/>
<path d="M230 350 L250 352 L210 440 L195 430 Z" fill="#967159"/>
<!-- Right Arm Rig -->
<path d="M420 240 L440 255 L465 345 L445 352 Z" fill="#9e7860"/>
<path d="M455 350 L440 352 L455 435 L472 430 Z" fill="#967159"/>
</g>
<!-- ==========================================
PERIOD 1: 480 BCE HOPLITE PANOPLY
========================================== -->
<g id="period-greek">
<!-- Chiton / Tunic Undergarment -->
<path d="M300 370 L400 370 L412 465 L288 465 Z" fill="#c93832"/>
<path d="M288 465 L412 465 L415 478 L285 478 Z" fill="#e8d5b5"/>
<!-- Pteruges (Linen/Leather protective waist flaps) -->
<g fill="#dfdcd0" stroke="#7a7465" stroke-width="1.2">
<rect x="296" y="420" width="12" height="60" rx="1"/>
<rect x="310" y="420" width="12" height="62" rx="1"/>
<rect x="324" y="420" width="12" height="64" rx="1"/>
<rect x="338" y="420" width="12" height="64" rx="1"/>
<rect x="350" y="420" width="12" height="64" rx="1"/>
<rect x="364" y="420" width="12" height="62" rx="1"/>
<rect x="378" y="420" width="12" height="60" rx="1"/>
<rect x="392" y="420" width="12" height="58" rx="1"/>
</g>
<!-- Bronze Muscled Cuirass (Chiseled Pectorals & Rectus Abdominis) -->
<path d="M280 240 Q350 258 420 240 L402 425 Q350 435 298 425 Z" fill="url(#bronzeGrad)" stroke="#472609" stroke-width="2"/>
<!-- Anatomical Hammered Modeling (Pectorals, rib arch, navel) -->
<path d="M305 285 Q325 270 345 285 Q340 320 305 320 Q295 305 305 285 Z" fill="none" stroke="#e0a95a" stroke-width="2.5" opacity="0.65"/>
<path d="M395 285 Q375 270 355 285 Q360 320 395 320 Q405 305 395 285 Z" fill="none" stroke="#e0a95a" stroke-width="2.5" opacity="0.65"/>
<path d="M325 340 Q350 350 375 340" fill="none" stroke="#522d0d" stroke-width="3"/>
<path d="M330 365 Q350 375 370 365" fill="none" stroke="#522d0d" stroke-width="2.5"/>
<circle cx="350" cy="385" r="4" fill="#3b1f07"/>
<!-- Bronze Knemides (Muscled Greaves on both shins) -->
<!-- Left Leg Greave -->
<path d="M294 580 Q305 565 316 580 Q324 645 312 785 L288 785 Q282 660 294 580 Z" fill="url(#bronzeSheen)" stroke="#472609" stroke-width="1.8"/>
<path d="M298 600 Q305 590 312 600" fill="none" stroke="#ffd280" stroke-width="2" opacity="0.7"/>
<!-- Right Leg Greave -->
<path d="M384 580 Q395 565 406 580 Q418 660 412 785 L388 785 Q376 645 384 580 Z" fill="url(#bronzeSheen)" stroke="#472609" stroke-width="1.8"/>
<path d="M388 600 Q395 590 402 600" fill="none" stroke="#ffd280" stroke-width="2" opacity="0.7"/>
<!-- Spartan Leather Sandals (Carbatinae) -->
<path d="M282 785 L314 785 L318 812 L278 812 Z" fill="#54371f"/>
<path d="M386 785 L418 785 L422 812 L382 812 Z" fill="#54371f"/>
<!-- Lacing straps -->
<line x1="285" y1="785" x2="310" y2="810" stroke="#331c0b" stroke-width="2"/>
<line x1="310" y1="785" x2="285" y2="810" stroke="#331c0b" stroke-width="2"/>
<line x1="388" y1="785" x2="415" y2="810" stroke="#331c0b" stroke-width="2"/>
<line x1="415" y1="785" x2="388" y2="810" stroke="#331c0b" stroke-width="2"/>
<!-- Corinthian Bronze Helmet with Transverse Horsehair Crest -->
<!-- Red Horsehair High Crest -->
<path d="M350 45 Q310 50 290 85 Q350 72 410 85 Q390 50 350 45 Z" fill="#9e1f18" stroke="#520e0a" stroke-width="1.5"/>
<path d="M300 80 Q350 68 400 80 L395 110 Q350 95 305 110 Z" fill="#1f2124"/>
<path d="M305 105 Q350 90 395 105 L392 120 Q350 108 308 120 Z" fill="url(#bronzeSheen)"/>
<!-- Helmet Skull and Cheekpieces -->
<path d="M312 145 Q310 95 350 95 Q390 95 388 145 L388 190 L368 215 L354 185 L350 205 L346 185 L332 215 L312 190 Z" fill="url(#bronzeGrad)" stroke="#472609" stroke-width="2"/>
<!-- Almond Eye-slits and Noseguard -->
<path d="M326 158 Q338 152 344 162 Z" fill="#141619"/>
<path d="M374 158 Q362 152 356 162 Z" fill="#141619"/>
<line x1="350" y1="145" x2="350" y2="185" stroke="#361a04" stroke-width="3"/>
<!-- Left Arm: Aspis / Hoplon Shield -->
<g id="hoplon-shield">
<!-- Outer Rim -->
<circle cx="215" cy="380" r="105" fill="url(#bronzeGrad)" stroke="#381b03" stroke-width="4"/>
<!-- Inner Dished Bowl -->
<circle cx="215" cy="380" r="92" fill="#8f5720"/>
<!-- Bronze Central Plate Facing -->
<circle cx="215" cy="380" r="88" fill="url(#bronzeSheen)"/>
<!-- Spartan Lambda Emblem (\xCE\x9B) chiseled in bronze relief -->
<path d="M215 315 L260 425 L242 425 L215 355 L188 425 L170 425 Z" fill="#1f1e1a" stroke="#d4af37" stroke-width="2"/>
</g>
<!-- Right Arm Weapon: Dory Spear -->
<g id="dory-spear">
<!-- Ash Wood Shaft -->
<line x1="458" y1="50" x2="452" y2="812" stroke="#6e5033" stroke-width="7" stroke-linecap="round"/>
<!-- Iron Leaf-Shaped Spearhead -->
<path d="M458 50 Q465 95 458 135 Q451 95 458 50 Z" fill="#c0c7cf" stroke="#484e54" stroke-width="1.8"/>
<line x1="458" y1="50" x2="458" y2="135" stroke="#ffffff" stroke-width="1.5"/>
<!-- Bronze Socket Ring -->
<rect x="453" y="135" width="10" height="15" fill="#a66e28"/>
<!-- Bronze Sauroter (Four-sided butt-spike at bottom) -->
<path d="M452 745 L458 745 L456 814 L448 814 Z" fill="url(#bronzeGrad)" stroke="#381b03" stroke-width="1.5"/>
<polygon points="448,805 456,805 452,818" fill="#dfaa5b"/>
<!-- Bare Right Hand Clamping Shaft -->
<ellipse cx="455" cy="430" rx="10" ry="14" fill="#b08a70" stroke="#664630" stroke-width="1.5"/>
</g>
</g>
<!-- ==========================================
PERIOD 2: 1415 CE AGINCOURT WHITE HARNESS
========================================== -->
<g id="period-medieval" opacity="0">
<!-- Maille Skirt & Arming Doublet Void Defenses -->
<path d="M295 385 L405 385 L415 500 L285 500 Z" fill="#3a3d42" stroke="#1f2022" stroke-width="1"/>
<!-- Ringmail texture hatch -->
<path d="M288 465 Q350 490 412 465 M286 480 Q350 505 414 480 M285 495 Q350 520 415 495" fill="none" stroke="#696e78" stroke-width="1.8" stroke-dasharray="2,3"/>
<!-- Steel Leg Harness (Cuisses, Winged Poleyns, Tubular Greaves) -->
<!-- Left Leg -->
<path d="M295 450 L324 450 L320 580 L292 580 Z" fill="url(#steelGrad)" stroke="#23262b" stroke-width="1.5"/>
<!-- Winged Poleyn (Knee Boss & Lateral Deflection Flange) -->
<circle cx="304" cy="588" r="15" fill="url(#steelHighlight)" stroke="#202226" stroke-width="1.5"/>
<path d="M285 580 Q292 588 285 598 Z" fill="url(#steelGrad)" stroke="#202226"/>
<!-- Anatomical Closed Greave -->
<path d="M292 595 L318 595 L310 782 L288 782 Z" fill="url(#steelHighlight)" stroke="#23262b" stroke-width="1.5"/>
<!-- Segmented Pointed Sabatons -->
<path d="M284 782 L312 782 L316 805 L266 812 L280 798 Z" fill="url(#steelGrad)" stroke="#202226" stroke-width="1.5"/>
<!-- Right Leg -->
<path d="M376 450 L405 450 L408 580 L380 580 Z" fill="url(#steelGrad)" stroke="#23262b" stroke-width="1.5"/>
<!-- Winged Poleyn Right -->
<circle cx="396" cy="588" r="15" fill="url(#steelHighlight)" stroke="#202226" stroke-width="1.5"/>
<path d="M415 580 Q408 588 415 598 Z" fill="url(#steelGrad)" stroke="#202226"/>
<!-- Anatomical Closed Greave Right -->
<path d="M382 595 L408 595 L412 782 L390 782 Z" fill="url(#steelHighlight)" stroke="#23262b" stroke-width="1.5"/>
<!-- Pointed Sabatons Right -->
<path d="M388 782 L416 782 L434 812 L384 805 Z" fill="url(#steelGrad)" stroke="#202226" stroke-width="1.5"/>
<!-- Globose Tapul Breastplate, Fauld of 4 Lames & Tassets -->
<path d="M276 240 L424 240 L406 390 L294 390 Z" fill="url(#steelHighlight)" stroke="#282c33" stroke-width="2"/>
<!-- Tapul (Sharpened vertical deflection keel line) -->
<line x1="350" y1="240" x2="350" y2="390" stroke="#ffffff" stroke-width="3" opacity="0.8"/>
<!-- Fauld (Horizontal segmented belly lames) -->
<g fill="url(#steelGrad)" stroke="#23262b" stroke-width="1.2">
<path d="M294 390 Q350 405 406 390 L408 404 Q350 419 292 404 Z"/>
<path d="M292 404 Q350 419 408 404 L410 418 Q350 433 290 418 Z"/>
<path d="M290 418 Q350 433 410 418 L412 432 Q350 447 288 432 Z"/>
</g>
<!-- Articulated Hanging Tassets protecting upper thighs -->
<path d="M296 432 L342 432 L338 485 L300 480 Z" fill="url(#steelGrad)" stroke="#202226" stroke-width="1.3"/>
<path d="M358 432 L404 432 L400 480 L362 485 Z" fill="url(#steelGrad)" stroke="#202226" stroke-width="1.3"/>
<!-- Steel Arms & Articulated Pauldrons with Besagew Roundels -->
<!-- Left Arm Harness -->
<path d="M275 238 L255 255 L225 342 L245 348 Z" fill="url(#steelGrad)" stroke="#23262b" stroke-width="1.4"/>
<circle cx="238" cy="346" r="14" fill="url(#steelHighlight)" stroke="#23262b"/>
<path d="M230 348 L248 350 L208 435 L195 425 Z" fill="url(#steelGrad)" stroke="#23262b" stroke-width="1.4"/>
<!-- Left Besagew (Armpit disk defense) -->
<circle cx="275" cy="260" r="13" fill="url(#steelHighlight)" stroke="#1a1c20" stroke-width="1.5"/>
<!-- Right Arm Harness -->
<path d="M425 238 L445 255 L468 342 L448 348 Z" fill="url(#steelGrad)" stroke="#23262b" stroke-width="1.4"/>
<circle cx="458" cy="346" r="14" fill="url(#steelHighlight)" stroke="#23262b"/>
<path d="M465 348 L448 350 L462 432 L478 425 Z" fill="url(#steelGrad)" stroke="#23262b" stroke-width="1.4"/>
<!-- Right Besagew -->
<circle cx="425" cy="260" r="13" fill="url(#steelHighlight)" stroke="#1a1c20" stroke-width="1.5"/>
<!-- Maille Aventail / Standard (Camail) covering throat -->
<path d="M322 185 L378 185 L395 245 L305 245 Z" fill="#43474f" stroke="#1c1e21" stroke-width="1.5"/>
<path d="M312 215 Q350 230 388 215 M310 230 Q350 245 390 230" fill="none" stroke="#757c8a" stroke-width="1.5" stroke-dasharray="2,2"/>
<!-- Hounskull Bascinet (Pig-faced Visor & Conical Skull) -->
<path d="M316 160 Q315 95 350 85 Q385 95 384 160 Z" fill="url(#steelGrad)" stroke="#23262b" stroke-width="2"/>
<!-- Snout Visor extending forward -->
<path d="M328 145 L372 145 L366 188 L350 205 L334 188 Z" fill="url(#steelHighlight)" stroke="#181a1d" stroke-width="1.8"/>
<!-- Narrow Horizontal Ocularium (Vision Slits) -->
<rect x="333" y="150" width="14" height="3" fill="#141619"/>
<rect x="353" y="150" width="14" height="3" fill="#141619"/>
<!-- Visor Breathing Perforations -->
<circle cx="342" cy="175" r="1.3" fill="#141619"/>
<circle cx="347" cy="175" r="1.3" fill="#141619"/>
<circle cx="353" cy="175" r="1.3" fill="#141619"/>
<circle cx="358" cy="175" r="1.3" fill="#141619"/>
<circle cx="345" cy="183" r="1.3" fill="#141619"/>
<circle cx="355" cy="183" r="1.3" fill="#141619"/>
<!-- Hourglass Gauntlet (Left hand on hip) -->
<path d="M194 425 L212 432 L208 450 L190 445 Z" fill="url(#steelGrad)" stroke="#1b1c1e" stroke-width="1.5"/>
<!-- Right Arm Weapon: English/French Pollaxe -->
<g id="pollaxe">
<!-- Ash Octagonal Haft -->
<line x1="458" y1="75" x2="452" y2="812" stroke="#4a3b2c" stroke-width="7" stroke-linecap="round"/>
<!-- Steel Langets (Side reinforcing langet bars) -->
<line x1="455" y1="80" x2="454" y2="230" stroke="#8c939e" stroke-width="2"/>
<line x1="461" y1="80" x2="460" y2="230" stroke="#8c939e" stroke-width="2"/>
<!-- Top Dagger Spike -->
<path d="M458 20 L463 80 L453 80 Z" fill="url(#steelHighlight)" stroke="#23262b" stroke-width="1.5"/>
<line x1="458" y1="20" x2="458" y2="80" stroke="#ffffff" stroke-width="1"/>
<!-- Forward Crescent Axe Blade (Facing Left) -->
<path d="M454 82 L405 70 Q415 105 405 138 L454 125 Z" fill="url(#steelHighlight)" stroke="#1a1c1f" stroke-width="1.8"/>
<!-- Corrugated Rear Hammer Head with Impact Teeth (Facing Right) -->
<path d="M462 88 L488 92 L492 90 L492 118 L488 116 L462 120 Z" fill="url(#steelGrad)" stroke="#1a1c1f" stroke-width="1.8"/>
<line x1="488" y1="92" x2="488" y2="116" stroke="#23262b" stroke-width="1.5"/>
<!-- Steel Roundel / Hand Stop -->
<circle cx="455" cy="412" r="11" fill="url(#steelHighlight)" stroke="#1a1c1f" stroke-width="1.5"/>
<!-- Hourglass Gauntlet Clamping Pollaxe Haft -->
<path d="M444 420 L466 420 L468 442 L442 442 Z" fill="url(#steelHighlight)" stroke="#1a1c1f" stroke-width="1.5"/>
</g>
</g>
<!-- ==========================================
PERIOD 3: 1600 CE SEKIGAHARA TOSEI-GUSOKU
========================================== -->
<g id="period-samurai" opacity="0">
<!-- Haidate (Thigh Guard Apron of Lacquered Iron Splints) -->
<g fill="#1f2329" stroke="#121317" stroke-width="1">
<rect x="290" y="440" width="56" height="95" rx="2"/>
<rect x="354" y="440" width="56" height="95" rx="2"/>
</g>
<!-- Haidate Silk Cord Cross Lacing -->
<g stroke="#9e2a2b" stroke-width="1.2">
<line x1="292" y1="465" x2="344" y2="465"/>
<line x1="292" y1="490" x2="344" y2="490"/>
<line x1="292" y1="515" x2="344" y2="515"/>
<line x1="356" y1="465" x2="408" y2="465"/>
<line x1="356" y1="490" x2="408" y2="490"/>
<line x1="356" y1="515" x2="408" y2="515"/>
</g>
<!-- Suneate (Shin Guards of Splinted Iron Plates & Maille) -->
<!-- Left Leg -->
<path d="M290 590 L320 590 L312 785 L286 785 Z" fill="url(#lacquerBlack)" stroke="#0d0e10" stroke-width="1.5"/>
<!-- Splint Ribs -->
<line x1="298" y1="592" x2="294" y2="783" stroke="#8a2020" stroke-width="2"/>
<line x1="305" y1="592" x2="301" y2="783" stroke="#8a2020" stroke-width="2"/>
<line x1="312" y1="592" x2="308" y2="783" stroke="#8a2020" stroke-width="2"/>
<!-- Right Leg -->
<path d="M380 590 L410 590 L414 785 L388 785 Z" fill="url(#lacquerBlack)" stroke="#0d0e10" stroke-width="1.5"/>
<line x1="388" y1="592" x2="392" y2="783" stroke="#8a2020" stroke-width="2"/>
<line x1="395" y1="592" x2="399" y2="783" stroke="#8a2020" stroke-width="2"/>
<line x1="402" y1="592" x2="406" y2="783" stroke="#8a2020" stroke-width="2"/>
<!-- Tabi Socks & Waraji Straw Sandals -->
<!-- Left Foot -->
<path d="M284 785 L314 785 L316 810 L278 810 Z" fill="#2b2d30"/>
<path d="M276 805 L318 805 L316 812 L274 812 Z" fill="#9e8559" stroke="#544328" stroke-width="1"/>
<!-- Right Foot -->
<path d="M386 785 L416 785 L422 810 L384 810 Z" fill="#2b2d30"/>
<path d="M382 805 L424 805 L426 812 L384 812 Z" fill="#9e8559" stroke="#544328" stroke-width="1"/>
<!-- Kusazuri (Segmented Hanging Tassets below Do) -->
<g fill="url(#lacquerBlack)" stroke="#9e2a2b" stroke-width="1.5">
<rect x="290" y="390" width="22" height="60" rx="1"/>
<rect x="315" y="390" width="22" height="63" rx="1"/>
<rect x="339" y="390" width="22" height="65" rx="1"/>
<rect x="363" y="390" width="22" height="63" rx="1"/>
<rect x="388" y="390" width="22" height="60" rx="1"/>
</g>
<!-- Horizontal Silk Lacing bands on Kusazuri -->
<path d="M290 410 L410 410 M290 425 L410 425 M290 440 L410 440" stroke="#1d4a8a" stroke-width="2.5" fill="none"/>
<!-- Nimaido Gusoku (Two-Piece Hinged Black Lacquer Cuirass) -->
<path d="M278 240 L422 240 L406 395 L294 395 Z" fill="url(#lacquerBlack)" stroke="#0d0e10" stroke-width="2"/>
<!-- Gold Lacquered Clan Mon Crest on Chest -->
<circle cx="350" cy="305" r="22" fill="none" stroke="url(#goldKuwagata)" stroke-width="3.5"/>
<circle cx="350" cy="305" r="9" fill="url(#goldKuwagata)"/>
<!-- Odoshi Silk Cord Rows Across Upper Chest -->
<line x1="300" y1="260" x2="400" y2="260" stroke="#9e2a2b" stroke-width="3"/>
<line x1="305" y1="270" x2="395" y2="270" stroke="#d4af37" stroke-width="2"/>
<line x1="310" y1="280" x2="390" y2="280" stroke="#1d4a8a" stroke-width="3"/>
<!-- Chu-Sode (Wide Rectangular Stepped Shoulder Guards) -->
<!-- Left Sode -->
<g fill="url(#lacquerBlack)" stroke="#9e2a2b" stroke-width="1.2">
<rect x="240" y="240" width="38" height="15" rx="1"/>
<rect x="238" y="253" width="40" height="15" rx="1"/>
<rect x="236" y="266" width="42" height="15" rx="1"/>
<rect x="234" y="279" width="44" height="15" rx="1"/>
<rect x="232" y="292" width="46" height="18" rx="1"/>
</g>
<!-- Right Sode -->
<g fill="url(#lacquerBlack)" stroke="#9e2a2b" stroke-width="1.2">
<rect x="422" y="240" width="38" height="15" rx="1"/>
<rect x="422" y="253" width="40" height="15" rx="1"/>
<rect x="422" y="266" width="42" height="15" rx="1"/>
<rect x="422" y="279" width="44" height="15" rx="1"/>
<rect x="422" y="292" width="46" height="18" rx="1"/>
</g>
<!-- Kote (Armoured Sleeves of Fabric, Splints, and Maille) -->
<!-- Left Arm Kote -->
<path d="M260 270 L240 350 L212 435 L198 425 L230 345 L255 260 Z" fill="#2d3036" stroke="#121317" stroke-width="1.2"/>
<!-- Tekko Hand Guard -->
<path d="M194 425 L214 432 L208 450 L190 445 Z" fill="url(#lacquerBlack)" stroke="#9e2a2b" stroke-width="1.5"/>
<!-- Right Arm Kote -->
<path d="M440 270 L460 350 L458 435 L474 425 L470 345 L445 260 Z" fill="#2d3036" stroke="#121317" stroke-width="1.2"/>
<!-- Tekko Right Hand Guard -->
<ellipse cx="456" cy="430" rx="10" ry="14" fill="url(#lacquerBlack)" stroke="#9e2a2b" stroke-width="1.5"/>
<!-- Nodowa (Throat Guard) & Menpo (Facial Fierce Mask) -->
<!-- Nodowa U-shaped neck lames -->
<path d="M325 210 Q350 232 375 210 Q382 235 350 242 Q318 235 325 210 Z" fill="url(#lacquerBlack)" stroke="#9e2a2b" stroke-width="1.2"/>
<!-- Menpo (Iron face mask with bristling white mustache & bare mouth opening) -->
<path d="M330 162 L370 162 L368 195 L350 208 L332 195 Z" fill="url(#lacquerBlack)" stroke="#000000" stroke-width="1.5"/>
<path d="M338 180 Q350 174 362 180 Q350 192 338 180 Z" fill="#801c1c"/>
<!-- Mustache bristles -->
<path d="M334 178 Q345 183 350 180 Q355 183 366 178" fill="none" stroke="#e0e0e0" stroke-width="2.5"/>
<!-- Suji-Bachi Kabuto (Multi-plate Ribbed Helmet with Shikoro & Crescent Maedate) -->
<!-- Shikoro (Multi-tiered Neck Guard Lames) -->
<g fill="url(#lacquerBlack)" stroke="#9e2a2b" stroke-width="1.3">
<path d="M308 165 Q350 185 392 165 L398 178 Q350 200 302 178 Z"/>
<path d="M302 178 Q350 200 398 178 L404 192 Q350 216 296 192 Z"/>
<path d="M296 192 Q350 216 404 192 L410 206 Q350 232 290 206 Z"/>
</g>
<!-- Fukigaeshi (Winged ear-turnbacks with crests) -->
<path d="M310 148 Q296 150 298 172 Q312 170 314 152 Z" fill="url(#lacquerBlack)" stroke="#d4af37" stroke-width="1.5"/>
<path d="M390 148 Q404 150 402 172 Q388 170 386 152 Z" fill="url(#lacquerBlack)" stroke="#d4af37" stroke-width="1.5"/>
<!-- Suji-bachi Bowl -->
<path d="M312 152 Q310 88 350 82 Q390 88 388 152 Z" fill="url(#lacquerBlack)" stroke="#0d0e10" stroke-width="2"/>
<!-- Raised Vertical Ribs (Suji) -->
<line x1="350" y1="82" x2="350" y2="150" stroke="#4f5259" stroke-width="2"/>
<line x1="335" y1="88" x2="328" y2="150" stroke="#4f5259" stroke-width="1.8"/>
<line x1="365" y1="88" x2="372" y2="150" stroke="#4f5259" stroke-width="1.8"/>
<line x1="322" y1="98" x2="318" y2="150" stroke="#4f5259" stroke-width="1.5"/>
<line x1="378" y1="98" x2="382" y2="150" stroke="#4f5259" stroke-width="1.5"/>
<!-- Tehen Kanamono (Gilded Crown Fitting at Apex) -->
<ellipse cx="350" cy="83" rx="10" ry="4" fill="url(#goldKuwagata)"/>
<!-- Gilded Crescent Moon Maedate (Frontal Crest) -->
<path d="M305 75 Q350 142 395 75 Q350 115 305 75 Z" fill="url(#goldKuwagata)" stroke="#806214" stroke-width="1.5"/>
<!-- Right Arm Weapon: Jumonji Yari (Cross-bladed Spear) -->
<g id="jumonji-yari">
<!-- Black Lacquered Oak Shaft with Ray-Skin Banding -->
<line x1="458" y1="55" x2="452" y2="812" stroke="#101114" stroke-width="7" stroke-linecap="round"/>
<!-- Mother-of-pearl (Raden) & Gilded Rings under Blade Socket -->
<rect x="453" y="145" width="10" height="22" fill="#d4af37"/>
<line x1="453" y1="152" x2="463" y2="152" stroke="#8a2020" stroke-width="2"/>
<line x1="453" y1="160" x2="463" y2="160" stroke="#8a2020" stroke-width="2"/>
<!-- Copper Habaki Collar -->
<rect x="454" y="132" width="8" height="13" fill="#b86d3b"/>
<!-- Main Vertical Spear Blade (Double-edged tempered steel) -->
<path d="M458 25 L464 132 L452 132 Z" fill="#ebf0f5" stroke="#32363d" stroke-width="1.5"/>
<line x1="458" y1="25" x2="458" y2="132" stroke="#ffffff" stroke-width="1.2"/>
<!-- Jumonji Horizontal Cross Blades (Forward-swept secondary wings) -->
<path d="M428 92 Q440 106 458 102 Q476 106 488 92 Q478 116 458 112 Q438 116 428 92 Z" fill="#ebf0f5" stroke="#32363d" stroke-width="1.5"/>
<!-- Brass Butt Cap (Ishizuki) at floor groundline -->
<path d="M451 790 L457 790 L455 812 L449 812 Z" fill="url(#goldKuwagata)"/>
</g>
</g>
</svg>
</div>
<div class="controls-panel">
<div class="slider-wrapper">
<div class="slider-labels">
<span id="lbl-0" class="active" onclick="jumpTo(0)">480 BCE · Sparta</span>
<span id="lbl-1" onclick="jumpTo(1)">1415 CE · Agincourt</span>
<span id="lbl-2" onclick="jumpTo(2)">1600 CE · Sekigahara</span>
</div>
<input type="range" id="timelineSlider" min="0" max="2" step="0.005" value="0" aria-label="Armour Timeline Slider">
</div>
<div class="quick-buttons">
<button type="button" class="era-btn active" id="btn-0" onclick="jumpTo(0)">480 BCE (Hoplite)</button>
<button type="button" class="era-btn" id="btn-1" onclick="jumpTo(1)">1415 CE (Man-at-Arms)</button>
<button type="button" class="era-btn" id="btn-2" onclick="jumpTo(2)">1600 CE (Samurai)</button>
</div>
</div>
<section class="dossier" aria-live="polite">
<div class="dossier-header">
<h2 class="era-title" id="dossierTitle">Classical Spartan Hoplite</h2>
<span class="era-status" id="dossierStatus">EXACT HISTORICAL STOP (0.00)</span>
</div>
<div class="dossier-grid">
<div class="dossier-label">Date & Place</div>
<div class="dossier-val" id="dossierDate"><strong>480 BCE</strong> — Peloponnese / Thermopylae, Classical Greece</div>
<div class="dossier-label">Panoply / Rig</div>
<div class="dossier-val" id="dossierRig"><strong>Hoplite Panoply</strong>: Corinthian helmet with high horsehair crest, chiseled bronze bell-cuirass, pteruges groin-flaps, and anatomical knemides.</div>
<div class="dossier-label">Materials</div>
<div class="dossier-val" id="dossierMaterials">Cast & hammered high-tin bronze (Cu-Sn), layered linen/stiffened rawhide, vegetable-tanned leather, dyed horsehair.</div>
<div class="dossier-label">Primary Weapon</div>
<div class="dossier-val" id="dossierWeapon"><strong>Dory Spear</strong> (c. 5th c. BCE): ~2.6 m straight ash shaft (*Fraxinus*), forged iron leaf head, cast-bronze four-sided *sauroter* butt-spike.</div>
<div class="dossier-label">Armourer’s Note</div>
<div class="dossier-val" id="dossierDetail">The four-sided bronze *sauroter* was not merely a counterbalance or ground-stand, but the primary lethal reserve when the spearhead inevitably shattered against shield-walls.</div>
</div>
</section>
</main>
<script>
const slider = document.getElementById('timelineSlider');
const gGreek = document.getElementById('period-greek');
const gMedieval = document.getElementById('period-medieval');
const gSamurai = document.getElementById('period-samurai');
const dossierTitle = document.getElementById('dossierTitle');
const dossierStatus = document.getElementById('dossierStatus');
const dossierDate = document.getElementById('dossierDate');
const dossierRig = document.getElementById('dossierRig');
const dossierMaterials = document.getElementById('dossierMaterials');
const dossierWeapon = document.getElementById('dossierWeapon');
const dossierDetail = document.getElementById('dossierDetail');
const eraButtons = [
document.getElementById('btn-0'),
document.getElementById('btn-1'),
document.getElementById('btn-2')
];
const eraLabels = [
document.getElementById('lbl-0'),
document.getElementById('lbl-1'),
document.getElementById('lbl-2')
];
const historicalData = [
{
title: "Classical Spartan Hoplite",
date: "480 BCE — Peloponnese / Thermopylae, Classical Greece",
rig: "Hoplite Panoply: Corinthian helmet with high transverse horsehair crest, chiseled bronze bell-cuirass, pteruges groin-flaps, anatomical knemides (greaves), and 90 cm dished aspis shield.",
materials: "Cast & hammered high-tin bronze (Cu-Sn), layered linen/stiffened rawhide, vegetable-tanned leather, dyed horsehair.",
weapon: "Dory Spear (c. 5th c. BCE): ~2.6 m straight ash shaft, forged iron leaf-point, cast-bronze four-sided sauroter butt-spike.",
detail: "The heavy four-sided bronze butt-spike (sauroter) was designed not merely as a balance weight or ground-stand, but as an immediate secondary spearpoint when the primary ash shaft shattered against an opposing bronze shield-wall."
},
{
title: "High Medieval Man-at-Arms",
date: "1415 CE — Agincourt / Azincourt, Artois, Kingdom of France",
rig: "Full 'White Harness': Hounskull (pig-faced) bascinet with perforated visor snout, maille aventail, globose tapul breastplate, articulated 4-lame fauld with hanging tassets, winged poleyns, and pointed sabatons.",
materials: "Fire-refined medium-carbon bloomery steel (oil-quenched & tempered plates), riveted iron maille rings, brass vervelles, oak-tanned leather straps.",
weapon: "Knightly Pollaxe (c. early 15th c.): Carbon-steel top thrusting dagger, forward axe blade, corrugated back-hammer, steel reinforcing langets on octagonal ash haft.",
detail: "The breastplate features a pronounced medial vertical ridge (tapul) engineered to create steep deflection angles that turn lance and arrow strikes outward into glancing trajectories rather than absorbing kinetic energy."
},
{
title: "Sengoku Commander / Bushi",
date: "1600 CE (Oct 21) — Battle of Sekigahara, Mino Province, Japan",
rig: "Tosei-Gusoku ('Modern Armour'): Suji-bachi kabuto with gilded crescent maedate, lacquered iron nimaido cuirass, tiered chu-sode, menpo face-mask with mustache, kusazuri tassets, splinted suneate, and waraji sandals.",
materials: "Hammered folded iron and steel plates, black urushi sap lacquer, odoshi braided silk cords, brass tehen kanamono, ray-skin (samegawa), rice-straw waraji.",
weapon: "Jumonji Yari (c. Momoyama period, late 16th c.): Cross-bladed spear with dual forward-swept side blades (eda), differentially tempered high-carbon steel edge, black-lacquered shaft with raden inlay.",
detail: "Unlike earlier box-like Heian-period ō-yoroi built for mounted archery, this late Sengoku harness is lightened, articulated, and chemically blackened with urushi lacquer specifically for close-quarter infantry slugging and musket-ball (tanegashima) deflection."
}
];
function updateExhibit(val) {
const t = parseFloat(val);
// Compute continuous piece-wise linear blending weights
let w0 = 0, w1 = 0, w2 = 0;
if (t <= 1.0) {
w0 = 1.0 - t;
w1 = t;
w2 = 0.0;
} else {
w0 = 0.0;
w1 = 2.0 - t;
w2 = t - 1.0;
}
// Direct SVG group opacity controls
gGreek.setAttribute('opacity', w0.toFixed(4));
gMedieval.setAttribute('opacity', w1.toFixed(4));
gSamurai.setAttribute('opacity', w2.toFixed(4));
// Visibility optimization to avoid redundant rendering
gGreek.style.display = (w0 > 0.001) ? 'inline' : 'none';
gMedieval.style.display = (w1 > 0.001) ? 'inline' : 'none';
gSamurai.style.display = (w2 > 0.001) ? 'inline' : 'none';
// Highlight nearest button and label
const activeIndex = t < 0.5 ? 0 : (t < 1.5 ? 1 : 2);
eraButtons.forEach((btn, idx) => {
btn.classList.toggle('active', idx === activeIndex);
});
eraLabels.forEach((lbl, idx) => {
lbl.classList.toggle('active', idx === activeIndex);
});
// Update label text according to exact stops vs transitions
const eps = 0.02;
if (Math.abs(t - 0.0) < eps) {
setDossier(0, "EXACT HISTORICAL STOP (480 BCE)");
} else if (Math.abs(t - 1.0) < eps) {
setDossier(1, "EXACT HISTORICAL STOP (1415 CE)");
} else if (Math.abs(t - 2.0) < eps) {
setDossier(2, "EXACT HISTORICAL STOP (1600 CE)");
} else {
// In-between stops: describe transition state explicitly
if (t < 1.0) {
const pct = Math.round(t * 100);
dossierTitle.textContent = "Transition: Classical Antiquity → Late Medieval";
dossierStatus.textContent = `INTERPOLATION: ${pct}% PROGRESS`;
dossierDate.innerHTML = `Morphing between <strong>480 BCE (Sparta)</strong> and <strong>1415 CE (Agincourt)</strong>. Over 1,895 years of metallurgy: cast bronze musculature evolving into articulated bloomery steel plate.`;
dossierRig.textContent = `Continuous rig overlay: Bronze bell-cuirass and Corinthian helmet fading into tapping globose breastplate and pig-faced bascinet. Fixed limb landmarks remain locked.`;
dossierMaterials.textContent = `Bronze alloy & tanned leather transitioning to heat-treated bloomery carbon steel & articulated iron maille.`;
dossierWeapon.textContent = `Greek Dory spear haft aligns with European Pollaxe center of mass; ash shaft diameter and hand grip remain anchored at (455, 430).`;
dossierDetail.textContent = `Notice the continuity of foot anchors on the floor groundline (y=815) and shoulder articulation (y=240). Neither the stature nor stance alters as the plate harness morphs.`;
} else {
const pct = Math.round((t - 1.0) * 100);
dossierTitle.textContent = "Transition: European Plate → Sengoku Samurai";
dossierStatus.textContent = `INTERPOLATION: ${pct}% PROGRESS`;
dossierDate.innerHTML = `Morphing between <strong>1415 CE (Agincourt)</strong> and <strong>1600 CE (Sekigahara)</strong>. 185 years across Eurasia: one-piece white harness shifting to lacquer-sealed modular tosei-gusoku.`;
dossierRig.textContent = `Continuous rig overlay: Pig-faced bascinet and steel fauld lames transforming into multi-plate suji-bachi kabuto, silk odoshi cordage, and nimaido chest cuirass.`;
dossierMaterials.textContent = `European carbon plate steel giving way to folded tamahagane/iron plates coated with moisture-sealing urushi tree lacquer and silk lacing.`;
dossierWeapon.textContent = `Western knightly pollaxe transitions to Momoyama jumonji yari (cross-bladed spear), preserving the right-hand grip line and strike geometry.`;
dossierDetail.textContent = `Watch the helmet crest transform from the high tapered bascinet skull to the gilded kuwagata crescent moon while retaining cranial eye-slit alignment.`;
}
}
}
function setDossier(index, statusText) {
const data = historicalData[index];
dossierTitle.textContent = data.title;
dossierStatus.textContent = statusText;
dossierDate.innerHTML = `<strong>${data.date.split('—')[0]}</strong> — ${data.date.split('—')[1]}`;
dossierRig.innerHTML = `<strong>${data.rig.split(':')[0]}</strong>: ${data.rig.split(':')[1]}`;
dossierMaterials.textContent = data.materials;
dossierWeapon.innerHTML = `<strong>${data.weapon.split(':')[0]}</strong>: ${data.weapon.split(':')[1]}`;
dossierDetail.textContent = data.detail;
}
function jumpTo(val) {
slider.value = val;
updateExhibit(val);
}
slider.addEventListener('input', (e) => {
updateExhibit(e.target.value);
});
// Initialize at 480 BCE stop
updateExhibit(0);
</script>
</body>
</html>
The weakest period
The weakest historical period is 480 BCE (Classical Spartan Hoplite), specifically regarding the combat posture of the Corinthian helmet. In actual field conditions outside the immediate clash of phalanxes, hoplites routinely tipped the Corinthian helmet back onto the crown of the head to expose the face for breathing and hearing, pulling it down over the eyes only moments before impact. For this exhibit, the helmet is depicted pulled fully down in its locked combat position to maintain a direct visual and functional comparison with the enclosed 1415 CE hounskull bascinet and the 1600 CE menpo mask, while keeping the ocular slit vector anchored directly to the invariant cranial landmark beneath.
Attachments
google/gemini-3.8-flash — page