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
This commit is contained in:
dilgenfritz
parent
30c9f12d71
commit
828e837d83
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue