Hugging Face's logo

Spaces:
SupraLabs
/
Blog
Running

App Files Community
1
LH-Tech-AI commited on
Commit
f91d37c
·
verified ·
1 Parent(s): 7893b92

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +227 -19
index.html CHANGED
@@ -1,19 +1,227 @@
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>SupraLabs | Small Models, Big Impact</title>
7
+ <style>
8
+ :root {
9
+ --bg: #0f0f0f;
10
+ --surface: #1a1a1a;
11
+ --border: #333;
12
+ --text: #e0e0e0;
13
+ --accent: #536bfe; /* Supra Blue */
14
+ --muted: #888;
15
+ --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ body {
25
+ background-color: var(--bg);
26
+ color: var(--text);
27
+ font-family: 'Inter', -apple-system, sans-serif;
28
+ line-height: 1.6;
29
+ padding: 2rem;
30
+ }
31
+
32
+ code, pre, .mono {
33
+ font-family: var(--font-mono);
34
+ }
35
+
36
+ .container {
37
+ max-width: 900px;
38
+ margin: 0 auto;
39
+ }
40
+
41
+ /* --- Header --- */
42
+ header {
43
+ border-bottom: 2px solid var(--border);
44
+ padding-bottom: 2rem;
45
+ margin-bottom: 3rem;
46
+ display: flex;
47
+ justify-content: space-between;
48
+ align-items: flex-end;
49
+ }
50
+
51
+ .logo-area h1 {
52
+ font-size: 1.2rem;
53
+ text-transform: uppercase;
54
+ letter-spacing: 2px;
55
+ color: var(--accent);
56
+ }
57
+
58
+ nav a {
59
+ color: var(--text);
60
+ text-decoration: none;
61
+ margin-left: 1.5rem;
62
+ font-size: 0.9rem;
63
+ border-bottom: 1px solid transparent;
64
+ }
65
+
66
+ nav a:hover {
67
+ border-bottom: 1px solid var(--accent);
68
+ }
69
+
70
+ /* --- Hero Section --- */
71
+ .hero {
72
+ margin-bottom: 4rem;
73
+ }
74
+
75
+ .hero h2 {
76
+ font-size: 3rem;
77
+ line-height: 1.1;
78
+ margin-bottom: 1.5rem;
79
+ font-weight: 800;
80
+ }
81
+
82
+ .hero p {
83
+ font-size: 1.2rem;
84
+ color: var(--muted);
85
+ max-width: 600px;
86
+ }
87
+
88
+ /* --- Feed / Posts --- */
89
+ .section-label {
90
+ display: block;
91
+ font-family: var(--font-mono);
92
+ color: var(--accent);
93
+ font-size: 0.8rem;
94
+ margin-bottom: 1rem;
95
+ text-transform: uppercase;
96
+ }
97
+
98
+ .post-card {
99
+ background: var(--surface);
100
+ border: 1px solid var(--border);
101
+ padding: 2rem;
102
+ margin-bottom: 1.5rem;
103
+ transition: transform 0.2s ease, border-color 0.2s ease;
104
+ text-decoration: none;
105
+ display: block;
106
+ color: inherit;
107
+ }
108
+
109
+ .post-card:hover {
110
+ border-color: var(--accent);
111
+ transform: translateY(-2px);
112
+ }
113
+
114
+ .post-date {
115
+ font-family: var(--font-mono);
116
+ font-size: 0.8rem;
117
+ color: var(--muted);
118
+ margin-bottom: 0.5rem;
119
+ }
120
+
121
+ .post-card h3 {
122
+ font-size: 1.5rem;
123
+ margin-bottom: 1rem;
124
+ }
125
+
126
+ .tags {
127
+ display: flex;
128
+ gap: 0.5rem;
129
+ }
130
+
131
+ .tag {
132
+ font-family: var(--font-mono);
133
+ font-size: 0.7rem;
134
+ padding: 2px 8px;
135
+ border: 1px solid var(--border);
136
+ border-radius: 4px;
137
+ }
138
+
139
+ /* --- Hardware Stats --- */
140
+ .stats-grid {
141
+ display: grid;
142
+ grid-template-columns: 1fr 1fr;
143
+ gap: 1rem;
144
+ margin-top: 4rem;
145
+ border-top: 1px solid var(--border);
146
+ padding-top: 2rem;
147
+ }
148
+
149
+ .stat-box {
150
+ padding: 1rem;
151
+ border-left: 2px solid var(--accent);
152
+ }
153
+
154
+ .stat-box small {
155
+ display: block;
156
+ color: var(--muted);
157
+ font-family: var(--font-mono);
158
+ }
159
+
160
+ footer {
161
+ margin-top: 6rem;
162
+ padding-bottom: 2rem;
163
+ font-size: 0.8rem;
164
+ color: var(--muted);
165
+ text-align: center;
166
+ }
167
+
168
+ @media (max-width: 600px) {
169
+ .hero h2 { font-size: 2rem; }
170
+ header { flex-direction: column; align-items: flex-start; gap: 1rem; }
171
+ nav a { margin-left: 0; margin-right: 1rem; }
172
+ .stats-grid { grid-template-columns: 1fr; }
173
+ }
174
+ </style>
175
+ </head>
176
+ <body>
177
+
178
+ <div class="container">
179
+ <header>
180
+ <div class="logo-area">
181
+ <h1>SupraLabs_</h1>
182
+ </div>
183
+ <nav>
184
+ <a href="#news">News</a>
185
+ <a href="https://huggingface.co/SupraLabs">HuggingFace</a>
186
+ <a href="#hardware">Hardware</a>
187
+ </nav>
188
+ </header>
189
+
190
+ <section class="hero">
191
+ <h2>Small weights.<br>Huge potential.</h2>
192
+ <p>We're democratizing AI by training high-performance models on consumer hardware. 100% Open Source. 0% Slop.</p>
193
+ </section>
194
+
195
+ <span class="section-label" id="news">// Latest_Updates</span>
196
+
197
+ <a href="we-founded-supralabs.html" class="post-card">
198
+ <div class="post-date">2025-05-11</div>
199
+ <h3>We founded SupraLabs: Real Open Source AI</h3>
200
+ <p>Today marks the beginning of our journey. No corporate gatekeeping, just pure optimization on accessible hardware.</p>
201
+ <div class="tags" style="margin-top: 1.5rem;">
202
+ <span class="tag">#announcement</span>
203
+ <span class="tag">#roadmap</span>
204
+ <span class="tag">#open-source</span>
205
+ </div>
206
+ </a>
207
+
208
+ <div class="stats-grid" id="hardware">
209
+ <div class="stat-box">
210
+ <small>Main Node</small>
211
+ <strong>RTX 5060 Ti 16GB</strong>
212
+ <p class="mono" style="font-size: 0.8rem; color: var(--accent);">[LH-Tech AI]</p>
213
+ </div>
214
+ <div class="stat-box">
215
+ <small>Secondary Node</small>
216
+ <strong>GTX 750Ti 4GB</strong>
217
+ <p class="mono" style="font-size: 0.8rem; color: var(--accent);">[AxionLab]</p>
218
+ </div>
219
+ </div>
220
+
221
+ <footer>
222
+ <p class="mono">&copy; 2026 SupraLabs // Built for the community.</p>
223
+ </footer>
224
+ </div>
225
+
226
+ </body>
227
+ </html>