save vpn fix, type select in template

Dockerfile

@@ -69,12 +69,12 @@ RUN apk --no-cache add php${PHP_VERSION} \
     rm -rf /var/cache/apk/*
 
 COPY nginx.conf /etc/nginx/nginx.conf
-
 RUN mkdir -p /usr/share/nginx/html
 COPY *.html    /usr/share/nginx/html
 COPY *.php   /usr/share/nginx/html
 COPY *.css /usr/share/nginx/html
 COPY *.js /usr/share/nginx/html
+COPY img /usr/share/nginx/html/img
 RUN chown -R nginx:nginx /usr/share/nginx/html
 
 RUN mkdir -p /usr/share/nginx/html/shared

common.js

@@ -10,6 +10,7 @@ function check_deployments() {
 	apps.length = 0; // reset
 	apps.push(...JSON.parse(data)); // push each element
 	console.log(apps);
+	document.getElementById('installAppsBtn').click();
 
 	// manage
 	html_data = '';
@@ -19,6 +20,7 @@ function check_deployments() {
 		service_name = data[k].name;
 		orig_service_name = data[k].orig_name;
 		version = data[k].version;
+		subtitle = data[k].subtitle;
 		installed = data[k].installed;
 		if (installed=='true') {
 			html_data += '<div><a href="#" onclick="reinstall(\''+service_name+'\',\''+service_name+'\')">'+orig_service_name+'</a> - '+version+' - INSTALLED</div>';
@@ -88,7 +90,7 @@ function get_repositories() {
 	console.log('repositories: '+data);
 	if (data=="OK") {
 		setTimeout(check_repositories, 500);
-		get_deployments();
+		//get_deployments();
 	}
 	else alert(data);
   });
@@ -104,19 +106,64 @@ function add_repository() {
   });
 }
 
-function check_vpn() {
-  var url  = 'scan.php?op=check_vpn';
-  jQuery.get(url, function(data) {
+function check_vpn(service) {
+  var url = 'scan.php?op=check_vpn';
+  jQuery.ajax({
+    url: url,
+    method: 'GET',
+    success: function(data) {
         console.log('check_vpn: '+data);
-        if (data=="2") {
-          $('#vpn_off').hide();
-          $('#vpn_on').show();
+        if (data=="1") { // VPN ON
+		$('#pro_off').hide();
+		$('#pro_on').show();
+		$('#vpn_off').hide();
+		$('#vpn_on').show();
+		//document.getElementById('vpnToggle').checked = true;
+		//document.querySelector(".switch-label").textContent = "ON";
+	}
+	else if (data=="2") {
+		$('#pro_off').hide();
+		$('#pro_on').show();
+		$('#vpn_on').hide();
+		$('#vpn_off').show();
+		//document.getElementById('vpnToggle').checked = false;
+		//document.querySelector(".switch-label").textContent = "OFF";
         }
-        else {
-          $('#vpn_on').hide();
-          $('#vpn_off').show();
+        else { // data == 0
+		$('#pro_on').hide();
+		$('#pro_off').show();
         }
         setTimeout(check_vpn, 10000);
+    },
+    error: function(xhr, status, error) {
+      console.warn('check_vpn error: ' + status + ' - ' + error);
+      setTimeout(check_vpn, 10000, service);
+    }
+  });
+}
+
+function check_save_vpn(service) {
+  var url = 'scan.php?op=check_vpn';
+  jQuery.ajax({
+    url: url,
+    method: 'GET',
+    success: function(data) {
+        console.log('check_save_vpn: '+data);
+        if (data=="1") { // save_vpn has finished or VPN ON
+	  const vpn_div = document.getElementById("vpn");
+	  if (vpn_div) {
+	  	vpn_div.innerHTML = '<div class="loading">VPN start process has finished</div>';
+		setTimeout(function() {
+			document.getElementById('installAppsBtn').click();
+		}, 2000);
+	  }
+	}
+	else setTimeout(check_save_vpn, 1000);
+    },
+    error: function(xhr, status, error) {
+      console.warn('check_save_vpn error: ' + status + ' - ' + error);
+      setTimeout(check_save_vpn, 1000);
+    }
   });
 }
 
@@ -126,6 +173,7 @@ function save_vpn() {
   jQuery.get(url, function(data) {
 	console.log('save_vpn: '+data);
 	  if (data=="OK") {
+		check_save_vpn();
 	  }
 	//get_vpn();
   });
@@ -156,22 +204,27 @@ function get_updates() {
 }
 
 function check_upgrade(service) {
-  var url  = 'scan.php?op=check_upgrade&service='+service;
-  jQuery.get(url, function(data) {
-        console.log('check_upgrade '+service+': '+data);
-      if (data!="") {
-              jQuery("#status_"+service).html(data);
+  var url = 'scan.php?op=check_upgrade&service=' + service;
+  jQuery.ajax({
+    url: url,
+    method: 'GET',
+    success: function(data) {
+      console.log('check_upgrade ' + service + ': ' + data);
+      if (data !== "") {
+        jQuery("#status_" + service).html(data);
       }
-      if (data!="OK") {
-              setTimeout(check_upgrade, 1000, service);
-      }
-      else {
-          console.log('upgrade end: '+service);
-	  jQuery("#status_"+service).html('Upgrade has finished');
-	  //get_updates();
+      if (data !== "OK") {
+        setTimeout(check_upgrade, 1000, service);
+      } else {
+        console.log('upgrade end: ' + service);
+        jQuery("#status_" + service).html('Upgrade has finished');
       }
+    },
+    error: function(xhr, status, error) {
+      console.warn('check_upgrade error: ' + status + ' - ' + error);
+      setTimeout(check_upgrade, 5000, service);
+    }
   });
-
 }
 
 function upgrade(service) {
@@ -192,7 +245,8 @@ function load_template(additional, block) {
   jQuery("div.deployment").each(function(index) {
         $(this).html('');
   });
-  jQuery("#"+block).html('Loading '+additional+' template...');
+  //jQuery("#"+block).html('Loading '+additional+' template...');
+  jQuery("#"+block).html('<div class="loading">Loading...</div>');
   var url  = 'scan.php?op=deployment&additional='+additional;
   jQuery.get(url, function(data) {
 	console.log('load_template: '+data);
@@ -218,7 +272,8 @@ function reinstall(additional, block) {
   jQuery("div.deployment").each(function(index) {
         $(this).html('');
   });
-  jQuery("#"+block).html('Loading '+additional+' template...');
+  //jQuery("#"+block).html('Loading '+additional+' template...');
+  jQuery("#"+block).html('<div class="loading">Loading...</div>');
   var url  = 'scan.php?op=reinstall&additional='+additional;
   jQuery.get(url, function(data) {
 	console.log('reinstall '+additional+': '+data);
@@ -234,11 +289,13 @@ function check_uninstall(additional) {
         console.log('check_uninstall '+additional+': '+data);
       if (data!="") {
               jQuery("#"+additional).html(data);
+	      jQuery("#popupText").html('<div class="loading">'+data+'</div>'); // manage2
       }
       if (data!="OK") {
               setTimeout(check_uninstall, 1000, additional);
       }
       else {
+	  jQuery("#popupText").html('<div class="loading">Uninstall has finished</div>'); // manage2
 	  jQuery("#"+additional).html('Uninstall has finished');
 	  get_deployments();
       }
@@ -250,30 +307,41 @@ function uninstall(additional) {
   jQuery("div.deployment").each(function(index) {
         $(this).html('');
   });
-	data = '<fieldset><form action="#" method="post"><div class="row">YOU ARE GOING TO UNINSTALL '+additional.toUpperCase()+'.<br>ARE YOU SURE? IF YES, PLEASE CLICK ON THE BUTTON BELOW.<br><br></div><div class="row"><div class="mb-3"><button class="btn btn-lg btn-primary btn-block" type="button" onclick="confirm_uninstall(\''+additional+'\')">Uninstall</button></div></div></form></fieldset>';
+	data = '<div class="confirm"><form action="#" method="post"><div class="row">You are going to uninstall '+additional.toUpperCase()+'.<br>Are you sure? If you click on Uninstall button below then all your data will be deleted.<br><br></div><div class="row buttons"><div class="mb-3"><button class="btn" type="button" onclick="confirm_uninstall(\''+additional+'\')">Uninstall</button></div><div class="mb-3" style="margin-left:200px;float:"><button class="btn" onclick="reinstall(\''+additional+'\',\''+additional+'\')">Cancel</button></div></div></form></div>';
 	jQuery("#"+additional).html(data);
+	jQuery("#popupText").html(data); // manage2
 }
 
 function confirm_uninstall(additional) {
-  jQuery("#"+additional).html('Loading...');
+  jQuery("#"+additional).html('<div class="loading">Loading...</div>');
+  jQuery("#popupText").html('<div class="loading">Loading...</div>'); // manage2
   var url  = 'scan.php?op=uninstall&additional='+additional;
   jQuery.get(url, function(data) {
         console.log('uninstall '+additional+': '+data);
           if (data!="") {
                 jQuery("#"+additional).html(data);
+	        jQuery("#popupText").html('<div class="loading">'+data+'</div>'); // manage2
                 setTimeout(check_uninstall, 1000, additional);
           }
   });
 }
 
 function update_deployment(additional) {
-  jQuery("#"+additional).html('Loading...');
-  var url  = 'scan.php?op=edit&additional='+additional;
+  //jQuery("#"+additional).html('Loading...');
+  pars = '';
+  jQuery('input.additional_'+additional).each(function(index) {
+	console.log('Field ' + $(this).attr('name') + ': ' + $(this).val());
+	//pars += '&'+$(this).attr('id') + '=' + $(this).val();
+	pars += '&'+$(this).attr('name') + '=' + $(this).val();
+  });
+  //console.log(pars);
+  var url  = 'scan.php?op=edit&additional='+additional+pars;
   jQuery.get(url, function(data) {
         console.log('edit '+additional+': '+data);
           if (data!="") {
                 jQuery("#"+additional).html(data);
-                setTimeout(check_reinstall, 1000, additional);
+	        jQuery("#popupText").html(data); // manage2
+                setTimeout(check_deployment, 1000, additional);
           }
   });
 }
@@ -304,7 +372,7 @@ function check_deployment(additional) {
   var url  = 'scan.php?op=check_deployment&additional='+additional;
   jQuery.get(url, function(data) {
       console.log('check_deployment '+additional);
-      //console.log('check_deployment data: '+data);
+      console.log('check_deployment data: '+data);
       if (data!="") {
 	      jQuery("#"+additional).html(data);
 	      jQuery("#popupText").html(data); // manage2
@@ -326,6 +394,7 @@ function deploy(additional) {
 	console.log('deploy '+additional+': '+data);
 	  if (data!="") {
 	        jQuery("#"+additional).html(data);
+	        jQuery("#popupText").html('<div class="loading">'+data+'</div>'); // manage2
       		setTimeout(check_deployment, 1000, additional);
 	  }
   });
@@ -344,6 +413,7 @@ function redeploy(additional) {
 	console.log('redeploy '+additional+': '+data);
 	  if (data!="") {
 	        jQuery("#"+additional).html(data);
+		jQuery("#popupText").html('<div class="loading">'+data+'</div>'); // manage2
       		setTimeout(check_deployment, 1000, additional);
 	  }
   });
@@ -372,53 +442,52 @@ function get_services() {
 
 function get_proxy_html() {
         proxy_html = `
-	<fieldset>
-	<legend>Enable proxy</legend>
-        <div class="input-group">
 	<form class="form-install" action="#" method="post" id="save_vpn">
+        <div class="app-fields">
+        	<div class="app-field">
 		<div class="row">
-		    <div class="mb-3">
-				<label for="vpn_domain">Please add domain url to download the VPN hash from (default: https://portal.safebox.network):</label>
-				<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network">
-				<div class="invalid-feedback">
-				Please enter a valid domain.
-				</div>
+			<label for="vpn_domain">Please add domain url to download the VPN hash from:</label>
+		    <div class="input-container">
+				<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://pro.safebox.network" size="40">
 		    </div>
 		</div>
+		</div>
+        	<div class="app-field">
 		<div class="row">
-		    <div class="mb-3">
-				<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
+			<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
+		    <div class="input-container">
 				<input type="text" class="form-control" name="VPN_PASS" id="vpn_pass" value="" maxlength="8" size="10">
 		    </div>
 		</div>
+		</div>
+        	<div class="app-field">
 		<div class="row">
-		    <div class="mb-3">
-				<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
+			<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
+		    <div class="input-container">
 				<input type="email" class="form-control" name="LETSENCRYPT_MAIL" id="letsencrypt_mail" value="">
-				<div class="invalid-feedback">
-				Please enter a valid email.
-				</div>
 		    </div>
 		</div>
+		</div>
+        	<div class="app-field">
 		<div class="row">
-		    <div class="mb-3">
-				<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
+			<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
+		    <div class="input-container">
 				<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt">
 		    </div>
 		</div>
-		<div class="row buttons">
-		    <div class="mb-3">
-			<button class="btn btn-lg btn-primary btn-block" type="button" id="vpn_save_btn"> Save </button>
-		    </div>
 		</div>
-	</form>
 	</div>
-	</fieldset>
+	<div class="row buttons">
+	    <div class="mb-3">
+		<button class="btn btn-lg btn-primary btn-block" type="button" id="vpn_save_btn"> Save </button>
+	    </div>
+	</div>
+	</form>
 	<script>
 	jQuery('#vpn_save_btn').click(function() {
 		console.log('vpn save');
-		jQuery('#vpn').html('Loading...');
 		save_vpn();
+		jQuery('#vpn').html('<div class="loading">VPN start process in progress. Please wait...</div>');
 	});
 	</script>
         `;
@@ -446,9 +515,19 @@ function get_containers() {
   });
 }
 
+function get_version() {
+  var url  = 'scan.php?op=version';
+  jQuery.get(url, function(data) {
+	console.log('version: '+data);
+	jQuery('#logo').attr('title',data);
+  });
+}
+
 jQuery(document).ready(function(){
 
+	get_version();
 	get_repositories();
+	get_deployments();
 	get_system();
 	check_vpn();
 
@@ -479,19 +558,19 @@ jQuery(document).ready(function(){
 	});
 
 	jQuery('#update_btn').click(function() {
-		jQuery('#updates').html('Looking for updates... Please wait...');
+		jQuery('#updates').html('<div class="loading">Looking for updates...</div>');
 		get_updates();
 	});
 
 	jQuery('#add_repo').submit(function() {
-		jQuery('#repositories').html('Loading...');
+		jQuery('#repositories').html('<div class="loading">Loading...</div>');
 		add_repository();
 		return false;
 	});
 
 	jQuery('#save_vpn').submit(function() {
 		save_vpn();
-		jQuery('#vpn').html('Loading...');
+		jQuery('#vpn').html('<div class="loading">Loading...</div>');
 		return false;
 	});
 

img/apps1.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9998 13.2999C11.8698 13.2999 11.7398 13.2699 11.6198 13.1999L2.78985 8.0899C2.42985 7.8799 2.30983 7.41987 2.51983 7.05987C2.72983 6.69987 3.17983 6.57985 3.54983 6.78985L11.9998 11.6799L20.3998 6.81988C20.7598 6.60988 21.2198 6.7399 21.4298 7.0899C21.6398 7.4499 21.5098 7.90987 21.1598 8.11987L12.3899 13.1999C12.2599 13.2599 12.1298 13.2999 11.9998 13.2999Z" fill="#7C7D81"/>
+<path d="M12 22.36C11.59 22.36 11.25 22.02 11.25 21.61V12.54C11.25 12.13 11.59 11.79 12 11.79C12.41 11.79 12.75 12.13 12.75 12.54V21.61C12.75 22.02 12.41 22.36 12 22.36Z" fill="#7C7D81"/>
+<path d="M12.0001 22.75C11.1201 22.75 10.2501 22.56 9.56012 22.18L4.22012 19.21C2.77012 18.41 1.64014 16.48 1.64014 14.82V9.16998C1.64014 7.50998 2.77012 5.59002 4.22012 4.78002L9.56012 1.82C10.9301 1.06 13.0701 1.06 14.4401 1.82L19.7801 4.78997C21.2301 5.58997 22.3601 7.51999 22.3601 9.17999V14.83C22.3601 16.49 21.2301 18.41 19.7801 19.22L14.4401 22.18C13.7501 22.56 12.8801 22.75 12.0001 22.75ZM12.0001 2.74999C11.3701 2.74999 10.7501 2.88 10.2901 3.13L4.95013 6.09997C3.99013 6.63997 3.14014 8.06999 3.14014 9.17999V14.83C3.14014 15.93 3.99013 17.37 4.95013 17.91L10.2901 20.88C11.2001 21.39 12.8001 21.39 13.7101 20.88L19.0501 17.91C20.0101 17.37 20.8601 15.94 20.8601 14.83V9.17999C20.8601 8.07999 20.0101 6.63997 19.0501 6.09997L13.7101 3.13C13.2501 2.88 12.6301 2.74999 12.0001 2.74999Z" fill="#7C7D81"/>
+<path d="M17.0002 13.9905C16.5902 13.9905 16.2502 13.6505 16.2502 13.2405V10.0206L7.13018 4.76055C6.77018 4.55055 6.65016 4.09054 6.86016 3.74054C7.07016 3.38054 7.52018 3.26052 7.88018 3.47052L17.3702 8.95056C17.6002 9.08056 17.7502 9.33052 17.7502 9.60052V13.2606C17.7502 13.6506 17.4102 13.9905 17.0002 13.9905Z" fill="#7C7D81"/>
+</svg>

img/apps2.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9998 13.2999C11.8698 13.2999 11.7398 13.2699 11.6198 13.1999L2.78985 8.0899C2.42985 7.8799 2.30983 7.41987 2.51983 7.05987C2.72983 6.69987 3.17983 6.57985 3.54983 6.78985L11.9998 11.6799L20.3998 6.81988C20.7598 6.60988 21.2198 6.7399 21.4298 7.0899C21.6398 7.4499 21.5098 7.90987 21.1598 8.11987L12.3899 13.1999C12.2599 13.2599 12.1298 13.2999 11.9998 13.2999Z" fill="#101010"/>
+<path d="M12 22.36C11.59 22.36 11.25 22.02 11.25 21.61V12.54C11.25 12.13 11.59 11.79 12 11.79C12.41 11.79 12.75 12.13 12.75 12.54V21.61C12.75 22.02 12.41 22.36 12 22.36Z" fill="#101010"/>
+<path d="M12.0001 22.75C11.1201 22.75 10.2501 22.56 9.56012 22.18L4.22012 19.21C2.77012 18.41 1.64014 16.48 1.64014 14.82V9.16998C1.64014 7.50998 2.77012 5.59002 4.22012 4.78002L9.56012 1.82C10.9301 1.06 13.0701 1.06 14.4401 1.82L19.7801 4.78997C21.2301 5.58997 22.3601 7.51999 22.3601 9.17999V14.83C22.3601 16.49 21.2301 18.41 19.7801 19.22L14.4401 22.18C13.7501 22.56 12.8801 22.75 12.0001 22.75ZM12.0001 2.74999C11.3701 2.74999 10.7501 2.88 10.2901 3.13L4.95013 6.09997C3.99013 6.63997 3.14014 8.06999 3.14014 9.17999V14.83C3.14014 15.93 3.99013 17.37 4.95013 17.91L10.2901 20.88C11.2001 21.39 12.8001 21.39 13.7101 20.88L19.0501 17.91C20.0101 17.37 20.8601 15.94 20.8601 14.83V9.17999C20.8601 8.07999 20.0101 6.63997 19.0501 6.09997L13.7101 3.13C13.2501 2.88 12.6301 2.74999 12.0001 2.74999Z" fill="#101010"/>
+<path d="M17.0002 13.9905C16.5902 13.9905 16.2502 13.6505 16.2502 13.2405V10.0206L7.13018 4.76055C6.77018 4.55055 6.65016 4.09054 6.86016 3.74054C7.07016 3.38054 7.52018 3.26052 7.88018 3.47052L17.3702 8.95056C17.6002 9.08056 17.7502 9.33052 17.7502 9.60052V13.2606C17.7502 13.6506 17.4102 13.9905 17.0002 13.9905Z" fill="#101010"/>
+</svg>

img/backup1.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.32 12.7504H15C12.51 12.7504 11.25 11.3404 11.25 8.55045V5.68045C11.25 4.66045 11.37 3.20045 12.43 2.40045C13.32 1.74045 14.6 1.69045 16.49 2.24045C18.97 2.96045 21.04 5.03045 21.76 7.51045C22.31 9.39045 22.26 10.6804 21.6 11.5604C20.8 12.6304 19.34 12.7504 18.32 12.7504ZM14.28 3.36045C13.87 3.36045 13.55 3.44045 13.34 3.60045C12.95 3.89045 12.76 4.57045 12.76 5.68045V8.56045C12.76 10.8004 13.62 11.2604 15.01 11.2604H18.33C19.43 11.2604 20.11 11.0704 20.41 10.6804C20.76 10.2204 20.73 9.30045 20.34 7.95045C19.76 5.98045 18.06 4.27045 16.09 3.70045C15.35 3.47045 14.75 3.36045 14.28 3.36045Z" fill="#7C7D81"/>
+<path d="M11.0699 22.7503C10.5399 22.7503 9.99988 22.7103 9.45988 22.6203C5.36988 21.9603 2.03988 18.6403 1.37988 14.5503C0.529883 9.29032 3.91988 4.33032 9.10988 3.27032C9.51988 3.19032 9.90988 3.45032 9.99988 3.85032C10.0799 4.26032 9.81988 4.65032 9.41988 4.74032C5.02988 5.64032 2.14988 9.84032 2.87988 14.3103C3.43988 17.7703 6.24988 20.5803 9.70988 21.1403C14.1999 21.8603 18.3899 18.9703 19.2799 14.5603C19.3599 14.1503 19.7599 13.8903 20.1599 13.9703C20.5699 14.0503 20.8299 14.4503 20.7499 14.8503C19.7999 19.5203 15.7199 22.7503 11.0699 22.7503Z" fill="#7C7D81"/>
+</svg>

img/backup2.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.05105 10.4495C1.05105 15.5708 5.03278 19.5654 10.0865 19.6166C15.1913 19.6166 19.2241 15.6732 19.2241 10.5519C19.2241 5.43059 15.2423 1.38477 10.1886 1.38477C5.13487 1.38477 1.05105 5.32816 1 10.5007L1.05105 10.4495Z" stroke="#101010" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M12.0262 6.45442C11.5158 7.1714 11.4647 7.99081 12.0262 8.50293C12.5367 9.06628 13.3535 9.06628 14.1702 8.50293C14.936 9.78326 14.8849 12.3951 12.9451 13.9315C11.2095 15.3143 8.55498 15.1606 6.97249 13.6242C5.39001 12.0366 5.23687 9.42477 6.61516 7.63231C8.14659 5.68622 10.75 5.68622 12.0262 6.4032V6.45442Z" fill="#101010"/>
+</svg>

img/disk1.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.32 12.7504H15C12.51 12.7504 11.25 11.3404 11.25 8.55045V5.68045C11.25 4.66045 11.37 3.20045 12.43 2.40045C13.32 1.74045 14.6 1.69045 16.49 2.24045C18.97 2.96045 21.04 5.03045 21.76 7.51045C22.31 9.39045 22.26 10.6804 21.6 11.5604C20.8 12.6304 19.34 12.7504 18.32 12.7504ZM14.28 3.36045C13.87 3.36045 13.55 3.44045 13.34 3.60045C12.95 3.89045 12.76 4.57045 12.76 5.68045V8.56045C12.76 10.8004 13.62 11.2604 15.01 11.2604H18.33C19.43 11.2604 20.11 11.0704 20.41 10.6804C20.76 10.2204 20.73 9.30045 20.34 7.95045C19.76 5.98045 18.06 4.27045 16.09 3.70045C15.35 3.47045 14.75 3.36045 14.28 3.36045Z" fill="#7C7D81"/>
+<path d="M11.0699 22.7503C10.5399 22.7503 9.99988 22.7103 9.45988 22.6203C5.36988 21.9603 2.03988 18.6403 1.37988 14.5503C0.529883 9.29032 3.91988 4.33032 9.10988 3.27032C9.51988 3.19032 9.90988 3.45032 9.99988 3.85032C10.0799 4.26032 9.81988 4.65032 9.41988 4.74032C5.02988 5.64032 2.14988 9.84032 2.87988 14.3103C3.43988 17.7703 6.24988 20.5803 9.70988 21.1403C14.1999 21.8603 18.3899 18.9703 19.2799 14.5603C19.3599 14.1503 19.7599 13.8903 20.1599 13.9703C20.5699 14.0503 20.8299 14.4503 20.7499 14.8503C19.7999 19.5203 15.7199 22.7503 11.0699 22.7503Z" fill="#7C7D81"/>
+</svg>

img/disk2.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.32 12.7504H15C12.51 12.7504 11.25 11.3404 11.25 8.55045V5.68045C11.25 4.66045 11.37 3.20045 12.43 2.40045C13.32 1.74045 14.6 1.69045 16.49 2.24045C18.97 2.96045 21.04 5.03045 21.76 7.51045C22.31 9.39045 22.26 10.6804 21.6 11.5604C20.8 12.6304 19.34 12.7504 18.32 12.7504ZM14.28 3.36045C13.87 3.36045 13.55 3.44045 13.34 3.60045C12.95 3.89045 12.76 4.57045 12.76 5.68045V8.56045C12.76 10.8004 13.62 11.2604 15.01 11.2604H18.33C19.43 11.2604 20.11 11.0704 20.41 10.6804C20.76 10.2204 20.73 9.30045 20.34 7.95045C19.76 5.98045 18.06 4.27045 16.09 3.70045C15.35 3.47045 14.75 3.36045 14.28 3.36045Z" fill="#101010"/>
+<path d="M11.0699 22.7503C10.5399 22.7503 9.99988 22.7103 9.45988 22.6203C5.36988 21.9603 2.03988 18.6403 1.37988 14.5503C0.529883 9.29032 3.91988 4.33032 9.10988 3.27032C9.51988 3.19032 9.90988 3.45032 9.99988 3.85032C10.0799 4.26032 9.81988 4.65032 9.41988 4.74032C5.02988 5.64032 2.14988 9.84032 2.87988 14.3103C3.43988 17.7703 6.24988 20.5803 9.70988 21.1403C14.1999 21.8603 18.3899 18.9703 19.2799 14.5603C19.3599 14.1503 19.7599 13.8903 20.1599 13.9703C20.5699 14.0503 20.8299 14.4503 20.7499 14.8503C19.7999 19.5203 15.7199 22.7503 11.0699 22.7503Z" fill="#101010"/>
+</svg>

img/grey-box.svg

@@ -0,0 +1,4 @@
+<svg width="194" height="218" viewBox="0 0 194 218" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M155.225 217H21C9.9543 217 1 208.046 1 197V21C1 9.95431 9.9543 1 21 1H173C184.046 1 193 9.95429 193 21V154.883C193 159.071 191.686 163.152 189.242 166.553L178.982 180.833C176.539 184.234 175.225 188.316 175.225 192.503V197C175.225 208.046 166.27 217 155.225 217Z" stroke="#4A4F5A"/>
+<path d="M22.8795 23.0077C23.2979 23.0077 23.7203 23.0077 24.1388 23.0077C24.1701 23.0153 24.2014 23.0307 24.2366 23.0307C24.9914 23.0997 25.7149 23.28 26.4111 23.5677C29.3874 24.7951 31.0534 27.6756 30.9987 30.3951C30.9791 31.3923 30.8149 32.3551 30.3964 33.2564C29.2896 35.6575 27.4123 37.1151 24.7724 37.6214C24.5064 37.6712 24.2327 37.6981 23.9628 37.7326H23.0554C23.0242 37.7249 22.989 37.7134 22.9577 37.7096C22.1403 37.6559 21.3463 37.4833 20.5954 37.1534C18.1393 36.0795 16.6414 34.2422 16.1173 31.6493C16.0626 31.3885 16.0391 31.12 16 30.8553C16 30.5293 16 30.2033 16 29.8773C16.0078 29.8351 16.0235 29.7929 16.0274 29.7507C16.0939 28.9452 16.2816 28.1704 16.6218 27.4378C17.6974 25.1288 19.5003 23.6981 22.019 23.1419C22.3045 23.0805 22.5939 23.046 22.8795 23V23.0077ZM25.9848 32.5315C26.1882 31.0855 26.1921 29.651 25.9848 28.2164H21.0022C20.7988 29.6586 20.7949 31.0932 21.0022 32.5315H25.9848ZM26.8765 32.52C26.9078 32.5277 26.9195 32.5315 26.9352 32.5315C27.8386 32.5315 28.7381 32.5315 29.6416 32.5315C29.6846 32.5315 29.7472 32.474 29.7628 32.4279C30.2243 31.0663 30.2243 29.7008 29.7824 28.3353C29.7511 28.2356 29.7042 28.2011 29.5986 28.2049C28.7342 28.2088 27.8738 28.2049 27.0095 28.2049C26.9664 28.2049 26.9273 28.2088 26.8765 28.2126C27.0681 29.6548 27.0681 31.0816 26.8765 32.5162V32.52ZM20.1144 32.5277C19.9227 31.0893 19.9227 29.6548 20.1144 28.2164C20.0792 28.2126 20.0557 28.2049 20.0322 28.2049C19.1444 28.2049 18.2566 28.2049 17.3689 28.2049C17.2789 28.2049 17.2554 28.2433 17.232 28.3162C16.7822 29.6816 16.7822 31.0471 17.232 32.4126C17.2672 32.5123 17.3141 32.5392 17.4158 32.5392C18.2684 32.5392 19.1249 32.5392 19.9775 32.5392C20.0205 32.5392 20.0635 32.5353 20.1183 32.5315L20.1144 32.5277ZM25.8166 27.3342C25.7931 27.2269 25.7697 27.1271 25.7462 27.0312C25.5389 26.2334 25.2652 25.4663 24.7919 24.7759C24.5886 24.4805 24.3539 24.2121 24.0332 24.0279C23.7008 23.8362 23.3605 23.817 23.0163 23.9896C22.6643 24.1699 22.4101 24.4537 22.195 24.7682C21.6749 25.5277 21.3933 26.3792 21.1821 27.2614C21.1782 27.2805 21.1821 27.3074 21.186 27.3304H25.8166V27.3342ZM21.1821 33.4099C21.1821 33.4444 21.1821 33.4636 21.1821 33.4827C21.3659 34.2575 21.6162 35.0132 22.0229 35.7074C22.242 36.0795 22.5001 36.4208 22.8677 36.6663C23.2706 36.9348 23.7242 36.931 24.1271 36.6625C24.4008 36.4784 24.612 36.2367 24.7958 35.9682C25.2652 35.2778 25.5389 34.5107 25.7462 33.7129C25.7697 33.617 25.7931 33.5211 25.8166 33.4137H21.1821V33.4099ZM29.3209 27.3342C28.9845 26.2027 26.634 24.2888 25.4412 24.1737C26.1217 25.1326 26.4698 26.2142 26.7201 27.3342H29.3209ZM21.5419 24.1814C20.2552 24.3847 17.8695 26.3408 17.6856 27.3381H20.2669C20.5172 26.2219 20.8614 25.1479 21.5419 24.1814ZM26.7201 33.406C26.4737 34.5184 26.1256 35.5923 25.4372 36.5742C26.5323 36.2329 27.4475 35.6806 28.2219 34.9058C28.6638 34.4647 29.0315 33.9737 29.3287 33.4099H26.7161L26.7201 33.406ZM20.2669 33.4137H17.6778C18.2097 34.6871 20.3569 36.4285 21.5262 36.5436C20.8653 35.5962 20.5172 34.5299 20.2669 33.4137Z" fill="#7C7D81"/>
+</svg>

img/monitor1.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.05105 10.4495C1.05105 15.5708 5.03278 19.5654 10.0865 19.6166C15.1913 19.6166 19.2241 15.6732 19.2241 10.5519C19.2241 5.43059 15.2423 1.38477 10.1886 1.38477C5.13487 1.38477 1.05105 5.32816 1 10.5007L1.05105 10.4495Z" stroke="#7C7D81" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M12.0262 6.45442C11.5158 7.1714 11.4647 7.99081 12.0262 8.50293C12.5367 9.06628 13.3535 9.06628 14.1702 8.50293C14.936 9.78326 14.8849 12.3951 12.9451 13.9315C11.2095 15.3143 8.55498 15.1606 6.97249 13.6242C5.39001 12.0366 5.23687 9.42477 6.61516 7.63231C8.14659 5.68622 10.75 5.68622 12.0262 6.4032V6.45442Z" fill="#7C7D81"/>
+</svg>

img/monitor2.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.05105 10.4495C1.05105 15.5708 5.03278 19.5654 10.0865 19.6166C15.1913 19.6166 19.2241 15.6732 19.2241 10.5519C19.2241 5.43059 15.2423 1.38477 10.1886 1.38477C5.13487 1.38477 1.05105 5.32816 1 10.5007L1.05105 10.4495Z" stroke="#101010" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M12.0262 6.45442C11.5158 7.1714 11.4647 7.99081 12.0262 8.50293C12.5367 9.06628 13.3535 9.06628 14.1702 8.50293C14.936 9.78326 14.8849 12.3951 12.9451 13.9315C11.2095 15.3143 8.55498 15.1606 6.97249 13.6242C5.39001 12.0366 5.23687 9.42477 6.61516 7.63231C8.14659 5.68622 10.75 5.68622 12.0262 6.4032V6.45442Z" fill="#101010"/>
+</svg>

img/off.svg

@@ -0,0 +1,5 @@
+<svg width="59" height="30" viewBox="0 0 59 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.25" width="34.2881" height="29.75" rx="8" fill="#7C7D81"/>
+<path d="M8 0.5H50.375C54.5171 0.5 57.875 3.85786 57.875 8V21.75C57.875 25.8921 54.5171 29.25 50.375 29.25H8C3.85786 29.25 0.5 25.8921 0.5 21.75V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="#7C7D81"/>
+<path d="M12.9929 19.182C10.8229 19.182 9.50694 17.712 9.50694 15.276C9.50694 12.742 10.8649 11.342 12.9929 11.342C15.1629 11.342 16.4789 12.84 16.4789 15.276C16.4789 17.796 15.1209 19.182 12.9929 19.182ZM12.9929 17.922C14.2669 17.922 14.9529 16.998 14.9529 15.276C14.9529 13.568 14.2529 12.602 12.9929 12.602C11.7329 12.602 11.0329 13.54 11.0329 15.276C11.0329 16.97 11.7329 17.922 12.9929 17.922ZM17.0973 12.7V11.538H18.1053V11.146C18.1053 9.522 18.7913 8.738 20.1913 8.738C20.5693 8.738 20.8633 8.808 21.0173 8.878V9.886H20.8773C19.8413 9.886 19.5893 10.306 19.5893 11.16V11.538H21.0173V12.7H19.5893V19H18.1053V12.7H17.0973ZM21.1032 12.7V11.538H22.1112V11.146C22.1112 9.522 22.7972 8.738 24.1972 8.738C24.5752 8.738 24.8692 8.808 25.0232 8.878V9.886H24.8832C23.8472 9.886 23.5952 10.306 23.5952 11.16V11.538H25.0232V12.7H23.5952V19H22.1112V12.7H21.1032Z" fill="#101010"/>
+</svg>

img/on.svg

@@ -0,0 +1,5 @@
+<svg width="59" height="30" viewBox="0 0 59 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="24.25" width="34.2881" height="29.75" rx="8" fill="#FFB806"/>
+<path d="M8 0.5H50.375C54.5171 0.5 57.875 3.85786 57.875 8V21.75C57.875 25.8921 54.5171 29.25 50.375 29.25H8C3.85786 29.25 0.5 25.8921 0.5 21.75V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="#7C7D81"/>
+<path d="M36.9519 19.182C34.7819 19.182 33.4659 17.712 33.4659 15.276C33.4659 12.742 34.8239 11.342 36.9519 11.342C39.1219 11.342 40.4379 12.84 40.4379 15.276C40.4379 17.796 39.0799 19.182 36.9519 19.182ZM36.9519 17.922C38.2259 17.922 38.9119 16.998 38.9119 15.276C38.9119 13.568 38.2119 12.602 36.9519 12.602C35.6919 12.602 34.9919 13.54 34.9919 15.276C34.9919 16.97 35.6919 17.922 36.9519 17.922ZM41.8963 19V11.538H43.3943V12.532C43.8983 11.734 44.6823 11.342 45.6483 11.342C47.2023 11.342 48.1683 12.252 48.1683 14.016V19H46.6843V14.324C46.6843 13.246 46.2083 12.588 45.1863 12.588C44.0663 12.588 43.3943 13.582 43.3943 14.618V19H41.8963Z" fill="#101010"/>
+</svg>

img/settings1.svg

@@ -0,0 +1,4 @@
+<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.0632 10.6142C18.0632 11.7655 18.0632 12.8209 18.0632 13.9722C18.0632 15.4113 17.5238 16.4667 16.3551 17.1383C14.5571 18.2896 12.6693 19.4409 10.8713 20.4963C9.70261 21.1679 8.53391 21.1679 7.36523 20.4963C5.56726 19.345 3.76928 18.2896 1.97131 17.1383C0.80263 16.3708 0.17334 15.3154 0.17334 13.8763C0.17334 11.6696 0.17334 9.46292 0.17334 7.16031C0.17334 5.72118 0.80263 4.66579 1.97131 3.89825C3.76928 2.74694 5.56726 1.69158 7.36523 0.540273C8.53391 -0.131322 9.70261 -0.227264 10.8713 0.540273C12.6693 1.69158 14.5571 2.74694 16.3551 3.89825C17.5238 4.56985 18.0632 5.72118 18.0632 7.16031C18.0632 8.31162 18.0632 9.36698 18.0632 10.5183V10.6142ZM16.7147 10.6142C16.7147 9.4629 16.7147 8.31159 16.7147 7.25623C16.7147 6.39275 16.3551 5.72115 15.7258 5.33738C13.9279 4.18608 12.0399 3.03479 10.1521 1.88349C9.43288 1.49972 8.80365 1.49972 8.08446 1.88349C6.28649 3.03479 4.48843 4.09016 2.60056 5.24147C1.88137 5.72118 1.52182 6.39275 1.52182 7.25623C1.52182 9.4629 1.52182 11.7655 1.52182 13.9722C1.52182 14.8357 1.88137 15.5072 2.60056 15.9869C4.39853 17.1383 6.19659 18.1936 8.08446 19.3449C8.80365 19.8246 9.52275 19.7287 10.2419 19.3449C12.0399 18.1936 13.838 17.1383 15.7258 15.9869C16.445 15.5072 16.8046 14.9316 16.8046 14.0681C16.8046 12.9168 16.8046 11.8614 16.8046 10.7101L16.7147 10.6142Z" fill="#7C7D81"/>
+<path d="M9.16305 14.7404C7.00548 14.7404 5.29736 12.9174 5.29736 10.6148C5.29736 8.31221 7.00548 6.48926 9.16305 6.48926C11.3206 6.48926 13.0287 8.31221 13.0287 10.6148C13.0287 12.9174 11.3206 14.7404 9.16305 14.7404ZM11.6803 10.6148C11.6803 9.17569 10.6014 7.92839 9.16305 7.92839C7.81457 7.92839 6.64584 9.07974 6.64584 10.6148C6.64584 12.054 7.72467 13.3012 9.16305 13.3012C10.5115 13.3012 11.6803 12.1499 11.6803 10.6148Z" fill="#7C7D81"/>
+</svg>

img/settings2.svg

@@ -0,0 +1,4 @@
+<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.0632 10.6142C18.0632 11.7655 18.0632 12.8209 18.0632 13.9722C18.0632 15.4113 17.5238 16.4667 16.3551 17.1383C14.5571 18.2896 12.6693 19.4409 10.8713 20.4963C9.70261 21.1679 8.53391 21.1679 7.36523 20.4963C5.56726 19.345 3.76928 18.2896 1.97131 17.1383C0.80263 16.3708 0.17334 15.3154 0.17334 13.8763C0.17334 11.6696 0.17334 9.46292 0.17334 7.16031C0.17334 5.72118 0.80263 4.66579 1.97131 3.89825C3.76928 2.74694 5.56726 1.69158 7.36523 0.540273C8.53391 -0.131322 9.70261 -0.227264 10.8713 0.540273C12.6693 1.69158 14.5571 2.74694 16.3551 3.89825C17.5238 4.56985 18.0632 5.72118 18.0632 7.16031C18.0632 8.31162 18.0632 9.36698 18.0632 10.5183V10.6142ZM16.7147 10.6142C16.7147 9.4629 16.7147 8.31159 16.7147 7.25623C16.7147 6.39275 16.3551 5.72115 15.7258 5.33738C13.9279 4.18608 12.0399 3.03479 10.1521 1.88349C9.43288 1.49972 8.80365 1.49972 8.08446 1.88349C6.28649 3.03479 4.48843 4.09016 2.60056 5.24147C1.88137 5.72118 1.52182 6.39275 1.52182 7.25623C1.52182 9.4629 1.52182 11.7655 1.52182 13.9722C1.52182 14.8357 1.88137 15.5072 2.60056 15.9869C4.39853 17.1383 6.19659 18.1936 8.08446 19.3449C8.80365 19.8246 9.52275 19.7287 10.2419 19.3449C12.0399 18.1936 13.838 17.1383 15.7258 15.9869C16.445 15.5072 16.8046 14.9316 16.8046 14.0681C16.8046 12.9168 16.8046 11.8614 16.8046 10.7101L16.7147 10.6142Z" fill="#101010"/>
+<path d="M9.16305 14.7404C7.00548 14.7404 5.29736 12.9174 5.29736 10.6148C5.29736 8.31221 7.00548 6.48926 9.16305 6.48926C11.3206 6.48926 13.0287 8.31221 13.0287 10.6148C13.0287 12.9174 11.3206 14.7404 9.16305 14.7404ZM11.6803 10.6148C11.6803 9.17569 10.6014 7.92839 9.16305 7.92839C7.81457 7.92839 6.64584 9.07974 6.64584 10.6148C6.64584 12.054 7.72467 13.3012 9.16305 13.3012C10.5115 13.3012 11.6803 12.1499 11.6803 10.6148Z" fill="#101010"/>
+</svg>

img/upgrade.svg

@@ -0,0 +1,19 @@
+<svg width="175" height="60" viewBox="0 0 175 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1247_210)">
+<rect x="16.5" y="14.5" width="158" height="45" rx="7.5" fill="white"/>
+<rect x="16.5" y="14.5" width="158" height="45" rx="7.5" stroke="#101010"/>
+<path d="M44 26C35.1903 26 28 33.1903 28 42C28 50.8097 35.1903 58 44 58C52.8097 58 60 50.8097 60 42C60 33.1903 52.8097 26 44 26ZM32.4696 42C32.4696 38.6964 33.8947 35.6518 36.1619 33.579C37.0688 32.7369 38.6235 32.996 39.2713 34.0972L43.2874 41.0284C43.6761 41.6761 43.6761 42.4534 43.2874 43.1012L39.2713 50.0324C38.6235 51.1984 37.0688 51.3927 36.0972 50.4858C33.8947 48.2834 32.4696 45.3037 32.4696 42ZM48.7287 49.9028L44.7126 42.9717C44.3239 42.3239 44.3239 41.5466 44.7126 40.8988L48.7287 33.9676C49.3765 32.8664 50.8664 32.6073 51.8381 33.4494C54.1053 35.5223 55.5304 38.5668 55.5304 41.8704C55.5304 45.1741 54.1053 48.2186 51.8381 50.2915C50.8664 51.3279 49.3765 51.0688 48.7287 49.9028Z" fill="white"/>
+<rect x="8.5" y="7.5" width="158" height="45" rx="7.5" fill="white"/>
+<rect x="8.5" y="7.5" width="158" height="45" rx="7.5" stroke="#101010"/>
+<path d="M36 19C27.1903 19 20 26.1903 20 35C20 43.8097 27.1903 51 36 51C44.8097 51 52 43.8097 52 35C52 26.1903 44.8097 19 36 19ZM24.4696 35C24.4696 31.6964 25.8947 28.6518 28.1619 26.579C29.0688 25.7369 30.6235 25.996 31.2713 27.0972L35.2874 34.0284C35.6761 34.6761 35.6761 35.4534 35.2874 36.1012L31.2713 43.0324C30.6235 44.1984 29.0688 44.3927 28.0972 43.4858C25.8947 41.2834 24.4696 38.3037 24.4696 35ZM40.7287 42.9028L36.7126 35.9717C36.3239 35.3239 36.3239 34.5466 36.7126 33.8988L40.7287 26.9676C41.3765 25.8664 42.8664 25.6073 43.8381 26.4494C46.1053 28.5223 47.5304 31.5668 47.5304 34.8704C47.5304 38.1741 46.1053 41.2186 43.8381 43.2915C42.8664 44.3279 41.3765 44.0688 40.7287 42.9028Z" fill="white"/>
+<rect x="0.5" y="0.5" width="158" height="45" rx="7.5" fill="white"/>
+<rect x="0.5" y="0.5" width="158" height="45" rx="7.5" stroke="black"/>
+<path d="M143.172 31.1716L131 18.9997L133 17L145.172 29.1705L145.172 18.4439L148 18.4439L148 34L132.444 34L132.444 31.1716L143.172 31.1716Z" fill="#101010"/>
+</g>
+<path d="M23.4148 25.856C23.4148 28.576 21.6868 30.24 18.8868 30.24C16.0868 30.24 14.3588 28.576 14.3588 25.856V19.12H16.5188V25.856C16.5188 27.504 17.3988 28.496 18.8868 28.496C20.3908 28.496 21.2708 27.504 21.2708 25.856V19.12H23.4148V25.856ZM27.3904 33.52H25.3424V21.424H27.3904V22.4C27.9344 21.616 28.7024 21.184 29.6464 21.184C31.8864 21.184 33.2624 22.896 33.2624 25.696C33.2624 28.608 31.8544 30.24 29.6464 30.24C28.7024 30.24 27.9184 29.84 27.3904 29.072V33.52ZM29.2784 22.88C28.0464 22.88 27.3904 23.872 27.3904 25.696C27.3904 27.52 28.0784 28.544 29.2784 28.544C30.4944 28.544 31.1504 27.536 31.1504 25.696C31.1504 23.888 30.4784 22.88 29.2784 22.88ZM37.8687 30.032C35.6927 30.032 34.3487 28.352 34.3487 25.616C34.3487 22.768 35.7247 21.184 37.8687 21.184C38.8927 21.184 39.6927 21.568 40.2207 22.288V21.424H42.2687V30.272C42.2687 32.592 40.6687 33.776 38.5407 33.776C36.4287 33.776 34.8927 32.8 34.5887 30.768H36.6527C36.7807 31.68 37.5167 32.16 38.5087 32.16C39.5327 32.16 40.2207 31.664 40.2207 30.304V28.864C39.6607 29.632 38.8607 30.032 37.8687 30.032ZM38.3327 28.336C39.5647 28.336 40.2207 27.376 40.2207 25.616C40.2207 23.872 39.5327 22.88 38.3327 22.88C37.1167 22.88 36.4607 23.84 36.4607 25.616C36.4607 27.36 37.1167 28.336 38.3327 28.336ZM44.1549 30V21.424H46.2029V22.672C46.7629 21.648 47.6269 21.184 48.5549 21.184C48.9069 21.184 49.2269 21.28 49.3869 21.424V23.2C49.1149 23.12 48.8109 23.088 48.4429 23.088C46.8909 23.088 46.2029 24.016 46.2029 25.44V30H44.1549ZM52.3577 24.24H50.2937C50.5657 22.336 51.9577 21.184 54.1177 21.184C56.5017 21.184 57.7177 22.592 57.7177 24.576V27.904C57.7177 28.96 57.8137 29.552 57.9737 30H55.8457C55.7337 29.712 55.6857 29.296 55.6697 28.832C54.9657 29.824 53.9097 30.24 52.8857 30.24C51.2057 30.24 50.0057 29.408 50.0057 27.76C50.0057 26.592 50.6617 25.712 51.9737 25.28C53.1097 24.896 54.2137 24.8 55.6537 24.784V24.576C55.6537 23.472 55.1257 22.88 53.9897 22.88C53.0137 22.88 52.4857 23.424 52.3577 24.24ZM52.0697 27.648C52.0697 28.304 52.5817 28.72 53.4137 28.72C54.6777 28.72 55.6537 27.696 55.6537 26.416V26.048C52.7417 26.096 52.0697 26.784 52.0697 27.648ZM62.8866 30.24C60.6466 30.24 59.2706 28.528 59.2706 25.728C59.2706 22.816 60.6786 21.184 62.8866 21.184C63.8306 21.184 64.6146 21.584 65.1426 22.352V18.48H67.1906V30H65.1426V29.024C64.5986 29.808 63.8306 30.24 62.8866 30.24ZM63.2546 28.544C64.4866 28.544 65.1426 27.552 65.1426 25.728C65.1426 23.904 64.4546 22.88 63.2546 22.88C62.0386 22.88 61.3826 23.888 61.3826 25.728C61.3826 27.536 62.0546 28.544 63.2546 28.544ZM76.8852 27.2C76.4212 29.184 74.8852 30.24 72.8372 30.24C70.2452 30.24 68.6612 28.528 68.6612 25.728C68.6612 22.816 70.2612 21.184 72.7572 21.184C75.2692 21.184 76.8212 22.88 76.8212 25.648V26.128H70.7732C70.8692 27.696 71.5892 28.56 72.8372 28.56C73.7972 28.56 74.4532 28.112 74.7252 27.2H76.8852ZM72.7572 22.864C71.6692 22.864 71.0132 23.552 70.8212 24.848H74.6772C74.4852 23.568 73.8292 22.864 72.7572 22.864ZM81.5642 30V19.12H83.8362L87.8682 25.584L88.6202 27.072L88.5402 19.12H90.6842V30H88.4282L84.3962 23.552L83.6282 22.032L83.7242 30H81.5642ZM96.4294 30.24C93.8854 30.24 92.3174 28.528 92.3174 25.728C92.3174 22.816 93.9334 21.184 96.4294 21.184C98.9574 21.184 100.525 22.912 100.525 25.728C100.525 28.608 98.9094 30.24 96.4294 30.24ZM96.4294 28.544C97.7254 28.544 98.4134 27.552 98.4134 25.728C98.4134 23.904 97.7094 22.88 96.4294 22.88C95.1174 22.88 94.4294 23.888 94.4294 25.728C94.4294 27.536 95.1334 28.544 96.4294 28.544ZM109.505 30L107.953 24.256L107.793 23.248L107.601 24.256L106.065 30H103.521L101.137 21.424H103.329L104.705 27.472L104.913 28.512L105.153 27.472L106.801 21.424H108.929L110.577 27.472L110.785 28.48L110.977 27.472L112.369 21.424H114.465L112.065 30H109.505Z" fill="#101214"/>
+<defs>
+<clipPath id="clip0_1247_210">
+<rect width="175" height="60" fill="white"/>
+</clipPath>
+</defs>
+</svg>

index.html

@@ -3,21 +3,26 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+<meta http-equiv="Pragma" content="no-cache" />
+<meta http-equiv="Expires" content="0" />
 <title>Safebox installer</title>
 <style>
-body, html {
+html, body {
     margin: 0;
     padding: 0;
     height: 100%;
+    overflow: hidden;
 }
 iframe {
-    width: 100%;
-    height: 100%;
+    display: block;
+    width: 100vw;
+    height: 100vh;
     border: none;
 }
 </style>
 </head>
 <body>
-    <iframe src="scan.html"></iframe>
+    <iframe src="scan.html?t=1"></iframe>
 </body>
 </html>

install.html

@@ -1,175 +1,172 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="hu">
 <head>
-<!-- Required meta tags -->
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>INSTALLER TOOL</title>
-<!-- Bootstrap CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-<!-- Custom styles for this template -->
-<link href="installer.css?t=3" rel="stylesheet">
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+<meta http-equiv="Pragma" content="no-cache" />
+<meta http-equiv="Expires" content="0" />
+<title>Safebox - INSTALLER TOOL</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
+<link rel="stylesheet" href="style.css?t=1" />
 </head>
-<body id="installer" class="text-center">
-<div class="container-fluid">
-<div class="col-md-12">
+<body id="installer">
+  <div class="main" style="max-width:1000px;margin:0px auto;">
+    <div id="myAppsContainer">
+	      <div class="logo">
+		<img src="/img/logo.svg" alt="Safebox"/>
+		<span>Safebox</span>
+	      </div>
+		<h3 style="text-align:center">No any previous deployed environment has found</h3>
+		<div class="main-header">
+			<h1>Base settings</h1>
+		</div>
+
 <form class="form-install" action="install.php" method="post">
-
-<h1>No any previous deployed environment found</h1>
-
-<fieldset>
-<legend>Base settings</legend>
-<div class="row">
-    <div class="mb-3">
-		<label for="user_auth">User auth (homeguard) enable?</label>
+<!-- base settings -->
+<div class="input-row">
+	<label for="user_auth">User auth (homeguard) enable?</label>
+	<div class="input-container">
 		<select class="custom-select d-block w-100" name="USER_AUTH" id="user_auth">
 		<option value="yes">Yes</option>
 		<option value="no" selected>No</option>
 		</select>
-    </div>
+	</div>
 </div>
 <div id="div_user_auth" class="hidden">
-	<div class="row">
-	    <div class="mb-3">
+	<div class="input-row">
 		<label for="auth_username">Username:</label>
+		<div class="input-container">
 		<input type="text" class="form-control" name="AUTH_USERNAME" id="auth_username" value="" maxlength="20" size="20">
-	    </div>
+	    	</div>
 	</div>
-	<div class="row">
-	    <div class="mb-3">
+	<div class="input-row">
 		<label for="auth_password">Password:</label>
+		<div class="input-container">
 		<input type="text" class="form-control" name="AUTH_PASSWORD" id="auth_password" value="" maxlength="20" size="20">
-	    </div>
+		</div>
 	</div>
-	<div class="row">
-	    <div class="mb-3">
+	<div class="input-row">
 		<label for="auth_role">Role:</label>
+		<div class="input-container">
 		<select class="custom-select d-block w-100" name="AUTH_ROLE" id="auth_role">
 		<option value="admin">Admin</option>
 		</select>
-	    </div>
+		</div>
 	</div>
 </div>
-<div class="row">
-    <div class="mb-3">
-		<label for="vpn">Proxy enable?</label>
+<div class="input-row">
+	<label for="vpn">Proxy enable?</label>
+	<div class="input-container">
 		<select class="custom-select d-block w-100" name="VPN_PROXY" id="vpn">
 		<option value="yes">Yes</option>
 		<option value="no" selected>No</option>
 		</select>
-    </div>
-</div>
-<div id="div_vpn" class="hidden">
-	<div class="row">
-	    <div class="mb-3">
-			<label for="vpn_domain">Please add domain url to download the VPN hash from (default: https://portal.safebox.network):</label>
-			<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network">
-			<div class="invalid-feedback">
-			Please enter a valid domain.
-			</div>
-	    </div>
 	</div>
-	<div class="row">
-	    <div class="mb-3">
-			<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
+</div>
+<div id="div_vpn1" class="hidden">
+	<div class="input-row">
+		<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
+		<div class="input-container">
 			<input type="text" class="form-control" name="VPN_PASS" id="vpn_pass" value="" maxlength="8" size="10">
-	    </div>
+		</div>
 	</div>
-	<div class="row">
-	    <div class="mb-3">
-			<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
+	<div class="input-row">
+		<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
+		<div class="input-container">
 			<input type="email" class="form-control" name="LETSENCRYPT_MAIL" id="letsencrypt_mail" value="">
-			<div class="invalid-feedback">
-			Please enter a valid email.
-			</div>
-	    </div>
-	</div>
-	<div class="row">
-	    <div class="mb-3">
-			<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
-			<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt">
-	    </div>
+		</div>
 	</div>
 </div>
-<div class="row">
-    <div class="mb-3">
-		<label for="diagnostic">Diagnostic mode enable?</label>
+<div class="input-row">
+	<label for="diagnostic">Diagnostic mode enable?</label>
+	<div class="input-container">
 		<select class="custom-select d-block w-100" name="DIAGNOSTIC" id="diagnostic">
 		<option value="yes">Yes</option>
 		<option value="no" selected>No</option>
 		</select>
-    </div>
+	</div>
 </div>
-</fieldset>
-
-<fieldset>
-<legend><a href="javascript:void()" id="advanced">Advanced settings</a></legend>
+<!-- base settings end -->
+<br>
+<br>
+		<div class="main-header">
+			<h1 id="advanced" style="cursor:pointer">Advanced settings</h1>
+		</div>
+<!-- advanced settings -->
 <div id="advanced_div" style="display:none">
-<div class="row">
-    <div class="mb-3">
+	<div id="div_vpn2" class="hidden">
+		<div class="input-row">
+			<label for="vpn_domain">Please add domain url to download the VPN hash from:</label>
+			<div class="input-container">
+				<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://pro.safebox.network" placeholder="https://pro.safebox.network" size="40">
+			</div>
+		</div>
+		<div class="input-row">
+			<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
+			<div class="input-container">
+				<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt" placeholder="letsencrypt">
+			</div>
+		</div>
+	</div>
+	<div class="input-row">
 		<label for="registry">Please fill in the docker registry name (default:safebox):</label>
-		<input type="registry" class="form-control" name="DOCKER_REGISTRY_URL" id="registry" value="safebox" required>
-		<div class="invalid-feedback">
-		Please enter a valid registry url.
+		<div class="input-container">
+			<input type="registry" class="form-control" name="DOCKER_REGISTRY_URL" id="registry" value="safebox" placeholder="safebox" required>
 		</div>
-    </div>
-</div>
-<div class="row">
-    <div class="mb-3">
+	</div>
+	<div class="input-row">
 		<label for="smarthost">Smarthost proxy?</label>
-		<select class="custom-select d-block w-100" name="SMARTHOST_PROXY" id="smarthost">
-		<option value="yes" selected>Yes</option>
-		<option value="no">No</option>
-		</select>
-    </div>
-</div>
-<div id="div_smarthost">
-	<div class="row">
-	    <div class="mb-3">
-		<label for="domain">Please fill in the domain name</label>
-		<input type="domain" class="form-control" name="DOMAIN" id="domain" value="localhost">
-		<div class="invalid-feedback">
-		Please enter a valid domain.
+		<div class="input-container">
+			<select class="custom-select d-block w-100" name="SMARTHOST_PROXY" id="smarthost">
+			<option value="yes" selected>Yes</option>
+			<option value="no">No</option>
+			</select>
 		</div>
-	    </div>
 	</div>
-	<div class="row">
-	    <div class="mb-3">
-		<label for="local_backend">Would you like to run local backend?</label>
-		<select class="custom-select d-block w-100" name="LOCAL_BACKEND" id="local_backend">
-		<option value="yes">Yes</option>
-		<option value="no" selected>No</option>
-		</select>
-	    </div>
+	<div id="div_smarthost">
+		<div class="input-row">
+			<label for="domain">Please fill in the domain name</label>
+			<div class="input-container">
+				<input type="domain" class="form-control" name="DOMAIN" id="domain" value="localhost">
+			</div>
+		</div>
+		<div class="input-row">
+			<label for="local_backend">Would you like to run local backend?</label>
+			<div class="input-container">
+				<select class="custom-select d-block w-100" name="LOCAL_BACKEND" id="local_backend">
+				<option value="yes">Yes</option>
+				<option value="no" selected>No</option>
+				</select>
+			</div>
+		</div>
 	</div>
-</div>
-<div class="row">
-    <div class="mb-3">
+	<div class="input-row">
 		<label for="localproxy">Local proxy?</label>
-		<select class="custom-select d-block w-100" name="LOCAL_PROXY" id="localproxy">
-		<option value="yes" selected>Yes</option>
-		<option value="no">No</option>
-		</select>
-    </div>
-</div>
-<div class="row">
-    <div class="mb-3">
+		<div class="input-container">
+			<select class="custom-select d-block w-100" name="LOCAL_PROXY" id="localproxy">
+			<option value="yes" selected>Yes</option>
+			<option value="no">No</option>
+			</select>
+		</div>
+	</div>
+	<div class="input-row">
 		<label for="cron">Cron?</label>
-		<select class="custom-select d-block w-100" name="CRON" id="cron">
-		<option value="yes">Yes</option>
-		<option value="no">No</option>
-		</select>
-    </div>
+		<div class="input-container">
+			<select class="custom-select d-block w-100" name="CRON" id="cron">
+			<option value="yes">Yes</option>
+			<option value="no">No</option>
+			</select>
+		</div>
+	</div>
 </div>
-</div>
-</fieldset>
-<br>
-<button class="btn btn-lg btn-primary btn-block" type="submit">Start install</button>
+<!-- advanced settings end -->
+	<button class="save-button" type="submit">Start install</button>
 </form>
-</div>
-</div>
-<br>
-<br>
+    </div>
+  </div>
+
 <!-- Optional JavaScript -->
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
@@ -204,8 +201,14 @@ jQuery(document).ready(function(){
 		else jQuery('#div_user_auth').hide();
 	});
 	jQuery('select#vpn').click(function() {
-		if (jQuery(this).val()=='yes') jQuery('#div_vpn').show();
-		else jQuery('#div_vpn').hide();
+		if (jQuery(this).val()=='yes') {
+			jQuery('#div_vpn1').show();
+			jQuery('#div_vpn2').show();
+		}
+		else {
+			jQuery('#div_vpn1').hide();
+			jQuery('#div_vpn2').hide();
+		}
 	});
 	jQuery('select#discovery').click(function() {
 		if (jQuery(this).val()=='yes') jQuery('#div_discover').show();

install.js

@@ -0,0 +1,173 @@
+
+function updateProgress(percentage) {
+    // Clamp percentage between 0 and 99.9 (never reach 100)
+    percentage = Math.max(0, Math.min(99.9, percentage));
+    
+    progressBar.style.width = percentage + '%';
+    progressText.textContent = Math.round(percentage) + '%';
+    currentProgress = percentage;
+}
+
+function setProgress(percentage) {
+    clearInterval(progressInterval);
+    updateProgress(percentage);
+    startProgress(60000);
+}
+
+function startProgress(duration) {
+    clearInterval(progressInterval);
+    const startTime = Date.now() - (currentProgress / 100) * duration;
+    
+    progressInterval = setInterval(() => {
+	const elapsed = Date.now() - startTime;
+	// Use exponential approach to 100% - gets slower as it approaches
+	let progress = (1 - Math.exp(-4 * elapsed / duration)) * 100;
+	
+	// Ensure it never reaches 100%
+	progress = Math.min(progress, 99.9);
+	
+	updateProgress(progress);
+	
+	// Stop when we've been running for 60+ seconds
+	if (elapsed >= duration) {
+	    clearInterval(progressInterval);
+	}
+    }, 100); // Update every 100ms
+}
+
+function resetProgress() {
+    clearInterval(progressInterval);
+    updateProgress(0);
+}
+
+// Example: Simulate loading with custom speeds
+function simulateLoading(duration = 3000) {
+    clearInterval(progressInterval);
+    const startTime = Date.now();
+    
+    progressInterval = setInterval(() => {
+	const elapsed = Date.now() - startTime;
+	const progress = Math.min((elapsed / duration) * 100, 99.9);
+	
+	updateProgress(progress);
+	
+	if (elapsed >= duration) {
+	    clearInterval(progressInterval);
+	}
+    }, 16); // ~60fps
+}
+
+function redirectToInstall() {
+	setProgress(100);
+	window.location.href = 'install.html?t='+Date.now();
+}
+
+function redirectToManage() {
+	setProgress(100);
+	window.location.href = 'manage.html?t='+Date.now();
+}
+
+function start_system() {
+  var url  = 'scan.php?op=system';
+  $.get(url, function(data){
+    console.log('start_system: '+data);
+    if (data=='OK') {
+      $("#info").html('Scanning for previous install. Please wait...');
+      check_system();
+    }
+    else {
+      $("#info").html('Scanning for previous install has aborted...');
+    }
+  });
+}
+
+function check_system() {
+  var url  = 'scan.php?op=check_system';
+  $.get(url, function(data){
+    console.log('check_system: '+data);
+    if (data=='NEW') {
+      $("#info").html('No previous install has found...');
+      setTimeout(redirectToInstall, 3000);
+    }
+    else if (data=='EXISTS') {
+      $("#info").html('Previous install has found...');
+      setProgress(80);
+      setTimeout(redirectToManage, 3000);
+    }
+    else if (data=='WAIT') {
+      setTimeout(check_system, 1000);
+    }
+    else {
+	    // UNEXPECTED ERROR
+    }
+  });
+}
+
+function check_redis() {
+
+  var url  = 'scan.php?op=redis';
+  $.get(url, function(data){
+    console.log('check_redis: '+data);
+    if (data=='OK') {
+      $("#info").html('Redis server - OK');
+      check_install();
+    }
+    else {
+      $("#info").html('Redis server is not available...');
+      setTimeout(check_redis, 1000);
+    }
+  });
+}
+
+function check_directory() {
+
+  var url  = 'scan.php?op=directory';
+  $.get(url, function(data){
+    console.log('check_directory: '+data);
+    if (data=='OK') {
+      $("#info").html('Connection is ready - OK');
+      check_install();
+    }
+    else {
+      $("#info").html('Shared directory is not available...');
+    }
+  });
+}
+
+function check_interface() {
+
+  var url  = 'scan.php?op=get_interface';
+  $.get(url, function(data){
+    console.log('check_interface: '+data);
+    if (data=='redis') {
+  	check_redis();
+    }
+    else if (data=='directory') {
+  	check_directory();
+    }
+    else {
+	$("#info").html('Invalid interface definition...');
+    }
+  });
+}
+
+function check_install() {
+
+    console.log('install: '+install);
+    if (install==1) {
+	  var url  = 'scan.php?op=check_install';
+	  $.get(url, function(data){
+	    console.log('check_install:'+data+' counter: '+counter);
+	    if (data=='INSTALLED') {
+		redirectToManage();
+	    }
+	    else {
+	      counter+=1
+	      $("#info").html('Please wait ...');
+	      setTimeout(check_install, 1000);
+	    }
+	  });
+    }
+    else start_system(); // scan
+}
+

install.php

@@ -46,7 +46,7 @@ else {
 	$header_text="Installing in progress... Please wait...";
 	//$key = "install:".date("YmdHis");
 	$key = "install";
-	if (set_output($key,$json)) echo "OK";
+	if (set_output($key,$json)) echo "";
 	else echo "ERROR";
 }
 
@@ -61,106 +61,54 @@ echo "<pre>".$output."</pre>";
 //echo $output;
 */
 
-?>
-<!doctype html>
+?><!DOCTYPE html>
 <html lang="en">
 <head>
-<!-- Required meta tags -->
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>INSTALLER TOOL</title>
-<!-- Bootstrap CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-<!-- Custom styles for this template -->
-<link href="installer.css?t=1" rel="stylesheet">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Safebox - INSTALLER TOOL</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
+  <link rel="stylesheet" href="style.css?t=4" />
 </head>
 <body id="install" class="text-center">
-<div class="container-fluid">
-<div class="col-md-12">
-	<h1><?php echo $header_text?></h1>
-	<div id="redis"></div>
-	<div id="response"></div>
-</div>
-</div>
+  <div class="main">
+    <div id="myAppsContainer">
+	<div class="logo" style="margin:100px 0px 20px 0px;">
+		<img src="/img/logo.svg" alt="Safebox"/>
+		<span>Safebox</span>
+	</div>
+	<div class="progress-box">
+		<div class="progress-title"><?php echo $header_text?></div>
+		<div class="progress-description" id="info"></div>
+		<div class="progress-container-shadow">
+		</div>
+		<div class="progress-container">
+			<div class="progress-bar" id="progressBar"></div>
+			<div class="progress-text" id="progressText">0%</div>
+		</div>
+	</div>
+    </div>
+  </div>
 <!-- Optional JavaScript -->
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+<script src="install.js?t=7"></script>
 <script>
-$(function() {
+const progressBar = document.getElementById('progressBar');
+const progressText = document.getElementById('progressText');
+let currentProgress = 0;
+let progressInterval;
+let install = 1;
 
-function redirectToManage() {
-    window.location.href = 'manage.html';
-}
+// Initialize
+updateProgress(0);
+startProgress(90000);// 90 seconds
 
-function check_install() {
-
-  var url  = 'scan.php?op=check_install&key=<?php echo $key;?>';
-  $.get(url, function(data){
-    console.log('check_install:'+data+' counter: '+counter);
-    if (data=='INSTALLED') {
-	redirectToManage();
-    }
-    else {
-      counter+=1
-      $("#response").html('Please wait... ' + counter);
-      setTimeout(check_install, 1000);
-    }
-  });
-}
-
-function check_redis() {
-
-  var url  = 'scan.php?op=redis';
-  $.get(url, function(data){
-    console.log('check_redis: '+data);
-    if (data=='OK') {
-      $("#redis").html('Redis server - OK');
-      check_install();
-    }
-    else {
-      $("#redis").html('Redis server is not available...');
-      setTimeout(check_redis, 1000);
-    }
-  });
-}
-
-function check_directory() {
-
-  var url  = 'scan.php?op=directory';
-  $.get(url, function(data){
-    console.log('check_directory: '+data);
-    if (data=='OK') {
-      $("#redis").html('Connection is ready - OK');
-      check_install();
-    }
-    else {
-      $("#redis").html('Shared directory is not available...');
-    }
-  });
-}
-
-function check_interface() {
-
-  var url  = 'scan.php?op=get_interface';
-  $.get(url, function(data){
-    console.log('check_interface: '+data);
-    if (data=='redis') {
-  	check_redis();
-    }
-    else if (data=='directory') {
-  	check_directory();
-    }
-    else {
-	$("#redis").html('Invalid interface definition...');
-    }
-  });
-}
-
-  check_interface();
-  counter=0;
-});
+check_interface();
+counter=0;
 </script>
 </body>
 </html>

manage.html

@@ -1,157 +1,395 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="hu">
 <head>
-<!-- Required meta tags -->
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>INSTALLER TOOL</title>
-<!-- Bootstrap CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-<!-- Custom styles for this template -->
-<link href="installer.css?t=7" rel="stylesheet">
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+<meta http-equiv="Pragma" content="no-cache" />
+<meta http-equiv="Expires" content="0" />
+<title>Safebox</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
+<link rel="stylesheet" href="style.css?t=16" />
 </head>
-<body id="manage" class="text-center">
-<div class="container-fluid">
-<div class="col-md-12">
-
-<h1>Found deployed environment</h1>
-
-<div style="text-align:left;float:left;width:33%">
-	<a href="javascript:void()" id="vpn_btn">VPN</a>
-        Status:
-	<span id="vpn_on" class="hidden green"><b>ON</b></span>
-	<span id="vpn_off" class="hidden red"><b>OFF</b></span>
-</div>
-<div style="text-align:center;float:left;width:34%">
-        <a href="manage.html" id="refresh_btn">REFRESH</a>
-        /
-	<a href="manage2.html" id="new_btn">NEW DESIGN</a>
-</div>
-<div style="text-align:right;float:right">
-	<a href="javascript:void()" id="settings_btn">SETTINGS</a>
-</div>
-<div style="float:none;clear:both"/>
-
-<div id="vpn" class="hidden">
-	<fieldset>
-	<legend>Enable proxy</legend>
-	<form class="form-install" action="#" method="post" id="save_vpn">
-		<div class="row">
-		    <div class="mb-3">
-				<label for="vpn_domain">Please add domain url to download the VPN hash from (default: https://portal.safebox.network):</label>
-				<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network">
-				<div class="invalid-feedback">
-				Please enter a valid domain.
-				</div>
-		    </div>
+<body>
+  <div class="sidebar">
+    <div class="sidebar-top">
+      <div id="logo" class="logo">
+        <img src="/img/logo.svg" alt="Safebox"/>
+        <span>Safebox</span>
+      </div>
+      <div class="menu">
+<!--
+	<div class="menu-item"><i class="fas fa-th"></i><span>Applications</span></div>
+        <div class="menu-item"><i class="fas fa-hdd"></i><span>Disk Management</span></div>
+        <div class="menu-item"><i class="fas fa-chart-line"></i><span>Monitor</span></div>
+        <div class="menu-item active"><i class="fas fa-cog"></i><span>Settings</span></div>
+-->
+	<div class="menu-item" id="installAppsBtn"><img src="/img/apps1.svg" data-src="/img/apps1.svg" data-hover="/img/apps2.svg" alt="Applications" /><span>Applications</span></div>
+        <div class="menu-item" id="backupBtn"><img src="/img/backup1.svg" data-src="/img/backup1.svg" data-hover="/img/backup2.svg" alt="Backup" /><span>Backup</span></div>
+        <div class="menu-item" id="diskBtn"><img src="/img/disk1.svg" data-src="/img/disk1.svg" data-hover="/img/disk2.svg" alt="Disk Management" /><span>Disk Management</span></div>
+        <div class="menu-item" id="monitorBtn"><img src="/img/monitor1.svg" data-src="/img/monitor1.svg" data-hover="/img/monitor2.svg" alt="Monitor" /><span>Monitor</span></div>
+	<div class="menu-item has-submenu" id="settingsBtn"><img src="/img/settings1.svg" data-src="/img/settings1.svg" data-hover="/img/settings2.svg" alt="Settings" /><span>Settings</span><span class="arrow">&#9662;</span></div>
+	<div class="submenu" id="settingsSubmenu">
+	  <div id="servicesBtn" class="submenu-item">Services</div>
+	  <div id="repositoriesBtn" class="submenu-item">Repositories</div>
+	  <div id="systemservicesBtn" class="submenu-item">System services</div>
+	</div>
+      </div>
+    </div>
+    <div class="yellow-row">
+	<div id="pro_off">
+	    <div class="yellow-box">
+		<div class="pro-text">
+		  <span>Safebox Pro</span>
 		</div>
-		<div class="row">
-		    <div class="mb-3">
-				<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
-				<input type="text" class="form-control" name="VPN_PASS" id="vpn_pass" value="" maxlength="8" size="10">
-		    </div>
+		      <p>Enjoy benefits and unlock more feature such as remote access, geo-redundant backups etc. <br><br>
+		      <a href="" class="details">Read details</a><br><br>
+			<img src="/img/upgrade.svg" alt="Upgrade now" width="80%" id="upgradeBtn" style="cursor:pointer"/>	
+		      </p>
+	    </div>
+	</div>
+	<div id="pro_on" class="hidden">
+	    <div class="grey-box">
+		<div class="vpn-text" id="vpnBtn" >
+		  <!--<img src="/img/globe.png" data-src="/img/globe.png" data-hover="/img/globe.png" alt="VPN"/>-->
+		  <span>Remote access</span>
 		</div>
-		<div class="row">
-		    <div class="mb-3">
-				<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
-				<input type="email" class="form-control" name="LETSENCRYPT_MAIL" id="letsencrypt_mail" value="">
-				<div class="invalid-feedback">
-				Please enter a valid email.
-				</div>
-		    </div>
-		</div>
-		<div class="row">
-		    <div class="mb-3">
-				<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
-				<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt">
-		    </div>
-		</div>
-		<div class="row">
-		    <div class="mb-3">
-			<button class="btn btn-lg btn-primary btn-block" type="submit" id="vpn_save_btn"> Save </button> &nbsp;
-			<button class="btn btn-lg btn-primary btn-block" type="button" id="vpn_cancel_btn"> Cancel </button>
-		    </div>
-		</div>
-	</form>
-	</fieldset>
-	<br>
-</div>
-
-<div id="settings" class="hidden">
-	<fieldset>
-	<legend>Repositories</legend>
-		<div id="repositories" style="text-align:left">Loading...</div>
-
-		<hr>
-		<form class="form-install" action="#" method="post" id="add_repo">
-		<div class="row">
-		    <div class="mb-3" style="text-align:left">
-			<label for="registry">Please add a new GIT repository URL: </label>
-			<input type="registry" class="form-control" name="repository" id="repository" size="100" value="" required>
-			<div class="invalid-feedback">
-			Please enter a valid repository url.
+		      <p>It allows you to connect your installed apps to a custom domain (your own or one registered through us), so you can securely log in from any browser, anywhere in the world.
+		      </p>
+			<div class="vpn-item">
+<!--
+			    <label class="switch">
+			      <input type="checkbox" id="vpnToggle" onclick="return false">
+			      <span class="slider-text"><span class="switch-label">OFF</span></span>
+			    </label>
+-->
+				<span id="vpn_on" class="hidden"><img src="/img/on.svg" alt="on" /></span>
+				<span id="vpn_off" class="hidden"><img src="/img/off.svg" alt="off" /></span>
 			</div>
-		    </div>
-		</div>
-		<div class="row">
-		    <div class="mb-3">
-			<button class="btn btn-lg btn-primary btn-block" type="submit" id="repo_add_btn"> Add </button>
-		    </div>
-		</div>
-		</form>
-	</fieldset>
-
-	<fieldset>
-	<legend>System services</legend>
-	<div id="system" style="text-align:left">Loading...</div>
-	</fieldset>
-	
-	<fieldset>
-	<legend>Updates</legend>
-	<div style="text-align:left">
-		<a href="javascript:void()" id="update_btn">Search for updates</a>
+	    </div>
 	</div>
-	<div id="updates" style="text-align:left">
+    </div>
+  </div>
+  <div class="main" >
+    <div id="myAppsContainer">
+	    <div class="loading">Loading applications...</div>
+    </div>
+    <div id="popup" class="popup hidden">
+	<div class="popup-content">
+		<div id="popupText" class="deployment"></div>
 	</div>
-	</fieldset>
-	<br>
-</div>
+    </div>
+  </div>
 
-<div id="default">
-
-	<fieldset>
-	<legend><a href="javascript:void()" id="deployments_btn">Deployments</a></legend>
-	<div id="deployments" style="text-align:left">Loading...</div>
-	</fieldset>
-
-	<fieldset>
-	<legend><a href="javascript:void()" id="services_btn">Services</a></legend>
-	<div id="services" style="text-align:left;display:none;">Loading...</div>
-	</fieldset>
-
-	<fieldset>
-	<legend>Disk management</legend>
-	</fieldset>
-
-	<fieldset>
-	<legend>Monitor</legend>
-	</fieldset>
-
-</div>
-
-</div>
-</div>
-<br>
-<br>
 <script>
     // apps array beállítása common.js-ben
     const apps = []; // GLOBAL VARIABLE
+
+    document.addEventListener('DOMContentLoaded', function() {
+
+	    updateActive();
+
+    const myAppsBtn = document.getElementById('myAppsBtn');
+    const installAppsBtn = document.getElementById('installAppsBtn');
+    const backupBtn = document.getElementById('backupBtn');
+    const diskBtn = document.getElementById('diskBtn');
+    const monitorBtn = document.getElementById('monitorBtn');
+    const settingsBtn = document.getElementById('settingsBtn');
+
+    const vpnBtn = document.getElementById('vpnBtn');
+    const upgradeBtn = document.getElementById('upgradeBtn');
+
+    const myAppsContainer = document.getElementById('myAppsContainer');
+    const popup = document.getElementById('popup');
+    const popupText = document.getElementById('popupText');
+    const closeBtn = document.querySelector('.close');
+
+
+	function updateActive() {
+		document.querySelectorAll('.menu-item').forEach(item => {
+			const img = item.querySelector('img');
+			img.src = img.dataset.src;
+		});
+		document.querySelectorAll('.menu-item.active').forEach(item => {
+			const img = item.querySelector('img');
+			img.src = img.dataset.hover;
+		});
+	}
+
+    //Appok betöltése
+    function renderApps(all) {
+    	myAppsContainer.classList.remove('hidden');
+        popup.classList.add('hidden');
+
+	myAppsContainer.innerHTML = '<div class="main-header"><h1>Applications</h1><button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button></div><div id="appsContainer"></div>';
+    	const appsContainer = document.getElementById('appsContainer');
+    	const updatesBtn = document.getElementById('updatesBtn');
+	updatesBtn.addEventListener('click', () => renderUpdates());
+
+        apps.forEach(app => {
+	    //if ((all==false && app.installed=='true') || (all==true && app.installed!='true')) {
+		    const appDiv = document.createElement('div');
+		    appDiv.className = 'app';
+		    if (app.installed=='true') more = 'Installed';
+		    else more = 'More';
+		    appDiv.innerHTML = `
+			<div class="app-img"><img src="${app.image}" alt="${app.name}" title="${app.orig_name} ${app.version}"></div>
+			<div class="app-label">${app.subtitle}</div>
+			<div class="app-name">${app.orig_name}</div>
+			<button class="more-btn">${more}</button>
+		    `;
+		    appDiv.addEventListener('click', () => {
+			popupText.textContent = `You clicked on ${app.name} ${app.version}!`;
+			if (app.installed=='true') reinstall(app.name, 'popupText');
+			else load_template(app.name,'popupText');
+			popup.classList.remove('hidden');
+			myAppsContainer.classList.add('hidden');
+		    });
+		    appsContainer.appendChild(appDiv);
+            //}
+        });
+    }
+
+
+    //TODO: Ilyen függvényeket kell csinálni és a listenerekhez adni az egyes részeket
+    function renderText(title) {
+    	myAppsContainer.classList.remove('hidden');
+        popup.classList.add('hidden');
+
+        //TODO: itt kell a buttont editálni és így kell hozzáadni hozzá mindent
+        myAppsContainer.innerHTML = `
+	    <div class="main-header">
+	      <h1>${title}</h1>
+	      <button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button>
+	    </div>
+	    <label>Under development...</label>
+        `;
+
+        const submitButton = document.getElementById('submitButton');
+        const textInput = document.getElementById('textInput');
+
+        if (submitButton && textInput) {
+            submitButton.addEventListener('click', () => {
+                const value = textInput.value.trim();
+                if (value) {
+                    alert(`Beírt szöveg: ${value}`);
+                    textInput.value = '';
+                } else {
+                    alert('Kérlek írj be valamit!');
+                }
+            });
+        }
+    }
+
+    function renderMonitor() {
+    	myAppsContainer.classList.remove('hidden');
+        popup.classList.add('hidden');
+
+        //TODO: itt kell a buttont editálni és így kell hozzáadni hozzá mindent
+        myAppsContainer.innerHTML = `
+	    <div class="main-header">
+	      <h1>Monitor</h1>
+	      <button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button>
+	    </div>
+	    <label>Under development...</label><br>
+        	<img src="/img/monitor.jpg" alt="Under development..." width="1000" />
+        `;
+    }
+
+    function renderVPN() {
+    	myAppsContainer.classList.remove('hidden');
+        popup.classList.add('hidden');
+
+        myAppsContainer.innerHTML = `
+	    <div class="main-header">
+	      <h1>VPN - enable proxy</h1>
+	    </div>
+            <div id="vpn" class="innerDiv">
+	    <div class="loading">Loading...</div>
+            </div>
+        `;
+	get_proxy_html();
+    }
+
+    function renderServices() {
+        myAppsContainer.innerHTML = `
+	    <div class="main-header">
+	      <h1>Services</h1>
+	    </div>
+            <div id="services" class="innerDiv">
+	    <div class="loading">Loading...</div>
+            </div>
+        `;
+	get_services();
+    }
+
+    function renderUpdates() {
+        myAppsContainer.innerHTML = `
+	    <div class="main-header">
+	      <h1>Updates</h1>
+	    </div>
+            <div id="updates" class="innerDiv">
+	    <div class="loading">Looking for updates...</div>
+            </div>
+        `;
+	get_updates();
+    }
+
+    function renderSystemServices() {
+        myAppsContainer.innerHTML = `
+	    <div class="main-header">
+	      <h1>System services</h1>
+	    </div>
+            <div id="system" class="innerDiv">
+	    <div class="loading">Loading...</div>
+            </div>
+        `;
+	get_system();
+    }
+
+    function renderSettings() {
+
+	const submenu = document.getElementById("settingsSubmenu");
+	const isVisible = submenu.style.display === "flex";
+
+	submenu.style.display = isVisible ? "none" : "flex";
+	settingsBtn.classList.toggle("open", !isVisible);
+
+    	myAppsContainer.classList.remove('hidden');
+        popup.classList.add('hidden');
+
+	myAppsContainer.innerHTML = `
+    <div class="main-header">
+      <h1>Settings</h1>
+      <button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button>
+    </div>
+
+	    <div class="input-row">
+	      <label>Docker registry name</label>
+	      <div class="input-container">
+		<input type="text" placeholder="Enter name" />
+		<button class="clear-btn" onclick="this.previousElementSibling.value = ''">×</button>
+	      </div>
+	    </div>
+	    <div class="input-row">
+	      <label>Enable logging</label>
+	      <div class="input-container">
+		<select>
+		  <option>Yes</option>
+		  <option>No</option>
+		</select>
+	      </div>
+	    </div>
+	    <div class="input-row">
+	      <label>Backup folder</label>
+	      <div class="input-container">
+		<input type="text" placeholder="Path to backup" />
+		<button class="clear-btn" onclick="this.previousElementSibling.value = ''">×</button>
+	      </div>
+	    </div>
+	    <div class="input-row">
+	      <label>Send alerts</label>
+	      <div class="input-container">
+		<select>
+		  <option>Yes</option>
+		  <option>No</option>
+		</select>
+	      </div>
+	    </div>
+	    <button class="save-button">Save Settings</button>
+        `;
+	const servicesBtn = document.getElementById('servicesBtn');
+	const repositoriesBtn = document.getElementById('repositoriesBtn');
+	const systemservicesBtn = document.getElementById('systemservicesBtn');
+    	const updatesBtn = document.getElementById('updatesBtn');
+	servicesBtn.addEventListener('click', () => renderServices());
+	repositoriesBtn.addEventListener('click', () => renderRepositories());
+	systemservicesBtn.addEventListener('click', () => renderSystemServices());
+	updatesBtn.addEventListener('click', () => renderUpdates());
+    }
+
+    function renderRepositories() {
+        myAppsContainer.innerHTML = `
+	    <div class="main-header">
+	      <h1>Repositories</h1>
+	    </div>
+		<div id="repositories" style="text-align:left">Loading repositories...</div>
+		<br>
+		<form class="form-install" action="#" method="post" id="add_repo">
+		<div class="input-row">
+			<label for="registry">Please add a new GIT repository URL: </label>
+      			<div class="input-container">
+				<input type="registry" name="repository" id="repository" size="100" value="" required>
+        			<button class="clear-btn" onclick="this.previousElementSibling.value = ''">×</button>
+      			</div>
+			<!--<div class="invalid-feedback">
+			Please enter a valid repository url.
+			</div>-->
+		</div>
+		<div class="row">
+			<button class="save-button" type="submit" id="repo_add_btn"> Add </button>
+		</div>
+		</form>
+        `;
+	jQuery('#add_repo').submit(function() {
+		jQuery('#repositories').html('Loading...');
+		add_repository();
+		return false;
+	});
+
+	get_repositories();
+    }
+
+	function activate(btn) {
+		//myAppsBtn.classList.remove('active');
+		installAppsBtn.classList.remove('active');
+		backupBtn.classList.remove('active');
+		diskBtn.classList.remove('active');
+		monitorBtn.classList.remove('active');
+		settingsBtn.classList.remove('active');
+		btn.classList.add('active');
+	    
+		updateActive();
+	}
+
+    //myAppsBtn.addEventListener('click', () => {renderApps(false); activate(myAppsBtn);});
+	installAppsBtn.addEventListener('click', () => {renderApps(true); activate(installAppsBtn);});
+	backupBtn.addEventListener('click', () => {renderText('Backup'); activate(backupBtn);});
+	diskBtn.addEventListener('click', () => {renderText('Disk Management'); activate(diskBtn)});
+	monitorBtn.addEventListener('click', () => {renderMonitor(); activate(monitorBtn)});
+    	settingsBtn.addEventListener('click', () => {renderSettings(); activate(settingsBtn)});
+
+	vpnBtn.addEventListener('click', () => renderVPN());
+	upgradeBtn.addEventListener('click', () => renderVPN());
+
+//	renderApps(true);
+
+/*
+	const vpnToggle = document.getElementById("vpnToggle");
+  	const vpnLabel = document.querySelector(".switch-label");
+
+	function updateStatus() {
+    		vpnLabel.textContent = vpnToggle.checked ? "ON" : "OFF";
+	}
+
+	vpnToggle.addEventListener("change", updateStatus);
+	vpnToggle.addEventListener('click', function (e) {
+		e.preventDefault();
+	});
+
+	// Alapállapot beállítása
+	updateStatus();
+*/
+
+});
 </script>
+
 <!-- Optional JavaScript -->
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
-<script src="common.js?t=5"></script>
+<script src="common.js?t=57"></script>
 </body>
 </html>

manage2.html

@@ -129,21 +129,43 @@
 		color: orange;
             	border: 1px solid orange;
         }
+        .left-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin: 20px 0;
+            cursor: pointer;
+        }
+        .left-buttons button {
+            min-width: 120px;
+            padding: 5px 5px;
+            background: none;
+            border: 1px solid var(--button-border);
+            border-radius: 10px;
+            cursor: pointer;
+            color: var(--text-color);
+        }
+        .container-frame {
+		border: 1px solid;
+            	border-radius: 10px;
+		padding: 0px;
+		margin: 5px;
+		height: 98vh;
+        }
         .container {
 		clear:both;
 		float:none;
-		border: 1px solid;
-            	border-radius: 10px;
 		padding-bottom: 10px;
 		margin: 5px;
+		height: 88vh;
         }
         .leftside {
 		float:left;
-		width:20%;
+		width:10%;
         }
         .rightside {
 		float:right;
-		width:80%;
+		width:90%;
 		display: flex;
 		flex-direction: column;
 		height: 88vh;
@@ -157,8 +179,8 @@
             justify-content: flex-start;
             align-items: flex-start;
             gap: 40px;
-            min-width: 92%;
-            max-width: 92%;
+            min-width: 96%;
+            max-width: 96%;
             margin: 0 auto;
             border-radius: 10px;
             box-sizing: border-box;
@@ -188,7 +210,7 @@
 	    position: fixed;
 	    bottom: 0;
 	    left: 0;
-	    width: 100%;
+	    width: 97%;
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -514,6 +536,7 @@
 </head>
 <body>
 
+<div class="container-frame">
 <div class="container">
 <div class="leftside">
     <div class="logo">
@@ -531,17 +554,14 @@
 	<span id="vpn_on" class="hidden green"><b>ON</b></span>
 	<span id="vpn_off" class="hidden red"><b>OFF</b></span>
     </div>
-	<div class="buttons">
+	<div class="left-buttons">
 	 	<button id="servicesBtn">Services</button>
 	</div>
     	<div class="settings">Settings</div>
-	<div class="buttons">
-		<button id="updatesBtn">Updates</button>
-	</div>
-	<div class="buttons">
+	<div class="left-buttons">
 		<button id="repositoriesBtn">Repositories</button>
 	</div>
-	<div class="buttons">
+	<div class="left-buttons">
 		<button id="systemservicesBtn">System services</button>
 	</div>
 	<br>
@@ -558,6 +578,7 @@
 	<div class="buttons">
 	    <button id="myAppsBtn">My Apps</button>
 	    <button id="installAppsBtn">Install Apps</button>
+	    <button id="updatesBtn">Updates</button>
 	    <button id="backupBtn">Backup</button>
 	    <button id="diskBtn">Disk Management</button>
 	    <button id="monitorBtn">Monitor</button>
@@ -585,7 +606,8 @@
 
     <div class="footer-center">
         <p>Want to access your services remotely?</p>
-        <p><strong><a href="#">Go Pro!</a></strong></p>
+        <p class="hidden" id="pro_off"><strong><a href="#">Get Pro!</a></strong></p>
+        <p class="hidden" id="pro_on"><strong><a href="#">Pro settings</a></strong></p>
     </div>
 
     <div class="footer-social">
@@ -594,6 +616,8 @@
     </div>
 </footer>
 
+</div>
+
 <script>
     const toggle = document.getElementById('themeToggle');
     toggle.addEventListener('click', () => {
@@ -803,6 +827,6 @@
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
-<script src="common.js?t=8"></script>
+<script src="common.js?t=9"></script>
 </body>
 </html>

manage_old.html

@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+<head>
+<!-- Required meta tags -->
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<title>INSTALLER TOOL</title>
+<!-- Bootstrap CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+<!-- Custom styles for this template -->
+<link href="installer.css?t=7" rel="stylesheet">
+</head>
+<body id="manage" class="text-center">
+<div class="container-fluid">
+<div class="col-md-12">
+
+<h1>Found deployed environment</h1>
+
+<div style="text-align:left;float:left;width:33%">
+	<a href="javascript:void()" id="vpn_btn">VPN</a>
+        Status:
+	<span id="vpn_on" class="hidden green"><b>ON</b></span>
+	<span id="vpn_off" class="hidden red"><b>OFF</b></span>
+</div>
+<div style="text-align:center;float:left;width:34%">
+        <a href="manage.html" id="refresh_btn">REFRESH</a>
+        /
+	<a href="manage2.html" id="new_btn">NEW DESIGN</a>
+</div>
+<div style="text-align:right;float:right">
+	<a href="javascript:void()" id="settings_btn">SETTINGS</a>
+</div>
+<div style="float:none;clear:both"/>
+
+<div id="vpn" class="hidden">
+	<fieldset>
+	<legend>Enable proxy</legend>
+	<form class="form-install" action="#" method="post" id="save_vpn">
+		<div class="row">
+		    <div class="mb-3">
+				<label for="vpn_domain">Please add domain url to download the VPN hash from (default: https://portal.safebox.network):</label>
+				<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network">
+				<div class="invalid-feedback">
+				Please enter a valid domain.
+				</div>
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+				<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
+				<input type="text" class="form-control" name="VPN_PASS" id="vpn_pass" value="" maxlength="8" size="10">
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+				<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
+				<input type="email" class="form-control" name="LETSENCRYPT_MAIL" id="letsencrypt_mail" value="">
+				<div class="invalid-feedback">
+				Please enter a valid email.
+				</div>
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+				<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
+				<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt">
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+			<button class="btn btn-lg btn-primary btn-block" type="submit" id="vpn_save_btn"> Save </button> &nbsp;
+			<button class="btn btn-lg btn-primary btn-block" type="button" id="vpn_cancel_btn"> Cancel </button>
+		    </div>
+		</div>
+	</form>
+	</fieldset>
+	<br>
+</div>
+
+<div id="settings" class="hidden">
+	<fieldset>
+	<legend>Repositories</legend>
+		<div id="repositories" style="text-align:left">Loading...</div>
+
+		<hr>
+		<form class="form-install" action="#" method="post" id="add_repo">
+		<div class="row">
+		    <div class="mb-3" style="text-align:left">
+			<label for="registry">Please add a new GIT repository URL: </label>
+			<input type="registry" class="form-control" name="repository" id="repository" size="100" value="" required>
+			<div class="invalid-feedback">
+			Please enter a valid repository url.
+			</div>
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+			<button class="btn btn-lg btn-primary btn-block" type="submit" id="repo_add_btn"> Add </button>
+		    </div>
+		</div>
+		</form>
+	</fieldset>
+
+	<fieldset>
+	<legend>System services</legend>
+	<div id="system" style="text-align:left">Loading...</div>
+	</fieldset>
+	
+	<fieldset>
+	<legend>Updates</legend>
+	<div style="text-align:left">
+		<a href="javascript:void()" id="update_btn">Search for updates</a>
+	</div>
+	<div id="updates" style="text-align:left">
+	</div>
+	</fieldset>
+	<br>
+</div>
+
+<div id="default">
+
+	<fieldset>
+	<legend><a href="javascript:void()" id="deployments_btn">Deployments</a></legend>
+	<div id="deployments" style="text-align:left">Loading...</div>
+	</fieldset>
+
+	<fieldset>
+	<legend><a href="javascript:void()" id="services_btn">Services</a></legend>
+	<div id="services" style="text-align:left;display:none;">Loading...</div>
+	</fieldset>
+
+	<fieldset>
+	<legend>Disk management</legend>
+	</fieldset>
+
+	<fieldset>
+	<legend>Monitor</legend>
+	</fieldset>
+
+</div>
+
+</div>
+</div>
+<br>
+<br>
+<script>
+    // apps array beállítása common.js-ben
+    const apps = []; // GLOBAL VARIABLE
+</script>
+<!-- Optional JavaScript -->
+<!-- jQuery first, then Popper.js, then Bootstrap JS -->
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+<script src="common.js?t=5"></script>
+</body>
+</html>

scan.html

@@ -1,198 +1,58 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-<!-- Required meta tags -->
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<title>INSTALLER TOOL</title>
-<!-- Bootstrap CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
-<!-- Custom styles for this template -->
-<link href="installer.css?t=1" rel="stylesheet">
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+<meta http-equiv="Pragma" content="no-cache" />
+<meta http-equiv="Expires" content="0" />
+<title>Safebox - INSTALLER TOOL</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
+<link rel="stylesheet" href="style.css?t=4" />
 </head>
 <body id="scan" class="text-center">
-<div class="container-fluid">
-<div class="col-md-12">
-	<h1>Scanning your device for any previous installed versions</h1>
-	<div class="row d-flex justify-content-center mt-100">
-	       <div class="progress blue" data-value="100">
-		 <span class="progress-left">
-		   <span class="progress-bar"></span>
-		 </span>
-		 <span class="progress-right">
-		   <span class="progress-bar"></span>
-		 </span>
-		 <div class="progress-value"></div>
-	       </div>
+  <div class="main">
+    <div id="myAppsContainer">
+	<div class="logo" style="margin:100px 0px 20px 0px;">
+		<img src="/img/logo.svg" alt="Safebox"/>
+		<span>Safebox</span>
 	</div>
-	<div><a href="install.html" class="stop">STOP AND START INSTALL</a></div>
-	<br>
-	<br>
-	<div id="redis"></div>
-	<div id="previous"></div>
-</div>
-</div>
+	<div class="progress-box">
+		<div class="progress-title">Scanning your device</div>
+		<div class="progress-description" id="info">Looking for any previously installed version</div>
+		<div class="progress-container-shadow">
+		</div>
+		<div class="progress-container">
+			<div class="progress-bar" id="progressBar"></div>
+			<div class="progress-text" id="progressText">0%</div>
+		</div>
+	</div>
+<!--
+	<div class="controls">
+        	<button onclick="document.location='install.html'" class="save-button">STOP AND START INSTALL</button>
+	</div>
+-->
+    </div>
+  </div>
 <!-- Optional JavaScript -->
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+<script src="install.js?t=7"></script>
 <script>
-$(function() {
+const progressBar = document.getElementById('progressBar');
+const progressText = document.getElementById('progressText');
+let currentProgress = 0;
+let progressInterval;
+let install = 0; // scan
 
-function redirectToInstall() {
-    window.location.href = 'install.html';
-}
+// Initialize
+updateProgress(0);
+startProgress(30000);// 30 seconds
 
-function redirectToManage() {
-    window.location.href = 'manage.html';
-}
-
-function start_system() {
-  var url  = 'scan.php?op=system';
-  $.get(url, function(data){
-    console.log('start_system: '+data);
-    if (data=='OK') {
-      $("#previous").html('Scanning for previous install. Please wait...');
-      check_system();
-    }
-    else {
-      $("#previous").html('Scanning for previous install has aborted...');
-    }
-  });
-}
-
-function check_system() {
-  var url  = 'scan.php?op=check_system';
-  $.get(url, function(data){
-    console.log('check_system: '+data);
-    if (data=='NEW') {
-      $("#previous").html('No previous install has found...');
-      setTimeout(redirectToInstall, 3000);
-    }
-    else if (data=='EXISTS') {
-      $("#previous").html('Previous install has found...');
-      setTimeout(redirectToManage, 3000);
-    }
-    else if (data=='WAIT') {
-      setTimeout(check_system, 1000);
-    }
-    else {
-	    // UNEXPECTED ERROR
-    }
-  });
-}
-
-function check_redis() {
-
-  var url  = 'scan.php?op=redis';
-  $.get(url, function(data){
-    console.log('check_redis: '+data);
-    if (data=='OK') {
-      $("#redis").html('Redis server - OK');
-      start_system();
-    }
-    else {
-      $("#redis").html('Redis server is not available...');
-      setTimeout(check_redis, 1000);
-    }
-  });
-}
-
-function check_directory() {
-
-  var url  = 'scan.php?op=directory';
-  $.get(url, function(data){
-    console.log('check_directory: '+data);
-    if (data=='OK') {
-      $("#redis").html('Connection is ready - OK');
-      start_system();
-    }
-    else {
-      $("#redis").html('Shared directory is not available...');
-    }
-  });
-}
-
-function check_interface() {
-
-  var url  = 'scan.php?op=get_interface';
-  $.get(url, function(data){
-    console.log('check_interface: '+data);
-    if (data=='redis') {
-  	check_redis();
-    }
-    else if (data=='directory') {
-  	check_directory();
-    }
-    else {
-	$("#redis").html('Invalid interface definition...');
-    }
-  });
-}
-
-  check_interface();
-
-  //setTimeout(redirectToManage, 10000);
-
-  $(".progress").each(function() {
-
-    var value = $(this).attr('data-value');
-    var left = $(this).find('.progress-left .progress-bar');
-    var right = $(this).find('.progress-right .progress-bar');
-
-    if (value > 0) {
-/*
-	angle1 = getRotationDegrees(right);
-	angle2 = getRotationDegrees(left);
-		console.log(angle1);
-		console.log(angle2);
-	idx=1
-	while (idx < 50) {
-		angle1 = getRotationDegrees(right);
-		angle2 = getRotationDegrees(left);
-		console.log(angle1);
-		console.log(angle2);
-		$('div.progress-value').html(angle2);
-		idx++;
-	}
-*/
-/*
-      if (value <= 50) {
-        right.css('transform', 'rotate(' + percentageToDegrees(value) + 'deg)')
-      } else {
-        right.css('transform', 'rotate(180deg)')
-        left.css('transform', 'rotate(' + percentageToDegrees(value - 50) + 'deg)')
-      }
-*/
-    }
-
-  })
-
-  function percentageToDegrees(percentage) {
-    return percentage / 100 * 360
-  }
-
-	/**
-	 * Returns rotation in degrees when obtaining transform-styles using javascript
-	 * http://stackoverflow.com/questions/8270612/get-element-moz-transformrotate-value-in-jquery
-	 */
-	function getRotationDegrees(obj) {
-	    var matrix = obj.css("-webkit-transform") ||
-	    obj.css("-moz-transform")    ||
-	    obj.css("-ms-transform")     ||
-	    obj.css("-o-transform")      ||
-	    obj.css("transform");
-	    if(matrix !== 'none') {
-		var values = matrix.split('(')[1].split(')')[0].split(',');
-		var a = values[0];
-		var b = values[1];
-		var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
-	    } else { var angle = 0; }
-	    return angle;
-	}
-
-});
+check_interface();
 </script>
 </body>
 </html>

scan.php

@@ -59,12 +59,12 @@ switch ($_GET["op"]) {
 		}
 		else echo "WAIT";
 	break;
-	case "check_install": // called in install.php - check if install process has finished
-		$arr = check_response($_GET["key"]); // TODO - replace key with "install", key can be "install*"
+	case "check_install": // called in install.js - check if install process has finished
+		$arr = check_response("install");
 		if (!empty($arr)) {
 			foreach ($arr as $key=>$data) {
 				//echo $key."-".$_GET["key"];
-				if ($key==$_GET["key"]) { // if install key moved to web_out
+				if ($key=="install") { // if install key moved to web_out
 					if ($data["INSTALL_STATUS"]>0) {
 						remove_response("$key");
 						echo "INSTALLED";
@@ -146,12 +146,14 @@ switch ($_GET["op"]) {
                                                                 $orig_service_name = $service_name;
 								$service_name = strtolower($service_name);
 								$version = $content["version"];
+								$subtitle = $content["subtitle"];
+								if (empty($subtitle) || $subtitle == "null") $subtitle = "";
 								$icon = $content["icon"];
-								if (empty($icon) || $icon == "null") $icon = "image.png"; // default icon image
+								if (empty($icon) || $icon == "null") $icon = "img/logo.svg"; // default icon image
 								if (array_key_exists($service_name,$data["INSTALLED_SERVICES"])) $installed = "true";
 								else $installed = "false";
 								if (!empty($deployments)) $deployments .= ", ";
-								$deployments .= '{"name": "'.$service_name.'", "orig_name": "'.$orig_service_name.'", "image": "'.$icon.'", "version": "'.$version.'", "installed": "'.$installed.'"}';
+								$deployments .= '{"name": "'.$service_name.'", "orig_name": "'.$orig_service_name.'", "image": "'.$icon.'", "version": "'.$version.'", "subtitle": "'.$subtitle.'", "installed": "'.$installed.'"}';
 							}
 							if (!empty($deployments)) $deployments = "[{$deployments}]";
 						}
@@ -180,12 +182,29 @@ switch ($_GET["op"]) {
 				if ($key=="deployment") {
 					if ($data["STATUS"]=="0") { // ask
 						$template = json_decode(base64_decode($data["TEMPLATE"]));
-						echo "<fieldset><form action=\"#\" method=\"post\" id=\"deploy_{$template->name}_form\"><br>";
-						echo '<div id="letsencrypt">';
+						$template->name = strtolower($template->name);
+
+						echo '
+						<div class="app-details">
+							<div class="header-block">
+							  <div class="logo-and-text">
+							    <div class="applogo">
+								<img src="'.$template->icon.'">
+							    </div>
+							    <div class="text-content">
+							      <h1 class="title">'.$template->title.'</h1>
+							      <h2 class="subtitle">'.$template->subtitle.'</h2>
+							      <p class="description">'.$template->description.'</p>
+							    </div>
+							  </div>
+							  <button id="updatesBtn" class="notification-btn"><i class="fas fa-bell"></i> Notification</button>
+							</div>
+						';
 						if ($reinstall) {
+							echo '<div id="letsencrypt">';
 							//var_dump($template);
                                                         $letsencrypt = check_letsencrypt();
-							if (empty($letsencrypt)) echo "LETSENCRYPT file doesn't exists...<br><br>";
+							if (empty($letsencrypt)) echo ""; //echo "LETSENCRYPT file doesn't exists...<br><br>";
 							elseif ($letsencrypt=="ERROR") echo "LETSENCRYPT file: read JSON error...<br><br>";
 							else {
 								$domain = "";
@@ -194,72 +213,103 @@ switch ($_GET["op"]) {
 								}
 								if (!empty($domain)) show_letsencrypt($letsencrypt, $domain);
 							}
+							echo '</div>';
 						}
-						echo '</div>';
-						echo "<div class=\"row\">";
-						if (!empty($template->icon)) echo "<img src=\"".$template->icon."\">";
-						if (!empty($template->description)) echo "<label style='padding: 10px'>".$template->description."</label>";
-						echo "</div>";
+						$more = 0;
+						echo "<form action=\"#\" method=\"post\" id=\"deploy_{$template->name}_form\">";
+						echo "<div class=\"app-fields\">";
 						foreach ($template->fields as $field) {
+							if ($field->advanced) $more = 1;
+							echo "<div class=\"app-field ".($field->advanced ? "advanced" : "")."\">";
 							if (!empty($field->title)) echo "<div class=\"row\"><h3>".$field->title."</h3></div>";
 							if (isset($field->generated)) {
 								echo "<input type=\"hidden\" value=\"generated:{$field->generated}:{$field->value}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\">";
 							}
 							else {
 								echo "<div class=\"row\">";
-								echo "<div>
-									<label>".$field->description."</label>
-									<input ".($field->required=="true" ? "required" : "")." type=\"".(!empty($field->type) ? $field->type : "text")."\" value=\"{$field->value}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\">
+								echo "<label>".$field->description."</label>";
+								if ($field->type=="select") {
+									echo "<div class=\"input-container\">
+										<select ".($field->required=="true" ? "required" : "")." name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\">";
+									$values = explode(",",$field->value);
+									foreach ($values as $value) {
+										$v_arr = explode(":",$value);
+										if (empty($v_arr[1])) $v_arr[1] = $v_arr[0];
+										echo "<option value=\"{$v_arr[0]}\">{$v_arr[1]}</option>";
+									}
+									echo "	</select>
 									</div>";
+								}
+								else echo "<div class=\"input-container\"><input ".($field->required=="true" ? "required" : "")." type=\"".(!empty($field->type) ? $field->type : "text")."\" value=\"{$field->value}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\"></div>";
+								echo "<div class=\"info-container\">
+								";
 								if (!empty($field->info)) echo "
-									<div class=\"info-container\">
 									  <span class=\"info-icon\">i</span>
 									  <div class=\"tooltip\">{$field->info}</div>
-									</div>
 								";
 								echo "</div>";
+								echo "</div>";
 								if (!empty($field->details)) echo "<div class=\"row\"><i>".$field->details."</i></div>";
 							}
+							echo "</div>";
 						}
-
+						echo "</div>";
 
                                                 echo "<div class=\"row buttons\">";
+						if ($more) {
+							echo "
+							<div class=\"mb-3\" style=\"margin-right:30px;\">
+							<button class=\"btn btn-lg btn-primary btn-block\" type=\"button\" id=\"more_{$template->name}_btn\">More</button>
+							</div>";
+						}
 						if ($reinstall) {
 							echo "
-							<div class=\"mb-3\">
-							<button class=\"btn btn-lg btn-primary btn-block\" type=\"button\" id=\"update_{$template->name}_btn\" onclick=\"update_deployment('{$template->name}')\">Update</button>
+                                                	<div class=\"mb-3\" style=\"margin-right:30px;\">
+							<button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\" id=\"update_{$template->name}_btn\" onclick=\"update_deployment('{$template->name}')\">Update</button>
 							</div>";
 						}
 						echo "
-                                                <div class=\"mb-3\" style=\"margin-left:30px;\">
+                                                <div class=\"mb-3\" style=\"margin-right:30px;\">
                                                 <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\" id=\"deploy_{$template->name}_btn\">".($reinstall ? "Reinstall" : "Install")."</button>
                                                 </div>";
 						if ($reinstall) {
 							echo "
-							<div class=\"mb-3\" style=\"margin-left:30px;\">
+							<div class=\"mb-3\" style=\"margin-right:30px;\">
 							<button class=\"btn btn-lg btn-primary btn-block\" type=\"button\" id=\"uninstall_{$template->name}_btn\" onclick=\"uninstall('{$template->name}')\">Uninstall</button>
 							</div>";
 						}
-						echo "<div class=\"mb-3\" style=\"margin-left:230px;float:\">
+						echo "<div class=\"mb-3\" style=\"margin-left:200px;float:\">
 						<button class=\"btn btn-lg btn-primary btn-block\" type=\"button\" id=\"cancel_{$template->name}_btn\">Cancel</button>
 						</div>";
                                                 echo "
                                                 </div>
-                                                </form></fieldset>
+						</form>
+						</div>
 <script>
+        jQuery('.advanced').each(function() {
+                jQuery(this).hide();
+        });
+        jQuery('#more_{$template->name}_btn').click(function() {
+		currentText = jQuery(this).text();
+		jQuery(this).text(currentText === 'More' ? 'Less' : 'More');
+		jQuery('.advanced').each(function() {
+			jQuery(this).toggle();
+		});
+        });
 	jQuery('#deploy_{$template->name}_form').submit(function() {
 		".($reinstall ? "redeploy" : "deploy")."('{$template->name}');
 		return false;
 	});
         jQuery('#cancel_{$template->name}_btn').click(function() {
-                $('div#{$template->name}').html('');
-    		document.getElementById('popup').classList.add('hidden'); // manage2 
+                jQuery('div#{$template->name}').html('');
+    		document.getElementById('myAppsContainer').classList.remove('hidden'); // manage3
+    		document.getElementById('popup').classList.add('hidden'); // manage2
         });
 </script>
 						";
 					}
 					elseif ($data["STATUS"]=="2") { // deploy
-						echo "Install has finished.";
+						echo '<div class="loading">Install has finished.</div>';
 						echo "<script>get_deployments();</script>";
 					}
 					remove_response("$key");
@@ -276,7 +326,7 @@ switch ($_GET["op"]) {
 							echo "";
 						}
 						elseif ($data["STATUS"]=="2") { 
-							echo "Install has finished.";
+							echo '<div class="loading">Install has finished.';
 							echo "<script>get_deployments();</script>";
 							remove_response("$key"); // remove from output if finished so reinstall can start
 						}
@@ -297,7 +347,7 @@ switch ($_GET["op"]) {
 	case "check_letsencrypt":
 		$domain = $_GET["domain"];
 		$letsencrypt = check_letsencrypt();
-		if (empty($letsencrypt)) echo "LETSENCRYPT file doesn't exists...";
+		if (empty($letsencrypt)) echo ""; //echo "LETSENCRYPT file doesn't exists...";
 		elseif ($letsencrypt=="ERROR") echo "LETSENCRYPT file: read JSON error...";
 		else {
 			show_letsencrypt($letsencrypt, $domain);
@@ -310,7 +360,7 @@ switch ($_GET["op"]) {
 			$text="A deployment ({$_GET["additional"]}) has already started.<br>Please wait and do not start a new one...";
 		}
 		else {
-			$text="Install in progress... Please wait...";
+			$text="Install in progress...";
 			$fields = $_GET;
 			unset($fields["op"]);
 			unset($fields["additional"]);
@@ -323,23 +373,25 @@ switch ($_GET["op"]) {
 						continue; // do NOT regenerate values
 					}
 
-					if (intval($field_arr[3])==0) $len = 10; // default length
-					else $len = $field_arr[3];
+					$gen_arr = explode("|",$field_arr[1]);
 
-					if ($field_arr[1]=="openssl") {
-						if ($field_arr[2]=="hex") $command = "openssl rand -hex $len";
-						elseif ($field_arr[2]=="base64") $command = "openssl rand -base64 $len";
+					if (intval($gen_arr[2])==0) $len = 10; // default length
+					else $len = $gen_arr[2];
+
+					if ($gen_arr[0]=="openssl") {
+						if ($gen_arr[1]=="hex") $command = "openssl rand -hex $len";
+						elseif ($gen_arr[1]=="base64") $command = "openssl rand -base64 $len";
 						else $command = "openssl rand $len"; // raw
 						$output = shell_exec($command);
 						if ($output === null) $output = "OPENSSL_ERROR";
 					}
 					else {
-						if ($field_arr[1]=="random") $base = rand(100000,999999);
-						elseif ($field_arr[1]=="time") $base = time();
-						elseif ($field_arr[1]!="") $base = $field_arr[1]; // fix string
+						if ($gen_arr[0]=="random") $base = rand(100000,999999);
+						elseif ($gen_arr[0]=="time") $base = time();
+						elseif ($gen_arr[0]!="") $base = $gen_arr[0]; // fix string
 						else $base = rand(100000,999999); // default
 
-						if (in_array($field_arr[2],$algos)) $base = hash($field_arr[2],$base);
+						if (in_array($gen_arr[1],$algos)) $base = hash($gen_arr[1],$base);
 						else $base = hash("md5",$base); // default alg
 
 						$output = substr($base,0,$len);
@@ -347,11 +399,13 @@ switch ($_GET["op"]) {
 					$fields["$field_key"] = $output;
 				}
 			}
+			//var_dump($fields); exit; // TEMP - test generated values
+
 			$payload = base64_encode(json_encode($fields, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT));
 			$arr = array("NAME" => $_GET["additional"], "ACTION" => $_GET["op"], "PAYLOAD" => $payload);
 			$json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
-			if (set_output("deployment",$json)) echo "OK";
-			else echo "ERROR";
+			if (set_output("deployment",$json)) echo "";
+			else $text .= " - ERROR";
 		}
 		echo $text;
 	break;
@@ -384,14 +438,15 @@ switch ($_GET["op"]) {
                         if (!empty($arr)) {
                                 $data = $arr[$key];
                                 if ($data["STATUS"]=="1") {
-                                        echo "Uninstall in progress... Please wait... ".date("Y-m-d H:i:s");
+                                        //echo "Uninstall in progress... Please wait... ".date("Y-m-d H:i:s");
+					echo "Uninstall in progress... ";
                                 }
                                 elseif ($data["STATUS"]=="2") {
                                         echo "OK";
                                         remove_response("$key");
                                 }
                         }
-                        else echo "Uninstall in progress... Please wait...";
+                        else echo "Uninstall in progress...";
                 }
         break;
         case "uninstall":
@@ -399,12 +454,12 @@ switch ($_GET["op"]) {
                         $text="Deploy/uninstall process has already started.<br>Please wait and do not start a new one...";
                 }
                 else {
-                        $text="Uninstall in progress... Please wait...";
+                        $text="Uninstall in progress...";
                         $arr = array("NAME" => $_GET["additional"], "ACTION" => "uninstall");
                         $json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
 
-                        if (set_output("deployment",$json)) echo "OK";
-                        else echo "ERROR";
+                        if (set_output("deployment",$json)) echo "";
+                        else $text .= " - ERROR";
                 }
                 echo $text;
         break;
@@ -455,6 +510,15 @@ switch ($_GET["op"]) {
                 }
                 echo $text;
         break;
+	case "version":
+		$arr = check_response("version");
+		if (!empty($arr)) {
+			$data = $arr["version"];
+			echo "Framework version: ".$data["VERSION"]."\n";
+		}
+		else echo "Framework version not found\n";
+		echo "Frontend version: ".file_get_contents("version.html");
+	break;
 	case "repositories":
 		$arr = array("STATUS" => 0);
 		$json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
@@ -488,21 +552,29 @@ switch ($_GET["op"]) {
 		else echo "ERROR";
 	break;
         case "check_vpn":
-                $key = "check_vpn";
-                $arr = array("STATUS" => 0);
-                $json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
-                set_output($key,$json);
-                sleep(1);
-                $arr = check_response($key);
-                if (!empty($arr)) {
-                        $data = $arr[$key];
-                        echo $data["STATUS"];
-                        remove_response("$key");
-                }
-                else echo "NO";
+                $arr = check_response("save_vpn");
+		if (!empty($arr)) {
+			$data = $arr["save_vpn"];
+			echo $data["STATUS"];
+			if ($data["STATUS"]=="1") remove_response("save_vpn"); // vpn start has finished
+		}
+		else {
+			$key = "check_vpn";
+			$arr = array("STATUS" => 0);
+			$json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
+			set_output($key,$json);
+			sleep(1);
+			$arr = check_response($key);
+			if (!empty($arr)) {
+				$data = $arr[$key];
+				echo $data["STATUS"];
+				remove_response("$key");
+			}
+			else echo "NO";
+		}
         break;
 	case "save_vpn":
-		remove_response("save_repository");
+		//remove_response("save_repository"); // ???
 
 		$arr = array(
 			"VPN_DOMAIN" => $_GET["vpn_domain"],

style.css

@@ -0,0 +1,781 @@
+    :root {
+      --highlight-color: #FFB806;
+    }
+
+    body {
+      margin: 0;
+      font-family: 'Switzer', sans-serif;
+      font-weight: 500;
+      font-size: 16px;
+      background-color: #000;
+      color: white;
+      display: flex;
+      height: 100vh;
+    }
+
+    h4 {
+	font-size: 16px;
+    }
+
+	table {border: 1px solid var(--highlight-color); width:100%;}
+	table th {padding-left: 20px; text-align: left; color: var(--highlight-color); width: 25%;}
+	table td {padding-left: 20px; text-align:left; width: 25%;}
+
+.progress-box {
+	max-width: 300px;
+	margin: auto;
+	text-align: center;
+	align-items: center;
+	border: 2px solid #41464f;
+	padding: 30px 30px 0px 30px;
+	border-radius: 20px;
+}
+.progress-container-shadow {
+    width: 300px;
+    height: 40px;
+    background-color: var(--highlight-color);
+    border-radius: 5px;
+    overflow: hidden;
+    position: relative;
+    margin: 40px auto 0px auto;
+}
+.progress-container-shadow::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+}
+.progress-container {
+    width: 300px;
+    height: 40px;
+    border-radius: 5px;
+    overflow: hidden;
+    position: relative;
+    margin: 0px;
+    top:-45px;
+    left:5px;
+}
+.progress-bar {
+    height: 100%;
+    background-color: var(--highlight-color);
+    width: 0%;
+    border-radius: 5px;
+    transition: width 0.3s ease;
+    position: relative;
+}
+.progress-text {
+    font-size: 20px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+    color: #000000;
+    z-index: 10;
+}
+.progress-title {
+	text-align: left;
+	font-size: 18px;
+	font-weight: bold;
+	margin-bottom: 10px;
+}
+.progress-description {
+	text-align: left;
+	font-size: 16px;
+	margin-bottom: 10px;
+	color: #999;
+	min-height: 40px;
+}
+.controls {
+    text-align: center;
+}
+
+    .sidebar {
+      width: 250px;
+      background-color: #101214;
+      display: flex;
+      flex-direction: column;
+      /*height: 100vh;*/
+      justify-content: space-between;
+      margin: 20px;
+      border-radius: 20px;
+      transition: width 0.3s;
+    }
+
+.sidebar-top {
+      padding: 20px 0px 0px 0px;
+	overflow-y: auto;
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: center; /* ez teszi középre függőlegesen a menüt */
+}
+
+    .logo {
+      text-align: center;
+      font-size: 24px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+    }
+
+    .logo img {
+      height: 30px;
+    }
+
+    .loading {
+	text-align:center;
+	margin-top:300px;
+    }
+
+    .confirm {
+	border: 2px solid #41464f;
+	border-radius: 10px;
+	margin-top:250px;
+	padding: 20px;
+	font-size: 16px;
+	color: #999;
+	line-height: 1.5;
+    }
+
+    .menu {
+      display: flex;
+      flex-direction: column;
+      justify-content: center; /* középre igazít függőlegesen */
+      flex-grow: 1;
+      gap: 5px;
+      padding: 0 10px;
+    }
+
+    .vpn-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: white;
+      transition: color 0.3s;
+    }
+
+    .menu-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 20px;
+      cursor: pointer;
+      color: white;
+      transition: color 0.3s;
+    }
+
+    .menu-item:hover {
+      color: var(--highlight-color);
+    }
+
+    .menu-item i {
+      font-size: 18px;
+    }
+
+    .menu-item span {
+      display: inline;
+    }
+
+    .menu-item img {
+      width: 24px;
+    }
+
+    .menu-item.active {
+      background-color: var(--highlight-color);
+      color: black;
+      border-radius: 10px;
+      font-weight: bold;
+    }
+
+    .menu-item.active:hover {
+      color: black;
+    }
+
+.menu-item span.arrow {
+  margin-left: auto;
+  color: gray;
+  font-size: 20px;
+  transition: transform 0.3s ease;
+}
+
+.menu-item.open .arrow {
+  transform: rotate(180deg);
+}
+
+.submenu {
+  display: none;
+  margin-left: 40px;
+  flex-direction: column;
+  margin-bottom: 10px;
+}
+
+.submenu-item {
+  padding: 5px 14px;
+  font-size: 14px;
+  color: #ffffff;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+.submenu-item:hover {
+  color: #000000;
+  background-color: var(--highlight-color);
+}
+
+
+/* Switch container */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 26px;
+}
+
+/* Hide native checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* Slider background */
+.slider-text {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 8px;
+  transition: background-color 0.3s;
+  display: flex !important;
+  align-items: center;
+  justify-content: flex-end; /* default: OFF on the right */
+  padding: 0 8px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #000;
+}
+
+/* Circle */
+.slider-text::before {
+  content: "";
+  position: absolute;
+  height: 22px;
+  width: 22px;
+  left: 2px;
+  top: 2px;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.3s;
+}
+
+/* Checked: move dot, change background and text alignment */
+.switch input:checked + .slider-text {
+  background-color: var(--highlight-color);
+  justify-content: flex-start;
+}
+
+/* Dot animation */
+.switch input:checked + .slider-text::before {
+  transform: translateX(34px);
+}
+
+
+/* Status label */
+.status-label {
+  font-size: 12px;
+  color: #888;
+  min-width: 28px;
+  text-align: left;
+}
+
+    .details {
+      color: white;
+      text-decoration: none;
+    }
+
+    .yellow-row {
+	flex-shrink: 0;
+	max-width:250px;
+	display: flex;
+	align-items: flex-start;
+	box-sizing: border-box;
+        margin: 0px;
+	width: 100%;
+	padding: 0px 20px 20px 20px;
+    }
+
+    .yellow-box {
+      background-image: url('img/yellow-box.png');
+      background-repeat: no-repeat;
+      /*background-color: var(--highlight-color);
+      border-radius: 20px 20px 0px 20px;*/
+      color: black;
+      text-align: left;
+      margin: 0px;
+      padding: 20px 18px;
+      font-weight: bold;
+      font-size: 12px;
+      width: 156px;
+      height: 176px;
+    }
+
+    .yellow-corner {
+	padding:0px;
+	border: 0px;
+	display: flex;
+	margin: 0px;
+	margin-top: auto;
+	align-items: flex-end;
+    }
+
+.pro-text {
+	font-size: 16px;
+	color: black;
+}
+
+    .grey-box {
+      background-image: url('img/grey-box.svg');
+      background-repeat: no-repeat;
+ /*     border: 2px solid #41464f;  */
+      border-radius: 20px 20px 0px 20px;
+      color: #999;
+      text-align: left;
+      margin: 0px;
+      padding: 20px 18px;
+      font-weight: bold;
+      font-size: 12px;
+      width: 158px;
+      height: 178px;
+    }
+
+.vpn-text {
+	display: flex;
+	align-items: center;  /* Ez igazítja középre függőlegesen a tartalmat */
+	gap: 10px;            /* Távolság kép és szöveg között (opcionális) */
+	font-size: 16px;
+	color: var(--highlight-color);
+	cursor: pointer;
+	padding: 3px 0px 0px 20px;
+}
+
+    .main {
+      flex: 1;
+      padding: 30px;
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+    }
+
+	#appsContainer {
+	  display: flex;
+	  flex-wrap: wrap;
+	  gap: 16px;
+	  padding: 0px;
+	}
+
+	.app {
+	  border: 1px solid #41464f;
+	  border-radius: 15px;
+	  text-align: left;
+	  padding: 20px;
+	  width: 130px;
+	  min-height: 200px;
+	  text-align: left;
+	  display: flex;
+	  flex-direction: column;
+	  align-items: left;
+	}
+
+	.app-img {
+	  padding: 0px;
+	}
+
+	.app img {
+	  border-radius: 15px;
+	  background-color: #101214;
+	  width: 70px;
+	  height: 70px;
+	  object-fit: contain;
+	  margin-bottom: 20px;
+	  padding: 30px;
+	}
+
+	.app-label {
+	  font-size: 10px;
+	  color: #cccccc;
+	  margin-bottom: 10px;
+	  align-items: left;
+	  text-align: left;
+	}
+
+	.app-name {
+	  font-size: 16px;
+	  font-weight: bold;
+	  margin-bottom: 30px;
+	}
+
+	.more-btn {
+	  background-color: inherit;
+	  color: #cccccc;
+	  border: 1px solid #cccccc;
+	  border-radius: 15px;
+	  padding: 18px;
+	  font-size: 16px;
+	  font-weight: 400;
+	  cursor: pointer;
+	  width: 100%;
+	  font-weight: bold;
+	}
+
+	.more-btn:hover {
+	  color: var(--highlight-color);
+	  border: 1px solid var(--highlight-color);
+	}
+
+	.app-details {
+		padding: 0px 50px;
+	}
+
+	.app-fields {
+	  border: 1px solid #41464f;
+	  border-radius: 15px;
+	  text-align: left;
+	  padding: 20px;
+	  margin: 30px 0px 10px 0px;
+	  display: flex;
+	  flex-direction: column;
+	  align-items: left;
+	}
+
+	.app-fields .row {
+            display: flex;
+	      justify-content: space-between;
+	      align-items: center;
+	      padding: 5px 20px;
+	      border-radius: 10px;
+	      gap: 10px;
+	}
+
+	#letsencrypt {
+		padding-top: 20px;
+	}
+
+.header-block {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 20px 0px;
+}
+
+.logo-and-text {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.applogo img {
+  border-radius: 15px;
+  background-color: #101214;
+  width: 70px;
+  height: 70px;
+  object-fit: contain;
+  padding: 40px;
+}
+
+.text-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: bold;
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 18px;
+  margin: 4px 0;
+  color: #999;
+}
+
+.description {
+  font-size: 16px;
+  margin: 20px 0 0;
+  color: #999;
+  line-height: 1.5;
+}
+
+.notification-btn {
+      background-color: var(--highlight-color);
+      color: black;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 10px;
+      cursor: pointer;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+}
+
+    .main-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 30px;
+    }
+
+    .main-header h1 {
+      margin: 0;
+      font-size: 28px;
+    }
+
+    .main-header button {
+      background-color: var(--highlight-color);
+      color: black;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 10px;
+      cursor: pointer;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .input-row, .input-group {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border: 1px solid #41464f;
+      padding: 15px 20px;
+      margin-bottom: 15px;
+      border-radius: 10px;
+      gap: 10px;
+    }
+
+    .input-container {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      flex: 1;
+      justify-content: flex-end;
+      position: relative;
+    }
+
+    .input-row input,
+    .input-row select,
+    .row input, 
+    .row select {
+      background: transparent;
+      border: 1px solid #41464f;
+      padding: 8px 30px 8px 8px;
+      border-radius: 10px;
+      color: white;
+      transition: color 0.2s;
+      max-width: 40%;
+      box-sizing: border-box;
+    }
+
+    .row input, 
+    .row select {
+      padding: 12px 30px 12px 12px;
+      font-size: 16px;
+    }
+
+    .input-row input:focus,
+    .input-row select:focus,
+    .row input,
+    .row select {
+      outline: none;
+      background-color: black;
+      color: var(--highlight-color);
+    }
+
+    .input-row select,
+    .row select {
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5-5 5 5zM7 14l5 5 5-5z"/></svg>');
+      background-repeat: no-repeat;
+      background-position: right 8px center;
+      background-size: 16px;
+      padding-right: 32px;
+    }
+
+	.info-container {
+		position: relative;
+		left: -18px;
+		top: -22px;
+		display: inline-block;
+		font-family: Arial, sans-serif;
+		margin: 0px;
+		width: 0px;
+	}
+
+    .info-icon {
+      background-color: var(--highlight-color);
+      color: black;
+      border-radius: 50%;
+      padding: 1px 4px;
+      cursor: pointer;
+      font-weight: bold;
+      font-size: 10px;
+      text-align: center;
+      line-height: 1;
+      display: inline-block;
+    }
+
+    .tooltip {
+      visibility: hidden;
+      background-color: #333;
+      border-radius: 5px;
+      padding: 4px 8px;
+      position: absolute;
+      z-index: 1;
+      bottom: 100%; /* above the icon */
+      left: 50%;
+      transform: translateX(-78%);
+      opacity: 0;
+      transition: opacity 0.3s;
+      /*white-space: nowrap;*/
+      text-align: right;
+      width: 300px;
+    }
+
+    .tooltip::after {
+      content: "";
+      position: absolute;
+      top: 100%; /* bottom of tooltip */
+      left: 80%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #333 transparent transparent transparent;
+    }
+
+    .info-container:hover .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    .clear-btn {
+      position: absolute;
+      right: 8px;
+      background: transparent;
+      border: none;
+      color: white;
+      cursor: pointer;
+      font-size: 16px;
+      padding: 0;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      user-select: none;
+    }
+
+    .save-button {
+      background-color: var(--highlight-color);
+      color: black;
+      border: none;
+      padding: 15px 30px;
+      font-size: 16px;
+      border-radius: 10px;
+      font-weight: bold;
+      cursor: pointer;
+      margin-top: 30px;
+      align-self: flex-start;
+    }
+
+    .save-button:hover {
+      background-color: #f5c300;
+    }
+
+    .buttons .btn {
+      background-color: black;
+      border: 1px solid #999;
+      color: #999;
+      padding: 10px 15px;
+      font-size: 14px;
+      border-radius: 5px;
+      font-weight: bold;
+      cursor: pointer;
+      margin-top: 10px;
+      align-self: flex-start;
+    }
+
+    .buttons .btn:hover {
+      border: 1px solid #f5c300;
+      color: #f5c300;
+    }
+
+        .hidden {
+            display: none;
+        }
+
+        .popup {
+	    width: 100%;
+        }
+
+        .popup-content {
+            width: 100%;
+            text-align: left;
+        }
+
+        #popup .row {
+            display: flex;
+        }
+
+    @media (max-width: 768px) {
+      .sidebar {
+        width: 80px;
+        padding: 20px 5px;
+      }
+
+      .logo {
+        font-size: 0;
+      }
+
+      .logo span {
+        display: none;
+      }
+
+      .menu-item {
+        justify-content: center;
+        gap: 0;
+      }
+
+      .menu-item span {
+        display: none;
+      }
+
+      .yellow-box {
+        font-size: 0;
+        padding: 10px;
+      }
+
+      .input-row {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .input-container {
+        width: 100%;
+        justify-content: flex-start;
+      }
+
+      .input-row input,
+      .input-row select {
+        max-width: 100%;
+      }
+    }
+

version.html

@@ -0,0 +1 @@
+1.1.19