Hugging Face's logo

Spaces:
hannan2859r
/
undefined
Running

App Files Community
hannan2859r commited on
Commit
51448ca
·
verified ·
1 Parent(s): cda3842

User Features: View turf details (e.g., location, pricing, amenities), check availability calendar, book slots, user registration/login, and confirmation emails/SMS (optional).

Browse files

Admin Features: Manage bookings (approve/cancel), view calendar, add blackouts (e.g., maintenance days), and basic reporting (e.g., upcoming bookings).
Technical Requirements: Secure data handling (bookings, user info), real-time availability checks, mobile-friendly design, and integration for payments (if needed, like Stripe for simplicity).
Assumptions: No multi-turf support. Built as a web app (accessible via browser on mobile/desktop). Use free/open-source tools. If you want a mobile app, we can extend to React Native later, but start with web for ease.
Your Background: Assuming basic coding skills (e.g., from your SQL experience), I'll use beginner-friendly tech: HTML/CSS/JS for frontend, Node.js/Express for backend, SQLite or MySQL for database (since you know SQL), and free hosting options. give me turf app like this preference name is the urban turf you just made the app and other things like pricing timing and any other facilities give access to admin ill do that

Files changed (6) hide show
  1. README.md +9 -5
  2. admin.html +458 -0
  3. booking.html +176 -0
  4. index.html +459 -18
  5. login.html +43 -0
  6. turf-details.html +195 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🏢
4
- colorFrom: purple
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: red
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
admin.html ADDED
@@ -0,0 +1,458 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Admin Dashboard - UrbanTurf</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
13
+ <style>
14
+ .sidebar {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .sidebar-item:hover {
18
+ background-color: rgba(16, 185, 129, 0.1);
19
+ }
20
+ .sidebar-item.active {
21
+ background-color: rgba(16, 185, 129, 0.2);
22
+ border-left: 4px solid #10b981;
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-100">
27
+ <div class="flex h-screen">
28
+ <!-- Sidebar -->
29
+ <div class="sidebar w-64 bg-white shadow-md">
30
+ <div class="flex items-center justify-center h-16 border-b border-gray-200">
31
+ <i data-feather="grass" class="h-8 w-8 text-green-500"></i>
32
+ <span class="ml-2 text-xl font-bold text-gray-800">UrbanTurf</span>
33
+ </div>
34
+ <nav class="mt-6">
35
+ <div class="px-6 py-3 sidebar-item active">
36
+ <a href="#" class="flex items-center text-gray-700 hover:text-green-500">
37
+ <i data-feather="home" class="h-5 w-5"></i>
38
+ <span class="mx-4 font-medium">Dashboard</span>
39
+ </a>
40
+ </div>
41
+ <div class="px-6 py-3 sidebar-item">
42
+ <a href="#" class="flex items-center text-gray-700 hover:text-green-500">
43
+ <i data-feather="calendar" class="h-5 w-5"></i>
44
+ <span class="mx-4 font-medium">Bookings</span>
45
+ </a>
46
+ </div>
47
+ <div class="px-6 py-3 sidebar-item">
48
+ <a href="#" class="flex items-center text-gray-700 hover:text-green-500">
49
+ <i data-feather="users" class="h-5 w-5"></i>
50
+ <span class="mx-4 font-medium">Customers</span>
51
+ </a>
52
+ </div>
53
+ <div class="px-6 py-3 sidebar-item">
54
+ <a href="#" class="flex items-center text-gray-700 hover:text-green-500">
55
+ <i data-feather="dollar-sign" class="h-5 w-5"></i>
56
+ <span class="mx-4 font-medium">Payments</span>
57
+ </a>
58
+ </div>
59
+ <div class="px-6 py-3 sidebar-item">
60
+ <a href="#" class="flex items-center text-gray-700 hover:text-green-500">
61
+ <i data-feather="settings" class="h-5 w-5"></i>
62
+ <span class="mx-4 font-medium">Settings</span>
63
+ </a>
64
+ </div>
65
+ <div class="px-6 py-3 sidebar-item">
66
+ <a href="#" class="flex items-center text-gray-700 hover:text-green-500">
67
+ <i data-feather="alert-circle" class="h-5 w-5"></i>
68
+ <span class="mx-4 font-medium">Blackout Dates</span>
69
+ </a>
70
+ </div>
71
+ <div class="px-6 py-3 sidebar-item">
72
+ <a href="#" class="flex items-center text-gray-700 hover:text-green-500">
73
+ <i data-feather="bar-chart-2" class="h-5 w-5"></i>
74
+ <span class="mx-4 font-medium">Reports</span>
75
+ </a>
76
+ </div>
77
+ </nav>
78
+ </div>
79
+
80
+ <!-- Main Content -->
81
+ <div class="flex-1 flex flex-col overflow-hidden">
82
+ <!-- Top Navigation -->
83
+ <header class="bg-white shadow-sm z-10">
84
+ <div class="flex items-center justify-between h-16 px-6">
85
+ <div class="flex items-center">
86
+ <button class="text-gray-500 focus:outline-none mr-4 md:hidden">
87
+ <i data-feather="menu"></i>
88
+ </button>
89
+ <h2 class="text-xl font-semibold text-gray-800">Admin Dashboard</h2>
90
+ </div>
91
+ <div class="flex items-center">
92
+ <button class="p-1 text-gray-500 rounded-full hover:text-gray-600 focus:outline-none mr-4">
93
+ <i data-feather="bell"></i>
94
+ </button>
95
+ <div class="ml-4 flex items-center">
96
+ <div class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center text-white">
97
+ <i data-feather="user"></i>
98
+ </div>
99
+ <span class="ml-2 text-gray-700 font-medium">Admin</span>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </header>
104
+
105
+ <!-- Content -->
106
+ <main class="flex-1 overflow-y-auto p-6">
107
+ <!-- Stats Cards -->
108
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
109
+ <div class="bg-white rounded-lg shadow-sm p-6">
110
+ <div class="flex items-center">
111
+ <div class="p-3 rounded-full bg-green-100 text-green-500 mr-4">
112
+ <i data-feather="calendar" class="h-6 w-6"></i>
113
+ </div>
114
+ <div>
115
+ <p class="text-sm font-medium text-gray-500">Today's Bookings</p>
116
+ <p class="text-2xl font-semibold text-gray-700">12</p>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ <div class="bg-white rounded-lg shadow-sm p-6">
121
+ <div class="flex items-center">
122
+ <div class="p-3 rounded-full bg-blue-100 text-blue-500 mr-4">
123
+ <i data-feather="dollar-sign" class="h-6 w-6"></i>
124
+ </div>
125
+ <div>
126
+ <p class="text-sm font-medium text-gray-500">Today's Revenue</p>
127
+ <p class="text-2xl font-semibold text-gray-700">₹6,500</p>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ <div class="bg-white rounded-lg shadow-sm p-6">
132
+ <div class="flex items-center">
133
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-500 mr-4">
134
+ <i data-feather="users" class="h-6 w-6"></i>
135
+ </div>
136
+ <div>
137
+ <p class="text-sm font-medium text-gray-500">New Customers</p>
138
+ <p class="text-2xl font-semibold text-gray-700">5</p>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ <div class="bg-white rounded-lg shadow-sm p-6">
143
+ <div class="flex items-center">
144
+ <div class="p-3 rounded-full bg-red-100 text-red-500 mr-4">
145
+ <i data-feather="alert-circle" class="h-6 w-6"></i>
146
+ </div>
147
+ <div>
148
+ <p class="text-sm font-medium text-gray-500">Pending Bookings</p>
149
+ <p class="text-2xl font-semibold text-gray-700">3</p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Recent Bookings Table -->
156
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6">
157
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
158
+ <h3 class="text-lg font-medium text-gray-900">Recent Bookings</h3>
159
+ <button class="text-green-500 hover:text-green-600 text-sm font-medium flex items-center">
160
+ <i data-feather="plus" class="h-4 w-4 mr-1"></i> Add New
161
+ </button>
162
+ </div>
163
+ <div class="overflow-x-auto">
164
+ <table class="min-w-full divide-y divide-gray-200">
165
+ <thead class="bg-gray-50">
166
+ <tr>
167
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
168
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
169
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date & Time</th>
170
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
171
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
172
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
173
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
174
+ </tr>
175
+ </thead>
176
+ <tbody class="bg-white divide-y divide-gray-200">
177
+ <tr>
178
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#UT-1001</td>
179
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rahul Sharma</td>
180
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 5:00 PM</td>
181
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours</td>
182
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₹1000</td>
183
+ <td class="px-6 py-4 whitespace-nowrap">
184
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Confirmed</span>
185
+ </td>
186
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
187
+ <button class="text-green-500 hover:text-green-600 mr-3">
188
+ <i data-feather="check" class="h-4 w-4"></i>
189
+ </button>
190
+ <button class="text-red-500 hover:text-red-600">
191
+ <i data-feather="x" class="h-4 w-4"></i>
192
+ </button>
193
+ </td>
194
+ </tr>
195
+ <tr>
196
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#UT-1002</td>
197
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Team Champions</td>
198
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Tomorrow, 7:00 PM</td>
199
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 hours</td>
200
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₹1200</td>
201
+ <td class="px-6 py-4 whitespace-nowrap">
202
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
203
+ </td>
204
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
205
+ <button class="text-green-500 hover:text-green-600 mr-3">
206
+ <i data-feather="check" class="h-4 w-4"></i>
207
+ </button>
208
+ <button class="text-red-500 hover:text-red-600">
209
+ <i data-feather="x" class="h-4 w-4"></i>
210
+ </button>
211
+ </td>
212
+ </tr>
213
+ <tr>
214
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#UT-1003</td>
215
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Ajay Verma</td>
216
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 6:00 PM</td>
217
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours</td>
218
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₹800</td>
219
+ <td class="px-6 py-4 whitespace-nowrap">
220
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Completed</span>
221
+ </td>
222
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
223
+ <button class="text-blue-500 hover:text-blue-600">
224
+ <i data-feather="eye" class="h-4 w-4"></i>
225
+ </button>
226
+ </td>
227
+ </tr>
228
+ <tr>
229
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#UT-1004</td>
230
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Friends Group</td>
231
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Tomorrow, 4:00 PM</td>
232
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 hour</td>
233
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₹500</td>
234
+ <td class="px-6 py-4 whitespace-nowrap">
235
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Confirmed</span>
236
+ </td>
237
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
238
+ <button class="text-green-500 hover:text-green-600 mr-3">
239
+ <i data-feather="check" class="h-4 w-4"></i>
240
+ </button>
241
+ <button class="text-red-500 hover:text-red-600">
242
+ <i data-feather="x" class="h-4 w-4"></i>
243
+ </button>
244
+ </td>
245
+ </tr>
246
+ <tr>
247
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#UT-1005</td>
248
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Team</td>
249
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 8:00 PM</td>
250
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours</td>
251
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₹1000</td>
252
+ <td class="px-6 py-4 whitespace-nowrap">
253
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Cancelled</span>
254
+ </td>
255
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
256
+ <button class="text-blue-500 hover:text-blue-600">
257
+ <i data-feather="eye" class="h-4 w-4"></i>
258
+ </button>
259
+ </td>
260
+ </tr>
261
+ </tbody>
262
+ </table>
263
+ </div>
264
+ <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
265
+ <div class="text-sm text-gray-500">
266
+ Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12</span> results
267
+ </div>
268
+ <div class="flex space-x-2">
269
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
270
+ Previous
271
+ </button>
272
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
273
+ Next
274
+ </button>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Calendar and Stats -->
280
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
281
+ <!-- Calendar -->
282
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden lg:col-span-2">
283
+ <div class="px-6 py-4 border-b border-gray-200">
284
+ <h3 class="text-lg font-medium text-gray-900">Booking Calendar</h3>
285
+ </div>
286
+ <div class="p-6">
287
+ <div class="flex justify-between items-center mb-4">
288
+ <h4 class="text-lg font-medium text-gray-900">November 2023</h4>
289
+ <div class="flex space-x-2">
290
+ <button class="p-1 rounded-full bg-gray-100 text-gray-500 hover:bg-gray-200">
291
+ <i data-feather="chevron-left" class="h-4 w-4"></i>
292
+ </button>
293
+ <button class="p-1 rounded-full bg-gray-100 text-gray-500 hover:bg-gray-200">
294
+ <i data-feather="chevron-right" class="h-4 w-4"></i>
295
+ </button>
296
+ </div>
297
+ </div>
298
+ <div class="grid grid-cols-7 gap-1 text-center">
299
+ <div class="text-xs font-medium text-gray-500 py-2">Sun</div>
300
+ <div class="text-xs font-medium text-gray-500 py-2">Mon</div>
301
+ <div class="text-xs font-medium text-gray-500 py-2">Tue</div>
302
+ <div class="text-xs font-medium text-gray-500 py-2">Wed</div>
303
+ <div class="text-xs font-medium text-gray-500 py-2">Thu</div>
304
+ <div class="text-xs font-medium text-gray-500 py-2">Fri</div>
305
+ <div class="text-xs font-medium text-gray-500 py-2">Sat</div>
306
+ <!-- Calendar days -->
307
+ <div class="py-2"></div>
308
+ <div class="py-2"></div>
309
+ <div class="py-2 border border-gray-200">
310
+ <span class="text-sm text-gray-700">1</span>
311
+ </div>
312
+ <div class="py-2 border border-gray-200">
313
+ <span class="text-sm text-gray-700">2</span>
314
+ </div>
315
+ <div class="py-2 border border-gray-200">
316
+ <span class="text-sm text-gray-700">3</span>
317
+ </div>
318
+ <div class="py-2 border border-gray-200">
319
+ <span class="text-sm text-gray-700">4</span>
320
+ </div>
321
+ <div class="py-2 border border-gray-200 bg-green-50">
322
+ <span class="text-sm text-gray-700">5</span>
323
+ <div class="text-xs text-green-500 mt-1">3 bookings</div>
324
+ </div>
325
+ <div class="py-2 border border-gray-200 bg-green-50">
326
+ <span class="text-sm text-gray-700">6</span>
327
+ <div class="text-xs text-green-500 mt-1">5 bookings</div>
328
+ </div>
329
+ <div class="py-2 border border-gray-200">
330
+ <span class="text-sm text-gray-700">7</span>
331
+ </div>
332
+ <div class="py-2 border border-gray-200">
333
+ <span class="text-sm text-gray-700">8</span>
334
+ </div>
335
+ <div class="py-2 border border-gray-200">
336
+ <span class="text-sm text-gray-700">9</span>
337
+ </div>
338
+ <div class="py-2 border border-gray-200 bg-yellow-50">
339
+ <span class="text-sm text-gray-700">10</span>
340
+ <div class="text-xs text-yellow-500 mt-1">Maintenance</div>
341
+ </div>
342
+ <div class="py-2 border border-gray-200">
343
+ <span class="text-sm text-gray-700">11</span>
344
+ </div>
345
+ <div class="py-2 border border-gray-200 bg-green-50">
346
+ <span class="text-sm text-gray-700">12</span>
347
+ <div class="text-xs text-green-500 mt-1">6 bookings</div>
348
+ </div>
349
+ <div class="py-2 border border-gray-200">
350
+ <span class="text-sm text-gray-700">13</span>
351
+ </div>
352
+ <div class="py-2 border border-gray-200">
353
+ <span class="text-sm text-gray-700">14</span>
354
+ </div>
355
+ <div class="py-2 border border-gray-200">
356
+ <span class="text-sm text-gray-700">15</span>
357
+ </div>
358
+ <div class="py-2 border border-gray-200">
359
+ <span class="text-sm text-gray-700">16</span>
360
+ </div>
361
+ <div class="py-2 border border-gray-200">
362
+ <span class="text-sm text-gray-700">17</span>
363
+ </div>
364
+ <div class="py-2 border border-gray-200">
365
+ <span class="text-sm text-gray-700">18</span>
366
+ </div>
367
+ <div class="py-2 border border-gray-200">
368
+ <span class="text-sm text-gray-700">19</span>
369
+ </div>
370
+ <div class="py-2 border border-gray-200">
371
+ <span class="text-sm text-gray-700">20</span>
372
+ </div>
373
+ <div class="py-2 border border-gray-200">
374
+ <span class="text-sm text-gray-700">21</span>
375
+ </div>
376
+ <div class="py-2 border border-gray-200">
377
+ <span class="text-sm text-gray-700">22</span>
378
+ </div>
379
+ <div class="py-2 border border-gray-200">
380
+ <span class="text-sm text-gray-700">23</span>
381
+ </div>
382
+ <div class="py-2 border border-gray-200">
383
+ <span class="text-sm text-gray-700">24</span>
384
+ </div>
385
+ <div class="py-2 border border-gray-200">
386
+ <span class="text-sm text-gray-700">25</span>
387
+ </div>
388
+ <div class="py-2 border border-gray-200">
389
+ <span class="text-sm text-gray-700">26</span>
390
+ </div>
391
+ <div class="py-2 border border-gray-200">
392
+ <span class="text-sm text-gray-700">27</span>
393
+ </div>
394
+ <div class="py-2 border border-gray-200">
395
+ <span class="text-sm text-gray-700">28</span>
396
+ </div>
397
+ <div class="py-2 border border-gray-200">
398
+ <span class="text-sm text-gray-700">29</span>
399
+ </div>
400
+ <div class="py-2 border border-gray-200">
401
+ <span class="text-sm text-gray-700">30</span>
402
+ </div>
403
+ <div class="py-2"></div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <!-- Quick Stats -->
409
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden">
410
+ <div class="px-6 py-4 border-b border-gray-200">
411
+ <h3 class="text-lg font-medium text-gray-900">Quick Stats</h3>
412
+ </div>
413
+ <div class="p-6">
414
+ <div class="mb-6">
415
+ <h4 class="text-sm font-medium text-gray-500 mb-2">This Week</h4>
416
+ <div class="flex items-center justify-between">
417
+ <div>
418
+ <p class="text-2xl font-semibold text-gray-900">24</p>
419
+ <p class="text-sm text-gray-500">Bookings</p>
420
+ </div>
421
+ <div>
422
+ <p class="text-2xl font-semibold text-gray-900">₹12,500</p>
423
+ <p class="text-sm text-gray-500">Revenue</p>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ <div class="mb-6">
428
+ <h4 class="text-sm font-medium text-gray-500 mb-2">This Month</h4>
429
+ <div class="flex items-center justify-between">
430
+ <div>
431
+ <p class="text-2xl font-semibold text-gray-900">86</p>
432
+ <p class="text-sm text-gray-500">Bookings</p>
433
+ </div>
434
+ <div>
435
+ <p class="text-2xl font-semibold text-gray-900">₹43,000</p>
436
+ <p class="text-sm text-gray-500">Revenue</p>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ <div>
441
+ <h4 class="text-sm font-medium text-gray-500 mb-2">Turf Utilization</h4>
442
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mb-2">
443
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 75%"></div>
444
+ </div>
445
+ <p class="text-sm text-gray-500">75% of available slots booked this month</p>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </main>
451
+ </div>
452
+ </div>
453
+
454
+ <script>
455
+ feather.replace();
456
+ </script>
457
+ </body>
458
+ </html>
booking.html ADDED
@@ -0,0 +1,176 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Book Turf - TurfTitan</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
11
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
12
+ <style>
13
+ .time-slot {
14
+ transition: all 0.2s ease;
15
+ }
16
+ .time-slot:hover {
17
+ transform: scale(1.05);
18
+ }
19
+ .time-slot.selected {
20
+ background-color: #10b981;
21
+ color: white;
22
+ border-color: #10b981;
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-50">
27
+ <nav class="bg-white shadow-md">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex justify-between h-16">
30
+ <div class="flex items-center">
31
+ <div class="flex-shrink-0 flex items-center">
32
+ <i data-feather="grass" class="h-8 w-8 text-green-500"></i>
33
+ <span class="ml-2 text-xl font-bold text-gray-800">TurfTitan</span>
34
+ </div>
35
+ </div>
36
+ <div class="hidden md:ml-6 md:flex md:items-center space-x-8">
37
+ <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>
38
+ <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>
39
+ <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>
40
+ <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>
41
+ </div>
42
+ <div class="flex items-center md:hidden">
43
+ <button id="mobile-menu-button" class="text-gray-500 hover:text-gray-900">
44
+ <i data-feather="menu"></i>
45
+ </button>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </nav>
50
+
51
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
52
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
53
+ <div class="p-8">
54
+ <h1 class="text-3xl font-bold text-gray-900">Book Your Turf Slot</h1>
55
+ <p class="mt-2 text-gray-600">Select your preferred date and time slot</p>
56
+
57
+ <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
58
+ <!-- Booking Form -->
59
+ <div>
60
+ <form id="booking-form">
61
+ <div class="mb-6">
62
+ <label for="booking-date" class="block text-sm font-medium text-gray-700 mb-1">Select Date</label>
63
+ <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">
64
+ </div>
65
+
66
+ <div class="mb-6">
67
+ <label class="block text-sm font-medium text-gray-700 mb-1">Available Time Slots</label>
68
+ <div class="grid grid-cols-3 gap-3 mt-2">
69
+ <button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">6AM-8AM</button>
70
+ <button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">8AM-10AM</button>
71
+ <button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">10AM-12PM</button>
72
+ <button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">12PM-2PM</button>
73
+ <button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">2PM-4PM</button>
74
+ <button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">4PM-6PM</button>
75
+ <button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">6PM-8PM</button>
76
+ <button type="button" class="time-slot py-2 border border-gray-300 rounded-md text-sm font-medium">8PM-10PM</button>
77
+ </div>
78
+ </div>
79
+
80
+ <div class="mb-6">
81
+ <label for="duration" class="block text-sm font-medium text-gray-700 mb-1">Duration</label>
82
+ <select id="duration" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:ring-green-500 focus:border-green-500">
83
+ <option>1 hour</option>
84
+ <option>2 hours</option>
85
+ <option>3 hours</option>
86
+ </select>
87
+ </div>
88
+
89
+ <div class="mb-6">
90
+ <label for="players" class="block text-sm font-medium text-gray-700 mb-1">Number of Players</label>
91
+ <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">
92
+ </div>
93
+
94
+ <button type="submit" class="w-full bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-md font-medium">
95
+ Continue to Payment
96
+ </button>
97
+ </form>
98
+ </div>
99
+
100
+ <!-- Booking Summary -->
101
+ <div class="bg-gray-50 p-6 rounded-lg">
102
+ <h2 class="text-xl font-semibold text-gray-900 mb-4">Booking Summary</h2>
103
+ <div class="space-y-4">
104
+ <div class="flex justify-between">
105
+ <span class="text-gray-600">Date:</span>
106
+ <span class="font-medium">Select a date</span>
107
+ </div>
108
+ <div class="flex justify-between">
109
+ <span class="text-gray-600">Time Slot:</span>
110
+ <span class="font-medium">Not selected</span>
111
+ </div>
112
+ <div class="flex justify-between">
113
+ <span class="text-gray-600">Duration:</span>
114
+ <span class="font-medium">-</span>
115
+ </div>
116
+ <div class="flex justify-between">
117
+ <span class="text-gray-600">Players:</span>
118
+ <span class="font-medium">-</span>
119
+ </div>
120
+ <div class="border-t border-gray-200 my-3"></div>
121
+ <div class="flex justify-between">
122
+ <span class="text-gray-600">Hourly Rate:</span>
123
+ <span class="font-medium">₹0</span>
124
+ </div>
125
+ <div class="flex justify-between">
126
+ <span class="text-gray-600">Total:</span>
127
+ <span class="font-bold text-green-600">₹0</span>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="mt-8">
132
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Need help?</h3>
133
+ <p class="text-sm text-gray-600">
134
+ 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
135
+ </p>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <script>
144
+ feather.replace();
145
+
146
+ // Initialize date picker
147
+ flatpickr("#booking-date", {
148
+ minDate: "today",
149
+ maxDate: new Date().fp_incr(30) // 30 days from now
150
+ });
151
+
152
+ // Time slot selection
153
+ document.querySelectorAll('.time-slot').forEach(slot => {
154
+ slot.addEventListener('click', function() {
155
+ document.querySelectorAll('.time-slot').forEach(s => {
156
+ s.classList.remove('selected');
157
+ });
158
+ this.classList.add('selected');
159
+ updateBookingSummary();
160
+ });
161
+ });
162
+
163
+ // Update booking summary when form changes
164
+ function updateBookingSummary() {
165
+ // This would be implemented based on actual booking logic
166
+ console.log('Update booking summary');
167
+ }
168
+
169
+ // Form submission
170
+ document.getElementById('booking-form').addEventListener('submit', function(e) {
171
+ e.preventDefault();
172
+ alert('Booking functionality would be implemented with backend integration');
173
+ });
174
+ </script>
175
+ </body>
176
+ </html>
index.html CHANGED
@@ -1,19 +1,460 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>UrbanTurf - Book Your Playtime</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
13
+ <style>
14
+ .hero-gradient {
15
+ background: linear-gradient(135deg, #00b09b, #96c93d);
16
+ }
17
+ .slot-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .amenity-icon {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .amenity-icon:hover {
25
+ transform: scale(1.2);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="font-sans bg-gray-50">
30
+ <!-- Navigation -->
31
+ <nav class="bg-white shadow-md">
32
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
33
+ <div class="flex justify-between h-16">
34
+ <div class="flex items-center">
35
+ <div class="flex-shrink-0 flex items-center">
36
+ <i data-feather="grass" class="h-8 w-8 text-green-500"></i>
37
+ <span class="ml-2 text-xl font-bold text-gray-800">UrbanTurf</span>
38
+ </div>
39
+ </div>
40
+ <div class="hidden md:ml-6 md:flex md:items-center space-x-8">
41
+ <a href="index.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-green-500 text-sm font-medium">Home</a>
42
+ <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>
43
+ <a href="booking.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Book Now</a>
44
+ <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>
45
+ </div>
46
+ <div class="flex items-center">
47
+ <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
48
+ <i data-feather="log-in" class="mr-2 w-4 h-4"></i> Login
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </nav>
54
+
55
+ <!-- Hero Section -->
56
+ <div class="hero-gradient text-white">
57
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center">
58
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
59
+ Book Your Perfect Playtime
60
+ </h1>
61
+ <p class="mt-6 max-w-lg mx-auto text-xl">
62
+ Premium football turf with state-of-the-art facilities. Book your slot in seconds!
63
+ </p>
64
+ <div class="mt-10">
65
+ <a href="#book" class="bg-white text-green-600 px-8 py-3 rounded-md text-lg font-bold hover:bg-gray-100">
66
+ Book Now <i data-feather="arrow-right" class="ml-2 inline"></i>
67
+ </a>
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Features Section -->
73
+ <div id="features" class="py-16 bg-white">
74
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
75
+ <div class="text-center">
76
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
77
+ Why Choose UrbanTurf?
78
+ </h2>
79
+ <p class="mt-4 max-w-2xl mx-auto text-gray-500">
80
+ We provide the best football experience in town
81
+ </p>
82
+ </div>
83
+ <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
84
+ <div class="pt-6">
85
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
86
+ <div class="-mt-6">
87
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto">
88
+ <i data-feather="clock"></i>
89
+ </div>
90
+ <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">24/7 Availability</h3>
91
+ <p class="mt-5 text-base text-gray-500">
92
+ Book anytime with our easy online system. Lights available for night games.
93
+ </p>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ <div class="pt-6">
98
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
99
+ <div class="-mt-6">
100
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto">
101
+ <i data-feather="dollar-sign"></i>
102
+ </div>
103
+ <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Affordable Rates</h3>
104
+ <p class="mt-5 text-base text-gray-500">
105
+ Competitive pricing with discounts for regular players and group bookings.
106
+ </p>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ <div class="pt-6">
111
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
112
+ <div class="-mt-6">
113
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto">
114
+ <i data-feather="shield"></i>
115
+ </div>
116
+ <h3 class="mt-8 text-lg font-medium text-gray-900 text-center">Secure Payments</h3>
117
+ <p class="mt-5 text-base text-gray-500">
118
+ Safe online transactions with instant confirmation via email & SMS.
119
+ </p>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Pricing Section -->
128
+ <div id="pricing" class="py-16 bg-gray-50">
129
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
130
+ <div class="text-center">
131
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
132
+ Our Pricing
133
+ </h2>
134
+ <p class="mt-4 max-w-2xl mx-auto text-gray-500">
135
+ Flexible pricing for all types of players
136
+ </p>
137
+ </div>
138
+ <div class="mt-16 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
139
+ <div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm">
140
+ <div class="p-8">
141
+ <h3 class="text-lg font-medium text-gray-900">Casual Play</h3>
142
+ <p class="mt-4 text-sm text-gray-500">
143
+ Perfect for one-time players
144
+ </p>
145
+ <div class="mt-6">
146
+ <p class="flex items-baseline">
147
+ <span class="text-4xl font-bold tracking-tight text-gray-900">₹500</span>
148
+ <span class="ml-1 text-lg font-semibold text-gray-500">/hour</span>
149
+ </p>
150
+ <a href="#book" class="mt-8 block w-full bg-gray-100 border border-gray-300 rounded-md py-2 text-sm font-semibold text-gray-700 text-center hover:bg-gray-200">Book Now</a>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ <div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm border-2 border-green-500">
155
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-green-500 text-white text-xs font-semibold py-1 px-3 rounded-full">POPULAR</div>
156
+ <div class="p-8">
157
+ <h3 class="text-lg font-medium text-gray-900">Regular Player</h3>
158
+ <p class="mt-4 text-sm text-gray-500">
159
+ Best for frequent players
160
+ </p>
161
+ <div class="mt-6">
162
+ <p class="flex items-baseline">
163
+ <span class="text-4xl font-bold tracking-tight text-gray-900">₹400</span>
164
+ <span class="ml-1 text-lg font-semibold text-gray-500">/hour</span>
165
+ </p>
166
+ <p class="mt-1 text-sm text-gray-500">Minimum 5 bookings/month</p>
167
+ <a href="#book" class="mt-8 block w-full bg-green-500 border border-transparent rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-green-600">Book Now</a>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ <div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm">
172
+ <div class="p-8">
173
+ <h3 class="text-lg font-medium text-gray-900">Group Booking</h3>
174
+ <p class="mt-4 text-sm text-gray-500">
175
+ Great for teams and events
176
+ </p>
177
+ <div class="mt-6">
178
+ <p class="flex items-baseline">
179
+ <span class="text-4xl font-bold tracking-tight text-gray-900">₹300</span>
180
+ <span class="ml-1 text-lg font-semibold text-gray-500">/hour</span>
181
+ </p>
182
+ <p class="mt-1 text-sm text-gray-500">Minimum 10 players</p>
183
+ <a href="#book" class="mt-8 block w-full bg-gray-100 border border-gray-300 rounded-md py-2 text-sm font-semibold text-gray-700 text-center hover:bg-gray-200">Book Now</a>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Amenities Section -->
192
+ <div id="amenities" class="py-16 bg-white">
193
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
194
+ <div class="text-center">
195
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
196
+ Top-Notch Amenities
197
+ </h2>
198
+ <p class="mt-4 max-w-2xl mx-auto text-gray-500">
199
+ Everything you need for the perfect game
200
+ </p>
201
+ </div>
202
+ <div class="mt-16 grid grid-cols-2 gap-8 md:grid-cols-4">
203
+ <div class="text-center">
204
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon">
205
+ <i data-feather="droplet"></i>
206
+ </div>
207
+ <h3 class="mt-3 text-lg font-medium text-gray-900">Drinking Water</h3>
208
+ </div>
209
+ <div class="text-center">
210
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon">
211
+ <i data-feather="locker"></i>
212
+ </div>
213
+ <h3 class="mt-3 text-lg font-medium text-gray-900">Changing Rooms</h3>
214
+ </div>
215
+ <div class="text-center">
216
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon">
217
+ <i data-feather="shower"></i>
218
+ </div>
219
+ <h3 class="mt-3 text-lg font-medium text-gray-900">Showers</h3>
220
+ </div>
221
+ <div class="text-center">
222
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon">
223
+ <i data-feather="parking"></i>
224
+ </div>
225
+ <h3 class="mt-3 text-lg font-medium text-gray-900">Parking</h3>
226
+ </div>
227
+ <div class="text-center">
228
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon">
229
+ <i data-feather="first-aid"></i>
230
+ </div>
231
+ <h3 class="mt-3 text-lg font-medium text-gray-900">First Aid</h3>
232
+ </div>
233
+ <div class="text-center">
234
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon">
235
+ <i data-feather="wifi"></i>
236
+ </div>
237
+ <h3 class="mt-3 text-lg font-medium text-gray-900">Free WiFi</h3>
238
+ </div>
239
+ <div class="text-center">
240
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon">
241
+ <i data-feather="watch"></i>
242
+ </div>
243
+ <h3 class="mt-3 text-lg font-medium text-gray-900">Scoreboard</h3>
244
+ </div>
245
+ <div class="text-center">
246
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto amenity-icon">
247
+ <i data-feather="shopping-bag"></i>
248
+ </div>
249
+ <h3 class="mt-3 text-lg font-medium text-gray-900">Equipment Rental</h3>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Booking Section -->
256
+ <div id="book" class="py-16 bg-gray-50">
257
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
258
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
259
+ <div>
260
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
261
+ Book Your Slot
262
+ </h2>
263
+ <p class="mt-4 max-w-3xl text-lg text-gray-500">
264
+ Check availability and reserve your playtime instantly. Our turf is available from 6 AM to 11 PM daily.
265
+ </p>
266
+ <div class="mt-8">
267
+ <div class="flex items-center">
268
+ <div class="flex-shrink-0 bg-green-500 rounded-full p-1">
269
+ <i data-feather="check" class="h-4 w-4 text-white"></i>
270
+ </div>
271
+ <p class="ml-3 text-base text-gray-500">Real-time availability updates</p>
272
+ </div>
273
+ <div class="mt-4 flex items-center">
274
+ <div class="flex-shrink-0 bg-green-500 rounded-full p-1">
275
+ <i data-feather="check" class="h-4 w-4 text-white"></i>
276
+ </div>
277
+ <p class="ml-3 text-base text-gray-500">Instant booking confirmation</p>
278
+ </div>
279
+ <div class="mt-4 flex items-center">
280
+ <div class="flex-shrink-0 bg-green-500 rounded-full p-1">
281
+ <i data-feather="check" class="h-4 w-4 text-white"></i>
282
+ </div>
283
+ <p class="ml-3 text-base text-gray-500">Secure payment options</p>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ <div class="mt-12 lg:mt-0">
288
+ <div class="bg-white py-8 px-6 shadow rounded-lg sm:px-10">
289
+ <form class="mb-0 space-y-6">
290
+ <div>
291
+ <label for="date" class="block text-sm font-medium text-gray-700">Date</label>
292
+ <div class="mt-1">
293
+ <input type="text" id="date" class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-500 focus:border-green-500" placeholder="Select date">
294
+ </div>
295
+ </div>
296
+ <div>
297
+ <label for="time" class="block text-sm font-medium text-gray-700">Time Slot</label>
298
+ <div class="mt-1">
299
+ <select id="time" class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-500 focus:border-green-500">
300
+ <option>Morning (6 AM - 12 PM)</option>
301
+ <option>Afternoon (12 PM - 5 PM)</option>
302
+ <option>Evening (5 PM - 11 PM)</option>
303
+ </select>
304
+ </div>
305
+ </div>
306
+ <div>
307
+ <label for="hours" class="block text-sm font-medium text-gray-700">Duration (hours)</label>
308
+ <div class="mt-1">
309
+ <select id="hours" class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-500 focus:border-green-500">
310
+ <option>1 hour</option>
311
+ <option>2 hours</option>
312
+ <option>3 hours</option>
313
+ <option>4 hours</option>
314
+ </select>
315
+ </div>
316
+ </div>
317
+ <div>
318
+ <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-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
319
+ Check Availability
320
+ </button>
321
+ </div>
322
+ </form>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Location Section -->
330
+ <div class="bg-white">
331
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
332
+ <div class="text-center">
333
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
334
+ Our Location
335
+ </h2>
336
+ <p class="mt-4 max-w-2xl mx-auto text-gray-500">
337
+ Easily accessible from all parts of the city
338
+ </p>
339
+ </div>
340
+ <div class="mt-12">
341
+ <div class="bg-gray-50 rounded-xl overflow-hidden">
342
+ <div class="aspect-w-16 aspect-h-9">
343
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3502.786481768283!2d77.30758641508248!3d28.60780198242892!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce521f9e2a447%3A0x5c9a4a6d1f3a0f0!2sFootball%20Turf!5e0!3m2!1sen!2sin!4v1620000000000!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
344
+ </div>
345
+ </div>
346
+ <div class="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-3">
347
+ <div class="text-center">
348
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto">
349
+ <i data-feather="map-pin"></i>
350
+ </div>
351
+ <h3 class="mt-3 text-lg font-medium text-gray-900">Address</h3>
352
+ <p class="mt-2 text-base text-gray-500">
353
+ 123 Sports Avenue, Greenfield, City - 100001
354
+ </p>
355
+ </div>
356
+ <div class="text-center">
357
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto">
358
+ <i data-feather="phone"></i>
359
+ </div>
360
+ <h3 class="mt-3 text-lg font-medium text-gray-900">Phone</h3>
361
+ <p class="mt-2 text-base text-gray-500">
362
+ +91 98765 43210
363
+ </p>
364
+ </div>
365
+ <div class="text-center">
366
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mx-auto">
367
+ <i data-feather="mail"></i>
368
+ </div>
369
+ <h3 class="mt-3 text-lg font-medium text-gray-900">Email</h3>
370
+ <p class="mt-2 text-base text-gray-500">
371
+ info@urbanturf.com
372
+ </p>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <!-- Footer -->
380
+ <footer class="bg-gray-800">
381
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
382
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
383
+ <div>
384
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
385
+ <ul class="mt-4 space-y-4">
386
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
387
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
388
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
389
+ </ul>
390
+ </div>
391
+ <div>
392
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
393
+ <ul class="mt-4 space-y-4">
394
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li>
395
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Safety</a></li>
396
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cancellation</a></li>
397
+ </ul>
398
+ </div>
399
+ <div>
400
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
401
+ <ul class="mt-4 space-y-4">
402
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
403
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
404
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
405
+ </ul>
406
+ </div>
407
+ <div>
408
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
409
+ <div class="mt-4 flex space-x-6">
410
+ <a href="#" class="text-gray-400 hover:text-white">
411
+ <i data-feather="facebook"></i>
412
+ </a>
413
+ <a href="#" class="text-gray-400 hover:text-white">
414
+ <i data-feather="instagram"></i>
415
+ </a>
416
+ <a href="#" class="text-gray-400 hover:text-white">
417
+ <i data-feather="twitter"></i>
418
+ </a>
419
+ <a href="#" class="text-gray-400 hover:text-white">
420
+ <i data-feather="youtube"></i>
421
+ </a>
422
+ </div>
423
+ <div class="mt-6">
424
+ <p class="text-gray-300 text-sm">Subscribe to our newsletter</p>
425
+ <div class="mt-2 flex">
426
+ <input type="email" placeholder="Your email" class="rounded-l-md px-3 py-2 border border-gray-600 bg-gray-700 text-white focus:outline-none focus:ring-green-500 focus:border-green-500 w-full">
427
+ <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-r-md text-sm font-medium">
428
+ Subscribe
429
+ </button>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ <div class="mt-12 border-t border-gray-700 pt-8 flex justify-between items-center">
435
+ <p class="text-gray-400 text-sm">
436
+ &copy; 2023 UrbanTurf. All rights reserved.
437
+ </p>
438
+ <div class="flex space-x-6">
439
+ <a href="#" class="text-gray-400 hover:text-gray-300">
440
+ <span class="sr-only">English</span>
441
+ <span class="text-sm">EN</span>
442
+ </a>
443
+ <a href="#" class="text-gray-400 hover:text-gray-300">
444
+ <span class="sr-only">Hindi</span>
445
+ <span class="text-sm">हिंदी</span>
446
+ </a>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </footer>
451
+
452
+ <script>
453
+ feather.replace();
454
+ flatpickr("#date", {
455
+ minDate: "today",
456
+ maxDate: new Date().fp_incr(30) // 30 days from now
457
+ });
458
+ </script>
459
+ </body>
460
  </html>
login.html ADDED
@@ -0,0 +1,43 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Login - UrbanTurf</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .login-bg {
13
+ background: linear-gradient(135deg, rgba(0, 176, 155, 0.1) 0%, rgba(150, 201, 61, 0.1) 100%);
14
+ }
15
+ .input-focus:focus {
16
+ border-color: #10b981;
17
+ box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="login-bg min-h-screen flex items-center justify-center">
22
+ <div class="max-w-md w-full space-y-8 p-10 bg-white rounded-xl shadow-lg">
23
+ <div class="text-center">
24
+ <i data-feather="grass" class="h-12 w-12 text-green-500 mx-auto"></i>
25
+ <h2 class="mt-6 text-3xl font-extrabold text-gray-900">
26
+ Welcome back
27
+ </h2>
28
+ <p class="mt-2 text-sm text-gray-600">
29
+ Sign in to your UrbanTurf account
30
+ </p>
31
+ </div>
32
+ <form class="mt-8 space-y-6" action="#" method="POST">
33
+ <input type="hidden" name="remember" value="true">
34
+ <div class="rounded-md shadow-sm space-y-4">
35
+ <div>
36
+ <label for="email" class="sr-only">Email address</label>
37
+ <div class="relative">
38
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
39
+ <i data-feather="mail" class="h-5 w-5 text-gray-400"></i>
40
+ </div>
41
+ <input id="email" name="email" type="email" autocomplete="email" required class="input-focus pl-10 block w-full
42
+ </body>
43
+ </html>
turf-details.html ADDED
@@ -0,0 +1,195 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Turf Details - TurfTitan</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .amenity-card:hover {
12
+ transform: translateY(-5px);
13
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
14
+ }
15
+ .turf-image {
16
+ height: 300px;
17
+ object-fit: cover;
18
+ width: 100%;
19
+ }
20
+ </style>
21
+ </head>
22
+ <body class="bg-gray-50">
23
+ <nav class="bg-white shadow-md">
24
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
25
+ <div class="flex justify-between h-16">
26
+ <div class="flex items-center">
27
+ <div class="flex-shrink-0 flex items-center">
28
+ <i data-feather="grass" class="h-8 w-8 text-green-500"></i>
29
+ <span class="ml-2 text-xl font-bold text-gray-800">TurfTitan</span>
30
+ </div>
31
+ </div>
32
+ <div class="hidden md:ml-6 md:flex md:items-center space-x-8">
33
+ <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>
34
+ <a href="turf-details.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-green-500 text-sm font-medium">Turf Details</a>
35
+ <a href="booking.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Book Now</a>
36
+ <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>
37
+ </div>
38
+ <div class="flex items-center md:hidden">
39
+ <button id="mobile-menu-button" class="text-gray-500 hover:text-gray-900">
40
+ <i data-feather="menu"></i>
41
+ </button>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </nav>
46
+
47
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
48
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
49
+ <!-- Turf Image Gallery -->
50
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-0">
51
+ <div class="md:col-span-2">
52
+ <img src="http://static.photos/sport/1200x630/42" alt="Main Turf Image" class="turf-image">
53
+ </div>
54
+ <div class="grid grid-cols-2 gap-0">
55
+ <img src="http://static.photos/sport/640x360/43" alt="Turf Image 1" class="turf-image">
56
+ <img src="http://static.photos/sport/640x360/44" alt="Turf Image 2" class="turf-image">
57
+ <img src="http://static.photos/sport/640x360/45" alt="Turf Image 3" class="turf-image">
58
+ <img src="http://static.photos/sport/640x360/46" alt="Turf Image 4" class="turf-image">
59
+ </div>
60
+ </div>
61
+
62
+ <div class="p-8">
63
+ <div class="flex justify-between items-start">
64
+ <div>
65
+ <h1 class="text-3xl font-bold text-gray-900">Premium Football Turf</h1>
66
+ <div class="mt-2 flex items-center">
67
+ <i data-feather="map-pin" class="h-4 w-4 text-gray-500 mr-1"></i>
68
+ <span class="text-gray-600">123 Sports Avenue, Greenfield, City</span>
69
+ </div>
70
+ </div>
71
+ <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
72
+ FIFA Certified
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Turf Highlights -->
77
+ <div class="mt-8">
78
+ <h2 class="text-xl font-semibold text-gray-900">Turf Highlights</h2>
79
+ <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
80
+ <div class="bg-gray-50 p-4 rounded-lg flex items-center">
81
+ <i data-feather="clock" class="h-6 w-6 text-green-500 mr-3"></i>
82
+ <div>
83
+ <p class="text-sm text-gray-500">Opening Hours</p>
84
+ <p class="font-medium">6AM - 11PM</p>
85
+ </div>
86
+ </div>
87
+ <div class="bg-gray-50 p-4 rounded-lg flex items-center">
88
+ <i data-feather="users" class="h-6 w-6 text-green-500 mr-3"></i>
89
+ <div>
90
+ <p class="text-sm text-gray-500">Capacity</p>
91
+ <p class="font-medium">20 Players</p>
92
+ </div>
93
+ </div>
94
+ <div class="bg-gray-50 p-4 rounded-lg flex items-center">
95
+ <i data-feather="ruler" class="h-6 w-6 text-green-500 mr-3"></i>
96
+ <div>
97
+ <p class="text-sm text-gray-500">Turf Size</p>
98
+ <p class="font-medium">60m x 40m</p>
99
+ </div>
100
+ </div>
101
+ <div class="bg-gray-50 p-4 rounded-lg flex items-center">
102
+ <i data-feather="star" class="h-6 w-6 text-green-500 mr-3"></i>
103
+ <div>
104
+ <p class="text-sm text-gray-500">Rating</p>
105
+ <p class="font-medium">4.8/5 (120 reviews)</p>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Pricing Section -->
112
+ <div class="mt-12">
113
+ <h2 class="text-xl font-semibold text-gray-900">Pricing</h2>
114
+ <div class="mt-6 space-y-4">
115
+ <div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
116
+ <div>
117
+ <h3 class="font-medium">Morning (6AM - 12PM)</h3>
118
+ <p class="text-sm text-gray-500">Perfect for early birds</p>
119
+ </div>
120
+ <span class="font-bold text-green-600">₹400/hour</span>
121
+ </div>
122
+ <div class="flex justify-between items-center p-4 bg-green-50 rounded-lg border border-green-200">
123
+ <div>
124
+ <h3 class="font-medium">Afternoon (12PM - 5PM)</h3>
125
+ <p class="text-sm text-gray-500">Most popular time</p>
126
+ </div>
127
+ <span class="font-bold text-green-600">₹500/hour</span>
128
+ </div>
129
+ <div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
130
+ <div>
131
+ <h3 class="font-medium">Evening (5PM - 11PM)</h3>
132
+ <p class="text-sm text-gray-500">Floodlit games</p>
133
+ </div>
134
+ <span class="font-bold text-green-600">₹600/hour</span>
135
+ </div>
136
+ </div>
137
+ <div class="mt-4 text-sm text-gray-500">
138
+ * Group discounts available for bookings of 10+ players
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Amenities Section -->
143
+ <div class="mt-12">
144
+ <h2 class="text-xl font-semibold text-gray-900">Amenities</h2>
145
+ <div class="mt-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
146
+ <div class="amenity-card p-4 bg-white border border-gray-200 rounded-lg text-center transition-all">
147
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-500 mx-auto">
148
+ <i data-feather="droplet"></i>
149
+ </div>
150
+ <h3 class="mt-3 text-sm font-medium text-gray-900">Drinking Water</h3>
151
+ </div>
152
+ <div class="amenity-card p-4 bg-white border border-gray-200 rounded-lg text-center transition-all">
153
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-500 mx-auto">
154
+ <i data-feather="locker"></i>
155
+ </div>
156
+ <h3 class="mt-3 text-sm font-medium text-gray-900">Changing Rooms</h3>
157
+ </div>
158
+ <div class="amenity-card p-4 bg-white border border-gray-200 rounded-lg text-center transition-all">
159
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-500 mx-auto">
160
+ <i data-feather="shower"></i>
161
+ </div>
162
+ <h3 class="mt-3 text-sm font-medium text-gray-900">Showers</h3>
163
+ </div>
164
+ <div class="amenity-card p-4 bg-white border border-gray-200 rounded-lg text-center transition-all">
165
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-500 mx-auto">
166
+ <i data-feather="parking"></i>
167
+ </div>
168
+ <h3 class="mt-3 text-sm font-medium text-gray-900">Parking</h3>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Location Map -->
174
+ <div class="mt-12">
175
+ <h2 class="text-xl font-semibold text-gray-900">Location</h2>
176
+ <div class="mt-6 rounded-xl overflow-hidden">
177
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3502.786481768283!2d77.30758641508248!3d28.60780198242892!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce521f9e2a447%3A0x5c9a4a6d1f3a0f0!2sFootball%20Turf!5e0!3m2!1sen!2sin!4v1620000000000!5m2!1sen!2sin"
178
+ width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <script>
186
+ feather.replace();
187
+
188
+ // Mobile menu toggle
189
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
190
+ // Implement mobile menu toggle functionality here
191
+ console.log('Mobile menu clicked');
192
+ });
193
+ </script>
194
+ </body>
195
+ </html>