From ef4adfe003727ff25eb274d47bba52ba41f1b945 Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Tue, 20 Jan 2026 23:16:52 +0000
Subject: [PATCH] Add RTLAMR mode to menu and fix mode card icon visibility

- Add RTLAMR utility meter mode card to the mode selection grid
- Fix icons being nearly invisible by setting color to --text-secondary
- Add explicit 24x24px sizing for mode card SVG icons
- Add cyan highlight on hover for icons

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 static/css/index.css | 10 ++++++++++
 templates/index.html |  5 +++++
 2 files changed, 15 insertions(+)

diff --git a/static/css/index.css b/static/css/index.css
index e390921..164d964 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -331,6 +331,10 @@ body {
     box-shadow: 0 4px 20px rgba(0, 212, 255, 0.15);
 }
 
+.mode-card:hover .mode-icon {
+    color: var(--accent-cyan);
+}
+
 .mode-card:active {
     transform: translateY(0);
 }
@@ -338,6 +342,12 @@ body {
 .mode-card .mode-icon {
     font-size: 1.5rem;
     margin-bottom: 6px;
+    color: var(--text-secondary);
+}
+
+.mode-card .mode-icon svg {
+    width: 24px;
+    height: 24px;
 }
 
 .mode-card .mode-name {
diff --git a/templates/index.html b/templates/index.html
index 7ac1923..744b4f9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -123,6 +123,11 @@
                             <span class="mode-name">APRS</span>
                             <span class="mode-desc">Amateur radio</span>
                         </button>
+                        <button class="mode-card" onclick="selectMode('rtlamr')">
+                            <span class="mode-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/><circle cx="12" cy="12" r="4"/></svg></span>
+                            <span class="mode-name">RTLAMR</span>
+                            <span class="mode-desc">Utility meters</span>
+                        </button>
                     </div>
                 </div>
             </div>