-
-
-
- 🪙 Hinweis-Tester 🧭
- - - -
-
-
Hinweis-Dictionary
-
-
-
-
+
+
+ 
-
+
+
diff --git a/key.png b/key.png
new file mode 100644
index 0000000..e509bfa
Binary files /dev/null and b/key.png differ
diff --git a/script.js b/script.js
index 73dc153..dbc401f 100644
--- a/script.js
+++ b/script.js
@@ -1,109 +1,48 @@
+// Startwerte
+const digits = [1, 2, 3, 4];
-//MAIN
-document.addEventListener("DOMContentLoaded", insertValueMainButton);
+// Richtige Kombination
+const code = [4, 2, 7, 9]; // <- anpassen!
-function insertValueMainButton () {
- const inputBox = document.getElementById("inputBox");
- const testButton = document.getElementById("testButton");
- const outputArea = document.getElementById("outputArea");
+const dEls = digits.map((_, i) => document.getElementById('d' + i));
+const pad = document.getElementById('pad');
+const openBtn = document.getElementById('openBtn');
+const success = document.getElementById('success');
- testButton.addEventListener("click", EnterWord);
-}
+const render = () => digits.forEach((v, i) => dEls[i].textContent = v);
-function EnterWord() {
- const userInput = inputBox.value.trim().toLowerCase(); // Ignoriere Groß-/Kleinschreibung
+// Klicks auf Münzen
+pad.addEventListener('click', (ev) => {
+ const btn = ev.target.closest('.coin');
+ if (!btn) return;
+ const idx = +btn.dataset.idx;
+ const dir = btn.dataset.dir;
- if (!userInput) {
- outputArea.textContent = "🔎 Bitte gib einen Hinweis ein!";
- return;
- }
+ if (dir === 'up') digits[idx] = (digits[idx] + 1) % 10;
+ if (dir === 'down') digits[idx] = (digits[idx] + 9) % 10;
- // Lade das Dictionary aus dem LocalStorage
- const storedData = JSON.parse(localStorage.getItem("hinweisDict")) || {};
-
- // Finde passenden Key (case-insensitive Vergleich)
- let matchedKey = null;
- for (const key in storedData) {
- if (key.toLowerCase() === userInput) {
- matchedKey = key;
- break;
- }
- }
+ render();
+});
- if (matchedKey) {
- outputArea.textContent = `✅ "${matchedKey}" gefunden: ${storedData[matchedKey]}`;
- } else {
- outputArea.textContent = `❌ Kein Hinweis gefunden für "${userInput}".`;
- }
+// Öffnen-Button
+openBtn.addEventListener('click', () => {
+ const ok = digits.every((v, i) => v === code[i]);
+ if (ok) {
+ // Inhalt des Pads ersetzen: alles raus, Nachricht rein
+ pad.classList.remove('pad--shake');
+ pad.classList.add('pad--cleared');
+ pad.innerHTML = `
+
-
-
-
-
+
+
+
+
+
+
+ GEHEIMNIS GEÖFFNET
+
+ `;
+ // Optional: Wenn du den Key-Button danach nicht mehr fokussierbar willst:
+ // openBtn.blur();
+ } else {
+ pad.classList.remove('pad--shake');
+ void pad.offsetWidth;
+ pad.classList.add('pad--shake');
}
+});
-//INDEX
-document.addEventListener("keydown", function (event) {
- if (event.ctrlKey && (event.key === "ä" || event.code === "Quote")) {
- //event.preventDefault();
- //Name: mainView
- //Name: inputView
- const mv = document.getElementById("mainView");
- if (mv.style.visibility === "visible" || mv.style.visibility === "") {
- mv.style.visibility = "hidden";
- } else {
- mv.style.visibility = "visible";
- }
- const el = document.getElementById("inputView");
- if (el.style.visibility === "visible" || el.style.visibility === "") {
- el.style.visibility = "hidden";
- } else {
- el.style.visibility = "visible";
- }
-
- }
- else if (event.key === "Enter") {
- event.preventDefault(); // Optional: verhindert z. B. Form-Submit
- const mv = document.getElementById("mainView");
- if (mv.style.visibility === "visible" || mv.style.visibility === "") {
- EnterWord();
- } else {
- saveEntry();
- }
-
- }
-}, false);
-
-//INPUT
- // Daten laden und anzeigen
- function loadDictionary() {
- const entriesDiv = document.getElementById("entries");
- entriesDiv.innerHTML = "";
-
- const data = JSON.parse(localStorage.getItem("hinweisDict")) || {};
-
- for (const key in data) {
- const div = document.createElement("div");
- div.className = "entry";
- div.innerHTML = `${key}: ${data[key]}`;
- entriesDiv.appendChild(div);
- }
- }
-
- // Eintrag speichern
- function saveEntry() {
- const key = document.getElementById("inputKey").value.trim();
- const value = document.getElementById("inputValue").value.trim();
-
- if (key === "" || value === "") {
- alert("Beide Felder müssen ausgefüllt sein.");
- return;
- }
-
- const data = JSON.parse(localStorage.getItem("hinweisDict")) || {};
- data[key] = value;
- localStorage.setItem("hinweisDict", JSON.stringify(data));
-
- document.getElementById("inputKey").value = "";
- document.getElementById("inputValue").value = "";
- loadDictionary();
- }
-
- // Beim Laden anzeigen
- window.onload = loadDictionary;
-
+render();
diff --git a/styles.css b/styles.css
index a15a2ae..0cb6bc5 100644
--- a/styles.css
+++ b/styles.css
@@ -1,62 +1,212 @@
-body {
+:root {
+ /* Pergament-Position */
+ --pad-left: 16.3%;
+ --pad-top: 35.3%;
+ --pad-w: 33.4%;
+ --pad-h: 52.5%;
+
+ /* Größe der Klickflächen */
+ --coin: 98px;
+ --digit-size: clamp(24px, 6.2vw, 600px);
+ --key-size: 26%; /* Breite des Schlüssel-Bildes relativ zum Pergamentbereich */
+}
+
+* { box-sizing: border-box; }
+
+/* Seite füllt den Viewport, kein Scrollen */
+html, body {
+ height: 100%;
margin: 0;
- padding: 0;
- background: url("back_image.png") no-repeat center center fixed;
- background-size: cover;
- font-family: 'Georgia', serif;
- color: #f5deb3;
+ background: #000;
+ overflow: hidden;
}
-.container {
+/* Vollbild-Stage */
+.escape {
+ position: fixed; /* oder: absolute + inset:0; */
+ inset: 0; /* top/right/bottom/left = 0 */
+ margin: 0;
+ line-height: 1;
+ user-select: none;
+}
+
+/* Bild füllt Fläche, beschneidet proportional */
+.escape__img {
position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: rgba(50, 30, 10, 0.8);
- padding: 30px;
- border-radius: 15px;
- box-shadow: 0 0 15px rgba(0,0,0,0.7);
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+}
+
+/* Overlay bleibt weiterhin über dem Bild */
+.overlay {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+}
+
+.pad {
+ position: absolute;
+ left: var(--pad-left);
+ top: var(--pad-top);
+ width: var(--pad-w);
+ height: var(--pad-h);
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: auto 1fr auto;
+ align-items: center;
+ justify-items: center;
+}
+/* Wenn gelöst: Pad zu einer Zelle machen und Text zentrieren */
+.pad--cleared {
+ grid-template-columns: 1fr !important;
+ grid-template-rows: 1fr !important;
+ align-items: center;
+ justify-items: center;
+}
+
+/* Nachricht nutzt das Ziffern-Styling, nur größer und ohne Y-Offset */
+.solvedText {
+ grid-column: 1 / -1;
+ grid-row: 1 / -1;
text-align: center;
- width: 90%;
- max-width: 500px;
+ padding: 0 2vw;
+ animation: solved-in .35s ease both;
+}
+.solvedText.digit {
+ font-size: clamp(28px, 4vw, 96px); /* größer als die Ziffern */
+ transform: none; /* .digit hebt sonst minimal an */
+ letter-spacing: .06em; /* etwas „heroischer“ */
+ margin-top: -160px;
}
-h1 {
- font-size: 1.8em;
- margin-bottom: 20px;
- color: #ffd700;
- text-shadow: 1px 1px 2px #000;
+@keyframes solved-in {
+ from { opacity: 0; transform: scale(.98); }
+ to { opacity: 1; transform: scale(1); }
}
-input[type="text"] {
- width: 80%;
- padding: 10px;
- border: 2px solid #c2b280;
- border-radius: 8px;
- background-color: #fff8dc;
- font-size: 1em;
- margin-bottom: 15px;
-}
-
-button {
- padding: 10px 20px;
- font-size: 1em;
- font-weight: bold;
- border: none;
- border-radius: 8px;
- background-color: #8b4513;
- color: #fffacd;
+.coin {
+ pointer-events: auto;
+ appearance: none;
+ border: 0;
+ background: transparent;
+ width: var(--coin);
+ height: var(--coin);
+ border-radius: 50%;
cursor: pointer;
- transition: background-color 0.3s ease;
+ position: relative;
}
-button:hover {
- background-color: #a0522d;
+/*
+.coin::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: 50%;
+ box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
+ transition: box-shadow .15s ease;
+}
+.coin:hover::after,
+.coin:focus-visible::after {
+ box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
+}
+*/
+.digit {
+ /* Größe kommt weiterhin aus --digit-size */
+ font: 900 var(--digit-size)/1 "Cinzel", Georgia, "Times New Roman", serif;
+ letter-spacing: .06em;
+
+ /* Farb- & Relieflook (eingraviert/antikes Braun) */
+ color: #3a2616; /* dunkles, warmes Braun */
+ -webkit-text-stroke: 1px rgba(0,0,0,.18); /* dezente Fase/Kante */
+ text-shadow:
+ 0 1px 0 rgba(250, 228, 180, .65), /* obere Lichtkante (pergamentig) */
+ 0 -1px 0 rgba(0, 0, 0, .20), /* untere Schattenkante */
+ 0 2px 2px rgba(0, 0, 0, .30), /* weicher Drop-Shadow */
+ 0 0 8px rgba(110, 80, 40, .20); /* warmer „Glow“ im Pergament */
+ pointer-events: none;
+ transform: translateY(4%);
+ mix-blend-mode: multiply; /* fügt sich besser in Pergament ein */
}
-#outputArea {
- margin-top: 20px;
- font-size: 1.1em;
- min-height: 30px;
- color: #fffacd;
+/* Screenreader-Only Text (für Barrierefreiheit) */
+.visually-hidden {
+ position: absolute !important;
+ width: 1px; height: 1px;
+ padding: 0; margin: -1px;
+ overflow: hidden; clip: rect(0 0 0 0);
+ white-space: nowrap; border: 0;
}
+
+/* Bild-Button */
+.open{
+ grid-column: 1 / -1;
+ grid-row: 4; /* in die 4. Reihe */
+ justify-self: center;
+
+ /* Defaults neutralisieren (verhindert graues Rechteck) */
+ -webkit-appearance: none;
+ appearance: none;
+ background: transparent !important;
+ border: 0 !important;
+ padding: 0;
+ cursor: pointer;
+
+ display: grid; /* Bild sauber zentrieren */
+ place-items: center;
+ pointer-events: auto;
+}
+
+.open img{
+ display: block;
+ width: var(--key-size);
+ height: auto;
+ transform: rotate(-18deg); /* leicht schräg */
+ transform-origin: 50% 50%;
+ filter: drop-shadow(0 8px 10px rgba(0,0,0,.45));
+ transition: transform .15s ease, filter .15s ease;
+}
+.open:hover img{
+ transform: rotate(-18deg) translateY(-2px) scale(1.03);
+ filter: drop-shadow(0 12px 14px rgba(0,0,0,.55));
+}
+.open:active img{
+ transform: rotate(-18deg) translateY(0) scale(.98);
+ filter: drop-shadow(0 6px 6px rgba(0,0,0,.45));
+}
+/* optional sichtbarer Fokusrahmen für Tastatur-Nutzer */
+.open:focus-visible img{
+ outline: 3px solid rgba(255,255,255,.85);
+ outline-offset: 4px;
+}
+
+.message {
+ position: absolute;
+ inset: 0;
+ display: grid;
+ place-items: center;
+ padding: 2rem;
+ text-align: center;
+ color: #fff;
+ font: 800 clamp(20px, 6vw, 44px)/1.15 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+ opacity: 0;
+ pointer-events: none;
+ transform: scale(.98);
+ transition: opacity .3s ease, transform .3s ease;
+}
+.message--show {
+ opacity: 1;
+ pointer-events: auto;
+ transform: scale(1);
+}
+
+@keyframes shake {
+ 0%,100% { transform: translateX(0); }
+ 20% { transform: translateX(-6px); }
+ 40% { transform: translateX(6px); }
+ 60% { transform: translateX(-4px); }
+ 80% { transform: translateX(4px); }
+}
+.pad--shake { animation: shake .35s ease; }