Hugging Face's logo

Spaces:
fLausch
/
anycoder-d51b95ea
Running

App Files Community
fLausch commited on
Commit
fbd9c09
·
verified ·
1 Parent(s): 0617dcf

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1295 -19
index.html CHANGED
@@ -1,19 +1,1295 @@
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="de" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>OpenRouter FreeScout</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
8
+ <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
9
+ <style>
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ :root {
17
+ --background: #09090b;
18
+ --surface: #18181b;
19
+ --primary: #6366f1;
20
+ --secondary: #10b981;
21
+ --gray-50: #fafafa;
22
+ --gray-100: #f4f4f5;
23
+ --gray-200: #e4e4e7;
24
+ --gray-300: #d4d4d8;
25
+ --gray-400: #a1a1aa;
26
+ --gray-500: #71717a;
27
+ --gray-600: #52525b;
28
+ --gray-700: #3f3f46;
29
+ --gray-800: #27272a;
30
+ --gray-900: #18181b;
31
+ --emerald-400: #34d399;
32
+ --emerald-500: #10b981;
33
+ --emerald-600: #059669;
34
+ --emerald-800: #065f46;
35
+ --emerald-900: #064e3b;
36
+ --emerald-950: #022c22;
37
+ --red-400: #f87171;
38
+ --red-500: #ef4444;
39
+ --red-800: #991b1b;
40
+ --red-900: #7f1d1d;
41
+ --red-950: #450a0a;
42
+ --blue-400: #60a5fa;
43
+ --blue-500: #3b82f6;
44
+ --yellow-500: #eab308;
45
+ --purple-500: #a855f7;
46
+ --purple-600: #9333ea;
47
+ --pink-400: #f472b6;
48
+ --amber-400: #fbbf24;
49
+ --indigo-400: #818cf8;
50
+ --indigo-500: #6366f1;
51
+ }
52
+
53
+ body {
54
+ font-family: 'Inter', sans-serif;
55
+ background-color: var(--background);
56
+ color: var(--gray-200);
57
+ min-height: 100vh;
58
+ line-height: 1.5;
59
+ }
60
+
61
+ /* Custom Scrollbar */
62
+ ::-webkit-scrollbar {
63
+ width: 8px;
64
+ height: 8px;
65
+ }
66
+
67
+ ::-webkit-scrollbar-track {
68
+ background: var(--surface);
69
+ }
70
+
71
+ ::-webkit-scrollbar-thumb {
72
+ background: var(--gray-700);
73
+ border-radius: 4px;
74
+ }
75
+
76
+ ::-webkit-scrollbar-thumb:hover {
77
+ background: var(--gray-600);
78
+ }
79
+
80
+ /* Animations */
81
+ @keyframes fadeIn {
82
+ from { opacity: 0; transform: translateY(10px); }
83
+ to { opacity: 1; transform: translateY(0); }
84
+ }
85
+
86
+ @keyframes pulse {
87
+ 0%, 100% { opacity: 1; }
88
+ 50% { opacity: 0.5; }
89
+ }
90
+
91
+ @keyframes spin {
92
+ from { transform: rotate(0deg); }
93
+ to { transform: rotate(360deg); }
94
+ }
95
+
96
+ .animate-fade-in {
97
+ animation: fadeIn 0.3s ease-out;
98
+ }
99
+
100
+ .animate-pulse {
101
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
102
+ }
103
+
104
+ .animate-spin {
105
+ animation: spin 1s linear infinite;
106
+ }
107
+
108
+ /* Header */
109
+ .header {
110
+ position: sticky;
111
+ top: 0;
112
+ z-index: 30;
113
+ background: rgba(9, 9, 11, 0.95);
114
+ backdrop-filter: blur(12px);
115
+ border-bottom: 1px solid var(--gray-800);
116
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
117
+ }
118
+
119
+ .header-content {
120
+ max-width: 1280px;
121
+ margin: 0 auto;
122
+ padding: 1rem;
123
+ }
124
+
125
+ .header-top {
126
+ display: flex;
127
+ flex-direction: column;
128
+ gap: 1rem;
129
+ }
130
+
131
+ @media (min-width: 1024px) {
132
+ .header-top {
133
+ flex-direction: row;
134
+ align-items: center;
135
+ justify-content: space-between;
136
+ }
137
+ }
138
+
139
+ .logo-section {
140
+ display: flex;
141
+ align-items: center;
142
+ gap: 0.75rem;
143
+ }
144
+
145
+ .logo-icon {
146
+ width: 40px;
147
+ height: 40px;
148
+ border-radius: 12px;
149
+ background: linear-gradient(135deg, var(--primary), var(--purple-600));
150
+ display: flex;
151
+ align-items: center;
152
+ justify-content: center;
153
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
154
+ }
155
+
156
+ .logo-text h1 {
157
+ font-size: 1.25rem;
158
+ font-weight: 700;
159
+ color: white;
160
+ letter-spacing: -0.025em;
161
+ }
162
+
163
+ .logo-text p {
164
+ font-size: 0.75rem;
165
+ color: var(--gray-500);
166
+ }
167
+
168
+ .built-with {
169
+ font-size: 0.75rem;
170
+ color: var(--gray-500);
171
+ text-decoration: none;
172
+ transition: color 0.2s;
173
+ }
174
+
175
+ .built-with:hover {
176
+ color: var(--primary);
177
+ }
178
+
179
+ .controls-section {
180
+ display: flex;
181
+ flex-direction: column;
182
+ gap: 0.5rem;
183
+ width: 100%;
184
+ }
185
+
186
+ @media (min-width: 640px) {
187
+ .controls-section {
188
+ flex-direction: row;
189
+ align-items: center;
190
+ width: auto;
191
+ }
192
+ }
193
+
194
+ .api-key-group {
195
+ display: flex;
196
+ gap: 0.5rem;
197
+ flex: 1;
198
+ }
199
+
200
+ .api-key-input-wrapper {
201
+ position: relative;
202
+ flex: 1;
203
+ }
204
+
205
+ @media (min-width: 640px) {
206
+ .api-key-input-wrapper {
207
+ width: 256px;
208
+ flex: none;
209
+ }
210
+ }
211
+
212
+ .api-key-input {
213
+ width: 100%;
214
+ background: var(--surface);
215
+ border: 1px solid var(--gray-700);
216
+ border-radius: 8px;
217
+ padding: 0.5rem 2.25rem 0.5rem 0.75rem;
218
+ font-size: 0.875rem;
219
+ color: white;
220
+ height: 40px;
221
+ transition: all 0.2s;
222
+ }
223
+
224
+ .api-key-input::placeholder {
225
+ color: var(--gray-600);
226
+ }
227
+
228
+ .api-key-input:focus {
229
+ outline: none;
230
+ border-color: var(--primary);
231
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
232
+ }
233
+
234
+ .help-btn {
235
+ position: absolute;
236
+ right: 0;
237
+ top: 0;
238
+ height: 100%;
239
+ display: flex;
240
+ align-items: center;
241
+ padding-right: 0.5rem;
242
+ color: var(--gray-500);
243
+ background: none;
244
+ border: none;
245
+ cursor: pointer;
246
+ transition: color 0.2s;
247
+ }
248
+
249
+ .help-btn:hover {
250
+ color: var(--primary);
251
+ }
252
+
253
+ .key-link-btn {
254
+ display: flex;
255
+ align-items: center;
256
+ justify-content: center;
257
+ width: 40px;
258
+ height: 40px;
259
+ background: var(--gray-800);
260
+ border: 1px solid var(--gray-700);
261
+ border-radius: 8px;
262
+ color: var(--gray-400);
263
+ text-decoration: none;
264
+ transition: all 0.2s;
265
+ }
266
+
267
+ .key-link-btn:hover {
268
+ background: var(--gray-700);
269
+ color: white;
270
+ }
271
+
272
+ .action-buttons {
273
+ display: flex;
274
+ gap: 0.5rem;
275
+ }
276
+
277
+ .btn {
278
+ display: flex;
279
+ align-items: center;
280
+ justify-content: center;
281
+ gap: 0.5rem;
282
+ padding: 0 1.5rem;
283
+ height: 40px;
284
+ border-radius: 8px;
285
+ font-size: 0.875rem;
286
+ font-weight: 600;
287
+ border: none;
288
+ cursor: pointer;
289
+ transition: all 0.2s;
290
+ }
291
+
292
+ .btn-primary {
293
+ background: var(--primary);
294
+ color: white;
295
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
296
+ }
297
+
298
+ .btn-primary:hover:not(:disabled) {
299
+ background: var(--indigo-500);
300
+ box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
301
+ }
302
+
303
+ .btn-primary:disabled {
304
+ background: var(--gray-800);
305
+ color: var(--gray-500);
306
+ cursor: not-allowed;
307
+ box-shadow: none;
308
+ }
309
+
310
+ .btn-icon {
311
+ width: 40px;
312
+ padding: 0;
313
+ }
314
+
315
+ .btn-pause {
316
+ background: var(--gray-800);
317
+ border: 1px solid var(--gray-700);
318
+ color: var(--yellow-500);
319
+ }
320
+
321
+ .btn-pause:hover {
322
+ background: var(--gray-700);
323
+ }
324
+
325
+ .btn-pause.active {
326
+ background: rgba(234, 179, 8, 0.2);
327
+ border-color: var(--yellow-500);
328
+ }
329
+
330
+ .btn-stop {
331
+ background: rgba(69, 10, 10, 0.3);
332
+ border: 1px solid var(--red-900);
333
+ color: var(--red-500);
334
+ }
335
+
336
+ .btn-stop:hover {
337
+ background: rgba(127, 29, 29, 0.5);
338
+ }
339
+
340
+ .progress-bar {
341
+ position: absolute;
342
+ bottom: 0;
343
+ left: 0;
344
+ width: 100%;
345
+ height: 3px;
346
+ background: var(--gray-800);
347
+ }
348
+
349
+ .progress-fill {
350
+ height: 100%;
351
+ background: linear-gradient(90deg, var(--primary), var(--purple-500));
352
+ transition: width 0.3s ease-out;
353
+ }
354
+
355
+ /* Main Content */
356
+ .main-content {
357
+ max-width: 1280px;
358
+ margin: 0 auto;
359
+ padding: 2rem 1rem;
360
+ }
361
+
362
+ /* Stats Grid */
363
+ .stats-grid {
364
+ display: grid;
365
+ grid-template-columns: repeat(1, 1fr);
366
+ gap: 1rem;
367
+ margin-bottom: 2rem;
368
+ }
369
+
370
+ @media (min-width: 768px) {
371
+ .stats-grid {
372
+ grid-template-columns: repeat(4, 1fr);
373
+ }
374
+ }
375
+
376
+ .stat-card {
377
+ padding: 1rem;
378
+ border-radius: 12px;
379
+ background: var(--surface);
380
+ border: 1px solid var(--gray-800);
381
+ }
382
+
383
+ .stat-label {
384
+ font-size: 0.75rem;
385
+ text-transform: uppercase;
386
+ font-weight: 700;
387
+ letter-spacing: 0.05em;
388
+ color: var(--gray-500);
389
+ margin-bottom: 0.25rem;
390
+ }
391
+
392
+ .stat-value {
393
+ font-size: 1.5rem;
394
+ font-weight: 700;
395
+ color: white;
396
+ display: flex;
397
+ align-items: baseline;
398
+ gap: 0.5rem;
399
+ }
400
+
401
+ .stat-badge {
402
+ font-size: 0.75rem;
403
+ font-weight: 400;
404
+ color: var(--emerald-500);
405
+ background: rgba(2, 44, 34, 0.3);
406
+ padding: 0.125rem 0.5rem;
407
+ border-radius: 9999px;
408
+ border: 1px solid var(--emerald-900);
409
+ }
410
+
411
+ .stat-sub {
412
+ font-size: 0.875rem;
413
+ color: var(--gray-500);
414
+ }
415
+
416
+ /* Results Section */
417
+ .results-section {
418
+ margin-bottom: 2rem;
419
+ }
420
+
421
+ .export-bar {
422
+ display: flex;
423
+ justify-content: flex-end;
424
+ margin-bottom: 0.5rem;
425
+ }
426
+
427
+ .btn-export {
428
+ display: flex;
429
+ align-items: center;
430
+ gap: 0.5rem;
431
+ font-size: 0.75rem;
432
+ font-weight: 500;
433
+ color: var(--gray-400);
434
+ background: var(--gray-800);
435
+ border: 1px solid var(--gray-700);
436
+ padding: 0.375rem 0.75rem;
437
+ border-radius: 8px;
438
+ cursor: pointer;
439
+ transition: all 0.2s;
440
+ }
441
+
442
+ .btn-export:hover {
443
+ background: var(--gray-700);
444
+ color: white;
445
+ }
446
+
447
+ .results-wrapper {
448
+ background: var(--background);
449
+ padding: 1rem;
450
+ margin: -1rem;
451
+ }
452
+
453
+ .charts-grid {
454
+ display: grid;
455
+ grid-template-columns: 1fr;
456
+ gap: 1.5rem;
457
+ margin-bottom: 1.5rem;
458
+ }
459
+
460
+ @media (min-width: 1024px) {
461
+ .charts-grid {
462
+ grid-template-columns: repeat(2, 1fr);
463
+ }
464
+ }
465
+
466
+ /* Chart Container */
467
+ .chart-container {
468
+ background: var(--surface);
469
+ border: 1px solid var(--gray-800);
470
+ border-radius: 12px;
471
+ padding: 1rem;
472
+ height: 400px;
473
+ }
474
+
475
+ .chart-title {
476
+ font-size: 0.875rem;
477
+ font-weight: 600;
478
+ color: var(--gray-400);
479
+ text-transform: uppercase;
480
+ letter-spacing: 0.05em;
481
+ margin-bottom: 0.5rem;
482
+ display: flex;
483
+ align-items: center;
484
+ gap: 0.5rem;
485
+ }
486
+
487
+ .chart-subtitle {
488
+ font-size: 0.75rem;
489
+ text-transform: none;
490
+ color: var(--gray-600);
491
+ }
492
+
493
+ .chart-bars {
494
+ height: calc(100% - 30px);
495
+ display: flex;
496
+ flex-direction: column;
497
+ gap: 0.5rem;
498
+ overflow-y: auto;
499
+ }
500
+
501
+ .chart-bar-item {
502
+ display: flex;
503
+ align-items: center;
504
+ gap: 0.75rem;
505
+ }
506
+
507
+ .chart-bar-label {
508
+ width: 120px;
509
+ font-size: 0.75rem;
510
+ font-weight: 500;
511
+ color: var(--gray-200);
512
+ white-space: nowrap;
513
+ overflow: hidden;
514
+ text-overflow: ellipsis;
515
+ flex-shrink: 0;
516
+ }
517
+
518
+ .chart-bar-track {
519
+ flex: 1;
520
+ height: 20px;
521
+ background: var(--gray-800);
522
+ border-radius: 4px;
523
+ overflow: hidden;
524
+ position: relative;
525
+ }
526
+
527
+ .chart-bar-fill {
528
+ height: 100%;
529
+ border-radius: 0 4px 4px 0;
530
+ transition: width 0.5s ease-out;
531
+ }
532
+
533
+ .chart-bar-fill.latency {
534
+ background: var(--emerald-500);
535
+ }
536
+
537
+ .chart-bar-fill.throughput {
538
+ background: var(--primary);
539
+ }
540
+
541
+ .chart-bar-value {
542
+ font-size: 0.75rem;
543
+ font-weight: 700;
544
+ color: white;
545
+ width: 70px;
546
+ text-align: right;
547
+ flex-shrink: 0;
548
+ }
549
+
550
+ /* Ranking Table */
551
+ .ranking-table-container {
552
+ background: var(--surface);
553
+ border: 1px solid var(--gray-800);
554
+ border-radius: 12px;
555
+ overflow: hidden;
556
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
557
+ }
558
+
559
+ .ranking-header {
560
+ padding: 1rem;
561
+ border-bottom: 1px solid var(--gray-800);
562
+ background: rgba(0, 0, 0, 0.2);
563
+ display: flex;
564
+ justify-content: space-between;
565
+ align-items: center;
566
+ }
567
+
568
+ .ranking-title {
569
+ font-size: 1.125rem;
570
+ font-weight: 700;
571
+ color: white;
572
+ display: flex;
573
+ align-items: center;
574
+ gap: 0.5rem;
575
+ }
576
+
577
+ .ranking-count {
578
+ font-size: 0.75rem;
579
+ font-weight: 400;
580
+ color: var(--gray-500);
581
+ background: var(--gray-800);
582
+ padding: 0.125rem 0.5rem;
583
+ border-radius: 9999px;
584
+ }
585
+
586
+ .ranking-table-wrapper {
587
+ overflow-x: auto;
588
+ }
589
+
590
+ .ranking-table {
591
+ width: 100%;
592
+ min-width: 800px;
593
+ border-collapse: collapse;
594
+ text-align: left;
595
+ }
596
+
597
+ .ranking-table thead tr {
598
+ background: rgba(0, 0, 0, 0.4);
599
+ border-bottom: 1px solid var(--gray-800);
600
+ }
601
+
602
+ .ranking-table th {
603
+ padding: 1rem;
604
+ font-size: 0.75rem;
605
+ text-transform: uppercase;
606
+ letter-spacing: 0.05em;
607
+ font-weight: 500;
608
+ color: var(--gray-500);
609
+ }
610
+
611
+ .ranking-table th.text-right {
612
+ text-align: right;
613
+ }
614
+
615
+ .ranking-table th.text-center {
616
+ text-align: center;
617
+ }
618
+
619
+ .ranking-table tbody tr {
620
+ border-bottom: 1px solid var(--gray-800);
621
+ transition: background 0.2s;
622
+ }
623
+
624
+ .ranking-table tbody tr:hover {
625
+ background: rgba(255, 255, 255, 0.03);
626
+ }
627
+
628
+ .ranking-table td {
629
+ padding: 1rem;
630
+ font-size: 0.875rem;
631
+ }
632
+
633
+ .ranking-table td.text-right {
634
+ text-align: right;
635
+ }
636
+
637
+ .ranking-table td.text-center {
638
+ text-align: center;
639
+ }
640
+
641
+ .rank-number {
642
+ color: var(--gray-600);
643
+ font-family: monospace;
644
+ }
645
+
646
+ .model-name {
647
+ font-weight: 700;
648
+ color: white;
649
+ max-width: 240px;
650
+ overflow: hidden;
651
+ text-overflow: ellipsis;
652
+ white-space: nowrap;
653
+ margin-bottom: 0.25rem;
654
+ }
655
+
656
+ .model-tags {
657
+ display: flex;
658
+ flex-wrap: wrap;
659
+ gap: 0.375rem;
660
+ }
661
+
662
+ .tag {
663
+ display: inline-flex;
664
+ align-items: center;
665
+ gap: 0.25rem;
666
+ font-size: 0.625rem;
667
+ padding: 0.125rem 0.375rem;
668
+ border-radius: 4px;
669
+ border: 1px solid;
670
+ }
671
+
672
+ .tag-coding {
673
+ color: var(--blue-400);
674
+ background: rgba(96, 165, 250, 0.1);
675
+ border-color: rgba(96, 165, 250, 0.2);
676
+ }
677
+
678
+ .tag-story {
679
+ color: var(--amber-400);
680
+ background: rgba(251, 191, 36, 0.1);
681
+ border-color: rgba(251, 191, 36, 0.2);
682
+ }
683
+
684
+ .tag-general {
685
+ color: var(--emerald-400);
686
+ background: rgba(52, 211, 153, 0.1);
687
+ border-color: rgba(52, 211, 153, 0.2);
688
+ }
689
+
690
+ .tag-roleplay {
691
+ color: var(--pink-400);
692
+ background: rgba(244, 114, 182, 0.1);
693
+ border-color: rgba(244, 114, 182, 0.2);
694
+ }
695
+
696
+ .tag-math {
697
+ color: var(--indigo-400);
698
+ background: rgba(129, 140, 248, 0.1);
699
+ border-color: rgba(129, 140, 248, 0.2);
700
+ }
701
+
702
+ .tag-assistant {
703
+ color: var(--gray-400);
704
+ background: rgba(161, 161, 170, 0.1);
705
+ border-color: rgba(161, 161, 170, 0.2);
706
+ }
707
+
708
+ .tag-vision {
709
+ color: var(--purple-500);
710
+ background: rgba(168, 85, 247, 0.1);
711
+ border-color: rgba(168, 85, 247, 0.2);
712
+ }
713
+
714
+ .action-icons {
715
+ display: flex;
716
+ align-items: center;
717
+ justify-content: center;
718
+ gap: 0.75rem;
719
+ }
720
+
721
+ .action-icon {
722
+ color: var(--gray-500);
723
+ background: none;
724
+ border: none;
725
+ cursor: pointer;
726
+ transition: color 0.2s;
727
+ display: flex;
728
+ align-items: center;
729
+ justify-content: center;
730
+ }
731
+
732
+ .action-icon:hover {
733
+ color: var(--primary);
734
+ }
735
+
736
+ .action-icon.copied {
737
+ color: var(--emerald-500);
738
+ }
739
+
740
+ .metric-value {
741
+ font-family: monospace;
742
+ color: var(--gray-300);
743
+ }
744
+
745
+ .metric-unit {
746
+ font-size: 0.75rem;
747
+ color: var(--gray-600);
748
+ }
749
+
750
+ .metric-up {
751
+ font-size: 0.625rem;
752
+ color: var(--emerald-500);
753
+ }
754
+
755
+ .latency-value {
756
+ font-family: monospace;
757
+ font-weight: 700;
758
+ color: #4ade80;
759
+ }
760
+
761
+ .latency-unit {
762
+ font-size: 0.75rem;
763
+ font-weight: 400;
764
+ color: rgba(74, 222, 128, 0.7);
765
+ }
766
+
767
+ .context-value {
768
+ font-size: 1rem;
769
+ font-weight: 700;
770
+ color: white;
771
+ }
772
+
773
+ .context-sub {
774
+ font-size: 0.625rem;
775
+ color: var(--gray-500);
776
+ }
777
+
778
+ .generated-footer {
779
+ text-align: center;
780
+ font-size: 0.75rem;
781
+ color: var(--gray-600);
782
+ padding: 1rem 0 0.5rem;
783
+ }
784
+
785
+ /* Divider */
786
+ .divider {
787
+ border-top: 1px solid var(--gray-800);
788
+ margin: 2rem 0;
789
+ }
790
+
791
+ /* Filter Bar */
792
+ .filter-bar {
793
+ display: flex;
794
+ flex-direction: column;
795
+ gap: 1rem;
796
+ background: var(--surface);
797
+ padding: 1rem;
798
+ border-radius: 12px;
799
+ border: 1px solid var(--gray-800);
800
+ position: sticky;
801
+ top: 80px;
802
+ z-index: 20;
803
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
804
+ margin-bottom: 1rem;
805
+ }
806
+
807
+ @media (min-width: 768px) {
808
+ .filter-bar {
809
+ flex-direction: row;
810
+ justify-content: space-between;
811
+ align-items: center;
812
+ }
813
+ }
814
+
815
+ .search-wrapper {
816
+ position: relative;
817
+ width: 100%;
818
+ max-width: 400px;
819
+ }
820
+
821
+ .search-icon {
822
+ position: absolute;
823
+ left: 0.75rem;
824
+ top: 50%;
825
+ transform: translateY(-50%);
826
+ color: var(--gray-500);
827
+ }
828
+
829
+ .search-input {
830
+ width: 100%;
831
+ background: rgba(0, 0, 0, 0.4);
832
+ border: 1px solid var(--gray-700);
833
+ border-radius: 8px;
834
+ padding: 0.5rem 1rem 0.5rem 2.25rem;
835
+ font-size: 0.875rem;
836
+ color: white;
837
+ }
838
+
839
+ .search-input:focus {
840
+ outline: none;
841
+ border-color: var(--primary);
842
+ }
843
+
844
+ .filter-controls {
845
+ display: flex;
846
+ align-items: center;
847
+ gap: 0.5rem;
848
+ overflow-x: auto;
849
+ padding-bottom: 0.5rem;
850
+ }
851
+
852
+ @media (min-width: 768px) {
853
+ .filter-controls {
854
+ padding-bottom: 0;
855
+ }
856
+ }
857
+
858
+ .filter-btn {
859
+ display: flex;
860
+ align-items: center;
861
+ gap: 0.5rem;
862
+ padding: 0.5rem 0.75rem;
863
+ border-radius: 8px;
864
+ font-size: 0.75rem;
865
+ font-weight: 500;
866
+ border: 1px solid var(--gray-700);
867
+ background: rgba(0, 0, 0, 0.4);
868
+ color: var(--gray-400);
869
+ cursor: pointer;
870
+ white-space: nowrap;
871
+ transition: all 0.2s;
872
+ }
873
+
874
+ .filter-btn:hover {
875
+ color: white;
876
+ }
877
+
878
+ .filter-btn.active {
879
+ background: rgba(2, 44, 34, 0.3);
880
+ border-color: var(--emerald-800);
881
+ color: var(--emerald-400);
882
+ }
883
+
884
+ .filter-divider {
885
+ height: 24px;
886
+ width: 1px;
887
+ background: var(--gray-700);
888
+ margin: 0 0.25rem;
889
+ }
890
+
891
+ .sort-select {
892
+ background: rgba(0, 0, 0, 0.4);
893
+ border: 1px solid var(--gray-700);
894
+ color: var(--gray-300);
895
+ font-size: 0.75rem;
896
+ border-radius: 8px;
897
+ padding: 0.5rem 0.75rem;
898
+ cursor: pointer;
899
+ }
900
+
901
+ .sort-select:focus {
902
+ outline: none;
903
+ border-color: var(--primary);
904
+ }
905
+
906
+ /* Model Cards */
907
+ .models-grid {
908
+ display: grid;
909
+ grid-template-columns: 1fr;
910
+ gap: 0.75rem;
911
+ }
912
+
913
+ .model-card {
914
+ border-radius: 12px;
915
+ border: 1px solid var(--gray-800);
916
+ background: var(--surface);
917
+ padding: 1rem;
918
+ transition: all 0.3s;
919
+ }
920
+
921
+ .model-card.success {
922
+ border-color: rgba(16, 185, 129, 0.3);
923
+ background: rgba(2, 44, 34, 0.1);
924
+ }
925
+
926
+ .model-card.error {
927
+ border-color: rgba(239, 68, 68, 0.3);
928
+ background: rgba(69, 10, 10, 0.1);
929
+ }
930
+
931
+ .model-card-header {
932
+ display: flex;
933
+ justify-content: space-between;
934
+ gap: 1rem;
935
+ }
936
+
937
+ .model-card-info {
938
+ flex: 1;
939
+ min-width: 0;
940
+ }
941
+
942
+ .model-card-title-row {
943
+ display: flex;
944
+ align-items: center;
945
+ gap: 0.5rem;
946
+ margin-bottom: 0.25rem;
947
+ }
948
+
949
+ .model-card-title {
950
+ font-size: 1.125rem;
951
+ font-weight: 700;
952
+ color: white;
953
+ overflow: hidden;
954
+ text-overflow: ellipsis;
955
+ white-space: nowrap;
956
+ }
957
+
958
+ .model-card-ctx {
959
+ font-size: 0.75rem;
960
+ padding: 0.125rem 0.5rem;
961
+ border-radius: 9999px;
962
+ background: var(--gray-800);
963
+ color: var(--gray-400);
964
+ border: 1px solid var(--gray-700);
965
+ }
966
+
967
+ .model-card-id-row {
968
+ display: flex;
969
+ align-items: center;
970
+ gap: 0.5rem;
971
+ margin-bottom: 0.5rem;
972
+ }
973
+
974
+ .model-card-id {
975
+ font-family: monospace;
976
+ font-size: 0.75rem;
977
+ color: var(--gray-500);
978
+ background: rgba(0, 0, 0, 0.5);
979
+ padding: 0.125rem 0.375rem;
980
+ border-radius: 4px;
981
+ max-width: 200px;
982
+ overflow: hidden;
983
+ text-overflow: ellipsis;
984
+ white-space: nowrap;
985
+ }
986
+
987
+ @media (min-width: 640px) {
988
+ .model-card-id {
989
+ max-width: 300px;
990
+ }
991
+ }
992
+
993
+ .model-card-copy {
994
+ background: none;
995
+ border: none;
996
+ color: var(--gray-500);
997
+ cursor: pointer;
998
+ transition: color 0.2s;
999
+ display: flex;
1000
+ align-items: center;
1001
+ }
1002
+
1003
+ .model-card-copy:hover {
1004
+ color: white;
1005
+ }
1006
+
1007
+ .model-card-copy.copied {
1008
+ color: var(--emerald-500);
1009
+ }
1010
+
1011
+ .model-card-desc {
1012
+ font-size: 0.875rem;
1013
+ color: var(--gray-400);
1014
+ display: -webkit-box;
1015
+ -webkit-line-clamp: 2;
1016
+ -webkit-box-orient: vertical;
1017
+ overflow: hidden;
1018
+ }
1019
+
1020
+ .model-card-metrics {
1021
+ display: flex;
1022
+ flex-direction: column;
1023
+ align-items: flex-end;
1024
+ gap: 0.5rem;
1025
+ min-width: 100px;
1026
+ }
1027
+
1028
+ .model-card-status {
1029
+ font-size: 0.75rem;
1030
+ color: var(--gray-500);
1031
+ }
1032
+
1033
+ .model-card-status.running {
1034
+ color: var(--blue-400);
1035
+ }
1036
+
1037
+ .model-card-metric {
1038
+ display: flex;
1039
+ align-items: center;
1040
+ justify-content: flex-end;
1041
+ gap: 0.375rem;
1042
+ }
1043
+
1044
+ .model-card-metric.latency {
1045
+ color: var(--emerald-400);
1046
+ }
1047
+
1048
+ .model-card-metric.speed {
1049
+ color: var(--blue-400);
1050
+ }
1051
+
1052
+ .model-card-metric-value {
1053
+ font-family: monospace;
1054
+ font-weight: 700;
1055
+ }
1056
+
1057
+ .model-card-error-status {
1058
+ display: flex;
1059
+ align-items: center;
1060
+ gap: 0.25rem;
1061
+ color: var(--red-500);
1062
+ font-weight: 700;
1063
+ font-size: 0.875rem;
1064
+ margin-bottom: 0.25rem;
1065
+ }
1066
+
1067
+ .model-card-details {
1068
+ overflow: hidden;
1069
+ transition: all 0.3s ease-in-out;
1070
+ max-height: 0;
1071
+ opacity: 0;
1072
+ }
1073
+
1074
+ .model-card-details.expanded {
1075
+ max-height: 500px;
1076
+ opacity: 1;
1077
+ margin-top: 1rem;
1078
+ }
1079
+
1080
+ .model-card-details-content {
1081
+ padding-top: 1rem;
1082
+ border-top: 1px solid var(--gray-800);
1083
+ }
1084
+
1085
+ .model-card-error-msg {
1086
+ margin-bottom: 0.75rem;
1087
+ padding: 0.5rem;
1088
+ background: rgba(69, 10, 10, 0.3);
1089
+ border: 1px solid rgba(127, 29, 29, 0.5);
1090
+ border-radius: 4px;
1091
+ color: #fca5a5;
1092
+ font-size: 0.75rem;
1093
+ font-family: monospace;
1094
+ }
1095
+
1096
+ .model-card-details-grid {
1097
+ display: grid;
1098
+ grid-template-columns: 1fr;
1099
+ gap: 1rem;
1100
+ }
1101
+
1102
+ @media (min-width: 768px) {
1103
+ .model-card-details-grid {
1104
+ grid-template-columns: repeat(2, 1fr);
1105
+ }
1106
+ }
1107
+
1108
+ .model-card-details-section h4 {
1109
+ font-size: 0.75rem;
1110
+ font-weight: 600;
1111
+ text-transform: uppercase;
1112
+ letter-spacing: 0.05em;
1113
+ color: var(--gray-500);
1114
+ margin-bottom: 0.5rem;
1115
+ }
1116
+
1117
+ .model-card-details-section p {
1118
+ font-size: 0.875rem;
1119
+ color: var(--gray-300);
1120
+ line-height: 1.6;
1121
+ }
1122
+
1123
+ .model-card-details-section ul {
1124
+ list-style: none;
1125
+ font-size: 0.75rem;
1126
+ font-family: monospace;
1127
+ color: var(--gray-400);
1128
+ }
1129
+
1130
+ .model-card-details-section li {
1131
+ display: flex;
1132
+ justify-content: space-between;
1133
+ padding: 0.25rem 0;
1134
+ }
1135
+
1136
+ .model-card-details-section li span:last-child {
1137
+ color: white;
1138
+ }
1139
+
1140
+ .model-card-toggle {
1141
+ width: 100%;
1142
+ margin-top: 0.75rem;
1143
+ display: flex;
1144
+ align-items: center;
1145
+ justify-content: center;
1146
+ gap: 0.25rem;
1147
+ padding: 0.25rem;
1148
+ font-size: 0.75rem;
1149
+ font-weight: 500;
1150
+ text-transform: uppercase;
1151
+ letter-spacing: 0.05em;
1152
+ color: var(--gray-600);
1153
+ background: none;
1154
+ border: none;
1155
+ cursor: pointer;
1156
+ transition: color 0.2s;
1157
+ }
1158
+
1159
+ .model-card-toggle:hover {
1160
+ color: var(--gray-300);
1161
+ }
1162
+
1163
+ .empty-state {
1164
+ text-align: center;
1165
+ padding: 5rem 1rem;
1166
+ color: var(--gray-500);
1167
+ border: 1px dashed var(--gray-800);
1168
+ border-radius: 12px;
1169
+ }
1170
+
1171
+ .loading-state {
1172
+ text-align: center;
1173
+ padding: 5rem 1rem;
1174
+ color: var(--gray-500);
1175
+ }
1176
+
1177
+ /* Modal */
1178
+ .modal-overlay {
1179
+ position: fixed;
1180
+ inset: 0;
1181
+ z-index: 50;
1182
+ display: flex;
1183
+ align-items: center;
1184
+ justify-content: center;
1185
+ padding: 1rem;
1186
+ background: rgba(0, 0, 0, 0.8);
1187
+ backdrop-filter: blur(4px);
1188
+ animation: fadeIn 0.2s ease-out;
1189
+ }
1190
+
1191
+ .modal-content {
1192
+ background: var(--surface);
1193
+ border: 1px solid var(--gray-700);
1194
+ border-radius: 16px;
1195
+ width: 100%;
1196
+ max-width: 500px;
1197
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
1198
+ overflow: hidden;
1199
+ position: relative;
1200
+ }
1201
+
1202
+ .modal-close {
1203
+ position: absolute;
1204
+ top: 1rem;
1205
+ right: 1rem;
1206
+ background: none;
1207
+ border: none;
1208
+ color: var(--gray-400);
1209
+ cursor: pointer;
1210
+ transition: color 0.2s;
1211
+ }
1212
+
1213
+ .modal-close:hover {
1214
+ color: white;
1215
+ }
1216
+
1217
+ .modal-body {
1218
+ padding: 1.5rem;
1219
+ }
1220
+
1221
+ .modal-header {
1222
+ display: flex;
1223
+ align-items: center;
1224
+ gap: 0.75rem;
1225
+ margin-bottom: 1.5rem;
1226
+ }
1227
+
1228
+ .modal-icon {
1229
+ width: 40px;
1230
+ height: 40px;
1231
+ border-radius: 50%;
1232
+ background: rgba(99, 102, 241, 0.2);
1233
+ display: flex;
1234
+ align-items: center;
1235
+ justify-content: center;
1236
+ color: var(--primary);
1237
+ }
1238
+
1239
+ .modal-title {
1240
+ font-size: 1.25rem;
1241
+ font-weight: 700;
1242
+ color: white;
1243
+ }
1244
+
1245
+ .modal-steps {
1246
+ display: flex;
1247
+ flex-direction: column;
1248
+ gap: 1.5rem;
1249
+ }
1250
+
1251
+ .modal-step {
1252
+ display: flex;
1253
+ gap: 1rem;
1254
+ }
1255
+
1256
+ .modal-step-number {
1257
+ flex-shrink: 0;
1258
+ width: 32px;
1259
+ height: 32px;
1260
+ border-radius: 50%;
1261
+ background: var(--gray-800);
1262
+ border: 1px solid var(--gray-700);
1263
+ display: flex;
1264
+ align-items: center;
1265
+ justify-content: center;
1266
+ font-weight: 700;
1267
+ font-size: 0.875rem;
1268
+ color: var(--gray-300);
1269
+ }
1270
+
1271
+ .modal-step-content h3 {
1272
+ font-weight: 600;
1273
+ color: white;
1274
+ margin-bottom: 0.25rem;
1275
+ }
1276
+
1277
+ .modal-step-content p {
1278
+ font-size: 0.875rem;
1279
+ color: var(--gray-400);
1280
+ line-height: 1.6;
1281
+ }
1282
+
1283
+ .modal-step-content a {
1284
+ color: var(--primary);
1285
+ text-decoration: none;
1286
+ }
1287
+
1288
+ .modal-step-content a:hover {
1289
+ text-decoration: underline;
1290
+ }
1291
+
1292
+ .modal-footer {
1293
+ margin-top: 2rem;
1294
+ padding-top: 1.5rem;
1295
+ border-top: