Hugging Face's logo

Spaces:
LukasBe
/
mvp-builder-for-students
Running

App Files Community
LukasBe commited on
Commit
1a49ab4
·
verified ·
1 Parent(s): a305b7a

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +760 -276
index.html CHANGED
@@ -6,64 +6,239 @@
6
  <title>Trendsetter Tycoon</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
- @keyframes pulse {
11
- 0%, 100% { transform: scale(1); }
12
- 50% { transform: scale(1.05); }
 
 
 
13
  }
14
- .trend-card:hover {
15
- animation: pulse 0.5s ease-in-out;
16
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 
 
 
 
 
17
  }
18
- .progress-bar {
19
- transition: width 0.5s ease-in-out;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  }
 
21
  .creation-area {
22
- background-image: radial-gradient(circle at 1px 1px, #e5e7eb 1px, transparent 0);
 
23
  background-size: 20px 20px;
24
  }
25
- .chart-container {
26
- min-height: 200px;
27
- }
28
  .draggable-item {
29
  cursor: grab;
30
- transition: transform 0.1s ease;
 
31
  }
 
32
  .draggable-item:active {
33
  cursor: grabbing;
34
- transform: scale(1.05);
35
  }
 
36
  .drop-zone {
37
  transition: all 0.3s ease;
38
  }
 
39
  .drop-zone.highlight {
40
- background-color: rgba(167, 139, 250, 0.2);
41
- border: 2px dashed #8b5cf6;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  }
43
  </style>
44
  </head>
45
- <body class="bg-gray-50 font-sans">
46
- <div class="container mx-auto px-4 py-6 max-w-6xl">
47
  <!-- Header -->
48
  <header class="flex justify-between items-center mb-8">
49
  <div class="flex items-center space-x-4">
50
- <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white text-2xl font-bold">
51
  TT
52
  </div>
53
- <h1 class="text-3xl font-bold text-gray-800">Trendsetter Tycoon</h1>
54
  </div>
55
  <div class="flex items-center space-x-6">
56
- <div class="flex items-center space-x-2 bg-white px-4 py-2 rounded-full shadow">
57
- <i class="fas fa-bolt text-yellow-500"></i>
58
- <span class="font-bold text-gray-700" id="buzz-points">250</span>
 
 
 
 
 
 
59
  </div>
60
- <div class="flex items-center space-x-2 bg-white px-4 py-2 rounded-full shadow">
61
- <i class="fas fa-users text-blue-500"></i>
62
- <span class="font-bold text-gray-700" id="followers">1,250</span>
63
  </div>
64
- <div class="relative">
65
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full cursor-pointer">
66
- <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full border-2 border-white"></div>
 
 
67
  </div>
68
  </div>
69
  </header>
@@ -71,164 +246,293 @@
71
  <!-- Main Game Area -->
72
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
73
  <!-- Left Column - School Feed -->
74
- <div class="lg:col-span-1 bg-white rounded-xl shadow-lg overflow-hidden">
75
- <div class="bg-gradient-to-r from-purple-600 to-blue-500 p-4 text-white">
76
- <h2 class="text-xl font-bold flex items-center">
77
- <i class="fas fa-school mr-2"></i> School Feed
78
- </h2>
79
- <p class="text-sm opacity-90">Discover the latest trends and unmet desires</p>
 
 
 
 
 
 
 
 
 
80
  </div>
81
- <div class="p-4 space-y-4 overflow-y-auto" style="max-height: 500px;">
82
- <div class="trend-card bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-purple-50 transition">
 
83
  <div class="flex items-start space-x-3">
84
- <div class="w-10 h-10 rounded-full bg-gradient-to-br from-red-400 to-pink-500 flex items-center justify-center text-white">
85
- <i class="fas fa-fire"></i>
86
  </div>
87
- <div>
88
- <h3 class="font-bold text-gray-800">Sarcastic Memes</h3>
89
- <p class="text-sm text-gray-600">Students are loving ironic, self-deprecating humor. Engagement up 120% this week.</p>
90
- <div class="flex items-center mt-2 text-xs text-gray-500">
91
- <span class="mr-3"><i class="fas fa-heart text-red-400 mr-1"></i> 342</span>
92
- <span><i class="fas fa-share-alt text-blue-400 mr-1"></i> 128</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
93
  </div>
94
  </div>
95
  </div>
96
  </div>
97
 
98
- <div class="trend-card bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-purple-50 transition">
 
99
  <div class="flex items-start space-x-3">
100
- <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-cyan-500 flex items-center justify-center text-white">
101
- <i class="fas fa-arrow-trend-up"></i>
102
  </div>
103
- <div>
104
- <h3 class="font-bold text-gray-800">Minimalist Stickers</h3>
105
- <p class="text-sm text-gray-600">Simple, clean designs are gaining traction. Current designs feel too busy.</p>
106
- <div class="flex items-center mt-2 text-xs text-gray-500">
107
- <span class="mr-3"><i class="fas fa-heart text-red-400 mr-1"></i> 215</span>
108
- <span><i class="fas fa-share-alt text-blue-400 mr-1"></i> 87</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  </div>
110
  </div>
111
  </div>
112
  </div>
113
 
114
- <div class="trend-card bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-purple-50 transition">
 
115
  <div class="flex items-start space-x-3">
116
- <div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center text-white">
117
  <i class="fas fa-leaf"></i>
118
  </div>
119
- <div>
120
- <h3 class="font-bold text-gray-800">Eco-Friendly</h3>
121
- <p class="text-sm text-gray-600">Sustainability is hot right now. Products with green messaging get 2x engagement.</p>
122
- <div class="flex items-center mt-2 text-xs text-gray-500">
123
- <span class="mr-3"><i class="fas fa-heart text-red-400 mr-1"></i> 298</span>
124
- <span><i class="fas fa-share-alt text-blue-400 mr-1"></i> 143</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
125
  </div>
126
  </div>
127
  </div>
128
  </div>
129
 
130
- <div class="trend-card bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-purple-50 transition">
 
131
  <div class="flex items-start space-x-3">
132
- <div class="w-10 h-10 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center text-white">
133
  <i class="fas fa-dog"></i>
134
  </div>
135
- <div>
136
- <h3 class="font-bold text-gray-800">Pet Content</h3>
137
- <p class="text-sm text-gray-600">Dog videos still dominate, but cat content is making a comeback with Gen Z.</p>
138
- <div class="flex items-center mt-2 text-xs text-gray-500">
139
- <span class="mr-3"><i class="fas fa-heart text-red-400 mr-1"></i> 512</span>
140
- <span><i class="fas fa-share-alt text-blue-400 mr-1"></i> 231</span>
 
141
  </div>
142
- </div>
143
- </div>
144
- </div>
145
-
146
- <div class="trend-card bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-purple-50 transition">
147
- <div class="flex items-start space-x-3">
148
- <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-400 to-indigo-500 flex items-center justify-center text-white">
149
- <i class="fas fa-music"></i>
150
- </div>
151
- <div>
152
- <h3 class="font-bold text-gray-800">Nostalgia Wave</h3>
153
- <p class="text-sm text-gray-600">Early 2000s aesthetics are trending hard. Think frosted tips and flip phones.</p>
154
- <div class="flex items-center mt-2 text-xs text-gray-500">
155
- <span class="mr-3"><i class="fas fa-heart text-red-400 mr-1"></i> 187</span>
156
- <span><i class="fas fa-share-alt text-blue-400 mr-1"></i> 92</span>
 
 
 
 
 
 
 
 
 
157
  </div>
158
  </div>
159
  </div>
160
  </div>
161
  </div>
162
- <div class="p-4 bg-gray-50 border-t border-gray-200">
163
- <button id="analyze-trends" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg font-medium transition flex items-center justify-center">
164
  <i class="fas fa-chart-line mr-2"></i> Analyze Trends (10 Buzz)
165
  </button>
166
  </div>
167
  </div>
168
 
169
  <!-- Middle Column - Creation Area -->
170
- <div class="lg:col-span-1 bg-white rounded-xl shadow-lg overflow-hidden">
171
- <div class="bg-gradient-to-r from-pink-500 to-rose-500 p-4 text-white">
172
- <h2 class="text-xl font-bold flex items-center">
173
- <i class="fas fa-magic mr-2"></i> Trend Creation
174
  </h2>
175
- <p class="text-sm opacity-90">Build your MVP and test your hypothesis</p>
176
  </div>
177
- <div class="p-4 creation-area min-h-[500px]">
178
- <div class="mb-4">
179
- <label class="block text-sm font-medium text-gray-700 mb-1">Trend Hypothesis</label>
180
- <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="E.g. 'Students will love sarcastic cat meme stickers'">
 
 
 
 
 
181
  </div>
182
 
183
- <div class="mb-4">
184
- <label class="block text-sm font-medium text-gray-700 mb-1">Trend Type</label>
185
- <div class="grid grid-cols-3 gap-2">
186
- <button class="py-2 px-3 bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-md text-sm font-medium transition flex items-center justify-center">
187
- <i class="fas fa-sticky-note mr-1 text-yellow-500"></i> Stickers
 
188
  </button>
189
- <button class="py-2 px-3 bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-md text-sm font-medium transition flex items-center justify-center">
190
- <i class="fas fa-tshirt mr-1 text-blue-500"></i> Fashion
 
191
  </button>
192
- <button class="py-2 px-3 bg-gray-100 hover:bg-purple-100 border border-gray-200 rounded-md text-sm font-medium transition flex items-center justify-center">
193
- <i class="fas fa-mobile mr-1 text-green-500"></i> App Feature
 
194
  </button>
195
  </div>
196
  </div>
197
 
198
- <div class="mb-4">
199
- <label class="block text-sm font-medium text-gray-700 mb-1">Design Elements</label>
200
- <div class="grid grid-cols-4 gap-2 mb-3">
201
- <div class="draggable-item p-2 bg-gray-100 rounded-md text-center cursor-move" draggable="true">
202
- <i class="fas fa-cat text-2xl text-orange-400"></i>
203
- <p class="text-xs mt-1">Cat</p>
 
 
 
204
  </div>
205
- <div class="draggable-item p-2 bg-gray-100 rounded-md text-center cursor-move" draggable="true">
206
- <i class="fas fa-dog text-2xl text-brown-400"></i>
207
- <p class="text-xs mt-1">Dog</p>
208
  </div>
209
- <div class="draggable-item p-2 bg-gray-100 rounded-md text-center cursor-move" draggable="true">
210
- <i class="fas fa-font text-2xl text-purple-400"></i>
211
- <p class="text-xs mt-1">Text</p>
212
  </div>
213
- <div class="draggable-item p-2 bg-gray-100 rounded-md text-center cursor-move" draggable="true">
214
- <i class="fas fa-image text-2xl text-blue-400"></i>
215
- <p class="text-xs mt-1">Image</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  </div>
217
  </div>
218
  </div>
219
 
220
- <div class="mb-4">
221
- <label class="block text-sm font-medium text-gray-700 mb-1">MVP Canvas</label>
222
- <div id="drop-zone" class="drop-zone bg-white border-2 border-dashed border-gray-300 rounded-md p-4 min-h-[200px] flex items-center justify-center">
223
- <p class="text-gray-400">Drag elements here to create your MVP</p>
 
 
 
 
 
 
 
224
  </div>
225
  </div>
226
 
227
  <div class="flex space-x-3">
228
- <button id="test-mvp" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-medium transition flex items-center justify-center">
229
  <i class="fas fa-rocket mr-2"></i> Test MVP (50 Buzz)
230
  </button>
231
- <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg font-medium transition">
232
  <i class="fas fa-redo"></i>
233
  </button>
234
  </div>
@@ -236,97 +540,157 @@
236
  </div>
237
 
238
  <!-- Right Column - Analytics & Results -->
239
- <div class="lg:col-span-1 bg-white rounded-xl shadow-lg overflow-hidden">
240
- <div class="bg-gradient-to-r from-indigo-500 to-blue-500 p-4 text-white">
241
- <h2 class="text-xl font-bold flex items-center">
242
- <i class="fas fa-chart-bar mr-2"></i> Trend Analytics
243
  </h2>
244
- <p class="text-sm opacity-90">Measure engagement and iterate</p>
245
  </div>
246
- <div class="p-4 space-y-4">
247
- <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
248
- <h3 class="font-bold text-gray-800 mb-2">Current Trend: Sarcastic Cat Memes</h3>
249
- <div class="space-y-3">
 
 
 
 
250
  <div>
251
- <div class="flex justify-between text-sm mb-1">
252
- <span>Engagement Rate</span>
253
- <span>68%</span>
254
  </div>
255
- <div class="w-full bg-gray-200 rounded-full h-2">
256
- <div class="bg-green-500 h-2 rounded-full" style="width: 68%"></div>
257
  </div>
 
258
  </div>
 
259
  <div>
260
- <div class="flex justify-between text-sm mb-1">
261
- <span>Virality Score</span>
262
- <span>4.2/5</span>
263
  </div>
264
- <div class="w-full bg-gray-200 rounded-full h-2">
265
- <div class="bg-purple-500 h-2 rounded-full" style="width: 84%"></div>
266
  </div>
 
267
  </div>
 
268
  <div>
269
- <div class="flex justify-between text-sm mb-1">
270
- <span>Market Saturation</span>
271
- <span>32%</span>
272
  </div>
273
- <div class="w-full bg-gray-200 rounded-full h-2">
274
- <div class="bg-yellow-500 h-2 rounded-full" style="width: 32%"></div>
275
  </div>
 
276
  </div>
277
  </div>
278
  </div>
279
 
280
- <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
281
- <h3 class="font-bold text-gray-800 mb-3">Audience Feedback</h3>
282
- <div class="space-y-3">
283
- <div class="flex items-start space-x-2">
284
- <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
 
 
285
  <i class="fas fa-thumbs-up"></i>
286
  </div>
287
- <div>
288
- <p class="text-sm font-medium">Positive (72%)</p>
289
- <p class="text-xs text-gray-500">"This is so me lol" "Cat memes never get old"</p>
 
 
 
 
 
 
290
  </div>
291
  </div>
292
- <div class="flex items-start space-x-2">
293
- <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500">
 
 
294
  <i class="fas fa-meh"></i>
295
  </div>
296
- <div>
297
- <p class="text-sm font-medium">Neutral (18%)</p>
298
- <p class="text-xs text-gray-500">"It's okay I guess" "Seen better"</p>
 
 
 
 
 
 
299
  </div>
300
  </div>
301
- <div class="flex items-start space-x-2">
302
- <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center text-red-500">
 
 
303
  <i class="fas fa-thumbs-down"></i>
304
  </div>
305
- <div>
306
- <p class="text-sm font-medium">Negative (10%)</p>
307
- <p class="text-xs text-gray-500">"Overdone" "Try something new"</p>
 
 
 
 
 
 
308
  </div>
309
  </div>
310
  </div>
311
  </div>
312
 
313
- <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 chart-container">
314
- <h3 class="font-bold text-gray-800 mb-3">Growth Metrics</h3>
315
- <div class="bg-white p-2 rounded border border-gray-200">
316
- <!-- Placeholder for chart -->
317
- <div class="flex items-center justify-center h-32 text-gray-400">
318
- <i class="fas fa-chart-line text-3xl mr-2"></i>
319
- <span>Engagement chart will appear here</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
320
  </div>
321
  </div>
322
  </div>
323
 
324
  <div class="grid grid-cols-2 gap-3">
325
- <button id="pivot-trend" class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg font-medium transition text-sm">
326
- <i class="fas fa-random mr-1"></i> Pivot (30 Buzz)
327
  </button>
328
- <button id="scale-trend" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg font-medium transition text-sm">
329
- <i class="fas fa-expand mr-1"></i> Scale (100 Buzz)
330
  </button>
331
  </div>
332
  </div>
@@ -334,114 +698,146 @@
334
  </div>
335
 
336
  <!-- Competitor Section -->
337
- <div class="mt-8 bg-white rounded-xl shadow-lg overflow-hidden">
338
- <div class="bg-gradient-to-r from-gray-700 to-gray-900 p-4 text-white">
339
- <h2 class="text-xl font-bold flex items-center">
340
- <i class="fas fa-trophy mr-2"></i> Trendsetter Leaderboard
341
- </h2>
342
- <p class="text-sm opacity-90">Compete against other trendsetters in your school</p>
 
 
 
 
 
 
 
 
 
343
  </div>
344
- <div class="p-4">
345
  <div class="overflow-x-auto">
346
- <table class="min-w-full divide-y divide-gray-200">
347
- <thead class="bg-gray-50">
348
  <tr>
349
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rank</th>
350
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Trendsetter</th>
351
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Trend</th>
352
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Followers</th>
353
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Engagement</th>
354
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Buzz</th>
355
  </tr>
356
  </thead>
357
- <tbody class="bg-white divide-y divide-gray-200">
358
- <tr class="bg-purple-50">
359
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
360
- <td class="px-6 py-4 whitespace-nowrap">
 
 
 
 
 
361
  <div class="flex items-center">
362
  <div class="flex-shrink-0 h-10 w-10">
363
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
364
  </div>
365
  <div class="ml-4">
366
- <div class="text-sm font-medium text-gray-900">Alex Rivera</div>
367
- <div class="text-sm text-gray-500">@trendking</div>
368
  </div>
369
  </div>
370
  </td>
371
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Vintage Tech Memes</td>
372
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5,420</td>
373
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
374
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
375
  89%
376
  </span>
377
  </td>
378
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,250</td>
379
  </tr>
380
- <tr>
381
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
382
- <td class="px-6 py-4 whitespace-nowrap">
 
 
 
 
 
 
383
  <div class="flex items-center">
384
  <div class="flex-shrink-0 h-10 w-10">
385
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
386
  </div>
387
  <div class="ml-4">
388
- <div class="text-sm font-medium text-gray-900">You</div>
389
- <div class="text-sm text-gray-500">@trendsetter</div>
390
  </div>
391
  </div>
392
  </td>
393
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarcastic Cat Memes</td>
394
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,250</td>
395
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
396
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
397
  72%
398
  </span>
399
  </td>
400
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">250</td>
401
  </tr>
 
 
402
  <tr>
403
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
404
- <td class="px-6 py-4 whitespace-nowrap">
 
 
 
 
405
  <div class="flex items-center">
406
  <div class="flex-shrink-0 h-10 w-10">
407
- <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
408
  </div>
409
  <div class="ml-4">
410
- <div class="text-sm font-medium text-gray-900">Jamie Chen</div>
411
- <div class="text-sm text-gray-500">@viralqueen</div>
412
  </div>
413
  </div>
414
  </td>
415
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">DIY Fashion Hacks</td>
416
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4,150</td>
417
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
418
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
419
  65%
420
  </span>
421
  </td>
422
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">980</td>
423
  </tr>
 
 
424
  <tr>
425
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4</td>
426
- <td class="px-6 py-4 whitespace-nowrap">
 
 
 
 
427
  <div class="flex items-center">
428
  <div class="flex-shrink-0 h-10 w-10">
429
  <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
430
  </div>
431
  <div class="ml-4">
432
- <div class="text-sm font-medium text-gray-900">Marcus Lee</div>
433
- <div class="text-sm text-gray-500">@meme_lord</div>
434
  </div>
435
  </div>
436
  </td>
437
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Teacher Memes</td>
438
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3,780</td>
439
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
440
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
441
  58%
442
  </span>
443
  </td>
444
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">750</td>
445
  </tr>
446
  </tbody>
447
  </table>
@@ -450,60 +846,60 @@
450
  </div>
451
 
452
  <!-- Tutorial Modal -->
453
- <div id="tutorial-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
454
- <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
455
- <div class="p-6">
456
- <div class="flex justify-between items-center mb-4">
457
- <h3 class="text-2xl font-bold text-gray-800">Welcome to Trendsetter Tycoon!</h3>
458
- <button id="close-tutorial" class="text-gray-500 hover:text-gray-700">
459
  <i class="fas fa-times"></i>
460
  </button>
461
  </div>
462
 
463
- <div class="space-y-4">
464
- <div class="flex items-start space-x-4">
465
- <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mt-1">
466
  <i class="fas fa-school"></i>
467
  </div>
468
  <div>
469
- <h4 class="font-bold text-gray-800">School Feed</h4>
470
- <p class="text-gray-600">Discover current trends and unmet desires in your school's social network. Analyze data to form hypotheses about what might go viral next.</p>
471
  </div>
472
  </div>
473
 
474
- <div class="flex items-start space-x-4">
475
- <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 mt-1">
476
  <i class="fas fa-magic"></i>
477
  </div>
478
  <div>
479
- <h4 class="font-bold text-gray-800">Trend Creation</h4>
480
- <p class="text-gray-600">Build your Minimum Viable Product (MVP) by combining design elements. Use your limited Buzz Points wisely to test your hypothesis.</p>
481
  </div>
482
  </div>
483
 
484
- <div class="flex items-start space-x-4">
485
- <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mt-1">
486
  <i class="fas fa-chart-line"></i>
487
  </div>
488
  <div>
489
- <h4 class="font-bold text-gray-800">Trend Analytics</h4>
490
- <p class="text-gray-600">Measure engagement metrics and audience feedback. Learn from the data to decide whether to pivot your idea or scale it to more students.</p>
491
  </div>
492
  </div>
493
 
494
- <div class="flex items-start space-x-4">
495
- <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mt-1">
496
  <i class="fas fa-trophy"></i>
497
  </div>
498
  <div>
499
- <h4 class="font-bold text-gray-800">Become #1</h4>
500
- <p class="text-gray-600">Compete against other trendsetters in your school. Gain followers, increase your reputation, and dethrone the current Trend King!</p>
501
  </div>
502
  </div>
503
  </div>
504
 
505
- <div class="mt-6">
506
- <button id="start-playing" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded-lg font-bold transition">
507
  Start Playing!
508
  </button>
509
  </div>
@@ -567,7 +963,7 @@
567
 
568
  // Create a new element in the drop zone
569
  const newElement = document.createElement('div');
570
- newElement.className = 'inline-block p-2 bg-gray-100 rounded-md m-1';
571
  newElement.innerHTML = data;
572
 
573
  this.innerHTML = '';
@@ -590,10 +986,29 @@
590
  const schoolFeed = document.querySelector('.trend-card:last-child');
591
  schoolFeed.scrollIntoView({ behavior: 'smooth' });
592
 
593
- // Show notification
594
- alert('New trend discovered: "90s Throwback Challenge" added to School Feed!');
 
 
 
 
 
 
 
 
 
595
  } else {
596
- alert('Not enough Buzz Points! Try testing one of your existing trends to earn more.');
 
 
 
 
 
 
 
 
 
 
597
  }
598
  });
599
 
@@ -603,13 +1018,13 @@
603
  buzzPointsElement.textContent = buzzPoints;
604
 
605
  // Simulate testing MVP
606
- const analyticsSection = document.querySelector('.bg-gray-50');
607
  analyticsSection.scrollIntoView({ behavior: 'smooth' });
608
 
609
  // Update analytics with random data
610
- document.querySelector('.bg-green-500').style.width = Math.floor(Math.random() * 30 + 50) + '%';
611
- document.querySelector('.bg-purple-500').style.width = Math.floor(Math.random() * 30 + 50) + '%';
612
- document.querySelector('.bg-yellow-500').style.width = Math.floor(Math.random() * 30) + '%';
613
 
614
  // Random outcome
615
  if(Math.random() > 0.3) {
@@ -618,13 +1033,42 @@
618
  followers += gain;
619
  followersElement.textContent = followers.toLocaleString();
620
 
621
- alert(`Success! Your trend is gaining traction. +${gain} followers!`);
 
 
 
 
 
 
 
 
 
 
622
  } else {
623
  // Failure
624
- alert('Your trend didn't resonate with the test audience. Check the feedback and consider pivoting.');
 
 
 
 
 
 
 
 
 
625
  }
626
  } else {
627
- alert('Not enough Buzz Points! Analyze more trends or wait for your Buzz to recharge.');
 
 
 
 
 
 
 
 
 
 
628
  }
629
  });
630
 
@@ -633,9 +1077,29 @@
633
  buzzPoints -= 30;
634
  buzzPointsElement.textContent = buzzPoints;
635
 
636
- alert('Trend pivoted! Try testing your new version with a different audience.');
 
 
 
 
 
 
 
 
 
 
637
  } else {
638
- alert('Not enough Buzz Points to pivot!');
 
 
 
 
 
 
 
 
 
 
639
  }
640
  });
641
 
@@ -648,9 +1112,29 @@
648
  followers += gain;
649
  followersElement.textContent = followers.toLocaleString();
650
 
651
- alert(`Scaling successful! Your trend is going viral. +${gain} followers!`);
 
 
 
 
 
 
 
 
 
 
652
  } else {
653
- alert('Not enough Buzz Points to scale! Build up more momentum first.');
 
 
 
 
 
 
 
 
 
 
654
  }
655
  });
656
  });
 
6
  <title>Trendsetter Tycoon</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ neon: {
15
+ pink: '#ff2ced',
16
+ blue: '#00f0ff',
17
+ purple: '#b400ff',
18
+ yellow: '#fff200',
19
+ green: '#00ff75'
20
+ },
21
+ dark: {
22
+ 900: '#0f0f13',
23
+ 800: '#1a1a23',
24
+ 700: '#252532'
25
+ }
26
+ },
27
+ fontFamily: {
28
+ sans: ['Inter', 'sans-serif'],
29
+ display: ['Poppins', 'sans-serif']
30
+ },
31
+ animation: {
32
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
33
+ 'float': 'float 6s ease-in-out infinite',
34
+ 'gradient-x': 'gradient-x 8s ease infinite',
35
+ },
36
+ keyframes: {
37
+ float: {
38
+ '0%, 100%': { transform: 'translateY(0)' },
39
+ '50%': { transform: 'translateY(-10px)' },
40
+ },
41
+ 'gradient-x': {
42
+ '0%, 100%': {
43
+ 'background-position': '0% 50%'
44
+ },
45
+ '50%': {
46
+ 'background-position': '100% 50%'
47
+ }
48
+ }
49
+ }
50
+ }
51
+ }
52
+ }
53
+ </script>
54
  <style>
55
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');
56
+
57
+ body {
58
+ background-color: #0f0f13;
59
+ color: white;
60
+ overflow-x: hidden;
61
  }
62
+
63
+ .gradient-text {
64
+ background: linear-gradient(90deg, #ff2ced, #00f0ff, #b400ff);
65
+ -webkit-background-clip: text;
66
+ background-clip: text;
67
+ color: transparent;
68
+ background-size: 300% 300%;
69
+ animation: gradient-x 8s ease infinite;
70
  }
71
+
72
+ .glow-box {
73
+ box-shadow: 0 0 15px rgba(255, 44, 237, 0.3);
74
+ }
75
+
76
+ .glow-box-blue {
77
+ box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
78
+ }
79
+
80
+ .glow-box-purple {
81
+ box-shadow: 0 0 15px rgba(180, 0, 255, 0.3);
82
+ }
83
+
84
+ .trend-card {
85
+ transition: all 0.3s ease;
86
+ border-left: 3px solid transparent;
87
+ }
88
+
89
+ .trend-card:hover {
90
+ transform: translateY(-3px);
91
+ border-left-color: #ff2ced;
92
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
93
  }
94
+
95
  .creation-area {
96
+ background-image:
97
+ radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0);
98
  background-size: 20px 20px;
99
  }
100
+
 
 
101
  .draggable-item {
102
  cursor: grab;
103
+ transition: all 0.2s ease;
104
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
105
  }
106
+
107
  .draggable-item:active {
108
  cursor: grabbing;
109
+ transform: scale(0.95);
110
  }
111
+
112
  .drop-zone {
113
  transition: all 0.3s ease;
114
  }
115
+
116
  .drop-zone.highlight {
117
+ background-color: rgba(180, 0, 255, 0.2);
118
+ border-color: #b400ff;
119
+ }
120
+
121
+ .progress-bar {
122
+ transition: width 0.5s ease-in-out;
123
+ }
124
+
125
+ .social-post {
126
+ background: linear-gradient(135deg, rgba(26,26,35,0.8) 0%, rgba(15,15,19,0.9) 100%);
127
+ border: 1px solid rgba(255,255,255,0.1);
128
+ backdrop-filter: blur(10px);
129
+ }
130
+
131
+ .neon-btn {
132
+ position: relative;
133
+ overflow: hidden;
134
+ z-index: 1;
135
+ }
136
+
137
+ .neon-btn::before {
138
+ content: '';
139
+ position: absolute;
140
+ top: 0;
141
+ left: 0;
142
+ width: 100%;
143
+ height: 100%;
144
+ background: linear-gradient(45deg, #ff2ced, #00f0ff, #b400ff, #fff200);
145
+ background-size: 400% 400%;
146
+ opacity: 0;
147
+ transition: 0.5s;
148
+ z-index: -1;
149
+ }
150
+
151
+ .neon-btn:hover::before {
152
+ opacity: 1;
153
+ animation: gradient-x 8s ease infinite;
154
+ }
155
+
156
+ .neon-btn:hover {
157
+ box-shadow: 0 0 15px rgba(255, 44, 237, 0.5);
158
+ }
159
+
160
+ .tab-active {
161
+ position: relative;
162
+ }
163
+
164
+ .tab-active::after {
165
+ content: '';
166
+ position: absolute;
167
+ bottom: -2px;
168
+ left: 0;
169
+ width: 100%;
170
+ height: 3px;
171
+ background: linear-gradient(90deg, #ff2ced, #00f0ff);
172
+ border-radius: 3px;
173
+ }
174
+
175
+ .avatar-ring {
176
+ box-shadow: 0 0 0 3px #0f0f13, 0 0 0 5px #ff2ced;
177
+ }
178
+
179
+ .avatar-ring-blue {
180
+ box-shadow: 0 0 0 3px #0f0f13, 0 0 0 5px #00f0ff;
181
+ }
182
+
183
+ .avatar-ring-purple {
184
+ box-shadow: 0 0 0 3px #0f0f13, 0 0 0 5px #b400ff;
185
+ }
186
+
187
+ .emoji-reaction {
188
+ transition: all 0.2s ease;
189
+ }
190
+
191
+ .emoji-reaction:hover {
192
+ transform: scale(1.2) translateY(-5px);
193
+ }
194
+
195
+ .tooltip:hover .tooltip-text {
196
+ opacity: 1;
197
+ transform: translateY(0);
198
+ }
199
+
200
+ .tooltip-text {
201
+ opacity: 0;
202
+ transform: translateY(10px);
203
+ transition: all 0.2s ease;
204
+ pointer-events: none;
205
+ }
206
+
207
+ .scrollbar-hide::-webkit-scrollbar {
208
+ display: none;
209
  }
210
  </style>
211
  </head>
212
+ <body class="font-sans">
213
+ <div class="container mx-auto px-4 py-6 max-w-7xl">
214
  <!-- Header -->
215
  <header class="flex justify-between items-center mb-8">
216
  <div class="flex items-center space-x-4">
217
+ <div class="w-14 h-14 rounded-full bg-gradient-to-br from-neon-pink to-neon-purple flex items-center justify-center text-white text-2xl font-bold font-display">
218
  TT
219
  </div>
220
+ <h1 class="text-4xl font-bold font-display gradient-text">Trendsetter Tycoon</h1>
221
  </div>
222
  <div class="flex items-center space-x-6">
223
+ <div class="flex items-center space-x-3 bg-dark-700 px-5 py-2 rounded-full glow-box">
224
+ <i class="fas fa-bolt text-neon-yellow text-lg"></i>
225
+ <span class="font-bold text-white" id="buzz-points">250</span>
226
+ <div class="tooltip relative">
227
+ <i class="fas fa-info-circle text-gray-400 text-sm"></i>
228
+ <div class="tooltip-text absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-dark-800 text-sm text-gray-200 px-3 py-2 rounded-lg">
229
+ Buzz Points are your energy for creating and testing trends
230
+ </div>
231
+ </div>
232
  </div>
233
+ <div class="flex items-center space-x-3 bg-dark-700 px-5 py-2 rounded-full glow-box-blue">
234
+ <i class="fas fa-users text-neon-blue text-lg"></i>
235
+ <span class="font-bold text-white" id="followers">1,250</span>
236
  </div>
237
+ <div class="relative group">
238
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-12 h-12 rounded-full cursor-pointer avatar-ring">
239
+ <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-neon-green rounded-full border-2 border-dark-900 flex items-center justify-center">
240
+ <div class="w-2 h-2 bg-dark-900 rounded-full"></div>
241
+ </div>
242
  </div>
243
  </div>
244
  </header>
 
246
  <!-- Main Game Area -->
247
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
248
  <!-- Left Column - School Feed -->
249
+ <div class="lg:col-span-1 bg-dark-800 rounded-2xl overflow-hidden border border-dark-700">
250
+ <div class="bg-gradient-to-r from-dark-700 to-dark-800 p-5 border-b border-dark-700">
251
+ <div class="flex justify-between items-center">
252
+ <div>
253
+ <h2 class="text-xl font-bold font-display flex items-center">
254
+ <i class="fas fa-school mr-3 text-neon-blue"></i> School Feed
255
+ </h2>
256
+ <p class="text-sm text-gray-400 mt-1">Discover what's trending in your school</p>
257
+ </div>
258
+ <div class="flex space-x-1">
259
+ <button class="px-3 py-1 text-xs bg-dark-700 rounded-md text-gray-300 hover:bg-dark-600 transition">Latest</button>
260
+ <button class="px-3 py-1 text-xs bg-dark-700 rounded-md text-gray-300 hover:bg-dark-600 transition">Top</button>
261
+ <button class="px-3 py-1 text-xs bg-dark-700 rounded-md text-gray-300 hover:bg-dark-600 transition">New</button>
262
+ </div>
263
+ </div>
264
  </div>
265
+ <div class="p-4 space-y-4 overflow-y-auto scrollbar-hide" style="max-height: 550px;">
266
+ <!-- Social Post 1 -->
267
+ <div class="trend-card social-post p-4 rounded-xl cursor-pointer">
268
  <div class="flex items-start space-x-3">
269
+ <div class="avatar-ring-blue">
270
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full">
271
  </div>
272
+ <div class="flex-1">
273
+ <div class="flex items-center justify-between">
274
+ <div>
275
+ <h3 class="font-bold text-white">Alex Rivera</h3>
276
+ <p class="text-xs text-gray-400">@trendking • 2h ago</p>
277
+ </div>
278
+ <i class="fas fa-ellipsis-h text-gray-400 hover:text-white cursor-pointer"></i>
279
+ </div>
280
+ <p class="text-sm text-gray-200 mt-2">Who remembers these? 😂 #ThrowbackTech</p>
281
+ <div class="mt-3 bg-dark-900 rounded-lg overflow-hidden">
282
+ <img src="https://i.imgur.com/JQlY6YX.png" alt="Vintage tech memes" class="w-full h-auto">
283
+ </div>
284
+ <div class="flex items-center justify-between mt-3">
285
+ <div class="flex space-x-4">
286
+ <div class="emoji-reaction flex items-center space-x-1">
287
+ <span>😂</span>
288
+ <span class="text-xs text-gray-400">142</span>
289
+ </div>
290
+ <div class="emoji-reaction flex items-center space-x-1">
291
+ <span>🔥</span>
292
+ <span class="text-xs text-gray-400">89</span>
293
+ </div>
294
+ <div class="emoji-reaction flex items-center space-x-1">
295
+ <span>❤️</span>
296
+ <span class="text-xs text-gray-400">327</span>
297
+ </div>
298
+ </div>
299
+ <div class="text-xs text-gray-400">
300
+ <i class="fas fa-share-alt mr-1"></i> 128 shares
301
+ </div>
302
  </div>
303
  </div>
304
  </div>
305
  </div>
306
 
307
+ <!-- Social Post 2 -->
308
+ <div class="trend-card social-post p-4 rounded-xl cursor-pointer">
309
  <div class="flex items-start space-x-3">
310
+ <div class="avatar-ring-purple">
311
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-10 h-10 rounded-full">
312
  </div>
313
+ <div class="flex-1">
314
+ <div class="flex items-center justify-between">
315
+ <div>
316
+ <h3 class="font-bold text-white">Jamie Chen</h3>
317
+ <p class="text-xs text-gray-400">@viralqueen • 4h ago</p>
318
+ </div>
319
+ <i class="fas fa-ellipsis-h text-gray-400 hover:text-white cursor-pointer"></i>
320
+ </div>
321
+ <p class="text-sm text-gray-200 mt-2">Turn your old jeans into these cute shorts with just scissors! ✂️ #DIYSzn</p>
322
+ <div class="mt-3 bg-dark-900 rounded-lg overflow-hidden">
323
+ <img src="https://i.imgur.com/8zGX6aP.png" alt="DIY fashion hacks" class="w-full h-auto">
324
+ </div>
325
+ <div class="flex items-center justify-between mt-3">
326
+ <div class="flex space-x-4">
327
+ <div class="emoji-reaction flex items-center space-x-1">
328
+ <span>👏</span>
329
+ <span class="text-xs text-gray-400">98</span>
330
+ </div>
331
+ <div class="emoji-reaction flex items-center space-x-1">
332
+ <span>💯</span>
333
+ <span class="text-xs text-gray-400">76</span>
334
+ </div>
335
+ <div class="emoji-reaction flex items-center space-x-1">
336
+ <span>❤️</span>
337
+ <span class="text-xs text-gray-400">215</span>
338
+ </div>
339
+ </div>
340
+ <div class="text-xs text-gray-400">
341
+ <i class="fas fa-share-alt mr-1"></i> 87 shares
342
+ </div>
343
  </div>
344
  </div>
345
  </div>
346
  </div>
347
 
348
+ <!-- Social Post 3 -->
349
+ <div class="trend-card social-post p-4 rounded-xl cursor-pointer">
350
  <div class="flex items-start space-x-3">
351
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-neon-green to-neon-blue flex items-center justify-center text-white">
352
  <i class="fas fa-leaf"></i>
353
  </div>
354
+ <div class="flex-1">
355
+ <div class="flex items-center justify-between">
356
+ <div>
357
+ <h3 class="font-bold text-white">Eco Club</h3>
358
+ <p class="text-xs text-gray-400">@ecowarriors • 6h ago</p>
359
+ </div>
360
+ <i class="fas fa-ellipsis-h text-gray-400 hover:text-white cursor-pointer"></i>
361
+ </div>
362
+ <p class="text-sm text-gray-200 mt-2">Our recycling program has saved over 500kg of waste this month! ♻️ Join us next Friday for a campus clean-up.</p>
363
+ <div class="mt-3 bg-dark-900 rounded-lg overflow-hidden">
364
+ <img src="https://i.imgur.com/5jX8L9p.png" alt="Eco friendly initiative" class="w-full h-auto">
365
+ </div>
366
+ <div class="flex items-center justify-between mt-3">
367
+ <div class="flex space-x-4">
368
+ <div class="emoji-reaction flex items-center space-x-1">
369
+ <span>🌎</span>
370
+ <span class="text-xs text-gray-400">156</span>
371
+ </div>
372
+ <div class="emoji-reaction flex items-center space-x-1">
373
+ <span>👏</span>
374
+ <span class="text-xs text-gray-400">132</span>
375
+ </div>
376
+ <div class="emoji-reaction flex items-center space-x-1">
377
+ <span>❤️</span>
378
+ <span class="text-xs text-gray-400">298</span>
379
+ </div>
380
+ </div>
381
+ <div class="text-xs text-gray-400">
382
+ <i class="fas fa-share-alt mr-1"></i> 143 shares
383
+ </div>
384
  </div>
385
  </div>
386
  </div>
387
  </div>
388
 
389
+ <!-- Social Post 4 -->
390
+ <div class="trend-card social-post p-4 rounded-xl cursor-pointer">
391
  <div class="flex items-start space-x-3">
392
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-neon-yellow to-neon-pink flex items-center justify-center text-white">
393
  <i class="fas fa-dog"></i>
394
  </div>
395
+ <div class="flex-1">
396
+ <div class="flex items-center justify-between">
397
+ <div>
398
+ <h3 class="font-bold text-white">Pet Lovers</h3>
399
+ <p class="text-xs text-gray-400">@pawsquad • 8h ago</p>
400
+ </div>
401
+ <i class="fas fa-ellipsis-h text-gray-400 hover:text-white cursor-pointer"></i>
402
  </div>
403
+ <p class="text-sm text-gray-200 mt-2">When your dog tries to be helpful but ends up being extra 😂 #DoggoMoments</p>
404
+ <div class="mt-3 bg-dark-900 rounded-lg overflow-hidden">
405
+ <video controls class="w-full">
406
+ <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
407
+ </video>
408
+ </div>
409
+ <div class="flex items-center justify-between mt-3">
410
+ <div class="flex space-x-4">
411
+ <div class="emoji-reaction flex items-center space-x-1">
412
+ <span>😂</span>
413
+ <span class="text-xs text-gray-400">342</span>
414
+ </div>
415
+ <div class="emoji-reaction flex items-center space-x-1">
416
+ <span>🐶</span>
417
+ <span class="text-xs text-gray-400">201</span>
418
+ </div>
419
+ <div class="emoji-reaction flex items-center space-x-1">
420
+ <span>❤️</span>
421
+ <span class="text-xs text-gray-400">512</span>
422
+ </div>
423
+ </div>
424
+ <div class="text-xs text-gray-400">
425
+ <i class="fas fa-share-alt mr-1"></i> 231 shares
426
+ </div>
427
  </div>
428
  </div>
429
  </div>
430
  </div>
431
  </div>
432
+ <div class="p-4 bg-dark-700 border-t border-dark-600">
433
+ <button id="analyze-trends" class="w-full neon-btn bg-gradient-to-r from-neon-blue to-neon-purple text-white py-3 px-4 rounded-xl font-bold transition flex items-center justify-center">
434
  <i class="fas fa-chart-line mr-2"></i> Analyze Trends (10 Buzz)
435
  </button>
436
  </div>
437
  </div>
438
 
439
  <!-- Middle Column - Creation Area -->
440
+ <div class="lg:col-span-1 bg-dark-800 rounded-2xl overflow-hidden border border-dark-700">
441
+ <div class="bg-gradient-to-r from-dark-700 to-dark-800 p-5 border-b border-dark-700">
442
+ <h2 class="text-xl font-bold font-display flex items-center">
443
+ <i class="fas fa-magic mr-3 text-neon-pink"></i> Trend Lab
444
  </h2>
445
+ <p class="text-sm text-gray-400 mt-1">Create your next viral sensation</p>
446
  </div>
447
+ <div class="p-5 creation-area min-h-[550px]">
448
+ <div class="mb-5">
449
+ <label class="block text-sm font-medium text-gray-300 mb-2">Trend Hypothesis</label>
450
+ <div class="relative">
451
+ <input type="text" class="w-full bg-dark-700 border border-dark-600 text-white px-4 py-3 rounded-xl focus:outline-none focus:ring-2 focus:ring-neon-pink focus:border-transparent placeholder-gray-500" placeholder="E.g. 'Students will love sarcastic cat meme stickers'">
452
+ <div class="absolute right-3 top-3 text-neon-purple">
453
+ <i class="fas fa-lightbulb"></i>
454
+ </div>
455
+ </div>
456
  </div>
457
 
458
+ <div class="mb-5">
459
+ <label class="block text-sm font-medium text-gray-300 mb-2">Trend Type</label>
460
+ <div class="grid grid-cols-3 gap-3">
461
+ <button class="py-3 bg-dark-700 hover:bg-dark-600 border border-dark-600 rounded-xl text-sm font-medium transition flex flex-col items-center justify-center group">
462
+ <i class="fas fa-sticky-note text-2xl mb-2 text-neon-yellow group-hover:text-white"></i>
463
+ <span>Stickers</span>
464
  </button>
465
+ <button class="py-3 bg-dark-700 hover:bg-dark-600 border border-dark-600 rounded-xl text-sm font-medium transition flex flex-col items-center justify-center group">
466
+ <i class="fas fa-tshirt text-2xl mb-2 text-neon-blue group-hover:text-white"></i>
467
+ <span>Fashion</span>
468
  </button>
469
+ <button class="py-3 bg-dark-700 hover:bg-dark-600 border border-dark-600 rounded-xl text-sm font-medium transition flex flex-col items-center justify-center group">
470
+ <i class="fas fa-mobile text-2xl mb-2 text-neon-green group-hover:text-white"></i>
471
+ <span>App Feature</span>
472
  </button>
473
  </div>
474
  </div>
475
 
476
+ <div class="mb-5">
477
+ <div class="flex justify-between items-center mb-2">
478
+ <label class="block text-sm font-medium text-gray-300">Design Elements</label>
479
+ <span class="text-xs text-gray-500">Drag to canvas</span>
480
+ </div>
481
+ <div class="grid grid-cols-4 gap-3 mb-3">
482
+ <div class="draggable-item p-3 bg-dark-700 rounded-xl text-center cursor-move hover:bg-neon-purple hover:bg-opacity-20 hover:border-neon-purple border border-dark-600" draggable="true">
483
+ <i class="fas fa-cat text-3xl mb-1 text-neon-yellow"></i>
484
+ <p class="text-xs text-gray-300">Cat</p>
485
  </div>
486
+ <div class="draggable-item p-3 bg-dark-700 rounded-xl text-center cursor-move hover:bg-neon-blue hover:bg-opacity-20 hover:border-neon-blue border border-dark-600" draggable="true">
487
+ <i class="fas fa-dog text-3xl mb-1 text-neon-pink"></i>
488
+ <p class="text-xs text-gray-300">Dog</p>
489
  </div>
490
+ <div class="draggable-item p-3 bg-dark-700 rounded-xl text-center cursor-move hover:bg-neon-green hover:bg-opacity-20 hover:border-neon-green border border-dark-600" draggable="true">
491
+ <i class="fas fa-font text-3xl mb-1 text-neon-blue"></i>
492
+ <p class="text-xs text-gray-300">Text</p>
493
  </div>
494
+ <div class="draggable-item p-3 bg-dark-700 rounded-xl text-center cursor-move hover:bg-neon-pink hover:bg-opacity-20 hover:border-neon-pink border border-dark-600" draggable="true">
495
+ <i class="fas fa-image text-3xl mb-1 text-neon-purple"></i>
496
+ <p class="text-xs text-gray-300">Image</p>
497
+ </div>
498
+ <div class="draggable-item p-3 bg-dark-700 rounded-xl text-center cursor-move hover:bg-neon-yellow hover:bg-opacity-20 hover:border-neon-yellow border border-dark-600" draggable="true">
499
+ <i class="fas fa-music text-3xl mb-1 text-neon-pink"></i>
500
+ <p class="text-xs text-gray-300">Sound</p>
501
+ </div>
502
+ <div class="draggable-item p-3 bg-dark-700 rounded-xl text-center cursor-move hover:bg-neon-blue hover:bg-opacity-20 hover:border-neon-blue border border-dark-600" draggable="true">
503
+ <i class="fas fa-video text-3xl mb-1 text-neon-green"></i>
504
+ <p class="text-xs text-gray-300">Video</p>
505
+ </div>
506
+ <div class="draggable-item p-3 bg-dark-700 rounded-xl text-center cursor-move hover:bg-neon-purple hover:bg-opacity-20 hover:border-neon-purple border border-dark-600" draggable="true">
507
+ <i class="fas fa-paint-brush text-3xl mb-1 text-neon-yellow"></i>
508
+ <p class="text-xs text-gray-300">Art</p>
509
+ </div>
510
+ <div class="draggable-item p-3 bg-dark-700 rounded-xl text-center cursor-move hover:bg-neon-pink hover:bg-opacity-20 hover:border-neon-pink border border-dark-600" draggable="true">
511
+ <i class="fas fa-plus text-3xl mb-1 text-gray-400"></i>
512
+ <p class="text-xs text-gray-300">More</p>
513
  </div>
514
  </div>
515
  </div>
516
 
517
+ <div class="mb-5">
518
+ <div class="flex justify-between items-center mb-2">
519
+ <label class="block text-sm font-medium text-gray-300">MVP Canvas</label>
520
+ <span class="text-xs text-gray-500">0/50 Buzz used</span>
521
+ </div>
522
+ <div id="drop-zone" class="drop-zone bg-dark-700 border-2 border-dashed border-dark-600 rounded-xl p-4 min-h-[200px] flex items-center justify-center">
523
+ <div class="text-center">
524
+ <i class="fas fa-arrow-up text-2xl mb-2 text-gray-500"></i>
525
+ <p class="text-gray-400">Drag elements here to create your MVP</p>
526
+ <p class="text-xs text-gray-500 mt-1">Start with 2-3 key features</p>
527
+ </div>
528
  </div>
529
  </div>
530
 
531
  <div class="flex space-x-3">
532
+ <button id="test-mvp" class="flex-1 neon-btn bg-gradient-to-r from-neon-pink to-neon-purple text-white py-3 px-4 rounded-xl font-bold transition flex items-center justify-center">
533
  <i class="fas fa-rocket mr-2"></i> Test MVP (50 Buzz)
534
  </button>
535
+ <button class="w-12 bg-dark-700 hover:bg-dark-600 border border-dark-600 text-gray-300 py-3 px-4 rounded-xl font-medium transition flex items-center justify-center">
536
  <i class="fas fa-redo"></i>
537
  </button>
538
  </div>
 
540
  </div>
541
 
542
  <!-- Right Column - Analytics & Results -->
543
+ <div class="lg:col-span-1 bg-dark-800 rounded-2xl overflow-hidden border border-dark-700">
544
+ <div class="bg-gradient-to-r from-dark-700 to-dark-800 p-5 border-b border-dark-700">
545
+ <h2 class="text-xl font-bold font-display flex items-center">
546
+ <i class="fas fa-chart-bar mr-3 text-neon-green"></i> Trend Analytics
547
  </h2>
548
+ <p class="text-sm text-gray-400 mt-1">Measure, learn, and optimize</p>
549
  </div>
550
+ <div class="p-5 space-y-5">
551
+ <div class="bg-dark-700 p-4 rounded-xl border border-dark-600 glow-box-purple">
552
+ <div class="flex justify-between items-center mb-3">
553
+ <h3 class="font-bold text-white">Current Trend: Sarcastic Cat Memes</h3>
554
+ <span class="text-xs px-2 py-1 bg-neon-purple bg-opacity-20 text-neon-purple rounded-full">Testing Phase</span>
555
+ </div>
556
+
557
+ <div class="space-y-4">
558
  <div>
559
+ <div class="flex justify-between text-sm mb-2">
560
+ <span class="text-gray-300">Engagement Rate</span>
561
+ <span class="font-medium text-neon-green">68%</span>
562
  </div>
563
+ <div class="w-full bg-dark-600 rounded-full h-2">
564
+ <div class="bg-neon-green h-2 rounded-full progress-bar" style="width: 68%"></div>
565
  </div>
566
+ <p class="text-xs text-gray-400 mt-1">Above school average (52%)</p>
567
  </div>
568
+
569
  <div>
570
+ <div class="flex justify-between text-sm mb-2">
571
+ <span class="text-gray-300">Virality Score</span>
572
+ <span class="font-medium text-neon-blue">4.2/5</span>
573
  </div>
574
+ <div class="w-full bg-dark-600 rounded-full h-2">
575
+ <div class="bg-neon-blue h-2 rounded-full progress-bar" style="width: 84%"></div>
576
  </div>
577
+ <p class="text-xs text-gray-400 mt-1">High sharing potential</p>
578
  </div>
579
+
580
  <div>
581
+ <div class="flex justify-between text-sm mb-2">
582
+ <span class="text-gray-300">Market Saturation</span>
583
+ <span class="font-medium text-neon-yellow">32%</span>
584
  </div>
585
+ <div class="w-full bg-dark-600 rounded-full h-2">
586
+ <div class="bg-neon-yellow h-2 rounded-full progress-bar" style="width: 32%"></div>
587
  </div>
588
+ <p class="text-xs text-gray-400 mt-1">Room to grow before peak</p>
589
  </div>
590
  </div>
591
  </div>
592
 
593
+ <div class="bg-dark-700 p-4 rounded-xl border border-dark-600">
594
+ <h3 class="font-bold text-white mb-3">Audience Feedback</h3>
595
+
596
+ <div class="space-y-4">
597
+ <!-- Positive Feedback -->
598
+ <div class="flex items-start space-x-3">
599
+ <div class="w-10 h-10 rounded-full bg-neon-green bg-opacity-20 flex items-center justify-center text-neon-green">
600
  <i class="fas fa-thumbs-up"></i>
601
  </div>
602
+ <div class="flex-1">
603
+ <div class="flex justify-between">
604
+ <p class="font-medium text-neon-green">Positive (72%)</p>
605
+ <span class="text-xs text-gray-500">32 comments</span>
606
+ </div>
607
+ <div class="bg-dark-800 mt-2 p-3 rounded-lg">
608
+ <p class="text-sm text-gray-200 italic">"This is so me lol"</p>
609
+ <p class="text-sm text-gray-200 italic mt-1">"Cat memes never get old!"</p>
610
+ </div>
611
  </div>
612
  </div>
613
+
614
+ <!-- Neutral Feedback -->
615
+ <div class="flex items-start space-x-3">
616
+ <div class="w-10 h-10 rounded-full bg-neon-yellow bg-opacity-20 flex items-center justify-center text-neon-yellow">
617
  <i class="fas fa-meh"></i>
618
  </div>
619
+ <div class="flex-1">
620
+ <div class="flex justify-between">
621
+ <p class="font-medium text-neon-yellow">Neutral (18%)</p>
622
+ <span class="text-xs text-gray-500">8 comments</span>
623
+ </div>
624
+ <div class="bg-dark-800 mt-2 p-3 rounded-lg">
625
+ <p class="text-sm text-gray-200 italic">"It's okay I guess"</p>
626
+ <p class="text-sm text-gray-200 italic mt-1">"Seen better"</p>
627
+ </div>
628
  </div>
629
  </div>
630
+
631
+ <!-- Negative Feedback -->
632
+ <div class="flex items-start space-x-3">
633
+ <div class="w-10 h-10 rounded-full bg-neon-pink bg-opacity-20 flex items-center justify-center text-neon-pink">
634
  <i class="fas fa-thumbs-down"></i>
635
  </div>
636
+ <div class="flex-1">
637
+ <div class="flex justify-between">
638
+ <p class="font-medium text-neon-pink">Negative (10%)</p>
639
+ <span class="text-xs text-gray-500">5 comments</span>
640
+ </div>
641
+ <div class="bg-dark-800 mt-2 p-3 rounded-lg">
642
+ <p class="text-sm text-gray-200 italic">"Overdone"</p>
643
+ <p class="text-sm text-gray-200 italic mt-1">"Try something new"</p>
644
+ </div>
645
  </div>
646
  </div>
647
  </div>
648
  </div>
649
 
650
+ <div class="bg-dark-700 p-4 rounded-xl border border-dark-600">
651
+ <h3 class="font-bold text-white mb-3">Demographic Breakdown</h3>
652
+
653
+ <div class="grid grid-cols-2 gap-4">
654
+ <div>
655
+ <p class="text-xs text-gray-400 mb-1">By Grade</p>
656
+ <div class="bg-dark-900 p-3 rounded-lg">
657
+ <div class="flex items-center mb-1">
658
+ <div class="w-2 h-2 rounded-full bg-neon-blue mr-2"></div>
659
+ <span class="text-xs">Freshmen: 42%</span>
660
+ </div>
661
+ <div class="flex items-center mb-1">
662
+ <div class="w-2 h-2 rounded-full bg-neon-pink mr-2"></div>
663
+ <span class="text-xs">Sophomores: 28%</span>
664
+ </div>
665
+ <div class="flex items-center">
666
+ <div class="w-2 h-2 rounded-full bg-neon-yellow mr-2"></div>
667
+ <span class="text-xs">Juniors/Seniors: 30%</span>
668
+ </div>
669
+ </div>
670
+ </div>
671
+
672
+ <div>
673
+ <p class="text-xs text-gray-400 mb-1">By Gender</p>
674
+ <div class="bg-dark-900 p-3 rounded-lg">
675
+ <div class="flex items-center mb-1">
676
+ <div class="w-2 h-2 rounded-full bg-neon-green mr-2"></div>
677
+ <span class="text-xs">Female: 58%</span>
678
+ </div>
679
+ <div class="flex items-center">
680
+ <div class="w-2 h-2 rounded-full bg-neon-purple mr-2"></div>
681
+ <span class="text-xs">Male: 42%</span>
682
+ </div>
683
+ </div>
684
  </div>
685
  </div>
686
  </div>
687
 
688
  <div class="grid grid-cols-2 gap-3">
689
+ <button id="pivot-trend" class="bg-dark-700 hover:bg-dark-600 border border-dark-600 text-white py-3 px-4 rounded-xl font-medium transition flex items-center justify-center neon-btn">
690
+ <i class="fas fa-random mr-2 text-neon-yellow"></i> Pivot (30 Buzz)
691
  </button>
692
+ <button id="scale-trend" class="bg-dark-700 hover:bg-dark-600 border border-dark-600 text-white py-3 px-4 rounded-xl font-medium transition flex items-center justify-center neon-btn">
693
+ <i class="fas fa-expand mr-2 text-neon-green"></i> Scale (100 Buzz)
694
  </button>
695
  </div>
696
  </div>
 
698
  </div>
699
 
700
  <!-- Competitor Section -->
701
+ <div class="mt-8 bg-dark-800 rounded-2xl overflow-hidden border border-dark-700">
702
+ <div class="bg-gradient-to-r from-dark-700 to-dark-800 p-5 border-b border-dark-700">
703
+ <div class="flex justify-between items-center">
704
+ <div>
705
+ <h2 class="text-xl font-bold font-display flex items-center">
706
+ <i class="fas fa-trophy mr-3 text-neon-yellow"></i> Trendsetter Leaderboard
707
+ </h2>
708
+ <p class="text-sm text-gray-400 mt-1">Compete to become the #1 influencer in your school</p>
709
+ </div>
710
+ <div class="flex space-x-2">
711
+ <button class="px-3 py-1 text-xs bg-dark-700 rounded-md text-gray-300 hover:bg-dark-600 transition tab-active">Weekly</button>
712
+ <button class="px-3 py-1 text-xs bg-dark-700 rounded-md text-gray-300 hover:bg-dark-600 transition">Monthly</button>
713
+ <button class="px-3 py-1 text-xs bg-dark-700 rounded-md text-gray-300 hover:bg-dark-600 transition">All-Time</button>
714
+ </div>
715
+ </div>
716
  </div>
717
+ <div class="p-5">
718
  <div class="overflow-x-auto">
719
+ <table class="min-w-full divide-y divide-dark-600">
720
+ <thead class="bg-dark-700">
721
  <tr>
722
+ <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Rank</th>
723
+ <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Trendsetter</th>
724
+ <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Current Trend</th>
725
+ <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Followers</th>
726
+ <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Engagement</th>
727
+ <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Buzz</th>
728
  </tr>
729
  </thead>
730
+ <tbody class="bg-dark-800 divide-y divide-dark-600">
731
+ <!-- Rank 1 -->
732
+ <tr class="bg-dark-700 bg-opacity-50">
733
+ <td class="px-4 py-4 whitespace-nowrap">
734
+ <div class="w-6 h-6 rounded-full bg-gradient-to-r from-neon-yellow to-neon-pink flex items-center justify-center text-dark-900 font-bold text-xs">
735
+ 1
736
+ </div>
737
+ </td>
738
+ <td class="px-4 py-4 whitespace-nowrap">
739
  <div class="flex items-center">
740
  <div class="flex-shrink-0 h-10 w-10">
741
+ <img class="h-10 w-10 rounded-full avatar-ring" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
742
  </div>
743
  <div class="ml-4">
744
+ <div class="text-sm font-medium text-white">Alex Rivera</div>
745
+ <div class="text-sm text-neon-blue">@trendking</div>
746
  </div>
747
  </div>
748
  </td>
749
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-300">Vintage Tech Memes</td>
750
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-white font-medium">5,420</td>
751
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-300">
752
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-neon-green bg-opacity-20 text-neon-green">
753
  89%
754
  </span>
755
  </td>
756
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-white font-medium">1,250</td>
757
  </tr>
758
+
759
+ <!-- Rank 2 (You) -->
760
+ <tr class="bg-gradient-to-r from-dark-700 to-dark-800">
761
+ <td class="px-4 py-4 whitespace-nowrap">
762
+ <div class="w-6 h-6 rounded-full bg-gradient-to-r from-neon-blue to-neon-purple flex items-center justify-center text-white font-bold text-xs">
763
+ 2
764
+ </div>
765
+ </td>
766
+ <td class="px-4 py-4 whitespace-nowrap">
767
  <div class="flex items-center">
768
  <div class="flex-shrink-0 h-10 w-10">
769
+ <img class="h-10 w-10 rounded-full avatar-ring-blue" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
770
  </div>
771
  <div class="ml-4">
772
+ <div class="text-sm font-medium text-white">You</div>
773
+ <div class="text-sm text-neon-pink">@trendsetter</div>
774
  </div>
775
  </div>
776
  </td>
777
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-300">Sarcastic Cat Memes</td>
778
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-white font-medium">1,250</td>
779
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-300">
780
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-neon-blue bg-opacity-20 text-neon-blue">
781
  72%
782
  </span>
783
  </td>
784
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-white font-medium">250</td>
785
  </tr>
786
+
787
+ <!-- Rank 3 -->
788
  <tr>
789
+ <td class="px-4 py-4 whitespace-nowrap">
790
+ <div class="w-6 h-6 rounded-full bg-gradient-to-r from-dark-600 to-dark-700 flex items-center justify-center text-gray-300 font-bold text-xs">
791
+ 3
792
+ </div>
793
+ </td>
794
+ <td class="px-4 py-4 whitespace-nowrap">
795
  <div class="flex items-center">
796
  <div class="flex-shrink-0 h-10 w-10">
797
+ <img class="h-10 w-10 rounded-full avatar-ring-purple" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
798
  </div>
799
  <div class="ml-4">
800
+ <div class="text-sm font-medium text-white">Jamie Chen</div>
801
+ <div class="text-sm text-neon-purple">@viralqueen</div>
802
  </div>
803
  </div>
804
  </td>
805
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-300">DIY Fashion Hacks</td>
806
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-white font-medium">4,150</td>
807
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-300">
808
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-neon-yellow bg-opacity-20 text-neon-yellow">
809
  65%
810
  </span>
811
  </td>
812
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-white font-medium">980</td>
813
  </tr>
814
+
815
+ <!-- Rank 4 -->
816
  <tr>
817
+ <td class="px-4 py-4 whitespace-nowrap">
818
+ <div class="w-6 h-6 rounded-full bg-gradient-to-r from-dark-600 to-dark-700 flex items-center justify-center text-gray-300 font-bold text-xs">
819
+ 4
820
+ </div>
821
+ </td>
822
+ <td class="px-4 py-4 whitespace-nowrap">
823
  <div class="flex items-center">
824
  <div class="flex-shrink-0 h-10 w-10">
825
  <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
826
  </div>
827
  <div class="ml-4">
828
+ <div class="text-sm font-medium text-white">Marcus Lee</div>
829
+ <div class="text-sm text-gray-400">@meme_lord</div>
830
  </div>
831
  </div>
832
  </td>
833
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-300">Teacher Memes</td>
834
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-white font-medium">3,780</td>
835
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-300">
836
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-500 bg-opacity-20 text-gray-400">
837
  58%
838
  </span>
839
  </td>
840
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-white font-medium">750</td>
841
  </tr>
842
  </tbody>
843
  </table>
 
846
  </div>
847
 
848
  <!-- Tutorial Modal -->
849
+ <div id="tutorial-modal" class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
850
+ <div class="bg-dark-800 rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border border-dark-700">
851
+ <div class="p-8">
852
+ <div class="flex justify-between items-center mb-6">
853
+ <h3 class="text-3xl font-bold font-display gradient-text">Welcome to Trendsetter Tycoon!</h3>
854
+ <button id="close-tutorial" class="text-gray-400 hover:text-white text-2xl">
855
  <i class="fas fa-times"></i>
856
  </button>
857
  </div>
858
 
859
+ <div class="space-y-6">
860
+ <div class="flex items-start space-x-5">
861
+ <div class="w-14 h-14 rounded-full bg-neon-blue bg-opacity-20 flex items-center justify-center text-neon-blue text-2xl mt-1">
862
  <i class="fas fa-school"></i>
863
  </div>
864
  <div>
865
+ <h4 class="font-bold text-xl text-white mb-2">School Feed</h4>
866
+ <p class="text-gray-300">Discover current trends and unmet desires in your school's social network. Analyze data to form hypotheses about what might go viral next.</p>
867
  </div>
868
  </div>
869
 
870
+ <div class="flex items-start space-x-5">
871
+ <div class="w-14 h-14 rounded-full bg-neon-pink bg-opacity-20 flex items-center justify-center text-neon-pink text-2xl mt-1">
872
  <i class="fas fa-magic"></i>
873
  </div>
874
  <div>
875
+ <h4 class="font-bold text-xl text-white mb-2">Trend Lab</h4>
876
+ <p class="text-gray-300">Build your Minimum Viable Product (MVP) by combining design elements. Use your limited Buzz Points wisely to test your hypothesis.</p>
877
  </div>
878
  </div>
879
 
880
+ <div class="flex items-start space-x-5">
881
+ <div class="w-14 h-14 rounded-full bg-neon-green bg-opacity-20 flex items-center justify-center text-neon-green text-2xl mt-1">
882
  <i class="fas fa-chart-line"></i>
883
  </div>
884
  <div>
885
+ <h4 class="font-bold text-xl text-white mb-2">Trend Analytics</h4>
886
+ <p class="text-gray-300">Measure engagement metrics and audience feedback. Learn from the data to decide whether to pivot your idea or scale it to more students.</p>
887
  </div>
888
  </div>
889
 
890
+ <div class="flex items-start space-x-5">
891
+ <div class="w-14 h-14 rounded-full bg-neon-yellow bg-opacity-20 flex items-center justify-center text-neon-yellow text-2xl mt-1">
892
  <i class="fas fa-trophy"></i>
893
  </div>
894
  <div>
895
+ <h4 class="font-bold text-xl text-white mb-2">Become #1</h4>
896
+ <p class="text-gray-300">Compete against other trendsetters in your school. Gain followers, increase your reputation, and dethrone the current Trend King!</p>
897
  </div>
898
  </div>
899
  </div>
900
 
901
+ <div class="mt-8">
902
+ <button id="start-playing" class="w-full neon-btn bg-gradient-to-r from-neon-pink to-neon-purple text-white py-4 px-6 rounded-xl font-bold text-lg transition">
903
  Start Playing!
904
  </button>
905
  </div>
 
963
 
964
  // Create a new element in the drop zone
965
  const newElement = document.createElement('div');
966
+ newElement.className = 'inline-block p-3 bg-dark-600 rounded-lg m-1';
967
  newElement.innerHTML = data;
968
 
969
  this.innerHTML = '';
 
986
  const schoolFeed = document.querySelector('.trend-card:last-child');
987
  schoolFeed.scrollIntoView({ behavior: 'smooth' });
988
 
989
+ // Create notification
990
+ const notification = document.createElement('div');
991
+ notification.className = 'fixed bottom-5 left-1/2 transform -translate-x-1/2 bg-neon-purple text-white px-5 py-3 rounded-xl flex items-center shadow-lg z-50 animate-float';
992
+ notification.innerHTML = `
993
+ <i class="fas fa-lightbulb mr-2"></i> New trend discovered: "90s Throwback Challenge"
994
+ `;
995
+ document.body.appendChild(notification);
996
+
997
+ setTimeout(() => {
998
+ notification.remove();
999
+ }, 3000);
1000
  } else {
1001
+ // Show error notification
1002
+ const notification = document.createElement('div');
1003
+ notification.className = 'fixed bottom-5 left-1/2 transform -translate-x-1/2 bg-neon-pink text-white px-5 py-3 rounded-xl flex items-center shadow-lg z-50 animate-float';
1004
+ notification.innerHTML = `
1005
+ <i class="fas fa-exclamation-circle mr-2"></i> Not enough Buzz Points!
1006
+ `;
1007
+ document.body.appendChild(notification);
1008
+
1009
+ setTimeout(() => {
1010
+ notification.remove();
1011
+ }, 3000);
1012
  }
1013
  });
1014
 
 
1018
  buzzPointsElement.textContent = buzzPoints;
1019
 
1020
  // Simulate testing MVP
1021
+ const analyticsSection = document.querySelector('.bg-dark-700');
1022
  analyticsSection.scrollIntoView({ behavior: 'smooth' });
1023
 
1024
  // Update analytics with random data
1025
+ document.querySelector('.bg-neon-green').style.width = Math.floor(Math.random() * 30 + 50) + '%';
1026
+ document.querySelector('.bg-neon-blue').style.width = Math.floor(Math.random() * 30 + 50) + '%';
1027
+ document.querySelector('.bg-neon-yellow').style.width = Math.floor(Math.random() * 30) + '%';
1028
 
1029
  // Random outcome
1030
  if(Math.random() > 0.3) {
 
1033
  followers += gain;
1034
  followersElement.textContent = followers.toLocaleString();
1035
 
1036
+ // Show success notification
1037
+ const notification = document.createElement('div');
1038
+ notification.className = 'fixed bottom-5 left-1/2 transform -translate-x-1/2 bg-neon-green text-dark-900 px-5 py-3 rounded-xl flex items-center shadow-lg z-50 animate-float';
1039
+ notification.innerHTML = `
1040
+ <i class="fas fa-check-circle mr-2"></i> Success! +${gain} followers!
1041
+ `;
1042
+ document.body.appendChild(notification);
1043
+
1044
+ setTimeout(() => {
1045
+ notification.remove();
1046
+ }, 3000);
1047
  } else {
1048
  // Failure
1049
+ const notification = document.createElement('div');
1050
+ notification.className = 'fixed bottom-5 left-1/2 transform -translate-x-1/2 bg-neon-pink text-white px-5 py-3 rounded-xl flex items-center shadow-lg z-50 animate-float';
1051
+ notification.innerHTML = `
1052
+ <i class="fas fa-exclamation-triangle mr-2"></i> Your trend needs work - check feedback!
1053
+ `;
1054
+ document.body.appendChild(notification);
1055
+
1056
+ setTimeout(() => {
1057
+ notification.remove();
1058
+ }, 3000);
1059
  }
1060
  } else {
1061
+ // Show error notification
1062
+ const notification = document.createElement('div');
1063
+ notification.className = 'fixed bottom-5 left-1/2 transform -translate-x-1/2 bg-neon-pink text-white px-5 py-3 rounded-xl flex items-center shadow-lg z-50 animate-float';
1064
+ notification.innerHTML = `
1065
+ <i class="fas fa-bolt mr-2"></i> Need more Buzz Points!
1066
+ `;
1067
+ document.body.appendChild(notification);
1068
+
1069
+ setTimeout(() => {
1070
+ notification.remove();
1071
+ }, 3000);
1072
  }
1073
  });
1074
 
 
1077
  buzzPoints -= 30;
1078
  buzzPointsElement.textContent = buzzPoints;
1079
 
1080
+ // Show notification
1081
+ const notification = document.createElement('div');
1082
+ notification.className = 'fixed bottom-5 left-1/2 transform -translate-x-1/2 bg-neon-yellow text-dark-900 px-5 py-3 rounded-xl flex items-center shadow-lg z-50 animate-float';
1083
+ notification.innerHTML = `
1084
+ <i class="fas fa-random mr-2"></i> Trend pivoted! Try testing your new version.
1085
+ `;
1086
+ document.body.appendChild(notification);
1087
+
1088
+ setTimeout(() => {
1089
+ notification.remove();
1090
+ }, 3000);
1091
  } else {
1092
+ // Show error notification
1093
+ const notification = document.createElement('div');
1094
+ notification.className = 'fixed bottom-5 left-1/2 transform -translate-x-1/2 bg-neon-pink text-white px-5 py-3 rounded-xl flex items-center shadow-lg z-50 animate-float';
1095
+ notification.innerHTML = `
1096
+ <i class="fas fa-exclamation-circle mr-2"></i> Not enough Buzz to pivot!
1097
+ `;
1098
+ document.body.appendChild(notification);
1099
+
1100
+ setTimeout(() => {
1101
+ notification.remove();
1102
+ }, 3000);
1103
  }
1104
  });
1105
 
 
1112
  followers += gain;
1113
  followersElement.textContent = followers.toLocaleString();
1114
 
1115
+ // Show success notification
1116
+ const notification = document.createElement('div');
1117
+ notification.className = 'fixed bottom-5 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-neon-green to-neon-blue text-dark-900 px-5 py-3 rounded-xl flex items-center shadow-lg z-50 animate-float';
1118
+ notification.innerHTML = `
1119
+ <i class="fas fa-fire mr-2"></i> Going viral! +${gain} followers!
1120
+ `;
1121
+ document.body.appendChild(notification);
1122
+
1123
+ setTimeout(() => {
1124
+ notification.remove();
1125
+ }, 3000);
1126
  } else {
1127
+ // Show error notification
1128
+ const notification = document.createElement('div');
1129
+ notification.className = 'fixed bottom-5 left-1/2 transform -translate-x-1/2 bg-neon-pink text-white px-5 py-3 rounded-xl flex items-center shadow-lg z-50 animate-float';
1130
+ notification.innerHTML = `
1131
+ <i class="fas fa-bolt mr-2"></i> Need more Buzz to scale!
1132
+ `;
1133
+ document.body.appendChild(notification);
1134
+
1135
+ setTimeout(() => {
1136
+ notification.remove();
1137
+ }, 3000);
1138
  }
1139
  });
1140
  });