"The heart of the discerning acquires knowledge, for the ears of the wise seek it out." — Proverbs 18:15
Exploring the history and evolution of cryptography — from classical ciphers to modern secure systems.
An open-source, interactive educational website spanning 37 historically important ciphers across 10 exhibit halls — from the Spartan scytale in 500 BC to post-quantum cryptography. Modern cryptography uses more than ciphers — secure systems combine key exchange, encryption, and hashing.
- 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.
| Hall | Title | Ciphers |
|---|---|---|
| I | Birth of Cryptography | Scytale, Caesar, Polybius |
| II | Classical Substitution | Monoalphabetic, Homophonic, Playfair, Hill |
| III | Polyalphabetic Revolution | Vigenère, Beaufort, Porta, Gronsfeld, Running Key |
| IV | Transposition & Fractionation | Rail Fence, Columnar, Double Transposition, Bifid, Trifid, Fractionated Morse |
| V | Military & Spy Ciphers | Nihilist, ADFGX, ADFGVX, Bazeries, VIC |
| ⚔ | Civil War Gallery | Stager, Confederate Vigenère, Dictionary Code |
| VI | Mechanical Cipher Machines | Alberti Disk, Jefferson Disk, Enigma, Lorenz, Vernam |
| VII | Puzzle & Novelty Ciphers | Pigpen, Bacon's Cipher, Tap Code, Zodiac |
| ★ | The Unbreakable | One-Time Pad, Vernam, Shannon's Proof |
| ⚜ | Hall of Codebreakers | 10 stories — from Al-Kindi to the Zodiac solvers |
- Historical Context — When, where, who used it, why
- How It Works — Encryption steps, diagrams, interactive demo
- How It Was Broken — The specific technique, with context
- What It Teaches Modern Crypto — The direct line from this cipher to AES/RSA
35 of 37 cipher pages have fully interactive encrypt/decrypt demos built with vanilla JavaScript — no frameworks, no build tools. Type a message, set a key, and watch the cipher work in real time. Demos are dynamically generated by demo-loader.js from cipher engine implementations in all-engines.js.
- Cryptanalysis Techniques — 7 interactive techniques: frequency analysis, Kasiski examination, index of coincidence, crib dragging, known-plaintext attack, hill climbing, and simulated annealing
- Cipher Challenges — 10 progressive puzzles from Caesar to Enigma with hints and solutions
- Timeline — Interactive 2,400-year history with era filtering, scroll-spy, and 23 clickable events
- Comparison Table — Sortable, filterable table comparing all 37 ciphers by type, era, security level, 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
- Community — Discussion space for cipher enthusiasts
git clone https://github.com/systemslibrarian/cipher-museum
cd cipher-museum
python3 -m http.server 8000 # or just open index.htmlNo build tools. No framework. No dependencies beyond Google Fonts. Pure HTML + CSS + Vanilla JavaScript. GitHub Pages ready.
cipher-museum/
├── index.html ← Entrance Hall (hero + 10 hall cards)
├── museum-map.html ← Interactive floor plan with all exhibits
├── timeline.html ← 2,400-year timeline with era filtering & scroll-spy
├── comparison.html ← Sortable 37-cipher comparison table
├── 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 ← 35 cipher engine implementations
├── halls/ ← 10 exhibit halls
│ ├── ancient.html ← Hall I: Birth 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 ← Final Hall: The Unbreakable
│ └── codebreakers.html ← Special Exhibition: Hall of Codebreakers
├── ciphers/ ← 37 cipher 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
│ └── [33 more 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
| 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) |
- 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-motionsupport- Keyboard navigation throughout
aria-hiddenon decorative SVGs
- Unique meta descriptions on every page
- Open Graph + Twitter cards
- Canonical URLs
- XML sitemap (54+ pages)
- Structured data (JSON-LD)
- Custom 404 page
node tests/test-all-engines.js # Engine roundtrip & known-answer tests
node tests/test-deep-ciphers.js # Edge cases & stress testsMIT License — free to use, fork, and build upon.
Built to honor the brilliant, flawed, and often fatal history of human secrecy.
