Hugging Face's logo

Spaces:
fenglui
/
celebrateme
Running

App Files Community
fenglui commited on
Commit
15247d9
·
verified ·
1 Parent(s): 14cc327

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +707 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Celebrateme
3
- emoji: 🌍
4
- colorFrom: indigo
5
- colorTo: purple
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: celebrateme
3
+ emoji: 🐳
4
+ colorFrom: pink
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,707 @@
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>CelebrateMe - Ultimate Birthday & Anniversary Planner</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
+ background-color: #fef6f6;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
19
+ }
20
+
21
+ .event-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
24
+ }
25
+
26
+ .gift-card {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ .gift-card:hover {
31
+ transform: scale(1.05);
32
+ }
33
+
34
+ .feature-icon {
35
+ width: 60px;
36
+ height: 60px;
37
+ display: flex;
38
+ align-items: center;
39
+ justify-content: center;
40
+ border-radius: 50%;
41
+ margin: 0 auto;
42
+ }
43
+
44
+ .floating-btn {
45
+ animation: float 3s ease-in-out infinite;
46
+ }
47
+
48
+ @keyframes float {
49
+ 0% { transform: translateY(0px); }
50
+ 50% { transform: translateY(-10px); }
51
+ 100% { transform: translateY(0px); }
52
+ }
53
+
54
+ .tab-content {
55
+ display: none;
56
+ }
57
+
58
+ .tab-content.active {
59
+ display: block;
60
+ animation: fadeIn 0.5s ease-in-out;
61
+ }
62
+
63
+ @keyframes fadeIn {
64
+ from { opacity: 0; }
65
+ to { opacity: 1; }
66
+ }
67
+ </style>
68
+ </head>
69
+ <body>
70
+ <!-- Navigation -->
71
+ <nav class="bg-white shadow-lg">
72
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
73
+ <div class="flex justify-between h-16">
74
+ <div class="flex items-center">
75
+ <div class="flex-shrink-0 flex items-center">
76
+ <i class="fas fa-birthday-cake text-pink-500 text-2xl mr-2"></i>
77
+ <span class="text-xl font-bold text-pink-600">CelebrateMe</span>
78
+ </div>
79
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
80
+ <a href="#" class="border-pink-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
81
+ <a href="#" 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">Events</a>
82
+ <a href="#" 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">Gifts</a>
83
+ <a href="#" 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">Planning</a>
84
+ </div>
85
+ </div>
86
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
87
+ <button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Sign Up</button>
88
+ </div>
89
+ <div class="-mr-2 flex items-center sm:hidden">
90
+ <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-pink-500">
91
+ <span class="sr-only">Open main menu</span>
92
+ <i class="fas fa-bars"></i>
93
+ </button>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </nav>
98
+
99
+ <!-- Hero Section -->
100
+ <div class="gradient-bg">
101
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-24">
102
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
103
+ <div>
104
+ <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
105
+ Never forget a birthday again
106
+ </h1>
107
+ <p class="mt-3 max-w-3xl text-lg text-white">
108
+ CelebrateMe helps you remember, plan and organize unforgettable birthdays and anniversaries with ease.
109
+ </p>
110
+ <div class="mt-8 sm:flex">
111
+ <div class="rounded-md shadow">
112
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-pink-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
113
+ Get Started
114
+ </a>
115
+ </div>
116
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
117
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-pink-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">
118
+ <i class="fab fa-facebook mr-2"></i> Connect Facebook
119
+ </a>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ <div class="mt-12 relative lg:mt-0">
124
+ <div class="relative mx-auto w-full rounded-lg shadow-lg overflow-hidden">
125
+ <div class="absolute top-0 left-0 bg-white p-4 rounded-tl-lg">
126
+ <div class="flex space-x-2">
127
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
128
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
129
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
130
+ </div>
131
+ </div>
132
+ <img class="w-full" src="https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Birthday celebration">
133
+ </div>
134
+ <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-yellow-400 rounded-full flex items-center justify-center text-white floating-btn">
135
+ <i class="fas fa-gift text-4xl"></i>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Features Section -->
143
+ <div class="py-12 bg-white">
144
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
145
+ <div class="lg:text-center">
146
+ <h2 class="text-base text-pink-600 font-semibold tracking-wide uppercase">Features</h2>
147
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
148
+ Everything you need to celebrate
149
+ </p>
150
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
151
+ From reminders to gift ideas, we've got you covered for every special occasion.
152
+ </p>
153
+ </div>
154
+
155
+ <div class="mt-10">
156
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
157
+ <div class="text-center">
158
+ <div class="feature-icon bg-pink-100 text-pink-600">
159
+ <i class="fas fa-bell text-2xl"></i>
160
+ </div>
161
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Smart Reminders</h3>
162
+ <p class="mt-2 text-base text-gray-500">
163
+ Never miss a birthday with our customizable reminders via email, SMS, or app notifications.
164
+ </p>
165
+ </div>
166
+
167
+ <div class="text-center">
168
+ <div class="feature-icon bg-blue-100 text-blue-600">
169
+ <i class="fas fa-users text-2xl"></i>
170
+ </div>
171
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Group Planning</h3>
172
+ <p class="mt-2 text-base text-gray-500">
173
+ Collaborate with friends and family to plan the perfect celebration together.
174
+ </p>
175
+ </div>
176
+
177
+ <div class="text-center">
178
+ <div class="feature-icon bg-purple-100 text-purple-600">
179
+ <i class="fas fa-lightbulb text-2xl"></i>
180
+ </div>
181
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Gift Suggestions</h3>
182
+ <p class="mt-2 text-base text-gray-500">
183
+ AI-powered gift recommendations based on the person's interests and social media activity.
184
+ </p>
185
+ </div>
186
+
187
+ <div class="text-center">
188
+ <div class="feature-icon bg-green-100 text-green-600">
189
+ <i class="fas fa-calendar-check text-2xl"></i>
190
+ </div>
191
+ <h3 class="mt-6 text-lg font-medium text-gray-900">Auto Scheduling</h3>
192
+ <p class="mt-2 text-base text-gray-500">
193
+ Automatically schedule birthday posts and stories across social media platforms.
194
+ </p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Upcoming Events -->
202
+ <div class="py-12 bg-gray-50">
203
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
204
+ <div class="lg:text-center mb-10">
205
+ <h2 class="text-base text-pink-600 font-semibold tracking-wide uppercase">Upcoming Events</h2>
206
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
207
+ Who's celebrating next?
208
+ </p>
209
+ </div>
210
+
211
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
212
+ <!-- Event Card 1 -->
213
+ <div class="bg-white rounded-lg shadow-md overflow-hidden event-card transition duration-300">
214
+ <div class="p-4 bg-pink-500 text-white">
215
+ <div class="flex justify-between items-center">
216
+ <h3 class="text-lg font-semibold">Sarah's Birthday</h3>
217
+ <span class="bg-white text-pink-500 text-xs font-bold px-2 py-1 rounded-full">3 days</span>
218
+ </div>
219
+ <p class="text-sm mt-1">Turning 28</p>
220
+ </div>
221
+ <div class="p-4">
222
+ <div class="flex items-center text-sm text-gray-500 mb-3">
223
+ <i class="far fa-calendar-alt mr-2"></i>
224
+ <span>June 15, 2023</span>
225
+ </div>
226
+ <div class="flex items-center text-sm text-gray-500 mb-4">
227
+ <i class="fas fa-user-friends mr-2"></i>
228
+ <span>12 people planning</span>
229
+ </div>
230
+ <div class="flex justify-between">
231
+ <button class="text-sm bg-pink-100 text-pink-600 px-3 py-1 rounded hover:bg-pink-200 transition">View Details</button>
232
+ <button class="text-sm bg-gray-100 text-gray-600 px-3 py-1 rounded hover:bg-gray-200 transition">Remind Me</button>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Event Card 2 -->
238
+ <div class="bg-white rounded-lg shadow-md overflow-hidden event-card transition duration-300">
239
+ <div class="p-4 bg-purple-500 text-white">
240
+ <div class="flex justify-between items-center">
241
+ <h3 class="text-lg font-semibold">Parent's Anniversary</h3>
242
+ <span class="bg-white text-purple-500 text-xs font-bold px-2 py-1 rounded-full">1 week</span>
243
+ </div>
244
+ <p class="text-sm mt-1">25th Anniversary</p>
245
+ </div>
246
+ <div class="p-4">
247
+ <div class="flex items-center text-sm text-gray-500 mb-3">
248
+ <i class="far fa-calendar-alt mr-2"></i>
249
+ <span>June 22, 2023</span>
250
+ </div>
251
+ <div class="flex items-center text-sm text-gray-500 mb-4">
252
+ <i class="fas fa-user-friends mr-2"></i>
253
+ <span>8 people planning</span>
254
+ </div>
255
+ <div class="flex justify-between">
256
+ <button class="text-sm bg-purple-100 text-purple-600 px-3 py-1 rounded hover:bg-purple-200 transition">View Details</button>
257
+ <button class="text-sm bg-gray-100 text-gray-600 px-3 py-1 rounded hover:bg-gray-200 transition">Remind Me</button>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Event Card 3 -->
263
+ <div class="bg-white rounded-lg shadow-md overflow-hidden event-card transition duration-300">
264
+ <div class="p-4 bg-blue-500 text-white">
265
+ <div class="flex justify-between items-center">
266
+ <h3 class="text-lg font-semibold">Mike's Birthday</h3>
267
+ <span class="bg-white text-blue-500 text-xs font-bold px-2 py-1 rounded-full">2 weeks</span>
268
+ </div>
269
+ <p class="text-sm mt-1">Turning 30</p>
270
+ </div>
271
+ <div class="p-4">
272
+ <div class="flex items-center text-sm text-gray-500 mb-3">
273
+ <i class="far fa-calendar-alt mr-2"></i>
274
+ <span>June 30, 2023</span>
275
+ </div>
276
+ <div class="flex items-center text-sm text-gray-500 mb-4">
277
+ <i class="fas fa-user-friends mr-2"></i>
278
+ <span>5 people planning</span>
279
+ </div>
280
+ <div class="flex justify-between">
281
+ <button class="text-sm bg-blue-100 text-blue-600 px-3 py-1 rounded hover:bg-blue-200 transition">View Details</button>
282
+ <button class="text-sm bg-gray-100 text-gray-600 px-3 py-1 rounded hover:bg-gray-200 transition">Remind Me</button>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="mt-10 text-center">
289
+ <button class="bg-pink-500 hover:bg-pink-600 text-white px-6 py-3 rounded-md text-sm font-medium transition duration-300">
290
+ View All Upcoming Events
291
+ </button>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Gift Ideas Section -->
297
+ <div class="py-12 bg-white">
298
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
299
+ <div class="lg:text-center mb-10">
300
+ <h2 class="text-base text-pink-600 font-semibold tracking-wide uppercase">Gift Ideas</h2>
301
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
302
+ Perfect presents for every personality
303
+ </p>
304
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
305
+ Our AI analyzes social media profiles to suggest personalized gifts.
306
+ </p>
307
+ </div>
308
+
309
+ <!-- Tabs -->
310
+ <div class="flex justify-center mb-8">
311
+ <div class="flex space-x-1 rounded-lg bg-gray-100 p-1">
312
+ <button onclick="changeTab('all')" class="tab-btn py-2 px-4 rounded-lg font-medium text-sm focus:outline-none bg-pink-500 text-white">All</button>
313
+ <button onclick="changeTab('personalized')" class="tab-btn py-2 px-4 rounded-lg font-medium text-sm focus:outline-none hover:bg-gray-200">Personalized</button>
314
+ <button onclick="changeTab('experiences')" class="tab-btn py-2 px-4 rounded-lg font-medium text-sm focus:outline-none hover:bg-gray-200">Experiences</button>
315
+ <button onclick="changeTab('tech')" class="tab-btn py-2 px-4 rounded-lg font-medium text-sm focus:outline-none hover:bg-gray-200">Tech</button>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Tab Content -->
320
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
321
+ <!-- Gift 1 -->
322
+ <div class="tab-content active" id="all-tab">
323
+ <div class="bg-white rounded-lg overflow-hidden shadow-md gift-card">
324
+ <div class="relative pb-2/3 h-48">
325
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Personalized mug">
326
+ </div>
327
+ <div class="p-4">
328
+ <div class="flex justify-between items-start">
329
+ <h3 class="text-lg font-medium text-gray-900">Custom Photo Mug</h3>
330
+ <span class="bg-green-100 text-green-800 text-xs font-semibold px-2 py-1 rounded-full">Popular</span>
331
+ </div>
332
+ <p class="mt-1 text-sm text-gray-500">Upload any photo to create a unique gift</p>
333
+ <div class="mt-3 flex justify-between items-center">
334
+ <span class="text-lg font-bold text-pink-600">$19.99</span>
335
+ <button class="text-sm bg-pink-500 text-white px-3 py-1 rounded hover:bg-pink-600 transition">Add to Cart</button>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Gift 2 -->
342
+ <div class="tab-content active" id="all-tab">
343
+ <div class="bg-white rounded-lg overflow-hidden shadow-md gift-card">
344
+ <div class="relative pb-2/3 h-48">
345
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Smart watch">
346
+ </div>
347
+ <div class="p-4">
348
+ <div class="flex justify-between items-start">
349
+ <h3 class="text-lg font-medium text-gray-900">Smart Watch</h3>
350
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded-full">Tech</span>
351
+ </div>
352
+ <p class="mt-1 text-sm text-gray-500">Latest model with health tracking</p>
353
+ <div class="mt-3 flex justify-between items-center">
354
+ <span class="text-lg font-bold text-pink-600">$199.99</span>
355
+ <button class="text-sm bg-pink-500 text-white px-3 py-1 rounded hover:bg-pink-600 transition">Add to Cart</button>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- Gift 3 -->
362
+ <div class="tab-content active" id="all-tab">
363
+ <div class="bg-white rounded-lg overflow-hidden shadow-md gift-card">
364
+ <div class="relative pb-2/3 h-48">
365
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Spa day">
366
+ </div>
367
+ <div class="p-4">
368
+ <div class="flex justify-between items-start">
369
+ <h3 class="text-lg font-medium text-gray-900">Spa Day Package</h3>
370
+ <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2 py-1 rounded-full">Experience</span>
371
+ </div>
372
+ <p class="mt-1 text-sm text-gray-500">Full day relaxation at luxury spa</p>
373
+ <div class="mt-3 flex justify-between items-center">
374
+ <span class="text-lg font-bold text-pink-600">$149.99</span>
375
+ <button class="text-sm bg-pink-500 text-white px-3 py-1 rounded hover:bg-pink-600 transition">Add to Cart</button>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Gift 4 -->
382
+ <div class="tab-content active" id="all-tab">
383
+ <div class="bg-white rounded-lg overflow-hidden shadow-md gift-card">
384
+ <div class="relative pb-2/3 h-48">
385
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1584917865448-de9e9b5a8dc2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Custom pillow">
386
+ </div>
387
+ <div class="p-4">
388
+ <div class="flex justify-between items-start">
389
+ <h3 class="text-lg font-medium text-gray-900">Custom Photo Pillow</h3>
390
+ <span class="bg-pink-100 text-pink-800 text-xs font-semibold px-2 py-1 rounded-full">Personalized</span>
391
+ </div>
392
+ <p class="mt-1 text-sm text-gray-500">Soft pillow with your favorite photo</p>
393
+ <div class="mt-3 flex justify-between items-center">
394
+ <span class="text-lg font-bold text-pink-600">$29.99</span>
395
+ <button class="text-sm bg-pink-500 text-white px-3 py-1 rounded hover:bg-pink-600 transition">Add to Cart</button>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="mt-10 text-center">
403
+ <button class="bg-white hover:bg-gray-100 text-pink-500 border border-pink-500 px-6 py-3 rounded-md text-sm font-medium transition duration-300">
404
+ View More Gift Ideas
405
+ </button>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Group Planning Section -->
411
+ <div class="py-12 bg-gray-50">
412
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
413
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
414
+ <div class="mb-8 lg:mb-0">
415
+ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
416
+ Plan together with friends & family
417
+ </h2>
418
+ <p class="mt-3 max-w-3xl text-lg text-gray-500">
419
+ Create a group for any celebration and collaborate on gifts, parties, and more.
420
+ </p>
421
+
422
+ <div class="mt-6">
423
+ <div class="flex items-start mb-4">
424
+ <div class="flex-shrink-0">
425
+ <div class="flex items-center justify-center h-8 w-8 rounded-full bg-pink-100 text-pink-600">
426
+ <i class="fas fa-money-bill-wave"></i>
427
+ </div>
428
+ </div>
429
+ <div class="ml-3">
430
+ <h3 class="text-lg font-medium text-gray-900">Group Contributions</h3>
431
+ <p class="mt-1 text-base text-gray-500">
432
+ Everyone can contribute money towards a gift or event.
433
+ </p>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="flex items-start mb-4">
438
+ <div class="flex-shrink-0">
439
+ <div class="flex items-center justify-center h-8 w-8 rounded-full bg-blue-100 text-blue-600">
440
+ <i class="fas fa-comments"></i>
441
+ </div>
442
+ </div>
443
+ <div class="ml-3">
444
+ <h3 class="text-lg font-medium text-gray-900">Group Chat</h3>
445
+ <p class="mt-1 text-base text-gray-500">
446
+ Discuss plans in real-time with all participants.
447
+ </p>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="flex items-start">
452
+ <div class="flex-shrink-0">
453
+ <div class="flex items-center justify-center h-8 w-8 rounded-full bg-green-100 text-green-600">
454
+ <i class="fas fa-poll"></i>
455
+ </div>
456
+ </div>
457
+ <div class="ml-3">
458
+ <h3 class="text-lg font-medium text-gray-900">Voting & Polls</h3>
459
+ <p class="mt-1 text-base text-gray-500">
460
+ Make decisions together with built-in polls.
461
+ </p>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+
467
+ <div class="relative">
468
+ <div class="bg-white p-6 rounded-lg shadow-lg">
469
+ <h3 class="text-lg font-medium mb-4">Create a New Group</h3>
470
+
471
+ <div class="mb-4">
472
+ <label for="event-name" class="block text-sm font-medium text-gray-700">Event Name</label>
473
+ <input type="text" id="event-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-pink-500 focus:border-pink-500">
474
+ </div>
475
+
476
+ <div class="mb-4">
477
+ <label for="event-date" class="block text-sm font-medium text-gray-700">Event Date</label>
478
+ <input type="date" id="event-date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-pink-500 focus:border-pink-500">
479
+ </div>
480
+
481
+ <div class="mb-4">
482
+ <label class="block text-sm font-medium text-gray-700">Invite Participants</label>
483
+ <div class="mt-1 flex">
484
+ <input type="email" placeholder="Email addresses" class="flex-1 border border-gray-300 rounded-l-md shadow-sm py-2 px-3 focus:outline-none focus:ring-pink-500 focus:border-pink-500">
485
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
486
+ Add
487
+ </button>
488
+ </div>
489
+ </div>
490
+
491
+ <div class="mb-4">
492
+ <label class="block text-sm font-medium text-gray-700">Group Type</label>
493
+ <div class="mt-1 grid grid-cols-2 gap-2">
494
+ <button class="bg-gray-100 text-gray-800 py-2 px-4 rounded-md text-sm font-medium hover:bg-gray-200">Birthday</button>
495
+ <button class="bg-gray-100 text-gray-800 py-2 px-4 rounded-md text-sm font-medium hover:bg-gray-200">Anniversary</button>
496
+ <button class="bg-gray-100 text-gray-800 py-2 px-4 rounded-md text-sm font-medium hover:bg-gray-200">Baby Shower</button>
497
+ <button class="bg-gray-100 text-gray-800 py-2 px-4 rounded-md text-sm font-medium hover:bg-gray-200">Other</button>
498
+ </div>
499
+ </div>
500
+
501
+ <button class="w-full bg-pink-500 hover:bg-pink-600 text-white py-2 px-4 rounded-md text-sm font-medium transition duration-300">
502
+ Create Group & Start Planning
503
+ </button>
504
+ </div>
505
+
506
+ <div class="absolute -bottom-6 -left-6 w-24 h-24 bg-yellow-400 rounded-full flex items-center justify-center text-white z-0">
507
+ <i class="fas fa-users text-3xl"></i>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- Testimonials -->
515
+ <div class="py-12 bg-white">
516
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
517
+ <div class="lg:text-center mb-10">
518
+ <h2 class="text-base text-pink-600 font-semibold tracking-wide uppercase">Testimonials</h2>
519
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
520
+ Loved by thousands of users
521
+ </p>
522
+ </div>
523
+
524
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
525
+ <!-- Testimonial 1 -->
526
+ <div class="bg-gray-50 p-6 rounded-lg">
527
+ <div class="flex items-center mb-4">
528
+ <div class="flex-shrink-0">
529
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User">
530
+ </div>
531
+ <div class="ml-3">
532
+ <h3 class="text-sm font-medium text-gray-900">Sarah Johnson</h3>
533
+ <div class="flex text-yellow-400">
534
+ <i class="fas fa-star"></i>
535
+ <i class="fas fa-star"></i>
536
+ <i class="fas fa-star"></i>
537
+ <i class="fas fa-star"></i>
538
+ <i class="fas fa-star"></i>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ <p class="text-gray-600">
543
+ "CelebrateMe saved me from forgetting my best friend's birthday! The group planning feature made it so easy to organize a surprise party with all our friends."
544
+ </p>
545
+ </div>
546
+
547
+ <!-- Testimonial 2 -->
548
+ <div class="bg-gray-50 p-6 rounded-lg">
549
+ <div class="flex items-center mb-4">
550
+ <div class="flex-shrink-0">
551
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User">
552
+ </div>
553
+ <div class="ml-3">
554
+ <h3 class="text-sm font-medium text-gray-900">Michael Chen</h3>
555
+ <div class="flex text-yellow-400">
556
+ <i class="fas fa-star"></i>
557
+ <i class="fas fa-star"></i>
558
+ <i class="fas fa-star"></i>
559
+ <i class="fas fa-star"></i>
560
+ <i class="fas fa-star"></i>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ <p class="text-gray-600">
565
+ "The AI gift suggestions are amazing! It recommended a perfect coding book for my programmer brother based on his GitHub activity. He loved it!"
566
+ </p>
567
+ </div>
568
+
569
+ <!-- Testimonial 3 -->
570
+ <div class="bg-gray-50 p-6 rounded-lg">
571
+ <div class="flex items-center mb-4">
572
+ <div class="flex-shrink-0">
573
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User">
574
+ </div>
575
+ <div class="ml-3">
576
+ <h3 class="text-sm font-medium text-gray-900">Emily Rodriguez</h3>
577
+ <div class="flex text-yellow-400">
578
+ <i class="fas fa-star"></i>
579
+ <i class="fas fa-star"></i>
580
+ <i class="fas fa-star"></i>
581
+ <i class="fas fa-star"></i>
582
+ <i class="fas fa-star-half-alt"></i>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ <p class="text-gray-600">
587
+ "The automatic social media posts are a lifesaver. I set it up once and now I never have to worry about forgetting to post birthday wishes."
588
+ </p>
589
+ </div>
590
+ </div>
591
+
592
+ <div class="mt-10 text-center">
593
+ <div class="bg-pink-50 rounded-lg p-6 inline-block">
594
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Over 500+ birthdays planned successfully</h3>
595
+ <p class="text-gray-600 mb-4">Join thousands of happy users who never miss a special occasion</p>
596
+ <button class="bg-pink-500 hover:bg-pink-600 text-white px-6 py-3 rounded-md text-sm font-medium transition duration-300">
597
+ Start Planning Today
598
+ </button>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+
604
+ <!-- Footer -->
605
+ <footer class="bg-gray-800">
606
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
607
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
608
+ <div>
609
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Product</h3>
610
+ <ul class="mt-4 space-y-2">
611
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Features</a></li>
612
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Pricing</a></li>
613
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Gift Shop</a></li>
614
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Integrations</a></li>
615
+ </ul>
616
+ </div>
617
+
618
+ <div>
619
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3>
620
+ <ul class="mt-4 space-y-2">
621
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">About</a></li>
622
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li>
623
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li>
624
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Contact</a></li>
625
+ </ul>
626
+ </div>
627
+
628
+ <div>
629
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Resources</h3>
630
+ <ul class="mt-4 space-y-2">
631
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Help Center</a></li>
632
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Party Ideas</a></li>
633
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Gift Guides</a></li>
634
+ <li><a href="#" class="text-base text-gray-400 hover:text-white">Community</a></li>
635
+ </ul>
636
+ </div>
637
+
638
+ <div>
639
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3>
640
+ <div class="mt-4 flex space-x-6">
641
+ <a href="#" class="text-gray-400 hover:text-white">
642
+ <i class="fab fa-facebook-f"></i>
643
+ </a>
644
+ <a href="#" class="text-gray-400 hover:text-white">
645
+ <i class="fab fa-instagram"></i>
646
+ </a>
647
+ <a href="#" class="text-gray-400 hover:text-white">
648
+ <i class="fab fa-twitter"></i>
649
+ </a>
650
+ <a href="#" class="text-gray-400 hover:text-white">
651
+ <i class="fab fa-pinterest"></i>
652
+ </a>
653
+ </div>
654
+ <div class="mt-6">
655
+ <p class="text-gray-400">Subscribe to our newsletter</p>
656
+ <div class="mt-2 flex">
657
+ <input type="email" placeholder="Your email" class="flex-1 bg-gray-700 text-white px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-pink-500">
658
+ <button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-r-md">
659
+ <i class="fas fa-paper-plane"></i>
660
+ </button>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </div>
665
+
666
+ <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
667
+ <p class="text-base text-gray-400">
668
+ &copy; 2023 CelebrateMe. All rights reserved.
669
+ </p>
670
+ <div class="mt-4 md:mt-0 flex space-x-6">
671
+ <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
672
+ <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
673
+ <a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a>
674
+ </div>
675
+ </div>
676
+ </div>
677
+ </footer>
678
+
679
+ <script>
680
+ // Tab functionality
681
+ function changeTab(tabName) {
682
+ // Hide all tab contents
683
+ document.querySelectorAll('.tab-content').forEach(content => {
684
+ content.classList.remove('active');
685
+ });
686
+
687
+ // Show selected tab content
688
+ document.getElementById(tabName + '-tab').classList.add('active');
689
+
690
+ // Update active tab button
691
+ document.querySelectorAll('.tab-btn').forEach(btn => {
692
+ btn.classList.remove('bg-pink-500', 'text-white');
693
+ btn.classList.add('hover:bg-gray-200');
694
+ });
695
+
696
+ event.target.classList.add('bg-pink-500', 'text-white');
697
+ event.target.classList.remove('hover:bg-gray-200');
698
+ }
699
+
700
+ // Mobile menu toggle would go here
701
+ // This is just a placeholder as we're not implementing full functionality
702
+ document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {
703
+ // Toggle mobile menu visibility
704
+ });
705
+ </script>
706
+ <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=fenglui/celebrateme" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
707
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ # Project Idea: Online Birthday/Anniversary Planner Problem Statement: - I forget birthday - One stop Birthday Planner Features: - facebook Integration/ Social media - Reminders - Birthday Planning suggestions - Customised wishes(+add watermarks) - Automatically schedule posts/stories on Whatsapp/ Facebook - Giftcards - Create Group & pLan birthday - Every one uploades a short - Contribute Money in group(everyone payes tehre) - Chat option to plan birthdays - Book Cake - Polls - Suggestinsane gift ideas - customize pillow - printed coffee mugs - t shirt - Affiliate Money - Booking event venu/ Virtual Parties - Machine Learning: - Facebook/Social media data - suggest gifts - if someone is a programmer, gift accordingly - pro memberships Success Metrics: - Helped organize 500+ birthday _________________________________________________