From b5ca0eb58068f40a81fb8a1796eb0877ff3a7392 Mon Sep 17 00:00:00 2001
From: ChrispyBacon-dev <ori@hotmail.de>
Date: Mon, 14 Apr 2025 18:41:59 +0200
Subject: [PATCH] status_page.html updates

---
 templates/status_page.html | 141 ++++++++++++++++++++++++++++---------
 1 file changed, 109 insertions(+), 32 deletions(-)
diff --git a/templates/status_page.html b/templates/status_page.html
index 4454858..77adaaa 100644
--- a/templates/status_page.html
+++ b/templates/status_page.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en"> <!-- data-theme will be added by JS -->
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,27 +8,52 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css">
     <title>Cloudflare Tunnel Manager</title>
     <style>
-        /* Keep some custom styles */
-        body { padding-top: 1rem; padding-bottom: 1rem; } /* Add some vertical padding */
+        /* Basic layout adjustments */
+        body { padding-top: 1rem; padding-bottom: 1rem; }
         h1, h2, h3 { margin-top: 1.5em; margin-bottom: 0.5em; }
         h1 { margin-top: 0; text-align: center; }
-        article { margin-bottom: 1.5rem; } /* Add space between sections */
-        td pre { margin: 0; white-space: pre-wrap; word-break: break-all; font-family: var(--pico-font-family-monospace); font-size: 0.9em; } /* Use Pico monospace font */
+        article { margin-bottom: 1.5rem; }
+        td pre { margin: 0; white-space: pre-wrap; word-break: break-all; font-family: var(--pico-font-family-monospace); font-size: 0.9em; }
 
-        /* Status-specific colors (adjust Pico variables if preferred later) */
-        .status-box { padding: 1rem 1.25rem; border: 1px solid var(--pico-card-border-color); border-radius: var(--pico-card-border-radius); margin-top: 1rem; word-wrap: break-word; }
-        .error { background-color: #ffebeb; border-color: #ffc2c2; color: #a00; }
-        .success { background-color: #e6ffed; border-color: #c3e6cb; color: #155724; }
-        .info { background-color: #e7f3fe; border-color: #b8daff; color: #004085; }
-        .warning { background-color: #fff3cd; border-color: #ffeeba; color: #856404; }
+        /* Status-specific colors using Pico variables and left border */
+        .status-box {
+            padding: 1rem 1.25rem;
+            border: 1px solid var(--pico-form-element-border-color);
+            border-radius: var(--pico-border-radius);
+            margin-top: 1rem;
+            word-wrap: break-word;
+            background-color: var(--pico-form-element-background-color);
+            color: var(--pico-form-element-color);
+            border-left-width: 4px; /* Add a thicker left border for emphasis */
+        }
+        .status-box.error {
+            border-left-color: var(--pico-color-red-500);
+        }
+        .status-box.success {
+            border-left-color: var(--pico-color-green-500);
+        }
+        .status-box.info {
+            border-left-color: var(--pico-color-blue-500);
+        }
+        .status-box.warning {
+            border-left-color: var(--pico-color-amber-500);
+        }
+        /* Ensure text inside is readable */
+        .status-box p {
+            margin-bottom: 0;
+        }
+        .status-box strong {
+             color: var(--pico-h_color); /* Use heading color for better contrast */
+        }
 
         /* Rule Status colors */
-        .status-active { color: var(--pico-color-green-600); font-weight: bold; } /* Use Pico green */
-        .status-pending { color: var(--pico-color-orange-500); font-weight: bold; } /* Use Pico orange */
+        .status-active { color: var(--pico-color-green-600); font-weight: bold; }
+        .status-pending { color: var(--pico-color-orange-500); font-weight: bold; }
 
-        /* Form styling adjustments if needed */
+        /* Form styling adjustments */
         form { display: inline-block; margin: 0; }
-        form button { margin: 0; } /* Pico might add margins we don't want inside the table cell */
+        form button { margin: 0; }
+        .grid > form > button { width: 100%; } /* Make buttons in grid take full width */
 
         /* Status indicator dots */
         .status-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle;}
@@ -37,27 +62,41 @@
         .status-indicator.docker_unavailable { background-color: var(--pico-color-gray-500); }
         .status-indicator.unknown, .status-indicator.created, .status-indicator.paused { background-color: var(--pico-color-amber-500); }
 
-        /* Button customizations (Pico uses <button> directly, removes need for .button class often) */
-        button.delete-button { --pico-background-color: var(--pico-color-red-600); --pico-border-color: var(--pico-color-red-600); }
-        button.delete-button:hover { --pico-background-color: var(--pico-color-red-700); }
-        /* Pico handles disabled state styling automatically */
+        /* Button customizations */
+        button.delete-button {
+            /* Use Pico classes 'contrast' and 'outline' */
+            font-size: 0.9em; /* Make delete button slightly smaller */
+            padding: 0.5rem 0.75rem;
+        }
 
-        /* Theme Toggle Placeholder - CORRECTED */
+        /* Theme Toggle Button */
         #theme-toggle {
             position: absolute;
             top: 1rem;
             right: 1rem;
-            /* Maybe add z-index later if needed */
+            /* Use Pico classes for button styling */
+            padding: 0.5rem; /* Smaller padding */
+            width: auto; /* Allow button to size to content */
+            line-height: 1; /* Align icon better */
+            font-size: 1.2rem; /* Adjust icon size */
+            background: transparent;
+            border: none;
+            color: var(--pico-secondary);
+        }
+        #theme-toggle:hover {
+            color: var(--pico-secondary-hover);
+             background: transparent; /* Ensure no background on hover */
+             border: none;
         }
 
     </style>
 </head>
-<!-- Body will use Pico default styles. Main container for centering/max-width -->
+<!-- Body uses Pico styles. Main container for centering/max-width. data-theme set by JS -->
 <body>
     <main class="container">
 
-        <!-- Theme Toggle Button Placeholder -->
-        <button id="theme-toggle" aria-label="Toggle theme">🌓</button> <!-- Simple Emoji Toggle -->
+        <!-- Theme Toggle Button -->
+        <button id="theme-toggle" aria-label="Toggle theme">🌓</button> <!-- Initial Icon -->
 
         <h1>Cloudflare Tunnel Manager</h1>
 
@@ -67,6 +106,7 @@
                 <h2>Initialization Status</h2>
                 <h3>Cloudflare Tunnel API Interaction</h3>
             </hgroup>
+            <!-- Apply status class directly to the box -->
             <div class="status-box {{ 'error' if tunnel_state.get('error') else ('success' if tunnel_state.get('token') else 'info') }}">
                 <p><strong>Message:</strong> {{ tunnel_state.status_message }}</p>
                 {% if tunnel_state.get('error') %}
@@ -93,8 +133,9 @@
                 </strong>
             </p>
             {% if agent_state.last_action_status %}
+                <!-- Apply status class directly to the box -->
                 <div class="status-box {{ 'error' if 'Error:' in agent_state.last_action_status else ('warning' if 'Warning:' in agent_state.last_action_status else 'info') }}">
-                    <strong>Last Action Result:</strong> {{ agent_state.last_action_status }}
+                    <p><strong>Last Action Result:</strong> {{ agent_state.last_action_status }}</p>
                 </div>
             {% endif %}
 
@@ -107,7 +148,6 @@
                      </button>
                  </form>
                  <form action="{{ url_for('stop_tunnel') }}" method="post">
-                     <!-- Add class="secondary" for less emphasis maybe? -->
                      <button type="submit" class="secondary"
                              {{ 'disabled' if agent_state.container_status!='running' or not docker_available }}>
                          Stop Agent
@@ -121,7 +161,7 @@
             <h2>Managed Ingress Rules</h2>
             {% if rules %}
                 <figure> <!-- Pico styles tables inside figures nicely -->
-                <table role="grid"> <!-- role="grid" for accessibility with tables -->
+                <table role="grid"> <!-- role="grid" for accessibility -->
                     <thead>
                         <tr>
                             <th scope="col">Hostname</th>
@@ -153,9 +193,9 @@
                                 <td>
                                     <form action="{{ url_for('force_delete_rule', hostname=hostname) }}" method="post"
                                           onsubmit="return confirm('Are you sure you want to force delete the rule and DNS record for {{ hostname }} immediately? This bypasses the grace period.');">
-                                        <!-- Pico styles buttons without needing specific classes -->
+                                        <!-- Use Pico classes for styling -->
                                         <button type="submit" class="delete-button contrast outline" {{ 'disabled' if not docker_available }}>
-                                            Force Delete
+                                            Delete
                                         </button>
                                     </form>
                                 </td>
@@ -171,10 +211,47 @@
 
     </main> <!-- end .container -->
 
-    <!-- JavaScript for Theme Toggle (will add later) -->
+    <!-- JavaScript for Theme Toggle -->
     <script>
-        // Placeholder for theme toggle script
-        console.log("Theme toggle script placeholder");
+      const themeToggleButton = document.getElementById('theme-toggle');
+      const htmlElement = document.documentElement; // Target the <html> element
+
+      // Function to set the theme and update icon
+      const setTheme = (theme) => {
+        htmlElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme); // Save preference
+        // Update button icon based on the new theme
+        themeToggleButton.textContent = theme === 'dark' ? '☀️' : '🌓';
+      };
+
+      // Function to toggle the theme
+      const toggleTheme = () => {
+        // Check the current theme *explicitly* set on <html> or default to light
+        const currentTheme = htmlElement.getAttribute('data-theme') || 'light';
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        setTheme(newTheme);
+      };
+
+      // Add event listener to the button
+      themeToggleButton.addEventListener('click', toggleTheme);
+
+      // Apply theme on initial load
+      const initTheme = () => {
+          const savedTheme = localStorage.getItem('theme');
+          // Check for OS preference if no theme is saved
+          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+          if (savedTheme) {
+            setTheme(savedTheme);
+          } else {
+            // If no saved theme, use OS preference as default
+            setTheme(prefersDark ? 'dark' : 'light');
+          }
+      };
+
+      // Run theme initialization
+      initTheme();
+
     </script>
 
 </body>
