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

Compare commits

base: apieper:responsive-menu
Branches Tags
apieper:main apieper:spacing-fix apieper:responsive-menu apieper:landingpage-work
...
compare: apieper:295605829c6ca321e3145230557f2d861dd5e8f2
Branches Tags
apieper:main apieper:spacing-fix apieper:responsive-menu apieper:landingpage-work

4 Commits
responsive ... 295605829c

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
2 changed files with 143 additions and 76 deletions
Expand all files Collapse all files

62
html/index.html
View File

@@ -11,7 +11,7 @@
<body>
<header>
<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>
<span></span>
@@ -20,7 +20,7 @@
<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>
@@ -29,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">
@@ -78,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>
@@ -93,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">
@@ -101,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>
@@ -126,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>

157
html/style.css
View File

@@ -1,24 +1,32 @@
/* Reset & Base Styles */
/* ==========================================
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;
padding: 0 20px;
}
/* Header & Navigation */
/* ==========================================
2. HEADER & NAVIGATION
========================================== */
header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
@@ -52,6 +60,7 @@ nav {
.nav-links a {
color: #333;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
@@ -59,14 +68,34 @@ nav {
color: #667eea;
}
/* Hero Section */
/* 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: white;
color: rgb(38, 38, 38);
padding-top: 80px;
}
@@ -81,15 +110,18 @@ nav {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
}
.hero p {
font-size: 1.5rem;
margin-bottom: 2rem;
margin-bottom: 1.5rem;
opacity: 0.9;
}
/* Buttons */
/* ==========================================
4. BUTTONS & CTAs
========================================== */
.cta-button {
display: inline-block;
background: #667eea;
@@ -111,14 +143,14 @@ nav {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
flex-wrap: wrap;
padding: 0.5rem 3rem;
}
.demo-button {
background: #667eea;
color: white;
padding: 0.8rem 1.5rem;
padding: 0.5rem 1.2rem;
text-decoration: none;
border-radius: 25px;
font-weight: 500;
@@ -130,24 +162,28 @@ nav {
transform: translateY(-2px);
}
/* Sections General */
/* ==========================================
5. SECTIONS & CONTENT CARDS
========================================== */
section {
padding: 5rem 0;
/* KEIN margin nutzen, nur padding! */
background: white;
}
.section-dark {
background: #f8f9fa;
background: #f8f9fa; /* Das Grau füllt jetzt die komplette Breite/Höhe aus */
}
h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
padding: 1.5rem;
/*margin-top: 1.5rem;*/
margin-bottom: 0.5rem;
color: #333;
}
.about-text {
.text {
max-width: 800px;
margin: 0 auto;
text-align: center;
@@ -155,18 +191,18 @@ h2 {
line-height: 1.8;
}
/* Project & Tech Cards */
.projects, .tech-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
gap: 2.5rem;
/*margin-top: 3rem;
margin-bottom: 2rem;*/
}
.project-card, .tech-card {
background: white;
border-radius: 15px;
padding: 2rem;
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;
@@ -179,7 +215,7 @@ h2 {
.project-card h3, .tech-card h3 {
color: #667eea;
margin-bottom: 1rem;
margin-bottom: 1.2rem;
font-size: 1.5rem;
}
@@ -188,60 +224,83 @@ h2 {
line-height: 1.6;
}
/* Community & FAQ Styles */
.demo-section, .community {
text-align: center;
/* ==========================================
6. FOOTER & SEPARATOR
========================================== */
.separator-line {
width: 100%;
height: 1px;
background: #eee;
}
.faq-item {
background: white;
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 1rem;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
/* Footer */
footer {
background: #333;
background: #222;
color: white;
text-align: center;
padding: 2rem 0;
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: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.footer-links a {
color: white;
color: #bbb;
text-decoration: none;
transition: opacity 0.3s;
transition: color 0.3s;
}
/* Responsiveness */
.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) {
.hero h1 {
font-size: 2.5rem;
section {
padding: 4rem 0;
}
.hero p {
font-size: 1.2rem;
}
nav {
flex-direction: column;
gap: 1rem;
}
.hamburger { display: flex; }
.nav-links {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.98);
flex-direction: column;
text-align: center;
}
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; }
}