Twrabox / templates /index.html
understanding's picture
Create templates/index.html
c7b67d9 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JetBot Status</title>
<style>
body {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: #ffffff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container {
text-align: center;
animation: fadeIn 2s ease-in-out;
}
h1 {
font-size: 3em;
margin-bottom: 0.2em;
background: linear-gradient(90deg, #00d2ff, #3a7bd5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: float 3s ease-in-out infinite;
}
p {
font-size: 1.2em;
opacity: 0.8;
animation: fadeIn 3s ease-in-out;
}
.pulse {
margin-top: 20px;
width: 20px;
height: 20px;
background-color: #00ffcc;
border-radius: 50%;
animation: pulse 2s infinite;
margin-left: auto;
margin-right: auto;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes pulse {
0% { transform: scale(0.95); opacity: 0.7; }
70% { transform: scale(1); opacity: 1; }
100% { transform: scale(0.95); opacity: 0.7; }
}
</style>
</head>
<body>
<div class="container">
<h1>πŸš€ <a href="https://t.me/JetMirror">JetBot</a> is Live!</h1>
<p>Everything is running smoothly.</p>
<div class="pulse"></div>
</div>
</body>
</html>