Initial setup
@@ -27,6 +27,8 @@ yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
.env
|
||||
.DS_Store
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
@@ -0,0 +1,656 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.ico" />
|
||||
<title>Property Pulse | Find local rental properties</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="bg-blue-700 border-b border-blue-500">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-20 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center md:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button
|
||||
type="button"
|
||||
id="mobile-dropdown-button"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="block h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<a class="flex flex-shrink-0 items-center" href="/index.html">
|
||||
<img
|
||||
class="h-10 w-auto"
|
||||
src="/images/logo-white.png"
|
||||
alt="PropertyPulse"
|
||||
/>
|
||||
|
||||
<span class="hidden md:block text-white text-2xl font-bold ml-2"
|
||||
>PropertyPulse</span
|
||||
>
|
||||
</a>
|
||||
<!-- Desktop Menu Hidden below md screens -->
|
||||
<div class="hidden md:ml-6 md:block">
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="bg-black text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Add Property</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged Out) -->
|
||||
<div class="hidden md:block md:ml-6">
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>
|
||||
<i class="fa-brands fa-google text-white mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged In) -->
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0"
|
||||
>
|
||||
<a href="messages.html" class="relative group">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full"
|
||||
>
|
||||
2
|
||||
<!-- Replace with the actual number of notifications -->
|
||||
</span>
|
||||
</a>
|
||||
<!-- Profile dropdown button -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
src="/images/profile.png"
|
||||
alt=""
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div
|
||||
id="user-menu"
|
||||
class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<a
|
||||
href="/profile.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-0"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="saved-properties.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Saved Properties</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Sign Out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pb-3 pt-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-gray-300 block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="bg-gray-900 text-white hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Add Property</a
|
||||
>
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2 my-4"
|
||||
>
|
||||
<i class="fa-brands fa-google mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="bg-blue-50">
|
||||
<div class="container m-auto max-w-2xl py-24">
|
||||
<div
|
||||
class="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
|
||||
>
|
||||
<form>
|
||||
<h2 class="text-3xl text-center font-semibold mb-6">
|
||||
Add Property
|
||||
</h2>
|
||||
|
||||
<!-- Alerts -->
|
||||
<div class="bg-green-200 font-semibold p-4 my-5">
|
||||
This is a success message alert
|
||||
</div>
|
||||
<div class="bg-red-200 font-semibold p-4 my-5">
|
||||
This is an error message alert
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label
|
||||
for="property_type"
|
||||
class="block text-gray-700 font-bold mb-2"
|
||||
>Property Type</label
|
||||
>
|
||||
<select
|
||||
id="property_type"
|
||||
name="property_type"
|
||||
class="border rounded w-full py-2 px-3"
|
||||
required
|
||||
>
|
||||
<option value="Apartment">Apartment</option>
|
||||
<option value="Condo">Condo</option>
|
||||
<option value="House">House</option>
|
||||
<option value="CabinOrCottage">Cabin or Cottage</option>
|
||||
<option value="Room">Room</option>
|
||||
<option value="Studio">Studio</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 font-bold mb-2"
|
||||
>Listing Name</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
class="border rounded w-full py-2 px-3 mb-2"
|
||||
placeholder="eg. Beautiful Apartment In Miami"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label
|
||||
for="description"
|
||||
class="block text-gray-700 font-bold mb-2"
|
||||
>Description</label
|
||||
>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
class="border rounded w-full py-2 px-3"
|
||||
rows="4"
|
||||
placeholder="Add an optional description of your property"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 bg-blue-50 p-4">
|
||||
<label class="block text-gray-700 font-bold mb-2">Location</label>
|
||||
<input
|
||||
type="text"
|
||||
id="street"
|
||||
name="location.street"
|
||||
class="border rounded w-full py-2 px-3 mb-2"
|
||||
placeholder="Street"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="city"
|
||||
name="location.city"
|
||||
class="border rounded w-full py-2 px-3 mb-2"
|
||||
placeholder="City"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="state"
|
||||
name="location.state"
|
||||
class="border rounded w-full py-2 px-3 mb-2"
|
||||
placeholder="State"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="zipcode"
|
||||
name="location.zipcode"
|
||||
class="border rounded w-full py-2 px-3 mb-2"
|
||||
placeholder="Zipcode"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 flex flex-wrap">
|
||||
<div class="w-full sm:w-1/3 pr-2">
|
||||
<label for="beds" class="block text-gray-700 font-bold mb-2"
|
||||
>Beds</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="beds"
|
||||
name="beds"
|
||||
class="border rounded w-full py-2 px-3"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full sm:w-1/3 px-2">
|
||||
<label for="baths" class="block text-gray-700 font-bold mb-2"
|
||||
>Baths</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="baths"
|
||||
name="baths"
|
||||
class="border rounded w-full py-2 px-3"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full sm:w-1/3 pl-2">
|
||||
<label
|
||||
for="square_feet"
|
||||
class="block text-gray-700 font-bold mb-2"
|
||||
>Square Feet</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="square_feet"
|
||||
name="square_feet"
|
||||
class="border rounded w-full py-2 px-3"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 font-bold mb-2"
|
||||
>Amenities</label
|
||||
>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_wifi"
|
||||
name="amenities"
|
||||
value="Wifi"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_wifi">Wifi</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_kitchen"
|
||||
name="amenities"
|
||||
value="Full kitchen"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_kitchen">Full kitchen</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_washer_dryer"
|
||||
name="amenities"
|
||||
value="Washer & Dryer"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_washer_dryer">Washer & Dryer</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_free_parking"
|
||||
name="amenities"
|
||||
value="Free Parking"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_free_parking">Free Parking</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_pool"
|
||||
name="amenities"
|
||||
value="Swimming Pool"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_pool">Swimming Pool</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_hot_tub"
|
||||
name="amenities"
|
||||
value="Hot Tub"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_hot_tub">Hot Tub</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_24_7_security"
|
||||
name="amenities"
|
||||
value="24/7 Security"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_24_7_security">24/7 Security</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_wheelchair_accessible"
|
||||
name="amenities"
|
||||
value="Wheelchair Accessible"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_wheelchair_accessible"
|
||||
>Wheelchair Accessible</label
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_elevator_access"
|
||||
name="amenities"
|
||||
value="Elevator Access"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_elevator_access">Elevator Access</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_dishwasher"
|
||||
name="amenities"
|
||||
value="Dishwasher"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_dishwasher">Dishwasher</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_gym_fitness_center"
|
||||
name="amenities"
|
||||
value="Gym/Fitness Center"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_gym_fitness_center"
|
||||
>Gym/Fitness Center</label
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_air_conditioning"
|
||||
name="amenities"
|
||||
value="Air Conditioning"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_air_conditioning">Air Conditioning</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_balcony_patio"
|
||||
name="amenities"
|
||||
value="Balcony/Patio"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_balcony_patio">Balcony/Patio</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_smart_tv"
|
||||
name="amenities"
|
||||
value="Smart TV"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_smart_tv">Smart TV</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="amenity_coffee_maker"
|
||||
name="amenities"
|
||||
value="Coffee Maker"
|
||||
className="mr-2"
|
||||
/>
|
||||
<label for="amenity_coffee_maker">Coffee Maker</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 bg-blue-50 p-4">
|
||||
<label class="block text-gray-700 font-bold mb-2"
|
||||
>Rates (Leave blank if not applicable)</label
|
||||
>
|
||||
<div
|
||||
class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<label for="weekly_rate" class="mr-2">Weekly</label>
|
||||
<input
|
||||
type="number"
|
||||
id="weekly_rate"
|
||||
name="rates.weekly"
|
||||
class="border rounded w-full py-2 px-3"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label for="monthly_rate" class="mr-2">Monthly</label>
|
||||
<input
|
||||
type="number"
|
||||
id="monthly_rate"
|
||||
name="rates.monthly"
|
||||
class="border rounded w-full py-2 px-3"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label for="nightly_rate" class="mr-2">Nightly</label>
|
||||
<input
|
||||
type="number"
|
||||
id="nightly_rate"
|
||||
name="rates.nightly"
|
||||
class="border rounded w-full py-2 px-3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label
|
||||
for="seller_name"
|
||||
class="block text-gray-700 font-bold mb-2"
|
||||
>Seller Name</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="seller_name"
|
||||
name="seller_info.name."
|
||||
class="border rounded w-full py-2 px-3"
|
||||
placeholder="Name"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label
|
||||
for="seller_email"
|
||||
class="block text-gray-700 font-bold mb-2"
|
||||
>Seller Email</label
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
id="seller_email"
|
||||
name="seller_info.email"
|
||||
class="border rounded w-full py-2 px-3"
|
||||
placeholder="Email address"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label
|
||||
for="seller_phone"
|
||||
class="block text-gray-700 font-bold mb-2"
|
||||
>Seller Phone</label
|
||||
>
|
||||
<input
|
||||
type="tel"
|
||||
id="seller_phone"
|
||||
name="seller_info.phone"
|
||||
class="border rounded w-full py-2 px-3"
|
||||
placeholder="Phone"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="images" class="block text-gray-700 font-bold mb-2"
|
||||
>Images (Select up to 4 images)</label
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
id="images"
|
||||
name="images"
|
||||
class="border rounded w-full py-2 px-3"
|
||||
accept="image/*"
|
||||
multiple
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
|
||||
type="submit"
|
||||
>
|
||||
Add Property
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-200 py-4 mt-auto">
|
||||
<div
|
||||
class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4"
|
||||
>
|
||||
<div class="mb-4 md:mb-0">
|
||||
<img src="/images/logo.png" alt="Logo" class="h-8 w-auto" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap justify-center md:justify-start mb-4 md:mb-0"
|
||||
>
|
||||
<ul class="flex space-x-4">
|
||||
<li><a href="/properties.html">Properties</a></li>
|
||||
<li><a href="/terms.html">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mt-2 md:mt-0">
|
||||
© 2024 PropertyPulse. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Map_Pin-2" data-name="Map Pin"><path d="m32 0a24.028 24.028 0 0 0 -24 24c0 16.228 22.342 38.756 23.293 39.707a1 1 0 0 0 1.414 0c.951-.951 23.293-23.479 23.293-39.707a24.028 24.028 0 0 0 -24-24z" fill="#fb5968"/><circle cx="32" cy="24" fill="#d8304c" r="13"/></g></svg>
|
||||
|
After Width: | Height: | Size: 360 B |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 145 KiB |
|
After Width: | Height: | Size: 163 KiB |
|
After Width: | Height: | Size: 192 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 260 KiB |
|
After Width: | Height: | Size: 188 KiB |
|
After Width: | Height: | Size: 231 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 360 KiB |
|
After Width: | Height: | Size: 140 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 260 KiB |
|
After Width: | Height: | Size: 185 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 216 KiB |
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 124 KiB |
@@ -0,0 +1,667 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.ico" />
|
||||
<title>Property Pulse | Find local rental properties</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="bg-blue-700 border-b border-blue-500">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-20 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center md:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button
|
||||
type="button"
|
||||
id="mobile-dropdown-button"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="block h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<a class="flex flex-shrink-0 items-center" href="/index.html">
|
||||
<img
|
||||
class="h-10 w-auto"
|
||||
src="/images/logo-white.png"
|
||||
alt="PropertyPulse"
|
||||
/>
|
||||
|
||||
<span class="hidden md:block text-white text-2xl font-bold ml-2"
|
||||
>PropertyPulse</span
|
||||
>
|
||||
</a>
|
||||
<!-- Desktop Menu Hidden below md screens -->
|
||||
<div class="hidden md:ml-6 md:block">
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Add Property</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged Out) -->
|
||||
<div class="hidden md:block md:ml-6">
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>
|
||||
<i class="fa-brands fa-google text-white mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged In) -->
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0"
|
||||
>
|
||||
<a href="messages.html" class="relative group">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full"
|
||||
>
|
||||
2
|
||||
<!-- Replace with the actual number of notifications -->
|
||||
</span>
|
||||
</a>
|
||||
<!-- Profile dropdown button -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
src="/images/profile.png"
|
||||
alt=""
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div
|
||||
id="user-menu"
|
||||
class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<a
|
||||
href="/profile.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-0"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="saved-properties.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Saved Properties</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Sign Out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pb-3 pt-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Add Property</a
|
||||
>
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2 my-4"
|
||||
>
|
||||
<i class="fa-brands fa-google mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-blue-700 py-20 mb-4">
|
||||
<div
|
||||
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center"
|
||||
>
|
||||
<div class="text-center">
|
||||
<h1
|
||||
class="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl"
|
||||
>
|
||||
Find The Perfect Rental
|
||||
</h1>
|
||||
<p class="my-4 text-xl text-white">
|
||||
Discover the perfect property that suits your needs.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Form Component -->
|
||||
<!-- <form class="mt-10 mx-auto max-w-lg w-full flex items-center">
|
||||
<div class="flex-1">
|
||||
<label for="location" class="sr-only">Location</label>
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
placeholder="Enter Location"
|
||||
class="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="ml-4 px-4 py-3 rounded-lg bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</form> -->
|
||||
<form
|
||||
class="mt-3 mx-auto max-w-2xl w-full flex flex-col md:flex-row items-center"
|
||||
>
|
||||
<div class="w-full md:w-3/5 md:pr-2 mb-4 md:mb-0">
|
||||
<label for="location" class="sr-only">Location</label>
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
placeholder="Enter Location (City, State, Zip, etc"
|
||||
class="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full md:w-2/5 md:pl-2">
|
||||
<label for="property-type" class="sr-only">Property Type</label>
|
||||
<select
|
||||
id="property-type"
|
||||
class="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
|
||||
>
|
||||
<option value="All">All</option>
|
||||
<option value="Apartment">Apartment</option>
|
||||
<option value="Studio">Studio</option>
|
||||
<option value="Condo">Condo</option>
|
||||
<option value="House">House</option>
|
||||
<option value="Cabin Or Cottage">Cabin or Cottage</option>
|
||||
<option value="Loft">Loft</option>
|
||||
<option value="Room">Room</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="md:ml-4 mt-4 md:mt-0 w-full md:w-auto px-6 py-3 rounded-lg bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Renters and Owners -->
|
||||
<section>
|
||||
<div class="container-xl lg:container m-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
|
||||
<div class="bg-gray-100 p-6 rounded-lg shadow-md">
|
||||
<h2 class="text-2xl font-bold">For Renters</h2>
|
||||
<p class="mt-2 mb-4">
|
||||
Find your dream rental property. Bookmark properties and contact
|
||||
owners.
|
||||
</p>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700"
|
||||
>
|
||||
Browse Properties
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-blue-100 p-6 rounded-lg shadow-md">
|
||||
<h2 class="text-2xl font-bold">For Property Owners</h2>
|
||||
<p class="mt-2 mb-4">
|
||||
List your properties and reach potential tenants. Rent as an
|
||||
airbnb or long term.
|
||||
</p>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="inline-block bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600"
|
||||
>
|
||||
Add Property
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Properties -->
|
||||
<section class="bg-blue-50 px-4 pt-6 pb-10">
|
||||
<div class="container-xl lg:container m-auto">
|
||||
<h2 class="text-3xl font-bold text-blue-500 mb-6 text-center">
|
||||
Featured Properties
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div
|
||||
class="bg-white rounded-xl shadow-md relative flex flex-col md:flex-row"
|
||||
>
|
||||
<img
|
||||
src="images/properties/f1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl md:rounded-tr-none md:rounded-l-xl w-full md:w-2/5"
|
||||
/>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold">Seaside Retreat</h3>
|
||||
<div class="text-gray-600 mb-4">Condo</div>
|
||||
<h3
|
||||
class="absolute top-[10px] left-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$2,500/wk
|
||||
</h3>
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 4
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 3
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
2,800 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Nightly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-200 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> Boston MA </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white rounded-xl shadow-md relative flex flex-col md:flex-row"
|
||||
>
|
||||
<img
|
||||
src="images/properties/e1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl md:rounded-tr-none md:rounded-l-xl w-full md:w-2/5"
|
||||
/>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold">Modern Downtown Studio</h3>
|
||||
<div class="text-gray-600 mb-4">Studio</div>
|
||||
<h3
|
||||
class="absolute top-[10px] left-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$4,200/mo
|
||||
</h3>
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 1
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 1
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
900 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Nightly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-200 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> Chicago IL </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recent Properties -->
|
||||
<section class="px-4 py-6">
|
||||
<div class="container-xl lg:container m-auto">
|
||||
<h2 class="text-3xl font-bold text-blue-500 mb-6 text-center">
|
||||
Recent Properties
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Listing 1 -->
|
||||
<div class="bg-white rounded-xl shadow-md relative">
|
||||
<img
|
||||
src="images/properties/a1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">Apartment</div>
|
||||
<h3 class="text-xl font-bold">Boston Commons Retreat</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$4,200/mo
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 3
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 2
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
1,500 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Monthly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between mb-4">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> Boston MA </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Listing 2 -->
|
||||
<div class="bg-white rounded-xl shadow-md relative">
|
||||
<img
|
||||
src="images/properties/b1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">Loft</div>
|
||||
<h3 class="text-xl font-bold">Cozy Downtown Loft</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$4,000/mo
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 2
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 2
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
1,800 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Monthly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between mb-4">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> New York NY </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Listing 3 -->
|
||||
<div class="bg-white rounded-xl shadow-md relative">
|
||||
<img
|
||||
src="images/properties/c1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">Condo</div>
|
||||
<h3 class="text-xl font-bold">Luxury Condo With a View</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$3,300/mo
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 3
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 2
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
2,200 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Nightly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Monthly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between mb-4">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> Los Angeles CA </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="m-auto max-w-lg my-10 px-6">
|
||||
<a
|
||||
href="properties.html"
|
||||
class="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
|
||||
>View All Properties</a
|
||||
>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-200 py-4 mt-auto">
|
||||
<div
|
||||
class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4"
|
||||
>
|
||||
<div class="mb-4 md:mb-0">
|
||||
<img src="/images/logo.png" alt="Logo" class="h-8 w-auto" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap justify-center md:justify-start mb-4 md:mb-0"
|
||||
>
|
||||
<ul class="flex space-x-4">
|
||||
<li><a href="/properties.html">Properties</a></li>
|
||||
<li><a href="/terms.html">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mt-2 md:mt-0">
|
||||
© 2024 PropertyPulse. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Mobile menu dropdown
|
||||
const mobileMenuButton = document.querySelector('#mobile-dropdown-button');
|
||||
const mobileMenu = document.querySelector('#mobile-menu');
|
||||
|
||||
mobileMenuButton.addEventListener('click', () =>
|
||||
mobileMenu.classList.toggle('hidden')
|
||||
);
|
||||
|
||||
// Profile dropdown
|
||||
const profileButton = document.querySelector('#user-menu-button');
|
||||
const profileDropdown = document.querySelector('#user-menu');
|
||||
|
||||
profileButton.addEventListener('click', () =>
|
||||
profileDropdown.classList.toggle('hidden')
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,321 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.ico" />
|
||||
<title>Property Pulse | Find local rental properties</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="bg-blue-700 border-b border-blue-500">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-20 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button
|
||||
type="button"
|
||||
id="mobile-dropdown-button"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="block h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<a class="flex flex-shrink-0 items-center" href="/index.html">
|
||||
<img
|
||||
class="h-10 w-auto"
|
||||
src="/images/logo-white.png"
|
||||
alt="PropertyPulse"
|
||||
/>
|
||||
|
||||
<span class="hidden sm:block text-white text-2xl font-bold ml-2"
|
||||
>PropertyPulse</span
|
||||
>
|
||||
</a>
|
||||
<!-- Desktop Menu Hidden below sm screens -->
|
||||
<div class="hidden sm:ml-6 sm:block">
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Add Property</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged Out) -->
|
||||
<div class="hidden sm:block sm:ml-6">
|
||||
<div class="flex items-center">
|
||||
<a
|
||||
href="/login.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Login</a
|
||||
>
|
||||
<a
|
||||
href="/register.html"
|
||||
class="ml-2 text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Register</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged In) -->
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
|
||||
>
|
||||
<a href="messages.html" class="relative group">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full"
|
||||
>
|
||||
2
|
||||
<!-- Replace with the actual number of notifications -->
|
||||
</span>
|
||||
</a>
|
||||
<!-- Profile dropdown button -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
src="/images/profile.png"
|
||||
alt=""
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div
|
||||
id="user-menu"
|
||||
class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<a
|
||||
href="/profile.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-0"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="saved-properties.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Saved Properties</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Sign Out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pb-3 pt-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Add Property</a
|
||||
>
|
||||
<a
|
||||
href="/login.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Login</a
|
||||
>
|
||||
<a
|
||||
href="/register.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Register</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="bg-blue-50 min-h-screen flex-grow">
|
||||
<div class="container m-auto max-w-lg py-24">
|
||||
<div
|
||||
class="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
|
||||
>
|
||||
<!-- Register Form-->
|
||||
<form>
|
||||
<h2 class="text-3xl text-center font-semibold mb-6">Login</h2>
|
||||
<!-- Alerts -->
|
||||
<!-- <div class="bg-green-200 font-semibold p-4 my-5">
|
||||
This is a success message alert
|
||||
</div>
|
||||
<div class="bg-red-200 font-semibold p-4 my-5">
|
||||
This is an error message alert
|
||||
</div> -->
|
||||
<!-- Google Button -->
|
||||
<div class="mb-4">
|
||||
<button
|
||||
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline flex items-center justify-center"
|
||||
type="submit"
|
||||
>
|
||||
<i class="fab fa-google mr-2"></i> Login with Google
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="my-6 font-semibold text-center">
|
||||
Or log in with your email address
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 font-bold mb-2">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
class="border rounded w-full py-2 px-3 mb-2"
|
||||
placeholder="Email address"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 font-bold mb-2">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
class="border rounded w-full py-2 px-3 mb-2"
|
||||
placeholder="Password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div>
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
|
||||
type="submit"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow"></div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-200 py-4 mt-auto">
|
||||
<div
|
||||
class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4"
|
||||
>
|
||||
<div class="mb-4 md:mb-0">
|
||||
<img src="/images/logo.png" alt="Logo" class="h-8 w-auto" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap justify-center md:justify-start mb-4 md:mb-0"
|
||||
>
|
||||
<ul class="flex space-x-4">
|
||||
<li><a href="/properties.html">Properties</a></li>
|
||||
<li><a href="/terms.html">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mt-2 md:mt-0">
|
||||
© 2024 PropertyPulse. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.ico" />
|
||||
<title>Property Pulse | Find local rental properties</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="bg-blue-700 border-b border-blue-500">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-20 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center md:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button
|
||||
type="button"
|
||||
id="mobile-dropdown-button"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="block h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<a class="flex flex-shrink-0 items-center" href="/index.html">
|
||||
<img
|
||||
class="h-10 w-auto"
|
||||
src="/images/logo-white.png"
|
||||
alt="PropertyPulse"
|
||||
/>
|
||||
|
||||
<span class="hidden md:block text-white text-2xl font-bold ml-2"
|
||||
>PropertyPulse</span
|
||||
>
|
||||
</a>
|
||||
<!-- Desktop Menu Hidden below md screens -->
|
||||
<div class="hidden md:ml-6 md:block">
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Add Property</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged Out) -->
|
||||
<div class="hidden md:block md:ml-6">
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>
|
||||
<i class="fa-brands fa-google text-white mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged In) -->
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0"
|
||||
>
|
||||
<a href="messages.html" class="relative group">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full"
|
||||
>
|
||||
2
|
||||
<!-- Replace with the actual number of notifications -->
|
||||
</span>
|
||||
</a>
|
||||
<!-- Profile dropdown button -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
src="/images/profile.png"
|
||||
alt=""
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div
|
||||
id="user-menu"
|
||||
class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<a
|
||||
href="/profile.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-0"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="saved-properties.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Saved Properties</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Sign Out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pb-3 pt-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Add Property</a
|
||||
>
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2 my-4"
|
||||
>
|
||||
<i class="fa-brands fa-google mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="bg-blue-50">
|
||||
<div class="container m-auto py-24 max-w-6xl">
|
||||
<div
|
||||
class="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
|
||||
>
|
||||
<h1 class="text-3xl font-bold mb-4">Your Messages</h1>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
class="relative bg-white p-4 rounded-md shadow-md border border-gray-200"
|
||||
>
|
||||
<h2 class="text-xl mb-4">
|
||||
<span class="font-bold">Property Inquiry:</span>
|
||||
Boston Commons Retreat
|
||||
</h2>
|
||||
<p class="text-gray-700">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Obcaecati libero nobis vero quos aspernatur nemo alias nam, odit
|
||||
dolores sed quaerat illum impedit quibusdam officia ad
|
||||
voluptatibus molestias sequi? Repudiandae!
|
||||
</p>
|
||||
|
||||
<ul class="mt-4">
|
||||
<li><strong>Name:</strong> John Doe</li>
|
||||
|
||||
<li>
|
||||
<strong>Reply Email:</strong>
|
||||
<a href="mailto:recipient@example.com" class="text-blue-500"
|
||||
>recipient@example.com</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Reply Phone:</strong>
|
||||
<a href="tel:123-456-7890" class="text-blue-500"
|
||||
>123-456-7890</a
|
||||
>
|
||||
</li>
|
||||
<li><strong>Received:</strong>1/1/2024 12:00 PM</li>
|
||||
</ul>
|
||||
<button
|
||||
class="mt-4 mr-3 bg-blue-500 text-white py-1 px-3 rounded-md"
|
||||
>
|
||||
Mark As Read
|
||||
</button>
|
||||
<button class="mt-4 bg-red-500 text-white py-1 px-3 rounded-md">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-200 py-4 mt-auto">
|
||||
<div
|
||||
class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4"
|
||||
>
|
||||
<div class="mb-4 md:mb-0">
|
||||
<img src="/images/logo.png" alt="Logo" class="h-8 w-auto" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap justify-center md:justify-start mb-4 md:mb-0"
|
||||
>
|
||||
<ul class="flex space-x-4">
|
||||
<li><a href="/properties.html">Properties</a></li>
|
||||
<li><a href="/terms.html">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mt-2 md:mt-0">
|
||||
© 2024 PropertyPulse. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,270 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.ico" />
|
||||
<title>Property Pulse | Find local rental properties</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="bg-blue-700 border-b border-blue-500">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-20 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center md:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button
|
||||
type="button"
|
||||
id="mobile-dropdown-button"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="block h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<a class="flex flex-shrink-0 items-center" href="/index.html">
|
||||
<img
|
||||
class="h-10 w-auto"
|
||||
src="/images/logo-white.png"
|
||||
alt="PropertyPulse"
|
||||
/>
|
||||
|
||||
<span class="hidden md:block text-white text-2xl font-bold ml-2"
|
||||
>PropertyPulse</span
|
||||
>
|
||||
</a>
|
||||
<!-- Desktop Menu Hidden below md screens -->
|
||||
<div class="hidden md:ml-6 md:block">
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Add Property</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged Out) -->
|
||||
<div class="hidden md:block md:ml-6">
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>
|
||||
<i class="fa-brands fa-google text-white mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged In) -->
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0"
|
||||
>
|
||||
<a href="messages.html" class="relative group">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full"
|
||||
>
|
||||
2
|
||||
<!-- Replace with the actual number of notifications -->
|
||||
</span>
|
||||
</a>
|
||||
<!-- Profile dropdown button -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
src="/images/profile.png"
|
||||
alt=""
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div
|
||||
id="user-menu"
|
||||
class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<a
|
||||
href="/profile.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-0"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="saved-properties.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Saved Properties</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Sign Out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pb-3 pt-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Add Property</a
|
||||
>
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2 my-4"
|
||||
>
|
||||
<i class="fa-brands fa-google mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="bg-blue-50 min-h-screen flex-grow">
|
||||
<div class="container m-auto max-w-2xl py-24">
|
||||
<div
|
||||
class="bg-white px-6 py-24 mb-4 shadow-md rounded-md border m-4 md:m-0"
|
||||
>
|
||||
<div class="flex justify-center">
|
||||
<i
|
||||
class="fas fa-exclamation-triangle fa-5x text-8xl text-yellow-400"
|
||||
></i>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h1 class="text-3xl font-bold mt-4 mb-2">Page Not Found</h1>
|
||||
<p class="text-gray-500 text-xl mb-10">
|
||||
The page you are looking for does not exist.
|
||||
</p>
|
||||
<a
|
||||
href="/index.html"
|
||||
class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-4 px-6 rounded"
|
||||
>Go Home</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow"></div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-200 py-4 mt-auto">
|
||||
<div
|
||||
class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4"
|
||||
>
|
||||
<div class="mb-4 md:mb-0">
|
||||
<img src="/images/logo.png" alt="Logo" class="h-8 w-auto" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap justify-center md:justify-start mb-4 md:mb-0"
|
||||
>
|
||||
<ul class="flex space-x-4">
|
||||
<li><a href="/properties.html">Properties</a></li>
|
||||
<li><a href="/terms.html">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mt-2 md:mt-0">
|
||||
© 2024 PropertyPulse. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,355 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.ico" />
|
||||
<title>Property Pulse | Find local rental properties</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="bg-blue-700 border-b border-blue-500">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-20 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center md:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button
|
||||
type="button"
|
||||
id="mobile-dropdown-button"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="block h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<a class="flex flex-shrink-0 items-center" href="/index.html">
|
||||
<img
|
||||
class="h-10 w-auto"
|
||||
src="/images/logo-white.png"
|
||||
alt="PropertyPulse"
|
||||
/>
|
||||
|
||||
<span class="hidden md:block text-white text-2xl font-bold ml-2"
|
||||
>PropertyPulse</span
|
||||
>
|
||||
</a>
|
||||
<!-- Desktop Menu Hidden below md screens -->
|
||||
<div class="hidden md:ml-6 md:block">
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Add Property</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged Out) -->
|
||||
<div class="hidden md:block md:ml-6">
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>
|
||||
<i class="fa-brands fa-google text-white mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged In) -->
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0"
|
||||
>
|
||||
<a href="messages.html" class="relative group">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full"
|
||||
>
|
||||
2
|
||||
<!-- Replace with the actual number of notifications -->
|
||||
</span>
|
||||
</a>
|
||||
<!-- Profile dropdown button -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div
|
||||
id="user-menu"
|
||||
class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<a
|
||||
href="/profile.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-0"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="saved-properties.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Saved Properties</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Sign Out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pb-3 pt-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Add Property</a
|
||||
>
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2 my-4"
|
||||
>
|
||||
<i class="fa-brands fa-google mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="bg-blue-50">
|
||||
<div class="container m-auto py-24">
|
||||
<div
|
||||
class="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
|
||||
>
|
||||
<h1 class="text-3xl font-bold mb-4">Your Profile</h1>
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="md:w-1/4 mx-20 mt-10">
|
||||
<div class="mb-4">
|
||||
<img
|
||||
class="h-32 w-32 md:h-48 md:w-48 rounded-full mx-auto md:mx-0"
|
||||
src="/images/profile.png"
|
||||
alt="User"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl mb-4"><span class="font-bold block">Name: </span> John Doe</h2>
|
||||
<h2 class="text-2xl"><span class="font-bold block">Email: </span> john@gmail.com</h2>
|
||||
|
||||
<!-- <form class="mb-10">
|
||||
<div class="text-lg font-semibold">
|
||||
<p class="mb-5">
|
||||
<label class="block mb-2" for="name">Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value="John Doe"
|
||||
class="border rounded-md px-2 py-1"
|
||||
/>
|
||||
</p>
|
||||
<p class="mb-5">
|
||||
<label class="block mb-2" for="email">Email:</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value="johndoe@example.com"
|
||||
class="border rounded-md px-2 py-1"
|
||||
/>
|
||||
</p>
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600"
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
</div> -->
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="md:w-3/4 md:pl-4">
|
||||
<h2 class="text-xl font-semibold mb-4">Your Listings</h2>
|
||||
<div class="mb-10">
|
||||
<a href="/property.html">
|
||||
<img
|
||||
class="h-32 w-full rounded-md object-cover"
|
||||
src="/images/properties/a1.jpg"
|
||||
alt="Property 1"
|
||||
/>
|
||||
</a>
|
||||
<div class="mt-2">
|
||||
<p class="text-lg font-semibold">Property Title 1</p>
|
||||
<p class="text-gray-600">Address: 123 Main St</p>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="/add-property.html"
|
||||
class="bg-blue-500 text-white px-3 py-3 rounded-md mr-2 hover:bg-blue-600"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
<button
|
||||
class="bg-red-500 text-white px-3 py-2 rounded-md hover:bg-red-600"
|
||||
type="button"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-10">
|
||||
<a href="/property.html">
|
||||
<img
|
||||
class="h-32 w-full rounded-md object-cover"
|
||||
src="/images/properties/b1.jpg"
|
||||
alt="Property 2"
|
||||
/>
|
||||
</a>
|
||||
<div class="mt-2">
|
||||
<p class="text-lg font-semibold">Property Title 2</p>
|
||||
<p class="text-gray-600">Address: 456 Elm St</p>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="/add-property.html"
|
||||
class="bg-blue-500 text-white px-3 py-3 rounded-md mr-2 hover:bg-blue-600"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
<button
|
||||
class="bg-red-500 text-white px-3 py-2 rounded-md hover:bg-red-600"
|
||||
type="button"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-200 py-4 mt-auto">
|
||||
<div
|
||||
class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4"
|
||||
>
|
||||
<div class="mb-4 md:mb-0">
|
||||
<img src="/images/logo.png" alt="Logo" class="h-8 w-auto" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap justify-center md:justify-start mb-4 md:mb-0"
|
||||
>
|
||||
<ul class="flex space-x-4">
|
||||
<li><a href="/properties.html">Properties</a></li>
|
||||
<li><a href="/terms.html">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mt-2 md:mt-0">
|
||||
© 2024 PropertyPulse. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,689 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.ico" />
|
||||
<title>Property Pulse | Find local rental properties</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="bg-blue-700 border-b border-blue-500">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-20 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center md:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button
|
||||
type="button"
|
||||
id="mobile-dropdown-button"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="block h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<a class="flex flex-shrink-0 items-center" href="/index.html">
|
||||
<img
|
||||
class="h-10 w-auto"
|
||||
src="/images/logo-white.png"
|
||||
alt="PropertyPulse"
|
||||
/>
|
||||
|
||||
<span class="hidden md:block text-white text-2xl font-bold ml-2"
|
||||
>PropertyPulse</span
|
||||
>
|
||||
</a>
|
||||
<!-- Desktop Menu Hidden below md screens -->
|
||||
<div class="hidden md:ml-6 md:block">
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Add Property</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged Out) -->
|
||||
<div class="hidden md:block md:ml-6">
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>
|
||||
<i class="fa-brands fa-google text-white mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged In) -->
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0"
|
||||
>
|
||||
<a href="messages.html" class="relative group">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full"
|
||||
>
|
||||
2
|
||||
<!-- Replace with the actual number of notifications -->
|
||||
</span>
|
||||
</a>
|
||||
<!-- Profile dropdown button -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
src="/images/profile.png"
|
||||
alt=""
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div
|
||||
id="user-menu"
|
||||
class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<a
|
||||
href="/profile.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-0"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="saved-properties.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Saved Properties</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Sign Out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pb-3 pt-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-gray-300 block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="bg-gray-900 text-white hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Add Property</a
|
||||
>
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2 my-4"
|
||||
>
|
||||
<i class="fa-brands fa-google mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Search -->
|
||||
<section class="bg-blue-700 py-4">
|
||||
<div
|
||||
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-start"
|
||||
>
|
||||
<!-- Form Component -->
|
||||
<form
|
||||
class="mt-3 mx-auto max-w-2xl w-full flex flex-col md:flex-row items-center"
|
||||
>
|
||||
<div class="w-full md:w-3/5 md:pr-2 mb-4 md:mb-0">
|
||||
<label for="location" class="sr-only">Location</label>
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
placeholder="Enter Location (City, State, Zip, etc"
|
||||
class="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full md:w-2/5 md:pl-2">
|
||||
<label for="property-type" class="sr-only">Property Type</label>
|
||||
<select
|
||||
id="property-type"
|
||||
class="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
|
||||
>
|
||||
<option value="All">All</option>
|
||||
<option value="Apartment">Apartment</option>
|
||||
<option value="Studio">Studio</option>
|
||||
<option value="Condo">Condo</option>
|
||||
<option value="House">House</option>
|
||||
<option value="Cabin Or Cottage">Cabin or Cottage</option>
|
||||
<option value="Loft">Loft</option>
|
||||
<option value="Room">Room</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="md:ml-4 mt-4 md:mt-0 w-full md:w-auto px-6 py-3 rounded-lg bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- All Listings -->
|
||||
<section class="px-4 py-6">
|
||||
<div class="container-xl lg:container m-auto px-4 py-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Listing 1 -->
|
||||
<div class="rounded-xl shadow-md relative">
|
||||
<img
|
||||
src="images/properties/a1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">Apartment</div>
|
||||
<h3 class="text-xl font-bold">Boston Commons Retreat</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$4,200/mo
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 3
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 2
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
1,500 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Monthly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between mb-4">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> Boston MA </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Listing 2 -->
|
||||
<div class="rounded-xl shadow-md relative">
|
||||
<img
|
||||
src="images/properties/b1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">Loft</div>
|
||||
<h3 class="text-xl font-bold">Cozy Downtown Loft</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$4,000/mo
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 2
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 2
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
1,800 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Monthly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between mb-4">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> New York NY </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Listing 3 -->
|
||||
<div class="rounded-xl shadow-md relative">
|
||||
<img
|
||||
src="images/properties/c1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">Condo</div>
|
||||
<h3 class="text-xl font-bold">Luxury Condo</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$3,300/mo
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 3
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 2
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
2,200 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Nightly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Monthly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between mb-4">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> Los Angeles CA </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Listing 4 -->
|
||||
<div class="rounded-xl shadow-md relative">
|
||||
<img
|
||||
src="images/properties/d1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">Cottage or Cabin</div>
|
||||
<h3 class="text-xl font-bold">Charming Cottage Getaway</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$2,000/wk
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 2
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 1
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
900 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> Austin TX </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Listing 5 -->
|
||||
<div class="rounded-xl shadow-md relative">
|
||||
<img
|
||||
src="images/properties/e1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">Studio</div>
|
||||
<h3 class="text-xl font-bold">Modern Downtown Studio</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$4,200/mo
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 1
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 1
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
900 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Monthly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between mb-4">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> Chicago IL </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Listing 6 -->
|
||||
<div class="rounded-xl shadow-md relative">
|
||||
<img
|
||||
src="images/properties/f1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">House</div>
|
||||
<h3 class="text-xl font-bold">Seaside Retreat</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$2,500/wk
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 4
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 3
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
2,800 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Monthly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between mb-4">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> Miami FL </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pagination -->
|
||||
<section class="container mx-auto flex justify-center my-8">
|
||||
<nav
|
||||
class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
|
||||
aria-label="Pagination"
|
||||
>
|
||||
<!-- Previous Button -->
|
||||
<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-700 hover:bg-gray-50"
|
||||
>
|
||||
<span class="sr-only">Previous</span>
|
||||
<!-- You can use an icon here, for example: <i class="fas fa-chevron-left"></i> -->
|
||||
Previous
|
||||
</a>
|
||||
|
||||
<!-- Page Numbers -->
|
||||
<a
|
||||
href="#"
|
||||
class="bg-blue-500 text-white hover:bg-blue-600 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium"
|
||||
>1</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>2</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>3</a
|
||||
>
|
||||
|
||||
<!-- Next Button -->
|
||||
<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-700 hover:bg-gray-50"
|
||||
>
|
||||
<span class="sr-only">Next</span>
|
||||
<!-- You can use an icon here, for example: <i class="fas fa-chevron-right"></i> -->
|
||||
Next
|
||||
</a>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-200 py-4 mt-auto">
|
||||
<div
|
||||
class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4"
|
||||
>
|
||||
<div class="mb-4 md:mb-0">
|
||||
<img src="/images/logo.png" alt="Logo" class="h-8 w-auto" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap justify-center md:justify-start mb-4 md:mb-0"
|
||||
>
|
||||
<ul class="flex space-x-4">
|
||||
<li><a href="/properties.html">Properties</a></li>
|
||||
<li><a href="/terms.html">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mt-2 md:mt-0">
|
||||
© 2024 PropertyPulse. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,560 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.ico" />
|
||||
<link
|
||||
href="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js"></script>
|
||||
<title>Property Pulse | Find local rental properties</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="bg-blue-700 border-b border-blue-500">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-20 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center md:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button
|
||||
type="button"
|
||||
id="mobile-dropdown-button"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="block h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<a class="flex flex-shrink-0 items-center" href="/index.html">
|
||||
<img
|
||||
class="h-10 w-auto"
|
||||
src="/images/logo-white.png"
|
||||
alt="PropertyPulse"
|
||||
/>
|
||||
|
||||
<span class="hidden md:block text-white text-2xl font-bold ml-2"
|
||||
>PropertyPulse</span
|
||||
>
|
||||
</a>
|
||||
<!-- Desktop Menu Hidden below md screens -->
|
||||
<div class="hidden md:ml-6 md:block">
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Add Property</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged Out) -->
|
||||
<div class="hidden md:block md:ml-6">
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>
|
||||
<i class="fa-brands fa-google text-white mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged In) -->
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0"
|
||||
>
|
||||
<a href="messages.html" class="relative group">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full"
|
||||
>
|
||||
2
|
||||
<!-- Replace with the actual number of notifications -->
|
||||
</span>
|
||||
</a>
|
||||
<!-- Profile dropdown button -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
src="/images/profile.png"
|
||||
alt=""
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div
|
||||
id="user-menu"
|
||||
class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<a
|
||||
href="/profile.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-0"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="saved-properties.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Saved Properties</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Sign Out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pb-3 pt-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Add Property</a
|
||||
>
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2 my-4"
|
||||
>
|
||||
<i class="fa-brands fa-google mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Search -->
|
||||
<section class="bg-blue-700 py-4">
|
||||
<div
|
||||
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-start"
|
||||
>
|
||||
<!-- Form Component -->
|
||||
<form
|
||||
class="mt-3 mx-auto max-w-2xl w-full flex flex-col md:flex-row items-center"
|
||||
>
|
||||
<div class="w-full md:w-3/5 md:pr-2 mb-4 md:mb-0">
|
||||
<label for="location" class="sr-only">Location</label>
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
placeholder="Enter Location (City, State, Zip, etc"
|
||||
class="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full md:w-2/5 md:pl-2">
|
||||
<label for="property-type" class="sr-only">Property Type</label>
|
||||
<select
|
||||
id="property-type"
|
||||
class="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
|
||||
>
|
||||
<option value="All">All</option>
|
||||
<option value="Apartment">Apartment</option>
|
||||
<option value="Studio">Studio</option>
|
||||
<option value="Condo">Condo</option>
|
||||
<option value="House">House</option>
|
||||
<option value="Cabin Or Cottage">Cabin or Cottage</option>
|
||||
<option value="Loft">Loft</option>
|
||||
<option value="Room">Room</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="md:ml-4 mt-4 md:mt-0 w-full md:w-auto px-6 py-3 rounded-lg bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Property Header Image -->
|
||||
<section>
|
||||
<div class="container-xl m-auto">
|
||||
<div class="grid grid-cols-1">
|
||||
<img
|
||||
src="images/properties/a1.jpg"
|
||||
alt=""
|
||||
class="object-cover h-[400px]"
|
||||
width="1800"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Go Back -->
|
||||
<section>
|
||||
<div class="container m-auto py-6 px-6">
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-blue-500 hover:text-blue-600 flex items-center"
|
||||
>
|
||||
<i class="fas fa-arrow-left mr-2"></i> Back to Properties
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<!-- Property Info -->
|
||||
<section class="bg-blue-50">
|
||||
<div class="container m-auto py-10 px-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
|
||||
<main>
|
||||
<div
|
||||
class="bg-white p-6 rounded-lg shadow-md text-center md:text-left"
|
||||
>
|
||||
<div class="text-gray-500 mb-4">Apartment</div>
|
||||
<h1 class="text-3xl font-bold mb-4">Boston Commons Retreat</h1>
|
||||
<div
|
||||
class="text-gray-500 mb-4 flex align-middle justify-center md:justify-start"
|
||||
>
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700 mr-2"
|
||||
></i>
|
||||
<p class="text-orange-700">
|
||||
120 Tremont Street Boston, MA 02111
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-bold my-6 bg-gray-800 text-white p-2">
|
||||
Rates & Options
|
||||
</h3>
|
||||
<div class="flex flex-col md:flex-row justify-around">
|
||||
<div
|
||||
class="flex items-center justify-center mb-4 border-b border-gray-200 md:border-b-0 pb-4 md:pb-0"
|
||||
>
|
||||
<div class="text-gray-500 mr-2 font-bold">Nightly</div>
|
||||
<div class="text-2xl font-bold">
|
||||
<i class="fa fa-xmark text-red-700"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center justify-center mb-4 border-b border-gray-200 md:border-b-0 pb-4 md:pb-0"
|
||||
>
|
||||
<div class="text-gray-500 mr-2 font-bold">Weekly</div>
|
||||
<div class="text-2xl font-bold text-blue-500">$1,100</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mb-4 pb-4 md:pb-0">
|
||||
<div class="text-gray-500 mr-2 font-bold">Monthly</div>
|
||||
<div class="text-2xl font-bold text-blue-500">$4,200</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
|
||||
<h3 class="text-lg font-bold mb-6">Description & Details</h3>
|
||||
<div
|
||||
class="flex justify-center gap-4 text-blue-500 mb-4 text-xl space-x-9"
|
||||
>
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 3
|
||||
<span class="hidden sm:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 2
|
||||
<span class="hidden sm:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
1,500 <span class="hidden sm:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-gray-500 mb-4">
|
||||
This is a beautiful apartment located near the commons
|
||||
</p>
|
||||
<p class="text-gray-500 mb-4">
|
||||
We have a beautiful apartment located near the commons. It is a
|
||||
2 bedroom apartment with a full kitchen and bathroom. It is
|
||||
available for weekly or monthly rentals.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
|
||||
<h3 class="text-lg font-bold mb-6">Amenities</h3>
|
||||
|
||||
<ul
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 list-none"
|
||||
>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i> Wifi
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i>Full
|
||||
kitchen
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i>Washer &
|
||||
Dryer
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i>Free
|
||||
Parking
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i>Hot Tub
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i>24/7
|
||||
Security
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i
|
||||
>Wheelchair Accessible
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i>Elevator
|
||||
Access
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i
|
||||
>Dishwasher
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i
|
||||
>Gym/Fitness Center
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i>Air
|
||||
Conditioning
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i
|
||||
>Balcony/Patio
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i>Smart TV
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-check text-green-600 mr-2 mt-3"></i>Coffee
|
||||
Maker
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="space-y-4">
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-600 text-white font-bold w-full py-2 px-4 rounded-full flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-bookmark mr-2"></i> Bookmark Property
|
||||
</button>
|
||||
<button
|
||||
class="bg-orange-500 hover:bg-orange-600 text-white font-bold w-full py-2 px-4 rounded-full flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-share mr-2"></i> Share Property
|
||||
</button>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||
<h3 class="text-xl font-bold mb-6">Contact Property Manager</h3>
|
||||
<form>
|
||||
<div className='mb-4'>
|
||||
<label
|
||||
className='block text-gray-700 text-sm font-bold mb-2'
|
||||
htmlFor='name'
|
||||
>
|
||||
Name:
|
||||
</label>
|
||||
<input
|
||||
className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
|
||||
id='name'
|
||||
type='text'
|
||||
placeholder='Enter your name'
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label
|
||||
class="block text-gray-700 text-sm font-bold mb-2"
|
||||
for="email"
|
||||
>
|
||||
Email:
|
||||
</label>
|
||||
<input
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className='mb-4'>
|
||||
<label
|
||||
className='block text-gray-700 text-sm font-bold mb-2'
|
||||
htmlFor='phone'
|
||||
>
|
||||
Phone:
|
||||
</label>
|
||||
<input
|
||||
className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
|
||||
id='phone'
|
||||
type='text'
|
||||
placeholder='Enter your phone number'
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label
|
||||
class="block text-gray-700 text-sm font-bold mb-2"
|
||||
for="message"
|
||||
>
|
||||
Message:
|
||||
</label>
|
||||
<textarea
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 h-44 focus:outline-none focus:shadow-outline"
|
||||
id="message"
|
||||
placeholder="Enter your message"
|
||||
></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline flex items-center justify-center"
|
||||
type="submit"
|
||||
>
|
||||
<i class="fas fa-paper-plane mr-2"></i> Send Message
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-200 py-4 mt-auto">
|
||||
<div
|
||||
class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4"
|
||||
>
|
||||
<div class="mb-4 md:mb-0">
|
||||
<img src="/images/logo.png" alt="Logo" class="h-8 w-auto" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap justify-center md:justify-start mb-4 md:mb-0"
|
||||
>
|
||||
<ul class="flex space-x-4">
|
||||
<li><a href="/properties.html">Properties</a></li>
|
||||
<li><a href="/terms.html">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mt-2 md:mt-0">
|
||||
© 2024 PropertyPulse. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script>
|
||||
mapboxgl.accessToken =
|
||||
'pk.eyJ1IjoiYnRyYXZlcnN5IiwiYSI6ImNrbmh0dXF1NzBtbnMyb3MzcTBpaG10eXcifQ.h5ZyYCglnMdOLAGGiL1Auw';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map', // container ID
|
||||
center: [-71.062095, 42.3551], // Boston Tremont St location [lng, lat]
|
||||
zoom: 14, // starting zoom
|
||||
});
|
||||
|
||||
// Add a marker at 120 Tremont St
|
||||
new mapboxgl.Marker().setLngLat([-71.062095, 42.3551]).addTo(map);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,351 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.ico" />
|
||||
<title>Property Pulse | Find local rental properties</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="bg-blue-700 border-b border-blue-500">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-20 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button
|
||||
type="button"
|
||||
id="mobile-dropdown-button"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="block h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<a class="flex flex-shrink-0 items-center" href="/index.html">
|
||||
<img
|
||||
class="h-10 w-auto"
|
||||
src="/images/logo-white.png"
|
||||
alt="PropertyPulse"
|
||||
/>
|
||||
|
||||
<span class="hidden sm:block text-white text-2xl font-bold ml-2"
|
||||
>PropertyPulse</span
|
||||
>
|
||||
</a>
|
||||
<!-- Desktop Menu Hidden below sm screens -->
|
||||
<div class="hidden sm:ml-6 sm:block">
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Add Property</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged Out) -->
|
||||
<div class="hidden sm:block sm:ml-6">
|
||||
<div class="flex items-center">
|
||||
<a
|
||||
href="/login.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Login</a
|
||||
>
|
||||
<a
|
||||
href="/register.html"
|
||||
class="ml-2 text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Register</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged In) -->
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
|
||||
>
|
||||
<a href="messages.html" class="relative group">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full"
|
||||
>
|
||||
2
|
||||
<!-- Replace with the actual number of notifications -->
|
||||
</span>
|
||||
</a>
|
||||
<!-- Profile dropdown button -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
src="/images/profile.png"
|
||||
alt=""
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div
|
||||
id="user-menu"
|
||||
class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<a
|
||||
href="/profile.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-0"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="saved-properties.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Saved Properties</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Sign Out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pb-3 pt-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Add Property</a
|
||||
>
|
||||
<a
|
||||
href="/login.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Login</a
|
||||
>
|
||||
<a
|
||||
href="/register.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Register</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="bg-blue-50 min-h-screen flex-grow">
|
||||
<div class="container m-auto max-w-lg py-24">
|
||||
<div
|
||||
class="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
|
||||
>
|
||||
<!-- Register Form-->
|
||||
<form>
|
||||
<h2 class="text-3xl text-center font-semibold mb-6">
|
||||
Create An Account
|
||||
</h2>
|
||||
<!-- Alerts -->
|
||||
<!-- <div class="bg-green-200 font-semibold p-4 my-5">
|
||||
This is a success message alert
|
||||
</div>
|
||||
<div class="bg-red-200 font-semibold p-4 my-5">
|
||||
This is an error message alert
|
||||
</div> -->
|
||||
<!-- Google Button -->
|
||||
<div class="mb-4">
|
||||
<button
|
||||
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline flex items-center justify-center"
|
||||
type="submit"
|
||||
>
|
||||
<i class="fab fa-google mr-2"></i> Register with Google
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="my-6 font-semibold text-center">
|
||||
Or register with your email address
|
||||
</div>
|
||||
<!-- Name -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 font-bold mb-2">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
class="border rounded w-full py-2 px-3 mb-2"
|
||||
placeholder="Full name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 font-bold mb-2">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
class="border rounded w-full py-2 px-3 mb-2"
|
||||
placeholder="Email address"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 font-bold mb-2">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
class="border rounded w-full py-2 px-3 mb-2"
|
||||
placeholder="Password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 font-bold mb-2"
|
||||
>Confirm Password</label
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
id="password2"
|
||||
name="password2"
|
||||
class="border rounded w-full py-2 px-3 mb-2"
|
||||
placeholder="Confirm Password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div>
|
||||
<button
|
||||
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
|
||||
type="submit"
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow"></div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-200 py-4 mt-auto">
|
||||
<div
|
||||
class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4"
|
||||
>
|
||||
<div class="mb-4 md:mb-0">
|
||||
<img src="/images/logo.png" alt="Logo" class="h-8 w-auto" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap justify-center md:justify-start mb-4 md:mb-0"
|
||||
>
|
||||
<ul class="flex space-x-4">
|
||||
<li><a href="/properties.html">Properties</a></li>
|
||||
<li><a href="/terms.html">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mt-2 md:mt-0">
|
||||
© 2024 PropertyPulse. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,553 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.ico" />
|
||||
<title>Property Pulse | Find local rental properties</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="bg-blue-700 border-b border-blue-500">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-20 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center md:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button
|
||||
type="button"
|
||||
id="mobile-dropdown-button"
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="absolute -inset-0.5"></span>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg
|
||||
class="block h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
|
||||
>
|
||||
<!-- Logo -->
|
||||
<a class="flex flex-shrink-0 items-center" href="/index.html">
|
||||
<img
|
||||
class="h-10 w-auto"
|
||||
src="/images/logo-white.png"
|
||||
alt="PropertyPulse"
|
||||
/>
|
||||
|
||||
<span class="hidden md:block text-white text-2xl font-bold ml-2"
|
||||
>PropertyPulse</span
|
||||
>
|
||||
</a>
|
||||
<!-- Desktop Menu Hidden below md screens -->
|
||||
<div class="hidden md:ml-6 md:block">
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>Add Property</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged Out) -->
|
||||
<div class="hidden md:block md:ml-6">
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
|
||||
>
|
||||
<i class="fa-brands fa-google text-white mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Menu (Logged In) -->
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0"
|
||||
>
|
||||
<a href="messages.html" class="relative group">
|
||||
<button
|
||||
type="button"
|
||||
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">View notifications</span>
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full"
|
||||
>
|
||||
2
|
||||
<!-- Replace with the actual number of notifications -->
|
||||
</span>
|
||||
</a>
|
||||
<!-- Profile dropdown button -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img
|
||||
class="h-8 w-8 rounded-full"
|
||||
src="/images/profile.png"
|
||||
alt=""
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div
|
||||
id="user-menu"
|
||||
class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu-button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<a
|
||||
href="/profile.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-0"
|
||||
>Your Profile</a
|
||||
>
|
||||
<a
|
||||
href="saved-properties.html"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Saved Properties</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
id="user-menu-item-2"
|
||||
>Sign Out</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<div class="hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pb-3 pt-2">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/properties.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Properties</a
|
||||
>
|
||||
<a
|
||||
href="/add-property.html"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"
|
||||
>Add Property</a
|
||||
>
|
||||
<button
|
||||
class="flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2 my-4"
|
||||
>
|
||||
<i class="fa-brands fa-google mr-2"></i>
|
||||
<span>Login or Register</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- All Listings -->
|
||||
<section class="px-4 py-6">
|
||||
<div class="container-xl lg:container m-auto px-4 py-6">
|
||||
<h1 class="text-3xl font-bold mb-6">Your Saved Properties</h1>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Listing 1 -->
|
||||
<div class="rounded-xl shadow-md relative">
|
||||
<!-- Remove button -->
|
||||
<button
|
||||
class="absolute top-0 left-0 mt-2 ml-2 w-8 h-8 p-2 rounded-full bg-white flex items-center justify-center transition-colors hover:bg-red-100"
|
||||
>
|
||||
<i class="fas fa-trash text-red-600"></i>
|
||||
</button>
|
||||
<img
|
||||
src="images/properties/a1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">Apartment</div>
|
||||
<h3 class="text-xl font-bold">Boston Commons Retreat</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$4,200/mo
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 3
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 2
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
1,500 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Monthly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between mb-4">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> Boston MA </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Listing 2 -->
|
||||
<div class="rounded-xl shadow-md relative">
|
||||
<!-- Remove button -->
|
||||
<button
|
||||
class="absolute top-0 left-0 mt-2 ml-2 w-8 h-8 p-2 rounded-full bg-white flex items-center justify-center transition-colors hover:bg-red-100"
|
||||
>
|
||||
<i class="fas fa-trash text-red-600"></i>
|
||||
</button>
|
||||
<img
|
||||
src="images/properties/b1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">Loft</div>
|
||||
<h3 class="text-xl font-bold">Cozy Downtown Loft</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$4,000/mo
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 2
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 2
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
1,800 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Monthly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between mb-4">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> New York NY </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Listing 3 -->
|
||||
<div class="rounded-xl shadow-md relative">
|
||||
<!-- Remove button -->
|
||||
<button
|
||||
class="absolute top-0 left-0 mt-2 ml-2 w-8 h-8 p-2 rounded-full bg-white flex items-center justify-center transition-colors hover:bg-red-100"
|
||||
>
|
||||
<i class="fas fa-trash text-red-600"></i>
|
||||
</button>
|
||||
<img
|
||||
src="images/properties/c1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">Condo</div>
|
||||
<h3 class="text-xl font-bold">Luxury Condo</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$3,300/mo
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 3
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 2
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
2,200 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Nightly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Monthly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between mb-4">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> Los Angeles CA </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Listing 4 -->
|
||||
<div class="rounded-xl shadow-md relative">
|
||||
<!-- Remove button -->
|
||||
<button
|
||||
class="absolute top-0 left-0 mt-2 ml-2 w-8 h-8 p-2 rounded-full bg-white flex items-center justify-center transition-colors hover:bg-red-100"
|
||||
>
|
||||
<i class="fas fa-trash text-red-600"></i>
|
||||
</button>
|
||||
<img
|
||||
src="images/properties/d1.jpg"
|
||||
alt=""
|
||||
class="object-cover rounded-t-xl"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="text-left md:text-center lg:text-left mb-6">
|
||||
<div class="text-gray-600">Cottage or Cabin</div>
|
||||
<h3 class="text-xl font-bold">Charming Cottage Getaway</h3>
|
||||
</div>
|
||||
<h3
|
||||
class="absolute top-[10px] right-[10px] bg-white px-4 py-2 rounded-lg text-blue-500 font-bold text-right md:text-center lg:text-right"
|
||||
>
|
||||
$2,000/wk
|
||||
</h3>
|
||||
|
||||
<div class="flex justify-center gap-4 text-gray-500 mb-4">
|
||||
<p>
|
||||
<i class="fa-solid fa-bed"></i> 2
|
||||
<span class="md:hidden lg:inline">Beds</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-bath"></i> 1
|
||||
<span class="md:hidden lg:inline">Baths</span>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa-solid fa-ruler-combined"></i>
|
||||
900 <span class="md:hidden lg:inline">sqft</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex justify-center gap-4 text-green-900 text-sm mb-4"
|
||||
>
|
||||
<p><i class="fa-solid fa-money-bill"></i> Weekly</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-100 mb-5"></div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between">
|
||||
<div class="flex align-middle gap-2 mb-4 lg:mb-0">
|
||||
<i
|
||||
class="fa-solid fa-location-dot text-lg text-orange-700"
|
||||
></i>
|
||||
<span class="text-orange-700"> Austin TX </span>
|
||||
</div>
|
||||
<a
|
||||
href="property.html"
|
||||
class="h-[36px] bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-center text-sm"
|
||||
>
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pagination -->
|
||||
<section class="container mx-auto flex justify-center my-8">
|
||||
<nav
|
||||
class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
|
||||
aria-label="Pagination"
|
||||
>
|
||||
<!-- Previous Button -->
|
||||
<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-700 hover:bg-gray-50"
|
||||
>
|
||||
<span class="sr-only">Previous</span>
|
||||
<!-- You can use an icon here, for example: <i class="fas fa-chevron-left"></i> -->
|
||||
Previous
|
||||
</a>
|
||||
|
||||
<!-- Page Numbers -->
|
||||
<a
|
||||
href="#"
|
||||
class="bg-blue-500 text-white hover:bg-blue-600 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium"
|
||||
>1</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>2</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>3</a
|
||||
>
|
||||
|
||||
<!-- Next Button -->
|
||||
<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-700 hover:bg-gray-50"
|
||||
>
|
||||
<span class="sr-only">Next</span>
|
||||
<!-- You can use an icon here, for example: <i class="fas fa-chevron-right"></i> -->
|
||||
Next
|
||||
</a>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-200 py-4 mt-auto">
|
||||
<div
|
||||
class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4"
|
||||
>
|
||||
<div class="mb-4 md:mb-0">
|
||||
<img src="/images/logo.png" alt="Logo" class="h-8 w-auto" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap justify-center md:justify-start mb-4 md:mb-0"
|
||||
>
|
||||
<ul class="flex space-x-4">
|
||||
<li><a href="/properties.html">Properties</a></li>
|
||||
<li><a href="/terms.html">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 mt-2 md:mt-0">
|
||||
© 2024 PropertyPulse. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -1,33 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import '@/assets/styles/globals.css';
|
||||
|
||||
export const metadata = {
|
||||
title: 'PropertyPulse',
|
||||
description: 'Find The Perfect Rental Property',
|
||||
keywords: 'rental, property, real estate',
|
||||
};
|
||||
|
||||
const MainLayout = ({ children }) => {
|
||||
return (
|
||||
<html lang='en'>
|
||||
<body>
|
||||
<main>{children}</main>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainLayout;
|
||||
@@ -1,113 +0,0 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
|
||||
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
|
||||
Get started by editing
|
||||
<code className="font-mono font-bold">app/page.js</code>
|
||||
</p>
|
||||
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
|
||||
<a
|
||||
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
|
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
By{" "}
|
||||
<Image
|
||||
src="/vercel.svg"
|
||||
alt="Vercel Logo"
|
||||
className="dark:invert"
|
||||
width={100}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
|
||||
<Image
|
||||
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js Logo"
|
||||
width={180}
|
||||
height={37}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
|
||||
<a
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Docs{" "}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Find in-depth information about Next.js features and API.
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Learn{" "}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Learn about Next.js in an interactive course with quizzes!
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Templates{" "}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
||||
Explore starter templates for Next.js.
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<h2 className={`mb-3 text-2xl font-semibold`}>
|
||||
Deploy{" "}
|
||||
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
||||
->
|
||||
</span>
|
||||
</h2>
|
||||
<p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
|
||||
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
const HomePage = () => {
|
||||
return <h1 className='text-2xl'>HomePage</h1>;
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Map_Pin-2" data-name="Map Pin"><path d="m32 0a24.028 24.028 0 0 0 -24 24c0 16.228 22.342 38.756 23.293 39.707a1 1 0 0 0 1.414 0c.951-.951 23.293-23.479 23.293-39.707a24.028 24.028 0 0 0 -24-24z" fill="#fb5968"/><circle cx="32" cy="24" fill="#d8304c" r="13"/></g></svg>
|
||||
|
After Width: | Height: | Size: 360 B |
|
After Width: | Height: | Size: 19 KiB |
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 145 KiB |
|
After Width: | Height: | Size: 163 KiB |
|
After Width: | Height: | Size: 192 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 260 KiB |
|
After Width: | Height: | Size: 188 KiB |
|
After Width: | Height: | Size: 231 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 360 KiB |
|
After Width: | Height: | Size: 140 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 260 KiB |
|
After Width: | Height: | Size: 185 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 216 KiB |
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 124 KiB |
@@ -1,16 +1,17 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
||||
"gradient-conic":
|
||||
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
||||
fontFamily: {
|
||||
sans: ['Poppins', 'sans-serif'],
|
||||
},
|
||||
gridTemplateColumns: {
|
||||
'70/30': '70% 28%',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||