lots of layout changes

2025-08-06 17:45:06 +00:00
parent 803e7185d8
commit 198a83b4c7
7 changed files with 61 additions and 48 deletions
--- a/common.js
+++ b/common.js
@@ -122,6 +122,8 @@ function check_vpn() {
 	  else {
 		$('#pro_off').hide();
 		$('#pro_on').show();
+		$('#vpn_off').hide();
+		$('#vpn_on').show();
 		document.getElementById('vpnToggle').checked = true;
 		document.querySelector(".switch-label").textContent = "ON";
 	  }
@@ -129,6 +131,8 @@ function check_vpn() {
 	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";
        }
@@ -213,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);
@@ -239,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);
@@ -279,8 +285,8 @@ function uninstall(additional) {
 }

 function confirm_uninstall(additional) {
-  jQuery("#"+additional).html('Loading...');
-  jQuery("#popupText").html('Loading'); // manage2
+  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);
@@ -408,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 (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://portal.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');
 		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>
        `;
@@ -525,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;
 	});

--- a/install.js
+++ b/install.js
@@ -163,7 +163,7 @@ function check_install() {
 	    }
 	    else {
 	      counter+=1
-	      $("#info").html('Please wait ... ' + counter);
+	      $("#info").html('Please wait ...');
 	      setTimeout(check_install, 1000);
 	    }
 	  });
--- a/install.php
+++ b/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,7 +74,7 @@ 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"/>
 		<span>Safebox</span>
 	</div>
--- a/manage.html
+++ b/manage.html
@@ -6,7 +6,7 @@
  <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=7" />
+  <link rel="stylesheet" href="style.css?t=10" />
 </head>
 <body>
  <div class="sidebar">
@@ -55,10 +55,14 @@
 		      <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_ff" class="hidden"><img src="/img/off.png" alt="off" /></span>
 			</div>
 	    </div>
 	</div>
@@ -66,7 +70,7 @@
  </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">
@@ -180,10 +184,10 @@

        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();
@@ -195,7 +199,7 @@
 	      <h1>Services</h1>
 	    </div>
            <div id="services" class="innerDiv">
-	    Loading...
+	    <div class="loading">Loading...</div>
            </div>
        `;
 	get_services();
@@ -207,7 +211,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();
@@ -219,7 +223,7 @@
 	      <h1>System services</h1>
 	    </div>
            <div id="system" class="innerDiv">
-	    Loading...
+	    <div class="loading">Loading...</div>
            </div>
        `;
 	get_system();
@@ -291,7 +295,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">
@@ -364,6 +368,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=37"></script>
+<script src="common.js?t=40"></script>
 </body>
 </html>
--- a/scan.html
+++ b/scan.html
@@ -11,7 +11,7 @@
 <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"/>
 		<span>Safebox</span>
 	</div>
--- a/scan.php
+++ b/scan.php
@@ -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"]);
--- a/style.css
+++ b/style.css
@@ -126,6 +126,11 @@
      height: 30px;
    }

+    .loading {
+	    text-align:center;
+	    margin-top:300px;
+    }
+
    .menu {
      display: flex;
      flex-direction: column;
@@ -139,7 +144,6 @@
      display: flex;
      align-items: center;
      gap: 10px;
-      cursor: pointer;
      color: white;
      transition: color 0.3s;
    }
@@ -439,7 +443,7 @@
 	}

 	.app-fields .row {
-            display: block;
+            display: flex;
 	      justify-content: space-between;
 	      align-items: center;
 	      padding: 5px 20px;