Initial setup

This commit is contained in:
Brad Traversy
2024-07-08 12:16:56 -04:00
parent 876858453d
commit 8594385db2
100 changed files with 6639 additions and 170 deletions
+2
View File
@@ -27,6 +27,8 @@ yarn-error.log*
# local env files # local env files
.env*.local .env*.local
.env
.DS_Store
# vercel # vercel
.vercel .vercel
+656
View File
@@ -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">
&copy; 2024 PropertyPulse. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
File diff suppressed because it is too large Load Diff
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

+1
View File
@@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 360 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 149 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

+667
View File
@@ -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">
&copy; 2024 PropertyPulse. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
+17
View File
@@ -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')
);
});
+321
View File
@@ -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">
&copy; 2024 PropertyPulse. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
+297
View File
@@ -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">
&copy; 2024 PropertyPulse. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
+270
View File
@@ -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">
&copy; 2024 PropertyPulse. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
+355
View File
@@ -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">
&copy; 2024 PropertyPulse. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
+689
View File
@@ -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">
&copy; 2024 PropertyPulse. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
+560
View File
@@ -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">
&copy; 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>
+351
View File
@@ -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">
&copy; 2024 PropertyPulse. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
+553
View File
@@ -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">
&copy; 2024 PropertyPulse. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

-33
View File
@@ -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;
}
}
-17
View File
@@ -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>
);
}
+19
View File
@@ -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;
-113
View File
@@ -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&nbsp;
<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">
-&gt;
</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">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Learn about Next.js in an interactive course with&nbsp;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">
-&gt;
</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">
-&gt;
</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>
);
}
+5
View File
@@ -0,0 +1,5 @@
const HomePage = () => {
return <h1 className='text-2xl'>HomePage</h1>;
};
export default HomePage;
Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

+1
View File
@@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

+3
View File
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 360 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 149 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

+8 -7
View File
@@ -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%',
}, },
}, },
}, },