komane/eis-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dark Mode überall eingebaut

Browse source
This commit is contained in:
Theresa Nerz & Tahar Lamred 2026-06-02 15:33:34 +00:00
parent 79ff775268
commit c0544aae3d
11 changed files with 240 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
about_us.html
View file

@ -6,6 +6,7 @@
<!-- Logo in header -->
<img src="./img/Logo.png" alt="Logo" style="height: 100px;">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
<nav>
<a href="index.html">Home</a>
<a href="about_us.html">About Us</a>
@ -14,6 +15,7 @@
<a href="imprint.html">Imprint</a>
<li><a href="notenrechner.html">Notenrechner</a></li>
</nav>
<button id="dark-mode-toggle">Dark Mode</button>
</header>
<main>

2
contact.html
View file

@ -6,6 +6,7 @@
<!-- Logo in header -->
<img src="./img/Logo.png" alt="Logo" style="height: 100px;">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
<nav>
<a href="index.html">Home</a>
<a href="about_us.html">About Us</a>
@ -15,6 +16,7 @@
<li><a href="notenrechner.html">Notenrechner</a></li>
</nav>
<button id="dark-mode-toggle">Dark Mode</button>
</header>
<main>

46
css/style.css
View file

@ -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;
}

81
css/style.css.save.1 Normal file
View file

@ -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 */
.

1
eis-website Submodule

@ -0,0 +1 @@
Subproject commit b9f503448c18e757fe660056dc7bc891abd24af1

2
eis_project.html
View file

@ -2,6 +2,7 @@
<!-- In the <head> of every page -->
<link rel="icon" href="img/favicon.png" type="image/png">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
<!-- Logo in header -->
<img src="./img/Logo.png" alt="Logo" style="height: 100px;">
<nav>
@ -12,6 +13,7 @@
<a href="imprint.html">Imprint</a>
<li><a href="notenrechner.html">Notenrechner</a></li>
</nav>
<button id="dark-mode-toggle">Dark Mode</button>
</header>
<main>

2
imprint.html
View file

@ -5,6 +5,7 @@
<img src="./img/Logo.png" alt="Logo" style="height: 100px;">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
<nav>
<a href="index.html">Home</a>
<a href="about_us.html">About Us</a>
@ -13,6 +14,7 @@
<a href="imprint.html">Imprint</a>
<li><a href="notenrechner.html">Notenrechner</a></li>
</nav>
<button id="dark-mode-toggle">Dark Mode</button>
</header>
<main>

3
index.html
View file

@ -10,6 +10,7 @@
</script>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
</head>
<body>
@ -22,7 +23,7 @@
<a href="imprint.html">Imprint</a>
<li><a href="notenrechner.html">Notenrechner</a></li>
</nav>
<button id="dark-mode-toggle">Dark Mode</button>
<header>
<img src="./img/Logo.png" alt="Logo" style="height: 100px;">
</header>

79
js/notenrechner.js
View file

@ -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!");

19
js/script.js
View file

@ -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');

19
notenrechner.html
View file

@ -10,19 +10,33 @@
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="eis_project.html">Project</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="imprint.html">Imprint</a></li>
<li><a href="notenrechner.html" class="active">Notenrechner</a></li>
</ul>
</nav>
<button id="darkmode-toggle" class="darkmode-button">🌙 Dark Mode</button>
</header>
<main>
<h1>Notenrechner</h1>
<p>Der Notenrechner wird automatisch gestartet, sobald die Seite geladen wird.</p>
<h1>Notenrechner (DOM-Version)</h1>
<form id="noten-form">
<label for="punkte">Punktzahl (0–100):</label>
<input id="punkte" name="punkte" type="number" min="0" max="100">
<button type="button" id="berechnen">Berechnen</button>
</form>
<p id="ergebnis"></p>
<div id="balken-container">
<div id="balken"></div>
</div>
</main>
<footer>
@ -31,3 +45,4 @@
</body>
</html>