Hugging Face's logo

Spaces:
Pq234
/
Deep-ai-clone
Configuration error

App Files Community
Pq234 commited on
Commit
2d44133
·
verified ·
1 Parent(s): 6c01c38

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +539 -24
README.md CHANGED
@@ -1,34 +1,549 @@
1
- ---
2
- language: en
3
- license: mit
4
- tags:
5
- - demo
6
- - web
7
- - deepseek
8
- - html
9
- ---
 
 
 
 
 
10
 
11
- # DeepSeek AI Website Clone
 
 
 
 
 
 
12
 
13
- A static HTML recreation of the DeepSeek AI homepage.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
 
15
- ## Live Demo
 
 
 
 
 
 
16
 
17
- View the live demo here: [DeepSeek AI Clone](https://huggingface.co/spaces/YOUR_USERNAME/REPO_NAME)
 
 
 
 
 
 
 
18
 
19
- ## Features
 
 
 
 
 
20
 
21
- - 🎨 Modern dark theme
22
- - 🚀 Responsive design
23
- - 💡 Interactive elements
24
- - 🧠 DeepSeek branding
 
 
 
 
 
 
 
 
 
25
 
26
- ## Author
 
 
 
 
 
 
 
 
27
 
28
- **YOUR NAME**
29
- - GitHub: [@YOUR_GITHUB](https://github.com/YOUR_GITHUB)
30
- - Hugging Face: [@YOUR_USERNAME](https://huggingface.co/YOUR_USERNAME)
 
 
 
 
31
 
32
- ## License
 
 
 
 
 
 
33
 
34
- MIT License - feel free to use and modify!
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 · AI</title>
7
+ <!-- Font Awesome for icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
9
+ <style>
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
 
16
+ body {
17
+ background: #0a0c0f;
18
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
19
+ color: #eef2f6;
20
+ line-height: 1.5;
21
+ -webkit-font-smoothing: antialiased;
22
+ }
23
 
24
+ body::before {
25
+ content: '';
26
+ position: fixed;
27
+ top: 0;
28
+ left: 0;
29
+ width: 100%;
30
+ height: 100%;
31
+ background-image:
32
+ radial-gradient(circle at 20% 30%, rgba(0, 180, 255, 0.03) 0%, transparent 30%),
33
+ radial-gradient(circle at 80% 70%, rgba(100, 60, 255, 0.03) 0%, transparent 40%),
34
+ linear-gradient(rgba(255,255,255,0.01) 1px, transparent 1px),
35
+ linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px);
36
+ background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
37
+ pointer-events: none;
38
+ z-index: 0;
39
+ }
40
 
41
+ .wrapper {
42
+ max-width: 1200px;
43
+ margin: 0 auto;
44
+ padding: 0 30px;
45
+ position: relative;
46
+ z-index: 2;
47
+ }
48
 
49
+ .navbar {
50
+ display: flex;
51
+ align-items: center;
52
+ justify-content: space-between;
53
+ padding: 24px 0 16px;
54
+ border-bottom: 1px solid rgba(255, 255, 255, 0.04);
55
+ flex-wrap: wrap;
56
+ }
57
 
58
+ .logo {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 12px;
62
+ text-decoration: none;
63
+ }
64
 
65
+ .logo-icon {
66
+ background: linear-gradient(135deg, #3b82f6, #8b5cf6);
67
+ width: 38px;
68
+ height: 38px;
69
+ border-radius: 10px;
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ font-size: 22px;
74
+ font-weight: 600;
75
+ color: white;
76
+ box-shadow: 0 6px 14px rgba(59, 130, 246, 0.25);
77
+ }
78
 
79
+ .logo-text {
80
+ font-size: 24px;
81
+ font-weight: 600;
82
+ letter-spacing: -0.3px;
83
+ background: linear-gradient(to right, #f0f4fa, #c0d0e0);
84
+ -webkit-background-clip: text;
85
+ -webkit-text-fill-color: transparent;
86
+ background-clip: text;
87
+ }
88
 
89
+ .logo-text span {
90
+ font-weight: 300;
91
+ background: none;
92
+ -webkit-text-fill-color: #6a7a8a;
93
+ color: #6a7a8a;
94
+ margin-left: 2px;
95
+ }
96
 
97
+ .nav-links {
98
+ display: flex;
99
+ align-items: center;
100
+ gap: 32px;
101
+ font-size: 15px;
102
+ font-weight: 450;
103
+ }
104
 
105
+ .nav-links a {
106
+ color: #b0c4d8;
107
+ text-decoration: none;
108
+ transition: 0.2s;
109
+ letter-spacing: -0.2px;
110
+ border-bottom: 1px solid transparent;
111
+ padding-bottom: 4px;
112
+ }
113
+
114
+ .nav-links a:hover {
115
+ color: #ffffff;
116
+ border-bottom-color: #3b82f6;
117
+ }
118
+
119
+ .nav-cta {
120
+ background: rgba(59, 130, 246, 0.12);
121
+ padding: 8px 20px;
122
+ border-radius: 40px;
123
+ color: #a0c4ff !important;
124
+ border: 1px solid rgba(59, 130, 246, 0.2);
125
+ font-weight: 500;
126
+ transition: 0.25s;
127
+ }
128
+
129
+ .nav-cta:hover {
130
+ background: rgba(59, 130, 246, 0.25);
131
+ border-color: #3b82f6;
132
+ color: white !important;
133
+ }
134
+
135
+ .hero {
136
+ padding: 70px 0 40px;
137
+ display: flex;
138
+ flex-direction: column;
139
+ align-items: center;
140
+ text-align: center;
141
+ }
142
+
143
+ .hero-badge {
144
+ display: inline-flex;
145
+ align-items: center;
146
+ gap: 8px;
147
+ background: rgba(59, 130, 246, 0.08);
148
+ border: 1px solid rgba(59, 130, 246, 0.15);
149
+ padding: 8px 18px 8px 14px;
150
+ border-radius: 60px;
151
+ font-size: 13px;
152
+ color: #8bb4ff;
153
+ letter-spacing: 0.2px;
154
+ margin-bottom: 28px;
155
+ backdrop-filter: blur(4px);
156
+ }
157
+
158
+ .hero-badge i {
159
+ font-size: 12px;
160
+ color: #3b82f6;
161
+ }
162
+
163
+ .hero h1 {
164
+ font-size: 60px;
165
+ font-weight: 700;
166
+ line-height: 1.1;
167
+ letter-spacing: -1.5px;
168
+ max-width: 800px;
169
+ background: linear-gradient(145deg, #ffffff 0%, #b8d0e8 100%);
170
+ -webkit-background-clip: text;
171
+ -webkit-text-fill-color: transparent;
172
+ background-clip: text;
173
+ margin-bottom: 20px;
174
+ }
175
+
176
+ .hero h1 i {
177
+ background: linear-gradient(145deg, #3b82f6, #a78bfa);
178
+ -webkit-background-clip: text;
179
+ -webkit-text-fill-color: transparent;
180
+ background-clip: text;
181
+ font-style: normal;
182
+ }
183
+
184
+ .hero-sub {
185
+ font-size: 20px;
186
+ color: #94a9c2;
187
+ max-width: 600px;
188
+ margin-bottom: 40px;
189
+ font-weight: 400;
190
+ letter-spacing: -0.2px;
191
+ line-height: 1.5;
192
+ }
193
+
194
+ .hero-actions {
195
+ display: flex;
196
+ flex-wrap: wrap;
197
+ align-items: center;
198
+ justify-content: center;
199
+ gap: 16px;
200
+ }
201
+
202
+ .btn-primary {
203
+ background: linear-gradient(135deg, #3b82f6, #7c5cfc);
204
+ border: none;
205
+ padding: 14px 40px;
206
+ border-radius: 60px;
207
+ font-size: 17px;
208
+ font-weight: 500;
209
+ color: white;
210
+ display: inline-flex;
211
+ align-items: center;
212
+ gap: 12px;
213
+ cursor: default;
214
+ box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25);
215
+ transition: 0.2s;
216
+ letter-spacing: -0.2px;
217
+ }
218
+
219
+ .btn-primary i {
220
+ font-size: 18px;
221
+ }
222
+
223
+ .btn-primary:hover {
224
+ transform: scale(1.02);
225
+ box-shadow: 0 10px 28px rgba(59, 130, 246, 0.35);
226
+ }
227
+
228
+ .btn-secondary {
229
+ background: rgba(255, 255, 255, 0.04);
230
+ border: 1px solid rgba(255, 255, 255, 0.06);
231
+ padding: 14px 34px;
232
+ border-radius: 60px;
233
+ font-size: 17px;
234
+ font-weight: 450;
235
+ color: #c8daea;
236
+ display: inline-flex;
237
+ align-items: center;
238
+ gap: 10px;
239
+ cursor: default;
240
+ backdrop-filter: blur(4px);
241
+ transition: 0.2s;
242
+ }
243
+
244
+ .btn-secondary i {
245
+ color: #6a8bb0;
246
+ }
247
+
248
+ .btn-secondary:hover {
249
+ background: rgba(255, 255, 255, 0.08);
250
+ border-color: rgba(255, 255, 255, 0.12);
251
+ color: white;
252
+ }
253
+
254
+ .feature-grid {
255
+ display: grid;
256
+ grid-template-columns: repeat(3, 1fr);
257
+ gap: 24px;
258
+ margin: 80px 0 60px;
259
+ }
260
+
261
+ .feature-card {
262
+ background: rgba(255, 255, 255, 0.02);
263
+ backdrop-filter: blur(4px);
264
+ border: 1px solid rgba(255, 255, 255, 0.04);
265
+ border-radius: 28px;
266
+ padding: 32px 28px;
267
+ transition: 0.25s;
268
+ box-shadow: 0 4px 16px rgba(0,0,0,0.3);
269
+ }
270
+
271
+ .feature-card:hover {
272
+ background: rgba(255, 255, 255, 0.04);
273
+ border-color: rgba(59, 130, 246, 0.2);
274
+ transform: translateY(-4px);
275
+ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
276
+ }
277
+
278
+ .feature-icon {
279
+ font-size: 28px;
280
+ color: #5b8cdf;
281
+ margin-bottom: 18px;
282
+ display: inline-block;
283
+ background: rgba(59, 130, 246, 0.08);
284
+ padding: 10px;
285
+ border-radius: 14px;
286
+ line-height: 1;
287
+ }
288
+
289
+ .feature-card h3 {
290
+ font-size: 20px;
291
+ font-weight: 600;
292
+ letter-spacing: -0.3px;
293
+ margin-bottom: 10px;
294
+ color: #f0f6fe;
295
+ }
296
+
297
+ .feature-card p {
298
+ color: #94aac6;
299
+ font-size: 15px;
300
+ line-height: 1.6;
301
+ font-weight: 400;
302
+ }
303
+
304
+ .feature-card .tag {
305
+ display: inline-block;
306
+ margin-top: 18px;
307
+ font-size: 13px;
308
+ background: rgba(59, 130, 246, 0.06);
309
+ padding: 4px 14px;
310
+ border-radius: 40px;
311
+ color: #7fa3d9;
312
+ border: 1px solid rgba(59, 130, 246, 0.06);
313
+ }
314
+
315
+ .quote-block {
316
+ margin: 30px 0 70px;
317
+ text-align: center;
318
+ border-top: 1px solid rgba(255, 255, 255, 0.03);
319
+ border-bottom: 1px solid rgba(255, 255, 255, 0.03);
320
+ padding: 50px 20px;
321
+ }
322
+
323
+ .quote-block i {
324
+ color: #3b82f6;
325
+ font-size: 26px;
326
+ opacity: 0.6;
327
+ margin-bottom: 14px;
328
+ display: block;
329
+ }
330
+
331
+ .quote-block p {
332
+ font-size: 24px;
333
+ font-weight: 350;
334
+ color: #d0e0f0;
335
+ letter-spacing: -0.2px;
336
+ max-width: 700px;
337
+ margin: 0 auto 8px;
338
+ line-height: 1.4;
339
+ }
340
+
341
+ .quote-block span {
342
+ color: #6a8db0;
343
+ font-size: 15px;
344
+ letter-spacing: 0.5px;
345
+ }
346
+
347
+ .footer {
348
+ display: flex;
349
+ justify-content: space-between;
350
+ align-items: center;
351
+ padding: 30px 0 40px;
352
+ border-top: 1px solid rgba(255, 255, 255, 0.03);
353
+ font-size: 14px;
354
+ color: #5d748b;
355
+ flex-wrap: wrap;
356
+ gap: 16px;
357
+ }
358
+
359
+ .footer-links {
360
+ display: flex;
361
+ gap: 28px;
362
+ }
363
+
364
+ .footer-links a {
365
+ color: #6a85a0;
366
+ text-decoration: none;
367
+ transition: 0.2s;
368
+ }
369
+
370
+ .footer-links a:hover {
371
+ color: #b0cce8;
372
+ }
373
+
374
+ .footer-social i {
375
+ font-size: 18px;
376
+ margin-left: 16px;
377
+ color: #4d6885;
378
+ transition: 0.2s;
379
+ cursor: default;
380
+ }
381
+
382
+ .footer-social i:hover {
383
+ color: #a0c0e0;
384
+ }
385
+
386
+ @media (max-width: 768px) {
387
+ .navbar {
388
+ flex-direction: column;
389
+ align-items: flex-start;
390
+ gap: 20px;
391
+ padding-bottom: 20px;
392
+ }
393
+
394
+ .nav-links {
395
+ flex-wrap: wrap;
396
+ gap: 20px 16px;
397
+ width: 100%;
398
+ }
399
+
400
+ .hero h1 {
401
+ font-size: 38px;
402
+ max-width: 100%;
403
+ }
404
+
405
+ .hero-sub {
406
+ font-size: 18px;
407
+ }
408
+
409
+ .feature-grid {
410
+ grid-template-columns: 1fr;
411
+ gap: 18px;
412
+ }
413
+
414
+ .feature-card {
415
+ padding: 26px 22px;
416
+ }
417
+
418
+ .quote-block p {
419
+ font-size: 20px;
420
+ }
421
+
422
+ .footer {
423
+ flex-direction: column;
424
+ align-items: flex-start;
425
+ }
426
+
427
+ .footer-social {
428
+ margin-top: 6px;
429
+ }
430
+
431
+ .btn-primary, .btn-secondary {
432
+ width: 100%;
433
+ justify-content: center;
434
+ }
435
+
436
+ .hero-actions {
437
+ width: 100%;
438
+ flex-direction: column;
439
+ }
440
+ }
441
+
442
+ @media (max-width: 480px) {
443
+ .wrapper {
444
+ padding: 0 18px;
445
+ }
446
+
447
+ .hero h1 {
448
+ font-size: 30px;
449
+ }
450
+ }
451
+
452
+ .glow-line {
453
+ width: 80px;
454
+ height: 2px;
455
+ background: linear-gradient(90deg, transparent, #3b82f6, transparent);
456
+ margin: 6px auto 0;
457
+ opacity: 0.3;
458
+ }
459
+ </style>
460
+ </head>
461
+ <body>
462
+ <div class="wrapper">
463
+ <!-- Header -->
464
+ <nav class="navbar">
465
+ <a href="#" class="logo">
466
+ <div class="logo-icon">✦</div>
467
+ <div class="logo-text">DeepSeek<span>·ai</span></div>
468
+ </a>
469
+ <div class="nav-links">
470
+ <a href="#">Research</a>
471
+ <a href="#">Blog</a>
472
+ <a href="#">Docs</a>
473
+ <a href="#">About</a>
474
+ <a href="#" class="nav-cta"><i class="fas fa-arrow-right" style="margin-right: 6px; font-size: 12px;"></i>API</a>
475
+ </div>
476
+ </nav>
477
+
478
+ <!-- Hero -->
479
+ <section class="hero">
480
+ <div class="hero-badge">
481
+ <i class="fas fa-circle" style="font-size: 6px; color: #3b82f6;"></i>
482
+ DeepSeek-V3 · new frontier
483
+ </div>
484
+ <h1>
485
+ <i>Think</i> deeper, <br />build smarter.
486
+ </h1>
487
+ <p class="hero-sub">
488
+ Open‑source AI models that rival the best.
489
+ Research‑first, performance‑driven.
490
+ </p>
491
+ <div class="hero-actions">
492
+ <span class="btn-primary"><i class="fas fa-rocket"></i> Explore models</span>
493
+ <span class="btn-secondary"><i class="fab fa-github"></i> GitHub</span>
494
+ </div>
495
+ <div class="glow-line"></div>
496
+ </section>
497
+
498
+ <!-- Features -->
499
+ <div class="feature-grid">
500
+ <div class="feature-card">
501
+ <div class="feature-icon"><i class="fas fa-brain"></i></div>
502
+ <h3>DeepSeek-V3</h3>
503
+ <p>671B MoE architecture with 37B active parameters. State‑of‑the‑art reasoning & coding.</p>
504
+ <div class="tag">⚡ 8.1 TFlops</div>
505
+ </div>
506
+ <div class="feature-card">
507
+ <div class="feature-icon"><i class="fas fa-code"></i></div>
508
+ <h3>DeepSeek-Coder</h3>
509
+ <p>Specialized for programming & math. Trained on 2 trillion tokens of code & natural language.</p>
510
+ <div class="tag">🧩 33B / 6.7B</div>
511
+ </div>
512
+ <div class="feature-card">
513
+ <div class="feature-icon"><i class="fas fa-database"></i></div>
514
+ <h3>Open weights</h3>
515
+ <p>Fully open‑source, commercially permissive. Download, fine‑tune, deploy anywhere.</p>
516
+ <div class="tag">📦 Apache 2.0</div>
517
+ </div>
518
+ </div>
519
+
520
+ <!-- Quote -->
521
+ <div class="quote-block">
522
+ <i class="fas fa-quote-left"></i>
523
+ <p>“Democratizing AI through open research and transparent innovation.”</p>
524
+ <span>— DeepSeek AI · 2026</span>
525
+ </div>
526
+
527
+ <!-- Footer -->
528
+ <footer class="footer">
529
+ <div style="display: flex; align-items: center; gap: 18px;">
530
+ <span style="font-weight: 400; letter-spacing: -0.2px;">© 2026 DeepSeek · AI</span>
531
+ <span style="color: #3a4d62;">|</span>
532
+ <span style="font-size: 13px; color: #4e6a86;">Created by <strong>YOUR_NAME</strong> 🚀</span>
533
+ </div>
534
+ <div class="footer-links">
535
+ <a href="#">Privacy</a>
536
+ <a href="#">Terms</a>
537
+ <a href="#">Careers</a>
538
+ <a href="#">Contact</a>
539
+ </div>
540
+ <div class="footer-social">
541
+ <i class="fab fa-twitter"></i>
542
+ <i class="fab fa-github"></i>
543
+ <i class="fab fa-hugging-face"></i>
544
+ <i class="fab fa-discord"></i>
545
+ </div>
546
+ </footer>
547
+ </div>
548
+ </body>
549
+ </html>