|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Reserve a Table | Groovy Beats & Smooth Seats</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
.form-input { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.form-input:focus { |
|
|
box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.5); |
|
|
} |
|
|
.seat:hover .seat-icon { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.seat.selected .seat-icon { |
|
|
color: rgb(217, 119, 6); |
|
|
stroke-width: 3; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 font-sans"> |
|
|
|
|
|
<nav class="bg-black bg-opacity-70 backdrop-filter backdrop-blur-sm sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<i data-feather="music" class="text-amber-500"></i> |
|
|
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="index.html" class="text-gray-300 hover:text-amber-400 transition">Home</a> |
|
|
<a href="performances.html" class="text-gray-300 hover:text-amber-400 transition">Performances</a> |
|
|
<a href="history.html" class="text-gray-300 hover:text-amber-400 transition">History</a> |
|
|
<a href="menu.html" class="text-gray-300 hover:text-amber-400 transition">Menu</a> |
|
|
<a href="reservation.html" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full transition">Reserve Table</a> |
|
|
</div> |
|
|
<button class="md:hidden text-gray-300 focus:outline-none"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="relative z-10 py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="mb-12 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4"> |
|
|
<span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Reserve</span> Your Table |
|
|
</h1> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto"> |
|
|
Secure your spot for an unforgettable jazz experience. Our intimate venue fills up quickly, especially on performance nights. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-8"> |
|
|
<form id="reservationForm"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
|
|
|
|
|
<div> |
|
|
<label for="reservationDate" class="block text-sm font-medium mb-2">Date</label> |
|
|
<div class="relative"> |
|
|
<input type="date" id="reservationDate" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500"> |
|
|
<i data-feather="calendar" class="absolute right-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="reservationTime" class="block text-sm font-medium mb-2">Time</label> |
|
|
<div class="relative"> |
|
|
<select id="reservationTime" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500 appearance-none"> |
|
|
<option value="">Select a time</option> |
|
|
<option value="18:00">6:00 PM</option> |
|
|
<option value="18:30">6:30 PM</option> |
|
|
<option value="19:00">7:00 PM</option> |
|
|
<option value="19:30">7:30 PM</option> |
|
|
<option value="20:00">8:00 PM</option> |
|
|
<option value="20:30">8:30 PM</option> |
|
|
<option value="21:00">9:00 PM</option> |
|
|
<option value="21:30">9:30 PM</option> |
|
|
<option value="22:00">10:00 PM</option> |
|
|
</select> |
|
|
<i data-feather="chevron-down" class="absolute right-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="partySize" class="block text-sm font-medium mb-2">Party Size</label> |
|
|
<div class="relative"> |
|
|
<select id="partySize" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500 appearance-none"> |
|
|
<option value="">Number of guests</option> |
|
|
<option value="1">1 person</option> |
|
|
<option value="2">2 people</option> |
|
|
<option value="3">3 people</option> |
|
|
<option value="4">4 people</option> |
|
|
<option value="5">5 people</option> |
|
|
<option value="6">6 people</option> |
|
|
<option value="7">7 people</option> |
|
|
<option value="8">8 people</option> |
|
|
<option value="9">9+ people</option> |
|
|
</select> |
|
|
<i data-feather="users" class="absolute right-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="performance" class="block text-sm font-medium mb-2">Performance (optional)</label> |
|
|
<div class="relative"> |
|
|
<select id="performance" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500 appearance-none"> |
|
|
<option value="">None - Just drinks/dinner</option> |
|
|
<option value="midnight-quartet">The Midnight Quartet - Nov 15, 8:30 PM</option> |
|
|
<option value="vocal-jazz">Vocal Jazz Night - Nov 15, 10:30 PM</option> |
|
|
<option value="latin-jazz">Latin Jazz Night - Nov 22, 8:00 PM</option> |
|
|
<option value="piano-tribute">Piano Legends Tribute - Nov 24, 9:00 PM</option> |
|
|
</select> |
|
|
<i data-feather="music" class="absolute right-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<label class="block text-sm font-medium mb-4">Seating Preference</label> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4"> |
|
|
|
|
|
<div class="seat flex flex-col items-center justify-center p-4 bg-gray-700 rounded-lg cursor-pointer"> |
|
|
<i data-feather="eye" class="seat-icon w-8 h-8 mb-2 transition"></i> |
|
|
<span>Stage View</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="seat flex flex-col items-center justify-center p-4 bg-gray-700 rounded-lg cursor-pointer"> |
|
|
<i data-feather="coffee" class="seat-icon w-8 h-8 mb-2 transition"></i> |
|
|
<span>Lounge Area</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="seat flex flex-col items-center justify-center p-4 bg-gray-700 rounded-lg cursor-pointer"> |
|
|
<i data-feather="home" class="seat-icon w-8 h-8 mb-2 transition"></i> |
|
|
<span>Bar Seating</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="seat selected flex flex-col items-center justify-center p-4 bg-gray-700 rounded-lg cursor-pointer"> |
|
|
<i data-feather="help-circle" class="seat-icon w-8 h-8 mb-2 transition"></i> |
|
|
<span>No Preference</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-xl font-bold mb-6 flex items-center"> |
|
|
<i data-feather="user" class="text-amber-500 mr-2"></i> |
|
|
Contact Information |
|
|
</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="firstName" class="block text-sm font-medium mb-2">First Name</label> |
|
|
<input type="text" id="firstName" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="lastName" class="block text-sm font-medium mb-2">Last Name</label> |
|
|
<input type="text" id="lastName" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium mb-2">Email</label> |
|
|
<input type="email" id="email" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="phone" class="block text-sm font-medium mb-2">Phone</label> |
|
|
<input type="tel" id="phone" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<label for="specialRequests" class="block text-sm font-medium mb-2">Special Requests</label> |
|
|
<textarea id="specialRequests" rows="3" class="form-input w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:border-amber-500 focus:ring-amber-500" placeholder="Dietary restrictions, accessibility needs, celebrations..."></textarea> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex items-center h-5"> |
|
|
<input id="membership" name="membership" type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 bg-gray-700 border-gray-600 rounded focus:ring-amber-500"> |
|
|
</div> |
|
|
<div class="ml-3 text-sm"> |
|
|
<label for="membership" class="font-medium text-gray-300">I'm a Groovy Beats Member</label> |
|
|
<p class="text-gray-500">Members enjoy priority seating and other benefits.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex items-center h-5"> |
|
|
<input id="terms" name="terms" type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 bg-gray-700 border-gray-600 rounded focus:ring-amber-500" required> |
|
|
</div> |
|
|
<div class="ml-3 text-sm"> |
|
|
<label for="terms" class="font-medium text-gray-300">I agree to the <a href="#" class="text-amber-400 hover:text-amber-300 underline">terms and conditions</a></label> |
|
|
<p class="text-gray-500">Cancellations must be made at least 24 hours in advance.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center"> |
|
|
<button type="submit" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-4 rounded-full text-lg font-medium transition w-full md:w-auto"> |
|
|
Complete Reservation |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12 bg-gray-800 bg-opacity-70 rounded-xl p-8"> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i data-feather="info" class="text-amber-500 mr-2"></i> |
|
|
Reservation Policy |
|
|
</h3> |
|
|
<div class="space-y-4 text-gray-400"> |
|
|
<p> |
|
|
<strong>Performance Nights:</strong> For reservations on performance nights, we require a $15 per person deposit that will be applied to your final bill. This deposit is non-refundable if cancellation is made less than 24 hours before the reservation time. |
|
|
</p> |
|
|
<p> |
|
|
<strong>Regular Nights:</strong> While we don't require a deposit for regular nights, we appreciate at least 2 hours notice for cancellations or changes to your reservation. |
|
|
</p> |
|
|
<p> |
|
|
<strong>Late Arrivals:</strong> Please arrive within 15 minutes of your reservation time. After this period, we may need to release your table to other guests. |
|
|
</p> |
|
|
<p> |
|
|
<strong>Large Parties:</strong> For groups of 6 or more, a 18% gratuity will be automatically added to your bill. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="relative z-10 bg-black bg-opacity-90 py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i data-feather="music" class="text-amber-500"></i> |
|
|
<span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span> |
|
|
</div> |
|
|
<p class="text-gray-400"> |
|
|
The finest jazz experience in the city since 1965. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white font-medium mb-4">Quick Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="index.html" class="text-gray-400 hover:text-amber-400 transition">Home</a></li> |
|
|
<li><a href="performances.html" class="text-gray-400 hover:text-amber-400 transition">Performances</a></li> |
|
|
<li><a href="history.html" class="text-gray-400 hover:text-amber-400 transition">History</a></li> |
|
|
<li><a href="menu.html" class="text-gray-400 hover:text-amber-400 transition">Menu</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white font-medium mb-4">Information</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="text-gray-400">123 Jazz Avenue</li> |
|
|
<li class="text-gray-400">New York, NY 10001</li> |
|
|
<li class="text-gray-400">(212) 555-7890</li> |
|
|
<li class="text-gray-400">info@groovybeats.com</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white font-medium mb-4">Opening Hours</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="text-gray-400">Monday - Thursday: 6PM - 1AM</li> |
|
|
<li class="text-gray-400">Friday - Saturday: 6PM - 2AM</li> |
|
|
<li class="text-gray-400">Sunday: 5PM - 12AM</li> |
|
|
</body> |
|
|
</html> |
