Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BookEase - Find Your Perfect Stay</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> | |
| .property-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .search-box { | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .date-picker { | |
| z-index: 50; | |
| } | |
| .filter-dropdown { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .filter-dropdown.active { | |
| max-height: 500px; | |
| } | |
| .heart-icon { | |
| transition: all 0.2s ease; | |
| } | |
| .heart-icon:hover { | |
| transform: scale(1.2); | |
| } | |
| .heart-icon.active { | |
| color: #f43f5e; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-sm sticky top-0 z-40"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-blue-600 flex items-center"> | |
| <i class="fas fa-hotel mr-2"></i> | |
| <span>BookEase</span> | |
| </a> | |
| <nav class="hidden md:flex ml-10 space-x-6"> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Stays</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Flights</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Car Rentals</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Attractions</a> | |
| <a href="#admin" class="text-gray-700 hover:text-blue-600 font-medium">Admin</a> | |
| </nav> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="hidden md:block text-gray-700 hover:text-blue-600 font-medium">List your property</button> | |
| <button class="hidden md:block bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">Register</button> | |
| <button class="hidden md:block border border-blue-600 text-blue-600 px-4 py-2 rounded-md hover:bg-blue-50">Sign in</button> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Search Section --> | |
| <section class="bg-blue-600 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="search-box bg-white rounded-xl p-6 max-w-6xl mx-auto"> | |
| <h1 class="text-2xl font-bold text-gray-800 mb-6">Find your perfect stay</h1> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="relative"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Destination</label> | |
| <input type="text" placeholder="Where are you going?" | |
| class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute right-3 top-9 text-gray-400"></i> | |
| </div> | |
| <div class="relative"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Check-in</label> | |
| <input type="text" placeholder="Add dates" | |
| class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 date-picker"> | |
| </div> | |
| <div class="relative"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Check-out</label> | |
| <input type="text" placeholder="Add dates" | |
| class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 date-picker"> | |
| </div> | |
| <div class="relative"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Guests</label> | |
| <input type="text" placeholder="Add guests" | |
| class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <button class="mt-6 bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700 w-full md:w-auto"> | |
| Search | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Filters Section --> | |
| <section class="bg-white py-4 border-b"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-wrap items-center justify-between gap-4"> | |
| <div class="flex items-center space-x-6 overflow-x-auto pb-2 scrollbar-hide"> | |
| <button class="flex flex-col items-center text-blue-600 min-w-max"> | |
| <i class="fas fa-hotel text-xl mb-1"></i> | |
| <span class="text-xs">Hotels</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-600 hover:text-blue-600 min-w-max"> | |
| <i class="fas fa-home text-xl mb-1"></i> | |
| <span class="text-xs">Apartments</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-600 hover:text-blue-600 min-w-max"> | |
| <i class="fas fa-umbrella-beach text-xl mb-1"></i> | |
| <span class="text-xs">Resorts</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-600 hover:text-blue-600 min-w-max"> | |
| <i class="fas fa-mountain text-xl mb-1"></i> | |
| <span class="text-xs">Villas</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-600 hover:text-blue-600 min-w-max"> | |
| <i class="fas fa-building text-xl mb-1"></i> | |
| <span class="text-xs">Hostels</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-600 hover:text-blue-600 min-w-max"> | |
| <i class="fas fa-campground text-xl mb-1"></i> | |
| <span class="text-xs">Cabins</span> | |
| </button> | |
| </div> | |
| <button id="filterToggle" class="flex items-center space-x-2 border border-gray-300 rounded-md px-4 py-2 text-gray-700 hover:bg-gray-50"> | |
| <i class="fas fa-sliders-h"></i> | |
| <span>Filters</span> | |
| </button> | |
| </div> | |
| <div id="filterDropdown" class="filter-dropdown mt-4 bg-gray-50 rounded-lg p-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <h3 class="font-medium mb-3">Price range</h3> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm text-gray-600">$0</span> | |
| <span class="text-sm text-gray-600">$500+</span> | |
| </div> | |
| <input type="range" min="0" max="500" value="250" class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-sm font-medium">$0 - $250</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-3">Star rating</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border rounded-md hover:bg-blue-50 hover:border-blue-200">1+</button> | |
| <button class="px-3 py-1 border rounded-md hover:bg-blue-50 hover:border-blue-200">2+</button> | |
| <button class="px-3 py-1 border rounded-md bg-blue-100 border-blue-300 text-blue-700">3+</button> | |
| <button class="px-3 py-1 border rounded-md hover:bg-blue-50 hover:border-blue-200">4+</button> | |
| <button class="px-3 py-1 border rounded-md hover:bg-blue-50 hover:border-blue-200">5</button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-3">Facilities</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-blue-600"> | |
| <span class="text-sm">Free WiFi</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-blue-600"> | |
| <span class="text-sm">Pool</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-blue-600" checked> | |
| <span class="text-sm">Parking</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-blue-600"> | |
| <span class="text-sm">Airport shuttle</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-4"> | |
| <button class="px-4 py-2 bg-gray-200 rounded-md mr-3 hover:bg-gray-300">Clear all</button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Show results</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Map View Toggle --> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-gray-800">1,245 properties found in New York</h2> | |
| <button class="flex items-center space-x-2 text-blue-600"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| <span>Show on map</span> | |
| </button> | |
| </div> | |
| <!-- Sort Options --> | |
| <div class="flex justify-between items-center mb-6 bg-gray-100 p-3 rounded-md"> | |
| <div class="text-sm text-gray-600">Book without credit card · Free cancellation</div> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-sm text-gray-600">Sort by:</span> | |
| <select class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| <option>Our top picks</option> | |
| <option>Price (lowest first)</option> | |
| <option>Price (highest first)</option> | |
| <option>Star rating</option> | |
| <option>Distance from center</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Property Listings --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Property Card 1 --> | |
| <div class="property-card bg-white rounded-xl overflow-hidden border border-gray-200 transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Luxury Hotel" class="w-full h-48 object-cover"> | |
| <button class="heart-icon absolute top-3 right-3 text-white text-xl bg-black bg-opacity-40 rounded-full p-2"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <div class="absolute bottom-3 left-3 bg-blue-600 text-white text-xs px-2 py-1 rounded"> | |
| <i class="fas fa-bolt mr-1"></i> 25% off | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Grand Luxury Hotel</h3> | |
| <p class="text-gray-600 text-sm">Manhattan, New York</p> | |
| </div> | |
| <div class="flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded"> | |
| <span class="font-bold">8.9</span> | |
| <span class="text-xs ml-1">Excellent</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center text-sm text-gray-600"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-500 text-sm line-through">$450</p> | |
| <div class="flex justify-between items-end"> | |
| <div> | |
| <span class="font-bold text-xl text-blue-600">$337</span> | |
| <span class="text-gray-600 text-sm">/night</span> | |
| </div> | |
| <button class="text-blue-600 text-sm font-medium hover:text-blue-800"> | |
| View deal <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Property Card 2 --> | |
| <div class="property-card bg-white rounded-xl overflow-hidden border border-gray-200 transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Boutique Hotel" class="w-full h-48 object-cover"> | |
| <button class="heart-icon absolute top-3 right-3 text-white text-xl bg-black bg-opacity-40 rounded-full p-2"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Urban Boutique Hotel</h3> | |
| <p class="text-gray-600 text-sm">Brooklyn, New York</p> | |
| </div> | |
| <div class="flex items-center bg-green-100 text-green-800 px-2 py-1 rounded"> | |
| <span class="font-bold">9.2</span> | |
| <span class="text-xs ml-1">Superb</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center text-sm text-gray-600"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400 mr-1"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-500 text-sm">Includes taxes & fees</p> | |
| <div class="flex justify-between items-end"> | |
| <div> | |
| <span class="font-bold text-xl text-blue-600">$215</span> | |
| <span class="text-gray-600 text-sm">/night</span> | |
| </div> | |
| <button class="text-blue-600 text-sm font-medium hover:text-blue-800"> | |
| View deal <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Property Card 3 --> | |
| <div class="property-card bg-white rounded-xl overflow-hidden border border-gray-200 transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Budget Hotel" class="w-full h-48 object-cover"> | |
| <button class="heart-icon absolute top-3 right-3 text-white text-xl bg-black bg-opacity-40 rounded-full p-2"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <div class="absolute bottom-3 left-3 bg-green-600 text-white text-xs px-2 py-1 rounded"> | |
| <i class="fas fa-leaf mr-1"></i> Eco-friendly | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">Central Budget Inn</h3> | |
| <p class="text-gray-600 text-sm">Midtown, New York</p> | |
| </div> | |
| <div class="flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded"> | |
| <span class="font-bold">8.1</span> | |
| <span class="text-xs ml-1">Very good</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center text-sm text-gray-600"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-500 text-sm">Breakfast included</p> | |
| <div class="flex justify-between items-end"> | |
| <div> | |
| <span class="font-bold text-xl text-blue-600">$129</span> | |
| <span class="text-gray-600 text-sm">/night</span> | |
| </div> | |
| <button class="text-blue-600 text-sm font-medium hover:text-blue-800"> | |
| View deal <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex justify-center mt-10"> | |
| <nav class="flex items-center space-x-2"> | |
| <button class="px-3 py-1 rounded-md border bg-blue-600 text-white"> | |
| 1 | |
| </button> | |
| <button class="px-3 py-1 rounded-md border hover:bg-gray-100"> | |
| 2 | |
| </button> | |
| <button class="px-3 py-1 rounded-md border hover:bg-gray-100"> | |
| 3 | |
| </button> | |
| <button class="px-3 py-1 rounded-md border hover:bg-gray-100"> | |
| 4 | |
| </button> | |
| <span class="px-2">...</span> | |
| <button class="px-3 py-1 rounded-md border hover:bg-gray-100"> | |
| 12 | |
| </button> | |
| <button class="px-3 py-1 rounded-md border hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| </main> | |
| <!-- Admin Panel Section --> | |
| <section id="admin" class="py-12 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-8">Admin Dashboard</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Properties Management --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-hotel mr-2 text-blue-600"></i> Properties | |
| </h3> | |
| <div class="space-y-3"> | |
| <a href="#" class="block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-center"> | |
| Add New Property | |
| </a> | |
| <a href="#" class="block px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-center"> | |
| Manage Properties | |
| </a> | |
| <a href="#" class="block px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-center"> | |
| View Bookings | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Users Management --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-users mr-2 text-blue-600"></i> Users | |
| </h3> | |
| <div class="space-y-3"> | |
| <a href="#" class="block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-center"> | |
| Add New User | |
| </a> | |
| <a href="#" class="block px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-center"> | |
| Manage Users | |
| </a> | |
| <a href="#" class="block px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-center"> | |
| User Analytics | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Reports --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-chart-bar mr-2 text-blue-600"></i> Reports | |
| </h3> | |
| <div class="space-y-3"> | |
| <a href="#" class="block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-center"> | |
| Financial Reports | |
| </a> | |
| <a href="#" class="block px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-center"> | |
| Occupancy Rates | |
| </a> | |
| <a href="#" class="block px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-center"> | |
| Customer Reviews | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Stats --> | |
| <div class="mt-8 bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-lg font-semibold mb-4">Quick Stats</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="text-blue-600 font-bold text-2xl">1,245</div> | |
| <div class="text-gray-600">Total Properties</div> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <div class="text-green-600 font-bold text-2xl">328</div> | |
| <div class="text-gray-600">Bookings Today</div> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg"> | |
| <div class="text-yellow-600 font-bold text-2xl">84%</div> | |
| <div class="text-gray-600">Occupancy Rate</div> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <div class="text-purple-600 font-bold text-2xl">4.8</div> | |
| <div class="text-gray-600">Avg. Rating</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="bg-blue-50 py-12"> | |
| <div class="container mx-auto px-4 max-w-4xl text-center"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Save time, save money!</h2> | |
| <p class="text-gray-600 mb-6">Sign up and we'll send the best deals to you</p> | |
| <div class="flex flex-col md:flex-row gap-2 justify-center"> | |
| <input type="email" placeholder="Your email address" | |
| class="px-4 py-3 rounded-md border focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-96"> | |
| <button class="bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">BookEase</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">About BookEase</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Press Center</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Travel Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Help</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Customer Service</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">FAQs</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Partner with us</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">List your property</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Become an affiliate</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Corporate accounts</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Travel agents</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg mb-4">Get the app</h3> | |
| <div class="space-y-3"> | |
| <button class="flex items-center space-x-2 bg-black text-white px-4 py-2 rounded-md w-full max-w-xs"> | |
| <i class="fab fa-apple text-2xl"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Download on the</div> | |
| <div class="font-medium">App Store</div> | |
| </div> | |
| </button> | |
| <button class="flex items-center space-x-2 bg-black text-white px-4 py-2 rounded-md w-full max-w-xs"> | |
| <i class="fab fa-google-play text-2xl"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Get it on</div> | |
| <div class="font-medium">Google Play</div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm"> | |
| <p>© 2023 BookEase. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Admin Panel Tabs | |
| document.querySelectorAll('.admin-tab').forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| // Show selected tab content | |
| const tabId = this.getAttribute('data-tab'); | |
| document.getElementById(tabId).classList.remove('hidden'); | |
| // Update active tab styling | |
| document.querySelectorAll('.admin-tab').forEach(t => { | |
| t.classList.remove('bg-blue-600', 'text-white'); | |
| t.classList.add('bg-gray-200', 'hover:bg-gray-300'); | |
| }); | |
| this.classList.add('bg-blue-600', 'text-white'); | |
| this.classList.remove('bg-gray-200', 'hover:bg-gray-300'); | |
| }); | |
| }); | |
| // Initialize first tab as active | |
| document.querySelector('.admin-tab').click(); | |
| // Toggle filter dropdown | |
| document.getElementById('filterToggle').addEventListener('click', function() { | |
| document.getElementById('filterDropdown').classList.toggle('active'); | |
| }); | |
| // Toggle favorite heart icons | |
| document.querySelectorAll('.heart-icon').forEach(icon => { | |
| icon.addEventListener('click', function() { | |
| const heart = this.querySelector('i'); | |
| heart.classList.toggle('far'); | |
| heart.classList.toggle('fas'); | |
| this.classList.toggle('active'); | |
| }); | |
| }); | |
| // Simulate property card hover effect | |
| document.querySelectorAll('.property-card').forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-5px)'; | |
| this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.1)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = ''; | |
| this.style.boxShadow = ''; | |
| }); | |
| }); | |
| // Simple date picker functionality would go here | |
| // In a real implementation, you would use a date picker library | |
| document.querySelectorAll('.date-picker').forEach(input => { | |
| input.addEventListener('focus', function() { | |
| // This would show a date picker in a real implementation | |
| console.log('Show date picker'); | |
| }); | |
| }); | |
| </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=bronzemoontr/hotel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |