|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Book Your Stay - Kudaram Lakeview</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> |
|
|
<style> |
|
|
.booking-section { |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div> |
|
|
|
|
|
|
|
|
<nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm shadow-sm sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<img class="h-8 w-auto" src="/static/logo.png" alt="Kudaram Lakeview"> |
|
|
<span class="ml-2 text-xl font-bold text-emerald-600">Kudaram Lakeview</span> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="/" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Home |
|
|
</a> |
|
|
<a href="#rooms" class="nav-link border-emerald-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Rooms |
|
|
</a> |
|
|
<a href="#amenities" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Amenities |
|
|
</a> |
|
|
<a href="#gallery" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Gallery |
|
|
</a> |
|
|
<a href="#contact" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> |
|
|
Contact |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<a href="/login" class="text-gray-500 hover:text-emerald-600 px-3 py-2 rounded-md text-sm font-medium"> |
|
|
<i data-feather="log-in" class="mr-1"></i> Login |
|
|
</a> |
|
|
<a href="/admin" class="text-gray-500 hover:text-emerald-600 px-3 py-2 rounded-md text-sm font-medium"> |
|
|
<i data-feather="lock" class="mr-1"></i> Admin |
|
|
</a> |
|
|
<a href="/staff" class="text-gray-500 hover:text-emerald-600 px-3 py-2 rounded-md text-sm font-medium"> |
|
|
<i data-feather="user" class="mr-1"></i> Staff |
|
|
</a> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500" aria-controls="mobile-menu" aria-expanded="false"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="booking-section py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-8"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Book Your Stay |
|
|
</h2> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> |
|
|
Secure your perfect getaway with our easy booking process |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Booking Details</h3> |
|
|
<form id="booking-form"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="check-in" class="block text-sm font-medium text-gray-700">Check-in Date</label> |
|
|
<input type="date" id="check-in" name="check-in" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="check-out" class="block text-sm font-medium text-gray-700">Check-out Date</label> |
|
|
<input type="date" id="check-out" name="check-out" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<label for="room-type" class="block text-sm font-medium text-gray-700">Room Type</label> |
|
|
<select id="room-type" name="room-type" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
<option value="deluxe">Deluxe Lake View - ₹4,500/night</option> |
|
|
<option value="executive">Executive Suite - ₹7,200/night</option> |
|
|
<option value="family">Family Suite - ₹9,800/night</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="adults" class="block text-sm font-medium text-gray-700">Adults</label> |
|
|
<select id="adults" name="adults" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
<option value="1">1 Adult</option> |
|
|
<option value="2" selected>2 Adults</option> |
|
|
<option value="3">3 Adults</option> |
|
|
<option value="4">4 Adults</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="children" class="block text-sm font-medium text-gray-700">Children</label> |
|
|
<select id="children" name="children" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
<option value="0">0 Children</option> |
|
|
<option value="1">1 Child</option> |
|
|
<option value="2">2 Children</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> |
|
|
Check Availability |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Your Booking Summary</h3> |
|
|
<div class="border-b border-gray-200 pb-4"> |
|
|
<h4 class="font-medium text-gray-700">Deluxe Lake View</h4> |
|
|
<p class="text-sm text-gray-500">Breathtaking views of the lake with modern amenities</p> |
|
|
</div> |
|
|
<div class="py-4 border-b border-gray-200"> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">Check-in</span> |
|
|
<span class="font-medium">- - -</span> |
|
|
</div> |
|
|
<div class="flex justify-between mt-1"> |
|
|
<span class="text-gray-500">Check-out</span> |
|
|
<span class="font-medium">- - -</span> |
|
|
</div> |
|
|
<div class="flex justify-between mt-1"> |
|
|
<span class="text-gray-500">Guests</span> |
|
|
<span class="font-medium">- - -</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="py-4 border-b border-gray-200"> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-500">Room rate</span> |
|
|
<span class="font-medium">₹4,500/night</span> |
|
|
</div> |
|
|
<div class="flex justify-between mt-1"> |
|
|
<span class="text-gray-500">Duration</span> |
|
|
<span class="font-medium">- - -</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="pt-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-lg font-bold">Estimated Total</span> |
|
|
<span class="text-lg font-bold text-emerald-600">₹0</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<button id="confirm-booking" disabled class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 opacity-50 cursor-not-allowed"> |
|
|
Confirm Booking |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="booking-section py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="bg-white rounded-lg shadow-md p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Guest Information</h3> |
|
|
<form id="guest-info"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="first-name" class="block text-sm font-medium text-gray-700">First Name</label> |
|
|
<input type="text" id="first-name" name="first-name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="last-name" class="block text-sm font-medium text-gray-700">Last Name</label> |
|
|
<input type="text" id="last-name" name="last-name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email Address</label> |
|
|
<input type="email" id="email" name="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label> |
|
|
<input type="tel" id="phone" name="phone" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<label for="special-requests" class="block text-sm font-medium text-gray-700">Special Requests (Optional)</label> |
|
|
<textarea id="special-requests" name="special-requests" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"></textarea> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> |
|
|
Continue to Payment |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="payment-section" class="booking-section py-12 bg-white hidden"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="bg-white rounded-lg shadow-md p-6"> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Payment Information</h3> |
|
|
<form id="payment-form"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label for="card-name" class="block text-sm font-medium text-gray-700">Name on Card</label> |
|
|
<input type="text" id="card-name" name="card-name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="card-number" class="block text-sm font-medium text-gray-700">Card Number</label> |
|
|
<input type="text" id="card-number" name="card-number" placeholder="1234 5678 9012 3456" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="expiry" class="block text-sm font-medium text-gray-700">Expiry Date</label> |
|
|
<input type="text" id="expiry" name="expiry" placeholder="MM/YY" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="cvv" class="block text-sm font-medium text-gray-700">CVV</label> |
|
|
<input type="text" id="cvv" name="cvv" placeholder="123" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 py-2 px-3 border"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> |
|
|
Complete Booking |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="confirmation-section" class="booking-section py-12 bg-emerald-50 hidden"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<div class="bg-white rounded-lg shadow-md p-8 max-w-2xl mx-auto"> |
|
|
<div class="flex justify-center text-emerald-600"> |
|
|
<i data-feather="check-circle" class="h-16 w-16"></i> |
|
|
</div> |
|
|
<h2 class="mt-4 text-2xl font-bold text-gray-900">Booking Confirmed!</h2> |
|
|
<p class="mt-2 text-gray-600">Thank you for choosing Kudaram Lakeview. We've sent a confirmation email with your booking details.</p> |
|
|
<div class="mt-6 bg-gray-50 p-4 rounded-lg text-left"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Booking Details</h3> |
|
|
<div class="mt-2 grid grid-cols-2 gap-2"> |
|
|
<span class="text-gray-500">Booking ID:</span> |
|
|
<span class="font-medium" id="booking-id">BK20230001</span> |
|
|
<span class="text-gray-500">Check-in:</span> |
|
|
<span class="font-medium" id="confirmation-checkin">15 May 2023</span> |
|
|
<span class="text-gray-500">Check-out:</span> |
|
|
<span class="font-medium" id="confirmation-checkout">18 May 2023</span> |
|
|
<span class="text-gray-500">Room Type:</span> |
|
|
<span class="font-medium" id="confirmation-room">Deluxe Lake View</span> |
|
|
<span class="text-gray-500">Total Amount:</span> |
|
|
<span class="font-medium text-emerald-600" id="confirmation-total">₹13,500</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<a href="/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"> |
|
|
Back to Home <i data-feather="arrow-right" class="ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-emerald-400 mb-4">Kudaram Lakeview</h3> |
|
|
<p class="text-sm text-gray-300"> |
|
|
Luxury lakeside accommodations with world-class amenities and breathtaking views. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-emerald-400 mb-4">Quick Links</h3> |
|
|
<div class="space-y-2"> |
|
|
<a href="/" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Home</a> |
|
|
<a href="/rooms" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Rooms</a> |
|
|
<a href="/amenities" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Amenities</a> |
|
|
<a href="/gallery" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Gallery</a> |
|
|
<a href="/contact" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Contact Us</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-emerald-400 mb-4">Support</h3> |
|
|
<div class="space-y-2"> |
|
|
<a href="/faq" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">FAQs</a> |
|
|
<a href="/privacy" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Privacy Policy</a> |
|
|
<a href="/terms" class="block text-gray-300 hover:text-emerald-400 transition-colors text-sm">Terms & Conditions</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-emerald-400 mb-4">Contact</h3> |
|
|
<div class="space-y-2"> |
|
|
<p class="text-sm text-gray-300">Lakeview Road, Kudaram Village</p> |
|
|
<p class="text-sm text-gray-300">Kerala, India - 689123</p> |
|
|
<p class="text-sm text-gray-300">+91 98765 43210</p> |
|
|
<p class="text-sm text-gray-300">reservations@kudaramlakeview.com</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 pt-8 mt-8"> |
|
|
<p class="text-sm text-gray-400 text-center"> |
|
|
© 2025 Kudaram Holidays Private Limited. All Rights Reserved. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.WAVES({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x10b981, |
|
|
shininess: 20.00, |
|
|
waveHeight: 15.00, |
|
|
waveSpeed: 0.75, |
|
|
zoom: 0.65 |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.getElementById('booking-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.getElementById('confirm-booking').disabled = false; |
|
|
document.getElementById('confirm-booking').classList.remove('opacity-50', 'cursor-not-allowed'); |
|
|
}); |
|
|
|
|
|
document.getElementById('confirm-booking').addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
document.getElementById('payment-section').classList.remove('hidden'); |
|
|
document.getElementById('payment-section').scrollIntoView({ behavior: 'smooth' }); |
|
|
}); |
|
|
|
|
|
document.getElementById('guest-info').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
document.getElementById('payment-section').classList.remove('hidden'); |
|
|
document.getElementById('payment-section').scrollIntoView({ behavior: 'smooth' }); |
|
|
}); |
|
|
|
|
|
document.getElementById('payment-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
document.getElementById('confirmation-section').classList.remove('hidden'); |
|
|
document.getElementById('booking-form').classList.add('hidden'); |
|
|
document.getElementById('guest-info').classList.add('hidden'); |
|
|
document.getElementById('payment-section').classList.add('hidden'); |
|
|
document.getElementById('confirmation-section').scrollIntoView({ behavior: 'smooth' }); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
