Hugging Face's logo

Spaces:
Dgeneral
/
massiv-space
Running

App Files Community
Dgeneral commited on
Commit
0e0cde5
·
verified ·
1 Parent(s): 050c5ab

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +536 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Massiv Space
3
- emoji: 🐨
4
- colorFrom: indigo
5
- colorTo: pink
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: massiv-space
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
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,536 @@
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>Massive Music Booking App</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ max-width: 414px;
15
+ margin: 0 auto;
16
+ background-color: #f8f9fa;
17
+ position: relative;
18
+ min-height: 100vh;
19
+ }
20
+
21
+ .app-bar {
22
+ height: 60px;
23
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
24
+ }
25
+
26
+ .bottom-nav {
27
+ height: 60px;
28
+ box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
29
+ }
30
+
31
+ .calendar-day.selected {
32
+ background-color: #3b82f6;
33
+ color: white;
34
+ }
35
+
36
+ .event-card {
37
+ transition: all 0.3s ease;
38
+ }
39
+
40
+ .event-card:hover {
41
+ transform: translateY(-3px);
42
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
43
+ }
44
+
45
+ .fade-in {
46
+ animation: fadeIn 0.3s ease-in-out;
47
+ }
48
+
49
+ @keyframes fadeIn {
50
+ from { opacity: 0; }
51
+ to { opacity: 1; }
52
+ }
53
+
54
+ .slide-up {
55
+ animation: slideUp 0.3s ease-out;
56
+ }
57
+
58
+ @keyframes slideUp {
59
+ from { transform: translateY(20px); opacity: 0; }
60
+ to { transform: translateY(0); opacity: 1; }
61
+ }
62
+ </style>
63
+ </head>
64
+ <body class="bg-gray-50">
65
+ <!-- App Header -->
66
+ <header class="app-bar bg-white fixed top-0 left-0 right-0 z-10 flex items-center justify-between px-4">
67
+ <div class="flex items-center">
68
+ <img src="https://www.massivmusic.nl/wp-content/uploads/2021/04/MassivMusic_Logo_2021_RGB-300x100.png" alt="Massive Music Logo" class="h-10">
69
+ </div>
70
+ <div class="flex items-center space-x-4">
71
+ <button class="text-gray-600">
72
+ <i class="fas fa-search"></i>
73
+ </button>
74
+ <button class="text-gray-600">
75
+ <i class="fas fa-user"></i>
76
+ </button>
77
+ </div>
78
+ </header>
79
+
80
+ <!-- Main Content -->
81
+ <main class="pt-16 pb-20 px-4">
82
+ <!-- Tab Navigation -->
83
+ <div class="flex border-b mb-6">
84
+ <button id="tab-agenda" class="flex-1 py-3 font-medium text-blue-600 border-b-2 border-blue-600">
85
+ <i class="fas fa-calendar-alt mr-2"></i> Agenda
86
+ </button>
87
+ <button id="tab-booking" class="flex-1 py-3 font-medium text-gray-500">
88
+ <i class="fas fa-calendar-plus mr-2"></i> Book Us
89
+ </button>
90
+ <button id="tab-contact" class="flex-1 py-3 font-medium text-gray-500">
91
+ <i class="fas fa-envelope mr-2"></i> Contact
92
+ </button>
93
+ </div>
94
+
95
+ <!-- Agenda Tab Content -->
96
+ <div id="content-agenda" class="slide-up">
97
+ <div class="flex justify-between items-center mb-4">
98
+ <h2 class="text-xl font-bold text-gray-800">Upcoming Shows</h2>
99
+ <div class="flex items-center space-x-2">
100
+ <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm">
101
+ <i class="fas fa-sync-alt mr-1"></i> Sync
102
+ </button>
103
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">
104
+ <i class="fas fa-filter mr-1"></i> Filter
105
+ </button>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Calendar Mini View -->
110
+ <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
111
+ <div class="flex justify-between items-center mb-3">
112
+ <button class="text-gray-500">
113
+ <i class="fas fa-chevron-left"></i>
114
+ </button>
115
+ <h3 class="font-medium">June 2024</h3>
116
+ <button class="text-gray-500">
117
+ <i class="fas fa-chevron-right"></i>
118
+ </button>
119
+ </div>
120
+ <div class="grid grid-cols-7 gap-1 text-center text-sm">
121
+ <div class="text-gray-400 py-1">S</div>
122
+ <div class="text-gray-400 py-1">M</div>
123
+ <div class="text-gray-400 py-1">T</div>
124
+ <div class="text-gray-400 py-1">W</div>
125
+ <div class="text-gray-400 py-1">T</div>
126
+ <div class="text-gray-400 py-1">F</div>
127
+ <div class="text-gray-400 py-1">S</div>
128
+
129
+ <!-- Calendar days would be populated dynamically -->
130
+ <div class="py-1">26</div>
131
+ <div class="py-1">27</div>
132
+ <div class="py-1">28</div>
133
+ <div class="py-1">29</div>
134
+ <div class="py-1">30</div>
135
+ <div class="py-1">31</div>
136
+ <div class="py-1">1</div>
137
+
138
+ <div class="py-1">2</div>
139
+ <div class="py-1">3</div>
140
+ <div class="py-1">4</div>
141
+ <div class="py-1">5</div>
142
+ <div class="py-1">6</div>
143
+ <div class="py-1">7</div>
144
+ <div class="py-1">8</div>
145
+
146
+ <div class="py-1">9</div>
147
+ <div class="py-1">10</div>
148
+ <div class="py-1">11</div>
149
+ <div class="py-1">12</div>
150
+ <div class="py-1">13</div>
151
+ <div class="py-1">14</div>
152
+ <div class="py-1">15</div>
153
+
154
+ <div class="py-1">16</div>
155
+ <div class="py-1">17</div>
156
+ <div class="py-1">18</div>
157
+ <div class="py-1">19</div>
158
+ <div class="py-1">20</div>
159
+ <div class="py-1">21</div>
160
+ <div class="py-1">22</div>
161
+
162
+ <div class="py-1">23</div>
163
+ <div class="py-1">24</div>
164
+ <div class="py-1 bg-blue-100 text-blue-600 rounded-full font-medium">25</div>
165
+ <div class="py-1">26</div>
166
+ <div class="py-1">27</div>
167
+ <div class="py-1">28</div>
168
+ <div class="py-1">29</div>
169
+
170
+ <div class="py-1">30</div>
171
+ <div class="py-1">1</div>
172
+ <div class="py-1">2</div>
173
+ <div class="py-1">3</div>
174
+ <div class="py-1">4</div>
175
+ <div class="py-1">5</div>
176
+ <div class="py-1">6</div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Events List -->
181
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Next Events</h3>
182
+ <div class="space-y-4">
183
+ <!-- Event cards would be populated from API -->
184
+ <div class="event-card bg-white rounded-xl shadow-sm p-4">
185
+ <div class="flex justify-between items-start mb-2">
186
+ <div>
187
+ <span class="inline-block px-2 py-1 bg-blue-100 text-blue-600 rounded-full text-xs font-medium mb-1">Public Show</span>
188
+ <h4 class="font-bold text-gray-800">Summer Festival</h4>
189
+ </div>
190
+ <div class="text-right">
191
+ <div class="text-sm text-gray-500">June 25, 2024</div>
192
+ <div class="text-sm text-gray-500">20:00 - 23:00</div>
193
+ </div>
194
+ </div>
195
+ <div class="flex items-center text-sm text-gray-600">
196
+ <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i>
197
+ <span>Amsterdam, NL</span>
198
+ </div>
199
+ <div class="mt-3 flex justify-between items-center">
200
+ <button class="text-blue-600 text-sm font-medium">
201
+ <i class="fas fa-info-circle mr-1"></i> Details
202
+ </button>
203
+ <button class="text-gray-600 text-sm">
204
+ <i class="fas fa-share-alt mr-1"></i> Share
205
+ </button>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="event-card bg-white rounded-xl shadow-sm p-4">
210
+ <div class="flex justify-between items-start mb-2">
211
+ <div>
212
+ <span class="inline-block px-2 py-1 bg-purple-100 text-purple-600 rounded-full text-xs font-medium mb-1">Private Event</span>
213
+ <h4 class="font-bold text-gray-800">Corporate Party</h4>
214
+ </div>
215
+ <div class="text-right">
216
+ <div class="text-sm text-gray-500">July 12, 2024</div>
217
+ <div class="text-sm text-gray-500">19:30 - 22:30</div>
218
+ </div>
219
+ </div>
220
+ <div class="flex items-center text-sm text-gray-600">
221
+ <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i>
222
+ <span>Rotterdam, NL</span>
223
+ </div>
224
+ <div class="mt-3 flex justify-between items-center">
225
+ <button class="text-blue-600 text-sm font-medium">
226
+ <i class="fas fa-info-circle mr-1"></i> Details
227
+ </button>
228
+ <button class="text-gray-600 text-sm">
229
+ <i class="fas fa-share-alt mr-1"></i> Share
230
+ </button>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="event-card bg-white rounded-xl shadow-sm p-4">
235
+ <div class="flex justify-between items-start mb-2">
236
+ <div>
237
+ <span class="inline-block px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs font-medium mb-1">Wedding</span>
238
+ <h4 class="font-bold text-gray-800">Sarah & Mike's Wedding</h4>
239
+ </div>
240
+ <div class="text-right">
241
+ <div class="text-sm text-gray-500">August 3, 2024</div>
242
+ <div class="text-sm text-gray-500">18:00 - 00:00</div>
243
+ </div>
244
+ </div>
245
+ <div class="flex items-center text-sm text-gray-600">
246
+ <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i>
247
+ <span>Utrecht, NL</span>
248
+ </div>
249
+ <div class="mt-3 flex justify-between items-center">
250
+ <button class="text-blue-600 text-sm font-medium">
251
+ <i class="fas fa-info-circle mr-1"></i> Details
252
+ </button>
253
+ <button class="text-gray-600 text-sm">
254
+ <i class="fas fa-share-alt mr-1"></i> Share
255
+ </button>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Booking Tab Content -->
262
+ <div id="content-booking" class="hidden slide-up">
263
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Book Massive Music</h2>
264
+
265
+ <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
266
+ <h3 class="font-medium text-gray-700 mb-3">Available Packages</h3>
267
+
268
+ <div class="space-y-3">
269
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
270
+ <div>
271
+ <h4 class="font-medium">Standard Package</h4>
272
+ <p class="text-sm text-gray-500">2 sets (3 hours total)</p>
273
+ </div>
274
+ <div class="text-right">
275
+ <div class="font-bold text-blue-600">€1,500</div>
276
+ <div class="text-xs text-gray-500">+ travel costs</div>
277
+ </div>
278
+ </div>
279
+
280
+ <div class="flex items-center justify-between p-3 border border-blue-200 rounded-lg bg-blue-50">
281
+ <div>
282
+ <h4 class="font-medium">Premium Package</h4>
283
+ <p class="text-sm text-gray-500">3 sets (4 hours total)</p>
284
+ </div>
285
+ <div class="text-right">
286
+ <div class="font-bold text-blue-600">€2,200</div>
287
+ <div class="text-xs text-gray-500">+ travel costs</div>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
292
+ <div>
293
+ <h4 class="font-medium">Custom Package</h4>
294
+ <p class="text-sm text-gray-500">Tailored to your needs</p>
295
+ </div>
296
+ <div class="text-right">
297
+ <div class="font-bold text-blue-600">Contact us</div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
304
+ <h3 class="font-medium text-gray-700 mb-3">Check Availability</h3>
305
+
306
+ <div class="mb-4">
307
+ <label class="block text-gray-700 mb-1">Event Date</label>
308
+ <div class="relative">
309
+ <input type="date" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
310
+ <i class="fas fa-calendar-alt absolute right-3 top-3.5 text-gray-400"></i>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="mb-4">
315
+ <label class="block text-gray-700 mb-1">Event Type</label>
316
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
317
+ <option value="">Select event type</option>
318
+ <option value="wedding">Wedding</option>
319
+ <option value="corporate">Corporate Event</option>
320
+ <option value="festival">Festival</option>
321
+ <option value="private">Private Party</option>
322
+ <option value="other">Other</option>
323
+ </select>
324
+ </div>
325
+
326
+ <button class="w-full py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition duration-300">
327
+ Check Availability
328
+ </button>
329
+ </div>
330
+
331
+ <div class="bg-white rounded-xl shadow-sm p-4">
332
+ <h3 class="font-medium text-gray-700 mb-3">Request Booking</h3>
333
+
334
+ <div class="mb-3">
335
+ <label class="block text-gray-700 mb-1">Full Name</label>
336
+ <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Your name">
337
+ </div>
338
+
339
+ <div class="mb-3">
340
+ <label class="block text-gray-700 mb-1">Email Address</label>
341
+ <input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="[email protected]">
342
+ </div>
343
+
344
+ <div class="mb-3">
345
+ <label class="block text-gray-700 mb-1">Phone Number</label>
346
+ <input type="tel" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="+31 6 12345678">
347
+ </div>
348
+
349
+ <div class="mb-3">
350
+ <label class="block text-gray-700 mb-1">Event Details</label>
351
+ <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="3" placeholder="Tell us about your event..."></textarea>
352
+ </div>
353
+
354
+ <button class="w-full py-3 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 transition duration-300">
355
+ Send Booking Request
356
+ </button>
357
+ </div>
358
+ </div>
359
+
360
+ <!-- Contact Tab Content -->
361
+ <div id="content-contact" class="hidden slide-up">
362
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Contact Us</h2>
363
+
364
+ <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
365
+ <div class="flex items-center mb-4">
366
+ <div class="bg-blue-100 p-3 rounded-full mr-3">
367
+ <i class="fas fa-envelope text-blue-600 text-xl"></i>
368
+ </div>
369
+ <div>
370
+ <h3 class="font-medium text-gray-800">Email</h3>
371
+ <a href="mailto:[email protected]" class="text-blue-600">[email protected]</a>
372
+ </div>
373
+ </div>
374
+
375
+ <div class="flex items-center mb-4">
376
+ <div class="bg-green-100 p-3 rounded-full mr-3">
377
+ <i class="fas fa-phone-alt text-green-600 text-xl"></i>
378
+ </div>
379
+ <div>
380
+ <h3 class="font-medium text-gray-800">Phone</h3>
381
+ <a href="tel:+31612345678" class="text-blue-600">+31 6 12345678</a>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="flex items-center">
386
+ <div class="bg-purple-100 p-3 rounded-full mr-3">
387
+ <i class="fas fa-globe-europe text-purple-600 text-xl"></i>
388
+ </div>
389
+ <div>
390
+ <h3 class="font-medium text-gray-800">Website</h3>
391
+ <a href="https://www.massivmusic.nl" target="_blank" class="text-blue-600">www.massivmusic.nl</a>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
397
+ <h3 class="font-medium text-gray-700 mb-3">Social Media</h3>
398
+
399
+ <div class="flex space-x-3">
400
+ <a href="#" class="flex-1 bg-blue-600 text-white py-2 px-3 rounded-lg text-center">
401
+ <i class="fab fa-facebook-f mr-2"></i> Facebook
402
+ </a>
403
+ <a href="#" class="flex-1 bg-pink-600 text-white py-2 px-3 rounded-lg text-center">
404
+ <i class="fab fa-instagram mr-2"></i> Instagram
405
+ </a>
406
+ </div>
407
+
408
+ <div class="flex space-x-3 mt-3">
409
+ <a href="#" class="flex-1 bg-red-600 text-white py-2 px-3 rounded-lg text-center">
410
+ <i class="fab fa-youtube mr-2"></i> YouTube
411
+ </a>
412
+ <a href="#" class="flex-1 bg-blue-400 text-white py-2 px-3 rounded-lg text-center">
413
+ <i class="fab fa-twitter mr-2"></i> Twitter
414
+ </a>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="bg-white rounded-xl shadow-sm p-4">
419
+ <h3 class="font-medium text-gray-700 mb-3">Quick Message</h3>
420
+
421
+ <div class="mb-3">
422
+ <label class="block text-gray-700 mb-1">Your Name</label>
423
+ <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Your name">
424
+ </div>
425
+
426
+ <div class="mb-3">
427
+ <label class="block text-gray-700 mb-1">Your Email</label>
428
+ <input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="[email protected]">
429
+ </div>
430
+
431
+ <div class="mb-3">
432
+ <label class="block text-gray-700 mb-1">Message</label>
433
+ <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="3" placeholder="Your message..."></textarea>
434
+ </div>
435
+
436
+ <button class="w-full py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition duration-300">
437
+ Send Message
438
+ </button>
439
+ </div>
440
+ </div>
441
+ </main>
442
+
443
+ <!-- Bottom Navigation -->
444
+ <nav class="bottom-nav bg-white fixed bottom-0 left-0 right-0 flex justify-around items-center">
445
+ <button class="flex flex-col items-center py-2 text-blue-600">
446
+ <i class="fas fa-calendar-alt text-lg"></i>
447
+ <span class="text-xs mt-1">Agenda</span>
448
+ </button>
449
+ <button class="flex flex-col items-center py-2 text-gray-500">
450
+ <i class="fas fa-music text-lg"></i>
451
+ <span class="text-xs mt-1">Repertoire</span>
452
+ </button>
453
+ <button class="flex flex-col items-center py-2 text-gray-500">
454
+ <i class="fas fa-photo-video text-lg"></i>
455
+ <span class="text-xs mt-1">Media</span>
456
+ </button>
457
+ <button class="flex flex-col items-center py-2 text-gray-500">
458
+ <i class="fas fa-info-circle text-lg"></i>
459
+ <span class="text-xs mt-1">About</span>
460
+ </button>
461
+ </nav>
462
+
463
+ <script>
464
+ // Tab switching functionality
465
+ document.getElementById('tab-agenda').addEventListener('click', function() {
466
+ switchTab('agenda');
467
+ });
468
+
469
+ document.getElementById('tab-booking').addEventListener('click', function() {
470
+ switchTab('booking');
471
+ });
472
+
473
+ document.getElementById('tab-contact').addEventListener('click', function() {
474
+ switchTab('contact');
475
+ });
476
+
477
+ function switchTab(tabName) {
478
+ // Hide all content
479
+ document.getElementById('content-agenda').classList.add('hidden');
480
+ document.getElementById('content-booking').classList.add('hidden');
481
+ document.getElementById('content-contact').classList.add('hidden');
482
+
483
+ // Reset all tabs
484
+ document.getElementById('tab-agenda').classList.remove('text-blue-600', 'border-blue-600');
485
+ document.getElementById('tab-agenda').classList.add('text-gray-500');
486
+ document.getElementById('tab-booking').classList.remove('text-blue-600', 'border-blue-600');
487
+ document.getElementById('tab-booking').classList.add('text-gray-500');
488
+ document.getElementById('tab-contact').classList.remove('text-blue-600', 'border-blue-600');
489
+ document.getElementById('tab-contact').classList.add('text-gray-500');
490
+
491
+ // Show selected content
492
+ document.getElementById('content-' + tabName).classList.remove('hidden');
493
+ document.getElementById('content-' + tabName).classList.add('slide-up');
494
+
495
+ // Highlight selected tab
496
+ document.getElementById('tab-' + tabName).classList.remove('text-gray-500');
497
+ document.getElementById('tab-' + tabName).classList.add('text-blue-600', 'border-blue-600');
498
+ }
499
+
500
+ // In a real app, this would sync with your WordPress site
501
+ function syncWithWebsite() {
502
+ // This would make an API call to your WordPress site
503
+ // For example using the WordPress REST API
504
+ /*
505
+ fetch('https://www.massivmusic.nl/wp-json/massivmusic/v1/events')
506
+ .then(response => response.json())
507
+ .then(data => {
508
+ // Update the app with events from your website
509
+ console.log('Synced events:', data);
510
+ });
511
+ */
512
+
513
+ // For demo purposes, we'll just show an alert
514
+ alert('Syncing with Massive Music website...');
515
+ }
516
+
517
+ // Booking form submission
518
+ function submitBooking() {
519
+ // In a real app, this would send the booking request to your server
520
+ // and trigger email notifications
521
+
522
+ // For demo purposes, we'll just show an alert
523
+ alert('Booking request sent! We will contact you soon.');
524
+ }
525
+
526
+ // Message form submission
527
+ function sendMessage() {
528
+ // In a real app, this would send the message to your server
529
+ // and trigger email notifications
530
+
531
+ // For demo purposes, we'll just show an alert
532
+ alert('Message sent! We will reply soon.');
533
+ }
534
+ </script>
535
+ <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=Dgeneral/massiv-space" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
536
+ </html>