christian/website-ai-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor code structure and remove redundant changes

Browse Source
This commit is contained in:
christian
2026-07-12 18:16:31 +02:00
parent 23f20e4371
commit 80ee4cc892
101 changed files with 10541 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/seed-c9320a912b69e7c6.html
+215
View File
@@ -0,0 +1,215 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Herz für Zukunft: Unterstütze unsere Projekte</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom Configuration for Tailwind */
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Playfair Display', 'serif'],
},
colors: {
'impact-red': '#C82424',
'hope-green': '#4CAF50',
'deep-blue': '#1A365D',
'cream-bg': '#FAF9F6',
}
}
}
}
/* Custom CSS for subtle animation and typography */
.hero-bg {
background-image: linear-gradient(to bottom, #e0f2f1 0%, #b2dfdb 100%);
}
.donate-button {
transition: all 0.3s ease;
box-shadow: 0 6px 15px rgba(128, 34, 34, 0.4);
}
.donate-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(128, 34, 34, 0.6);
}
.progress-bar-fill {
transition: width 1.5s ease-out;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
</head>
<body class="font-sans bg-cream-bg text-gray-800 antialiased">
<!-- Header / Navigation -->
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-16">
<h1 class="text-3xl font-serif font-black text-deep-blue tracking-wider">
Herz<span class="text-hope-green">Für</span>Zukunft
</h1>
<nav class="hidden md:flex space-x-8 text-deep-blue font-medium">
<a href="#mission" class="hover:text-impact-red transition duration-150 focus:outline-none focus:ring-2 focus:ring-impact-red p-1">Unsere Mission</a>
<a href="#projekte" class="hover:text-impact-red transition duration-150 focus:outline-none focus:ring-2 focus:ring-impact-red p-1">Projekte</a>
<a href="#impact" class="hover:text-impact-red transition duration-150 focus:outline-none focus:ring-2 focus:ring-impact-red p-1">Wirkung</a>
<a href="#donate" class="px-4 py-2 bg-impact-red text-white rounded-lg hover:bg-red-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-impact-red/50">Spenden</a>
</nav>
<button class="md:hidden p-2 text-deep-blue focus:outline-none focus:ring-2 focus:ring-deep-blue" aria-label="Menü öffnen">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="hero-bg pt-16 pb-20 border-b border-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-6xl sm:text-7xl font-serif font-extrabold text-deep-blue leading-tight mb-4 animate-fade-in">
Jede Tat zählt. <br class="hidden sm:inline"> Hoffnung schenken.
</h2>
<p class="text-xl text-gray-700 mb-10 max-w-3xl mx-auto font-medium">
Wir ermöglichen lebenswichtige Unterstützung für Gemeinschaften, die sie am dringendsten benötigen. Unterstützen Sie unsere Mission – gemeinsam bauen wir eine bessere Zukunft.
</p>
<div class="flex justify-center space-x-4">
<a href="#donate" class="donate-button px-10 py-4 text-xl bg-impact-red text-white font-bold rounded-xl shadow-lg focus:outline-none focus:ring-4 focus:ring-impact-red/50">
Jetzt Spenden
</a>
<a href="#projekte" class="px-10 py-4 text-xl bg-white border-2 border-deep-blue text-deep-blue font-bold rounded-xl hover:bg-deep-blue hover:text-white transition duration-300 focus:outline-none focus:ring-4 focus:ring-deep-blue/50">
Projekte entdecken
</a>
</div>
</div>
</section>
<!-- Mission Statement Section -->
<section id="mission" class="py-20 bg-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<p class="text-hope-green text-lg font-semibold mb-2 uppercase tracking-widest">Unsere Grundlage</p>
<h3 class="text-5xl sm:text-6xl font-serif font-bold text-deep-blue">
Warum wir handeln
</h3>
</div>
<div class="grid md:grid-cols-3 gap-10">
<!-- Wert 1 -->
<div class="text-center p-8 border-t-4 border-hope-green bg-gray-50 shadow-md hover:shadow-lg transition duration-300">
<div class="text-6xl text-hope-green mb-4">🌱</div>
<h4 class="text-3xl font-bold text-deep-blue mb-2">Bedürfnisorientierung</h4>
<p class="text-gray-600">Wir identifizieren die tiefsten und dringendsten Bedürfnisse vor Ort, um unsere Hilfe gezielt einzusetzen.</p>
</div>
<!-- Wert 2 -->
<div class="text-center p-8 border-t-4 border-deep-blue bg-gray-50 shadow-md hover:shadow-lg transition duration-300">
<div class="text-6xl text-deep-blue mb-4">🤝</div>
<h4 class="text-3xl font-bold text-deep-blue mb-2">Gemeinschaftsstärkung</h4>
<p class="text-gray-600">Wir fördern Selbsthilfe und stärken lokale Strukturen, damit die Hilfe nachhaltig wirkt.</p>
</div>
<!-- Wert 3 -->
<div class="text-center p-8 border-t-4 border-impact-red bg-gray-50 shadow-md hover:shadow-lg transition duration-300">
<div class="text-6xl text-impact-red mb-4">❤️</div>
<h4 class="text-3xl font-bold text-deep-blue mb-2">Transparenz</h4>
<p class="text-gray-600">Jeder Euro wird offen dokumentiert. Wir garantieren, dass Ihre Spende den Menschen hilft, die sie erreichen soll.</p>
</div>
</div>
</div>
</section>
<!-- Donation Progress Section -->
<section id="impact" class="py-20 bg-cream-bg border-t border-b border-gray-200">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h3 class="text-4xl font-serif font-bold text-deep-blue mb-3">Gemeinsamer Fortschritt</h3>
<p class="text-xl text-gray-600 mb-12">Wir bewegen uns gemeinsam zu unserem Ziel, jeden Bedarf zu decken.</p>
<div class="w-full mb-8">
<div class="flex justify-between mb-1 text-sm font-medium text-deep-blue">
<span>Ziel: 100.000 €</span>
<span>aktuell: <span id="current-amount">125.500</span> €</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-8">
<div id="progress-bar" class="progress-bar-fill bg-hope-green h-8 rounded-full" style="width: 125.5;"></div>
</div>
</div>
<p class="text-2xl text-gray-700 mt-8 font-semibold">
Wir sind bereits <span class="text-impact-red">125%</span> des Weges zur Veränderung!
</p>
</div>
</section>
<!-- Projects Showcase Section -->
<section id="projekte" class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<p class="text-hope-green text-lg font-semibold mb-2 uppercase tracking-widest">Unsere Arbeit</p>
<h3 class="text-5xl sm:text-6xl font-serif font-bold text-deep-blue">
Unsere aktuellen Projekte
</h3>
<p class="mt-4 text-lg text-gray-600 max-w-3xl">
Von der Wasserversorgung bis zur Bildung – wir setzen direkt dort ein, wo Menschen am meisten Hilfe benötigen.
</p>
</div>
<div class="grid lg:grid-cols-3 gap-10">
<!-- Projekt 1: Wasser -->
<div class="bg-white shadow-xl rounded-xl overflow-hidden transform hover:scale-[1.02] transition duration-500 border-t-8 border-hope-green">
<div class="h-48 bg-gray-100 flex items-center justify-center relative">
<div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image: url('https://picsum.photos/id/1042/800/600');"></div>
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
<p class="text-white text-3xl font-serif font-bold">Wasserversorgung</p>
</div>
</div>
<div class="p-6">
<h4 class="text-3xl font-serif font-bold text-deep-blue mb-3">Sauberes Wasser</h4>
<p class="text-gray-600 mb-4 text-base">Installation nachhaltiger Wasseraufbereitungsanlagen in entlegenen Dörfern.</p>
<button class="w-full py-3 bg-hope-green text-white text-lg font-bold rounded-lg hover:bg-green-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-hope-green/50">
Unterstützen Sie
</button>
</div>
</div>
<!-- Projekt 2: Bildung -->
<div class="bg-white shadow-xl rounded-xl overflow-hidden transform hover:scale-[1.02] transition duration-500 border-t-8 border-deep-blue">
<div class="h-48 bg-gray-100 flex items-center justify-center relative">
<div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image: url('https://picsum.photos/id/1025/800/600');"></div>
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
<p class="text-white text-3xl font-serif font-bold">Bildung</p>
</div>
</div>
<div class="p-6">
<h4 class="text-3xl font-serif font-bold text-deep-blue mb-3">Bildungszentren</h4>
<p class="text-gray-600 mb-4 text-base">Schaffung von Lernräumen für Kinder und Jugendliche in Notlagen.</p>
<button class="w-full py-3 bg-deep-blue text-white text-lg font-bold rounded-lg hover:bg-blue-800 transition duration-300 focus:outline-none focus:ring-4 focus:ring-deep-blue/50">
Unterstützen Sie
</button>
</div>
</div>
<!-- Projekt 3: Ernährung -->
<div class="bg-white shadow-xl rounded-xl overflow-hidden transform hover:scale-[1.02] transition duration-500 border-t-8 border-impact-red">
<div class="h-48 bg-gray-100 flex items-center justify-center relative">
<div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image: url('https://picsum.photos/id/1016/800/600');"></div>
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
<p class="text-white text-3xl font-serif font-bold">Ernährungssicherheit</p>
</div>
</div>
<div class="p-6">
<h4 class="text-3xl font-serif font-bold text-deep-blue mb-3">Ernährungssouveränität</h4>
<p class="text-gray-600 mb-4 text-base">Unterstützung lokaler Bauern und Nahrungsmittelversorgung in Krisengebieten.</p>
<button class="w-full py-3 bg-impact-red text-white text-lg font-bold rounded-lg hover:bg-red-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-impact-red/50">
Unterstützen Sie
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Donation Form Section -->
<section id="donate" class="py-24 bg-gray-50 border-t border-gray-200">
<div class="max-w-3xl mx-auto px-4 sm:px-<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 30.04s</div>