|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Configure X</title> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary-color: #00ffff; |
|
|
--secondary-color: #ff00ff; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
background-color: #000; |
|
|
color: #fff; |
|
|
overflow: hidden; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
height: 100vh; |
|
|
} |
|
|
|
|
|
#canvas-background { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: 0; |
|
|
} |
|
|
|
|
|
.container { |
|
|
text-align: center; |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 5rem; |
|
|
margin-bottom: 1rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 10px; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.glitch { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.glitch::before, |
|
|
.glitch::after { |
|
|
content: attr(data-text); |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: black; |
|
|
} |
|
|
|
|
|
.glitch::before { |
|
|
left: 2px; |
|
|
text-shadow: -2px 0 var(--primary-color); |
|
|
clip: rect(24px, 550px, 90px, 0); |
|
|
animation: glitch-anim-2 3s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
.glitch::after { |
|
|
left: -2px; |
|
|
text-shadow: -2px 0 var(--secondary-color); |
|
|
clip: rect(85px, 550px, 140px, 0); |
|
|
animation: glitch-anim 2.5s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
@keyframes glitch-anim { |
|
|
0% { |
|
|
clip: rect(95px, 9999px, 59px, 0); |
|
|
} |
|
|
20% { |
|
|
clip: rect(30px, 9999px, 77px, 0); |
|
|
} |
|
|
40% { |
|
|
clip: rect(16px, 9999px, 6px, 0); |
|
|
} |
|
|
60% { |
|
|
clip: rect(52px, 9999px, 29px, 0); |
|
|
} |
|
|
80% { |
|
|
clip: rect(97px, 9999px, 75px, 0); |
|
|
} |
|
|
100% { |
|
|
clip: rect(63px, 9999px, 81px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes glitch-anim-2 { |
|
|
0% { |
|
|
clip: rect(56px, 9999px, 98px, 0); |
|
|
} |
|
|
20% { |
|
|
clip: rect(74px, 9999px, 3px, 0); |
|
|
} |
|
|
40% { |
|
|
clip: rect(11px, 9999px, 49px, 0); |
|
|
} |
|
|
60% { |
|
|
clip: rect(85px, 9999px, 20px, 0); |
|
|
} |
|
|
80% { |
|
|
clip: rect(35px, 9999px, 93px, 0); |
|
|
} |
|
|
100% { |
|
|
clip: rect(68px, 9999px, 42px, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
.tagline { |
|
|
font-size: 1.6rem; |
|
|
margin-bottom: 3rem; |
|
|
|
|
|
text-shadow: 0 0 15px var(--primary-color); |
|
|
} |
|
|
|
|
|
.links { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.link { |
|
|
position: relative; |
|
|
text-decoration: none; |
|
|
color: #fff; |
|
|
font-weight: bold; |
|
|
font-size: 1.2rem; |
|
|
padding: 15px 30px; |
|
|
overflow: hidden; |
|
|
transition: 0.5s; |
|
|
letter-spacing: 4px; |
|
|
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005); |
|
|
} |
|
|
|
|
|
.link:hover { |
|
|
background: var(--primary-color); |
|
|
color: #000; |
|
|
box-shadow: 0 0 30px var(--primary-color); |
|
|
transition-delay: 0.5s; |
|
|
} |
|
|
|
|
|
.link span { |
|
|
position: absolute; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.link span:nth-child(1) { |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, transparent, var(--primary-color)); |
|
|
} |
|
|
|
|
|
.link:hover span:nth-child(1) { |
|
|
left: 100%; |
|
|
transition: 0.5s; |
|
|
} |
|
|
|
|
|
.link span:nth-child(2) { |
|
|
top: -100%; |
|
|
right: 0; |
|
|
width: 2px; |
|
|
height: 100%; |
|
|
background: linear-gradient(180deg, transparent, var(--primary-color)); |
|
|
} |
|
|
|
|
|
.link:hover span:nth-child(2) { |
|
|
top: 100%; |
|
|
transition: 0.5s; |
|
|
transition-delay: 0.125s; |
|
|
} |
|
|
|
|
|
.link span:nth-child(3) { |
|
|
bottom: 0; |
|
|
right: -100%; |
|
|
width: 100%; |
|
|
height: 2px; |
|
|
background: linear-gradient(270deg, transparent, var(--primary-color)); |
|
|
} |
|
|
|
|
|
.link:hover span:nth-child(3) { |
|
|
right: 100%; |
|
|
transition: 0.5s; |
|
|
transition-delay: 0.25s; |
|
|
} |
|
|
|
|
|
.link span:nth-child(4) { |
|
|
bottom: -100%; |
|
|
left: 0; |
|
|
width: 2px; |
|
|
height: 100%; |
|
|
background: linear-gradient(360deg, transparent, var(--primary-color)); |
|
|
} |
|
|
|
|
|
.link:hover span:nth-child(4) { |
|
|
bottom: 100%; |
|
|
transition: 0.5s; |
|
|
transition-delay: 0.375s; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<canvas id="canvas-background"></canvas> |
|
|
<div class="container"> |
|
|
<h1 class="glitch" data-text="Configure X">Configure X</h1> |
|
|
<p class="tagline">Open Group Foundation</p> |
|
|
<div class="links"> |
|
|
<a href="#about" class="link"> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
About |
|
|
</a> |
|
|
<a href="#projects" class="link"> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
Projects |
|
|
</a> |
|
|
<a href="#join" class="link"> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
Join |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<script> |
|
|
|
|
|
const canvas = document.getElementById('canvas-background'); |
|
|
const ctx = canvas.getContext('2d'); |
|
|
canvas.width = window.innerWidth; |
|
|
canvas.height = window.innerHeight; |
|
|
|
|
|
|
|
|
class Particle { |
|
|
constructor(x, y) { |
|
|
this.x = x; |
|
|
this.y = y; |
|
|
this.size = Math.random() * 1 + 1; |
|
|
this.baseSize = this.size; |
|
|
this.speedX = Math.random() * 2 - 1; |
|
|
this.speedY = Math.random() * 2 - 1; |
|
|
} |
|
|
|
|
|
update() { |
|
|
this.x += this.speedX; |
|
|
this.y += this.speedY; |
|
|
|
|
|
|
|
|
if (this.x < 0 || this.x > canvas.width) this.speedX *= -1; |
|
|
if (this.y < 0 || this.y > canvas.height) this.speedY *= -1; |
|
|
|
|
|
|
|
|
this.size = this.baseSize + Math.sin(Date.now() * 0.01) * 0.5; |
|
|
} |
|
|
|
|
|
draw() { |
|
|
ctx.fillStyle = 'rgba(0, 255, 255, 0.7)'; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); |
|
|
ctx.fill(); |
|
|
} |
|
|
} |
|
|
|
|
|
let particleArray = []; |
|
|
let mouse = { |
|
|
x: null, |
|
|
y: null, |
|
|
radius: 150 |
|
|
} |
|
|
|
|
|
window.addEventListener('mousemove', function(event) { |
|
|
mouse.x = event.x; |
|
|
mouse.y = event.y; |
|
|
}); |
|
|
|
|
|
function init() { |
|
|
particleArray = []; |
|
|
for (let i = 0; i < 100; i++) { |
|
|
let x = Math.random() * canvas.width; |
|
|
let y = Math.random() * canvas.height; |
|
|
particleArray.push(new Particle(x, y)); |
|
|
} |
|
|
} |
|
|
|
|
|
function animate() { |
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
|
for (let i = 0; i < particleArray.length; i++) { |
|
|
particleArray[i].update(); |
|
|
particleArray[i].draw(); |
|
|
} |
|
|
connect(); |
|
|
requestAnimationFrame(animate); |
|
|
} |
|
|
|
|
|
function connect() { |
|
|
let opacityValue = 1; |
|
|
for (let a = 0; a < particleArray.length; a++) { |
|
|
for (let b = a; b < particleArray.length; b++) { |
|
|
let dx = particleArray[a].x - particleArray[b].x; |
|
|
let dy = particleArray[a].y - particleArray[b].y; |
|
|
let distance = Math.sqrt(dx * dx + dy * dy); |
|
|
|
|
|
if (distance < 100) { |
|
|
opacityValue = 1 - (distance / 100); |
|
|
ctx.strokeStyle = `rgba(0, 255, 255, ${opacityValue})`; |
|
|
ctx.lineWidth = 1; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(particleArray[a].x, particleArray[a].y); |
|
|
ctx.lineTo(particleArray[b].x, particleArray[b].y); |
|
|
ctx.stroke(); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (mouse.x !== null && mouse.y !== null) { |
|
|
for (let i = 0; i < particleArray.length; i++) { |
|
|
let dx = mouse.x - particleArray[i].x; |
|
|
let dy = mouse.y - particleArray[i].y; |
|
|
let distance = Math.sqrt(dx * dx + dy * dy); |
|
|
|
|
|
if (distance < mouse.radius) { |
|
|
opacityValue = 1 - (distance / mouse.radius); |
|
|
ctx.strokeStyle = `rgba(0, 255, 255, ${opacityValue})`; |
|
|
ctx.lineWidth = 1; |
|
|
ctx.beginPath(); |
|
|
ctx.moveTo(mouse.x, mouse.y); |
|
|
ctx.lineTo(particleArray[i].x, particleArray[i].y); |
|
|
ctx.stroke(); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
window.addEventListener('resize', function() { |
|
|
canvas.width = window.innerWidth; |
|
|
canvas.height = window.innerHeight; |
|
|
init(); |
|
|
}); |
|
|
|
|
|
init(); |
|
|
animate(); |
|
|
|
|
|
|
|
|
function glitchEffect() { |
|
|
const glitch = document.querySelector('.glitch'); |
|
|
const glitchText = glitch.textContent; |
|
|
|
|
|
setInterval(() => { |
|
|
const glitchChars = '!<>-_\\/[]{}—=+*^?#________'; |
|
|
let newText = ''; |
|
|
for(let i = 0; i < glitchText.length; i++) { |
|
|
if(Math.random() > 0.9) { |
|
|
newText += glitchChars[Math.floor(Math.random() * glitchChars.length)]; |
|
|
} else { |
|
|
newText += glitchText[i]; |
|
|
} |
|
|
} |
|
|
glitch.setAttribute('data-text', newText); |
|
|
|
|
|
setTimeout(() => { |
|
|
glitch.setAttribute('data-text', glitchText); |
|
|
}, 50); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
glitchEffect(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
