Hugging Face's logo

Spaces:
Dataio
/
tunk
Running

App Files Community
Dataio commited on
Commit
d3d6b27
·
verified ·
1 Parent(s): 6bc6ae8

Una web para una discoteca,/salon de conciertos. Nombre "new Tunk ", espacio para el logo, publicacion de eventos, venta de ntradas, reservacion de mesas. Funcionalidad que pueda darse de baja/alta los eventos y la configuracion de mesas. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1046 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tunk
3
- emoji: 🏆
4
- colorFrom: blue
5
- colorTo: yellow
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: tunk
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1046 @@
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="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>New Tunk - Club & Concert Venue</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for elements that need more specific styling */
11
+ .event-card:hover {
12
+ transform: translateY(-5px);
13
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
14
+ }
15
+
16
+ .table-selected {
17
+ box-shadow: 0 0 0 3px #f59e0b;
18
+ }
19
+
20
+ .admin-panel {
21
+ transition: all 0.3s ease;
22
+ }
23
+
24
+ .admin-panel.hidden {
25
+ transform: translateX(100%);
26
+ opacity: 0;
27
+ }
28
+
29
+ .logo-text {
30
+ font-family: 'Impact', sans-serif;
31
+ text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
32
+ }
33
+
34
+ @keyframes pulse {
35
+ 0%, 100% {
36
+ opacity: 1;
37
+ }
38
+ 50% {
39
+ opacity: 0.5;
40
+ }
41
+ }
42
+
43
+ .animate-pulse {
44
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-900 text-white min-h-screen">
49
+ <!-- Admin Login Button (Fixed) -->
50
+ <button id="adminToggle" class="fixed top-4 right-4 bg-purple-800 hover:bg-purple-700 text-white px-4 py-2 rounded-full z-50 shadow-lg">
51
+ <i class="fas fa-lock mr-2"></i>Admin
52
+ </button>
53
+
54
+ <!-- Admin Panel -->
55
+ <div id="adminPanel" class="admin-panel hidden fixed top-0 right-0 h-full w-full md:w-1/3 bg-gray-800 z-40 p-6 overflow-y-auto shadow-2xl">
56
+ <div class="flex justify-between items-center mb-8">
57
+ <h2 class="text-2xl font-bold">Admin Panel</h2>
58
+ <button id="closeAdmin" class="text-gray-400 hover:text-white">
59
+ <i class="fas fa-times text-2xl"></i>
60
+ </button>
61
+ </div>
62
+
63
+ <div class="mb-8">
64
+ <h3 class="text-xl font-semibold mb-4 border-b border-gray-700 pb-2">Manage Events</h3>
65
+ <div class="space-y-4">
66
+ <div class="bg-gray-700 p-4 rounded-lg">
67
+ <h4 class="font-medium mb-2">Add New Event</h4>
68
+ <div class="space-y-3">
69
+ <input type="text" id="eventTitle" placeholder="Event Title" class="w-full bg-gray-600 rounded px-3 py-2">
70
+ <input type="date" id="eventDate" class="w-full bg-gray-600 rounded px-3 py-2">
71
+ <input type="time" id="eventTime" class="w-full bg-gray-600 rounded px-3 py-2">
72
+ <textarea id="eventDescription" placeholder="Description" class="w-full bg-gray-600 rounded px-3 py-2"></textarea>
73
+ <input type="number" id="eventPrice" placeholder="Ticket Price" class="w-full bg-gray-600 rounded px-3 py-2">
74
+ <input type="text" id="eventImage" placeholder="Image URL" class="w-full bg-gray-600 rounded px-3 py-2">
75
+ <button id="addEvent" class="w-full bg-green-600 hover:bg-green-700 py-2 rounded font-medium">
76
+ <i class="fas fa-plus mr-2"></i>Add Event
77
+ </button>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="bg-gray-700 p-4 rounded-lg">
82
+ <h4 class="font-medium mb-2">Current Events</h4>
83
+ <div id="adminEventsList" class="space-y-3">
84
+ <!-- Events will be added here dynamically -->
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <div>
91
+ <h3 class="text-xl font-semibold mb-4 border-b border-gray-700 pb-2">Table Configuration</h3>
92
+ <div class="grid grid-cols-2 gap-4 mb-4">
93
+ <div>
94
+ <label class="block mb-1">Table Rows</label>
95
+ <input type="number" id="tableRows" min="1" max="10" value="4" class="w-full bg-gray-600 rounded px-3 py-2">
96
+ </div>
97
+ <div>
98
+ <label class="block mb-1">Tables per Row</label>
99
+ <input type="number" id="tablesPerRow" min="1" max="10" value="6" class="w-full bg-gray-600 rounded px-3 py-2">
100
+ </div>
101
+ </div>
102
+ <button id="updateTableLayout" class="w-full bg-blue-600 hover:bg-blue-700 py-2 rounded font-medium mb-6">
103
+ <i class="fas fa-sync-alt mr-2"></i>Update Layout
104
+ </button>
105
+
106
+ <div class="bg-gray-700 p-4 rounded-lg">
107
+ <h4 class="font-medium mb-2">Current Reservations</h4>
108
+ <div id="reservationsList" class="space-y-3">
109
+ <!-- Reservations will be added here dynamically -->
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Main Content -->
116
+ <div class="container mx-auto px-4">
117
+ <!-- Header with Logo -->
118
+ <header class="py-8 text-center">
119
+ <div class="logo-container inline-block relative">
120
+ <div class="absolute -inset-4 bg-purple-600 rounded-full blur-md opacity-30 animate-pulse"></div>
121
+ <h1 class="logo-text text-6xl md:text-8xl font-bold text-purple-400 relative z-10">NEW TUNK</h1>
122
+ </div>
123
+ <p class="mt-4 text-xl text-purple-200">Club & Concert Venue</p>
124
+ </header>
125
+
126
+ <!-- Navigation -->
127
+ <nav class="flex justify-center mb-12">
128
+ <div class="flex space-x-1 bg-gray-800 rounded-full p-1">
129
+ <button class="nav-link px-6 py-2 rounded-full font-medium active" data-section="events">
130
+ <i class="fas fa-calendar-alt mr-2"></i>Events
131
+ </button>
132
+ <button class="nav-link px-6 py-2 rounded-full font-medium" data-section="tickets">
133
+ <i class="fas fa-ticket-alt mr-2"></i>Tickets
134
+ </button>
135
+ <button class="nav-link px-6 py-2 rounded-full font-medium" data-section="reservations">
136
+ <i class="fas fa-utensils mr-2"></i>Reservations
137
+ </button>
138
+ <button class="nav-link px-6 py-2 rounded-full font-medium" data-section="about">
139
+ <i class="fas fa-info-circle mr-2"></i>About
140
+ </button>
141
+ </div>
142
+ </nav>
143
+
144
+ <!-- Main Sections -->
145
+ <main>
146
+ <!-- Events Section -->
147
+ <section id="events-section" class="section-content py-8">
148
+ <h2 class="text-3xl font-bold mb-8 text-center">Upcoming Events</h2>
149
+ <div id="eventsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
150
+ <!-- Events will be loaded here dynamically -->
151
+ <div class="text-center py-12">
152
+ <div class="animate-spin inline-block text-purple-500 text-4xl mb-4">
153
+ <i class="fas fa-compact-disc"></i>
154
+ </div>
155
+ <p>Loading events...</p>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- Tickets Section -->
161
+ <section id="tickets-section" class="section-content py-8 hidden">
162
+ <h2 class="text-3xl font-bold mb-8 text-center">Buy Tickets</h2>
163
+ <div id="ticketsContainer" class="max-w-2xl mx-auto">
164
+ <div class="bg-gray-800 rounded-lg p-6 mb-6">
165
+ <p class="text-center text-gray-400">Select an event to purchase tickets</p>
166
+ </div>
167
+ </div>
168
+ </section>
169
+
170
+ <!-- Reservations Section -->
171
+ <section id="reservations-section" class="section-content py-8 hidden">
172
+ <h2 class="text-3xl font-bold mb-8 text-center">Table Reservations</h2>
173
+ <div class="max-w-4xl mx-auto">
174
+ <div class="bg-gray-800 rounded-lg p-6 mb-6">
175
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
176
+ <div>
177
+ <h3 class="text-xl font-semibold mb-4">Available Tables</h3>
178
+ <div id="tableLayout" class="grid grid-cols-6 gap-2 mb-4">
179
+ <!-- Tables will be generated here dynamically -->
180
+ </div>
181
+ <div class="text-sm text-gray-400">
182
+ <p>Click on a table to select it for reservation</p>
183
+ </div>
184
+ </div>
185
+ <div>
186
+ <h3 class="text-xl font-semibold mb-4">Reservation Details</h3>
187
+ <div class="space-y-4">
188
+ <div>
189
+ <label class="block mb-1">Selected Table</label>
190
+ <input type="text" id="selectedTable" readonly class="w-full bg-gray-700 rounded px-3 py-2">
191
+ </div>
192
+ <div>
193
+ <label class="block mb-1">Event</label>
194
+ <select id="reservationEvent" class="w-full bg-gray-700 rounded px-3 py-2">
195
+ <option value="">Select an event</option>
196
+ </select>
197
+ </div>
198
+ <div>
199
+ <label class="block mb-1">Name</label>
200
+ <input type="text" id="reservationName" class="w-full bg-gray-700 rounded px-3 py-2">
201
+ </div>
202
+ <div>
203
+ <label class="block mb-1">Email</label>
204
+ <input type="email" id="reservationEmail" class="w-full bg-gray-700 rounded px-3 py-2">
205
+ </div>
206
+ <div>
207
+ <label class="block mb-1">Phone</label>
208
+ <input type="tel" id="reservationPhone" class="w-full bg-gray-700 rounded px-3 py-2">
209
+ </div>
210
+ <div>
211
+ <label class="block mb-1">Number of Guests</label>
212
+ <input type="number" id="reservationGuests" min="1" max="10" value="2" class="w-full bg-gray-700 rounded px-3 py-2">
213
+ </div>
214
+ <button id="submitReservation" class="w-full bg-purple-600 hover:bg-purple-700 py-2 rounded font-medium">
215
+ <i class="fas fa-check mr-2"></i>Confirm Reservation
216
+ </button>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </section>
223
+
224
+ <!-- About Section -->
225
+ <section id="about-section" class="section-content py-8 hidden">
226
+ <h2 class="text-3xl font-bold mb-8 text-center">About New Tunk</h2>
227
+ <div class="max-w-3xl mx-auto">
228
+ <div class="bg-gray-800 rounded-lg p-6 mb-6">
229
+ <div class="flex flex-col md:flex-row gap-6">
230
+ <div class="md:w-1/3">
231
+ <div class="bg-purple-900 aspect-square rounded-lg mb-4 flex items-center justify-center">
232
+ <i class="fas fa-music text-6xl text-purple-400"></i>
233
+ </div>
234
+ </div>
235
+ <div class="md:w-2/3">
236
+ <h3 class="text-xl font-semibold mb-4">The Ultimate Nightlife Experience</h3>
237
+ <p class="mb-4">New Tunk is the premier destination for music lovers and party-goers alike. With state-of-the-art sound systems, stunning light shows, and an electric atmosphere, we bring you unforgettable nights.</p>
238
+ <p class="mb-4">Our venue hosts world-class DJs, live bands, and special events throughout the year. Whether you're looking to dance the night away or enjoy cocktails with friends, New Tunk has something for everyone.</p>
239
+ <div class="flex space-x-4 mt-6">
240
+ <a href="#" class="text-purple-400 hover:text-purple-300">
241
+ <i class="fab fa-facebook-f text-2xl"></i>
242
+ </a>
243
+ <a href="#" class="text-purple-400 hover:text-purple-300">
244
+ <i class="fab fa-instagram text-2xl"></i>
245
+ </a>
246
+ <a href="#" class="text-purple-400 hover:text-purple-300">
247
+ <i class="fab fa-twitter text-2xl"></i>
248
+ </a>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
255
+ <div class="bg-gray-800 rounded-lg p-6">
256
+ <h3 class="text-xl font-semibold mb-4 flex items-center">
257
+ <i class="fas fa-clock mr-3 text-purple-400"></i>Opening Hours
258
+ </h3>
259
+ <ul class="space-y-2">
260
+ <li class="flex justify-between border-b border-gray-700 pb-2">
261
+ <span>Monday - Thursday</span>
262
+ <span>6PM - 2AM</span>
263
+ </li>
264
+ <li class="flex justify-between border-b border-gray-700 pb-2">
265
+ <span>Friday - Saturday</span>
266
+ <span>8PM - 4AM</span>
267
+ </li>
268
+ <li class="flex justify-between">
269
+ <span>Sunday</span>
270
+ <span>Closed</span>
271
+ </li>
272
+ </ul>
273
+ </div>
274
+
275
+ <div class="bg-gray-800 rounded-lg p-6">
276
+ <h3 class="text-xl font-semibold mb-4 flex items-center">
277
+ <i class="fas fa-map-marker-alt mr-3 text-purple-400"></i>Location
278
+ </h3>
279
+ <p class="mb-4">123 Music Avenue<br>Nightlife District<br>City, ST 12345</p>
280
+ <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded font-medium">
281
+ <i class="fas fa-directions mr-2"></i>Get Directions
282
+ </button>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </section>
287
+ </main>
288
+
289
+ <!-- Footer -->
290
+ <footer class="py-12 mt-12 border-t border-gray-800">
291
+ <div class="text-center">
292
+ <div class="logo-container inline-block mb-6">
293
+ <h2 class="logo-text text-4xl font-bold text-purple-400">NEW TUNK</h2>
294
+ </div>
295
+ <p class="text-gray-400 mb-6">© 2023 New Tunk. All rights reserved.</p>
296
+ <div class="flex justify-center space-x-6">
297
+ <a href="#" class="text-gray-400 hover:text-white">
298
+ <i class="fab fa-facebook-f"></i>
299
+ </a>
300
+ <a href="#" class="text-gray-400 hover:text-white">
301
+ <i class="fab fa-instagram"></i>
302
+ </a>
303
+ <a href="#" class="text-gray-400 hover:text-white">
304
+ <i class="fab fa-twitter"></i>
305
+ </a>
306
+ <a href="#" class="text-gray-400 hover:text-white">
307
+ <i class="fab fa-soundcloud"></i>
308
+ </a>
309
+ </div>
310
+ </div>
311
+ </footer>
312
+ </div>
313
+
314
+ <!-- Event Modal -->
315
+ <div id="eventModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
316
+ <div class="bg-gray-800 rounded-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
317
+ <div class="p-6">
318
+ <div class="flex justify-between items-start mb-4">
319
+ <div>
320
+ <h2 id="modalEventTitle" class="text-2xl font-bold"></h2>
321
+ <p id="modalEventDate" class="text-purple-400"></p>
322
+ </div>
323
+ <button id="closeModal" class="text-gray-400 hover:text-white">
324
+ <i class="fas fa-times text-2xl"></i>
325
+ </button>
326
+ </div>
327
+
328
+ <div class="mb-6">
329
+ <div id="modalEventImage" class="w-full h-48 md:h-64 bg-gray-700 rounded-lg mb-4 flex items-center justify-center">
330
+ <i class="fas fa-music text-5xl text-gray-500"></i>
331
+ </div>
332
+ <p id="modalEventDescription" class="mb-4"></p>
333
+ <div class="flex items-center">
334
+ <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium">
335
+ <i class="fas fa-ticket-alt mr-1"></i> <span id="modalEventPrice"></span>
336
+ </span>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
341
+ <button id="buyTicketsBtn" class="bg-green-600 hover:bg-green-700 py-3 rounded font-medium">
342
+ <i class="fas fa-ticket-alt mr-2"></i>Buy Tickets
343
+ </button>
344
+ <button id="reserveTableBtn" class="bg-purple-600 hover:bg-purple-700 py-3 rounded font-medium">
345
+ <i class="fas fa-utensils mr-2"></i>Reserve Table
346
+ </button>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Ticket Purchase Modal -->
353
+ <div id="ticketModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
354
+ <div class="bg-gray-800 rounded-lg max-w-md w-full mx-4">
355
+ <div class="p-6">
356
+ <div class="flex justify-between items-start mb-4">
357
+ <div>
358
+ <h2 class="text-2xl font-bold">Ticket Purchase</h2>
359
+ <p id="ticketEventTitle" class="text-purple-400"></p>
360
+ </div>
361
+ <button id="closeTicketModal" class="text-gray-400 hover:text-white">
362
+ <i class="fas fa-times text-2xl"></i>
363
+ </button>
364
+ </div>
365
+
366
+ <div class="space-y-4 mb-6">
367
+ <div>
368
+ <label class="block mb-1">Quantity</label>
369
+ <div class="flex items-center">
370
+ <button id="decrementTicket" class="bg-gray-700 px-3 py-2 rounded-l">
371
+ <i class="fas fa-minus"></i>
372
+ </button>
373
+ <input type="number" id="ticketQuantity" min="1" value="1" class="bg-gray-700 w-16 text-center py-2">
374
+ <button id="incrementTicket" class="bg-gray-700 px-3 py-2 rounded-r">
375
+ <i class="fas fa-plus"></i>
376
+ </button>
377
+ </div>
378
+ </div>
379
+
380
+ <div>
381
+ <label class="block mb-1">Name</label>
382
+ <input type="text" id="ticketName" class="w-full bg-gray-700 rounded px-3 py-2">
383
+ </div>
384
+
385
+ <div>
386
+ <label class="block mb-1">Email</label>
387
+ <input type="email" id="ticketEmail" class="w-full bg-gray-700 rounded px-3 py-2">
388
+ </div>
389
+
390
+ <div class="pt-4 border-t border-gray-700">
391
+ <div class="flex justify-between mb-2">
392
+ <span>Tickets (<span id="ticketQtyDisplay">1</span>x)</span>
393
+ <span id="ticketUnitPrice"></span>
394
+ </div>
395
+ <div class="flex justify-between font-bold text-lg">
396
+ <span>Total</span>
397
+ <span id="ticketTotalPrice"></span>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <button id="confirmPurchase" class="w-full bg-green-600 hover:bg-green-700 py-3 rounded font-medium">
403
+ <i class="fas fa-credit-card mr-2"></i>Confirm Purchase
404
+ </button>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- Confirmation Modal -->
410
+ <div id="confirmationModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
411
+ <div class="bg-gray-800 rounded-lg max-w-md w-full mx-4">
412
+ <div class="p-6 text-center">
413
+ <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
414
+ <i class="fas fa-check text-2xl text-white"></i>
415
+ </div>
416
+ <h2 id="confirmationTitle" class="text-2xl font-bold mb-2"></h2>
417
+ <p id="confirmationMessage" class="mb-6"></p>
418
+ <button id="closeConfirmation" class="bg-purple-600 hover:bg-purple-700 px-6 py-2 rounded font-medium">
419
+ Close
420
+ </button>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <script>
426
+ // Sample data for events
427
+ let events = [
428
+ {
429
+ id: 1,
430
+ title: "Electronic Night",
431
+ date: "2023-12-15",
432
+ time: "22:00",
433
+ description: "Experience the best electronic music with our resident DJs and special guests. A night of non-stop beats and incredible light show.",
434
+ price: 25,
435
+ image: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
436
+ active: true
437
+ },
438
+ {
439
+ id: 2,
440
+ title: "Live Rock Band",
441
+ date: "2023-12-22",
442
+ time: "21:00",
443
+ description: "The legendary rock band 'Midnight Riders' performs live with all their greatest hits. Don't miss this exclusive show!",
444
+ price: 40,
445
+ image: "https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
446
+ active: true
447
+ },
448
+ {
449
+ id: 3,
450
+ title: "Hip Hop Festival",
451
+ date: "2024-01-05",
452
+ time: "20:00",
453
+ description: "A full night of hip hop with performances from top artists, DJ battles, and breakdance competitions.",
454
+ price: 30,
455
+ image: "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
456
+ active: true
457
+ }
458
+ ];
459
+
460
+ let reservations = [];
461
+ let selectedEvent = null;
462
+ let selectedTable = null;
463
+ let tableRows = 4;
464
+ let tablesPerRow = 6;
465
+
466
+ // DOM Elements
467
+ const adminPanel = document.getElementById('adminPanel');
468
+ const adminToggle = document.getElementById('adminToggle');
469
+ const closeAdmin = document.getElementById('closeAdmin');
470
+ const navLinks = document.querySelectorAll('.nav-link');
471
+ const sectionContents = document.querySelectorAll('.section-content');
472
+ const eventsContainer = document.getElementById('eventsContainer');
473
+ const ticketsContainer = document.getElementById('ticketsContainer');
474
+ const tableLayout = document.getElementById('tableLayout');
475
+ const reservationEvent = document.getElementById('reservationEvent');
476
+ const selectedTableInput = document.getElementById('selectedTable');
477
+ const submitReservation = document.getElementById('submitReservation');
478
+ const eventModal = document.getElementById('eventModal');
479
+ const closeModal = document.getElementById('closeModal');
480
+ const modalEventTitle = document.getElementById('modalEventTitle');
481
+ const modalEventDate = document.getElementById('modalEventDate');
482
+ const modalEventDescription = document.getElementById('modalEventDescription');
483
+ const modalEventPrice = document.getElementById('modalEventPrice');
484
+ const modalEventImage = document.getElementById('modalEventImage');
485
+ const buyTicketsBtn = document.getElementById('buyTicketsBtn');
486
+ const reserveTableBtn = document.getElementById('reserveTableBtn');
487
+ const ticketModal = document.getElementById('ticketModal');
488
+ const closeTicketModal = document.getElementById('closeTicketModal');
489
+ const ticketEventTitle = document.getElementById('ticketEventTitle');
490
+ const ticketQuantity = document.getElementById('ticketQuantity');
491
+ const decrementTicket = document.getElementById('decrementTicket');
492
+ const incrementTicket = document.getElementById('incrementTicket');
493
+ const ticketQtyDisplay = document.getElementById('ticketQtyDisplay');
494
+ const ticketUnitPrice = document.getElementById('ticketUnitPrice');
495
+ const ticketTotalPrice = document.getElementById('ticketTotalPrice');
496
+ const confirmPurchase = document.getElementById('confirmPurchase');
497
+ const confirmationModal = document.getElementById('confirmationModal');
498
+ const confirmationTitle = document.getElementById('confirmationTitle');
499
+ const confirmationMessage = document.getElementById('confirmationMessage');
500
+ const closeConfirmation = document.getElementById('closeConfirmation');
501
+ const adminEventsList = document.getElementById('adminEventsList');
502
+ const reservationsList = document.getElementById('reservationsList');
503
+ const addEvent = document.getElementById('addEvent');
504
+ const eventTitle = document.getElementById('eventTitle');
505
+ const eventDate = document.getElementById('eventDate');
506
+ const eventTime = document.getElementById('eventTime');
507
+ const eventDescription = document.getElementById('eventDescription');
508
+ const eventPrice = document.getElementById('eventPrice');
509
+ const eventImage = document.getElementById('eventImage');
510
+ const tableRowsInput = document.getElementById('tableRows');
511
+ const tablesPerRowInput = document.getElementById('tablesPerRow');
512
+ const updateTableLayout = document.getElementById('updateTableLayout');
513
+
514
+ // Initialize the page
515
+ document.addEventListener('DOMContentLoaded', function() {
516
+ renderEvents();
517
+ generateTableLayout();
518
+ setupAdminPanel();
519
+
520
+ // Set today's date as min date for event date picker
521
+ const today = new Date().toISOString().split('T')[0];
522
+ eventDate.min = today;
523
+ });
524
+
525
+ // Navigation
526
+ navLinks.forEach(link => {
527
+ link.addEventListener('click', function() {
528
+ // Remove active class from all links
529
+ navLinks.forEach(l => l.classList.remove('active'));
530
+ // Add active class to clicked link
531
+ this.classList.add('active');
532
+
533
+ // Hide all sections
534
+ sectionContents.forEach(section => section.classList.add('hidden'));
535
+
536
+ // Show selected section
537
+ const sectionId = this.getAttribute('data-section');
538
+ document.getElementById(`${sectionId}-section`).classList.remove('hidden');
539
+ });
540
+ });
541
+
542
+ // Admin Panel Toggle
543
+ adminToggle.addEventListener('click', function() {
544
+ adminPanel.classList.toggle('hidden');
545
+ });
546
+
547
+ closeAdmin.addEventListener('click', function() {
548
+ adminPanel.classList.add('hidden');
549
+ });
550
+
551
+ // Render events
552
+ function renderEvents() {
553
+ eventsContainer.innerHTML = '';
554
+
555
+ const activeEvents = events.filter(event => event.active);
556
+
557
+ if (activeEvents.length === 0) {
558
+ eventsContainer.innerHTML = `
559
+ <div class="col-span-full text-center py-12">
560
+ <i class="fas fa-calendar-times text-4xl text-gray-500 mb-4"></i>
561
+ <p>No upcoming events scheduled. Check back soon!</p>
562
+ </div>
563
+ `;
564
+ return;
565
+ }
566
+
567
+ activeEvents.forEach(event => {
568
+ const eventDate = new Date(`${event.date}T${event.time}`);
569
+ const options = { weekday: 'long', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
570
+ const formattedDate = eventDate.toLocaleDateString('en-US', options);
571
+
572
+ const eventCard = document.createElement('div');
573
+ eventCard.className = 'event-card bg-gray-800 rounded-lg overflow-hidden transition-all duration-300 cursor-pointer';
574
+ eventCard.innerHTML = `
575
+ <div class="h-48 overflow-hidden">
576
+ <img src="${event.image}" alt="${event.title}" class="w-full h-full object-cover">
577
+ </div>
578
+ <div class="p-6">
579
+ <h3 class="text-xl font-bold mb-2">${event.title}</h3>
580
+ <p class="text-purple-400 mb-3">${formattedDate}</p>
581
+ <p class="text-gray-400 mb-4 line-clamp-2">${event.description}</p>
582
+ <div class="flex justify-between items-center">
583
+ <span class="bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium">
584
+ $${event.price}
585
+ </span>
586
+ <button class="text-white hover:text-purple-300 font-medium">
587
+ More info <i class="fas fa-arrow-right ml-1"></i>
588
+ </button>
589
+ </div>
590
+ </div>
591
+ `;
592
+
593
+ eventCard.addEventListener('click', () => openEventModal(event));
594
+ eventsContainer.appendChild(eventCard);
595
+ });
596
+
597
+ // Update reservation event dropdown
598
+ updateReservationEventDropdown();
599
+ }
600
+
601
+ // Open event modal
602
+ function openEventModal(event) {
603
+ selectedEvent = event;
604
+ const eventDate = new Date(`${event.date}T${event.time}`);
605
+ const options = { weekday: 'long', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
606
+ const formattedDate = eventDate.toLocaleDateString('en-US', options);
607
+
608
+ modalEventTitle.textContent = event.title;
609
+ modalEventDate.textContent = formattedDate;
610
+ modalEventDescription.textContent = event.description;
611
+ modalEventPrice.textContent = `$${event.price}`;
612
+
613
+ // Set event image
614
+ modalEventImage.innerHTML = '';
615
+ const img = document.createElement('img');
616
+ img.src = event.image;
617
+ img.alt = event.title;
618
+ img.className = 'w-full h-full object-cover rounded-lg';
619
+ modalEventImage.appendChild(img);
620
+
621
+ eventModal.classList.remove('hidden');
622
+ document.body.style.overflow = 'hidden';
623
+ }
624
+
625
+ // Close event modal
626
+ closeModal.addEventListener('click', function() {
627
+ eventModal.classList.add('hidden');
628
+ document.body.style.overflow = '';
629
+ });
630
+
631
+ // Buy tickets button
632
+ buyTicketsBtn.addEventListener('click', function() {
633
+ eventModal.classList.add('hidden');
634
+ openTicketModal();
635
+ });
636
+
637
+ // Reserve table button
638
+ reserveTableBtn.addEventListener('click', function() {
639
+ eventModal.classList.add('hidden');
640
+ // Switch to reservations section
641
+ navLinks.forEach(l => l.classList.remove('active'));
642
+ document.querySelector('.nav-link[data-section="reservations"]').classList.add('active');
643
+ sectionContents.forEach(section => section.classList.add('hidden'));
644
+ document.getElementById('reservations-section').classList.remove('hidden');
645
+
646
+ // Set the selected event in the dropdown
647
+ reservationEvent.value = selectedEvent.id;
648
+
649
+ // Scroll to top
650
+ window.scrollTo(0, 0);
651
+ });
652
+
653
+ // Open ticket modal
654
+ function openTicketModal() {
655
+ ticketEventTitle.textContent = selectedEvent.title;
656
+ ticketUnitPrice.textContent = `$${selectedEvent.price}`;
657
+ updateTicketTotal();
658
+
659
+ ticketModal.classList.remove('hidden');
660
+ document.body.style.overflow = 'hidden';
661
+ }
662
+
663
+ // Close ticket modal
664
+ closeTicketModal.addEventListener('click', function() {
665
+ ticketModal.classList.add('hidden');
666
+ document.body.style.overflow = '';
667
+ });
668
+
669
+ // Ticket quantity controls
670
+ decrementTicket.addEventListener('click', function() {
671
+ if (ticketQuantity.value > 1) {
672
+ ticketQuantity.value--;
673
+ updateTicketDisplay();
674
+ }
675
+ });
676
+
677
+ incrementTicket.addEventListener('click', function() {
678
+ ticketQuantity.value++;
679
+ updateTicketDisplay();
680
+ });
681
+
682
+ ticketQuantity.addEventListener('change', function() {
683
+ if (this.value < 1) this.value = 1;
684
+ updateTicketDisplay();
685
+ });
686
+
687
+ function updateTicketDisplay() {
688
+ ticketQtyDisplay.textContent = ticketQuantity.value;
689
+ updateTicketTotal();
690
+ }
691
+
692
+ function updateTicketTotal() {
693
+ const total = selectedEvent.price * ticketQuantity.value;
694
+ ticketTotalPrice.textContent = `$${total.toFixed(2)}`;
695
+ }
696
+
697
+ // Confirm purchase
698
+ confirmPurchase.addEventListener('click', function() {
699
+ const name = document.getElementById('ticketName').value;
700
+ const email = document.getElementById('ticketEmail').value;
701
+
702
+ if (!name || !email) {
703
+ showConfirmation('Error', 'Please fill in all required fields.', false);
704
+ return;
705
+ }
706
+
707
+ // In a real app, you would process payment here
708
+ ticketModal.classList.add('hidden');
709
+ showConfirmation('Purchase Complete!', `Your tickets for ${selectedEvent.title} have been reserved. A confirmation has been sent to ${email}.`, true);
710
+
711
+ // Reset form
712
+ ticketQuantity.value = 1;
713
+ document.getElementById('ticketName').value = '';
714
+ document.getElementById('ticketEmail').value = '';
715
+ updateTicketDisplay();
716
+ });
717
+
718
+ // Table layout generation
719
+ function generateTableLayout() {
720
+ tableLayout.innerHTML = '';
721
+ const totalTables = tableRows * tablesPerRow;
722
+
723
+ for (let i = 1; i <= totalTables; i++) {
724
+ const table = document.createElement('div');
725
+ table.className = 'bg-gray-700 rounded-lg aspect-square flex items-center justify-center cursor-pointer hover:bg-gray-600 transition-colors';
726
+ table.innerHTML = `
727
+ <div class="text-center">
728
+ <i class="fas fa-utensils text-xl mb-1"></i>
729
+ <div>Table ${i}</div>
730
+ </div>
731
+ `;
732
+
733
+ table.addEventListener('click', () => selectTable(i));
734
+
735
+ // Check if table is reserved for any event
736
+ const isReserved = reservations.some(r => r.table === i &&
737
+ events.some(e => e.id === r.eventId && e.active));
738
+
739
+ if (isReserved) {
740
+ table.classList.add('bg-red-900', 'hover:bg-red-800');
741
+ table.classList.remove('bg-gray-700', 'hover:bg-gray-600');
742
+ }
743
+
744
+ tableLayout.appendChild(table);
745
+ }
746
+ }
747
+
748
+ // Select table
749
+ function selectTable(tableNumber) {
750
+ // Check if table is already reserved for any active event
751
+ const isReserved = reservations.some(r => r.table === tableNumber &&
752
+ events.some(e => e.id === r.eventId && e.active));
753
+
754
+ if (isReserved) {
755
+ showConfirmation('Table Reserved', `Table ${tableNumber} is already reserved for an event. Please choose another table.`, false);
756
+ return;
757
+ }
758
+
759
+ // Remove selected class from all tables
760
+ document.querySelectorAll('#tableLayout > div').forEach(t => {
761
+ t.classList.remove('table-selected');
762
+ });
763
+
764
+ // Add selected class to clicked table
765
+ const selectedTableElement = document.querySelector(`#tableLayout > div:nth-child(${tableNumber})`);
766
+ selectedTableElement.classList.add('table-selected');
767
+
768
+ selectedTable = tableNumber;
769
+ selectedTableInput.value = `Table ${tableNumber}`;
770
+ }
771
+
772
+ // Submit reservation
773
+ submitReservation.addEventListener('click', function() {
774
+ const eventId = parseInt(reservationEvent.value);
775
+ const name = document.getElementById('reservationName').value;
776
+ const email = document.getElementById('reservationEmail').value;
777
+ const phone = document.getElementById('reservationPhone').value;
778
+ const guests = document.getElementById('reservationGuests').value;
779
+
780
+ if (!eventId || !name || !email || !selectedTable) {
781
+ showConfirmation('Error', 'Please fill in all required fields and select a table.', false);
782
+ return;
783
+ }
784
+
785
+ // Create reservation
786
+ const reservation = {
787
+ id: Date.now(),
788
+ eventId: eventId,
789
+ table: selectedTable,
790
+ name: name,
791
+ email: email,
792
+ phone: phone,
793
+ guests: guests,
794
+ date: new Date().toISOString()
795
+ };
796
+
797
+ reservations.push(reservation);
798
+
799
+ // Show confirmation
800
+ const event = events.find(e => e.id === eventId);
801
+ showConfirmation('Reservation Confirmed!', `Your table at ${event.title} has been reserved. A confirmation has been sent to ${email}.`, true);
802
+
803
+ // Reset form
804
+ selectedTable = null;
805
+ selectedTableInput.value = '';
806
+ document.getElementById('reservationName').value = '';
807
+ document.getElementById('reservationEmail').value = '';
808
+ document.getElementById('reservationPhone').value = '';
809
+ document.getElementById('reservationGuests').value = '2';
810
+
811
+ // Update table layout to show reserved tables
812
+ generateTableLayout();
813
+
814
+ // Update admin panel reservations list
815
+ updateAdminReservationsList();
816
+ });
817
+
818
+ // Show confirmation modal
819
+ function showConfirmation(title, message, isSuccess) {
820
+ confirmationTitle.textContent = title;
821
+ confirmationMessage.textContent = message;
822
+
823
+ const icon = document.querySelector('#confirmationModal .w-16');
824
+ icon.className = `w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 ${isSuccess ? 'bg-green-500' : 'bg-red-500'}`;
825
+ icon.innerHTML = isSuccess ? '<i class="fas fa-check text-2xl text-white"></i>' : '<i class="fas fa-times text-2xl text-white"></i>';
826
+
827
+ confirmationModal.classList.remove('hidden');
828
+ document.body.style.overflow = 'hidden';
829
+ }
830
+
831
+ // Close confirmation modal
832
+ closeConfirmation.addEventListener('click', function() {
833
+ confirmationModal.classList.add('hidden');
834
+ document.body.style.overflow = '';
835
+ });
836
+
837
+ // Update reservation event dropdown
838
+ function updateReservationEventDropdown() {
839
+ reservationEvent.innerHTML = '<option value="">Select an event</option>';
840
+
841
+ const activeEvents = events.filter(event => event.active);
842
+ activeEvents.forEach(event => {
843
+ const option = document.createElement('option');
844
+ option.value = event.id;
845
+ option.textContent = event.title;
846
+ reservationEvent.appendChild(option);
847
+ });
848
+
849
+ // Also update the dropdown in the tickets section
850
+ const ticketsEventDropdown = document.createElement('select');
851
+ ticketsEventDropdown.className = 'w-full bg-gray-700 rounded px-3 py-2 mb-4';
852
+ ticketsEventDropdown.innerHTML = '<option value="">Select an event to purchase tickets</option>';
853
+
854
+ activeEvents.forEach(event => {
855
+ const option = document.createElement('option');
856
+ option.value = event.id;
857
+ option.textContent = `${event.title} - $${event.price}`;
858
+ ticketsEventDropdown.appendChild(option);
859
+ });
860
+
861
+ ticketsEventDropdown.addEventListener('change', function() {
862
+ const selectedId = parseInt(this.value);
863
+ if (selectedId) {
864
+ const event = events.find(e => e.id === selectedId);
865
+ selectedEvent = event;
866
+ openTicketModal();
867
+ }
868
+ });
869
+
870
+ ticketsContainer.innerHTML = '';
871
+ ticketsContainer.appendChild(ticketsEventDropdown);
872
+ }
873
+
874
+ // Admin Panel Setup
875
+ function setupAdminPanel() {
876
+ // Initialize table configuration inputs
877
+ tableRowsInput.value = tableRows;
878
+ tablesPerRowInput.value = tablesPerRow;
879
+
880
+ // Update table layout when configuration changes
881
+ updateTableLayout.addEventListener('click', function() {
882
+ tableRows = parseInt(tableRowsInput.value);
883
+ tablesPerRow = parseInt(tablesPerRowInput.value);
884
+ generateTableLayout();
885
+ });
886
+
887
+ // Add new event
888
+ addEvent.addEventListener('click', function() {
889
+ const title = eventTitle.value.trim();
890
+ const date = eventDate.value;
891
+ const time = eventTime.value;
892
+ const description = eventDescription.value.trim();
893
+ const price = parseFloat(eventPrice.value);
894
+ const image = eventImage.value.trim();
895
+
896
+ if (!title || !date || !time || !description || isNaN(price) || !image) {
897
+ alert('Please fill in all fields with valid data');
898
+ return;
899
+ }
900
+
901
+ const newEvent = {
902
+ id: Date.now(),
903
+ title: title,
904
+ date: date,
905
+ time: time,
906
+ description: description,
907
+ price: price,
908
+ image: image,
909
+ active: true
910
+ };
911
+
912
+ events.push(newEvent);
913
+ renderEvents();
914
+ updateAdminEventsList();
915
+
916
+ // Reset form
917
+ eventTitle.value = '';
918
+ eventDate.value = '';
919
+ eventTime.value = '';
920
+ eventDescription.value = '';
921
+ eventPrice.value = '';
922
+ eventImage.value = '';
923
+ });
924
+
925
+ // Initialize admin lists
926
+ updateAdminEventsList();
927
+ updateAdminReservationsList();
928
+ }
929
+
930
+ // Update admin events list
931
+ function updateAdminEventsList() {
932
+ adminEventsList.innerHTML = '';
933
+
934
+ events.forEach(event => {
935
+ const eventElement = document.createElement('div');
936
+ eventElement.className = 'bg-gray-700 p-3 rounded flex justify-between items-center';
937
+ eventElement.innerHTML = `
938
+ <div>
939
+ <h4 class="font-medium">${event.title}</h4>
940
+ <p class="text-sm text-gray-400">${event.date} at ${event.time}</p>
941
+ </div>
942
+ <div class="flex space-x-2">
943
+ <button class="toggle-event px-3 py-1 rounded text-sm ${event.active ? 'bg-green-600 hover:bg-green-700' : 'bg-gray-600 hover:bg-gray-500'}" data-id="${event.id}">
944
+ ${event.active ? 'Active' : 'Inactive'}
945
+ </button>
946
+ <button class="delete-event px-3 py-1 rounded text-sm bg-red-600 hover:bg-red-700" data-id="${event.id}">
947
+ <i class="fas fa-trash"></i>
948
+ </button>
949
+ </div>
950
+ `;
951
+
952
+ adminEventsList.appendChild(eventElement);
953
+ });
954
+
955
+ // Add event listeners to toggle buttons
956
+ document.querySelectorAll('.toggle-event').forEach(button => {
957
+ button.addEventListener('click', function() {
958
+ const eventId = parseInt(this.getAttribute('data-id'));
959
+ const event = events.find(e => e.id === eventId);
960
+ if (event) {
961
+ event.active = !event.active;
962
+ updateAdminEventsList();
963
+ renderEvents();
964
+ }
965
+ });
966
+ });
967
+
968
+ // Add event listeners to delete buttons
969
+ document.querySelectorAll('.delete-event').forEach(button => {
970
+ button.addEventListener('click', function() {
971
+ if (confirm('Are you sure you want to delete this event?')) {
972
+ const eventId = parseInt(this.getAttribute('data-id'));
973
+ events = events.filter(e => e.id !== eventId);
974
+ updateAdminEventsList();
975
+ renderEvents();
976
+ }
977
+ });
978
+ });
979
+ }
980
+
981
+ // Update admin reservations list
982
+ function updateAdminReservationsList() {
983
+ reservationsList.innerHTML = '';
984
+
985
+ if (reservations.length === 0) {
986
+ reservationsList.innerHTML = '<p class="text-gray-400 text-center py-4">No reservations yet</p>';
987
+ return;
988
+ }
989
+
990
+ // Sort by most recent first
991
+ const sortedReservations = [...reservations].sort((a, b) => new Date(b.date) - new Date(a.date));
992
+
993
+ sortedReservations.forEach(reservation => {
994
+ const event = events.find(e => e.id === reservation.eventId);
995
+ if (!event) return;
996
+
997
+ const reservationElement = document.createElement('div');
998
+ reservationElement.className = 'bg-gray-700 p-3 rounded';
999
+ reservationElement.innerHTML = `
1000
+ <div class="flex justify-between items-start mb-2">
1001
+ <h4 class="font-medium">${event.title}</h4>
1002
+ <button class="delete-reservation text-red-400 hover:text-red-300 text-sm" data-id="${reservation.id}">
1003
+ <i class="fas fa-trash"></i>
1004
+ </button>
1005
+ </div>
1006
+ <div class="grid grid-cols-2 gap-2 text-sm">
1007
+ <div>
1008
+ <span class="text-gray-400">Table:</span>
1009
+ <span>${reservation.table}</span>
1010
+ </div>
1011
+ <div>
1012
+ <span class="text-gray-400">Guests:</span>
1013
+ <span>${reservation.guests}</span>
1014
+ </div>
1015
+ <div>
1016
+ <span class="text-gray-400">Name:</span>
1017
+ <span>${reservation.name}</span>
1018
+ </div>
1019
+ <div>
1020
+ <span class="text-gray-400">Contact:</span>
1021
+ <span>${reservation.email}</span>
1022
+ </div>
1023
+ <div class="col-span-2 text-xs text-gray-500">
1024
+ Reserved on: ${new Date(reservation.date).toLocaleString()}
1025
+ </div>
1026
+ </div>
1027
+ `;
1028
+
1029
+ reservationsList.appendChild(reservationElement);
1030
+ });
1031
+
1032
+ // Add event listeners to delete buttons
1033
+ document.querySelectorAll('.delete-reservation').forEach(button => {
1034
+ button.addEventListener('click', function() {
1035
+ if (confirm('Are you sure you want to delete this reservation?')) {
1036
+ const reservationId = parseInt(this.getAttribute('data-id'));
1037
+ reservations = reservations.filter(r => r.id !== reservationId);
1038
+ updateAdminReservationsList();
1039
+ generateTableLayout();
1040
+ }
1041
+ });
1042
+ });
1043
+ }
1044
+ </script>
1045
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Dataio/tunk" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1046
+ </html>