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-fd3ce1c061f5ded7.html
+176
View File
@@ -0,0 +1,176 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Willow Creek Sanctuary - Find Your Best Friend</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Customizing Tailwind configuration for specific aesthetic */
.font-display {
font-family: 'Playfair Display', serif;
}
.font-body {
font-family: 'Inter', sans-serif;
}
/* Keyframe for a subtle heart pulse animation */
@keyframes pulse-heart {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7); }
70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 69, 0, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
}
.animate-pulse-custom {
animation: pulse-heart 3s infinite;
}
/* Utility for card hover effect */
.card-hover:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}
</style>
<!-- Importing Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-50 font-body text-gray-800 antialiased">
<!-- Navigation Bar -->
<header class="sticky top-0 z-50 bg-white shadow-md">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0">
<h1 class="text-3xl font-display text-indigo-700 tracking-tighter">
Willow Creek Sanctuary
</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#adopt" class="text-gray-600 hover:text-indigo-600 transition duration-150 px-3 py-2 border-b-2 border-transparent hover:border-indigo-600 font-medium">Adopt</a>
<a href="#about" class="text-gray-600 hover:text-indigo-600 transition duration-150 px-3 py-2 border-b-2 border-transparent hover:border-indigo-600 font-medium">Our Mission</a>
<a href="#events" class="text-gray-600 hover:text-indigo-600 transition duration-150 px-3 py-2 border-b-2 border-transparent hover:border-indigo-600 font-medium">Events</a>
<a href="#donate" class="text-gray-600 hover:text-indigo-600 transition duration-150 px-3 py-2 border-b-2 border-transparent hover:border-indigo-600 font-medium">Donate</a>
</nav>
<div class="md:hidden">
<!-- Mobile Menu Button (Hidden by default, JS will show it) -->
<button id="mobile-menu-button" type="button" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 p-2 rounded-md" aria-controls="mobile-menu" aria-expanded="false">
<svg id="menu-icon-open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
<svg id="menu-icon-close" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div class="md:hidden hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#adopt" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500">Adopt</a>
<a href="#about" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500">Our Mission</a>
<a href="#events" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500">Events</a>
<a href="#donate" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500">Donate</a>
</div>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="relative bg-cover bg-center h-[60vh] flex items-center justify-center"
style="background-image: url('https://images.unsplash.com/photo-1542394372-a7c52057f6b1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
<!-- Overlay for readability -->
<div class="absolute inset-0 bg-black/40"></div>
<div class="relative text-center px-4">
<h2 class="text-5xl sm:text-6xl lg:text-7xl font-display text-white mb-4 leading-tight drop-shadow-lg">
Give Them A Second Chance
</h2>
<p class="text-xl sm:text-2xl text-white mb-8 font-light tracking-wide drop-shadow-md">
Willow Creek Sanctuary: Where love finds its home.
</p>
<a href="#adopt" class="inline-block bg-orange-500 hover:bg-orange-600 text-white text-xl font-bold py-4 px-10 rounded-full transition duration-300 shadow-xl transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-orange-300 uppercase tracking-wider">
Meet Our Animals
</a>
</div>
</section>
<!-- Adoption CTA Section -->
<section id="adopt" class="bg-indigo-50 py-16 sm:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-4xl mx-auto">
<h3 class="text-base font-semibold text-orange-500 tracking-wide uppercase mb-2">Your Companion Awaits</h3>
<h2 class="text-4xl sm:text-5xl font-display text-indigo-800 mb-6">
Ready to Open Your Heart?
</h2>
<p class="text-lg text-gray-600 mb-10">
Every wagging tail and gentle purr deserves a safe haven. Explore our residents and start the journey to permanent happiness today.
</p>
<a href="#" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white text-xl font-semibold py-4 px-10 rounded-lg transition duration-300 shadow-lg transform hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-indigo-300">
View Available Pets
</a>
</div>
</div>
</section>
<!-- Pet Showcase Section -->
<section class="py-20 sm:py-28 bg-white" id="pets">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h3 class="text-sm font-semibold text-indigo-600 uppercase tracking-widest mb-2">Featured Companions</h3>
<h2 class="text-4xl sm:text-5xl font-display text-gray-900">
Love Stories Start Here
</h2>
</div>
<!-- Pet Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Pet Card 1: Dog -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100 card-hover transition duration-300 cursor-pointer">
<div class="relative overflow-hidden">
<img src="https://images.unsplash.com/photo-1517410714048-0c08e632692e?w=600&auto=format&fit=crop"
alt="Barnaby, friendly Labrador mix"
class="w-full h-64 object-cover transition duration-500 hover:scale-105">
<span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">DOG</span>
</div>
<div class="p-6">
<h4 class="text-2xl font-display text-gray-900 mb-1">Barnaby</h4>
<p class="text-indigo-500 text-sm uppercase tracking-wider mb-3">Labrador Mix</p>
<p class="text-gray-600 mb-4 text-sm">This gentle soul loves long walks and snuggles on the couch. Perfect for a family who loves adventure and quiet evenings.</p>
<button class="w-full bg-orange-400 hover:bg-orange-500 text-white font-semibold py-3 rounded-lg transition duration-150 focus:outline-none focus:ring-4 focus:ring-orange-300">
See Barnaby's Profile
</button>
</div>
</div>
<!-- Pet Card 2: Cat -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100 card-hover transition duration-300 cursor-pointer">
<div class="relative overflow-hidden">
<img src="https://images.unsplash.com/photo-1531403086224-be5684b1e099?w=600&auto=format&fit=crop"
alt="Luna, elegant Siamese cat"
class="w-full h-64 object-cover transition duration-500 hover:scale-105">
<span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">CAT</span>
</div>
<div class="p-6">
<h4 class="text-2xl font-display text-gray-900 mb-1">Luna</h4>
<p class="text-indigo-500 text-sm uppercase tracking-wider mb-3">Siamese</p>
<p class="text-gray-600 mb-4 text-sm">Luna seeks a quiet, loving home where she can be the queen of the lap. She is surprisingly playful and very affectionate.</p>
<button class="w-full bg-orange-400 hover:bg-orange-500 text-white font-semibold py-3 rounded-lg transition duration-150 focus:outline-none focus:ring-4 focus:ring-orange-300">
See Luna's Profile
</button>
</div>
</div>
<!-- Pet Card 3: Small Animal/Other -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100 card-hover transition duration-300 cursor-pointer">
<div class="relative overflow-hidden">
<img src="https://images.unsplash.com/photo-1574254630214-8e85d10832d5?w=600&auto=format&fit=crop"
alt="Pip, small terrier mix"
class="w-full h-64 object-cover transition duration-500 hover:scale-105">
<span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">DOG</span>
</div>
<div class="p-6">
<h4 class="text-2xl font-display text-gray-900 mb-1">Pip</h4>
<p class="text-indigo-500 text-sm uppercase tracking-wider mb-3">Terrier Mix</p>
<p class="text-gray-600 mb-4 text-sm">Pip is an energetic little adventurer who needs someone to share their sunny disposition with. Great with active people!</p>
<button class="w-full bg-orange-400 hover:bg-orange-500 text-white font-semibold py-3 rounded-lg transition duration-150 focus:outline-none focus:ring-4 focus:ring-orange-300">
See Pip's Profile
</button>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-flex items-center bg-gray-<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.26s</div>