Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Revamp 503 error page with improved layout, animations, and user-friendly messaging

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-06 12:51:19 -05:00
parent df77a29925
commit 6ab136fc84
1 changed files with 321 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

387
resources/views/errors/503.blade.php
View File

@@ -1,90 +1,345 @@
<html>
<!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;
}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
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;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quattrocento+Sans" rel="stylesheet">
/* Animated background elements */
.bg-decoration {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.5;
animation: float 20s ease-in-out infinite;
}
<style>
body {
text-align: center;
padding: 10%;
color: #333;
}
.bg-decoration-1 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
top: -100px;
right: -100px;
animation-delay: 0s;
}
#wrapper {
margin: 0 auto;
}
.bg-decoration-2 {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
bottom: -50px;
left: -50px;
animation-delay: -7s;
}
h1 {
font-size: 30px;
color: #488ECE;
font-weight: bold;
font-family: 'Montserrat', sans-serif;
}
.bg-decoration-3 {
width: 200px;
height: 200px;
background: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%);
top: 50%;
left: 10%;
animation-delay: -14s;
}
p {
font-family: 'Quattrocento Sans', Arial;
line-height: 15px;
font-size: 20px;
color: #7a7a7b;
}
@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); }
}
a {
color: #F49426;
text-decoration: underline;
}
.container {
position: relative;
z-index: 10;
max-width: 600px;
width: 100%;
}
a:hover {
text-decoration: none;
}
.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;
}
@media only screen and (max-width : 480px) {
h1 { font-size: 20px; }
p { font-size: 15px; }
}
.logo {
margin-bottom: 32px;
}
#logo {
margin-bottom: 40px;
}
.logo img {
max-width: 280px;
width: 100%;
height: auto;
transition: transform 0.3s ease;
}
#logo img {
max-width: 100%;
height: auto !important;
}
.logo img:hover {
transform: scale(1.02);
}
@media only screen and (max-width: 650px) {
#logo {
height: 75px;
}
}
</style>
.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);
}
<title>Virtnet.bond is Down for Maintenance</title>
.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 id="wrapper">
<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 id="logo">
<a href="https://virtnet.bond" title="Virtnet.bond">
<img src="https://billing.virtnet.bond/assets/images/logo.png"
alt="Smarter Websites"
title="Virtnet.bond"
width="500rem" />
</a>
</div>
<div class="status-badge">
<span class="status-dot"></span>
<span class="status-text">Scheduled Maintenance</span>
</div>
<h1>Virtnet.bond is currently down for maintenance.</h1>
<p>We expect to be back very shortly. Thanks for your patience.</p>
<p>Feel free to <a href="mailto:admin@virtnet.bond">contact us</a> if you need immediate assistance.</p>
<p><a href="javascript:window.location.reload(true)">Click here to reload</a> the page manually.</p>
<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>
<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>