From 66940a8535dcaed2867768b75b9811817483097a Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Wed, 12 Jun 2024 15:41:57 -0500
Subject: [PATCH] updated booking, rooms, index page

---
 hotel_booking/booking.php | 96 ++++++++++++++++++++++++++++++---------
 hotel_booking/index.php   |  8 ++--
 hotel_booking/rooms.php   |  8 ++--
 3 files changed, 84 insertions(+), 28 deletions(-)

diff --git a/hotel_booking/booking.php b/hotel_booking/booking.php
index cec67df..d8dbfd4 100644
--- a/hotel_booking/booking.php
+++ b/hotel_booking/booking.php
@@ -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>
 
diff --git a/hotel_booking/index.php b/hotel_booking/index.php
index 2fedc65..23de8bd 100644
--- a/hotel_booking/index.php
+++ b/hotel_booking/index.php
@@ -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>
diff --git a/hotel_booking/rooms.php b/hotel_booking/rooms.php
index 52aaf55..9365fa1 100644
--- a/hotel_booking/rooms.php
+++ b/hotel_booking/rooms.php
@@ -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>