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-fbba5b34f55c84b8.html
+174
View File
@@ -0,0 +1,174 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hundehaus Herzensfreude | Adoptionszentrum</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom Configuration for Tailwind */
tailwind.config = {
theme: {
extend: {
colors: {
'primary-gold': '#D4AF37',
'secondary-sage': '#8FBC8F',
'deep-moss': '#385A38',
'cream-bg': '#FAF9F6',
}
}
}
}
/* Custom Styles for visual flair */
.hero-bg {
background-image: url('https://images.unsplash.com/photo-1583025817778-5e420783b68e?fit=crop&w=1600&q=80'); /* Placeholder for a warm, happy dog image */
background-size: cover;
background-position: center;
background-blend-mode: multiply;
background-color: rgba(0, 0, 0, 0.3); /* Dark overlay */
}
.card-hover:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Subtle animation for content fade-in */
.animate-in {
opacity: 0;
transform: translateY(20px);
animation: fadeInMove 1s ease-out forwards;
}
@keyframes fadeInMove {
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body class="font-sans bg-cream-bg text-gray-800">
<!-- Header & Navigation -->
<header class="bg-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-20">
<div class="text-3xl font-extrabold text-deep-moss tracking-wider cursor-pointer">
Hundhaus<span class="text-primary-gold"> Herzensfreude</span>
</div>
<nav class="hidden md:flex space-x-8 font-medium">
<a href="#adoptieren" class="text-gray-600 hover:text-primary-gold transition duration-150 focus:text-primary-gold focus:outline-none focus:ring-2 ring-primary-gold p-1">Adoption</a>
<a href="#tierliste" class="text-gray-600 hover:text-primary-gold transition duration-150 focus:text-primary-gold focus:outline-none focus:ring-2 ring-primary-gold p-1">Tierliste</a>
<a href="#ueber" class="text-gray-600 hover:text-primary-gold transition duration-150 focus:text-primary-gold focus:outline-none focus:ring-2 ring-primary-gold p-1">Über Uns</a>
<a href="#kontakt" class="bg-primary-gold text-white px-4 py-2 rounded-lg shadow-md hover:bg-yellow-600 transition duration-150 focus:ring-4 ring-primary-gold focus:ring-opacity-50">Kontakt</a>
</nav>
<div class="md:hidden">
<!-- Mobile Menu Button (Placeholder for functionality) -->
<button id="mobile-menu-button" class="text-gray-800 hover:text-primary-gold focus:outline-none focus:ring-2 ring-primary-gold p-2">
<svg class="w-7 h-7" 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 12h16m-7 6h7"></path></svg>
</button>
</div>
</div>
<!-- Mobile Menu Dropdown (Hidden by default) -->
<div id="mobile-menu" class="hidden md:hidden border-t bg-white">
<div class="px-4 pt-2 pb-3 space-y-1 sm:px-6">
<a href="#adoptieren" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-cream-bg focus:bg-cream-bg focus:outline-none">Adoption</a>
<a href="#tierliste" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-cream-bg focus:bg-cream-bg focus:outline-none">Tierliste</a>
<a href="#ueber" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-cream-bg focus:bg-cream-bg focus:outline-none">Über Uns</a>
<a href="#kontakt" class="block w-full text-center mt-2 bg-primary-gold text-white px-3 py-2 rounded-md hover:bg-yellow-600 focus:ring-2 ring-primary-gold">Kontakt</a>
</div>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="hero-bg h-[60vh] flex items-center justify-center text-center relative">
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
<div class="relative z-10 p-4 max-w-4xl animate-in" style="animation-delay: 0.1s;">
<h1 class="text-6xl sm:text-7xl font-extrabold text-white leading-tight mb-4 drop-shadow-lg">
Finde Dein Bester Freund
</h1>
<p class="text-xl sm:text-2xl text-white mb-8 font-light shadow-text">
Ein Zuhause, das Liebe schenkt. Wir verbinden Tiere mit Herzen, die sie lieben.
</p>
<a href="#adoptieren" class="inline-block bg-primary-gold text-white text-lg font-semibold px-10 py-4 rounded-full shadow-2xl transform hover:scale-105 transition duration-300 focus:outline-none focus:ring-4 ring-primary-gold ring-offset-4">
Jetzt Adoptionsprozess starten
</a>
</div>
</section>
<!-- Mission Statement Section -->
<section id="ueber" class="py-16 md:py-24 bg-white">
<div class="max-w-6xl mx-auto px-6 lg:px-8">
<div class="text-center mb-12 animate-in" style="animation-delay: 0.3s;">
<h2 class="text-5xl font-bold text-deep-moss mb-3">Unsere Mission</h2>
<p class="text-xl text-gray-600">Jedes Tier verdient eine zweite Chance.</p>
</div>
<div class="grid md:grid-cols-3 gap-10">
<!-- Feature 1 -->
<div class="text-center p-6 bg-cream-bg rounded-xl shadow-lg border-t-4 border-secondary-sage transform transition duration-300 hover:shadow-xl hover:border-primary-gold animate-in" style="animation-delay: 0.5s;">
<svg class="w-16 h-16 mx-auto text-primary-gold mb-4" 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 7v10l8 4 8-4V7M4 7v10l8 4 8-4V7"></path></svg>
<h3 class="text-2xl font-bold mb-3 text-deep-moss">Fürsorge & Pflege</h3>
<p class="text-gray-600 leading-relaxed">Wir stellen sicher, dass jedes Tier in unserer Obhut liebevoll versorgt wird und die notwendige medizinische Betreuung erhält.</p>
</div>
<!-- Feature 2 -->
<div class="text-center p-6 bg-cream-bg rounded-xl shadow-lg border-t-4 border-secondary-sage transform transition duration-300 hover:shadow-xl hover:border-primary-gold animate-in" style="animation-delay: 0.6s;">
<svg class="w-16 h-16 mx-auto text-primary-gold mb-4" 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<h3 class="text-2xl font-bold mb-3 text-deep-moss">Matchmaking</h3>
<p class="text-gray-600 leading-relaxed">Wir finden das perfekte Match zwischen Tier und Familie. Sorgfältige Vermittlung ist unser Spezialgebiet.</p>
</div>
<!-- Feature 3 -->
<div class="text-center p-6 bg-cream-bg rounded-xl shadow-lg border-t-4 border-secondary-sage transform transition duration-300 hover:shadow-xl hover:border-primary-gold animate-in" style="animation-delay: 0.7s;">
<svg class="w-16 h-16 mx-auto text-primary-gold mb-4" 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="M17 20h5v-2a3 3 0 00-5-6H8a3 3 0 00-5 6v2m14 0h-5m-5 0h-5m5 0h5m0 0h-5"></path></svg>
<h3 class="text-2xl font-bold mb-3 text-deep-moss">Zweite Chance</h3>
<p class="text-gray-600 leading-relaxed">Wir geben Tieren, die sie verdienen, ein warmes, liebevolles Zuhause, fernab des Leidens.</p>
</div>
</div>
</div>
</section>
<!-- Adoption Listing Section -->
<section id="tierliste" class="py-16 md:py-24 bg-gray-50">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="text-center mb-12 animate-in" style="animation-delay: 0.1s;">
<h2 class="text-5xl font-bold text-deep-moss mb-3">Die Suche beginnt hier</h2>
<p class="text-xl text-gray-600">Entdecke unsere wunderbaren Bewohner.</p>
</div>
<!-- Filter/Search Bar -->
<div class="mb-10 flex flex-col sm:flex-row gap-4 justify-center animate-in" style="animation-delay: 0.3s;">
<select class="p-3 border-2 border-primary-gold rounded-lg shadow-md focus:ring-2 focus:ring-primary-gold focus:border-primary-gold w-full sm:w-auto transition duration-150">
<option>Alle Tierarten</option>
<option>Hunde</option>
<option>Katzen</option>
</select>
<input type="text" placeholder="Suche nach Name oder Rasse..." class="p-3 border-2 border-gray-300 rounded-lg shadow-md focus:ring-2 focus:ring-secondary-sage focus:border-secondary-sage w-full sm:w-full transition duration-150">
<button class="bg-secondary-sage text-white px-6 py-3 rounded-lg font-semibold shadow-md hover:bg-green-700 transition duration-150 focus:outline-none focus:ring-4 ring-secondary-sage">
Suche starten
</button>
</div>
<!-- Animal Grid -->
<div id="animal-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Animal Card 1: Bella (Dog) -->
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer animate-in" style="animation-delay: 0.5s;">
<img src="https://images.unsplash.com/photo-1574537185970-b89e4b6284e1?fit=crop&w=500&q=80" alt="Bella, Labrador-Mischling" class="w-full h-64 object-cover transition duration-500">
<div class="p-5">
<h4 class="text-3xl font-extrabold text-deep-moss mb-1">Bella</h4>
<p class="text-lg text-gray-500 mb-3">Labrador-Mischling</p>
<p class="text-sm text-gray-700 mb-3 border-l-4 border-primary-gold pl-3">Freundlich, verspielt und liebt lange Spaziergänge.</p>
<div class="flex justify-between items-center pt-2">
<span class="text-primary-gold text-xl font-bold">3 Jahre</span>
<button class="bg-primary-gold text-white px-6 py-2 rounded-full font-semibold shadow-md hover:bg-yellow-600 transition duration-150 focus:outline-none focus:ring-4 ring-primary-gold">
Mehr erfahren
</button>
</div>
</div>
</div>
<!-- Animal Card 2: Felix (Cat) -->
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer animate-in" style="animation-delay: 0.6s;">
<img src="https://images.unsplash.com/photo-1<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.75s</div>