#!/usr/bin/env python3
"""Genereer PM_EL_T04_Evacuatieoefening_eLearning_v1.1.html"""

OUTPUT = "/root/projects/jg/2026-PM-eLearning/deliverables/PM_EL_T04_Evacuatieoefening_eLearning_v1.1.html"

html = r'''<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Phoenix Metals — T04 Evacuatieoefening eLearning</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Calibri,Arial,sans-serif;background:#e8f4f8;color:#1F2937;line-height:1.6}
.progress-bar{position:fixed;top:0;left:0;width:100%;height:6px;background:#ddd;z-index:1000}
.progress-fill{height:100%;background:linear-gradient(90deg,#003366,#1a5276);transition:width .4s;width:0%}
.container{max-width:900px;margin:20px auto;padding:20px}
.card{background:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.1);padding:30px;margin-bottom:20px;display:none}
.card.active{display:block}
h1{color:#003366;font-size:24px;margin-bottom:15px}
h2{color:#1a5276;font-size:20px;margin-bottom:12px}
h3{color:#003366;font-size:17px;margin:10px 0 8px}
p{margin-bottom:10px}
.btn{display:inline-block;padding:12px 28px;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:all .3s;font-family:inherit}
.btn-primary{background:linear-gradient(135deg,#003366,#1a5276);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,51,102,.3)}
.btn-accent{background:#f39c12;color:#fff}
.btn-accent:hover{background:#e67e22}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.badge{display:inline-block;background:#f39c12;color:#fff;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:bold;margin-bottom:10px}
.tip-box{background:#fff3cd;border-left:4px solid #f39c12;padding:15px;border-radius:0 8px 8px 0;margin:12px 0;cursor:pointer}
.tip-box .tip-content{display:none;margin-top:10px}
.tip-box.open .tip-content{display:block}
.practice-box{background:#e8f4f8;border-left:4px solid #003366;padding:15px;border-radius:0 8px 8px 0;margin:12px 0}
.quiz-opt{display:block;width:100%;text-align:left;padding:12px 18px;margin:6px 0;background:#f9f9f9;border:2px solid #ddd;border-radius:8px;cursor:pointer;font-size:15px;transition:all .2s;font-family:inherit}
.quiz-opt:hover{border-color:#1a5276;background:#e8f4f8}
.quiz-opt.correct{border-color:#27ae60;background:#d5f5e3;pointer-events:none}
.quiz-opt.wrong{border-color:#e74c3c;background:#fadbd8;pointer-events:none}
.quiz-opt.dim{opacity:.5;pointer-events:none}
.feedback{padding:12px;border-radius:8px;margin:10px 0;display:none}
.feedback.ok{display:block;background:#d5f5e3;color:#1e8449;border:1px solid #27ae60}
.feedback.fail{display:block;background:#fadbd8;color:#922b21;border:1px solid #e74c3c}
.nav{display:flex;justify-content:space-between;margin-top:20px}
.cert-input{padding:10px;font-size:16px;border:2px solid #ddd;border-radius:8px;width:100%;max-width:400px;margin:10px 0;font-family:inherit}
.cert-input:focus{outline:none;border-color:#003366}
#certificate{background:#fff;border:3px solid #003366;border-radius:16px;padding:40px;text-align:center;max-width:700px;margin:20px auto}
#certificate h2{color:#003366;font-size:28px}
#certificate .cert-line{border-top:2px solid #003366;margin:20px auto;width:60%}
ul{margin:10px 0 10px 20px}
li{margin-bottom:4px}
</style>
</head>
<body>
<div class="progress-bar"><div class="progress-fill" id="pbar"></div></div>
<div class="container">

<!-- WELCOME -->
<div class="card active" id="sec-welcome">
<div class="badge">Phoenix Metals B.V.</div>
<h1>T04 — Evacuatieoefening eLearning</h1>
<p>Welkom bij de eLearning module <strong>Evacuatieoefening</strong> voor Phoenix Metals B.V.</p>
<p>In deze module leer je alles over evacuatieprocedures op onze locaties <strong>PlantOne IJmuiden</strong> en <strong>Rotterdam</strong>, inclusief alarmsoorten, ontruimingsroutes, BHV-rollen, en communicatieprotocollen.</p>
<h3>Wat ga je leren?</h3>
<ul>
<li>Waarom evacuatie training verplicht is (Arbowet art. 5)</li>
<li>De 3 alarmsoorten bij Phoenix Metals</li>
<li>Evacuatieroutes voor IJmuiden en Rotterdam</li>
<li>Verzamelpunten, headcount en communicatie</li>
<li>Speciale situaties: bezoekers, onderaannemers, beperkte mobiliteit</li>
</ul>
<p>Na 10 modules volgt een <strong>quiz (10 vragen)</strong>. Je hebt minimaal <strong>80%</strong> nodig om te slagen.</p>
<p style="margin-top:15px"><strong>MD:</strong> Stijn van Zelst &nbsp;|&nbsp; <strong>Seveso III inrichting</strong></p>
<button class="btn btn-primary" onclick="go('m1')">Start module →</button>
</div>

<!-- M1 -->
<div class="card" id="sec-m1">
<div class="badge">Module 1 / 10</div>
<h1>Waarom evacueren?</h1>
<p>Volgens <strong>artikel 5 van de Arbowet</strong> is elke werkgever verplicht om werknemers te beschermen tegen ernstige gevaren. Dit omvat het organiseren van periodieke evacuatieoefeningen. Voor Seveso III-bedrijven zoals Phoenix Metals B.V. gelden strengere eisen: minimaal éénmaal per jaar een volledige ontruimingsoefening.</p>
<p>Statistieken tonen aan dat goed getrainde medewerkers <strong>3× sneller</strong> evacueren dan ongetrainde medewerkers. In de petrochemische industrie was gemiddeld 87% van de incidenten in de afgelopen 10 jaar gerelateerd aan brand of chemische release.</p>
<p>Psychologisch onderzoek toont aan dat mensen onder stress terugvallen op bekend gedrag. Oefenen zorgt dat de juiste reactie automatisme wordt. Dit noemt men "stress-geïnduceerd herinneren": je lichaam doet wat het heeft geoefend, zelfs in paniek.</p>
<p>Bij Phoenix Metals werken we met gevaarlijke stoffen waaronder <strong>V₂O₅ (vanadiumpentoxide)</strong>, <strong>H₂SO₄ (zwavelzuur)</strong>, <strong>NaOH (natriumhydroxide)</strong> en <strong>Al₂(SO₄)₃ (aluminiumsulfaat)</strong>. Een incident met deze stoffen vereist snelle, adequate evacuatie.</p>

<div class="tip-box" onclick="this.classList.toggle('open')">
<strong>📖 Wist je dat?</strong>
<div class="tip-content">Bij de brand in een chemische fabriek in Enschede (2000) bleek achteraf dat 60% van de medewerkers de juiste evacuatieroute niet kende. Sindsdien zijn evacuatieoefeningen wettelijk verankerd in de Arbowet.</div>
</div>

<div class="practice-box">
<strong>🏭 Phoenix Metals Praktijk</strong><br>
Phoenix Metals organiseert elk kwartaal een evacuatieoefening, waarvan minimaal één per jaar een volledige ontruiming (Seveso III eis). De resultaten worden geëvalueerd en opgenomen in het BHV-verslag.
</div>

<h3>Controlevraag</h3>
<p id="q1t">Wat is de wettelijke basis voor evacuatieoefeningen?</p>
<button class="quiz-opt" onclick="check(this,'q1',false)">a. Arbowet artikel 3</button>
<button class="quiz-opt" onclick="check(this,'q1',true)">b. Arbowet artikel 5</button>
<button class="quiz-opt" onclick="check(this,'q1',false)">c. Arbobesluit artikel 12</button>
<div class="feedback" id="fb-q1"></div>

<div class="nav">
<button class="btn btn-primary" onclick="go('welcome')">← Welcome</button>
<button class="btn btn-accent" onclick="go('m2')">Module 2 →</button>
</div>
</div>

<!-- M2 -->
<div class="card" id="sec-m2">
<div class="badge">Module 2 / 10</div>
<h1>3 alarmsoorten Phoenix Metals</h1>
<p>Phoenix Metals hanteert <strong>drie alarmsoorten</strong>, elk met een eigen geluidspatroon en betekenis:</p>
<h3>1. Brandalarm</h3>
<p>Continu sirene (stijgend-dalend toon). Betekent: brand of rookontwikkeling vastgesteld. Actie: onmiddellijk gebouw verlaten via de dichtstbijzijnde uitgang.</p>
<h3>2. Gasalarm</h3>
<p>Intermitterende toon (2 seconden aan, 2 seconden uit). Betekens: gevaarlijke gasemissie (bijv. H₂S, V₂O₅-stofwolk). Actie: verlaat het gebouw via de windwijzer-route en ga naar het verzamelpunt.</p>
<h3>3. Evacuatiealarm (algemeen)</h3>
<p>Lange, aanhoudende toon gevolgd door omroep via intercom. Betekent: algemene ontruiming. Actie: volg de instructies van de BHV via intercom/mobilofoon.</p>
<p>Bij elk alarm geldt: <strong>nooit de lift gebruiken</strong>, altijd via de trappenhuizen.</p>

<div class="tip-box" onclick="this.classList.toggle('open')">
<strong>📖 Wist je dat?</strong>
<div class="tip-content">De geluidsniveaus van de alarmen voldoen aan NEN-EN 54-3 en zijn minimaal 65 dB(A) op elke werkplek. In lawaaiige productieomgevingen zijn bijkomende visuele signalen (flitslampen) geïnstalleerd.</div>
</div>

<div class="practice-box">
<strong>🏭 Phoenix Metals Praktijk</strong><br>
In de productiehal van PlantOne IJmuiden zijn naast akoestische alarmen ook <strong>flitslampen</strong> geïnstalleerd vanwege het hoge geluidsniveau van de vanadiumverwerking. Bij Rotterdam worden zowel sirenes als PA-systemen gebruikt.
</div>

<h3>Controlevraag</h3>
<p>Welk geluidspatroon hoort bij het gasalarm?</p>
<button class="quiz-opt" onclick="check(this,'q2',false)">a. Continu sirene</button>
<button class="quiz-opt" onclick="check(this,'q2',true)">b. Intermitterend (2 sec aan/uit)</button>
<button class="quiz-opt" onclick="check(this,'q2',false)">c. Lange aanhoudende toon</button>
<div class="feedback" id="fb-q2"></div>

<div class="nav">
<button class="btn btn-primary" onclick="go('m1')">← Module 1</button>
<button class="btn btn-accent" onclick="go('m3')">Module 3 →</button>
</div>
</div>

<!-- M3 -->
<div class="card" id="sec-m3">
<div class="badge">Module 3 / 10</div>
<h1>Evacuatieroutes PlantOne IJmuiden</h1>
<p>De locatie <strong>PlantOne IJmuiden</strong> bestaat uit drie hoofdgebouwen: <strong>Gebouw A</strong> (productiehal vanadiumverwerking), <strong>Gebouw B</strong> (kantoor & laboratorium) en <strong>Gebouw C</strong> (opslag & logistiek).</p>

<h3>Gebouw A — Productiehal</h3>
<p>Hoofduitgang aan de noordzijde (sluis met douchevoorziening). Twee nooduitgangen: oostzijde (bij de V₂O₅-levering) en westzijde (bij de filterinstallatie). Trappenhuizen aan beide uiteinden van de hal.</p>

<h3>Gebouw B — Kantoor & Lab</h3>
<p>Hoofdtrap centraal in het gebouw. Nooduitgang op de begane grond zuidzijde. Laboratorium heeft een eigen nooduitgang via de zuurkast-gang. Alle deuren zijn voorzien van paniekdrukbeslag.</p>

<h3>Gebouw C — Opslag</h3>
<p>De roldeuren fungeren als nooduitgangen. Extra vluchtdeuren aan de oost- en westgevel. Let op: H₂SO₄-opslag heeft een afzonderlijke sluis met neutralisatievoorziening.</p>

<p>Alle routes zijn gemarkeerd met <strong>fotoluminescente bordjes</strong> die ook bij stroomuitval zichtbaar blijven.</p>

<div class="tip-box" onclick="this.classList.toggle('open')">
<strong>📖 Wist je dat?</strong>
<div class="tip-content">Fotoluminescente bordes hoeven geen stroom. Ze laden zich op bij normaal licht en geven 8-12 uur lang licht in het donker. Dit is verplicht per NEN-EN ISO 7010.</div>
</div>

<div class="practice-box">
<strong>🏭 Phoenix Metals Praktijk</strong><br>
Bij de laatste evacuatieoefening (Q1 2026) bleek Gebouw A de langste ontruimingstijd te hebben (4:32 min) door de omvang van de productiehal. Doel: onder 5 minuten.
</div>

<h3>Controlevraag</h3>
<p>Hoeveel nooduitgangen heeft Gebouw A (productiehal)?</p>
<button class="quiz-opt" onclick="check(this,'q3',false)">a. 1</button>
<button class="quiz-opt" onclick="check(this,'q3',false)">b. 2</button>
<button class="quiz-opt" onclick="check(this,'q3',true)">c. 3 (1 hoofduitgang + 2 nooduitgangen)</button>
<div class="feedback" id="fb-q3"></div>

<div class="nav">
<button class="btn btn-primary" onclick="go('m2')">← Module 2</button>
<button class="btn btn-accent" onclick="go('m4')">Module 4 →</button>
</div>
</div>

<!-- M4 -->
<div class="card" id="sec-m4">
<div class="badge">Module 4 / 10</div>
<h1>Evacuatieroutes Rotterdam</h1>
<p>De locatie <strong>Rotterdam</strong> is een compactere vestiging, verdeeld in een <strong>productiegebied</strong> en een <strong>kantoorgebied</strong>, gescheiden door een brandscheiding.</p>
<h3>Productiegebied</h3>
<p>Hoofduitgang via de centrale sluis (P-poort). Twee extra vluchtroutes: noordzijde (bij de reactoren) en zuidzijde (bij de opslagtanks). De route langs de H₂SO₄-tanks voert langs een containmentmuur.</p>
<h3>Kantoorgebied</h3>
<p>Eén centraal trappenhuis (2 verdiepingen). Nooduitgang op BG via de receptie. Brandtrap extern aan de oostgevel (type B-vluchttrap).</p>
<p>Specifieke aandachtspunten Rotterdam:</p>
<ul>
<li>De laadperrons zijn tijdens evacuatie <strong>geen geldige vluchtroute</strong></li>
<li>NaNaOH-opslag: evacuatie via de westroute (weg van de opslag)</li>
<li>De externe brandtrap is voorzien van antislip-coating</li>
</ul>

<div class="tip-box" onclick="this.classList.toggle('open')">
<strong>📖 Wist je dat?</strong>
<div class="tip-content">Rotterdam is een BRZO (Besluit Risico's Zware Ongevallen) locatie. Dit betekent dat naast de Arbowet ook het extern veiligheidsbeleid van de gemeente van toepassing is, met strengere evacuatie-eisen.</div>
</div>

<div class="practice-box">
<strong>🏭 Phoenix Metals Praktijk</strong><br>
Rotterdam heeft een compact team van 8 vaste medewerkers. De ontruimingstijd ligt gemiddeld op 2:15 min. De uitdaging is de integratie van onderaannemers die minder bekend zijn met de layout.
</div>

<h3>Controlevraag</h3>
<p>Waarom zijn de laadperrons geen geldige vluchtroute bij Rotterdam?</p>
<button class="quiz-opt" onclick="check(this,'q4',false)">a. Ze zijn te smal</button>
<button class="quiz-opt" onclick="check(this,'q4',true)">b. Ze zijn aangewezen als geen geldig vluchtroutout</button>
<button class="quiz-opt" onclick="check(this,'q4',false)">c. Ze zijn altijd vergrendeld</button>
<div class="feedback" id="fb-q4"></div>

<div class="nav">
<button class="btn btn-primary" onclick="go('m3')">← Module 3</button>
<button class="btn btn-accent" onclick="go('m5')">Module 5 →</button>
</div>
</div>

<!-- M5 -->
<div class="card" id="sec-m5">
<div class="badge">Module 5 / 10</div>
<h1>Verzamelpunten</h1>
<p>Na evacuatie ga je direct naar het <strong>verzamelpunt</strong> dat hoort bij jouw gebouw. Blijf daar tot je toestemming krijgt om te vertrekken.</p>

<h3>PlantOne IJmuiden</h3>
<ul>
<li><strong>Gebouw A</strong>: Parkeerterrein Noord (afstand ~80m) — gemarkeerd met oranje vlaggen</li>
<li><strong>Gebouw B</strong>: Parkeerterrein West (afstand ~50m)</li>
<li><strong>Gebouw C</strong>: Groenstrook Zuid (afstand ~100m, buiten de installatiehekkage)</li>
</ul>

<h3>Rotterdam</h3>
<ul>
<li><strong>Productie + Kantoor</strong>: Centraal parkeerterrein (afstand ~60m)</li>
</ul>

<h3>Wat gebeurt er op het verzamelpunt?</h3>
<p>De <strong>BHV-coördinator</strong> voert de headcount uit (zie Module 7). De BNO-leider krijgt rapportage over ontbrekende personen. Er wordt een eerste inschatting gemaakt van het incident. Pas als de BNO-leider "veilig" meldt, mag men het verzamelpunt verlaten.</p>

<div class="tip-box" onclick="this.classList.toggle('open')">
<strong>📖 Wist je dat?</strong>
<div class="tip-content">Verzamelpunten moeten altijd "stroomopwaarts" van de wind liggen ten opzichte van de installatie. Bij Phoenix Metals worden de verzamelpunten jaarlijks geëvalueerd op basis van de heersende windrichting.</div>
</div>

<div class="practice-box">
<strong>🏭 Phoenix Metals Praktijk</strong><br>
Tijdens de jaarlijkse Seveso-oefening wordt het verzamelpunt van Gebouw A tijdelijk verplaatst naar een locatie 200m verder, om het scenario van een grote chemische release te simuleren.
</div>

<h3>Controlevraag</h3>
<p>Wanneer mag je het verzamelpunt verlaten?</p>
<button class="quiz-opt" onclick="check(this,'q5',false)">a. Zodra je je hebt gemeld bij de BHV</button>
<button class="quiz-opt" onclick="check(this,'q5',false)">b. Na 15 minuten automatisch</button>
<button class="quiz-opt" onclick="check(this,'q5',true)">c. Pas als de BNO-leider "veilig" meldt</button>
<div class="feedback" id="fb-q5"></div>

<div class="nav">
<button class="btn btn-primary" onclick="go('m4')">← Module 4</button>
<button class="btn btn-accent" onclick="go('m6')">Module 6 →</button>
</div>
</div>

<!-- M6 -->
<div class="card" id="sec-m6">
<div class="badge">Module 6 / 10</div>
<h1>BHV-rollen bij evacuatie</h1>
<p>Phoenix Metals kent drie sleutelrollen binnen de BHV-organisatie tijdens evacuatie:</p>

<h3>BNO-leider (Bedrijfsnoodorganisatie)</h3>
<p>Taken: algehele leiding van de evacuatie, communicatie met hulpdiensten, beslissing over alarmering, "veilig"-melding. De BNO-leider is altijd de <strong>bedrijfsleider of diens vervanger</strong>.</p>

<h3>BBW (Bedrijfshulpverzorger)</h3>
<p>Taken: begeleiden van medewerkers naar verzamelpunt, controle van ruimtes (zijn alle ruimtes leeg?), eerste hulp aan gewonden, assisteren bij headcount. Phoenix Metals heeft per gebouw minimaal 2 BBW'ers.</p>

<h3>Calcoördinator</h3>
<p>Taken: beheer van het bezoekersregister, controle of alle bezoekers/onderaannemers zijn geëvacueerd, communicatie naar de BNO-leider over aanwezige externe personen. De calcoördinator werkt vanuit de receptie of het verzamelpunt.</p>

<p>Alle BHV'ers zijn herkenbaar aan een <strong>gele hesje</strong> met "BHV" op de rug. De BNO-leider draagt een <strong>oranje hesje</strong>.</p>

<div class="tip-box" onclick="this.classList.toggle('open')">
<strong>📖 Wist je dat?</strong>
<div class="tip-content">Volgens de NEN 4000 moeten BHV'ers jaarlijks worden bijgeschoold. Bij Seveso III-bedrijven geldt een bijscholingseis van minimaal 16 uur per jaar.</div>
</div>

<div class="practice-box">
<strong>🏭 Phoenix Metals Praktijk</strong><br>
Phoenix Metals heeft momenteel 8 BHV'ers verdeeld over beide locaties. De BNO-leider is Stijn van Zelst (MD), met een vervanger per locatie.
</div>

<h3>Controlevraag</h3>
<p>Wie is verantwoordelijk voor het bezoekersregister tijdens evacuatie?</p>
<button class="quiz-opt" onclick="check(this,'q6',true)">a. De calcoördinator</button>
<button class="quiz-opt" onclick="check(this,'q6',false)">b. De BNO-leider</button>
<button class="quiz-opt" onclick="check(this,'q6',false)">c. De receptie</button>
<div class="feedback" id="fb-q6"></div>

<div class="nav">
<button class="btn btn-primary" onclick="go('m5')">← Module 5</button>
<button class="btn btn-accent" onclick="go('m7')">Module 7 →</button>
</div>
</div>

<!-- M7 -->
<div class="card" id="sec-m7">
<div class="badge">Module 7 / 10</div>
<h1>Headcount procedure</h1>
<p>De headcount is een <strong>kritieke stap</strong> na elke evacuatie. Het doel is om binnen 10 minuten te weten of iedereen veilig buiten is.</p>

<h3>Stappenplan headcount</h3>
<p><strong>Stap 1:</strong> BBW'ers tellen alle personen op hun verzamelpunt en noteren namen.</p>
<p><strong>Stap 2:</strong> De calcoördinator vergelijkt het bezoekersregister met de aanwezige externe personen.</p>
<p><strong>Stap 3:</strong> Elke BBW rapporteert de telling aan de BNO-leider via mobilofoon.</p>
<p><strong>Stap 4:</strong> BNO-leider vergelijkt met de presentielijst (Badge-inregistratie).</p>
<p><strong>Stap 5:</strong> Ontbrekende personen? → BNO-leider start zoekactie met hulp van BBW'ers en meldt aan hulpdiensten.</p>

<h3>Rapportage</h3>
<p>De BNO-leider vult het <strong>Headcount formulier</strong> in (digitaal of papier). Dit bevat: tijdstip evacuatie, aantal personen per verzamelpunt, ontbrekende personen, genomen acties.</p>

<div class="tip-box" onclick="this.classList.toggle('open')">
<strong>📖 Wist je dat?</strong>
<div class="tip-content">In de petrochemische industrie is de "golden hour" van toepassing: binnen 1 uur moet iedereen geteld en veilig zijn. Bij Seveso-bedrijven eist de overheid dat de headcount binnen 15 minuten is afgerond.</div>
</div>

<div class="practice-box">
<strong>🏭 Phoenix Metals Praktijk</strong><br>
Phoenix Metals gebruikt het badge-systeem voor automatische presentie. Bij alarm worden de badges uitgelezen en vergeleken met de headcount op het verzamelpunt. Discrepanties worden direct gemeld.
</div>

<h3>Controlevraag</h3>
<p>Binnen hoeveel tijd moet de headcount zijn afgerond?</p>
<button class="quiz-opt" onclick="check(this,'q7',false)">a. 30 minuten</button>
<button class="quiz-opt" onclick="check(this,'q7',false)">b. 15 minuten (Seveso III eis)</button>
<button class="quiz-opt" onclick="check(this,'q7',true)">c. 10 minuten (intern doel) / 15 min (Seveso III)</button>
<div class="feedback" id="fb-q7"></div>

<div class="nav">
<button class="btn btn-primary" onclick="go('m6')">← Module 6</button>
<button class="btn btn-accent" onclick="go('m8')">Module 8 →</button>
</div>
</div>

<!-- M8 -->
<div class="card" id="sec-m8">
<div class="badge">Module 8 / 10</div>
<h1>Communicatie tijdens evacuatie</h1>
<p>Duidelijke communicatie is de ruggengraat van elke evacuatie. Phoenix Metals gebruikt meerdere communicatiemiddelen:</p>

<h3>Intercom / PA-systeem</h3>
<p>Wordt gebruikt voor algemene mededelingen aan alle medewerkers. De BNO-leider of centrale meldkamer kan het PA-systeem activeren. Berichten worden in het Nederlands en Engels omgeroepen.</p>

<h3>Mobilofoon (Walkietalkie)</h3>
<p>BHV'ers communiceren via een <strong>dedicated BHV-kanaal</strong>. Frequentie: kanaal 5. Elke BHV heeft een mobilofoon bij zich tijdens dienst. Reserve-mobilofonen liggen bij de receptie.</p>

<h3>BHV-netwerk</h3>
<p>De BNO-leider coördineert via het BHV-netwerk. Dit omvat: mobilofoon, telefoon (indien veilig), en direct contact op het verzamelpunt. Communicatievolgorde: BNO → BBW → Medewerkers.</p>

<p><strong>Belangrijk:</strong> Gebruik geen mobiele telefoon in de buurt van gaslekken (explosiegevaar). Vertrouw op de mobilofoon (intrinsiek veilig).</p>

<div class="tip-box" onclick="this.classList.toggle('open')">
<strong>📖 Wist je dat?</strong>
<div class="tip-content">Intrinsiek veilige mobilofonen (ATEX-gecertificeerd) mogen in explosiegevaarlijke zones gebruikt worden omdat ze geen vonken kunnen veroorzaken. Phoenix Metals heeft deze voor de H₂SO₄- en V₂O₅-gebieden.</div>
</div>

<div class="practice-box">
<strong>🏭 Phoenix Metals Praktijk</strong><br>
Tijdens de Q1 2026 oefening werd de communicatie getest met een scenario waarin het PA-systeem uitviel. De BHV'ers schakelden succesvol over op mobilofoon. Aanbeveling: extra PA-luidspreker in Gebouw C.
</div>

<h3>Controlevraag</h3>
<p>Waarom mag je geen mobiele telefoon gebruiken bij een gaslek?</p>
<button class="quiz-opt" onclick="check(this,'q8',true)">a. Explosiegevaar (vonkvorming)</button>
<button class="quiz-opt" onclick="check(this,'q8',false)">b. De telefoon stoort de intercom</button>
<button class="quiz-opt" onclick="check(this,'q8',false)">c. Het netwerk is overbelast</button>
<div class="feedback" id="fb-q8"></div>

<div class="nav">
<button class="btn btn-primary" onclick="go('m7')">← Module 7</button>
<button class="btn btn-accent" onclick="go('m9')">Module 9 →</button>
</div>
</div>

<!-- M9 -->
<div class="card" id="sec-m9">
<div class="badge">Module 9 / 10</div>
<h1>Speciale situaties</h1>
<p>Niet iedereen evacueert op dezelfde manier. Deze module behandelt speciale groepen en situaties.</p>

<h3>Bezoekers</h3>
<p>Bezoekers zijn vaak onbekend met de lay-out. Bij aankomst ontvangen zij een <strong>veiligheidsinstructie</strong> inclusief evacuatieroute. De begeleider is verantwoordelijk voor de evacuatie van zijn/haar gast. De calcoördinator controleert het bezoekersregister.</p>

<h3>Beperkte mobiliteit</h3>
<p>Medewerkers of bezoekers met beperkte mobiliteit krijgen een <strong>persoonlijk evacuatieplan (PEP)</strong>. Dit omvat: aangewezen BHV-buddy, alternatieve route (indien trappen niet mogelijk), en een verzamelplaats dicht bij een uitgang. PEP's worden jaarlijks geëvalueerd.</p>

<h3>Onderaannemers</h3>
<p>Onderaannemers moeten voor aanvang van het werk een <strong>toolbox meeting</strong> hebben ontvangen inclusief evacuatie-instructies. Zij dragen dezelfde badge als medewerkers en worden in de headcount meegenomen. De projectleider is verantwoordelijk voor de aanwezigheidsregistratie van onderaannemers.</p>

<h3>Nacht- en weekenddienst</h3>
<p>Buiten kantooruren is het aantal aanwezige BHV'ers beperkt. Het alarm verloopt via het automatische systeem. De dienstdoende leidinggevende neemt de BNO-rol over.</p>

<div class="tip-box" onclick="this.classList.toggle('open')">
<strong>📖 Wist je dat?</strong>
<div class="tip-content">Volgens de Arbowet moet elke werkgever een PEP (Persoonlijk Evacuatieplan) opstellen voor medewerkers met een functiebeperking. Dit is geen optie — het is wettelijk verplicht.</div>
</div>

<div class="practice-box">
<strong>🏭 Phoenix Metals Praktijk</strong><br>
Bij Phoenix Metals IJmuiden werkt regelmatig een onderaannemer voor onderhoud aan de filterinstallatie. Zij ontvangen altijd een korte evacuatie-instructie bij de incheck, inclusief een plattegrond met de routes.
</div>

<h3>Controlevraag</h3>
<p>Wie is verantwoordelijk voor de evacuatie van een bezoeker?</p>
<button class="quiz-opt" onclick="check(this,'q9',false)">a. De calcoördinator</button>
<button class="quiz-opt" onclick="check(this,'q9',true)">b. De begeleider van de bezoeker</button>
<button class="quiz-opt" onclick="check(this,'q9',false)">c. De BNO-leider</button>
<div class="feedback" id="fb-q9"></div>

<div class="nav">
<button class="btn btn-primary" onclick="go('m8')">← Module 8</button>
<button class="btn btn-accent" onclick="go('m10')">Module 10 →</button>
</div>
</div>

<!-- M10 -->
<div class="card" id="sec-m10">
<div class="badge">Module 10 / 10</div>
<h1>Na-evacuatie evaluatie + samenvatting</h1>

<h3>Evaluatie</h3>
<p>Na elke evacuatieoefening (en elk echt incident) wordt een <strong>evaluatieverslag</strong> opgesteld. Dit omvat: ontruimingstijd per gebouw, geconstateerde knelpunten, communicatie-effectiviteit, en verbeteracties.</p>
<p>De evaluatie wordt besproken in het BHV-overleg en opgenomen in het <strong>Seveso-veiligheidsrapport</strong>. Verbeteracties krijgen een eigenaar en een deadline.</p>

<h3>Samenvatting</h3>
<p>In deze module heb je geleerd:</p>
<ul>
<li>Waarom evacuatieoefeningen verplicht zijn (Arbowet art. 5, Seveso III)</li>
<li>De 3 alarmsoorten: brand, gas, algemene evacuatie</li>
<li>Evacuatieroutes voor IJmuiden (Gebouw A/B/C) en Rotterdam</li>
<li>Verzamelpunten per locatie en gebouw</li>
<li>BHV-rollen: BNO-leider, BBW, calcoördinator</li>
<li>Headcount procedure in 5 stappen</li>
<li>Communicatiemiddelen: intercom, mobilofoon, BHV-netwerk</li>
<li>Speciale situaties: bezoekers, beperkte mobiliteit, onderaannemers</li>
</ul>

<div class="practice-box">
<strong>🏭 Phoenix Metals Praktijk</strong><br>
De laatste evaluatie (Q1 2026) leverde 3 verbeteracties op: extra PA-luidspreker Gebouw C, bijscholing mobiloönengebruik, en verheldering van de routes in Gebouw A.
</div>

<h3>Controlevraag</h3>
<p>Wat gebeurt er met de evaluatie na een evacuatieoefening?</p>
<button class="quiz-opt" onclick="check(this,'q10',false)">a. Niets — het is alleen voor het archief</button>
<button class="quiz-opt" onclick="check(this,'q10',true)">b. Besproken in BHV-overleg + verbeteracties met eigenaar en deadline</button>
<button class="quiz-opt" onclick="check(this,'q10',false)">c. Alleen gecommuniceerd naar de directie</button>
<div class="feedback" id="fb-q10"></div>

<div class="nav">
<button class="btn btn-primary" onclick="go('m9')">← Module 9</button>
<button class="btn btn-accent" onclick="go('quiz')">Start quiz →</button>
</div>
</div>

<!-- QUIZ -->
<div class="card" id="sec-quiz">
<div class="badge">Quiz — 10 vragen</div>
<h1>Eindtoets Evacuatieoefening</h1>
<p>Beantwoord alle 10 vragen. Je hebt minimaal <strong>80% (8/10)</strong> nodig om te slagen.</p>
<div id="quiz-questions"></div>
<div id="quiz-result" style="display:none;margin-top:20px;padding:20px;border-radius:12px;text-align:center"></div>
<button class="btn btn-primary" id="quiz-submit" onclick="submitQuiz()" style="margin-top:15px">Inleveren</button>
</div>

<!-- CERTIFICAAT -->
<div class="card" id="sec-cert">
<h1>Certificaat</h1>
<p>Gefeliciteerd! Je hebt de toets succesvol afgerond.</p>
<p>Vul je naam in om je certificaat te ontvangen:</p>
<input type="text" class="cert-input" id="cert-name" placeholder="Je volledige naam">
<button class="btn btn-primary" onclick="genCert()" style="margin-top:10px">Genereer certificaat</button>
<div id="certificate" style="display:none">
<h2>🏆 Certificaat</h2>
<div class="cert-line"></div>
<p style="font-size:18px;margin:15px 0">Dit certificaat wordt verleend aan</p>
<p style="font-size:24px;color:#003366;font-weight:bold" id="cert-person"></p>
<p style="margin:15px 0">voor het succesvol afronden van de eLearning module</p>
<p style="font-size:16px"><strong>T04 — Evacuatieoefening</strong></p>
<p style="margin:10px 0">Phoenix Metals B.V.</p>
<p>Score: <strong id="cert-score"></strong></p>
<p>Datum: <strong id="cert-date"></strong></p>
<div class="cert-line"></div>
<p style="font-size:13px;color:#666;margin-top:15px">MD: Stijn van Zelst | PlantOne IJmuiden + Rotterdam | Seveso III</p>
</div>
</div>

</div>

<script>
const sections=['welcome','m1','m2','m3','m4','m5','m6','m7','m8','m9','m10','quiz','cert'];
const total=sections.length;
let cur=0;
const answered={};

function go(id){
  document.querySelectorAll('.card').forEach(c=>c.classList.remove('active'));
  document.getElementById('sec-'+id).classList.add('active');
  cur=sections.indexOf(id);
  document.getElementById('pbar').style.width=((cur+1)/total*100)+'%';
  window.scrollTo(0,0);
}

function check(btn,qid,ok){
  if(answered[qid])return;
  answered[qid]=true;
  const fb=document.getElementById('fb-'+qid);
  if(ok){
    btn.classList.add('correct');
    fb.className='feedback ok';
    fb.textContent='✅ Correct!';
  }else{
    btn.classList.add('wrong');
    fb.className='feedback fail';
    fb.textContent='❌ Niet correct. Bekijk de theorie opnieuw.';
  }
  btn.parentElement.querySelectorAll('.quiz-opt').forEach(b=>{if(b!==btn)b.classList.add('dim')});
}

const quizData=[
  {q:"Welke wet verplicht evacuatieoefeningen?", opts:["Arbowet art. 3","Arbowet art. 5","Arbobesluit art. 8"], ans:1},
  {q:"Welk geluidspatroon hoort bij het gasalarm?", opts:["Continu sirene","Intermitterend (2s aan/uit)","Lange aanhoudende toon"], ans:1},
  {q:"Hoeveel nooduitgangen heeft Gebouw A in IJmuiden?", opts:["1","2","3 (1 hoofd + 2 nood)"], ans:2},
  {q:"Wat is de rol van de calcoördinator tijdens evacuatie?", opts:["Brandbestrijding","Bezoekersregister controle","Eerste hulp verlenen"], ans:1},
  {q:"Wanneer mag je het verzamelpunt verlaten?", opts:["Na 10 minuten","Als de BBW het zegt","Als de BNO-leider 'veilig' meldt"], ans:2},
  {q:"Welk communicatiemiddel is veilig bij een gaslek?", opts:["Mobiele telefoon","ATEX mobilofoon","Intercom"], ans:1},
  {q:"Wat is een PEP?", opts:["Persoonlijk Evacuatieplan","Productie Evacuatie Procedure","Periodieke Evaluatie Protocol"], ans:0},
  {q:"Wat is de eerste stap van de headcount?", opts:["BNO belt hulpdiensten","BBW telt personen op verzamelpunt","Calcoördinator controleert register"], ans:1},
  {q:"SCENARIO: Je bent in Gebouw B IJmuiden en hoort het brandalarm. Wat doe je FIRST?", opts:["Naar het lab gaan om apparatuur af te sluiten","Via dichtstbijzijnde uitgang naar parkeerterrein West","Wachten op intercom-instructies"], ans:1},
  {q:"Wat gebeurt er met verbeteracties na een evacuatieoefening?", opts:["Niets — archief","BHV-overleg + eigenaar + deadline","Alleen naar directie"], ans:1}
];
let quizAnswers=new Array(quizData.length).fill(-1);

function buildQuiz(){
  const cont=document.getElementById('quiz-questions');
  quizData.forEach((item,i)=>{
    let h='<div style="margin-bottom:20px;padding:15px;background:#f9f9f9;border-radius:8px">';
    h+='<p><strong>'+(i+1)+'. </strong>'+item.q+'</p>';
    item.opts.forEach((o,j)=>{
      h+='<button class="quiz-opt" onclick="pickQuiz('+i+','+j+',this)">'+String.fromCharCode(97+j)+'. '+o+'</button>';
    });
    h+='</div>';
    cont.innerHTML+=h;
  });
}

function pickQuiz(qi,oi,btn){
  quizAnswers[qi]=oi;
  const siblings=btn.parentElement.querySelectorAll('.quiz-opt');
  siblings.forEach((b,i)=>{
    b.style.background=i===oi?'#e8f4f8':'#f9f9f9';
    b.style.borderColor=i===oi?'#1a5276':'#ddd';
  });
}

function submitQuiz(){
  let score=0;
  const btns=document.querySelectorAll('#quiz-questions .quiz-opt');
  quizData.forEach((item,i)=>{
    const base=i*3;
    const chosen=quizAnswers[i];
    btns[base+item.ans].classList.add('correct');
    if(chosen===-1){
      // unanswered
    } else if(chosen===item.ans){
      score++;
    }else{
      btns[base+chosen].classList.add('wrong');
    }
  });
  // disable all
  btns.forEach(b=>b.style.pointerEvents='none');

  const pct=score*10;
  const res=document.getElementById('quiz-result');
  res.style.display='block';
  res.style.background=pct>=80?'#d5f5e3':'#fadbd8';
  res.innerHTML='<h2>Score: '+score+'/10 ('+pct+'%)</h2>'+(pct>=80?'<p>Geslaagd! 🎉</p>':'<p>Niet geslaagd. Bestudeer de modules opnieuw en probeer het opnieuw.</p>');

  document.getElementById('quiz-submit').disabled=true;
  if(pct>=80){
    window._quizScore=score+'/10';
    setTimeout(()=>go('cert'),1500);
  }
}

function genCert(){
  const name=document.getElementById('cert-name').value.trim();
  if(!name){alert('Vul je naam in.');return}
  document.getElementById('cert-person').textContent=name;
  document.getElementById('cert-score').textContent=window._quizScore||'8/10';
  document.getElementById('cert-date').textContent=new Date().toLocaleDateString('nl-NL');
  document.getElementById('certificate').style.display='block';
}

buildQuiz();
</script>
</body>
</html>'''

with open(OUTPUT, 'w', encoding='utf-8') as f:
    f.write(html)

print(f"✅ Generated: {OUTPUT}")
print(f"   Size: {len(html):,} bytes")
