Download index.html from wardhere/property: direct link, hf CLI and curl.
- Browser
- Download file 50.2 kB
-
https://huggingface.co/spaces/wardhere/property/resolve/main/index.html
- Command line
-
hf download hf://spaces/wardhere/property/index.html
-
curl -L -o index.html https://huggingface.co/spaces/wardhere/property/resolve/main/index.html
50.2 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PrimeProperties - Find Your Dream Home</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); | |
| } | |
| .property-image { | |
| height: 200px; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .property-card:hover .property-image { | |
| transform: scale(1.03); | |
| } | |
| .price-badge { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 10px; | |
| background: rgba(0, 0, 0, 0.7); | |
| color: white; | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| font-weight: bold; | |
| } | |
| #propertyModal { | |
| transition: all 0.3s ease; | |
| } | |
| .modal-open { | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg"> | |
| <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 class="fas fa-home text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">PrimeProperties</span> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:space-x-8"> | |
| <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Buy</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Rent</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Agents</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"> | |
| <i class="fas fa-user-plus mr-2"></i>Sign Up | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative bg-indigo-700"> | |
| <div class="absolute inset-0"> | |
| <img class="w-full h-full object-cover opacity-30" src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt=""> | |
| </div> | |
| <div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8"> | |
| <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">Find Your Dream Home</h1> | |
| <p class="mt-6 max-w-3xl text-xl text-indigo-100">Browse thousands of properties across the country with detailed information and transparent pricing.</p> | |
| <div class="mt-10 sm:flex sm:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> | |
| <i class="fas fa-search mr-2"></i> Search Properties | |
| </a> | |
| </div> | |
| <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> View Map | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search Filters --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label for="location" class="block text-sm font-medium text-gray-700">Location</label> | |
| <select id="location" name="location" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> | |
| <option>Any Location</option> | |
| <option>New York</option> | |
| <option>Los Angeles</option> | |
| <option>Chicago</option> | |
| <option>Houston</option> | |
| <option>Phoenix</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="property-type" class="block text-sm font-medium text-gray-700">Property Type</label> | |
| <select id="property-type" name="property-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> | |
| <option>Any Type</option> | |
| <option>House</option> | |
| <option>Apartment</option> | |
| <option>Condo</option> | |
| <option>Townhouse</option> | |
| <option>Land</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="price-range" class="block text-sm font-medium text-gray-700">Price Range</label> | |
| <select id="price-range" name="price-range" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> | |
| <option>Any Price</option> | |
| <option>Under $200,000</option> | |
| <option>$200,000 - $400,000</option> | |
| <option>$400,000 - $600,000</option> | |
| <option>$600,000 - $800,000</option> | |
| <option>Over $800,000</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="bedrooms" class="block text-sm font-medium text-gray-700">Bedrooms</label> | |
| <select id="bedrooms" name="bedrooms" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> | |
| <option>Any</option> | |
| <option>1+</option> | |
| <option>2+</option> | |
| <option>3+</option> | |
| <option>4+</option> | |
| <option>5+</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-end"> | |
| <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fas fa-filter mr-2"></i> Apply Filters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Property Listings --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-900">Featured Properties</h2> | |
| <div class="flex items-center"> | |
| <span class="text-sm text-gray-600 mr-2">Sort by:</span> | |
| <select class="border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"> | |
| <option>Newest</option> | |
| <option>Price: Low to High</option> | |
| <option>Price: High to Low</option> | |
| <option>Square Footage</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Property 1 --> | |
| <div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 ease-in-out cursor-pointer" onclick="openModal('property1')"> | |
| <div class="relative"> | |
| <img class="property-image w-full" src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Modern House"> | |
| <div class="price-badge">$750,000</div> | |
| <div class="absolute top-2 right-2 bg-white p-1 rounded-full shadow"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-gray-900">Modern Family Home</h3> | |
| <p class="text-sm text-gray-600 mt-1"><i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> 123 Main St, Beverly Hills, CA</p> | |
| <div class="flex justify-between mt-4 text-sm text-gray-500"> | |
| <span><i class="fas fa-bed mr-1"></i> 4 Beds</span> | |
| <span><i class="fas fa-bath mr-1"></i> 3 Baths</span> | |
| <span><i class="fas fa-ruler-combined mr-1"></i> 2,800 sqft</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Property 2 --> | |
| <div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 ease-in-out cursor-pointer" onclick="openModal('property2')"> | |
| <div class="relative"> | |
| <img class="property-image w-full" src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Luxury Villa"> | |
| <div class="price-badge">$1,250,000</div> | |
| <div class="absolute top-2 right-2 bg-white p-1 rounded-full shadow"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-gray-900">Luxury Villa</h3> | |
| <p class="text-sm text-gray-600 mt-1"><i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> 456 Ocean Ave, Malibu, CA</p> | |
| <div class="flex justify-between mt-4 text-sm text-gray-500"> | |
| <span><i class="fas fa-bed mr-1"></i> 5 Beds</span> | |
| <span><i class="fas fa-bath mr-1"></i> 4.5 Baths</span> | |
| <span><i class="fas fa-ruler-combined mr-1"></i> 4,200 sqft</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Property 3 --> | |
| <div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 ease-in-out cursor-pointer" onclick="openModal('property3')"> | |
| <div class="relative"> | |
| <img class="property-image w-full" src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Downtown Condo"> | |
| <div class="price-badge">$650,000</div> | |
| <div class="absolute top-2 right-2 bg-white p-1 rounded-full shadow"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-gray-900">Downtown Condo</h3> | |
| <p class="text-sm text-gray-600 mt-1"><i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> 789 High St, New York, NY</p> | |
| <div class="flex justify-between mt-4 text-sm text-gray-500"> | |
| <span><i class="fas fa-bed mr-1"></i> 2 Beds</span> | |
| <span><i class="fas fa-bath mr-1"></i> 2 Baths</span> | |
| <span><i class="fas fa-ruler-combined mr-1"></i> 1,500 sqft</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Property 4 --> | |
| <div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 ease-in-out cursor-pointer" onclick="openModal('property4')"> | |
| <div class="relative"> | |
| <img class="property-image w-full" src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Suburban House"> | |
| <div class="price-badge">$420,000</div> | |
| <div class="absolute top-2 right-2 bg-white p-1 rounded-full shadow"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-gray-900">Suburban Family Home</h3> | |
| <p class="text-sm text-gray-600 mt-1"><i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> 101 Maple Dr, Austin, TX</p> | |
| <div class="flex justify-between mt-4 text-sm text-gray-500"> | |
| <span><i class="fas fa-bed mr-1"></i> 3 Beds</span> | |
| <span><i class="fas fa-bath mr-1"></i> 2 Baths</span> | |
| <span><i class="fas fa-ruler-combined mr-1"></i> 2,100 sqft</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Property 5 --> | |
| <div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 ease-in-out cursor-pointer" onclick="openModal('property5')"> | |
| <div class="relative"> | |
| <img class="property-image w-full" src="https://images.unsplash.com/photo-1600566752227-8f3bcd9e0e6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Mountain Retreat"> | |
| <div class="price-badge">$890,000</div> | |
| <div class="absolute top-2 right-2 bg-white p-1 rounded-full shadow"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-gray-900">Mountain Retreat</h3> | |
| <p class="text-sm text-gray-600 mt-1"><i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> 202 Pine Rd, Aspen, CO</p> | |
| <div class="flex justify-between mt-4 text-sm text-gray-500"> | |
| <span><i class="fas fa-bed mr-1"></i> 4 Beds</span> | |
| <span><i class="fas fa-bath mr-1"></i> 3 Baths</span> | |
| <span><i class="fas fa-ruler-combined mr-1"></i> 3,500 sqft</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Property 6 --> | |
| <div class="property-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 ease-in-out cursor-pointer" onclick="openModal('property6')"> | |
| <div class="relative"> | |
| <img class="property-image w-full" src="https://images.unsplash.com/photo-1600607688969-a5bfcd646554?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Beachfront Property"> | |
| <div class="price-badge">$2,100,000</div> | |
| <div class="absolute top-2 right-2 bg-white p-1 rounded-full shadow"> | |
| <i class="far fa-heart text-gray-400 hover:text-red-500"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-gray-900">Beachfront Property</h3> | |
| <p class="text-sm text-gray-600 mt-1"><i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> 303 Shore Dr, Miami, FL</p> | |
| <div class="flex justify-between mt-4 text-sm text-gray-500"> | |
| <span><i class="fas fa-bed mr-1"></i> 5 Beds</span> | |
| <span><i class="fas fa-bath mr-1"></i> 4.5 Baths</span> | |
| <span><i class="fas fa-ruler-combined mr-1"></i> 4,800 sqft</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-center"> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Previous</span> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Next</span> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Property Modal --> | |
| <div id="propertyModal" class="fixed inset-0 overflow-y-auto z-50 hidden"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-2xl leading-6 font-bold text-gray-900" id="modal-title">Modern Family Home</h3> | |
| <button type="button" onclick="closeModal()" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-500" id="modal-address"><i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> 123 Main St, Beverly Hills, CA</p> | |
| </div> | |
| <!-- Property Images --> | |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="col-span-2"> | |
| <img id="modal-main-image" src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Property" class="w-full h-64 md:h-96 object-cover rounded-lg"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Property" class="h-32 object-cover rounded-lg cursor-pointer hover:opacity-90" onclick="changeMainImage(this)"> | |
| <img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Property" class="h-32 object-cover rounded-lg cursor-pointer hover:opacity-90" onclick="changeMainImage(this)"> | |
| <img src="https://images.unsplash.com/photo-1493809842364-78817add7ffb?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Property" class="h-32 object-cover rounded-lg cursor-pointer hover:opacity-90" onclick="changeMainImage(this)"> | |
| <img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Property" class="h-32 object-cover rounded-lg cursor-pointer hover:opacity-90" onclick="changeMainImage(this)"> | |
| </div> | |
| </div> | |
| <!-- Property Details --> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="md:col-span-2"> | |
| <h4 class="text-lg font-semibold text-gray-900">Description</h4> | |
| <p id="modal-description" class="mt-2 text-gray-600"> | |
| This stunning modern family home features an open floor plan with large windows that flood the space with natural light. The gourmet kitchen boasts high-end stainless steel appliances, quartz countertops, and a large island perfect for entertaining. The master suite includes a spa-like bathroom and walk-in closet. Enjoy outdoor living with a beautifully landscaped backyard featuring a pool and covered patio. | |
| </p> | |
| <h4 class="mt-6 text-lg font-semibold text-gray-900">Details</h4> | |
| <div class="mt-4 grid grid-cols-2 gap-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bed text-indigo-500 mr-2"></i> | |
| <span id="modal-bedrooms" class="text-gray-700">4 Bedrooms</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bath text-indigo-500 mr-2"></i> | |
| <span id="modal-bathrooms" class="text-gray-700">3 Bathrooms</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-ruler-combined text-indigo-500 mr-2"></i> | |
| <span id="modal-sqft" class="text-gray-700">2,800 sqft</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-car text-indigo-500 mr-2"></i> | |
| <span id="modal-garage" class="text-gray-700">2 Garage spaces</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-alt text-indigo-500 mr-2"></i> | |
| <span id="modal-year" class="text-gray-700">Built in 2018</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-layer-group text-indigo-500 mr-2"></i> | |
| <span id="modal-stories" class="text-gray-700">2 Stories</span> | |
| </div> | |
| </div> | |
| <h4 class="mt-6 text-lg font-semibold text-gray-900">Amenities</h4> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Swimming Pool</span> | |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Central AC</span> | |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Fireplace</span> | |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Walk-in Closet</span> | |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Hardwood Floors</span> | |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Gourmet Kitchen</span> | |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Smart Home</span> | |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 text-sm rounded-full">Security System</span> | |
| </div> | |
| </div> | |
| <!-- Price and Contact --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="text-center"> | |
| <span id="modal-price" class="text-3xl font-bold text-indigo-600">$750,000</span> | |
| <p class="text-sm text-gray-500 mt-1">$268 per sqft</p> | |
| </div> | |
| <div class="mt-6"> | |
| <h5 class="text-lg font-semibold text-gray-900">Estimated Monthly Payment</h5> | |
| <div class="mt-2 bg-white p-3 rounded-md"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Principal & Interest</span> | |
| <span class="font-medium">$3,200</span> | |
| </div> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-gray-600">Property Taxes</span> | |
| <span class="font-medium">$800</span> | |
| </div> | |
| <div class="flex justify-between mt-2"> | |
| <span class="text-gray-600">Home Insurance</span> | |
| <span class="font-medium">$150</span> | |
| </div> | |
| <div class="border-t border-gray-200 mt-3 pt-3"> | |
| <div class="flex justify-between"> | |
| <span class="font-semibold">Total</span> | |
| <span class="font-bold text-indigo-600">$4,150/mo</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">* Based on 20% down payment, 30-year fixed mortgage at 3.5%</p> | |
| </div> | |
| <div class="mt-6"> | |
| <h5 class="text-lg font-semibold text-gray-900">Contact Agent</h5> | |
| <div class="mt-3 flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Agent" class="h-12 w-12 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="font-medium">Sarah Johnson</p> | |
| <p class="text-sm text-gray-600">PrimeProperties Agent</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 space-y-2"> | |
| <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"> | |
| <i class="fas fa-phone-alt mr-2"></i> Call Agent | |
| </button> | |
| <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700"> | |
| <i class="fas fa-envelope mr-2"></i> Email Agent | |
| </button> | |
| <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Schedule Tour | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700"> | |
| <i class="far fa-heart mr-2"></i> Save Property | |
| </button> | |
| <button class="w-full mt-2 flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"> | |
| <i class="fas fa-share-alt mr-2"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-indigo-50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">What our clients say</p> | |
| </div> | |
| <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Michael Rodriguez</div> | |
| <div class="text-sm text-gray-500">Home Buyer</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600">"PrimeProperties helped me find my dream home in just 3 weeks! Their agents were knowledgeable and made the whole process smooth."</p> | |
| <div class="mt-3 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/28.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Jennifer Lee</div> | |
| <div class="text-sm text-gray-500">Home Seller</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600">"Sold my condo for 15% above asking price thanks to PrimeProperties' marketing strategy. Highly recommend their services!"</p> | |
| <div class="mt-3 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">David Wilson</div> | |
| <div class="text-sm text-gray-500">Investor</div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600">"As a real estate investor, I rely on PrimeProperties to find the best deals. Their market analysis reports are incredibly valuable."</p> | |
| <div class="mt-3 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call to Action --> | |
| <div class="bg-indigo-700"> | |
| <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="block">Ready to find your dream home?</span> | |
| <span class="block">Start your search today.</span> | |
| </h2> | |
| <p class="mt-4 text-lg leading-6 text-indigo-200">Our expert agents are ready to help you every step of the way.</p> | |
| <a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto"> | |
| <i class="fas fa-phone-alt mr-2"></i> Contact an Agent | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Safety</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Buying Guide</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Selling Guide</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Mortgage Calculator</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Market Reports</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> | |
| <div class="mt-4 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <p class="text-gray-300">Subscribe to our newsletter</p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-md w-full focus:outline-none"> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-r-md hover:bg-indigo-700"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"> | |
| <div class="flex space-x-6 md:order-2"> | |
| <span class="text-gray-400">English</span> | |
| <span class="text-gray-400">$ USD</span> | |
| </div> | |
| <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">© 2023 PrimeProperties. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Property data | |
| const properties = { | |
| property1: { | |
| title: "Modern Family Home", | |
| address: "123 Main St, Beverly Hills, CA", | |
| price: "$750,000", | |
| description: "This stunning modern family home features an open floor plan with large windows that flood the space with natural light. The gourmet kitchen boasts high-end stainless steel appliances, quartz countertops, and a large island perfect for entertaining. The master suite includes a spa-like bathroom and walk-in closet. Enjoy outdoor living with a beautifully landscaped backyard featuring a pool and covered patio.", | |
| bedrooms: "4 Bedrooms", | |
| bathrooms: "3 Bathrooms", | |
| sqft: "2,800 sqft", | |
| garage: "2 Garage spaces", | |
| year: "Built in 2018", | |
| stories: "2 Stories", | |
| mainImage: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" | |
| }, | |
| property2: { | |
| title: "Luxury Villa", | |
| address: "456 Ocean Ave, Malibu, CA", | |
| price: "$1,250,000", | |
| description: "Spectacular luxury villa with panoramic ocean views. This exquisite property features a grand entrance, high ceilings, and premium finishes throughout. The gourmet kitchen is equipped with top-of-the-line appliances and custom cabinetry. The master retreat offers a private balcony, fireplace, and luxurious bathroom. Outdoor amenities include an infinity pool, spa, and outdoor kitchen perfect for entertaining.", | |
| bedrooms: "5 Bedrooms", | |
| bathrooms: "4.5 Bathrooms", | |
| sqft: "4,200 sqft", | |
| garage: "3 Garage spaces", | |
| year: "Built in 2015", | |
| stories: "3 Stories", | |
| mainImage: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" | |
| }, | |
| property3: { | |
| title: "Downtown Condo", | |
| address: "789 High St, New York, NY", | |
| price: "$650,000", | |
| description: "Sophisticated downtown condo in the heart of the city. This modern unit features floor-to-ceiling windows with breathtaking city views, an open-concept living space, and high-end finishes. The kitchen features sleek cabinetry, stone countertops, and stainless steel appliances. Building amenities include 24/7 concierge, fitness center, rooftop deck, and shared lounge areas. Perfect for urban professionals.", | |
| bedrooms: "2 Bedrooms", | |
| bathrooms: "2 Bathrooms", | |
| sqft: "1,500 sqft", | |
| garage: "1 Garage space", | |
| year: "Built in 2019", | |
| stories: "Penthouse", | |
| mainImage: "https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" | |
| }, | |
| property4: { | |
| title: "Suburban Family Home", | |
| address: "101 Maple Dr, Austin, TX", | |
| price: "$420,000", | |
| description: "Charming suburban home in a family-friendly neighborhood. This well-maintained property features a spacious living room with fireplace, updated kitchen with granite countertops, and a cozy breakfast nook. The backyard is fully fenced with a patio perfect for outdoor dining. Located in a top-rated school district with easy access to parks, shopping, and dining.", | |
| bedrooms: "3 Bedrooms", | |
| bathrooms: "2 Bathrooms", | |
| sqft: "2,100 sqft", | |
| garage: "2 Garage spaces", | |
| year: "Built in 2012", | |
| stories: "1 Story", | |
| mainImage: "https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" | |
| }, | |
| property5: { | |
| title: "Mountain Retreat", | |
| address: "202 Pine Rd, Aspen, CO", | |
| price: "$890,000", | |
| description: "Beautiful mountain retreat with stunning views. This custom-built home features a rustic yet modern design with exposed beams, stone accents, and large windows to take in the scenery. The great room has a massive stone fireplace and opens to a deck with a hot tub. The gourmet kitchen features professional-grade appliances and a large island. Perfect for those who love outdoor activities year-round.", | |
| bedrooms: "4 Bedrooms", | |
| bathrooms: "3 Bathrooms", | |
| sqft: "3,500 sqft", | |
| garage: "2 Garage spaces", | |
| year: "Built in 2016", | |
| stories: "2 Stories", | |
| mainImage: "https://images.unsplash.com/photo-1600566752227-8f3bcd9e0e6b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" | |
| }, | |
| property6: { | |
| title: "Beachfront Property", | |
| address: "303 Shore Dr, Miami, FL", | |
| price: "$2,100,000", | |
| description: "Exclusive beachfront property with private beach access. This luxurious home features an open floor plan with walls of glass that showcase the ocean views. The gourmet kitchen opens to the living and dining areas, perfect for entertaining. The master suite offers a private balcony, walk-in closet, and spa-like bathroom. Outdoor living includes a pool, cabana, and direct beach access. A true paradise.", | |
| bedrooms: "5 Bedrooms", | |
| bathrooms: "4.5 Bathrooms", | |
| sqft: "4,800 sqft", | |
| garage: "3 Garage spaces", | |
| year: "Built in 2017", | |
| stories: "3 Stories", | |
| mainImage: "https://images.unsplash.com/photo-1600607688969-a5bfcd646554?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" | |
| } | |
| }; | |
| // Modal functions | |
| function openModal(propertyId) { | |
| const property = properties[propertyId]; | |
| document.getElementById('modal-title').textContent = property.title; | |
| document.getElementById('modal-address').innerHTML = `<i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i> ${property.address}`; | |
| document.getElementById('modal-price').textContent = property.price; | |
| document.getElementById('modal-description').textContent = property.description; | |
| document.getElementById('modal-bedrooms').textContent = property.bedrooms; | |
| document.getElementById('modal-bathrooms').textContent = property.bathrooms; | |
| document.getElementById('modal-sqft').textContent = property.sqft; | |
| document.getElementById('modal-garage').textContent = property.garage; | |
| document.getElementById('modal-year').textContent = property.year; | |
| document.getElementById('modal-stories').textContent = property.stories; | |
| document.getElementById('modal-main-image').src = property.mainImage; | |
| document.getElementById('propertyModal').classList.remove('hidden'); | |
| document.body.classList.add('modal-open'); | |
| } | |
| function closeModal() { | |
| document.getElementById('propertyModal').classList.add('hidden'); | |
| document.body.classList.remove('modal-open'); | |
| } | |
| function changeMainImage(imgElement) { | |
| document.getElementById('modal-main-image').src = imgElement.src; | |
| } | |
| // Close modal when clicking outside | |
| document.getElementById('propertyModal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| closeModal(); | |
| } | |
| }); | |
| </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=wardhere/property" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |