fix: update maintenance page refresh interval to 5 seconds for improved user experience

This commit is contained in:
2025-12-04 21:10:31 -05:00
parent 05f7e7d9c2
commit 2bf85936e8
2 changed files with 60 additions and 117 deletions

View File

@@ -1,4 +1,5 @@
<x-proxmox::layout :server="$server" view="firewall" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
<div class="flex flex-col gap-6">
{{-- Page Header --}}
<div class="mb-6">
<h1 class="text-2xl font-bold">Firewall Management</h1>

View File

@@ -1,154 +1,96 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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">
<link href="https://fonts.googleapis.com/css?family=Quattrocento+Sans" rel="stylesheet">
<!-- Refresh page every 5 seconds -->
<script>
setTimeout(function() {
location.reload();
}, 10000);
setInterval(function () {
window.location.reload(true); // true forces full reload from server
}, 5000);
</script>
<style>
body {
text-align: center;
padding: 10%;
color: #333;
}
text-align: center;
#wrapper {
margin: 0 auto;
}
padding: 10%;
h1 {
font-size: 30px;
color: #488ECE;
font-weight: bold;
font-family: 'Montserrat', sans-serif;
}
color: #333;
p {
font-family: 'Quattrocento Sans', Arial;
line-height: 15px;
font-size: 20px;
color: #7a7a7b;
}
}
a {
color: #F49426;
text-decoration: underline;
}
#wrapper {
a:hover {
text-decoration: none;
}
margin: 0 auto;
@media only screen and (max-width : 480px) {
h1 { font-size: 20px; }
p { font-size: 15px; }
}
}
#logo {
margin-bottom: 40px;
}
#logo img {
max-width: 100%;
height: auto !important;
}
h1 {
font-size: 30px;
color: #488ECE;
font-weight: bold;
font-family: 'Montserrat', sans-serif;
}
p {
font-family: 'Quattrocento Sans', Arial;
line-height: 15px;
font-size: 20px;
color: #7a7a7b;
}
a {
color: #F49426;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
@media only screen and (max-width : 480px)
{
h1 { font-size: 20px; }
p { font-size: 15px; }
}
#logo {
margin-bottom: 40px;
}
#logo img {
max-width: 100%;
height: auto !important;
}
@media only screen and (max-width: 650px) {
#logo {
height: 75px;
}
}
</style>
@media only screen and (max-width: 650px) {
#logo {
height: 75px;
}
}
</style>
<title>Virtnet.bond is Down for Maintenance</title>
</head>
<body>
<div id="wrapper">
<div id="logo">
<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>
<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>
<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>
</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>
</div>
</body>
</html>