Hugging Face's logo

Spaces:
keisetsu
/
deepseek-website-like-apple
Running

App Files Community
keisetsu commited on
Commit
1133f7f
·
verified ·
1 Parent(s): 0b0d2d3

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +976 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepseek Website Like Apple
3
- emoji: 🐢
4
- colorFrom: green
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: deepseek-website-like-apple
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,976 @@
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>DeepSeek - Advanced AI Research</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ /* Reset and Base Styles */
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ body {
17
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
18
+ color: #1d1d1f;
19
+ background-color: #f5f5f7;
20
+ line-height: 1.5;
21
+ overflow-x: hidden;
22
+ }
23
+
24
+ a {
25
+ text-decoration: none;
26
+ color: inherit;
27
+ }
28
+
29
+ /* Navigation */
30
+ .navbar {
31
+ position: relative;
32
+ z-index: 1000;
33
+ background-color: rgba(29, 29, 31, 0.95);
34
+ height: 52px;
35
+ padding: 0 22px;
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: space-between;
39
+ backdrop-filter: blur(10px);
40
+ -webkit-backdrop-filter: blur(10px);
41
+ }
42
+
43
+ .nav-logo {
44
+ color: #f5f5f7;
45
+ font-size: 22px;
46
+ font-weight: 600;
47
+ letter-spacing: -0.5px;
48
+ }
49
+
50
+ .nav-logo span {
51
+ color: #3b82f6;
52
+ }
53
+
54
+ .nav-links {
55
+ display: flex;
56
+ list-style: none;
57
+ gap: 30px;
58
+ }
59
+
60
+ .nav-links li a {
61
+ color: rgba(245, 245, 247, 0.8);
62
+ font-size: 14px;
63
+ transition: color 0.3s;
64
+ }
65
+
66
+ .nav-links li a:hover {
67
+ color: rgba(245, 245, 247, 1);
68
+ }
69
+
70
+ .nav-actions {
71
+ display: flex;
72
+ gap: 20px;
73
+ }
74
+
75
+ .nav-search {
76
+ color: rgba(245, 245, 247, 0.8);
77
+ font-size: 16px;
78
+ }
79
+
80
+ .menu-toggle {
81
+ display: none;
82
+ color: rgba(245, 245, 247, 0.8);
83
+ font-size: 18px;
84
+ cursor: pointer;
85
+ }
86
+
87
+ /* Hero Section */
88
+ .hero {
89
+ background-color: #000;
90
+ color: white;
91
+ text-align: center;
92
+ padding: 120px 0 80px;
93
+ position: relative;
94
+ overflow: hidden;
95
+ }
96
+
97
+ .hero-content {
98
+ max-width: 1200px;
99
+ margin: 0 auto;
100
+ padding: 0 20px;
101
+ }
102
+
103
+ .hero h1 {
104
+ font-size: 80px;
105
+ font-weight: 700;
106
+ line-height: 1;
107
+ margin-bottom: 20px;
108
+ letter-spacing: -0.015em;
109
+ }
110
+
111
+ .hero h2 {
112
+ font-size: 32px;
113
+ font-weight: 600;
114
+ margin-bottom: 30px;
115
+ opacity: 0.9;
116
+ }
117
+
118
+ .hero p {
119
+ font-size: 24px;
120
+ max-width: 800px;
121
+ margin: 0 auto 30px;
122
+ opacity: 0.8;
123
+ }
124
+
125
+ .hero-buttons {
126
+ display: flex;
127
+ justify-content: center;
128
+ gap: 20px;
129
+ }
130
+
131
+ .btn {
132
+ padding: 12px 22px;
133
+ border-radius: 30px;
134
+ font-size: 18px;
135
+ font-weight: 500;
136
+ transition: all 0.3s;
137
+ }
138
+
139
+ .btn-primary {
140
+ background-color: #3b82f6;
141
+ color: white;
142
+ }
143
+
144
+ .btn-primary:hover {
145
+ background-color: #2563eb;
146
+ }
147
+
148
+ .btn-outline {
149
+ background-color: transparent;
150
+ color: white;
151
+ border: 2px solid rgba(255, 255, 255, 0.8);
152
+ }
153
+
154
+ .btn-outline:hover {
155
+ background-color: rgba(255, 255, 255, 0.1);
156
+ border-color: white;
157
+ }
158
+
159
+ /* Animated Gradient Background */
160
+ .gradient-bg {
161
+ position: absolute;
162
+ top: 0;
163
+ left: 0;
164
+ width: 100%;
165
+ height: 100%;
166
+ background: linear-gradient(135deg, #1e40af, #3b82f6, #1e3a8a);
167
+ z-index: -1;
168
+ opacity: 0.8;
169
+ animation: gradientAnimation 15s ease infinite;
170
+ background-size: 400% 400%;
171
+ }
172
+
173
+ @keyframes gradientAnimation {
174
+ 0% { background-position: 0% 50%; }
175
+ 50% { background-position: 100% 50%; }
176
+ 100% { background-position: 0% 50%; }
177
+ }
178
+
179
+ /* Features Section */
180
+ .features {
181
+ padding: 100px 0;
182
+ background-color: white;
183
+ }
184
+
185
+ .features-container {
186
+ max-width: 1200px;
187
+ margin: 0 auto;
188
+ padding: 0 20px;
189
+ }
190
+
191
+ .section-header {
192
+ text-align: center;
193
+ margin-bottom: 70px;
194
+ }
195
+
196
+ .section-header h2 {
197
+ font-size: 48px;
198
+ font-weight: 700;
199
+ margin-bottom: 15px;
200
+ }
201
+
202
+ .section-header p {
203
+ font-size: 24px;
204
+ color: #86868b;
205
+ max-width: 800px;
206
+ margin: 0 auto;
207
+ }
208
+
209
+ .features-grid {
210
+ display: grid;
211
+ grid-template-columns: repeat(3, 1fr);
212
+ gap: 30px;
213
+ }
214
+
215
+ .feature-card {
216
+ background-color: #fbfbfd;
217
+ border-radius: 18px;
218
+ padding: 40px 35px;
219
+ text-align: center;
220
+ transition: transform 0.3s, box-shadow 0.3s;
221
+ }
222
+
223
+ .feature-card:hover {
224
+ transform: translateY(-10px);
225
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
226
+ }
227
+
228
+ .feature-icon {
229
+ font-size: 48px;
230
+ color: #3b82f6;
231
+ margin-bottom: 25px;
232
+ }
233
+
234
+ .feature-card h3 {
235
+ font-size: 24px;
236
+ margin-bottom: 15px;
237
+ }
238
+
239
+ .feature-card p {
240
+ color: #86868b;
241
+ font-size: 18px;
242
+ line-height: 1.4;
243
+ }
244
+
245
+ /* Demo Section */
246
+ .demo {
247
+ background-color: #f5f5f7;
248
+ padding: 120px 0;
249
+ }
250
+
251
+ .demo-container {
252
+ max-width: 1200px;
253
+ margin: 0 auto;
254
+ display: flex;
255
+ align-items: center;
256
+ gap: 60px;
257
+ padding: 0 20px;
258
+ }
259
+
260
+ .demo-text {
261
+ flex: 1;
262
+ }
263
+
264
+ .demo-text h2 {
265
+ font-size: 48px;
266
+ font-weight: 700;
267
+ margin-bottom: 25px;
268
+ line-height: 1.2;
269
+ }
270
+
271
+ .demo-text p {
272
+ font-size: 22px;
273
+ color: #86868b;
274
+ margin-bottom: 30px;
275
+ }
276
+
277
+ .demo-visual {
278
+ flex: 1;
279
+ position: relative;
280
+ height: 500px;
281
+ background: linear-gradient(135deg, #dbeafe, #3b82f6);
282
+ border-radius: 20px;
283
+ overflow: hidden;
284
+ box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
285
+ }
286
+
287
+ .demo-visual::before {
288
+ content: '';
289
+ position: absolute;
290
+ top: 0;
291
+ left: 0;
292
+ right: 0;
293
+ height: 60px;
294
+ background-color: rgba(0, 0, 0, 0.1);
295
+ }
296
+
297
+ .demo-visual-content {
298
+ position: absolute;
299
+ top: 80px;
300
+ left: 20px;
301
+ right: 20px;
302
+ bottom: 20px;
303
+ background-color: white;
304
+ border-radius: 10px;
305
+ display: flex;
306
+ justify-content: center;
307
+ align-items: center;
308
+ }
309
+
310
+ .terminal {
311
+ width: 90%;
312
+ height: 85%;
313
+ background-color: #111827;
314
+ border-radius: 8px;
315
+ padding: 15px;
316
+ color: white;
317
+ font-family: 'Courier New', Courier, monospace;
318
+ position: relative;
319
+ overflow: hidden;
320
+ }
321
+
322
+ .terminal-header {
323
+ display: flex;
324
+ gap: 8px;
325
+ margin-bottom: 15px;
326
+ }
327
+
328
+ .terminal-dot {
329
+ width: 12px;
330
+ height: 12px;
331
+ border-radius: 50%;
332
+ }
333
+
334
+ .terminal-dot:nth-child(1) {
335
+ background-color: #ef4444;
336
+ }
337
+
338
+ .terminal-dot:nth-child(2) {
339
+ background-color: #f59e0b;
340
+ }
341
+
342
+ .terminal-dot:nth-child(3) {
343
+ background-color: #10b981;
344
+ }
345
+
346
+ .terminal-content {
347
+ overflow-y: auto;
348
+ height: calc(100% - 30px);
349
+ opacity: 0.8;
350
+ font-size: 14px;
351
+ line-height: 1.5;
352
+ }
353
+
354
+ .terminal-line {
355
+ margin-bottom: 5px;
356
+ white-space: pre-wrap;
357
+ word-break: break-all;
358
+ }
359
+
360
+ .terminal-line::before {
361
+ content: '$ ';
362
+ color: #3b82f6;
363
+ }
364
+
365
+ .terminal-line.prompt {
366
+ color: #3b82f6;
367
+ }
368
+
369
+ .terminal-line.output {
370
+ color: #d1d5db;
371
+ }
372
+
373
+ /* Use Cases Section */
374
+ .use-cases {
375
+ padding: 100px 0;
376
+ background-color: white;
377
+ }
378
+
379
+ .use-cases-container {
380
+ max-width: 1200px;
381
+ margin: 0 auto;
382
+ padding: 0 20px;
383
+ }
384
+
385
+ .use-cases-grid {
386
+ display: grid;
387
+ grid-template-columns: repeat(2, 1fr);
388
+ gap: 30px;
389
+ }
390
+
391
+ .use-case-card {
392
+ background-color: #f5f5f7;
393
+ border-radius: 18px;
394
+ overflow: hidden;
395
+ transition: transform 0.3s;
396
+ }
397
+
398
+ .use-case-card:hover {
399
+ transform: translateY(-10px);
400
+ }
401
+
402
+ .use-case-image {
403
+ height: 250px;
404
+ background-color: #3b82f6;
405
+ display: flex;
406
+ justify-content: center;
407
+ align-items: center;
408
+ color: white;
409
+ font-size: 24px;
410
+ }
411
+
412
+ .use-case-text {
413
+ padding: 30px;
414
+ }
415
+
416
+ .use-case-text h3 {
417
+ font-size: 24px;
418
+ margin-bottom: 15px;
419
+ }
420
+
421
+ .use-case-text p {
422
+ color: #86868b;
423
+ font-size: 18px;
424
+ line-height: 1.4;
425
+ }
426
+
427
+ /* CTA Section */
428
+ .cta {
429
+ background-color: #f5f5f7;
430
+ padding: 120px 0;
431
+ text-align: center;
432
+ }
433
+
434
+ .cta-container {
435
+ max-width: 800px;
436
+ margin: 0 auto;
437
+ padding: 0 20px;
438
+ }
439
+
440
+ .cta h2 {
441
+ font-size: 48px;
442
+ font-weight: 700;
443
+ margin-bottom: 25px;
444
+ }
445
+
446
+ .cta p {
447
+ font-size: 22px;
448
+ color: #86868b;
449
+ margin-bottom: 40px;
450
+ }
451
+
452
+ /* Footer */
453
+ .footer {
454
+ background-color: #1d1d1f;
455
+ color: #86868b;
456
+ padding: 80px 0 30px;
457
+ }
458
+
459
+ .footer-container {
460
+ max-width: 1200px;
461
+ margin: 0 auto;
462
+ padding: 0 20px;
463
+ }
464
+
465
+ .footer-content {
466
+ display: flex;
467
+ flex-wrap: wrap;
468
+ gap: 80px;
469
+ margin-bottom: 50px;
470
+ }
471
+
472
+ .footer-column h4 {
473
+ color: white;
474
+ font-size: 14px;
475
+ font-weight: 600;
476
+ margin-bottom: 20px;
477
+ }
478
+
479
+ .footer-links {
480
+ list-style: none;
481
+ }
482
+
483
+ .footer-links li {
484
+ margin-bottom: 12px;
485
+ }
486
+
487
+ .footer-links a {
488
+ font-size: 13px;
489
+ transition: color 0.3s;
490
+ }
491
+
492
+ .footer-links a:hover {
493
+ color: white;
494
+ }
495
+
496
+ .footer-bottom {
497
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
498
+ padding-top: 30px;
499
+ display: flex;
500
+ justify-content: space-between;
501
+ align-items: center;
502
+ font-size: 13px;
503
+ }
504
+
505
+ .footer-social {
506
+ display: flex;
507
+ gap: 15px;
508
+ }
509
+
510
+ .footer-social a {
511
+ color: #86868b;
512
+ font-size: 16px;
513
+ transition: color 0.3s;
514
+ }
515
+
516
+ .footer-social a:hover {
517
+ color: white;
518
+ }
519
+
520
+ /* Responsive Styles */
521
+ @media (max-width: 1024px) {
522
+ .hero h1 {
523
+ font-size: 64px;
524
+ }
525
+
526
+ .hero h2 {
527
+ font-size: 28px;
528
+ }
529
+
530
+ .features-grid {
531
+ grid-template-columns: repeat(2, 1fr);
532
+ }
533
+
534
+ .demo-container {
535
+ flex-direction: column;
536
+ gap: 50px;
537
+ }
538
+ }
539
+
540
+ @media (max-width: 768px) {
541
+ .nav-links {
542
+ display: none;
543
+ }
544
+
545
+ .menu-toggle {
546
+ display: block;
547
+ }
548
+
549
+ .hero h1 {
550
+ font-size: 48px;
551
+ }
552
+
553
+ .hero h2 {
554
+ font-size: 24px;
555
+ }
556
+
557
+ .hero p {
558
+ font-size: 20px;
559
+ }
560
+
561
+ .section-header h2 {
562
+ font-size: 36px;
563
+ }
564
+
565
+ .section-header p {
566
+ font-size: 20px;
567
+ }
568
+
569
+ .features-grid {
570
+ grid-template-columns: 1fr;
571
+ gap: 20px;
572
+ }
573
+
574
+ .use-cases-grid {
575
+ grid-template-columns: 1fr;
576
+ }
577
+
578
+ .demo-text h2 {
579
+ font-size: 36px;
580
+ }
581
+
582
+ .demo-text p {
583
+ font-size: 18px;
584
+ }
585
+
586
+ .demo-visual {
587
+ height: 400px;
588
+ }
589
+
590
+ .cta h2 {
591
+ font-size: 36px;
592
+ }
593
+
594
+ .cta p {
595
+ font-size: 18px;
596
+ }
597
+ }
598
+
599
+ @media (max-width: 480px) {
600
+ .hero h1 {
601
+ font-size: 36px;
602
+ }
603
+
604
+ .hero-buttons {
605
+ flex-direction: column;
606
+ gap: 15px;
607
+ }
608
+
609
+ .btn {
610
+ width: 100%;
611
+ }
612
+
613
+ .nav-actions {
614
+ display: none;
615
+ }
616
+ }
617
+ </style>
618
+ </head>
619
+ <body>
620
+ <!-- Navigation -->
621
+ <nav class="navbar">
622
+ <a href="#" class="nav-logo">Deep<span>Seek</span></a>
623
+
624
+ <ul class="nav-links">
625
+ <li><a href="#">Home</a></li>
626
+ <li><a href="#features">Features</a></li>
627
+ <li><a href="#demo">Demo</a></li>
628
+ <li><a href="#use-cases">Use Cases</a></li>
629
+ <li><a href="#cta">Get Started</a></li>
630
+ </ul>
631
+
632
+ <div class="nav-actions">
633
+ <a href="#" class="nav-search"><i class="fas fa-search"></i></a>
634
+ </div>
635
+
636
+ <div class="menu-toggle">
637
+ <i class="fas fa-bars"></i>
638
+ </div>
639
+ </nav>
640
+
641
+ <!-- Hero Section -->
642
+ <section class="hero">
643
+ <div class="gradient-bg"></div>
644
+ <div class="hero-content">
645
+ <h1>The Future of AI is Here</h1>
646
+ <h2>Advanced artificial intelligence for everyone</h2>
647
+ <p>DeepSeek's cutting-edge models provide unparalleled performance across natural language understanding, generation, and reasoning tasks.</p>
648
+ <div class="hero-buttons">
649
+ <a href="#demo" class="btn btn-primary">See it in action</a>
650
+ <a href="#features" class="btn btn-outline">Learn more</a>
651
+ </div>
652
+ </div>
653
+ </section>
654
+
655
+ <!-- Features Section -->
656
+ <section class="features" id="features">
657
+ <div class="features-container">
658
+ <div class="section-header">
659
+ <h2>Why DeepSeek?</h2>
660
+ <p>Our models combine state-of-the-art performance with efficiency and accessibility.</p>
661
+ </div>
662
+
663
+ <div class="features-grid">
664
+ <div class="feature-card">
665
+ <div class="feature-icon">
666
+ <i class="fas fa-brain"></i>
667
+ </div>
668
+ <h3>Advanced Reasoning</h3>
669
+ <p>Our models demonstrate sophisticated reasoning capabilities, excelling at complex problem solving and multi-step tasks.</p>
670
+ </div>
671
+
672
+ <div class="feature-card">
673
+ <div class="feature-icon">
674
+ <i class="fas fa-language"></i>
675
+ </div>
676
+ <h3>Multilingual Mastery</h3>
677
+ <p>Fluent in dozens of languages with nuanced understanding of cultural contexts and idioms.</p>
678
+ </div>
679
+
680
+ <div class="feature-card">
681
+ <div class="feature-icon">
682
+ <i class="fas fa-lightbulb"></i>
683
+ </div>
684
+ <h3>Creative Generation</h3>
685
+ <p>Generate high-quality content from stories to code with human-like creativity and coherence.</p>
686
+ </div>
687
+
688
+ <div class="feature-card">
689
+ <div class="feature-icon">
690
+ <i class="fas fa-bolt"></i>
691
+ </div>
692
+ <h3>Optimized Performance</h3>
693
+ <p>Industry-leading inference speed with minimal computational overhead for cost-efficient deployment.</p>
694
+ </div>
695
+
696
+ <div class="feature-card">
697
+ <div class="feature-icon">
698
+ <i class="fas fa-shield-alt"></i>
699
+ </div>
700
+ <h3>Robust Safety</h3>
701
+ <p>Built-in safeguards against harmful outputs with customizable moderation controls.</p>
702
+ </div>
703
+
704
+ <div class="feature-card">
705
+ <div class="feature-icon">
706
+ <i class="fas fa-sliders-h"></i>
707
+ </div>
708
+ <h3>Fine-Tuning Ready</h3>
709
+ <p>Easily adapt our models to your specific needs with comprehensive fine-tuning support.</p>
710
+ </div>
711
+ </div>
712
+ </div>
713
+ </section>
714
+
715
+ <!-- Demo Section -->
716
+ <section class="demo" id="demo">
717
+ <div class="demo-container">
718
+ <div class="demo-text">
719
+ <h2>Experience DeepSeek's capabilities firsthand</h2>
720
+ <p>Interact with our models through an intuitive API that makes integrating AI into your applications effortless.</p>
721
+ <a href="#" class="btn btn-primary">Request API Access</a>
722
+ </div>
723
+
724
+ <div class="demo-visual">
725
+ <div class="demo-visual-content">
726
+ <div class="terminal">
727
+ <div class="terminal-header">
728
+ <div class="terminal-dot"></div>
729
+ <div class="terminal-dot"></div>
730
+ <div class="terminal-dot"></div>
731
+ </div>
732
+ <div class="terminal-content" id="terminal-content" data-lines='[
733
+ "# Welcome to DeepSeek API demo",
734
+ "$ curl -X POST \\",
735
+ " -H \"Content-Type: application/json\" \\",
736
+ " -d \"{\\"messages\\": [{\\"role\\": \\"user\\", \\"content\\": \\"Explain quantum computing like I\\'m five\\"}]}\" \\",
737
+ " https://api.deepseek.com/v1/chat/completions",
738
+ "",
739
+ "{\\"id\\": \\"chatcmpl-123\\", \\"object\\": \\"chat.completion\\", \\"created\\": 1677652288, \\"choices\\": [{\\"index\\": 0,",
740
+ " \\"message\\": {\\"role\\": \\"assistant\\", \\"content\\": \\"Quantum computing is like having a super calculator...\\"},",
741
+ " \\"finish_reason\\": \\"stop\\"}], \\"usage\\": {\\"prompt_tokens\\": 13, \\"completion_tokens\\": 78, \\"total_tokens\\": 91}}",
742
+ "",
743
+ "$ # Try the API yourself!",
744
+ "$ # Sign up for free credits to get started"
745
+ ]'>
746
+ </div>
747
+ </div>
748
+ </div>
749
+ </div>
750
+ </div>
751
+ </section>
752
+
753
+ <!-- Use Cases Section -->
754
+ <section class="use-cases" id="use-cases">
755
+ <div class="use-cases-container">
756
+ <div class="section-header">
757
+ <h2>Transform Your Business with AI</h2>
758
+ <p>Discover how DeepSeek can revolutionize your industry</p>
759
+ </div>
760
+
761
+ <div class="use-cases-grid">
762
+ <div class="use-case-card">
763
+ <div class="use-case-image" style="background-color: #1e3a8a;">
764
+ <i class="fas fa-comment-dots"></i>
765
+ </div>
766
+ <div class="use-case-text">
767
+ <h3>Customer Support</h3>
768
+ <p>Automate responses while maintaining human-like interactions, reducing response times by 90%.</p>
769
+ </div>
770
+ </div>
771
+
772
+ <div class="use-case-card">
773
+ <div class="use-case-image" style="background-color: #4338ca;">
774
+ <i class="fas fa-laptop-code"></i>
775
+ </div>
776
+ <div class="use-case-text">
777
+ <h3>Developer Tools</h3>
778
+ <p>Generate, explain, and debug code with AI that understands dozens of programming languages.</p>
779
+ </div>
780
+ </div>
781
+
782
+ <div class="use-case-card">
783
+ <div class="use-case-image" style="background-color: #2563eb;">
784
+ <i class="fas fa-book-open"></i>
785
+ </div>
786
+ <div class="use-case-text">
787
+ <h3>Education</h3>
788
+ <p>Personalized tutors that adapt to each student's learning style and provide explanations at any level.</p>
789
+ </div>
790
+ </div>
791
+
792
+ <div class="use-case-card">
793
+ <div class="use-case-image" style="background-color: #1d4ed8;">
794
+ <i class="fas fa-chart-line"></i>
795
+ </div>
796
+ <div class="use-case-text">
797
+ <h3>Business Analytics</h3>
798
+ <p>Natural language data exploration that surfaces insights from complex datasets instantly.</p>
799
+ </div>
800
+ </div>
801
+ </div>
802
+ </div>
803
+ </section>
804
+
805
+ <!-- CTA Section -->
806
+ <section class="cta" id="cta">
807
+ <div class="cta-container">
808
+ <h2>Ready to unlock AI potential?</h2>
809
+ <p>Start building with DeepSeek today. Our developer-friendly platform makes implementation simple for projects of any scale.</p>
810
+ <a href="#" class="btn btn-primary">Get Started for Free</a>
811
+ </div>
812
+ </section>
813
+
814
+ <!-- Footer -->
815
+ <footer class="footer">
816
+ <div class="footer-container">
817
+ <div class="footer-content">
818
+ <div class="footer-column">
819
+ <h4>DeepSeek</h4>
820
+ <ul class="footer-links">
821
+ <li><a href="#">Home</a></li>
822
+ <li><a href="#features">Features</a></li>
823
+ <li><a href="#demo">Demo</a></li>
824
+ <li><a href="#use-cases">Use Cases</a></li>
825
+ </ul>
826
+ </div>
827
+
828
+ <div class="footer-column">
829
+ <h4>Products</h4>
830
+ <ul class="footer-links">
831
+ <li><a href="#">API</a></li>
832
+ <li><a href="#">Enterprise</a></li>
833
+ <li><a href="#">Chat Interface</a></li>
834
+ <li><a href="#">Custom Models</a></li>
835
+ </ul>
836
+ </div>
837
+
838
+ <div class="footer-column">
839
+ <h4>Resources</h4>
840
+ <ul class="footer-links">
841
+ <li><a href="#">Documentation</a></li>
842
+ <li><a href="#">Tutorials</a></li>
843
+ <li><a href="#">Blog</a></li>
844
+ <li><a href="#">Research</a></li>
845
+ </ul>
846
+ </div>
847
+
848
+ <div class="footer-column">
849
+ <h4>Company</h4>
850
+ <ul class="footer-links">
851
+ <li><a href="#">About</a></li>
852
+ <li><a href="#">Careers</a></li>
853
+ <li><a href="#">Contact</a></li>
854
+ <li><a href="#">Press</a></li>
855
+ </ul>
856
+ </div>
857
+ </div>
858
+
859
+ <div class="footer-bottom">
860
+ <div class="footer-copyright">
861
+ Copyright © 2023 DeepSeek AI. All rights reserved.
862
+ </div>
863
+
864
+ <div class="footer-social">
865
+ <a href="#"><i class="fab fa-twitter"></i></a>
866
+ <a href="#"><i class="fab fa-linkedin"></i></a>
867
+ <a href="#"><i class="fab fa-github"></i></a>
868
+ <a href="#"><i class="fab fa-youtube"></i></a>
869
+ </div>
870
+ </div>
871
+ </div>
872
+ </footer>
873
+
874
+ <script>
875
+ // Terminal animation
876
+ document.addEventListener('DOMContentLoaded', function() {
877
+ const terminalContent = document.getElementById('terminal-content');
878
+ const lines = JSON.parse(terminalContent.getAttribute('data-lines'));
879
+
880
+ // Display lines one by one
881
+ let i = 0;
882
+ const interval = setInterval(() => {
883
+ if (i < lines.length) {
884
+ const line = document.createElement('div');
885
+ const isPrompt = lines[i].startsWith('$');
886
+ const isComment = lines[i].startsWith('#');
887
+
888
+ if (isPrompt) {
889
+ line.classList.add('terminal-line', 'prompt');
890
+ } else if (isComment) {
891
+ line.classList.add('terminal-line', 'output');
892
+ line.style.color = '#10b981';
893
+ } else {
894
+ line.classList.add('terminal-line', 'output');
895
+ }
896
+
897
+ line.textContent = isPrompt ? lines[i].substring(2) : lines[i];
898
+ terminalContent.appendChild(line);
899
+ terminalContent.scrollTop = terminalContent.scrollHeight;
900
+ i++;
901
+ } else {
902
+ clearInterval(interval);
903
+
904
+ // Start blinking cursor
905
+ const cursor = document.createElement('span');
906
+ cursor.textContent = '_';
907
+ cursor.style.animation = 'blink 1s infinite';
908
+ document.styleSheets[0].insertRule(`
909
+ @keyframes blink {
910
+ 0%, 100% { opacity: 1; }
911
+ 50% { opacity: 0; }
912
+ }
913
+ `);
914
+
915
+ const prompt = document.createElement('div');
916
+ prompt.classList.add('terminal-line', 'prompt');
917
+ prompt.textContent = '$ ';
918
+ prompt.appendChild(cursor);
919
+ terminalContent.appendChild(prompt);
920
+ terminalContent.scrollTop = terminalContent.scrollHeight;
921
+ }
922
+ }, 200);
923
+
924
+ // Mobile menu toggle
925
+ const menuToggle = document.querySelector('.menu-toggle');
926
+ const navLinks = document.querySelector('.nav-links');
927
+
928
+ menuToggle.addEventListener('click', function() {
929
+ if (navLinks.style.display === 'flex') {
930
+ navLinks.style.display = 'none';
931
+ menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
932
+ } else {
933
+ navLinks.style.display = 'flex';
934
+ navLinks.style.flexDirection = 'column';
935
+ navLinks.style.position = 'absolute';
936
+ navLinks.style.top = '52px';
937
+ navLinks.style.left = '0';
938
+ navLinks.style.right = '0';
939
+ navLinks.style.backgroundColor = 'rgba(29, 29, 31, 0.98)';
940
+ navLinks.style.padding = '20px';
941
+ navLinks.style.gap = '20px';
942
+ menuToggle.innerHTML = '<i class="fas fa-times"></i>';
943
+ }
944
+ });
945
+
946
+ // Close mobile menu when clicking a link
947
+ document.querySelectorAll('.nav-links a').forEach(link => {
948
+ link.addEventListener('click', function() {
949
+ if (window.innerWidth <= 768) {
950
+ navLinks.style.display = 'none';
951
+ menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
952
+ }
953
+ });
954
+ });
955
+
956
+ // Smooth scrolling for anchor links
957
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
958
+ anchor.addEventListener('click', function (e) {
959
+ e.preventDefault();
960
+
961
+ const targetId = this.getAttribute('href');
962
+ if (targetId === '#') return;
963
+
964
+ const targetElement = document.querySelector(targetId);
965
+ if (targetElement) {
966
+ window.scrollTo({
967
+ top: targetElement.offsetTop - 70,
968
+ behavior: 'smooth'
969
+ });
970
+ }
971
+ });
972
+ });
973
+ });
974
+ </script>
975
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
976
+ </html>