Add software tool functionality with device connection and upgrade options

- Implemented the software tool page with user interface for connecting devices.
- Added functionality to display connection status and software upgrade options.
- Included a help modal with step-by-step instructions for users.
- Integrated error handling and user permission checks.
- Enhanced user experience with dynamic content updates and visual feedback.

settings.php

@@ -59,38 +59,33 @@ function format_var_html($key, $value) {
     $html .= '<input type="' . $type . '" name="' . $key . '" id="' . $key . '" value="' . $value . '" placeholder="' . format_key($key) . '"' . $checked . '>';
     return $html;
 }
-// Format tabs
-function format_tabs($contents) {
+// Format tabs and content together (interleaved for collapsible functionality)
+function format_tabs_and_content($contents) {
     $rows = explode("\n", $contents);
-    $tab = '<div class="tabs">';
-    $tab .= '<a href="#" class="active">General</a>';
+    $output = '';
+    
+    // Start with General tab and its content
+    $output .= '<div class="tabs"><a href="#" class="active">General</a></div>';
+    $output .= '<div class="content-block tab-content active"><div class="form responsive-width-100">';
+    
     for ($i = 0; $i < count($rows); $i++) {
         preg_match('/\/\*(.*?)\*\//', $rows[$i], $match);
         if ($match) {
-            $tab .= '<a href="#">' . $match[1] . '</a>';
+            // Close previous content and start new tab
+            $output .= '</div></div>';
+            $output .= '<div class="tabs"><a href="#">' . $match[1] . '</a></div>';
+            $output .= '<div class="content-block tab-content"><div class="form responsive-width-100">';
+        }
+        preg_match('/define\(\'(.*?)\', ?(.*?)\)/', $rows[$i], $define_match);
+        if ($define_match) {
+            $output .= format_var_html($define_match[1], $define_match[2]);
         }
     }
-    $tab .= '</div>';
-    return $tab;
+    $output .= '</div></div>';
+    
+    return $output;
 }
-// Format form
-function format_form($contents) {
-    $rows = explode("\n", $contents);
-    $form = '<div class="tab-content active">';
-    for ($i = 0; $i < count($rows); $i++) {
-        preg_match('/\/\*(.*?)\*\//', $rows[$i], $match);
-        if ($match) {
-            $form .= '</div><div class="tab-content">';
-        }
-        preg_match('/define\(\'(.*?)\', ?(.*?)\)/', $rows[$i], $match);
-        if ($match) {
-            $form .= format_var_html($match[1], $match[2]);
-        }
-    }  
-    $form .= '</div>';
 
-    return $form;
-}
 if (isset($_POST['submit']) && !empty($_POST)) {
     // Update the configuration file with the new keys and values
     foreach ($_POST as $k => $v) {
@@ -98,9 +93,7 @@ if (isset($_POST['submit']) && !empty($_POST)) {
         $contents = preg_replace('/define\(\'' . $k . '\'\, ?(.*?)\)/s', 'define(\'' . $k . '\',' . $v . ')', $contents);
     }
     file_put_contents($file, $contents);
-
     
-
     //Return succesmessage
     header('Location: index.php?page=settings&success_msg=1');
     exit;
@@ -144,18 +137,9 @@ if (isset($success_msg)){
         </div>';
 }
    
-$view .= format_tabs($contents);
-$view .= '<div class="content-block">
-        <div class="form responsive-width-100">
-            ';
-$view .= format_form($contents);
+$view .= format_tabs_and_content($contents);
 
 $view .= '
-        </div>
-    </div>
-</form> 
-
-
 <script>
 document.querySelectorAll("input[type=\'checkbox\']").forEach(checkbox => {
     checkbox.onclick = () => checkbox.value = checkbox.checked ? "true" : "false";