416 lines
No EOL
16 KiB
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>
|