| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Nebula Access</title> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap'); |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Poppins', sans-serif; |
| } |
| |
| body { |
| overflow: hidden; |
| background: #0f0c29; |
| background: linear-gradient(to bottom, #000000, #0f0c29, #24243e); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 100vh; |
| } |
| |
| |
| .orb-container { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| top: 0; |
| left: 0; |
| z-index: 0; |
| pointer-events: none; |
| } |
| |
| .orb { |
| position: absolute; |
| border-radius: 50%; |
| filter: blur(80px); |
| opacity: 0.6; |
| animation: float 10s infinite ease-in-out alternate; |
| } |
| |
| .orb:nth-child(1) { |
| top: -10%; |
| left: -10%; |
| width: 50vw; |
| height: 50vw; |
| background: linear-gradient(to right, #ff00cc, #333399); |
| animation-duration: 12s; |
| } |
| |
| .orb:nth-child(2) { |
| bottom: -10%; |
| right: -10%; |
| width: 40vw; |
| height: 40vw; |
| background: linear-gradient(to left, #00d2ff, #3a7bd5); |
| animation-duration: 15s; |
| } |
| |
| .orb:nth-child(3) { |
| top: 40%; |
| left: 40%; |
| width: 20vw; |
| height: 20vw; |
| background: #7b4397; |
| animation: pulse 8s infinite ease-in-out; |
| } |
| |
| |
| .container { |
| position: relative; |
| z-index: 1; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| transform-style: preserve-3d; |
| perspective: 1000px; |
| } |
| |
| .login-box { |
| position: relative; |
| width: 400px; |
| height: 500px; |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 20px; |
| backdrop-filter: blur(15px); |
| -webkit-backdrop-filter: blur(15px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-top: 1px solid rgba(255, 255, 255, 0.3); |
| border-left: 1px solid rgba(255, 255, 255, 0.3); |
| box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| flex-direction: column; |
| padding: 40px; |
| transform-style: preserve-3d; |
| transition: transform 0.1s ease-out; |
| } |
| |
| |
| h2 { |
| font-size: 2em; |
| color: #fff; |
| margin-bottom: 30px; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| text-shadow: 0 0 10px rgba(255,255,255,0.3); |
| transform: translateZ(40px); |
| } |
| |
| .input-group { |
| position: relative; |
| width: 100%; |
| margin-bottom: 25px; |
| transform: translateZ(30px); |
| } |
| |
| .input-group input { |
| width: 100%; |
| padding: 10px 0; |
| font-size: 16px; |
| color: #fff; |
| letter-spacing: 1px; |
| margin-bottom: 10px; |
| border: none; |
| border-bottom: 1px solid rgba(255,255,255,0.3); |
| outline: none; |
| background: transparent; |
| transition: 0.5s; |
| } |
| |
| .input-group label { |
| position: absolute; |
| top: 0; |
| left: 0; |
| padding: 10px 0; |
| font-size: 16px; |
| color: rgba(255,255,255,0.6); |
| pointer-events: none; |
| transition: 0.5s; |
| } |
| |
| .input-group input:focus ~ label, |
| .input-group input:valid ~ label { |
| top: -25px; |
| left: 0; |
| color: #03a9f4; |
| font-size: 12px; |
| font-weight: bold; |
| } |
| |
| .input-group input:focus, |
| .input-group input:valid { |
| border-bottom: 1px solid #03a9f4; |
| box-shadow: 0 10px 10px -10px rgba(3, 169, 244, 0.5); |
| } |
| |
| |
| button { |
| width: 100%; |
| padding: 15px; |
| background: linear-gradient(90deg, #03a9f4, #f441a5); |
| border: none; |
| border-radius: 30px; |
| color: #fff; |
| font-size: 18px; |
| font-weight: 700; |
| letter-spacing: 2px; |
| cursor: pointer; |
| transform: translateZ(50px); |
| transition: 0.3s; |
| position: relative; |
| overflow: hidden; |
| z-index: 10; |
| } |
| |
| button::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); |
| transition: 0.5s; |
| } |
| |
| button:hover::before { |
| left: 100%; |
| } |
| |
| button:hover { |
| box-shadow: 0 0 20px #03a9f4, 0 0 40px #f441a5; |
| transform: translateZ(60px) scale(1.05); |
| } |
| |
| |
| @keyframes float { |
| 0% { transform: translate(0, 0); } |
| 100% { transform: translate(50px, 50px); } |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { transform: scale(1); opacity: 0.5; } |
| 50% { transform: scale(1.2); opacity: 0.8; } |
| } |
| |
| |
| .particles { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| overflow: hidden; |
| border-radius: 20px; |
| pointer-events: none; |
| z-index: -1; |
| } |
| |
| .particle { |
| position: absolute; |
| display: block; |
| pointer-events: none; |
| width: 5px; |
| height: 5px; |
| background-color: rgba(255, 255, 255, 0.5); |
| box-shadow: 0 0 10px rgba(255, 255, 255, 1); |
| border-radius: 50%; |
| animation: rise 15s infinite linear; |
| } |
| |
| @keyframes rise { |
| 0% { transform: translateY(500px) scale(0); opacity: 0;} |
| 50% { opacity: 1; } |
| 100% { transform: translateY(-100px) scale(1); opacity: 0;} |
| } |
| |
| </style> |
| </head> |
| <body> |
|
|
| <div class="orb-container"> |
| <div class="orb"></div> |
| <div class="orb"></div> |
| <div class="orb"></div> |
| </div> |
|
|
| <div class="container" id="container"> |
| <form class="login-box" id="card"> |
| <div class="particles"> |
| </div> |
|
|
| <h2>Access</h2> |
| |
| <div class="input-group"> |
| <input type="text" required> |
| <label>Username</label> |
| </div> |
| |
| <div class="input-group"> |
| <input type="password" required> |
| <label>Password</label> |
| </div> |
| |
| <button type="submit">LOGIN</button> |
| </form> |
| </div> |
|
|
| <script> |
| |
| const container = document.getElementById('container'); |
| const card = document.getElementById('card'); |
| |
| |
| container.addEventListener('mousemove', (e) => { |
| const xAxis = (window.innerWidth / 2 - e.pageX) / 20; |
| const yAxis = (window.innerHeight / 2 - e.pageY) / 20; |
| |
| card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; |
| }); |
| |
| |
| container.addEventListener('mouseenter', (e) => { |
| card.style.transition = 'none'; |
| }); |
| |
| |
| container.addEventListener('mouseleave', (e) => { |
| card.style.transition = 'all 0.5s ease'; |
| card.style.transform = `rotateY(0deg) rotateX(0deg)`; |
| }); |
| |
| |
| const particleContainer = document.querySelector('.particles'); |
| |
| function createParticles() { |
| for(let i = 0; i < 20; i++) { |
| let particle = document.createElement('span'); |
| particle.classList.add('particle'); |
| |
| |
| let size = Math.random() * 5 + 1; |
| particle.style.width = `${size}px`; |
| particle.style.height = `${size}px`; |
| particle.style.left = Math.random() * 100 + '%'; |
| particle.style.animationDelay = Math.random() * 10 + 's'; |
| particle.style.animationDuration = Math.random() * 10 + 10 + 's'; |
| |
| particleContainer.appendChild(particle); |
| } |
| } |
| |
| createParticles(); |
| </script> |
| </body> |
| </html> |
|
|
