web_php/hotel_booking/rooms.php

228 lines
No EOL
8 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rooms & Accommodation | Midtown Hotel</title>
<?php require('./components/link.php') ?>
<style>
.room-hero{
position: relative;
height: 100vh;
background-size: cover;
background-position: center;
background-image: url(images/home4.jpg);
width: 100%;
display: flex;
flex-direction: column;
}
.frame{
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 50px;
margin-top: 100px;
}
.frame1{
width: 60px;
height: 80px;
border: 1px solid black;
}
.frame2{
width: 40px;
height: 60px;
border: 1px solid black;
margin-top: 10px;
margin-left: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}
.frame-title{
text-transform: uppercase;
letter-spacing: 5px;
font-size: 12px;
}
.about-img{
width: 100%;
height: 600px;
object-fit: cover;
border-radius: 5px;
}
.room-title{
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
}
.room-detail{
border: 1px solid #E7E1D8;
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{
width: 40px;
height: 60px;
}
.frame2{
width: 20px;
height: 40px;
font-size: 16px;
}
.swiper{
width: 100%;
height: 500px
}
.about-img{
width:100%;
height: 500px;
}
}
@media (max-width:768px){
.room-detail{
margin-top: 5px;
}
}
@media (max-width:450px) {
.swiper{
width: 100%;
height: 450px
}
.about-img{
height: 450px;
}
}
</style>
</head>
<body>
<!--Hero & Navbar section-->
<div class="room-hero">
<div class="load"></div>
<?php require('./components/header.php') ?>
<div class="hero-content">
<div class="hero-head">
<h1 class="hero-title">Rooms</h1>
<p class="hero-subtitle">Comfortable accommodation directly in the hotel with extensive services</p>
</div>
</div>
</div>
<!--Rooms section-->
<?php
$data = filteration($_GET);
$room_res = select("SELECT * FROM `rooms` WHERE `status`=? AND `removed`=?", [1, 0], 'ii');
while($room_data = mysqli_fetch_assoc($room_res)){
//get accommodation data from database
$accom_q = mysqli_query($con, "SELECT a.name FROM `accommodation` a INNER JOIN `room_accommodation` raccom ON a.id = raccom.accommodation_id WHERE raccom.room_id = '$room_data[id]'");
$accommodation_data = "";
while($accom_row = mysqli_fetch_assoc($accom_q)){
$accommodation_data .="<p><i class='bx bx-checkbox-checked'></i>$accom_row[name]</p>";
}
//get additional accommodation data from database
$addi_q = mysqli_query($con, "SELECT a.name FROM `additional_accomm` a INNER JOIN `room_additionalAccom` raddi ON a.id = raddi.additionalAccom_id WHERE raddi.room_id = '$room_data[id]'");
$additionalAccom_data = "";
while($addi_row = mysqli_fetch_assoc($addi_q)){
$additionalAccom_data .="<p><i class='bx bx-checkbox-checked'></i>$addi_row[name]</p>";
}
//get multiple images
$room_img = ROOM_IMG_PATH."logo.png";
$img_q = mysqli_query($con, "SELECT * FROM `room_images` WHERE `room_id`='$room_data[id]'");
$room_img_display ="";
while($img_res = mysqli_fetch_assoc($img_q)){
$room_img_display .="
<div class='swiper-slide $active_class'>
<img src='".ROOM_IMG_PATH.$img_res['image']."' class='about-img'/>
</div>
";
}
//display room
echo <<< data
<div class="panel" data-color="white" style="margin-bottom: 100px;">
<div class="frame">
<div class="frame1">
<div class="frame2"><i class='bx bx-award'></i></div>
</div>
<p class="frame-title">$room_data[name]</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">
$room_img_display
</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>$accommodation_data</div>
</div>
<div class="my-3 mx-2">
<p class="room-title">Additional Accommodation</p>
<div>$additionalAccom_data</div>
</div>
<div class="my-3 mx-2">
<p class="room-title">Room Detail</p>
<div style="font-size: 14px;">$room_data[detail]</div>
</div>
<div class="d-flex gap-2 items-center justify-content-center m-4">
<a href="./booking.php" class="btn-main d-block" style="font-size: 14px;">Booking</a>
</div>
</div>
</div>
</div>
</div>
</div>
data;
}
?>
<!--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>