web_php/hotel_booking/contact.php

416 lines
No EOL
16 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact | Midtown Hotel</title>
<?php require('./components/link.php') ?>
<style>
.contact-hero{
position: relative;
height: 100vh;
background-size: cover;
background-position: center;
background-image: url(images/contact.jpg);
width: 100%;
display: flex;
flex-direction: column;
}
.contact-container{
width: 80%;
display: flex;
justify-content: space-between;
position: relative;
align-items: center;
margin: 150px auto;
}
.contact-wrapper{
height:100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.video-contact{
width: 100%;
height: auto;
}
.container-accordion{
display: flex;
flex-direction: column;
min-width: 950px;
margin-bottom: 50px;
padding: 20px;
}
.accordion{
background-color: white;
padding: 12px;
cursor: pointer;
border-top: 1px solid #B0A695;
border-left: 1px solid #B0A695;
border-right: 1px solid #B0A695;
}
.accordin_{
border-bottom: 1px solid #B0A695;
}
.accordion-header{
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: transparent;
font-size: 28px;
cursor: pointer;
padding: 5px;
color: #271E24;
}
.accordion-header span{
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.accordion-body{
color: #444;
font-size: 14px;
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity .3s
}
.accordion-body.active{
height: 100%;
opacity: 1;
padding: 5px;
}
.accordion-wrapper{
width: 100%;
background-color: #F6F4F3;
border: 1px solid #ECE4DC;
display: flex;
flex-direction: column;
}
.accordion-text{
display: flex;
width: 90%;
justify-content: space-between;
margin: auto;
margin-top: 20px;
font-size: 20px;
font-weight: 500;
}
.accordion-area{
width: 90%;
padding: 10px 10px 0px 10px;
display: flex;
justify-content: space-between;
margin: auto;
border-top: 1px solid #ECE4DC;
border-left: 1px solid #ECE4DC;
border-right: 1px solid #ECE4DC;
background-color: white;
}
.accordion-area_{
border-bottom: 1px solid #ECE4DC;
margin-bottom: 20px;
}
.arrow{
transition: transform .2s linear;
}
.accordion:has(.active) .arrow{
transform: rotate(180deg);
}
.custom-alert{
position: fixed;
top: 25px;
right: 25px;
}
@media (max-width:980px) {
.contact-container{
flex-direction: column;
gap: 50px;
margin: 75px auto;
width: 95%;
}
.accordion-header{
font-size: 24px;
}
.container-accordion{
min-width: 100%;
}
}
@media (max-width:760px) {
.accordion-text{
font-size: 15px;
font-weight: 600;
}
.accordion-area{
flex-direction: column;
align-items: center;
}
}
@media (max-width:450px) {
.contact-hero{
height: 80vh;
}
.contact-container{
margin: 50px auto;
}
.accordion-header{
font-size: 20px;
}
.contact-form-title{
margin-top: 0px;
}
}
input[type=text], input[type=email], select, textarea {
display: inline-block;
box-sizing: border-box;
vertical-align: top;
width: 100%;
height: 30px;
margin-bottom: 10px;
padding: 20px 0px 20px 10px;
color: #333;
text-align: left;
border: 1px solid #747264;
background-color: #F6F4F3;
border-radius: 4px;
background-clip: padding-box;
outline: none;
resize: none;
}
input[type=submit] {
border: 1px solid #747264;
background-color: #F6F4F3;
border-radius: 4px;
color: black;
cursor: pointer;
display: inline-block;
width: 100%;
text-align: center;
white-space: nowrap;
padding: 10px 15px 10px;
}
input[type=submit]:hover{
background-color: #747264;
color: white;
transition: all 0.5s ease;
}
.contact-form-container {
max-width: 910px;
margin: 30px 20px 50px 20px;
background-color: #fff;
padding: 20px;
border: 1px solid #747264;
}
.contact-form-title{
margin-top: 100px;
padding-bottom: 10px;
text-align: center;"
}
</style>
</head>
<body>
<!--Hero & Navbar section-->
<div class="contact-hero">
<?php require('./components/header.php') ?>
<div class="hero-content">
<div class="hero-head">
<h1 class="hero-title">Contact</h1>
<p class="hero-subtitle">We look forward to assisting you with arranging your </br> next stay at Midtown hotel</p>
</div>
</div>
</div>
<?php
$contact_q = "SELECT * FROM `contact_detail` WHERE `sr_no`=?";
$values = [1];
$contact_r = mysqli_fetch_assoc(select($contact_q, $values, 'i'))
?>
<div class="panel" data-color="white">
<div class="contact-container">
<div class="contact-wrapper">
<p style="margin-bottom: 50px; color: #BFB4A4; font-weight: 500; letter-spacing: 1px;">Address</p>
<p style="text-align: center; font-size: 28px;">Midtown Hotel</p>
<!--<p style="text-align: center;">36381 Trantow Hill, New Port, FL 57941</p>-->
<p style="text-align: center;"><?php echo $contact_r['address']?></p>
<div class="col-lg-12 text-center mt-5 mb-2">
<a href="https://www.google.com/maps/place/Florida/@28.1703405,-82.5355157,7.46z/data=!4m6!3m5!1s0x88c1766591562abf:0xf72e13d35bc74ed0!8m2!3d27.6648274!4d-81.5157535!16zL20vMDJ4cnk?entry=ttu" class="btn-th">Open map</a>
</div>
</div>
<div class="contact-wrapper">
<video class="video-contact" autoplay muted loop>
<source src="./images/video.mp4" type="video/mp4" >
</video>
</div>
</div>
<div class="container-accordion">
<div class="accordion">
<button class="accordion-header">
<div style="display: flex; flex-direction: column; align-items: start;">
<span>Booking and information</span>
<p style="font-size: 14px;">(Contacts for booking rooms and info)</p>
</div>
<i class='bx bx-chevron-down arrow'></i>
</button>
<div class="accordion-body">
<div class="accordion-wrapper">
<div class="accordion-text">
<p>Monday-Saturday</p>
<p>8:00am - 5:00pm</p>
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Phone</p>
<p><?php echo $contact_r['booking_phone']?></p>
</div>
<div class="accordion-area accordion-area_">
<p style="font-weight: 500; font-size: 18px">Email</p>
<p><?php echo $contact_r['booking_email']?></p>
</div>
</div>
</div>
</div>
<div class="accordion">
<button class="accordion-header">
<div style="display: flex; flex-direction: column; align-items: start;">
<span>Reservations and events</span>
<p style="font-size: 14px;">(Contacts for events and group bookings)</p>
</div>
<i class='bx bx-chevron-down arrow'></i>
</button>
<div class="accordion-body">
<div class="accordion-wrapper">
<div class="accordion-text">
<p>Monday-Friday</p>
<p>9:00am - 5:00pm</p>
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Phone</p>
<p><?php echo $contact_r['reserve_phone']?></p>
</div>
<div class="accordion-area accordion-area_">
<p style="font-weight: 500; font-size: 18px">Email</p>
<p><?php echo $contact_r['reserve_email']?></p>
</div>
</div>
</div>
</div>
<div class="accordion">
<button class="accordion-header">
<div style="display: flex; flex-direction: column; align-items: start;">
<span>Reception</span>
<p style="font-size: 14px;">(Contacts for guests)</p>
</div>
<i class='bx bx-chevron-down arrow'></i>
</button>
<div class="accordion-body">
<div class="accordion-wrapper">
<div class="accordion-text">
<p>Monday-Saturday</p>
<p>8:00am - 5:00pm</p>
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Phone</p>
<p><?php echo $contact_r['recep_phone']?></p>
</div>
<div class="accordion-area accordion-area_">
<p style="font-weight: 500; font-size: 18px">Email</p>
<p><?php echo $contact_r['recep_email']?></p>
</div>
</div>
</div>
</div>
<div class="accordion accordin_">
<button class="accordion-header">
<div style="display: flex; flex-direction: column; align-items: start;">
<span>Office Manager</span>
<p style="font-size: 14px;">(Contact hotel manager)</p>
</div>
<i class='bx bx-chevron-down arrow'></i>
</button>
<div class="accordion-body">
<div class="accordion-wrapper">
<div class="accordion-text">
<p>Monday-Saturday</p>
<p>9:00am - 5:00pm</p>
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Hotel Manager</p>
<?php
$team_r = selectAll('team_detail');
$path = MANAGMENT_IMG_PATH;
while($row = mysqli_fetch_assoc($team_r)){
echo <<<data
<div>
<img src="$path$row[image]" style="width:100px; height: 100px; object-fit: cover;"/>
<p style="margin-top: 10px; text-align: center;">$row[name]</p>
</div>
data;
}
?>
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Phone</p>
<p style="text-align: center;"><?php echo $contact_r['offi_phone']?></p>
</div>
<div class="accordion-area accordion-area_">
<p style="font-weight: 500; font-size: 18px">Email</p>
<p style="text-align: center;"><?php echo $contact_r['offi_email']?></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel" data-color="pink" style="min-height: 100%;">
<h1 class="contact-form-title">Contact Form</h1>
<p style="text-align: center; margin-left: 20px; margin-right: 20px;">Can't find the contact and information you're looking for? Write to us via this quick form.</p>
<div class="contact-form-container shadow">
<form method="POST">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" size="30" required></label>
<input type="text" name="subject" placeholder="Subject" required>
<textarea name="message" placeholder="Message" style="height:200px" required></textarea>
<div class="d-flex justify-content-center items-center" >
<button type="submit" name="send" class="btn-main">Send</button>
</div>
</form>
</div>
</div>
<?php
if(isset($_POST['send'])){
$frm_data = filteration($_POST);
$q = "INSERT INTO `user_query`(`name`, `email`, `subject`, `message`) VALUES (?, ?, ?, ?)";
$values = [$frm_data['name'], $frm_data['email'], $frm_data['subject'], $frm_data['message']];
$res = insert($q, $values, 'ssss');
if($res ==1){
alert('success', 'Your message is sent.');
} else{
alert('error', 'Fail to send your message.');
}
}
?>
<!--footer-->
<?php require('./components/footer.php'); ?>
<?php require('./components/script.php') ?>
<script>
const accordions = document.querySelectorAll('.accordion')
accordions.forEach((accordion) => {
accordion.addEventListener('click', () => {
const body = accordion.querySelector('.accordion-body')
body.classList.toggle('active')
})
})
</script>
</body>
</html>