parent
98e1a5d82b
commit
1945195790
Binary file not shown.
|
After Width: | Height: | Size: 753 KiB |
72
index.html
72
index.html
|
|
@ -1,43 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Indiana Jones Hinweis-Tester</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script defer src="script.js"></script>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Escape Lock</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="mainDiv">
|
||||
<div id="mainView">
|
||||
<div class="container">
|
||||
<h1>🪙 Hinweis-Tester 🧭</h1>
|
||||
<input type="text" id="inputBox" placeholder="Gib deinen Hinweis ein..." />
|
||||
<button id="testButton">Teste Hinweis</button>
|
||||
<div id="outputArea"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="visibility: collapse;" id="inputView">
|
||||
<div class="container">
|
||||
<h1>Hinweis-Dictionary</h1>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="inputKey">Eingabe (z. B. Codewort):</label>
|
||||
<input type="text" id="inputKey" placeholder="z. B. Tempel" />
|
||||
</div>
|
||||
<div class="escape" id="escape">
|
||||
<!-- Hintergrundbild -->
|
||||
<img class="escape__img" src="back_image_new.jpg" alt="Escape Hintergrund">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="inputValue">Ausgabe (z. B. Hinweistext):</label>
|
||||
<input type="text" id="inputValue" placeholder="z. B. Der Schatz liegt unter dem Stein" />
|
||||
</div>
|
||||
<!-- Interaktive Ebene -->
|
||||
<div class="overlay">
|
||||
<div class="pad" id="pad">
|
||||
<!-- ↑-Buttons -->
|
||||
<button class="coin" data-idx="0" data-dir="up" aria-label="Ziffer 1 erhöhen"></button>
|
||||
<button class="coin" data-idx="1" data-dir="up" aria-label="Ziffer 2 erhöhen"></button>
|
||||
<button class="coin" data-idx="2" data-dir="up" aria-label="Ziffer 3 erhöhen"></button>
|
||||
<button class="coin" data-idx="3" data-dir="up" aria-label="Ziffer 4 erhöhen"></button>
|
||||
|
||||
<button onclick="saveEntry()">Eintrag speichern</button>
|
||||
<!-- Ziffern -->
|
||||
<div class="digit" id="d0">1</div>
|
||||
<div class="digit" id="d1">2</div>
|
||||
<div class="digit" id="d2">3</div>
|
||||
<div class="digit" id="d3">4</div>
|
||||
|
||||
<div id="dictionaryList">
|
||||
<h3>Gespeicherte Hinweise:</h3>
|
||||
<div id="entries"></div>
|
||||
</div>
|
||||
<!-- ↓-Buttons -->
|
||||
<button class="coin" data-idx="0" data-dir="down" aria-label="Ziffer 1 verringern"></button>
|
||||
<button class="coin" data-idx="1" data-dir="down" aria-label="Ziffer 2 verringern"></button>
|
||||
<button class="coin" data-idx="2" data-dir="down" aria-label="Ziffer 3 verringern"></button>
|
||||
<button class="coin" data-idx="3" data-dir="down" aria-label="Ziffer 4 verringern"></button>
|
||||
|
||||
<!-- Öffnen -->
|
||||
<button class="open" id="openBtn" aria-label="Öffnen">
|
||||
<img src="key.png" alt="" />
|
||||
<span class="visually-hidden">Öffnen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Erfolg / Nachricht -->
|
||||
<div class="message" id="success">
|
||||
✅ Geschafft! Das Geheimnis ist gelüftet.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
139
script.js
139
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 = `
|
||||
<div class="solvedText digit" role="status" aria-live="polite">
|
||||
GEHEIMNIS GEÖFFNET
|
||||
</div>
|
||||
`;
|
||||
// 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 = `<span class="key">${key}</span>: <span class="value">${data[key]}</span>`;
|
||||
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();
|
||||
|
|
|
|||
244
styles.css
244
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; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue