Hugging Face's logo

Spaces:
ayush-thakur02
/
website-X
Running

App Files Community
ayush-thakur02 commited on
Commit
a545f50
·
verified ·
1 Parent(s): 5e5e21a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +394 -19
index.html CHANGED
@@ -1,19 +1,394 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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.0">
6
+ <title>Configure X</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
9
+
10
+ :root {
11
+ --primary-color: #00ffff;
12
+ --secondary-color: #ff00ff;
13
+ }
14
+
15
+ * {
16
+ margin: 0;
17
+ padding: 0;
18
+ box-sizing: border-box;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Orbitron', sans-serif;
23
+ background-color: #000;
24
+ color: #fff;
25
+ overflow: hidden;
26
+ display: flex;
27
+ justify-content: center;
28
+ align-items: center;
29
+ height: 100vh;
30
+ }
31
+
32
+ #canvas-background {
33
+ position: fixed;
34
+ top: 0;
35
+ left: 0;
36
+ width: 100%;
37
+ height: 100%;
38
+ z-index: 0;
39
+ }
40
+
41
+ .container {
42
+ text-align: center;
43
+ position: relative;
44
+ z-index: 2;
45
+ }
46
+
47
+ h1 {
48
+ font-size: 5rem;
49
+ margin-bottom: 1rem;
50
+ text-transform: uppercase;
51
+ letter-spacing: 10px;
52
+ position: relative;
53
+ display: inline-block;
54
+ }
55
+
56
+ .glitch {
57
+ position: relative;
58
+ }
59
+
60
+ .glitch::before,
61
+ .glitch::after {
62
+ content: attr(data-text);
63
+ position: absolute;
64
+ top: 0;
65
+ left: 0;
66
+ width: 100%;
67
+ height: 100%;
68
+ background: black;
69
+ }
70
+
71
+ .glitch::before {
72
+ left: 2px;
73
+ text-shadow: -2px 0 var(--primary-color);
74
+ clip: rect(24px, 550px, 90px, 0);
75
+ animation: glitch-anim-2 3s infinite linear alternate-reverse;
76
+ }
77
+
78
+ .glitch::after {
79
+ left: -2px;
80
+ text-shadow: -2px 0 var(--secondary-color);
81
+ clip: rect(85px, 550px, 140px, 0);
82
+ animation: glitch-anim 2.5s infinite linear alternate-reverse;
83
+ }
84
+
85
+ @keyframes glitch-anim {
86
+ 0% {
87
+ clip: rect(95px, 9999px, 59px, 0);
88
+ }
89
+ 20% {
90
+ clip: rect(30px, 9999px, 77px, 0);
91
+ }
92
+ 40% {
93
+ clip: rect(16px, 9999px, 6px, 0);
94
+ }
95
+ 60% {
96
+ clip: rect(52px, 9999px, 29px, 0);
97
+ }
98
+ 80% {
99
+ clip: rect(97px, 9999px, 75px, 0);
100
+ }
101
+ 100% {
102
+ clip: rect(63px, 9999px, 81px, 0);
103
+ }
104
+ }
105
+
106
+ @keyframes glitch-anim-2 {
107
+ 0% {
108
+ clip: rect(56px, 9999px, 98px, 0);
109
+ }
110
+ 20% {
111
+ clip: rect(74px, 9999px, 3px, 0);
112
+ }
113
+ 40% {
114
+ clip: rect(11px, 9999px, 49px, 0);
115
+ }
116
+ 60% {
117
+ clip: rect(85px, 9999px, 20px, 0);
118
+ }
119
+ 80% {
120
+ clip: rect(35px, 9999px, 93px, 0);
121
+ }
122
+ 100% {
123
+ clip: rect(68px, 9999px, 42px, 0);
124
+ }
125
+ }
126
+
127
+ .tagline {
128
+ font-size: 1.6rem;
129
+ margin-bottom: 3rem;
130
+ /* opacity: 0.8; */
131
+ text-shadow: 0 0 15px var(--primary-color);
132
+ }
133
+
134
+ .links {
135
+ display: flex;
136
+ justify-content: center;
137
+ gap: 30px;
138
+ }
139
+
140
+ .link {
141
+ position: relative;
142
+ text-decoration: none;
143
+ color: #fff;
144
+ font-weight: bold;
145
+ font-size: 1.2rem;
146
+ padding: 15px 30px;
147
+ overflow: hidden;
148
+ transition: 0.5s;
149
+ letter-spacing: 4px;
150
+ -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
151
+ }
152
+
153
+ .link:hover {
154
+ background: var(--primary-color);
155
+ color: #000;
156
+ box-shadow: 0 0 30px var(--primary-color);
157
+ transition-delay: 0.5s;
158
+ }
159
+
160
+ .link span {
161
+ position: absolute;
162
+ display: block;
163
+ }
164
+
165
+ .link span:nth-child(1) {
166
+ top: 0;
167
+ left: -100%;
168
+ width: 100%;
169
+ height: 2px;
170
+ background: linear-gradient(90deg, transparent, var(--primary-color));
171
+ }
172
+
173
+ .link:hover span:nth-child(1) {
174
+ left: 100%;
175
+ transition: 0.5s;
176
+ }
177
+
178
+ .link span:nth-child(2) {
179
+ top: -100%;
180
+ right: 0;
181
+ width: 2px;
182
+ height: 100%;
183
+ background: linear-gradient(180deg, transparent, var(--primary-color));
184
+ }
185
+
186
+ .link:hover span:nth-child(2) {
187
+ top: 100%;
188
+ transition: 0.5s;
189
+ transition-delay: 0.125s;
190
+ }
191
+
192
+ .link span:nth-child(3) {
193
+ bottom: 0;
194
+ right: -100%;
195
+ width: 100%;
196
+ height: 2px;
197
+ background: linear-gradient(270deg, transparent, var(--primary-color));
198
+ }
199
+
200
+ .link:hover span:nth-child(3) {
201
+ right: 100%;
202
+ transition: 0.5s;
203
+ transition-delay: 0.25s;
204
+ }
205
+
206
+ .link span:nth-child(4) {
207
+ bottom: -100%;
208
+ left: 0;
209
+ width: 2px;
210
+ height: 100%;
211
+ background: linear-gradient(360deg, transparent, var(--primary-color));
212
+ }
213
+
214
+ .link:hover span:nth-child(4) {
215
+ bottom: 100%;
216
+ transition: 0.5s;
217
+ transition-delay: 0.375s;
218
+ }
219
+ </style>
220
+ </head>
221
+ <body>
222
+ <canvas id="canvas-background"></canvas>
223
+ <div class="container">
224
+ <h1 class="glitch" data-text="Configure X">Configure X</h1>
225
+ <p class="tagline">Open Group Foundation</p>
226
+ <div class="links">
227
+ <a href="#about" class="link">
228
+ <span></span>
229
+ <span></span>
230
+ <span></span>
231
+ <span></span>
232
+ About
233
+ </a>
234
+ <a href="#projects" class="link">
235
+ <span></span>
236
+ <span></span>
237
+ <span></span>
238
+ <span></span>
239
+ Projects
240
+ </a>
241
+ <a href="#join" class="link">
242
+ <span></span>
243
+ <span></span>
244
+ <span></span>
245
+ <span></span>
246
+ Join
247
+ </a>
248
+ </div>
249
+ </div>
250
+ <script>
251
+ // Canvas setup
252
+ const canvas = document.getElementById('canvas-background');
253
+ const ctx = canvas.getContext('2d');
254
+ canvas.width = window.innerWidth;
255
+ canvas.height = window.innerHeight;
256
+
257
+ // Particle system
258
+ class Particle {
259
+ constructor(x, y) {
260
+ this.x = x;
261
+ this.y = y;
262
+ this.size = Math.random() * 1 + 1;
263
+ this.baseSize = this.size;
264
+ this.speedX = Math.random() * 2 - 1;
265
+ this.speedY = Math.random() * 2 - 1;
266
+ }
267
+
268
+ update() {
269
+ this.x += this.speedX;
270
+ this.y += this.speedY;
271
+
272
+ // Bounce off edges
273
+ if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
274
+ if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
275
+
276
+ // Pulsate size
277
+ this.size = this.baseSize + Math.sin(Date.now() * 0.01) * 0.5;
278
+ }
279
+
280
+ draw() {
281
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.7)';
282
+ ctx.beginPath();
283
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
284
+ ctx.fill();
285
+ }
286
+ }
287
+
288
+ let particleArray = [];
289
+ let mouse = {
290
+ x: null,
291
+ y: null,
292
+ radius: 150
293
+ }
294
+
295
+ window.addEventListener('mousemove', function(event) {
296
+ mouse.x = event.x;
297
+ mouse.y = event.y;
298
+ });
299
+
300
+ function init() {
301
+ particleArray = [];
302
+ for (let i = 0; i < 100; i++) {
303
+ let x = Math.random() * canvas.width;
304
+ let y = Math.random() * canvas.height;
305
+ particleArray.push(new Particle(x, y));
306
+ }
307
+ }
308
+
309
+ function animate() {
310
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
311
+ for (let i = 0; i < particleArray.length; i++) {
312
+ particleArray[i].update();
313
+ particleArray[i].draw();
314
+ }
315
+ connect();
316
+ requestAnimationFrame(animate);
317
+ }
318
+
319
+ function connect() {
320
+ let opacityValue = 1;
321
+ for (let a = 0; a < particleArray.length; a++) {
322
+ for (let b = a; b < particleArray.length; b++) {
323
+ let dx = particleArray[a].x - particleArray[b].x;
324
+ let dy = particleArray[a].y - particleArray[b].y;
325
+ let distance = Math.sqrt(dx * dx + dy * dy);
326
+
327
+ if (distance < 100) {
328
+ opacityValue = 1 - (distance / 100);
329
+ ctx.strokeStyle = `rgba(0, 255, 255, ${opacityValue})`;
330
+ ctx.lineWidth = 1;
331
+ ctx.beginPath();
332
+ ctx.moveTo(particleArray[a].x, particleArray[a].y);
333
+ ctx.lineTo(particleArray[b].x, particleArray[b].y);
334
+ ctx.stroke();
335
+ }
336
+ }
337
+ }
338
+
339
+ // Connect particles to mouse
340
+ if (mouse.x !== null && mouse.y !== null) {
341
+ for (let i = 0; i < particleArray.length; i++) {
342
+ let dx = mouse.x - particleArray[i].x;
343
+ let dy = mouse.y - particleArray[i].y;
344
+ let distance = Math.sqrt(dx * dx + dy * dy);
345
+
346
+ if (distance < mouse.radius) {
347
+ opacityValue = 1 - (distance / mouse.radius);
348
+ ctx.strokeStyle = `rgba(0, 255, 255, ${opacityValue})`;
349
+ ctx.lineWidth = 1;
350
+ ctx.beginPath();
351
+ ctx.moveTo(mouse.x, mouse.y);
352
+ ctx.lineTo(particleArray[i].x, particleArray[i].y);
353
+ ctx.stroke();
354
+ }
355
+ }
356
+ }
357
+ }
358
+
359
+ window.addEventListener('resize', function() {
360
+ canvas.width = window.innerWidth;
361
+ canvas.height = window.innerHeight;
362
+ init();
363
+ });
364
+
365
+ init();
366
+ animate();
367
+
368
+ // Enhanced glitch effect
369
+ function glitchEffect() {
370
+ const glitch = document.querySelector('.glitch');
371
+ const glitchText = glitch.textContent;
372
+
373
+ setInterval(() => {
374
+ const glitchChars = '!<>-_\\/[]{}—=+*^?#________';
375
+ let newText = '';
376
+ for(let i = 0; i < glitchText.length; i++) {
377
+ if(Math.random() > 0.9) {
378
+ newText += glitchChars[Math.floor(Math.random() * glitchChars.length)];
379
+ } else {
380
+ newText += glitchText[i];
381
+ }
382
+ }
383
+ glitch.setAttribute('data-text', newText);
384
+
385
+ setTimeout(() => {
386
+ glitch.setAttribute('data-text', glitchText);
387
+ }, 50);
388
+ }, 2000);
389
+ }
390
+
391
+ glitchEffect();
392
+ </script>
393
+ </body>
394
+ </html>