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>
<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,15 +132,14 @@
<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="#" class="demo-button">Forum / Nextcloud</a>
<a href="#" class="demo-button">Archiv / Gitea</a>
<!-- <a href="#" class="demo-button">Events</a> -->
</div>
</div>
</section>

161
html/style.css
View File

@@ -12,17 +12,16 @@ html {
}
body {
/* Wir entfernen den Gradienten vom Body, damit er nicht durchblitzt */
background: #667eea;
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;
}
/* ==========================================
@@ -69,7 +68,6 @@ nav {
color: #667eea;
}
/* Hamburger Icon (Standard versteckt) */
.hamburger {
display: none;
flex-direction: column;
@@ -91,6 +89,8 @@ nav {
3. HERO SECTION
========================================== */
.hero {
/* Der lila Verlauf gehört nur in den ersten Sichtbereich */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
@@ -98,6 +98,7 @@ nav {
text-align: center;
color: white;
padding-top: 80px;
padding-bottom: 80px; /* Innenabstand unten */
}
.hero-content {
@@ -107,13 +108,14 @@ nav {
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
background: linear-gradient(45deg, #091e7a, #667eea);
background: linear-gradient(45deg, #010c3c, #0f216e);
-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;
@@ -144,14 +146,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;
@@ -167,22 +169,24 @@ nav {
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;
@@ -193,14 +197,15 @@ h2 {
.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;
@@ -213,7 +218,7 @@ h2 {
.project-card h3, .tech-card h3 {
color: #667eea;
margin-bottom: 1rem;
margin-bottom: 1.2rem;
font-size: 1.5rem;
}
@@ -223,58 +228,60 @@ h2 {
}
/* ==========================================
6. FOOTER
6. FOOTER & SEPARATOR
========================================== */
.separator-line {
width: 100%;
height: 1px;
background: #eee;
}
footer {
background: #333;
background: #222;
color: white;
text-align: center;
padding: 3rem 0;
position: relative;
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: 1.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.footer-links a {
color: white;
color: #bbb;
text-decoration: none;
transition: opacity 0.3s;
transition: color 0.3s;
}
.footer-links a:hover {
opacity: 0.7;
color: white;
}
/* Separator Line zwischen Content und Footer */
footer::before {
content: '';
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 2px;
background: linear-gradient(90deg, transparent, #667eea, transparent);
border-radius: 1px;
footer p:last-child {
margin-top: 2rem;
font-size: 0.9rem;
color: #777;
}
/* ==========================================
7. MOBILE RESPONSIVENESS (BREAKPOINTS)
7. RESPONSIVENESS
========================================== */
@media (max-width: 768px) {
/* Zeige Hamburger-Icon */
.hamburger {
display: flex;
section {
padding: 4rem 0;
}
/* Verwandle Nav-Links in Dropdown */
.hamburger { display: flex; }
.nav-links {
position: absolute;
top: 100%;
@@ -287,74 +294,16 @@ footer::before {
overflow: hidden;
transition: max-height 0.4s ease-in-out;
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 { max-height: 500px; }
.nav-links li { border-bottom: 1px solid #eee; }
.nav-links a { padding: 1.2rem; display: block; }
.nav-links li {
width: 100%;
text-align: center;
border-bottom: 1px solid #eee;
}
.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); }
.nav-links a {
padding: 1.2rem;
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;
}
.hero h1 { font-size: 2.2rem; }
.hero p { font-size: 1.1rem; }
}