Hugging Face's logo

Spaces:
dispatchAI
/
dispatch-ai-website
Running

App Files Community
3morixd commited on
Commit
51163a3
·
verified ·
1 Parent(s): 69ac337

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +833 -18
index.html CHANGED
@@ -1,19 +1,834 @@
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>Dispatch AI — Intelligence at the Speed of Need</title>
7
+ <meta name="description" content="Dispatch AI builds small, powerful AI models for mobile and edge devices. Open-source, phone-tested, runs everywhere.">
8
+ <link rel="icon" href="brand-assets/favicon/favicon.ico">
9
+ <link rel="apple-touch-icon" href="brand-assets/app/apple-touch-icon-180.png">
10
+
11
+ <!-- Fonts -->
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
14
+
15
+ <style>
16
+ :root {
17
+ --ink: #0A0F1A;
18
+ --ink-light: #111827;
19
+ --ink-card: #151B2E;
20
+ --off-white: #F5F7FA;
21
+ --electric-blue: #2E6BFF;
22
+ --cyan: #1FE0E6;
23
+ --gray: #6B7280;
24
+ --gray-light: #9CA3AF;
25
+ --border: rgba(46, 107, 255, 0.15);
26
+ --glow-blue: rgba(46, 107, 255, 0.3);
27
+ --glow-cyan: rgba(31, 224, 230, 0.2);
28
+ }
29
+
30
+ * { margin: 0; padding: 0; box-sizing: border-box; }
31
+
32
+ body {
33
+ font-family: 'Space Grotesk', sans-serif;
34
+ background: var(--ink);
35
+ color: var(--off-white);
36
+ overflow-x: hidden;
37
+ line-height: 1.6;
38
+ }
39
+
40
+ .mono { font-family: 'JetBrains Mono', monospace; }
41
+
42
+ /* ── ANIMATED BACKGROUND ── */
43
+ .bg-grid {
44
+ position: fixed;
45
+ top: 0; left: 0;
46
+ width: 100%; height: 100%;
47
+ background-image:
48
+ linear-gradient(rgba(46, 107, 255, 0.03) 1px, transparent 1px),
49
+ linear-gradient(90deg, rgba(46, 107, 255, 0.03) 1px, transparent 1px);
50
+ background-size: 50px 50px;
51
+ z-index: 0;
52
+ pointer-events: none;
53
+ }
54
+
55
+ .bg-glow {
56
+ position: fixed;
57
+ width: 600px; height: 600px;
58
+ border-radius: 50%;
59
+ filter: blur(120px);
60
+ z-index: 0;
61
+ pointer-events: none;
62
+ opacity: 0.15;
63
+ }
64
+ .bg-glow.blue { background: var(--electric-blue); top: -200px; right: -100px; }
65
+ .bg-glow.cyan { background: var(--cyan); bottom: -200px; left: -100px; }
66
+
67
+ /* ── NAVBAR ── */
68
+ nav {
69
+ position: fixed;
70
+ top: 0; left: 0; right: 0;
71
+ z-index: 100;
72
+ background: rgba(10, 15, 26, 0.85);
73
+ backdrop-filter: blur(20px);
74
+ border-bottom: 1px solid var(--border);
75
+ padding: 16px 0;
76
+ }
77
+
78
+ nav .container {
79
+ max-width: 1200px;
80
+ margin: 0 auto;
81
+ padding: 0 24px;
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: space-between;
85
+ }
86
+
87
+ .logo {
88
+ display: flex;
89
+ align-items: center;
90
+ gap: 12px;
91
+ text-decoration: none;
92
+ color: var(--off-white);
93
+ font-weight: 700;
94
+ font-size: 20px;
95
+ letter-spacing: -0.5px;
96
+ }
97
+
98
+ .logo svg { width: 32px; height: 32px; }
99
+
100
+ .nav-links {
101
+ display: flex;
102
+ gap: 32px;
103
+ list-style: none;
104
+ }
105
+
106
+ .nav-links a {
107
+ color: var(--gray-light);
108
+ text-decoration: none;
109
+ font-size: 15px;
110
+ font-weight: 500;
111
+ transition: color 0.2s;
112
+ }
113
+ .nav-links a:hover { color: var(--cyan); }
114
+
115
+ .nav-cta {
116
+ background: var(--electric-blue);
117
+ color: white;
118
+ padding: 10px 24px;
119
+ border-radius: 8px;
120
+ text-decoration: none;
121
+ font-weight: 600;
122
+ font-size: 14px;
123
+ transition: all 0.2s;
124
+ }
125
+ .nav-cta:hover { box-shadow: 0 0 30px var(--glow-blue); transform: translateY(-1px); }
126
+
127
+ /* ── HERO ── */
128
+ .hero {
129
+ position: relative;
130
+ z-index: 1;
131
+ min-height: 100vh;
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ text-align: center;
136
+ padding: 120px 24px 80px;
137
+ }
138
+
139
+ .hero-badge {
140
+ display: inline-flex;
141
+ align-items: center;
142
+ gap: 8px;
143
+ background: rgba(46, 107, 255, 0.1);
144
+ border: 1px solid var(--border);
145
+ padding: 8px 16px;
146
+ border-radius: 100px;
147
+ font-size: 13px;
148
+ color: var(--cyan);
149
+ margin-bottom: 32px;
150
+ font-family: 'JetBrains Mono', monospace;
151
+ }
152
+
153
+ .hero-badge .dot {
154
+ width: 8px; height: 8px;
155
+ background: var(--cyan);
156
+ border-radius: 50%;
157
+ animation: pulse 2s infinite;
158
+ }
159
+
160
+ @keyframes pulse {
161
+ 0%, 100% { opacity: 1; transform: scale(1); }
162
+ 50% { opacity: 0.5; transform: scale(1.3); }
163
+ }
164
+
165
+ .hero h1 {
166
+ font-size: clamp(40px, 7vw, 80px);
167
+ font-weight: 700;
168
+ line-height: 1.05;
169
+ letter-spacing: -2px;
170
+ margin-bottom: 24px;
171
+ max-width: 900px;
172
+ }
173
+
174
+ .hero h1 .gradient {
175
+ background: linear-gradient(135deg, var(--electric-blue), var(--cyan));
176
+ -webkit-background-clip: text;
177
+ -webkit-text-fill-color: transparent;
178
+ background-clip: text;
179
+ }
180
+
181
+ .hero p {
182
+ font-size: clamp(16px, 2vw, 20px);
183
+ color: var(--gray-light);
184
+ max-width: 600px;
185
+ margin: 0 auto 40px;
186
+ }
187
+
188
+ .hero-buttons {
189
+ display: flex;
190
+ gap: 16px;
191
+ justify-content: center;
192
+ flex-wrap: wrap;
193
+ }
194
+
195
+ .btn-primary {
196
+ background: var(--electric-blue);
197
+ color: white;
198
+ padding: 14px 32px;
199
+ border-radius: 10px;
200
+ text-decoration: none;
201
+ font-weight: 600;
202
+ font-size: 16px;
203
+ transition: all 0.3s;
204
+ border: none;
205
+ cursor: pointer;
206
+ }
207
+ .btn-primary:hover { box-shadow: 0 0 40px var(--glow-blue); transform: translateY(-2px); }
208
+
209
+ .btn-secondary {
210
+ background: transparent;
211
+ color: var(--off-white);
212
+ padding: 14px 32px;
213
+ border-radius: 10px;
214
+ text-decoration: none;
215
+ font-weight: 600;
216
+ font-size: 16px;
217
+ border: 1px solid var(--border);
218
+ transition: all 0.3s;
219
+ }
220
+ .btn-secondary:hover { border-color: var(--cyan); color: var(--cyan); }
221
+
222
+ /* ── STATS ── */
223
+ .stats {
224
+ position: relative;
225
+ z-index: 1;
226
+ display: flex;
227
+ justify-content: center;
228
+ gap: 64px;
229
+ padding: 0 24px 80px;
230
+ flex-wrap: wrap;
231
+ }
232
+
233
+ .stat {
234
+ text-align: center;
235
+ }
236
+
237
+ .stat-number {
238
+ font-size: 48px;
239
+ font-weight: 700;
240
+ background: linear-gradient(135deg, var(--electric-blue), var(--cyan));
241
+ -webkit-background-clip: text;
242
+ -webkit-text-fill-color: transparent;
243
+ background-clip: text;
244
+ }
245
+
246
+ .stat-label {
247
+ color: var(--gray);
248
+ font-size: 14px;
249
+ text-transform: uppercase;
250
+ letter-spacing: 1px;
251
+ margin-top: 4px;
252
+ }
253
+
254
+ /* ── SECTION ── */
255
+ section {
256
+ position: relative;
257
+ z-index: 1;
258
+ max-width: 1200px;
259
+ margin: 0 auto;
260
+ padding: 80px 24px;
261
+ }
262
+
263
+ .section-title {
264
+ font-size: clamp(28px, 4vw, 42px);
265
+ font-weight: 700;
266
+ text-align: center;
267
+ margin-bottom: 16px;
268
+ letter-spacing: -1px;
269
+ }
270
+
271
+ .section-subtitle {
272
+ color: var(--gray-light);
273
+ text-align: center;
274
+ max-width: 600px;
275
+ margin: 0 auto 60px;
276
+ font-size: 18px;
277
+ }
278
+
279
+ /* ── SERVICES GRID ── */
280
+ .services-grid {
281
+ display: grid;
282
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
283
+ gap: 24px;
284
+ }
285
+
286
+ .service-card {
287
+ background: var(--ink-card);
288
+ border: 1px solid var(--border);
289
+ border-radius: 16px;
290
+ padding: 32px;
291
+ transition: all 0.3s;
292
+ position: relative;
293
+ overflow: hidden;
294
+ }
295
+
296
+ .service-card::before {
297
+ content: '';
298
+ position: absolute;
299
+ top: 0; left: 0; right: 0;
300
+ height: 2px;
301
+ background: linear-gradient(90deg, var(--electric-blue), var(--cyan));
302
+ opacity: 0;
303
+ transition: opacity 0.3s;
304
+ }
305
+
306
+ .service-card:hover {
307
+ transform: translateY(-4px);
308
+ border-color: rgba(46, 107, 255, 0.4);
309
+ box-shadow: 0 20px 40px rgba(0,0,0,0.3);
310
+ }
311
+ .service-card:hover::before { opacity: 1; }
312
+
313
+ .service-icon {
314
+ font-size: 32px;
315
+ margin-bottom: 16px;
316
+ }
317
+
318
+ .service-card h3 {
319
+ font-size: 18px;
320
+ font-weight: 600;
321
+ margin-bottom: 8px;
322
+ }
323
+
324
+ .service-card p {
325
+ color: var(--gray-light);
326
+ font-size: 14px;
327
+ }
328
+
329
+ /* ── MODELS SECTION ── */
330
+ .models-grid {
331
+ display: grid;
332
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
333
+ gap: 20px;
334
+ }
335
+
336
+ .model-card {
337
+ background: var(--ink-card);
338
+ border: 1px solid var(--border);
339
+ border-radius: 12px;
340
+ padding: 24px;
341
+ transition: all 0.3s;
342
+ text-decoration: none;
343
+ color: inherit;
344
+ display: flex;
345
+ flex-direction: column;
346
+ }
347
+
348
+ .model-card:hover {
349
+ transform: translateY(-3px);
350
+ border-color: var(--cyan);
351
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
352
+ }
353
+
354
+ .model-tag {
355
+ display: inline-block;
356
+ font-size: 11px;
357
+ font-family: 'JetBrains Mono', monospace;
358
+ color: var(--cyan);
359
+ background: rgba(31, 224, 230, 0.1);
360
+ padding: 4px 8px;
361
+ border-radius: 4px;
362
+ margin-bottom: 12px;
363
+ align-self: flex-start;
364
+ }
365
+
366
+ .model-card h3 {
367
+ font-size: 16px;
368
+ font-weight: 600;
369
+ margin-bottom: 8px;
370
+ }
371
+
372
+ .model-meta {
373
+ display: flex;
374
+ gap: 16px;
375
+ margin-top: auto;
376
+ padding-top: 16px;
377
+ font-size: 13px;
378
+ color: var(--gray);
379
+ }
380
+
381
+ .model-meta span { display: flex; align-items: center; gap: 4px; }
382
+
383
+ .model-loading {
384
+ text-align: center;
385
+ padding: 60px;
386
+ color: var(--gray);
387
+ }
388
+
389
+ /* ── LICENSE SECTION ── */
390
+ .license-card {
391
+ background: var(--ink-card);
392
+ border: 1px solid var(--border);
393
+ border-radius: 20px;
394
+ padding: 48px;
395
+ max-width: 800px;
396
+ margin: 0 auto;
397
+ }
398
+
399
+ .license-card h3 {
400
+ font-size: 22px;
401
+ margin-bottom: 24px;
402
+ }
403
+
404
+ .license-activities {
405
+ display: grid;
406
+ grid-template-columns: 1fr 1fr;
407
+ gap: 12px;
408
+ margin-top: 24px;
409
+ }
410
+
411
+ .license-activity {
412
+ display: flex;
413
+ align-items: center;
414
+ gap: 10px;
415
+ font-size: 14px;
416
+ color: var(--gray-light);
417
+ }
418
+
419
+ .license-activity::before {
420
+ content: '▸';
421
+ color: var(--cyan);
422
+ }
423
+
424
+ .license-info {
425
+ display: grid;
426
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
427
+ gap: 20px;
428
+ margin-bottom: 32px;
429
+ }
430
+
431
+ .license-info-item .label {
432
+ font-size: 12px;
433
+ color: var(--gray);
434
+ text-transform: uppercase;
435
+ letter-spacing: 1px;
436
+ }
437
+
438
+ .license-info-item .value {
439
+ font-size: 15px;
440
+ color: var(--off-white);
441
+ margin-top: 4px;
442
+ font-weight: 500;
443
+ }
444
+
445
+ /* ── FOOTER ── */
446
+ footer {
447
+ position: relative;
448
+ z-index: 1;
449
+ border-top: 1px solid var(--border);
450
+ padding: 48px 24px 32px;
451
+ text-align: center;
452
+ }
453
+
454
+ footer .logo { justify-content: center; margin-bottom: 16px; }
455
+
456
+ footer p {
457
+ color: var(--gray);
458
+ font-size: 14px;
459
+ }
460
+
461
+ footer .links {
462
+ display: flex;
463
+ gap: 24px;
464
+ justify-content: center;
465
+ margin: 16px 0;
466
+ }
467
+
468
+ footer .links a {
469
+ color: var(--gray-light);
470
+ text-decoration: none;
471
+ font-size: 14px;
472
+ transition: color 0.2s;
473
+ }
474
+ footer .links a:hover { color: var(--cyan); }
475
+
476
+ /* ── CODE BLOCK ── */
477
+ .code-block {
478
+ background: var(--ink-light);
479
+ border: 1px solid var(--border);
480
+ border-radius: 12px;
481
+ padding: 24px;
482
+ font-family: 'JetBrains Mono', monospace;
483
+ font-size: 14px;
484
+ line-height: 1.8;
485
+ overflow-x: auto;
486
+ max-width: 700px;
487
+ margin: 0 auto;
488
+ }
489
+
490
+ .code-block .keyword { color: var(--electric-blue); }
491
+ .code-block .string { color: var(--cyan); }
492
+ .code-block .comment { color: var(--gray); }
493
+ .code-block .number { color: #FFB86C; }
494
+
495
+ /* ── PHONE FARM SECTION ── */
496
+ .farm-visual {
497
+ display: flex;
498
+ justify-content: center;
499
+ gap: 8px;
500
+ flex-wrap: wrap;
501
+ max-width: 800px;
502
+ margin: 0 auto;
503
+ }
504
+
505
+ .phone-icon {
506
+ width: 40px;
507
+ height: 70px;
508
+ background: var(--ink-card);
509
+ border: 1px solid var(--border);
510
+ border-radius: 6px;
511
+ position: relative;
512
+ transition: all 0.3s;
513
+ }
514
+
515
+ .phone-icon::before {
516
+ content: '';
517
+ position: absolute;
518
+ top: 4px; left: 4px; right: 4px;
519
+ height: 50px;
520
+ background: linear-gradient(180deg, rgba(46, 107, 255, 0.2), rgba(31, 224, 230, 0.1));
521
+ border-radius: 3px;
522
+ }
523
+
524
+ .phone-icon.active {
525
+ border-color: var(--cyan);
526
+ box-shadow: 0 0 15px var(--glow-cyan);
527
+ }
528
+
529
+ /* ── RESPONSIVE ── */
530
+ @media (max-width: 768px) {
531
+ .nav-links { display: none; }
532
+ .stats { gap: 32px; }
533
+ .license-activities { grid-template-columns: 1fr; }
534
+ .license-card { padding: 32px 24px; }
535
+ }
536
+ </style>
537
+ </head>
538
+ <body>
539
+ <!-- Background -->
540
+ <div class="bg-grid"></div>
541
+ <div class="bg-glow blue"></div>
542
+ <div class="bg-glow cyan"></div>
543
+
544
+ <!-- Logo SVG (inline for reuse) -->
545
+ <svg style="display:none">
546
+ <symbol id="dispatch-logo" viewBox="16 10 80 80">
547
+ <g fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round">
548
+ <path d="M32 21 V79"></path>
549
+ <path d="M32 21 H50 C70 21 80 34 80 50 C80 66 70 79 50 79 H32"></path>
550
+ </g>
551
+ <path d="M47 39 L59 50 L47 61" fill="none" stroke="#1FE0E6" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"></path>
552
+ </symbol>
553
+ </svg>
554
+
555
+ <!-- NAVBAR -->
556
+ <nav>
557
+ <div class="container">
558
+ <a href="/" class="logo">
559
+ <svg><use href="#dispatch-logo"/></svg>
560
+ Dispatch AI
561
+ </a>
562
+ <ul class="nav-links">
563
+ <li><a href="#models">Models</a></li>
564
+ <li><a href="#services">Services</a></li>
565
+ <li><a href="#phone-farm">Phone Farm</a></li>
566
+ <li><a href="#about">About</a></li>
567
+ </ul>
568
+ <a href="https://huggingface.co/dispatchAI" target="_blank" class="nav-cta">View on HuggingFace →</a>
569
+ </div>
570
+ </nav>
571
+
572
+ <!-- HERO -->
573
+ <div class="hero">
574
+ <div>
575
+ <div class="hero-badge">
576
+ <span class="dot"></span>
577
+ 18+ models shipped · 40-phone farm · $0 cost
578
+ </div>
579
+ <h1>
580
+ Intelligence that moves at the<br>
581
+ <span class="gradient">speed of need.</span>
582
+ </h1>
583
+ <p>
584
+ We build small, powerful AI models that run on mobile phones and edge devices.
585
+ Open-source. Phone-tested. Free for everyone.
586
+ </p>
587
+ <div class="hero-buttons">
588
+ <a href="#models" class="btn-primary">Explore Models</a>
589
+ <a href="https://huggingface.co/dispatchAI" target="_blank" class="btn-secondary">HuggingFace ↗</a>
590
+ </div>
591
+ </div>
592
+ </div>
593
+
594
+ <!-- STATS -->
595
+ <div class="stats">
596
+ <div class="stat">
597
+ <div class="stat-number" id="stat-models">18</div>
598
+ <div class="stat-label">Models Shipped</div>
599
+ </div>
600
+ <div class="stat">
601
+ <div class="stat-number">40</div>
602
+ <div class="stat-label">Phones Testing</div>
603
+ </div>
604
+ <div class="stat">
605
+ <div class="stat-number">16.3</div>
606
+ <div class="stat-label">Tokens/sec</div>
607
+ </div>
608
+ <div class="stat">
609
+ <div class="stat-number">$0</div>
610
+ <div class="stat-label">Cost</div>
611
+ </div>
612
+ </div>
613
+
614
+ <!-- MODELS SECTION -->
615
+ <section id="models">
616
+ <h2 class="section-title">Models</h2>
617
+ <p class="section-subtitle">Every model tested on real Samsung Galaxy S20 FE hardware before shipping.</p>
618
+ <div class="models-grid" id="models-grid">
619
+ <div class="model-loading">Loading models from HuggingFace...</div>
620
+ </div>
621
+ </section>
622
+
623
+ <!-- SERVICES SECTION -->
624
+ <section id="services">
625
+ <h2 class="section-title">What We Do</h2>
626
+ <p class="section-subtitle">Licensed AI company based in Sharjah Free Zone, UAE.</p>
627
+ <div class="services-grid">
628
+ <div class="service-card">
629
+ <div class="service-icon">🧠</div>
630
+ <h3>AI Development Services</h3>
631
+ <p>Custom AI model development, re-engineering, and optimization for mobile and edge deployment.</p>
632
+ </div>
633
+ <div class="service-card">
634
+ <div class="service-icon">⚛️</div>
635
+ <h3>Quantum Computing R&D</h3>
636
+ <p>Research and development in quantum computing algorithms and quantum-classical hybrid systems.</p>
637
+ </div>
638
+ <div class="service-card">
639
+ <div class="service-icon">🎓</div>
640
+ <h3>AI Training</h3>
641
+ <p>Model training, fine-tuning, knowledge distillation, and quantization for production deployment.</p>
642
+ </div>
643
+ <div class="service-card">
644
+ <div class="service-icon">💻</div>
645
+ <h3>Computer Systems Trading</h3>
646
+ <p>Trading of computer systems, software, and AI-optimized hardware for edge computing.</p>
647
+ </div>
648
+ <div class="service-card">
649
+ <div class="service-icon">🔌</div>
650
+ <h3>Electronic Components</h3>
651
+ <p>Trading of spare parts for electrical and electronic devices, including mobile AI hardware.</p>
652
+ </div>
653
+ <div class="service-card">
654
+ <div class="service-icon">🎬</div>
655
+ <h3>Digital Content Creation</h3>
656
+ <p>AI-powered content creation services — text, image, video, and audio generation for digital media.</p>
657
+ </div>
658
+ <div class="service-card">
659
+ <div class="service-icon">🛒</div>
660
+ <h3>E-Commerce</h3>
661
+ <p>AI models and tools available through our website for download and commercial use.</p>
662
+ </div>
663
+ <div class="service-card">
664
+ <div class="service-icon">📱</div>
665
+ <h3>Mobile-First AI</h3>
666
+ <p>Every model we ship is tested on real phones. If it doesn't run on a Snapdragon, we don't ship it.</p>
667
+ </div>
668
+ </div>
669
+ </section>
670
+
671
+ <!-- PHONE FARM SECTION -->
672
+ <section id="phone-farm">
673
+ <h2 class="section-title">40-Phone Test Farm</h2>
674
+ <p class="section-subtitle">Every model is benchmarked on real hardware before it ships to HuggingFace.</p>
675
+
676
+ <div class="farm-visual" id="farm-visual">
677
+ <!-- 40 phone icons generated by JS -->
678
+ </div>
679
+
680
+ <div style="margin-top: 48px;">
681
+ <div class="code-block">
682
+ <span class="comment"># Dispatch AI model test pipeline</span>
683
+ <span class="keyword">from</span> dispatch_ai <span class="keyword">import</span> HermesAgent
684
+
685
+ agent = <span class="keyword">HermesAgent</span>(config={
686
+ <span class="string">"hf_org"</span>: <span class="string">"dispatchAI"</span>,
687
+ <span class="string">"device_target"</span>: <span class="string">"mobile"</span>,
688
+ <span class="string">"model_size_budget_mb"</span>: <span class="number">2000</span>,
689
+ })
690
+
691
+ <span class="comment"># Downloads → Quantizes → Tests on phones → Ships to HF</span>
692
+ agent.run(<span class="string">"Build a mobile LLM under 2GB"</span>)
693
+ <span class="comment"># ✅ 16.3 tokens/sec on Snapdragon 865</span>
694
+ </div>
695
+ </div>
696
+ </section>
697
+
698
+ <!-- ABOUT / LICENSE SECTION -->
699
+ <section id="about">
700
+ <h2 class="section-title">About Dispatch AI</h2>
701
+ <p class="section-subtitle">A licensed AI company in Sharjah Research Technology and Innovation Free Zone.</p>
702
+
703
+ <div class="license-card">
704
+ <h3>📋 Company License</h3>
705
+
706
+ <div class="license-info">
707
+ <div class="license-info-item">
708
+ <div class="label">Company Name</div>
709
+ <div class="value">Dispatch AI (FZE)</div>
710
+ </div>
711
+ <div class="license-info-item">
712
+ <div class="label">License Number</div>
713
+ <div class="value">10818</div>
714
+ </div>
715
+ <div class="license-info-item">
716
+ <div class="label">Free Zone</div>
717
+ <div class="value">SRTI Free Zone, Sharjah</div>
718
+ </div>
719
+ <div class="license-info-item">
720
+ <div class="label">Address</div>
721
+ <div class="value">Block B - B54-092</div>
722
+ </div>
723
+ <div class="license-info-item">
724
+ <div class="label">Incorporated</div>
725
+ <div class="value">December 24, 2025</div>
726
+ </div>
727
+ <div class="license-info-item">
728
+ <div class="label">Expires</div>
729
+ <div class="value">December 23, 2026</div>
730
+ </div>
731
+ </div>
732
+
733
+ <h3 style="font-size: 16px; margin-top: 32px;">Licensed Activities</h3>
734
+ <div class="license-activities">
735
+ <div class="license-activity">Artificial Intelligence Developing Services</div>
736
+ <div class="license-activity">Research & Development in Quantum Computing</div>
737
+ <div class="license-activity">Artificial Intelligence Training</div>
738
+ <div class="license-activity">Trading of Computer Systems And Software</div>
739
+ <div class="license-activity">Trading of Spare Parts of Electrical & Electronic Devices</div>
740
+ <div class="license-activity">Digital Content Creation Services</div>
741
+ <div class="license-activity">E-Commerce Through Websites</div>
742
+ </div>
743
+ </div>
744
+ </section>
745
+
746
+ <!-- FOOTER -->
747
+ <footer>
748
+ <a href="/" class="logo">
749
+ <svg><use href="#dispatch-logo"/></svg>
750
+ Dispatch AI
751
+ </a>
752
+ <div class="links">
753
+ <a href="https://huggingface.co/dispatchAI" target="_blank">HuggingFace</a>
754
+ <a href="https://dispatchai.ai">dispatchai.ai</a>
755
+ <a href="#about">License</a>
756
+ <a href="#models">Models</a>
757
+ </div>
758
+ <p>© 2025 Dispatch AI (FZE) · SRTI Free Zone, Sharjah, UAE · License No. 10818</p>
759
+ <p style="margin-top: 8px; font-style: italic;">"The best model is the one that runs."</p>
760
+ </footer>
761
+
762
+ <script>
763
+ // ── FETCH MODELS FROM HUGGINGFACE API ──
764
+ async function loadModels() {
765
+ const grid = document.getElementById('models-grid');
766
+ try {
767
+ const resp = await fetch('https://huggingface.co/api/models?author=dispatchAI&limit=50');
768
+ const models = await resp.json();
769
+
770
+ // Update stat
771
+ document.getElementById('stat-models').textContent = models.length;
772
+
773
+ if (models.length === 0) {
774
+ grid.innerHTML = '<div class="model-loading">No models found.</div>';
775
+ return;
776
+ }
777
+
778
+ grid.innerHTML = models.map(m => {
779
+ const size = m.safetensors?.total ? (m.safetensors.total / 1024 / 1024).toFixed(0) + 'MB' : 'GGUF';
780
+ const downloads = (m.downloads || 0).toLocaleString();
781
+ const tags = m.tags || [];
782
+ const category = tags.find(t => t.includes('dispatch')) || 'AI Model';
783
+ const pipeline = m.pipeline_tag || 'text-generation';
784
+
785
+ return `
786
+ <a href="https://huggingface.co/${m.modelId}" target="_blank" class="model-card">
787
+ <span class="model-tag">${pipeline}</span>
788
+ <h3>${m.modelId.replace('dispatchAI/', '')}</h3>
789
+ <p style="color: var(--gray-light); font-size: 13px; margin-bottom: 12px;">
790
+ ${m.lastModified ? new Date(m.lastModified).toLocaleDateString() : ''}
791
+ </p>
792
+ <div class="model-meta">
793
+ <span>⬇ ${downloads}</span>
794
+ <span>📦 ${size}</span>
795
+ </div>
796
+ </a>
797
+ `;
798
+ }).join('');
799
+ } catch (e) {
800
+ grid.innerHTML = '<div class="model-loading">Visit <a href="https://huggingface.co/dispatchAI" style="color: var(--cyan)">huggingface.co/dispatchAI</a></div>';
801
+ }
802
+ }
803
+
804
+ // ── PHONE FARM VISUAL ──
805
+ function renderPhoneFarm() {
806
+ const farm = document.getElementById('farm-visual');
807
+ for (let i = 0; i < 40; i++) {
808
+ const phone = document.createElement('div');
809
+ phone.className = 'phone-icon';
810
+ if (i < 3) phone.classList.add('active'); // First 3 are "testing"
811
+ farm.appendChild(phone);
812
+
813
+ // Animate activation
814
+ setTimeout(() => {
815
+ phone.classList.add('active');
816
+ }, i * 50);
817
+ }
818
+ }
819
+
820
+ // ── INIT ──
821
+ loadModels();
822
+ renderPhoneFarm();
823
+
824
+ // ── SMOOTH SCROLL ──
825
+ document.querySelectorAll('a[href^="#"]').forEach(a => {
826
+ a.addEventListener('click', (e) => {
827
+ e.preventDefault();
828
+ const target = document.querySelector(a.getAttribute('href'));
829
+ if (target) target.scrollIntoView({ behavior: 'smooth' });
830
+ });
831
+ });
832
+ </script>
833
+ </body>
834
  </html>