some style changes

style
Add separator line between content and footer, improve spacing
2026-02-28 17:20:21 +00:00 · 2026-02-28 16:46:38 +00:00 · 2026-02-28 14:44:51 +00:00 · 2026-02-28 14:33:54 +00:00 · 2026-02-28 14:20:51 +00:00 · 2026-02-28 14:09:40 +00:00
3 changed files with 372 additions and 31 deletions
--- a/compose.yml
+++ b/compose.yml
@@ -8,13 +8,12 @@ services:
      - DOMAIN_MAIN=${DOMAIN_MAIN}
      #- NGINX_ENVSUBST_OUTPUT_DIR=/usr/share/nginx/html
    volumes:
-      - ./html/index.html:/var/www/html/index.html:ro
-      
+      - ./html/index.html:/usr/share/nginx/html/index.html:ro
+      - ./html/style.css:/usr/share/nginx/html/style.css:ro
      # 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/crl.pem:/var/www/html/crl.pem:ro
      #- ./html/crl.pem:/usr/share/nginx/html/crl.pem:ro
      #- ./nginx/crl.conf:/etc/nginx/conf.d/crl.conf:ro
    networks:
--- a/html/index.html
+++ b/html/index.html
@@ -11,11 +11,16 @@
 <body>
    <header>
        <nav class="container">
-            <a href="#" class="logo">Ground Zero Lab</a>
-            <ul class="nav-links">
+            <a href="#" class="logo">🏗Ground Zero Lab</a>
+            <div class="hamburger" onclick="toggleHamburger()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </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">Technologie</a></li>
+                <li><a href="#tech">Methoden</a></li>
                <li><a href="#demo">Demo</a></li>
                <li><a href="#community">Community</a></li>
            </ul>
@@ -24,25 +29,26 @@

    <section class="hero">
        <div class="hero-content">
-            <h1>Ground Zero Lab</h1>
-            <h1>KI für kritische Wahrheit</h1>
-            <p>Entdecken Sie die Wissenschaft hinter den Mythen - 9/11, Klima, Gesundheit und mehr</p>
+            <p>KI für kritische Wahrheit</p>
+            <h1>🚧 Ground Zero Lab</h1>
+            <p>Entdecken die Wissenschaft hinter den Mythen...<br>
+                9/11, CO2-Klimawahn, Gesundheit und mehr</p>
            <a href="#demo" class="cta-button">Jetzt entdecken</a>
        </div>
    </section>

    <section id="about" class="container">
        <h2>Über Uns</h2>
-        <p class="about-text">
-            Wir entwickeln KI-Modelle, die Propaganda durchschauen und wissenschaftliche Wahrheit liefern. 
+        <p class="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 Experten für Datenwissenschaft, Geschichte und kritisches Denken, 
+            Unser Team besteht aus Forschern für Datenwissenschaft, Geschichte und kritisches Denken, 
            die gemeinsam an der Aufgabe arbeiten, verborgene Wahrheiten ans Licht zu bringen.
        </p>
    </section>

-    <section id="projects" class="section-dark container">
+    <section id="projects" class="container">
        <h2>Unsere Hauptprojekte</h2>
        <div class="projects">
            <div class="project-card">
@@ -73,13 +79,13 @@
    </section>

    <section id="tech" class="container">
-        <h2>Unsere Technologie</h2>
+        <h2>Unsere Methoden</h2>
        <div class="tech-features">
            <div class="tech-card">
                <h3>Open-Weight-Modelle</h3>
                <p>
                    Wir nutzen nur Modelle mit offenen Gewichten. 
-                    Dies ermöglicht volle Kontrolle über Training und Parameter, 
+                    Dies ermöglicht volle Kontrolle über Systempropts und Parameter, 
                    sodass wir die Modelle genau an unsere Bedürfnisse anpassen können.
                </p>
            </div>
@@ -88,7 +94,7 @@
                <p>
                    Wissensdatenbanken für präzise Antworten. 
                    Durch die Kombination von Retrieval und Generation 
-                    erhalten Sie stets aktuelle Informationen aus wissenschaftlichen Quellen.
+                    erhalte stets aktuelle Informationen aus wissenschaftlichen Quellen.
                </p>
            </div>
            <div class="tech-card">
@@ -96,24 +102,29 @@
                <p>
                    Maßgeschneiderte Modelle für spezifische Themen. 
                    Training auf verifizierten Daten und gezielte Eliminierung von Propaganda 
-                    führt zu konsistenten, wissenschaftlich fundierten Antworten.
+                    führt zu konsistenten, wissenschaftlich koherenten Antworten.
+                    Kein: "Es ist 'wissenschaftlicher' Konsens, dass sie Ausnahme die Regel bestätigt".
+                    Unangenehme Wiedersprüche werden klar benannt und aufgelöst.
                </p>
            </div>
        </div>
    </section>

-    <section id="demo" class="section-dark container">
+    <section id="demo" class="container">
        <h2>Live-Demo</h2>
        <div class="demo-section">
-            <p>
-                Testen Sie unsere Modelle sofort und erleben Sie die Unterschiede selbst. 
-                Unsere interaktiven Demos zeigen Ihnen, wie unsere KI arbeitet und 
+            <p class="text">
+                Probiere unsere Workarounds und Standart-Modelle
+                oder selbst finegetunte Modelle aus.
+                Erleben den Unterschiede selbst. 
+                Unsere interaktiven Demos zeigen dir,
+                wie unsere KI arbeitet und 
                welche Erkenntnisse sie liefern kann.
            </p>
            <div class="demo-buttons">
-                <a href="#" class="demo-button">9/11-Chat</a>
-                <a href="#" class="demo-button">Klimawandel-Tool</a>
-                <a href="#" class="demo-button">Gesundheits-Analyse</a>
+                <a href="#" class="demo-button">🚧 9/11-Chat</a>
+                <a href="#" class="demo-button">🚧 Klimawandel-Tool</a>
+                <a href="#" class="demo-button">🚧 Gesundheits-Analyse</a>
            </div>
        </div>
    </section>
@@ -121,19 +132,21 @@
    <section id="community" class="container">
        <h2>Community</h2>
        <div class="community">
-            <p>
-                Werden Sie Teil unserer wachsenden Community von Forschern, 
-                Wissenschaftlern und Wahrheitssuchenden. 
-                Austausch, Zusammenarbeit und gemeinsame Entdeckungen erwarten Sie.
+            <p  class="text">
+                Werde Teil unserer wachsenden Community von Querdenkern und Wahrheitssuchenden. 
+                Austausch, Zusammenarbeit und gemeinsame Entdeckungen erwarten dich.
            </p>
            <div class="demo-buttons">
-                <a href="#" class="demo-button">Zum Forum</a>
-                <a href="#" class="demo-button">Research Zugang</a>
-                <a href="#" class="demo-button">Events</a>
+               <a href="https://cloud.gzl.lan64.de" class="demo-button">Forum / Nextcloud</a>
+               <a href="https://git.gzl.lan64.de" class="demo-button">Archiv / Gitea</a>
+               <!--  <a href="#" class="demo-button">Events</a> -->
            </div>
        </div>
    </section>

+    <!-- Separator Line zwischen Content und Footer -->
+    <div class="separator-line"></div>
+
    <footer>
        <div class="container">
            <p>Ground Zero Lab - KI für kritische Wahrheit</p>
@@ -147,5 +160,28 @@
            <p>&copy; 2026 Ground Zero Lab</p>
        </div>
    </footer>
+
+    <script>
+        function toggleHamburger() {
+            const navLinks = document.getElementById('navLinks');
+            navLinks.classList.toggle('mobile-open');
+            
+            const hamburger = document.querySelector('.hamburger');
+            hamburger.classList.toggle('active');
+        }
+
+        // Close mobile menu when clicking on a link
+        document.addEventListener('DOMContentLoaded', function() {
+            const navLinks = document.getElementById('navLinks');
+            const links = navLinks.querySelectorAll('a');
+            
+            links.forEach(link => {
+                link.addEventListener('click', function() {
+                    navLinks.classList.remove('mobile-open');
+                    document.querySelector('.hamburger').classList.remove('active');
+                });
+            });
+        });
+    </script>
 </body>
 </html>
--- a/html/style.css
+++ b/html/style.css
@@ -0,0 +1,306 @@
+/* ==========================================
+   1. RESET & BASIS STILE
+   ========================================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    overflow-x: hidden;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* ==========================================
+   2. HEADER & NAVIGATION
+   ========================================== */
+header {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #667eea;
+    text-decoration: none;
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+    list-style: none;
+}
+
+.nav-links a {
+    color: #333;
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s;
+}
+
+.nav-links a:hover {
+    color: #667eea;
+}
+
+/* Hamburger Icon (Standard versteckt) */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+    gap: 5px;
+    z-index: 1100;
+}
+
+.hamburger span {
+    display: block;
+    width: 25px;
+    height: 3px;
+    background-color: #667eea;
+    border-radius: 3px;
+    transition: all 0.3s ease;
+}
+
+/* ==========================================
+   3. HERO SECTION
+   ========================================== */
+.hero {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: rgb(38, 38, 38);
+    padding-top: 80px;
+}
+
+.hero-content {
+    max-width: 800px;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1rem;
+    background: linear-gradient(45deg, #091e7a, #667eea);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    line-height: 1.2;
+}
+
+.hero p {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+    opacity: 0.9;
+}
+
+/* ==========================================
+   4. BUTTONS & CTAs
+   ========================================== */
+.cta-button {
+    display: inline-block;
+    background: #667eea;
+    color: white;
+    padding: 1rem 2rem;
+    text-decoration: none;
+    border-radius: 50px;
+    font-weight: bold;
+    transition: transform 0.3s, box-shadow 0.3s;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+
+.cta-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+}
+
+.demo-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 0.5rem 3rem;
+}
+
+.demo-button {
+    background: #667eea;
+    color: white;
+    padding: 0.5rem 1.2rem;
+    text-decoration: none;
+    border-radius: 25px;
+    font-weight: 500;
+    transition: background 0.3s, transform 0.3s;
+}
+
+.demo-button:hover {
+    background: #5a6fd8;
+    transform: translateY(-2px);
+}
+
+/* ==========================================
+   5. SECTIONS & CONTENT CARDS
+   ========================================== */
+section {
+    /* KEIN margin nutzen, nur padding! */
+    background: white;
+}
+
+.section-dark {
+    background: #f8f9fa; /* Das Grau füllt jetzt die komplette Breite/Höhe aus */
+}
+
+h2 {
+    text-align: center;
+    font-size: 2.5rem;
+    padding: 1.5rem;
+    /*margin-top: 1.5rem;*/
+    margin-bottom: 0.5rem;
+    color: #333;
+}
+
+.text {
+    max-width: 800px;
+    margin: 0 auto;
+    text-align: center;
+    font-size: 1.1rem;
+    line-height: 1.8;
+}
+
+.projects, .tech-features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2.5rem;
+    /*margin-top: 3rem;
+    margin-bottom: 2rem;*/
+}
+
+.project-card, .tech-card {
+    background: white;
+    border-radius: 15px;
+    padding: 2.5rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s, box-shadow 0.3s;
+    text-align: center;
+}
+
+.project-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+}
+
+.project-card h3, .tech-card h3 {
+    color: #667eea;
+    margin-bottom: 1.2rem;
+    font-size: 1.5rem;
+}
+
+.project-card p, .tech-card p {
+    color: #666;
+    line-height: 1.6;
+}
+
+/* ==========================================
+   6. FOOTER & SEPARATOR
+   ========================================== */
+.separator-line {
+    width: 100%;
+    height: 1px;
+    background: #eee;
+}
+
+footer {
+    background: #222;
+    color: white;
+    text-align: center;
+    padding: 80px 0; /* Großer Innenabstand oben sorgt für Distanz */
+    margin: 0; /* Sicherstellen, dass kein Außenabstand Lila zeigt */
+}
+
+.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 {
+    color: #bbb;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.footer-links a:hover {
+    color: white;
+}
+
+footer p:last-child {
+    margin-top: 2rem;
+    font-size: 0.9rem;
+    color: #777;
+}
+
+/* ==========================================
+   7. RESPONSIVENESS
+   ========================================== */
+@media (max-width: 768px) {
+    section {
+        padding: 4rem 0;
+    }
+
+    .hamburger { display: flex; }
+
+    .nav-links {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        background: rgba(255, 255, 255, 0.98);
+        flex-direction: column;
+        gap: 0;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.4s ease-in-out;
+        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+    }
+
+    .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; }
+}
Author	SHA1	Message	Date
Andreas Pieper	295605829c	some style changes	2026-02-28 17:20:21 +00:00
Andreas Pieper	c2f8d537dc	style	2026-02-28 16:46:38 +00:00
Ground Zero Lab	49a4cd77d1	Add separator line between content and footer, improve spacing	2026-02-28 14:44:51 +00:00
Andreas Pieper	ff4f59157e	fix haburger menu	2026-02-28 14:33:54 +00:00
Ground Zero Lab	0cd13e91d8	Add responsive hamburger menu for mobile	2026-02-28 14:20:51 +00:00
Ground Zero Lab	4627f25b86	Merge branch 'landingpage-work'	2026-02-28 14:09:40 +00:00
Andreas Pieper	269a03fbad	export syle.css	2026-02-28 13:51:26 +00:00