first commit

2026-04-29 15:57:37 +02:00
commit e79260231f
15 changed files with 1216 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,65 @@
+# Guitar Fretboard Trainer
+
+![No build step](https://img.shields.io/badge/build-none-brightgreen?style=flat-square)
+![Vanilla JS](https://img.shields.io/badge/vanilla-JS-f7df1e?style=flat-square&logo=javascript&logoColor=000)
+![ES Modules](https://img.shields.io/badge/ES-modules-blue?style=flat-square)
+![PWA ready](https://img.shields.io/badge/PWA-ready-5A0FC8?style=flat-square&logo=pwa)
+![License MIT](https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square)
+
+A browser app to drill guitar fretboard note recognition. No framework, no build step — just plain HTML, CSS, and ES modules.
+
+## Usage
+
+Serve with any HTTP server and open in a browser (ES modules require a server — `file://` won't work):
+
+```bash
+python3 -m http.server 8080
+# or
+npx serve .
+```
+
+Then open http://localhost:8080.
+
+## Quiz Modes
+
+### Mode 1 — Name the Note
+A position (string + fret) is highlighted on the fretboard. Choose the correct note from 9 buttons — by clicking, pressing `1`–`9`, or typing the note name on your keyboard.
+
+### Mode 2 — Find All Occurrences
+A target note and a 4–5 fret range are shown. Click every position in the range where that note appears, then hit **Submit**. Green = correct, red = wrong selection, faded green = missed.
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `Space` / `Enter` | Next question (or submit in mode 2) |
+| `1`–`9` | Select answer button by position (mode 1) |
+| `A`–`G` | Type a note name directly (mode 1) |
+| `A` then `#` | Sharp — e.g. `A#` |
+| `A` then `b` | Flat — e.g. `Ab` (resolved to `G#` internally) |
+| `Tab` | Cycle between modes |
+
+## Settings
+
+- **6-string / 7-string** — standard tuning
+- **Sharps only** — show only sharp names (no `D#/Eb` dual labels)
+- **Natural notes only** — restrict to C D E F G A B
+
+## Stats
+
+A lifetime stats screen tracks accuracy per mode, accuracy per note, total questions answered, and best streak. Stats persist in `localStorage`.
+
+## Project Structure
+
+```
+guitar-trainer/
+├── index.html          # Markup only
+├── site.webmanifest    # PWA manifest
+├── css/
+│   └── style.css       # All styles, CSS custom properties for theming
+└── js/
+    ├── music.js        # Music theory: notes, tunings, display helpers
+    ├── fretboard.js    # SVG fretboard builder
+    ├── quiz.js         # Question generation and answer evaluation
+    └── app.js          # State, rendering, DOM wiring, keyboard shortcuts
+```