639 lines
31 KiB
HTML
639 lines
31 KiB
HTML
<!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>
|