muayjtp/web_php
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated booking, rooms, index page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-12 15:41:57 -05:00
parent 3e5a18f8f8
commit 66940a8535
3 changed files with 84 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
hotel_booking/booking.php
View file

@ -22,9 +22,6 @@
color: #B0A695;
text-shadow: 1px 1px 2px #EAD8C0;
}
@media (max-width:765px){
.booking-hero{
height: 100px;
@ -39,46 +36,103 @@
<p class="booking-title">Rooms available</p>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="col-lg-3 col-md-12 mb-2">
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow rounded">
<div class="container-fluid flex-lg-column align-items-stretch">
<p class="mt-2" style="text-transform: capitalize; font-weight: 600; font-size: 18px;">Filter bookings</p>
<p class="mt-2" style="font-weight: 600; font-size: 18px;">Filter By:</p>
<button class="navbar-toggler shadow-none border-none mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#filterDropdown" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="bi bi-sort-down"></i>
</button>
<div class="collapse navbar-collapse flex-column align-items-stretch" id="filterDropdown">
<div class="border bg-white p-3 rounded mb-3">
<p class="mb-2" style="font-weight: 500;">Availability</p>
<label class="form-label">Check-in</label>
<div class="border bg-white p-3 rounded mb-2">
<p class="mb-2" style="font-weight: 600;">Availability</p>
<label class="form-label" style="font-size: 14px;">Check-in</label>
<input type="date" class="form-control shadow-none mb-4" style="font-size: 14px;"/>
<label class="form-label">Check-out</label>
<label class="form-label" style="font-size: 14px;">Check-out</label>
<input type="date" class="form-control shadow-none" style="font-size: 14px;"/>
</div>
<div class="border bg-white p-3 rounded mb-3">
<p class="mb-2" style="font-weight: 500;">Room Types</p>
<div class="border bg-white p-3 rounded mb-2">
<p class="mb-2" style="font-weight: 600;">Guests</p>
<div class="d-flex gap-2">
<div class="mb-2" style="font-size: 14px;">
<label class="form-label">Adults</label>
<input type="number" class="form-control shadow-none" min="1"/>
</div>
<div class="mb-2" style="font-size: 14px;">
<label class="form-label">Children</label>
<input type="number" class="form-control shadow-none" min="0"/>
</div>
</div>
</div>
<div class="border bg-white p-3 rounded mb-2">
<p class="mb-2" style="font-weight: 600;">Room Types</p>
<div class="mb-1">
<input type="checkbox" id="f1" class="form-check-input shadow-none"/>
<label class="form-check-label" for="f1" style="font-size: 14px;">Standard room</label>
<input type="checkbox" id="room1" class="form-check-input shadow-none"/>
<label class="form-check-label" for="room1" style="font-size: 14px;">Standard room</label>
</div>
<div class="mb-1">
<input type="checkbox" id="f1" class="form-check-input shadow-none"/>
<label class="form-check-label" for="f1" style="font-size: 14px;">Deluxe room</label>
<input type="checkbox" id="room2" class="form-check-input shadow-none"/>
<label class="form-check-label" for="room2" style="font-size: 14px;">Deluxe room</label>
</div>
<div class="mb-1">
<input type="checkbox" id="f1" class="form-check-input shadow-none"/>
<label class="form-check-label" for="f1" style="font-size: 14px;">Double room</label>
<input type="checkbox" id="room3" class="form-check-input shadow-none"/>
<label class="form-check-label" for="room3" style="font-size: 14px;">Double room</label>
</div>
<div class="mb-1">
<input type="checkbox" id="f1" class="form-check-input shadow-none"/>
<label class="form-check-label" for="f1" style="font-size: 14px;">Suit room</label>
<input type="checkbox" id="room4" class="form-check-input shadow-none"/>
<label class="form-check-label" for="room4" style="font-size: 14px;">Suit room</label>
</div>
</div>
<div class="border bg-white p-3 rounded mb-2">
<p class="mb-2" style="font-weight: 600;">Useful Infomation</p>
<div class="mb-2">
<p style="font-size: 12px; line-height: 10px;">&bull; Unlimited access to the pools.</p>
<p style="font-size: 12px; margin-top: -5px;">&bull; Sauna service (include with room types or for a fee).</p>
<p style="font-size: 12px; margin-top: -10px;">&bull; Massage service (include with room types or for a fee).</p>
</div>
<p class="mb-2" style="font-weight: 600;">Check-in/Check-out</p>
<div class="mb-2">
<p style="font-size: 12px;"><span style="font-weight: 600;">Check-in:</span> 3:00 pm or anytime afterwards.</p>
<p style="font-size: 12px;"><span style="font-weight: 600;">Check-out:</span> until 11:00 am.</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="col-lg-9 col-md-12">
<div class="card mb-3 shadow">
<div class="row g-0 p-2 align-items-center">
<div class="col-lg-4 col-md-5 mb-lg-0 mb-3">
<img src="./images/home3.jpg" class="img-fluid rounded" alt="room">
</div>
<div class="col-lg-6 col-md-5 px-lg-2 px-md-2 px-0">
<p class="mb-1" style="font-size: 20px; font-weight: 600;">Standard room</p>
<div class="accommodation">
<p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Accommodation</p>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Air conditioning</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Desk</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Hairdryer</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Television</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wi-Fi</span>
</div>
<div class="extra-accommodation mt-2 mb-2">
<p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Additional Accommodation</p>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Sauna (Steam sauna)</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Massage (Aromatherapy massage)</span>
</div>
</div>
<div class="col-md-2">
<p class="mb-4 text-center mt-lg-0 mt-4">$99 per night</p>
<a href="#" class="btn-main d-block mb-2" style="font-size: 14px;">Book Now</a>
<a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
</div>
</div>
</div>
</div>
</div>
</div>

8
hotel_booking/index.php
View file

@ -23,6 +23,7 @@
<div class="col-lg-12 bg-white shadow p-3 rounded">
<form>
<div class="row">
<p class="d-flex justify-content-center mb-4" style="color: #948979; font-size: 18px; font-weight: 600; text-transform: uppercase;">Quick Reservation</p>
<div class="col-lg-3">
<label class="form-label" style="color: black; font-weight: 500;">Check-in</label>
<input type="date" class="form-control shadow-none" style="font-size: 14px;"/>
@ -55,7 +56,7 @@
</div>
<div class="col-lg-2">
<div class="d-grid" style="align-items: center; margin-top: 30px;">
<button type="submit" class="btn btn-dark shadow-none d-block" style="font-size: 14px; font-weight: 500;">Submit</button>
<button type="submit" class="btn btn-dark shadow-none d-block" style="font-size: 14px; font-weight: 500;">Serach</button>
</div>
</div>
</div>
@ -122,7 +123,8 @@
<p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Extra Accommodation</p>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Sauna</span>
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Massages</span>
</div>
<div class="d-flex gap-2 items-center justify-content-center mt-4">
<a href="./rooms.php" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
@ -216,7 +218,7 @@
</div>
<div class="col-lg-12 text-center mt-5 mb-2">
<a href="" class="btn-th">Booking</a>
<a href="./booking.php" class="btn-th">Booking</a>
</div>
</div>
</div>

8
hotel_booking/rooms.php
View file

@ -179,7 +179,7 @@
</div>
</div>
<div class="d-flex gap-2 items-center justify-content-center m-4">
<a href="#" class="btn-main d-block" style="font-size: 14px;">Booking</a>
<a href="./booking.php" class="btn-main d-block" style="font-size: 14px;">Booking</a>
</div>
</div>
</div>
@ -235,7 +235,7 @@
</div>
</div>
<div class="d-flex gap-2 items-center justify-content-center m-4">
<a href="#" class="btn-main d-block" style="font-size: 14px;">Booking</a>
<a href="./booking.php" class="btn-main d-block" style="font-size: 14px;">Booking</a>
</div>
</div>
</div>
@ -291,7 +291,7 @@
</div>
</div>
<div class="d-flex gap-2 items-center justify-content-center m-4">
<a href="#" class="btn-main d-block" style="font-size: 14px;">Booking</a>
<a href="./booking.php" class="btn-main d-block" style="font-size: 14px;">Booking</a>
</div>
</div>
</div>
@ -347,7 +347,7 @@
</div>
</div>
<div class="d-flex gap-2 items-center justify-content-center m-4">
<a href="#" class="btn-main d-block" style="font-size: 14px;">Booking</a>
<a href="./booking.php" class="btn-main d-block" style="font-size: 14px;">Booking</a>
</div>
</div>
</div>