apieper/webpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

multithame

Browse Source
This commit is contained in:
Andreas Pieper
2026-02-28 19:10:44 +00:00
parent 295605829c
commit eb9b30bfb5
4 changed files with 292 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
compose.yml
View File

@@ -10,6 +10,8 @@ services:
volumes: volumes:
- ./html/index.html:/usr/share/nginx/html/index.html:ro - ./html/index.html:/usr/share/nginx/html/index.html:ro
- ./html/style.css:/usr/share/nginx/html/style.css:ro - ./html/style.css:/usr/share/nginx/html/style.css:ro
- ./html/script.js:/usr/share/nginx/html/script.js:ro
# Wir mounten das Template - Nginx macht daraus beim Start die echte index.html # Wir mounten das Template - Nginx macht daraus beim Start die echte index.html
#- ./html/index.html.template:/etc/nginx/templates/index.html.template:ro #- ./html/index.html.template:/etc/nginx/templates/index.html.template:ro

38
html/index.html
View File

@@ -11,19 +11,32 @@
<body> <body>
<header> <header>
<nav class="container"> <nav class="container">
<a href="#" class="logo">🏗Ground Zero Lab</a> <a href="#" class="logo">🏗 Ground Zero Lab</a>
<div class="hamburger" onclick="toggleHamburger()">
<span></span> <div class="nav-right">
<span></span> <ul class="nav-links" id="navLinks">
<span></span> <li><a href="#about">Über Uns</a></li>
<li><a href="#projects">Projekte</a></li>
<li><a href="#tech">Methoden</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#community">Community</a></li>
</ul>
<div class="theme-switch">
<button class="theme-btn" id="themeBtn" title="Design wählen">
<span class="theme-icon-active">🌓</span>
</button>
<div class="theme-dropdown" id="themeDropdown">
<button data-theme="light">☀️ Hell</button>
<button data-theme="dark">🌙 Dunkel</button>
<button data-theme="auto">🌓 Auto</button>
</div>
</div>
<div class="hamburger" onclick="toggleHamburger()">
<span></span><span></span><span></span>
</div>
</div> </div>
<ul class="nav-links" id="navLinks">
<li><a href="#about">Über Uns</a></li>
<li><a href="#projects">Projekte</a></li>
<li><a href="#tech">Methoden</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#community">Community</a></li>
</ul>
</nav> </nav>
</header> </header>
@@ -183,5 +196,6 @@
}); });
}); });
</script> </script>
<script src="script.js"></script>
</body> </body>
</html> </html>

68
html/script.js Normal file
View File

@@ -0,0 +1,68 @@
/* ==========================================
NAVIGATION & MOBILE MENU
========================================== */
function toggleHamburger() {
const navLinks = document.getElementById('navLinks');
const hamburger = document.querySelector('.hamburger');
navLinks.classList.toggle('mobile-open');
hamburger.classList.toggle('active');
}
/* ==========================================
THEME SWITCHER LOGIC
========================================== */
const themeBtn = document.getElementById('themeBtn');
const themeDropdown = document.getElementById('themeDropdown');
const themeButtons = document.querySelectorAll('.theme-dropdown button');
const htmlEl = document.documentElement;
// Dropdown öffnen/schließen
if (themeBtn) {
themeBtn.addEventListener('click', (e) => {
e.stopPropagation();
themeDropdown.classList.toggle('show');
});
}
// Theme auswählen
themeButtons.forEach(btn => {
btn.addEventListener('click', () => {
const theme = btn.getAttribute('data-theme');
applyTheme(theme);
themeDropdown.classList.remove('show');
});
});
// Theme anwenden
function applyTheme(theme) {
if (theme === 'auto') {
localStorage.removeItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
htmlEl.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
themeBtn.innerHTML = '🌓';
} else {
htmlEl.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
themeBtn.innerHTML = theme === 'dark' ? '🌙' : '☀️';
}
}
// Initialisierung beim Laden
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme') || 'auto';
applyTheme(savedTheme);
});
// Klick außerhalb schließt Dropdown
window.addEventListener('click', () => {
if (themeDropdown) themeDropdown.classList.remove('show');
});
// Mobile Menü schließen bei Klick auf Link
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
document.getElementById('navLinks').classList.remove('mobile-open');
const hamburger = document.querySelector('.hamburger');
if (hamburger) hamburger.classList.remove('active');
});
});

299
html/style.css
View File

@@ -1,3 +1,58 @@
/* ==========================================
0. THEME VARIABLEN (Vollständig Dynamisch)
========================================== */
:root {
/* --- Hell-Modus --- */
--bg-body: #ffffff;
--bg-section-alt: #f8f9fa;
--text-main: #333333;
--text-muted: #666666;
--header-bg: rgba(255, 255, 255, 0.95);
/* Cards */
--card-bg: #ffffff;
--card-shadow: rgba(0, 0, 0, 0.08);
--border-color: #eeeeee;
/* Hero & Akzente */
--accent: #667eea;
--accent-dark: #764ba2;
--hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--hero-text: #ffffff;
--hero-h1-gradient: linear-gradient(45deg, #ffffff, #d1d8ff);
/* Footer */
--footer-bg: #1a1a1a;
--footer-text: #bbbbbb;
--footer-link-hover: #ffffff;
}
[data-theme="dark"] {
/* --- Dunkel-Modus --- */
--bg-body: #0f111a;
--bg-section-alt: #161925;
--text-main: #e0e6ed;
--text-muted: #94a3b8;
--header-bg: rgba(15, 17, 26, 0.96);
/* Cards */
--card-bg: #1c2132;
--card-shadow: rgba(0, 0, 0, 0.3);
--border-color: #2d334a;
/* Hero & Akzente (Im Darkmode etwas entspannter) */
--accent: #39348c;
--accent-dark: #3d4593;
--hero-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
--hero-text: #e2e8f0;
--hero-h1-gradient: linear-gradient(45deg, #818cf8, #c084fc);
/* Footer */
--footer-bg: #070910;
--footer-text: #64748b;
--footer-link-hover: #818cf8;
}
/* ========================================== /* ==========================================
1. RESET & BASIS STILE 1. RESET & BASIS STILE
========================================== */ ========================================== */
@@ -14,21 +69,23 @@ html {
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6; line-height: 1.6;
color: #333; color: var(--text-main);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background-color: var(--bg-body);
overflow-x: hidden; overflow-x: hidden;
transition: all 0.3s ease;
} }
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px;
} }
/* ========================================== /* ==========================================
2. HEADER & NAVIGATION 2. HEADER & NAVIGATION
========================================== */ ========================================== */
header { header {
background: rgba(255, 255, 255, 0.95); background-color: var(--header-bg);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
position: fixed; position: fixed;
@@ -44,10 +101,18 @@ nav {
padding: 1rem 0; padding: 1rem 0;
} }
.nav-right {
display: flex;
align-items: center;
gap: 1.5rem;
}
.logo { .logo {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
color: #667eea; color: var(--accent);
text-decoration: none; text-decoration: none;
} }
@@ -58,32 +123,72 @@ nav {
} }
.nav-links a { .nav-links a {
color: #333; color: var(--text-main);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
transition: color 0.3s;
} }
.nav-links a:hover { .nav-links a:hover {
color: #667eea; color: var(--accent);
}
/* Theme Switcher */
.theme-switch { position: relative; }
.theme-btn {
background: none;
border: 1px solid var(--border-color);
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-main);
}
.theme-dropdown {
position: absolute;
top: 120%;
right: 0;
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 5px 15px var(--card-shadow);
display: none;
flex-direction: column;
min-width: 130px;
z-index: 2000;
overflow: hidden;
}
.theme-dropdown.show { display: flex; }
.theme-dropdown button {
background: none;
border: none;
padding: 12px 15px;
text-align: left;
cursor: pointer;
color: var(--text-main);
}
.theme-dropdown button:hover {
background-color: var(--accent);
color: white;
} }
/* Hamburger Icon (Standard versteckt) */
.hamburger { .hamburger {
display: none; display: none;
flex-direction: column; flex-direction: column;
cursor: pointer;
gap: 5px; gap: 5px;
z-index: 1100; cursor: pointer;
} }
.hamburger span { .hamburger span {
display: block; display: block;
width: 25px; width: 25px;
height: 3px; height: 3px;
background-color: #667eea; background-color: var(--accent);
border-radius: 3px; border-radius: 3px;
transition: all 0.3s ease;
} }
/* ========================================== /* ==========================================
@@ -95,18 +200,16 @@ nav {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
color: rgb(38, 38, 38); background: var(--hero-gradient);
padding-top: 80px; color: var(--hero-text);
} padding: 80px 20px;
transition: background 0.5s ease;
.hero-content {
max-width: 800px;
} }
.hero h1 { .hero h1 {
font-size: 3.5rem; font-size: 3.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
background: linear-gradient(45deg, #091e7a, #667eea); background: var(--hero-h1-gradient);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@@ -120,67 +223,69 @@ nav {
} }
/* ========================================== /* ==========================================
4. BUTTONS & CTAs 4. BUTTONS
========================================== */ ========================================== */
.cta-button { .cta-button {
display: inline-block; display: inline-block;
background: #667eea; background-color: var(--accent);
color: white; color: white;
padding: 1rem 2rem; padding: 1rem 2rem;
text-decoration: none; text-decoration: none;
border-radius: 50px; border-radius: 50px;
font-weight: bold; font-weight: bold;
transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); transition: all 0.3s ease;
} }
.cta-button:hover { .cta-button:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); background-color: var(--accent-dark);
} }
.demo-buttons { .demo-buttons {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
justify-content: center; justify-content: center;
padding: 1rem;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0.5rem 3rem; margin-top: 2rem;
} }
.demo-button { .demo-button {
background: #667eea; background-color: var(--accent);
color: white; color: white;
padding: 0.5rem 1.2rem; padding: 0.6rem 1.4rem;
text-decoration: none; text-decoration: none;
border-radius: 25px; border-radius: 25px;
font-weight: 500; transition: all 0.3s ease;
transition: background 0.3s, transform 0.3s;
} }
.demo-button:hover { .demo-button:hover {
background: #5a6fd8; background-color: var(--accent-dark);
transform: translateY(-2px); transform: translateY(-2px);
} }
/* ========================================== /* ==========================================
5. SECTIONS & CONTENT CARDS 5. SECTIONS & CARDS
========================================== */
/* ==========================================
5. SECTIONS & CARDS
========================================== */ ========================================== */
section { section {
/* KEIN margin nutzen, nur padding! */ padding: 80px 0;
background: white; background-color: var(--bg-body);
} }
.section-dark { .section-dark {
background: #f8f9fa; /* Das Grau füllt jetzt die komplette Breite/Höhe aus */ background-color: var(--bg-section-alt);
} }
h2 { h2 {
text-align: center; text-align: center;
font-size: 2.5rem; font-size: 2.5rem;
padding: 1.5rem; padding: 2.5rem 0;
/*margin-top: 1.5rem;*/ margin-bottom: -2rem;
margin-bottom: 0.5rem; color: var(--text-main);
color: #333;
} }
.text { .text {
@@ -189,118 +294,104 @@ h2 {
text-align: center; text-align: center;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1.8; line-height: 1.8;
color: var(--text-muted);
} }
/* Hier ist die wichtige Änderung für das Nebeneinanderstehen */
.projects, .tech-features { .projects, .tech-features {
display: grid; display: grid;
/* Erzeugt so viele Spalten wie nebeneinander passen (mind. 300px breit) */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem; gap: 2rem;
/*margin-top: 3rem; margin-top: 3rem;
margin-bottom: 2rem;*/
} }
.project-card, .tech-card { .project-card, .tech-card {
background: white; background-color: var(--card-bg);
border-radius: 15px; border-radius: 15px;
padding: 2.5rem; padding: 2.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 30px var(--card-shadow);
transition: transform 0.3s, box-shadow 0.3s; border: 1px solid var(--border-color);
text-align: center; text-align: center;
} transition: transform 0.3s ease, background-color 0.3s;
.project-card:hover { /* Flexbox Korrektur */
transform: translateY(-5px); display: flex;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); flex-direction: column;
justify-content: flex-start; /* Schiebt alles nach oben */
height: 100%; /* Sorgt dafür, dass alle Karten in einer Reihe gleich hoch sind */
} }
.project-card h3, .tech-card h3 { .project-card h3, .tech-card h3 {
color: #667eea; color: var(--accent);
margin-bottom: 1.2rem; margin-bottom: 1.2rem; /* Abstand zwischen Überschrift und Text */
font-size: 1.5rem; font-size: 1.5rem;
} }
.project-card p, .tech-card p { .project-card p, .tech-card p {
color: #666; color: var(--text-muted);
line-height: 1.6; line-height: 1.6;
margin-bottom: 0; /* Verhindert unnötigen Platz nach unten */
} }
.project-card:hover, .tech-card:hover {
transform: translateY(-5px);
}
/* ========================================== /* ==========================================
6. FOOTER & SEPARATOR 6. FOOTER
========================================== */ ========================================== */
.separator-line {
width: 100%;
height: 1px;
background: #eee;
}
footer { footer {
background: #222; background-color: var(--footer-bg);
color: white; color: var(--footer-text);
text-align: center; text-align: center;
padding: 80px 0; /* Großer Innenabstand oben sorgt für Distanz */ padding: 60px 0;
margin: 0; /* Sicherstellen, dass kein Außenabstand Lila zeigt */ transition: background 0.3s ease;
}
.separator-line {
display: none; /* Wir brauchen sie nicht mehr, da die Farben direkt aneinanderschließen */
}
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
} }
.footer-links a { .footer-links a {
color: #bbb; color: var(--footer-text);
text-decoration: none; text-decoration: none;
transition: color 0.3s; margin: 0 1rem;
} }
.footer-links a:hover { .footer-links a:hover {
color: white; color: var(--footer-link-hover);
}
footer p:last-child {
margin-top: 2rem;
font-size: 0.9rem;
color: #777;
} }
/* ========================================== /* ==========================================
7. RESPONSIVENESS 7. RESPONSIVENESS
========================================== */ ========================================== */
@media (max-width: 768px) { @media (max-width: 850px) {
section {
padding: 4rem 0;
}
.hamburger { display: flex; } .hamburger { display: flex; }
.nav-links {
position: absolute;
top: 100%; left: 0; width: 100%;
background-color: var(--header-bg);
flex-direction: column;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.nav-links.mobile-open { max-height: 500px; }
.nav-links li { border-bottom: 1px solid var(--border-color); }
.nav-links a { padding: 1.2rem; display: block; }
.hero h1 { font-size: 2.2rem; }
.nav-links { .nav-links {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
background: rgba(255, 255, 255, 0.98); background-color: var(--header-bg);
display: flex;
flex-direction: column; flex-direction: column;
gap: 0;
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height 0.4s ease-in-out; transition: max-height 0.4s ease-in-out;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 15px var(--card-shadow);
/* Nav-Links müssen über dem Content, aber unter dem Dropdown sein */
z-index: 999;
} }
.nav-links.mobile-open { max-height: 500px; }
.nav-links li { border-bottom: 1px solid #eee; }
.nav-links a { padding: 1.2rem; display: block; }
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.hero h1 { font-size: 2.2rem; }
.hero p { font-size: 1.1rem; }
} }