Spaces:
Running
Running
File size: 9,679 Bytes
51448ca | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Turf - TurfTitan</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/flatpickr"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
.time-slot {
transition: all 0.2s ease;
}
.time-slot:hover {
transform: scale(1.05);
}
.time-slot.selected {
background-color: #10b981;
color: white;
border-color: #10b981;
}
</style>
</head>
<body class="bg-gray-50">
<nav class="bg-white shadow-md">
<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 items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="grass" class="h-8 w-8 text-green-500"></i>
<span class="ml-2 text-xl font-bold text-gray-800">TurfTitan</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center space-x-8">
<a href="index.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Home</a>
<a href="turf-details.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Turf Details</a>
<a href="booking.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-green-500 text-sm font-medium">Book Now</a>
<a href="login.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Login</a>
</div>
<div class="flex items-center md:hidden">
<button id="mobile-menu-button" class="text-gray-500 hover:text-gray-900">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-8">
<h1 class="text-3xl font-bold text-gray-900">Book Your Turf Slot</h1>
<p class="mt-2 text-gray-600">Select your preferred date and time slot</p>
<div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Booking Form -->
<div>
<form id="booking-form">
<div class="mb-6">
<label for="booking-date" class="block text-sm font-medium text-gray-700 mb-1">Select Date</label>
<input type="text" id="booking-date" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:ring-green-500 focus:border-green-500">
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-1">Available Time Slots</label>
<div class="grid grid-cols-3 gap-3 mt-2">
<button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">6AM-8AM</button>
<button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">8AM-10AM</button>
<button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">10AM-12PM</button>
<button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">12PM-2PM</button>
<button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">2PM-4PM</button>
<button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">4PM-6PM</button>
<button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">6PM-8PM</button>
<button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">8PM-10PM</button>
</div>
</div>
<div class="mb-6">
<label for="duration" class="block text-sm font-medium text-gray-700 mb-1">Duration</label>
<select id="duration" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:ring-green-500 focus:border-green-500">
<option>1 hour</option>
<option>2 hours</option>
<option>3 hours</option>
</select>
</div>
<div class="mb-6">
<label for="players" class="block text-sm font-medium text-gray-700 mb-1">Number of Players</label>
<input type="number" id="players" min="1" max="20" value="10" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:ring-green-500 focus:border-green-500">
</div>
<button type="submit" class="w-full bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-md font-medium">
Continue to Payment
</button>
</form>
</div>
<!-- Booking Summary -->
<div class="bg-gray-50 p-6 rounded-lg">
<h2 class="text-xl font-semibold text-gray-900 mb-4">Booking Summary</h2>
<div class="space-y-4">
<div class="flex justify-between">
<span class="text-gray-600">Date:</span>
<span class="font-medium">Select a date</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Time Slot:</span>
<span class="font-medium">Not selected</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Duration:</span>
<span class="font-medium">-</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Players:</span>
<span class="font-medium">-</span>
</div>
<div class="border-t border-gray-200 my-3"></div>
<div class="flex justify-between">
<span class="text-gray-600">Hourly Rate:</span>
<span class="font-medium">₹0</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Total:</span>
<span class="font-bold text-green-600">₹0</span>
</div>
</div>
<div class="mt-8">
<h3 class="text-lg font-medium text-gray-900 mb-2">Need help?</h3>
<p class="text-sm text-gray-600">
Contact our support team at <a href="mailto:support@turftitan.com" class="text-green-500 hover:underline">support@turftitan.com</a> or call us at +91 98765 43210
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
feather.replace();
// Initialize date picker
flatpickr("#booking-date", {
minDate: "today",
maxDate: new Date().fp_incr(30) // 30 days from now
});
// Time slot selection
document.querySelectorAll('.time-slot').forEach(slot => {
slot.addEventListener('click', function() {
document.querySelectorAll('.time-slot').forEach(s => {
s.classList.remove('selected');
});
this.classList.add('selected');
updateBookingSummary();
});
});
// Update booking summary when form changes
function updateBookingSummary() {
// This would be implemented based on actual booking logic
console.log('Update booking summary');
}
// Form submission
document.getElementById('booking-form').addEventListener('submit', function(e) {
e.preventDefault();
alert('Booking functionality would be implemented with backend integration');
});
</script>
</body>
</html> |