From c44f69d81504994b4c579797a8041eb4a0317e62 Mon Sep 17 00:00:00 2001
From: Moonlit Productions <moonlit@munebase.dev>
Date: Tue, 21 Oct 2025 12:34:48 -0400
Subject: [PATCH] Finalized HTML content, now to work on scripting it

---
 index.html | 46 ++++++++++++++++++++++++++++++++++++++++++++--
 styles.css |  7 +++++++
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 67e2ae7..1f3f5d9 100644
--- a/index.html
+++ b/index.html
@@ -45,14 +45,56 @@
 
                 <button id="reset-btn" type="button">Reset Controls</button>
             </fieldset>
+
+            <fieldset>
+                <legend>Performance Limits</legend>
+
+                <div class="control-group">
+                    <label for="max-speed-slider">Max Module Speed (m/s)</label>
+                    <input type="range" id="max-speed-slider" min="1" max="5" step="0.1" value="4">
+                    <output id="max-speed-value">4.0</output>
+                </div>
+            </fieldset>
         </section>
         <section class="config-panel">
             <h2>Robot Configuration</h2>
-            <!--  Configurations here, e.g. module positions, robot size, presets for all settings -->
+            <fieldset>
+                <legend>Quick Presets</legend>
+                <div class="preset-buttons">
+                    <button id="preset-2wheel" type="button">2-Wheel</button>
+                    <button id="preset-3wheel" type="button">3-Wheel Triangle</button>
+                    <button id="preset-4wheel" type="button">4-Wheel Square</button>
+                    <button id="preset-4rect" type="button">4-Wheel Rectangle</button>
+                    <button id="preset-6wheel" type="button">6-Wheel Hexagon</button>
+                    <button id="preset-8wheel" type="button">8-Wheel Octagon</button>
+                </div>
+            </fieldset>
+            <fieldset>
+                <legend>Custom Configuration</legend>
+
+                <div class="control-group">
+                    <label for="module-count">Number of Modules</label>
+                    <input type="number" id="module-count" min="2" max="12" value="4" step="1">
+                </div>
+
+                <button id="generate-inputs-btn" type="button">Generate Position Inputs</button>
+
+                <div id="module-position-inputs" class="position-inputs">
+                    <!-- Dynamically generated position inputs will appear here -->
+                </div>
+
+                <button id="apply-custom-btn" type="button" style="display: none;">Apply Custom Configuration</button>
+            </fieldset>
         </section>
         <section class="module-states">
             <h2>Module States</h2>
-            <!--  Output display for the swerve modules. This will be dynamically generated by javascript  -->
+            <div id="current-config-info" class="config-info">
+                Current Configuration: <strong id="config-name">4-Wheel Rectangle</strong>
+                (<span id="module-count-display">4</span> modules)
+            </div>
+            <div class="module-grid" id="module-grid">
+                <!-- Dynamically generated module data will appear here -->
+            </div>
         </section>
         <section class="documentation">
             <h2>About This Project</h2>
diff --git a/styles.css b/styles.css
index 1018951..a902b4f 100644
--- a/styles.css
+++ b/styles.css
@@ -282,4 +282,11 @@ button {
   transition: all var(--duration-normal) var(--ease-standard);
   margin: var(--spacing-small);
   font-family: var(--font-family-base);
+}
+
+button:hover {
+  background-color: var(--background-dark);
+  border-color: var(--accent-blue);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
 }
\ No newline at end of file