install width

common.js

@@ -110,27 +110,33 @@ function check_vpn() {
   var url  = 'scan.php?op=check_vpn';
   jQuery.get(url, function(data) {
         console.log('check_vpn: '+data);
-        if (data=="1") { // save_vpn has finished
+        if (data=="1") { // save_vpn has finished or VPN ON
 	  const vpn_div = document.getElementById("vpn");
-	  console.log(vpn_div);
+	  console.log('vpn_div: '+vpn_div);
 	  if (vpn_div) {
 	  	vpn_div.innerHTML = 'VPN start process has finished';
-		//document.getElementById('installAppsBtn').click();
+		setTimeout(function() {
+			document.getElementById('installAppsBtn').click();
+		}, 2000);
+	  }
+	  else {
+		$('#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") {
-		document.getElementById('vpnToggle').checked = true;
-  		document.querySelector(".switch-label").textContent = "ON";
-          $('#vpn_off').hide();
-          $('#vpn_on').show();
 		$('#pro_off').hide();
 		$('#pro_on').show();
-        }
-        else {
-		document.getElementById('vpnToggle').checked = false;
-  		document.querySelector(".switch-label").textContent = "OFF";
 		$('#vpn_on').hide();
 		$('#vpn_off').show();
+		//document.getElementById('vpnToggle').checked = false;
+		//document.querySelector(".switch-label").textContent = "OFF";
+        }
+        else { // data == 0
 		$('#pro_on').hide();
 		$('#pro_off').show();
         }
@@ -211,7 +217,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);
@@ -237,7 +244,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);
@@ -271,14 +279,14 @@ function uninstall(additional) {
   jQuery("div.deployment").each(function(index) {
         $(this).html('');
   });
-	data = '<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="save-button" type="button" onclick="confirm_uninstall(\''+additional+'\')">Uninstall</button></div></div></form>';
+	data = '<div class="confirm"><form action="#" method="post"><div class="row">You are going to uninstall '+additional.toUpperCase()+'.<br>Are you sure? If yes, please click on the Uninstall button below.<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('Loading'); // manage2
+  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);
@@ -406,53 +414,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:</label>
-				<label for="vpn_domain">Please add domain url to download the VPN hash from (default: https://portal.safebox.network):</label>
+		    <div class="input-container">
-				<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network">
+				<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network" size="40">
-				<div class="invalid-feedback">
-				Please enter a valid domain.
 		    </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>
+		    <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>
+		    <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="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>
+		    <div class="input-container">
 				<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt">
 		    </div>
 		</div>
+		</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>
 	<script>
 	jQuery('#vpn_save_btn').click(function() {
 		console.log('vpn save');
 		save_vpn();
-		jQuery('#vpn').html('VPN start process in progress. Please wait...');
+		jQuery('#vpn').html('<div class="loading">VPN start process in progress. Please wait...</div>');
 	});
 	</script>
         `;
@@ -523,19 +530,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;
 	});
 

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%;
+    display: block;
-    height: 100%;
+    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,18 +1,21 @@
 <!DOCTYPE html>
 <html lang="hu">
 <head>
-  <meta charset="UTF-8" />
+<meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Safebox - INSTALLER TOOL</title>
+<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
-  <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"/>
+<meta http-equiv="Pragma" content="no-cache" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
+<meta http-equiv="Expires" content="0" />
-  <link rel="stylesheet" href="style.css?t=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=1" />
 </head>
 <body id="installer">
-  <div class="main" >
+  <div class="main" style="max-width:1000px;margin:0px auto;">
     <div id="myAppsContainer">
 	      <div class="logo">
-		<img src="/img/logo.png" alt="Safebox"/>
+		<img src="/img/logo.svg" alt="Safebox"/>
 		<span>Safebox</span>
 	      </div>
 		<h3 style="text-align:center">No any previous deployed environment has found</h3>
@@ -62,13 +65,7 @@
 		</select>
 	</div>
 </div>
-<div id="div_vpn" class="hidden">
+<div id="div_vpn1" 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://portal.safebox.network" placeholder="https://portal.safebox.network" size="40">
-		</div>
-	</div>
 	<div class="input-row">
 		<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
 		<div class="input-container">
@@ -81,12 +78,6 @@
 			<input type="email" class="form-control" name="LETSENCRYPT_MAIL" id="letsencrypt_mail" value="">
 		</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="diagnostic">Diagnostic mode enable?</label>
@@ -105,6 +96,20 @@
 		</div>
 <!-- advanced settings -->
 <div id="advanced_div" style="display:none">
+	<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://portal.safebox.network" placeholder="https://portal.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>
 		<div class="input-container">
@@ -196,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();
+		if (jQuery(this).val()=='yes') {
-		else jQuery('#div_vpn').hide();
+			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

@@ -59,12 +59,12 @@ function simulateLoading(duration = 3000) {
 
 function redirectToInstall() {
 	setProgress(100);
-	window.location.href = 'install.html';
+	window.location.href = 'install.html?t='+Date.now();
 }
 
 function redirectToManage() {
 	setProgress(100);
-	window.location.href = 'manage.html';
+	window.location.href = 'manage.html?t='+Date.now();
 }
 
 function start_system() {
@@ -155,7 +155,7 @@ function check_install() {
 
     console.log('install: '+install);
     if (install==1) {
-	  var url  = 'scan.php?op=check_install&key=<?php echo $key;?>';
+	  var url  = 'scan.php?op=check_install';
 	  $.get(url, function(data){
 	    console.log('check_install:'+data+' counter: '+counter);
 	    if (data=='INSTALLED') {
@@ -163,7 +163,7 @@ function check_install() {
 	    }
 	    else {
 	      counter+=1
-	      $("#info").html('Please wait ... ' + counter);
+	      $("#info").html('Please wait ...');
 	      setTimeout(check_install, 1000);
 	    }
 	  });

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";
 }
 
@@ -74,8 +74,8 @@ echo "<pre>".$output."</pre>";
 <body id="install" class="text-center">
   <div class="main">
     <div id="myAppsContainer">
-	<div class="logo" style="margin-top:100px">
+	<div class="logo" style="margin:100px 0px 20px 0px;">
-		<img src="/img/logo.png" alt="Safebox"/>
+		<img src="/img/logo.svg" alt="Safebox"/>
 		<span>Safebox</span>
 	</div>
 	<div class="progress-box">
@@ -95,7 +95,7 @@ echo "<pre>".$output."</pre>";
 <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=6"></script>
+<script src="install.js?t=7"></script>
 <script>
 const progressBar = document.getElementById('progressBar');
 const progressText = document.getElementById('progressText');

manage.html

@@ -1,32 +1,24 @@
 <!DOCTYPE html>
 <html lang="hu">
 <head>
-  <meta charset="UTF-8" />
+<meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Safebox</title>
+<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
-  <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"/>
+<meta http-equiv="Pragma" content="no-cache" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
+<meta http-equiv="Expires" content="0" />
-  <link rel="stylesheet" href="style.css?t=1" />
+<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=14" />
 </head>
 <body>
   <div class="sidebar">
-    <div>
+    <div class="sidebar-top">
       <div id="logo" class="logo">
-        <img src="/img/logo.png" alt="Safebox"/>
+        <img src="/img/logo.svg" alt="Safebox"/>
         <span>Safebox</span>
       </div>
       <div class="menu">
-	    <div class="menu-item" style="margin-bottom:20px">
-		<img src="/img/globe.png" data-src="/img/globe.png" data-hover="/img/globe.png" alt="VPN" />
-		<div class="menu-label">
-		    <span id="vpnBtn">VPN</span>
-		    <label class="switch">
-		      <input type="checkbox" id="vpnToggle">
-		      <span class="slider-text"><span class="switch-label">OFF</span></span>
-		    </label>
-		</div>
-	    </div>
-
 <!--
 	<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>
@@ -46,29 +38,42 @@
       </div>
     </div>
     <div class="yellow-row">
-	    <div class="yellow-box">
 	<div id="pro_off">
-		      <h4>Safebox Pro</h4>
+	    <div class="yellow-box">
+		<div class="pro-text">
+		  <span>Safebox Pro</span>
+		</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.png" alt="Upgrade now" width="100%"/>	
+			<img src="/img/upgrade.png" alt="Upgrade now" width="80%" id="upgradeBtn" style="cursor:pointer"/>	
 		      </p>
 	    </div>
+	</div>
 	<div id="pro_on" class="hidden">
-		      <h4>Login</h4>
+	    <div class="grey-box">
-		      <p>Enjoy benefits and unlock more feature such as remote access, geo-redundant backups etc. <br><br>
+		<div class="vpn-text" id="vpnBtn" >
-		      <a href="" class="details">Read details</a><br><br>
+		  <img src="/img/globe.png" data-src="/img/globe.png" data-hover="/img/globe.png" alt="VPN"/>
+		  <span>Remote access</span>
+		</div>
+		      <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.png" alt="on" /></span>
+				<span id="vpn_off" class="hidden"><img src="/img/off.png" alt="off" /></span>
 			</div>
 	    </div>
-	    <div class="yellow-corner">
-		<img src="img/yellow_corner.png" alt=""/>
 	</div>
     </div>
   </div>
   <div class="main" >
     <div id="myAppsContainer">
-	    Loading applications. Please wait...
+	    <div class="loading">Loading applications...</div>
     </div>
     <div id="popup" class="popup hidden">
 	<div class="popup-content">
@@ -93,6 +98,7 @@
     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');
@@ -176,16 +182,31 @@
         }
     }
 
+    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</h1>
+	      <h1>VPN - enable proxy</h1>
 	    </div>
             <div id="vpn" class="innerDiv">
-	    Loading...
+	    <div class="loading">Loading...</div>
             </div>
         `;
 	get_proxy_html();
@@ -197,7 +218,7 @@
 	      <h1>Services</h1>
 	    </div>
             <div id="services" class="innerDiv">
-	    Loading...
+	    <div class="loading">Loading...</div>
             </div>
         `;
 	get_services();
@@ -209,7 +230,7 @@
 	      <h1>Updates</h1>
 	    </div>
             <div id="updates" class="innerDiv">
-	    Looking for updates... Please wait...
+	    <div class="loading">Looking for updates...</div>
             </div>
         `;
 	get_updates();
@@ -221,7 +242,7 @@
 	      <h1>System services</h1>
 	    </div>
             <div id="system" class="innerDiv">
-	    Loading...
+	    <div class="loading">Loading...</div>
             </div>
         `;
 	get_system();
@@ -293,7 +314,7 @@
 	    <div class="main-header">
 	      <h1>Repositories</h1>
 	    </div>
-		<div id="repositories" style="text-align:left">Loading...</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">
@@ -336,13 +357,15 @@
 	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', () => {renderText('Monitor'); activate(monitorBtn)});
+	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");
 
@@ -351,9 +374,13 @@
 	}
 
 	vpnToggle.addEventListener("change", updateStatus);
+	vpnToggle.addEventListener('click', function (e) {
+		e.preventDefault();
+	});
 
 	// Alapállapot beállítása
 	updateStatus();
+*/
 
 });
 </script>
@@ -363,6 +390,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=33"></script>
+<script src="common.js?t=43"></script>
 </body>
 </html>

scan.html

@@ -1,18 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+<meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Safebox - INSTALLER TOOL</title>
+<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
-  <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"/>
+<meta http-equiv="Pragma" content="no-cache" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
+<meta http-equiv="Expires" content="0" />
-  <link rel="stylesheet" href="style.css?t=4" />
+<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="main">
     <div id="myAppsContainer">
-	<div class="logo" style="margin-top:100px">
+	<div class="logo" style="margin:100px 0px 20px 0px;">
-		<img src="/img/logo.png" alt="Safebox"/>
+		<img src="/img/logo.svg" alt="Safebox"/>
 		<span>Safebox</span>
 	</div>
 	<div class="progress-box">
@@ -37,7 +40,7 @@
 <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=6"></script>
+<script src="install.js?t=7"></script>
 <script>
 const progressBar = document.getElementById('progressBar');
 const progressText = document.getElementById('progressText');

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
+	case "check_install": // called in install.js - check if install process has finished
-		$arr = check_response($_GET["key"]); // TODO - replace key with "install", key can be "install*"
+		$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";
@@ -149,7 +149,7 @@ switch ($_GET["op"]) {
 								$subtitle = $content["subtitle"];
 								if (empty($subtitle) || $subtitle == "null") $subtitle = "";
 								$icon = $content["icon"];
-								if (empty($icon) || $icon == "null") $icon = "img/default_logo.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 .= ", ";
@@ -268,7 +268,7 @@ switch ($_GET["op"]) {
 						}
 						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>"; // buttons
+						</div>";
                                                 echo "
                                                 </div>
 						</form>
@@ -348,7 +348,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"]);
@@ -497,9 +497,10 @@ switch ($_GET["op"]) {
 		$arr = check_response("version");
 		if (!empty($arr)) {
 			$data = $arr["version"];
-			echo $data["VERSION"];
+			echo "Framework version: ".$data["VERSION"]."\n";
 		}
-		else echo "Version not found";
+		else echo "Framework version not found\n";
+		echo "Frontend version: 1.1.15";
 	break;
 	case "repositories":
 		$arr = array("STATUS" => 0);

style.css

@@ -1,5 +1,5 @@
     :root {
-      --highlight-color: #F9DB54;
+      --highlight-color: #FFB806;
     }
 
     body {
@@ -96,16 +96,24 @@
       background-color: #101214;
       display: flex;
       flex-direction: column;
+      /*height: 100vh;*/
       justify-content: space-between;
-      padding: 20px 0;
       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;
-      margin-bottom: 40px;
       font-size: 24px;
       font-weight: bold;
       display: flex;
@@ -118,9 +126,23 @@
       height: 30px;
     }
 
+    .loading {
+	text-align:center;
+	margin-top:300px;
+    }
+
+    .confirm {
+	border: 2px solid #41464f;
+	border-radius: 10px;
+	margin-top:250px;
+	padding: 20px;
+    }
+
     .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;
     }
@@ -129,8 +151,6 @@
       display: flex;
       align-items: center;
       gap: 10px;
-      padding: 10px 20px;
-      cursor: pointer;
       color: white;
       transition: color 0.3s;
     }
@@ -227,7 +247,7 @@
   right: 0;
   bottom: 0;
   background-color: #ccc;
-  border-radius: 26px;
+  border-radius: 8px;
   transition: background-color 0.3s;
   display: flex !important;
   align-items: center;
@@ -235,7 +255,7 @@
   padding: 0 8px;
   font-size: 12px;
   font-weight: bold;
-  color: #fff;
+  color: #000;
 }
 
 /* Circle */
@@ -253,7 +273,7 @@
 
 /* Checked: move dot, change background and text alignment */
 .switch input:checked + .slider-text {
-  background-color: #4CAF50;
+  background-color: var(--highlight-color);
   justify-content: flex-start;
 }
 
@@ -277,24 +297,29 @@
     }
 
     .yellow-row {
+	flex-shrink: 0;
 	max-width:250px;
 	display: flex;
 	align-items: flex-start;
 	box-sizing: border-box;
         margin: 0px;
 	width: 100%;
-	padding: 0 20px;
+	padding: 0px 20px 20px 20px;
     }
 
     .yellow-box {
-      background-color: var(--highlight-color);
+      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: 10px 18px;
+      padding: 20px 18px;
-      border-radius: 20px 20px 0px 20px;
       font-weight: bold;
       font-size: 12px;
+      width: 156px;
+      height: 176px;
     }
 
     .yellow-corner {
@@ -306,6 +331,35 @@
 	align-items: flex-end;
     }
 
+.pro-text {
+	font-size: 16px;
+	color: black;
+}
+
+    .grey-box {
+      background-image: url('img/grey-box.png');
+      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;
+}
+
     .main {
       flex: 1;
       padding: 30px;
@@ -396,7 +450,7 @@
 	}
 
 	.app-fields .row {
-            display: block;
+            display: flex;
 	      justify-content: space-between;
 	      align-items: center;
 	      padding: 5px 20px;