Skip to content

systemslibrarian/cipher-museum

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

219 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ›οΈ 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 140 exhibits and 13 exhibit halls. 110 of the 140 exhibits ship a fully interactive encrypt/decrypt demo or hand-built widget β€” the remaining 30 are codebreaker biographies and historical context pages. Modern cryptography uses more than ciphers β€” secure systems combine key exchange, encryption, and hashing.

Live Site β†’


πŸ“° Latest Update

  • Exhibit 140 β€” Bible Code / ELS (ciphers/bible-code.html): Interactive equidistant letter sequence explorer comparing Genesis/Exodus against length-matched random text with the same letter distribution. Registered in Hall VIII and the museum map.
  • Lorenz depth-attack interactive (ciphers/lorenz.html): Two-time-pad crib-drag demo and Enigma↔Lorenz comparison table added to the existing Lorenz exhibit.
  • Full test audit β€” resolved 12 pre-existing test failures (enigma.html data-cipher attribute, bible-code artifact card, heading hierarchy); all eight suites green at 436 + 238 + 1843 + 1730 + 522 + 1735 + 777 + 4897 assertions.
  • Sitemap expanded to all 172 indexable pages (tools, tours, community, all biographies, and the new exhibit).
  • README factual audit: corrected interactive-demo count (110/140), page counts (173), and test assertion totals site-wide.

✨ Features

πŸ—ΊοΈ Thirteen Exhibit Halls Β· 140 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 · 110 Interactive Demos

The 140-exhibit collection includes 83 working cipher engines plus ~27 hand-built widgets β€” 110 of the 140 exhibits ship a fully interactive demo, all built in vanilla JavaScript with no frameworks or build tools. The remaining 30 exhibits are codebreaker biographies, historical context pages (e.g. Cabinet Noir, Bletchley Park figures), and a small number of cipher pages not yet wired with a demo.

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 140-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 140 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 (10 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/                  ← 140 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]
β”œβ”€β”€ data/
β”‚   └── artifact-cards.json  ← Metadata cards (era, family, region, key type…) for all 140 exhibits
β”œβ”€β”€ lab/
β”‚   └── workbench.html       ← Codebreaker's Workbench (all 83 engines in one lab)
β”œβ”€β”€ tours/                    ← Guided learning paths
β”œβ”€β”€ community/                ← Community discussion and write-up space
└── tests/
    β”œβ”€β”€ test-all-engines.js    ← Engine roundtrip & known-answer tests
    β”œβ”€β”€ test-deep-ciphers.js   ← Edge cases & stress tests
    β”œβ”€β”€ test-comprehensive.js  ← Cross-cipher invariants across the collection
    β”œβ”€β”€ test-accessibility.js  ← ADA / WCAG audit
    β”œβ”€β”€ test-mobile.js         ← Responsive / mobile audit
    β”œβ”€β”€ test-structural.js     ← Structural / framing audit
    β”œβ”€β”€ test-demo-pages.js     ← End-to-end JSDOM simulation of every interactive demo
    └── test-local-links.js    ← Local href/src link checker

🎨 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 (172 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      # 436 β€” engine roundtrip & known-answer tests across 83 engines
node tests/test-deep-ciphers.js     # 238 β€” edge cases & stress tests
node tests/test-comprehensive.js    # 1843 β€” cross-cipher invariants across the collection
node tests/test-accessibility.js    # 1730 β€” ADA / WCAG audit across 173 pages
node tests/test-mobile.js           #  522 β€” responsive / mobile audit across 173 pages
node tests/test-structural.js       # 1734 β€” structural / framing audit across 173 pages
node tests/test-demo-pages.js       #  777 β€” end-to-end JSDOM simulation of every interactive demo
node tests/test-local-links.js      # 4901 β€” local href/src link checker across 173 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.

About

The Cipher Museum is part digital exhibit, part cipher playground, and part codebreaking classroom exploring 3,900+ years of encryption, cryptanalysis, and hidden history.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors