Steelskull commited on
Commit
5afdba9
·
verified ·
1 Parent(s): 5033fbe

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +1 -391
README.md CHANGED
@@ -6,394 +6,4 @@ colorTo: gray
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
- <h1 class="org-name">Beaver AI</h1>
369
- <p class="description">A brief description of your organization goes here. Make it compelling and concise.</p>
370
- <div class="content-section">
371
- <h2>About Us</h2>
372
- <p>Your organization's story and mission statement would go here. Make it engaging and informative.</p>
373
- </div>
374
- <h2>Our Team</h2>
375
- <div class="team-grid">
376
- <a href="#" class="team-member">
377
- <h3>Team Member Name</h3>
378
- <p>Position Title</p>
379
- </a>
380
- <a href="#" class="team-member">
381
- <h3>Team Member Name</h3>
382
- <p>Position Title</p>
383
- </a>
384
- </div>
385
- <div class="content-section">
386
- <h2>Join Our Community</h2>
387
- <p>Connect with us on Discord to join our community, share ideas, and explore opportunities for collaboration.</p>
388
- <a href="#" class="button discord-button">
389
- <div class="stack">
390
- <span style="--index: 0;">Join Discord Server</span>
391
- <span style="--index: 1;">Join Discord Server</span>
392
- <span style="--index: 2;">Join Discord Server</span>
393
- </div>
394
- <span>Join Discord Server</span>
395
- </a>
396
- </div>
397
- </div>
398
- </body>
399
- </html>
 
6
  sdk: static
7
  pinned: false
8
  ---
9
+ This is purely a storage loacation for older Models / Experiments