OwlCyberSecurity - MANAGER
Edit File: old-index.html__1588234
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Under Maintenance</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #fff; overflow: hidden; } .maintenance-container { text-align: center; padding: 30px; max-width: 700px; background: rgba(255, 255, 255, 0.1); border-radius: 15px; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); animation: fadeIn 1s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .maintenance-icon { font-size: 100px; margin-bottom: 20px; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } h1 { font-size: 48px; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } p { font-size: 20px; line-height: 1.6; margin-bottom: 30px; opacity: 0.9; } .progress-bar { width: 100%; height: 12px; background: rgba(255, 255, 255, 0.2); border-radius: 6px; overflow: hidden; } .progress { width: 0; height: 100%; background: linear-gradient(90deg, #00c6ff, #0072ff); animation: progress-animation 3s ease-in-out infinite; } @keyframes progress-animation { 0% { width: 20%; } 50% { width: 80%; } 100% { width: 20%; } } .social-links { margin-top: 20px; } .social-links a { color: #fff; font-size: 24px; margin: 0 10px; text-decoration: none; transition: transform 0.3s ease; } .social-links a:hover { transform: translateY(-5px); } @media (max-width: 768px) { .maintenance-container { margin: 20px; padding: 20px; } h1 { font-size: 36px; } p { font-size: 18px; } .maintenance-icon { font-size: 80px; } } @media (max-width: 480px) { h1 { font-size: 28px; } p { font-size: 16px; } .maintenance-icon { font-size: 60px; } } </style> </head> <body> <div class="maintenance-container"> <div class="maintenance-icon">⚙️</div> <h1>We're Under Maintenance</h1> <p>Our team is working hard to bring you new features and improvements. We'll be back soon with an even better experience!</p> <div class="progress-bar"> <div class="progress"></div> </div> <div class="social-links"> <a href="https://twitter.com" target="_blank" aria-label="Twitter">𝕏</a> <a href="https://facebook.com" target="_blank" aria-label="Facebook">📘</a> <a href="https://instagram.com" target="_blank" aria-label="Instagram">📷</a> </div> </div> </body> </html>