GTA
/
training-academy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

feat(phase-3): integrate theme system into Quick Play 

- Import color-variables.css and themeManager.js
- Add theme toggle switcher to header navigation
- Replace all hardcoded colors with CSS variables
- Update header, buttons, setup screens, and floating start button
- Replace inline styles and JavaScript color assignments
- Quick Play now fully theme-aware and customizable
This commit is contained in:
dilgenfritz 2025-11-24 12:55:06 -06:00
parent 1ae0a37fbf
commit 30c9f12d71
1 changed files with 61 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
quick-play.html
View File

@ -5,11 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: file: blob: http://localhost:* https:; connect-src 'self' http://localhost:* https: ws://localhost:*; img-src 'self' data: file: blob:; media-src 'self' data: file: blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https:;"> <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: file: blob: http://localhost:* https:; connect-src 'self' http://localhost:* https: ws://localhost:*; img-src 'self' data: file: blob:; media-src 'self' data: file: blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https:;">
<title>Quick Play - Gooner Training Academy</title> <title>Quick Play - Gooner Training Academy</title>
<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/base-video-player.css"> <link rel="stylesheet" href="src/styles/base-video-player.css">
<link rel="stylesheet" href="src/styles/overlay-video-player.css"> <link rel="stylesheet" href="src/styles/overlay-video-player.css">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Michroma&family=Electrolize:wght@400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Michroma&family=Electrolize:wght@400&display=swap" rel="stylesheet">
<script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js" crossorigin="anonymous"></script> <script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js" crossorigin="anonymous"></script>
<script src="src/utils/themeManager.js"></script>
</head> </head>
<body class="quick-play-mode"> <body class="quick-play-mode">
<!-- Video toggle and mute buttons removed for streamlined interface --> <!-- Video toggle and mute buttons removed for streamlined interface -->
@ -54,7 +56,9 @@
</div> </div>
</div> </div>
<div class="nav-right quick-play-controls"> <div class="nav-right quick-play-controls">
<!-- Theme Switcher -->
<div id="theme-switcher-container"></div>
<button id="back-to-home" class="btn btn-secondary" title="Return to main menu and exit Quick Play">🏠 Home</button> <button id="back-to-home" class="btn btn-secondary" title="Return to main menu and exit Quick Play">🏠 Home</button>
<button id="open-hypno-gallery" class="btn btn-gallery" title="Open Hypno Gallery in separate window"> <button id="open-hypno-gallery" class="btn btn-gallery" title="Open Hypno Gallery in separate window">
<span class="btn-icon">🎭</span> <span class="btn-icon">🎭</span>
@ -130,8 +134,8 @@
<div class="setting-group"> <div class="setting-group">
<h3>📝 Task Management</h3> <h3>📝 Task Management</h3>
<div class="task-management-settings"> <div class="task-management-settings">
<div class="setting-description" style="margin-bottom: 15px; padding: 12px; background: rgba(0, 212, 255, 0.08); border-left: 3px solid #00d4ff; border-radius: 5px;"> <div class="setting-description" style="margin-bottom: 15px; padding: 12px; background: var(--bg-primary-overlay-10); border-left: 3px solid var(--color-primary); border-radius: 5px;">
<strong style="color: #00d4ff; font-size: 15px;">Complete challenges that appear during your session. Enable/disable specific tasks to customize your experience. Use the tags below to filter which types of tasks will appear.</strong> <strong style="color: var(--color-primary); font-size: 15px;">Complete challenges that appear during your session. Enable/disable specific tasks to customize your experience. Use the tags below to filter which types of tasks will appear.</strong>
</div> </div>
<div style="display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px;"> <div style="display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px;">
<div class="setting-description" style="flex: 1;"> <div class="setting-description" style="flex: 1;">
@ -343,8 +347,8 @@
<!-- Video Settings --> <!-- Video Settings -->
<div class="setting-group"> <div class="setting-group">
<h3>🎬 Video Experience</h3> <h3>🎬 Video Experience</h3>
<div class="setting-description" style="margin-bottom: 15px; padding: 12px; background: rgba(0, 212, 255, 0.08); border-left: 3px solid #00d4ff; border-radius: 5px;"> <div class="setting-description" style="margin-bottom: 15px; padding: 12px; background: var(--bg-primary-overlay-10); border-left: 3px solid var(--color-primary); border-radius: 5px;">
<strong style="color: #00d4ff; font-size: 15px;">Choose background videos, popup rewards, or focus mode. Videos enhance immersion and provide motivation during your training session.</strong> <strong style="color: var(--color-primary); font-size: 15px;">Choose background videos, popup rewards, or focus mode. Videos enhance immersion and provide motivation during your training session.</strong>
</div> </div>
<div class="video-settings"> <div class="video-settings">
<div class="video-option"> <div class="video-option">
@ -368,8 +372,8 @@
<!-- Webcam Recording Settings --> <!-- Webcam Recording Settings -->
<div class="setting-group"> <div class="setting-group">
<h3>📹 Webcam Recording</h3> <h3>📹 Webcam Recording</h3>
<div class="setting-description" style="margin-bottom: 15px; padding: 12px; background: rgba(0, 212, 255, 0.08); border-left: 3px solid #00d4ff; border-radius: 5px;"> <div class="setting-description" style="margin-bottom: 15px; padding: 12px; background: var(--bg-primary-overlay-10); border-left: 3px solid var(--color-primary); border-radius: 5px;">
<strong style="color: #00d4ff; font-size: 15px;">Enable session recording to save verification photos and earn bonus XP for your dedication. All recordings are stored locally on your device for privacy and security.</strong> <strong style="color: var(--color-primary); font-size: 15px;">Enable session recording to save verification photos and earn bonus XP for your dedication. All recordings are stored locally on your device for privacy and security.</strong>
</div> </div>
<div class="webcam-settings"> <div class="webcam-settings">
<div class="webcam-option"> <div class="webcam-option">
@ -414,8 +418,8 @@
<!-- Flash Messages Settings --> <!-- Flash Messages Settings -->
<div class="setting-group"> <div class="setting-group">
<h3>💬 Flash Messages</h3> <h3>💬 Flash Messages</h3>
<div class="setting-description" style="margin-bottom: 15px; padding: 12px; background: rgba(0, 212, 255, 0.08); border-left: 3px solid #00d4ff; border-radius: 5px;"> <div class="setting-description" style="margin-bottom: 15px; padding: 12px; background: var(--bg-primary-overlay-10); border-left: 3px solid var(--color-primary); border-radius: 5px;">
<strong style="color: #00d4ff; font-size: 15px;">Flash messages appear periodically with encouragement, instructions, and motivation during your session. Customize timing, content, and appearance to match your preferences.</strong> <strong style="color: var(--color-primary); font-size: 15px;">Flash messages appear periodically with encouragement, instructions, and motivation during your session. Customize timing, content, and appearance to match your preferences.</strong>
</div> </div>
<div class="message-settings"> <div class="message-settings">
<div style="display: flex; align-items: center; justify-content: space-between; gap: 15px;"> <div style="display: flex; align-items: center; justify-content: space-between; gap: 15px;">
@ -436,8 +440,8 @@
<!-- Popup Images Settings --> <!-- Popup Images Settings -->
<div class="setting-group"> <div class="setting-group">
<h3>🖼️ Popup Images</h3> <h3>🖼️ Popup Images</h3>
<div class="setting-description" style="margin-bottom: 15px; padding: 12px; background: rgba(0, 212, 255, 0.08); border-left: 3px solid #00d4ff; border-radius: 5px;"> <div class="setting-description" style="margin-bottom: 15px; padding: 12px; background: var(--bg-primary-overlay-10); border-left: 3px solid var(--color-primary); border-radius: 5px;">
<strong style="color: #00d4ff; font-size: 15px;">Images from your library appear as rewards and distractions. Configure timing and positioning for your preference to create the perfect level of visual stimulation.</strong> <strong style="color: var(--color-primary); font-size: 15px;">Images from your library appear as rewards and distractions. Configure timing and positioning for your preference to create the perfect level of visual stimulation.</strong>
</div> </div>
<div class="popup-settings"> <div class="popup-settings">
<div style="display: flex; align-items: center; justify-content: space-between; gap: 15px;"> <div style="display: flex; align-items: center; justify-content: space-between; gap: 15px;">
@ -1328,6 +1332,16 @@
document.addEventListener('DOMContentLoaded', async function() { document.addEventListener('DOMContentLoaded', async function() {
console.log('⚡ Initializing Quick Play...'); console.log('⚡ Initializing Quick Play...');
// 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');
}
}
try { try {
// Check MP4 support first // Check MP4 support first
checkMP4Support(); checkMP4Support();
@ -2319,7 +2333,7 @@
console.log('🎬 Set webcam overlay type to CONSEQUENCE'); console.log('🎬 Set webcam overlay type to CONSEQUENCE');
} else if (taskTitleText.toLowerCase().includes('task')) { } else if (taskTitleText.toLowerCase().includes('task')) {
overlayTaskType.textContent = 'TASK'; overlayTaskType.textContent = 'TASK';
overlayTaskType.style.color = '#00d4ff'; overlayTaskType.style.color = 'var(--color-primary)';
console.log('🎬 Set webcam overlay type to TASK'); console.log('🎬 Set webcam overlay type to TASK');
} else if (taskTitleText) { } else if (taskTitleText) {
overlayTaskType.textContent = 'SESSION'; overlayTaskType.textContent = 'SESSION';
@ -2380,7 +2394,7 @@
webcamTaskType.style.color = '#ff4757'; webcamTaskType.style.color = '#ff4757';
} else if (title.toLowerCase().includes('task')) { } else if (title.toLowerCase().includes('task')) {
webcamTaskType.textContent = 'TASK'; webcamTaskType.textContent = 'TASK';
webcamTaskType.style.color = '#00d4ff'; webcamTaskType.style.color = 'var(--color-primary)';
} else if (title) { } else if (title) {
webcamTaskType.textContent = 'SESSION'; webcamTaskType.textContent = 'SESSION';
webcamTaskType.style.color = '#ffd700'; webcamTaskType.style.color = '#ffd700';
@ -4258,7 +4272,7 @@
} else if (taskTimeRemaining <= 30) { } else if (taskTimeRemaining <= 30) {
timerElement.style.color = '#ffaa00'; // Orange when almost done timerElement.style.color = '#ffaa00'; // Orange when almost done
} else { } else {
timerElement.style.color = '#00d4ff'; // Blue normally timerElement.style.color = 'var(--color-primary)'; // Themed color normally
} }
// Update recording overlay when timer changes // Update recording overlay when timer changes
@ -7845,8 +7859,8 @@
.quick-play-header { .quick-play-header {
background: rgba(0, 0, 0, 0.9); background: var(--header-bg);
border-bottom: 1px solid #00d4ff; border-bottom: 1px solid var(--header-border);
padding: 8px 0; padding: 8px 0;
position: fixed; position: fixed;
top: 0; top: 0;
@ -7882,11 +7896,11 @@
} }
.quick-play-nav h1 { .quick-play-nav h1 {
color: #00d4ff; color: var(--header-title-color);
font-family: 'Audiowide', sans-serif; font-family: 'Audiowide', sans-serif;
font-size: 20px; font-size: 20px;
margin: 0; margin: 0;
text-shadow: 0 0 15px rgba(0, 212, 255, 0.4); text-shadow: var(--shadow-glow-primary);
} }
.quick-play-controls { .quick-play-controls {
@ -7905,21 +7919,25 @@
} }
.btn-secondary { .btn-secondary {
background: rgba(100, 100, 100, 0.8); background: var(--btn-secondary-bg);
color: white; color: var(--btn-secondary-text);
border: 1px solid var(--btn-secondary-border);
} }
.btn-secondary:hover { .btn-secondary:hover {
background: rgba(120, 120, 120, 0.9); background: var(--btn-secondary-hover-bg);
border-color: var(--btn-secondary-hover-border);
} }
.btn-danger { .btn-danger {
background: rgba(220, 53, 69, 0.8); background: var(--btn-danger-bg);
color: white; color: var(--btn-danger-text);
border: 1px solid var(--btn-danger-border);
} }
.btn-danger:hover { .btn-danger:hover {
background: rgba(220, 53, 69, 0.9); background: var(--btn-danger-hover-bg);
border-color: var(--btn-danger-hover-border);
} }
.game-status-bar { .game-status-bar {
@ -7944,7 +7962,7 @@
} }
.status-value { .status-value {
color: #00d4ff; color: var(--color-primary);
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
} }
@ -7959,8 +7977,8 @@
} }
.setup-container { .setup-container {
background: rgba(0, 0, 0, 0.8); background: var(--bg-overlay-medium);
border: 2px solid #00d4ff; border: 2px solid var(--color-primary);
border-radius: 15px; border-radius: 15px;
padding: 30px; padding: 30px;
margin: 20px 0; margin: 20px 0;
@ -7972,11 +7990,11 @@
} }
.setup-header h2 { .setup-header h2 {
color: #00d4ff; color: var(--color-primary);
font-family: 'Audiowide', sans-serif; font-family: 'Audiowide', sans-serif;
font-size: 28px; font-size: 28px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
text-shadow: 0 0 20px rgba(0, 212, 255, 0.5); text-shadow: var(--shadow-glow-primary);
} }
.setup-header p { .setup-header p {
@ -7991,15 +8009,15 @@
} }
.instruction-box { .instruction-box {
background: rgba(0, 212, 255, 0.08); background: var(--bg-primary-overlay-10);
border: 1px solid rgba(0, 212, 255, 0.25); border: 1px solid var(--border-primary);
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
text-align: left; text-align: left;
} }
.instruction-box h4 { .instruction-box h4 {
color: #00d4ff; color: var(--color-primary);
font-family: 'Electrolize', sans-serif; font-family: 'Electrolize', sans-serif;
font-size: 16px; font-size: 16px;
margin: 0 0 15px 0; margin: 0 0 15px 0;
@ -8019,7 +8037,7 @@
padding: 12px; padding: 12px;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
border-radius: 8px; border-radius: 8px;
border: 1px solid rgba(0, 212, 255, 0.15); border: 1px solid var(--border-primary);
} }
.instruction-icon { .instruction-icon {
@ -8035,7 +8053,7 @@
} }
.instruction-text strong { .instruction-text strong {
color: #00d4ff; color: var(--color-primary);
font-weight: bold; font-weight: bold;
} }
@ -8060,7 +8078,7 @@
right: 30px; right: 30px;
z-index: 1000; z-index: 1000;
padding: 18px 35px; padding: 18px 35px;
background: linear-gradient(135deg, #00d4ff 0%, #0088cc 100%); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
border: none; border: none;
border-radius: 50px; border-radius: 50px;
color: #fff; color: #fff;
@ -8068,7 +8086,7 @@
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4); box-shadow: var(--shadow-glow-primary);
transition: all 0.3s ease; transition: all 0.3s ease;
display: flex; display: flex;
align-items: center; align-items: center;
@ -8078,8 +8096,8 @@
.floating-start-button:hover { .floating-start-button:hover {
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 212, 255, 0.6); box-shadow: 0 12px 35px var(--bg-primary-overlay-20);
background: linear-gradient(135deg, #00e5ff 0%, #0099dd 100%); background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
} }
.floating-start-button:active { .floating-start-button:active {
@ -8098,10 +8116,10 @@
@keyframes pulse-glow { @keyframes pulse-glow {
0%, 100% { 0%, 100% {
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4); box-shadow: var(--shadow-glow-primary);
} }
50% { 50% {
box-shadow: 0 8px 35px rgba(0, 212, 255, 0.7); box-shadow: 0 8px 35px var(--bg-primary-overlay-20);
} }
} }
@ -8129,11 +8147,11 @@
.collapsible-header { .collapsible-header {
width: 100%; width: 100%;
background: rgba(0, 212, 255, 0.1); background: var(--bg-primary-overlay-10);
border: 1px solid rgba(0, 212, 255, 0.3); border: 1px solid var(--border-primary);
border-radius: 8px; border-radius: 8px;
padding: 12px 15px; padding: 12px 15px;
color: #00d4ff; color: var(--color-primary);
font-family: 'Electrolize', sans-serif; font-family: 'Electrolize', sans-serif;
font-size: 14px; font-size: 14px;
text-align: left; text-align: left;