Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <style> | |
| body{ | |
| margin:0; | |
| height:100vh; | |
| display:flex; | |
| justify-content:center; | |
| align-items:center; | |
| background:grey; | |
| } | |
| .card{ | |
| width:200px; | |
| padding:25px; | |
| border-radius:30px; | |
| background:whitesmoke; | |
| animation:neonPulse 2.5s infinite ease-in-out; | |
| border:2px solid #b26cff; | |
| box-shadow: | |
| 0 0 12px rgba(178,108,255,.45), | |
| 0 0 28px rgba(255,60,180,.30), | |
| 0 12px 30px rgba(0,0,0,.15); | |
| } | |
| .progress{ | |
| width:100%; | |
| height:12px; | |
| background:#d9d9d9; | |
| border-radius:20px; | |
| overflow:hidden; | |
| } | |
| .progress-fill{ | |
| width:0; | |
| height:100%; | |
| background:#7b4dff; | |
| animation:fillProgress 2s infinite; | |
| } | |
| @keyframes fillProgress{ | |
| from{ | |
| width:0; | |
| } | |
| to{ | |
| width:100%; | |
| } | |
| } | |
| @keyframes neonPulse{ | |
| 0%{ | |
| box-shadow: | |
| 0 0 10px rgba(178,108,255,.35), | |
| 0 0 20px rgba(255,60,180,.25), | |
| 0 12px 30px rgba(0,0,0,.15); | |
| } | |
| 50%{ | |
| box-shadow: | |
| 0 0 22px rgba(178,108,255,.75), | |
| 0 0 42px rgba(255,60,180,.65), | |
| 0 12px 30px rgba(0,0,0,.18); | |
| } | |
| 100%{ | |
| box-shadow: | |
| 0 0 10px rgba(178,108,255,.35), | |
| 0 0 20px rgba(255,60,180,.25), | |
| 0 12px 30px rgba(0,0,0,.15); | |
| } | |
| } | |
| .window-controls{ | |
| display:flex; | |
| justify-content:flex-end; | |
| } | |
| .window-controls button{ | |
| height:26px; | |
| width:26px; | |
| padding:8px; | |
| border-radius:50%; | |
| margin-left:8px; | |
| cursor:pointer; | |
| } | |
| .minimize{ | |
| height:26px; | |
| width:26px; | |
| border-radius:50%; | |
| border:8px solid black; | |
| background:green; | |
| margin-left:8px; | |
| } | |
| .close{ | |
| height:26px; | |
| width:26px; | |
| border-radius:50%; | |
| border:8px solid black; | |
| background:green; | |
| margin-left:8px; | |
| } | |
| .maximize{ | |
| height:26px; | |
| width:26px; | |
| border-radius:50%; | |
| border:8px solid black; | |
| margin-left:8px; | |
| background:green} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <div class="window-controls"> | |
| <button class="minimize">−</button> | |
| <button class="close">✕</button> | |
| </div> | |
| <h2>Work In Progress</h2> | |
| <p>Server is Down</p> | |
| <div class="progress"> | |
| <div class="progress-fill"></div> | |
| </div> | |
| </body> | |
| </html> |