finsh landingpage style

2026-03-01 09:50:01 +00:00
parent 1ab276fdfd
commit 277bdc78d1
9 changed files with 165 additions and 194 deletions
--- a/config.toml
+++ b/config.toml
@@ -1,4 +1,4 @@
-baseURL = "/" # Setze dies auf "/" für relative Pfade oder fest auf die Domain
+baseURL = "/"
 languageCode = "de"
 defaultContentLanguage = "de"
 defaultContentLanguageInSubdir = true 
--- a/content/_index.de.md
+++ b/content/_index.de.md
@@ -18,6 +18,7 @@ cta_button: "Jetzt entdecken"

 # About
 about_title: "Über Uns"
+about_text: "Wir entwickeln KI-Workarounds und Modelle, die Propaganda durchschauen und wissenschaftliche Wahrheit liefern. In einer Welt, in der Desinformation die KI-Landschaft dominiert, bieten wir eine Alternative: Modelle, die auf verifizierten Fakten und wissenschaftlichen Erkenntnissen trainiert sind. Unser Team besteht aus Forschern für Datenwissenschaft, Geschichte und kritisches Denken, die gemeinsam an der Aufgabe arbeiten, verborgene Wahrheiten ans Licht zu bringen."

 # Projekte
 projects_title: "Unsere Hauptprojekte"
@@ -55,8 +56,3 @@ comm_btn2: "Archiv / Gitea"
 # Footer
 footer_text: "Ground Zero Lab - KI für kritische Wahrheit"
 ---
-Wir entwickeln KI-Workarounds und Modelle, die Propaganda durchschauen und wissenschaftliche Wahrheit liefern. 
-In einer Welt, in der Desinformation die KI-Landschaft dominiert, bieten wir eine Alternative: 
-Modelle, die auf verifizierten Fakten und wissenschaftlichen Erkenntnissen trainiert sind. 
-Unser Team besteht aus Forschern für Datenwissenschaft, Geschichte und kritisches Denken, 
-die gemeinsam an der Aufgabe arbeiten, verborgene Wahrheiten ans Licht zu bringen.
--- a/content/_index.en.md
+++ b/content/_index.en.md
@@ -18,6 +18,7 @@ cta_button: "Explore Now"

 # About
 about_title: "About Us"
+about_text: "We develop AI workarounds and models that bypass propaganda and deliver scientific truth. In a world dominated by disinformation in the AI landscape, we offer an alternative: models trained on verified facts and scientific knowledge. Our team consists of researchers in data science, history, and critical thinking, working together to bring hidden truths to light."

 # Projects
 projects_title: "Our Main Projects"
@@ -55,8 +56,3 @@ comm_btn2: "Archive / Gitea"
 # Footer
 footer_text: "Ground Zero Lab - AI for Critical Truth"
 ---
-We develop AI workarounds and models that bypass propaganda and deliver scientific truth.
-In a world dominated by disinformation in the AI landscape, we offer an alternative:
-models trained on verified facts and scientific knowledge.
-Our team consists of researchers in data science, history, and critical thinking,
-working together to bring hidden truths to light.
--- a/content/_index.es.md
+++ b/content/_index.es.md
@@ -18,6 +18,7 @@ cta_button: "Explorar"

 # About
 about_title: "Nosotros"
+about_text: "Desarrollamos soluciones de IA y modelos que evitan la propaganda y entregan la verdad científica. En un mundo dominado por la desinformación en el panorama de la IA, ofrecemos una alternativa: modelos entrenados con hechos verificados y conocimiento científico. Nuestro equipo está compuesto por investigadores en ciencia de datos, historia y pensamiento crítico, trabajando juntos para sacar a la luz verdades ocultas."

 # Projects
 projects_title: "Nuestros Proyectos Principales"
@@ -55,4 +56,3 @@ comm_btn2: "Archivo / Gitea"
 # Footer
 footer_text: "Ground Zero Lab - IA para la Verdad Crítica"
 ---
-Desarrollamos soluciones de IA y modelos que evitan la propaganda y entregan la verdad científica. En un mundo dominado por la desinformación en el panorama de la IA, ofrecemos una alternativa: modelos entrenados con hechos verificados y conocimiento científico. Nuestro equipo está compuesto por investigadores en ciencia de datos, historia y pensamiento crítico, trabajando juntos para sacar a la luz verdades ocultas.
--- a/content/_index.fr.md
+++ b/content/_index.fr.md
@@ -18,6 +18,7 @@ cta_button: "Découvrir"

 # About
 about_title: "À propos"
+about_text: "Nous développons des contournements IA et des modèles qui percent la propagande et délivrent la vérité scientifique. Dans un monde dominé par la désinformation dans le paysage de l'IA, nous offrons une alternative : des modèles entraînés sur des faits vérifiés et des connaissances scientifiques. Notre équipe est composée de chercheurs en science des données, en histoire et en pensée critique, travaillant ensemble pour mettre en lumière des vérités cachées."

 # Projects
 projects_title: "Nos Projets Principaux"
@@ -55,4 +56,4 @@ comm_btn2: "Archives / Gitea"
 # Footer
 footer_text: "Ground Zero Lab - IA pour la Vérité Critique"
 ---
-Nous développons des contournements IA et des modèles qui percent la propagande et délivrent la vérité scientifique. Dans un monde dominé par la désinformation dans le paysage de l'IA, nous offrons une alternative : des modèles entraînés sur des faits vérifiés et des connaissances scientifiques. Notre équipe est composée de chercheurs en science des données, en histoire et en pensée critique, travaillant ensemble pour mettre en lumière des vérités cachées.
+
--- a/content/_index.ru.md
+++ b/content/_index.ru.md
@@ -18,6 +18,7 @@ cta_button: "Узнать больше"

 # About
 about_title: "О нас"
+about_text: "Мы разрабатываем обходные пути ИИ и модели, которые преодолевают пропаганду и доставляют научную истину. В мире, где в ландшафте ИИ доминирует дезинформация, мы предлагаем альтернативу: модели, обученные на проверенных фактах и научных знаниях. Наша команда состоит из исследователей в области науки о данных, истории и критического мышления, работающих вместе, чтобы вывести скрытые истины на свет."

 # Projects
 projects_title: "Наши главные проекты"
@@ -55,4 +56,4 @@ comm_btn2: "Архив / Gitea"
 # Footer
 footer_text: "Ground Zero Lab - ИИ для критической правды"
 ---
-Мы разрабатываем обходные пути ИИ и модели, которые преодолевают пропаганду и доставляют научную истину. В мире, где в ландшафте ИИ доминирует дезинформация, мы предлагаем альтернативу: модели, обученные на проверенных фактах и научных знаниях. Наша команда состоит из исследователей в области науки о данных, истории и критического мышления, работающих вместе, чтобы вывести скрытые истины на свет.
+
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -10,6 +10,9 @@
 <body>
    <header>
        <nav class="container">
+            <div class="hamburger" onclick="toggleHamburger()">
+                <span></span><span></span><span></span>
+            </div>
            <a href="#" class="logo">🏗 Ground Zero Lab</a>
            
            <div class="nav-right">
@@ -20,8 +23,7 @@
                    <li><a href="#demo">{{ .Params.menu_demo }}</a></li>
                    <li><a href="#community">{{ .Params.menu_community }}</a></li>
                </ul>
-
-               <div class="lang-switch">
+                <div class="theme-header-btn">
                    <button class="lang-btn" id="langBtn">
                        {{ if eq .Lang "de" }}🇩🇪{{ end }}
                        {{ if eq .Lang "en" }}🇬🇧{{ end }}
@@ -31,7 +33,7 @@
                    </button>
                    <div class="lang-dropdown" id="langDropdown">
                        {{ range .Site.Languages }}
-                        <a href="#" data-lang="{{ .Lang }}">
+                        <a href="#" class="theme-option" data-lang="{{ .Lang }}">
                            {{ if eq .Lang "de" }}🇩🇪 Deutsch{{ end }}
                            {{ if eq .Lang "en" }}🇬🇧 English{{ end }}
                            {{ if eq .Lang "fr" }}🇫🇷 Français{{ end }}
@@ -42,20 +44,17 @@
                    </div>
                </div>

-                <div class="theme-switch">
+                <div class="theme-header-btn">
                    <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>
+                        <button class="theme-option" data-theme="setlight">☀️ Hell</button>
+                        <button class="theme-option" data-theme="setdark">🌙 Dunkel</button>
+                        <button class="theme-option" data-theme="setauto">🌓 Auto</button>
                    </div>
                </div>

-                <div class="hamburger" onclick="toggleHamburger()">
-                    <span></span><span></span><span></span>
-                </div>
            </div>
        </nav>
    </header>
@@ -71,7 +70,7 @@

    <section id="about" class="container">
        <h2>{{ .Params.about_title }}</h2>
-        <div class="text">{{ .Content }}</div>
+        <div class="text">{{ .Params.about_text }}</div>
    </section>

    <section id="projects" class="section-dark">
--- a/static/script.js
+++ b/static/script.js
@@ -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;
-        });
-    });
-}
--- a/static/style.css
+++ b/static/style.css
@@ -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; 
-    }
 }
+
+