From 828e837d839ac37d81f95cda9714bd3e9bd5ed95 Mon Sep 17 00:00:00 2001
From: dilgenfritz <drewilgenfritz@gmail.com>
Date: Mon, 24 Nov 2025 13:00:00 -0600
Subject: [PATCH] feat(phase-4): integrate theme system into Training Academy

- Import color-variables.css and themeManager.js
- Add theme toggle switcher to academy header
- Replace header gradient, borders, and title colors with CSS variables
- Update all button styles (btn, btn-secondary, btn-warning)
- Replace training mode cards, status bars, and controls with theme variables
- Update training task styling, complete buttons, and start button
- Replace library status and blue accent colors
- Training Academy now fully theme-aware across all UI elements
---
 training-academy.html | 115 ++++++++++++++++++++++++------------------
 1 file changed, 65 insertions(+), 50 deletions(-)

diff --git a/training-academy.html b/training-academy.html
index d68c0bf..de9c4e7 100644
--- a/training-academy.html
+++ b/training-academy.html
@@ -6,17 +6,19 @@
     <title>Gooner Training Academy</title>
     
     <!-- Core Styles -->
+    <link rel="stylesheet" href="src/styles/color-variables.css">
     <link rel="stylesheet" href="src/styles/styles.css">
     <link rel="stylesheet" href="src/styles/styles-dark-edgy.css">
     <link rel="stylesheet" href="src/styles/base-video-player.css">
+    <script src="src/utils/themeManager.js"></script>
     
     <style>
         /* Training Academy Specific Styles */
         /* Academy Header - Matching Quick Play/Cinema Style */
         .academy-header {
-            background: linear-gradient(135deg, #1a1a1a, #2d1b3d);
-            border-bottom: 2px solid #9b59b6;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+            background: var(--gradient-primary);
+            border-bottom: 2px solid var(--header-border);
+            box-shadow: var(--shadow-md);
             position: fixed;
             top: 0;
             left: 0;
@@ -37,10 +39,10 @@
         }
 
         .academy-nav .nav-left h1 {
-            color: #9b59b6;
+            color: var(--header-title-color);
             font-size: 1.8rem;
             margin: 0;
-            text-shadow: 0 0 20px rgba(155, 89, 182, 0.5);
+            text-shadow: var(--shadow-glow-primary);
             white-space: nowrap;
         }
 
@@ -50,7 +52,7 @@
         }
 
         .academy-subtitle {
-            color: #e8e8e8;
+            color: var(--header-subtitle-color);
             font-size: 1rem;
             font-style: italic;
             opacity: 0.9;
@@ -64,9 +66,9 @@
 
         /* Button Styles */
         .btn {
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            color: #fff;
+            background: var(--btn-secondary-bg);
+            border: 1px solid var(--btn-secondary-border);
+            color: var(--btn-secondary-text);
             border-radius: 8px;
             cursor: pointer;
             font-size: 0.9rem;
@@ -75,29 +77,29 @@
         }
 
         .btn:hover {
-            background: rgba(255, 255, 255, 0.15);
-            border-color: rgba(255, 255, 255, 0.3);
+            background: var(--btn-secondary-hover-bg);
+            border-color: var(--btn-secondary-hover-border);
             transform: translateY(-1px);
         }
 
         .btn-secondary {
-            background: rgba(155, 89, 182, 0.2);
-            border-color: #9b59b6;
+            background: var(--bg-secondary-overlay-20);
+            border-color: var(--color-primary);
         }
 
         .btn-secondary:hover {
-            background: rgba(155, 89, 182, 0.3);
-            border-color: #c29bd6;
+            background: var(--bg-secondary-overlay-30);
+            border-color: var(--color-primary-light);
         }
 
         .btn-warning {
-            background: rgba(231, 76, 60, 0.3);
-            border-color: #e74c3c;
+            background: var(--btn-danger-bg);
+            border-color: var(--btn-danger-border);
         }
 
         .btn-warning:hover {
-            background: rgba(231, 76, 60, 0.4);
-            border-color: #ec7063;
+            background: var(--btn-danger-hover-bg);
+            border-color: var(--btn-danger-hover-border);
         }
 
         .academy-controls .btn {
@@ -143,8 +145,8 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            background: rgba(155, 89, 182, 0.1);
-            border: 1px solid #9b59b6;
+            background: var(--bg-secondary-overlay-10);
+            border: 1px solid var(--border-secondary);
             border-radius: 10px;
             margin: 1rem;
             padding: 0.8rem;
@@ -160,7 +162,7 @@
         }
 
         .scenario-status-bar .status-label {
-            color: #9b59b6;
+            color: var(--color-secondary);
             font-size: 0.85rem;
             font-weight: bold;
             margin-bottom: 0.2rem;
@@ -177,21 +179,21 @@
 
         .scenario-status-bar .timer-display {
             font-family: 'Courier New', monospace;
-            color: #00ff88;
-            text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
+            color: var(--color-accent-green);
+            text-shadow: 0 0 10px var(--bg-primary-overlay-20);
         }
 
         .training-controls {
-            background: rgba(155, 89, 182, 0.1);
-            border: 1px solid #9b59b6;
+            background: var(--bg-secondary-overlay-10);
+            border: 1px solid var(--border-secondary);
             border-radius: 10px;
             padding: 1.5rem;
             margin: 1rem;
         }
 
         .library-status {
-            background: rgba(52, 152, 219, 0.1);
-            border: 1px solid #3498db;
+            background: var(--bg-primary-overlay-10);
+            border: 1px solid var(--color-accent-blue);
             border-radius: 8px;
             padding: 1rem;
             margin: 1rem 0;
@@ -199,7 +201,7 @@
         }
 
         .library-status h3 {
-            color: #3498db;
+            color: var(--color-accent-blue);
             margin: 0 0 0.5rem 0;
         }
 
@@ -214,8 +216,8 @@
         }
 
         .training-mode-card {
-            background: linear-gradient(135deg, #2c3e50, #34495e);
-            border: 2px solid #3498db;
+            background: var(--gradient-dark);
+            border: 2px solid var(--color-primary);
             border-radius: 8px;
             padding: 0.8rem;
             cursor: pointer;
@@ -227,15 +229,15 @@
         }
 
         .training-mode-card:hover {
-            border-color: #e74c3c;
-            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
+            border-color: var(--card-hover-border);
+            box-shadow: var(--shadow-glow-primary);
             transform: translateY(-1px);
         }
 
         .training-mode-card.selected {
-            border-color: #e74c3c;
-            background: linear-gradient(135deg, #c0392b, #e74c3c);
-            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
+            border-color: var(--card-hover-border);
+            background: var(--gradient-accent);
+            box-shadow: var(--shadow-glow-primary);
         }
 
         .mode-icon {
@@ -246,12 +248,12 @@
         .mode-name {
             font-size: 1rem;
             font-weight: bold;
-            color: #ecf0f1;
+            color: var(--text-primary);
             margin-bottom: 0.2rem;
         }
 
         .mode-description {
-            color: #bdc3c7;
+            color: var(--text-muted);
             font-size: 0.75rem;
             line-height: 1.2;
         }
@@ -262,7 +264,7 @@
         }
 
         .start-training-btn {
-            background: linear-gradient(135deg, #e74c3c, #c0392b);
+            background: var(--gradient-accent);
             color: white;
             border: none;
             border-radius: 25px;
@@ -271,17 +273,17 @@
             font-weight: bold;
             cursor: pointer;
             transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
+            box-shadow: var(--shadow-glow-primary);
         }
 
         .start-training-btn:hover:not(:disabled) {
-            background: linear-gradient(135deg, #c0392b, #a93226);
-            box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
+            background: linear-gradient(135deg, var(--color-primary-dark), var(--color-secondary-dark));
+            box-shadow: 0 6px 20px var(--bg-primary-overlay-20);
             transform: translateY(-2px);
         }
 
         .start-training-btn:disabled {
-            background: #7f8c8d;
+            background: var(--text-dim);
             cursor: not-allowed;
             box-shadow: none;
         }
@@ -427,8 +429,8 @@
 
         /* Training Academy Specific Styles */
         .training-status, .training-task {
-            background: rgba(20, 20, 20, 0.95);
-            border: 2px solid #ff006e;
+            background: var(--card-bg);
+            border: 2px solid var(--card-border);
             border-radius: 15px;
             padding: 25px;
             margin: 20px;
@@ -443,17 +445,17 @@
         }
 
         .training-task h3 {
-            color: #ff006e;
+            color: var(--color-primary);
             margin-bottom: 15px;
             text-align: center;
         }
 
         .task-content {
-            background: rgba(0, 0, 0, 0.7);
+            background: var(--bg-overlay-light);
             padding: 20px;
             border-radius: 10px;
             margin: 20px 0;
-            border-left: 4px solid #8338ec;
+            border-left: 4px solid var(--color-secondary);
             font-size: 1.1em;
             line-height: 1.5;
         }
@@ -481,7 +483,7 @@
         }
 
         .complete-btn, .next-btn {
-            background: linear-gradient(45deg, #ff006e, #8338ec);
+            background: var(--gradient-accent);
             color: white;
             border: none;
             padding: 12px 25px;
@@ -496,7 +498,7 @@
 
         .complete-btn:hover, .next-btn:hover {
             transform: translateY(-2px);
-            box-shadow: 0 8px 20px rgba(255, 0, 110, 0.4);
+            box-shadow: var(--shadow-glow-primary);
         }
 
         .next-btn {
@@ -971,6 +973,9 @@
                 Master the Art of Dedicated Gooning
             </div>
             <div class="nav-right academy-controls">
+                <!-- Theme Switcher -->
+                <div id="theme-switcher-container"></div>
+                
                 <button id="tts-toggle" onclick="toggleTTS()" class="btn btn-secondary" title="Toggle voice narration on/off">
                     <span class="btn-icon">🔊</span>
                     <span class="btn-text">Voice: ON</span>
@@ -4193,6 +4198,16 @@
         document.addEventListener('DOMContentLoaded', () => {
             console.log('🎓 Training Academy DOM loaded');
             
+            // Initialize theme switcher UI
+            if (window.themeManager) {
+                const themeSwitcher = window.themeManager.createThemeToggle();
+                const container = document.getElementById('theme-switcher-container');
+                if (container) {
+                    container.appendChild(themeSwitcher);
+                    console.log('✅ Theme switcher initialized');
+                }
+            }
+            
             // Wait a moment for all scripts to load
             setTimeout(initializeTrainingAcademy, 1000);
         });