From f35b25b9030cf81e26525c18cd2c9851474ee90c Mon Sep 17 00:00:00 2001
From: DeNNiiInc <dennii.inc@gmail.com>
Date: Tue, 23 Dec 2025 19:47:01 +1100
Subject: [PATCH] Feat: Add brightness sliders for grid lines and intersection
 dots

---
 index.html | 45 +++++++++++++++++++++++++++++++++++++++++++++
 styles.css |  6 ++++--
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index fa49567..0f38b7a 100644
--- a/index.html
+++ b/index.html
@@ -155,6 +155,51 @@
           <div class="board" id="gameBoard"></div>
         </div>
 
+        <!-- Grid Brightness Controls -->
+        <div class="grid-controls">
+          <div class="control-group">
+            <label for="gridLineOpacity">Grid Lines</label>
+            <input
+              type="range"
+              id="gridLineOpacity"
+              min="0.1"
+              max="1"
+              step="0.1"
+              value="0.3"
+            />
+          </div>
+          <div class="control-group">
+            <label for="dotOpacity">Intersections</label>
+            <input
+              type="range"
+              id="dotOpacity"
+              min="0.1"
+              max="1"
+              step="0.1"
+              value="0.4"
+            />
+          </div>
+        </div>
+
+        <script>
+          const gridLineSlider = document.getElementById("gridLineOpacity");
+          const dotOpacitySlider = document.getElementById("dotOpacity");
+
+          gridLineSlider.addEventListener("input", (e) => {
+            document.documentElement.style.setProperty(
+              "--grid-line-opacity",
+              e.target.value
+            );
+          });
+
+          dotOpacitySlider.addEventListener("input", (e) => {
+            document.documentElement.style.setProperty(
+              "--grid-dot-opacity",
+              e.target.value
+            );
+          });
+        </script>
+
         <!-- Multiplayer Panel -->
         <div
           id="multiplayerPanel"
diff --git a/styles.css b/styles.css
index beb459b..873e7bc 100644
--- a/styles.css
+++ b/styles.css
@@ -16,7 +16,9 @@
   --border-medium: rgba(255, 255, 255, 0.2);
   --success: #10b981;
   --danger: #ef4444;
-  --grid-line: rgba(147, 51, 234, 0.3);
+  --grid-line-opacity: 0.3;
+  --grid-dot-opacity: 0.4;
+  --grid-line: rgba(147, 51, 234, var(--grid-line-opacity));
   --grid-bg: #0f1420;
   --cell-hover: rgba(147, 51, 234, 0.1);
   --win-highlight: hsl(270, 70%, 60%);
@@ -342,7 +344,7 @@ body {
   height: 4px;
   background: var(--grid-line);
   border-radius: 50%;
-  opacity: 0.4;
+  opacity: var(--grid-dot-opacity);
 }
 
 .cell:hover:not(.occupied) {