Hugging Face's logo

Spaces:
SteelQuants
/
README
Running

App Files Community
Steelskull commited on
Commit
54393b5
·
verified ·
1 Parent(s): 8f2f1b0

Update README.md

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