Hugging Face's logo

Spaces:
ScottzillaSystems
/
anycoder-c542a972
Running

App Files Community
SatyaprakashR commited on
Commit
83ff781
·
verified ·
1 Parent(s): 1287cfc

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1477 -19
index.html CHANGED
@@ -1,19 +1,1477 @@
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>Local LLM Manager - Free AI on Your PC</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
11
+ <style>
12
+ :root {
13
+ --primary: #6366f1;
14
+ --primary-dark: #4f46e5;
15
+ --primary-light: #818cf8;
16
+ --secondary: #06b6d4;
17
+ --accent: #f59e0b;
18
+ --success: #10b981;
19
+ --danger: #ef4444;
20
+ --warning: #f59e0b;
21
+ --bg-primary: #0f0f23;
22
+ --bg-secondary: #1a1a2e;
23
+ --bg-tertiary: #16213e;
24
+ --bg-card: #1e293b;
25
+ --text-primary: #f1f5f9;
26
+ --text-secondary: #94a3b8;
27
+ --text-muted: #64748b;
28
+ --border: #334155;
29
+ --gradient-1: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
30
+ --gradient-2: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
31
+ --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
32
+ --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
33
+ }
34
+
35
+ * {
36
+ margin: 0;
37
+ padding: 0;
38
+ box-sizing: border-box;
39
+ }
40
+
41
+ html {
42
+ scroll-behavior: smooth;
43
+ }
44
+
45
+ body {
46
+ font-family: 'Inter', sans-serif;
47
+ background: var(--bg-primary);
48
+ color: var(--text-primary);
49
+ min-height: 100vh;
50
+ overflow-x: hidden;
51
+ }
52
+
53
+ /* Animated Background */
54
+ .bg-animation {
55
+ position: fixed;
56
+ top: 0;
57
+ left: 0;
58
+ width: 100%;
59
+ height: 100%;
60
+ z-index: -1;
61
+ overflow: hidden;
62
+ }
63
+
64
+ .bg-animation::before {
65
+ content: '';
66
+ position: absolute;
67
+ top: -50%;
68
+ left: -50%;
69
+ width: 200%;
70
+ height: 200%;
71
+ background:
72
+ radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
73
+ radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
74
+ radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
75
+ animation: bgFloat 20s ease-in-out infinite;
76
+ }
77
+
78
+ @keyframes bgFloat {
79
+ 0%, 100% { transform: translate(0, 0) rotate(0deg); }
80
+ 33% { transform: translate(30px, -30px) rotate(1deg); }
81
+ 66% { transform: translate(-20px, 20px) rotate(-1deg); }
82
+ }
83
+
84
+ /* Grid Pattern Overlay */
85
+ .grid-overlay {
86
+ position: fixed;
87
+ top: 0;
88
+ left: 0;
89
+ width: 100%;
90
+ height: 100%;
91
+ z-index: -1;
92
+ background-image:
93
+ linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
94
+ linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
95
+ background-size: 60px 60px;
96
+ }
97
+
98
+ /* Header */
99
+ .header {
100
+ position: fixed;
101
+ top: 0;
102
+ left: 0;
103
+ right: 0;
104
+ z-index: 1000;
105
+ background: rgba(15, 15, 35, 0.85);
106
+ backdrop-filter: blur(20px);
107
+ border-bottom: 1px solid var(--border);
108
+ padding: 0 2rem;
109
+ }
110
+
111
+ .header-inner {
112
+ max-width: 1400px;
113
+ margin: 0 auto;
114
+ display: flex;
115
+ align-items: center;
116
+ justify-content: space-between;
117
+ height: 64px;
118
+ }
119
+
120
+ .logo {
121
+ display: flex;
122
+ align-items: center;
123
+ gap: 0.75rem;
124
+ text-decoration: none;
125
+ }
126
+
127
+ .logo-icon {
128
+ width: 40px;
129
+ height: 40px;
130
+ background: var(--gradient-1);
131
+ border-radius: 12px;
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ font-size: 1.25rem;
136
+ color: white;
137
+ position: relative;
138
+ overflow: hidden;
139
+ }
140
+
141
+ .logo-icon::after {
142
+ content: '';
143
+ position: absolute;
144
+ inset: 0;
145
+ background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%);
146
+ animation: shimmer 3s infinite;
147
+ }
148
+
149
+ @keyframes shimmer {
150
+ 0% { transform: translateX(-100%); }
151
+ 100% { transform: translateX(100%); }
152
+ }
153
+
154
+ .logo-text {
155
+ font-size: 1.25rem;
156
+ font-weight: 700;
157
+ background: var(--gradient-1);
158
+ -webkit-background-clip: text;
159
+ -webkit-text-fill-color: transparent;
160
+ background-clip: text;
161
+ }
162
+
163
+ .header-nav {
164
+ display: flex;
165
+ align-items: center;
166
+ gap: 2rem;
167
+ }
168
+
169
+ .header-nav a {
170
+ color: var(--text-secondary);
171
+ text-decoration: none;
172
+ font-size: 0.875rem;
173
+ font-weight: 500;
174
+ transition: color 0.3s;
175
+ position: relative;
176
+ }
177
+
178
+ .header-nav a:hover {
179
+ color: var(--text-primary);
180
+ }
181
+
182
+ .header-nav a::after {
183
+ content: '';
184
+ position: absolute;
185
+ bottom: -4px;
186
+ left: 0;
187
+ width: 0;
188
+ height: 2px;
189
+ background: var(--gradient-1);
190
+ transition: width 0.3s;
191
+ }
192
+
193
+ .header-nav a:hover::after {
194
+ width: 100%;
195
+ }
196
+
197
+ .built-with {
198
+ display: flex;
199
+ align-items: center;
200
+ gap: 0.5rem;
201
+ padding: 0.5rem 1rem;
202
+ background: rgba(99, 102, 241, 0.1);
203
+ border: 1px solid rgba(99, 102, 241, 0.2);
204
+ border-radius: 100px;
205
+ color: var(--primary-light);
206
+ font-size: 0.75rem;
207
+ font-weight: 600;
208
+ text-decoration: none;
209
+ transition: all 0.3s;
210
+ }
211
+
212
+ .built-with:hover {
213
+ background: rgba(99, 102, 241, 0.2);
214
+ border-color: var(--primary);
215
+ transform: translateY(-1px);
216
+ }
217
+
218
+ .built-with i {
219
+ font-size: 0.875rem;
220
+ }
221
+
222
+ /* Hero Section */
223
+ .hero {
224
+ padding: 140px 2rem 80px;
225
+ text-align: center;
226
+ position: relative;
227
+ }
228
+
229
+ .hero-badge {
230
+ display: inline-flex;
231
+ align-items: center;
232
+ gap: 0.5rem;
233
+ padding: 0.5rem 1rem;
234
+ background: rgba(99, 102, 241, 0.1);
235
+ border: 1px solid rgba(99, 102, 241, 0.2);
236
+ border-radius: 100px;
237
+ font-size: 0.875rem;
238
+ color: var(--primary-light);
239
+ margin-bottom: 1.5rem;
240
+ animation: fadeInUp 0.6s ease-out;
241
+ }
242
+
243
+ .hero-badge i {
244
+ color: var(--accent);
245
+ }
246
+
247
+ .hero h1 {
248
+ font-size: clamp(2.5rem, 6vw, 4.5rem);
249
+ font-weight: 800;
250
+ line-height: 1.1;
251
+ margin-bottom: 1.5rem;
252
+ animation: fadeInUp 0.6s ease-out 0.1s both;
253
+ }
254
+
255
+ .hero h1 .gradient-text {
256
+ background: var(--gradient-1);
257
+ -webkit-background-clip: text;
258
+ -webkit-text-fill-color: transparent;
259
+ background-clip: text;
260
+ }
261
+
262
+ .hero p {
263
+ font-size: clamp(1rem, 2vw, 1.25rem);
264
+ color: var(--text-secondary);
265
+ max-width: 600px;
266
+ margin: 0 auto 2rem;
267
+ line-height: 1.7;
268
+ animation: fadeInUp 0.6s ease-out 0.2s both;
269
+ }
270
+
271
+ .hero-actions {
272
+ display: flex;
273
+ gap: 1rem;
274
+ justify-content: center;
275
+ flex-wrap: wrap;
276
+ animation: fadeInUp 0.6s ease-out 0.3s both;
277
+ }
278
+
279
+ .btn {
280
+ display: inline-flex;
281
+ align-items: center;
282
+ gap: 0.5rem;
283
+ padding: 0.875rem 1.75rem;
284
+ border-radius: 12px;
285
+ font-size: 0.9375rem;
286
+ font-weight: 600;
287
+ text-decoration: none;
288
+ transition: all 0.3s;
289
+ cursor: pointer;
290
+ border: none;
291
+ font-family: inherit;
292
+ }
293
+
294
+ .btn-primary {
295
+ background: var(--gradient-1);
296
+ color: white;
297
+ box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
298
+ }
299
+
300
+ .btn-primary:hover {
301
+ transform: translateY(-2px);
302
+ box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
303
+ }
304
+
305
+ .btn-secondary {
306
+ background: var(--bg-card);
307
+ color: var(--text-primary);
308
+ border: 1px solid var(--border);
309
+ }
310
+
311
+ .btn-secondary:hover {
312
+ background: var(--bg-tertiary);
313
+ border-color: var(--primary);
314
+ }
315
+
316
+ .btn-success {
317
+ background: var(--success);
318
+ color: white;
319
+ }
320
+
321
+ .btn-success:hover {
322
+ background: #059669;
323
+ transform: translateY(-2px);
324
+ }
325
+
326
+ @keyframes fadeInUp {
327
+ from {
328
+ opacity: 0;
329
+ transform: translateY(30px);
330
+ }
331
+ to {
332
+ opacity: 1;
333
+ transform: translateY(0);
334
+ }
335
+ }
336
+
337
+ /* Stats Bar */
338
+ .stats-bar {
339
+ display: flex;
340
+ justify-content: center;
341
+ gap: 3rem;
342
+ padding: 2rem;
343
+ flex-wrap: wrap;
344
+ animation: fadeInUp 0.6s ease-out 0.4s both;
345
+ }
346
+
347
+ .stat-item {
348
+ text-align: center;
349
+ }
350
+
351
+ .stat-value {
352
+ font-size: 2rem;
353
+ font-weight: 800;
354
+ background: var(--gradient-1);
355
+ -webkit-background-clip: text;
356
+ -webkit-text-fill-color: transparent;
357
+ background-clip: text;
358
+ }
359
+
360
+ .stat-label {
361
+ font-size: 0.875rem;
362
+ color: var(--text-muted);
363
+ margin-top: 0.25rem;
364
+ }
365
+
366
+ /* Main Content */
367
+ .container {
368
+ max-width: 1200px;
369
+ margin: 0 auto;
370
+ padding: 0 2rem;
371
+ }
372
+
373
+ .section {
374
+ padding: 4rem 0;
375
+ }
376
+
377
+ .section-header {
378
+ text-align: center;
379
+ margin-bottom: 3rem;
380
+ }
381
+
382
+ .section-header h2 {
383
+ font-size: 2rem;
384
+ font-weight: 700;
385
+ margin-bottom: 0.75rem;
386
+ }
387
+
388
+ .section-header p {
389
+ color: var(--text-secondary);
390
+ max-width: 500px;
391
+ margin: 0 auto;
392
+ }
393
+
394
+ /* Model Card */
395
+ .model-card {
396
+ background: var(--bg-card);
397
+ border: 1px solid var(--border);
398
+ border-radius: 20px;
399
+ padding: 2rem;
400
+ margin-bottom: 2rem;
401
+ position: relative;
402
+ overflow: hidden;
403
+ transition: all 0.3s;
404
+ }
405
+
406
+ .model-card::before {
407
+ content: '';
408
+ position: absolute;
409
+ top: 0;
410
+ left: 0;
411
+ right: 0;
412
+ height: 3px;
413
+ background: var(--gradient-1);
414
+ }
415
+
416
+ .model-card:hover {
417
+ border-color: var(--primary);
418
+ box-shadow: var(--shadow-glow);
419
+ }
420
+
421
+ .model-header {
422
+ display: flex;
423
+ align-items: flex-start;
424
+ gap: 1.5rem;
425
+ margin-bottom: 1.5rem;
426
+ flex-wrap: wrap;
427
+ }
428
+
429
+ .model-avatar {
430
+ width: 64px;
431
+ height: 64px;
432
+ background: var(--gradient-1);
433
+ border-radius: 16px;
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: center;
437
+ font-size: 1.75rem;
438
+ color: white;
439
+ flex-shrink: 0;
440
+ }
441
+
442
+ .model-info {
443
+ flex: 1;
444
+ min-width: 200px;
445
+ }
446
+
447
+ .model-name {
448
+ font-size: 1.5rem;
449
+ font-weight: 700;
450
+ margin-bottom: 0.25rem;
451
+ }
452
+
453
+ .model-meta {
454
+ display: flex;
455
+ gap: 1rem;
456
+ flex-wrap: wrap;
457
+ align-items: center;
458
+ }
459
+
460
+ .model-tag {
461
+ display: inline-flex;
462
+ align-items: center;
463
+ gap: 0.375rem;
464
+ padding: 0.25rem 0.75rem;
465
+ background: rgba(99, 102, 241, 0.1);
466
+ border-radius: 100px;
467
+ font-size: 0.75rem;
468
+ font-weight: 600;
469
+ color: var(--primary-light);
470
+ }
471
+
472
+ .model-tag.green {
473
+ background: rgba(16, 185, 129, 0.1);
474
+ color: var(--success);
475
+ }
476
+
477
+ .model-tag.orange {
478
+ background: rgba(245, 158, 11, 0.1);
479
+ color: var(--accent);
480
+ }
481
+
482
+ .model-description {
483
+ color: var(--text-secondary);
484
+ line-height: 1.7;
485
+ margin-bottom: 1.5rem;
486
+ }
487
+
488
+ /* Specs Grid */
489
+ .specs-grid {
490
+ display: grid;
491
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
492
+ gap: 1rem;
493
+ margin-bottom: 1.5rem;
494
+ }
495
+
496
+ .spec-item {
497
+ display: flex;
498
+ align-items: center;
499
+ gap: 0.875rem;
500
+ padding: 1rem;
501
+ background: var(--bg-tertiary);
502
+ border-radius: 12px;
503
+ border: 1px solid transparent;
504
+ transition: all 0.3s;
505
+ }
506
+
507
+ .spec-item:hover {
508
+ border-color: var(--primary);
509
+ background: rgba(99, 102, 241, 0.05);
510
+ }
511
+
512
+ .spec-icon {
513
+ width: 40px;
514
+ height: 40px;
515
+ background: rgba(99, 102, 241, 0.1);
516
+ border-radius: 10px;
517
+ display: flex;
518
+ align-items: center;
519
+ justify-content: center;
520
+ color: var(--primary-light);
521
+ font-size: 1rem;
522
+ }
523
+
524
+ .spec-details {
525
+ flex: 1;
526
+ }
527
+
528
+ .spec-label {
529
+ font-size: 0.75rem;
530
+ color: var(--text-muted);
531
+ text-transform: uppercase;
532
+ letter-spacing: 0.05em;
533
+ }
534
+
535
+ .spec-value {
536
+ font-size: 0.9375rem;
537
+ font-weight: 600;
538
+ color: var(--text-primary);
539
+ }
540
+
541
+ /* Progress Bar */
542
+ .progress-section {
543
+ margin-bottom: 1.5rem;
544
+ }
545
+
546
+ .progress-header {
547
+ display: flex;
548
+ justify-content: space-between;
549
+ align-items: center;
550
+ margin-bottom: 0.5rem;
551
+ }
552
+
553
+ .progress-label {
554
+ font-size: 0.875rem;
555
+ font-weight: 500;
556
+ }
557
+
558
+ .progress-value {
559
+ font-size: 0.875rem;
560
+ color: var(--text-muted);
561
+ }
562
+
563
+ .progress-bar {
564
+ height: 8px;
565
+ background: var(--bg-tertiary);
566
+ border-radius: 100px;
567
+ overflow: hidden;
568
+ }
569
+
570
+ .progress-fill {
571
+ height: 100%;
572
+ background: var(--gradient-1);
573
+ border-radius: 100px;
574
+ transition: width 0.5s ease;
575
+ position: relative;
576
+ }
577
+
578
+ .progress-fill::after {
579
+ content: '';
580
+ position: absolute;
581
+ top: 0;
582
+ left: 0;
583
+ right: 0;
584
+ bottom: 0;
585
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
586
+ animation: progressShine 2s infinite;
587
+ }
588
+
589
+ @keyframes progressShine {
590
+ 0% { transform: translateX(-100%); }
591
+ 100% { transform: translateX(100%); }
592
+ }
593
+
594
+ /* Action Buttons */
595
+ .model-actions {
596
+ display: flex;
597
+ gap: 0.75rem;
598
+ flex-wrap: wrap;
599
+ }
600
+
601
+ .model-actions .btn {
602
+ padding: 0.75rem 1.25rem;
603
+ font-size: 0.875rem;
604
+ }
605
+
606
+ /* Steps Section */
607
+ .steps-container {
608
+ display: grid;
609
+ gap: 1.5rem;
610
+ }
611
+
612
+ .step-card {
613
+ display: flex;
614
+ gap: 1.5rem;
615
+ padding: 1.5rem;
616
+ background: var(--bg-card);
617
+ border: 1px solid var(--border);
618
+ border-radius: 16px;
619
+ transition: all 0.3s;
620
+ }
621
+
622
+ .step-card:hover {
623
+ border-color: var(--primary);
624
+ transform: translateX(8px);
625
+ }
626
+
627
+ .step-number {
628
+ width: 48px;
629
+ height: 48px;
630
+ background: var(--gradient-1);
631
+ border-radius: 14px;
632
+ display: flex;
633
+ align-items: center;
634
+ justify-content: center;
635
+ font-size: 1.25rem;
636
+ font-weight: 700;
637
+ color: white;
638
+ flex-shrink: 0;
639
+ }
640
+
641
+ .step-content {
642
+ flex: 1;
643
+ }
644
+
645
+ .step-title {
646
+ font-size: 1.125rem;
647
+ font-weight: 600;
648
+ margin-bottom: 0.5rem;
649
+ }
650
+
651
+ .step-desc {
652
+ color: var(--text-secondary);
653
+ font-size: 0.9375rem;
654
+ line-height: 1.6;
655
+ margin-bottom: 1rem;
656
+ }
657
+
658
+ .code-block {
659
+ background: var(--bg-primary);
660
+ border: 1px solid var(--border);
661
+ border-radius: 12px;
662
+ overflow: hidden;
663
+ }
664
+
665
+ .code-header {
666
+ display: flex;
667
+ align-items: center;
668
+ justify-content: space-between;
669
+ padding: 0.75rem 1rem;
670
+ background: rgba(0,0,0,0.2);
671
+ border-bottom: 1px solid var(--border);
672
+ }
673
+
674
+ .code-lang {
675
+ font-size: 0.75rem;
676
+ color: var(--text-muted);
677
+ font-weight: 500;
678
+ text-transform: uppercase;
679
+ }
680
+
681
+ .copy-btn {
682
+ display: flex;
683
+ align-items: center;
684
+ gap: 0.375rem;
685
+ padding: 0.375rem 0.75rem;
686
+ background: transparent;
687
+ border: 1px solid var(--border);
688
+ border-radius: 6px;
689
+ color: var(--text-muted);
690
+ font-size: 0.75rem;
691
+ cursor: pointer;
692
+ transition: all 0.3s;
693
+ }
694
+
695
+ .copy-btn:hover {
696
+ border-color: var(--primary);
697
+ color: var(--primary-light);
698
+ }
699
+
700
+ .copy-btn.copied {
701
+ border-color: var(--success);
702
+ color: var(--success);
703
+ }
704
+
705
+ pre {
706
+ padding: 1rem;
707
+ overflow-x: auto;
708
+ font-family: 'JetBrains Mono', monospace;
709
+ font-size: 0.8125rem;
710
+ line-height: 1.7;
711
+ color: var(--text-primary);
712
+ }
713
+
714
+ pre .comment { color: var(--text-muted); }
715
+ pre .keyword { color: #c678dd; }
716
+ pre .string { color: #98c379; }
717
+ pre .function { color: #61afef; }
718
+ pre .number { color: #d19a66; }
719
+
720
+ /* Tools Grid */
721
+ .tools-grid {
722
+ display: grid;
723
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
724
+ gap: 1.5rem;
725
+ }
726
+
727
+ .tool-card {
728
+ background: var(--bg-card);
729
+ border: 1px solid var(--border);
730
+ border-radius: 16px;
731
+ padding: 1.5rem;
732
+ transition: all 0.3s;
733
+ position: relative;
734
+ overflow: hidden;
735
+ }
736
+
737
+ .tool-card::before {
738
+ content: '';
739
+ position: absolute;
740
+ top: 0;
741
+ left: 0;
742
+ right: 0;
743
+ height: 2px;
744
+ background: var(--gradient-1);
745
+ transform: scaleX(0);
746
+ transition: transform 0.3s;
747
+ }
748
+
749
+ .tool-card:hover {
750
+ border-color: var(--primary);
751
+ transform: translateY(-4px);
752
+ box-shadow: var(--shadow-glow);
753
+ }
754
+
755
+ .tool-card:hover::before {
756
+ transform: scaleX(1);
757
+ }
758
+
759
+ .tool-icon {
760
+ width: 48px;
761
+ height: 48px;
762
+ background: rgba(99, 102, 241, 0.1);
763
+ border-radius: 12px;
764
+ display: flex;
765
+ align-items: center;
766
+ justify-content: center;
767
+ font-size: 1.25rem;
768
+ color: var(--primary-light);
769
+ margin-bottom: 1rem;
770
+ }
771
+
772
+ .tool-name {
773
+ font-size: 1.125rem;
774
+ font-weight: 600;
775
+ margin-bottom: 0.5rem;
776
+ }
777
+
778
+ .tool-desc {
779
+ color: var(--text-secondary);
780
+ font-size: 0.9375rem;
781
+ line-height: 1.6;
782
+ margin-bottom: 1rem;
783
+ }
784
+
785
+ .tool-tags {
786
+ display: flex;
787
+ gap: 0.5rem;
788
+ flex-wrap: wrap;
789
+ }
790
+
791
+ .tool-tag {
792
+ padding: 0.25rem 0.625rem;
793
+ background: var(--bg-tertiary);
794
+ border-radius: 6px;
795
+ font-size: 0.75rem;
796
+ color: var(--text-muted);
797
+ }
798
+
799
+ /* Comparison Table */
800
+ .compare-table {
801
+ width: 100%;
802
+ border-collapse: collapse;
803
+ background: var(--bg-card);
804
+ border-radius: 16px;
805
+ overflow: hidden;
806
+ border: 1px solid var(--border);
807
+ }
808
+
809
+ .compare-table th,
810
+ .compare-table td {
811
+ padding: 1rem 1.5rem;
812
+ text-align: left;
813
+ border-bottom: 1px solid var(--border);
814
+ }
815
+
816
+ .compare-table th {
817
+ background: var(--bg-tertiary);
818
+ font-size: 0.75rem;
819
+ font-weight: 600;
820
+ text-transform: uppercase;
821
+ letter-spacing: 0.05em;
822
+ color: var(--text-muted);
823
+ }
824
+
825
+ .compare-table td {
826
+ font-size: 0.9375rem;
827
+ }
828
+
829
+ .compare-table tr:last-child td {
830
+ border-bottom: none;
831
+ }
832
+
833
+ .compare-table .check {
834
+ color: var(--success);
835
+ }
836
+
837
+ .compare-table .cross {
838
+ color: var(--danger);
839
+ }
840
+
841
+ .compare-table .highlight {
842
+ background: rgba(99, 102, 241, 0.05);
843
+ }
844
+
845
+ /* FAQ */
846
+ .faq-list {
847
+ display: grid;
848
+ gap: 1rem;
849
+ }
850
+
851
+ .faq-item {
852
+ background: var(--bg-card);
853
+ border: 1px solid var(--border);
854
+ border-radius: 16px;
855
+ overflow: hidden;
856
+ transition: all 0.3s;
857
+ }
858
+
859
+ .faq-item:hover {
860
+ border-color: var(--primary);
861
+ }
862
+
863
+ .faq-question {
864
+ display: flex;
865
+ align-items: center;
866
+ justify-content: space-between;
867
+ padding: 1.25rem 1.5rem;
868
+ cursor: pointer;
869
+ font-weight: 600;
870
+ font-size: 0.9375rem;
871
+ }
872
+
873
+ .faq-question i {
874
+ transition: transform 0.3s;
875
+ color: var(--text-muted);
876
+ }
877
+
878
+ .faq-item.active .faq-question i {
879
+ transform: rotate(180deg);
880
+ color: var(--primary-light);
881
+ }
882
+
883
+ .faq-answer {
884
+ max-height: 0;
885
+ overflow: hidden;
886
+ transition: max-height 0.3s ease-out;
887
+ }
888
+
889
+ .faq-item.active .faq-answer {
890
+ max-height: 500px;
891
+ }
892
+
893
+ .faq-answer-inner {
894
+ padding: 0 1.5rem 1.25rem;
895
+ color: var(--text-secondary);
896
+ line-height: 1.7;
897
+ font-size: 0.9375rem;
898
+ }
899
+
900
+ /* Footer */
901
+ .footer {
902
+ text-align: center;
903
+ padding: 3rem 2rem;
904
+ border-top: 1px solid var(--border);
905
+ color: var(--text-muted);
906
+ font-size: 0.875rem;
907
+ }
908
+
909
+ .footer a {
910
+ color: var(--primary-light);
911
+ text-decoration: none;
912
+ }
913
+
914
+ .footer a:hover {
915
+ text-decoration: underline;
916
+ }
917
+
918
+ /* Toast Notification */
919
+ .toast-container {
920
+ position: fixed;
921
+ bottom: 2rem;
922
+ right: 2rem;
923
+ z-index: 2000;
924
+ display: flex;
925
+ flex-direction: column;
926
+ gap: 0.75rem;
927
+ }
928
+
929
+ .toast {
930
+ display: flex;
931
+ align-items: center;
932
+ gap: 0.75rem;
933
+ padding: 1rem 1.5rem;
934
+ background: var(--bg-card);
935
+ border: 1px solid var(--border);
936
+ border-radius: 12px;
937
+ box-shadow: var(--shadow-card);
938
+ animation: toastIn 0.3s ease-out;
939
+ min-width: 280px;
940
+ }
941
+
942
+ .toast.success {
943
+ border-color: var(--success);
944
+ }
945
+
946
+ .toast.error {
947
+ border-color: var(--danger);
948
+ }
949
+
950
+ @keyframes toastIn {
951
+ from {
952
+ opacity: 0;
953
+ transform: translateX(100%);
954
+ }
955
+ to {
956
+ opacity: 1;
957
+ transform: translateX(0);
958
+ }
959
+ }
960
+
961
+ @keyframes toastOut {
962
+ to {
963
+ opacity: 0;
964
+ transform: translateX(100%);
965
+ }
966
+ }
967
+
968
+ .toast.hiding {
969
+ animation: toastOut 0.3s ease-in forwards;
970
+ }
971
+
972
+ /* Scrollbar */
973
+ ::-webkit-scrollbar {
974
+ width: 8px;
975
+ height: 8px;
976
+ }
977
+
978
+ ::-webkit-scrollbar-track {
979
+ background: var(--bg-primary);
980
+ }
981
+
982
+ ::-webkit-scrollbar-thumb {
983
+ background: var(--border);
984
+ border-radius: 4px;
985
+ }
986
+
987
+ ::-webkit-scrollbar-thumb:hover {
988
+ background: var(--text-muted);
989
+ }
990
+
991
+ /* Responsive */
992
+ @media (max-width: 768px) {
993
+ .header-nav {
994
+ display: none;
995
+ }
996
+
997
+ .hero {
998
+ padding: 120px 1.5rem 60px;
999
+ }
1000
+
1001
+ .stats-bar {
1002
+ gap: 1.5rem;
1003
+ }
1004
+
1005
+ .container {
1006
+ padding: 0 1rem;
1007
+ }
1008
+
1009
+ .model-header {
1010
+ flex-direction: column;
1011
+ align-items: flex-start;
1012
+ }
1013
+
1014
+ .compare-table {
1015
+ font-size: 0.875rem;
1016
+ }
1017
+
1018
+ .compare-table th,
1019
+ .compare-table td {
1020
+ padding: 0.75rem 1rem;
1021
+ }
1022
+
1023
+ .step-card {
1024
+ flex-direction: column;
1025
+ }
1026
+ }
1027
+
1028
+ /* Terminal Animation */
1029
+ .terminal {
1030
+ background: var(--bg-primary);
1031
+ border-radius: 16px;
1032
+ overflow: hidden;
1033
+ border: 1px solid var(--border);
1034
+ font-family: 'JetBrains Mono', monospace;
1035
+ }
1036
+
1037
+ .terminal-header {
1038
+ display: flex;
1039
+ align-items: center;
1040
+ gap: 0.5rem;
1041
+ padding: 0.75rem 1rem;
1042
+ background: rgba(0,0,0,0.3);
1043
+ border-bottom: 1px solid var(--border);
1044
+ }
1045
+
1046
+ .terminal-dot {
1047
+ width: 12px;
1048
+ height: 12px;
1049
+ border-radius: 50%;
1050
+ }
1051
+
1052
+ .terminal-dot.red { background: #ff5f56; }
1053
+ .terminal-dot.yellow { background: #ffbd2e; }
1054
+ .terminal-dot.green { background: #27c93f; }
1055
+
1056
+ .terminal-title {
1057
+ margin-left: 0.5rem;
1058
+ font-size: 0.8125rem;
1059
+ color: var(--text-muted);
1060
+ }
1061
+
1062
+ .terminal-body {
1063
+ padding: 1rem;
1064
+ font-size: 0.8125rem;
1065
+ line-height: 1.8;
1066
+ color: var(--text-secondary);
1067
+ }
1068
+
1069
+ .terminal-line {
1070
+ display: flex;
1071
+ gap: 0.5rem;
1072
+ }
1073
+
1074
+ .terminal-prompt {
1075
+ color: var(--success);
1076
+ flex-shrink: 0;
1077
+ }
1078
+
1079
+ .terminal-command {
1080
+ color: var(--text-primary);
1081
+ }
1082
+
1083
+ .terminal-output {
1084
+ color: var(--text-muted);
1085
+ padding-left: 1.5rem;
1086
+ }
1087
+
1088
+ .cursor {
1089
+ display: inline-block;
1090
+ width: 8px;
1091
+ height: 16px;
1092
+ background: var(--primary);
1093
+ animation: blink 1s infinite;
1094
+ vertical-align: middle;
1095
+ }
1096
+
1097
+ @keyframes blink {
1098
+ 0%, 50% { opacity: 1; }
1099
+ 51%, 100% { opacity: 0; }
1100
+ }
1101
+
1102
+ /* Download Modal */
1103
+ .modal-overlay {
1104
+ position: fixed;
1105
+ inset: 0;
1106
+ background: rgba(0,0,0,0.7);
1107
+ backdrop-filter: blur(8px);
1108
+ z-index: 3000;
1109
+ display: flex;
1110
+ align-items: center;
1111
+ justify-content: center;
1112
+ padding: 2rem;
1113
+ opacity: 0;
1114
+ visibility: hidden;
1115
+ transition: all 0.3s;
1116
+ }
1117
+
1118
+ .modal-overlay.active {
1119
+ opacity: 1;
1120
+ visibility: visible;
1121
+ }
1122
+
1123
+ .modal {
1124
+ background: var(--bg-card);
1125
+ border: 1px solid var(--border);
1126
+ border-radius: 20px;
1127
+ max-width: 500px;
1128
+ width: 100%;
1129
+ padding: 2rem;
1130
+ transform: scale(0.9);
1131
+ transition: transform 0.3s;
1132
+ }
1133
+
1134
+ .modal-overlay.active .modal {
1135
+ transform: scale(1);
1136
+ }
1137
+
1138
+ .modal-header {
1139
+ display: flex;
1140
+ align-items: center;
1141
+ gap: 1rem;
1142
+ margin-bottom: 1.5rem;
1143
+ }
1144
+
1145
+ .modal-icon {
1146
+ width: 48px;
1147
+ height: 48px;
1148
+ background: rgba(99, 102, 241, 0.1);
1149
+ border-radius: 14px;
1150
+ display: flex;
1151
+ align-items: center;
1152
+ justify-content: center;
1153
+ color: var(--primary-light);
1154
+ font-size: 1.25rem;
1155
+ }
1156
+
1157
+ .modal-title {
1158
+ font-size: 1.25rem;
1159
+ font-weight: 700;
1160
+ }
1161
+
1162
+ .modal-desc {
1163
+ color: var(--text-secondary);
1164
+ margin-bottom: 1.5rem;
1165
+ line-height: 1.6;
1166
+ }
1167
+
1168
+ .modal-actions {
1169
+ display: flex;
1170
+ gap: 0.75rem;
1171
+ justify-content: flex-end;
1172
+ }
1173
+
1174
+ .modal-actions .btn {
1175
+ padding: 0.625rem 1.25rem;
1176
+ font-size: 0.875rem;
1177
+ }
1178
+
1179
+ /* GPU Visualizer */
1180
+ .gpu-visual {
1181
+ display: flex;
1182
+ gap: 0.5rem;
1183
+ margin-top: 0.5rem;
1184
+ }
1185
+
1186
+ .gpu-bar {
1187
+ flex: 1;
1188
+ height: 24px;
1189
+ background: var(--bg-tertiary);
1190
+ border-radius: 6px;
1191
+ position: relative;
1192
+ overflow: hidden;
1193
+ }
1194
+
1195
+ .gpu-bar-fill {
1196
+ position: absolute;
1197
+ inset: 0;
1198
+ border-radius: 6px;
1199
+ transition: all 0.5s;
1200
+ }
1201
+
1202
+ .gpu-bar-fill.green { background: var(--success); }
1203
+ .gpu-bar-fill.yellow { background: var(--accent); }
1204
+ .gpu-bar-fill.red { background: var(--danger); }
1205
+
1206
+ .gpu-bar-label {
1207
+ position: absolute;
1208
+ inset: 0;
1209
+ display: flex;
1210
+ align-items: center;
1211
+ justify-content: center;
1212
+ font-size: 0.625rem;
1213
+ font-weight: 600;
1214
+ color: white;
1215
+ text-shadow: 0 1px 2px rgba(0,0,0,0.5);
1216
+ }
1217
+ </style>
1218
+ </head>
1219
+ <body>
1220
+ <!-- Background Effects -->
1221
+ <div class="bg-animation"></div>
1222
+ <div class="grid-overlay"></div>
1223
+
1224
+ <!-- Header -->
1225
+ <header class="header">
1226
+ <div class="header-inner">
1227
+ <a href="#" class="logo">
1228
+ <div class="logo-icon">
1229
+ <i class="fas fa-brain"></i>
1230
+ </div>
1231
+ <span class="logo-text">LocalLLM</span>
1232
+ </a>
1233
+ <nav class="header-nav">
1234
+ <a href="#model">Model</a>
1235
+ <a href="#setup">Setup</a>
1236
+ <a href="#tools">Tools</a>
1237
+ <a href="#compare">Compare</a>
1238
+ <a href="#faq">FAQ</a>
1239
+ </nav>
1240
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
1241
+ <i class="fas fa-code"></i>
1242
+ Built with anycoder
1243
+ </a>
1244
+ </div>
1245
+ </header>
1246
+
1247
+ <!-- Hero -->
1248
+ <section class="hero">
1249
+ <div class="hero-badge">
1250
+ <i class="fas fa-star"></i>
1251
+ Qwen3.5-27B Claude-4.6 Opus Reasoning Distilled
1252
+ </div>
1253
+ <h1>
1254
+ Run <span class="gradient-text">Powerful AI</span><br>
1255
+ Completely Free on Your PC
1256
+ </h1>
1257
+ <p>
1258
+ No subscriptions, no API keys, no internet required. Download and run
1259
+ state-of-the-art language models locally with complete privacy.
1260
+ </p>
1261
+ <div class="hero-actions">
1262
+ <a href="#setup" class="btn btn-primary">
1263
+ <i class="fas fa-download"></i>
1264
+ Start Setup Guide
1265
+ </a>
1266
+ <a href="https://huggingface.co/Jackrong/Qwen3.5-27B-Claude-4.6-Opus-Reasoning-Distilled" target="_blank" class="btn btn-secondary">
1267
+ <i class="fas fa-external-link-alt"></i>
1268
+ View on HuggingFace
1269
+ </a>
1270
+ </div>
1271
+ </section>
1272
+
1273
+ <!-- Stats -->
1274
+ <div class="stats-bar">
1275
+ <div class="stat-item">
1276
+ <div class="stat-value">27B</div>
1277
+ <div class="stat-label">Parameters</div>
1278
+ </div>
1279
+ <div class="stat-item">
1280
+ <div class="stat-value">100%</div>
1281
+ <div class="stat-label">Free Forever</div>
1282
+ </div>
1283
+ <div class="stat-item">
1284
+ <div class="stat-value">Zero</div>
1285
+ <div class="stat-label">Data Sent to Cloud</div>
1286
+ </div>
1287
+ <div class="stat-item">
1288
+ <div class="stat-value">Offline</div>
1289
+ <div class="stat-label">Works Without Internet</div>
1290
+ </div>
1291
+ </div>
1292
+
1293
+ <!-- Main Content -->
1294
+ <main class="container">
1295
+ <!-- Model Section -->
1296
+ <section class="section" id="model">
1297
+ <div class="section-header">
1298
+ <h2>Target Model</h2>
1299
+ <p>The specific model you want to run locally on your machine</p>
1300
+ </div>
1301
+
1302
+ <div class="model-card">
1303
+ <div class="model-header">
1304
+ <div class="model-avatar">
1305
+ <i class="fas fa-robot"></i>
1306
+ </div>
1307
+ <div class="model-info">
1308
+ <div class="model-name">Qwen3.5-27B-Claude-4.6-Opus-Reasoning-Distilled</div>
1309
+ <div class="model-meta">
1310
+ <span class="model-tag"><i class="fas fa-code-branch"></i> Jackrong</span>
1311
+ <span class="model-tag green"><i class="fas fa-check-circle"></i> MIT License</span>
1312
+ <span class="model-tag orange"><i class="fas fa-fire"></i> Trending</span>
1313
+ </div>
1314
+ </div>
1315
+ </div>
1316
+
1317
+ <p class="model-description">
1318
+ A distilled variant of Qwen3.5 with 27 billion parameters, enhanced with reasoning
1319
+ capabilities inspired by Claude-4.6 Opus. This model offers exceptional performance
1320
+ in coding, mathematics, and complex reasoning tasks while being optimized for local
1321
+ deployment on consumer hardware.
1322
+ </p>
1323
+
1324
+ <div class="specs-grid">
1325
+ <div class="spec-item">
1326
+ <div class="spec-icon"><i class="fas fa-microchip"></i></div>
1327
+ <div class="spec-details">
1328
+ <div class="spec-label">Parameters</div>
1329
+ <div class="spec-value">27 Billion</div>
1330
+ </div>
1331
+ </div>
1332
+ <div class="spec-item">
1333
+ <div class="spec-icon"><i class="fas fa-memory"></i></div>
1334
+ <div class="spec-details">
1335
+ <div class="spec-label">VRAM Required</div>
1336
+ <div class="spec-value">16-24 GB</div>
1337
+ </div>
1338
+ </div>
1339
+ <div class="spec-item">
1340
+ <div class="spec-icon"><i class="fas fa-hdd"></i></div>
1341
+ <div class="spec-details">
1342
+ <div class="spec-label">Disk Space</div>
1343
+ <div class="spec-value">~54 GB (FP16)</div>
1344
+ </div>
1345
+ </div>
1346
+ <div class="spec-item">
1347
+ <div class="spec-icon"><i class="fas fa-tachometer-alt"></i></div>
1348
+ <div class="spec-details">
1349
+ <div class="spec-label">Quantization</div>
1350
+ <div class="spec-value">Q4_K_M, Q5_K_M, Q8_0</div>
1351
+ </div>
1352
+ </div>
1353
+ <div class="spec-item">
1354
+ <div class="spec-icon"><i class="fas fa-layer-group"></i></div>
1355
+ <div class="spec-details">
1356
+ <div class="spec-label">Architecture</div>
1357
+ <div class="spec-value">Qwen3.5 (Transformer)</div>
1358
+ </div>
1359
+ </div>
1360
+ <div class="spec-item">
1361
+ <div class="spec-icon"><i class="fas fa-globe"></i></div>
1362
+ <div class="spec-details">
1363
+ <div class="spec-label">Languages</div>
1364
+ <div class="spec-value">Multilingual</div>
1365
+ </div>
1366
+ </div>
1367
+ </div>
1368
+
1369
+ <div class="progress-section">
1370
+ <div class="progress-header">
1371
+ <span class="progress-label">Recommended GPU Memory for Different Quantizations</span>
1372
+ </div>
1373
+ <div class="gpu-visual">
1374
+ <div class="gpu-bar">
1375
+ <div class="gpu-bar-fill green" style="width: 35%"></div>
1376
+ <span class="gpu-bar-label">Q4_K_M ~8GB</span>
1377
+ </div>
1378
+ <div class="gpu-bar">
1379
+ <div class="gpu-bar-fill yellow" style="width: 55%"></div>
1380
+ <span class="gpu-bar-label">Q5_K_M ~10GB</span>
1381
+ </div>
1382
+ <div class="gpu-bar">
1383
+ <div class="gpu-bar-fill red" style="width: 85%"></div>
1384
+ <span class="gpu-bar-label">Q8_0 ~16GB</span>
1385
+ </div>
1386
+ </div>
1387
+ </div>
1388
+
1389
+ <div class="model-actions">
1390
+ <button class="btn btn-primary" onclick="showDownloadModal()">
1391
+ <i class="fas fa-download"></i>
1392
+ Download Model
1393
+ </button>
1394
+ <button class="btn btn-secondary" onclick="copyToClipboard('https://huggingface.co/Jackrong/Qwen3.5-27B-Claude-4.6-Opus-Reasoning-Distilled', 'Model URL copied!')">
1395
+ <i class="fas fa-link"></i>
1396
+ Copy URL
1397
+ </button>
1398
+ <a href="https://huggingface.co/Jackrong/Qwen3.5-27B-Claude-4.6-Opus-Reasoning-Distilled/blob/main/README.md" target="_blank" class="btn btn-secondary">
1399
+ <i class="fas fa-book"></i>
1400
+ Documentation
1401
+ </a>
1402
+ </div>
1403
+ </div>
1404
+ </section>
1405
+
1406
+ <!-- Setup Guide -->
1407
+ <section class="section" id="setup">
1408
+ <div class="section-header">
1409
+ <h2>Step-by-Step Setup Guide</h2>
1410
+ <p>Follow these steps to get your model running locally</p>
1411
+ </div>
1412
+
1413
+ <div class="steps-container">
1414
+ <!-- Step 1 -->
1415
+ <div class="step-card">
1416
+ <div class="step-number">1</div>
1417
+ <div class="step-content">
1418
+ <div class="step-title">Install Ollama (Recommended for Beginners)</div>
1419
+ <p class="step-desc">
1420
+ Ollama is the easiest way to run LLMs locally. It handles model management,
1421
+ GPU acceleration, and provides a simple API.
1422
+ </p>
1423
+ <div class="code-block">
1424
+ <div class="code-header">
1425
+ <span class="code-lang">Windows PowerShell</span>
1426
+ <button class="copy-btn" onclick="copyCode(this)">
1427
+ <i class="fas fa-copy"></i> Copy
1428
+ </button>
1429
+ </div>
1430
+ <pre># Download from https://ollama.com/download
1431
+ # Or use winget
1432
+ winget install Ollama.Ollama
1433
+
1434
+ # Verify installation
1435
+ ollama --version</pre>
1436
+ </div>
1437
+ </div>
1438
+ </div>
1439
+
1440
+ <!-- Step 2 -->
1441
+ <div class="step-card">
1442
+ <div class="step-number">2</div>
1443
+ <div class="step-content">
1444
+ <div class="step-title">Alternative: Install LM Studio</div>
1445
+ <p class="step-desc">
1446
+ LM Studio provides a beautiful GUI for running LLMs. Perfect if you prefer
1447
+ a visual interface over command line.
1448
+ </p>
1449
+ <div class="code-block">
1450
+ <div class="code-header">
1451
+ <span class="code-lang">Download</span>
1452
+ <button class="copy-btn" onclick="copyToClipboard('https://lmstudio.ai', 'URL copied!')">
1453
+ <i class="fas fa-copy"></i> Copy
1454
+ </button>
1455
+ </div>
1456
+ <pre># Download from: https://lmstudio.ai
1457
+ # Or use:
1458
+ winget install ElementLabs.LMStudio
1459
+
1460
+ # Features:
1461
+ # - One-click model downloads
1462
+ # - Built-in chat interface
1463
+ # - Local API server
1464
+ # - GPU/CPU fallback</pre>
1465
+ </div>
1466
+ </div>
1467
+ </div>
1468
+
1469
+ <!-- Step 3 -->
1470
+ <div class="step-card">
1471
+ <div class="step-number">3</div>
1472
+ <div class="step-content">
1473
+ <div class="step-title">Download the Model (GGUF Format)</div>
1474
+ <p class="step-desc">
1475
+ Download the quantized GGUF file. Q4_K_M offers the best balance of quality
1476
+ and speed for most GPUs.
1477
+ </