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

style

Browse Source
This commit is contained in:
Andreas Pieper
2026-02-28 16:46:38 +00:00
parent 49a4cd77d1
commit c2f8d537dc
2 changed files with 87 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
html/index.html
View File

@@ -11,7 +11,7 @@
<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()"> <div class="hamburger" onclick="toggleHamburger()">
<span></span> <span></span>
<span></span> <span></span>
@@ -20,7 +20,7 @@
<ul class="nav-links" id="navLinks"> <ul class="nav-links" id="navLinks">
<li><a href="#about">Über Uns</a></li> <li><a href="#about">Über Uns</a></li>
<li><a href="#projects">Projekte</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="#demo">Demo</a></li>
<li><a href="#community">Community</a></li> <li><a href="#community">Community</a></li>
</ul> </ul>
@@ -29,25 +29,26 @@
<section class="hero"> <section class="hero">
<div class="hero-content"> <div class="hero-content">
<h1>Ground Zero Lab</h1> <p>KI für kritische Wahrheit</p>
<h1>KI für kritische Wahrheit</h1> <h1>🚧 Ground Zero Lab</h1>
<p>Entdecken Sie die Wissenschaft hinter den Mythen - 9/11, Klima, Gesundheit und mehr</p> <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> <a href="#demo" class="cta-button">Jetzt entdecken</a>
</div> </div>
</section> </section>
<section id="about" class="container"> <section id="about" class="container">
<h2>Über Uns</h2> <h2>Über Uns</h2>
<p class="about-text"> <p class="text">
Wir entwickeln KI-Modelle, die Propaganda durchschauen und wissenschaftliche Wahrheit liefern. 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: In einer Welt, in der Desinformation die KI-Landschaft dominiert, bieten wir eine Alternative:
Modelle, die auf verifizierten Fakten und wissenschaftlichen Erkenntnissen trainiert sind. 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. die gemeinsam an der Aufgabe arbeiten, verborgene Wahrheiten ans Licht zu bringen.
</p> </p>
</section> </section>
<section id="projects" class="section-dark container"> <section id="projects" class="container">
<h2>Unsere Hauptprojekte</h2> <h2>Unsere Hauptprojekte</h2>
<div class="projects"> <div class="projects">
<div class="project-card"> <div class="project-card">
@@ -78,13 +79,13 @@
</section> </section>
<section id="tech" class="container"> <section id="tech" class="container">
<h2>Unsere Technologie</h2> <h2>Unsere Methoden</h2>
<div class="tech-features"> <div class="tech-features">
<div class="tech-card"> <div class="tech-card">
<h3>Open-Weight-Modelle</h3> <h3>Open-Weight-Modelle</h3>
<p> <p>
Wir nutzen nur Modelle mit offenen Gewichten. 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. sodass wir die Modelle genau an unsere Bedürfnisse anpassen können.
</p> </p>
</div> </div>
@@ -93,7 +94,7 @@
<p> <p>
Wissensdatenbanken für präzise Antworten. Wissensdatenbanken für präzise Antworten.
Durch die Kombination von Retrieval und Generation Durch die Kombination von Retrieval und Generation
erhalten Sie stets aktuelle Informationen aus wissenschaftlichen Quellen. erhalte stets aktuelle Informationen aus wissenschaftlichen Quellen.
</p> </p>
</div> </div>
<div class="tech-card"> <div class="tech-card">
@@ -101,24 +102,29 @@
<p> <p>
Maßgeschneiderte Modelle für spezifische Themen. Maßgeschneiderte Modelle für spezifische Themen.
Training auf verifizierten Daten und gezielte Eliminierung von Propaganda 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> </p>
</div> </div>
</div> </div>
</section> </section>
<section id="demo" class="section-dark container"> <section id="demo" class="container">
<h2>Live-Demo</h2> <h2>Live-Demo</h2>
<div class="demo-section"> <div class="demo-section">
<p> <p class="text">
Testen Sie unsere Modelle sofort und erleben Sie die Unterschiede selbst. Probiere unsere Workarounds und Standart-Modelle
Unsere interaktiven Demos zeigen Ihnen, wie unsere KI arbeitet und oder selbst finegetunte Modelle aus.
Erleben den Unterschiede selbst.
Unsere interaktiven Demos zeigen dir,
wie unsere KI arbeitet und
welche Erkenntnisse sie liefern kann. welche Erkenntnisse sie liefern kann.
</p> </p>
<div class="demo-buttons"> <div class="demo-buttons">
<a href="#" class="demo-button">9/11-Chat</a> <a href="#" class="demo-button">🚧 9/11-Chat</a>
<a href="#" class="demo-button">Klimawandel-Tool</a> <a href="#" class="demo-button">🚧 Klimawandel-Tool</a>
<a href="#" class="demo-button">Gesundheits-Analyse</a> <a href="#" class="demo-button">🚧 Gesundheits-Analyse</a>
</div> </div>
</div> </div>
</section> </section>
@@ -126,15 +132,14 @@
<section id="community" class="container"> <section id="community" class="container">
<h2>Community</h2> <h2>Community</h2>
<div class="community"> <div class="community">
<p> <p class="text">
Werden Sie Teil unserer wachsenden Community von Forschern, Werde Teil unserer wachsenden Community von Querdenkern und Wahrheitssuchenden.
Wissenschaftlern und Wahrheitssuchenden. Austausch, Zusammenarbeit und gemeinsame Entdeckungen erwarten dich.
Austausch, Zusammenarbeit und gemeinsame Entdeckungen erwarten Sie.
</p> </p>
<div class="demo-buttons"> <div class="demo-buttons">
<a href="#" class="demo-button">Zum Forum</a> <a href="#" class="demo-button">Forum / Nextcloud</a>
<a href="#" class="demo-button">Research Zugang</a> <a href="#" class="demo-button">Archiv / Gitea</a>
<a href="#" class="demo-button">Events</a> <!-- <a href="#" class="demo-button">Events</a> -->
</div> </div>
</div> </div>
</section> </section>

161
html/style.css
View File

@@ -12,17 +12,16 @@ html {
} }
body { body {
/* Wir entfernen den Gradienten vom Body, damit er nicht durchblitzt */
background: #667eea;
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: #333;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
overflow-x: hidden;
} }
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px;
} }
/* ========================================== /* ==========================================
@@ -69,7 +68,6 @@ nav {
color: #667eea; color: #667eea;
} }
/* Hamburger Icon (Standard versteckt) */
.hamburger { .hamburger {
display: none; display: none;
flex-direction: column; flex-direction: column;
@@ -91,6 +89,8 @@ nav {
3. HERO SECTION 3. HERO SECTION
========================================== */ ========================================== */
.hero { .hero {
/* Der lila Verlauf gehört nur in den ersten Sichtbereich */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -98,6 +98,7 @@ nav {
text-align: center; text-align: center;
color: white; color: white;
padding-top: 80px; padding-top: 80px;
padding-bottom: 80px; /* Innenabstand unten */
} }
.hero-content { .hero-content {
@@ -107,13 +108,14 @@ nav {
.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: linear-gradient(45deg, #010c3c, #0f216e);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
line-height: 1.2; line-height: 1.2;
} }
.hero p { .hero p {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 2rem; margin-bottom: 2rem;
@@ -144,14 +146,14 @@ nav {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
justify-content: center; justify-content: center;
margin-top: 2rem;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0.5rem 3rem;
} }
.demo-button { .demo-button {
background: #667eea; background: #667eea;
color: white; color: white;
padding: 0.8rem 1.5rem; padding: 0.5rem 1.2rem;
text-decoration: none; text-decoration: none;
border-radius: 25px; border-radius: 25px;
font-weight: 500; font-weight: 500;
@@ -167,22 +169,24 @@ nav {
5. SECTIONS & CONTENT CARDS 5. SECTIONS & CONTENT CARDS
========================================== */ ========================================== */
section { section {
padding: 5rem 0; /* KEIN margin nutzen, nur padding! */
background: white; background: white;
} }
.section-dark { .section-dark {
background: #f8f9fa; background: #f8f9fa; /* Das Grau füllt jetzt die komplette Breite/Höhe aus */
} }
h2 { h2 {
text-align: center; text-align: center;
font-size: 2.5rem; font-size: 2.5rem;
margin-bottom: 3rem; padding: 1.5rem;
/*margin-top: 1.5rem;*/
margin-bottom: 0.5rem;
color: #333; color: #333;
} }
.about-text { .text {
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
@@ -193,14 +197,15 @@ h2 {
.projects, .tech-features { .projects, .tech-features {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem; gap: 2.5rem;
margin-top: 3rem; /*margin-top: 3rem;
margin-bottom: 2rem;*/
} }
.project-card, .tech-card { .project-card, .tech-card {
background: white; background: white;
border-radius: 15px; border-radius: 15px;
padding: 2rem; padding: 2.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s;
text-align: center; text-align: center;
@@ -213,7 +218,7 @@ h2 {
.project-card h3, .tech-card h3 { .project-card h3, .tech-card h3 {
color: #667eea; color: #667eea;
margin-bottom: 1rem; margin-bottom: 1.2rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
@@ -223,58 +228,60 @@ h2 {
} }
/* ========================================== /* ==========================================
6. FOOTER 6. FOOTER & SEPARATOR
========================================== */ ========================================== */
.separator-line {
width: 100%;
height: 1px;
background: #eee;
}
footer { footer {
background: #333; background: #222;
color: white; color: white;
text-align: center; text-align: center;
padding: 3rem 0; padding: 80px 0; /* Großer Innenabstand oben sorgt für Distanz */
position: relative; 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 { .footer-links {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 2rem; gap: 2rem;
margin-bottom: 1.5rem; margin-bottom: 2rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.footer-links a { .footer-links a {
color: white; color: #bbb;
text-decoration: none; text-decoration: none;
transition: opacity 0.3s; transition: color 0.3s;
} }
.footer-links a:hover { .footer-links a:hover {
opacity: 0.7; color: white;
} }
/* Separator Line zwischen Content und Footer */ footer p:last-child {
footer::before { margin-top: 2rem;
content: ''; font-size: 0.9rem;
position: absolute; color: #777;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 2px;
background: linear-gradient(90deg, transparent, #667eea, transparent);
border-radius: 1px;
} }
/* ========================================== /* ==========================================
7. MOBILE RESPONSIVENESS (BREAKPOINTS) 7. RESPONSIVENESS
========================================== */ ========================================== */
@media (max-width: 768px) { @media (max-width: 768px) {
/* Zeige Hamburger-Icon */ section {
.hamburger { padding: 4rem 0;
display: flex;
} }
/* Verwandle Nav-Links in Dropdown */ .hamburger { display: flex; }
.nav-links { .nav-links {
position: absolute; position: absolute;
top: 100%; top: 100%;
@@ -287,74 +294,16 @@ footer::before {
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 rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
} }
/* Wenn Menü offen ist */ .nav-links.mobile-open { max-height: 500px; }
.nav-links.mobile-open { .nav-links li { border-bottom: 1px solid #eee; }
max-height: 500px; .nav-links a { padding: 1.2rem; display: block; }
}
.nav-links li { .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
width: 100%; .hamburger.active span:nth-child(2) { opacity: 0; }
text-align: center; .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
border-bottom: 1px solid #eee;
}
.nav-links a { .hero h1 { font-size: 2.2rem; }
padding: 1.2rem; .hero p { font-size: 1.1rem; }
display: block;
}
/* Hamburger Animation zum X */
.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 Text für Mobile */
.hero h1 {
font-size: 2.2rem;
}
.hero p {
font-size: 1.1rem;
}
}
/* Tablet Portrait */
@media (min-width: 769px) and (max-width: 1024px) {
section {
padding: 4rem 0;
}
footer {
padding: 2.5rem 0;
}
.demo-buttons {
gap: 0.8rem;
}
}
/* Desktop */
@media (min-width: 1025px) {
section {
padding: 5rem 0;
}
footer {
padding: 3rem 0;
}
}
/* Extra Large Desktop */
@media (min-width: 1400px) {
.container {
max-width: 1400px;
}
} }