Spaces:
Running
Running
Update index.html
Browse files- index.html +394 -19
index.html
CHANGED
@@ -1,19 +1,394 @@
|
|
1 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>
|