Spaces:
Paused
Paused
| <html> | |
| <head> | |
| <title>FAILURE</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.png') }}"> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| font-family: 'Roboto', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 50vh; | |
| background: #393e46; | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| .container { | |
| text-align: center; | |
| } | |
| .button { | |
| position: relative; | |
| width: 200px; | |
| height: 200px; | |
| padding: 0; | |
| overflow: hidden; | |
| background-color: red; | |
| border-radius: 50%; | |
| transition: all 0.5s ease; | |
| animation: pulsate 4s infinite; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .button::before, | |
| .button::after { | |
| content: ''; | |
| position: absolute; | |
| width: 120px; | |
| height: 20px; | |
| background-color: black; | |
| } | |
| .button::before { | |
| top: calc(50% - 10px); | |
| transform: rotate(45deg); | |
| } | |
| .button::after { | |
| top: calc(50% - 10px); | |
| transform: rotate(-45deg); | |
| } | |
| @keyframes pulsate { | |
| 0% { | |
| background-color: red; | |
| box-shadow: 0 0 20px red, 0 0 160px red, 0 0 100px red; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| background-color: red; | |
| box-shadow: 0 0 200px red, 0 0 160px red, 0 0 1000px red; | |
| transform: scale(1.2); | |
| } | |
| 100% { | |
| background-color: red; | |
| box-shadow: 0 0 20px red, 0 0 160px red, 0 0 100px red; | |
| transform: scale(1); | |
| } | |
| } | |
| .terminal-window { | |
| position: fixed; | |
| justify-content: center; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 150px; | |
| background-color: maroon; | |
| color: white; | |
| padding: 20px; | |
| overflow: auto; | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| </style> | |
| <script> | |
| setTimeout(function() { | |
| window.close(); | |
| }, 3000); // Auto-close after 10 seconds (10000 milliseconds) | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="button"></div> | |
| </div> | |
| <div class="terminal-window"> | |
| <!-- Place your terminal data output here --> | |
| <pre> | |
| >> ERROR | |
| >> Please feel free to close the window... | |
| >> The window will auto-close in 3 seconds | |
| </pre> | |
| </div> | |
| </body> | |
| </html> | |