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-4618b3504b86dd3c.html
+200
View File
@@ -0,0 +1,200 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zum Herzen des Tierheims | Adoptionsportal</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom configuration for Tailwind */
tailwind.config = {
theme: {
extend: {
colors: {
'primary-green': '#38A169', /* Emerald Green */
'secondary-gold': '#D97706', /* Amber */
'background-light': '#F7FAF9',
'text-dark': '#1F2937',
},
fontFamily: {
serif: ['Playfair Display', 'serif'],
sans: ['Inter', 'sans-serif'],
}
}
}
}
/* Custom styles for visual impact */
.hero-gradient {
background: linear-gradient(135deg, #f0d9c8 0%, #e0b8a5 100%);
}
.card-hover:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pulse-shadow {
box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.7);
animation: pulse-shadow 3s infinite;
}
@keyframes pulse-shadow {
0% {
box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(56, 161, 105, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(56, 161, 105, 0);
}
}
/* Typography refinement */
.display-heading {
font-family: 'Playfair Display', serif;
letter-spacing: -0.5px;
}
</style>
</head>
<body class="bg-background-light text-text-dark font-sans antialiased">
<!-- Navigation Bar -->
<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">
<div class="flex justify-between items-center h-20">
<!-- Logo/Brand -->
<div class="flex-shrink-0">
<h1 class="text-3xl font-extrabold text-primary-green display-heading">
Tierheim <span class="text-secondary-gold">Herz</span>
</h1>
</div>
<!-- Navigation Links -->
<nav class="hidden md:flex space-x-8">
<a href="#adoptions" class="text-lg font-medium hover:text-primary-green transition duration-150 px-2 py-1 border-b-2 border-transparent hover:border-primary-green">
Adoptions
</a>
<a href="#sucht" class="text-lg font-medium hover:text-primary-green transition duration-150 px-2 py-1 border-b-2 border-transparent hover:border-primary-green">
Suchen & Filter
</a>
<a href="#hilfe" class="text-lg font-medium hover:text-primary-green transition duration-150 px-2 py-1 border-b-2 border-transparent hover:border-primary-green">
Hilfe & Spenden
</a>
<a href="#kontakt" class="text-lg font-medium bg-primary-green text-white px-4 py-2 rounded-lg shadow-md hover:bg-green-600 transition duration-300 focus:outline-none focus:ring-4 focus:ring-primary-green/50">
Kontaktieren
</a>
</nav>
<!-- Mobile Menu Button (Hidden on Desktop) -->
<div class="md:hidden">
<button id="mobile-menu-button" class="text-text-dark focus:outline-none p-2 rounded-md hover:bg-gray-100 transition duration-150">
<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 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="md:hidden hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#adoptions" class="block px-3 py-2 rounded-md text-base font-medium text-text-dark hover:bg-primary-green/10">Adoptions</a>
<a href="#sucht" class="block px-3 py-2 rounded-md text-base font-medium text-text-dark hover:bg-primary-green/10">Suchen & Filter</a>
<a href="#hilfe" class="block px-3 py-2 rounded-md text-base font-medium text-text-dark hover:bg-primary-green/10">Hilfe & Spenden</a>
<a href="#kontakt" class="block w-full text-center mt-2 px-3 py-2 rounded-lg text-base font-medium bg-secondary-gold text-white hover:bg-amber-700">Kontaktieren</a>
</div>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="hero-gradient pt-16 pb-24 text-center shadow-xl">
<div class="max-w-4xl mx-auto px-4">
<h2 class="text-5xl sm:text-6xl font-extrabold text-text-dark mb-4 display-heading">
Ein neues Zuhause wartet auf Sie.
</h2>
<p class="text-xl sm:text-2xl mb-10 text-gray-700 font-medium">
Wir bieten liebevolle, gesunde Tiere, die nur darauf warten, Teil Ihrer Familie zu werden. Finden Sie Ihren perfekten Begleiter.
</p>
<div class="flex justify-center space-x-4">
<a href="#sucht" class="bg-secondary-gold text-white font-bold py-4 px-8 text-lg rounded-full shadow-2xl hover:bg-amber-700 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300">
Tier suchen
</a>
<a href="#spenden" class="bg-white border-2 border-text-dark text-text-dark font-bold py-4 px-8 text-lg rounded-full shadow-lg hover:bg-gray-50 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-text-dark/30">
Spenden helfen
</a>
</div>
</div>
</section>
<!-- Featured Animals Section -->
<section id="sucht" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h3 class="text-4xl font-bold text-text-dark mb-3 display-heading">
Unsere aktuellen Freunde
</h3>
<p class="text-xl text-gray-600">
Entdecken Sie Tiere, die Liebe und ein neues Leben suchen.
</p>
</div>
<!-- Animal Grid -->
<div id="animal-list" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Card 1: Hund -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover border-t-4 border-primary-green cursor-pointer" tabindex="0" role="button">
<div class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden">
<!-- Placeholder Image -->
<img src="https://images.unsplash.com/photo-1542837046-3e1e19c85c6d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTg4MnwwfDF8c2VhcmNofDEyfHxob3VuZHxlbnwwfHx8fDE1MTc4MzA1NDd8MA&ixlib=rb-4.0.3&q=80&w=400"
class="w-full h-full object-cover object-center transform transition duration-500 hover:scale-110" alt="Hund Bello, Labrador-Mix">
<span class="absolute top-3 right-3 bg-red-600 text-white text-xs font-bold p-1 rounded-full shadow-md">Adoptionsgebeten</span>
</div>
<div class="p-5">
<h4 class="text-2xl font-serif font-bold mb-1">Bello</h4>
<p class="text-sm text-gray-500 mb-3">Hund | Labrador-Mix</p>
<p class="text-gray-600 mb-3 text-sm">Bello ist ein verspielter Freund, der nach einem aktiven Zuhause sucht. Er liebt lange Spaziergänge!</p>
<button class="w-full bg-primary-green text-white py-3 rounded-lg font-semibold hover:bg-green-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-primary-green focus:ring-offset-2">
Details anzeigen
</button>
</div>
</div>
<!-- Card 2: Katze -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover border-t-4 border-secondary-gold cursor-pointer" tabindex="0" role="button">
<div class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden">
<!-- Placeholder Image -->
<img src="https://images.unsplash.com/photo-1543556521-509e5a4d4b82?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTg4MnwwfDF8c2VhcmNofDEyfHxrYXR6ZSUyMG1pZGV8ZW58MHx8fHwxNTE3ODMwNTQ3fDA&ixlib=rb-4.0.3&q=80&w=400"
class="w-full h-full object-cover object-center transform transition duration-500 hover:scale-110" alt="Katze Luna, Maine Coon">
</div>
<div class="p-5">
<h4 class="text-2xl font-serif font-bold mb-1">Luna</h4>
<p class="text-sm text-gray-500 mb-3">Katze | Maine Coon</p>
<p class="text-gray-600 mb-3 text-sm">Luna ist eine sanfte und elegante Dame. Sie sucht eine ruhige Umgebung, in der sie sich geborgen fühlen kann.</p>
<button class="w-full bg-secondary-gold text-white py-3 rounded-lg font-semibold hover:bg-amber-800 transition duration-200 focus:outline-none focus:ring-2 focus:ring-secondary-gold focus:ring-offset-2">
Details anzeigen
</button>
</div>
</div>
<!-- Card 3: Hund -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover border-t-4 border-primary-green cursor-pointer" tabindex="0" role="button">
<div class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden">
<!-- Placeholder Image -->
<img src="https://images.unsplash.com/photo-1582738614608-062167d4543e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTg4MnwwfDF8c2VhcmNofDEyfHxob3VuZHxlbnwwfHx8fDE1MTc4MzA1NTZ8MA&ixlib=rb-4.0.3&q=80&w=400"
class="w-full h-full object-cover object-center transform transition duration-500 hover:scale-110" alt="Hund Max, Mischling">
</div>
<div class="p-5">
<h4 class="text-2xl font-serif font-bold mb-1">Max</h4>
<p class="text-sm text-gray-500 mb-3">Hund | Mischling</p>
<p class="text-gray-600 mb-3 text-sm">Max ist ein aufgeregter und geselliger Hund. Er ist perfekt für Familien, die viel draußen aktiv sind.</p>
<button class="w-full bg-primary-green text-white py-3 rounded-lg font-semibold hover:bg-green-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-primary-green focus:ring-offset-2">
Details anzeigen
</button>
</div>
</div>
<!-- Card 4: Katze -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover border-t-4 border-secondary-gold cursor-pointer" tabindex="0" role="button">
<div class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden">
<!-- Placeholder Image -->
<img src="https://images.unsplash.com/photo-1585623298806-03a929888c0e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTg4MnwwfDF8c2VhcmNofDEyfHxrYXRzJTIwZGV8ZW58MHx8fHwxNTE3OD<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 29.92s</div>