| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>I'm Alive!</title> |
| <style> |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| body { |
| background: #0a0a0a; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| min-height: 100vh; |
| font-family: 'Courier New', monospace; |
| overflow: hidden; |
| } |
| |
| .container { |
| text-align: center; |
| position: relative; |
| z-index: 2; |
| } |
| |
| .gif-wrapper { |
| border: 3px solid #00ff88; |
| border-radius: 12px; |
| overflow: hidden; |
| box-shadow: 0 0 30px #00ff8855, 0 0 60px #00ff8822; |
| display: inline-block; |
| animation: pulse 2s ease-in-out infinite; |
| } |
| |
| .gif-wrapper img { |
| width: 320px; |
| height: 240px; |
| object-fit: cover; |
| display: block; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { box-shadow: 0 0 30px #00ff8855, 0 0 60px #00ff8822; } |
| 50% { box-shadow: 0 0 50px #00ff88aa, 0 0 100px #00ff8844; } |
| } |
| |
| .status { |
| margin-top: 24px; |
| color: #00ff88; |
| font-size: 22px; |
| font-weight: bold; |
| letter-spacing: 4px; |
| text-transform: uppercase; |
| animation: blink 1.5s step-end infinite; |
| } |
| |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.3; } |
| } |
| |
| .sub { |
| margin-top: 10px; |
| color: #444; |
| font-size: 13px; |
| letter-spacing: 2px; |
| } |
| |
| |
| .dot { |
| position: fixed; |
| width: 4px; |
| height: 4px; |
| background: #00ff8833; |
| border-radius: 50%; |
| animation: float linear infinite; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(100vh) scale(0); opacity: 0; } |
| 10% { opacity: 1; } |
| 90% { opacity: 1; } |
| 100% { transform: translateY(-10vh) scale(1.5); opacity: 0; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <script> |
| for (let i = 0; i < 25; i++) { |
| const dot = document.createElement('div'); |
| dot.classList.add('dot'); |
| dot.style.left = Math.random() * 100 + 'vw'; |
| dot.style.animationDuration = (4 + Math.random() * 8) + 's'; |
| dot.style.animationDelay = (Math.random() * 6) + 's'; |
| dot.style.width = dot.style.height = (2 + Math.random() * 5) + 'px'; |
| document.body.appendChild(dot); |
| } |
| </script> |
|
|
| <div class="container"> |
| <div class="gif-wrapper"> |
| <img src="https://media.tenor.com/images/fb9403a1e0c4e3a0d1e3b17cf9b25fcf/tenor.gif" |
| alt="still alive" |
| onerror="this.src='https://media.giphy.com/media/3o7TKtnuHOHHUjR38Y/giphy.gif'"> |
| </div> |
| <div class="status">● Server is alive</div> |
| <div class="sub">don't worry, i'm not going anywhere</div> |
| </div> |
|
|
| </body> |
| </html> |
|
|
