Hugging Face's logo

Spaces:
SteelStorage
/
README
Running

App Files Community
Steelskull commited on
Commit
b9e4575
·
verified ·
1 Parent(s): 553f6d5

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +393 -2
README.md CHANGED
@@ -6,7 +6,398 @@ colorTo: gray
6
  sdk: static
7
  pinned: false
8
  ---
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
 
10
- ![image/png](https://cdn-uploads.huggingface.co/production/uploads/64545af5ec40bbbd01242ca6/rOy82bGiuDun8VRTt4f0S.png)
 
 
 
 
11
 
12
- This is purely a storage loacation for older Models / Experiments
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  sdk: static
7
  pinned: false
8
  ---
9
+ <!DOCTYPE html>
10
+ <html lang="en">
11
+ <head>
12
+ <meta charset="UTF-8">
13
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
14
+ <title>Organization Card Template</title>
15
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600&display=swap" rel="stylesheet">
16
+ <style>
17
+ :root {
18
+ color-scheme: dark;
19
+ --primary-accent: #227C9D;
20
+ --blue-accent: #227C9D;
21
+ --green-accent: #00A676;
22
+ --bg-dark: #000000;
23
+ --text-light: #FFFFFF;
24
+ --card-bg: #1A1A1A;
25
+ --section-bg: #141414;
26
+ --border-color: #227C9D;
27
+ --background: #060608;
28
+ --color: #FAFAFA;
29
+ --stacks: 3;
30
+ }
31
 
32
+ * {
33
+ box-sizing: border-box;
34
+ margin: 0;
35
+ padding: 0;
36
+ }
37
 
38
+ body {
39
+ font-family: 'Space Grotesk', sans-serif;
40
+ font-size: 16px;
41
+ line-height: 1.6;
42
+ background-color: var(--bg-dark);
43
+ color: var(--text-light);
44
+ min-height: 100vh;
45
+ display: flex;
46
+ align-items: center;
47
+ justify-content: center;
48
+ padding: 20px;
49
+ }
50
+
51
+ .container {
52
+ width: 100%;
53
+ max-width: 800px;
54
+ background-color: var(--card-bg);
55
+ border-radius: 20px;
56
+ box-shadow: 0 0 30px rgba(34, 124, 157, 0.15);
57
+ border: 1px solid var(--border-color);
58
+ padding: 40px;
59
+ margin: 20px;
60
+ }
61
+
62
+ /* Logo container with glitch effect */
63
+ .logo-container {
64
+ width: 200px;
65
+ margin: 0 auto 40px;
66
+ position: relative;
67
+ }
68
+
69
+ .logo-stack {
70
+ position: relative;
71
+ width: 200px;
72
+ height: 200px;
73
+ }
74
+
75
+ .logo-line {
76
+ position: absolute;
77
+ top: 0;
78
+ left: 0;
79
+ width: 100%;
80
+ height: 100%;
81
+ }
82
+
83
+ .logo-line img {
84
+ width: 100%;
85
+ height: 100%;
86
+ border-radius: 24px;
87
+ padding: 1px;
88
+ background-color: var(--section-bg);
89
+ border: 1px solid rgba(34, 124, 157, 0.2);
90
+ }
91
+
92
+ .logo-line:nth-child(1) { animation: clip 10000ms 0ms linear infinite, glitch1 3000ms linear infinite; }
93
+ .logo-line:nth-child(2) { animation: clip 10000ms -2000ms linear infinite, glitch2 3000ms linear infinite; }
94
+ .logo-line:nth-child(3) { animation: clip 10000ms -4000ms linear infinite, glitch3 3000ms linear infinite; }
95
+ .logo-line:nth-child(4) { animation: clip 10000ms -6000ms linear infinite, glitch4 3000ms linear infinite; }
96
+ .logo-line:nth-child(5) { animation: clip 10000ms -8000ms linear infinite, glitch5 3000ms linear infinite; }
97
+
98
+ @keyframes clip {
99
+ 0% {
100
+ clip-path: polygon(0 100%, 100% 100%, 100% 150%, 0 150%);
101
+ }
102
+ 100% {
103
+ clip-path: polygon(0 -50%, 100% -50%, 100% 0%, 0 0);
104
+ }
105
+ }
106
+
107
+ @keyframes glitch1 {
108
+ 0%, 95%, 100% {
109
+ transform: translateX(0);
110
+ filter: none;
111
+ }
112
+ 95.5% {
113
+ transform: translateX(2px);
114
+ filter: sepia(1) hue-rotate(90deg) saturate(2);
115
+ }
116
+ 96% {
117
+ transform: translateX(-3px);
118
+ filter: sepia(1) hue-rotate(-60deg) saturate(2);
119
+ }
120
+ 96.5% {
121
+ transform: translateX(1px);
122
+ filter: none;
123
+ }
124
+ }
125
+
126
+ @keyframes glitch2 {
127
+ 0%, 95%, 100% {
128
+ transform: translateX(0);
129
+ filter: none;
130
+ }
131
+ 95.5% {
132
+ transform: translateX(-2px);
133
+ filter: sepia(1) hue-rotate(120deg) saturate(2);
134
+ }
135
+ 96% {
136
+ transform: translateX(3px);
137
+ filter: sepia(1) hue-rotate(-90deg) saturate(2);
138
+ }
139
+ 96.5% {
140
+ transform: translateX(-1px);
141
+ filter: none;
142
+ }
143
+ }
144
+
145
+ @keyframes glitch3 {
146
+ 0%, 95%, 100% {
147
+ transform: translateX(0);
148
+ filter: none;
149
+ }
150
+ 95.5% {
151
+ transform: translateX(3px);
152
+ filter: sepia(1) hue-rotate(170deg) saturate(2);
153
+ }
154
+ 96% {
155
+ transform: translateX(-2px);
156
+ filter: sepia(1) hue-rotate(-120deg) saturate(2);
157
+ }
158
+ 96.5% {
159
+ transform: translateX(1px);
160
+ filter: none;
161
+ }
162
+ }
163
+
164
+ @keyframes glitch4 {
165
+ 0%, 95%, 100% {
166
+ transform: translateX(0);
167
+ filter: none;
168
+ }
169
+ 95.5% {
170
+ transform: translateX(-3px);
171
+ filter: sepia(1) hue-rotate(200deg) saturate(2);
172
+ }
173
+ 96% {
174
+ transform: translateX(2px);
175
+ filter: sepia(1) hue-rotate(-150deg) saturate(2);
176
+ }
177
+ 96.5% {
178
+ transform: translateX(-1px);
179
+ filter: none;
180
+ }
181
+ }
182
+
183
+ @keyframes glitch5 {
184
+ 0%, 95%, 100% {
185
+ transform: translateX(0);
186
+ filter: none;
187
+ }
188
+ 95.5% {
189
+ transform: translateX(2px);
190
+ filter: sepia(1) hue-rotate(240deg) saturate(2);
191
+ }
192
+ 96% {
193
+ transform: translateX(-3px);
194
+ filter: sepia(1) hue-rotate(-180deg) saturate(2);
195
+ }
196
+ 96.5% {
197
+ transform: translateX(1px);
198
+ filter: none;
199
+ }
200
+ }
201
+
202
+ h1, h2, h3 {
203
+ color: var(--primary-accent);
204
+ margin-bottom: 20px;
205
+ font-weight: 500;
206
+ }
207
+
208
+ h1 {
209
+ font-size: 36px;
210
+ text-align: center;
211
+ text-transform: uppercase;
212
+ letter-spacing: 2px;
213
+ }
214
+
215
+ h2 {
216
+ font-size: 24px;
217
+ border-bottom: 2px solid var(--primary-accent);
218
+ padding-bottom: 10px;
219
+ margin-top: 30px;
220
+ }
221
+
222
+ .content-section {
223
+ background-color: var(--section-bg);
224
+ border-radius: 12px;
225
+ padding: 20px;
226
+ margin: 20px 0;
227
+ border: 2px solid rgba(34, 124, 157, 0.2);
228
+ }
229
+
230
+ .team-grid {
231
+ display: grid;
232
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
233
+ gap: 20px;
234
+ margin: 20px 0;
235
+ }
236
+
237
+ .team-member {
238
+ padding: 20px;
239
+ border-radius: 24px;
240
+ background-color: rgba(34, 124, 157, 0.15);
241
+ border: 1px solid var(--blue-accent);
242
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
243
+ text-decoration: none;
244
+ display: block;
245
+ cursor: pointer;
246
+ }
247
+
248
+ .team-member:hover {
249
+ transform: translateY(-5px);
250
+ box-shadow: 0 5px 15px rgba(34, 124, 157, 0.3);
251
+ }
252
+
253
+ .team-member:nth-child(even) {
254
+ background-color: rgba(0, 166, 118, 0.15);
255
+ border: 1px solid var(--green-accent);
256
+ }
257
+
258
+ .team-member h3 {
259
+ color: var(--text-light);
260
+ margin-bottom: 10px;
261
+ }
262
+
263
+ .team-member p {
264
+ color: var(--text-light);
265
+ margin-bottom: 0;
266
+ }
267
+
268
+ /* Button with glitch effect */
269
+ .button-container {
270
+ position: relative;
271
+ display: inline-block;
272
+ }
273
+
274
+ .button {
275
+ display: inline-block;
276
+ background-color: var(--blue-accent);
277
+ color: var(--text-light);
278
+ padding: 12px 24px;
279
+ border-radius: 8px;
280
+ text-decoration: none;
281
+ font-weight: 500;
282
+ transition: all 0.3s ease;
283
+ text-align: center;
284
+ margin: 10px 0;
285
+ }
286
+
287
+ .button > span {
288
+ display: inline-block;
289
+ }
290
+
291
+ .button:hover > span {
292
+ display: none;
293
+ }
294
+
295
+ .button:hover .stack {
296
+ display: grid;
297
+ }
298
+
299
+ .button .stack {
300
+ display: none;
301
+ grid-template-columns: 1fr;
302
+ }
303
+
304
+ .button .stack span {
305
+ font-weight: bold;
306
+ grid-row-start: 1;
307
+ grid-column-start: 1;
308
+ --stack-height: calc(100% / var(--stacks) - 1px);
309
+ --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
310
+ --clip-top: calc(var(--stack-height) * var(--index));
311
+ --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
312
+ clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
313
+ animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
314
+ }
315
+
316
+ .button .stack span:nth-child(odd) { --glitch-translate: 8px; }
317
+ .button .stack span:nth-child(even) { --glitch-translate: -8px; }
318
+
319
+ @keyframes stack {
320
+ 0% {
321
+ opacity: 0;
322
+ transform: translateX(-50%);
323
+ text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
324
+ };
325
+ 60% {
326
+ opacity: 0.5;
327
+ transform: translateX(50%);
328
+ }
329
+ 80% {
330
+ transform: none;
331
+ opacity: 1;
332
+ text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
333
+ }
334
+ 100% {
335
+ text-shadow: none;
336
+ }
337
+ }
338
+
339
+ @keyframes glitch {
340
+ 0% {
341
+ text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
342
+ transform: translate(var(--glitch-translate));
343
+ }
344
+ 2% {
345
+ text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
346
+ }
347
+ 4%, 100% { text-shadow: none; transform: none; }
348
+ }
349
+
350
+ .description {
351
+ text-align: center;
352
+ max-width: 600px;
353
+ margin: 0 auto 40px;
354
+ }
355
+ </style>
356
+ </head>
357
+ <body>
358
+ <div class="container">
359
+ <div class="logo-container">
360
+ <div class="logo-stack">
361
+ <div class="logo-line"><img src="https://shorturl.at/wmTDV" alt="Organization Logo"></div>
362
+ <div class="logo-line"><img src="https://shorturl.at/wmTDV" alt="Organization Logo"></div>
363
+ <div class="logo-line"><img src="https://shorturl.at/wmTDV" alt="Organization Logo"></div>
364
+ <div class="logo-line"><img src="https://shorturl.at/wmTDV" alt="Organization Logo"></div>
365
+ <div class="logo-line"><img src="https://shorturl.at/wmTDV" alt="Organization Logo"></div>
366
+ </div>
367
+ </div>
368
+
369
+ <h1 class="org-name">Beaver AI</h1>
370
+ <p class="description">A brief description of your organization goes here. Make it compelling and concise.</p>
371
+
372
+ <div class="content-section">
373
+ <h2>About Us</h2>
374
+ <p>Your organization's story and mission statement would go here. Make it engaging and informative.</p>
375
+ </div>
376
+
377
+ <h2>Our Team</h2>
378
+ <div class="team-grid">
379
+ <a href="#" class="team-member">
380
+ <h3>Team Member Name</h3>
381
+ <p>Position Title</p>
382
+ </a>
383
+ <a href="#" class="team-member">
384
+ <h3>Team Member Name</h3>
385
+ <p>Position Title</p>
386
+ </a>
387
+ </div>
388
+
389
+ <div class="content-section">
390
+ <h2>Join Our Community</h2>
391
+ <p>Connect with us on Discord to join our community, share ideas, and explore opportunities for collaboration.</p>
392
+ <a href="#" class="button discord-button">
393
+ <div class="stack">
394
+ <span style="--index: 0;">Join Discord Server</span>
395
+ <span style="--index: 1;">Join Discord Server</span>
396
+ <span style="--index: 2;">Join Discord Server</span>
397
+ </div>
398
+ <span>Join Discord Server</span>
399
+ </a>
400
+ </div>
401
+ </div>
402
+ </body>
403
+ </html>