Files
game_development_workshop/index.html
T

639 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PPE Safety Challenge - Choose Right. Work Safe.</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="preload" as="image" href="images/home_page_bg.png">
<link rel="preload" as="image" href="images/background_grinding.jpg">
<link rel="preload" as="image" href="images/background_chemical.jpg">
<link rel="preload" as="image" href="images/worker_base.png">
</head>
<body>
<!-- App Container -->
<div id="app-root" class="app-container">
<!-- Top Navigation / Header Bar -->
<header class="top-bar">
<div class="brand-badge">
<div class="safety-shield-logo-box">
<img src="images/safety_shield_logo.png" alt="Safety Shield Logo" class="brand-shield-img" />
</div>
<div class="brand-text">
<span class="game-title">PPE SAFETY CHALLENGE</span>
<span class="game-tagline">CHOOSE RIGHT. WORK SAFE.</span>
</div>
</div>
<div class="hud-center">
<div class="scenario-stepper" id="scenario-stepper">
<div class="step-pill active" id="step-pill-1">
<span class="step-num">1</span>
<span class="step-label">Grinding Ops</span>
</div>
<div class="step-dots">·······</div>
<div class="step-pill" id="step-pill-2">
<span class="step-num">2</span>
<span class="step-label">Chemical Handling</span>
</div>
</div>
</div>
<div class="hud-right">
<!-- 30-Second Countdown Timer -->
<div class="timer-display" id="hud-timer-box">
<span class="timer-icon">⏱️</span>
<span class="timer-label">TIME</span>
<span class="timer-val" id="hud-timer-val">00:30</span>
</div>
<div class="score-display">
<span class="score-label">SAFETY SCORE</span>
<span class="score-val" id="hud-score">0</span>
<span class="score-star-icon">★</span>
<span class="score-stars-sub" id="hud-stars">☆</span>
</div>
<!-- Audio, Fullscreen & Settings Controls -->
<button id="btn-sound-toggle" class="btn-icon-hud" title="Sound Effects (S)" aria-label="Sound Toggle">
<span>🔊</span>
</button>
<button id="btn-music-toggle" class="btn-icon-hud" title="Music Toggle (M)" aria-label="Music Toggle">
<span>🎵</span>
</button>
<button id="btn-fullscreen-toggle" class="btn-icon-hud" title="Toggle Fullscreen (F)" aria-label="Toggle Fullscreen">
<span id="fullscreen-icon">⛶</span>
</button>
<button id="btn-audio-settings" class="btn-icon-hud" title="Audio Settings (O)" aria-label="Audio Settings">
<span>⚙️</span>
</button>
</div>
</header>
<!-- Main Dynamic Screen Container -->
<main id="main-viewport" class="main-viewport">
<!-- SCREEN 1: START / INTRO SCREEN -->
<section id="screen-start" class="screen-view active">
<div class="home-screen-backdrop">
<img src="images/home_page_bg.png" alt="PPE Safety Challenge" class="home-bg-image" />
<!-- High-fidelity Golden Ambient Particle Canvas -->
<canvas id="home-golden-particles" class="home-particles-canvas"></canvas>
<button id="btn-start-game" class="btn-start-hero-overlay" aria-label="Start Challenge" title="Click or Press Space to Start Challenge">
<span class="btn-hero-hover-text">▶ START CHALLENGE</span>
</button>
</div>
</section>
<!-- SCREEN 2: ACTIVE GAMEPLAY VIEW -->
<section id="screen-game" class="screen-view">
<div class="gameplay-grid">
<!-- Left Column: Hazard Assessment & Worker Protection Status -->
<aside class="sidebar-hazard-panel card-panel">
<div class="panel-header">
<div class="scenario-badge" id="scene-badge">SCENARIO 1 OF 2</div>
<h2 class="scenario-title" id="scene-title">Chemical Handling & Dispensing</h2>
<p class="situation-desc" id="scene-desc">
An employee is transferring an industrial corrosive solvent between approved containers at a ventilated dispensing station.
</p>
</div>
<!-- Identify Hazards Box -->
<div class="hazard-identification-card">
<div class="card-subtitle-small">IDENTIFY THE HAZARDS</div>
<ul class="hazard-list" id="hazard-list">
<!-- Dynamically populated -->
</ul>
</div>
<!-- Worker Protection Status with Wireframe Silhouette -->
<div class="worker-protection-card">
<div class="card-subtitle-small">WORKER PROTECTION STATUS</div>
<div class="protection-status-content">
<!-- Blue 3D Hologram Silhouette (Exact Match to 2nd Ref) -->
<div class="body-silhouette-box">
<img src="images/worker_hologram_silhouette.png" alt="Worker Hologram Silhouette" class="hologram-silhouette-img" />
</div>
<!-- Status Rows -->
<div class="protection-rows" id="coverage-grid">
<div class="status-row-item" data-slot="head">
<span class="row-icon">🧢</span>
<span class="row-label">Head</span>
<span class="row-badge status-q">?</span>
</div>
<div class="status-row-item" data-slot="eyes">
<span class="row-icon">👓</span>
<span class="row-label">Eyes / Face</span>
<span class="row-badge status-q">?</span>
</div>
<div class="status-row-item" data-slot="ears">
<span class="row-icon">🎧</span>
<span class="row-label">Hearing</span>
<span class="row-badge status-q">?</span>
</div>
<div class="status-row-item" data-slot="hands">
<span class="row-icon">🧤</span>
<span class="row-label">Hands</span>
<span class="row-badge status-q">?</span>
</div>
<div class="status-row-item" data-slot="body">
<span class="row-icon">🦺</span>
<span class="row-label">Body</span>
<span class="row-badge status-q">?</span>
</div>
<div class="status-row-item" data-slot="feet">
<span class="row-icon">🥾</span>
<span class="row-label">Feet</span>
<span class="row-badge status-q">?</span>
</div>
</div>
</div>
</div>
<!-- Tip Box -->
<div class="tip-card">
<div class="tip-title">💡 TIP</div>
<p class="tip-text" id="locker-guide-text">
Observe the scene, identify the hazards and select the correct PPE before starting the task.
</p>
</div>
</aside>
<!-- Middle Column: Interactive Scene & Worker Avatar -->
<div class="center-stage-panel card-panel">
<div class="scene-environment-container" id="scene-stage">
<!-- Scene canvas for particles/sparks/chemicals -->
<canvas id="stage-fx-canvas" class="stage-fx-canvas"></canvas>
<!-- Pre-rendered Dynamic Background Scenery Layer -->
<div class="scene-backdrop" id="scene-backdrop">
<div class="scene-img-backdrop backdrop-grinding" id="backdrop-grinding">
<img src="images/background_grinding.jpg" alt="Angle Grinding Workshop" class="env-stage-photo" fetchpriority="high" />
<div class="env-stage-overlay"></div>
</div>
<div class="scene-img-backdrop backdrop-chemical" id="backdrop-chemical" style="display: none;">
<img src="images/background_chemical.jpg" alt="Chemical Dispensing Station" class="env-stage-photo" />
<div class="env-stage-overlay"></div>
</div>
</div>
<!-- Worker Avatar Interactive SVG Layer -->
<div class="avatar-wrapper" id="avatar-container">
<!-- Injected by avatar.js -->
</div>
<!-- Freeze Frame / Critical Warning Alert Cyber HUD Modal (Exact Match to Reference UI) -->
<div class="consequence-freeze-overlay" id="consequence-overlay">
<div class="cyber-consequence-modal">
<!-- Decorative Hazard Side Vents -->
<div class="cyber-flange flange-left hazard-flange">
<span class="hazard-vent-bar"></span>
<span class="hazard-vent-bar"></span>
<span class="hazard-vent-bar"></span>
<span class="hazard-vent-bar"></span>
</div>
<div class="cyber-flange flange-right hazard-flange">
<span class="hazard-vent-bar"></span>
<span class="hazard-vent-bar"></span>
<span class="hazard-vent-bar"></span>
<span class="hazard-vent-bar"></span>
</div>
<!-- Red Corner Accent Notches -->
<div class="cyber-corner-notch red-notch-tl"></div>
<div class="cyber-corner-notch red-notch-tr"></div>
<div class="cyber-corner-notch red-notch-bl"></div>
<div class="cyber-corner-notch red-notch-br"></div>
<!-- Top Triangle Hazard Badge -->
<div class="hud-hazard-badge-wrapper">
<div class="hud-hazard-triangle">
<svg viewBox="0 0 60 52" class="hazard-triangle-svg">
<path d="M 30 4 L 56 48 L 4 48 Z" fill="#180404" stroke="#ff2244" stroke-width="3.5" stroke-linejoin="round" />
<path d="M 30 10 L 51 45 L 9 45 Z" fill="#ff2244" opacity="0.18" />
<path d="M 30 18 L 30 32" stroke="#ffffff" stroke-width="4.2" stroke-linecap="round" />
<circle cx="30" cy="39" r="2.4" fill="#ffffff" />
</svg>
</div>
</div>
<!-- Modal Inner Content -->
<div class="cyber-consequence-body">
<!-- Stop Flasher Pill -->
<div class="cyber-hazard-flasher" id="hazard-flasher-badge">
<span class="flasher-icon">⚠️</span>
<span class="flasher-text" id="hazard-flasher-text">STOP! 5 SAFETY HAZARDS DETECTED</span>
</div>
<h2 class="cyber-consequence-title" id="consequence-title">
<span class="title-red">CRITICAL</span> <span class="title-white">PROTECTION GAPS DETECTED</span>
</h2>
<p class="cyber-consequence-desc" id="consequence-desc">
Operating without complete PPE exposes multiple body zones to direct, severe workplace injuries. All required safety equipment must be equipped before starting.
</p>
<div class="cyber-missing-box">
<div class="cyber-missing-header">
<span class="missing-label-icon">⚠️</span>
<span class="missing-label-text">ALL REQUIRED CORRECTIONS (<span id="missing-count-num">0</span> ISSUES):</span>
</div>
<div class="cyber-hazard-list" id="consequence-hazard-list">
<!-- Dynamically populated hazard items -->
</div>
</div>
<button id="btn-fix-ppe" class="btn-cyber-fix">
<span class="btn-fix-icon">🔧</span>
<span>FIX ALL WORKER PPE & RETRY ➔</span>
</button>
</div>
</div>
</div>
<!-- Success Overlay Cyber HUD Modal (Exact Match to Reference UI) -->
<div class="success-overlay" id="success-overlay">
<div class="cyber-success-modal">
<!-- Decorative Side Vents -->
<div class="cyber-flange flange-left">
<span class="vent-bar"></span>
<span class="vent-bar"></span>
<span class="vent-bar"></span>
<span class="vent-bar"></span>
</div>
<div class="cyber-flange flange-right">
<span class="vent-bar"></span>
<span class="vent-bar"></span>
<span class="vent-bar"></span>
<span class="vent-bar"></span>
</div>
<!-- Corner Accent Notches -->
<div class="cyber-corner-notch notch-tl"></div>
<div class="cyber-corner-notch notch-tr"></div>
<div class="cyber-corner-notch notch-bl"></div>
<div class="cyber-corner-notch notch-br"></div>
<!-- Top Checkmark HUD Badge with Segmented Radar Rings -->
<div class="hud-check-badge-wrapper">
<div class="hud-radar-ring">
<svg viewBox="0 0 100 100" class="radar-svg">
<circle cx="50" cy="50" r="46" fill="none" stroke="rgba(0, 255, 136, 0.4)" stroke-width="1.5" stroke-dasharray="4, 4" />
<circle cx="50" cy="50" r="41" fill="none" stroke="rgba(0, 255, 136, 0.65)" stroke-width="1.5" stroke-dasharray="14, 7, 7, 7" />
<circle cx="50" cy="50" r="36" fill="none" stroke="rgba(0, 255, 136, 0.35)" stroke-width="1" />
</svg>
</div>
<div class="hud-check-circle">
<svg viewBox="0 0 32 32" class="hud-check-svg">
<path d="M 8 16 L 14 22 L 24 10" fill="none" stroke="#ffffff" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<!-- Modal Inner Content -->
<div class="cyber-success-body">
<h2 class="cyber-success-title" id="success-title">
<span class="title-green">SAFE</span> <span class="title-white">TO START</span>
</h2>
<div class="cyber-title-dash"></div>
<p class="cyber-success-desc" id="success-desc">
Your eyes, face, hands, hearing and feet are fully protected from all hazards of this grinding task.
</p>
<div class="cyber-points-pill">
<span class="points-star">★</span>
<span class="points-value" id="awarded-points-text">+100 Safety Points</span>
<span class="points-star">★</span>
</div>
<button id="btn-next-scenario" class="btn-cyber-next">
<span id="btn-next-scenario-text">NEXT SCENARIO ➔</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: PPE Selection Locker (3x3 Grid) & Action Buttons -->
<aside class="sidebar-locker-panel card-panel">
<div class="panel-header-locker">
<div class="locker-title-row">
<span class="locker-icon">🦺</span>
<h3 class="locker-title">PPE SAFETY LOCKER</h3>
</div>
<p class="locker-subtitle">Select and equip the correct PPE for this task.</p>
<p class="locker-instruction">Click an item to equip on the worker.</p>
</div>
<!-- 3x3 Equipment Grid -->
<div class="ppe-locker-grid" id="ppe-locker-grid">
<!-- Dynamically populated based on scenario (9 items in 3 columns) -->
</div>
<!-- Locker Action Buttons -->
<div class="locker-actions-dock">
<button id="btn-check-ppe" class="btn btn-check-ppe">
<span class="btn-check-icon">✓</span>
<span>CHECK MY PPE</span>
</button>
<button id="btn-test-safety" class="btn btn-start-task glow-ready">
<span class="btn-play-icon">▶</span>
<span id="btn-test-safety-text">START TASK</span>
</button>
</div>
</aside>
</div>
</section>
<!-- SCREEN 3: COMPLETION / FINAL SCORE SCREEN (EXACT MATCH TO REFERENCE UI) -->
<section id="screen-summary" class="screen-view">
<div class="cyber-summary-container">
<!-- Decorative Hazard Caution Vents on Left and Right -->
<div class="cyber-flange flange-left summary-flange">
<span class="gold-vent-bar"></span>
<span class="gold-vent-bar"></span>
<span class="gold-vent-bar"></span>
<span class="gold-vent-bar"></span>
</div>
<div class="cyber-flange flange-right summary-flange">
<span class="gold-vent-bar"></span>
<span class="gold-vent-bar"></span>
<span class="gold-vent-bar"></span>
<span class="gold-vent-bar"></span>
</div>
<!-- Gold Cyber Corner Accents -->
<div class="cyber-corner-notch gold-notch-tl"></div>
<div class="cyber-corner-notch gold-notch-tr"></div>
<div class="cyber-corner-notch gold-notch-bl"></div>
<div class="cyber-corner-notch gold-notch-br"></div>
<!-- Trophy Header Section -->
<div class="summary-trophy-header">
<div class="trophy-artwork-box">
<svg viewBox="0 0 120 80" class="trophy-laurel-svg">
<!-- Golden Laurels Left -->
<path d="M 38 52 C 28 42, 28 26, 38 16 C 36 28, 38 40, 48 48 Z" fill="#f59e0b" opacity="0.85"/>
<path d="M 28 42 C 20 34, 20 22, 28 14 C 27 24, 29 32, 36 38 Z" fill="#fbbf24" opacity="0.75"/>
<!-- Golden Laurels Right -->
<path d="M 82 52 C 92 42, 92 26, 82 16 C 84 28, 82 40, 72 48 Z" fill="#f59e0b" opacity="0.85"/>
<path d="M 92 42 C 100 34, 100 22, 92 14 C 93 24, 91 32, 84 38 Z" fill="#fbbf24" opacity="0.75"/>
<!-- Confetti Flakes -->
<polygon points="20,12 24,8 26,14 22,16" fill="#facc15" opacity="0.8"/>
<polygon points="98,10 102,6 104,12 100,14" fill="#facc15" opacity="0.8"/>
<polygon points="14,30 18,28 17,34 13,33" fill="#fbbf24" opacity="0.7"/>
<polygon points="106,28 110,26 109,32 105,31" fill="#fbbf24" opacity="0.7"/>
<!-- Golden Trophy Center -->
<path d="M 44 20 L 76 20 L 72 42 C 70 48, 50 48, 48 42 Z" fill="url(#trophyGoldGrad)"/>
<path d="M 44 24 C 36 24, 34 34, 46 36 L 46 32 C 38 32, 38 26, 44 26 Z" fill="#f59e0b"/>
<path d="M 76 24 C 84 24, 86 34, 74 36 L 74 32 C 82 32, 82 26, 76 26 Z" fill="#f59e0b"/>
<rect x="56" y="44" width="8" height="12" fill="#d97706"/>
<path d="M 48 56 L 72 56 L 76 64 L 44 64 Z" fill="url(#trophyGoldGrad)"/>
<polygon points="60,25 62,31 68,31 63,35 65,41 60,37 55,41 57,35 52,31 58,31" fill="#ffffff" opacity="0.9"/>
<defs>
<linearGradient id="trophyGoldGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fde047"/>
<stop offset="50%" stop-color="#f59e0b"/>
<stop offset="100%" stop-color="#b45309"/>
</linearGradient>
</defs>
</svg>
</div>
<h1 class="summary-champion-title">
<span class="title-white">PPE SAFETY CHALLENGE</span> <span class="title-gold">COMPLETE</span>
</h1>
<p class="summary-champion-subtitle">“Choose Right. Work Safe.”</p>
</div>
<!-- 3 Highlight Metric Cards -->
<div class="summary-metrics-grid">
<!-- Score Card (Green Accent) -->
<div class="summary-stat-card stat-green">
<div class="stat-icon-badge icon-shield-green">
<svg viewBox="0 0 24 24" class="stat-svg">
<path d="M 12 2 L 20 5 L 20 11 C 20 16.5 16.5 21 12 22 C 7.5 21 4 16.5 4 11 L 4 5 Z" fill="rgba(16, 185, 129, 0.2)" stroke="#10b981" stroke-width="2"/>
<path d="M 8 11.5 L 11 14.5 L 16 9.5" fill="none" stroke="#10b981" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="stat-text-group">
<span class="stat-label">FINAL SAFETY SCORE</span>
<span class="stat-val" id="summary-score">200 / 200</span>
<span class="stat-sub" id="summary-percentage">100% Safety Compliance Rating</span>
</div>
</div>
<!-- Scenarios Completed Card (Cyan Accent) -->
<div class="summary-stat-card stat-cyan">
<div class="stat-icon-badge icon-clipboard-cyan">
<svg viewBox="0 0 24 24" class="stat-svg">
<path d="M 9 2 L 15 2 L 15 5 L 9 5 Z" fill="#0ea5e9"/>
<rect x="5" y="4" width="14" height="18" rx="2" fill="none" stroke="#0ea5e9" stroke-width="2"/>
<line x1="9" y1="9" x2="15" y2="9" stroke="#38bdf8" stroke-width="1.8" stroke-linecap="round"/>
<line x1="9" y1="13" x2="15" y2="13" stroke="#38bdf8" stroke-width="1.8" stroke-linecap="round"/>
<line x1="9" y1="17" x2="13" y2="17" stroke="#38bdf8" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</div>
<div class="stat-text-group">
<span class="stat-label">SCENARIOS COMPLETED</span>
<span class="stat-val">2 / 2</span>
<span class="stat-sub">Zero Workplace Accidents</span>
</div>
</div>
<!-- Stars Card (Gold Accent) -->
<div class="summary-stat-card stat-gold">
<div class="stat-icon-badge icon-star-gold">
<svg viewBox="0 0 24 24" class="stat-svg">
<circle cx="12" cy="12" r="10" fill="none" stroke="#f59e0b" stroke-width="2"/>
<polygon points="12,6 14,10 18.5,10.5 15,14 16,18.5 12,16 8,18.5 9,14 5.5,10.5 10,10" fill="#fbbf24"/>
</svg>
</div>
<div class="stat-text-group">
<span class="stat-label">SAFETY STARS</span>
<span class="stat-val stat-stars-text" id="summary-stars">★★</span>
<span class="stat-sub" id="summary-rank">Master Safety Practitioner (Zero Accidents)</span>
</div>
</div>
</div>
<!-- Core Safety Workflow Banner -->
<div class="summary-workflow-dock">
<div class="workflow-dock-title">
<span class="dock-title-line"></span>
<span class="dock-title-text">CORE SAFETY WORKFLOW</span>
<span class="dock-title-line"></span>
</div>
<div class="workflow-steps-chain">
<div class="workflow-step-pill"><span class="step-dot red-dot">🔴</span> <strong>STOP</strong></div>
<span class="workflow-step-arrow">➔</span>
<div class="workflow-step-pill"><span class="step-dot">👁️</span> <strong>LOOK</strong></div>
<span class="workflow-step-arrow">➔</span>
<div class="workflow-step-pill"><span class="step-dot">⚠️</span> <strong>IDENTIFY HAZARDS</strong></div>
<span class="workflow-step-arrow">➔</span>
<div class="workflow-step-pill"><span class="step-dot">🦺</span> <strong>SELECT PPE</strong></div>
<span class="workflow-step-arrow">➔</span>
<div class="workflow-step-pill"><span class="step-dot">🛡️</span> <strong>WORK SAFELY</strong></div>
</div>
</div>
<!-- Scenarios Review Summary Box -->
<div class="summary-scenarios-review">
<h4 class="scenarios-review-heading">Safety Assessment Summary</h4>
<div class="summary-review-list">
<!-- Scenario 1 Review Item -->
<div class="summary-review-row">
<div class="review-icon-box">
<span class="review-scenario-icon">⚙️</span>
</div>
<div class="review-text-content">
<strong class="review-scenario-name">Scenario 1: Angle Grinding Operation</strong>
<p class="review-scenario-desc">
Protected against flying hot sparks, high decibel noise (95+ dB), and sharp metal burrs using Full Face Shield + Glasses, Leather Grinding Gloves, Hearing Protection & Safety Boots.
</p>
</div>
<div class="review-passed-badge">
<span class="passed-check">✔</span> PASSED
</div>
</div>
<!-- Scenario 2 Review Item -->
<div class="summary-review-row">
<div class="review-icon-box">
<span class="review-scenario-icon">🧪</span>
</div>
<div class="review-text-content">
<strong class="review-scenario-name">Scenario 2: Industrial Chemical Transfer</strong>
<p class="review-scenario-desc">
Prevented chemical burn & splash injury using Chemical Splash Goggles, Heavy Nitrile Gauntlet Gloves, Chemical Resistant Apron & Rubber Safety Boots.
</p>
</div>
<div class="review-passed-badge">
<span class="passed-check">✔</span> PASSED
</div>
</div>
</div>
</div>
<!-- Bottom Action Buttons -->
<div class="summary-action-buttons">
<button id="btn-replay" class="btn-summary-replay">
<span class="summary-btn-icon">🔄</span>
<span>REPLAY SAFETY CHALLENGE</span>
</button>
<button id="btn-print-certificate" class="btn-summary-cert">
<span class="summary-btn-icon">📜</span>
<span>PRINT SAFETY CERTIFICATE</span>
</button>
</div>
</div>
</section>
</main>
<!-- Central Screen Start Countdown Overlay (3, 2, 1, START!) -->
<div class="countdown-overlay" id="countdown-overlay">
<div class="countdown-hud-card">
<div class="countdown-radar-ring"></div>
<div class="countdown-corner c-tl"></div>
<div class="countdown-corner c-tr"></div>
<div class="countdown-corner c-bl"></div>
<div class="countdown-corner c-br"></div>
<div class="countdown-sub-header">SCENARIO INITIALIZING</div>
<div class="countdown-number-box">
<span class="countdown-digit" id="countdown-digit">3</span>
</div>
<div class="countdown-sub-tip" id="countdown-sub-tip">PREPARE YOUR PPE</div>
</div>
</div>
<!-- Audio Settings Modal Dialog -->
<div class="modal-backdrop" id="modal-audio">
<div class="modal-card">
<div class="modal-header">
<h3>🔊 Audio & Sound Control</h3>
<button id="btn-close-audio-modal" class="btn-close" aria-label="Close modal">✕</button>
</div>
<div class="modal-body">
<div class="audio-control-row">
<label for="toggle-master-mute">Master Audio</label>
<input type="checkbox" id="toggle-master-mute" checked>
</div>
<div class="audio-control-row">
<label for="slider-music-vol">Background Music Volume (<span id="music-vol-num">25%</span>)</label>
<input type="range" id="slider-music-vol" min="0" max="100" value="25">
</div>
<div class="audio-control-row">
<label for="slider-sfx-vol">Sound Effects (SFX) Volume (<span id="sfx-vol-num">55%</span>)</label>
<input type="range" id="slider-sfx-vol" min="0" max="100" value="55">
</div>
<div class="audio-control-row">
<label for="toggle-ambient-hum">Industrial Ambience Hum</label>
<input type="checkbox" id="toggle-ambient-hum" checked>
</div>
<div class="audio-info-note">
ℹ️ The game features a real-time Web Audio synthesizer. Audio starts when you click <strong>Start Challenge</strong>. All safety information is also fully visual and accessible when muted.
</div>
</div>
<div class="modal-footer">
<button id="btn-save-audio" class="btn btn-primary">Done</button>
</div>
</div>
</div>
<!-- Certificate Viewer & Customization Modal Dialog (Exact Match to Reference) -->
<div class="modal-backdrop" id="modal-certificate">
<div class="certificate-modal-card">
<div class="modal-header">
<div class="cert-modal-header-title">
<span class="cert-header-icon">📜</span>
<h3>Certificate of Safety Excellence</h3>
</div>
<button id="btn-close-cert-modal" class="btn-close" aria-label="Close modal">✕</button>
</div>
<div class="certificate-preview-container">
<div class="certificate-visual-frame" id="certificate-visual-frame">
<img src="images/certificate_template.jpg" alt="Certificate of Safety Excellence" class="certificate-base-img" />
</div>
</div>
<div class="certificate-modal-footer">
<span class="cert-tip-hint">🏆 Official verified certificate of completion.</span>
<div class="cert-footer-buttons">
<button id="btn-print-cert-action" class="btn-summary-replay cert-print-btn">
<span>🖨️ PRINT / SAVE AS PDF</span>
</button>
</div>
</div>
</div>
</div>
<!-- Full Resolution Printable Certificate (Exact Match for Print & PDF) -->
<div id="printable-certificate" class="printable-certificate">
<div class="print-cert-wrapper">
<img src="images/certificate_template.jpg" alt="Certificate of Safety Excellence" class="print-cert-bg" />
</div>
</div>
</div>
<!-- Scripts -->
<script src="js/audio.js"></script>
<script src="js/scenarios.js"></script>
<script src="js/particles.js"></script>
<script src="js/avatar.js"></script>
<script src="js/game.js"></script>
</body>
</html>