sidebar changes

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();

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
+}
+

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 charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Safebox - INSTALLER TOOL</title>
-<title>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"/>
-<!-- Bootstrap CSS -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+  <link rel="stylesheet" href="style.css?t=4" />
-<!-- Custom styles for this template -->
-<link href="installer.css?t=1" rel="stylesheet">
 </head>
 <body id="install" class="text-center">
-<div class="container-fluid">
+  <div class="main">
-<div class="col-md-12">
+    <div id="myAppsContainer">
-	<h1><?php echo $header_text?></h1>
+	<div class="logo" style="margin-top:100px">
-	<div id="redis"></div>
+		<img src="/img/logo.png" alt="Safebox"/>
-	<div id="response"></div>
+		<span>Safebox</span>
-</div>
+	</div>
-</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() {
+// Initialize
-    window.location.href = 'manage.html';
+updateProgress(0);
-}
+startProgress(90000);// 90 seconds
 
-function check_install() {
+check_interface();
-
+counter=0;
-  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;
-});
 </script>
 </body>
 </html>

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="sidebar-top">
-      <div class="logo">
+      <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,23 +35,28 @@
       </div>
     </div>
     <div class="yellow-row">
-	    <div class="yellow-box">
 	<div id="pro_off">
+	    <div class="yellow-box">
 		      <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>
 	<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>
+		      <h4><img src="/img/globe.png" data-src="/img/globe.png" data-hover="/img/globe.png" alt="VPN" /> Remote access</h4>
-		      <a href="" class="details">Read details</a><br><br>
+		      <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">
+			    <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 class="yellow-corner">
-		<img src="img/yellow_corner.png" alt=""/>
 	</div>
     </div>
   </div>
@@ -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>
-

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>
   </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;
-
+let install = 0; // scan
-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...');
-    }
-  });
-}
 
 // Initialize
 updateProgress(0);
-startProgress();
+startProgress(30000);// 30 seconds
 
 check_interface();
-
 </script>
 </body>
 </html>

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);

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;