Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <meta name="theme-color" content="#151d24"> | |
| <meta name="description" content="AM Risk & Training: explore an aircraft scene with a 3D firefighter instructor and practise decisions in guided ARFF exercises."> | |
| <title>AM Risk & Training | ARFF Training Lab</title> | |
| <link rel="icon" href="assets/badge.png"> | |
| <link rel="stylesheet" href="styles.css"><link rel="stylesheet" href="simulator-theme.css"> | |
| <script type="importmap">{"imports":{"three":"./vendor/three.module.js"}}</script> | |
| </head> | |
| <body> | |
| <a class="skip" href="#exercise">Skip to exercise</a> | |
| <header class="topbar"> | |
| <a class="brand" href="./" aria-label="AM Risk and Training home"><img class="lab-badge" src="assets/badge.png" alt=""><span class="brand-name">AM RISK & TRAINING<small>← Return to academy</small></span></a> | |
| <nav aria-label="Main navigation"><button class="nav-button active" id="simulator-tab">Training lab</button><button class="nav-button" id="notes-tab">Learning notes</button><button class="nav-button" id="sources-tab">Reference library <span>↗</span></button></nav> | |
| <span class="demo-tag"><i></i> Interactive prototype</span> | |
| </header> | |
| <main> | |
| <div class="page-heading"><div><p class="eyebrow">AVIATION EMERGENCY RESPONSE / LEARNING LAB 01</p><h1>Step onto the apron.</h1><p>Meet your instructor. Read the scene. Make the call.</p></div><button class="quiet-button" id="about-button">About this demo <span>ⓘ</span></button></div> | |
| <div class="workspace"> | |
| <section class="scene-card" aria-labelledby="scene-title"> | |
| <div id="scene" role="img" aria-label="Interactive illustrative 3D aircraft and airport fire vehicle. Use the view and observation buttons below to explore."><div class="scene-fallback" id="scene-fallback" hidden>3D graphics are unavailable here. The observation cards and exercise below contain all the information you need.</div></div> | |
| <div class="scene-heading"><span class="scene-tag">GUIDED SCENARIO <span id="mission-number">01 / 03</span></span><h2 id="scene-title">Smoke at stand 04</h2><p id="scene-subtitle">A report is incomplete. Your observations matter.</p></div> | |
| <div class="scene-topright"><span class="live-dot"></span> ILLUSTRATIVE 3D SCENE</div> | |
| <div class="scene-legend"><span><i class="orange-dot"></i> Reported hazard</span><span><i class="mint-dot"></i> Observation point</span></div> | |
| <div id="scene-callout" class="scene-callout" hidden><span id="callout-label"></span><p id="callout-text"></p></div> | |
| <div class="scene-toolbar"><div class="view-buttons" aria-label="Aircraft views"><button data-view="overview" class="selected" aria-pressed="true">↗ Overview</button><button data-view="side" aria-pressed="false">↔ Side</button><button data-view="top" aria-pressed="false">⊙ Above</button></div><span>Drag to orbit · scroll to zoom</span><button id="motion-button" aria-pressed="false" title="Pause visual animation">Ⅱ Pause motion</button></div> | |
| </section> | |
| <aside class="instructor-card" aria-label="Digital instructor"> | |
| <div class="instructor-top"><span class="eyebrow">YOUR INSTRUCTOR</span><span class="mini-tag" id="guide-label">PROF PORTRAIT</span></div> | |
| <div id="prof-portrait"><img src="assets/prof.png" alt="Prof, your AM Risk learning guide"><span>STILL PORTRAIT · DEVICE NARRATION</span></div> | |
| <div id="avatar" hidden role="img" aria-label="Fictional animated firefighter instructor wearing a helmet and protective jacket"><span id="avatar-fallback" hidden>AM<br>INSTRUCTOR</span><span class="avatar-caption">AM / RESCUE ACADEMY</span></div> | |
| <div class="instructor-name"><div><h2 id="guide-name">Prof</h2><p>Aircraft rescue & firefighting</p></div><span class="speaker-icon" id="speaker-icon" aria-hidden="true"><i></i><i></i><i></i><i></i></span></div> | |
| <div class="transcript"><span id="voice-status">READY TO BRIEF</span><p id="instructor-text" aria-live="polite">Welcome to the apron. I’ll guide you through a short exercise. Inspect the aircraft, then tell me what you would do.</p></div> | |
| <div class="voice-tools"><button class="primary" id="start-button">▶ Start briefing</button><button class="square-button" id="replay-button" aria-label="Replay instructor narration" title="Replay narration">↻</button><button class="square-button" id="mute-button" aria-pressed="false" aria-label="Mute narration" title="Mute narration">♫</button></div> | |
| <details class="voice-settings"><summary>Guide & voice settings</summary><label for="guide-style">Choose your guide</label><select id="guide-style"><option value="portrait">Prof — your portrait</option><option value="animated">Animated 3D firefighter</option></select><label for="voice-select">Device voice</label><select id="voice-select"><option value="">Automatic English voice</option></select><p>Uses voices available on your device. All narration is also shown as text.</p></details> | |
| </aside> | |
| <section class="exercise-card" id="exercise" aria-labelledby="exercise-title"> | |
| <div class="exercise-heading"><div><p class="eyebrow" id="step-label">FIRST, GET YOUR BEARINGS</p><h2 id="exercise-title">Three observations. One clearer picture.</h2></div><span class="step-count" id="step-count">BRIEFING</span></div> | |
| <p id="exercise-description">Explore the three observation points, then start your briefing. This is a tabletop practice exercise.</p> | |
| <div class="observations" id="observations"><button data-observe="0"><b>01</b><span>Reported smoke<small>Separate observation from assumption</small></span><span>↗</span></button><button data-observe="1"><b>02</b><span>Aircraft & occupants<small>Identify what is still unknown</small></span><span>↗</span></button><button data-observe="2"><b>03</b><span>Access & communication<small>Connect the scene to the plan</small></span><span>↗</span></button></div> | |
| <div class="choices" id="choices" hidden></div> | |
| <div class="feedback" id="feedback" hidden role="status"><strong id="feedback-title"></strong><p id="feedback-text"></p><p class="consequence" id="consequence-text"></p><button class="primary" id="next-button">Next decision →</button></div> | |
| <div class="debrief" id="debrief" hidden></div> | |
| <div class="exercise-bottom"><span id="exercise-note">Progress saved on this device · Practice exercise</span><button id="restart-button" class="text-button">↺ Restart exercise</button></div> | |
| </section> | |
| <aside class="path-card" aria-labelledby="path-title"><div class="path-heading"><h2 id="path-title">Your practice pathway</h2><span id="session-count">0 / 3</span></div><div id="mission-list" class="mission-list"></div><div class="progress-label"><span>Current exercise</span><span id="progress-label">Not started</span></div><progress id="progress" value="0" max="3" aria-label="Decisions completed"></progress><p class="path-note"><a href="index.html#progress">View saved progress in the academy ↗</a><br>Instructor validation required for formal training.</p></aside> | |
| </div> | |
| <footer><span>AM RISK & TRAINING <b>/</b> ARFF TRAINING LAB</span><span>Sources: ICAO · NFPA · EASA · SACAA · UK CAA <button id="footer-sources">View scope ↗</button></span></footer> | |
| </main> | |
| <dialog id="info-dialog"><div class="dialog-heading"><p class="eyebrow" id="dialog-label">REFERENCE LIBRARY</p><button id="close-dialog" class="square-button" aria-label="Close dialog">×</button></div><div id="dialog-content"></div></dialog> | |
| <noscript><p class="noscript">Enable JavaScript to run the interactive exercise. This demo uses browser graphics and does not need a Hugging Face token.</p></noscript> | |
| <script type="module" src="app.js"></script> | |
| </body> | |
| </html> | |