vpn and other changes

common.js

@@ -29,6 +29,7 @@ function check_deployments() {
 		html_data += '<div id="'+service_name+'" class="deployment"></div>';
 	}
 	jQuery("#deployments").html(html_data);
+	document.getElementById('installAppsBtn').click();
 
       }
   });
@@ -109,12 +110,16 @@ function check_vpn() {
   jQuery.get(url, function(data) {
         console.log('check_vpn: '+data);
         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();
           $('#pro_on').hide();

manage.html

@@ -59,7 +59,7 @@
     .menu {
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 5px;
       padding: 0 10px;
     }
 
@@ -248,11 +248,11 @@
 	.app img {
 	  border-radius: 15px;
 	  background-color: #101214;
-	  width: 110px;
+	  width: 70px;
-	  height: 110px;
+	  height: 70px;
 	  object-fit: contain;
 	  margin-bottom: 20px;
-	  padding: 10px;
+	  padding: 30px;
 	}
 
 	.app-label {
@@ -270,14 +270,21 @@
 	}
 
 	.more-btn {
-	  background-color: var(--highlight-color);
+	  background-color: inherit;
-	  border: none;
+	  color: #cccccc;
+	  border: 1px solid #cccccc;
 	  border-radius: 15px;
-	  padding: 20px;
+	  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 {
@@ -336,19 +343,19 @@
 }
 
 .title {
-  font-size: 20px;
+  font-size: 26px;
   font-weight: bold;
   margin: 0;
 }
 
 .subtitle {
-  font-size: 14px;
+  font-size: 16px;
   margin: 4px 0;
   color: #999;
 }
 
 .description {
-  font-size: 12px;
+  font-size: 14px;
   margin: 20px 0 0;
   color: #999;
 }
@@ -656,12 +663,20 @@
     </div>
     <div class="yellow-row">
 	    <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>
+		      </p>
+		</div>
+	    </div>
 	    <div class="yellow-corner">
 		<img src="img/yellow_corner.png" alt=""/>
 	    </div>
@@ -724,11 +739,13 @@
 	    //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.name} ${app.version}</div>
 			<div class="app-name">${app.orig_name}</div>
-			<button class="more-btn">More</button>
+			<button class="more-btn">${more}</button>
 		    `;
 		    appDiv.addEventListener('click', () => {
 			popupText.textContent = `You clicked on ${app.name} ${app.version}!`;
@@ -745,27 +762,16 @@
 
     //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 = `
-            <h1 style="text-align: center;">${title}</h1>
+	    <div class="main-header">
-
+	      <h1>${title}</h1>
-            <div class="input-group">
+	      <button id="updatesBtn"><i class="fas fa-bell"></i> Notification</button>
-                <input type="text" placeholder="Írj be valamit..." id="textInput">
-                <button id="submitButton">Küldés</button>
-
-                <select id="myComboBox" class="custom-select">
-                    <option value="">Válassz egy lehetőséget...</option>
-                    <option value="1">Első opció</option>
-                    <option value="2">Második opció</option>
-                    <option value="3">Harmadik opció</option>
-                </select>
-
-                <label class="checkbox-container">
-                    <input type="checkbox" id="myCheckbox">
-                    <span class="checkmark"></span>
-                    Elfogadom a feltételeket
-                </label>
 	    </div>
+	    <label>Under development...</label>
         `;
 
         const submitButton = document.getElementById('submitButton');
@@ -785,6 +791,9 @@
     }
 
     function renderVPN() {
+    	myAppsContainer.classList.remove('hidden');
+        popup.classList.add('hidden');
+
         myAppsContainer.innerHTML = `
 	    <div class="main-header">
 	      <h1>VPN</h1>
@@ -833,6 +842,9 @@
     }
 
     function renderSettings() {
+    	myAppsContainer.classList.remove('hidden');
+        popup.classList.add('hidden');
+
 	myAppsContainer.innerHTML = `
     <div class="main-header">
       <h1>Settings</h1>
@@ -961,7 +973,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="common.js?t=10"></script>
+<script src="common.js?t=12"></script>
 </body>
 </html>