Eckert
/
Projekt_FH
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Anpassung README

main
Sebastian Schüler 2025-09-08 08:21:58 +02:00
parent 49f932bd55
commit 22fbe96447
1 changed files with 7 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@ -1,13 +1,10 @@
Super — hier ist die README.md **mit rohem Markdown** (also mit `#`, `*`, etc.), zum Kopieren:
```markdown
# Escape-Pad # Escape-Pad
Interaktives Zahlen-Pad über einem Hintergrundbild (Indiana-Jones-Style). Interaktives Zahlen-Pad über einem Hintergrundbild (Indiana-Jones-Style).
Vier Ziffern lassen sich über „Münz“-Klickflächen erhöhen/verringern. Vier Ziffern lassen sich über „Münz“-Klickflächen erhöhen/verringern.
Ein Schlüssel-Button prüft den Code. Bei korrekter Eingabe wird der Pad-Inhalt geleert und eine frei definierbare Nachricht im Stil der Ziffern angezeigt. Code & Nachricht sind per Tastenkürzel änderbar und werden in `localStorage` gespeichert. Ein Schlüssel-Button prüft den Code. Bei korrekter Eingabe wird der Pad-Inhalt geleert und eine frei definierbare Nachricht im Stil der Ziffern angezeigt. Code & Nachricht sind per Tastenkürzel änderbar und werden in `localStorage` gespeichert.
---
## Features ## Features
@ -19,7 +16,6 @@ Ein Schlüssel-Button prüft den Code. Bei korrekter Eingabe wird der Pad-Inhalt
- „Indiana-Jones“-Ziffernstile (graviert **oder** gestempelt) - „Indiana-Jones“-Ziffernstile (graviert **oder** gestempelt)
- Barrierefrei: versteckter Text für Screenreader, `role="status"` - Barrierefrei: versteckter Text für Screenreader, `role="status"`
---
## Projektstruktur ## Projektstruktur
@ -32,11 +28,11 @@ Ein Schlüssel-Button prüft den Code. Bei korrekter Eingabe wird der Pad-Inhalt
├─ back\_image\_new\.jpg # Hintergrundbild ├─ back\_image\_new\.jpg # Hintergrundbild
└─ key.png # Schlüssel-Button (PNG, transparent) └─ key.png # Schlüssel-Button (PNG, transparent)
```` ```
> Passe Dateinamen bei Bedarf in `index.html`/`style.css` an. > Passe Dateinamen bei Bedarf in `index.html`/`style.css` an.
---
## Schnellstart ## Schnellstart
@ -45,7 +41,7 @@ Ein Schlüssel-Button prüft den Code. Bei korrekter Eingabe wird der Pad-Inhalt
3. F11 → Vollbild. 3. F11 → Vollbild.
4. Münzen ↑/↓ klicken, Code einstellen, Schlüssel anklicken. 4. Münzen ↑/↓ klicken, Code einstellen, Schlüssel anklicken.
---
## Tastenkürzel ## Tastenkürzel
@ -59,7 +55,7 @@ Ein Schlüssel-Button prüft den Code. Bei korrekter Eingabe wird der Pad-Inhalt
- `escape_code` (Array der 4 Ziffern) - `escape_code` (Array der 4 Ziffern)
- Zurücksetzen: Seite neu laden **und** Site-Daten/LocalStorage löschen, oder neue Werte per Shortcut setzen. - Zurücksetzen: Seite neu laden **und** Site-Daten/LocalStorage löschen, oder neue Werte per Shortcut setzen.
---
## Konfiguration ## Konfiguration
@ -88,7 +84,6 @@ let code = JSON.parse(localStorage.getItem("escape_code") || "null") || DEFAULT_
let solvedText = localStorage.getItem("escape_message") || "GEHEIMNIS GEÖFFNET"; let solvedText = localStorage.getItem("escape_message") || "GEHEIMNIS GEÖFFNET";
``` ```
---
## Styling der Ziffern (Indy-Look) ## Styling der Ziffern (Indy-Look)
@ -139,7 +134,6 @@ Binde **eine** der Fonts in `index.html` (vor `style.css`) ein und nutze die zug
> Der Erfolgstext nutzt `.digit` erneut und wird über `.solvedText` größer skaliert. > Der Erfolgstext nutzt `.digit` erneut und wird über `.solvedText` größer skaliert.
---
## Technische Hinweise ## Technische Hinweise
@ -148,14 +142,12 @@ Binde **eine** der Fonts in `index.html` (vor `style.css`) ein und nutze die zug
* **Events:** Münz-Klicks werden delegiert über `#pad` behandelt; Schlüssel-Button hat `id="openBtn"`. * **Events:** Münz-Klicks werden delegiert über `#pad` behandelt; Schlüssel-Button hat `id="openBtn"`.
* **Erfolg:** Bei korrektem Code wird `#pad` geleert und eine `.solvedText.digit`-Nachricht eingesetzt (siehe CSS-Klasse `.pad--cleared`). * **Erfolg:** Bei korrektem Code wird `#pad` geleert und eine `.solvedText.digit`-Nachricht eingesetzt (siehe CSS-Klasse `.pad--cleared`).
---
## Barrierefreiheit ## Barrierefreiheit
* Schlüssel-Button enthält visuell versteckten Text (`.visually-hidden`) für Screenreader. * Schlüssel-Button enthält visuell versteckten Text (`.visually-hidden`) für Screenreader.
* Erfolgstext hat `role="status"` und `aria-live="polite"`. * Erfolgstext hat `role="status"` und `aria-live="polite"`.
---
## Troubleshooting ## Troubleshooting
@ -175,7 +167,7 @@ Binde **eine** der Fonts in `index.html` (vor `style.css`) ein und nutze die zug
* **Cache leeren:** * **Cache leeren:**
Harte Aktualisierung (Ctrl/Cmd + Shift + R). Harte Aktualisierung (Ctrl/Cmd + Shift + R).
---
## Erweiterungen (Ideen) ## Erweiterungen (Ideen)
@ -184,14 +176,14 @@ Binde **eine** der Fonts in `index.html` (vor `style.css`) ein und nutze die zug
* Touch-Gesten (Wischen ↑/↓) * Touch-Gesten (Wischen ↑/↓)
* Alternative „Öffnen“-Interaktion (z. B. Doppelklick) * Alternative „Öffnen“-Interaktion (z. B. Doppelklick)
---
## Lizenz / Assets ## Lizenz / Assets
* **Google Fonts** (Cinzel, Special Elite): SIL Open Font License – Nutzung in Webprojekten erlaubt. * **Google Fonts** (Cinzel, Special Elite): SIL Open Font License – Nutzung in Webprojekten erlaubt.
* **Eigene Bilder** (`back_image_new.jpg`, `key.png`): Bitte Rechteinhaberschaft sicherstellen. * **Eigene Bilder** (`back_image_new.jpg`, `key.png`): Bitte Rechteinhaberschaft sicherstellen.
---
## Support ## Support