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)

: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)

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):

<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&display=swap" rel="stylesheet">

.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):

<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

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

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

Download README.md ✅