Hugging Face's logo

Spaces:
CrucibleLab
/
README
Running

App Files Community
Steelskull commited on
Commit
462fb91
·
verified ·
1 Parent(s): df502cd

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +265 -898
README.md CHANGED
@@ -10,906 +10,273 @@ pinned: false
10
  <!DOCTYPE html>
11
  <html lang="en">
12
  <head>
13
- <meta charset="UTF-8">
14
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
15
- <title>Crucible Labs - Where Steel Meets Stars</title>
16
- <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Bebas+Neue&display=swap" rel="stylesheet">
17
- <style>
18
- /* Reset and Base Styles */
19
- * {
20
- margin: 0;
21
- padding: 0;
22
- box-sizing: border-box;
23
- }
24
- :root {
25
- /* Steel's Colors */
26
- --steel-primary: #D4A574;
27
- --steel-secondary: #B8860B;
28
- --steel-accent: #FFD700;
29
- --steel-dark: #8B6914;
30
- /* Tarek's Colors */
31
- --tarek-primary: #00CED1;
32
- --tarek-secondary: #4682B4;
33
- --tarek-accent: #00FFFF;
34
- --tarek-dark: #191970;
35
- /* Shared Colors */
36
- --bg-primary: #0A0A0F;
37
- --bg-secondary: #141420;
38
- --text-primary: #FFFFFF;
39
- --text-secondary: #B0B0B0;
40
- --border-glow: rgba(255, 255, 255, 0.1);
41
- }
42
- body {
43
- font-family: 'Space Grotesk', sans-serif;
44
- background: var(--bg-primary);
45
- color: var(--text-primary);
46
- line-height: 1.6;
47
- overflow-x: hidden;
48
- position: relative;
49
- }
50
- /* Main Container */
51
- .main-container {
52
- min-height: 100vh;
53
- display: flex;
54
- flex-direction: column;
55
- position: relative;
56
- }
57
- /* Animated Background */
58
- body::before {
59
- content: '';
60
- position: fixed;
61
- top: 0;
62
- left: 0;
63
- width: 100%;
64
- height: 100%;
65
- background:
66
- radial-gradient(circle at 20% 50%, rgba(212, 165, 116, 0.1) 0%, transparent 40%),
67
- radial-gradient(circle at 80% 50%, rgba(0, 206, 209, 0.1) 0%, transparent 40%);
68
- pointer-events: none;
69
- z-index: -2;
70
- }
71
- /* Particle Animation Background */
72
- .particles {
73
- position: fixed;
74
- top: 0;
75
- left: 0;
76
- width: 100%;
77
- height: 100%;
78
- pointer-events: none;
79
- z-index: -1;
80
- }
81
- .particle {
82
- position: absolute;
83
- width: 2px;
84
- height: 2px;
85
- border-radius: 50%;
86
- opacity: 0;
87
- animation: float 15s infinite;
88
- }
89
- .particle.steel {
90
- background: var(--steel-accent);
91
- box-shadow: 0 0 6px var(--steel-accent);
92
- }
93
- .particle.tarek {
94
- background: var(--tarek-accent);
95
- box-shadow: 0 0 6px var(--tarek-accent);
96
- }
97
- @keyframes float {
98
- 0%, 100% {
99
- opacity: 0;
100
- transform: translateY(100vh) scale(0);
101
- }
102
- 10% {
103
- opacity: 1;
104
- transform: translateY(90vh) scale(1);
105
- }
106
- 90% {
107
- opacity: 1;
108
- transform: translateY(10vh) scale(1);
109
- }
110
- }
111
- /* Header Styles */
112
- .header {
113
- position: relative;
114
- padding: 60px 0;
115
- text-align: center;
116
- background: linear-gradient(180deg, rgba(20, 20, 32, 0.8) 0%, rgba(10, 10, 15, 0.8) 100%);
117
- border-bottom: 2px solid transparent;
118
- background-clip: padding-box;
119
- overflow: hidden;
120
- }
121
- .header::before {
122
- content: '';
123
- position: absolute;
124
- bottom: 0;
125
- left: 0;
126
- width: 100%;
127
- height: 2px;
128
- background: linear-gradient(90deg, var(--steel-primary) 0%, var(--tarek-primary) 100%);
129
- animation: borderFlow 3s ease-in-out infinite;
130
- }
131
- @keyframes borderFlow {
132
- 0%, 100% { transform: translateX(-100%); }
133
- 50% { transform: translateX(100%); }
134
- }
135
- .logo-container {
136
- display: inline-block;
137
- position: relative;
138
- margin-bottom: 30px;
139
- }
140
- .logo {
141
- font-family: 'Bebas Neue', cursive;
142
- font-size: 5rem;
143
- font-weight: 900;
144
- letter-spacing: 0.1em;
145
- position: relative;
146
- display: inline-block;
147
- }
148
- .logo-steel {
149
- background: linear-gradient(135deg, var(--steel-primary) 0%, var(--steel-accent) 100%);
150
- -webkit-background-clip: text;
151
- -webkit-text-fill-color: transparent;
152
- background-clip: text;
153
- text-shadow: 0 0 30px rgba(212, 165, 116, 0.5);
154
- }
155
- .logo-tarek {
156
- background: linear-gradient(135deg, var(--tarek-primary) 0%, var(--tarek-accent) 100%);
157
- -webkit-background-clip: text;
158
- -webkit-text-fill-color: transparent;
159
- background-clip: text;
160
- text-shadow: 0 0 30px rgba(0, 206, 209, 0.5);
161
- }
162
- .tagline {
163
- font-size: 1.2rem;
164
- color: var(--text-secondary);
165
- margin-top: 10px;
166
- letter-spacing: 0.2em;
167
- text-transform: uppercase;
168
- }
169
- /* Navigation */
170
- .nav {
171
- position: sticky;
172
- top: 0;
173
- background: rgba(10, 10, 15, 0.95);
174
- backdrop-filter: blur(10px);
175
- padding: 20px 0;
176
- z-index: 1000;
177
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
178
- }
179
- .nav-container {
180
- max-width: 1200px;
181
- margin: 0 auto;
182
- padding: 0 20px;
183
- display: flex;
184
- justify-content: center;
185
- gap: 40px;
186
- flex-wrap: wrap;
187
- }
188
- .nav-link {
189
- color: var(--text-secondary);
190
- text-decoration: none;
191
- font-weight: 500;
192
- text-transform: uppercase;
193
- letter-spacing: 0.1em;
194
- position: relative;
195
- transition: all 0.3s ease;
196
- padding: 5px 10px;
197
- }
198
- .nav-link::before {
199
- content: '';
200
- position: absolute;
201
- bottom: -5px;
202
- left: 0;
203
- width: 0;
204
- height: 2px;
205
- background: linear-gradient(90deg, var(--steel-primary) 0%, var(--tarek-primary) 100%);
206
- transition: width 0.3s ease;
207
- }
208
- .nav-link:hover {
209
- color: var(--text-primary);
210
- }
211
- .nav-link:hover::before {
212
- width: 100%;
213
- }
214
- /* Container */
215
- .container {
216
- max-width: 1200px;
217
- margin: 0 auto;
218
- padding: 60px 20px;
219
- }
220
- /* Section Styles */
221
- .section {
222
- margin-bottom: 100px;
223
- opacity: 0;
224
- transform: translateY(30px);
225
- animation: fadeInUp 0.8s ease forwards;
226
- }
227
- @keyframes fadeInUp {
228
- to {
229
- opacity: 1;
230
- transform: translateY(0);
231
- }
232
- }
233
- .section-title {
234
- font-family: 'Orbitron', sans-serif;
235
- font-size: 3rem;
236
- margin-bottom: 40px;
237
- text-align: center;
238
- position: relative;
239
- display: inline-block;
240
- width: 100%;
241
- }
242
- .section-title span {
243
- position: relative;
244
- z-index: 1;
245
- }
246
- .section-title::before,
247
- .section-title::after {
248
- content: '';
249
- position: absolute;
250
- top: 50%;
251
- width: 100px;
252
- height: 1px;
253
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
254
- }
255
- .section-title::before {
256
- left: 20%;
257
- }
258
- .section-title::after {
259
- right: 20%;
260
- background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent);
261
- }
262
- /* About Section */
263
- .about-content {
264
- display: grid;
265
- grid-template-columns: 1fr 1fr;
266
- gap: 60px;
267
- align-items: center;
268
- }
269
- .about-text {
270
- font-size: 1.1rem;
271
- line-height: 1.8;
272
- color: var(--text-secondary);
273
- }
274
- .about-visual {
275
- position: relative;
276
- height: 400px;
277
- background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
278
- display: flex;
279
- align-items: center;
280
- justify-content: center;
281
- }
282
- .fusion-orb {
283
- width: 200px;
284
- height: 200px;
285
- position: relative;
286
- animation: pulse 4s ease-in-out infinite;
287
- }
288
- .fusion-orb::before {
289
- content: '';
290
- position: absolute;
291
- top: 0;
292
- left: 0;
293
- width: 50%;
294
- height: 100%;
295
- background: radial-gradient(circle at left center, var(--steel-primary) 0%, transparent 70%);
296
- filter: blur(20px);
297
- }
298
- .fusion-orb::after {
299
- content: '';
300
- position: absolute;
301
- top: 0;
302
- right: 0;
303
- width: 50%;
304
- height: 100%;
305
- background: radial-gradient(circle at right center, var(--tarek-primary) 0%, transparent 70%);
306
- filter: blur(20px);
307
- }
308
- @keyframes pulse {
309
- 0%, 100% { transform: scale(1); }
310
- 50% { transform: scale(1.1); }
311
- }
312
- /* Models Section */
313
- .models-grid {
314
- display: grid;
315
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
316
- gap: 30px;
317
- margin-top: 40px;
318
- }
319
- .model-card {
320
- background: rgba(20, 20, 32, 0.6);
321
- border: 1px solid rgba(255, 255, 255, 0.1);
322
- border-radius: 15px;
323
- padding: 30px;
324
- position: relative;
325
- overflow: hidden;
326
- transition: all 0.3s ease;
327
- cursor: pointer;
328
- }
329
- .model-card::before {
330
- content: '';
331
- position: absolute;
332
- top: -2px;
333
- left: -2px;
334
- right: -2px;
335
- bottom: -2px;
336
- background: linear-gradient(135deg, var(--steel-primary), var(--tarek-primary));
337
- border-radius: 15px;
338
- opacity: 0;
339
- transition: opacity 0.3s ease;
340
- z-index: -1;
341
- }
342
- .model-card:hover {
343
- transform: translateY(-5px);
344
- }
345
- .model-card:hover::before {
346
- opacity: 1;
347
- }
348
- .model-card-inner {
349
- position: relative;
350
- background: var(--bg-secondary);
351
- border-radius: 13px;
352
- padding: 25px;
353
- height: 100%;
354
- }
355
- .model-name {
356
- font-family: 'Orbitron', sans-serif;
357
- font-size: 1.5rem;
358
- margin-bottom: 15px;
359
- background: linear-gradient(135deg, var(--steel-accent), var(--tarek-accent));
360
- -webkit-background-clip: text;
361
- -webkit-text-fill-color: transparent;
362
- background-clip: text;
363
- }
364
- .model-description {
365
- color: var(--text-secondary);
366
- margin-bottom: 20px;
367
- line-height: 1.6;
368
- }
369
- .model-stats {
370
- display: flex;
371
- gap: 20px;
372
- margin-top: auto;
373
- }
374
- .stat {
375
- display: flex;
376
- flex-direction: column;
377
- align-items: center;
378
- }
379
- .stat-value {
380
- font-family: 'Orbitron', sans-serif;
381
- font-size: 1.2rem;
382
- color: var(--text-primary);
383
- }
384
- .stat-label {
385
- font-size: 0.8rem;
386
- color: var(--text-secondary);
387
- text-transform: uppercase;
388
- }
389
- /* Team Section */
390
- .team-grid {
391
- display: grid;
392
- grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
393
- gap: 60px;
394
- margin-top: 60px;
395
- }
396
- .team-member {
397
- position: relative;
398
- padding: 40px;
399
- border-radius: 20px;
400
- overflow: hidden;
401
- transition: all 0.3s ease;
402
- }
403
- /* Steel's Card Style */
404
- .team-member.steel {
405
- background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, rgba(139, 105, 20, 0.05) 100%);
406
- border: 2px solid var(--steel-dark);
407
- box-shadow: 0 0 30px rgba(212, 165, 116, 0.2);
408
- }
409
- .team-member.steel::before {
410
- content: '';
411
- position: absolute;
412
- top: -50%;
413
- left: -50%;
414
- width: 200%;
415
- height: 200%;
416
- background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
417
- animation: rotate 20s linear infinite;
418
- }
419
- /* Tarek's Card Style */
420
- .team-member.tarek {
421
- background: linear-gradient(135deg, rgba(0, 206, 209, 0.1) 0%, rgba(25, 25, 112, 0.05) 100%);
422
- border: 2px solid var(--tarek-dark);
423
- box-shadow: 0 0 30px rgba(0, 206, 209, 0.2);
424
- }
425
- .team-member.tarek::before {
426
- content: '';
427
- position: absolute;
428
- top: 0;
429
- left: 0;
430
- width: 100%;
431
- height: 100%;
432
- background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="50" cy="50" r="2" fill="rgba(0,255,255,0.5)"/><circle cx="150" cy="150" r="2" fill="rgba(0,255,255,0.5)"/><circle cx="100" cy="100" r="3" fill="rgba(0,206,209,0.7)"/></svg>') repeat;
433
- animation: twinkle 3s ease-in-out infinite;
434
- }
435
- @keyframes rotate {
436
- from { transform: rotate(0deg); }
437
- to { transform: rotate(360deg); }
438
- }
439
- @keyframes twinkle {
440
- 0%, 100% { opacity: 0.3; }
441
- 50% { opacity: 1; }
442
- }
443
- .member-content {
444
- position: relative;
445
- z-index: 1;
446
- }
447
- .member-avatar {
448
- width: 120px;
449
- height: 120px;
450
- border-radius: 50%;
451
- margin-bottom: 20px;
452
- position: relative;
453
- overflow: hidden;
454
- display: flex;
455
- align-items: center;
456
- justify-content: center;
457
- font-family: 'Bebas Neue', cursive;
458
- font-size: 3rem;
459
- }
460
- .member-avatar img {
461
- width: 100%;
462
- height: 100%;
463
- object-fit: cover;
464
- }
465
- .steel .member-avatar {
466
- background: linear-gradient(135deg, var(--steel-primary), var(--steel-dark));
467
- box-shadow: 0 0 30px rgba(212, 165, 116, 0.5);
468
- color: var(--bg-primary);
469
- }
470
- .tarek .member-avatar {
471
- background: linear-gradient(135deg, var(--tarek-primary), var(--tarek-dark));
472
- box-shadow: 0 0 30px rgba(0, 206, 209, 0.5);
473
- color: var(--bg-primary);
474
- }
475
- .member-name {
476
- font-family: 'Orbitron', sans-serif;
477
- font-size: 2rem;
478
- margin-bottom: 10px;
479
- }
480
- .steel .member-name {
481
- color: var(--steel-accent);
482
- text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
483
- }
484
- .tarek .member-name {
485
- color: var(--tarek-accent);
486
- text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
487
- }
488
- .member-role {
489
- color: var(--text-secondary);
490
- margin-bottom: 20px;
491
- text-transform: uppercase;
492
- letter-spacing: 0.1em;
493
- }
494
- .member-bio {
495
- line-height: 1.8;
496
- color: var(--text-secondary);
497
- margin-bottom: 20px;
498
- }
499
- .member-links {
500
- display: flex;
501
- gap: 15px;
502
- }
503
- .member-link {
504
- padding: 8px 20px;
505
- border-radius: 25px;
506
- text-decoration: none;
507
- font-weight: 500;
508
- transition: all 0.3s ease;
509
- }
510
- .steel .member-link {
511
- background: rgba(212, 165, 116, 0.2);
512
- color: var(--steel-accent);
513
- border: 1px solid var(--steel-primary);
514
- }
515
- .steel .member-link:hover {
516
- background: rgba(212, 165, 116, 0.3);
517
- box-shadow: 0 0 15px rgba(212, 165, 116, 0.5);
518
- }
519
- .tarek .member-link {
520
- background: rgba(0, 206, 209, 0.2);
521
- color: var(--tarek-accent);
522
- border: 1px solid var(--tarek-primary);
523
- }
524
- .tarek .member-link:hover {
525
- background: rgba(0, 206, 209, 0.3);
526
- box-shadow: 0 0 15px rgba(0, 206, 209, 0.5);
527
- }
528
- /* Community Section */
529
- .community-content {
530
- text-align: center;
531
- max-width: 800px;
532
- margin: 0 auto;
533
- }
534
- .community-stats {
535
- display: grid;
536
- grid-template-columns: repeat(3, 1fr);
537
- gap: 40px;
538
- margin: 60px 0;
539
- }
540
- .community-stat {
541
- padding: 30px;
542
- background: rgba(20, 20, 32, 0.6);
543
- border-radius: 15px;
544
- border: 1px solid rgba(255, 255, 255, 0.1);
545
- transition: all 0.3s ease;
546
- }
547
- .community-stat:hover {
548
- transform: translateY(-5px);
549
- border-color: rgba(255, 255, 255, 0.2);
550
- }
551
- .stat-number {
552
- font-family: 'Orbitron', sans-serif;
553
- font-size: 3rem;
554
- font-weight: 700;
555
- background: linear-gradient(135deg, var(--steel-primary), var(--tarek-primary));
556
- -webkit-background-clip: text;
557
- -webkit-text-fill-color: transparent;
558
- background-clip: text;
559
- }
560
- .join-button {
561
- display: inline-block;
562
- padding: 15px 40px;
563
- font-family: 'Orbitron', sans-serif;
564
- font-size: 1.2rem;
565
- font-weight: 600;
566
- text-decoration: none;
567
- color: var(--text-primary);
568
- background: linear-gradient(135deg, var(--steel-primary), var(--tarek-primary));
569
- border-radius: 50px;
570
- position: relative;
571
- overflow: hidden;
572
- transition: all 0.3s ease;
573
- margin-top: 40px;
574
- }
575
- .join-button:hover {
576
- transform: scale(1.05);
577
- box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
578
- }
579
- .join-button::before {
580
- content: '';
581
- position: absolute;
582
- top: 0;
583
- left: -100%;
584
- width: 100%;
585
- height: 100%;
586
- background: rgba(255, 255, 255, 0.3);
587
- transition: left 0.5s ease;
588
- }
589
- .join-button:hover::before {
590
- left: 100%;
591
- }
592
- /* Footer */
593
- .footer {
594
- background: rgba(10, 10, 15, 0.9);
595
- padding: 40px 0;
596
- text-align: center;
597
- border-top: 1px solid rgba(255, 255, 255, 0.1);
598
- margin-top: 100px;
599
- }
600
- .footer-text {
601
- color: var(--text-secondary);
602
- margin-bottom: 20px;
603
- }
604
- .footer-links {
605
- display: flex;
606
- justify-content: center;
607
- gap: 30px;
608
- flex-wrap: wrap;
609
- }
610
- .footer-link {
611
- color: var(--text-secondary);
612
- text-decoration: none;
613
- transition: color 0.3s ease;
614
- }
615
- .footer-link:hover {
616
- color: var(--text-primary);
617
- }
618
- /* Responsive Design */
619
- @media (max-width: 768px) {
620
- .logo {
621
- font-size: 3rem;
622
- }
623
- .section-title {
624
- font-size: 2rem;
625
- }
626
- .about-content {
627
- grid-template-columns: 1fr;
628
- gap: 40px;
629
- }
630
- .models-grid,
631
- .team-grid {
632
- grid-template-columns: 1fr;
633
- }
634
- .community-stats {
635
- grid-template-columns: 1fr;
636
- gap: 20px;
637
- }
638
- .nav-container {
639
- gap: 20px;
640
- }
641
- }
642
- /* Featured Models Banner */
643
- .featured-banner {
644
- background: linear-gradient(135deg, rgba(212, 165, 116, 0.1), rgba(0, 206, 209, 0.1));
645
- border: 2px solid transparent;
646
- background-clip: padding-box;
647
- border-radius: 20px;
648
- padding: 40px;
649
- margin-bottom: 60px;
650
- position: relative;
651
- overflow: hidden;
652
- }
653
- .featured-banner::before {
654
- content: '';
655
- position: absolute;
656
- inset: 0;
657
- border-radius: 20px;
658
- padding: 2px;
659
- background: linear-gradient(135deg, var(--steel-primary), var(--tarek-primary));
660
- -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
661
- -webkit-mask-composite: xor;
662
- mask-composite: exclude;
663
- }
664
- .featured-title {
665
- font-family: 'Orbitron', sans-serif;
666
- font-size: 2rem;
667
- text-align: center;
668
- margin-bottom: 30px;
669
- background: linear-gradient(135deg, var(--steel-accent), var(--tarek-accent));
670
- -webkit-background-clip: text;
671
- -webkit-text-fill-color: transparent;
672
- background-clip: text;
673
- }
674
- </style>
675
  </head>
676
  <body>
677
- <div class="main-container">
678
- <!-- Particle Background -->
679
- <div class="particles" id="particles"></div>
680
- <!-- Header -->
681
- <header class="header">
682
- <div class="logo-container">
683
- <h1 class="logo">
684
- <span class="logo-steel">CRUCIBLE</span>
685
- <span class="logo-tarek">LABS</span>
686
- </h1>
687
- </div>
688
- </header>
689
- <!-- Main Content -->
690
- <main class="container">
691
- <!-- About Section -->
692
- <section id="about" class="section">
693
- <h2 class="section-title"><span>About Crucible Labs</span></h2>
694
- <div class="about-content">
695
- <div class="about-text">
696
- <p>Welcome to Crucible Labs, where the belief is that the best ideas come from the crucible of collaboration.</p>
697
- </div>
698
- <div class="about-visual">
699
- <div class="fusion-orb"></div>
700
- </div>
701
- </div>
702
- </section>
703
- <!-- Featured Models -->
704
- <section id="featured" class="section">
705
- <div class="featured-banner">
706
- <h3 class="featured-title">🔥 Featured Experiments 🌟</h3>
707
- <div class="models-grid">
708
- <!--<div class="model-card">
709
- <div class="model-card-inner">
710
- <h4 class="model-name"> </h4>
711
- <p class="model-description"> </p>
712
- <div class="model-stats">
713
- <div class="stat">
714
- <span class="stat-value"> </span>
715
- <span class="stat-label">Parameters</span>
716
- </div>
717
- <div class="stat">
718
- <span class="stat-value"> </span>
719
- <span class="stat-label"> </span>
720
- </div>
721
- <div class="stat">
722
- <span class="stat-value">12K</span>
723
- <span class="stat-label">Downloads</span>
724
- </div>
725
- </div>
726
- </div>
727
- </div>
728
- <div class="model-card">
729
- <div class="model-card-inner">
730
- <h4 class="model-name"> </h4>
731
- <p class="model-description"> </p>
732
- <div class="model-stats">
733
- <div class="stat">
734
- <span class="stat-value"> </span>
735
- <span class="stat-label">Parameters</span>
736
- </div>
737
- <div class="stat">
738
- <span class="stat-value"> </span>
739
- <span class="stat-label">Rating</span>
740
- </div>
741
- <div class="stat">
742
- <span class="stat-value"> </span>
743
- <span class="stat-label">Downloads</span>
744
- </div>
745
- </div>
746
- </div>
747
- </div>-->
748
- </div>
749
- </div>
750
- </section>
751
- <!-- Models Section -->
752
- <section id="models" class="section">
753
- <h2 class="section-title"><span>Our Models</span></h2>
754
- <div class="models-grid">
755
- <!--<div class="model-card">
756
- <div class="model-card-inner">
757
- <h4 class="model-name"> </h4>
758
- <p class="model-description"> </p>
759
- <div class="model-stats">
760
- <div class="stat">
761
- <span class="stat-value"> </span>
762
- <span class="stat-label">Parameters</span>
763
- </div>
764
- <div class="stat">
765
- <span class="stat-value"> </span>
766
- <span class="stat-label">Rating</span>
767
- </div>
768
- <div class="stat">
769
- <span class="stat-value"> </span>
770
- <span class="stat-label">Downloads</span>
771
- </div>
772
- </div>
773
- </div>
774
- </div>
775
- <div class="model-card">
776
- <div class="model-card-inner">
777
- <h4 class="model-name"> </h4>
778
- <p class="model-description"> </p>
779
- <div class="model-stats">
780
- <div class="stat">
781
- <span class="stat-value"> </span>
782
- <span class="stat-label">Parameters</span>
783
- </div>
784
- <div class="stat">
785
- <span class="stat-value"> </span>
786
- <span class="stat-label">Rating</span>
787
- </div>
788
- <div class="stat">
789
- <span class="stat-value"> </span>
790
- <span class="stat-label">Downloads</span>
791
- </div>
792
- </div>
793
- </div>
794
- </div>
795
- <div class="model-card">
796
- <div class="model-card-inner">
797
- <h4 class="model-name"> </h4>
798
- <p class="model-description"> </p>
799
- <div class="model-stats">
800
- <div class="stat">
801
- <span class="stat-value"> </span>
802
- <span class="stat-label"> </span>
803
- </div>
804
- <div class="stat">
805
- <span class="stat-value"> </span>
806
- <span class="stat-label">Rating</span>
807
- </div>
808
- <div class="stat">
809
- <span class="stat-value"> </span>
810
- <span class="stat-label"> </span>
811
- </div>
812
- </div>
813
- </div>
814
- </div>-->
815
- </div>
816
- </section>
817
- <!-- Team Section -->
818
- <section id="team" class="section">
819
- <h2 class="section-title"><span>Team</span></h2>
820
- <div class="team-grid">
821
- <div class="team-member steel">
822
- <div class="member-content">
823
- <div class="member-avatar">
824
- <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/64545af5ec40bbbd01242ca6/0DigVMV0L5YCnyluoEOiX.jpeg" alt="Steelskull">
825
- </div>
826
- <h3 class="member-name">Steelskull</h3>
827
- <p class="member-role">Paramancer</p>
828
- <p class="member-bio">
829
- </p>
830
- <div class="member-links">
831
- <a href="https://huggingface.co/Steelskull" class="member-link" target="_blank">HuggingFace</a>
832
- <a href="https://ko-fi.com/steelskull" class="member-link" target="_blank">Ko-fi</a>
833
- </div>
834
- </div>
835
- </div>
836
- <div class="team-member tarek">
837
- <div class="member-content">
838
- <div class="member-avatar">T</div>
839
- <h3 class="member-name">Tarek07</h3>
840
- <p class="member-role">Mad-Lad</p>
841
- <p class="member-bio">
842
- </p>
843
- <div class="member-links">
844
- <a href="https://huggingface.co/Tarek07" class="member-link" target="_blank">HuggingFace</a>
845
- <a href="https://ko-fi.com/tarek07" class="member-link" target="_blank">Ko-fi</a>
846
- </div>
847
- </div>
848
- </div>
849
- </div>
850
- </section>
851
- </main>
852
- <!-- Footer -->
853
- <footer class="footer">
854
- <p class="footer-text">© 2025 Crucible Labs. Forged with passion, powered by innovation.</p>
855
- </footer>
856
  </div>
857
- <script>
858
- // Create particle effect
859
- function createParticles() {
860
- const particlesContainer = document.getElementById('particles');
861
- const particleCount = 50;
862
- for (let i = 0; i < particleCount; i++) {
863
- const particle = document.createElement('div');
864
- particle.className = `particle ${Math.random() > 0.5 ? 'steel' : 'tarek'}`;
865
- particle.style.left = Math.random() * 100 + '%';
866
- particle.style.animationDelay = Math.random() * 15 + 's';
867
- particle.style.animationDuration = (15 + Math.random() * 10) + 's';
868
- particlesContainer.appendChild(particle);
869
- }
870
- }
871
- // Smooth scrolling for navigation links
872
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
873
- anchor.addEventListener('click', function (e) {
874
- e.preventDefault();
875
- const target = document.querySelector(this.getAttribute('href'));
876
- if (target) {
877
- target.scrollIntoView({
878
- behavior: 'smooth',
879
- block: 'start'
880
- });
881
- }
882
- });
883
- });
884
- // Intersection Observer for fade-in animations
885
- const observerOptions = {
886
- threshold: 0.1,
887
- rootMargin: '0px 0px -100px 0px'
888
- };
889
- const observer = new IntersectionObserver((entries) => {
890
- entries.forEach(entry => {
891
- if (entry.isIntersecting) {
892
- entry.target.style.animationDelay = '0.2s';
893
- entry.target.style.animationPlayState = 'running';
894
- }
895
- });
896
- }, observerOptions);
897
- // Observe all sections
898
- document.querySelectorAll('.section').forEach(section => {
899
- section.style.animationPlayState = 'paused';
900
- observer.observe(section);
901
- });
902
- // Initialize particles
903
- createParticles();
904
- // Add hover effect to model cards
905
- document.querySelectorAll('.model-card').forEach(card => {
906
- card.addEventListener('mouseenter', function() {
907
- this.style.transform = 'translateY(-10px) scale(1.02)';
908
- });
909
- card.addEventListener('mouseleave', function() {
910
- this.style.transform = 'translateY(0) scale(1)';
911
- });
912
- });
913
- </script>
914
  </body>
915
  </html>
 
10
  <!DOCTYPE html>
11
  <html lang="en">
12
  <head>
13
+ <meta charset="UTF-8">
14
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
15
+ <title>Crucible Labs</title>
16
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Space+Grotesk:wght@300;400;500;600&display=swap" rel="stylesheet">
17
+ <style>
18
+ * {
19
+ box-sizing: border-box;
20
+ margin: 0;
21
+ padding: 0;
22
+ }
23
+ body {
24
+ font-family: 'Space Grotesk', sans-serif;
25
+ font-size: 16px;
26
+ line-height: 1.6;
27
+ background-color: #0A0A0F;
28
+ color: #FFFFFF;
29
+ min-height: 100vh;
30
+ display: flex;
31
+ align-items: center;
32
+ justify-content: center;
33
+ padding: 10px;
34
+ }
35
+ .container {
36
+ width: 100%;
37
+ max-width: 800px;
38
+ background-color: #141420;
39
+ border-radius: 20px;
40
+ box-shadow: 0 0 30px rgba(212, 165, 116, 0.15);
41
+ border: 1px solid rgba(212, 165, 116, 0.3);
42
+ padding: 20px;
43
+ margin: 10px;
44
+ background-image:
45
+ radial-gradient(circle at 20% 50%, rgba(212, 165, 116, 0.1) 0%, transparent 40%),
46
+ radial-gradient(circle at 80% 50%, rgba(0, 206, 209, 0.1) 0%, transparent 40%);
47
+ }
48
+ .logo {
49
+ font-family: 'Orbitron', sans-serif;
50
+ font-size: clamp(36px, 8vw, 48px);
51
+ font-weight: 700;
52
+ text-align: center;
53
+ margin-bottom: 10px;
54
+ letter-spacing: 0.1em;
55
+ }
56
+ .logo-steel {
57
+ color: #D4A574;
58
+ text-shadow: 0 0 20px rgba(212, 165, 116, 0.5);
59
+ }
60
+ .logo-tarek {
61
+ color: #00CED1;
62
+ text-shadow: 0 0 20px rgba(0, 206, 209, 0.5);
63
+ }
64
+ .tagline {
65
+ text-align: center;
66
+ color: #B0B0B0;
67
+ text-transform: uppercase;
68
+ letter-spacing: 0.2em;
69
+ font-size: clamp(12px, 2.5vw, 14px);
70
+ margin-bottom: 30px;
71
+ }
72
+ h1, h2, h3 {
73
+ font-family: 'Orbitron', sans-serif;
74
+ margin-bottom: 15px;
75
+ font-weight: 600;
76
+ }
77
+ h2 {
78
+ font-size: clamp(20px, 4vw, 24px);
79
+ color: #D4A574;
80
+ border-bottom: 2px solid rgba(212, 165, 116, 0.3);
81
+ padding-bottom: 10px;
82
+ margin-top: 25px;
83
+ }
84
+ p {
85
+ margin-bottom: 15px;
86
+ line-height: 1.8;
87
+ font-size: clamp(14px, 3vw, 16px);
88
+ color: #B0B0B0;
89
+ }
90
+ .description {
91
+ text-align: center;
92
+ max-width: 600px;
93
+ margin: 0 auto 30px;
94
+ }
95
+ .content-section {
96
+ background-color: rgba(20, 20, 32, 0.6);
97
+ border-radius: 12px;
98
+ padding: 15px;
99
+ margin: 15px 0;
100
+ border: 1px solid rgba(255, 255, 255, 0.1);
101
+ }
102
+ .team-grid {
103
+ display: grid;
104
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
105
+ gap: 15px;
106
+ margin: 15px 0;
107
+ }
108
+ .team-member {
109
+ padding: 20px 15px;
110
+ border-radius: 10px;
111
+ background-color: rgba(20, 20, 32, 0.8);
112
+ border: 1px solid rgba(255, 255, 255, 0.1);
113
+ transition: all 0.3s ease;
114
+ text-decoration: none;
115
+ color: #FFFFFF;
116
+ display: block;
117
+ text-align: center;
118
+ }
119
+ .team-member:hover {
120
+ transform: translateY(-5px);
121
+ border-color: rgba(255, 255, 255, 0.3);
122
+ }
123
+ .team-member.steel {
124
+ background-color: rgba(212, 165, 116, 0.1);
125
+ border: 1px solid #8B6914;
126
+ }
127
+ .team-member.steel:hover {
128
+ box-shadow: 0 0 20px rgba(212, 165, 116, 0.4);
129
+ }
130
+ .team-member.tarek {
131
+ background-color: rgba(0, 206, 209, 0.1);
132
+ border: 1px solid #191970;
133
+ }
134
+ .team-member.tarek:hover {
135
+ box-shadow: 0 0 20px rgba(0, 206, 209, 0.4);
136
+ }
137
+ .team-member-avatar {
138
+ width: 80px;
139
+ height: 80px;
140
+ border-radius: 50%;
141
+ margin: 0 auto 15px;
142
+ overflow: hidden;
143
+ display: flex;
144
+ align-items: center;
145
+ justify-content: center;
146
+ font-family: 'Orbitron', sans-serif;
147
+ font-size: 2rem;
148
+ font-weight: 700;
149
+ }
150
+ .team-member-avatar img {
151
+ width: 100%;
152
+ height: 100%;
153
+ object-fit: cover;
154
+ }
155
+ .steel .team-member-avatar {
156
+ background: linear-gradient(135deg, #D4A574, #8B6914);
157
+ color: #0A0A0F;
158
+ }
159
+ .tarek .team-member-avatar {
160
+ background: linear-gradient(135deg, #00CED1, #191970);
161
+ color: #0A0A0F;
162
+ }
163
+ .team-member h3 {
164
+ font-size: clamp(16px, 3vw, 18px);
165
+ margin-bottom: 5px;
166
+ word-break: break-word;
167
+ }
168
+ .steel h3 {
169
+ color: #FFD700;
170
+ }
171
+ .tarek h3 {
172
+ color: #00FFFF;
173
+ }
174
+ .team-member p {
175
+ font-size: clamp(12px, 2.5vw, 14px);
176
+ margin-bottom: 15px;
177
+ color: #B0B0B0;
178
+ }
179
+ .team-links {
180
+ display: flex;
181
+ gap: 10px;
182
+ justify-content: center;
183
+ flex-wrap: wrap;
184
+ }
185
+ .team-link {
186
+ font-size: clamp(11px, 2vw, 13px);
187
+ color: #FFFFFF;
188
+ text-decoration: none;
189
+ padding: 5px 10px;
190
+ border-radius: 15px;
191
+ transition: all 0.3s ease;
192
+ }
193
+ .steel .team-link {
194
+ background-color: rgba(212, 165, 116, 0.2);
195
+ border: 1px solid rgba(212, 165, 116, 0.5);
196
+ }
197
+ .steel .team-link:hover {
198
+ background-color: rgba(212, 165, 116, 0.3);
199
+ }
200
+ .tarek .team-link {
201
+ background-color: rgba(0, 206, 209, 0.2);
202
+ border: 1px solid rgba(0, 206, 209, 0.5);
203
+ }
204
+ .tarek .team-link:hover {
205
+ background-color: rgba(0, 206, 209, 0.3);
206
+ }
207
+ .button {
208
+ display: inline-block;
209
+ background: linear-gradient(135deg, #D4A574, #00CED1);
210
+ color: #0A0A0F;
211
+ padding: 12px 30px;
212
+ border-radius: 25px;
213
+ text-decoration: none;
214
+ font-weight: 600;
215
+ font-family: 'Orbitron', sans-serif;
216
+ transition: all 0.3s ease;
217
+ text-align: center;
218
+ margin: 10px 0;
219
+ width: 100%;
220
+ max-width: 300px;
221
+ font-size: clamp(14px, 3vw, 16px);
222
+ }
223
+ .button:hover {
224
+ transform: translateY(-2px);
225
+ box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
226
+ }
227
+ @media (max-width: 480px) {
228
+ .container {
229
+ padding: 15px;
230
+ margin: 5px;
231
+ }
232
+ .team-grid {
233
+ grid-template-columns: 1fr;
234
+ gap: 10px;
235
+ }
236
+ .team-member {
237
+ padding: 15px;
238
+ }
239
+ .content-section {
240
+ padding: 12px;
241
+ }
242
+ }
243
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
244
  </head>
245
  <body>
246
+ <div class="container">
247
+ <h1 class="logo">
248
+ <span class="logo-steel">CRUCIBLE</span>
249
+ <span class="logo-tarek">LABS</span>
250
+ </h1>
251
+ <p class="tagline"></p>
252
+ <p class="description">Welcome to Crucible Labs, where the belief is that the best ideas come from the crucible of collaboration.</p>
253
+ <h2>The Team</h2>
254
+ <div class="team-grid">
255
+ <div class="team-member steel">
256
+ <div class="team-member-avatar">
257
+ <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/64545af5ec40bbbd01242ca6/0DigVMV0L5YCnyluoEOiX.jpeg" alt="Steelskull">
258
+ </div>
259
+ <h3>Steelskull</h3>
260
+ <p>Paramancer</p>
261
+ <div class="team-links">
262
+ <a href="https://huggingface.co/Steelskull" class="team-link" target="_blank">HuggingFace</a>
263
+ <a href="https://ko-fi.com/steelskull" class="team-link" target="_blank">Ko-fi</a>
264
+ </div>
265
+ </div>
266
+ <div class="team-member tarek">
267
+ <div class="team-member-avatar">T</div>
268
+ <h3>Tarek07</h3>
269
+ <p>Mad-Lad</p>
270
+ <div class="team-links">
271
+ <a href="https://huggingface.co/Tarek07" class="team-link" target="_blank">HuggingFace</a>
272
+ <a href="https://ko-fi.com/tarek07" class="team-link" target="_blank">Ko-fi</a>
273
+ </div>
274
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
275
  </div>
276
+ <div class="content-section">
277
+ <h2>About Our Models</h2>
278
+ <p>We specialize in experimental merging and tuning techniques. Our focus is on creative applications, particularly in narrative generation.</p>
279
+ </div>
280
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
281
  </body>
282
  </html>