228 lines
No EOL
8 KiB
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>
|