load app new design

manage3.html

@@ -148,7 +148,7 @@
 	  display: flex;
 	  flex-wrap: wrap;
 	  gap: 16px;
-	  padding: 20px;
+	  padding: 0px;
 	}
 
 	.app {
@@ -203,6 +203,92 @@
 	  width: 100%;
 	}
 
+	.app-details {
+		padding: 0px 50px;
+	}
+
+	.app-fields {
+	  border: 1px solid #41464f;
+	  border-radius: 15px;
+	  text-align: left;
+	  padding: 20px;
+	  margin: 30px 0px 10px 0px;
+	  display: flex;
+	  flex-direction: column;
+	  align-items: left;
+	}
+
+	.app-fields .row {
+            display: block;
+	      justify-content: space-between;
+	      align-items: center;
+	      padding: 5px 20px;
+	      border-radius: 10px;
+	      gap: 10px;
+	}
+
+	#letsencrypt {
+		padding-top: 20px;
+	}
+
+.header-block {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 20px 0px;
+}
+
+.logo-and-text {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.applogo img {
+  border-radius: 15px;
+  background-color: #101214;
+  width: 70px;
+  height: 70px;
+  object-fit: contain;
+  padding: 40px;
+}
+
+.text-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 14px;
+  margin: 4px 0;
+  color: #999;
+}
+
+.description {
+  font-size: 12px;
+  margin: 20px 0 0;
+  color: #999;
+}
+
+.notification-btn {
+      background-color: var(--highlight-color);
+      color: black;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 10px;
+      cursor: pointer;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+}
+
     .main-header {
       display: flex;
       justify-content: space-between;
@@ -249,7 +335,9 @@
     }
 
     .input-row input,
-    .input-row select {
+    .input-row select,
+    .row input, 
+    .row select {
       background: transparent;
       border: 1px solid #41464f;
       padding: 8px 30px 8px 8px;
@@ -260,14 +348,23 @@
       box-sizing: border-box;
     }
 
+    .row input, 
+    .row select {
+      padding: 12px 30px 12px 12px;
+      font-size: 16px;
+    }
+
     .input-row input:focus,
-    .input-row select:focus {
+    .input-row select:focus,
+    .row input,
+    .row select {
       outline: none;
       background-color: black;
       color: var(--highlight-color);
     }
 
-    .input-row select {
+    .input-row select,
+    .row select {
       appearance: none;
       -webkit-appearance: none;
       -moz-appearance: none;
@@ -278,6 +375,62 @@
       padding-right: 32px;
     }
 
+	.info-container {
+		position: relative;
+		left: -18px;
+		top: -22px;
+		display: inline-block;
+		font-family: Arial, sans-serif;
+		margin: 0px;
+		width: 0px;
+	}
+
+    .info-icon {
+      background-color: var(--highlight-color);
+      color: black;
+      border-radius: 50%;
+      padding: 1px 4px;
+      cursor: pointer;
+      font-weight: bold;
+      font-size: 10px;
+      text-align: center;
+      line-height: 1;
+      display: inline-block;
+    }
+
+    .tooltip {
+      visibility: hidden;
+      background-color: #333;
+      border-radius: 5px;
+      padding: 4px 8px;
+      position: absolute;
+      z-index: 1;
+      bottom: 100%; /* above the icon */
+      left: 50%;
+      transform: translateX(-78%);
+      opacity: 0;
+      transition: opacity 0.3s;
+      /*white-space: nowrap;*/
+      text-align: right;
+      width: 300px;
+    }
+
+    .tooltip::after {
+      content: "";
+      position: absolute;
+      top: 100%; /* bottom of tooltip */
+      left: 80%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #333 transparent transparent transparent;
+    }
+
+    .info-container:hover .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+
     .clear-btn {
       position: absolute;
       right: 8px;
@@ -311,44 +464,35 @@
       background-color: #f5c300;
     }
 
-        .popup.hidden {
+    .buttons .btn {
+      background-color: black;
+      border: 1px solid #999;
+      color: #999;
+      padding: 10px 15px;
+      font-size: 14px;
+      border-radius: 5px;
+      font-weight: bold;
+      cursor: pointer;
+      margin-top: 10px;
+      align-self: flex-start;
+    }
+
+    .buttons .btn:hover {
+      border: 1px solid #f5c300;
+      color: #f5c300;
+    }
+
+        .hidden {
             display: none;
         }
 
         .popup {
-            position: fixed;
-            top: 0;
-            left: 0;
 	    width: 100%;
-            height: 100%;
-            background: rgba(0,0,0,0.5);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 999;
         }
 
         .popup-content {
-            background: var(--bg-color);
+            width: 100%;
-            padding: 30px;
-            border-radius: 15px;
-            width: 80%;
             text-align: left;
-            position: relative;
-            animation: fadeIn 0.3s ease;
-        }
-
-        .popup-content .close {
-            position: absolute;
-            top: 10px;
-            right: 15px;
-            font-size: 24px;
-            cursor: pointer;
-        }
-
-        #popup .input-group {
-		background-color: #101214;
-		display: block;
         }
 
         #popup .row {
@@ -475,17 +619,12 @@
 	    </div>
 	    <button class="save-button">Save Settings</button>
     </div>
-  </div>
+    <div id="popup" class="popup hidden">
-
-
-<div id="popup" class="popup hidden">
 	<div class="popup-content">
-    <span class="close">&times;</span>
+		<div id="popupText" class="deployment"></div>
-    <div class="input-group">
+	</div>
-    <div id="popupText" class="deployment">Load app template here</div>
     </div>
   </div>
-</div>
 
 <script>
     // apps array beállítása common.js-ben
@@ -542,6 +681,7 @@
 			if (app.installed=='true') reinstall(app.name, 'popupText');
 			else load_template(app.name,'popupText');
 			popup.classList.remove('hidden');
+			myAppsContainer.classList.add('hidden');
 		    });
 		    appsContainer.appendChild(appDiv);
             //}

scan.php

@@ -180,9 +180,25 @@ switch ($_GET["op"]) {
 				if ($key=="deployment") {
 					if ($data["STATUS"]=="0") { // ask
 						$template = json_decode(base64_decode($data["TEMPLATE"]));
-						echo "<fieldset><form action=\"#\" method=\"post\" id=\"deploy_{$template->name}_form\"><br>";
+
-						echo '<div id="letsencrypt">';
+						echo '
+						<div class="app-details">
+							<div class="header-block">
+							  <div class="logo-and-text">
+							    <div class="applogo">
+								<img src="'.$template->icon.'">
+							    </div>
+							    <div class="text-content">
+							      <h1 class="title">'.$template->name.'</h1>
+							      <h2 class="subtitle">'.$template->title.'</h2>
+							      <p class="description">'.$template->description.'</p>
+							    </div>
+							  </div>
+							  <button id="updatesBtn" class="notification-btn"><i class="fas fa-bell"></i> Notification</button>
+							</div>
+						';
 						if ($reinstall) {
+							echo '<div id="letsencrypt">';
 							//var_dump($template);
                                                         $letsencrypt = check_letsencrypt();
 							if (empty($letsencrypt)) echo "LETSENCRYPT file doesn't exists...<br><br>";
@@ -194,12 +210,10 @@ switch ($_GET["op"]) {
 								}
 								if (!empty($domain)) show_letsencrypt($letsencrypt, $domain);
 							}
-						}
 							echo '</div>';
-						echo "<div class=\"row\">";
+						}
-						if (!empty($template->icon)) echo "<img src=\"".$template->icon."\">";
+						echo "<form action=\"#\" method=\"post\" id=\"deploy_{$template->name}_form\">";
-						if (!empty($template->description)) echo "<label style='padding: 10px'>".$template->description."</label>";
+						echo "<div class=\"app-fields\">";
-						echo "</div>";
 						foreach ($template->fields as $field) {
 							if (!empty($field->title)) echo "<div class=\"row\"><h3>".$field->title."</h3></div>";
 							if (isset($field->generated)) {
@@ -207,21 +221,20 @@ switch ($_GET["op"]) {
 							}
 							else {
 								echo "<div class=\"row\">";
-								echo "<div>
+								echo "<label>".$field->description."</label>
-									<label>".$field->description."</label>
+								<div class=\"input-container\"><input ".($field->required=="true" ? "required" : "")." type=\"".(!empty($field->type) ? $field->type : "text")."\" value=\"{$field->value}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\"></div>
-									<input ".($field->required=="true" ? "required" : "")." type=\"".(!empty($field->type) ? $field->type : "text")."\" value=\"{$field->value}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\">
-									</div>";
-								if (!empty($field->info)) echo "
 								<div class=\"info-container\">
+								";
+								if (!empty($field->info)) echo "
 									  <span class=\"info-icon\">i</span>
 									  <div class=\"tooltip\">{$field->info}</div>
-									</div>
 								";
 								echo "</div>";
+								echo "</div>";
 								if (!empty($field->details)) echo "<div class=\"row\"><i>".$field->details."</i></div>";
 							}
 						}
-
+						echo "</div>";
 
                                                 echo "<div class=\"row buttons\">";
 						if ($reinstall) {
@@ -242,10 +255,11 @@ switch ($_GET["op"]) {
 						}
 						echo "<div class=\"mb-3\" style=\"margin-left:230px;float:\">
 						<button class=\"btn btn-lg btn-primary btn-block\" type=\"button\" id=\"cancel_{$template->name}_btn\">Cancel</button>
-						</div>";
+						</div>"; // buttons
                                                 echo "
                                                 </div>
-                                                </form></fieldset>
+						</form>
+						</div>
 <script>
 	jQuery('#deploy_{$template->name}_form').submit(function() {
 		".($reinstall ? "redeploy" : "deploy")."('{$template->name}');
@@ -253,6 +267,7 @@ switch ($_GET["op"]) {
 	});
         jQuery('#cancel_{$template->name}_btn').click(function() {
                 $('div#{$template->name}').html('');
+    		document.getElementById('myAppsContainer').classList.remove('hidden'); // manage3
     		document.getElementById('popup').classList.add('hidden'); // manage2
         });
 </script>