Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PawConnect - Dog Breeding Social Network</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#8B5A3C', | |
| secondary: '#D4A574', | |
| accent: '#F5E6D3', | |
| 'cream': '#FFF9F0', | |
| 'warm-brown': '#A67B5B' | |
| }, | |
| fontFamily: { | |
| 'display': ['Georgia', 'serif'], | |
| 'body': ['Inter', 'system-ui', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #8B5A3C 0%, #A67B5B 100%); | |
| } | |
| .bone-pattern { | |
| background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23F5E6D3' fill-opacity='0.1'%3E%3Cpath d='M20 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zm0 4c2.209 0 4 1.791 4 4s-1.791 4-4 4-4-1.791-4-4 1.791-4 4-4z'/%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| .paw-print { | |
| clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); | |
| } | |
| .floating { animation: float 3s ease-in-out infinite; } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .breed-card { | |
| transition: all 0.3s ease; | |
| } | |
| .breed-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(139, 90, 60, 0.2); | |
| } | |
| .notification { | |
| animation: slideIn 0.3s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateX(100%); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-cream font-body"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg 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-16"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-white text-2xl font-display"> | |
| <i class="fas fa-paw mr-2"></i>PawConnect | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="text-white hover:text-accent transition-colors">Home</a> | |
| <a href="#" class="text-white hover:text-accent transition-colors">Breeders</a> | |
| <a href="#" class="text-white hover:text-accent transition-colors">Litters</a> | |
| <a href="#" class="text-white hover:text-accent transition-colors">Shows</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-white hover:text-accent transition-colors"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </button> | |
| <button class="bg-secondary text-primary px-4 py-2 rounded-full font-semibold hover:bg-accent transition-colors"> | |
| <i class="fas fa-user-plus mr-2"></i>Join | |
| </button> | |
| <button id="mobile-menu-btn" class="md:hidden text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-primary"> | |
| <div class="px-2 pt-2 pb-3 space-y-1"> | |
| <a href="#" class="block px-3 py-2 text-white hover:bg-secondary rounded-md">Home</a> | |
| <a href="#" class="block px-3 py-2 text-white hover:bg-secondary rounded-md">Breeders</a> | |
| <a href="#" class="block px-3 py-2 text-white hover:bg-secondary rounded-md">Litters</a> | |
| <a href="#" class="block px-3 py-2 text-white hover:bg-secondary rounded-md">Shows</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gradient-to-br from-primary to-warm-brown text-white overflow-hidden"> | |
| <div class="bone-pattern absolute inset-0 opacity-10"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h1 class="text-5xl lg:text-6xl font-display mb-6 leading-tight"> | |
| Connect with <span class="text-secondary">Passionate</span> Dog Breeders | |
| </h1> | |
| <p class="text-xl text-accent mb-8 leading-relaxed"> | |
| Join the world's largest community dedicated to responsible dog breeding, | |
| share knowledge, find perfect matches, and raise healthy, happy puppies. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button class="bg-secondary text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-accent transition-all transform hover:scale-105"> | |
| <i class="fas fa-heart mr-2"></i>Join Community | |
| </button> | |
| <button class="border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-primary transition-all"> | |
| <i class="fas fa-play mr-2"></i>Watch Demo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="bg-white/10 backdrop-blur-sm rounded-3xl p-8 border border-white/20"> | |
| <img src="https://images.unsplash.com/photo-1552053831-71594a27632d?w=500&h=300&fit=crop" | |
| alt="Happy dogs" class="rounded-2xl w-full h-64 object-cover"> | |
| <div class="mt-4 grid grid-cols-3 gap-4"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-secondary">50K+</div> | |
| <div class="text-sm text-accent">Breeders</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-secondary">200K+</div> | |
| <div class="text-sm text-accent">Dogs</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-secondary">1M+</div> | |
| <div class="text-sm text-accent">Puppies</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section 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-16"> | |
| <h2 class="text-4xl font-display text-primary mb-4">Why PawConnect?</h2> | |
| <p class="text-xl text-gray-600">Everything you need for responsible dog breeding</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="text-center p-8 rounded-2xl bg-cream hover:bg-accent transition-all"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-dna text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-display text-primary mb-3">Genetic Matching</h3> | |
| <p class="text-gray-600">AI-powered genetic compatibility analysis to ensure healthy litters and prevent hereditary issues.</p> | |
| </div> | |
| <div class="text-center p-8 rounded-2xl bg-cream hover:bg-accent transition-all"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-graduation-cap text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-display text-primary mb-3">Expert Academy</h3> | |
| <p class="text-gray-600">Learn from certified veterinarians and master breeders with our comprehensive courses.</p> | |
| </div> | |
| <div class="text-center p-8 rounded-2xl bg-cream hover:bg-accent transition-all"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-handshake text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-display text-primary mb-3">Trusted Network</h3> | |
| <p class="text-gray-600">Verify breeder credentials, health certificates, and reputation scores before connecting.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Live Feed Section --> | |
| <section class="py-20 bg-cream"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-display text-primary mb-4">Live Feed</h2> | |
| <p class="text-xl text-gray-600">See what's happening in the community</p> | |
| </div> | |
| <div class="grid lg:grid-cols-3 gap-8"> | |
| <!-- Main Feed --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-2xl shadow-lg p-6 mb-6"> | |
| <div class="flex items-center space-x-4 mb-4"> | |
| <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=50&h=50&fit=crop&crop=face" | |
| class="w-12 h-12 rounded-full" alt="User"> | |
| <div> | |
| <h4 class="font-semibold text-gray-900">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-500">Golden Retriever Breeder • 2 hours ago</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| Excited to announce our newest litter of 8 healthy Golden Retriever puppies! | |
| Both parents are OFA certified and have excellent temperaments. | |
| Taking deposits now for forever homes. 🐕💕 | |
| </p> | |
| <div class="grid grid-cols-2 gap-2 mb-4"> | |
| <img src="https://images.unsplash.com/photo-1601758228041-f3b2795255f1?w=200&h=150&fit=crop" | |
| class="rounded-lg w-full h-48 object-cover" alt="Puppies"> | |
| <img src="https://images.unsplash.com/photo-1552053831-71594a27632d?w=200&h=150&fit=crop" | |
| class="rounded-lg w-full h-48 object-cover" alt="Puppies"> | |
| </div> | |
| <div class="flex items-center justify-between text-gray-500"> | |
| <div class="flex space-x-6"> | |
| <button class="hover:text-primary transition-colors"> | |
| <i class="far fa-heart mr-1"></i> 142 | |
| </button> | |
| <button class="hover:text-primary transition-colors"> | |
| <i class="far fa-comment mr-1"></i> 23 | |
| </button> | |
| <button class="hover:text-primary transition-colors"> | |
| <i class="far fa-share mr-1"></i> Share | |
| </button> | |
| </div> | |
| <button class="text-primary font-semibold hover:text-primary/80"> | |
| Contact Breeder | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-lg p-6"> | |
| <div class="flex items-center space-x-4 mb-4"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=50&h=50&fit=crop&crop=face" | |
| class="w-12 h-12 rounded-full" alt="User"> | |
| <div> | |
| <h4 class="font-semibold text-gray-900">Mike Rodriguez</h4> | |
| <p class="text-sm text-gray-500">German Shepherd Expert • 5 hours ago</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| Just completed our advanced training program with these amazing German Shepherd pups! | |
| They're showing incredible intelligence and drive. | |
| Perfect for working homes or active families. | |
| </p> | |
| <video class="w-full rounded-lg mb-4" controls> | |
| <source src="dog-training.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <div class="flex items-center justify-between text-gray-500"> | |
| <div class="flex space-x-6"> | |
| <button class="hover:text-primary transition-colors"> | |
| <i class="far fa-heart mr-1"></i> 89 | |
| </button> | |
| <button class="hover:text-primary transition-colors"> | |
| <i class="far fa-comment mr-1"></i> 15 | |
| </button> | |
| <button class="hover:text-primary transition-colors"> | |
| <i class="far fa-share mr-1"></i> Share | |
| </button> | |
| </div> | |
| <button class="text-primary font-semibold hover:text-primary/80"> | |
| View Training Program | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="space-y-6"> | |
| <!-- Breeder Spotlight --> | |
| <div class="bg-white rounded-2xl shadow-lg p-6"> | |
| <h3 class="text-xl font-display text-primary mb-4">Breeder Spotlight</h3> | |
| <div class="text-center"> | |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&crop=face" | |
| class="w-20 h-20 rounded-full mx-auto mb-3" alt="Breeder"> | |
| <h4 class="font-semibold text-gray-900">Emma Watson</h4> | |
| <p class="text-sm text-gray-500 mb-3">Labrador Breeder</p> | |
| <div class="flex justify-center space-x-1 mb-3"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-4">5.0 • 127 Reviews</p> | |
| <button class="w-full bg-primary text-white py-2 rounded-full hover:bg-primary/90 transition-colors"> | |
| View Profile | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Available Litters --> | |
| <div class="bg-white rounded-2xl shadow-lg p-6"> | |
| <h3 class="text-xl font-display text-primary mb-4">New Litters</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://images.unsplash.com/photo-1544568100-847a948585b9?w=50&h=50&fit=crop" | |
| class="w-12 h-12 rounded-full" alt="Puppy"> | |
| <div> | |
| <h5 class="font-semibold text-sm text-gray-900">French Bulldogs</h5> | |
| <p class="text-xs text-gray-500">3 males, 2 females</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=50&h=50&fit=crop" | |
| class="w-12 h-12 rounded-full" alt="Puppy"> | |
| <div> | |
| <h5 class="font-semibold text-sm text-gray-900">Siberian Huskies</h5> | |
| <p class="text-xs text-gray-500">5 males, 3 females</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://images.unsplash.com/photo-1548199973-d397ddba84d5?w=50&h=50&fit=crop" | |
| class="w-12 h-12 rounded-full" alt="Puppy"> | |
| <div> | |
| <h5 class="font-semibold text-sm text-gray-900">Cavalier King Charles</h5> | |
| <p class="text-xs text-gray-500">2 males, 4 females</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 border border-primary text-primary py-2 rounded-full hover:bg-primary hover:text-white transition-colors"> | |
| View All Litters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Breeds Section --> | |
| <section 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"> | |
| <h2 class="text-4xl font-display text-primary mb-4">Popular Breeds</h2> | |
| <p class="text-xl text-gray-600">Find your perfect match</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="breed-card bg-cream rounded-2xl overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1552053831-71594a27632d?w=300&h=200&fit=crop" | |
| class="w-full h-48 object-cover" alt="Golden Retriever"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-display text-primary mb-1">Golden Retriever</h3> | |
| <p class="text-sm text-gray-600 mb-2">Friendly & Devoted</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">127 Breeders</span> | |
| <button class="text-primary hover:text-primary/80"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="breed-card bg-cream rounded-2xl overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?w=300&h=200&fit=crop" | |
| class="w-full h-48 object-cover" alt="French Bulldog"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-display text-primary mb-1">French Bulldog</h3> | |
| <p class="text-sm text-gray-600 mb-2">Playful & Smart</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">89 Breeders</span> | |
| <button class="text-primary hover:text-primary/80"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="breed-card bg-cream rounded-2xl overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1518717758536-85ae29035b6d?w=300&h=200&fit=crop" | |
| class="w-full h-48 object-cover" alt="German Shepherd"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-display text-primary mb-1">German Shepherd</h3> | |
| <p class="text-sm text-gray-600 mb-2">Confident & Courageous</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">156 Breeders</span> | |
| <button class="text-primary hover:text-primary/80"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="breed-card bg-cream rounded-2xl overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1518717758536-85ae29035b6d?w=300&h=200&fit=crop" | |
| class="w-full h-48 object-cover" alt="Labrador"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-display text-primary mb-1">Labrador</h3> | |
| <p class="text-sm text-gray-600 mb-2">Active & Outgoing</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">201 Breeders</span> | |
| <button class="text-primary hover:text-primary/80"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-4xl font-display mb-6">Ready to Join the Community?</h2> | |
| <p class="text-xl text-accent mb-8 max-w-2xl mx-auto"> | |
| Connect with responsible breeders, find your perfect companion, | |
| and be part of something amazing. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button class="bg-secondary text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-accent transition-all transform hover:scale-105"> | |
| <i class="fas fa-user-plus mr-2"></i>Join Now Free | |
| </button> | |
| <button class="border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-primary transition-all"> | |
| <i class="fas fa-calendar mr-2"></i>Schedule Demo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-display mb-4"> | |
| <i class="fas fa-paw mr-2 text-primary"></i>PawConnect | |
| </h3> | |
| <p class="text-gray-400 mb-4"> | |
| The world's largest community for responsible dog breeding and ethical practices. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-youtube text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">About Us</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">How It Works</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Success Stories</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">Breeding Guide</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Health Testing</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Contract Templates</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Legal Resources</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Support</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">Help Center</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Contact Us</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Safety Guidelines</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Report Issues</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2024 PawConnect. All rights reserved. Built with ❤️ for dog lovers.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.getElementById('mobile-menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Notification system (simulated) | |
| function showNotification(message, type = 'info') { | |
| const notification = document.createElement('div'); | |
| notification.className = `fixed top-20 right-4 bg-white shadow-lg rounded-lg p-4 notification z-50 max-w-sm`; | |
| notification.innerHTML = ` | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-${type === 'success' ? 'check-circle' : 'info-circle'} text-${type === 'success' ? 'green' : 'blue'}-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">${message}</p> | |
| </div> | |
| <button class="ml-4 flex-shrink-0" onclick="this.parentElement.parentElement.remove()"> | |
| <i class="fas fa-times text-gray-400 hover:text-gray-500"></i> | |
| </button> | |
| </div> | |
| `; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 5000); | |
| } | |
| // Like functionality | |
| document.querySelectorAll('.fa-heart').forEach(heart => { | |
| heart.parentElement.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const icon = this.querySelector('i'); | |
| const count = this.textContent.trim().split(' ')[1]; | |
| if (icon.classList.contains('far')) { | |
| icon.classList.remove('far'); | |
| icon.classList.add('fas', 'text-red-500'); | |
| this.innerHTML = `<i class="fas fa-heart mr-1 text-red-500"></i> ${parseInt(count) + 1}`; | |
| } else { | |
| icon.classList.remove('fas', 'text-red-500'); | |
| icon.classList.add('far'); | |
| this.innerHTML = `<i class="far fa-heart mr-1"></i> ${parseInt(count) - 1}`; | |
| } | |
| }); | |
| }); | |
| // Smooth scroll for internal links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Add floating animation to paw prints | |
| document.querySelectorAll('.floating').forEach(element => { | |
| element.style.animationDelay = Math.random() * 2 + 's'; | |
| }); | |
| // Simulate new notifications | |
| setTimeout(() => { | |
| showNotification('Welcome to PawConnect! Complete your profile to get started.', 'success'); | |
| }, 2000); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cob05/deepsite-pawconnect" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |