Steelskull commited on
Commit
4beee5d
·
verified ·
1 Parent(s): 54393b5

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +1 -356
README.md CHANGED
@@ -6,359 +6,4 @@ colorTo: indigo
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>
 
6
  sdk: static
7
  pinned: false
8
  ---
9
+ This is purely a storage loacation for older Models / Experiments