Hugging Face's logo

Spaces:
MoShow
/
whip
Running

App Files Community
MoShow commited on
Commit
922e8e5
·
verified ·
1 Parent(s): 8fe9b70

optimize app - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +827 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Whip
3
- emoji: 📈
4
- colorFrom: pink
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: whip
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,827 @@
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, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>MoStar Industries - AI Platform</title>
7
+ <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" as="script">
8
+ <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" as="style">
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
10
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap');
13
+
14
+ :root {
15
+ --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16
+ --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
17
+ --dark-gradient: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 100%);
18
+ --neon-blue: #00f3ff;
19
+ --neon-pink: #ff006e;
20
+ --neon-green: #39ff14;
21
+ --glass-bg: rgba(255, 255, 255, 0.1);
22
+ --glass-border: rgba(255, 255, 255, 0.2);
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Inter', sans-serif;
33
+ background: var(--dark-gradient);
34
+ color: #fff;
35
+ min-height: 100vh;
36
+ overflow-x: hidden;
37
+ position: relative;
38
+ }
39
+
40
+ .bg-animation {
41
+ position: fixed;
42
+ top: 0;
43
+ left: 0;
44
+ width: 100%;
45
+ height: 100%;
46
+ z-index: -1;
47
+ background: radial-gradient(circle at 20% 50%, var(--neon-blue) 0%, transparent 50%),
48
+ radial-gradient(circle at 80% 20%, var(--neon-pink) 0%, transparent 50%),
49
+ radial-gradient(circle at 40% 80%, var(--neon-green) 0%, transparent 50%);
50
+ animation: bgPulse 8s ease-in-out infinite alternate;
51
+ opacity: 0.1;
52
+ }
53
+
54
+ @keyframes bgPulse {
55
+ 0% { transform: scale(1) rotate(0deg); }
56
+ 100% { transform: scale(1.1) rotate(5deg); }
57
+ }
58
+
59
+ .particles {
60
+ position: fixed;
61
+ top: 0;
62
+ left: 0;
63
+ width: 100%;
64
+ height: 100%;
65
+ z-index: -1;
66
+ pointer-events: none;
67
+ }
68
+
69
+ .particle {
70
+ position: absolute;
71
+ width: 2px;
72
+ height: 2px;
73
+ background: var(--neon-blue);
74
+ border-radius: 50%;
75
+ animation: float 6s ease-in-out infinite;
76
+ box-shadow: 0 0 10px var(--neon-blue);
77
+ }
78
+
79
+ @keyframes float {
80
+ 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0; }
81
+ 50% { transform: translateY(-100vh) rotate(360deg); opacity: 1; }
82
+ }
83
+
84
+ .container {
85
+ max-width: 1400px;
86
+ margin: 0 auto;
87
+ padding: 20px;
88
+ position: relative;
89
+ z-index: 1;
90
+ }
91
+
92
+ .header {
93
+ text-align: center;
94
+ margin-bottom: 40px;
95
+ position: relative;
96
+ }
97
+
98
+ .header::before {
99
+ content: '';
100
+ position: absolute;
101
+ top: 50%;
102
+ left: 50%;
103
+ transform: translate(-50%, -50%);
104
+ width: 200px;
105
+ height: 200px;
106
+ background: radial-gradient(circle, var(--neon-blue) 0%, transparent 70%);
107
+ border-radius: 50%;
108
+ animation: headerGlow 3s ease-in-out infinite alternate;
109
+ z-index: -1;
110
+ }
111
+
112
+ @keyframes headerGlow {
113
+ 0% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
114
+ 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.2); }
115
+ }
116
+
117
+ .header h1 {
118
+ font-family: 'Orbitron', monospace;
119
+ font-size: clamp(2.5em, 6vw, 4em);
120
+ font-weight: 900;
121
+ margin-bottom: 15px;
122
+ background: linear-gradient(135deg, var(--neon-blue), var(--neon-pink), var(--neon-green));
123
+ background-size: 300% 300%;
124
+ -webkit-background-clip: text;
125
+ -webkit-text-fill-color: transparent;
126
+ background-clip: text;
127
+ animation: gradientShift 4s ease-in-out infinite;
128
+ text-shadow: 0 0 30px rgba(0, 243, 255, 0.5);
129
+ }
130
+
131
+ @keyframes gradientShift {
132
+ 0%, 100% { background-position: 0% 50%; }
133
+ 50% { background-position: 100% 50%; }
134
+ }
135
+
136
+ .header p {
137
+ font-size: 1.3em;
138
+ opacity: 0.9;
139
+ font-weight: 300;
140
+ letter-spacing: 1px;
141
+ }
142
+
143
+ .glass-card {
144
+ background: var(--glass-bg);
145
+ backdrop-filter: blur(20px);
146
+ -webkit-backdrop-filter: blur(20px);
147
+ border: 1px solid var(--glass-border);
148
+ will-change: transform, box-shadow;
149
+ border-radius: 20px;
150
+ padding: 30px;
151
+ margin-bottom: 25px;
152
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
153
+ transition: all 0.4s ease;
154
+ position: relative;
155
+ overflow: hidden;
156
+ }
157
+
158
+ .glass-card::before {
159
+ content: '';
160
+ position: absolute;
161
+ top: 0;
162
+ left: -100%;
163
+ width: 100%;
164
+ height: 100%;
165
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
166
+ transition: left 0.5s;
167
+ }
168
+
169
+ .glass-card:hover::before {
170
+ left: 100%;
171
+ }
172
+
173
+ .glass-card:hover {
174
+ transform: translateY(-10px);
175
+ box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
176
+ border-color: var(--neon-blue);
177
+ }
178
+
179
+ .character-container {
180
+ display: flex;
181
+ justify-content: center;
182
+ margin-bottom: 20px;
183
+ }
184
+
185
+ .character {
186
+ width: 100px;
187
+ height: 100px;
188
+ min-width: 100px;
189
+ background: linear-gradient(135deg, var(--neon-blue), var(--neon-pink));
190
+ will-change: transform;
191
+ touch-action: manipulation;
192
+ border-radius: 50%;
193
+ position: relative;
194
+ animation: characterFloat 3s ease-in-out infinite;
195
+ cursor: pointer;
196
+ transition: all 0.3s ease;
197
+ }
198
+
199
+ @keyframes characterFloat {
200
+ 0%, 100% { transform: translateY(0px); }
201
+ 50% { transform: translateY(-10px); }
202
+ }
203
+
204
+ .character:hover {
205
+ transform: scale(1.1);
206
+ box-shadow: 0 0 40px var(--neon-blue);
207
+ }
208
+
209
+ .character-face {
210
+ position: absolute;
211
+ top: 50%;
212
+ left: 50%;
213
+ transform: translate(-50%, -50%);
214
+ width: 80px;
215
+ height: 80px;
216
+ }
217
+
218
+ .character-eyes {
219
+ display: flex;
220
+ justify-content: space-between;
221
+ margin-bottom: 15px;
222
+ padding: 0 15px;
223
+ }
224
+
225
+ .eye {
226
+ width: 12px;
227
+ height: 12px;
228
+ background: #fff;
229
+ border-radius: 50%;
230
+ transition: all 0.3s ease;
231
+ position: relative;
232
+ }
233
+
234
+ .eye::after {
235
+ content: '';
236
+ position: absolute;
237
+ top: 2px;
238
+ left: 2px;
239
+ width: 8px;
240
+ height: 8px;
241
+ background: #333;
242
+ border-radius: 50%;
243
+ transition: all 0.3s ease;
244
+ }
245
+
246
+ .eye.closed {
247
+ height: 2px;
248
+ background: #fff;
249
+ border-radius: 2px;
250
+ }
251
+
252
+ .eye.closed::after {
253
+ display: none;
254
+ }
255
+
256
+ .character-mouth {
257
+ width: 20px;
258
+ height: 10px;
259
+ border: 2px solid #fff;
260
+ border-top: none;
261
+ border-radius: 0 0 20px 20px;
262
+ margin: 0 auto;
263
+ transition: all 0.3s ease;
264
+ }
265
+
266
+ .character.happy .character-mouth {
267
+ border-color: var(--neon-green);
268
+ box-shadow: 0 0 10px var(--neon-green);
269
+ }
270
+
271
+ .form-container {
272
+ position: relative;
273
+ }
274
+
275
+ .form-group {
276
+ margin-bottom: 25px;
277
+ position: relative;
278
+ }
279
+
280
+ .form-group label {
281
+ display: block;
282
+ margin-bottom: 8px;
283
+ font-weight: 600;
284
+ color: var(--neon-blue);
285
+ font-size: 0.9em;
286
+ letter-spacing: 1px;
287
+ text-transform: uppercase;
288
+ }
289
+
290
+ .form-control {
291
+ width: 100%;
292
+ padding: 12px 15px;
293
+ background: rgba(255, 255, 255, 0.05);
294
+ border: 2px solid rgba(255, 255, 255, 0.1);
295
+ border-radius: 15px;
296
+ color: #fff;
297
+ font-size: 1em;
298
+ transition: all 0.3s ease;
299
+ backdrop-filter: blur(10px);
300
+ }
301
+
302
+ .form-control:focus {
303
+ outline: none;
304
+ border-color: var(--neon-blue);
305
+ box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
306
+ background: rgba(255, 255, 255, 0.1);
307
+ }
308
+
309
+ .form-control::placeholder {
310
+ color: rgba(255, 255, 255, 0.5);
311
+ }
312
+
313
+ .password-wrapper {
314
+ position: relative;
315
+ }
316
+
317
+ .password-toggle {
318
+ position: absolute;
319
+ right: 15px;
320
+ top: 50%;
321
+ transform: translateY(-50%);
322
+ color: var(--neon-blue);
323
+ cursor: pointer;
324
+ font-size: 1.2em;
325
+ transition: all 0.3s ease;
326
+ }
327
+
328
+ .password-toggle:hover {
329
+ color: var(--neon-pink);
330
+ }
331
+
332
+ .btn {
333
+ background: linear-gradient(135deg, var(--neon-blue), var(--neon-pink));
334
+ color: #fff;
335
+ touch-action: manipulation;
336
+ will-change: transform;
337
+ padding: 12px 20px;
338
+ border: none;
339
+ border-radius: 25px;
340
+ cursor: pointer;
341
+ font-size: 1em;
342
+ font-weight: 600;
343
+ letter-spacing: 1px;
344
+ text-transform: uppercase;
345
+ transition: all 0.3s ease;
346
+ position: relative;
347
+ overflow: hidden;
348
+ box-shadow: 0 10px 30px rgba(0, 243, 255, 0.3);
349
+ }
350
+
351
+ .btn::before {
352
+ content: '';
353
+ position: absolute;
354
+ top: 0;
355
+ left: -100%;
356
+ width: 100%;
357
+ height: 100%;
358
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
359
+ transition: left 0.5s;
360
+ }
361
+
362
+ .btn:hover::before {
363
+ left: 100%;
364
+ }
365
+
366
+ .btn:hover {
367
+ transform: translateY(-3px);
368
+ box-shadow: 0 15px 40px rgba(0, 243, 255, 0.4);
369
+ }
370
+
371
+ .btn-secondary {
372
+ background: linear-gradient(135deg, #6c757d, #495057);
373
+ box-shadow: 0 10px 30px rgba(108, 117, 125, 0.3);
374
+ }
375
+
376
+ .tab-nav {
377
+ display: flex;
378
+ gap: 10px;
379
+ margin-bottom: 20px;
380
+ justify-content: center;
381
+ flex-wrap: wrap;
382
+ }
383
+
384
+ .tab-btn {
385
+ padding: 10px 15px;
386
+ font-size: 0.9em;
387
+ background: rgba(255, 255, 255, 0.1);
388
+ border: 1px solid rgba(255, 255, 255, 0.2);
389
+ border-radius: 25px;
390
+ color: #fff;
391
+ cursor: pointer;
392
+ transition: all 0.3s ease;
393
+ font-weight: 500;
394
+ }
395
+
396
+ .tab-btn.active {
397
+ background: var(--primary-gradient);
398
+ border-color: var(--neon-blue);
399
+ box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
400
+ }
401
+
402
+ .tab-btn:hover {
403
+ border-color: var(--neon-blue);
404
+ transform: translateY(-2px);
405
+ }
406
+
407
+ .stats-grid {
408
+ display: grid;
409
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
410
+ gap: 20px;
411
+ margin-bottom: 30px;
412
+ }
413
+
414
+ .stat-card {
415
+ background: linear-gradient(135deg, rgba(0, 243, 255, 0.1), rgba(255, 0, 110, 0.1));
416
+ border: 1px solid rgba(0, 243, 255, 0.3);
417
+ padding: 25px;
418
+ border-radius: 20px;
419
+ text-align: center;
420
+ transition: all 0.3s ease;
421
+ position: relative;
422
+ overflow: hidden;
423
+ }
424
+
425
+ .stat-card::before {
426
+ content: '';
427
+ position: absolute;
428
+ top: 0;
429
+ left: 0;
430
+ width: 100%;
431
+ height: 100%;
432
+ background: linear-gradient(135deg, var(--neon-blue), var(--neon-pink));
433
+ opacity: 0;
434
+ transition: opacity 0.3s ease;
435
+ }
436
+
437
+ .stat-card:hover::before {
438
+ opacity: 0.1;
439
+ }
440
+
441
+ .stat-card:hover {
442
+ transform: translateY(-5px);
443
+ box-shadow: 0 20px 40px rgba(0, 243, 255, 0.2);
444
+ }
445
+
446
+ .stat-value {
447
+ font-size: 2.5em;
448
+ font-weight: 700;
449
+ margin-bottom: 8px;
450
+ color: var(--neon-blue);
451
+ font-family: 'Orbitron', monospace;
452
+ }
453
+
454
+ .stat-label {
455
+ font-size: 0.9em;
456
+ opacity: 0.8;
457
+ text-transform: uppercase;
458
+ letter-spacing: 1px;
459
+ }
460
+
461
+ .grid {
462
+ display: grid;
463
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
464
+ gap: 25px;
465
+ margin-bottom: 30px;
466
+ }
467
+
468
+ .alert {
469
+ padding: 20px;
470
+ border-radius: 15px;
471
+ margin-bottom: 20px;
472
+ border-left: 4px solid;
473
+ animation: slideIn 0.5s ease;
474
+ }
475
+
476
+ @keyframes slideIn {
477
+ from { transform: translateX(-100%); opacity: 0; }
478
+ to { transform: translateX(0); opacity: 1; }
479
+ }
480
+
481
+ .alert-success {
482
+ background: rgba(57, 255, 20, 0.1);
483
+ border-color: var(--neon-green);
484
+ color: var(--neon-green);
485
+ }
486
+
487
+ .alert-error {
488
+ background: rgba(255, 0, 110, 0.1);
489
+ border-color: var(--neon-pink);
490
+ color: var(--neon-pink);
491
+ }
492
+
493
+ .loading {
494
+ text-align: center;
495
+ padding: 30px;
496
+ }
497
+
498
+ .loading-spinner {
499
+ width: 50px;
500
+ height: 50px;
501
+ border: 3px solid rgba(0, 243, 255, 0.3);
502
+ border-top: 3px solid var(--neon-blue);
503
+ border-radius: 50%;
504
+ animation: spin 1s linear infinite;
505
+ margin: 0 auto 15px;
506
+ }
507
+
508
+ @keyframes spin {
509
+ 0% { transform: rotate(0deg); }
510
+ 100% { transform: rotate(360deg); }
511
+ }
512
+
513
+ @media (max-width: 768px) {
514
+ .container {
515
+ padding: 10px;
516
+ width: 100%;
517
+ }
518
+ .glass-card {
519
+ padding: 15px;
520
+ margin-left: 5px;
521
+ margin-right: 5px;
522
+ }
523
+ .grid { grid-template-columns: 1fr; gap: 15px; }
524
+ .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
525
+
526
+ .pricing-card { padding: 20px; }
527
+ .price { font-size: 2.2em; }
528
+
529
+ .form-control { padding: 12px 15px; font-size: 1rem; }
530
+ .btn { padding: 12px 25px; font-size: 0.9rem; }
531
+ }
532
+
533
+ @media (max-width: 480px) {
534
+ .container {
535
+ padding: 8px;
536
+ width: 100%;
537
+ }
538
+ html {
539
+ -webkit-text-size-adjust: 100%;
540
+ }
541
+ .header h1 { font-size: 2.2em; }
542
+ .header p { font-size: 1em; }
543
+ .pricing-card { padding: 15px; }
544
+ .price { font-size: 2em; }
545
+ .features { font-size: 0.9em; }
546
+ .form-control { padding: 10px 12px; font-size: 0.95rem; }
547
+ .btn { padding: 10px 20px; font-size: 0.85rem; }
548
+ .tab-btn { padding: 8px 12px; font-size: 0.8em; }
549
+ .character { width: 80px; height: 80px; }
550
+ .character-face { width: 60px; height: 60px; }
551
+ }
552
+
553
+ .hidden {
554
+ display: none !important;
555
+ }
556
+
557
+ .api-response {
558
+ background: rgba(0, 0, 0, 0.3);
559
+ border: 1px solid var(--neon-blue);
560
+ padding: 20px;
561
+ border-radius: 15px;
562
+ font-family: 'Courier New', monospace;
563
+ white-space: pre-wrap;
564
+ margin-top: 20px;
565
+ color: var(--neon-green);
566
+ font-size: 0.9em;
567
+ }
568
+
569
+ .pricing-card {
570
+ background: rgba(255, 255, 255, 0.05);
571
+ border: 1px solid rgba(255, 255, 255, 0.1);
572
+ border-radius: 20px;
573
+ padding: 30px;
574
+ text-align: center;
575
+ transition: all 0.4s ease;
576
+ position: relative;
577
+ overflow: hidden;
578
+ }
579
+
580
+ .pricing-card:hover {
581
+ transform: translateY(-10px);
582
+ border-color: var(--neon-blue);
583
+ box-shadow: 0 20px 50px rgba(0, 243, 255, 0.2);
584
+ }
585
+
586
+ .pricing-card.featured {
587
+ border-color: var(--neon-pink);
588
+ box-shadow: 0 0 30px rgba(255, 0, 110, 0.3);
589
+ transform: scale(1.05);
590
+ }
591
+
592
+ .price {
593
+ font-size: 3em;
594
+ font-weight: 700;
595
+ margin-bottom: 10px;
596
+ font-family: 'Orbitron', monospace;
597
+ color: var(--neon-blue);
598
+ }
599
+
600
+ .features {
601
+ list-style: none;
602
+ margin: 20px 0;
603
+ text-align: left;
604
+ }
605
+
606
+ .features li {
607
+ padding: 10px 0;
608
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
609
+ position: relative;
610
+ padding-left: 30px;
611
+ }
612
+
613
+ .features li::before {
614
+ content: '✓';
615
+ position: absolute;
616
+ left: 0;
617
+ color: var(--neon-green);
618
+ font-weight: bold;
619
+ }
620
+
621
+ .features li:last-child {
622
+ border-bottom: none;
623
+ }
624
+ </style>
625
+ </head>
626
+ <body>
627
+ <div class="bg-animation"></div>
628
+ <div class="particles" id="particles"></div>
629
+
630
+ <div class="container">
631
+ <div class="header">
632
+ <h1>🚀 MoStar Industries</h1>
633
+ <p>Advanced AI Platform • Futuristic Intelligence • Limitless Possibilities</p>
634
+ </div>
635
+
636
+ <div id="accountStatus" class="glass-card hidden">
637
+ <div class="card-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
638
+ <h2 style="color: var(--neon-blue); font-family: 'Orbitron', monospace;">Mission Control Dashboard</h2>
639
+ <button class="btn btn-secondary" onclick="logout()">
640
+ <i class="fas fa-sign-out-alt"></i> Logout
641
+ </button>
642
+ </div>
643
+ <div class="stats-grid">
644
+ <div class="stat-card">
645
+ <div class="stat-value" id="creditsRemaining">-</div>
646
+ <div class="stat-label">Credits Remaining</div>
647
+ </div>
648
+ <div class="stat-card">
649
+ <div class="stat-value" id="totalCalls">-</div>
650
+ <div class="stat-label">API Calls (30d)</div>
651
+ </div>
652
+ <div class="stat-card">
653
+ <div class="stat-value" id="creditsUsed">-</div>
654
+ <div class="stat-label">Credits Used (30d)</div>
655
+ </div>
656
+ <div class="stat-card">
657
+ <div class="stat-value" id="userTierName">-</div>
658
+ <div class="stat-label">Current Plan</div>
659
+ </div>
660
+ </div>
661
+ <div style="height: 300px; margin: 20px 0;">
662
+ <canvas id="usageChart"></canvas>
663
+ </div>
664
+ </div>
665
+
666
+ <div id="authSection" class="glass-card">
667
+ <div class="character-container">
668
+ <div class="character" id="authCharacter">
669
+ <div class="character-face">
670
+ <div class="character-eyes">
671
+ <div class="eye" id="leftEye"></div>
672
+ <div class="eye" id="rightEye"></div>
673
+ </div>
674
+ <div class="character-mouth"></div>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ <h2 style="text-align: center; color: var(--neon-blue); font-family: 'Orbitron', monospace; margin-bottom: 20px;">
679
+ Welcome to the Future
680
+ </h2>
681
+ <div class="tab-nav">
682
+ <button class="tab-btn active" id="registerTab" onclick="showRegister()">
683
+ <i class="fas fa-user-plus"></i> Join Mission
684
+ </button>
685
+ <button class="tab-btn" id="loginTab" onclick="showLogin()">
686
+ <i class="fas fa-rocket"></i> Launch Access
687
+ </button>
688
+ </div>
689
+
690
+ <div id="registerForm" class="form-container">
691
+ <div class="form-group">
692
+ <label><i class="fas fa-user"></i> Agent Codename</label>
693
+ <input type="text" id="username" class="form-control" placeholder="Enter your codename">
694
+ </div>
695
+ <div class="form-group">
696
+ <label><i class="fas fa-envelope"></i> Communication Channel</label>
697
+ <input type="email" id="email" class="form-control" placeholder="[email protected]">
698
+ </div>
699
+ <div class="form-group">
700
+ <label><i class="fas fa-lock"></i> Security Phrase</label>
701
+ <div class="password-wrapper">
702
+ <input type="password" id="password" class="form-control" placeholder="Enter security phrase" onfocus="closeCharacterEyes()" onblur="openCharacterEyes()">
703
+ <i class="fas fa-eye password-toggle" onclick="togglePassword('password')"></i>
704
+ </div>
705
+ </div>
706
+ <div class="form-group">
707
+ <label><i class="fas fa-shield-alt"></i> Mission Tier</label>
708
+ <select id="tier" class="form-control">
709
+ <option value="free">🚀 Explorer (Free - 100 credits/month)</option>
710
+ <option value="basic">⭐ Voyager ($9.99 - 1,000 credits/month)</option>
711
+ <option value="pro">🌟 Commander ($49.99 - 10,000 credits/month)</option>
712
+ <option value="enterprise">👑 Admiral ($199.99 - 100,000 credits/month)</option>
713
+ </select>
714
+ </div>
715
+ <button class="btn" onclick="register()" style="width: 100%; margin-top: 10px;">
716
+ <i class="fas fa-rocket"></i> Initialize Mission
717
+ </button>
718
+ </div>
719
+
720
+ <div id="loginForm" class="form-container hidden">
721
+ <div class="form-group">
722
+ <label><i class="fas fa-key"></i> Access Key</label>
723
+ <div class="password-wrapper">
724
+ <input type="password" id="apiKey" class="form-control" placeholder="ms_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" onfocus="closeCharacterEyes()" onblur="openCharacterEyes()">
725
+ <i class="fas fa-eye password-toggle" onclick="togglePassword('apiKey')"></i>
726
+ </div>
727
+ </div>
728
+ <button class="btn" onclick="login()" style="width: 100%; margin-top: 10px;">
729
+ <i class="fas fa-sign-in-alt"></i> Access Granted
730
+ </button>
731
+ </div>
732
+ </div>
733
+
734
+ <div id="aiServices" class="glass-card hidden">
735
+ <h2 style="color: var(--neon-blue); font-family: 'Orbitron', monospace; margin-bottom: 20px;">
736
+ <i class="fas fa-brain"></i> AI Command Center
737
+ </h2>
738
+ <div class="grid">
739
+ <div>
740
+ <h3 style="color: var(--neon-pink); margin-bottom: 15px;">
741
+ <i class="fas fa-robot"></i> Neural Text Generator
742
+ </h3>
743
+ <div class="form-group">
744
+ <label>Mission Prompt</label>
745
+ <textarea id="aiPrompt" class="form-control" rows="3" placeholder="Describe your AI mission..."></textarea>
746
+ </div>
747
+ <div class="form-group">
748
+ <label>AI Model</label>
749
+ <select id="aiModel" class="form-control">
750
+ <option value="standard">Standard AI (1 credit)</option>
751
+ <option value="advanced">Advanced AI (5 credits)</option>
752
+ </select>
753
+ </div>
754
+ <button class="btn" onclick="generateAI()" style="width: 100%;">
755
+ <i class="fas fa-magic"></i> Generate Response
756
+ </button>
757
+ <div id="aiResponse" class="api-response hidden"></div>
758
+ </div>
759
+
760
+ <div>
761
+ <h3 style="color: var(--neon-green); margin-bottom: 15px;">
762
+ <i class="fas fa-globe"></i> Climate Oracle
763
+ </h3>
764
+ <p style="margin-bottom: 20px; opacity: 0.8;">
765
+ Advanced climate prediction using quantum AI algorithms.
766
+ </p>
767
+ <button class="btn btn-success" onclick="getClimateData()" style="width: 100%;">
768
+ <i class="fas fa-cloud-sun"></i> Predict Climate (2 credits)
769
+ </button>
770
+ <div id="climateResponse" class="api-response hidden"></div>
771
+ </div>
772
+ </div>
773
+ </div>
774
+
775
+ <div id="creditPurchase" class="glass-card hidden">
776
+ <h2 style="color: var(--neon-blue); font-family: 'Orbitron', monospace; margin-bottom: 20px; text-align: center;">
777
+ <i class="fas fa-coins"></i> Credit Exchange Station
778
+ </h2>
779
+ <div class="grid">
780
+ <div class="pricing-card">
781
+ <div style="color: var(--neon-blue); margin-bottom: 20px;">
782
+ <i class="fas fa-rocket" style="font-size: 2em;"></i>
783
+ </div>
784
+ <div class="price">$4.99</div>
785
+ <div style="color: var(--neon-blue); margin-bottom: 20px; font-weight: 600;">Starter Pack</div>
786
+ <ul class="features">
787
+ <li>500 Credits</li>
788
+ <li>Standard AI Models</li>
789
+ <li>Email Support</li>
790
+ <li>Basic Analytics</li>
791
+ </ul>
792
+ <button class="btn" onclick="purchaseCredits('starter')" style="width: 100%;">
793
+ <i class="fas fa-shopping-cart"></i> Purchase
794
+ </button>
795
+ </div>
796
+
797
+ <div class="pricing-card featured">
798
+ <div style="color: var(--neon-pink); margin-bottom: 20px;">
799
+ <i class="fas fa-star" style="font-size: 2em;"></i>
800
+ </div>
801
+ <div class="price" style="color: var(--neon-pink);">$9.99</div>
802
+ <div style="color: var(--neon-pink); margin-bottom: 20px; font-weight: 600;">Voyager Pack</div>
803
+ <ul class="features">
804
+ <li>1,200 Credits</li>
805
+ <li>All AI Models</li>
806
+ <li>Priority Support</li>
807
+ <li>Advanced Analytics</li>
808
+ <li>API Documentation</li>
809
+ </ul>
810
+ <button class="btn" onclick="purchaseCredits('standard')" style="width: 100%;">
811
+ <i class="fas fa-crown"></i> Most Popular
812
+ </button>
813
+ </div>
814
+
815
+ <div class="pricing-card">
816
+ <div style="color: var(--neon-green); margin-bottom: 20px;">
817
+ <i class="fas fa-gem" style="font-size: 2em;"></i>
818
+ </div>
819
+ <div class="price" style="color: var(--neon-green);">$19.99</div>
820
+ <div style="color: var(--neon-green); margin-bottom: 20px; font-weight: 600;">Commander Pack</div>
821
+ <ul class="features">
822
+ <li>3,000 Credits</li>
823
+ <li>All AI Models</li>
824
+ <li>Dedicated Support</li>
825
+ <li>Custom Integrations</li>
826
+ </ul>
827
+ <button class="btn" onclick="purchaseCredits('pro')" style