From 6c545bf6fbe05849fe948ffc94e986f052dfcb7e Mon Sep 17 00:00:00 2001
From: Moonlit Productions <moonlit@munebase.dev>
Date: Tue, 21 Oct 2025 11:45:16 -0400
Subject: [PATCH] Grid layout added/set up

---
 index.html | 25 ++++++++++++++++++++++++-
 styles.css | 40 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 51e337c..67e2ae7 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,30 @@
 
         <section class="control-panel">
             <h2>Drive Controls</h2>
-            <!--  Controls here, e.g. robot speed -->
+
+            <fieldset>
+                <legend>Translation &amp; Rotation</legend>
+
+                <div class="control-group">
+                    <label for="vx-slider">Move Forward/Backward (m/s)</label>
+                    <input type="range" id="vx-slider" min="-3" max="3" step="0.1" value="0">
+                    <output id="vx-value">0.0</output>
+                </div>
+
+                <div class="control-group">
+                    <label for="vy-slider">Strafe Left/Right (m/s)</label>
+                    <input type="range" id="vy-slider" min="-3" max="3" step="0.1" value="0">
+                    <output id="vy-value">0.0</output>
+                </div>
+
+                <div class="control-group">
+                    <label for="omega-slider">Rotation (rad/s)</label>
+                    <input type="range" id="omega-slider" min="-3" max="3" step="0.1" value="0">
+                    <output id="omega-value">0.0</output>
+                </div>
+
+                <button id="reset-btn" type="button">Reset Controls</button>
+            </fieldset>
         </section>
         <section class="config-panel">
             <h2>Robot Configuration</h2>
diff --git a/styles.css b/styles.css
index 1423689..398e0f7 100644
--- a/styles.css
+++ b/styles.css
@@ -83,11 +83,11 @@ header {
   padding: var(--spacing-large) var(--spacing-large);
   box-shadow: var(--shadow);
   border-bottom: 3px solid var(--accent-blue);
+  text-align: center;
 }
 
 header h1 {
   margin-bottom: var(--spacing-small);
-  text-align: center;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
@@ -121,8 +121,10 @@ main {
   margin: 0 2rem;
   padding: var(--spacing-large);
   box-sizing: border-box;
+  display: grid;
 }
 
+
 article {
   background-color: var(--background-secondary);
   border-radius: var(--border-radius);
@@ -223,4 +225,40 @@ tr:hover {
   margin-top: var(--spacing-large);
   border-top: 2px solid var(--border-color);
   border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+/* Additions for this page */
+
+.visualization-area {
+  grid-column: 1 / 2;
+  grid-row: 1 / 3;
+}
+
+#swerve-canvas {
+  border: 2px solid var(--accent-blue);
+  border-radius: var(--border-radius);
+  background-color: var(--background-secondary);
+  margin-top: var(--spacing-small);
+  max-width: 100%;
+  height: auto;
+}
+
+.controls-panel {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+.config-panel {
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+
+.module-states {
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+.documentation {
+  grid-column: 1 / 3;
+  grid-row: 4 / 5;
 }
\ No newline at end of file