🏛️ The Cipher Museum

"The heart of the discerning acquires knowledge, for the ears of the wise seek it out." — Proverbs 18:15

Exploring 3,900+ years of encryption, cryptanalysis, and hidden history.

The Cipher Museum is part digital exhibit, part cipher playground, and part codebreaking classroom exploring 3,900+ years of encryption, cryptanalysis, and hidden history across 139 exhibits and 13 exhibit halls. Every cipher exhibit ships with a fully interactive encrypt/decrypt demo (or, for unsolved and visualization-only exhibits, a hand-built widget). Modern cryptography uses more than ciphers — secure systems combine key exchange, encryption, and hashing.

Live Site →

---

📰 Latest Update

• Added a premium six-stage cryptography evolution strip to timeline.html, positioned above the historical event timeline.
• Sequence is explicit and ordered: Ancient → Classical → Mechanical → Modern → Symmetric (AES) → Asymmetric (Public-Key).
• Implemented mathematically even horizontal spacing, straight directional connectors, and clear arrowheads.
• Enforced strict two-line node labels, including exact wording for:
  • AES / Modern Symmetric Encryption
  • Public-Key Cryptography / Asymmetric Encryption
• Standardized icon style using consistent inline SVG sizing and stroke weight.
• Added subtle exhibit-style glow, responsive mobile behavior, and reduced-motion support.

---

✨ Features

🗺️ Thirteen Exhibit Halls · 139 Exhibits

Hall	Title	Ciphers
I	World Origins of Cryptography	Egyptian Substitution, Rosetta Stone, Histiaeus's Tattoo, Scytale, Aeneas Tacticus, Caesar, Atbash, Kama Sutra, Polybius, Arabic Nomenclators, ROT13
II	Classical Substitution	Monoalphabetic, Nomenclator, Babington, Homophonic, Great Cipher, Playfair, Four-Square, Two-Square, Hill
III	Polyalphabetic Revolution	Alberti Disk, Vigenère, Porta, Gronsfeld, Beaufort, Running Key, Autokey
IV	Transposition & Fractionation	Rail Fence, Columnar, Double Transposition, Bifid, Trifid, ADFGX, ADFGVX, Fractionated Morse
V	Military & Spy Ciphers	Nihilist, Bazeries, VIC, Straddling Checkerboard, Book Cipher
VI	Civil War Gallery	Stager, Confederate Vigenère, Dictionary Code
VII	Mechanical Cipher Machines	Jefferson Disk, Chaocipher, Enigma, M-209, Lorenz, Purple, SIGABA, Typex, Navajo Code Talkers
VIII	Puzzle & Novelty Ciphers	Pigpen, Bacon, Tap Code, Copiale, Beale, Voynich, Dorabella, Zodiac, Kryptos
IX	The Unbreakable	One-Time Pad, Vernam, Solitaire / Pontifex
X	Hall of Codebreakers	21 biographies — from Al-Kindi (c. 850) through Turing, Rejewski, Tutte, Friedman, Clarke, Driscoll, Marks to the 2011 Copiale team
XI	Modern Cryptography	DES, Diffie-Hellman, RSA, AES, SHA-256
XII	Unsolved Ciphers	Voynich, Kryptos, Beale, Dorabella, Zodiac Z-13/Z-32, Phaistos Disc, Shugborough, D'Agapeyeff, Somerton Man, McCormick
XIII	Cipher Culture	Bach's BACH motif, Conan Doyle's Dancing Men, Poe's Gold-Bug, Cicada 3301, Krypto ARG, MIT Mystery Hunt, Sator Square, Freemason pigpen tradition, Da Vinci Code, National Treasure, Gravity Falls, Field Hollers

🔐 Every Exhibit Follows Four-Part Structure

1. Historical Context — When, where, who used it, why
2. How It Works — Encryption steps, diagrams, interactive demo
3. How It Was Broken — The specific technique, with context
4. What It Teaches Modern Crypto — The direct line from this cipher to AES/RSA

🎯 83 Cipher Engines · 111 Interactive Demos

The 139-exhibit collection includes 83 working cipher engines plus ~28 hand-built widgets — 111 of the 139 exhibits ship a fully interactive encrypt/decrypt demo, all built in vanilla JavaScript with no frameworks or build tools. The remaining exhibits are codebreaker biographies, historical context pages (e.g. Bletchley Park, Cabinet Noir), and unsolved or visualization-only widgets (e.g. Voynich, Dorabella, Phaistos Disc) where no plaintext mapping is known.

Type a message, set a key, and watch the cipher work in real time. Demos are dynamically generated by js/demo-loader.js from the engine implementations in js/ciphers/all-engines.js, and the same engines power the Codebreaker's Workbench.

For a sortable, filterable view of every cipher system in the museum (era, type, security, hall, solved status, key method) see the Cipher Comparison Table. For the full 139-exhibit roster including biographies and context pages, see the Museum Map.

📊 Additional Tools

• Codebreaker's Workbench — A unified hands-on lab that exposes all 83 cipher engines behind one consistent interface. Pick any cipher from the dropdown, paste your text, set a key (or accept the default), and encrypt/decrypt instantly. Beyond the per-exhibit demos it adds:
  • Frequency analyser — letter-frequency histogram with Index of Coincidence and Chi-square against English, useful for detecting monoalphabetic vs. polyalphabetic ciphertext at a glance.
  • Kasiski / period detector — repeated-trigram spacing analysis for breaking Vigenère-family ciphers.
  • N-gram & entropy panel — bigram/trigram counts and Shannon entropy for distinguishing transposition (preserves frequencies) from substitution (alters them).
  • Side-by-side Encrypt/Decrypt panes with copy-to-clipboard and a swap button so you can iterate on a key without retyping ciphertext.
  • Same engine source as the exhibits — the workbench pulls from js/ciphers/all-engines.js, so anything you reproduce here matches every demo on the site.
• Site Search — Search across all 139 exhibits, 13 exhibit halls, codebreaker biographies, cryptanalysis techniques, and the timeline. Index-driven, no backend, deep-link via ?q=.
• Cryptanalysis Techniques — 10 interactive techniques: frequency analysis, Kasiski examination, index of coincidence, crib dragging, known-plaintext attack, hill climbing, simulated annealing, stepping-switch cryptanalysis (Purple), HMM/SMT decoding (Copiale), and Chaocipher reconstruction.
• Cipher Challenges — 10 progressive puzzles from Caesar to Enigma with hints and solutions.
• Timeline — Interactive 3,900+-year history with era filtering, scroll-spy, and 50+ clickable exhibit events.
• Comparison Table — Sortable, filterable table comparing the museum collection by type, era, hall, security level, solved status, and key method.
• Cipher Flow Explorer — Visual relationship map between cipher families.
• Museum Map — Architectural floor plan with all exhibit halls and cipher exhibits.
• Guided Tours — Structured learning paths through the collection.
• Glossary — Comprehensive cryptography term reference.
• Further Reading — Canon references, journals, and scholar/source index.
• Community — Discussion space for cipher enthusiasts.

---

🚀 Running Locally

git clone https://github.com/systemslibrarian/cipher-museum
cd cipher-museum
python3 -m http.server 8000   # or just open index.html

No build tools. No framework. No dependencies beyond Google Fonts. Pure HTML + CSS + Vanilla JavaScript. GitHub Pages ready.

---

📁 Project Structure

cipher-museum/
├── index.html               ← Entrance Hall (hero + 10 hall cards)
├── museum-map.html          ← Interactive floor plan with all exhibits
├── timeline.html            ← 3,900+ year timeline with era filtering & scroll-spy
├── comparison.html          ← Sortable comparison table across the collection
├── challenges.html          ← 10 progressive cipher challenges
├── glossary.html            ← Cryptography glossary
├── cryptanalysis.html       ← Cryptanalysis Techniques (7 interactive techniques)
├── cipher-flow.html         ← Visual cipher family relationships
├── modern.html              ← Modern Cryptography overview
├── favicon.svg              ← Gold cipher wheel icon
├── css/
│   └── museum.css           ← Complete design system (~400 rules)
├── js/
│   ├── nav.js               ← Navigation system (sticky nav, hamburger, ARIA)
│   ├── demo-loader.js       ← Dynamic demo UI generator for all cipher pages
│   └── ciphers/
│       └── all-engines.js   ← 83 cipher engine implementations
├── halls/                   ← 13 exhibit halls
│   ├── ancient.html          ← Hall I: World Origins of Cryptography
│   ├── substitution.html     ← Hall II: Classical Substitution
│   ├── polyalphabetic.html   ← Hall III: Polyalphabetic Revolution
│   ├── transposition.html    ← Hall IV: Transposition & Fractionation
│   ├── military.html         ← Hall V: Military & Spy Ciphers
│   ├── civil-war.html        ← Special Exhibition: Civil War
│   ├── machines.html         ← Hall VI: Mechanical Machines
│   ├── puzzle.html           ← Hall VII: Puzzle & Novelty
│   ├── unbreakable.html      ← Hall IX: The Unbreakable
│   └── codebreakers.html     ← Special Exhibition: Hall of Codebreakers
├── ciphers/                  ← 139 exhibit pages
│   ├── caesar.html            ← with interactive demo + SVG wheel diagram
│   ├── enigma.html            ← with rotor wiring SVG diagram
│   ├── vigenere.html          ← with tabula recta SVG + Kasiski analysis
│   ├── playfair.html          ← with key square builder SVG
│   └── [130+ additional exhibits]
├── tours/                    ← Guided learning paths
├── community/                ← Community discussion pages
└── tests/
    ├── test-all-engines.js    ← Engine roundtrip & known-answer tests
    └── test-deep-ciphers.js   ← Edge cases & stress tests

---

🎨 Design System

Element	Value
Aesthetic	Smithsonian Dark / Scholarly Gold
Display	Cinzel (serif)
Body	Cormorant Garamond (serif)
Code	JetBrains Mono (monospace)
Background	#060608 with subtle radial gold gradients
Accent	#C9A84C (gold) with 6 tonal variants
Text	#EDE5D4 (headings), #C8C0B0 (body), #ACA4B4 (labels)

Accessibility

• WCAG AA contrast ratios on all text
• Skip links on every page
• ARIA labels on navigation, demos, and interactive elements
• 44px minimum touch targets on all interactive elements
• prefers-reduced-motion support
• Keyboard navigation throughout
• aria-hidden on decorative SVGs

SEO

• Unique meta descriptions on every page
• Open Graph + Twitter cards
• Canonical URLs
• XML sitemap (54+ pages)
• Structured data (JSON-LD)
• Custom 404 page

---

🧪 Testing

The museum ships with eight test harnesses, all green. They cover everything from the cipher engines themselves to the rendered DOM a visitor actually clicks on, plus a local link checker that verifies every relative href/src resolves.

# One-time setup (only needed for the demo-page simulator)
npm install

# Run any suite individually …
node tests/test-all-engines.js      # 435 — engine roundtrip & known-answer tests across 83 engines
node tests/test-deep-ciphers.js     # 238 — edge cases & stress tests
node tests/test-comprehensive.js    # 1836 — cross-cipher invariants across the collection
node tests/test-accessibility.js    # 1720 — ADA / WCAG audit across 172 pages
node tests/test-mobile.js           #  519 — responsive / mobile audit across 172 pages
node tests/test-structural.js       # 1725 — structural / framing audit across 172 pages
node tests/test-demo-pages.js       #  783 — end-to-end JSDOM simulation of every interactive demo
node tests/test-local-links.js      # 4710 — local href/src link checker across 172 HTML files

# … or via npm scripts
npm run test:engines
npm run test:deep
npm run test:comprehensive
npm run test:a11y
npm run test:mobile
npm run test:structural
npm run test:demos
npm run test:links
npm test                            # runs every suite end-to-end

test-demo-pages.js is the strongest correctness proof: it loads every ciphers/*.html page in JSDOM with the real scripts inlined, lets js/demo-loader.js build the demo UI, then clicks the actual on-page Encrypt and Decrypt buttons and verifies the ciphertext roundtrips back to the original plaintext through the rendered DOM — exactly what a visitor sees. Hand-built pages (Caesar, Playfair, Vigenère, Zodiac) get dedicated assertions against canonical KATs (Caesar shift-3 → WKHTXLFNEURZQIRA, Vigenère LEMON → LXFOPVEFRNHR, Playfair MONARCHY decode, Zodiac Z408 reveal).

---

📜 License

MIT License — free to use, fork, and build upon.

---

Built to honor the brilliant, flawed, and often fatal history of human secrecy.