fix errors and any bugs, Fix Functionality and responsiveness make it full stacked and miulti page. Add colors royal blue.
19ed353 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Browse Properties - PropTech Connect</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { font-family: 'Inter', sans-serif; } | |
| .property-card { transition: all 0.3s ease; } | |
| .property-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav 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 h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="home" class="h-8 w-8 text-blue-700"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">PropTech Connect</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="index.html" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="dashboard.html" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="properties.html" class="text-blue-700 px-3 py-2 rounded-md text-sm font-medium border-b-2 border-blue-700">Properties</a> | |
| <a href="market.html" class="text-gray-700 hover:text-blue-700 px-3 py-2 rounded-md text-sm font-medium">Market Data</a> | |
| <a href="login.html" class="bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-800 transition duration-300">Login</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="mobile-menu-button" class="text-gray-700 hover:text-blue-700"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Header --> | |
| <section class="bg-gradient-to-r from-blue-700 to-blue-900 text-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Browse Properties</h1> | |
| <p class="text-xl">Discover premium real estate opportunities across the Middle East</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Filters --> | |
| <section class="bg-white py-8 shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <select class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700"> | |
| <option>All Locations</option> | |
| <option>Dubai, UAE</option> | |
| <option>Abu Dhabi, UAE</option> | |
| <option>Riyadh, Saudi Arabia</option> | |
| <option>Doha, Qatar</option> | |
| </select> | |
| <select class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700"> | |
| <option>All Types</option> | |
| <option>Apartment</option> | |
| <option>Villa</option> | |
| <option>Commercial</option> | |
| <option>Penthouse</option> | |
| </select> | |
| <select class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-700"> | |
| <option>Any Price</option> | |
| <option>Under $500,000</option> | |
| <option>$500,000 - $1M</option> | |
| <option>$1M - $5M</option> | |
| <option>Over $5M</option> | |
| </select> | |
| <button class="bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition duration-300">Search</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Properties Grid --> | |
| <section class="py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="properties-grid"> | |
| <!-- Properties loaded dynamically --> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| const properties = [ | |
| { | |
| image: 'http://static.photos/cityscape/640x360/1', | |
| title: 'Luxury Downtown Apartment', | |
| location: 'Dubai Marina, UAE', | |
| price: 'AED 2,800,000', | |
| type: 'Apartment', | |
| beds: 3, | |
| baths: 3, | |
| area: '2,200 sqft' | |
| }, | |
| { | |
| image: 'http://static.photos/vintage/640x360/2', | |
| title: 'Heritage Villa Compound', | |
| location: 'Riyadh, Saudi Arabia', | |
| price: 'SAR 12,500,000', | |
| type: 'Villa', | |
| beds: 5, | |
| baths: 6, | |
| area: '8,500 sqft' | |
| }, | |
| { | |
| image: 'http://static.photos/modern/640x360/3', | |
| title: 'Commercial Office Space', | |
| location: 'Doha, Qatar', | |
| price: 'QAR 4,200,000', | |
| type: 'Commercial', | |
| beds: 'N/A', | |
| baths: 'N/A', | |
| area: '5,000 sqft' | |
| }, | |
| { | |
| image: 'http://static.photos/white/640x360/4', | |
| title: 'Penthouse with Sea View', | |
| location: 'Abu Dhabi, UAE', | |
| price: 'AED 5,600,000', | |
| type: 'Penthouse', | |
| beds: 4, | |
| baths: 4, | |
| area: '3,800 sqft' | |
| }, | |
| { | |
| image: 'http://static.photos/gradient/640x360/5', | |
| title: 'Investment Property Portfolio', | |
| location: 'Manama, Bahrain', | |
| price: 'BHD 850,000', | |
| type: 'Mixed Use', | |
| beds: 'Multiple', | |
| baths: 'Multiple', | |
| area: '15,000 sqft' | |
| }, | |
| { | |
| image: 'http://static.photos/blue/640x360/6', | |
| title: 'Waterfront Development', | |
| location: 'Muscat, Oman', | |
| price: 'OMR 1,200,000', | |
| type: 'Development', | |
| beds: 'N/A', | |
| baths: 'N/A', | |
| area: '25,000 sqft' | |
| } | |
| ]; | |
| function loadProperties() { | |
| const grid = document.getElementById('properties-grid'); | |
| grid.innerHTML = ''; | |
| properties.forEach(property => { | |
| const card = document.createElement('div'); | |
| card.className = 'bg-white rounded-xl shadow-lg overflow-hidden property-card'; | |
| card.innerHTML = ` | |
| <img src="${property.image}" alt="${property.title}" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg font-semibold text-gray-900">${property.title}</h3> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">${property.type}</span> | |
| </div> | |
| <p class="text-gray-600 mb-4 flex items-center"><i data-feather="map-pin" class="w-4 h-4 mr-1"></i> ${property.location}</p> | |
| <div class="grid grid-cols-3 gap-4 mb-4 text-center text-sm text-gray-600"> | |
| <div><i data-feather="home" class="w-4 h-4 mx-auto mb-1"></i> ${property.beds}</div> | |
| <div><i data-feather="droplet" class="w-4 h-4 mx-auto mb-1"></i> ${property.baths}</div> | |
| <div><i data-feather="maximize" class="w-4 h-4 mx-auto mb-1"></i> ${property.area}</div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xl font-bold text-blue-700">${property.price}</span> | |
| <a href="property-details.html" class="bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-800 transition duration-300">View Details</a> | |
| </div> | |
| </div> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| feather.replace(); | |
| } | |
| document.addEventListener('DOMContentLoaded', loadProperties); | |
| </script> | |
| </body> | |
| </html> |