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