From 268bf90dccfa55b5b43086e490336be983c8fc7c Mon Sep 17 00:00:00 2001
From: gael <gael@qoherent.ai>
Date: Thu, 25 Sep 2025 14:46:01 -0400
Subject: [PATCH] Update gain_viz/templates/index.html

---
 gain_viz/templates/index.html | 521 +++++++++++-----------------------
 1 file changed, 170 insertions(+), 351 deletions(-)
diff --git a/gain_viz/templates/index.html b/gain_viz/templates/index.html
index 82aab91..7e40b26 100644
--- a/gain_viz/templates/index.html
+++ b/gain_viz/templates/index.html
@@ -1,362 +1,181 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Spectrum Viewer</title>
-    <style>
-        :root {
-            --primary-color: #2563eb;
-            --primary-dark: #1d4ed8;
-            --secondary-color: #0f172a;
-            --success-color: #10b981;
-            --error-color: #ef4444;
-            --warning-color: #f59e0b;
-            --light-bg: #f8fafc;
-            --border-color: #e2e8f0;
-            --text-dark: #1e293b;
-            --text-light: #64748b;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            line-height: 1.6;
-            color: var(--text-dark);
-            background-color: #f1f5f9;
-            padding: 20px;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 12px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.05);
-            overflow: hidden;
-        }
-
-        header {
-            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
-            color: white;
-            padding: 24px 30px;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        h1 {
-            font-size: 2rem;
-            font-weight: 700;
-            letter-spacing: -0.5px;
-        }
-
-        .subtitle {
-            font-weight: 400;
-            opacity: 0.9;
-            margin-top: 6px;
-        }
-
-        .form-section {
-            padding: 30px;
-            border-bottom: 1px solid var(--border-color);
-            background-color: white;
-        }
-
-        .section-title {
-            font-size: 1.4rem;
-            font-weight: 600;
-            margin-bottom: 24px;
-            color: var(--secondary-color);
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .form-group {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-           
-        }
-
-        label {
-            font-weight: 600;
-            font-size: 0.95rem;
-            color: var(--text-dark);
-        }
-
-        .input-wrapper {
-            position: relative;
-        }
-
-        input[type="number"] {
-            width: 100%;
-            padding: 12px 16px;
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            font-size: 1rem;
-            transition: all 0.2s ease;
-            background-color: white;
-        }
-
-        input[type="number"]:focus {
-            outline: none;
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-        }
-
-        input[type="number"]:disabled {
-            background-color: #f1f5f9;
-            color: #64748b;
-            cursor: not-allowed;
-        }
-
-        .toggle-container {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin-top: 8px;
-        }
-
-        .toggle-switch {
-            position: relative;
-            display: inline-block;
-            width: 50px;
-            height: 24px;
-        }
-
-        .toggle-switch input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-
-        .slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #ccc;
-            transition: .4s;
-            border-radius: 24px;
-        }
-
-        .slider:before {
-            position: absolute;
-            content: "";
-            height: 16px;
-            width: 16px;
-            left: 4px;
-            bottom: 4px;
-            background-color: white;
-            transition: .4s;
-            border-radius: 50%;
-        }
-
-        input:checked + .slider {
-            background-color: var(--primary-color);
-        }
-
-        input:checked + .slider:before {
-            transform: translateX(26px);
-        }
-
-        .toggle-label {
-            font-size: 0.9rem;
-            color: var(--text-light);
-        }
-
-        .button-group {
-            display: flex;
-            gap: 12px;
-            margin-top: 20px;
-        }
-
-        button {
-            padding: 12px 24px;
-            border: none;
-            border-radius: 6px;
-            background-color: var(--primary-color);
-            color: white;
-            font-weight: 500;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            transition: background-color 0.2s;
-        }
-
-        button:hover {
-            background-color: var(--primary-dark);
-        }
-
-        button:disabled {
-            background-color: #94a3b8;
-            cursor: not-allowed;
-        }
-
-        .status {
-            padding: 16px;
-            border-radius: 6px;
-            margin: 20px 0;
-            display: none;
-        }
-
-        .status.success {
-            background-color: rgba(16, 185, 129, 0.1);
-            color: #047857;
-            border: 1px solid rgba(16, 185, 129, 0.2);
-        }
-
-        .status.error {
-            background-color: rgba(239, 68, 68, 0.1);
-            color: #b91c1c;
-            border: 1px solid rgba(239, 68, 68, 0.2);
-        }
-
-        .plot-container {
-            padding: 10px;
-            background-color: #f8fafc;
-        }
-
-        #plotImage {
-            width: 100%;
-            object-fit: cover; /* fill the space completely */
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-            display: block;
-            margin: 0 auto;
-        }
-
-        footer {
-            padding: 20px;
-            text-align: center;
-            color: var(--text-light);
-            font-size: 0.9rem;
-            border-top: 1px solid var(--border-color);
-        }
-
-        @media (max-width: 768px) {
-            .form-grid {
-                display: grid;
-                grid-template-columns: repeat(2, 1fr); /* 2 columns */
-                grid-template-rows: repeat(2, auto);   /* 2 rows */
-                gap: 20px;
-                margin-bottom: 24px;
-            }
-        }
-        param-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-        .param-group {
-            display: flex;
-            flex-direction: column;
-        }
-        .param-group label {
-            margin-bottom: 5px;
-            font-weight: bold;
-            color: #333;
-        }
-        .param-group input {
-            padding: 8px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            font-size: 14px;
-        }
-        .param-group input:focus {
-            outline: none;
-            border-color: #007bff;
-            box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
-        }
-    </style>
+  <meta charset="UTF-8">
+  <title>Spectrum Viewer</title>
+  <style>
+    :root {
+      --primary-color: #2563eb;
+      --primary-dark: #1d4ed8;
+      --secondary-color: #0f172a;
+      --border-color: #e2e8f0;
+      --text-dark: #1e293b;
+      --text-light: #64748b;
+    }
+    body {
+      font-family: system-ui, sans-serif;
+      margin: 0;
+      padding: 20px;
+      background: #f1f5f9;
+      color: var(--text-dark);
+    }
+    .container {
+      max-width: 1200px;
+      margin: auto;
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+      overflow: hidden;
+    }
+    header {
+      background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+      color: #fff;
+      padding: 20px 30px;
+    }
+    header h1 { margin: 0; font-size: 1.8rem; }
+    header .subtitle { font-size: 0.95rem; opacity: 0.9; }
+    .form-section { padding: 24px; border-bottom: 1px solid var(--border-color); }
+    .section-title { margin-bottom: 16px; font-size: 1.3rem; }
+    .grid-2 {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 16px;
+    }
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      background: #f8fafc;
+      padding: 12px;
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+    }
+    .form-group label { font-weight: 600; font-size: 0.9rem; }
+    .input-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    input[type="number"] {
+      flex: 1;
+      padding: 8px;
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+    }
+    .toggle-switch {
+      position: relative; width: 44px; height: 22px; flex-shrink: 0;
+    }
+    .toggle-switch input { opacity: 0; width: 0; height: 0; }
+    .slider {
+      position: absolute; cursor: pointer;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: #ccc; border-radius: 22px;
+      transition: .4s;
+    }
+    .slider:before {
+      position: absolute; content: "";
+      height: 16px; width: 16px; left: 3px; bottom: 3px;
+      background: #fff; border-radius: 50%; transition: .4s;
+    }
+    input:checked + .slider { background: var(--primary-color); }
+    input:checked + .slider:before { transform: translateX(22px); }
+    .button-group { margin-top: 16px; }
+    button {
+      padding: 10px 18px; border: none; border-radius: 6px;
+      background: var(--primary-color); color: #fff;
+      cursor: pointer; font-weight: 500;
+    }
+    button:hover { background: var(--primary-dark); }
+    .param-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 16px;
+    }
+    .param-group { display: flex; flex-direction: column; }
+    .param-group input {
+      padding: 8px; border: 1px solid var(--border-color); border-radius: 6px;
+    }
+    .plot-container {
+      padding: 20px;
+      background: #f8fafc;
+      border-top: 1px solid var(--border-color);
+    }
+    .plot-container img {
+      width: 100%;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    footer {
+      padding: 14px;
+      text-align: center;
+      font-size: 0.85rem;
+      color: var(--text-light);
+      border-top: 1px solid var(--border-color);
+    }
+  </style>
 </head>
 <body>
 <div class="container">
-    <header>
-        <h1>Spectrum Viewer</h1>
-        <p class="subtitle">Real-time RF Spectrum Analysis</p>
-    </header>
+  <header>
+    <h1>Spectrum Viewer</h1>
+    <p class="subtitle">Real-time RF Spectrum Analysis</p>
+  </header>
 
-    <div class="form-section">
-        <h2 class="section-title">Gain Settings</h2>
-        <form id="gainForm">
-            <div class="form-grid">
-                <!-- USRP Tx -->
-                <div class="form-group">
-                    <label for="usrp_tx_gain">USRP Tx Gain</label>
-                    <div class="input-wrapper">
-                        <input type="number" id="usrp_tx_gain" name="usrp_tx_gain" value="0" disabled>
-                    </div>
-                    <div class="toggle-container">
-                        <label class="toggle-switch">
-                            <input type="checkbox" id="usrp_tx_toggle" class="gain-toggle">
-                            <span class="slider"></span>
-                        </label>
-                        <span class="toggle-label">Update USRP Tx Gain</span>
-                    </div>
-                </div>
-
-                <!-- SCM Tx -->
-                <div class="form-group">
-                    <label for="scm_tx_gain">SCM Tx Gain</label>
-                    <div class="input-wrapper">
-                        <input type="number" id="scm_tx_gain" name="scm_tx_gain" value="0" disabled>
-                    </div>
-                    <div class="toggle-container">
-                        <label class="toggle-switch">
-                            <input type="checkbox" id="scm_tx_toggle" class="gain-toggle">
-                            <span class="slider"></span>
-                        </label>
-                        <span class="toggle-label">Update SCM Tx Gain</span>
-                    </div>
-                </div>
-
-                <!-- USRP Rx -->
-                <div class="form-group">
-                    <label for="usrp_rx_gain">USRP Rx Gain</label>
-                    <div class="input-wrapper">
-                        <input type="number" id="usrp_rx_gain" name="usrp_rx_gain" value="0" disabled>
-                    </div>
-                    <div class="toggle-container">
-                        <label class="toggle-switch">
-                            <input type="checkbox" id="usrp_rx_toggle" class="gain-toggle">
-                            <span class="slider"></span>
-                        </label>
-                        <span class="toggle-label">Update USRP Rx Gain</span>
-                    </div>
-                </div>
-
-                <!-- SCM Rx -->
-                <div class="form-group">
-                    <label for="scm_rx_gain">SCM Rx Gain</label>
-                    <div class="input-wrapper">
-                        <input type="number" id="scm_rx_gain" name="scm_rx_gain" value="0" disabled>
-                    </div>
-                    <div class="toggle-container">
-                        <label class="toggle-switch">
-                            <input type="checkbox" id="scm_rx_toggle" class="gain-toggle">
-                            <span class="slider"></span>
-                        </label>
-                        <span class="toggle-label">Update SCM Rx Gain</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="button-group">
-                <button type="submit" id="updateBtn">Update Gains</button>
-            </div>
-        </form>
-        <div id="statusMessage" class="status"></div>
-    </div>
+  <!-- Gain Controls -->
+  <div class="form-section">
+    <h2 class="section-title">Gain Settings</h2>
+    <form id="gainForm">
+      <div class="grid-2">
+        <div class="form-group">
+          <label for="usrp_tx_gain">USRP Tx Gain</label>
+          <div class="input-row">
+            <input type="number" id="usrp_tx_gain" name="usrp_tx_gain" value="0" disabled>
+            <label class="toggle-switch">
+              <input type="checkbox" id="usrp_tx_toggle" class="gain-toggle">
+              <span class="slider"></span>
+            </label>
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="scm_tx_gain">SCM Tx Gain</label>
+          <div class="input-row">
+            <input type="number" id="scm_tx_gain" name="scm_tx_gain" value="0" disabled>
+            <label class="toggle-switch">
+              <input type="checkbox" id="scm_tx_toggle" class="gain-toggle">
+              <span class="slider"></span>
+            </label>
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="usrp_rx_gain">USRP Rx Gain</label>
+          <div class="input-row">
+            <input type="number" id="usrp_rx_gain" name="usrp_rx_gain" value="0" disabled>
+            <label class="toggle-switch">
+              <input type="checkbox" id="usrp_rx_toggle" class="gain-toggle">
+              <span class="slider"></span>
+            </label>
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="scm_rx_gain">SCM Rx Gain</label>
+          <div class="input-row">
+            <input type="number" id="scm_rx_gain" name="scm_rx_gain" value="0" disabled>
+            <label class="toggle-switch">
+              <input type="checkbox" id="scm_rx_toggle" class="gain-toggle">
+              <span class="slider"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="button-group">
+        <button type="submit">Update Gains</button>
+      </div>
+    </form>
+  </div>
 
+  <!-- Spectrogram Parameters -->
+  <div class="form-section">
+   
             <h2 class="section-title">Spectrogram Parameters</h2>
         <div class="param-grid" id="paramContainer">
             <div class="param-group">
