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

finsh landingpage style

Browse Source
This commit is contained in:
Andreas Pieper
2026-03-01 09:50:01 +00:00
parent 1ab276fdfd
commit 277bdc78d1
9 changed files with 165 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
static/script.js
View File

@@ -8,34 +8,104 @@ function toggleHamburger() {
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;
// Initialisierung
document.addEventListener('DOMContentLoaded', () => {
// ... dein bestehender Code ...
const savedTheme = localStorage.getItem('theme') || 'auto';
applyTheme(savedTheme);
// Dropdown öffnen/schließen
if (themeBtn) {
themeBtn.addEventListener('click', (e) => {
e.stopPropagation();
themeDropdown.classList.toggle('show');
// Schließe andere Dropdowns
if (langDropdown) langDropdown.classList.remove('show');
});
}
// Hamburger Menü schließen bei Klick auf einen Link
const navLinksContainer = document.getElementById('navLinks');
const navLinks = navLinksContainer.querySelectorAll('a');
const hamburger = document.querySelector('.hamburger');
// Theme auswählen
themeButtons.forEach(btn => {
btn.addEventListener('click', () => {
const theme = btn.getAttribute('data-theme');
applyTheme(theme);
themeDropdown.classList.remove('show');
navLinks.forEach(link => {
link.addEventListener('click', () => {
// Prüfen, ob das Menü gerade offen ist
if (navLinksContainer.classList.contains('mobile-open')) {
navLinksContainer.classList.remove('mobile-open');
hamburger.classList.remove('active');
}
});
});
});
/* ==========================================
DROPDOWN LOGIC (Vereinheitlicht)
========================================== */
const langBtn = document.getElementById('langBtn');
const langDropdown = document.getElementById('langDropdown');
const themeBtn = document.getElementById('themeBtn');
const themeDropdown = document.getElementById('themeDropdown');
// Funktion zum Schließen aller Dropdowns
function closeAllDropdowns() {
if (langDropdown) langDropdown.classList.remove('show');
if (themeDropdown) themeDropdown.classList.remove('show');
}
// Event Listener für Sprach-Dropdown
if (langBtn) {
langBtn.addEventListener('click', (e) => {
e.stopPropagation();
closeAllDropdowns();
langDropdown.classList.toggle('show');
});
}
// Event Listener für Theme-Dropdown
if (themeBtn) {
themeBtn.addEventListener('click', (e) => {
e.stopPropagation();
closeAllDropdowns();
themeDropdown.classList.toggle('show');
});
}
// Klick außerhalb schließt alle
window.addEventListener('click', () => {
closeAllDropdowns();
});
/* ==========================================
LANGUAGE SWITCHER LOGIC
========================================== */
if (langDropdown) {
langDropdown.querySelectorAll('.theme-option').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const selectedLang = link.getAttribute('data-lang');
const currentPath = window.location.pathname;
// URL Logik: Pfad ersetzen
let newPath = currentPath.replace(/^\/(de|en|fr|es|ru)(\/|$)/, '/' + selectedLang + '/');
if (currentPath === '/' || !newPath.startsWith('/' + selectedLang)) {
newPath = '/' + selectedLang + '/';
}
newPath = newPath.replace(/\/+/g, '/');
window.location.href = newPath;
});
});
}
/* ==========================================
THEME SWITCHER LOGIC
========================================== */
const themeOptions = document.querySelectorAll('#themeDropdown .theme-option');
const htmlEl = document.documentElement;
themeOptions.forEach(btn => {
btn.addEventListener('click', () => {
const action = btn.getAttribute('data-theme');
let theme;
if (action === 'setdark') theme = 'dark';
else if (action === 'setlight') theme = 'light';
else theme = 'auto';
applyTheme(theme);
});
});
// Theme anwenden
function applyTheme(theme) {
if (theme === 'auto') {
localStorage.removeItem('theme');
@@ -49,65 +119,3 @@ function applyTheme(theme) {
}
}
// Initialisierung beim Laden
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme') || 'auto';
applyTheme(savedTheme);
});
// Klick außerhalb schließt alle Dropdowns
window.addEventListener('click', () => {
if (themeDropdown) themeDropdown.classList.remove('show');
if (langDropdown) langDropdown.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');
});
});
/* ==========================================
LANGUAGE SWITCHER LOGIC
========================================== */
const langBtn = document.getElementById('langBtn');
const langDropdown = document.getElementById('langDropdown');
if (langBtn) {
langBtn.addEventListener('click', (e) => {
e.stopPropagation();
langDropdown.classList.toggle('show');
// Schließe andere Dropdowns
if (themeDropdown) themeDropdown.classList.remove('show');
});
}
// Sprachwechsel Logik (Repariert für alle Sprachen)
if (langDropdown) {
langDropdown.querySelectorAll('a').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault(); // Verhindert das sofortige Neuladen
const selectedLang = link.getAttribute('data-lang');
const currentPath = window.location.pathname; // z.B. /de/projects/
// RegEx um den aktuellen Sprachcode (/de/, /en/, /fr/, etc.) am Anfang zu finden
// und durch die neue Sprache zu ersetzen.
let newPath = currentPath.replace(/^\/(de|en|fr|es|ru)(\/|$)/, '/' + selectedLang + '/');
// Falls man auf der Hauptseite ist (/), oder RegEx nicht matcht
if (currentPath === '/' || !newPath.startsWith('/' + selectedLang)) {
newPath = '/' + selectedLang + '/';
}
// Sicherstellen, dass keine Doppel-Slashes entstehen
newPath = newPath.replace(/\/+/g, '/');
window.location.href = newPath;
});
});
}

138
static/style.css
View File

@@ -16,6 +16,7 @@
/* Hero & Akzente */
--accent: #667eea;
--accent-text: #ffffff;
--accent-dark: #764ba2;
--hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--hero-text: #ffffff;
@@ -42,6 +43,7 @@
/* Hero & Akzente (Im Darkmode etwas entspannter) */
--accent: #39348c;
--accent-text: #ffffff;
--accent-dark: #3d4593;
--hero-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
--hero-text: #e2e8f0;
@@ -132,74 +134,43 @@ nav {
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);
/* Container für die Header-Buttons */
.theme-header-btn {
position: relative;
}
.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;
}
/* --- Language Switcher --- */
.lang-switch { position: relative; }
.lang-btn {
/* Gemeinsames Styling für die Haupt-Buttons im Header */
.lang-btn, .theme-btn {
background: none;
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 8px 15px;
border-radius: 20px; /* Einheitliche Rundung */
padding: 8px 12px;
cursor: pointer;
font-size: 0.9rem;
font-size: 1.1rem;
color: var(--text-main);
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.lang-btn:hover {
.theme-btn {
border-radius: 50%; /* Runde Form für Theme-Btn */
width: 40px;
height: 40px;
}
.lang-btn:hover, .theme-btn:hover {
border-color: var(--accent);
background: rgba(102, 126, 234, 0.1);
}
.lang-dropdown {
/* Gemeinsames Styling für die Dropdowns */
.lang-dropdown, .theme-dropdown {
position: absolute;
top: 120%;
top: calc(100% + 10px); /* Leicht abgesetzt */
right: 0;
background-color: var(--card-bg);
border: 1px solid var(--border-color);
@@ -207,27 +178,37 @@ nav {
box-shadow: 0 5px 15px var(--card-shadow);
display: none;
flex-direction: column;
min-width: 150px;
min-width: 140px;
z-index: 2000;
overflow: hidden;
}
.lang-dropdown.show { display: flex; }
.lang-dropdown a {
.lang-dropdown.show, .theme-dropdown.show {
display: flex;
}
/* Einheitliche Optionen im Dropdown */
.lang-dropdown a.theme-option,
.theme-dropdown .theme-option {
background: transparent;
border: none;
width: 100%;
padding: 10px 15px;
text-decoration: none;
text-align: left;
cursor: pointer;
color: var(--text-main);
font-size: 0.9rem;
text-decoration: none;
transition: background 0.2s;
/* ANPASSUNG 2: Flexbox für Links, damit Flagge/Text nebeneinander bleiben */
display: flex;
align-items: center;
gap: 10px; /* Abstand zwischen Flagge und Text */
/* ANPASSUNG 3: Verhindern, dass der Text umbricht */
white-space: nowrap;
gap: 10px;
}
.lang-dropdown a:hover {
.lang-dropdown a.theme-option:hover,
.theme-dropdown .theme-option:hover {
background-color: var(--accent);
color: white;
color: var(--accent-text);
}
@@ -282,7 +263,7 @@ nav {
.cta-button {
display: inline-block;
background-color: var(--accent);
color: white;
color: var(--accent-text);
padding: 1rem 2rem;
text-decoration: none;
border-radius: 50px;
@@ -307,7 +288,7 @@ nav {
.demo-button {
background-color: var(--accent);
color: white;
color: var(--accent-text);
padding: 0.6rem 1.4rem;
text-decoration: none;
border-radius: 25px;
@@ -411,6 +392,8 @@ footer {
color: var(--footer-link-hover);
}
/* ==========================================
7. RESPONSIVENESS
========================================== */
@@ -425,24 +408,11 @@ footer {
overflow: hidden;
transition: max-height 0.4s ease;
}
.nav-links.mobile-open { max-height: 500px; }
.nav-links.mobile-open { max-height: 300px; }
.nav-links li { border-bottom: 1px solid var(--border-color); }
.nav-links a { padding: 1.2rem; display: block; }
/*.nav-links a { padding: 0.1rem; display: block; }*/
.hero h1 { font-size: 2.2rem; }
.nav-links {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: var(--header-bg);
display: flex;
flex-direction: column;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out;
box-shadow: 0 10px 15px var(--card-shadow);
/* Nav-Links müssen über dem Content, aber unter dem Dropdown sein */
z-index: 999;
}
}
}