Run Detail

completedqwen3.8-flash

Unscored

Every model's answer from this round

Recorded for these videos

17:31

Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)

Sep 2, 2026 · YouTube

19:45

Fable 5.1 writes an animated novel using Ren'Py... did it do better than Sol Pro 5.6?

Sep 1, 2026 · YouTube

14:09

Testing IBM Granite-4.2-8B! Can it name 100 women?

Aug 31, 2026 · YouTube

17:37

Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?

Aug 28, 2026 · YouTube

23:58

Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok

Aug 27, 2026 · YouTube

14:50

Stealth Ox Alpha: a new GLM model! Full test (coding & writing) against Grok, Gemini, GPT & others

Aug 21, 2026 · YouTube

21:23

Giving Qwen 3.8 27B another chance (+ GLM 5.2). Testing against GPT, Gemini, Grok etc.

Aug 18, 2026 · YouTube

51:00

AI Coding Showdown: Grok 4.6, Gemini 3.7, Terra-Pro, Qwen3.8 2.4TB, Muse Glimmer & more

Aug 15, 2026 · YouTube

27:51

Testing Gemini 3.7 Flash: Translation, Vision, and Coding Challenges

Aug 14, 2026 · YouTube

Provider

openrouter

Challenge Version

v2.0

Turns

Duration

868.3s

Total Tokens

118,492

Input Tokens

1,345

Output Tokens

117,147

Reasoning Tokens

104,666

Reasoning Effort

medium

Est. Cost

$0.0553

Started

8/26/2026, 10:38:29 PM

OR Provider

Alibaba

Finish Reason

stop

Generation ID

gen-1787783908-s4cYPILyPgUh79kKseUE

Turns (1)

Turn #1

1,345 in117,147 out104,666 reasoning118,492 total868.3s

user

You illustrate for a museum of arms and armour. Your drawings hang next to the real objects, and the curator reads your labels.

Build me the armoury slider: one HTML page, one figure, three eras.

The exhibit

A single standing figure. Below it, a slider. Drag the slider and the same figure is re-equipped for the era it lands on.

That is the exhibit. It lives or dies on the drawing, so draw properly.

The three eras

You choose all three yourself, and the choosing is part of the work. Pick things you actually know — you are judged on whether the drawing is right, not on how exotic the pick was.

1. Anywhere in the last five hundred years. Any year from 1526 onwards, anywhere on earth. Your choice — but set it at least a hundred and fifty years before your second era, so nobody could confuse the two drawings.

2. About a hundred years ago. A specific year between 1910 and 1945, and a specific place. Yours to pick.

3. Sometime between 2040 and 2140. Speculative, and yours to invent — but it must read as protective equipment descended from the two eras before it, not as a costume from a film.

Name the year and the place for all three. "Seventeenth-century Europe" is not an era; 1631, Saxony is.

The hard requirements

1. One body. It is the same person all three times. Same proportions, same height, same anchor points, standing in the same place. The arms may move to hold what they are holding; the torso, head and legs stay put and stay the same size. Across the full sweep of the slider the figure must never rescale, drift across the canvas, change pose wholesale or come apart at a joint.

This is an architectural requirement, not a styling note. Build a rig — a body with named attachment points, and kit that mounts to them. Three independent drawings cross-faded into each other is the failure mode I am looking for, and it is instantly visible: the figure twitches and resizes every time the slider crosses an era.

2. Continuity and reversibility. Dragging must never make the figure jump. Between two eras there is a transition, not a cut. And the drawing is a pure function of slider position: land on the first era, drag to the third, drag back, and you get pixel-for-pixel what you had before.

Your three choices are made once, by you, while you write the file. Nothing about the figure is decided at runtime — no accumulated state, no clock, no Math.random anywhere.

3. The label. Under the figure, a label giving the year, the place, the armour by its proper name, what it is made of, and the weapon. Between eras, the label says what it is between.

The label must describe the figure actually drawn above it. If it says cuirassier's three-quarter harness I expect to see plate to the knee, not a mail shirt.

4. The weapon is dated as tightly as the armour. It is not a prop. A weapon that outlives its armour by three centuries is the same error as the armour itself being wrong.

5. No horned Viking helmets. They never existed — nineteenth-century opera costume, not archaeology. Take that as the example, not the whole rule: popular-culture armour is not armour history, and the samurai who is all lacquer and no lacing, the knight too heavy to stand up unaided, and the future soldier wearing a video game are all in the same category.

House rules

One file. Everything inline — no CDN, no external stylesheet, font, script or image. data: URIs are fine.
Inline SVG for the figure. Not canvas, not an image, not a font glyph — I want to open devtools and read the armour.
No libraries. No 3D engine.
No network at runtime.
No localStorage, sessionStorage, cookies or indexedDB. It runs in a sandboxed frame where touching them throws.
No build step, no server. Opened as a local file, it works.
Return the file as exactly one fenced html block.

Answer in exactly these sections

The timeline

Your three eras, in order, one line each: the year, the place, what they are wearing, what they are carrying, and one detail a non-specialist would get wrong that you got right.

The rig

One paragraph. Your attachment points, your layer order, and what happens to the drawing at a slider position between two eras.

The file

The single fenced html block.

The weakest era

Which of your three is the shakiest historically, and why. Name the anachronism you were most tempted by. If you knowingly kept one — because the accurate version is unreadable at this size, which is a real illustrator's problem — say which and say why.

What I check

I drag the slider slowly from end to end and watch the figure's feet and shoulders for drift, twitch and rescaling. I drag back and forth across one boundary looking for anything that changes when it shouldn't. I read every label against its drawing. I open devtools and look at how the third era is built compared to the first.

That last one matters. Three is not many, and the usual failure is a beautifully rendered first era and a future soldier made of three rounded rectangles. The last era gets the same care as the first. I will drag straight to the end before I do anything else.

If you ran out of room and know it, say so in "The weakest era". A stated weakness is a finding. Quietly thinning out towards the end and writing it up as three finished drawings is the worst answer available here.

assistant

The timeline

1631, near Breitenfeld, Saxony — Electoral Saxon cuirassier’s three-quarter harness over a buff coat; carrying a wheellock pistol. A non-specialist would put him in a full medieval plate harness with greaves and a visored knight’s helm; by 1631 cuirassiers wore plate only to the knee, a buff leather coat as real armour, and a burgonet-style helmet.
1916, Flers, Somme — British infantryman’s Mk I steel helmet and Mills Pattern 1908 webbing; carrying a Lee-Enfield SMLE Mk III with 1907 Pattern bayonet. A non-specialist would call the helmet a German Stahlhelm or imagine a machine gun; it is the British Brodie helmet and a bolt-action magazine rifle.
2075, near Breitenfeld, Saxony — NATO Type 75 protective ensemble: composite brimmed helmet with visor, ceramic/UHMWPE plate carrier, limb guards; carrying a 6.8 mm polymer-cased modular rifle. A non-specialist would expect a powered exoskeleton or film stormtrooper; it is still helmet + torso plate + limb guards + magazine rifle, just with better materials.

The rig

The rig is a fixed SVG body group with named anchor coordinates: head centre (300,120), neck base (300,180), shoulders (255,190) and (345,190), elbows (243,275) and (357,275), wrists/hands (238,358) and (362,358), chest (300,240), waist (300,300), hips (280,335) and (320,335), knees (278,460) and (322,460), ankles (278,585) and (322,585); the era kits are overlay groups mounted at those same coordinates, with no body inside any era group and no scale, translate, or morph on the era groups. Layer order is ground shadow, body, era 1, era 2, era 3; within each era the undergarment, limb protection, torso protection, head protection, weapon, then hand/glove are ordered so the hand can sit over the grip. At a slider position between eras, a triangular weighting sets the opacity of the two adjacent kit groups (for example, at one-quarter: 0.5 / 0.5; at three-quarters: 0.5 / 0.5), while the body, anchors, and all geometry remain identical; the label changes to a “between” description.

The file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Armoury Slider</title>
<style>
:root {
  --bg:#111;
  --panel:#1b1b1b;
  --ink:#e8e2d5;
  --muted:#b9b1a1;
  --line:#3a3631;
}
* { box-sizing: border-box; }
body {
  margin:0;
  background: radial-gradient(circle at 50% 20%, #222 0%, #0c0c0c 70%);
  color:var(--ink);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
}
main {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
h1 {
  font-size: 1.25rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 6px;
  font-weight: 600;
  color: #d8cfbd;
}
p.sub {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .95rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.exhibit {
  background: linear-gradient(180deg, #191919, #121212);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 18px;
}
.figure-wrap {
  display: flex;
  justify-content: center;
}
svg#figure {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
}
.slider-wrap {
  margin-top: 16px;
  padding: 12px 10px 6px;
  border-top: 1px solid var(--line);
}
input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 30px;
  background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  background: #2c2a27;
  border: 1px solid #5d564d;
  border-radius: 4px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e9e2d3, #8b8478);
  border: 1px solid #252220;
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
  cursor: grab;
}
input[type=range]::-moz-range-track {
  height: 8px;
  background: #2c2a27;
  border: 1px solid #5d564d;
  border-radius: 4px;
}
input[type=range]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e9e2d3, #8b8478);
  border: 1px solid #252220;
  cursor: grab;
}
.ticks {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--muted);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin-top: 4px;
}
.label {
  margin-top: 18px;
  background: #151515;
  border: 1px solid var(--line);
  padding: 14px 16px;
  min-height: 170px;
}
.label h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: #f0e8d8;
}
.label .place {
  margin: 0 0 10px;
  color: #c9bfae;
  font-style: italic;
}
.label dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 12px;
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .92rem;
}
.label dt {
  color: #9d9485;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  padding-top: 2px;
}
.label dd {
  margin: 0;
  color: #e7e0d2;
}
.note {
  margin-top: 10px;
  color: #a99f8f;
  font-size: .85rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
</style>
</head>
<body>
<main>
  <h1>Armoury Slider</h1>
  <p class="sub">One body. Three eras. Drag the bar and the rig is re-equipped, not redrawn.</p>

  <section class="exhibit">
    <div class="figure-wrap">
      <svg id="figure" viewBox="0 0 600 660" role="img" aria-label="Standing figure equipped for three eras">
        <defs>
          <linearGradient id="blackenedSteel" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#7f868c"/>
            <stop offset="0.35" stop-color="#3d4247"/>
            <stop offset="0.65" stop-color="#5b6268"/>
            <stop offset="1" stop-color="#25292c"/>
          </linearGradient>
          <linearGradient id="steel" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#dfe4e8"/>
            <stop offset="0.45" stop-color="#8d959c"/>
            <stop offset="0.6" stop-color="#697076"/>
            <stop offset="1" stop-color="#c2c9ce"/>
          </linearGradient>
          <linearGradient id="buff" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#c99a5d"/>
            <stop offset="1" stop-color="#8e6336"/>
          </linearGradient>
          <linearGradient id="khaki" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#9b8f68"/>
            <stop offset="1" stop-color="#6b6247"/>
          </linearGradient>
          <linearGradient id="composite" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#707a80"/>
            <stop offset="0.4" stop-color="#3d454a"/>
            <stop offset="0.7" stop-color="#566168"/>
            <stop offset="1" stop-color="#24292d"/>
          </linearGradient>
          <linearGradient id="visor" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#ffd54f" stop-opacity="0.85"/>
            <stop offset="0.5" stop-color="#ff8f00" stop-opacity="0.7"/>
            <stop offset="1" stop-color="#3e2723" stop-opacity="0.75"/>
          </linearGradient>
        </defs>

        <ellipse cx="300" cy="612" rx="115" ry="13" fill="#000" opacity="0.28"/>

        <g id="body">
          <g fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path d="M280,335 L278,460 L278,585" stroke="#6e6e6e" stroke-width="38"/>
            <path d="M320,335 L322,460 L322,585" stroke="#6e6e6e" stroke-width="38"/>
            <path d="M255,196 L243,275 L238,355" stroke="#6e6e6e" stroke-width="26"/>
            <path d="M345,196 L357,275 L362,355" stroke="#6e6e6e" stroke-width="26"/>
          </g>
          <ellipse cx="270" cy="600" rx="26" ry="12" fill="#585858" stroke="#222" stroke-width="2"/>
          <ellipse cx="330" cy="600" rx="26" ry="12" fill="#585858" stroke="#222" stroke-width="2"/>
          <path d="M255,192 C255,178 272,170 300,170 C328,170 345,178 345,192 L338,308 L262,308 Z" fill="#6e6e6e" stroke="#2e2e2e" stroke-width="2"/>
          <path d="M262,302 L338,302 L332,345 L268,345 Z" fill="#6e6e6e" stroke="#2e2e2e" stroke-width="2"/>
          <rect x="288" y="148" width="24" height="32" rx="8" fill="#6e6e6e" stroke="#2e2e2e" stroke-width="2"/>
          <ellipse cx="300" cy="120" rx="30" ry="36" fill="#8b8b8b" stroke="#2e2e2e" stroke-width="2"/>
          <ellipse cx="270" cy="122" rx="4" ry="9" fill="#7a7a7a" stroke="#2e2e2e" stroke-width="1.5"/>
          <ellipse cx="330" cy="122" rx="4" ry="9" fill="#7a7a7a" stroke="#2e2e2e" stroke-width="1.5"/>
          <circle cx="289" cy="118" r="2.6" fill="#202020"/>
          <circle cx="311" cy="118" r="2.6" fill="#202020"/>
          <path d="M291,136 Q300,142 309,136" fill="none" stroke="#202020" stroke-width="2.2" stroke-linecap="round"/>
          <circle cx="238" cy="358" r="13" fill="#6e6e6e" stroke="#2e2e2e" stroke-width="2"/>
          <circle cx="362" cy="358" r="13" fill="#6e6e6e" stroke="#2e2e2e" stroke-width="2"/>
        </g>

        <g id="era1" opacity="1">
          <g fill="url(#buff)" stroke="#5d3d1f" stroke-width="2" stroke-linejoin="round">
            <path d="M257,182 C257,172 273,164 300,164 C327,164 343,172 343,182 L337,308 L263,308 Z"/>
            <path d="M263,302 L337,302 L332,355 L268,355 Z"/>
          </g>
          <g fill="none" stroke="url(#buff)" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
            <path d="M255,196 L243,275 L238,355"/>
            <path d="M345,196 L357,275 L362,355"/>
          </g>
          <g fill="none" stroke="#3d2718" stroke-width="42" stroke-linecap="round" stroke-linejoin="round">
            <path d="M280,335 L278,460 L278,585"/>
            <path d="M320,335 L322,460 L322,585"/>
          </g>
          <ellipse cx="270" cy="600" rx="27" ry="13" fill="#2a1a10" stroke="#111" stroke-width="2"/>
          <ellipse cx="330" cy="600" rx="27" ry="13" fill="#2a1a10" stroke="#111" stroke-width="2"/>

          <g fill="url(#blackenedSteel)" stroke="#151719" stroke-width="2">
            <path d="M252,178 L348,178 L343,228 C343,274 322,302 300,314 C278,302 257,274 257,228 Z"/>
            <path d="M257,278 L343,278 L341,293 L259,293 Z"/>
            <path d="M259,293 L341,293 L339,308 L261,308 Z"/>
            <path d="M274,150 C274,142 286,138 300,138 C314,138 326,142 326,150 L330,188 L270,188 Z"/>
            <path d="M238,188 C238,164 258,154 278,166 L280,198 C260,208 238,204 238,188 Z"/>
            <path d="M362,188 C362,164 342,154 322,166 L320,198 C340,208 362,204 362,188 Z"/>
          </g>
          <path d="M300,182 L300,310" fill="none" stroke="#e8edf1" stroke-width="3" opacity="0.25"/>

          <g fill="url(#blackenedSteel)" stroke="#151719" stroke-width="2">
            <path d="M262,300 L296,300 L293,428 L268,428 Z"/>
            <path d="M304,300 L338,300 L332,428 L306,428 Z"/>
            <circle cx="278" cy="460" r="18"/>
            <circle cx="322" cy="460" r="18"/>
          </g>

          <g fill="url(#blackenedSteel)" stroke="#151719" stroke-width="2">
            <path d="M267,110 C267,76 282,62 300,62 C318,62 333,76 333,110 Z"/>
            <path d="M263,98 C280,108 320,108 337,98 L337,106 C320,116 280,116 263,106 Z"/>
            <path d="M267,106 C260,122 262,142 274,154 L288,146 L282,106 Z"/>
            <path d="M333,106 C340,122 338,142 326,154 L312,146 L318,106 Z"/>
            <path d="M275,136 L325,136 L332,158 L268,158 Z"/>
          </g>

          <g fill="none" stroke="url(#blackenedSteel)" stroke-width="26" stroke-linecap="round">
            <path d="M243,275 L238,355"/>
            <path d="M357,275 L362,355"/>
          </g>
          <g fill="url(#blackenedSteel)" stroke="#151719" stroke-width="2">
            <circle cx="243" cy="275" r="14"/>
            <circle cx="357" cy="275" r="14"/>
          </g>

          <g transform="translate(362,358) rotate(18)">
            <path d="M-8,-40 C-11,-24 -6,-14 0,-11 C6,-14 11,-24 8,-40 Z" fill="#5d3b22" stroke="#2b1a0f" stroke-width="2"/>
            <rect x="-9" y="-14" width="18" height="22" rx="3" fill="#7d858b" stroke="#151719" stroke-width="2"/>
            <circle cx="0" cy="-4" r="5" fill="#b7bec3" stroke="#222" stroke-width="1.5"/>
            <rect x="-4" y="8" width="8" height="56" rx="2" fill="#8b939a" stroke="#151719" stroke-width="2"/>
            <rect x="-6" y="8" width="12" height="7" fill="#a7aeb4" stroke="#151719" stroke-width="1.5"/>
          </g>

          <g fill="url(#blackenedSteel)" stroke="#151719" stroke-width="2">
            <rect x="226" y="342" width="24" height="16" rx="5"/>
            <rect x="350" y="342" width="24" height="16" rx="5"/>
            <circle cx="238" cy="358" r="14"/>
            <circle cx="362" cy="358" r="14"/>
          </g>

          <g fill="#151719" opacity="0.8">
            <circle cx="262" cy="186" r="2"/>
            <circle cx="338" cy="186" r="2"/>
            <circle cx="262" cy="304" r="2"/>
            <circle cx="338" cy="304" r="2"/>
          </g>
        </g>

        <g id="era2" opacity="0">
          <g fill="none" stroke="url(#khaki)" stroke-width="40" stroke-linecap="round" stroke-linejoin="round">
            <path d="M280,335 L278,460 L278,585"/>
            <path d="M320,335 L322,460 L322,585"/>
          </g>
          <g fill="none" stroke="#a89169" stroke-width="42" stroke-linecap="round">
            <path d="M278,460 L278,585"/>
            <path d="M322,460 L322,585"/>
          </g>
          <g fill="none" stroke="#8f7753" stroke-width="2" opacity="0.8">
            <path d="M258,470 L298,480"/>
            <path d="M258,495 L298,505"/>
            <path d="M258,520 L298,530"/>
            <path d="M258,545 L298,555"/>
            <path d="M302,470 L342,480"/>
            <path d="M302,495 L342,505"/>
            <path d="M302,520 L342,530"/>
            <path d="M302,545 L342,555"/>
          </g>
          <ellipse cx="270" cy="600" rx="27" ry="13" fill="#1d1d1d" stroke="#000" stroke-width="2"/>
          <ellipse cx="330" cy="600" rx="27" ry="13" fill="#1d1d1d" stroke="#000" stroke-width="2"/>

          <g fill="url(#khaki)" stroke="#4f4631" stroke-width="2">
            <path d="M257,182 C257,172 273,164 300,164 C327,164 343,172 343,182 L337,308 L263,308 Z"/>
            <path d="M263,302 L337,302 L332,345 L268,345 Z"/>
          </g>
          <g fill="none" stroke="url(#khaki)" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
            <path d="M255,196 L243,275 L238,355"/>
            <path d="M345,196 L357,275 L362,355"/>
          </g>
          <path d="M282,168 L300,188 L318,168 L326,178 L300,200 L274,178 Z" fill="#726849" stroke="#4f4631" stroke-width="2"/>
          <g fill="#c9b78a" stroke="#4f4631" stroke-width="1">
            <circle cx="300" cy="208" r="2.4"/>
            <circle cx="300" cy="228" r="2.4"/>
            <circle cx="300" cy="248" r="2.4"/>
            <circle cx="300" cy="268" r="2.4"/>
          </g>
          <g fill="#7a7052" stroke="#4f4631" stroke-width="2">
            <rect x="268" y="245" width="24" height="20" rx="2"/>
            <rect x="308" y="245" width="24" height="20" rx="2"/>
          </g>

          <g fill="none" stroke="#6b5537" stroke-width="8" stroke-linecap="round">
            <path d="M272,182 L288,305"/>
            <path d="M328,182 L312,305"/>
          </g>
          <g fill="#6b5537" stroke="#3f301f" stroke-width="2">
            <path d="M260,296 L340,296 L340,308 L260,308 Z"/>
            <rect x="262" y="308" width="28" height="26" rx="3"/>
            <rect x="310" y="308" width="28" height="26" rx="3"/>
            <rect x="286" y="308" width="28" height="22" rx="3"/>
          </g>

          <g fill="url(#steel)" stroke="#222" stroke-width="2">
            <path d="M266,110 C266,76 281,62 300,62 C319,62 334,76 334,110 Z"/>
            <ellipse cx="300" cy="108" rx="58" ry="7"/>
          </g>
          <path d="M266,110 C280,116 320,116 334,110" fill="none" stroke="#222" stroke-width="2"/>
          <path d="M270,112 C280,152 320,152 330,112" fill="none" stroke="#5a4631" stroke-width="3"/>
          <circle cx="300" cy="70" r="3" fill="#555"/>

          <path d="M358,268 L300,320 L364,590" fill="none" stroke="#6b5537" stroke-width="4" opacity="0.95"/>

          <g>
            <rect x="359" y="260" width="12" height="340" fill="#3b3b3b" stroke="#111" stroke-width="1.5"/>
            <path d="M356,380 L374,380 L377,600 L353,600 Z" fill="#6b4a2b" stroke="#2b1a0f" stroke-width="2"/>
            <rect x="357" y="260" width="16" height="12" fill="#2f2f2f" stroke="#111" stroke-width="1.5"/>
            <rect x="361" y="160" width="8" height="102" fill="#aeb5ba" stroke="#333" stroke-width="1.5"/>
            <path d="M361,160 L365,142 L369,160 Z" fill="#aeb5ba" stroke="#333" stroke-width="1.5"/>
            <rect x="356" y="330" width="18" height="10" fill="#2f2f2f" stroke="#111" stroke-width="1.5"/>
            <rect x="373" y="345" width="20" height="7" rx="2" fill="#2f2f2f" stroke="#111" stroke-width="1.5"/>
          </g>

          <g fill="#6b5537" stroke="#3f301f" stroke-width="2">
            <rect x="226" y="342" width="24" height="16" rx="5"/>
            <rect x="350" y="342" width="24" height="16" rx="5"/>
            <circle cx="238" cy="358" r="13"/>
            <circle cx="362" cy="358" r="13"/>
          </g>
        </g>

        <g id="era3" opacity="0">
          <g fill="none" stroke="#2d3236" stroke-width="40" stroke-linecap="round" stroke-linejoin="round">
            <path d="M280,335 L278,460 L278,585"/>
            <path d="M320,335 L322,460 L322,585"/>
          </g>
          <g fill="none" stroke="#2d3236" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
            <path d="M255,196 L243,275 L238,355"/>
            <path d="M345,196 L357,275 L362,355"/>
          </g>
          <g fill="#2d3236" stroke="#111416" stroke-width="2">
            <path d="M257,182 C257,172 273,164 300,164 C327,164 343,172 343,182 L337,310 L263,310 Z"/>
            <path d="M263,302 L337,302 L332,345 L268,345 Z"/>
          </g>
          <ellipse cx="270" cy="600" rx="28" ry="13" fill="#15181a" stroke="#000" stroke-width="2"/>
          <ellipse cx="330" cy="600" rx="28" ry="13" fill="#15181a" stroke="#000" stroke-width="2"/>

          <g fill="url(#composite)" stroke="#111" stroke-width="2">
            <path d="M259,468 L297,468 L295,586 L261,586 Z"/>
            <path d="M303,468 L341,468 L339,586 L305,586 Z"/>
          </g>
          <g fill="none" stroke="#111" stroke-width="2" opacity="0.7">
            <path d="M261,490 L295,490"/>
            <path d="M261,520 L295,520"/>
            <path d="M261,550 L295,550"/>
            <path d="M305,490 L339,490"/>
            <path d="M305,520 L339,520"/>
            <path d="M305,550 L339,550"/>
          </g>

          <g fill="url(#composite)" stroke="#111" stroke-width="2">
            <path d="M261,318 L297,318 L295,432 L267,432 Z"/>
            <path d="M303,318 L339,318 L333,432 L305,432 Z"/>
          </g>
          <g fill="none" stroke="#111" stroke-width="2" opacity="0.7">
            <path d="M263,345 L295,345"/>
            <path d="M263,375 L295,375"/>
            <path d="M263,405 L295,405"/>
            <path d="M305,345 L337,345"/>
            <path d="M305,375 L337,375"/>
            <path d="M305,405 L337,405"/>
          </g>

          <g fill="url(#composite)" stroke="#111" stroke-width="2">
            <rect x="259" y="440" width="38" height="38" rx="12"/>
            <rect x="303" y="440" width="38" height="38" rx="12"/>
          </g>

          <g fill="url(#composite)" stroke="#111" stroke-width="2">
            <path d="M252,178 L348,178 L344,236 C344,282 322,308 300,320 L278,308 C256,282 256,236 256,236 Z"/>
            <path d="M256,292 L344,292 L340,320 L260,320 Z"/>
            <path d="M268,168 L288,168 L286,198 L266,198 Z"/>
            <path d="M312,168 L332,168 L334,198 L314,198 Z"/>
            <path d="M238,188 C238,166 256,156 276,166 L278,196 C258,206 238,202 238,188 Z"/>
            <path d="M362,188 C362,166 344,156 324,166 L322,196 C342,206 362,202 362,188 Z"/>
          </g>
          <g fill="none" stroke="#111" stroke-width="2" opacity="0.8">
            <path d="M256,238 L344,238"/>
            <path d="M259,262 L341,262"/>
            <path d="M262,286 L338,286"/>
            <path d="M300,182 L300,316"/>
          </g>
          <g fill="#111" opacity="0.8">
            <circle cx="262" cy="186" r="2.2"/>
            <circle cx="338" cy="186" r="2.2"/>
            <circle cx="262" cy="312" r="2.2"/>
            <circle cx="338" cy="312" r="2.2"/>
            <circle cx="270" cy="174" r="2.2"/>
            <circle cx="330" cy="174" r="2.2"/>
          </g>

          <path d="M268,150 L332,150 L338,178 L262,178 Z" fill="#3a3f44" stroke="#111" stroke-width="2"/>

          <g fill="url(#composite)" stroke="#111" stroke-width="2">
            <path d="M264,110 C264,74 280,58 300,58 C320,58 336,74 336,110 Z"/>
            <ellipse cx="300" cy="108" rx="56" ry="7"/>
            <path d="M272,146 C284,162 316,162 328,146 L326,158 C314,172 286,172 274,158 Z"/>
          </g>
          <path d="M268,108 L332,108 L329,134 C319,143 281,143 271,134 Z" fill="url(#visor)" stroke="#111" stroke-width="2" opacity="0.82"/>
          <g fill="#3a3f44" stroke="#111" stroke-width="2">
            <rect x="262" y="96" width="8" height="28" rx="3"/>
            <rect x="330" y="96" width="8" height="28" rx="3"/>
            <rect x="292" y="56" width="16" height="8" rx="3"/>
          </g>

          <g fill="none" stroke="url(#composite)" stroke-width="24" stroke-linecap="round">
            <path d="M243,275 L238,355"/>
            <path d="M357,275 L362,355"/>
          </g>
          <g fill="url(#composite)" stroke="#111" stroke-width="2">
            <circle cx="243" cy="275" r="15"/>
            <circle cx="357" cy="275" r="15"/>
          </g>

          <g>
            <rect x="357" y="225" width="16" height="70" rx="3" fill="#222" stroke="#000" stroke-width="2"/>
            <rect x="359" y="225" width="12" height="8" fill="#111"/>
            <rect x="352" y="295" width="26" height="145" rx="6" fill="url(#composite)" stroke="#111" stroke-width="2"/>
            <rect x="348" y="275" width="34" height="22" rx="4" fill="#2d3134" stroke="#111" stroke-width="2"/>
            <rect x="352" y="280" width="26" height="12" rx="2" fill="#111"/>
            <circle cx="365" cy="286" r="3.5" fill="#6b8ca8" opacity="0.8"/>
            <rect x="344" y="360" width="18" height="65" rx="4" fill="#2d3134" stroke="#111" stroke-width="2"/>
            <path d="M352,440 L378,440 L380,535 L350,535 Z" fill="url(#composite)" stroke="#111" stroke-width="2"/>
            <rect x="356" y="330" width="18" height="40" rx="4" fill="#1f2225" stroke="#111" stroke-width="2"/>
            <rect x="350" y="305" width="30" height="5" fill="#111" opacity="0.6"/>
          </g>

          <g fill="url(#composite)" stroke="#111" stroke-width="2">
            <rect x="226" y="342" width="24" height="16" rx="5"/>
            <rect x="350" y="342" width="24" height="16" rx="5"/>
            <circle cx="238" cy="358" r="14"/>
            <circle cx="362" cy="358" r="14"/>
            <rect x="226" y="352" width="24" height="10" rx="4" fill="#3a3f44"/>
            <rect x="350" y="352" width="24" height="10" rx="4" fill="#3a3f44"/>
          </g>
        </g>
      </svg>
    </div>

    <div class="slider-wrap">
      <label for="slider" style="position:absolute;left:-9999px;">Era</label>
      <input id="slider" type="range" min="0" max="1000" step="1" value="0">
      <div class="ticks"><span>1631</span><span>1916</span><span>2075</span></div>
    </div>

    <div id="label" class="label" aria-live="polite">
      <h2 id="l-title">1631</h2>
      <p id="l-place" class="place">near Breitenfeld, Saxony</p>
      <dl>
        <dt>Armour</dt>
        <dd id="l-armour">Electoral Saxon cuirassier’s three-quarter harness</dd>
        <dt>Material</dt>
        <dd id="l-material">blackened steel cuirass, burgonet and gauntlets; buff leather coat</dd>
        <dt>Weapon</dt>
        <dd id="l-weapon">wheellock pistol</dd>
      </dl>
      <p id="l-note" class="note">Not a medieval full harness: plate stops at the knee, the buff coat is armour, and the pistol is a cavalry wheellock.</p>
    </div>
  </section>
</main>

<script>
(function () {
  const slider = document.getElementById('slider');
  const era1 = document.getElementById('era1');
  const era2 = document.getElementById('era2');
  const era3 = document.getElementById('era3');

  const lTitle = document.getElementById('l-title');
  const lPlace = document.getElementById('l-place');
  const lArmour = document.getElementById('l-armour');
  const lMaterial = document.getElementById('l-material');
  const lWeapon = document.getElementById('l-weapon');
  const lNote = document.getElementById('l-note');

  const eras = [
    {
      title: '1631',
      place: 'near Breitenfeld, Saxony',
      armour: 'Electoral Saxon cuirassier’s three-quarter harness',
      material: 'blackened steel cuirass, burgonet and gauntlets; buff leather coat',
      weapon: 'wheellock pistol',
      note: 'Not a medieval full harness: plate stops at the knee, the buff coat is armour, and the pistol is a cavalry wheellock.'
    },
    {
      title: '1916',
      place: 'Flers, Somme',
      armour: 'British infantryman’s Mk I steel helmet and Mills Pattern 1908 webbing',
      material: 'Hadfield manganese steel, wool serge, cotton webbing, leather',
      weapon: 'Lee-Enfield SMLE Mk III with 1907 Pattern bayonet',
      note: 'The helmet is the British Brodie, not a German Stahlhelm; the rifle is bolt-action, not a machine gun.'
    },
    {
      title: '2075',
      place: 'near Breitenfeld, Saxony',
      armour: 'NATO Type 75 protective ensemble',
      material: 'boron-carbide/ceramic plates, UHMWPE and aramid soft armour, thermoplastic elastomer, ballistic visor',
      weapon: '6.8 mm polymer-cased modular rifle',
      note: 'No powered exoskeleton or film costume: it is still a helmet, plate carrier, limb guards and a magazine rifle.'
    }
  ];

  const transitions = [
    {
      title: 'Between 1631 and 1916',
      place: 'Saxony → Somme',
      armour: 'three-quarter harness fading to Mk I helmet and webbing',
      material: 'blackened steel/buff leather → manganese steel/wool/cotton webbing',
      weapon: 'wheellock pistol → Lee-Enfield SMLE Mk III',
      note: 'The cuirass is disappearing; the head protection remains, but becomes a shallow steel helmet.'
    },
    {
      title: 'Between 1916 and 2075',
      place: 'Somme → Saxony',
      armour: 'Brodie helmet and webbing becoming composite helmet and plate carrier',
      material: 'manganese steel/wool/webbing → ceramic/UHMWPE composite and aramid',
      weapon: 'Lee-Enfield SMLE Mk III → 6.8 mm polymer-cased modular rifle',
      note: 'The helmet brim, torso plate and limb guards are the surviving lines from the earlier two eras.'
    }
  ];

  function clamp(v) {
    return v < 0 ? 0 : v > 1 ? 1 : v;
  }

  function weights(t) {
    const w1 = clamp(1 - 2 * t);
    const w2 = t <= 0.5 ? clamp(2 * t) : clamp(2 - 2 * t);
    const w3 = clamp(2 * t - 1);
    return [w1, w2, w3];
  }

  function setEra(e, o) {
    e.setAttribute('opacity', String(o));
  }

  function update() {
    const t = Number(slider.value) / Number(slider.max);
    const w = weights(t);

    setEra(era1, w[0]);
    setEra(era2, w[1]);
    setEra(era3, w[2]);

    let data;
    if (t < 0.001) {
      data = eras[0];
    } else if (Math.abs(t - 0.5) < 0.001) {
      data = eras[1];
    } else if (t > 0.999) {
      data = eras[2];
    } else if (t < 0.5) {
      data = transitions[0];
    } else {
      data = transitions[1];
    }

    lTitle.textContent = data.title;
    lPlace.textContent = data.place;
    lArmour.textContent = data.armour;
    lMaterial.textContent = data.material;
    lWeapon.textContent = data.weapon;
    lNote.textContent = data.note;
  }

  slider.addEventListener('input', update);
  update();
})();
</script>
</body>
</html>

The weakest era

The first is the shakiest historically. By 1631 many cuirassiers were moving toward a buff coat and a half cuirass; a full three-quarter harness with tassets and knee cops is a conservative German style and not every Saxon trooper would have worn exactly that. I chose it to keep a clear plate-to-plate line into 2075. The anachronism I was most tempted by was a visored close helmet and greaves to make it read instantly as “armour”; I kept a burgonet and boots. I knowingly kept the buff coat simplified as a tan sleeve and skirt: a bulky buff coat would swallow the cuirass at this size, but it should be understood as the thick leather garment under the plate. The second is the safest; the third is a design inference, not history, and its deliberate compromise is a rigid plate-carrier silhouette instead of a soft pouchy carrier so the descent from the cuirass remains legible.

Attachments

qwen/qwen3.8-flash — page