Hugging Face's logo

Spaces:
dotlabs
/
README
Running

App Files Community
1
appvoid commited on
Commit
92cbd83
·
verified ·
1 Parent(s): ead72b4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +198 -34
index.html CHANGED
@@ -1,48 +1,212 @@
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">
6
- <meta name="theme-color" content="#0a0a0a">
7
- <title>Dot Labs — Minimal 01</title>
8
  <style>
9
- :root{--bg:#0a0a0a;--panel:#111214;--panel2:#16171a;--line:#2a2c31;--text:#f2f2ef;--muted:#9a9a97;--soft:#cbcbc7}
 
 
 
 
 
 
 
 
 
 
 
 
10
  *{box-sizing:border-box}
11
  html,body{margin:0}
12
- body{background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
 
 
 
 
 
13
  a{color:inherit}
14
- a:focus-visible{outline:2px solid #fff;outline-offset:4px}
15
- .page{min-height:100svh;padding:24px;display:flex}
16
- .frame{width:min(100%,calc(100vw - 48px));min-height:calc(100svh - 48px);margin:0 auto;background:var(--panel);border:1px solid var(--line)}
17
- .brand{font-size:20px;font-weight:800;letter-spacing:-.07em;text-decoration:none;white-space:nowrap}
18
- .brand .dot{display:inline-block;width:.68em;height:.68em;border-radius:50%;background:var(--text);margin:0 1px}
19
- .micro{font:10px 'Courier New',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
20
- .btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:1px solid #393c42;padding:13px 16px;font:11px 'Courier New',monospace;letter-spacing:.08em;text-transform:uppercase}
21
- .btn:hover{background:#18191d}
22
- .partners{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
23
- .partner{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border:1px solid #363940;border-radius:999px;padding:7px 12px 7px 7px;background:#141518}
24
- .partner img{width:26px;height:26px;border-radius:50%;display:block;background:#202227;border:1px solid #30333a;object-fit:cover}
25
- .partner span{font:11px 'Courier New',monospace;letter-spacing:.04em;color:var(--soft)}
26
- .legal{color:var(--muted);font:10px/1.5 'Courier New',monospace;letter-spacing:.04em}
27
- .dotfield{background-image:radial-gradient(circle, rgba(242,242,239,.14) 1.2px, transparent 1.2px);background-size:16px 16px}
28
- .dotfield-fine{background-image:radial-gradient(circle, rgba(242,242,239,.1) 1px, transparent 1px);background-size:12px 12px}
29
- .dot-band{background:radial-gradient(circle at center, rgba(242,242,239,.14) 0, rgba(242,242,239,.14) 1px, transparent 1.5px) center/16px 16px, linear-gradient(180deg, transparent, rgba(242,242,239,.03), transparent)}
30
- @media(max-width:560px){.page{padding:14px}.frame{width:min(100%,calc(100vw - 28px));min-height:calc(100svh - 28px)}}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
 
32
- .layout{display:grid;grid-template-rows:auto 1fr auto;min-height:inherit}
33
- .top,.bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 22px}
34
- .bottom{border-top:1px solid var(--line);flex-wrap:wrap}
35
- .hero{display:grid;place-items:center;padding:28px}
36
- .card{width:min(100%,860px);min-height:540px;border:1px solid var(--line);background:linear-gradient(180deg,#121316,#0f1012);display:grid;place-items:center;padding:48px;position:relative;text-align:center}
37
- .ring{width:min(62vw,360px);aspect-ratio:1;border-radius:50%;border:1px solid #31343a;display:grid;place-items:center;background:radial-gradient(circle, transparent 38%, rgba(242,242,239,.08) 38.2%, rgba(242,242,239,.08) 39%, transparent 39.2%), radial-gradient(circle, rgba(242,242,239,.12) 1.2px, transparent 1.3px) center/14px 14px}
38
- h1{margin:0;font-size:clamp(44px,10vw,80px);line-height:.9;letter-spacing:-.11em}
39
- p{max-width:430px;margin:20px auto 0;font-size:18px;line-height:1.55;color:#c7c7c3}
40
- .actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}
41
- .kicker{margin-bottom:18px}
42
 
 
 
 
 
 
 
 
 
 
43
  </style>
44
  </head>
45
  <body>
46
- <div class="page"><div class="frame layout"><header class="top"><a class="brand" href="#top">D<span class="dot"></span>t Labs</a><div class="micro">01</div></header><main class="hero" id="top"><section class="card"><div><div class="micro kicker">Byte-level research</div><div class="ring"><div><h1>void.1</h1><div class="micro" style="margin-top:8px">Featured model</div></div></div><p>Minimal, dark, and intentional. Polka dots stay as structure. Nothing extra.</p><div class="actions"><a class="btn" href="https://huggingface.co/dotlabs/void.1">View model ↗</a><a class="btn" href="https://huggingface.co/spaces/dotlabs/README/discussions/1">Join Dot Labs ↗</a></div></div></section></main><footer class="bottom"><div class="partners"><a class="partner" href="https://huggingface.co/SurjoLabs"><img src="https://huggingface.co/api/organizations/SurjoLabs/avatar?redirect=true" alt="SurjoLabs logo"><span>SurjoLabs ↗</span></a><a class="partner" href="https://huggingface.co/AxiomicLabs"><img src="https://huggingface.co/api/organizations/AxiomicLabs/avatar?redirect=true" alt="AxiomicLabs logo"><span>AxiomicLabs ↗</span></a></div><div class="legal">Dot Labs is unaffiliated with OpenAI's Dot product or SpaceXAI.</div></footer></div></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  </body>
48
  </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" />
6
+ <meta name="theme-color" content="#000000" />
7
+ <title>Dot Labs — Static Dots 02</title>
8
  <style>
9
+
10
+ :root{
11
+ --bg:#000;
12
+ --card:#070707;
13
+ --border:#1c1c1e;
14
+ --text:#f5f5f7;
15
+ --muted:#8e8e93;
16
+ --label:#68686b;
17
+ --pill:#141416;
18
+ --pill-border:#2a2a2d;
19
+ --icon:#1a1a1c;
20
+ --icon-border:#29292d;
21
+ }
22
  *{box-sizing:border-box}
23
  html,body{margin:0}
24
+ body{
25
+ background:var(--bg);
26
+ color:var(--text);
27
+ font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
28
+ -webkit-font-smoothing:antialiased;
29
+ }
30
  a{color:inherit}
31
+ a:focus-visible{outline:2px solid #fff;outline-offset:3px}
32
+ .page{
33
+ min-height:100svh;
34
+ display:grid;
35
+ place-items:center;
36
+ padding:24px;
37
+ }
38
+ .card{
39
+ position:relative;
40
+ isolation:isolate;
41
+ overflow:hidden;
42
+ width:min(100%, calc(100vw - 48px));
43
+ max-width:960px;
44
+ min-height:680px;
45
+ padding:clamp(32px, 5vw, 56px);
46
+ display:flex;
47
+ flex-direction:column;
48
+ justify-content:space-between;
49
+ background:var(--card);
50
+ border:1px solid var(--border);
51
+ border-radius:28px;
52
+ }
53
+ .card > *{position:relative;z-index:2}
54
+ .logo{font-size:15px;font-weight:600;letter-spacing:-.02em}
55
+ main{max-width:620px}
56
+ h1{
57
+ margin:0;
58
+ font-size:clamp(54px, 9vw, 94px);
59
+ line-height:.92;
60
+ font-weight:560;
61
+ letter-spacing:-.07em;
62
+ }
63
+ p.lead,
64
+ main a.join-link{
65
+ margin:28px 0 0;
66
+ max-width:540px;
67
+ color:var(--muted);
68
+ font-size:clamp(16px,2vw,18px);
69
+ line-height:1.55;
70
+ letter-spacing:-.02em;
71
+ text-decoration:none;
72
+ }
73
+ main a.join-link{
74
+ display:inline-block;
75
+ font-size:14px;
76
+ border-bottom:1px solid rgba(255,255,255,.16);
77
+ padding-bottom:3px;
78
+ }
79
+ footer{color:#555;font-size:11px;letter-spacing:.04em}
80
+ .partners{
81
+ display:flex;
82
+ flex-direction:column;
83
+ align-items:flex-start;
84
+ gap:12px;
85
+ margin:0 0 16px;
86
+ padding-top:18px;
87
+ border-top:1px solid rgba(255,255,255,.105);
88
+ }
89
+ .partners-label{
90
+ margin:0;
91
+ color:var(--label);
92
+ font-size:10px;
93
+ font-weight:600;
94
+ letter-spacing:.16em;
95
+ text-transform:uppercase;
96
+ line-height:1;
97
+ }
98
+ .partner-list{
99
+ display:flex;
100
+ flex-wrap:wrap;
101
+ gap:8px;
102
+ width:100%;
103
+ }
104
+ .partner-link{
105
+ display:inline-flex;
106
+ flex-direction:row;
107
+ align-items:center;
108
+ justify-content:flex-start;
109
+ flex-wrap:nowrap;
110
+ gap:10px;
111
+ min-width:166px;
112
+ min-height:44px;
113
+ padding:6px 10px 6px 7px;
114
+ margin:0;
115
+ background:rgba(255,255,255,.026);
116
+ border:1px solid rgba(255,255,255,.105);
117
+ border-radius:10px;
118
+ color:#d7d7d9;
119
+ text-decoration:none;
120
+ font-size:12px;
121
+ font-weight:550;
122
+ letter-spacing:-.015em;
123
+ line-height:1;
124
+ }
125
+ .partner-icon{
126
+ position:relative;
127
+ display:grid;
128
+ place-items:center;
129
+ width:29px;
130
+ height:29px;
131
+ min-width:29px;
132
+ overflow:hidden;
133
+ background:var(--icon);
134
+ border:1px solid var(--icon-border);
135
+ border-radius:6px;
136
+ color:#c9c9cc;
137
+ font-size:13px;
138
+ font-weight:700;
139
+ line-height:1;
140
+ }
141
+ .partner-icon img{
142
+ position:absolute;
143
+ inset:0;
144
+ width:100%;
145
+ height:100%;
146
+ object-fit:cover;
147
+ display:block;
148
+ }
149
+ .partner-name{white-space:nowrap}
150
+ .partner-arrow{margin-left:auto;color:#77777b;font-size:14px;line-height:1}
151
+ .disclaimer{color:#555;font-size:10px;line-height:1.6;letter-spacing:.018em}
152
+ .art{
153
+ position:absolute;
154
+ inset:0;
155
+ z-index:1;
156
+ pointer-events:none;
157
+ }
158
+ .dotlayer,.shape{position:absolute}
159
+ @media (max-width: 600px){
160
+ .page{padding:14px}
161
+ .card{
162
+ width:min(100%, calc(100vw - 28px));
163
+ min-height:calc(100svh - 28px);
164
+ padding:28px 24px;
165
+ border-radius:22px;
166
+ }
167
+ }
168
 
 
 
 
 
 
 
 
 
 
 
169
 
170
+ .card{background:#000}
171
+ .shape.band{
172
+ width:72%; height:140%; right:-12%; top:-14%; transform:rotate(-17deg);
173
+ background-image:radial-gradient(circle, rgba(225,225,228,.35) 1px, transparent 1.35px);
174
+ background-size:14px 14px;
175
+ mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 16%, rgba(0,0,0,1) 45%, rgba(0,0,0,.82) 80%, transparent 100%);
176
+ opacity:.9;
177
+ }
178
+
179
  </style>
180
  </head>
181
  <body>
182
+ <div class="page">
183
+ <section class="card">
184
+ <div class="art" aria-hidden="true"><div class="shape band"></div></div>
185
+ <div class="logo">D●t Labs</div>
186
+ <main>
187
+ <h1>Intelligence<br>from the byte up.</h1>
188
+ <p class="lead">Independent AI research exploring multimodal, byte-level intelligence and simpler foundations for increasingly general models.</p>
189
+ <a class="join-link" href="https://huggingface.co/spaces/dotlabs/README/discussions/1">Click here to learn how to join</a>
190
+ </main>
191
+ <footer>
192
+ <div class="partners" aria-label="Partners">
193
+ <div class="partners-label">Partners</div>
194
+ <div class="partner-list">
195
+ <a class="partner-link" href="https://huggingface.co/SurjoLabs" target="_blank" rel="noopener noreferrer" aria-label="Visit SurjoLabs on Hugging Face">
196
+ <span class="partner-icon" aria-hidden="true"><span>S</span><img src="https://huggingface.co/api/organizations/SurjoLabs/avatar?redirect=true" alt="" loading="lazy" referrerpolicy="no-referrer"></span>
197
+ <span class="partner-name">SurjoLabs</span>
198
+ <span class="partner-arrow" aria-hidden="true">↗</span>
199
+ </a>
200
+ <a class="partner-link" href="https://huggingface.co/AxiomicLabs" target="_blank" rel="noopener noreferrer" aria-label="Visit AxiomicLabs on Hugging Face">
201
+ <span class="partner-icon" aria-hidden="true"><span>A</span><img src="https://huggingface.co/api/organizations/AxiomicLabs/avatar?redirect=true" alt="" loading="lazy" referrerpolicy="no-referrer"></span>
202
+ <span class="partner-name">AxiomicLabs</span>
203
+ <span class="partner-arrow" aria-hidden="true">↗</span>
204
+ </a>
205
+ </div>
206
+ </div>
207
+ <div class="disclaimer">Dot Labs™ is not related in any way to OpenAI's Dot product nor SpaceXAI web domain.</div>
208
+ </footer>
209
+ </section>
210
+ </div>
211
  </body>
212
  </html>