diff --git a/about_us.html b/about_us.html index 3ae573a..c5830b9 100644 --- a/about_us.html +++ b/about_us.html @@ -6,6 +6,7 @@ Logo + +
diff --git a/contact.html b/contact.html index 2a879c5..6b24b28 100644 --- a/contact.html +++ b/contact.html @@ -6,6 +6,7 @@ Logo + +
diff --git a/css/style.css b/css/style.css index af709b0..bde604b 100644 --- a/css/style.css +++ b/css/style.css @@ -53,3 +53,49 @@ nav a:hover { .galerie img:hover { transform: scale(1.03); } +#balken-container { + width: 100%; + height: 20px; + background-color: #e5e7eb; + margin-top: 10px; +} + +#balken { + height: 100%; + width: 0; + background-color: green; + transition: width 0.3s ease; +} +/* Dark Mode Button */ +.darkmode-button { + margin: 10px; + padding: 8px 16px; + cursor: pointer; + border: none; + background: #333; + color: white; + border-radius: 5px; +} + +/* Dark Mode Styles */ +.body.dark { + background-color: #121212; + color: #e0e0e0; +} + +body.dark header, +body.dark nav { + background-color: #1e1e1e; +} + +body.dark input, +body.dark button { + background-color: #333; + color: white; + border: 1px solid #555; +} + +body.dark #balken-container { + background-color: #333; +} + diff --git a/css/style.css.save.1 b/css/style.css.save.1 new file mode 100644 index 0000000..1800f27 --- /dev/null +++ b/css/style.css.save.1 @@ -0,0 +1,81 @@ + { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: Andalus; + color: #000000; + line-height: 1.6; + background-color:#FFFFFF; +} + +nav { + display: flex; + align-items: center; + gap: 1.5rem; + padding: 1rem 2rem; + background: #ffff00; + border-bottom: 1px solid #e2e8f0; + flex-wrap: wrap; +} + +nav a { + text-decoration: none; + color: #2563eb; + font-weight: 500; +} + +nav a:hover { + text-decoration: underline; +} + +.logo { + height: 40px; +} +.galerie { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 1rem; + margin: 1rem 0; +} + +.galerie img { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 8px; + cursor: pointer; + transition: transform 0.2s; +} + +.galerie img:hover { + transform: scale(1.03); +} +#balken-container { + width: 100%; + height: 20px; + background-color: #e5e7eb; + margin-top: 10px; +} + +#balken { + height: 100%; + width: 0; + background-color: green; + transition: width 0.3s ease; +} +/* Dark Mode Button */ +.darkmode-button { + margin: 10px; + padding: 8px 16px; + cursor: pointer; + border: none; + background: #333; + color: white; + border-radius: 5px; +} + +/* Dark Mode Styles */ +. diff --git a/eis-website b/eis-website new file mode 160000 index 0000000..b9f5034 --- /dev/null +++ b/eis-website @@ -0,0 +1 @@ +Subproject commit b9f503448c18e757fe660056dc7bc891abd24af1 diff --git a/eis_project.html b/eis_project.html index e413e02..24c3cf4 100644 --- a/eis_project.html +++ b/eis_project.html @@ -2,6 +2,7 @@ + Logo +
diff --git a/imprint.html b/imprint.html index 4cc18cf..f9b89ba 100644 --- a/imprint.html +++ b/imprint.html @@ -5,6 +5,7 @@ Logo + +
diff --git a/index.html b/index.html index 2c7729b..7a1ace9 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@ + @@ -22,7 +23,7 @@ Imprint
  • Notenrechner
    • - +
    Logo
    diff --git a/js/notenrechner.js b/js/notenrechner.js index b5eea8b..2e6e519 100644 --- a/js/notenrechner.js +++ b/js/notenrechner.js @@ -1,17 +1,70 @@ -function berechneNote(punkte) { - if (punkte >= 90) return "sehr gut"; - else if (punkte >= 75) return "gut"; - else if (punkte >= 60) return "befriedigend"; - else if (punkte >= 50) return "ausreichend"; - else return "nicht bestanden"; +document.addEventListener("DOMContentLoaded", () => { + const input = document.getElementById("punkte"); + const button = document.getElementById("berechnen"); + const ergebnis = document.getElementById("ergebnis"); + const balken = document.getElementById("balken"); + +// Dark Mode Toggle +const darkToggle = document.getElementById("darkmode-toggle"); + +// gespeicherten Modus laden +if (localStorage.getItem("darkmode") === "on") { + document.body.classList.add("dark-mode"); + darkToggle.textContent = "☀️ Light Mode"; } -const erreichtePunkte = Number(prompt("Geben Sie Ihre Punktzahl ein:")); -const maxPunkte = Number(prompt("Geben Sie die maximale Punktzahl ein:")); +darkToggle.addEventListener("click", () => { + document.body.classList.toggle("dark-mode"); -const prozent = (erreichtePunkte / maxPunkte) * 100; -const note = berechneNote(prozent); + if (document.body.classList.contains("dark-mode")) { + localStorage.setItem("darkmode", "on"); + darkToggle.textContent = "☀️ Light Mode"; + } else { + localStorage.setItem("darkmode", "off"); + darkToggle.textContent = "🌙 Dark Mode"; + } +}); + + function berechneNote() { + const value = input.value.trim(); + const zahl = Number(value); + + const isValid = + value !== "" && + !Number.isNaN(zahl) && + zahl >= 0 && + zahl <= 100; + + // Eingabeprüfung + input.style.borderColor = isValid ? "" : "red"; + + if (!isValid) { + ergebnis.textContent = + "Bitte eine gültige Punktzahl zwischen 0 und 100 eingeben."; + balken.style.width = "0"; + balken.style.backgroundColor = "transparent"; + return; + } + + const prozent = zahl; + let note; + + if (prozent >= 90) note = "sehr gut"; + else if (prozent >= 75) note = "gut"; + else if (prozent >= 60) note = "befriedigend"; + else if (prozent >= 50) note = "ausreichend"; + else note = "nicht bestanden"; + + ergebnis.textContent = `Punkte: ${zahl} (${prozent}%) – Note: ${note}`; + + // Balken aktualisieren + balken.style.width = prozent + "%"; + + if (prozent >= 75) balken.style.backgroundColor = "green"; + else if (prozent >= 50) balken.style.backgroundColor = "orange"; + else balken.style.backgroundColor = "red"; + } + + button.addEventListener("click", berechneNote); +}); -console.log(`${erreichtePunkte} von ${maxPunkte} Punkten (${prozent.toFixed(0)}%) = ${note}`); -alert(`${erreichtePunkte} von ${maxPunkte} Punkten (${prozent.toFixed(0)}%) = ${note}`); -alert("Notenrechner-Skript geladen!"); diff --git a/js/script.js b/js/script.js index 5f0f2ee..80b7ab1 100644 --- a/js/script.js +++ b/js/script.js @@ -31,6 +31,25 @@ document.querySelectorAll('.galerie img').forEach(img => { document.body.appendChild(overlay); }); }); +// 🌙 Dark Mode Schalter +document.addEventListener("DOMContentLoaded", () => { + const toggle = document.getElementById("dark-mode-toggle"); + + // Beim Laden: gespeicherten Zustand wiederherstellen + if (localStorage.getItem("darkMode") === "true") { + document.body.classList.add("dark"); + toggle.textContent = "Light Mode"; + } + + // Beim Klick: Zustand umschalten und speichern + toggle.addEventListener("click", () => { + document.body.classList.toggle("dark"); + const isDark = document.body.classList.contains("dark"); + localStorage.setItem("darkMode", isDark); + toggle.textContent = isDark ? "Light Mode" : "Dark Mode"; + }); +}); + document.querySelectorAll('.gallery img').forEach(img => { img.addEventListener('click', () => { const overlay = document.createElement('div'); diff --git a/notenrechner.html b/notenrechner.html index eb7fe7d..7427527 100644 --- a/notenrechner.html +++ b/notenrechner.html @@ -10,19 +10,33 @@
    +
    -

    Notenrechner

    -

    Der Notenrechner wird automatisch gestartet, sobald die Seite geladen wird.

    +

    Notenrechner (DOM-Version)

    + +
    + + + +
    + +

    + +
    +
    +