424 lines
19 KiB
HTML
424 lines
19 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">
|
||
</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-cross-icon">✚</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-connector"></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">
|
||
<div class="score-display">
|
||
<span class="score-label">SAFETY SCORE</span>
|
||
<span class="score-val" id="hud-score">0</span>
|
||
<span class="score-stars" id="hud-stars">☆☆</span>
|
||
</div>
|
||
|
||
<!-- Audio Controls Menu Trigger -->
|
||
<button id="btn-audio-settings" class="btn-icon" title="Audio Settings (M)" aria-label="Audio Settings">
|
||
<span id="audio-icon">🔊</span>
|
||
</button>
|
||
<button id="btn-restart" class="btn-icon" title="Restart Game (R)" aria-label="Restart">
|
||
<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="intro-card">
|
||
<div class="hero-graphic">
|
||
<div class="safety-shield-animated">
|
||
<svg viewBox="0 0 100 100" class="shield-svg">
|
||
<polygon points="50,5 92,20 92,55 50,95 8,55 8,20" class="shield-outline" />
|
||
<path d="M50 25 L50 75 M25 50 L75 50" class="shield-plus" />
|
||
</svg>
|
||
<div class="pulse-ring"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<h1 class="hero-title">PPE SAFETY CHALLENGE</h1>
|
||
<p class="hero-subtitle">“Choose Right. Work Safe.”</p>
|
||
|
||
<div class="mission-briefing">
|
||
<h3>Interactive Workplace Safety Mission</h3>
|
||
<p>Select the correct Personal Protective Equipment (PPE) for critical industrial tasks. Learn how proper gear prevents severe workplace injuries before starting dangerous operations.</p>
|
||
|
||
<div class="learning-flow-banner">
|
||
<span class="flow-item">🔍 SEE SITUATION</span>
|
||
<span class="flow-arrow">➔</span>
|
||
<span class="flow-item">⚠️ IDENTIFY HAZARD</span>
|
||
<span class="flow-arrow">➔</span>
|
||
<span class="flow-item">🦺 SELECT PPE</span>
|
||
<span class="flow-arrow">➔</span>
|
||
<span class="flow-item">⚙️ TEST SAFETY</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="start-controls">
|
||
<button id="btn-start-game" class="btn btn-primary btn-large glow-effect">
|
||
<span class="btn-icon-large">▶</span>
|
||
<span class="btn-text">START CHALLENGE</span>
|
||
</button>
|
||
<div class="controls-hint">
|
||
<span>⌨️ Mouse Click or Number Keys (1-8) to equip • Spacebar to Test Task</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SCREEN 2: ACTIVE GAMEPLAY VIEW -->
|
||
<section id="screen-game" class="screen-view">
|
||
<div class="gameplay-grid">
|
||
|
||
<!-- Left Column: Hazard Assessment & Task Briefing -->
|
||
<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">Metal Grinding Operation</h2>
|
||
</div>
|
||
|
||
<div class="situation-card">
|
||
<div class="card-subtitle">WORKPLACE ENVIRONMENT</div>
|
||
<p class="situation-desc" id="scene-desc">
|
||
An industrial worker is preparing to grind weld seams on structural steel with a high-speed angle grinder (11,000 RPM).
|
||
</p>
|
||
</div>
|
||
|
||
<div class="hazard-identification-card">
|
||
<div class="card-subtitle">IDENTIFIED TASK HAZARDS</div>
|
||
<ul class="hazard-list" id="hazard-list">
|
||
<!-- Dynamically populated -->
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="equipped-status-card">
|
||
<div class="card-subtitle">PROTECTION COVERAGE</div>
|
||
<div class="coverage-grid" id="coverage-grid">
|
||
<div class="coverage-item" data-slot="head">
|
||
<span class="cov-icon">🧢</span>
|
||
<span class="cov-label">Head</span>
|
||
<span class="cov-status missing">Missing</span>
|
||
</div>
|
||
<div class="coverage-item" data-slot="eyes">
|
||
<span class="cov-icon">👓</span>
|
||
<span class="cov-label">Eyes/Face</span>
|
||
<span class="cov-status missing">Missing</span>
|
||
</div>
|
||
<div class="coverage-item" data-slot="ears">
|
||
<span class="cov-icon">🎧</span>
|
||
<span class="cov-label">Hearing</span>
|
||
<span class="cov-status missing">Missing</span>
|
||
</div>
|
||
<div class="coverage-item" data-slot="hands">
|
||
<span class="cov-icon">🧤</span>
|
||
<span class="cov-label">Hands</span>
|
||
<span class="cov-status missing">Missing</span>
|
||
</div>
|
||
<div class="coverage-item" data-slot="body">
|
||
<span class="cov-icon">🦺</span>
|
||
<span class="cov-label">Body</span>
|
||
<span class="cov-status missing">Missing</span>
|
||
</div>
|
||
<div class="coverage-item" data-slot="feet">
|
||
<span class="cov-icon">🥾</span>
|
||
<span class="cov-label">Feet</span>
|
||
<span class="cov-status missing">Missing</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="action-dock">
|
||
<button id="btn-test-safety" class="btn btn-action btn-full glow-ready">
|
||
<span class="btn-icon">⚡</span>
|
||
<span id="btn-test-safety-text">TEST WORKER SAFETY & START</span>
|
||
</button>
|
||
<button id="btn-clear-ppe" class="btn btn-ghost btn-small">
|
||
<span>↺ Clear All Equipped Items</span>
|
||
</button>
|
||
</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>
|
||
|
||
<!-- Dynamic Background Scenery Layer -->
|
||
<div class="scene-backdrop" id="scene-backdrop">
|
||
<div class="industrial-wall"></div>
|
||
<div class="workbench">
|
||
<div class="workpiece-element" id="workpiece-element"></div>
|
||
<div class="equipment-element" id="equipment-element"></div>
|
||
</div>
|
||
<div class="warning-tape"></div>
|
||
</div>
|
||
|
||
<!-- Worker Avatar Interactive SVG Layer -->
|
||
<div class="avatar-wrapper" id="avatar-container">
|
||
<!-- Injected by avatar.js -->
|
||
</div>
|
||
|
||
<!-- Freeze Frame / Critical Warning Alert Overlay -->
|
||
<div class="consequence-freeze-overlay" id="consequence-overlay">
|
||
<div class="freeze-banner">
|
||
<div class="freeze-header">
|
||
<span class="hazard-flasher" id="hazard-flasher-badge">⚠️ STOP! CRITICAL HAZARDS DETECTED</span>
|
||
</div>
|
||
<h3 class="consequence-title" id="consequence-title">Critical Protection Gaps Detected</h3>
|
||
<p class="consequence-desc" id="consequence-desc">
|
||
Multiple required protective gear items are missing or improper for this task. Unprotected body zones are exposed to severe workplace trauma.
|
||
</p>
|
||
|
||
<div class="missing-items-box">
|
||
<div class="missing-box-header">
|
||
<span class="box-label">⚠️ ALL REQUIRED CORRECTIONS (<span id="missing-count-num">0</span> ISSUES):</span>
|
||
</div>
|
||
<div class="missing-hazard-cards" id="consequence-hazard-list">
|
||
<!-- Dynamically rendered list of all missing & incorrect items -->
|
||
</div>
|
||
</div>
|
||
|
||
<button id="btn-fix-ppe" class="btn btn-warning glow-effect">
|
||
<span>🔧 FIX ALL WORKER PPE & RETRY</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Success Overlay Banner -->
|
||
<div class="success-overlay" id="success-overlay">
|
||
<div class="success-banner">
|
||
<div class="success-badge">
|
||
<span class="badge-icon">✅</span>
|
||
<span class="badge-title" id="success-title">SAFE TO START</span>
|
||
</div>
|
||
<p class="success-desc" id="success-desc">
|
||
Correct PPE selected. Your eyes, face, hands, hearing and feet are fully protected against all task hazards.
|
||
</p>
|
||
<div class="points-awarded-pill">
|
||
<span class="star-icon">⭐</span>
|
||
<span class="points-text" id="awarded-points-text">+100 Safety Points</span>
|
||
</div>
|
||
<button id="btn-next-scenario" class="btn btn-success glow-effect">
|
||
<span id="btn-next-scenario-text">NEXT SCENARIO ➔</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Task Status Indicator -->
|
||
<div class="stage-footer-bar">
|
||
<div class="status-indicator-light" id="status-light">
|
||
<span class="light-dot"></span>
|
||
<span class="light-text" id="status-text">TASK IDLE - EQUIP PPE AND CLICK TEST</span>
|
||
</div>
|
||
<div class="audio-feedback-caption" id="audio-caption">
|
||
[Audio: Workshop Ambience Active]
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Column: PPE Selection Locker / Tool Rack -->
|
||
<aside class="sidebar-locker-panel card-panel">
|
||
<div class="panel-header">
|
||
<h3 class="locker-title">🦺 PPE SAFETY LOCKER</h3>
|
||
<span class="locker-subtitle">Select correct gear for this task:</span>
|
||
</div>
|
||
|
||
<div class="ppe-locker-grid" id="ppe-locker-grid">
|
||
<!-- Dynamically populated based on scenario -->
|
||
</div>
|
||
|
||
<div class="locker-guide-card">
|
||
<div class="guide-title">💡 Safety Selection Rule</div>
|
||
<p class="guide-text" id="locker-guide-text">
|
||
Some gear offers insufficient protection or introduces new hazards. Choose specifically rated items!
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SCREEN 3: COMPLETION / FINAL SCORE SCREEN -->
|
||
<section id="screen-summary" class="screen-view">
|
||
<div class="summary-card">
|
||
<div class="summary-header">
|
||
<div class="victory-trophy">🏆</div>
|
||
<h1 class="summary-title">PPE SAFETY CHALLENGE COMPLETE</h1>
|
||
<p class="summary-subtitle">“Choose Right. Work Safe.”</p>
|
||
</div>
|
||
|
||
<div class="metrics-dashboard">
|
||
<div class="metric-box">
|
||
<span class="metric-label">FINAL SAFETY SCORE</span>
|
||
<span class="metric-val" id="summary-score">200 / 200</span>
|
||
<span class="metric-sub" id="summary-percentage">100% Safety Compliance</span>
|
||
</div>
|
||
<div class="metric-box">
|
||
<span class="metric-label">SCENARIOS COMPLETED</span>
|
||
<span class="metric-val">2 / 2</span>
|
||
<span class="metric-sub">Zero Workplace Accidents</span>
|
||
</div>
|
||
<div class="metric-box">
|
||
<span class="metric-label">SAFETY STARS</span>
|
||
<span class="metric-val star-gold" id="summary-stars">⭐⭐</span>
|
||
<span class="metric-sub" id="summary-rank">Master Safety Practitioner</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Key Takeaway Mantra -->
|
||
<div class="takeaway-banner">
|
||
<div class="takeaway-heading">CORE SAFETY WORKFLOW</div>
|
||
<div class="mantra-chain">
|
||
<div class="mantra-step">🛑 <strong>STOP</strong></div>
|
||
<div class="mantra-arrow">➔</div>
|
||
<div class="mantra-step">👁️ <strong>LOOK</strong></div>
|
||
<div class="mantra-arrow">➔</div>
|
||
<div class="mantra-step">⚠️ <strong>IDENTIFY HAZARDS</strong></div>
|
||
<div class="mantra-arrow">➔</div>
|
||
<div class="mantra-step">🦺 <strong>SELECT PPE</strong></div>
|
||
<div class="mantra-arrow">➔</div>
|
||
<div class="mantra-step">🛡️ <strong>WORK SAFELY</strong></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scenarios Review Summary Accordion -->
|
||
<div class="scenarios-review-box">
|
||
<h4>Safety Assessment Summary</h4>
|
||
<div class="review-row">
|
||
<div class="rev-icon">⚡</div>
|
||
<div class="rev-info">
|
||
<strong>Scenario 1: Angle Grinding Operation</strong>
|
||
<p>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="rev-status">✅ PASSED</div>
|
||
</div>
|
||
<div class="review-row">
|
||
<div class="rev-icon">🧪</div>
|
||
<div class="rev-info">
|
||
<strong>Scenario 2: Industrial Chemical Transfer</strong>
|
||
<p>Prevented chemical burn & splash injury using Chemical Splash Goggles, Heavy Nitrile Gauntlet Gloves, Chemical Resistant Apron & Rubber Safety Boots.</p>
|
||
</div>
|
||
<div class="rev-status">✅ PASSED</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="summary-actions">
|
||
<button id="btn-replay" class="btn btn-primary btn-large">
|
||
<span>🔄 REPLAY SAFETY CHALLENGE</span>
|
||
</button>
|
||
<button id="btn-print-certificate" class="btn btn-secondary btn-large">
|
||
<span>📜 PRINT SAFETY CERTIFICATE</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- Printable Certificate Template (Hidden until printed) -->
|
||
<div id="printable-certificate" class="printable-certificate">
|
||
<div class="cert-border">
|
||
<div class="cert-header">
|
||
<div class="cert-logo">✚ PPE SAFETY CHALLENGE</div>
|
||
<h1>CERTIFICATE OF SAFETY EXCELLENCE</h1>
|
||
<p class="cert-sub">This certifies that</p>
|
||
<h2 class="cert-name">QUALIFIED INDUSTRIAL EMPLOYEE</h2>
|
||
<p class="cert-desc">has successfully demonstrated 100% competency in Hazard Identification & Personal Protective Equipment (PPE) Selection across all high-risk industrial scenarios.</p>
|
||
</div>
|
||
<div class="cert-footer">
|
||
<div class="cert-signature">
|
||
<div class="sig-line"></div>
|
||
<span>Safety & Environmental Health Officer</span>
|
||
</div>
|
||
<div class="cert-seal">
|
||
⭐ VERIFIED SAFE ⭐
|
||
</div>
|
||
<div class="cert-date">
|
||
<div class="sig-line" id="cert-date-val"></div>
|
||
<span>Completion Date</span>
|
||
</div>
|
||
</div>
|
||
</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>
|