| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Airbnb Clone | Vacation Rentals, Cabins, Beach Houses & More</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"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Cereal:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Cereal', -apple-system, BlinkMacSystemFont, sans-serif; |
| color: #222222; |
| } |
| |
| .hero-search { |
| background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1566073771259-6a8506099945') center/cover; |
| } |
| |
| .category-item:hover { |
| border-bottom: 2px solid #717171; |
| } |
| |
| .category-item.active { |
| border-bottom: 2px solid black; |
| } |
| |
| .listing-card:hover { |
| transform: scale(1.02); |
| } |
| |
| .map-button { |
| box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.15); |
| } |
| |
| .search-bar { |
| box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05); |
| } |
| |
| .filter-button:hover { |
| border: 1px solid #222222; |
| } |
| |
| .heart-icon:hover { |
| transform: scale(1.2); |
| } |
| |
| .footer-link:hover { |
| text-decoration: underline; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| .modal { |
| animation: fadeIn 0.3s ease-in-out; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="sticky top-0 z-50 bg-white border-b border-gray-200"> |
| <div class="container mx-auto px-4 py-4"> |
| <div class="flex items-center justify-between"> |
| |
| <div class="flex items-center"> |
| <i class="fab fa-airbnb text-red-500 text-3xl mr-2"></i> |
| <span class="text-red-500 font-bold text-xl hidden md:block">airbnb</span> |
| </div> |
| |
| |
| <div class="hidden md:flex flex-1 mx-8"> |
| <div class="search-bar flex items-center border border-gray-300 rounded-full py-2 px-4 w-full max-w-md"> |
| <button class="font-medium text-sm px-3">Anywhere</button> |
| <span class="border-l border-gray-300 h-5"></span> |
| <button class="font-medium text-sm px-3">Any week</button> |
| <span class="border-l border-gray-300 h-5"></span> |
| <button class="text-gray-500 text-sm px-3">Add guests</button> |
| <button class="bg-red-500 p-2 rounded-full ml-auto"> |
| <i class="fas fa-search text-white text-xs"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-center space-x-4"> |
| <button class="hidden md:block text-sm font-medium">Become a Host</button> |
| <div class="flex items-center space-x-2 border border-gray-300 rounded-full py-1 px-3 hover:shadow-md transition cursor-pointer"> |
| <i class="fas fa-bars text-gray-600"></i> |
| <i class="fas fa-user-circle text-gray-600 text-xl"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="md:hidden mt-4"> |
| <div class="search-bar flex items-center border border-gray-300 rounded-full py-2 px-4 w-full"> |
| <i class="fas fa-search text-gray-500 mr-2"></i> |
| <div class="flex flex-col"> |
| <span class="font-medium text-sm">Anywhere</span> |
| <span class="text-xs text-gray-500">Any week · Add guests</span> |
| </div> |
| <button class="ml-auto border border-gray-300 rounded-full p-1"> |
| <i class="fas fa-sliders-h text-gray-600 text-xs"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="container mx-auto px-4 py-4 border-b border-gray-200 overflow-x-auto"> |
| <div class="flex space-x-8 min-w-max"> |
| <div class="category-item active flex flex-col items-center pb-2 cursor-pointer"> |
| <i class="fas fa-igloo text-gray-500 mb-1"></i> |
| <span class="text-xs">Rooms</span> |
| </div> |
| <div class="category-item flex flex-col items-center pb-2 cursor-pointer"> |
| <i class="fas fa-umbrella-beach text-gray-500 mb-1"></i> |
| <span class="text-xs">Beach</span> |
| </div> |
| <div class="category-item flex flex-col items-center pb-2 cursor-pointer"> |
| <i class="fas fa-home text-gray-500 mb-1"></i> |
| <span class="text-xs">Tiny homes</span> |
| </div> |
| <div class="category-item flex flex-col items-center pb-2 cursor-pointer"> |
| <i class="fas fa-tree text-gray-500 mb-1"></i> |
| <span class="text-xs">Countryside</span> |
| </div> |
| <div class="category-item flex flex-col items-center pb-2 cursor-pointer"> |
| <i class="fas fa-building text-gray-500 mb-1"></i> |
| <span class="text-xs">Mansions</span> |
| </div> |
| <div class="category-item flex flex-col items-center pb-2 cursor-pointer"> |
| <i class="fas fa-water text-gray-500 mb-1"></i> |
| <span class="text-xs">Lakefront</span> |
| </div> |
| <div class="category-item flex flex-col items-center pb-2 cursor-pointer"> |
| <i class="fas fa-snowflake text-gray-500 mb-1"></i> |
| <span class="text-xs">Arctic</span> |
| </div> |
| <div class="category-item flex flex-col items-center pb-2 cursor-pointer"> |
| <i class="fas fa-campground text-gray-500 mb-1"></i> |
| <span class="text-xs">Camping</span> |
| </div> |
| <div class="category-item flex flex-col items-center pb-2 cursor-pointer"> |
| <i class="fas fa-swimming-pool text-gray-500 mb-1"></i> |
| <span class="text-xs">Amazing pools</span> |
| </div> |
| <div class="category-item flex flex-col items-center pb-2 cursor-pointer"> |
| <i class="fas fa-chess-rook text-gray-500 mb-1"></i> |
| <span class="text-xs">Castles</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="container mx-auto px-4 py-4"> |
| <div class="flex items-center space-x-4 overflow-x-auto pb-2"> |
| <button class="filter-button flex items-center border border-gray-300 rounded-full px-4 py-2 text-sm whitespace-nowrap"> |
| <i class="fas fa-sliders-h text-gray-600 mr-2"></i> |
| Filters |
| </button> |
| <button class="filter-button border border-gray-300 rounded-full px-4 py-2 text-sm whitespace-nowrap"> |
| Price |
| </button> |
| <button class="filter-button border border-gray-300 rounded-full px-4 py-2 text-sm whitespace-nowrap"> |
| Type of place |
| </button> |
| <button class="filter-button border border-gray-300 rounded-full px-4 py-2 text-sm whitespace-nowrap"> |
| Free cancellation |
| </button> |
| <button class="filter-button border border-gray-300 rounded-full px-4 py-2 text-sm whitespace-nowrap"> |
| Instant Book |
| </button> |
| <button class="filter-button border border-gray-300 rounded-full px-4 py-2 text-sm whitespace-nowrap"> |
| Wifi |
| </button> |
| <button class="filter-button border border-gray-300 rounded-full px-4 py-2 text-sm whitespace-nowrap"> |
| Washer |
| </button> |
| </div> |
| </div> |
|
|
| |
| <main class="container mx-auto px-4 py-6"> |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
| |
| <div class="listing-card rounded-xl overflow-hidden transition duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6" alt="Modern house" class="w-full h-64 object-cover rounded-xl"> |
| <button class="heart-icon absolute top-3 right-3 text-white text-2xl transition"> |
| <i class="far fa-heart"></i> |
| </button> |
| </div> |
| <div class="mt-3"> |
| <div class="flex justify-between"> |
| <h3 class="font-semibold">Modern house in downtown</h3> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-xs"></i> |
| <span class="ml-1 text-sm">4.92</span> |
| </div> |
| </div> |
| <p class="text-gray-500 text-sm">1,234 miles away</p> |
| <p class="text-gray-500 text-sm">Nov 12-17</p> |
| <p class="mt-1 text-sm"><span class="font-semibold">$120</span> night</p> |
| </div> |
| </div> |
| |
| |
| <div class="listing-card rounded-xl overflow-hidden transition duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914" alt="Cabin" class="w-full h-64 object-cover rounded-xl"> |
| <button class="heart-icon absolute top-3 right-3 text-white text-2xl transition"> |
| <i class="far fa-heart"></i> |
| </button> |
| </div> |
| <div class="mt-3"> |
| <div class="flex justify-between"> |
| <h3 class="font-semibold">Cozy mountain cabin</h3> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-xs"></i> |
| <span class="ml-1 text-sm">4.85</span> |
| </div> |
| </div> |
| <p class="text-gray-500 text-sm">567 miles away</p> |
| <p class="text-gray-500 text-sm">Dec 5-10</p> |
| <p class="mt-1 text-sm"><span class="font-semibold">$95</span> night</p> |
| </div> |
| </div> |
| |
| |
| <div class="listing-card rounded-xl overflow-hidden transition duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1522708323590-d24dbb6b0267" alt="Apartment" class="w-full h-64 object-cover rounded-xl"> |
| <button class="heart-icon absolute top-3 right-3 text-white text-2xl transition"> |
| <i class="far fa-heart"></i> |
| </button> |
| </div> |
| <div class="mt-3"> |
| <div class="flex justify-between"> |
| <h3 class="font-semibold">Luxury apartment with view</h3> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-xs"></i> |
| <span class="ml-1 text-sm">4.98</span> |
| </div> |
| </div> |
| <p class="text-gray-500 text-sm">890 miles away</p> |
| <p class="text-gray-500 text-sm">Jan 15-20</p> |
| <p class="mt-1 text-sm"><span class="font-semibold">$210</span> night</p> |
| </div> |
| </div> |
| |
| |
| <div class="listing-card rounded-xl overflow-hidden transition duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1493809842364-78817add7ffb" alt="Beach house" class="w-full h-64 object-cover rounded-xl"> |
| <button class="heart-icon absolute top-3 right-3 text-white text-2xl transition"> |
| <i class="far fa-heart"></i> |
| </button> |
| </div> |
| <div class="mt-3"> |
| <div class="flex justify-between"> |
| <h3 class="font-semibold">Beachfront villa</h3> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-xs"></i> |
| <span class="ml-1 text-sm">4.79</span> |
| </div> |
| </div> |
| <p class="text-gray-500 text-sm">1,500 miles away</p> |
| <p class="text-gray-500 text-sm">Feb 3-8</p> |
| <p class="mt-1 text-sm"><span class="font-semibold">$175</span> night</p> |
| </div> |
| </div> |
| |
| |
| <div class="listing-card rounded-xl overflow-hidden transition duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750" alt="Modern home" class="w-full h-64 object-cover rounded-xl"> |
| <button class="heart-icon absolute top-3 right-3 text-white text-2xl transition"> |
| <i class="far fa-heart"></i> |
| </button> |
| </div> |
| <div class="mt-3"> |
| <div class="flex justify-between"> |
| <h3 class="font-semibold">Minimalist designer home</h3> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-xs"></i> |
| <span class="ml-1 text-sm">4.91</span> |
| </div> |
| </div> |
| <p class="text-gray-500 text-sm">2,100 miles away</p> |
| <p class="text-gray-500 text-sm">Mar 10-15</p> |
| <p class="mt-1 text-sm"><span class="font-semibold">$195</span> night</p> |
| </div> |
| </div> |
| |
| |
| <div class="listing-card rounded-xl overflow-hidden transition duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688" alt="Country house" class="w-full h-64 object-cover rounded-xl"> |
| <button class="heart-icon absolute top-3 right-3 text-white text-2xl transition"> |
| <i class="far fa-heart"></i> |
| </button> |
| </div> |
| <div class="mt-3"> |
| <div class="flex justify-between"> |
| <h3 class="font-semibold">Charming country house</h3> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-xs"></i> |
| <span class="ml-1 text-sm">4.87</span> |
| </div> |
| </div> |
| <p class="text-gray-500 text-sm">340 miles away</p> |
| <p class="text-gray-500 text-sm">Apr 22-27</p> |
| <p class="mt-1 text-sm"><span class="font-semibold">$135</span> night</p> |
| </div> |
| </div> |
| |
| |
| <div class="listing-card rounded-xl overflow-hidden transition duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1484154218962-a197022b5858" alt="Kitchen" class="w-full h-64 object-cover rounded-xl"> |
| <button class="heart-icon absolute top-3 right-3 text-white text-2xl transition"> |
| <i class="far fa-heart"></i> |
| </button> |
| </div> |
| <div class="mt-3"> |
| <div class="flex justify-between"> |
| <h3 class="font-semibold">Stylish loft with great kitchen</h3> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-xs"></i> |
| <span class="ml-1 text-sm">4.95</span> |
| </div> |
| </div> |
| <p class="text-gray-500 text-sm">780 miles away</p> |
| <p class="text-gray-500 text-sm">May 7-12</p> |
| <p class="mt-1 text-sm"><span class="font-semibold">$165</span> night</p> |
| </div> |
| </div> |
| |
| |
| <div class="listing-card rounded-xl overflow-hidden transition duration-300 cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1" alt="Lake house" class="w-full h-64 object-cover rounded-xl"> |
| <button class="heart-icon absolute top-3 right-3 text-white text-2xl transition"> |
| <i class="far fa-heart"></i> |
| </button> |
| </div> |
| <div class="mt-3"> |
| <div class="flex justify-between"> |
| <h3 class="font-semibold">Lakefront retreat</h3> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-xs"></i> |
| <span class="ml-1 text-sm">4.82</span> |
| </div> |
| </div> |
| <p class="text-gray-500 text-sm">1,020 miles away</p> |
| <p class="text-gray-500 text-sm">Jun 18-23</p> |
| <p class="mt-1 text-sm"><span class="font-semibold">$155</span> night</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-center mt-8"> |
| <button class="map-button flex items-center bg-black text-white rounded-full px-5 py-3 font-medium"> |
| <i class="fas fa-map-marked-alt mr-2"></i> |
| Show map |
| </button> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-100 border-t border-gray-200 mt-12"> |
| <div class="container mx-auto px-4 py-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h4 class="font-bold mb-4">Support</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="footer-link text-sm text-gray-600">Help Center</a></li> |
| <li><a href="#" class="footer-link text-sm text-gray-600">AirCover</a></li> |
| <li><a href="#" class="footer-link text-sm text-gray-600">Safety information</a></li> |
| <li><a href="#" class="footer-link text-sm text-gray-600">Supporting people with disabilities</a></li> |
| <li><a href="#" class="footer-link text-sm text-gray-600">Cancellation options</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-bold mb-4">Community</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="footer-link text-sm text-gray-600">Airbnb.org: disaster relief housing</a></li> |
| <li><a href="#" class="footer-link text-sm text-gray-600">Combating discrimination</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-bold mb-4">Hosting</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="footer-link text-sm text-gray-600">Airbnb your home</a></li> |
| <li><a href="#" class="footer-link text-sm text-gray-600">AirCover for Hosts</a></li> |
| <li><a href="#" class="footer-link text-sm text-gray-600">Hosting resources</a></li> |
| <li><a href="#" class="footer-link text-sm text-gray-600">Community forum</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-bold mb-4">Airbnb</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="footer-link text-sm text-gray-600">Newsroom</a></li> |
| <li><a href="#" class="footer-link text-sm text-gray-600">New features</a></li> |
| <li><a href="#" class="footer-link text-sm text-gray-600">Careers</a></li> |
| <li><a href="#" class="footer-link text-sm text-gray-600">Investors</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-300 mt-8 pt-8"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center space-x-4 mb-4 md:mb-0"> |
| <span class="text-sm">© 2023 Airbnb, Inc.</span> |
| <span class="hidden md:block">·</span> |
| <a href="#" class="footer-link text-sm">Privacy</a> |
| <span class="hidden md:block">·</span> |
| <a href="#" class="footer-link text-sm">Terms</a> |
| <span class="hidden md:block">·</span> |
| <a href="#" class="footer-link text-sm">Sitemap</a> |
| </div> |
| |
| <div class="flex items-center space-x-6"> |
| <div class="flex items-center"> |
| <i class="fas fa-globe mr-2"></i> |
| <span class="font-medium text-sm">English (US)</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-dollar-sign mr-2"></i> |
| <span class="font-medium text-sm">USD</span> |
| </div> |
| <div class="flex space-x-4"> |
| <a href="#"><i class="fab fa-facebook-f"></i></a> |
| <a href="#"><i class="fab fa-twitter"></i></a> |
| <a href="#"><i class="fab fa-instagram"></i></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-3 px-6 flex justify-around"> |
| <a href="#" class="flex flex-col items-center text-gray-600"> |
| <i class="fas fa-search"></i> |
| <span class="text-xs mt-1">Explore</span> |
| </a> |
| <a href="#" class="flex flex-col items-center text-gray-600"> |
| <i class="far fa-heart"></i> |
| <span class="text-xs mt-1">Wishlists</span> |
| </a> |
| <a href="#" class="flex flex-col items-center text-gray-600"> |
| <i class="fas fa-plane"></i> |
| <span class="text-xs mt-1">Trips</span> |
| </a> |
| <a href="#" class="flex flex-col items-center text-gray-600"> |
| <i class="fas fa-inbox"></i> |
| <span class="text-xs mt-1">Inbox</span> |
| </a> |
| <a href="#" class="flex flex-col items-center text-gray-600"> |
| <i class="fas fa-user"></i> |
| <span class="text-xs mt-1">Profile</span> |
| </a> |
| </div> |
|
|
| |
| <div id="searchModal" class="fixed inset-0 bg-white z-50 hidden modal"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex items-center justify-between mb-6"> |
| <button id="closeSearch" class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| <div class="flex-1 max-w-md mx-4"> |
| <div class="search-bar flex items-center border border-gray-300 rounded-full py-3 px-4 w-full shadow-sm"> |
| <i class="fas fa-search text-gray-500 mr-2"></i> |
| <div class="flex flex-col"> |
| <span class="font-medium text-sm">Anywhere</span> |
| <span class="text-xs text-gray-500">Any week · Add guests</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="border border-gray-300 rounded-xl p-4 cursor-pointer hover:border-black"> |
| <h3 class="font-bold mb-2">Where to?</h3> |
| <p class="text-gray-500 text-sm">Search destinations</p> |
| </div> |
| <div class="border border-gray-300 rounded-xl p-4 cursor-pointer hover:border-black"> |
| <h3 class="font-bold mb-2">Check in</h3> |
| <p class="text-gray-500 text-sm">Add dates</p> |
| </div> |
| <div class="border border-gray-300 rounded-xl p-4 cursor-pointer hover:border-black"> |
| <h3 class="font-bold mb-2">Check out</h3> |
| <p class="text-gray-500 text-sm">Add dates</p> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h3 class="font-bold mb-4">Filter by property type</h3> |
| <div class="grid grid-cols-3 md:grid-cols-5 gap-4"> |
| <div class="flex flex-col items-center cursor-pointer"> |
| <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-2"> |
| <i class="fas fa-home text-xl"></i> |
| </div> |
| <span class="text-xs">Houses</span> |
| </div> |
| <div class="flex flex-col items-center cursor-pointer"> |
| <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-2"> |
| <i class="fas fa-building text-xl"></i> |
| </div> |
| <span class="text-xs">Apartments</span> |
| </div> |
| <div class="flex flex-col items-center cursor-pointer"> |
| <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-2"> |
| <i class="fas fa-umbrella-beach text-xl"></i> |
| </div> |
| <span class="text-xs">Beachfront</span> |
| </div> |
| <div class="flex flex-col items-center cursor-pointer"> |
| <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-2"> |
| <i class="fas fa-tree text-xl"></i> |
| </div> |
| <span class="text-xs">Cabins</span> |
| </div> |
| <div class="flex flex-col items-center cursor-pointer"> |
| <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-2"> |
| <i class="fas fa-water text-xl"></i> |
| </div> |
| <span class="text-xs">Lakefront</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <button class="bg-black text-white rounded-lg px-6 py-3 font-medium"> |
| Show results |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const searchBar = document.querySelector('.search-bar'); |
| const searchModal = document.getElementById('searchModal'); |
| const closeSearch = document.getElementById('closeSearch'); |
| |
| |
| if (window.innerWidth < 768) { |
| searchBar.addEventListener('click', function() { |
| searchModal.classList.remove('hidden'); |
| }); |
| } |
| |
| |
| closeSearch.addEventListener('click', function() { |
| searchModal.classList.add('hidden'); |
| }); |
| |
| |
| const categories = document.querySelectorAll('.category-item'); |
| categories.forEach(category => { |
| category.addEventListener('click', function() { |
| categories.forEach(c => c.classList.remove('active')); |
| this.classList.add('active'); |
| }); |
| }); |
| |
| |
| const heartIcons = document.querySelectorAll('.heart-icon'); |
| heartIcons.forEach(icon => { |
| icon.addEventListener('click', function(e) { |
| e.stopPropagation(); |
| const heart = this.querySelector('i'); |
| if (heart.classList.contains('far')) { |
| heart.classList.remove('far'); |
| heart.classList.add('fas', 'text-red-500'); |
| } else { |
| heart.classList.remove('fas', 'text-red-500'); |
| heart.classList.add('far'); |
| } |
| }); |
| }); |
| |
| |
| const listingCards = document.querySelectorAll('.listing-card'); |
| listingCards.forEach(card => { |
| card.addEventListener('click', function() { |
| alert('Listing details would show here in a real app'); |
| }); |
| }); |
| }); |
| </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=mpuff77/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
