File: /home/wbwebdes/domains/documents.willemvanoranje.de-delta.eu/private_html/index.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verslag CKV Iris van Herpen Rotterdam.docx - Opgeslagen op deze pc - Word</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
:root {
--accent: #2b579a;
--border: #edebe9;
--text: #323130;
--muted: #605e5c;
--disabled: #a19f9d;
--danger: #d83b01;
}
html,
body {
height: 100%;
overflow: hidden;
font-family: 'Segoe UI', system-ui, sans-serif;
font-size: 14px;
color: var(--text);
background: #fff;
}
.chrome {
display: flex;
flex-direction: column;
height: 100vh;
}
/* HEADER */
.header {
height: 48px;
background: var(--accent);
display: flex;
align-items: center;
padding: 0 8px 0 4px;
flex-shrink: 0;
}
.header-logo {
display: flex;
align-items: center;
gap: 6px;
padding: 0 10px;
}
.logo-box {
width: 30px;
height: 30px;
background: #fff;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
}
.logo-box span {
font-size: 20px;
font-weight: 900;
color: var(--accent);
font-family: Arial, sans-serif;
line-height: 1;
}
.app-name {
color: #fff;
font-size: 15px;
font-weight: 600;
}
.header-mid {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 8px;
}
.doc-name {
color: #fff;
font-size: 13.5px;
font-weight: 600;
}
.doc-loc {
color: rgba(255, 255, 255, .72);
font-size: 11px;
margin-top: 1px;
}
.header-right {
display: flex;
align-items: center;
gap: 4px;
}
.hbtn {
height: 30px;
padding: 0 10px;
border-radius: 3px;
border: none;
background: transparent;
color: #fff;
font-size: 12.5px;
cursor: default;
font-family: inherit;
display: flex;
align-items: center;
gap: 5px;
}
.hbtn:hover {
background: rgba(255, 255, 255, .15);
}
.hbtn.share {
background: #fff;
color: var(--accent);
font-weight: 700;
padding: 0 16px;
}
.hbtn.share:hover {
background: #f0f0f0;
}
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: #ddd;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #333;
margin-left: 4px;
}
/* TABS */
.tabs {
height: 40px;
background: #fff;
border-bottom: 1px solid var(--border);
display: flex;
align-items: stretch;
flex-shrink: 0;
}
.tab {
padding: 0 14px;
font-size: 12.5px;
color: var(--text);
cursor: default;
display: flex;
align-items: center;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.tab:hover {
background: #f5f5f5;
}
.tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 600;
}
/* RIBBON */
.ribbon {
background: #fff;
border-bottom: 1px solid var(--border);
padding: 4px 8px 0;
display: flex;
align-items: flex-end;
min-height: 70px;
gap: 0;
flex-shrink: 0;
}
.rg {
display: flex;
flex-direction: column;
justify-content: flex-end;
border-right: 1px solid #edebe9;
padding: 2px 8px 0;
}
.rg:last-child {
border-right: none;
}
.rgl {
font-size: 10px;
color: var(--muted);
text-align: center;
padding: 3px 0 2px;
white-space: nowrap;
}
.rrow {
display: flex;
align-items: center;
gap: 1px;
margin-bottom: 2px;
}
.rb {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3px 5px;
border-radius: 3px;
cursor: default;
font-size: 10px;
color: var(--text);
min-width: 38px;
height: 50px;
gap: 2px;
}
.rb:hover {
background: #f3f2f1;
}
.rbs {
display: flex;
align-items: center;
height: 22px;
min-width: auto;
padding: 1px 5px;
font-size: 11px;
gap: 3px;
border-radius: 2px;
cursor: default;
color: var(--text);
}
.rbs:hover {
background: #f3f2f1;
}
.rdiv {
width: 1px;
height: 44px;
background: #edebe9;
margin: 0 4px;
align-self: center;
}
.fsel {
height: 25px;
font-size: 11.5px;
border: 1px solid #edebe9;
padding: 0 4px;
border-radius: 2px;
color: var(--text);
background: #fff;
cursor: default;
font-family: inherit;
}
/* BODY */
.body {
display: flex;
flex: 1;
overflow: hidden;
}
.leftnav {
width: 44px;
background: #fff;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 0;
gap: 2px;
flex-shrink: 0;
}
.lnb {
width: 34px;
height: 34px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
color: var(--muted);
}
.lnb:hover {
background: #f3f2f1;
}
.lnb.on {
color: var(--accent);
}
/* CANVAS */
.canvas {
flex: 1;
overflow-y: auto;
background: #f3f2f1;
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 0 40px;
}
.pw {
width: 816px;
max-width: calc(100vw - 80px);
}
.page {
background: #fff;
width: 100%;
min-height: 1056px;
box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .13), 0 0.3px 0.9px rgba(0, 0, 0, .1);
padding: 96px;
position: relative;
}
/* LOADING */
.lw {
position: absolute;
inset: 0;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
z-index: 10;
transition: opacity .35s;
}
.spinner {
width: 36px;
height: 36px;
border: 3px solid #edebe9;
border-top-color: var(--accent);
border-radius: 50%;
animation: spin .85s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.ltxt {
font-size: 13px;
color: var(--muted);
}
.lsub {
font-size: 11px;
color: var(--disabled);
}
/* cursor blink in empty doc */
.cur {
display: none;
height: 19px;
width: 2px;
background: #000;
animation: blink 1.2s step-end infinite;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
/* STATUSBAR */
.sbar {
height: 24px;
background: #fff;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 14px;
gap: 18px;
flex-shrink: 0;
}
.si {
font-size: 11px;
color: var(--muted);
}
.sml {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
}
/* ══ MODAL ══ */
.veil {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .45);
z-index: 800;
align-items: center;
justify-content: center;
}
.veil.show {
display: flex;
}
@keyframes shakeNo {
0%,
100% {
transform: translateX(0);
}
15% {
transform: translateX(-9px);
}
30% {
transform: translateX(8px);
}
45% {
transform: translateX(-7px);
}
60% {
transform: translateX(5px);
}
75% {
transform: translateX(-4px);
}
90% {
transform: translateX(3px);
}
}
.modal.shake {
animation: shakeNo .4s ease;
}
.modal {
background: #fff;
width: 490px;
border-radius: 4px;
box-shadow: 0 28px 64px rgba(0, 0, 0, .28), 0 6px 18px rgba(0, 0, 0, .16);
overflow: hidden;
font-family: 'Segoe UI', system-ui, sans-serif;
animation: mIn .22s cubic-bezier(.33, 1, .68, 1);
}
@keyframes mIn {
from {
transform: scale(.88) translateY(-14px);
opacity: 0;
}
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}
.mhead {
background: var(--danger);
padding: 11px 14px;
display: flex;
align-items: center;
gap: 9px;
}
.mhead-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.mhead-title {
color: #fff;
font-size: 13.5px;
font-weight: 600;
flex: 1;
}
.mhead-x {
color: rgba(255, 255, 255, .5);
font-size: 17px;
padding: 3px 5px;
border-radius: 2px;
cursor: pointer;
}
.mhead-x:hover {
background: rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .7);
}
.mbody {
padding: 18px 20px 14px;
}
.mrow {
display: flex;
gap: 14px;
align-items: flex-start;
}
.bomb-circle {
width: 56px;
height: 56px;
flex-shrink: 0;
background: #fff3f1;
border: 2px solid #f9d0c4;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
animation: pb 1.8s ease-in-out infinite;
}
@keyframes pb {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
.minfo h2 {
font-size: 14px;
font-weight: 700;
color: #1b1b1b;
margin-bottom: 5px;
line-height: 1.3;
}
.minfo p {
font-size: 12.5px;
color: #3b3b3b;
line-height: 1.65;
margin-bottom: 10px;
}
.meta-box {
background: #fff8f7;
border: 1px solid #f4c4ba;
border-radius: 3px;
padding: 9px 12px;
font-size: 11.5px;
}
.mr {
display: flex;
gap: 8px;
margin-bottom: 4px;
align-items: flex-start;
}
.mr:last-child {
margin-bottom: 0;
}
.ml {
color: #605e5c;
min-width: 80px;
flex-shrink: 0;
}
.mv {
color: #1b1b1b;
font-weight: 600;
word-break: break-all;
}
.badge-red {
display: inline-flex;
align-items: center;
gap: 4px;
background: #d83b01;
color: #fff;
font-size: 10.5px;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
letter-spacing: .4px;
}
.mwarn {
margin-top: 10px;
font-size: 10.5px;
color: var(--danger);
display: flex;
align-items: center;
gap: 5px;
}
.mfoot {
padding: 10px 18px 14px;
display: flex;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid #edebe9;
background: #faf9f8;
}
.fbtn {
height: 32px;
padding: 0 16px;
border-radius: 2px;
font-size: 13px;
cursor: pointer;
font-family: inherit;
border: 1px solid transparent;
}
.fbtn.cancel {
background: #fff;
color: var(--disabled);
border-color: #d0d0d0;
cursor: not-allowed;
}
.fbtn.go {
background: var(--danger);
color: #fff;
border-color: var(--danger);
font-weight: 600;
}
.fbtn.go:hover {
background: #b83200;
}
/* ══ FLASH ══ */
.flash {
position: fixed;
inset: 0;
background: #fff;
z-index: 1100;
opacity: 0;
pointer-events: none;
transition: opacity .06s;
}
.flash.go {
opacity: 1;
}
/* ══ EXPLOSION ══ */
.exp-veil {
display: none;
position: fixed;
inset: 0;
z-index: 1200;
}
.exp-veil.show {
display: block;
}
#exp-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* ══ REVEAL — cannot be closed ══ */
.rev-veil {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .7);
z-index: 1300;
align-items: center;
justify-content: center;
}
.rev-veil.show {
display: flex;
}
.rev-card {
background: #fff;
width: 460px;
border-radius: 8px;
box-shadow: 0 32px 80px rgba(0, 0, 0, .38);
padding: 44px 36px 36px;
text-align: center;
font-family: 'Segoe UI', system-ui, sans-serif;
animation: revIn .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes revIn {
from {
transform: scale(.55) translateY(28px);
opacity: 0;
}
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}
.rfrog {
font-size: 76px;
display: block;
line-height: 1;
margin-bottom: 16px;
animation: fj .7s cubic-bezier(.34, 1.56, .64, 1) .1s both;
}
@keyframes fj {
0% {
transform: translateY(40px) scale(.3) rotate(-12deg);
opacity: 0;
}
65% {
transform: translateY(-16px) scale(1.12) rotate(3deg);
}
100% {
transform: translateY(0) scale(1) rotate(0);
opacity: 1;
}
}
.rdate {
font-size: 46px;
font-weight: 900;
color: #d83b01;
letter-spacing: 1px;
line-height: 1;
margin-bottom: 12px;
}
.rmsg {
font-size: 16px;
color: #323130;
line-height: 1.65;
margin-bottom: 8px;
}
.rsub {
font-size: 12.5px;
color: #a19f9d;
}
</style>
</head>
<body>
<div class="chrome">
<!-- HEADER -->
<div class="header">
<div class="header-logo">
<div class="logo-box"><span>W</span></div>
<span class="app-name">Word</span>
</div>
<div class="header-mid">
<div class="doc-name">Verslag CKV Iris van Herpen Rotterdam</div>
<div class="doc-loc">Opgeslagen op deze pc</div>
</div>
<div class="header-right">
<button class="hbtn">Help</button>
<button class="hbtn">Opmerkingen</button>
<button class="hbtn share">
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M11.5 1a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm-7 4a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm7 4a2.5 2.5 0 110 5 2.5 2.5 0 010-5zM6.146 6.646A1.5 1.5 0 105.5 9a1.5 1.5 0 001.292-.746l2-3.5A1.5 1.5 0 1010.5 3.5a1.5 1.5 0 01-1.146.646l-2 3.5z"/></svg>
Delen
</button>
<div class="avatar">IH</div>
</div>
</div>
<!-- TABS -->
<div class="tabs">
<div class="tab active">Start</div>
<div class="tab">Invoegen</div>
<div class="tab">Opmaak</div>
<div class="tab">Verwijzingen</div>
<div class="tab">Controleren</div>
<div class="tab">Beeld</div>
<div class="tab">Help</div>
</div>
<!-- RIBBON -->
<div class="ribbon">
<div class="rg">
<div class="rrow">
<div class="rb" style="min-width:50px;">
<svg width="22" height="22" viewBox="0 0 20 20" fill="none">
<rect x="2" y="4" width="11" height="14" rx="1.5" fill="#eef2fb" />
<rect x="7" y="1" width="11" height="14" rx="1.5" fill="#fff" stroke="#c8c6c4"
stroke-width="1.1" />
<path d="M9.5 5h5M9.5 8h5M9.5 11h3" stroke="#c8c6c4" stroke-width=".9"
stroke-linecap="round" />
</svg>
Plakken
</div>
</div>
<div class="rrow" style="gap:1px;">
<div class="rbs">✂ Knippen</div>
<div class="rbs">⧉ Kopiëren</div>
</div>
<div class="rgl">Klembord</div>
</div>
<div class="rdiv"></div>
<div class="rg">
<div class="rrow" style="gap:4px;margin-bottom:3px;">
<select class="fsel" style="width:128px;"><option>Calibri</option><option>Arial</option></select>
<select class="fsel" style="width:44px;"><option>11</option><option>12</option></select>
</div>
<div class="rrow" style="gap:1px;">
<div class="rbs" style="font-weight:900;font-size:14px;min-width:26px;">V</div>
<div class="rbs" style="font-style:italic;min-width:26px;font-size:14px;">C</div>
<div class="rbs" style="text-decoration:underline;min-width:26px;font-size:14px;">O</div>
<div class="rbs" style="min-width:26px;font-size:10px;text-decoration:line-through;">abc</div>
<div style="width:1px;height:18px;background:#edebe9;margin:0 2px;"></div>
<div class="rbs" style="min-width:26px;font-size:13px;color:#d83b01;font-weight:700;">A</div>
<div class="rbs" style="min-width:26px;font-size:13px;">
<span style="border-bottom:3px solid #ffd400;">A</span></div>
</div>
<div class="rgl">Lettertype</div>
</div>
<div class="rdiv"></div>
<div class="rg">
<div class="rrow" style="gap:1px;">
<div class="rbs" style="min-width:24px;"><svg width="14" height="14" viewBox="0 0 16 16"
fill="#323130">
<rect x="2" y="2.5" width="12" height="1.4" rx=".7" />
<rect x="2" y="6.3" width="7" height="1.4" rx=".7" />
<rect x="2" y="10" width="10" height="1.4" rx=".7" />
<rect x="2" y="13.5" width="12" height="1.4" rx=".7" />
</svg></div>
<div class="rbs" style="min-width:24px;"><svg width="14" height="14" viewBox="0 0 16 16"
fill="#323130">
<rect x="2" y="2.5" width="12" height="1.4" rx=".7" />
<rect x="7" y="6.3" width="7" height="1.4" rx=".7" />
<rect x="4" y="10" width="10" height="1.4" rx=".7" />
<rect x="2" y="13.5" width="12" height="1.4" rx=".7" />
</svg></div>
<div class="rbs" style="min-width:24px;"><svg width="14" height="14" viewBox="0 0 16 16"
fill="#323130">
<rect x="2" y="2.5" width="12" height="1.4" rx=".7" />
<rect x="2" y="6.3" width="12" height="1.4" rx=".7" />
<rect x="2" y="10" width="12" height="1.4" rx=".7" />
<rect x="2" y="13.5" width="12" height="1.4" rx=".7" />
</svg></div>
</div>
<div class="rrow" style="gap:1px;margin-top:1px;">
<div class="rbs" style="min-width:24px;font-size:12px;">¶</div>
<div class="rbs" style="min-width:56px;font-size:11px;">Regelafstand ▾</div>
</div>
<div class="rgl">Alinea</div>
</div>
<div class="rdiv"></div>
<div class="rg">
<div class="rrow" style="gap:3px;">
<div class="rbs"
style="min-width:68px;font-size:11.5px;background:#f3f2f1;border-radius:2px;padding:2px 6px;">
Standaard</div>
<div class="rbs"
style="min-width:52px;font-size:11.5px;color:#2b579a;font-weight:700;border-bottom:2px solid #2b579a;">
Kop 1</div>
<div class="rbs" style="min-width:52px;font-size:11px;color:#555;font-weight:600;">Kop 2</div>
</div>
<div class="rgl">Stijlen</div>
</div>
<div class="rdiv"></div>
<div class="rg">
<div class="rrow" style="gap:2px;">
<div class="rb" style="min-width:52px;height:46px;">
<svg width="18" height="18" viewBox="0 0 20 20" fill="none">
<circle cx="8.5" cy="8.5" r="5" stroke="#323130" stroke-width="1.5" />
<path d="M13 13l4 4" stroke="#323130" stroke-width="1.6" stroke-linecap="round" />
</svg>
<span>Zoeken</span>
</div>
<div class="rb" style="min-width:52px;height:46px;">
<svg width="18" height="18" viewBox="0 0 20 20" fill="none">
<path d="M3 10h14M10 3l7 7-7 7" stroke="#323130" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span>Vervangen</span>
</div>
</div>
<div class="rgl">Bewerken</div>
</div>
</div>
<!-- BODY -->
<div class="body">
<div class="leftnav">
<div class="lnb on"><svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor">
<path d="M4 2h8l4 4v12a1 1 0 01-1 1H4a1 1 0 01-1-1V3a1 1 0 011-1z" />
</svg></div>
<div class="lnb"><svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor"
stroke-width="1.4">
<path d="M3 5h14M3 9h14M3 13h9" />
</svg></div>
<div class="lnb"><svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor"
stroke-width="1.4">
<circle cx="10" cy="10" r="7" />
<path d="M10 7v6M7 10h6" />
</svg></div>
<div class="lnb" style="margin-top:auto;"><svg width="18" height="18" viewBox="0 0 20 20" fill="none"
stroke="currentColor" stroke-width="1.4">
<circle cx="10" cy="10" r="7" />
<path d="M10 9v4M10 7v.5" />
</svg></div>
</div>
<div class="canvas">
<div class="pw">
<div class="page" id="page">
<div class="lw" id="lw">
<div class="spinner"></div>
<div class="ltxt" id="ltxt">Document wordt geladen...</div>
<div class="lsub" id="lsub">Even geduld</div>
</div>
<div class="cur" id="cur"></div>
</div>
</div>
</div>
</div>
<!-- STATUSBAR -->
<div class="sbar">
<div class="si">Pagina 1 van 1</div>
<div class="si">0 woorden</div>
<div class="si">Nederlands (Nederland)</div>
<div class="sml">
<span class="si">100%</span>
<input type="range" style="width:72px;height:3px;accent-color:var(--accent);" min="50" max="200" value="100" readonly>
</div>
</div>
</div>
<!-- FLASH -->
<div class="flash" id="flash"></div>
<!-- BOMBRIEF MODAL -->
<div class="veil" id="veil">
<div class="modal" id="modal">
<div class="mhead">
<svg class="mhead-icon" viewBox="0 0 24 24" fill="none">
<path d="M12 2L3 7v6c0 5.25 3.75 9.8 9 11C17.25 22.8 21 18.25 21 13V7L12 2z"
fill="rgba(255,255,255,.2)" stroke="#fff" stroke-width="1.5" />
<path d="M12 8v5" stroke="#fff" stroke-width="2.2" stroke-linecap="round" />
<circle cx="12" cy="16" r="1.1" fill="#fff" />
</svg>
<span class="mhead-title">Beveiligingsmelding — Microsoft Word</span>
<span class="mhead-x" onclick="shakeIt()">✕</span>
</div>
<div class="mbody">
<div class="mrow">
<div class="bomb-circle">💣</div>
<div class="minfo">
<h2>⚠️ Bombrief ontvangen van Willem</h2>
<p>Word heeft een <strong>gevaarlijk document</strong> gedetecteerd. De afzender staat op de
interne veiligheidslijst. Dit document kan explosieve macro's bevatten.</p>
<div class="meta-box">
<div class="mr">
<span class="ml">Afzender</span><span class="mv">Willem <[email protected]></span>
</div>
<div class="mr">
<span class="ml">Bestand</span><span class="mv">Verslag CKV Iris van Herpen Rotterdam.docx</span>
</div>
<div class="mr">
<span class="ml">Dreiging</span><span class="mv"><span class="badge-red">💥 DOCUMENTEN-EXPLOSIE GEVAAR</span></span>
</div>
<div class="mr">
<span class="ml">Status</span><span class="mv" style="color:#d83b01;">Open op eigen risico</span>
</div>
</div>
<div class="mwarn">
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
<polygon points="8,2 15,14 1,14" />
<rect x="7.3" y="6.5" width="1.4" height="4" fill="#fff" />
<circle cx="8" cy="12.2" r=".8" fill="#fff" />
</svg>
Sluiten is uitgeschakeld vanwege actief dreigingsniveau
</div>
</div>
</div>
</div>
<div class="mfoot">
<button class="fbtn cancel" onclick="shakeIt()">Annuleren</button>
<button class="fbtn go" onclick="boom()">Toch openen →</button>
</div>
</div>
</div>
<!-- EXPLOSION CANVAS -->
<div class="exp-veil" id="exp-veil">
<canvas id="exp-canvas"></canvas>
</div>
<!-- 1 APRIL REVEAL — geen sluitknop -->
<div class="rev-veil" id="rev-veil">
<div class="rev-card">
<span class="rfrog">🐸</span>
<div class="rdate">1 APRIL!</div>
<div class="rmsg">Je dacht toch niet echt dat ik dit<br><strong>al af zou hebben?!</strong></div>
<div class="rsub" style="margin-top:10px;">— Willem</div>
</div>
</div>
<script>
// ── LOADING ──
var steps=[
{t:"Document wordt geladen...", s:"Even geduld", d:1800},
{t:"Verbinding maken met server...", s:"Bestand ophalen", d:1400},
{t:"Inhoud wordt verwerkt...", s:"Pagina-indeling berekenen", d:1600},
{t:"Stijlen toepassen...", s:"Opmaakprofielen laden", d:1200},
{t:"Afbeeldingen laden...", s:"Media optimaliseren", d:1500},
{t:"Beveiligingscontrole...", s:"Macro's controleren", d:1300},
{t:"Bijna gereed...", s:"Eindcontrole uitvoeren", d:1100},
];
var si=0;
function nextStep(){
if(si>=steps.length){
var lw=document.getElementById('lw');
lw.style.opacity='0';
setTimeout(function(){
lw.style.display='none';
document.getElementById('cur').style.display='block';
// even de cursor zien, dan popup
setTimeout(function(){
document.getElementById('veil').classList.add('show');
},1800);
},400);
return;
}
document.getElementById('ltxt').textContent=steps[si].t;
document.getElementById('lsub').textContent=steps[si].s;
var delay=steps[si].d + Math.random()*600;
si++;
setTimeout(nextStep, delay);
}
setTimeout(nextStep, 1000);
// ── SHAKE (annuleren / x) ──
function shakeIt(){
var m=document.getElementById('modal');
m.classList.remove('shake');
void m.offsetWidth;
m.classList.add('shake');
}
// ── EXPLOSION + REVEAL ──
function boom(){
document.getElementById('veil').classList.remove('show');
// white flash
var fl=document.getElementById('flash');
fl.classList.add('go');
setTimeout(function(){fl.style.transition='opacity .5s';fl.style.opacity='0';},80);
var ev=document.getElementById('exp-veil');
ev.classList.add('show');
var c=document.getElementById('exp-canvas');
c.width=innerWidth; c.height=innerHeight;
var ctx=c.getContext('2d');
var cx=c.width/2, cy=c.height/2;
var cols=['#ff4500','#ff8c00','#ffd700','#ff6600','#ffcc00','#fff','#ff3b30','#ff9500'];
var particles=[], rings=[], smokes=[], glow=1;
function addBurst(ox,oy,n,sp){
for(var i=0;i<n;i++){
var a=Math.random()*Math.PI*2, v=sp+Math.random()*sp;
particles.push({x:cx+ox,y:cy+oy,vx:Math.cos(a)*v,vy:Math.sin(a)*v-3,life:1,decay:.009+Math.random()*.025,size:3+Math.random()*10,color:cols[~~(Math.random()*cols.length)],g:.16+Math.random()*.18,type:Math.random()<.3?'spark':'ball'});
}
}
addBurst(0,0,240,12);
rings.push({x:cx,y:cy,r:0,maxR:Math.max(c.width,c.height)*.85,op:1,sp:20});
for(var i=0;i<20;i++) smokes.push({x:cx+(Math.random()-.5)*90,y:cy+(Math.random()-.5)*90,r:12+Math.random()*28,vx:(Math.random()-.5)*1.4,vy:-1.2-Math.random()*1.8,life:1,decay:.004+Math.random()*.007,gray:~~(40+Math.random()*55)});
[220,400].forEach(function(d,idx){setTimeout(function(){addBurst((idx-.5)*130,(idx%2?-50:50),90,8);rings.push({x:cx+(idx-.5)*130,y:cy,r:0,maxR:400,op:.6,sp:12});},d);});
function draw(){
ctx.clearRect(0,0,c.width,c.height);
ctx.fillStyle='rgba(0,0,0,.93)'; ctx.fillRect(0,0,c.width,c.height);
if(glow>0){var g=ctx.createRadialGradient(cx,cy,0,cx,cy,320);g.addColorStop(0,'rgba(255,160,0,'+glow*.7+')');g.addColorStop(.5,'rgba(255,70,0,'+glow*.35+')');g.addColorStop(1,'rgba(0,0,0,0)');ctx.fillStyle=g;ctx.fillRect(0,0,c.width,c.height);glow-=.013;}
rings.forEach(function(r,i){ctx.beginPath();ctx.arc(r.x,r.y,r.r,0,Math.PI*2);ctx.strokeStyle='rgba(255,200,80,'+r.op+')';ctx.lineWidth=3;ctx.stroke();r.r+=r.sp;r.op-=r.sp/r.maxR*1.3;});
rings=rings.filter(function(r){return r.op>0;});
smokes.forEach(function(s){ctx.beginPath();ctx.arc(s.x,s.y,s.r,0,Math.PI*2);ctx.fillStyle='rgba('+s.gray+','+s.gray+','+s.gray+','+s.life*.3+')';ctx.fill();s.x+=s.vx;s.y+=s.vy;s.r+=.7;s.life-=s.decay;});
var alive=false;
particles.forEach(function(p){
if(p.life<=0)return; alive=true;
ctx.save(); ctx.globalAlpha=p.life;
if(p.type==='spark'){ctx.strokeStyle=p.color;ctx.lineWidth=p.size/4;ctx.beginPath();ctx.moveTo(p.x,p.y);ctx.lineTo(p.x-p.vx*4,p.y-p.vy*4);ctx.stroke();}
else{var pg=ctx.createRadialGradient(p.x,p.y,0,p.x,p.y,p.size);pg.addColorStop(0,'#fff');pg.addColorStop(.4,p.color);pg.addColorStop(1,'rgba(0,0,0,0)');ctx.fillStyle=pg;ctx.beginPath();ctx.arc(p.x,p.y,p.size,0,Math.PI*2);ctx.fill();}
ctx.restore();
p.x+=p.vx;p.y+=p.vy;p.vy+=p.g;p.size*=.99;p.life-=p.decay;
});
if(alive||rings.length||glow>0){requestAnimationFrame(draw);}
else{ev.style.transition='opacity .7s';ev.style.opacity='0';setTimeout(function(){ev.style.display='none';document.getElementById('rev-veil').classList.add('show');},700);}
}
requestAnimationFrame(draw);
}
</script>
</body>
</html>