Initial
parent
30646ddf98
commit
aa2e96d5bf
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!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>
|
||||||
|
</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="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>
|
||||||
|
|
||||||
|
<button onclick="saveEntry()">Eintrag speichern</button>
|
||||||
|
|
||||||
|
<div id="dictionaryList">
|
||||||
|
<h3>Gespeicherte Hinweise:</h3>
|
||||||
|
<div id="entries"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
|
||||||
|
//MAIN
|
||||||
|
document.addEventListener("DOMContentLoaded", insertValueMainButton);
|
||||||
|
|
||||||
|
|
||||||
|
document.getElementById("inputBox").addEventListener("keydown", function (event) {
|
||||||
|
if (event.key === "Enter") {
|
||||||
|
event.preventDefault(); // Optional: verhindert z. B. Form-Submit
|
||||||
|
|
||||||
|
insertValueMainButton();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function insertValueMainButton () {
|
||||||
|
const inputBox = document.getElementById("inputBox");
|
||||||
|
const testButton = document.getElementById("testButton");
|
||||||
|
const outputArea = document.getElementById("outputArea");
|
||||||
|
|
||||||
|
testButton.addEventListener("click", function () {
|
||||||
|
const userInput = inputBox.value.trim().toLowerCase(); // Ignoriere Groß-/Kleinschreibung
|
||||||
|
|
||||||
|
if (!userInput) {
|
||||||
|
outputArea.textContent = "🔎 Bitte gib einen Hinweis ein!";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (matchedKey) {
|
||||||
|
outputArea.textContent = `✅ "${matchedKey}" gefunden: ${storedData[matchedKey]}`;
|
||||||
|
} else {
|
||||||
|
outputArea.textContent = `❌ Kein Hinweis gefunden für "${userInput}".`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//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";
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}, 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;
|
||||||
|
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: url("back_image.png") no-repeat center center fixed;
|
||||||
|
background-size: cover;
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
color: #f5deb3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
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);
|
||||||
|
text-align: center;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #ffd700;
|
||||||
|
text-shadow: 1px 1px 2px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #a0522d;
|
||||||
|
}
|
||||||
|
|
||||||
|
#outputArea {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
min-height: 30px;
|
||||||
|
color: #fffacd;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue