346 lines
10 KiB
PHP
346 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Maintenance | Virtnet.bond</title>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #ecfdf5 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Animated background elements */
|
|
.bg-decoration {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
opacity: 0.5;
|
|
animation: float 20s ease-in-out infinite;
|
|
}
|
|
|
|
.bg-decoration-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
|
|
top: -100px;
|
|
right: -100px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.bg-decoration-2 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
|
|
bottom: -50px;
|
|
left: -50px;
|
|
animation-delay: -7s;
|
|
}
|
|
|
|
.bg-decoration-3 {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%);
|
|
top: 50%;
|
|
left: 10%;
|
|
animation-delay: -14s;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(30px, -30px) scale(1.05); }
|
|
50% { transform: translate(-20px, 20px) scale(0.95); }
|
|
75% { transform: translate(20px, 30px) scale(1.02); }
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
z-index: 10;
|
|
max-width: 600px;
|
|
width: 100%;
|
|
}
|
|
|
|
.card {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-radius: 24px;
|
|
padding: 48px 40px;
|
|
box-shadow:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.05),
|
|
0 10px 15px -3px rgba(0, 0, 0, 0.08),
|
|
0 25px 50px -12px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
text-align: center;
|
|
}
|
|
|
|
.logo {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.logo img {
|
|
max-width: 280px;
|
|
width: 100%;
|
|
height: auto;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.logo img:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: linear-gradient(135deg, #dbeafe 0%, #d1fae5 100%);
|
|
padding: 10px 20px;
|
|
border-radius: 50px;
|
|
margin-bottom: 24px;
|
|
border: 1px solid rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.status-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
|
|
border-radius: 50%;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.6; transform: scale(0.9); }
|
|
}
|
|
|
|
.status-text {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #0369a1;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #1e40af 0%, #0891b2 50%, #059669 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 16px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.description {
|
|
font-size: 16px;
|
|
color: #64748b;
|
|
line-height: 1.7;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.progress-container {
|
|
background: #e2e8f0;
|
|
border-radius: 12px;
|
|
height: 6px;
|
|
overflow: hidden;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 50%, #10b981 100%);
|
|
border-radius: 12px;
|
|
width: 60%;
|
|
animation: progress 3s ease-in-out infinite;
|
|
background-size: 200% 100%;
|
|
}
|
|
|
|
@keyframes progress {
|
|
0% { background-position: 100% 0; }
|
|
50% { background-position: 0% 0; }
|
|
100% { background-position: 100% 0; }
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 14px 28px;
|
|
border-radius: 12px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);
|
|
color: white;
|
|
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.45);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: #475569;
|
|
border: 2px solid #e2e8f0;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #f8fafc;
|
|
border-color: #cbd5e1;
|
|
color: #334155;
|
|
}
|
|
|
|
.btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 24px;
|
|
padding-top: 24px;
|
|
border-top: 1px solid rgba(226, 232, 240, 0.8);
|
|
}
|
|
|
|
.footer p {
|
|
font-size: 14px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.footer a {
|
|
color: #0ea5e9;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.footer a:hover {
|
|
color: #0284c7;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.card {
|
|
padding: 32px 24px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.description {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.logo img {
|
|
max-width: 220px;
|
|
}
|
|
|
|
.bg-decoration-1 {
|
|
width: 250px;
|
|
height: 250px;
|
|
}
|
|
|
|
.bg-decoration-2 {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.bg-decoration-3 {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Background decorations -->
|
|
<div class="bg-decoration bg-decoration-1"></div>
|
|
<div class="bg-decoration bg-decoration-2"></div>
|
|
<div class="bg-decoration bg-decoration-3"></div>
|
|
|
|
<div class="container">
|
|
<div class="card">
|
|
<div class="logo">
|
|
<a href="https://virtnet.bond" title="Virtnet.bond">
|
|
<img src="https://billing.virtnet.bond/assets/images/logo.png" alt="Virtnet.bond" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="status-badge">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Scheduled Maintenance</span>
|
|
</div>
|
|
|
|
<h1>We're Making Things Better</h1>
|
|
|
|
<p class="description">
|
|
Our team is performing scheduled maintenance to improve your experience.
|
|
We'll be back online shortly. Thank you for your patience!
|
|
</p>
|
|
|
|
<div class="progress-container">
|
|
<div class="progress-bar"></div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button onclick="window.location.reload(true)" class="btn btn-primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
|
|
<path d="M3 3v5h5"/>
|
|
<path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/>
|
|
<path d="M16 16h5v5"/>
|
|
</svg>
|
|
Refresh Page
|
|
</button>
|
|
|
|
<a href="mailto:admin@virtnet.bond" class="btn btn-secondary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect width="20" height="16" x="2" y="4" rx="2"/>
|
|
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
|
|
</svg>
|
|
Contact Support
|
|
</a>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>Need immediate help? Email us at <a href="mailto:admin@virtnet.bond">admin@virtnet.bond</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|