205 lines
6.4 KiB
Markdown
205 lines
6.4 KiB
Markdown
Super — hier ist die README.md **mit rohem Markdown** (also mit `#`, `*`, etc.), zum Kopieren:
|
||
|
||
```markdown
|
||
# Escape-Pad
|
||
|
||
Interaktives Zahlen-Pad über einem Hintergrundbild (Indiana-Jones-Style).
|
||
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.
|
||
|
||
---
|
||
|
||
## Features
|
||
|
||
- Vollbild-Layout (nutzt gesamten Viewport; F11 für echten Vollbildmodus)
|
||
- Unsichtbare, responsive Klickflächen über den Münzen
|
||
- Schlüssel-Bild als „Öffnen“-Button
|
||
- Erfolgstext ersetzt den gesamten Pad-Inhalt
|
||
- Code & Nachricht per Tastenkürzel setzen (persistiert via `localStorage`)
|
||
- „Indiana-Jones“-Ziffernstile (graviert **oder** gestempelt)
|
||
- Barrierefrei: versteckter Text für Screenreader, `role="status"`
|
||
|
||
---
|
||
|
||
## Projektstruktur
|
||
|
||
```
|
||
|
||
/projektordner
|
||
├─ index.html
|
||
├─ style.css
|
||
├─ script.js
|
||
├─ back\_image\_new\.jpg # Hintergrundbild
|
||
└─ key.png # Schlüssel-Button (PNG, transparent)
|
||
|
||
````
|
||
|
||
> Passe Dateinamen bei Bedarf in `index.html`/`style.css` an.
|
||
|
||
---
|
||
|
||
## Schnellstart
|
||
|
||
1. `back_image_new.jpg` und `key.png` neben `index.html` ablegen.
|
||
2. `index.html` im Browser öffnen.
|
||
3. F11 → Vollbild.
|
||
4. Münzen ↑/↓ klicken, Code einstellen, Schlüssel anklicken.
|
||
|
||
---
|
||
|
||
## Tastenkürzel
|
||
|
||
| Aktion | Windows/Linux | macOS | Hinweis |
|
||
|------------------------|-------------------------|-----------------------|---------|
|
||
| Nachricht setzen | **Strg + Ä** / **Strg + M** | **⌘ + Ä** / **⌘ + M** | Prompt mit aktuellem Text |
|
||
| Code setzen (4 Ziffern)| **Strg + Ö** / **Strg + K** | **⌘ + Ö** / **⌘ + K** | Akzeptiert `4279` oder `4,2,7,9` |
|
||
|
||
- Gespeichert unter `localStorage`-Schlüsseln:
|
||
- `escape_message` (Nachricht)
|
||
- `escape_code` (Array der 4 Ziffern)
|
||
- Zurücksetzen: Seite neu laden **und** Site-Daten/LocalStorage löschen, oder neue Werte per Shortcut setzen.
|
||
|
||
---
|
||
|
||
## Konfiguration
|
||
|
||
### 1) Position & Größen (`style.css`, im `:root`)
|
||
|
||
```css
|
||
:root{
|
||
--pad-left: 12%; /* Abstand vom linken Bildrand */
|
||
--pad-top: 22%; /* Abstand von oben */
|
||
--pad-w: 50%; /* Breite des aktiven Bereichs */
|
||
--pad-h: 54%; /* Höhe des aktiven Bereichs */
|
||
|
||
--coin: 13.5%; /* Durchmesser der Münz-Klickflächen relativ zum Pad */
|
||
--key-size: 26%; /* Breite des Schlüssel-Bildes relativ zum Pad */
|
||
--digit-size: clamp(24px, 6.2vw, 82px); /* Basisschriftgröße der Ziffern */
|
||
}
|
||
````
|
||
|
||
> Diese Variablen an dein Hintergrundbild anpassen, bis die Klickflächen exakt auf den Münzen liegen.
|
||
|
||
### 2) Defaults (`script.js`)
|
||
|
||
```js
|
||
const DEFAULT_CODE = [4, 2, 7, 9];
|
||
let code = JSON.parse(localStorage.getItem("escape_code") || "null") || DEFAULT_CODE;
|
||
let solvedText = localStorage.getItem("escape_message") || "GEHEIMNIS GEÖFFNET";
|
||
```
|
||
|
||
---
|
||
|
||
## Styling der Ziffern (Indy-Look)
|
||
|
||
Binde **eine** der Fonts in `index.html` (vor `style.css`) ein und nutze die zugehörige `.digit`-Regel in `style.css`.
|
||
|
||
**A) Graviert / antik (Cinzel):**
|
||
|
||
```html
|
||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&display=swap" rel="stylesheet">
|
||
```
|
||
|
||
```css
|
||
.digit{
|
||
font: 900 var(--digit-size)/1 "Cinzel", Georgia, serif;
|
||
letter-spacing:.06em;
|
||
color:#3a2616;
|
||
-webkit-text-stroke:1px rgba(0,0,0,.18);
|
||
text-shadow:
|
||
0 1px 0 rgba(250,228,180,.65),
|
||
0 -1px 0 rgba(0,0,0,.20),
|
||
0 2px 2px rgba(0,0,0,.30),
|
||
0 0 8px rgba(110,80,40,.20);
|
||
pointer-events:none;
|
||
transform: translateY(4%);
|
||
/* optional: mix-blend-mode: multiply; */
|
||
}
|
||
```
|
||
|
||
**B) Gestempelt / Pulp (Special Elite):**
|
||
|
||
```html
|
||
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
|
||
```
|
||
|
||
```css
|
||
.digit{
|
||
font: 800 var(--digit-size)/1 "Special Elite","Courier New",monospace;
|
||
letter-spacing:.04em;
|
||
color:#2d1f12;
|
||
text-shadow:
|
||
0 1px 0 rgba(255,230,180,.45),
|
||
0 2px 2px rgba(0,0,0,.35);
|
||
filter: contrast(1.05) sepia(.25);
|
||
pointer-events:none;
|
||
transform: translateY(4%);
|
||
}
|
||
```
|
||
|
||
> Der Erfolgstext nutzt `.digit` erneut und wird über `.solvedText` größer skaliert.
|
||
|
||
---
|
||
|
||
## Technische Hinweise
|
||
|
||
* **Vollbild:** `.escape` nutzt `width: 100vw; height: 100vh;`. Hintergrundbild füllt per `object-fit: cover`.
|
||
* **Responsiv:** Prozentbasierte Positionen/Größen; Klickflächen skalieren mit.
|
||
* **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`).
|
||
|
||
---
|
||
|
||
## Barrierefreiheit
|
||
|
||
* Schlüssel-Button enthält visuell versteckten Text (`.visually-hidden`) für Screenreader.
|
||
* Erfolgstext hat `role="status"` und `aria-live="polite"`.
|
||
|
||
---
|
||
|
||
## Troubleshooting
|
||
|
||
* **Klickflächen „unsichtbar“ / Höhe 0:**
|
||
Stelle sicher, dass `.escape { height: 100vh; }` gesetzt ist und `.overlay`, `.pad` prozentuale Größen davon ableiten.
|
||
* **Schlüssel-Button als graues Rechteck oder links verschoben:**
|
||
Alte Button-Styles überschreiben. In `style.css` sicherstellen:
|
||
|
||
```css
|
||
.open{ appearance:none; -webkit-appearance:none; background:transparent; border:0; padding:0; }
|
||
.open img{ position:static; display:block; width:var(--key-size); height:auto; }
|
||
```
|
||
|
||
Prüfe, ob es globale `img`-Regeln gibt (z. B. `position:absolute;`) – diese dürfen **nicht** auf den Schlüssel wirken.
|
||
* **Bildpfade prüfen:**
|
||
`back_image_new.jpg` und `key.png` müssen erreichbar sein (gleicher Ordner wie `index.html` oder Pfade anpassen).
|
||
* **Cache leeren:**
|
||
Harte Aktualisierung (Ctrl/Cmd + Shift + R).
|
||
|
||
---
|
||
|
||
## Erweiterungen (Ideen)
|
||
|
||
* Klick-/Öffnen-Soundeffekte
|
||
* Mehr Ziffernstellen (Grid-Spalten erhöhen)
|
||
* Touch-Gesten (Wischen ↑/↓)
|
||
* Alternative „Öffnen“-Interaktion (z. B. Doppelklick)
|
||
|
||
---
|
||
|
||
## Lizenz / Assets
|
||
|
||
* **Google Fonts** (Cinzel, Special Elite): SIL Open Font License – Nutzung in Webprojekten erlaubt.
|
||
* **Eigene Bilder** (`back_image_new.jpg`, `key.png`): Bitte Rechteinhaberschaft sicherstellen.
|
||
|
||
---
|
||
|
||
## Support
|
||
|
||
Feintuning gewünscht (exakte `--pad-*`-Werte, Button-Größe, Farbnuancen)?
|
||
Kurze Info oder Screenshot schicken – ich passe die Parameter punktgenau an.
|
||
|
||
```
|
||
|
||
Oder direkt herunterladen: **[Download README.md](sandbox:/mnt/data/README.md)** ✅
|
||
```
|