Initial setup
@@ -27,6 +27,8 @@ yarn-error.log*
|
|||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env*.local
|
.env*.local
|
||||||
|
.env
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
# vercel
|
# vercel
|
||||||
.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} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: [
|
content: [
|
||||||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
backgroundImage: {
|
fontFamily: {
|
||||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
sans: ['Poppins', 'sans-serif'],
|
||||||
"gradient-conic":
|
},
|
||||||
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
gridTemplateColumns: {
|
||||||
|
'70/30': '70% 28%',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||