Vishva/game_development_workshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update game UI, add 3D gear assets, backgrounds, icons, and audio enhancements

Browse Source
This commit is contained in:
Vishva
2026-09-26 15:38:52 +05:30
parent d68131d500
commit db6840b870
86 changed files with 497 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+18 -40
View File
@@ -8,6 +8,10 @@
<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 -->
@@ -69,44 +73,11 @@
<!-- 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">⚙️ START TASK</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-9) to equip • Spacebar to Start Task</span>
</div>
</div>
<div class="home-screen-backdrop">
<img src="images/home_page_bg.png" alt="PPE Safety Challenge" class="home-bg-image" />
<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>
@@ -207,9 +178,16 @@
<!-- Scene canvas for particles/sparks/chemicals -->
<canvas id="stage-fx-canvas" class="stage-fx-canvas"></canvas>
<!-- Dynamic Background Scenery Layer -->
<!-- Pre-rendered Dynamic Background Scenery Layer -->
<div class="scene-backdrop" id="scene-backdrop">
<!-- Dynamically populated based on scenario -->
<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 -->