Hugging Face's logo

Spaces:
99Odeshi
/
billy-bones
Running

App Files Community
99Odeshi commited on
Commit
9a80a7b
·
verified ·
1 Parent(s): d8f6fc2

Let's create a working celebrity booking website where i can easily add celeb of my choice where people can book them for their verious events - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +529 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Billy Bones
3
- emoji: 👁
4
  colorFrom: blue
5
- colorTo: indigo
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: billy-bones
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: gray
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,530 @@
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>StarBook - Book Celebrities for Your Events</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .celebrity-card:hover .celebrity-image {
15
+ transform: scale(1.05);
16
+ transition: transform 0.3s ease;
17
+ }
18
+ .gradient-text {
19
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
20
+ -webkit-background-clip: text;
21
+ background-clip: text;
22
+ color: transparent;
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-50">
27
+ <!-- Navigation -->
28
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
29
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
30
+ <div class="flex justify-between h-16">
31
+ <div class="flex items-center">
32
+ <div class="flex-shrink-0 flex items-center">
33
+ <i data-feather="star" class="text-indigo-600 h-8 w-8"></i>
34
+ <span class="ml-2 text-xl font-bold gradient-text">StarBook</span>
35
+ </div>
36
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
37
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
38
+ <a href="#celebrities" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Celebrities</a>
39
+ <a href="#how-it-works" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">How It Works</a>
40
+ <a href="#add-celebrity" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Add Celebrity</a>
41
+ </div>
42
+ </div>
43
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
44
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Login</button>
45
+ </div>
46
+ <div class="-mr-2 flex items-center sm:hidden">
47
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
48
+ <i data-feather="menu"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </div>
53
+
54
+ <!-- Mobile menu -->
55
+ <div class="sm:hidden hidden" id="mobile-menu">
56
+ <div class="pt-2 pb-3 space-y-1">
57
+ <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
58
+ <a href="#celebrities" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Celebrities</a>
59
+ <a href="#how-it-works" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">How It Works</a>
60
+ <a href="#add-celebrity" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Add Celebrity</a>
61
+ <div class="mt-4 pl-3">
62
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Login</button>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </nav>
67
+
68
+ <!-- Hero Section -->
69
+ <section class="relative bg-gradient-to-r from-indigo-500 to-purple-600 text-white overflow-hidden">
70
+ <div class="max-w-7xl mx-auto">
71
+ <div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
72
+ <div class="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
73
+ <div class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
74
+ <div class="sm:text-center lg:text-left">
75
+ <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl" data-aos="fade-right">
76
+ <span class="block">Book Your Favorite</span>
77
+ <span class="block">Celebrities Today</span>
78
+ </h1>
79
+ <p class="mt-3 text-base sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0" data-aos="fade-right" data-aos-delay="100">
80
+ Make your event unforgettable with appearances from top celebrities, athletes, and influencers.
81
+ </p>
82
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start" data-aos="fade-up" data-aos-delay="200">
83
+ <div class="rounded-md shadow">
84
+ <a href="#celebrities" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
85
+ Browse Celebrities
86
+ </a>
87
+ </div>
88
+ <div class="mt-3 sm:mt-0 sm:ml-3">
89
+ <a href="#how-it-works" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">
90
+ How It Works
91
+ </a>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 hidden lg:block">
100
+ <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Concert crowd">
101
+ </div>
102
+ </section>
103
+
104
+ <!-- Celebrities Section -->
105
+ <section id="celebrities" class="py-12 bg-white" data-aos="fade-up">
106
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
107
+ <div class="text-center">
108
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
109
+ Featured Celebrities
110
+ </h2>
111
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
112
+ Browse our roster of available celebrities for your next event
113
+ </p>
114
+ </div>
115
+
116
+ <div class="mt-10 grid gap-8 md:grid-cols-2 lg:grid-cols-3" id="celebrities-container">
117
+ <!-- Celebrity cards will be dynamically inserted here -->
118
+ </div>
119
+ </div>
120
+ </section>
121
+
122
+ <!-- How It Works Section -->
123
+ <section id="how-it-works" class="py-12 bg-gray-50" data-aos="fade-up">
124
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
125
+ <div class="text-center">
126
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
127
+ How It Works
128
+ </h2>
129
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
130
+ Simple steps to book your favorite celebrity
131
+ </p>
132
+ </div>
133
+
134
+ <div class="mt-10">
135
+ <div class="relative">
136
+ <div class="absolute left-1/2 -ml-px h-full w-0.5 bg-indigo-200" aria-hidden="true"></div>
137
+ <div class="relative grid grid-cols-1 gap-8 md:grid-cols-3">
138
+ <!-- Step 1 -->
139
+ <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="100">
140
+ <div class="flex items-center">
141
+ <div class="flex-shrink-0 w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
142
+ <span class="text-indigo-600 font-bold text-xl">1</span>
143
+ </div>
144
+ <div class="ml-4">
145
+ <h3 class="text-lg font-medium text-gray-900">Browse & Select</h3>
146
+ </div>
147
+ </div>
148
+ <div class="mt-4">
149
+ <p class="text-base text-gray-500">
150
+ Explore our diverse roster of celebrities and select your preferred talent for the event.
151
+ </p>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Step 2 -->
156
+ <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="200">
157
+ <div class="flex items-center">
158
+ <div class="flex-shrink-0 w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
159
+ <span class="text-indigo-600 font-bold text-xl">2</span>
160
+ </div>
161
+ <div class="ml-4">
162
+ <h3 class="text-lg font-medium text-gray-900">Submit Request</h3>
163
+ </div>
164
+ </div>
165
+ <div class="mt-4">
166
+ <p class="text-base text-gray-500">
167
+ Fill out the booking form with your event details and submit your request.
168
+ </p>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Step 3 -->
173
+ <div class="bg-white p-6 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="300">
174
+ <div class="flex items-center">
175
+ <div class="flex-shrink-0 w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
176
+ <span class="text-indigo-600 font-bold text-xl">3</span>
177
+ </div>
178
+ <div class="ml-4">
179
+ <h3 class="text-lg font-medium text-gray-900">Confirm Booking</h3>
180
+ </div>
181
+ </div>
182
+ <div class="mt-4">
183
+ <p class="text-base text-gray-500">
184
+ Our team will confirm availability and finalize your booking within 48 hours.
185
+ </p>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </section>
193
+
194
+ <!-- Add Celebrity Section -->
195
+ <section id="add-celebrity" class="py-12 bg-white" data-aos="fade-up">
196
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
197
+ <div class="text-center">
198
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
199
+ Add a Celebrity
200
+ </h2>
201
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
202
+ Submit a celebrity to our platform
203
+ </p>
204
+ </div>
205
+
206
+ <div class="mt-10 sm:mt-12">
207
+ <div class="bg-white shadow-md rounded-lg p-6 max-w-3xl mx-auto">
208
+ <form id="celebrity-form" class="space-y-6">
209
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
210
+ <div>
211
+ <label for="name" class="block text-sm font-medium text-gray-700">Celebrity Name</label>
212
+ <input type="text" name="name" id="name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
213
+ </div>
214
+ <div>
215
+ <label for="category" class="block text-sm font-medium text-gray-700">Category</label>
216
+ <select id="category" name="category" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
217
+ <option value="">Select a category</option>
218
+ <option value="Actor">Actor</option>
219
+ <option value="Musician">Musician</option>
220
+ <option value="Athlete">Athlete</option>
221
+ <option value="Influencer">Influencer</option>
222
+ <option value="Comedian">Comedian</option>
223
+ <option value="Other">Other</option>
224
+ </select>
225
+ </div>
226
+ </div>
227
+ <div>
228
+ <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
229
+ <textarea id="description" name="description" rows="3" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea>
230
+ </div>
231
+ <div>
232
+ <label for="image" class="block text-sm font-medium text-gray-700">Image URL</label>
233
+ <input type="url" name="image" id="image" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="https://example.com/image.jpg">
234
+ </div>
235
+ <div>
236
+ <label for="price" class="block text-sm font-medium text-gray-700">Booking Fee (USD)</label>
237
+ <input type="number" name="price" id="price" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
238
+ </div>
239
+ <div class="flex justify-end">
240
+ <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md text-sm font-medium">
241
+ Add Celebrity
242
+ </button>
243
+ </div>
244
+ </form>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </section>
249
+
250
+ <!-- Footer -->
251
+ <footer class="bg-gray-800 text-white">
252
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
253
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
254
+ <div>
255
+ <h3 class="text-lg font-semibold mb-4">StarBook</h3>
256
+ <p class="text-gray-300">
257
+ Connecting events with celebrities to create unforgettable experiences.
258
+ </p>
259
+ </div>
260
+ <div>
261
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
262
+ <ul class="space-y-2">
263
+ <li><a href="#" class="text-gray-300 hover:text-white">Home</a></li>
264
+ <li><a href="#celebrities" class="text-gray-300 hover:text-white">Celebrities</a></li>
265
+ <li><a href="#how-it-works" class="text-gray-300 hover:text-white">How It Works</a></li>
266
+ <li><a href="#add-celebrity" class="text-gray-300 hover:text-white">Add Celebrity</a></li>
267
+ </ul>
268
+ </div>
269
+ <div>
270
+ <h3 class="text-lg font-semibold mb-4">Contact Us</h3>
271
+ <ul class="space-y-2">
272
+ <li class="flex items-center text-gray-300"><i data-feather="mail" class="mr-2"></i> contact@starbook.com</li>
273
+ <li class="flex items-center text-gray-300"><i data-feather="phone" class="mr-2"></i> (555) 123-4567</li>
274
+ <li class="flex items-center text-gray-300"><i data-feather="map-pin" class="mr-2"></i> 123 Celebrity Ave, Hollywood</li>
275
+ </ul>
276
+ </div>
277
+ </div>
278
+ <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
279
+ <p>&copy; 2023 StarBook. All rights reserved.</p>
280
+ </div>
281
+ </div>
282
+ </footer>
283
+
284
+ <!-- Booking Modal -->
285
+ <div id="booking-modal" class="fixed z-50 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
286
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
287
+ <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
288
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
289
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
290
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
291
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Book <span id="modal-celebrity-name"></span></h3>
292
+ <div class="mt-2">
293
+ <form id="booking-form">
294
+ <input type="hidden" id="celebrity-id" name="celebrity-id">
295
+ <div class="mb-4">
296
+ <label for="event-type" class="block text-sm font-medium text-gray-700">Event Type</label>
297
+ <select id="event-type" name="event-type" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
298
+ <option value="">Select event type</option>
299
+ <option value="Corporate Event">Corporate Event</option>
300
+ <option value="Private Party">Private Party</option>
301
+ <option value="Wedding">Wedding</option>
302
+ <option value="Charity Event">Charity Event</option>
303
+ <option value="Concert">Concert</option>
304
+ <option value="Other">Other</option>
305
+ </select>
306
+ </div>
307
+ <div class="mb-4">
308
+ <label for="event-date" class="block text-sm font-medium text-gray-700">Event Date</label>
309
+ <input type="date" id="event-date" name="event-date" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
310
+ </div>
311
+ <div class="mb-4">
312
+ <label for="contact-name" class="block text-sm font-medium text-gray-700">Your Name</label>
313
+ <input type="text" id="contact-name" name="contact-name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
314
+ </div>
315
+ <div class="mb-4">
316
+ <label for="contact-email" class="block text-sm font-medium text-gray-700">Email</label>
317
+ <input type="email" id="contact-email" name="contact-email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
318
+ </div>
319
+ <div class="mb-4">
320
+ <label for="contact-phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
321
+ <input type="tel" id="contact-phone" name="contact-phone" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
322
+ </div>
323
+ <div class="mb-4">
324
+ <label for="special-requests" class="block text-sm font-medium text-gray-700">Special Requests</label>
325
+ <textarea id="special-requests" name="special-requests" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea>
326
+ </div>
327
+ </form>
328
+ </div>
329
+ </div>
330
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
331
+ <button type="button" id="confirm-booking" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
332
+ Submit Booking Request
333
+ </button>
334
+ <button type="button" id="cancel-booking" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
335
+ Cancel
336
+ </button>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Success Toast -->
343
+ <div id="success-toast" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg hidden flex items-center">
344
+ <i data-feather="check-circle" class="mr-2"></i>
345
+ <span id="toast-message"></span>
346
+ </div>
347
+
348
+ <script>
349
+ // Initialize libraries
350
+ AOS.init();
351
+ feather.replace();
352
+
353
+ // Mobile menu toggle
354
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
355
+ const menu = document.getElementById('mobile-menu');
356
+ menu.classList.toggle('hidden');
357
+ });
358
+
359
+ // Sample celebrity data
360
+ let celebrities = [
361
+ {
362
+ id: 1,
363
+ name: "John Smith",
364
+ category: "Actor",
365
+ description: "Award-winning actor known for blockbuster movies and TV series appearances.",
366
+ image: "https://randomuser.me/api/portraits/men/32.jpg",
367
+ price: 50000
368
+ },
369
+ {
370
+ id: 2,
371
+ name: "Emma Johnson",
372
+ category: "Musician",
373
+ description: "Chart-topping singer with multiple platinum albums and global tours.",
374
+ image: "https://randomuser.me/api/portraits/women/44.jpg",
375
+ price: 75000
376
+ },
377
+ {
378
+ id: 3,
379
+ name: "Michael Brown",
380
+ category: "Athlete",
381
+ description: "Professional athlete with championship titles and Olympic medals.",
382
+ image: "https://randomuser.me/api/portraits/men/75.jpg",
383
+ price: 40000
384
+ },
385
+ {
386
+ id: 4,
387
+ name: "Sarah Davis",
388
+ category: "Influencer",
389
+ description: "Social media influencer with millions of followers across platforms.",
390
+ image: "https://randomuser.me/api/portraits/women/68.jpg",
391
+ price: 30000
392
+ },
393
+ {
394
+ id: 5,
395
+ name: "David Wilson",
396
+ category: "Comedian",
397
+ description: "Stand-up comedian with multiple comedy specials and TV appearances.",
398
+ image: "https://randomuser.me/api/portraits/men/91.jpg",
399
+ price: 35000
400
+ },
401
+ {
402
+ id: 6,
403
+ name: "Lisa Taylor",
404
+ category: "Actor",
405
+ description: "Versatile actress known for both dramatic and comedic roles.",
406
+ image: "https://randomuser.me/api/portraits/women/33.jpg",
407
+ price: 45000
408
+ }
409
+ ];
410
+
411
+ // Render celebrities
412
+ function renderCelebrities() {
413
+ const container = document.getElementById('celebrities-container');
414
+ container.innerHTML = '';
415
+
416
+ celebrities.forEach(celebrity => {
417
+ const card = document.createElement('div');
418
+ card.className = 'celebrity-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl';
419
+ card.innerHTML = `
420
+ <div class="h-48 overflow-hidden">
421
+ <img src="${celebrity.image}" alt="${celebrity.name}" class="celebrity-image w-full h-full object-cover">
422
+ </div>
423
+ <div class="p-6">
424
+ <div class="flex justify-between items-start">
425
+ <div>
426
+ <h3 class="text-lg font-bold text-gray-900">${celebrity.name}</h3>
427
+ <span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-indigo-100 text-indigo-800 mt-1">${celebrity.category}</span>
428
+ </div>
429
+ <div class="text-xl font-bold text-indigo-600">$${celebrity.price.toLocaleString()}</div>
430
+ </div>
431
+ <p class="mt-3 text-gray-600">${celebrity.description}</p>
432
+ <button class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md book-button" data-id="${celebrity.id}">
433
+ Book Now
434
+ </button>
435
+ </div>
436
+ `;
437
+ container.appendChild(card);
438
+ });
439
+
440
+ // Add event listeners to book buttons
441
+ document.querySelectorAll('.book-button').forEach(button => {
442
+ button.addEventListener('click', function() {
443
+ const celebrityId = parseInt(this.getAttribute('data-id'));
444
+ openBookingModal(celebrityId);
445
+ });
446
+ });
447
+ }
448
+
449
+ // Open booking modal
450
+ function openBookingModal(celebrityId) {
451
+ const celebrity = celebrities.find(c => c.id === celebrityId);
452
+ if (!celebrity) return;
453
+
454
+ document.getElementById('modal-celebrity-name').textContent = celebrity.name;
455
+ document.getElementById('celebrity-id').value = celebrity.id;
456
+ document.getElementById('booking-modal').classList.remove('hidden');
457
+ }
458
+
459
+ // Close booking modal
460
+ function closeBookingModal() {
461
+ document.getElementById('booking-modal').classList.add('hidden');
462
+ document.getElementById('booking-form').reset();
463
+ }
464
+
465
+ // Handle form submissions
466
+ document.getElementById('celebrity-form').addEventListener('submit', function(e) {
467
+ e.preventDefault();
468
+
469
+ const formData = new FormData(this);
470
+ const newCelebrity = {
471
+ id: celebrities.length + 1,
472
+ name: formData.get('name'),
473
+ category: formData.get('category'),
474
+ description: formData.get('description'),
475
+ image: formData.get('image'),
476
+ price: parseInt(formData.get('price'))
477
+ };
478
+
479
+ celebrities.push(newCelebrity);
480
+ renderCelebrities();
481
+ this.reset();
482
+
483
+ showToast('Celebrity added successfully!');
484
+ });
485
+
486
+ document.getElementById('booking-form').addEventListener('submit', function(e) {
487
+ e.preventDefault();
488
+
489
+ // In a real app, you would send this data to your backend
490
+ const formData = new FormData(this);
491
+ const bookingData = {
492
+ celebrityId: formData.get('celebrity-id'),
493
+ eventType: formData.get('event-type'),
494
+ eventDate: formData.get('event-date'),
495
+ contactName: formData.get('contact-name'),
496
+ contactEmail: formData.get('contact-email'),
497
+ contactPhone: formData.get('contact-phone'),
498
+ specialRequests: formData.get('special-requests')
499
+ };
500
+
501
+ closeBookingModal();
502
+ showToast('Booking request submitted successfully!');
503
+ });
504
+
505
+ // Modal button events
506
+ document.getElementById('confirm-booking').addEventListener('click', function() {
507
+ document.getElementById('booking-form').dispatchEvent(new Event('submit'));
508
+ });
509
+
510
+ document.getElementById('cancel-booking').addEventListener('click', closeBookingModal);
511
+
512
+ // Show toast notification
513
+ function showToast(message) {
514
+ const toast = document.getElementById('success-toast');
515
+ document.getElementById('toast-message').textContent = message;
516
+ toast.classList.remove('hidden');
517
+
518
+ setTimeout(() => {
519
+ toast.classList.add('hidden');
520
+ }, 3000);
521
+
522
+ // Refresh icons in case new ones were added
523
+ feather.replace();
524
+ }
525
+
526
+ // Initial render
527
+ renderCelebrities();
528
+ </script>
529
+ </body>
530
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Let's create a working celebrity booking website where i can easily add celeb of my choice where people can book them for their verious events