+
+
+
+ 🪙 Hinweis-Tester 🧭
+ + + +
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ab9db14
--- /dev/null
+++ b/script.js
@@ -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 = `${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;
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..a15a2ae
--- /dev/null
+++ b/styles.css
@@ -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;
+}
+
+ Hinweis-Dictionary
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+