<!DOCTYPE html>
<?php
// Turn off error reporting
error_reporting(0);
include "admin/config/koneksi.php";
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- title -->
<title>Mountana-Villa</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="images/logo.jpeg">
<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
<!-- fontawesome -->
<link rel="stylesheet" href="assets/css/all.min.css">
<!-- bootstrap -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
<!-- owl carousel -->
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<!-- magnific popup -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- animate css -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- mean menu css -->
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<!-- main style -->
<link rel="stylesheet" href="assets/css/main.css">
<!-- responsive -->
<link rel="stylesheet" href="assets/css/responsive.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<style>
.form-booking {
background: #fff;
border-radius: 10px;
padding: 0.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
max-width: 800px;
margin: 0 auto;
width: 100%;
}
.input-icon {
position: relative;
flex: 1 1 140px;
min-width: 120px;
max-width: 100%;
}
.input-icon i {
position: absolute;
top: 50%;
left: 12px;
transform: translateY(-50%);
color: #17a2b8;
pointer-events: none;
}
.input-icon input,
.input-icon select {
padding-left: 2rem;
border-radius: 25px;
border: 1px solid #ccc;
height: 40px;
width: 100%;
}
.btn-submit {
border-radius: 25px;
height: 40px;
white-space: nowrap;
padding: 0 1.2rem;
flex: 0 0 auto;
}
::placeholder {
font-size: 0.75rem; /* atau coba 12px */
}
/* Untuk kompatibilitas browser lain */
input::-webkit-input-placeholder {
font-size: 0.75rem;
}
input:-moz-placeholder {
font-size: 0.75rem;
}
input::-moz-placeholder {
font-size: 0.75rem;
}
input:-ms-input-placeholder {
font-size: 0.75rem;
}
select.form-control {
font-size: 0.35rem; /* Atur sesuai keinginan */
}
select.form-control option:first-child {
color: #999; /* Warna abu-abu agar terlihat seperti placeholder */
font-style: italic;
}
.input-icon-wrapper {
position: relative;
}
.input-icon-wrapper i {
position: absolute;
top: 50%;
left: 12px;
transform: translateY(-50%);
color: #17a2b8; /* Bootstrap info color */
font-size: 1rem;
}
.input-icon-wrapper input,
.input-icon-wrapper select {
padding-left: 2rem; /* Supaya teks tidak menabrak ikon */
font-size: 0.4rem;
}
::placeholder {
font-size: 0.75rem;
}
</style>
</head>
<body>
<!--PreLoader-->
<!--<div class="loader">-->
<!-- <div class="loader-inner">-->
<!-- <div class="circle"></div>-->
<!-- </div>-->
<!--</div>-->
<!--PreLoader Ends-->
<!-- Header -->
<div class="top-header-area" id="sticker">
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12 text-center">
<div class="main-menu-wrap">
<!-- Logo di atas menu -->
<div class="text-center mb-3">
<a href="#">
<img src="images/logo-mountana.jpg" alt="Mountana Villa" style="max-height: 250px;">
</a>
</div>
<!-- Main Menu -->
<nav class="main-menu d-none d-lg-block">
<ul>
<li class="current-list-item"><a href="Home">Home</a></li>
<li><a href="About">Tentang Kami</a></li>
<li><a href="Booking">Cara Booking</a></li>
<li><a href="Galleri">Galeri Villa</a></li>
<li><a href="Contact">Kontak Kami</a></li>
<li><a href="#"></a></li>
</ul>
</nav>
<!-- Mobile Menu -->
<div class="mobile-menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Hero Area -->
<div class="hero-area hero-bg">
<div class="container">
<div id="headerCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<!-- Slide 1 -->
<div class="carousel-item active">
<img src="images/caroseul1.jpeg" height="100%" width="100%" alt="Slide 1">
<div class="carousel-caption d-block">
<form class="form-booking row no-gutters justify-content-center" action="Search" method="POST" id="formBooking">
<!-- Input Tanggal -->
<div class="col-4 col-sm-4 px-1 mb-2 mb-sm-0">
<div class="input-icon-wrapper">
<i class="fa fa-calendar"></i>
<input name="tanggal" type="text" id="tanggal" class="form-control border rounded" placeholder="Tanggal">
</div>
</div>
<!-- Select Durasi -->
<div class="col-4 col-sm-3 px-1 mb-2 mb-sm-0">
<div class="input-icon-wrapper">
<i class="fa fa-clock"></i>
<select name="durasi" id="durasi" class="form-control border rounded">
<option selected disabled value="">Durasi</option>
<option value="1">1 malam</option>
<option value="2">2 malam</option>
<option value="3">3 malam</option>
<option value="4">4 malam</option>
<option value="5">5 malam</option>
</select>
</div>
</div>
<!-- Tombol Cek -->
<div class="col-4 col-sm-auto px-1">
<button type="submit" id="btnCek" class="btn btn-info btn-sm btn-block text-white" disabled>
<i class="fa fa-search mr-1"></i> Cek
</button>
</div>
</form>
</div>
</div>
<!-- Slide 2 -->
<!--<div class="carousel-item">-->
<!-- <img src="admin/modul/mod_produk/mobil/aaa1.jpg" height="100%" width="100%" alt="Slide 2">-->
<!-- <div class="carousel-caption d-none d-md-block">-->
<!-- <h5 style="font-size: 24px; color: #add8e6;">Kualitas & Pelayanan</h5>-->
<!-- <p style="font-size: 24px; color: #add8e6;">Kami siap melayani Anda</p>-->
<!-- <a href="Contact" class="btn btn-outline-light">Hubungi Kami</a>-->
<!-- </div>-->
<!--</div>-->
<!-- Slide 3 -->
<!--<div class="carousel-item">-->
<!-- <img src="admin/modul/mod_produk/mobil/1747931637.jpeg" height="100%" width="100%" alt="Slide 3">-->
<!-- <div class="carousel-caption d-none d-md-block">-->
<!-- <h5 style="font-size: 24px; color: #add8e6;">Galeri Produk Kami</h5>-->
<!-- <p style="font-size: 24px; color: #add8e6;">Lihat berbagai pilihan produk menarik</p>-->
<!-- <a href="Galleri" class="btn btn-light">Lihat Galeri</a>-->
<!-- </div>-->
<!--</div>-->
</div>
<!-- Controls (Tombol Navigasi) -->
<!--<a class="carousel-control-prev" href="#headerCarousel" role="button" data-slide="prev">-->
<!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
<!--</a>-->
<!--<a class="carousel-control-next" href="#headerCarousel" role="button" data-slide="next">-->
<!-- <span class="carousel-control-next-icon" aria-hidden="true"></span>-->
<!--</a>-->
</div>
</div>
</div>
<!-- End Hero Area -->
<div class="content-feature">
<!-- features list section -->
<a href="https://wa.me/6282220778332" class="wa-float" target="_blank" title="Chat via WhatsApp">
<img src="https://img.icons8.com/color/48/000000/whatsapp--v1.png" alt="WhatsApp Chat">
</a>
<?php
include "content.php";
?>
<!-- features list section -->
<!-- <div class="list-section pt-80 pb-80">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="section-title">
<h3>Segera Hubungi kami<br><br>Untuk Mendapatkan Perjalanan Terbaik Anda ?</h3>
<a href="cart.html" class="cart-btn"><img src="images/waicon.png" alt="" height="40 px" width="50 px">Pesan Sekarang</a>
</div>
</div>
</div>
</div>
</div> -->
<!-- end features list section -->
</div>
<!-- footer -->
<div class="footer-area">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="footer-box about-widget">
<h2 class="widget-title">About us</h2>
<p>Mountana Villa berada di Desa Sembungan yang terletak di Dataran Tinggi Dieng, Wonosobo, Jawa Tengah. Desa ini berada di ketinggian sekitar 2.300 meter di atas permukaan laut (mdpl).</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-box get-in-touch">
<h2 class="widget-title">Get in Touch</h2>
<ul>
<li>Jalan sikunir Dieng kejajar Wonosobo Jawa Tengah</li>
<li>marketing@mountanavilla.com</li>
<li>0822 - 2077 - 8332</li>
<li>
<a href="https://instagram.com/mountana_sikunir_hill" target="_blank" style="text-decoration:none; color: #C13584;">
<i class="fab fa-instagram"></i> @mountana_sikunir_hill
</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-box pages">
<h2 class="widget-title">Pages</h2>
<ul>
<li><a href="Home">Home</a></li>
<li><a href="About">Tentang Kami</a></li>
<li><a href="Booking">Cara Booking</a></li>
<li><a href="Galleri">Galeri</a></li>
<li><a href="Contact">Kontak Kami</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end footer -->
<style>
/* Padding & font size di mobile */
@media (max-width: 767.98px) {
.carousel-caption form {
padding: 1.5rem !important;
font-size: 0.9rem;
}
}
</style>
<!-- jquery -->
<script src="assets/js/jquery-1.11.3.min.js"></script>
<!-- bootstrap -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- count down -->
<script src="assets/js/jquery.countdown.js"></script>
<!-- isotope -->
<script src="assets/js/jquery.isotope-3.0.6.min.js"></script>
<!-- waypoints -->
<script src="assets/js/waypoints.js"></script>
<!-- owl carousel -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- magnific popup -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!-- mean menu -->
<script src="assets/js/jquery.meanmenu.min.js"></script>
<!-- sticker js -->
<script src="assets/js/sticker.js"></script>
<!-- main js -->
<script src="assets/js/main.js"></script>
<!-- Bootstrap Datepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
const bookedDates = ['2025-05-24', '2025-05-25', '2025-05-30'];
$(document).ready(function () {
$('#tanggal').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
todayHighlight: true,
startDate: new Date(),
datesDisabled: bookedDates
}).on('changeDate', function(e) {
console.log('Tanggal dipilih:', $('#tanggal').val()); // debug
});
});
function validateFormFields() {
const tanggal = document.getElementById('tanggal').value;
const durasi = document.getElementById('durasi').value;
const btn = document.getElementById('btnCek');
btn.disabled = !(tanggal && durasi);
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('tanggal').addEventListener('change', validateFormFields);
document.getElementById('durasi').addEventListener('change', validateFormFields);
});
</script>
</body>
</html> |