Refactor cron pages for mobile (#3166)

web/css/src/base.css

@@ -106,6 +106,12 @@ textarea {
 	min-height: 60px;
 }
 
+fieldset {
+	border: 0;
+	margin: 0;
+	padding: 0;
+}
+
 dialog {
 	position: fixed;
 	padding: 0;

web/css/src/themes/dark.css

@@ -224,7 +224,6 @@ strong {
 .toolbar-sorting-menu {
 	background-color: rgb(40 40 40 / 95%);
 	box-shadow: 0 2px 16px 0 rgb(20 20 20 / 65%);
-	border-radius: 4px;
 	border-color: rgb(90 90 90 / 100%);
 
 	& li {
@@ -388,21 +387,6 @@ strong {
 	background-color: #353535;
 }
 
-.units.active .l-unit.focus .l-unit__name {
-}
-
-.units.active .l-unit.focus .l-unit-toolbar__col--right {
-}
-
-.units > div:last-child {
-}
-
-.l-unit:hover .l-unit-toolbar__col--right {
-}
-
-.l-unit--blue {
-}
-
 .l-unit--suspended {
 	background: #252525 !important;
 	color: #606060 !important;
@@ -734,7 +718,7 @@ strong {
 	color: #dadada;
 }
 
-form#vstobjects.suspended {
+#vstobjects.suspended {
 	background-color: #282828;
 }
 
@@ -803,7 +787,7 @@ form#vstobjects.suspended {
 }
 
 .ui-widget-header a {
-	color: #cacaca !important;
+	color: #cacaca;
 }
 
 /* Shortcuts panel
@@ -819,43 +803,32 @@ form#vstobjects.suspended {
 	border-bottom: 1px solid #353535;
 }
 
-.cron-helper-container {
+.cron-helper-panel {
 	box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
-	border: 1px solid #606060;
+	border-color: #606060;
 	background-color: #454545;
-}
-
-.cron-helper-tabs a {
-	color: #cacaca;
-}
 
-.cron-helper-tabs a:hover {
-	color: #ff3478 !important;
-}
+	& .ui-tabs-tab a {
+		color: #cacaca;
 
-.cron-helper-tabs a:active {
-	color: #3b9de8 !important;
-}
+		&:hover {
+			color: #ff3478;
+		}
 
-.cron-helper-tabs .ui-tabs-selected a,
-.ui-tabs-tab[aria-expanded="true"] a {
-	color: #ff3478 !important;
-}
+		&:active {
+			color: #3b9de8;
+		}
+	}
 
-.cron-helper-tabs p {
-	color: #dadada;
+	& .ui-tabs-tab[aria-expanded="true"] a {
+		color: #ff3478;
+	}
 }
 
 .server-console-output {
 	background: #282828;
 }
 
-.body-rrd .units .l-unit {
-	background-color: #282828 !important;
-	border-left: 1px solid transparent !important;
-	border-right: 1px solid transparent !important;
-}
-
 .l-percent {
 	border-bottom: 2px solid #585858 !important;
 }
@@ -870,10 +843,10 @@ form#vstobjects.suspended {
 }
 
 .body-stats .units .l-unit {
-	background-color: #282828 !important;
-	border-bottom: 1px solid #404040 !important;
-	border-left: 1px solid #282828 !important;
-	border-right: 1px solid #282828 !important;
+	background-color: #282828;
+	border-bottom: 1px solid #404040;
+	border-left: 1px solid #282828;
+	border-right: 1px solid #282828;
 }
 
 .body-stats .units:hover .l-unit:hover {
@@ -886,6 +859,9 @@ form#vstobjects.suspended {
 	color: #fff !important;
 }
 
+/* App footer
+   ========================================================================== */
+
 .app-footer {
 	color: #cdcdcd;
 	border-color: #454545;

web/css/src/themes/default.css

@@ -17,6 +17,7 @@
 	--color-text-link: #326b9b;
 	--color-text-link-hover: #c36;
 	--color-background: #fff;
+	--border-radius-base: 4px;
 
 	/* Alerts */
 	--alert-border-color: #fff;
@@ -37,38 +38,16 @@
 	--icon-color-lightblue: #6eb6f0;
 }
 
-.check-label {
-	display: inline-block;
-	cursor: pointer;
-	position: relative;
-	line-height: 16px;
-	padding-left: 26px;
-
-	&::before {
-		content: "";
-		size: 16px;
-		position: absolute;
-		left: 0;
-		top: 0;
-		display: inline-block;
-		z-index: 2;
-	}
-}
-
-.clicked-on.check-label::before,
-.selected .check-label::before {
-	content: "";
-	display: inline-block;
-	size: 27px;
-	background-position: -225px -42px;
-	top: -6px;
-	left: -6px;
-}
+/* App header
+   ========================================================================== */
 
 .app-header {
 	padding-top: 40px;
 }
 
+/* Container
+   ========================================================================== */
+
 .container {
 	margin-left: auto;
 	margin-right: auto;
@@ -668,7 +647,7 @@
 	left: 0;
 	z-index: 1;
 	overflow: hidden;
-	border-radius: 4px;
+	border-radius: var(--border-radius-base);
 	border: 1px solid rgb(255 255 255 / 100%);
 	background-color: rgb(255 255 255 / 95%);
 	box-shadow: 0 2px 14px 0 rgb(20 20 20 / 35%);
@@ -754,7 +733,7 @@
 	border: 1px solid #ddd;
 	border-left: 0;
 	background-color: rgb(255 255 255 / 90%);
-	border-radius: 0 4px 4px 0;
+	border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
 	box-shadow: inset 0 0 1px rgb(41 90 152 / 10%), inset 0 0 2px rgb(255 255 255 / 100%);
 	text-shadow: 1px 1px rgb(255 255 255 / 90%);
 	color: #069;
@@ -864,7 +843,7 @@
 	background-color: #f5f5f5;
 	border: 1px solid #d3d3d3;
 	box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
-	border-radius: 4px;
+	border-radius: var(--border-radius-base);
 	margin-bottom: 20px;
 
 	@media (--viewport-small) {
@@ -917,10 +896,9 @@
 
 .l-unit {
 	color: #707070;
-	padding: 0 0 0 14px;
+	padding-left: 15px;
 	overflow: hidden;
 	font-size: 0.8rem;
-	border-radius: 0;
 	border-left: 1px solid transparent;
 	border-right: 1px solid transparent;
 }
@@ -937,13 +915,11 @@
 		inset 0 0 4px rgb(255 255 255 / 80%), 0 1px 4px rgb(140 140 140 / 35%);
 	border-radius: 0 0 6px 6px;
 	min-height: 28px;
+	padding: 4px 0 4px 15px;
 	color: #707070;
-	padding: 0 0 0 14px;
 	overflow: hidden;
 	width: 1024px;
 	line-height: 1rem;
-	padding-top: 4px;
-	padding-bottom: 4px;
 
 	& .fas {
 		font-size: 1rem;
@@ -1430,13 +1406,21 @@
 }
 
 @media (--viewport-medium) {
-	.sidebar-container {
+	.sidebar-right-container {
 		display: grid;
 		gap: 50px;
 		grid-template-columns: 2fr 1.3fr;
 	}
 }
 
+@media (--viewport-medium) {
+	.sidebar-left-container {
+		display: grid;
+		gap: 50px;
+		grid-template-columns: 1fr 3fr;
+	}
+}
+
 .form-title {
 	color: #4b4b4b;
 	font-size: 1.4rem;
@@ -1465,10 +1449,11 @@
 	font-size: 0.8rem;
 	font-weight: normal;
 	color: #4e4e4e;
-	border-radius: 4px;
+	border-radius: var(--border-radius-base);
 	line-height: 1.5;
 	appearance: none;
 	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
+	transition: background-color 0.5s;
 
 	&:hover {
 		border-color: #94c8f0;
@@ -1499,6 +1484,11 @@
 			background-color: #fff;
 		}
 	}
+
+	&.highlighted {
+		color: #444;
+		background-color: #fff7b6;
+	}
 }
 
 .form-select {
@@ -1508,7 +1498,7 @@
 	font-size: 0.8rem;
 	padding: 8px 30px 8px 12px;
 	line-height: 1.5;
-	border-radius: 4px;
+	border-radius: var(--border-radius-base);
 	background-color: #fff;
 	border: 1px solid #ccc;
 	color: #4e4e4e;
@@ -1564,7 +1554,7 @@
 	cursor: pointer;
 	text-decoration: underline;
 	font-weight: 600;
-	border-radius: 4px;
+	border-radius: var(--border-radius-base);
 	margin-left: -3px;
 	padding-left: 3px;
 	padding-right: 3px;
@@ -2018,7 +2008,7 @@
 	padding: 20px;
 	border: 1px solid #d9d9d9;
 	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
-	border-radius: 4px;
+	border-radius: var(--border-radius-base);
 }
 
 /* Collapse component
@@ -2080,11 +2070,10 @@
 	justify-content: center;
 	background: rgb(102 158 231);
 	background: radial-gradient(circle, rgb(102 158 231 / 100%) 0%, rgb(43 86 177 / 100%) 100%);
-}
 
-.body-login .debug-panel,
-.body-reset .debug-panel {
-	display: none;
+	& .debug-panel {
+		display: none;
+	}
 }
 
 .login {
@@ -2281,7 +2270,7 @@
 
 .qr-code {
 	border: 1px solid #cfcfcf;
-	border-radius: 4px;
+	border-radius: var(--border-radius-base);
 	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
 }
 
@@ -2312,7 +2301,7 @@
 	color: #202020;
 }
 
-form#vstobjects.suspended {
+#vstobjects.suspended {
 	background-color: #fff;
 	padding-bottom: 30px;
 }
@@ -2431,27 +2420,13 @@ form#vstobjects.suspended {
 	color: #c0c0c0;
 }
 
-.cron-helper-container {
-	float: right;
-	margin-bottom: -450px;
-	margin-top: 202px;
-	margin-right: 70px;
-	padding-top: 0;
-	width: 610px;
-	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
+.cron-helper-panel {
 	border: 1px solid #cfcfcf;
-	border-radius: 4px;
-
-	@media (max-width: 950px) {
-		display: none;
-	}
-}
-
-.cron-helper-tabs {
-	border: none !important;
-	font-family: Exo, system-ui !important;
+	border-radius: var(--border-radius-base);
+	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
+	margin-top: 20px;
 
-	& a {
+	& .ui-tabs-tab a {
 		color: #777;
 		font-weight: 600;
 		line-height: 30px;
@@ -2467,28 +2442,31 @@ form#vstobjects.suspended {
 		}
 	}
 
-	& .form-label {
-		padding-right: 15px;
-		padding-left: 25px;
+	& .ui-tabs-tab[aria-expanded="true"] a {
+		color: #c36;
+	}
 
-		&.first {
-			display: inline-block;
-			width: 120px;
-			padding-left: 0;
+	@media (--viewport-medium) {
+		margin-top: 25px;
+
+		& .form-label {
+			padding-right: 15px;
+			padding-left: 25px;
+
+			&.first {
+				display: inline-block;
+				width: 120px;
+				padding-left: 0;
+			}
 		}
-	}
 
-	& .form-select {
-		display: inline-block;
-		width: 384px;
+		& .form-select {
+			display: inline-block;
+			max-width: 384px;
+		}
 	}
 }
 
-.cron-helper-tabs .ui-tabs-selected a,
-.ui-tabs-tab[aria-expanded="true"] a {
-	color: #c36;
-}
-
 .server-console-output {
 	color: #c36;
 	padding: 10px 0 20px 20px;
@@ -2506,6 +2484,9 @@ form#vstobjects.suspended {
 	line-height: 1.2rem;
 }
 
+/* App footer
+   ========================================================================== */
+
 .app-footer {
 	color: #7c7c7c;
 	border-top: 1px solid #ddd;
@@ -2520,15 +2501,20 @@ form#vstobjects.suspended {
 }
 
 .app-footer-inner {
-	padding-left: 15px;
-	padding-right: 15px;
+	padding-left: 20px;
+	padding-right: 20px;
+
+	@media (--viewport-large) {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
 }
 
 /* Alerts
    ========================================================================== */
 
 .alert {
-	border-radius: 4px;
+	border-radius: var(--border-radius-base);
 	border: 1px solid var(--alert-border-color);
 	color: #fff;
 	font-weight: 400;

web/css/src/themes/vestia.css

@@ -419,23 +419,23 @@ strong {
 	}
 }
 
-.cron-helper-container {
-	margin-top: 201px;
+.cron-helper-panel {
 	border-radius: 0;
 	box-shadow: none;
-}
 
-.cron-helper-tabs .ui-tabs-selected a,
-.ui-tabs-tab[aria-expanded="true"] a {
-	color: #ff6701;
-}
+	& .ui-tabs-tab a {
+		&:hover {
+			color: #f79b44;
+		}
 
-.cron-helper-tabs a:hover {
-	color: #f79b44;
-}
+		&:active {
+			color: #e95e00;
+		}
+	}
 
-.cron-helper-tabs a:active {
-	color: #e95e00;
+	& .ui-tabs-tab[aria-expanded="true"] a {
+		color: #ff6701;
+	}
 }
 
 /* Login

web/js/main.js

@@ -130,7 +130,7 @@ document.addEventListener('alpine:init', () => {
 	});
 
 	// Select all helper
-	const toggleAll = document.querySelector('#toggle-all');
+	const toggleAll = document.querySelector('.js-toggle-all');
 	if (toggleAll) {
 		toggleAll.addEventListener('change', (evt) => {
 			document.querySelectorAll('.ch-toggle').forEach((el) => (el.checked = evt.target.checked));

web/js/pages/add_cron.js

@@ -1,23 +1,24 @@
-$(document).ready(function () {
-	$('#tabs').tabs();
+document.addEventListener('DOMContentLoaded', () => {
+	// TODO: Replace jQuery UI tabs with something else
+	$('.js-cron-tabs').tabs();
 
-	$('.cron-helper-container form').submit(function () {
-		$('#vstobjects input[name=v_min]')
-			.val($(this).find(':input[name=h_min]').val())
-			.effect('highlight');
-		$('#vstobjects input[name=v_hour]')
-			.val($(this).find(':input[name=h_hour]').val())
-			.effect('highlight');
-		$('#vstobjects input[name=v_day]')
-			.val($(this).find(':input[name=h_day]').val())
-			.effect('highlight');
-		$('#vstobjects input[name=v_month]')
-			.val($(this).find(':input[name=h_month]').val())
-			.effect('highlight');
-		$('#vstobjects input[name=v_wday]')
-			.val($(this).find(':input[name=h_wday]').val())
-			.effect('highlight');
+	const generateCronButtons = document.querySelectorAll('.js-generate-cron');
+	generateCronButtons.forEach((button) => {
+		button.addEventListener('click', () => {
+			const fieldset = button.closest('fieldset');
+			const inputNames = ['min', 'hour', 'day', 'month', 'wday'];
 
-		return false;
+			inputNames.forEach((inputName) => {
+				const value = fieldset.querySelector(`[name=h_${inputName}]`).value;
+				const formInput = document.querySelector(`#vstobjects input[name=v_${inputName}]`);
+
+				formInput.value = value;
+				formInput.classList.add('highlighted');
+
+				setTimeout(() => {
+					formInput.classList.remove('highlighted');
+				}, 250);
+			});
+		});
 	});
 });

web/js/pages/edit_cron.js

@@ -1,23 +1,24 @@
-$(document).ready(function () {
-	$('#tabs').tabs();
+document.addEventListener('DOMContentLoaded', () => {
+	// TODO: Replace jQuery UI tabs with something else
+	$('.js-cron-tabs').tabs();
 
-	$('.cron-helper-container form').submit(function () {
-		$('#vstobjects input[name=v_min]')
-			.val($(this).find(':input[name=h_min]').val())
-			.effect('highlight');
-		$('#vstobjects input[name=v_hour]')
-			.val($(this).find(':input[name=h_hour]').val())
-			.effect('highlight');
-		$('#vstobjects input[name=v_day]')
-			.val($(this).find(':input[name=h_day]').val())
-			.effect('highlight');
-		$('#vstobjects input[name=v_month]')
-			.val($(this).find(':input[name=h_month]').val())
-			.effect('highlight');
-		$('#vstobjects input[name=v_wday]')
-			.val($(this).find(':input[name=h_wday]').val())
-			.effect('highlight');
+	const generateCronButtons = document.querySelectorAll('.js-generate-cron');
+	generateCronButtons.forEach((button) => {
+		button.addEventListener('click', () => {
+			const fieldset = button.closest('fieldset');
+			const inputNames = ['min', 'hour', 'day', 'month', 'wday'];
 
-		return false;
+			inputNames.forEach((inputName) => {
+				const value = fieldset.querySelector(`[name=h_${inputName}]`).value;
+				const formInput = document.querySelector(`#vstobjects input[name=v_${inputName}]`);
+
+				formInput.value = value;
+				formInput.classList.add('highlighted');
+
+				setTimeout(() => {
+					formInput.classList.remove('highlighted');
+				}, 250);
+			});
+		});
 	});
 });

web/js/pages/edit_web.js

@@ -192,16 +192,13 @@ App.Actions.WEB.passwordChanged = function (elm) {
 		var inp_name = ref.find('.v-ftp-user-is-new').prop('name');
 		inp_name = inp_name.replace('is_new', 'v_ftp_email');
 		ref.find('div:last').after(
-			'<div class="u-pl30 u-mb10">\
-                                      <label for="' +
-				inp_name +
-				'" class="form-label">Send FTP credentials to email</label>\
-                                      <input type="email" class="form-control js-email-alert-on-psw" value="" name="' +
-				inp_name +
-				'" id="' +
-				inp_name +
-				'">\
-                                   </div>'
+			`<div class="u-pl30 u-mb10">
+				<label for="${inp_name}" class="form-label">
+					Send FTP credentials to email
+				</label>
+				<input type="email" class="form-control js-email-alert-on-psw"
+					value="" name="${inp_name}" id="${inp_name}">
+			</div>`
 		);
 	}
 };

web/templates/includes/panel.php

@@ -147,9 +147,9 @@
 								<!-- Hide 'Server Settings' button when impersonating 'admin' or other users -->
 							<?php } else { ?>
 								<li class="top-bar-menu-item">
-									<a title="<?= _("Server") ?>" class="top-bar-menu-link <?php if(in_array($TAB, ['SERVER', 'IP', 'RRD', 'FIREWALL'])) echo 'active' ?>" href="/list/server/">
+									<a title="<?= _("Server settings") ?>" class="top-bar-menu-link <?php if(in_array($TAB, ['SERVER', 'IP', 'RRD', 'FIREWALL'])) echo 'active' ?>" href="/list/server/">
 										<i class="fas fa-gear"></i>
-										<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Server") ?></span>
+										<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Server settings") ?></span>
 									</a>
 								</li>
 							<?php } ?>

web/templates/pages/add_cron.php

@@ -17,329 +17,6 @@
 
 <div class="container animate__animated animate__fadeIn">
 
-	<div class="cron-helper-container">
-		<div id="tabs" class="cron-helper-tabs">
-			<ul>
-				<li><a href="#tabs-1"><?= _("Minutes") ?></a></li>
-				<li><a href="#tabs-2"><?= _("Hourly") ?></a></li>
-				<li><a href="#tabs-3"><?= _("Daily") ?></a></li>
-				<li><a href="#tabs-4"><?= _("Weekly") ?></a></li>
-				<li><a href="#tabs-5"><?= _("Monthly") ?></a></li>
-			</ul>
-			<div id="tabs-1">
-				<form>
-					<input type="hidden" name="h_hour" value="*">
-					<input type="hidden" name="h_day" value="*">
-					<input type="hidden" name="h_month" value="*">
-					<input type="hidden" name="h_wday" value="*">
-					<div class="u-mt10 u-mb20">
-						<label for="h_min_1" class="form-label first"><?= _("Run Command") ?>:</label>
-						<select class="form-select" name="h_min" id="h_min_1">
-							<option value="*" selected="selected"><?= _("every minute") ?></option>
-							<option value="*/2"><?= _("every two minutes") ?></option>
-							<option value="*/5"><?= _("every") ?> 5</option>
-							<option value="*/10"><?= _("every") ?> 10</option>
-							<option value="*/15"><?= _("every") ?> 15</option>
-							<option value="*/30"><?= _("every") ?> 30</option>
-						</select>
-					</div>
-					<div class="u-pt10">
-						<button type="submit" class="button button-secondary">
-							<?= _("generate") ?>
-						</button>
-					</div>
-				</form>
-			</div>
-
-			<div id="tabs-2">
-				<form>
-					<input type="hidden" name="h_day" value="*">
-					<input type="hidden" name="h_month" value="*">
-					<input type="hidden" name="h_wday" value="*">
-					<div class="u-mt10 u-mb10">
-						<label for="h_hour_2" class="form-label first"><?= _("Run Command") ?>:</label>
-						<select class="form-select" name="h_hour" id="h_hour_2">
-							<option value="*" selected="selected"><?= _("every hour") ?></option>
-							<option value="*/2"><?= _("every two hours") ?></option>
-							<option value="*/6"><?= _("every") ?> 6</option>
-							<option value="*/12"><?= _("every") ?> 12</option>
-						</select>
-					</div>
-					<div class="u-mb20">
-						<label for="h_min_2" class="form-label first"><?= _("Minute") ?>:</label>
-						<select class="form-select" name="h_min" id="h_min_2" style="width:70px;">
-							<option value="0" selected="selected">00</option>
-							<option value="15">15</option>
-							<option value="30">30</option>
-							<option value="45">45</option>
-						</select>
-					</div>
-					<div class="u-pt10">
-						<button type="submit" class="button button-secondary">
-							<?= _("generate") ?>
-						</button>
-					</div>
-				</form>
-			</div>
-
-			<div id="tabs-3">
-				<form>
-					<input type="hidden" name="h_month" value="*">
-					<input type="hidden" name="h_wday" value="*">
-					<div class="u-mt10 u-mb10">
-						<label for="h_day_3" class="form-label first"><?= _("Run Command") ?>:</label>
-						<select class="form-select" name="h_day" id="h_day_3">
-							<option value="*" selected="selected"><?= _("every day") ?></option>
-							<option value="1-31/2"><?= _("every odd day") ?></option>
-							<option value="*/2"><?= _("every even day") ?></option>
-							<option value="*/3"><?= _("every") ?> 3</option>
-							<option value="*/5"><?= _("every") ?> 5</option>
-							<option value="*/10"><?= _("every") ?> 10</option>
-							<option value="*/15"><?= _("every") ?> 15</option>
-						</select>
-					</div>
-					<div class="u-mb20">
-						<label for="h_hour_3" class="form-label first"><?= _("Hour") ?>:</label>
-						<select class="form-select" name="h_hour" id="h_hour_3" style="width:70px;">
-							<option value="0">00</option>
-							<option value="1">01</option>
-							<option value="2">02</option>
-							<option value="3">03</option>
-							<option value="4">04</option>
-							<option value="5">05</option>
-							<option value="6">06</option>
-							<option value="7">07</option>
-							<option value="8">08</option>
-							<option value="9">09</option>
-							<option value="10">10</option>
-							<option value="11">11</option>
-							<option value="12" selected="selected">12</option>
-							<option value="13">13</option>
-							<option value="14">14</option>
-							<option value="15">15</option>
-							<option value="16">16</option>
-							<option value="17">17</option>
-							<option value="18">18</option>
-							<option value="19">19</option>
-							<option value="20">20</option>
-							<option value="21">21</option>
-							<option value="22">22</option>
-							<option value="23">23</option>
-						</select>
-						<label for="h_min_3" class="form-label"><?= _("Minute") ?>:</label>
-						<select class="form-select" name="h_min" id="h_min_3" style="width:70px;">
-							<option value="0" selected="selected">00</option>
-							<option value="1">01</option>
-							<option value="2">02</option>
-							<option value="5">05</option>
-							<option value="10">10</option>
-							<option value="15">15</option>
-							<option value="20">20</option>
-							<option value="25">25</option>
-							<option value="30">30</option>
-							<option value="35">35</option>
-							<option value="40">40</option>
-							<option value="45">45</option>
-							<option value="50">50</option>
-							<option value="55">55</option>
-						</select>
-					</div>
-					<div class="u-pt10">
-						<button type="submit" class="button button-secondary">
-							<?= _("generate") ?>
-						</button>
-					</div>
-				</form>
-			</div>
-
-			<div id="tabs-4">
-				<form>
-					<input type="hidden" name="h_month" value="*">
-					<input type="hidden" name="h_day" value="*">
-					<div class="u-mt10 u-mb10">
-						<label for="h_wday_4" class="form-label first"><?= _("Run Command") ?>:</label>
-						<select class="form-select" name="h_wday" id="h_wday_4">
-							<option value="*" selected="selected"><?= _("every day") ?></option>
-							<option value="1,2,3,4,5"><?= _("weekdays (5 days)") ?></option>
-							<option value="0,6"><?= _("weekend (2 days)") ?></option>
-							<option value="1"><?= _("Monday") ?></option>
-							<option value="2"><?= _("Tuesday") ?></option>
-							<option value="3"><?= _("Wednesday") ?></option>
-							<option value="4"><?= _("Thursday") ?></option>
-							<option value="5"><?= _("Friday") ?></option>
-							<option value="6"><?= _("Saturday") ?></option>
-							<option value="0"><?= _("Sunday") ?></option>
-						</select>
-					</div>
-					<div class="u-mb20">
-						<label for="h_hour_4" class="form-label first"><?= _("Hour") ?>:</label>
-						<select class="form-select" name="h_hour" id="h_hour_4" style="width:70px;">
-							<option value="0">00</option>
-							<option value="1">01</option>
-							<option value="2">02</option>
-							<option value="3">03</option>
-							<option value="4">04</option>
-							<option value="5">05</option>
-							<option value="6">06</option>
-							<option value="7">07</option>
-							<option value="8">08</option>
-							<option value="9">09</option>
-							<option value="10">10</option>
-							<option value="11">11</option>
-							<option value="12" selected="selected">12</option>
-							<option value="13">13</option>
-							<option value="14">14</option>
-							<option value="15">15</option>
-							<option value="16">16</option>
-							<option value="17">17</option>
-							<option value="18">18</option>
-							<option value="19">19</option>
-							<option value="20">20</option>
-							<option value="21">21</option>
-							<option value="22">22</option>
-							<option value="23">23</option>
-						</select>
-						<label for="h_min_4" class="form-label"><?= _("Minute") ?>:</label>
-						<select class="form-select" name="h_min" id="h_min_4" style="width:70px;">
-							<option value="0" selected="selected">00</option>
-							<option value="1">01</option>
-							<option value="2">02</option>
-							<option value="5">05</option>
-							<option value="10">10</option>
-							<option value="15">15</option>
-							<option value="20">20</option>
-							<option value="25">25</option>
-							<option value="30">30</option>
-							<option value="35">35</option>
-							<option value="40">40</option>
-							<option value="45">45</option>
-							<option value="50">50</option>
-							<option value="55">55</option>
-						</select>
-					</div>
-					<div class="u-pt10">
-						<button type="submit" class="button button-secondary">
-							<?= _("generate") ?>
-						</button>
-					</div>
-				</form>
-			</div>
-
-			<div id="tabs-5">
-				<form>
-					<input type="hidden" name="h_wday" value="*">
-					<div class="u-mt10 u-mb10">
-						<label for="h_month_5" class="form-label first"><?= _("Run Command") ?>:</label>
-						<select class="form-select" name="h_month" id="h_month_5">
-							<option value="*" selected="selected"><?= _("every month") ?></option>
-							<option value="1-11/2"><?= _("every odd month") ?></option>
-							<option value="*/2"><?= _("every even month") ?></option>
-							<option value="*/3"><?= _("every") ?> 3</option>
-							<option value="*/6"><?= _("every") ?> 6</option>
-							<option value="1"><?= _("Jan") ?></option>
-							<option value="2"><?= _("Feb") ?></option>
-							<option value="3"><?= _("Mar") ?></option>
-							<option value="4"><?= _("Apr") ?></option>
-							<option value="5"><?= _("May") ?></option>
-							<option value="6"><?= _("Jun") ?></option>
-							<option value="7"><?= _("Jul") ?></option>
-							<option value="8"><?= _("Aug") ?></option>
-							<option value="9"><?= _("Sep") ?></option>
-							<option value="10"><?= _("Oct") ?></option>
-							<option value="11"><?= _("Nov") ?></option>
-							<option value="12"><?= _("Dec") ?></option>
-						</select>
-					</div>
-					<div class="u-mb20">
-						<label for="h_day_5" class="form-label first"><?= _("Date") ?>:</label>
-						<select class="form-select" name="h_day" id="h_day_5" style="width:70px;">
-							<option value="1" selected="selected">1</option>
-							<option value="2">2</option>
-							<option value="3">3</option>
-							<option value="4">4</option>
-							<option value="5">5</option>
-							<option value="6">6</option>
-							<option value="7">7</option>
-							<option value="8">8</option>
-							<option value="9">9</option>
-							<option value="10">10</option>
-							<option value="11">11</option>
-							<option value="12">12</option>
-							<option value="13">13</option>
-							<option value="14">14</option>
-							<option value="15">15</option>
-							<option value="16">16</option>
-							<option value="17">17</option>
-							<option value="18">18</option>
-							<option value="19">19</option>
-							<option value="20">20</option>
-							<option value="21">21</option>
-							<option value="22">22</option>
-							<option value="23">23</option>
-							<option value="24">24</option>
-							<option value="25">25</option>
-							<option value="26">26</option>
-							<option value="27">27</option>
-							<option value="28">28</option>
-							<option value="29">29</option>
-							<option value="30">30</option>
-							<option value="31">31</option>
-						</select>
-						<label for="h_hour_5" class="form-label"><?= _("Hour") ?>:</label>
-						<select class="form-select" name="h_hour" id="h_hour_5" style="width:70px;">
-							<option value="0">00</option>
-							<option value="1">01</option>
-							<option value="2">02</option>
-							<option value="3">03</option>
-							<option value="4">04</option>
-							<option value="5">05</option>
-							<option value="6">06</option>
-							<option value="7">07</option>
-							<option value="8">08</option>
-							<option value="9">09</option>
-							<option value="10">10</option>
-							<option value="11">11</option>
-							<option value="12" selected="selected">12</option>
-							<option value="13">13</option>
-							<option value="14">14</option>
-							<option value="15">15</option>
-							<option value="16">16</option>
-							<option value="17">17</option>
-							<option value="18">18</option>
-							<option value="19">19</option>
-							<option value="20">20</option>
-							<option value="21">21</option>
-							<option value="22">22</option>
-							<option value="23">23</option>
-						</select>
-						<label for="h_min_5" class="form-label"><?= _("Minute") ?>:</label>
-						<select class="form-select" name="h_min" id="h_min_5" style="width:70px;">
-							<option value="0" selected="selected">00</option>
-							<option value="1">01</option>
-							<option value="2">02</option>
-							<option value="5">05</option>
-							<option value="10">10</option>
-							<option value="15">15</option>
-							<option value="20">20</option>
-							<option value="25">25</option>
-							<option value="30">30</option>
-							<option value="35">35</option>
-							<option value="40">40</option>
-							<option value="45">45</option>
-							<option value="50">50</option>
-							<option value="55">55</option>
-						</select>
-					</div>
-					<div class="u-pt10">
-						<button type="submit" class="button button-secondary">
-							<?= _("generate") ?>
-						</button>
-					</div>
-				</form>
-			</div>
-		</div>
-	</div>
-
 	<form id="vstobjects" name="v_add_cron" method="post">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<input type="hidden" name="ok" value="Add">
@@ -351,25 +28,351 @@
 				<label for="v_cmd" class="form-label"><?= _("Command") ?></label>
 				<input type="text" class="form-control" name="v_cmd" id="v_cmd" value="<?= htmlentities(trim($v_cmd, "'")) ?>">
 			</div>
-			<div class="u-mb10">
-				<label for="v_min" class="form-label"><?= _("Minute") ?></label>
-				<input type="text" class="form-control" name="v_min" id="v_min" style="width:220px;" value="<?= htmlentities(trim($v_min, "'")) ?>">
-			</div>
-			<div class="u-mb10">
-				<label for="v_hour" class="form-label"><?= _("Hour") ?></label>
-				<input type="text" class="form-control" name="v_hour" id="v_hour" style="width:220px;" value="<?= htmlentities(trim($v_hour, "'")) ?>">
-			</div>
-			<div class="u-mb10">
-				<label for="v_day" class="form-label"><?= _("Day") ?></label>
-				<input type="text" class="form-control" name="v_day" id="v_day" style="width:220px;" value="<?= htmlentities(trim($v_day, "'")) ?>">
-			</div>
-			<div class="u-mb10">
-				<label for="v_month" class="form-label"><?= _("Month") ?></label>
-				<input type="text" class="form-control" name="v_month" id="v_month" style="width:220px;" value="<?= htmlentities(trim($v_month, "'")) ?>">
-			</div>
-			<div class="u-mb10">
-				<label for="v_wday" class="form-label"><?= _("Day of week") ?></label>
-				<input type="text" class="form-control" name="v_wday" id="v_wday" style="width:220px;" value="<?= htmlentities(trim($v_wday, "'")) ?>">
+			<div class="sidebar-left-container">
+				<div>
+					<div class="u-mb10">
+						<label for="v_min" class="form-label"><?= _("Minute") ?></label>
+						<input type="text" class="form-control" name="v_min" id="v_min" value="<?= htmlentities(trim($v_min, "'")) ?>">
+					</div>
+					<div class="u-mb10">
+						<label for="v_hour" class="form-label"><?= _("Hour") ?></label>
+						<input type="text" class="form-control" name="v_hour" id="v_hour" value="<?= htmlentities(trim($v_hour, "'")) ?>">
+					</div>
+					<div class="u-mb10">
+						<label for="v_day" class="form-label"><?= _("Day") ?></label>
+						<input type="text" class="form-control" name="v_day" id="v_day" value="<?= htmlentities(trim($v_day, "'")) ?>">
+					</div>
+					<div class="u-mb10">
+						<label for="v_month" class="form-label"><?= _("Month") ?></label>
+						<input type="text" class="form-control" name="v_month" id="v_month" value="<?= htmlentities(trim($v_month, "'")) ?>">
+					</div>
+					<div class="u-mb10">
+						<label for="v_wday" class="form-label"><?= _("Day of week") ?></label>
+						<input type="text" class="form-control" name="v_wday" id="v_wday" value="<?= htmlentities(trim($v_wday, "'")) ?>">
+					</div>
+				</div>
+				<div>
+					<div class="cron-helper-panel js-cron-tabs">
+						<ul>
+							<li><a href="#tabs-1"><?= _("Minutes") ?></a></li>
+							<li><a href="#tabs-2"><?= _("Hourly") ?></a></li>
+							<li><a href="#tabs-3"><?= _("Daily") ?></a></li>
+							<li><a href="#tabs-4"><?= _("Weekly") ?></a></li>
+							<li><a href="#tabs-5"><?= _("Monthly") ?></a></li>
+						</ul>
+						<div id="tabs-1">
+							<fieldset>
+								<input type="hidden" name="h_hour" value="*" form="">
+								<input type="hidden" name="h_day" value="*" form="">
+								<input type="hidden" name="h_month" value="*" form="">
+								<input type="hidden" name="h_wday" value="*" form="">
+								<div class="u-mt10 u-mb20">
+									<label for="h_min_1" class="form-label first"><?= _("Run Command") ?>:</label>
+									<select class="form-select" name="h_min" id="h_min_1" form="">
+										<option value="*" selected="selected"><?= _("every minute") ?></option>
+										<option value="*/2"><?= _("every two minutes") ?></option>
+										<option value="*/5"><?= _("every") ?> 5</option>
+										<option value="*/10"><?= _("every") ?> 10</option>
+										<option value="*/15"><?= _("every") ?> 15</option>
+										<option value="*/30"><?= _("every") ?> 30</option>
+									</select>
+								</div>
+								<div class="u-pt10">
+									<button type="button" class="button button-secondary js-generate-cron">
+										<?= _("generate") ?>
+									</button>
+								</div>
+							</fieldset>
+						</div>
+
+						<div id="tabs-2">
+							<fieldset>
+								<input type="hidden" name="h_day" value="*" form="">
+								<input type="hidden" name="h_month" value="*" form="">
+								<input type="hidden" name="h_wday" value="*" form="">
+								<div class="u-mt10 u-mb10">
+									<label for="h_hour_2" class="form-label first"><?= _("Run Command") ?>:</label>
+									<select class="form-select" name="h_hour" id="h_hour_2" form="">
+										<option value="*" selected="selected"><?= _("every hour") ?></option>
+										<option value="*/2"><?= _("every two hours") ?></option>
+										<option value="*/6"><?= _("every") ?> 6</option>
+										<option value="*/12"><?= _("every") ?> 12</option>
+									</select>
+								</div>
+								<div class="u-mb20">
+									<label for="h_min_2" class="form-label first"><?= _("Minute") ?>:</label>
+									<select class="form-select" name="h_min" id="h_min_2" style="width:70px;" form="">
+										<option value="0" selected="selected">00</option>
+										<option value="15">15</option>
+										<option value="30">30</option>
+										<option value="45">45</option>
+									</select>
+								</div>
+								<div class="u-pt10">
+									<button type="button" class="button button-secondary js-generate-cron">
+										<?= _("generate") ?>
+									</button>
+								</div>
+							</fieldset>
+						</div>
+
+						<div id="tabs-3">
+							<fieldset>
+								<input type="hidden" name="h_month" value="*" form="">
+								<input type="hidden" name="h_wday" value="*" form="">
+								<div class="u-mt10 u-mb10">
+									<label for="h_day_3" class="form-label first"><?= _("Run Command") ?>:</label>
+									<select class="form-select" name="h_day" id="h_day_3" form="">
+										<option value="*" selected="selected"><?= _("every day") ?></option>
+										<option value="1-31/2"><?= _("every odd day") ?></option>
+										<option value="*/2"><?= _("every even day") ?></option>
+										<option value="*/3"><?= _("every") ?> 3</option>
+										<option value="*/5"><?= _("every") ?> 5</option>
+										<option value="*/10"><?= _("every") ?> 10</option>
+										<option value="*/15"><?= _("every") ?> 15</option>
+									</select>
+								</div>
+								<div class="u-mb20">
+									<label for="h_hour_3" class="form-label first"><?= _("Hour") ?>:</label>
+									<select class="form-select" name="h_hour" id="h_hour_3" style="width:70px;" form="">
+										<option value="0">00</option>
+										<option value="1">01</option>
+										<option value="2">02</option>
+										<option value="3">03</option>
+										<option value="4">04</option>
+										<option value="5">05</option>
+										<option value="6">06</option>
+										<option value="7">07</option>
+										<option value="8">08</option>
+										<option value="9">09</option>
+										<option value="10">10</option>
+										<option value="11">11</option>
+										<option value="12" selected="selected">12</option>
+										<option value="13">13</option>
+										<option value="14">14</option>
+										<option value="15">15</option>
+										<option value="16">16</option>
+										<option value="17">17</option>
+										<option value="18">18</option>
+										<option value="19">19</option>
+										<option value="20">20</option>
+										<option value="21">21</option>
+										<option value="22">22</option>
+										<option value="23">23</option>
+									</select>
+									<label for="h_min_3" class="form-label"><?= _("Minute") ?>:</label>
+									<select class="form-select" name="h_min" id="h_min_3" style="width:70px;" form="">
+										<option value="0" selected="selected">00</option>
+										<option value="1">01</option>
+										<option value="2">02</option>
+										<option value="5">05</option>
+										<option value="10">10</option>
+										<option value="15">15</option>
+										<option value="20">20</option>
+										<option value="25">25</option>
+										<option value="30">30</option>
+										<option value="35">35</option>
+										<option value="40">40</option>
+										<option value="45">45</option>
+										<option value="50">50</option>
+										<option value="55">55</option>
+									</select>
+								</div>
+								<div class="u-pt10">
+									<button type="button" class="button button-secondary js-generate-cron">
+										<?= _("generate") ?>
+									</button>
+								</div>
+							</fieldset>
+						</div>
+
+						<div id="tabs-4">
+							<fieldset>
+								<input type="hidden" name="h_month" value="*" form="">
+								<input type="hidden" name="h_day" value="*" form="">
+								<div class="u-mt10 u-mb10">
+									<label for="h_wday_4" class="form-label first"><?= _("Run Command") ?>:</label>
+									<select class="form-select" name="h_wday" id="h_wday_4" form="">
+										<option value="*" selected="selected"><?= _("every day") ?></option>
+										<option value="1,2,3,4,5"><?= _("weekdays (5 days)") ?></option>
+										<option value="0,6"><?= _("weekend (2 days)") ?></option>
+										<option value="1"><?= _("Monday") ?></option>
+										<option value="2"><?= _("Tuesday") ?></option>
+										<option value="3"><?= _("Wednesday") ?></option>
+										<option value="4"><?= _("Thursday") ?></option>
+										<option value="5"><?= _("Friday") ?></option>
+										<option value="6"><?= _("Saturday") ?></option>
+										<option value="0"><?= _("Sunday") ?></option>
+									</select>
+								</div>
+								<div class="u-mb20">
+									<label for="h_hour_4" class="form-label first"><?= _("Hour") ?>:</label>
+									<select class="form-select" name="h_hour" id="h_hour_4" style="width:70px;" form="">
+										<option value="0">00</option>
+										<option value="1">01</option>
+										<option value="2">02</option>
+										<option value="3">03</option>
+										<option value="4">04</option>
+										<option value="5">05</option>
+										<option value="6">06</option>
+										<option value="7">07</option>
+										<option value="8">08</option>
+										<option value="9">09</option>
+										<option value="10">10</option>
+										<option value="11">11</option>
+										<option value="12" selected="selected">12</option>
+										<option value="13">13</option>
+										<option value="14">14</option>
+										<option value="15">15</option>
+										<option value="16">16</option>
+										<option value="17">17</option>
+										<option value="18">18</option>
+										<option value="19">19</option>
+										<option value="20">20</option>
+										<option value="21">21</option>
+										<option value="22">22</option>
+										<option value="23">23</option>
+									</select>
+									<label for="h_min_4" class="form-label"><?= _("Minute") ?>:</label>
+									<select class="form-select" name="h_min" id="h_min_4" style="width:70px;" form="">
+										<option value="0" selected="selected">00</option>
+										<option value="1">01</option>
+										<option value="2">02</option>
+										<option value="5">05</option>
+										<option value="10">10</option>
+										<option value="15">15</option>
+										<option value="20">20</option>
+										<option value="25">25</option>
+										<option value="30">30</option>
+										<option value="35">35</option>
+										<option value="40">40</option>
+										<option value="45">45</option>
+										<option value="50">50</option>
+										<option value="55">55</option>
+									</select>
+								</div>
+								<div class="u-pt10">
+									<button type="button" class="button button-secondary js-generate-cron">
+										<?= _("generate") ?>
+									</button>
+								</div>
+							</fieldset>
+						</div>
+
+						<div id="tabs-5">
+							<fieldset>
+								<input type="hidden" name="h_wday" value="*" form="">
+								<div class="u-mt10 u-mb10">
+									<label for="h_month_5" class="form-label first"><?= _("Run Command") ?>:</label>
+									<select class="form-select" name="h_month" id="h_month_5" form="">
+										<option value="*" selected="selected"><?= _("every month") ?></option>
+										<option value="1-11/2"><?= _("every odd month") ?></option>
+										<option value="*/2"><?= _("every even month") ?></option>
+										<option value="*/3"><?= _("every") ?> 3</option>
+										<option value="*/6"><?= _("every") ?> 6</option>
+										<option value="1"><?= _("Jan") ?></option>
+										<option value="2"><?= _("Feb") ?></option>
+										<option value="3"><?= _("Mar") ?></option>
+										<option value="4"><?= _("Apr") ?></option>
+										<option value="5"><?= _("May") ?></option>
+										<option value="6"><?= _("Jun") ?></option>
+										<option value="7"><?= _("Jul") ?></option>
+										<option value="8"><?= _("Aug") ?></option>
+										<option value="9"><?= _("Sep") ?></option>
+										<option value="10"><?= _("Oct") ?></option>
+										<option value="11"><?= _("Nov") ?></option>
+										<option value="12"><?= _("Dec") ?></option>
+									</select>
+								</div>
+								<div class="u-mb20">
+									<label for="h_day_5" class="form-label first"><?= _("Date") ?>:</label>
+									<select class="form-select" name="h_day" id="h_day_5" style="width:70px;" form="">
+										<option value="1" selected="selected">1</option>
+										<option value="2">2</option>
+										<option value="3">3</option>
+										<option value="4">4</option>
+										<option value="5">5</option>
+										<option value="6">6</option>
+										<option value="7">7</option>
+										<option value="8">8</option>
+										<option value="9">9</option>
+										<option value="10">10</option>
+										<option value="11">11</option>
+										<option value="12">12</option>
+										<option value="13">13</option>
+										<option value="14">14</option>
+										<option value="15">15</option>
+										<option value="16">16</option>
+										<option value="17">17</option>
+										<option value="18">18</option>
+										<option value="19">19</option>
+										<option value="20">20</option>
+										<option value="21">21</option>
+										<option value="22">22</option>
+										<option value="23">23</option>
+										<option value="24">24</option>
+										<option value="25">25</option>
+										<option value="26">26</option>
+										<option value="27">27</option>
+										<option value="28">28</option>
+										<option value="29">29</option>
+										<option value="30">30</option>
+										<option value="31">31</option>
+									</select>
+									<label for="h_hour_5" class="form-label"><?= _("Hour") ?>:</label>
+									<select class="form-select" name="h_hour" id="h_hour_5" style="width:70px;" form="">
+										<option value="0">00</option>
+										<option value="1">01</option>
+										<option value="2">02</option>
+										<option value="3">03</option>
+										<option value="4">04</option>
+										<option value="5">05</option>
+										<option value="6">06</option>
+										<option value="7">07</option>
+										<option value="8">08</option>
+										<option value="9">09</option>
+										<option value="10">10</option>
+										<option value="11">11</option>
+										<option value="12" selected="selected">12</option>
+										<option value="13">13</option>
+										<option value="14">14</option>
+										<option value="15">15</option>
+										<option value="16">16</option>
+										<option value="17">17</option>
+										<option value="18">18</option>
+										<option value="19">19</option>
+										<option value="20">20</option>
+										<option value="21">21</option>
+										<option value="22">22</option>
+										<option value="23">23</option>
+									</select>
+									<label for="h_min_5" class="form-label"><?= _("Minute") ?>:</label>
+									<select class="form-select" name="h_min" id="h_min_5" style="width:70px;" form="">
+										<option value="0" selected="selected">00</option>
+										<option value="1">01</option>
+										<option value="2">02</option>
+										<option value="5">05</option>
+										<option value="10">10</option>
+										<option value="15">15</option>
+										<option value="20">20</option>
+										<option value="25">25</option>
+										<option value="30">30</option>
+										<option value="35">35</option>
+										<option value="40">40</option>
+										<option value="45">45</option>
+										<option value="50">50</option>
+										<option value="55">55</option>
+									</select>
+								</div>
+								<div class="u-pt10">
+									<button type="button" class="button button-secondary js-generate-cron">
+										<?= _("generate") ?>
+									</button>
+								</div>
+							</fieldset>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 

web/templates/pages/add_mail_acc.php

@@ -31,7 +31,7 @@
 		<div class="form-container form-container-wide">
 			<h1 class="form-title"><?= _("Adding Mail Account") ?></h1>
 			<?php show_alert_message($_SESSION); ?>
-			<div class="sidebar-container">
+			<div class="sidebar-right-container">
 				<div>
 					<div class="u-mb10">
 						<label for="v_domain" class="form-label"><?= _("Domain") ?></label>

web/templates/pages/edit_cron.php

@@ -17,329 +17,6 @@
 
 <div class="container animate__animated animate__fadeIn">
 
-	<div class="cron-helper-container">
-		<div id="tabs" class="cron-helper-tabs">
-			<ul>
-				<li><a href="#tabs-1"><?= _("Minutes") ?></a></li>
-				<li><a href="#tabs-2"><?= _("Hourly") ?></a></li>
-				<li><a href="#tabs-3"><?= _("Daily") ?></a></li>
-				<li><a href="#tabs-4"><?= _("Weekly") ?></a></li>
-				<li><a href="#tabs-5"><?= _("Monthly") ?></a></li>
-			</ul>
-			<div id="tabs-1">
-				<form>
-					<input type="hidden" name="h_hour" value="*">
-					<input type="hidden" name="h_day" value="*">
-					<input type="hidden" name="h_month" value="*">
-					<input type="hidden" name="h_wday" value="*">
-					<div class="u-mt10 u-mb20">
-						<label for="h_min_1" class="form-label first"><?= _("Run Command") ?>:</label>
-						<select class="form-select" name="h_min" id="h_min_1">
-							<option value="*" selected="selected"><?= _("every minute") ?></option>
-							<option value="*/2"><?= _("every two minutes") ?></option>
-							<option value="*/5"><?= _("every") ?> 5</option>
-							<option value="*/10"><?= _("every") ?> 10</option>
-							<option value="*/15"><?= _("every") ?> 15</option>
-							<option value="*/30"><?= _("every") ?> 30</option>
-						</select>
-					</div>
-					<div class="u-pt10">
-						<button type="submit" class="button button-secondary">
-							<?= _("generate") ?>
-						</button>
-					</div>
-				</form>
-			</div>
-
-			<div id="tabs-2">
-				<form>
-					<input type="hidden" name="h_day" value="*">
-					<input type="hidden" name="h_month" value="*">
-					<input type="hidden" name="h_wday" value="*">
-					<div class="u-mt10 u-mb10">
-						<label for="h_hour_2" class="form-label first"><?= _("Run Command") ?>:</label>
-						<select class="form-select" name="h_hour" id="h_hour_2">
-							<option value="*" selected="selected"><?= _("every hour") ?></option>
-							<option value="*/2"><?= _("every two hours") ?></option>
-							<option value="*/6"><?= _("every") ?> 6</option>
-							<option value="*/12"><?= _("every") ?> 12</option>
-						</select>
-					</div>
-					<div class="u-mb20">
-						<label for="h_min_2" class="form-label first"><?= _("Minute") ?>:</label>
-						<select class="form-select" name="h_min" id="h_min_2" style="width:70px;">
-							<option value="0" selected="selected">00</option>
-							<option value="15">15</option>
-							<option value="30">30</option>
-							<option value="45">45</option>
-						</select>
-					</div>
-					<div class="u-pt10">
-						<button type="submit" class="button button-secondary">
-							<?= _("generate") ?>
-						</button>
-					</div>
-				</form>
-			</div>
-
-			<div id="tabs-3">
-				<form>
-					<input type="hidden" name="h_month" value="*">
-					<input type="hidden" name="h_wday" value="*">
-					<div class="u-mt10 u-mb10">
-						<label for="h_day_3" class="form-label first"><?= _("Run Command") ?>:</label>
-						<select class="form-select" name="h_day" id="h_day_3">
-							<option value="*" selected="selected"><?= _("every day") ?></option>
-							<option value="1-31/2"><?= _("every odd day") ?></option>
-							<option value="*/2"><?= _("every even day") ?></option>
-							<option value="*/3"><?= _("every") ?> 3</option>
-							<option value="*/5"><?= _("every") ?> 5</option>
-							<option value="*/10"><?= _("every") ?> 10</option>
-							<option value="*/15"><?= _("every") ?> 15</option>
-						</select>
-					</div>
-					<div class="u-mb20">
-						<label for="h_hour_3" class="form-label first"><?= _("Hour") ?>:</label>
-						<select class="form-select" name="h_hour" id="h_hour_3" style="width:70px;">
-							<option value="0">00</option>
-							<option value="1">01</option>
-							<option value="2">02</option>
-							<option value="3">03</option>
-							<option value="4">04</option>
-							<option value="5">05</option>
-							<option value="6">06</option>
-							<option value="7">07</option>
-							<option value="8">08</option>
-							<option value="9">09</option>
-							<option value="10">10</option>
-							<option value="11">11</option>
-							<option value="12" selected="selected">12</option>
-							<option value="13">13</option>
-							<option value="14">14</option>
-							<option value="15">15</option>
-							<option value="16">16</option>
-							<option value="17">17</option>
-							<option value="18">18</option>
-							<option value="19">19</option>
-							<option value="20">20</option>
-							<option value="21">21</option>
-							<option value="22">22</option>
-							<option value="23">23</option>
-						</select>
-						<label for="h_min_3" class="form-label"><?= _("Minute") ?>:</label>
-						<select class="form-select" name="h_min" id="h_min_3" style="width:70px;">
-							<option value="0" selected="selected">00</option>
-							<option value="1">01</option>
-							<option value="2">02</option>
-							<option value="5">05</option>
-							<option value="10">10</option>
-							<option value="15">15</option>
-							<option value="20">20</option>
-							<option value="25">25</option>
-							<option value="30">30</option>
-							<option value="35">35</option>
-							<option value="40">40</option>
-							<option value="45">45</option>
-							<option value="50">50</option>
-							<option value="55">55</option>
-						</select>
-					</div>
-					<div class="u-pt10">
-						<button type="submit" class="button button-secondary">
-							<?= _("generate") ?>
-						</button>
-					</div>
-				</form>
-			</div>
-
-			<div id="tabs-4">
-				<form>
-					<input type="hidden" name="h_month" value="*">
-					<input type="hidden" name="h_day" value="*">
-					<div class="u-mt10 u-mb10">
-						<label for="h_wday_4" class="form-label first"><?= _("Run Command") ?>:</label>
-						<select class="form-select" name="h_wday" id="h_wday_4">
-							<option value="*" selected="selected"><?= _("every day") ?></option>
-							<option value="1,2,3,4,5"><?= _("weekdays (5 days)") ?></option>
-							<option value="0,6"><?= _("weekend (2 days)") ?></option>
-							<option value="1"><?= _("Monday") ?></option>
-							<option value="2"><?= _("Tuesday") ?></option>
-							<option value="3"><?= _("Wednesday") ?></option>
-							<option value="4"><?= _("Thursday") ?></option>
-							<option value="5"><?= _("Friday") ?></option>
-							<option value="6"><?= _("Saturday") ?></option>
-							<option value="0"><?= _("Sunday") ?></option>
-						</select>
-					</div>
-					<div class="u-mb20">
-						<label for="h_hour_4" class="form-label first"><?= _("Hour") ?>:</label>
-						<select class="form-select" name="h_hour" id="h_hour_4" style="width:70px;">
-							<option value="0">00</option>
-							<option value="1">01</option>
-							<option value="2">02</option>
-							<option value="3">03</option>
-							<option value="4">04</option>
-							<option value="5">05</option>
-							<option value="6">06</option>
-							<option value="7">07</option>
-							<option value="8">08</option>
-							<option value="9">09</option>
-							<option value="10">10</option>
-							<option value="11">11</option>
-							<option value="12" selected="selected">12</option>
-							<option value="13">13</option>
-							<option value="14">14</option>
-							<option value="15">15</option>
-							<option value="16">16</option>
-							<option value="17">17</option>
-							<option value="18">18</option>
-							<option value="19">19</option>
-							<option value="20">20</option>
-							<option value="21">21</option>
-							<option value="22">22</option>
-							<option value="23">23</option>
-						</select>
-						<label for="h_min_4" class="form-label"><?= _("Minute") ?>:</label>
-						<select class="form-select" name="h_min" id="h_min_4" style="width:70px;">
-							<option value="0" selected="selected">00</option>
-							<option value="1">01</option>
-							<option value="2">02</option>
-							<option value="5">05</option>
-							<option value="10">10</option>
-							<option value="15">15</option>
-							<option value="20">20</option>
-							<option value="25">25</option>
-							<option value="30">30</option>
-							<option value="35">35</option>
-							<option value="40">40</option>
-							<option value="45">45</option>
-							<option value="50">50</option>
-							<option value="55">55</option>
-						</select>
-					</div>
-					<div class="u-pt10">
-						<button type="submit" class="button button-secondary">
-							<?= _("generate") ?>
-						</button>
-					</div>
-				</form>
-			</div>
-
-			<div id="tabs-5">
-				<form>
-					<input type="hidden" name="h_wday" value="*">
-					<div class="u-mt10 u-mb10">
-						<label for="h_month_5" class="form-label first"><?= _("Run Command") ?>:</label>
-						<select class="form-select" name="h_month" id="h_month_5">
-							<option value="*" selected="selected"><?= _("every month") ?></option>
-							<option value="1-11/2"><?= _("every odd month") ?></option>
-							<option value="*/2"><?= _("every even month") ?></option>
-							<option value="*/3"><?= _("every") ?> 3</option>
-							<option value="*/6"><?= _("every") ?> 6</option>
-							<option value="1"><?= _("Jan") ?></option>
-							<option value="2"><?= _("Feb") ?></option>
-							<option value="3"><?= _("Mar") ?></option>
-							<option value="4"><?= _("Apr") ?></option>
-							<option value="5"><?= _("May") ?></option>
-							<option value="6"><?= _("Jun") ?></option>
-							<option value="7"><?= _("Jul") ?></option>
-							<option value="8"><?= _("Aug") ?></option>
-							<option value="9"><?= _("Sep") ?></option>
-							<option value="10"><?= _("Oct") ?></option>
-							<option value="11"><?= _("Nov") ?></option>
-							<option value="12"><?= _("Dec") ?></option>
-						</select>
-					</div>
-					<div class="u-mb20">
-						<label for="h_day_5" class="form-label first"><?= _("Date") ?>:</label>
-						<select class="form-select" name="h_day" id="h_day_5" style="width:70px;">
-							<option value="1" selected="selected">1</option>
-							<option value="2">2</option>
-							<option value="3">3</option>
-							<option value="4">4</option>
-							<option value="5">5</option>
-							<option value="6">6</option>
-							<option value="7">7</option>
-							<option value="8">8</option>
-							<option value="9">9</option>
-							<option value="10">10</option>
-							<option value="11">11</option>
-							<option value="12">12</option>
-							<option value="13">13</option>
-							<option value="14">14</option>
-							<option value="15">15</option>
-							<option value="16">16</option>
-							<option value="17">17</option>
-							<option value="18">18</option>
-							<option value="19">19</option>
-							<option value="20">20</option>
-							<option value="21">21</option>
-							<option value="22">22</option>
-							<option value="23">23</option>
-							<option value="24">24</option>
-							<option value="25">25</option>
-							<option value="26">26</option>
-							<option value="27">27</option>
-							<option value="28">28</option>
-							<option value="29">29</option>
-							<option value="30">30</option>
-							<option value="31">31</option>
-						</select>
-						<label for="h_hour_5" class="form-label"><?= _("Hour") ?>:</label>
-						<select class="form-select" name="h_hour" id="h_hour_5" style="width:70px;">
-							<option value="0">00</option>
-							<option value="1">01</option>
-							<option value="2">02</option>
-							<option value="3">03</option>
-							<option value="4">04</option>
-							<option value="5">05</option>
-							<option value="6">06</option>
-							<option value="7">07</option>
-							<option value="8">08</option>
-							<option value="9">09</option>
-							<option value="10">10</option>
-							<option value="11">11</option>
-							<option value="12" selected="selected">12</option>
-							<option value="13">13</option>
-							<option value="14">14</option>
-							<option value="15">15</option>
-							<option value="16">16</option>
-							<option value="17">17</option>
-							<option value="18">18</option>
-							<option value="19">19</option>
-							<option value="20">20</option>
-							<option value="21">21</option>
-							<option value="22">22</option>
-							<option value="23">23</option>
-						</select>
-						<label for="h_min_5" class="form-label"><?= _("Minute") ?>:</label>
-						<select class="form-select" name="h_min" id="h_min_5" style="width:70px;">
-							<option value="0" selected="selected">00</option>
-							<option value="1">01</option>
-							<option value="2">02</option>
-							<option value="5">05</option>
-							<option value="10">10</option>
-							<option value="15">15</option>
-							<option value="20">20</option>
-							<option value="25">25</option>
-							<option value="30">30</option>
-							<option value="35">35</option>
-							<option value="40">40</option>
-							<option value="45">45</option>
-							<option value="50">50</option>
-							<option value="55">55</option>
-						</select>
-					</div>
-					<div class="u-pt10">
-						<button type="submit" class="button button-secondary">
-							<?= _("generate") ?>
-						</button>
-					</div>
-				</form>
-			</div>
-		</div>
-	</div>
-
 	<form id="vstobjects" name="v_edit_cron" method="post" class="<?= $v_status ?>">
 		<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>">
 		<input type="hidden" name="save" value="save">
@@ -351,25 +28,351 @@
 				<label for="v_cmd" class="form-label"><?= _("Command") ?></label>
 				<input type="text" class="form-control" name="v_cmd" id="v_cmd" value="<?= htmlentities(trim($v_cmd, "'")) ?>">
 			</div>
-			<div class="u-mb10">
-				<label for="v_min" class="form-label"><?= _("Minute") ?></label>
-				<input type="text" class="form-control" name="v_min" id="v_min" style="width:220px;" value="<?= htmlentities(trim($v_min, "'")) ?>">
-			</div>
-			<div class="u-mb10">
-				<label for="v_hour" class="form-label"><?= _("Hour") ?></label>
-				<input type="text" class="form-control" name="v_hour" id="v_hour" style="width:220px;" value="<?= htmlentities(trim($v_hour, "'")) ?>">
-			</div>
-			<div class="u-mb10">
-				<label for="v_day" class="form-label"><?= _("Day") ?></label>
-				<input type="text" class="form-control" name="v_day" id="v_day" style="width:220px;" value="<?= htmlentities(trim($v_day, "'")) ?>">
-			</div>
-			<div class="u-mb10">
-				<label for="v_month" class="form-label"><?= _("Month") ?></label>
-				<input type="text" class="form-control" name="v_month" id="v_month" style="width:220px;" value="<?= htmlentities(trim($v_month, "'")) ?>">
-			</div>
-			<div class="u-mb10">
-				<label for="v_wday" class="form-label"><?= _("Day of week") ?></label>
-				<input type="text" class="form-control" name="v_wday" id="v_wday" style="width:220px;" value="<?= htmlentities(trim($v_wday, "'")) ?>">
+			<div class="sidebar-left-container">
+				<div>
+					<div class="u-mb10">
+						<label for="v_min" class="form-label"><?= _("Minute") ?></label>
+						<input type="text" class="form-control" name="v_min" id="v_min" value="<?= htmlentities(trim($v_min, "'")) ?>">
+					</div>
+					<div class="u-mb10">
+						<label for="v_hour" class="form-label"><?= _("Hour") ?></label>
+						<input type="text" class="form-control" name="v_hour" id="v_hour" value="<?= htmlentities(trim($v_hour, "'")) ?>">
+					</div>
+					<div class="u-mb10">
+						<label for="v_day" class="form-label"><?= _("Day") ?></label>
+						<input type="text" class="form-control" name="v_day" id="v_day" value="<?= htmlentities(trim($v_day, "'")) ?>">
+					</div>
+					<div class="u-mb10">
+						<label for="v_month" class="form-label"><?= _("Month") ?></label>
+						<input type="text" class="form-control" name="v_month" id="v_month" value="<?= htmlentities(trim($v_month, "'")) ?>">
+					</div>
+					<div class="u-mb10">
+						<label for="v_wday" class="form-label"><?= _("Day of week") ?></label>
+						<input type="text" class="form-control" name="v_wday" id="v_wday" value="<?= htmlentities(trim($v_wday, "'")) ?>">
+					</div>
+				</div>
+				<div>
+					<div class="cron-helper-panel js-cron-tabs">
+						<ul>
+							<li><a href="#tabs-1"><?= _("Minutes") ?></a></li>
+							<li><a href="#tabs-2"><?= _("Hourly") ?></a></li>
+							<li><a href="#tabs-3"><?= _("Daily") ?></a></li>
+							<li><a href="#tabs-4"><?= _("Weekly") ?></a></li>
+							<li><a href="#tabs-5"><?= _("Monthly") ?></a></li>
+						</ul>
+						<div id="tabs-1">
+							<fieldset>
+								<input type="hidden" name="h_hour" value="*" form="">
+								<input type="hidden" name="h_day" value="*" form="">
+								<input type="hidden" name="h_month" value="*" form="">
+								<input type="hidden" name="h_wday" value="*" form="">
+								<div class="u-mt10 u-mb20">
+									<label for="h_min_1" class="form-label first"><?= _("Run Command") ?>:</label>
+									<select class="form-select" name="h_min" id="h_min_1" form="">
+										<option value="*" selected="selected"><?= _("every minute") ?></option>
+										<option value="*/2"><?= _("every two minutes") ?></option>
+										<option value="*/5"><?= _("every") ?> 5</option>
+										<option value="*/10"><?= _("every") ?> 10</option>
+										<option value="*/15"><?= _("every") ?> 15</option>
+										<option value="*/30"><?= _("every") ?> 30</option>
+									</select>
+								</div>
+								<div class="u-pt10">
+									<button type="button" class="button button-secondary js-generate-cron">
+										<?= _("generate") ?>
+									</button>
+								</div>
+							</fieldset>
+						</div>
+
+						<div id="tabs-2">
+							<fieldset>
+								<input type="hidden" name="h_day" value="*" form="">
+								<input type="hidden" name="h_month" value="*" form="">
+								<input type="hidden" name="h_wday" value="*" form="">
+								<div class="u-mt10 u-mb10">
+									<label for="h_hour_2" class="form-label first"><?= _("Run Command") ?>:</label>
+									<select class="form-select" name="h_hour" id="h_hour_2" form="">
+										<option value="*" selected="selected"><?= _("every hour") ?></option>
+										<option value="*/2"><?= _("every two hours") ?></option>
+										<option value="*/6"><?= _("every") ?> 6</option>
+										<option value="*/12"><?= _("every") ?> 12</option>
+									</select>
+								</div>
+								<div class="u-mb20">
+									<label for="h_min_2" class="form-label first"><?= _("Minute") ?>:</label>
+									<select class="form-select" name="h_min" id="h_min_2" style="width:70px;" form="">
+										<option value="0" selected="selected">00</option>
+										<option value="15">15</option>
+										<option value="30">30</option>
+										<option value="45">45</option>
+									</select>
+								</div>
+								<div class="u-pt10">
+									<button type="button" class="button button-secondary js-generate-cron">
+										<?= _("generate") ?>
+									</button>
+								</div>
+							</fieldset>
+						</div>
+
+						<div id="tabs-3">
+							<fieldset>
+								<input type="hidden" name="h_month" value="*" form="">
+								<input type="hidden" name="h_wday" value="*" form="">
+								<div class="u-mt10 u-mb10">
+									<label for="h_day_3" class="form-label first"><?= _("Run Command") ?>:</label>
+									<select class="form-select" name="h_day" id="h_day_3" form="">
+										<option value="*" selected="selected"><?= _("every day") ?></option>
+										<option value="1-31/2"><?= _("every odd day") ?></option>
+										<option value="*/2"><?= _("every even day") ?></option>
+										<option value="*/3"><?= _("every") ?> 3</option>
+										<option value="*/5"><?= _("every") ?> 5</option>
+										<option value="*/10"><?= _("every") ?> 10</option>
+										<option value="*/15"><?= _("every") ?> 15</option>
+									</select>
+								</div>
+								<div class="u-mb20">
+									<label for="h_hour_3" class="form-label first"><?= _("Hour") ?>:</label>
+									<select class="form-select" name="h_hour" id="h_hour_3" style="width:70px;" form="">
+										<option value="0">00</option>
+										<option value="1">01</option>
+										<option value="2">02</option>
+										<option value="3">03</option>
+										<option value="4">04</option>
+										<option value="5">05</option>
+										<option value="6">06</option>
+										<option value="7">07</option>
+										<option value="8">08</option>
+										<option value="9">09</option>
+										<option value="10">10</option>
+										<option value="11">11</option>
+										<option value="12" selected="selected">12</option>
+										<option value="13">13</option>
+										<option value="14">14</option>
+										<option value="15">15</option>
+										<option value="16">16</option>
+										<option value="17">17</option>
+										<option value="18">18</option>
+										<option value="19">19</option>
+										<option value="20">20</option>
+										<option value="21">21</option>
+										<option value="22">22</option>
+										<option value="23">23</option>
+									</select>
+									<label for="h_min_3" class="form-label"><?= _("Minute") ?>:</label>
+									<select class="form-select" name="h_min" id="h_min_3" style="width:70px;" form="">
+										<option value="0" selected="selected">00</option>
+										<option value="1">01</option>
+										<option value="2">02</option>
+										<option value="5">05</option>
+										<option value="10">10</option>
+										<option value="15">15</option>
+										<option value="20">20</option>
+										<option value="25">25</option>
+										<option value="30">30</option>
+										<option value="35">35</option>
+										<option value="40">40</option>
+										<option value="45">45</option>
+										<option value="50">50</option>
+										<option value="55">55</option>
+									</select>
+								</div>
+								<div class="u-pt10">
+									<button type="button" class="button button-secondary js-generate-cron">
+										<?= _("generate") ?>
+									</button>
+								</div>
+							</fieldset>
+						</div>
+
+						<div id="tabs-4">
+							<fieldset>
+								<input type="hidden" name="h_month" value="*" form="">
+								<input type="hidden" name="h_day" value="*" form="">
+								<div class="u-mt10 u-mb10">
+									<label for="h_wday_4" class="form-label first"><?= _("Run Command") ?>:</label>
+									<select class="form-select" name="h_wday" id="h_wday_4" form="">
+										<option value="*" selected="selected"><?= _("every day") ?></option>
+										<option value="1,2,3,4,5"><?= _("weekdays (5 days)") ?></option>
+										<option value="0,6"><?= _("weekend (2 days)") ?></option>
+										<option value="1"><?= _("Monday") ?></option>
+										<option value="2"><?= _("Tuesday") ?></option>
+										<option value="3"><?= _("Wednesday") ?></option>
+										<option value="4"><?= _("Thursday") ?></option>
+										<option value="5"><?= _("Friday") ?></option>
+										<option value="6"><?= _("Saturday") ?></option>
+										<option value="0"><?= _("Sunday") ?></option>
+									</select>
+								</div>
+								<div class="u-mb20">
+									<label for="h_hour_4" class="form-label first"><?= _("Hour") ?>:</label>
+									<select class="form-select" name="h_hour" id="h_hour_4" style="width:70px;" form="">
+										<option value="0">00</option>
+										<option value="1">01</option>
+										<option value="2">02</option>
+										<option value="3">03</option>
+										<option value="4">04</option>
+										<option value="5">05</option>
+										<option value="6">06</option>
+										<option value="7">07</option>
+										<option value="8">08</option>
+										<option value="9">09</option>
+										<option value="10">10</option>
+										<option value="11">11</option>
+										<option value="12" selected="selected">12</option>
+										<option value="13">13</option>
+										<option value="14">14</option>
+										<option value="15">15</option>
+										<option value="16">16</option>
+										<option value="17">17</option>
+										<option value="18">18</option>
+										<option value="19">19</option>
+										<option value="20">20</option>
+										<option value="21">21</option>
+										<option value="22">22</option>
+										<option value="23">23</option>
+									</select>
+									<label for="h_min_4" class="form-label"><?= _("Minute") ?>:</label>
+									<select class="form-select" name="h_min" id="h_min_4" style="width:70px;" form="">
+										<option value="0" selected="selected">00</option>
+										<option value="1">01</option>
+										<option value="2">02</option>
+										<option value="5">05</option>
+										<option value="10">10</option>
+										<option value="15">15</option>
+										<option value="20">20</option>
+										<option value="25">25</option>
+										<option value="30">30</option>
+										<option value="35">35</option>
+										<option value="40">40</option>
+										<option value="45">45</option>
+										<option value="50">50</option>
+										<option value="55">55</option>
+									</select>
+								</div>
+								<div class="u-pt10">
+									<button type="button" class="button button-secondary js-generate-cron">
+										<?= _("generate") ?>
+									</button>
+								</div>
+							</fieldset>
+						</div>
+
+						<div id="tabs-5">
+							<fieldset>
+								<input type="hidden" name="h_wday" value="*" form="">
+								<div class="u-mt10 u-mb10">
+									<label for="h_month_5" class="form-label first"><?= _("Run Command") ?>:</label>
+									<select class="form-select" name="h_month" id="h_month_5" form="">
+										<option value="*" selected="selected"><?= _("every month") ?></option>
+										<option value="1-11/2"><?= _("every odd month") ?></option>
+										<option value="*/2"><?= _("every even month") ?></option>
+										<option value="*/3"><?= _("every") ?> 3</option>
+										<option value="*/6"><?= _("every") ?> 6</option>
+										<option value="1"><?= _("Jan") ?></option>
+										<option value="2"><?= _("Feb") ?></option>
+										<option value="3"><?= _("Mar") ?></option>
+										<option value="4"><?= _("Apr") ?></option>
+										<option value="5"><?= _("May") ?></option>
+										<option value="6"><?= _("Jun") ?></option>
+										<option value="7"><?= _("Jul") ?></option>
+										<option value="8"><?= _("Aug") ?></option>
+										<option value="9"><?= _("Sep") ?></option>
+										<option value="10"><?= _("Oct") ?></option>
+										<option value="11"><?= _("Nov") ?></option>
+										<option value="12"><?= _("Dec") ?></option>
+									</select>
+								</div>
+								<div class="u-mb20">
+									<label for="h_day_5" class="form-label first"><?= _("Date") ?>:</label>
+									<select class="form-select" name="h_day" id="h_day_5" style="width:70px;" form="">
+										<option value="1" selected="selected">1</option>
+										<option value="2">2</option>
+										<option value="3">3</option>
+										<option value="4">4</option>
+										<option value="5">5</option>
+										<option value="6">6</option>
+										<option value="7">7</option>
+										<option value="8">8</option>
+										<option value="9">9</option>
+										<option value="10">10</option>
+										<option value="11">11</option>
+										<option value="12">12</option>
+										<option value="13">13</option>
+										<option value="14">14</option>
+										<option value="15">15</option>
+										<option value="16">16</option>
+										<option value="17">17</option>
+										<option value="18">18</option>
+										<option value="19">19</option>
+										<option value="20">20</option>
+										<option value="21">21</option>
+										<option value="22">22</option>
+										<option value="23">23</option>
+										<option value="24">24</option>
+										<option value="25">25</option>
+										<option value="26">26</option>
+										<option value="27">27</option>
+										<option value="28">28</option>
+										<option value="29">29</option>
+										<option value="30">30</option>
+										<option value="31">31</option>
+									</select>
+									<label for="h_hour_5" class="form-label"><?= _("Hour") ?>:</label>
+									<select class="form-select" name="h_hour" id="h_hour_5" style="width:70px;" form="">
+										<option value="0">00</option>
+										<option value="1">01</option>
+										<option value="2">02</option>
+										<option value="3">03</option>
+										<option value="4">04</option>
+										<option value="5">05</option>
+										<option value="6">06</option>
+										<option value="7">07</option>
+										<option value="8">08</option>
+										<option value="9">09</option>
+										<option value="10">10</option>
+										<option value="11">11</option>
+										<option value="12" selected="selected">12</option>
+										<option value="13">13</option>
+										<option value="14">14</option>
+										<option value="15">15</option>
+										<option value="16">16</option>
+										<option value="17">17</option>
+										<option value="18">18</option>
+										<option value="19">19</option>
+										<option value="20">20</option>
+										<option value="21">21</option>
+										<option value="22">22</option>
+										<option value="23">23</option>
+									</select>
+									<label for="h_min_5" class="form-label"><?= _("Minute") ?>:</label>
+									<select class="form-select" name="h_min" id="h_min_5" style="width:70px;" form="">
+										<option value="0" selected="selected">00</option>
+										<option value="1">01</option>
+										<option value="2">02</option>
+										<option value="5">05</option>
+										<option value="10">10</option>
+										<option value="15">15</option>
+										<option value="20">20</option>
+										<option value="25">25</option>
+										<option value="30">30</option>
+										<option value="35">35</option>
+										<option value="40">40</option>
+										<option value="45">45</option>
+										<option value="50">50</option>
+										<option value="55">55</option>
+									</select>
+								</div>
+								<div class="u-pt10">
+									<button type="button" class="button button-secondary js-generate-cron">
+										<?= _("generate") ?>
+									</button>
+								</div>
+							</fieldset>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 

web/templates/pages/edit_mail_acc.php

@@ -32,7 +32,7 @@
 		<div class="form-container form-container-wide">
 			<h1 class="form-title"><?= _("Editing Mail Account") ?></h1>
 			<?php show_alert_message($_SESSION); ?>
-			<div class="sidebar-container">
+			<div class="sidebar-right-container">
 				<div>
 					<div class="u-mb10">
 						<label for="v_email" class="form-label"><?= _("Account") ?></label>

web/templates/pages/list_access_keys.php

@@ -37,7 +37,7 @@
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>">
+					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-6"><b><?= _("Access Key") ?></b></div>
 				<div class="clearfix l-unit__stat-col--left compact u-text-right"><b>&nbsp;</b></div>

web/templates/pages/list_backup.php

@@ -39,7 +39,7 @@
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>" <?=$display_mode;?>>
+					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?=$display_mode;?>>
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-4"><b><?= _("File Name") ?></b></div>
 				<div class="clearfix l-unit__stat-col--left compact-4 u-text-right"><b>&nbsp;</b></div>

web/templates/pages/list_backup_detail.php

@@ -34,7 +34,7 @@
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all">
+					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left compact-4"><b><?= _("Type") ?></b></div>
 				<div class="clearfix l-unit__stat-col--left wide-7"><b><?= _("Details") ?></b></div>

web/templates/pages/list_cron.php

@@ -59,7 +59,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>" <?=$display_mode;?>>
+				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?=$display_mode;?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-5"><b><?= _("Command") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-2 u-text-right"><b>&nbsp;</b></div>

web/templates/pages/list_db.php

@@ -89,7 +89,7 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>" <?=$display_mode;?>>
+				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?=$display_mode;?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Name") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left u-text-right compact-3"><b>&nbsp;</b></div>

web/templates/pages/list_dns.php

@@ -58,7 +58,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>" <?=$display_mode;?>>
+				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?=$display_mode;?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Name") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left u-text-right"><b>&nbsp;</b></div>

web/templates/pages/list_dns_rec.php

@@ -58,7 +58,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>" <?=$display_mode;?>>
+				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?=$display_mode;?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left"><b><?= _("Record") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left super-compact u-text-right"><b>&nbsp;</b></div>

web/templates/pages/list_firewall.php

@@ -41,7 +41,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>">
+				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-1"><b><?= _("Action") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-2 u-text-right"><b>&nbsp;</b></div>

web/templates/pages/list_firewall_banlist.php

@@ -25,7 +25,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>">
+				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("IP address") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-4"><b>&nbsp;</b></div>

web/templates/pages/list_firewall_ipset.php

@@ -25,7 +25,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>">
+				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Ip List Name") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-4"><b>&nbsp;</b></div>

web/templates/pages/list_ip.php

@@ -40,7 +40,7 @@
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>">
+					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("IP Address") ?></b></div>
 				<div class="clearfix l-unit__stat-col--left compact u-text-right"><b>&nbsp;</b></div>

web/templates/pages/list_mail.php

@@ -57,7 +57,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
+				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Name") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left u-text-right compact-5"><b>&nbsp;</b></div>

web/templates/pages/list_mail_acc.php

@@ -64,7 +64,7 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
+					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Name") ?></b></div>
 				<div class="clearfix l-unit__stat-col--left u-text-right compact-4"><b>&nbsp;</b></div>

web/templates/pages/list_packages.php

@@ -38,7 +38,7 @@
 	<div class="table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>">
+				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-2"><b><?= _("Package") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-3 u-text-right"><b>&nbsp;</b></div>

web/templates/pages/list_services.php

@@ -95,7 +95,7 @@
 		<div class="table-header">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact">
-					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>">
+					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
 				</div>
 
 				<div class="clearfix l-unit__stat-col--left wide-2"><b><?= _("Service") ?></b></div>

web/templates/pages/list_updates.php

@@ -25,7 +25,7 @@
 		<div class="l-unit__col l-unit__col--right">
 			<div>
 				<div class="clearfix l-unit__stat-col--left super-compact center">
-					<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>">
+					<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
 				</div>
 				<div class="clearfix l-unit__stat-col--left wide"><b><?= _("Package") ?></b></div>
 				<div class="clearfix l-unit__stat-col--left wide-5"><b><?= _("Description") ?></b></div>

web/templates/pages/list_user.php

@@ -61,7 +61,7 @@
 	<div class="table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>">
+				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>">
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Name") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-3"><b>&nbsp;</b></div>

web/templates/pages/list_web.php

@@ -62,7 +62,7 @@
 	<div class="header table-header">
 		<div class="l-unit__col l-unit__col--right">
 			<div class="clearfix l-unit__stat-col--left super-compact">
-				<input id="toggle-all" type="checkbox" name="toggle-all" value="toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
+				<input type="checkbox" class="js-toggle-all" title="<?= _("Select all") ?>" <?= $display_mode ?>>
 			</div>
 			<div class="clearfix l-unit__stat-col--left wide-4"><b><?= _("Name") ?></b></div>
 			<div class="clearfix l-unit__stat-col--left compact-4 u-text-right"><b>&nbsp;</b></div>