Spaces:
Running
Running
| <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; | |
| /* opacity: 0.8; */ | |
| 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> | |
| // Canvas setup | |
| const canvas = document.getElementById('canvas-background'); | |
| const ctx = canvas.getContext('2d'); | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| // Particle system | |
| 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; | |
| // Bounce off edges | |
| if (this.x < 0 || this.x > canvas.width) this.speedX *= -1; | |
| if (this.y < 0 || this.y > canvas.height) this.speedY *= -1; | |
| // Pulsate size | |
| 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(); | |
| } | |
| } | |
| } | |
| // Connect particles to mouse | |
| 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(); | |
| // Enhanced glitch effect | |
| 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> |