Global sticky footer (#4146)

* Global sticky footer

And refactor how system information is loaded.

* Get version from session

* Refactor logs view code, include app footer

* Fix "Discard all mail" JS behavior in Edit Mail Account form

* Refactor update icons

docs/docs/server-administration/customisation.md

@@ -9,8 +9,8 @@ We currently only support changing the layout via CSS. You can customise HTML fi
 Create a new theme in `/usr/local/hestia/web/css/theme/custom/my_theme.css`
 
 ```css
-.body-login,
-.body-reset {
+.page-login,
+.page-reset {
 	height: auto;
 	padding-top: 10%;
 	background: rgb(231, 102, 194) !important;

web/css/src/base.css

@@ -31,9 +31,9 @@ body {
 	font-family: var(--font-family);
 	font-size: 0.85rem;
 	line-height: 1.5;
-	height: 100%;
 	color: var(--color-text);
 	background-color: var(--color-background);
+	height: 100%;
 }
 
 a {

web/css/src/themes/dark.css

@@ -676,8 +676,8 @@
 /* Login
    ========================================================================== */
 
-.body-login,
-.body-reset {
+.page-login,
+.page-reset {
 	background: radial-gradient(circle, rgb(77 77 77 / 100%) 0%, rgb(31 31 31 / 100%) 100%), #303030;
 }
 
@@ -808,6 +808,10 @@
 	border-color: #454545;
 }
 
+.app-footer-link {
+	color: #cdcdcd;
+}
+
 /* Inline alerts
    ========================================================================== */
 

web/css/src/themes/default.css

@@ -58,13 +58,30 @@
 	--chart-line-3-color: var(--icon-color-green);
 }
 
+/* App
+   ========================================================================== */
+
+.app {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
 /* App header
    ========================================================================== */
 
 .app-header {
+	flex: none;
 	padding-top: 40px;
 }
 
+/* App content
+   ========================================================================== */
+
+.app-content {
+	flex: 1 0 auto;
+}
+
 /* Container
    ========================================================================== */
 
@@ -994,7 +1011,6 @@
 		border-radius: 0;
 
 		&:last-child {
-			border-bottom-color: transparent;
 			margin-bottom: 0;
 		}
 
@@ -1141,6 +1157,15 @@
 	}
 }
 
+.units-table-footer {
+	padding: 20px;
+
+	@media (--viewport-large) {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
+}
+
 /* Cards
    ========================================================================== */
 
@@ -2104,17 +2129,20 @@
 /* Login
    ========================================================================== */
 
-.body-login,
-.body-reset {
-	display: flex;
-	align-items: center;
-	justify-content: center;
+.page-login,
+.page-reset {
 	background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%),
 		rgb(102 158 231);
 
 	& .debug-panel {
 		display: none;
 	}
+
+	& .app {
+		align-items: center;
+		justify-content: center;
+		flex-direction: row;
+	}
 }
 
 .login {
@@ -2215,17 +2243,22 @@
 	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 }
 
+.logs-container {
+	height: 100%;
+	padding: 20px;
+	overflow-y: auto;
+	max-height: calc(100vh - 40px - 40px);
+
+	@media (--viewport-medium) {
+		max-height: calc(100vh - 40px - 60px);
+	}
+}
+
 .console-output {
 	color: #202020;
 	font-family: var(--font-family-monospace);
 	font-size: 0.92rem;
-	line-height: 1.15;
-	padding-bottom: 20px;
-	overflow-x: scroll;
-
-	@media (--viewport-medium) {
-		overflow-x: initial;
-	}
+	line-height: 1.2;
 }
 
 /* Icon component
@@ -2381,26 +2414,21 @@
    ========================================================================== */
 
 .app-footer {
+	flex: none;
 	color: #7c7c7c;
 	border-top: 1px solid #ddd;
+	text-align: center;
 	font-size: 0.8rem;
-	padding-top: 20px;
-	padding-bottom: 20px;
+	padding: 10px;
 
 	@media (--viewport-medium) {
-		padding-top: 40px;
-		padding-bottom: 40px;
+		text-align: left;
+		padding: 20px;
 	}
 }
 
-.app-footer-inner {
-	padding-left: 20px;
-	padding-right: 20px;
-
-	@media (--viewport-large) {
-		padding-left: 15px;
-		padding-right: 15px;
-	}
+.app-footer-link {
+	color: #7c7c7c;
 }
 
 /* Alerts

web/css/src/themes/flat.css

@@ -177,8 +177,8 @@
 /* Login
    ========================================================================== */
 
-.body-login,
-.body-reset {
+.page-login,
+.page-reset {
 	background: #5f7eb3;
 }
 

web/css/src/themes/vestia.css

@@ -429,8 +429,8 @@ h1 {
 /* Login
    ========================================================================== */
 
-.body-login,
-.body-reset {
+.page-login,
+.page-reset {
 	background: #ededed;
 }
 

web/list/server/index.php

@@ -10,6 +10,14 @@ if ($_SESSION["userContext"] !== "admin") {
 	exit();
 }
 
+function end_html() {
+	echo "</pre>\n</div>\n</main>\n";
+	include $_SERVER["DOCUMENT_ROOT"] . "/templates/includes/app-footer.php";
+	echo "</div>\n";
+	include $_SERVER["DOCUMENT_ROOT"] . "/templates/includes/jump-to-top-link.php";
+	echo "</body>\n</html>\n";
+}
+
 // CPU info
 if (isset($_GET["cpu"])) {
 	$TAB = "CPU";
@@ -18,7 +26,7 @@ if (isset($_GET["cpu"])) {
 	foreach ($output as $file) {
 		echo $file . "\n";
 	}
-	echo "</pre>\n</div>\n</body>\n</html>\n";
+	end_html();
 	exit();
 }
 
@@ -30,7 +38,7 @@ if (isset($_GET["mem"])) {
 	foreach ($output as $file) {
 		echo $file . "\n";
 	}
-	echo "</pre>\n</div>\n</body>\n</html>\n";
+	end_html();
 	exit();
 }
 
@@ -42,7 +50,7 @@ if (isset($_GET["disk"])) {
 	foreach ($output as $file) {
 		echo $file . "\n";
 	}
-	echo "</pre>\n</div>\n</body>\n</html>\n";
+	end_html();
 	exit();
 }
 
@@ -54,7 +62,7 @@ if (isset($_GET["net"])) {
 	foreach ($output as $file) {
 		echo $file . "\n";
 	}
-	echo "</pre>\n</div>\n</body>\n</html>\n";
+	end_html();
 	exit();
 }
 
@@ -70,7 +78,7 @@ if (isset($_GET["web"])) {
 
 		echo $file . "\n";
 	}
-	echo "</pre>\n</div>\n</body>\n</html>\n";
+	end_html();
 	exit();
 }
 
@@ -82,7 +90,7 @@ if (isset($_GET["dns"])) {
 	foreach ($output as $file) {
 		echo $file . "\n";
 	}
-	echo "</pre>\n</div>\n</body>\n</html>\n";
+	end_html();
 	exit();
 }
 
@@ -96,7 +104,7 @@ if (isset($_GET["mail"])) {
 			echo $file . "\n";
 		}
 	}
-	echo "</pre>\n</div>\n</body>\n</html>\n";
+	end_html();
 	exit();
 }
 
@@ -110,7 +118,7 @@ if (isset($_GET["db"])) {
 			echo $file . "\n";
 		}
 	}
-	echo "</pre>\n</div>\n</body>\n</html>\n";
+	end_html();
 	exit();
 }
 

web/list/web-log/index.php

@@ -23,4 +23,9 @@ if ($return_var == 0) {
 		echo htmlentities($file) . "\n";
 	}
 }
-echo "</pre>\n</body>\n</html>\n";
+
+echo "</pre>\n</div>\n</main>\n";
+include $_SERVER["DOCUMENT_ROOT"] . "/templates/includes/app-footer.php";
+echo "</div>\n";
+include $_SERVER["DOCUMENT_ROOT"] . "/templates/includes/jump-to-top-link.php";
+echo "</body>\n</html>\n";

web/src/app/WebApp/Installers/Opencart/OpencartSetup.php

@@ -6,7 +6,7 @@ use Hestia\WebApp\Installers\BaseSetup as BaseSetup;
 
 class OpencartSetup extends BaseSetup {
 	protected $appInfo = [
-		"name" => "Opencart",
+		"name" => "OpenCart",
 		"group" => "ecommerce",
 		"enabled" => true,
 		"version" => "4.0.2.2",

web/src/app/WebApp/Installers/Prestashop/PrestashopSetup.php

@@ -6,7 +6,7 @@ use Hestia\WebApp\Installers\BaseSetup as BaseSetup;
 
 class PrestashopSetup extends BaseSetup {
 	protected $appInfo = [
-		"name" => "Prestashop",
+		"name" => "PrestaShop",
 		"group" => "ecommerce",
 		"enabled" => true,
 		"version" => "8.1.0",

web/templates/footer.php

@@ -1,4 +1,6 @@
-	</main>
+		</main>
+		<?php require $_SERVER["HESTIA"] . "/web/templates/includes/app-footer.php"; ?>
+	</div>
 <?php if (
 	$_SESSION["userContext"] === "admin" &&
 	$_SESSION["POLICY_SYSTEM_HIDE_SERVICES"] !== "yes" &&
@@ -62,18 +64,12 @@
 			<span class="u-hidden"><?= _("Shortcuts") ?></span>
 		</button>
 	</div>
-	<a
-		href="#top"
-		class="button button-secondary button-circle button-floating button-floating-top"
-		title="<?= _("Top") ?>"
-	>
-		<i class="fas fa-arrow-up"></i>
-		<span class="u-hidden"><?= _("Top") ?></span>
-	</a>
 
-<?php if ($_SESSION["DEBUG_MODE"] == "true") {
-	require $_SERVER["HESTIA"] . "/web/templates/pages/debug_panel.php";
-} ?>
+	<?php require $_SERVER["HESTIA"] . "/web/templates/includes/jump-to-top-link.php"; ?>
+
+	<?php if ($_SESSION["DEBUG_MODE"] == "true") {
+		require $_SERVER["HESTIA"] . "/web/templates/pages/debug_panel.php";
+	} ?>
 
 </body>
 </html>

web/templates/header.php

@@ -9,4 +9,5 @@ require $_SERVER["HESTIA"] . "/web/templates/includes/js.php";
 ?>
 </head>
 
-<body class="body-<?= strtolower($TAB) ?> lang-<?= $_SESSION["language"] ?>">
+<body class="page-<?= strtolower($TAB) ?> lang-<?= $_SESSION["language"] ?>">
+	<div class="app">

web/templates/includes/app-footer.php

@@ -0,0 +1,10 @@
+<footer class="app-footer">
+	<div class="container">
+		<p>
+			<a href="https://hestiacp.com/" class="app-footer-link" target="_blank">
+				Hestia Control Panel
+			</a>
+			v<?= $_SESSION["VERSION"] ?>
+		</p>
+	</div>
+</footer>

web/templates/includes/jump-to-top-link.php

@@ -0,0 +1,8 @@
+<a
+	href="#top"
+	class="button button-secondary button-circle button-floating button-floating-top"
+	title="<?= _("Top") ?>"
+>
+	<i class="fas fa-arrow-up"></i>
+	<span class="u-hidden"><?= _("Top") ?></span>
+</a>

web/templates/pages/edit_mail_acc.php

@@ -90,7 +90,7 @@
 						</label>
 					</div>
 					<div class="form-check <?php if ($v_blackhole == 'yes') { echo 'u-hidden'; } ?>">
-						<input class="form-check-input" type="checkbox" name="v_fwd_only" id="v_fwd_for" <?php if ($v_fwd_only == 'yes') echo 'checked' ?>>
+						<input class="form-check-input js-do-not-store-checkbox" type="checkbox" name="v_fwd_only" id="v_fwd_for" <?php if ($v_fwd_only == 'yes') echo 'checked' ?>>
 						<label for="v_fwd_for">
 							<?= _("Do not store forwarded mail") ?>
 						</label>
@@ -99,7 +99,7 @@
 						<label for="v_fwd" class="form-label">
 							<?= _("Forward to") ?> <span class="optional">(<?= _("one or more email addresses") ?>)</span>
 						</label>
-						<textarea class="form-control" name="v_fwd" id="v_fwd" <?php if ($v_blackhole == 'yes') echo "disabled"; ?>><?= htmlentities(trim($v_fwd, "'")) ?></textarea>
+						<textarea class="form-control js-forward-to-textarea" name="v_fwd" id="v_fwd" <?php if ($v_blackhole == 'yes') echo "disabled"; ?>><?= htmlentities(trim($v_fwd, "'")) ?></textarea>
 					</div>
 					<div class="form-check u-mb10">
 						<input x-model="hasAutoReply" class="form-check-input" type="checkbox" name="v_autoreply" id="v_autoreply">

web/templates/pages/list_access_keys.php

@@ -124,12 +124,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d access key", "%d access keys", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_backup.php

@@ -153,12 +153,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d backup", "%d backups", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_backup_detail.php

@@ -273,12 +273,10 @@
 		<?php }} ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d item", "%d items", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_backup_exclusions.php

@@ -57,6 +57,3 @@
 	</div>
 
 </div>
-
-<footer class="app-footer">
-</footer>

web/templates/pages/list_cron.php

@@ -8,7 +8,7 @@
 				</a>
 				<?php if ($panel[$user_plain]["CRON_REPORTS"] == "yes") { ?>
 					<a class="button button-secondary" href="/delete/cron/reports/?token=<?= $_SESSION["token"] ?>">
-						<i class="fas fa-toggle-off icon-green"></i><?= _("Disable Notifications") ?>
+						<i class="fas fa-toggle-on icon-green"></i><?= _("Disable Notifications") ?>
 					</a>
 				<?php } else { ?>
 					<a class="button button-secondary" href="/add/cron/reports/?token=<?= $_SESSION["token"] ?>">
@@ -188,12 +188,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d cron job", "%d cron jobs", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_db.php

@@ -259,12 +259,10 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d database", "%d databases", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_dns.php

@@ -248,12 +248,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d DNS zone", "%d DNS zones", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_dns_rec.php

@@ -173,12 +173,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d DNS record", "%d DNS records", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_firewall.php

@@ -177,12 +177,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d firewall rule", "%d firewall rules", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_firewall_banlist.php

@@ -90,10 +90,7 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php
 				if ( $i == 0) {
@@ -104,4 +101,5 @@
 			?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_firewall_ipset.php

@@ -99,10 +99,7 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php
 				if ( $i == 0) {
@@ -113,4 +110,5 @@
 			?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_ip.php

@@ -146,12 +146,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d IP address", "%d IP addresses", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_key.php

@@ -80,12 +80,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d SSH key", "%d SSH keys", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_log.php

@@ -126,12 +126,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d log record", "%d log records", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_log_auth.php

@@ -98,12 +98,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d log record", "%d log records", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_mail.php

@@ -332,12 +332,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d mail domain", "%d mail domains", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_mail_acc.php

@@ -280,12 +280,10 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d mail account", "%d mail accounts", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_mail_dns.php

@@ -163,6 +163,3 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 	</div>
 
 </div>
-
-<footer class="app-footer">
-</footer>

web/templates/pages/list_packages.php

@@ -305,12 +305,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d package", "%d packages", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_rrd.php

@@ -36,6 +36,3 @@
 		<?php } ?>
 	</div>
 </div>
-
-<footer class="app-footer">
-</footer>

web/templates/pages/list_search.php

@@ -177,12 +177,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d object", "%d objects", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_server_info.php

@@ -8,118 +8,116 @@
 	<?php require $_SERVER["HESTIA"] . "/web/templates/includes/js.php"; ?>
 </head>
 
-<body>
-	<header class="app-header">
-		<div class="top-bar">
-			<div class="container top-bar-inner">
-				<div class="top-bar-left">
-					<a href="/" class="top-bar-logo" title="<?= _("Hestia Control Panel") ?>">
-						<img src="/images/logo-header.svg" alt="<?= _("Hestia Control Panel") ?>" width="54" height="29">
-					</a>
-				</div>
-				<div class="top-bar-right">
-					<nav x-data="{ open: false }" class="top-bar-menu">
-						<button
-							type="button"
-							class="top-bar-menu-link u-hide-tablet"
-							x-on:click="open = !open">
-							<i class="fas fa-bars"></i>
-							<span class="u-hidden" x-text="open ? '<?= _("Close menu") ?>' : '<?= _("Open menu") ?>'">
-								<?= _("Open menu") ?>
-							</span>
-						</button>
-						<div x-cloak x-show="open" x-on:click.outside="open = false" class="top-bar-menu-panel">
-							<ul class="top-bar-menu-list">
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link" href="/list/rrd/" title="<?= _("Back") ?>">
-										<i class="fas fa-circle-left"></i>
-										<span class="top-bar-menu-link-label"><?= _("Back") ?></span>
-									</a>
-								</li>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link <?php if (isset($_GET['cpu'])) echo 'active' ?>" href="/list/server/?cpu">
-										<i class="fas fa-microchip"></i>
-										<span class="top-bar-menu-link-label"><?= _("CPU") ?></span>
-									</a>
-								</li>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link <?php if (isset($_GET['mem'])) echo 'active' ?>" href="/list/server/?mem">
-										<i class="fas fa-memory"></i>
-										<span class="top-bar-menu-link-label"><?= _("RAM") ?></span>
-									</a>
-								</li>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link <?php if (isset($_GET['disk'])) echo 'active' ?>" href="/list/server/?disk">
-										<i class="fas fa-hard-drive"></i>
-										<span class="top-bar-menu-link-label"><?= _("Disk") ?></span>
-									</a>
-								</li>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link <?php if (isset($_GET['net'])) echo 'active' ?>" href="/list/server/?net">
-										<i class="fas fa-hard-drive"></i>
-										<span class="top-bar-menu-link-label"><?= _("Network") ?></span>
-									</a>
-								</li>
-								<?php if ((isset($_SESSION['WEB_SYSTEM'])) && (!empty($_SESSION['WEB_SYSTEM']))) { ?>
+<body class="page-server-info">
+
+	<div class="app">
+
+		<header class="app-header">
+			<div class="top-bar">
+				<div class="container top-bar-inner">
+					<div class="top-bar-left">
+						<a href="/" class="top-bar-logo" title="<?= _("Hestia Control Panel") ?>">
+							<img src="/images/logo-header.svg" alt="<?= _("Hestia Control Panel") ?>" width="54" height="29">
+						</a>
+					</div>
+					<div class="top-bar-right">
+						<nav x-data="{ open: false }" class="top-bar-menu">
+							<button
+								type="button"
+								class="top-bar-menu-link u-hide-tablet"
+								x-on:click="open = !open">
+								<i class="fas fa-bars"></i>
+								<span class="u-hidden" x-text="open ? '<?= _("Close menu") ?>' : '<?= _("Open menu") ?>'">
+									<?= _("Open menu") ?>
+								</span>
+							</button>
+							<div x-cloak x-show="open" x-on:click.outside="open = false" class="top-bar-menu-panel">
+								<ul class="top-bar-menu-list">
 									<li class="top-bar-menu-item">
-										<a class="top-bar-menu-link <?php if (isset($_GET['web'])) echo 'active' ?>" href="/list/server/?web">
-											<i class="fas fa-earth-europe"></i>
-											<span class="top-bar-menu-link-label"><?= _("Web") ?></span>
+										<a class="top-bar-menu-link" href="/list/rrd/" title="<?= _("Back") ?>">
+											<i class="fas fa-circle-left"></i>
+											<span class="top-bar-menu-link-label"><?= _("Back") ?></span>
 										</a>
 									</li>
-								<?php } ?>
-								<?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) { ?>
 									<li class="top-bar-menu-item">
-										<a class="top-bar-menu-link <?php if (isset($_GET['dns'])) echo 'active' ?>" href="/list/server/?dns">
-											<i class="fas fa-book-atlas"></i>
-											<span class="top-bar-menu-link-label"><?= _("DNS") ?></span>
+										<a class="top-bar-menu-link <?php if (isset($_GET['cpu'])) echo 'active' ?>" href="/list/server/?cpu">
+											<i class="fas fa-microchip"></i>
+											<span class="top-bar-menu-link-label"><?= _("CPU") ?></span>
 										</a>
 									</li>
-								<?php } ?>
-								<?php if ((isset($_SESSION['MAIL_SYSTEM'])) && (!empty($_SESSION['MAIL_SYSTEM']))) { ?>
 									<li class="top-bar-menu-item">
-										<a class="top-bar-menu-link <?php if (isset($_GET['mail'])) echo 'active' ?>" href="/list/server/?mail">
-											<i class="fas fa-envelopes-bulk"></i>
-											<span class="top-bar-menu-link-label"><?= _("Mail") ?></span>
+										<a class="top-bar-menu-link <?php if (isset($_GET['mem'])) echo 'active' ?>" href="/list/server/?mem">
+											<i class="fas fa-memory"></i>
+											<span class="top-bar-menu-link-label"><?= _("RAM") ?></span>
 										</a>
 									</li>
-								<?php } ?>
-								<?php if ((isset($_SESSION['DB_SYSTEM'])) && (!empty($_SESSION['DB_SYSTEM']))) { ?>
 									<li class="top-bar-menu-item">
-										<a class="top-bar-menu-link <?php if (isset($_GET['db'])) echo 'active' ?>" href="/list/server/?db">
-											<i class="fas fa-database"></i>
-											<span class="top-bar-menu-link-label"><?= _("DB") ?></span>
+										<a class="top-bar-menu-link <?php if (isset($_GET['disk'])) echo 'active' ?>" href="/list/server/?disk">
+											<i class="fas fa-hard-drive"></i>
+											<span class="top-bar-menu-link-label"><?= _("Disk") ?></span>
 										</a>
 									</li>
-								<?php } ?>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link" href="javascript:location.reload();" title="<?= _("Refresh") ?>">
-										<i class="fas fa-arrow-rotate-right"></i>
-										<span class="u-hidden"><?= _("Refresh") ?></span>
-									</a>
-								</li>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>" title="<?= _("Log out") ?>">
-										<i class="fas fa-right-from-bracket"></i>
-										<span class="u-hidden"><?= _("Log out") ?></span>
-									</a>
-								</li>
-							</ul>
-						</div>
-					</nav>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link <?php if (isset($_GET['net'])) echo 'active' ?>" href="/list/server/?net">
+											<i class="fas fa-hard-drive"></i>
+											<span class="top-bar-menu-link-label"><?= _("Network") ?></span>
+										</a>
+									</li>
+									<?php if ((isset($_SESSION['WEB_SYSTEM'])) && (!empty($_SESSION['WEB_SYSTEM']))) { ?>
+										<li class="top-bar-menu-item">
+											<a class="top-bar-menu-link <?php if (isset($_GET['web'])) echo 'active' ?>" href="/list/server/?web">
+												<i class="fas fa-earth-europe"></i>
+												<span class="top-bar-menu-link-label"><?= _("Web") ?></span>
+											</a>
+										</li>
+									<?php } ?>
+									<?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) { ?>
+										<li class="top-bar-menu-item">
+											<a class="top-bar-menu-link <?php if (isset($_GET['dns'])) echo 'active' ?>" href="/list/server/?dns">
+												<i class="fas fa-book-atlas"></i>
+												<span class="top-bar-menu-link-label"><?= _("DNS") ?></span>
+											</a>
+										</li>
+									<?php } ?>
+									<?php if ((isset($_SESSION['MAIL_SYSTEM'])) && (!empty($_SESSION['MAIL_SYSTEM']))) { ?>
+										<li class="top-bar-menu-item">
+											<a class="top-bar-menu-link <?php if (isset($_GET['mail'])) echo 'active' ?>" href="/list/server/?mail">
+												<i class="fas fa-envelopes-bulk"></i>
+												<span class="top-bar-menu-link-label"><?= _("Mail") ?></span>
+											</a>
+										</li>
+									<?php } ?>
+									<?php if ((isset($_SESSION['DB_SYSTEM'])) && (!empty($_SESSION['DB_SYSTEM']))) { ?>
+										<li class="top-bar-menu-item">
+											<a class="top-bar-menu-link <?php if (isset($_GET['db'])) echo 'active' ?>" href="/list/server/?db">
+												<i class="fas fa-database"></i>
+												<span class="top-bar-menu-link-label"><?= _("DB") ?></span>
+											</a>
+										</li>
+									<?php } ?>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link" href="javascript:location.reload();" title="<?= _("Refresh") ?>">
+											<i class="fas fa-arrow-rotate-right"></i>
+											<span class="u-hidden"><?= _("Refresh") ?></span>
+										</a>
+									</li>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>" title="<?= _("Log out") ?>">
+											<i class="fas fa-right-from-bracket"></i>
+											<span class="u-hidden"><?= _("Log out") ?></span>
+										</a>
+									</li>
+								</ul>
+							</div>
+						</nav>
+					</div>
 				</div>
 			</div>
-		</div>
-	</header>
+		</header>
+
+		<main class="app-content">
 
-	<a
-		href="#top"
-		class="button button-secondary button-circle button-floating button-floating-top"
-		title="<?= _("Top") ?>"
-	>
-		<i class="fas fa-arrow-up"></i>
-		<span class="u-hidden"><?= _("Top") ?></span>
-	</a>
+			<div class="logs-container">
 
-	<div class="container">
-		<pre class="console-output u-mt20">
+				<div class="container">
+					<pre class="console-output u-mt20">

web/templates/pages/list_server_preview.php

@@ -42,6 +42,3 @@
 	</div>
 
 </div>
-
-<footer class="app-footer">
-</footer>

web/templates/pages/list_services.php

@@ -58,11 +58,10 @@
 				<li class="server-summary-item">
 					<span class="server-summary-list-label">Hestia Control Panel</span>
 					<span class="server-summary-list-value">
-						<?php if ($sys["sysinfo"]["RELEASE"] != "release") { ?>
-							<i class="fas fa-flask icon-red" title="<?= $sys["sysinfo"]["RELEASE"] ?>"></i>
-						<?php } ?>
 						<?php if ($sys["sysinfo"]["RELEASE"] == "release") { ?>
 							<i class="fas fa-cube" title="<?= _("Production Release") ?>"></i>
+						<?php } else { ?>
+							<i class="fas fa-flask icon-red" title="<?= $sys["sysinfo"]["RELEASE"] ?>"></i>
 						<?php } ?>
 						v<?= $sys["sysinfo"]["HESTIA"] ?>
 					</span>
@@ -209,6 +208,3 @@
 	</div>
 
 </div>
-
-<footer class="app-footer">
-</footer>

web/templates/pages/list_stats.php

@@ -46,6 +46,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<!-- Begin statistics list item loop -->
 	<div class="stats">
 		<?php foreach ($data as $key => $value) {
@@ -227,12 +228,11 @@
 			</div>
 		<?php } ?>
 	</div>
-</div>
 
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d month", "%d months", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_terminal.php

@@ -15,6 +15,3 @@
 		<div class="js-web-terminal web-terminal"></div>
 	</div>
 </div>
-
-<footer class="app-footer">
-</footer>

web/templates/pages/list_updates.php

@@ -64,14 +64,14 @@
 				</div>
 				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Status") ?>:</span>
-					<?php if ($data[$key]['UPDATED'] == 'no') { echo '<i class="fas fa-triangle-exclamation" style="color: orange;"></i>'; } ?>
-					<?php if ($data[$key]['UPDATED'] == 'yes') { echo '<i class="fas fa-circle-check icon-green"></i>'; } ?>
+					<?php if ($data[$key]['UPDATED'] == 'no'): ?>
+						<i class="fas fa-triangle-exclamation icon-orange" title="<?= _("Update available") ?>"></i>
+					<?php elseif ($data[$key]['UPDATED'] == 'yes'): ?>
+						<i class="fas fa-circle-check icon-green" title="<?= _("Package up-to-date") ?>"></i>
+					<?php endif; ?>
 				</div>
 			</div>
 		<?php } ?>
 	</div>
 
 </div>
-
-<footer class="app-footer">
-</footer>

web/templates/pages/list_user.php

@@ -304,12 +304,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d user account", "%d user accounts", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_web.php

@@ -344,12 +344,10 @@
 		<?php } ?>
 	</div>
 
-</div>
-
-<footer class="app-footer">
-	<div class="container app-footer-inner">
+	<div class="units-table-footer">
 		<p>
 			<?php printf(ngettext("%d web domain", "%d web domains", $i), $i); ?>
 		</p>
 	</div>
-</footer>
+
+</div>

web/templates/pages/list_weblog.php

@@ -8,94 +8,92 @@
 	<?php require $_SERVER["HESTIA"] . "/web/templates/includes/js.php"; ?>
 </head>
 
-<body>
-	<header class="app-header">
-		<div class="top-bar">
-			<div class="container top-bar-inner">
-				<div class="top-bar-left">
-					<a href="/" class="top-bar-logo" title="<?= htmlentities($_SESSION['APP_NAME']);?>">
-						<img src="<?php if ( !empty($_SESSION['LOGO_HEADER'])){ echo $_SESSION['LOGO_HEADER']; } else{ echo "/images/logo-header.svg"; } ?>" alt="<?= htmlentities($_SESSION['APP_NAME']);?>" width="54" height="29">
-					</a>
-				</div>
-				<div class="top-bar-right">
-					<nav x-data="{ open: false }" class="top-bar-menu">
-						<button
-							type="button"
-							class="top-bar-menu-link u-hide-tablet"
-							x-on:click="open = !open">
-							<i class="fas fa-bars"></i>
-							<span class="u-hidden" x-text="open ? '<?= _("Close menu") ?>' : '<?= _("Open menu") ?>'">
-								<?= _("Open menu") ?>
-							</span>
-						</button>
-						<div x-cloak x-show="open" x-on:click.outside="open = false" class="top-bar-menu-panel">
-							<ul class="top-bar-menu-list">
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link" href="/list/web/" title="<?= _("Back") ?>">
-										<i class="fas fa-circle-left"></i>
-										<span class="top-bar-menu-link-label"><?= _("Back") ?></span>
-									</a>
-								</li>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link <?php if ($_GET['type'] == 'access') echo 'active' ?>" href="/list/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=access&token=<?= $_SESSION['token'] ?>" title="<?= _("View Logs") ?>">
-										<i class="fas fa-eye"></i>
-										<span class="top-bar-menu-link-label"><?= _("View Logs") ?></span>
-									</a>
-								</li>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link <?php if ($_GET['type'] == 'access') echo 'active' ?>" href="/download/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=access&&token=<?= $_SESSION['token'] ?>" title="<?= _("Download") ?>">
-										<i class="fas fa-download"></i>
-										<span class="u-hidden"><?= _("Download") ?></span>
-									</a>
-								</li>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link <?php if ($_GET['type'] == 'error') echo 'active' ?>" href="/list/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=error&token=<?= $_SESSION['token'] ?>" title="<?= _("Error Log") ?>">
-										<i class="fas fa-circle-exclamation"></i>
-										<span class="top-bar-menu-link-label"><?= _("Error Log") ?></span>
-									</a>
-								</li>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link <?php if ($_GET['type'] == 'error') echo 'active' ?>" href="/download/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=error&token=<?= $_SESSION['token'] ?>" title="<?= _("Download") ?>">
-										<i class="fas fa-download"></i>
-										<span class="u-hidden"><?= _("Download") ?></span>
-									</a>
-								</li>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link" href="javascript:location.reload();" title="<?= _("Refresh") ?>">
-										<i class="fas fa-arrow-rotate-right"></i>
-										<span class="u-hidden"><?= _("Refresh") ?></span>
-									</a>
-								</li>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link" href="/list/user/" title="<?= htmlentities($user) ?>">
-										<i class="fas fa-circle-user"></i>
-										<span class="u-hidden"><?= htmlentities($user) ?></span>
-									</a>
-								</li>
-								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>" title="<?= _("Log out") ?>">
-										<i class="fas fa-right-from-bracket"></i>
-										<span class="u-hidden"><?= _("Log out") ?></span>
-									</a>
-								</li>
-							</ul>
-						</div>
-					</nav>
+<body class="page-weblog">
+
+	<div class="app">
+
+		<header class="app-header">
+			<div class="top-bar">
+				<div class="container top-bar-inner">
+					<div class="top-bar-left">
+						<a href="/" class="top-bar-logo" title="<?= htmlentities($_SESSION['APP_NAME']);?>">
+							<img src="<?php if ( !empty($_SESSION['LOGO_HEADER'])){ echo $_SESSION['LOGO_HEADER']; } else{ echo "/images/logo-header.svg"; } ?>" alt="<?= htmlentities($_SESSION['APP_NAME']);?>" width="54" height="29">
+						</a>
+					</div>
+					<div class="top-bar-right">
+						<nav x-data="{ open: false }" class="top-bar-menu">
+							<button
+								type="button"
+								class="top-bar-menu-link u-hide-tablet"
+								x-on:click="open = !open">
+								<i class="fas fa-bars"></i>
+								<span class="u-hidden" x-text="open ? '<?= _("Close menu") ?>' : '<?= _("Open menu") ?>'">
+									<?= _("Open menu") ?>
+								</span>
+							</button>
+							<div x-cloak x-show="open" x-on:click.outside="open = false" class="top-bar-menu-panel">
+								<ul class="top-bar-menu-list">
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link" href="/list/web/" title="<?= _("Back") ?>">
+											<i class="fas fa-circle-left"></i>
+											<span class="top-bar-menu-link-label"><?= _("Back") ?></span>
+										</a>
+									</li>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link <?php if ($_GET['type'] == 'access') echo 'active' ?>" href="/list/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=access&token=<?= $_SESSION['token'] ?>" title="<?= _("View Logs") ?>">
+											<i class="fas fa-eye"></i>
+											<span class="top-bar-menu-link-label"><?= _("View Logs") ?></span>
+										</a>
+									</li>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link <?php if ($_GET['type'] == 'access') echo 'active' ?>" href="/download/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=access&&token=<?= $_SESSION['token'] ?>" title="<?= _("Download") ?>">
+											<i class="fas fa-download"></i>
+											<span class="u-hidden"><?= _("Download") ?></span>
+										</a>
+									</li>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link <?php if ($_GET['type'] == 'error') echo 'active' ?>" href="/list/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=error&token=<?= $_SESSION['token'] ?>" title="<?= _("Error Log") ?>">
+											<i class="fas fa-circle-exclamation"></i>
+											<span class="top-bar-menu-link-label"><?= _("Error Log") ?></span>
+										</a>
+									</li>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link <?php if ($_GET['type'] == 'error') echo 'active' ?>" href="/download/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=error&token=<?= $_SESSION['token'] ?>" title="<?= _("Download") ?>">
+											<i class="fas fa-download"></i>
+											<span class="u-hidden"><?= _("Download") ?></span>
+										</a>
+									</li>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link" href="javascript:location.reload();" title="<?= _("Refresh") ?>">
+											<i class="fas fa-arrow-rotate-right"></i>
+											<span class="u-hidden"><?= _("Refresh") ?></span>
+										</a>
+									</li>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link" href="/list/user/" title="<?= htmlentities($user) ?>">
+											<i class="fas fa-circle-user"></i>
+											<span class="u-hidden"><?= htmlentities($user) ?></span>
+										</a>
+									</li>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>" title="<?= _("Log out") ?>">
+											<i class="fas fa-right-from-bracket"></i>
+											<span class="u-hidden"><?= _("Log out") ?></span>
+										</a>
+									</li>
+								</ul>
+							</div>
+						</nav>
+					</div>
 				</div>
 			</div>
-		</div>
-	</header>
+		</header>
+
+		<main class="app-content">
 
-	<a
-		href="#top"
-		class="button button-secondary button-circle button-floating button-floating-top"
-		title="<?= _("Top") ?>"
-	>
-		<i class="fas fa-arrow-up"></i>
-		<span class="u-hidden"><?= _("Top") ?></span>
-	</a>
+			<div class="logs-container">
 
-	<p class="container u-text-center u-mt20 u-mb20">
-		<?= sprintf(_("Last 70 lines of %s.%s.log"), htmlentities($_GET["domain"]), htmlentities($type)) ?>
-	</p>
-	<pre class="console-output u-pl30 u-pr30">
+				<p class="u-text-center u-mb20">
+					<?= sprintf(_("Last 70 lines of %s.%s.log"), htmlentities($_GET["domain"]), htmlentities($type)) ?>
+				</p>
+				<pre class="console-output">

web/templates/pages/login/login.php

@@ -2,7 +2,7 @@
 	<a href="/" class="u-block u-mb40">
 		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="100" height="120">
 	</a>
-	<form id="form_login" method="post" action="/login/">
+	<form id="login-form" method="post" action="/login/">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<h1 class="login-title">
 			<?= sprintf(_("Welcome to %s"), htmlentities($_SESSION["APP_NAME"])) ?>

web/templates/pages/login/login_1.php

@@ -2,7 +2,7 @@
 	<a href="/" class="u-block u-mb40">
 		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="100" height="120">
 	</a>
-	<form id="form_login" method="post" action="/login/">
+	<form id="login-form" method="post" action="/login/">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<h1 class="login-title">
 			<?= _("Welcome") ?> <?= htmlspecialchars($_SESSION["login"]["username"]) ?>!

web/templates/pages/login/login_2.php

@@ -2,7 +2,7 @@
 	<a href="/" class="u-block u-mb40">
 		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="100" height="120">
 	</a>
-	<form id="form_login" method="post" action="/login/">
+	<form id="login-form" method="post" action="/login/">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<h1 class="login-title">
 			<?= _("Two-factor Authentication") ?>

web/templates/pages/login/login_a.php

@@ -2,7 +2,7 @@
 	<a href="/" class="u-block u-mb40">
 		<img src="/images/logo.svg" alt="<?= htmlentities($_SESSION["APP_NAME"]) ?>" width="100" height="120">
 	</a>
-	<form id="form_login" method="post" action="/login/">
+	<form id="login-form" method="post" action="/login/">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<h1 class="login-title">
 			<?= sprintf(_("Welcome to %s"), htmlentities($_SESSION["APP_NAME"])) ?>