From b1510e5521fdfd270882811183d63ca775442f6f Mon Sep 17 00:00:00 2001
From: Max Spier <68516760+Mixmix00@users.noreply.github.com>
Date: Wed, 9 Jul 2025 19:41:55 -0700
Subject: [PATCH] chatgpt web dashboard

---
 public/index.html | 181 ++++++++++++++++++++++++++++++----------------
 1 file changed, 117 insertions(+), 64 deletions(-)
diff --git a/public/index.html b/public/index.html
index 320fc94..1599539 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,122 +4,175 @@
 <head>
     <title>AprilTag Detection with Controls and Pose Data</title>
     <style>
+        /* Minimalistic Modern CSS */
         body {
-            font-family: Arial, sans-serif;
+            font-family: 'Segoe UI', sans-serif;
+            background-color: #f5f7fa;
+            color: #1f1f1f;
+            margin: 0;
+            padding: 2rem;
             max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
+            margin: auto;
         }
+
+        h1, h2, h3, h4 {
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 1.5rem;
+        }
+
+        button, input[type="checkbox"], input[type="radio"] {
+            cursor: pointer;
+        }
+
+        input[type="number"] {
+            width: 4rem;
+            padding: 0.3rem;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+        }
+
+        button {
+            padding: 0.5rem 1rem;
+            border: none;
+            background-color: #007bff;
+            color: white;
+            font-weight: 500;
+            border-radius: 6px;
+            transition: background-color 0.2s;
+            margin-top: 0.5rem;
+        }
+
+        button:hover {
+            background-color: #0056b3;
+        }
+
         .slider {
-            width: 600px; /* Adjust this value to change the slider width */
-            height: 8px; /* Adjust this for track thickness */
+            width: 100%;
+            height: 6px;
+            appearance: none;
+            background: #ccc;
+            border-radius: 5px;
         }
-            /* Style the thumb (the movable part of the slider) */
+
         .slider::-webkit-slider-thumb {
-            width: 20px; /* Adjust the thumb width */
-            height: 20px; /* Adjust the thumb height */
-            background-color: #4CAF50;
-            border-radius: 50%; /* Makes it circular */
+            width: 18px;
+            height: 18px;
+            background-color: #007bff;
+            border-radius: 50%;
             cursor: pointer;
+            appearance: none;
+            border: none;
         }
+
         .slider::-moz-range-thumb {
-            width: 20px;
-            height: 20px;
-            background-color: #4CAF50;
+            width: 18px;
+            height: 18px;
+            background-color: #007bff;
             border-radius: 50%;
             cursor: pointer;
+            border: none;
         }
 
         .container {
             display: flex;
             flex-wrap: wrap;
-            gap: 20px;
+            gap: 2rem;
+            margin-top: 2rem;
         }
 
-        .image-container {
-            flex: 1;
-            min-width: 300px;
+        .image-container,
+        .controls-container {
+            flex: 1 1 300px;
         }
 
         #apriltag-image {
-            max-width: 100%;
-            height: auto;
+            width: 100%;
             max-height: 400px;
             object-fit: contain;
+            border-radius: 8px;
+            border: 1px solid #ddd;
+            background-color: white;
         }
 
-        .controls-container {
-            flex: 1;
-            min-width: 300px;
+        .control {
+            margin-bottom: 1.2rem;
         }
 
-        .control {
-            margin-bottom: 15px;
+        .control label {
+            font-weight: 500;
+            margin-right: 0.5rem;
+        }
+
+        .controls-container input[type="radio"],
+        .controls-container input[type="checkbox"] {
+            margin-right: 0.25rem;
+        }
+
+        .matrix-container {
+            margin-top: 1.5rem;
+        }
+
+        .matrix {
+            display: grid;
+            grid-template-columns: repeat(3, 60px);
+            gap: 8px;
+        }
+
+        .matrix input {
+            height: 32px;
+            text-align: center;
+            border-radius: 6px;
+            border: 1px solid #ccc;
         }
 
         #pose-data {
-            margin-top: 20px;
+            margin-top: 2rem;
         }
 
         .tag-detection {
-            border: 1px solid #ddd;
-            padding: 10px;
-            margin-bottom: 10px;
-            background-color: #f9f9f9;
+            background-color: white;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
         }
 
         .tag-detection-header {
             display: flex;
-            align-items: flex-start;
-            gap: 20px;
+            flex-wrap: wrap;
+            gap: 1rem;
         }
 
         .tag-info {
-            flex: 0 0 auto;
-            width: 200px;
-            /* Adjust as needed */
-        }
-
-        .tag-info h3 {
-            margin-top: 0;
-            margin-bottom: 5px;
-        }
-
-        .rotation-matrix {
-            flex: 1;
+            flex: 0 0 180px;
         }
 
         .pose-matrix {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
-            gap: 2px;
-            margin-bottom: 10px;
-            font-size: 0.8em;
+            gap: 6px;
+            font-size: 0.9rem;
+            margin-top: 0.5rem;
         }
 
         .pose-matrix div {
-            background-color: #eee;
-            padding: 3px;
+            background-color: #f0f0f0;
+            padding: 6px;
             text-align: center;
+            border-radius: 4px;
         }
 
         .translation-vector {
-            display: inline-flex;
-            gap: 10px;
-            font-size: 0.9em;
-        }
-        .matrix-container {
-            margin-top: 20px;
-        }
-        .matrix {
-            display: grid;
-            grid-template-columns: repeat(3, 50px);
-            gap: 5px;
-        }
-        .matrix input {
-            width: 50px;
-            height: 30px;
-            text-align: center;
+            display: flex;
+            gap: 1rem;
+            margin-top: 0.5rem;
+            font-weight: 500;
         }
     </style>
 </head>
