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