sidebar changes

sidebar - vertical align center, color change
version, uninstall button style
2025-08-05 19:43:15 +00:00 · 2025-08-05 15:23:16 +00:00 · 2025-08-04 16:27:11 +00:00 · 2025-08-04 14:57:17 +00:00 · 2025-08-04 14:49:55 +00:00 · 2025-08-04 14:03:44 +00:00
7 changed files with 290 additions and 283 deletions
--- a/common.js
+++ b/common.js
@@ -271,7 +271,7 @@ 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 = '<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>';
 	jQuery("#"+additional).html(data);
 	jQuery("#popupText").html(data); // manage2
 }
@@ -480,8 +480,17 @@ 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();
--- a/install.js
+++ b/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';
+}
+
+function redirectToManage() {
+	setProgress(100);
+	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') {
+      $("#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&key=<?php echo $key;?>';
+	  $.get(url, function(data){
+	    console.log('check_install:'+data+' counter: '+counter);
+	    if (data=='INSTALLED') {
+		redirectToManage();
+	    }
+	    else {
+	      counter+=1
+	      $("#info").html('Please wait ... ' + counter);
+	      setTimeout(check_install, 1000);
+	    }
+	  });
+    }
+    else start_system(); // scan
+}
+
--- a/install.php
+++ b/install.php
@@ -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-top:100px">
+		<img src="/img/logo.png" 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=6"></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>
--- a/manage.html
+++ b/manage.html
@@ -6,27 +6,16 @@
  <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=1" />
+  <link rel="stylesheet" href="style.css?t=5" />
 </head>
 <body>
  <div class="sidebar">
-    <div>
-      <div class="logo">
+    <div class="sidebar-top">
+      <div id="logo" class="logo">
        <img src="/img/logo.png" 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,24 +35,29 @@
      </div>
    </div>
    <div class="yellow-row">
+	<div id="pro_off">
 	    <div class="yellow-box">
-		<div id="pro_off">
 		      <h4>Safebox Pro</h4>
 		      <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%"/>	
 		      </p>
-		</div>
-		<div id="pro_on" class="hidden">
-		      <h4>Login</h4>
-		      <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>
+	    </div>
+	</div>
+	<div id="pro_on" class="hidden">
+	    <div class="grey-box">
+		      <h4><img src="/img/globe.png" data-src="/img/globe.png" data-hover="/img/globe.png" alt="VPN" /> Remote access</h4>
+		      <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>
-	    </div>
-	    <div class="yellow-corner">
-		<img src="img/yellow_corner.png" alt=""/>
+			<div class="vpn-item">
+			    <span id="vpnBtn">VPN</span>
+			    <label class="switch">
+			      <input type="checkbox" id="vpnToggle" onclick="return false">
+			      <span class="slider-text"><span class="switch-label">OFF</span></span>
+			    </label>
+			</div>
 	    </div>
+	</div>
    </div>
  </div>
  <div class="main" >
@@ -351,6 +345,9 @@
 	}

 	vpnToggle.addEventListener("change", updateStatus);
+	vpnToggle.addEventListener('click', function (e) {
+		e.preventDefault();
+	});

 	// Alapállapot beállítása
 	updateStatus();
@@ -363,7 +360,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=30"></script>
+<script src="common.js?t=33"></script>
 </body>
 </html>
-
--- a/scan.html
+++ b/scan.html
@@ -6,7 +6,7 @@
  <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=3" />
+  <link rel="stylesheet" href="style.css?t=4" />
 </head>
 <body id="scan" class="text-center">
  <div class="main">
@@ -25,11 +25,11 @@
 			<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 class="controls">
+        	<button onclick="document.location='install.html'" class="save-button">STOP AND START INSTALL</button>
+	</div>
+-->
    </div>
  </div>
 <!-- Optional JavaScript -->
@@ -37,172 +37,19 @@
 <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>
 const progressBar = document.getElementById('progressBar');
 const progressText = document.getElementById('progressText');
 let currentProgress = 0;
 let progressInterval;
-
-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();
-}
-
-function startProgress() {
-    clearInterval(progressInterval);
-    const duration = 60000; // 60 seconds
-    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';
-}
-
-function redirectToManage() {
-	setProgress(100);
-	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') {
-      $("#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');
-      start_system();
-    }
-    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');
-      start_system();
-    }
-    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...');
-    }
-  });
-}
+let install = 0; // scan

 // Initialize
 updateProgress(0);
-startProgress();
+startProgress(30000);// 30 seconds

 check_interface();
-
 </script>
 </body>
 </html>
--- a/scan.php
+++ b/scan.php
@@ -182,6 +182,7 @@ switch ($_GET["op"]) {
 				if ($key=="deployment") {
 					if ($data["STATUS"]=="0") { // ask
 						$template = json_decode(base64_decode($data["TEMPLATE"]));
+						$template->name = strtolower($template->name);

 						echo '
 						<div class="app-details">
@@ -191,7 +192,7 @@ switch ($_GET["op"]) {
 								<img src="'.$template->icon.'">
 							    </div>
 							    <div class="text-content">
-							      <h1 class="title">'.$template->name.'</h1>
+							      <h1 class="title">'.$template->title.'</h1>
 							      <h2 class="subtitle">'.$template->subtitle.'</h2>
 							      <p class="description">'.$template->description.'</p>
 							    </div>
@@ -492,6 +493,14 @@ switch ($_GET["op"]) {
                }
                echo $text;
        break;
+	case "version":
+		$arr = check_response("version");
+		if (!empty($arr)) {
+			$data = $arr["version"];
+			echo $data["VERSION"];
+		}
+		else echo "Version not found";
+	break;
 	case "repositories":
 		$arr = array("STATUS" => 0);
 		$json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
--- a/style.css
+++ b/style.css
@@ -1,5 +1,5 @@
    :root {
-      --highlight-color: #F9DB54;
+      --highlight-color: #FFB806;
    }

    body {
@@ -47,7 +47,7 @@
  pointer-events: none;
 }
 .progress-container {
-    width: 280px;
+    width: 300px;
    height: 40px;
    border-radius: 5px;
    overflow: hidden;
@@ -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 0;
+	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;
@@ -121,6 +129,8 @@
    .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;
    }
@@ -277,13 +287,14 @@
    }

    .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 {
@@ -306,6 +317,20 @@
 	align-items: flex-end;
    }

+    .grey-box {
+      border: 2px solid #41464f;
+      border-radius: 20px 20px 0px 20px;
+      color: #999;
+      text-align: left;
+      margin: 0px;
+      padding: 10px 18px;
+      font-weight: bold;
+      font-size: 12px;
+    }
+    .grey-box h4 {
+      color: var(--highlight-color);
+    }
+
    .main {
      flex: 1;
      padding: 30px;
Author	SHA1	Message	Date
hael	0d61dd1725	sidebar changes All checks were successful continuous-integration/drone/push Build is passing Details	2025-08-05 19:43:15 +00:00
hael	d7147b6c81	sidebar - vertical align center, color change	2025-08-05 15:23:16 +00:00
hael	63ec0ebaa8	version, uninstall button style All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/tag Build is passing Details	2025-08-04 16:27:11 +00:00
hael	f925665d23	progress after install All checks were successful continuous-integration/drone/push Build is passing Details	2025-08-04 14:57:17 +00:00
hael	a1aa1c0d14	progress after install All checks were successful continuous-integration/drone/push Build is passing Details	2025-08-04 14:49:55 +00:00
hael	ff97952f67	strtolower template name, tilte	2025-08-04 14:03:44 +00:00
hael	f0ce402830	progress bar width All checks were successful continuous-integration/drone/push Build is passing Details	2025-08-01 15:04:30 +00:00