From cd053173c6763cde9b7d2f32cb197218eb335bd3 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Wed, 12 Jun 2024 08:24:46 -0500
Subject: [PATCH] updated room page & index page

---
 hotel_booking/index.php |  33 ++++--
 hotel_booking/rooms.php | 229 +++++++++++++++++++++++++++++++++++++++-
 hotel_booking/script.js |  19 +---
 3 files changed, 251 insertions(+), 30 deletions(-)

diff --git a/hotel_booking/index.php b/hotel_booking/index.php
index 67f0bb8..2fedc65 100644
--- a/hotel_booking/index.php
+++ b/hotel_booking/index.php
@@ -125,8 +125,7 @@
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
                             </div>
                             <div class="d-flex gap-2 items-center justify-content-center mt-4">
-                                <a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
-                                <a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
+                                <a href="./rooms.php" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
                             </div>
                         </div>
                     </div>
@@ -154,8 +153,7 @@
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
                             </div>
                             <div class="d-flex gap-2 items-center justify-content-center mt-4">
-                                <a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
-                                <a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
+                                <a href="./rooms.php" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
                             </div>
                         </div>
                     </div>
@@ -183,8 +181,7 @@
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
                             </div>
                             <div class="d-flex gap-2 items-center justify-content-center mt-4">
-                                <a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
-                                <a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
+                                <a href="./rooms.php" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
                             </div>
                         </div>
                     </div>
@@ -212,15 +209,14 @@
                                 <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
                             </div>
                             <div class="d-flex gap-2 items-center justify-content-center mt-4">
-                                <a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
-                                <a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
+                                <a href="./rooms.php" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-12 text-center mt-5 mb-2">
-                    <a href="" class="btn-th">More</a>
+                    <a href="" class="btn-th">Booking</a>
                 </div>
             </div>
         </div>
@@ -288,5 +284,24 @@
 
 
     <?php require('./components/script.php') ?>
+    <script>
+        var swiper = new Swiper(".mySwiper", {
+            spaceBetween: 30,
+            centeredSlides: true,
+            effect: "fade",
+            autoplay: {
+            delay: 2500,
+            disableOnInteraction: false,
+            },
+        });
+        var swiper = new Swiper(".swiper-testimonials", {
+        spaceBetween: 30,
+        centeredSlides: true,
+        autoplay: {
+            delay: 2500,
+            disableOnInteraction: false,
+        },
+        });
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/hotel_booking/rooms.php b/hotel_booking/rooms.php
index 1d0c4e1..52aaf55 100644
--- a/hotel_booking/rooms.php
+++ b/hotel_booking/rooms.php
@@ -60,6 +60,27 @@
             border-radius: 5px; 
             background-color: #F6F4F2; 
         }
+        .swiper{
+            width: 100%;
+            height: 600px
+        }
+        .swiper-slide{
+            text-align: center;
+            font-size: 18px;
+            background: #F6F4F2;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .swiper-slide img{
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .swiper-pagination-bullet-active{
+            background-color: #E7E1D8 !important;
+        }
 
         @media (max-width:990px){
             .frame1{
@@ -71,6 +92,10 @@
                 height: 40px;
                 font-size: 16px;
             }
+            .swiper{
+                width: 100%;
+                height: 500px
+            }
             .about-img{ 
                 width:100%;
                 height: 500px;
@@ -82,10 +107,14 @@
             }
         }
         @media (max-width:450px) {
+            .swiper{
+                width: 100%;
+                height: 450px
+            }
             .about-img{
                 height: 450px; 
             }
-        }
+        }    
     </style>
 </head>
 <body>
@@ -111,7 +140,20 @@
         <div class="container">
             <div class="row">
                 <div class="col-md-6 d-flex justify-content-center">
-                    <img src="./images/home3.jpg" class="about-img"/>
+                    <div class="swiper mySwiper">
+                        <div class="swiper-wrapper">
+                                <div class="swiper-slide">
+                                    <img src="./images/home3.jpg" class="about-img"/>
+                                </div>
+                                <div class="swiper-slide">
+                                    <img src="./images/home3.jpg" class="about-img"/>
+                                </div>
+                                <div class="swiper-slide">
+                                    <img src="./images/home3.jpg" class="about-img"/>
+                                </div>
+                            </div>
+                        <div class="swiper-pagination"></div>
+                    </div>
                 </div>
                 <div class="col-md-6">
                     <div class="room-detail">
@@ -139,17 +181,198 @@
                         <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>
                         </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="panel" data-color="white">
+        <div class="frame">
+            <div class="frame1">
+                <div class="frame2">II</div>
+            </div>
+            <p class="frame-title">Deluxe room</p>
+        </div>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 d-flex justify-content-center">
+                    <div class="swiper mySwiper">
+                        <div class="swiper-wrapper">
+                                <div class="swiper-slide">
+                                    <img src="./images/home3.jpg" class="about-img"/>
+                                </div>
+                                <div class="swiper-slide">
+                                    <img src="./images/home3.jpg" class="about-img"/>
+                                </div>
+                                <div class="swiper-slide">
+                                    <img src="./images/home3.jpg" class="about-img"/>
+                                </div>
+                            </div>
+                        <div class="swiper-pagination"></div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="room-detail">
+                        <div class="my-3 mx-2">
+                            <p class="room-title">Accommodation</p>
+                            <div>
+                                <p><i class='bx bx-checkbox-checked'></i> A king bed size (76" x 80").</p>
+                                <p><i class='bx bx-checkbox-checked'></i> A bathroom with a shower or bathtub, toilet, and sink including toiletries.</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Furniture: A closet, bedside tables, a desk, and chairs.</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Electronic Devices: A television, telephone, mini-fridge, coffee maker, hairdryer.</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Heating and air conditioning</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Wi-Fi and wired internet access</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Housekeeping</p>
+                            </div>
                         </div>
+                        <div class="my-3 mx-2">
+                            <p class="room-title">Extra Accommodation</p>
+                            <div>
+                                <p><i class='bx bx-checkbox-checked'></i> Breakfast</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Swimming Pools</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Sauna (Steam sauna)</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Massage (Aromatherapy massage)</p>
+                            </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>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="panel" data-color="white">
+        <div class="frame">
+            <div class="frame1">
+                <div class="frame2">III</div>
+            </div>
+            <p class="frame-title">Double room</p>
+        </div>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 d-flex justify-content-center">
+                    <div class="swiper mySwiper">
+                        <div class="swiper-wrapper">
+                                <div class="swiper-slide">
+                                    <img src="./images/home3.jpg" class="about-img"/>
+                                </div>
+                                <div class="swiper-slide">
+                                    <img src="./images/home3.jpg" class="about-img"/>
+                                </div>
+                                <div class="swiper-slide">
+                                    <img src="./images/home3.jpg" class="about-img"/>
+                                </div>
+                            </div>
+                        <div class="swiper-pagination"></div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="room-detail">
+                        <div class="my-3 mx-2">
+                            <p class="room-title">Accommodation</p>
+                            <div>
+                                <p><i class='bx bx-checkbox-checked'></i> A king bed size (76" x 80").</p>
+                                <p><i class='bx bx-checkbox-checked'></i> A bathroom with a shower or bathtub, toilet, and sink including toiletries.</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Furniture: A closet, bedside tables, a desk, and chairs.</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Electronic Devices: A television, telephone, mini-fridge, coffee maker, hairdryer.</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Heating and air conditioning</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Wi-Fi and wired internet access</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Housekeeping</p>
+                            </div>
+                        </div>
+                        <div class="my-3 mx-2">
+                            <p class="room-title">Extra Accommodation</p>
+                            <div>
+                                <p><i class='bx bx-checkbox-checked'></i> Breakfast</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Swimming Pools</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Sauna (Steam sauna)</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Massage (Aromatherapy massage)</p>
+                            </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>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="panel" data-color="white">
+        <div class="frame">
+            <div class="frame1">
+                <div class="frame2">IV</div>
+            </div>
+            <p class="frame-title">Suit room</p>
+        </div>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 d-flex justify-content-center">
+                    <div class="swiper mySwiper">
+                        <div class="swiper-wrapper">
+                                <div class="swiper-slide">
+                                    <img src="./images/home3.jpg" class="about-img"/>
+                                </div>
+                                <div class="swiper-slide">
+                                    <img src="./images/home3.jpg" class="about-img"/>
+                                </div>
+                                <div class="swiper-slide">
+                                    <img src="./images/home3.jpg" class="about-img"/>
+                                </div>
+                            </div>
+                        <div class="swiper-pagination"></div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="room-detail">
+                        <div class="my-3 mx-2">
+                            <p class="room-title">Accommodation</p>
+                            <div>
+                                <p><i class='bx bx-checkbox-checked'></i> A king bed size (76" x 80").</p>
+                                <p><i class='bx bx-checkbox-checked'></i> A bathroom with a shower or bathtub, toilet, and sink including toiletries.</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Furniture: A closet, bedside tables, a desk, and chairs.</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Electronic Devices: A television, telephone, mini-fridge, coffee maker, hairdryer.</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Heating and air conditioning</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Wi-Fi and wired internet access</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Housekeeping</p>
+                            </div>
+                        </div>
+                        <div class="my-3 mx-2">
+                            <p class="room-title">Extra Accommodation</p>
+                            <div>
+                                <p><i class='bx bx-checkbox-checked'></i> Breakfast</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Swimming Pools</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Sauna (Steam sauna)</p>
+                                <p><i class='bx bx-checkbox-checked'></i> Massage (Aromatherapy massage)</p>
+                            </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>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
     
 
-
     <!--footer-->
     <?php require('./components/footer.php'); ?>
 
     <?php require('./components/script.php') ?>
+    <script>
+        var swiper = new Swiper(".mySwiper", {
+            spaceBetween: 30,
+            centeredSlides: true,
+            autoplay: {
+                delay: 2500,
+                disableOnInteraction: false,
+            },
+            pagination: {
+                el: ".swiper-pagination",
+                clickable: true,
+            },
+        });
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/hotel_booking/script.js b/hotel_booking/script.js
index 54449ef..f333a48 100644
--- a/hotel_booking/script.js
+++ b/hotel_booking/script.js
@@ -51,21 +51,4 @@ $(window).scroll(function() {
       }
     });    
 }).scroll();
-//===== swiper =====//
-var swiper = new Swiper(".mySwiper", {
-    spaceBetween: 30,
-    centeredSlides: true,
-    effect: "fade",
-    autoplay: {
-      delay: 2500,
-      disableOnInteraction: false,
-    },
-});
-var swiper = new Swiper(".swiper-testimonials", {
-  spaceBetween: 30,
-  centeredSlides: true,
-  autoplay: {
-    delay: 2500,
-    disableOnInteraction: false,
-  },
-});
+