Hugging Face's logo

Spaces:
sky-meilin
/
Anycoder
Running

App Files Community
sky-meilin commited on
Commit
ce2b1ef
·
verified ·
1 Parent(s): f8ad909

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +539 -19
index.html CHANGED
@@ -1,19 +1,539 @@
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>Start - Interactive Onboarding</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ overflow: hidden;
14
+ background-color: #0f172a;
15
+ }
16
+
17
+ /* Custom Animations */
18
+ @keyframes float {
19
+ 0%, 100% { transform: translateY(0px); }
20
+ 50% { transform: translateY(-20px); }
21
+ }
22
+
23
+ @keyframes pulse-glow {
24
+ 0%, 100% { box-shadow: 0 0 20px rgba(56, 189, 248, 0.5); }
25
+ 50% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.8); }
26
+ }
27
+
28
+ @keyframes slide-up-fade {
29
+ from { opacity: 0; transform: translateY(20px); }
30
+ to { opacity: 1; transform: translateY(0); }
31
+ }
32
+
33
+ @keyframes gradient-shift {
34
+ 0% { background-position: 0% 50%; }
35
+ 50% { background-position: 100% 50%; }
36
+ 100% { background-position: 0% 50%; }
37
+ }
38
+
39
+ .animate-float { animation: float 6s ease-in-out infinite; }
40
+ .animate-float-delayed { animation: float 6s ease-in-out 3s infinite; }
41
+
42
+ .glass-panel {
43
+ background: rgba(255, 255, 255, 0.05);
44
+ backdrop-filter: blur(16px);
45
+ -webkit-backdrop-filter: blur(16px);
46
+ border: 1px solid rgba(255, 255, 255, 0.1);
47
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
48
+ }
49
+
50
+ .gradient-text {
51
+ background: linear-gradient(135deg, #60a5fa 0%, #c084fc 50%, #f472b6 100%);
52
+ background-size: 200% auto;
53
+ -webkit-background-clip: text;
54
+ -webkit-text-fill-color: transparent;
55
+ animation: gradient-shift 5s ease infinite;
56
+ }
57
+
58
+ .step-transition {
59
+ transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
60
+ }
61
+
62
+ /* Custom Scrollbar for content areas if needed */
63
+ ::-webkit-scrollbar { width: 6px; }
64
+ ::-webkit-scrollbar-track { background: transparent; }
65
+ ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
66
+
67
+ .selection-card {
68
+ transition: all 0.3s ease;
69
+ }
70
+ .selection-card:hover {
71
+ transform: translateY(-4px);
72
+ background: rgba(255, 255, 255, 0.1);
73
+ border-color: rgba(255, 255, 255, 0.3);
74
+ }
75
+ .selection-card.selected {
76
+ background: rgba(56, 189, 248, 0.15);
77
+ border-color: #38bdf8;
78
+ box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
79
+ }
80
+
81
+ .loader-bar {
82
+ transition: width 1s ease-in-out;
83
+ }
84
+ </style>
85
+ </head>
86
+ <body class="text-white h-screen w-screen relative">
87
+
88
+ <!-- Background Canvas for Particles -->
89
+ <canvas id="bgCanvas" class="absolute inset-0 z-0"></canvas>
90
+
91
+ <!-- Overlay Gradient -->
92
+ <div class="absolute inset-0 z-0 bg-gradient-to-b from-slate-900/80 via-slate-900/50 to-slate-900/90 pointer-events-none"></div>
93
+
94
+ <!-- Main Application Container -->
95
+ <main class="relative z-10 h-full w-full flex flex-col items-center justify-center p-6">
96
+
97
+ <!-- Header / Logo Area -->
98
+ <header class="absolute top-8 left-0 w-full flex justify-between items-center px-8 md:px-16">
99
+ <div class="flex items-center gap-3 group cursor-pointer">
100
+ <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
101
+ <i class="fa-solid fa-rocket text-white text-lg"></i>
102
+ </div>
103
+ <span class="text-xl font-bold tracking-tight">Nexus<span class="text-blue-400">Start</span></span>
104
+ </div>
105
+ <div class="hidden md:flex items-center gap-4 text-sm text-slate-400">
106
+ <span>v2.4.0</span>
107
+ <div class="h-4 w-px bg-slate-700"></div>
108
+ <span class="hover:text-white cursor-pointer transition-colors">Help</span>
109
+ </div>
110
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-slate-500 hover:text-blue-400 transition-colors flex items-center gap-2">
111
+ <i class="fa-solid fa-code"></i> Built with anycoder
112
+ </a>
113
+ </header>
114
+
115
+ <!-- Progress Bar (Top Center) -->
116
+ <div class="absolute top-8 left-1/2 -translate-x-1/2 w-64 h-1 bg-slate-800 rounded-full overflow-hidden hidden md:block">
117
+ <div id="progressBar" class="h-full bg-gradient-to-r from-blue-500 to-purple-500 w-0 loader-bar"></div>
118
+ </div>
119
+
120
+ <!-- Content Area -->
121
+ <div id="app-container" class="w-full max-w-4xl h-[600px] relative perspective-1000">
122
+
123
+ <!-- STEP 1: Hero / Welcome -->
124
+ <section id="step-1" class="step-section absolute inset-0 flex flex-col items-center justify-center text-center step-transition opacity-100 translate-y-0">
125
+ <div class="relative mb-8 animate-float">
126
+ <div class="absolute inset-0 bg-blue-500 blur-3xl opacity-20 rounded-full"></div>
127
+ <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop"
128
+ alt="Abstract 3D"
129
+ class="w-48 h-48 object-cover rounded-full border-4 border-white/10 shadow-2xl relative z-10 mask-image-gradient">
130
+ </div>
131
+
132
+ <h1 class="text-5xl md:text-7xl font-extrabold mb-6 tracking-tight">
133
+ Ready to <span class="gradient-text">Start?</span>
134
+ </h1>
135
+ <p class="text-slate-400 text-lg md:text-xl max-w-lg mb-10 leading-relaxed">
136
+ Experience the next generation of digital workflow. Seamless, powerful, and designed for creators.
137
+ </p>
138
+
139
+ <button onclick="app.nextStep()" class="group relative px-8 py-4 bg-white text-slate-900 rounded-full font-bold text-lg overflow-hidden transition-all hover:scale-105 hover:shadow-[0_0_40px_rgba(255,255,255,0.3)]">
140
+ <span class="relative z-10 flex items-center gap-2">
141
+ Get Started <i class="fa-solid fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
142
+ </span>
143
+ <div class="absolute inset-0 bg-gradient-to-r from-blue-200 to-purple-200 opacity-0 group-hover:opacity-100 transition-opacity"></div>
144
+ </button>
145
+ </section>
146
+
147
+ <!-- STEP 2: Role Selection -->
148
+ <section id="step-2" class="step-section absolute inset-0 flex flex-col items-center justify-center step-transition opacity-0 translate-y-10 pointer-events-none">
149
+ <h2 class="text-3xl md:text-4xl font-bold mb-2">What describes you best?</h2>
150
+ <p class="text-slate-400 mb-10">We'll customize your dashboard based on your role.</p>
151
+
152
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full px-4">
153
+ <!-- Card 1 -->
154
+ <div class="selection-card glass-panel p-6 rounded-2xl cursor-pointer border border-white/5" onclick="app.selectRole('developer', this)">
155
+ <div class="w-12 h-12 rounded-lg bg-blue-500/20 text-blue-400 flex items-center justify-center mb-4 text-xl">
156
+ <i class="fa-solid fa-code"></i>
157
+ </div>
158
+ <h3 class="text-xl font-bold mb-2">Developer</h3>
159
+ <p class="text-sm text-slate-400">Building the future with code, APIs, and logic.</p>
160
+ </div>
161
+ <!-- Card 2 -->
162
+ <div class="selection-card glass-panel p-6 rounded-2xl cursor-pointer border border-white/5" onclick="app.selectRole('designer', this)">
163
+ <div class="w-12 h-12 rounded-lg bg-purple-500/20 text-purple-400 flex items-center justify-center mb-4 text-xl">
164
+ <i class="fa-solid fa-pen-nib"></i>
165
+ </div>
166
+ <h3 class="text-xl font-bold mb-2">Designer</h3>
167
+ <p class="text-sm text-slate-400">Crafting visual experiences and user interfaces.</p>
168
+ </div>
169
+ <!-- Card 3 -->
170
+ <div class="selection-card glass-panel p-6 rounded-2xl cursor-pointer border border-white/5" onclick="app.selectRole('manager', this)">
171
+ <div class="w-12 h-12 rounded-lg bg-pink-500/20 text-pink-400 flex items-center justify-center mb-4 text-xl">
172
+ <i class="fa-solid fa-chart-line"></i>
173
+ </div>
174
+ <h3 class="text-xl font-bold mb-2">Manager</h3>
175
+ <p class="text-sm text-slate-400">Leading teams, tracking progress, and strategy.</p>
176
+ </div>
177
+ </div>
178
+ </section>
179
+
180
+ <!-- STEP 3: Interests / Features -->
181
+ <section id="step-3" class="step-section absolute inset-0 flex flex-col items-center justify-center step-transition opacity-0 translate-y-10 pointer-events-none">
182
+ <h2 class="text-3xl md:text-4xl font-bold mb-2">Select your interests</h2>
183
+ <p class="text-slate-400 mb-8">Pick at least 2 topics to personalize your feed.</p>
184
+
185
+ <div class="flex flex-wrap justify-center gap-3 max-w-2xl mb-10" id="tags-container">
186
+ <!-- Tags generated by JS -->
187
+ </div>
188
+
189
+ <button id="btn-step-3" onclick="app.nextStep()" class="px-8 py-3 bg-slate-700 text-slate-400 rounded-full font-semibold transition-all cursor-not-allowed" disabled>
190
+ Continue
191
+ </button>
192
+ </section>
193
+
194
+ <!-- STEP 4: Processing / Loading -->
195
+ <section id="step-4" class="step-section absolute inset-0 flex flex-col items-center justify-center step-transition opacity-0 translate-y-10 pointer-events-none">
196
+ <div class="relative w-32 h-32 mb-8">
197
+ <div class="absolute inset-0 border-4 border-slate-700 rounded-full"></div>
198
+ <div class="absolute inset-0 border-4 border-t-blue-500 border-r-transparent border-b-purple-500 border-l-transparent rounded-full animate-spin"></div>
199
+ <div class="absolute inset-0 flex items-center justify-center text-2xl font-bold" id="loading-percentage">0%</div>
200
+ </div>
201
+ <h2 class="text-2xl font-bold mb-2 animate-pulse">Setting up your workspace...</h2>
202
+ <p class="text-slate-400 text-sm" id="loading-text">Initializing core modules...</p>
203
+ </section>
204
+
205
+ <!-- STEP 5: Success / Dashboard Preview -->
206
+ <section id="step-5" class="step-section absolute inset-0 flex flex-col items-center justify-center step-transition opacity-0 translate-y-10 pointer-events-none scale-95">
207
+ <div class="glass-panel p-8 rounded-3xl border border-white/10 shadow-2xl max-w-md w-full text-center relative overflow-hidden">
208
+ <!-- Confetti Canvas Layer inside card -->
209
+ <canvas id="confettiCanvas" class="absolute inset-0 pointer-events-none z-0"></canvas>
210
+
211
+ <div class="relative z-10">
212
+ <div class="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6 shadow-[0_0_30px_rgba(34,197,94,0.5)] animate-[bounce_1s_infinite]">
213
+ <i class="fa-solid fa-check text-3xl text-white"></i>
214
+ </div>
215
+ <h2 class="text-3xl font-bold mb-2">You're all set!</h2>
216
+ <p class="text-slate-300 mb-8">Welcome aboard, <span id="user-role-display" class="text-blue-400 font-semibold">Creator</span>.</p>
217
+
218
+ <div class="space-y-3">
219
+ <button onclick="location.reload()" class="w-full py-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl font-bold hover:shadow-lg hover:scale-[1.02] transition-all">
220
+ Launch Dashboard
221
+ </button>
222
+ <button onclick="location.reload()" class="w-full py-3 bg-transparent border border-white/10 rounded-xl font-medium hover:bg-white/5 transition-all text-slate-400 hover:text-white">
223
+ Restart Demo
224
+ </button>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </section>
229
+
230
+ </div>
231
+
232
+ <!-- Navigation Controls -->
233
+ <div class="absolute bottom-8 flex gap-4">
234
+ <button id="btn-prev" onclick="app.prevStep()" class="w-12 h-12 rounded-full glass-panel flex items-center justify-center hover:bg-white/10 transition-all opacity-0 pointer-events-none">
235
+ <i class="fa-solid fa-arrow-left"></i>
236
+ </button>
237
+ <div class="flex gap-2 items-center" id="dots-container">
238
+ <div class="w-2 h-2 rounded-full bg-white transition-all duration-300"></div>
239
+ <div class="w-2 h-2 rounded-full bg-slate-600 transition-all duration-300"></div>
240
+ <div class="w-2 h-2 rounded-full bg-slate-600 transition-all duration-300"></div>
241
+ <div class="w-2 h-2 rounded-full bg-slate-600 transition-all duration-300"></div>
242
+ <div class="w-2 h-2 rounded-full bg-slate-600 transition-all duration-300"></div>
243
+ </div>
244
+ </div>
245
+
246
+ </main>
247
+
248
+ <script>
249
+ /**
250
+ * Application Logic
251
+ */
252
+ const app = {
253
+ currentStep: 1,
254
+ totalSteps: 5,
255
+ selectedRole: null,
256
+ selectedTags: new Set(),
257
+
258
+ // Data for Step 3
259
+ tags: [
260
+ "UI/UX Design", "Machine Learning", "Web3", "Mobile Dev",
261
+ "DevOps", "Marketing", "SaaS", "E-commerce", "Open Source",
262
+ "Cloud Computing", "Data Science", "Cybersecurity"
263
+ ],
264
+
265
+ init() {
266
+ this.renderTags();
267
+ this.initCanvas();
268
+ this.updateUI();
269
+ },
270
+
271
+ nextStep() {
272
+ if (this.currentStep < this.totalSteps) {
273
+ this.transition(this.currentStep, this.currentStep + 1);
274
+ this.currentStep++;
275
+ this.updateUI();
276
+
277
+ if (this.currentStep === 4) this.simulateLoading();
278
+ if (this.currentStep === 5) this.triggerConfetti();
279
+ }
280
+ },
281
+
282
+ prevStep() {
283
+ if (this.currentStep > 1) {
284
+ this.transition(this.currentStep, this.currentStep - 1);
285
+ this.currentStep--;
286
+ this.updateUI();
287
+ }
288
+ },
289
+
290
+ transition(from, to) {
291
+ const fromEl = document.getElementById(`step-${from}`);
292
+ const toEl = document.getElementById(`step-${to}`);
293
+
294
+ // Animate Out
295
+ fromEl.style.opacity = '0';
296
+ fromEl.style.transform = 'translateY(-20px) scale(0.95)';
297
+ fromEl.style.pointerEvents = 'none';
298
+
299
+ // Animate In
300
+ setTimeout(() => {
301
+ toEl.style.opacity = '1';
302
+ toEl.style.transform = 'translateY(0) scale(1)';
303
+ toEl.style.pointerEvents = 'auto';
304
+ }, 300);
305
+ },
306
+
307
+ updateUI() {
308
+ // Progress Bar
309
+ const progress = ((this.currentStep - 1) / (this.totalSteps - 1)) * 100;
310
+ document.getElementById('progressBar').style.width = `${progress}%`;
311
+
312
+ // Prev Button
313
+ const prevBtn = document.getElementById('btn-prev');
314
+ if (this.currentStep > 1 && this.currentStep < 5) {
315
+ prevBtn.style.opacity = '1';
316
+ prevBtn.style.pointerEvents = 'auto';
317
+ } else {
318
+ prevBtn.style.opacity = '0';
319
+ prevBtn.style.pointerEvents = 'none';
320
+ }
321
+
322
+ // Dots
323
+ const dots = document.getElementById('dots-container').children;
324
+ Array.from(dots).forEach((dot, index) => {
325
+ if (index + 1 === this.currentStep) {
326
+ dot.classList.remove('bg-slate-600');
327
+ dot.classList.add('bg-white', 'scale-125');
328
+ } else {
329
+ dot.classList.add('bg-slate-600');
330
+ dot.classList.remove('bg-white', 'scale-125');
331
+ }
332
+ });
333
+ },
334
+
335
+ selectRole(role, element) {
336
+ this.selectedRole = role;
337
+
338
+ // Visual selection
339
+ document.querySelectorAll('.selection-card').forEach(el => el.classList.remove('selected'));
340
+ element.classList.add('selected');
341
+
342
+ // Auto advance after short delay
343
+ setTimeout(() => this.nextStep(), 600);
344
+ },
345
+
346
+ renderTags() {
347
+ const container = document.getElementById('tags-container');
348
+ container.innerHTML = this.tags.map(tag => `
349
+ <button class="px-4 py-2 rounded-full border border-slate-600 text-slate-300 text-sm hover:border-blue-400 hover:text-blue-400 transition-all select-none"
350
+ onclick="app.toggleTag(this, '${tag}')">
351
+ ${tag}
352
+ </button>
353
+ `).join('');
354
+ },
355
+
356
+ toggleTag(btn, tag) {
357
+ if (this.selectedTags.has(tag)) {
358
+ this.selectedTags.delete(tag);
359
+ btn.classList.remove('bg-blue-500', 'border-blue-500', 'text-white');
360
+ btn.classList.add('border-slate-600', 'text-slate-300');
361
+ } else {
362
+ this.selectedTags.add(tag);
363
+ btn.classList.add('bg-blue-500', 'border-blue-500', 'text-white');
364
+ btn.classList.remove('border-slate-600', 'text-slate-300');
365
+ }
366
+ this.validateStep3();
367
+ },
368
+
369
+ validateStep3() {
370
+ const btn = document.getElementById('btn-step-3');
371
+ if (this.selectedTags.size >= 2) {
372
+ btn.removeAttribute('disabled');
373
+ btn.classList.remove('bg-slate-700', 'text-slate-400', 'cursor-not-allowed');
374
+ btn.classList.add('bg-white', 'text-slate-900', 'hover:scale-105', 'shadow-lg');
375
+ } else {
376
+ btn.setAttribute('disabled', 'true');
377
+ btn.classList.add('bg-slate-700', 'text-slate-400', 'cursor-not-allowed');
378
+ btn.classList.remove('bg-white', 'text-slate-900', 'hover:scale-105', 'shadow-lg');
379
+ }
380
+ },
381
+
382
+ simulateLoading() {
383
+ const percentageEl = document.getElementById('loading-percentage');
384
+ const textEl = document.getElementById('loading-text');
385
+ let progress = 0;
386
+
387
+ const texts = [
388
+ "Initializing core modules...",
389
+ "Loading user preferences...",
390
+ "Compiling assets...",
391
+ "Connecting to server...",
392
+ "Finalizing setup..."
393
+ ];
394
+
395
+ const interval = setInterval(() => {
396
+ progress += Math.floor(Math.random() * 5) + 1;
397
+ if (progress > 100) progress = 100;
398
+
399
+ percentageEl.innerText = `${progress}%`;
400
+
401
+ // Update text based on progress
402
+ const textIndex = Math.floor((progress / 100) * texts.length);
403
+ if (texts[textIndex]) textEl.innerText = texts[textIndex];
404
+
405
+ if (progress === 100) {
406
+ clearInterval(interval);
407
+ setTimeout(() => this.nextStep(), 500);
408
+ }
409
+ }, 50);
410
+ },
411
+
412
+ triggerConfetti() {
413
+ const canvas = document.getElementById('confettiCanvas');
414
+ const ctx = canvas.getContext('2d');
415
+ canvas.width = canvas.parentElement.offsetWidth;
416
+ canvas.height = canvas.parentElement.offsetHeight;
417
+
418
+ const particles = [];
419
+ const colors = ['#60a5fa', '#c084fc', '#f472b6', '#ffffff'];
420
+
421
+ for (let i = 0; i < 100; i++) {
422
+ particles.push({
423
+ x: canvas.width / 2,
424
+ y: canvas.height / 2,
425
+ vx: (Math.random() - 0.5) * 10,
426
+ vy: (Math.random() - 0.5) * 10 - 5,
427
+ size: Math.random() * 5 + 2,
428
+ color: colors[Math.floor(Math.random() * colors.length)],
429
+ life: 100
430
+ });
431
+ }
432
+
433
+ const animate = () => {
434
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
435
+ let active = false;
436
+
437
+ particles.forEach(p => {
438
+ if (p.life > 0) {
439
+ active = true;
440
+ p.x += p.vx;
441
+ p.y += p.vy;
442
+ p.vy += 0.2; // gravity
443
+ p.life--;
444
+ p.size *= 0.96;
445
+
446
+ ctx.fillStyle = p.color;
447
+ ctx.beginPath();
448
+ ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
449
+ ctx.fill();
450
+ }
451
+ });
452
+
453
+ if (active) requestAnimationFrame(animate);
454
+ };
455
+ animate();
456
+
457
+ // Update role text
458
+ const roleText = this.selectedRole ? this.selectedRole.charAt(0).toUpperCase() + this.selectedRole.slice(1) : "Creator";
459
+ document.getElementById('user-role-display').innerText = roleText;
460
+ },
461
+
462
+ initCanvas() {
463
+ // Background Particle Network
464
+ const canvas = document.getElementById('bgCanvas');
465
+ const ctx = canvas.getContext('2d');
466
+
467
+ let width, height;
468
+ let particles = [];
469
+
470
+ const resize = () => {
471
+ width = window.innerWidth;
472
+ height = window.innerHeight;
473
+ canvas.width = width;
474
+ canvas.height = height;
475
+ createParticles();
476
+ };
477
+
478
+ const createParticles = () => {
479
+ particles = [];
480
+ const count = Math.floor((width * height) / 15000);
481
+ for (let i = 0; i < count; i++) {
482
+ particles.push({
483
+ x: Math.random() * width,
484
+ y: Math.random() * height,
485
+ vx: (Math.random() - 0.5) * 0.5,
486
+ vy: (Math.random() - 0.5) * 0.5,
487
+ size: Math.random() * 2
488
+ });
489
+ }
490
+ };
491
+
492
+ const animate = () => {
493
+ ctx.clearRect(0, 0, width, height);
494
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
495
+
496
+ particles.forEach((p, i) => {
497
+ p.x += p.vx;
498
+ p.y += p.vy;
499
+
500
+ if (p.x < 0 || p.x > width) p.vx *= -1;
501
+ if (p.y < 0 || p.y > height) p.vy *= -1;
502
+
503
+ ctx.beginPath();
504
+ ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
505
+ ctx.fill();
506
+
507
+ // Connections
508
+ for (let j = i + 1; j < particles.length; j++) {
509
+ const p2 = particles[j];
510
+ const dx = p.x - p2.x;
511
+ const dy = p.y - p2.y;
512
+ const dist = Math.sqrt(dx*dx + dy*dy);
513
+
514
+ if (dist < 100) {
515
+ ctx.strokeStyle = `rgba(255, 255, 255, ${0.1 - dist/1000})`;
516
+ ctx.lineWidth = 1;
517
+ ctx.beginPath();
518
+ ctx.moveTo(p.x, p.y);
519
+ ctx.lineTo(p2.x, p2.y);
520
+ ctx.stroke();
521
+ }
522
+ }
523
+ });
524
+ requestAnimationFrame(animate);
525
+ };
526
+
527
+ window.addEventListener('resize', resize);
528
+ resize();
529
+ animate();
530
+ }
531
+ };
532
+
533
+ // Initialize on load
534
+ document.addEventListener('DOMContentLoaded', () => {
535
+ app.init();
536
+ });
537
+ </script>
538
+ </body>
539
+ </html>