Skip to content

README.md

Latest commit

 

History

History
176 lines (137 loc) · 7.91 KB

README.md

File metadata and controls

176 lines (137 loc) · 7.91 KB

🏛️ The Cipher Museum

"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.

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

🗺️ Ten Exhibit Halls · 37 Ciphers

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

🔐 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

🎯 35 Interactive Demos

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.

📊 Additional Tools

  • 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

🚀 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            ← 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

🎨 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

node tests/test-all-engines.js      # Engine roundtrip & known-answer tests
node tests/test-deep-ciphers.js     # Edge cases & stress tests

📜 License

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

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