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

dark

Browse source
This commit is contained in:
annika koenig 2026-06-03 17:00:46 +02:00
parent da4931e9c5
commit ed407f9f82
8 changed files with 60 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
eis_projekt.html
View file

@ -9,23 +9,7 @@
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<script>
function toggleDarkMode() {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.setItem("theme", "light");
}
}
window.onload = function () {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark");
}
};
</script>
<body> <body>
<nav> <nav>
@ -38,18 +22,7 @@ window.onload = function () {
<li><a href="kontakt.html">Kontakt</a></li> <li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li> <li><a href="impressum.html">Impressum</a></li>
</ul> </ul>
<button onclick="toggleDarkMode()" <button class="dark-toggle" onclick="toggleDarkMode()">🌙 Mode</button>
style="
background: transparent;
border: 1px solid rgba(232,103,154,0.4);
color: var(--rose);
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
font-size: 0.8rem;
">
🌙 Mode
</button>
</nav> </nav>
<section class="hero"> <section class="hero">
@ -188,4 +161,5 @@ style="
</footer> </footer>
</body> </body>
<script src="script.js"></script>
</html> </html>

30
impressum.html
View file

@ -10,23 +10,7 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<script>
function toggleDarkMode() {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.setItem("theme", "light");
}
}
window.onload = function () {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark");
}
};
</script>
<body> <body>
<nav> <nav>
@ -39,18 +23,7 @@ window.onload = function () {
<li><a href="kontakt.html">Kontakt</a></li> <li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li> <li><a href="impressum.html">Impressum</a></li>
</ul> </ul>
<button onclick="toggleDarkMode()" <button class="dark-toggle" onclick="toggleDarkMode()">🌙 Mode</button>
style="
background: transparent;
border: 1px solid rgba(232,103,154,0.4);
color: var(--rose);
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
font-size: 0.8rem;
">
🌙 Mode
</button>
</nav> </nav>
<section class="hero"> <section class="hero">
@ -121,4 +94,5 @@ style="
</footer> </footer>
</body> </body>
<script src="script.js"></script>
</html> </html>

31
index.html
View file

@ -7,23 +7,7 @@
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<script>
function toggleDarkMode() {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.setItem("theme", "light");
}
}
window.onload = function () {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark");
}
};
</script>
<body> <body>
@ -36,18 +20,8 @@ window.onload = function () {
<a href="kontakt.html">Kontakt</a> <a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a> <a href="impressum.html">Impressum</a>
</ul> </ul>
<button onclick="toggleDarkMode()" <button class="dark-toggle" onclick="toggleDarkMode()">🌙 Mode</button>
style="
background: transparent;
border: 1px solid rgba(232,103,154,0.4);
color: var(--rose);
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
font-size: 0.8rem;
">
🌙 Mode
</button>
</nav> </nav>
<div class="hero"> <div class="hero">
@ -135,4 +109,5 @@ style="
</footer> </footer>
</body> </body>
<script src="script.js"></script>
</html> </html>

15
js/script.js
View file

@ -1,15 +0,0 @@
document.querySelector("form")?.addEventListener("submit", function(e) {
e.preventDefault();
alert("Nachricht gesendet 💖");
});
/* Folder structure (create manually)
/img
pic1.jpg
pic2.jpg
/assets
projektinfo.pdf

29
kontakt.html
View file

@ -9,23 +9,7 @@
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<script>
function toggleDarkMode() {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.setItem("theme", "light");
}
}
window.onload = function () {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark");
}
};
</script>
<body> <body>
<nav> <nav>
@ -38,16 +22,8 @@ window.onload = function () {
<li><a href="kontakt.html">Kontakt</a></li> <li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li> <li><a href="impressum.html">Impressum</a></li>
</ul> </ul>
<button onclick="toggleDarkMode()" <button class="dark-toggle" onclick="toggleDarkMode()">🌙 Mode</button>
style="
background: transparent;
border: 1px solid rgba(232,103,154,0.4);
color: var(--rose);
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
font-size: 0.8rem;
">
🌙 Mode 🌙 Mode
</button> </button>
</nav> </nav>
@ -138,4 +114,5 @@ style="
</footer> </footer>
</body> </body>
<script src="script.js"></script>
</html> </html>

20
script.js Normal file
View file

@ -0,0 +1,20 @@
document.querySelector("form")?.addEventListener("submit", function (e) {
e.preventDefault();
alert("Nachricht gesendet 💖");
});
function toggleDarkMode() {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.setItem("theme", "light");
}
}
window.addEventListener("load", () => {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark");
}
});

29
style.css
View file

@ -479,6 +479,35 @@ body.dark .img-badge {
color: var(--text); color: var(--text);
} }
body.dark footer {
background: #0d0a10;
}
body.dark {
--cream: #120d14;
--text: #f5e9f2;
--muted: #c7b2c9;
background: var(--cream);
color: var(--text);
}
body.dark nav {
background: rgba(18, 13, 20, 0.85);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.dark .stat-card,
body.dark .gallery-card {
background: #1b141d;
border-color: rgba(255, 255, 255, 0.08);
}
body.dark .img-badge {
background: #1b141d;
color: var(--text);
}
body.dark footer { body.dark footer {
background: #0d0a10; background: #0d0a10;
} }

1
ueber_uns.html
View file

@ -143,4 +143,5 @@ style="
</footer> </footer>
</body> </body>
<script src="script.js"></script>
</html> </html>