{"id":51217,"date":"2026-09-19T15:53:35","date_gmt":"2026-09-19T14:53:35","guid":{"rendered":"https:\/\/cctvacademy.be\/?page_id=51217"},"modified":"2026-09-19T16:52:35","modified_gmt":"2026-09-19T15:52:35","slug":"cctv-academy-van-beeld-tot-intelligentie","status":"publish","type":"page","link":"https:\/\/cctvacademy.be\/fr\/cctv-academy-van-beeld-tot-intelligentie\/","title":{"rendered":"CCTV Academy \u2014 Van Beeld tot Intelligentie"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\n\r\nCCTV Academy | Van Beeld tot Intelligentie<\/title>\r\n\r\n<style>\r\n\r\n\/* ============================================================\r\n CCTV ACADEMY\r\n INTERACTIVE STEAMPUNK BROCHURE\r\n ============================================================ *\/\r\n\r\n:root {\r\n --bg: #070c0e;\r\n --bg-soft: #11191d;\r\n\r\n --metal: #1a2428;\r\n --metal-light: #344247;\r\n\r\n --copper: #bd6e2e;\r\n --copper-light: #f1ad56;\r\n --brass: #d5a23c;\r\n\r\n --red: #c91e24;\r\n --red-dark: #771015;\r\n\r\n --blue: #0077a5;\r\n --cyan: #27c9eb;\r\n\r\n --white: #fffdf7;\r\n --text: #f6eee1;\r\n --muted: #aeb9b6;\r\n\r\n --transition:\r\n 800ms cubic-bezier(.2,.75,.2,1);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n RESET\r\n ============================================================ *\/\r\n\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n scroll-behavior: smooth;\r\n scroll-snap-type: y mandatory;\r\n background: var(--bg);\r\n}\r\n\r\nbody {\r\n margin: 0;\r\n overflow-x: hidden;\r\n\r\n color: var(--text);\r\n\r\n font-family:\r\n \"Segoe UI\",\r\n Arial,\r\n Helvetica,\r\n sans-serif;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 12% 18%,\r\n rgba(193,112,48,.15),\r\n transparent 25%\r\n ),\r\n radial-gradient(\r\n circle at 86% 78%,\r\n rgba(0,110,150,.14),\r\n transparent 27%\r\n ),\r\n linear-gradient(\r\n 135deg,\r\n #060a0c 0%,\r\n #111a1e 48%,\r\n #070c0e 100%\r\n );\r\n}\r\n\r\n\r\n\/* ============================================================\r\n TECHNICAL GRID\r\n ============================================================ *\/\r\n\r\nbody::before {\r\n content: \"\";\r\n\r\n position: fixed;\r\n inset: 0;\r\n\r\n z-index: -5;\r\n pointer-events: none;\r\n\r\n opacity: .085;\r\n\r\n background-image:\r\n linear-gradient(\r\n rgba(255,255,255,.08) 1px,\r\n transparent 1px\r\n ),\r\n linear-gradient(\r\n 90deg,\r\n rgba(255,255,255,.08) 1px,\r\n transparent 1px\r\n );\r\n\r\n background-size: 42px 42px;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n VIGNETTE\r\n ============================================================ *\/\r\n\r\nbody::after {\r\n content: \"\";\r\n\r\n position: fixed;\r\n inset: 0;\r\n\r\n z-index: 5000;\r\n pointer-events: none;\r\n\r\n background:\r\n radial-gradient(\r\n ellipse at center,\r\n transparent 46%,\r\n rgba(0,0,0,.18) 73%,\r\n rgba(0,0,0,.62) 100%\r\n );\r\n}\r\n\r\n\r\n\/* ============================================================\r\n SCANLINES\r\n ============================================================ *\/\r\n\r\n.scanlines {\r\n position: fixed;\r\n inset: 0;\r\n\r\n z-index: 4900;\r\n pointer-events: none;\r\n\r\n opacity: .025;\r\n\r\n background:\r\n repeating-linear-gradient(\r\n 0deg,\r\n transparent 0,\r\n transparent 3px,\r\n #fff 4px\r\n );\r\n}\r\n\r\n\r\n\/* ============================================================\r\n AMBIENT LIGHT\r\n ============================================================ *\/\r\n\r\n.ambient-light {\r\n position: fixed;\r\n\r\n z-index: -3;\r\n\r\n width: 45vw;\r\n height: 45vw;\r\n\r\n top: 15%;\r\n left: 40%;\r\n\r\n border-radius: 50%;\r\n\r\n filter: blur(100px);\r\n\r\n opacity: .06;\r\n\r\n pointer-events: none;\r\n\r\n background: var(--copper-light);\r\n\r\n transition:\r\n transform 1.5s ease-out;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n PROGRESS BAR\r\n ============================================================ *\/\r\n\r\n.progress-track {\r\n position: fixed;\r\n\r\n z-index: 10000;\r\n\r\n top: 0;\r\n left: 0;\r\n\r\n width: 100%;\r\n height: 4px;\r\n\r\n background:\r\n rgba(255,255,255,.055);\r\n}\r\n\r\n.progress-bar {\r\n width: 0;\r\n height: 100%;\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n var(--red),\r\n var(--copper-light),\r\n var(--cyan)\r\n );\r\n\r\n box-shadow:\r\n 0 0 8px rgba(240,173,85,.8),\r\n 0 0 18px rgba(37,199,233,.25);\r\n\r\n transition:\r\n width .08s linear;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n HEADER\r\n ============================================================ *\/\r\n\r\n.topbar {\r\n position: fixed;\r\n\r\n z-index: 1500;\r\n\r\n top: 22px;\r\n left: 50%;\r\n\r\n transform:\r\n translateX(-50%);\r\n\r\n width:\r\n min(1180px,calc(100vw - 40px));\r\n\r\n min-height: 64px;\r\n\r\n padding: 8px 20px;\r\n\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n border:\r\n 1px solid rgba(213,162,60,.32);\r\n\r\n border-radius: 10px;\r\n\r\n overflow: hidden;\r\n\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(36,47,50,.95),\r\n rgba(8,14,16,.95)\r\n );\r\n\r\n box-shadow:\r\n 0 15px 40px rgba(0,0,0,.32),\r\n inset 0 1px rgba(255,255,255,.08);\r\n\r\n backdrop-filter: blur(16px);\r\n}\r\n\r\n\r\n\/* Subtiele lichtreflectie *\/\r\n\r\n.topbar::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: -100%;\r\n bottom: -100%;\r\n\r\n width: 80px;\r\n\r\n left: -150px;\r\n\r\n transform:\r\n rotate(18deg);\r\n\r\n pointer-events: none;\r\n\r\n opacity: .16;\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n transparent,\r\n rgba(255,255,255,.22),\r\n transparent\r\n );\r\n\r\n animation:\r\n metalReflection\r\n 11s ease-in-out infinite;\r\n}\r\n\r\n@keyframes metalReflection {\r\n 0%,\r\n 72% {\r\n left: -150px;\r\n }\r\n\r\n 100% {\r\n left: calc(100% + 150px);\r\n }\r\n}\r\n\r\n\r\n\/* ============================================================\r\n BRAND\r\n ============================================================ *\/\r\n\r\n.brand {\r\n display: flex;\r\n align-items: center;\r\n\r\n gap: 13px;\r\n}\r\n\r\n.shield {\r\n width: 29px;\r\n height: 33px;\r\n\r\n border:\r\n 2px solid #f2eadd;\r\n\r\n border-radius:\r\n 7px 7px 13px 13px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n var(--red) 0 47%,\r\n #fff 47% 57%,\r\n #076391 57%\r\n );\r\n\r\n box-shadow:\r\n 0 0 15px rgba(255,255,255,.12),\r\n inset 0 0 5px rgba(255,255,255,.15);\r\n}\r\n\r\n.brand-name {\r\n font-family:\r\n Georgia,\r\n \"Times New Roman\",\r\n serif;\r\n\r\n font-size: 18px;\r\n font-weight: 700;\r\n\r\n letter-spacing: .04em;\r\n}\r\n\r\n.brand-name span {\r\n color: var(--copper-light);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n HEADER TITLE\r\n ============================================================ *\/\r\n\r\n.header-title {\r\n font-family:\r\n Georgia,\r\n \"Times New Roman\",\r\n serif;\r\n\r\n font-size: 15px;\r\n\r\n letter-spacing: .06em;\r\n\r\n color: #e8dcc8;\r\n}\r\n\r\n.header-title strong {\r\n color: var(--copper-light);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n STATUS\r\n ============================================================ *\/\r\n\r\n.status {\r\n display: flex;\r\n align-items: center;\r\n\r\n gap: 10px;\r\n\r\n color: #b6c0bd;\r\n\r\n font-size: 9px;\r\n\r\n text-transform: uppercase;\r\n\r\n letter-spacing: .2em;\r\n}\r\n\r\n.status-light {\r\n width: 8px;\r\n height: 8px;\r\n\r\n border-radius: 50%;\r\n\r\n background: var(--cyan);\r\n\r\n box-shadow:\r\n 0 0 7px var(--cyan),\r\n 0 0 16px rgba(37,199,233,.5);\r\n\r\n animation:\r\n pulse 2s infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n 0%,\r\n 100% {\r\n opacity: .5;\r\n transform: scale(.9);\r\n }\r\n\r\n 50% {\r\n opacity: 1;\r\n transform: scale(1.2);\r\n }\r\n}\r\n\r\n\r\n\/* ============================================================\r\n SIDE NAVIGATION\r\n ============================================================ *\/\r\n\r\n.slide-nav {\r\n position: fixed;\r\n\r\n z-index: 1600;\r\n\r\n top: 50%;\r\n right: 28px;\r\n\r\n transform:\r\n translateY(-50%);\r\n\r\n display: flex;\r\n\r\n flex-direction: column;\r\n align-items: center;\r\n\r\n gap: 14px;\r\n}\r\n\r\n.slide-nav::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 15px;\r\n bottom: 15px;\r\n\r\n width: 1px;\r\n\r\n background:\r\n linear-gradient(\r\n transparent,\r\n rgba(213,162,60,.55),\r\n transparent\r\n );\r\n}\r\n\r\n.nav-dot {\r\n position: relative;\r\n\r\n z-index: 2;\r\n\r\n width: 14px;\r\n height: 14px;\r\n\r\n padding: 0;\r\n\r\n border-radius: 50%;\r\n\r\n border:\r\n 2px solid #806431;\r\n\r\n background: #131a1d;\r\n\r\n cursor: pointer;\r\n\r\n transition:\r\n .25s ease;\r\n}\r\n\r\n.nav-dot:hover {\r\n transform:\r\n scale(1.3);\r\n}\r\n\r\n.nav-dot.active {\r\n background:\r\n var(--copper-light);\r\n\r\n border-color:\r\n #ffe2a1;\r\n\r\n box-shadow:\r\n 0 0 0 5px rgba(213,162,60,.12),\r\n 0 0 15px rgba(240,173,85,.7);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n SLIDES\r\n ============================================================ *\/\r\n\r\n.slide {\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n min-height: 100vh;\r\n\r\n display: grid;\r\n\r\n place-items: center;\r\n\r\n padding:\r\n 115px\r\n clamp(25px,7vw,110px)\r\n 75px;\r\n\r\n scroll-snap-align: start;\r\n scroll-snap-stop: always;\r\n\r\n overflow: hidden;\r\n}\r\n\r\n.slide:nth-of-type(even) {\r\n background:\r\n radial-gradient(\r\n circle at 20% 50%,\r\n rgba(201,30,36,.075),\r\n transparent 31%\r\n );\r\n}\r\n\r\n.slide:nth-of-type(odd) {\r\n background:\r\n radial-gradient(\r\n circle at 80% 50%,\r\n rgba(0,106,147,.085),\r\n transparent 31%\r\n );\r\n}\r\n\r\n.slide::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n z-index: 0;\r\n\r\n width: 70%;\r\n height: 1px;\r\n\r\n left: 15%;\r\n top: 50%;\r\n\r\n opacity: .12;\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n transparent,\r\n var(--copper-light),\r\n transparent\r\n );\r\n\r\n box-shadow:\r\n 0 0 20px var(--copper);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n PIPES\r\n ============================================================ *\/\r\n\r\n.pipe {\r\n position: absolute;\r\n\r\n width: 8px;\r\n\r\n opacity: .48;\r\n\r\n pointer-events: none;\r\n\r\n border-left:\r\n 2px solid #875923;\r\n\r\n border-right:\r\n 2px solid #4e3015;\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n #4e2b14,\r\n #d18d40 45%,\r\n #67401d\r\n );\r\n\r\n box-shadow:\r\n 0 0 9px rgba(0,0,0,.7);\r\n}\r\n\r\n.pipe-left {\r\n left: 34px;\r\n\r\n top: 15%;\r\n bottom: 14%;\r\n}\r\n\r\n.pipe-right {\r\n right: 55px;\r\n\r\n top: 13%;\r\n\r\n height: 38%;\r\n}\r\n\r\n.pipe::before,\r\n.pipe::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n left: 50%;\r\n\r\n transform:\r\n translateX(-50%);\r\n\r\n width: 18px;\r\n height: 9px;\r\n\r\n border:\r\n 1px solid #be7b32;\r\n\r\n background:\r\n linear-gradient(\r\n #8a5523,\r\n #e2a253,\r\n #643a17\r\n );\r\n}\r\n\r\n.pipe::before {\r\n top: 15%;\r\n}\r\n\r\n.pipe::after {\r\n bottom: 17%;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n GEARS\r\n ============================================================ *\/\r\n\r\n.gear {\r\n position: absolute;\r\n\r\n pointer-events: none;\r\n\r\n border-radius: 50%;\r\n\r\n border:\r\n 9px dotted rgba(195,125,55,.30);\r\n\r\n box-shadow:\r\n inset 0 0 0 7px rgba(82,49,20,.32),\r\n 0 0 0 3px rgba(209,145,65,.07);\r\n\r\n animation:\r\n rotateGear\r\n 25s linear infinite;\r\n}\r\n\r\n.gear::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 29%;\r\n\r\n border-radius: 50%;\r\n\r\n border:\r\n 3px solid rgba(202,139,63,.35);\r\n}\r\n\r\n.gear-a {\r\n width: 190px;\r\n height: 190px;\r\n\r\n top: 17%;\r\n right: -78px;\r\n}\r\n\r\n.gear-b {\r\n width: 100px;\r\n height: 100px;\r\n\r\n bottom: 8%;\r\n left: -37px;\r\n\r\n animation-direction: reverse;\r\n\r\n animation-duration: 19s;\r\n}\r\n\r\n.gear-c {\r\n width: 72px;\r\n height: 72px;\r\n\r\n bottom: 26%;\r\n right: 5%;\r\n\r\n animation-duration: 16s;\r\n}\r\n\r\n@keyframes rotateGear {\r\n to {\r\n transform:\r\n rotate(360deg);\r\n }\r\n}\r\n\r\n\r\n\/* ============================================================\r\n CONTENT\r\n ============================================================ *\/\r\n\r\n.slide-inner {\r\n position: relative;\r\n\r\n z-index: 10;\r\n\r\n width:\r\n min(1200px,100%);\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n minmax(230px,.58fr)\r\n minmax(350px,1fr);\r\n\r\n align-items: center;\r\n\r\n gap:\r\n clamp(35px,6vw,100px);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n COPY\r\n ============================================================ *\/\r\n\r\n.slide-copy {\r\n opacity: 0;\r\n\r\n transform:\r\n translateX(-30px);\r\n\r\n transition:\r\n opacity var(--transition),\r\n transform var(--transition);\r\n}\r\n\r\n.slide.visible\r\n.slide-copy {\r\n opacity: 1;\r\n\r\n transform:\r\n translateX(0);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n EYEBROW\r\n ============================================================ *\/\r\n\r\n.eyebrow {\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n gap: 12px;\r\n\r\n margin-bottom: 18px;\r\n\r\n color:\r\n var(--copper-light);\r\n\r\n font-size: 10px;\r\n font-weight: 800;\r\n\r\n text-transform: uppercase;\r\n\r\n letter-spacing: .23em;\r\n}\r\n\r\n.eyebrow::before {\r\n content: \"\";\r\n\r\n width: 42px;\r\n height: 2px;\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n var(--red),\r\n var(--copper-light)\r\n );\r\n}\r\n\r\n\r\n\/* ============================================================\r\n PAGE NUMBER\r\n ============================================================ *\/\r\n\r\n.page-number {\r\n margin-bottom: 9px;\r\n\r\n font-family:\r\n Georgia,\r\n serif;\r\n\r\n font-size:\r\n clamp(70px,9vw,135px);\r\n\r\n font-weight: 700;\r\n\r\n line-height: .8;\r\n\r\n color: transparent;\r\n\r\n -webkit-text-stroke:\r\n 1px rgba(213,162,60,.42);\r\n\r\n opacity: .7;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n TITLES - WIT\r\n ============================================================ *\/\r\n\r\n.slide-copy h2 {\r\n margin: 0;\r\n\r\n max-width: 470px;\r\n\r\n font-family:\r\n Georgia,\r\n \"Times New Roman\",\r\n serif;\r\n\r\n font-size:\r\n clamp(32px,4vw,62px);\r\n\r\n font-weight: 700;\r\n\r\n line-height: .98;\r\n\r\n color:\r\n var(--white);\r\n\r\n text-shadow:\r\n 0 2px 4px rgba(0,0,0,.55),\r\n 0 0 24px rgba(255,255,255,.035);\r\n}\r\n\r\n.slide-copy h2 .accent {\r\n display: block;\r\n\r\n color:\r\n var(--copper-light);\r\n\r\n text-shadow:\r\n 0 2px 4px rgba(0,0,0,.6),\r\n 0 0 25px rgba(240,173,85,.09);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n DESCRIPTION\r\n ============================================================ *\/\r\n\r\n.slide-copy p {\r\n max-width: 420px;\r\n\r\n margin:\r\n 24px 0 0;\r\n\r\n color:\r\n var(--muted);\r\n\r\n font-size: 15px;\r\n\r\n line-height: 1.7;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n CCTV ACADEMY LINK\r\n ============================================================ *\/\r\n\r\n.course-link {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n\r\n gap: 10px;\r\n\r\n margin-top: 23px;\r\n\r\n padding:\r\n 9px 14px;\r\n\r\n border:\r\n 1px solid rgba(39,201,235,.30);\r\n\r\n border-radius:\r\n 100px;\r\n\r\n color:\r\n #8ce9f8;\r\n\r\n background:\r\n rgba(0,110,150,.09);\r\n\r\n font-size: 9px;\r\n\r\n font-weight: 800;\r\n\r\n letter-spacing: .17em;\r\n\r\n text-transform: uppercase;\r\n\r\n text-decoration: none;\r\n\r\n transition:\r\n color .25s ease,\r\n border-color .25s ease,\r\n background .25s ease,\r\n transform .25s ease,\r\n box-shadow .25s ease;\r\n}\r\n\r\n.course-link::before {\r\n content: \"\";\r\n\r\n width: 6px;\r\n height: 6px;\r\n\r\n flex:\r\n 0 0 6px;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n var(--cyan);\r\n\r\n box-shadow:\r\n 0 0 7px var(--cyan),\r\n 0 0 15px rgba(39,201,235,.35);\r\n}\r\n\r\n.course-link::after {\r\n content: \"\u2192\";\r\n\r\n margin-left: 3px;\r\n\r\n font-size: 13px;\r\n\r\n transition:\r\n transform .25s ease;\r\n}\r\n\r\n.course-link:hover {\r\n color:\r\n #d4faff;\r\n\r\n transform:\r\n translateY(-2px);\r\n\r\n border-color:\r\n rgba(39,201,235,.7);\r\n\r\n background:\r\n rgba(0,119,165,.18);\r\n\r\n box-shadow:\r\n 0 8px 22px rgba(0,0,0,.22),\r\n 0 0 18px rgba(39,201,235,.09);\r\n}\r\n\r\n.course-link:hover::after {\r\n transform:\r\n translateX(3px);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n DOWNLOAD BUTTON\r\n ============================================================ *\/\r\n\r\n.download-wrap {\r\n margin-top: 15px;\r\n}\r\n\r\n.download-button {\r\n appearance: none;\r\n\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n justify-content: center;\r\n\r\n gap: 11px;\r\n\r\n padding:\r\n 13px 18px;\r\n\r\n border:\r\n 1px solid rgba(240,173,85,.62);\r\n\r\n border-radius:\r\n 5px;\r\n\r\n color:\r\n #f9edda;\r\n\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n #3b3023,\r\n #171a1b\r\n );\r\n\r\n box-shadow:\r\n 0 8px 20px rgba(0,0,0,.25),\r\n inset 0 1px rgba(255,255,255,.09);\r\n\r\n font-family: inherit;\r\n\r\n font-size: 10px;\r\n font-weight: 800;\r\n\r\n letter-spacing: .13em;\r\n\r\n text-transform: uppercase;\r\n\r\n cursor: pointer;\r\n\r\n transition:\r\n .25s ease;\r\n}\r\n\r\n.download-button:hover {\r\n transform:\r\n translateY(-2px);\r\n\r\n color: #fff;\r\n\r\n border-color:\r\n var(--copper-light);\r\n\r\n box-shadow:\r\n 0 12px 28px rgba(0,0,0,.35),\r\n 0 0 18px rgba(240,173,85,.14);\r\n}\r\n\r\n.download-button:disabled {\r\n opacity: .55;\r\n\r\n cursor: wait;\r\n\r\n transform: none;\r\n}\r\n\r\n.download-icon {\r\n width: 21px;\r\n height: 21px;\r\n\r\n display: grid;\r\n\r\n place-items: center;\r\n\r\n flex:\r\n 0 0 21px;\r\n\r\n border-radius: 50%;\r\n\r\n color: white;\r\n\r\n background:\r\n var(--red);\r\n\r\n font-size: 13px;\r\n\r\n box-shadow:\r\n 0 0 12px rgba(201,30,36,.35);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n BROCHURE\r\n ============================================================ *\/\r\n\r\n.brochure-stage {\r\n position: relative;\r\n\r\n width:\r\n min(520px,72vh,100%);\r\n\r\n opacity: 0;\r\n\r\n transform:\r\n perspective(1200px)\r\n rotateY(6deg)\r\n translateY(45px)\r\n scale(.96);\r\n\r\n transition:\r\n opacity 900ms ease,\r\n transform 1000ms cubic-bezier(.18,.8,.2,1);\r\n\r\n will-change:\r\n transform;\r\n}\r\n\r\n.slide.visible\r\n.brochure-stage {\r\n opacity: 1;\r\n\r\n transform:\r\n perspective(1200px)\r\n rotateY(0)\r\n translateY(0)\r\n scale(1);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n GLOW\r\n ============================================================ *\/\r\n\r\n.brochure-stage::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n z-index: -2;\r\n\r\n inset: 8%;\r\n\r\n border-radius: 50%;\r\n\r\n opacity: .15;\r\n\r\n filter:\r\n blur(50px);\r\n\r\n background:\r\n radial-gradient(\r\n circle,\r\n rgba(240,173,85,.7),\r\n rgba(0,105,145,.15) 45%,\r\n transparent 72%\r\n );\r\n\r\n animation:\r\n posterGlow\r\n 6s ease-in-out infinite;\r\n}\r\n\r\n@keyframes posterGlow {\r\n 0%,\r\n 100% {\r\n opacity: .10;\r\n transform: scale(.96);\r\n }\r\n\r\n 50% {\r\n opacity: .18;\r\n transform: scale(1.03);\r\n }\r\n}\r\n\r\n\r\n\/* ============================================================\r\n POSTER SHADOW\r\n ============================================================ *\/\r\n\r\n.brochure-shadow {\r\n position: absolute;\r\n\r\n left: 7%;\r\n right: 7%;\r\n\r\n bottom: -30px;\r\n\r\n height: 50px;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n rgba(0,0,0,.75);\r\n\r\n filter:\r\n blur(21px);\r\n\r\n transform:\r\n scaleY(.55);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n METAL FRAME\r\n ============================================================ *\/\r\n\r\n.page-frame {\r\n position: relative;\r\n\r\n width: 100%;\r\n\r\n aspect-ratio:\r\n 1 \/ 1.41421356;\r\n\r\n padding: 9px;\r\n\r\n overflow: hidden;\r\n\r\n border-radius:\r\n 8px;\r\n\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n #4e3520,\r\n #d9a45a 12%,\r\n #62401e 28%,\r\n #e0ac60 45%,\r\n #67421e 67%,\r\n #c68d45 84%,\r\n #4a301a\r\n );\r\n\r\n box-shadow:\r\n 0 35px 60px rgba(0,0,0,.52),\r\n 0 6px 16px rgba(0,0,0,.45),\r\n 0 0 0 1px rgba(255,224,156,.22),\r\n inset 0 0 0 1px rgba(255,255,255,.24);\r\n}\r\n\r\n.page-frame::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 4px;\r\n\r\n z-index: 5;\r\n\r\n pointer-events: none;\r\n\r\n border:\r\n 1px solid rgba(40,22,8,.7);\r\n\r\n border-radius:\r\n 4px;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n LIGHT SWEEP\r\n ============================================================ *\/\r\n\r\n.page-frame::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n z-index: 20;\r\n\r\n pointer-events: none;\r\n\r\n top: -30%;\r\n bottom: -30%;\r\n\r\n left: -50%;\r\n\r\n width: 22%;\r\n\r\n opacity: .10;\r\n\r\n transform:\r\n rotate(14deg);\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n transparent,\r\n rgba(255,255,255,.7),\r\n transparent\r\n );\r\n\r\n animation:\r\n posterSweep\r\n 9s ease-in-out infinite;\r\n}\r\n\r\n@keyframes posterSweep {\r\n 0%,\r\n 65% {\r\n left: -50%;\r\n }\r\n\r\n 100% {\r\n left: 135%;\r\n }\r\n}\r\n\r\n\r\n\/* ============================================================\r\n POSTER IMAGE\r\n ============================================================ *\/\r\n\r\n.brochure-page {\r\n position: relative;\r\n\r\n width: 100%;\r\n height: 100%;\r\n\r\n overflow: hidden;\r\n\r\n border-radius: 2px;\r\n\r\n background-repeat:\r\n no-repeat;\r\n\r\n background-size:\r\n 200% 100%;\r\n\r\n background-color:\r\n #e7d6b6;\r\n\r\n box-shadow:\r\n inset 0 0 30px rgba(84,42,10,.12);\r\n}\r\n\r\n.brochure-page::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n pointer-events: none;\r\n\r\n background:\r\n linear-gradient(\r\n 100deg,\r\n rgba(255,255,255,.055),\r\n transparent 17%,\r\n transparent 80%,\r\n rgba(0,0,0,.06)\r\n );\r\n}\r\n\r\n\r\n\/* ============================================================\r\n RIVETS\r\n ============================================================ *\/\r\n\r\n.rivet {\r\n position: absolute;\r\n\r\n z-index: 30;\r\n\r\n width: 9px;\r\n height: 9px;\r\n\r\n border-radius: 50%;\r\n\r\n border:\r\n 1px solid #3d2917;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 35% 30%,\r\n #f5cf87,\r\n #8c5e29 48%,\r\n #2f2014 75%\r\n );\r\n\r\n box-shadow:\r\n 0 1px 2px #000,\r\n inset 0 0 2px rgba(255,255,255,.6);\r\n}\r\n\r\n.r1 {\r\n top: 8px;\r\n left: 8px;\r\n}\r\n\r\n.r2 {\r\n top: 8px;\r\n right: 8px;\r\n}\r\n\r\n.r3 {\r\n bottom: 8px;\r\n left: 8px;\r\n}\r\n\r\n.r4 {\r\n bottom: 8px;\r\n right: 8px;\r\n}\r\n\r\n\r\n\/* ============================================================\r\n PARTICLES\r\n ============================================================ *\/\r\n\r\n.particle {\r\n position: absolute;\r\n\r\n z-index: 1;\r\n\r\n width: 2px;\r\n height: 2px;\r\n\r\n border-radius: 50%;\r\n\r\n pointer-events: none;\r\n\r\n opacity: 0;\r\n\r\n background:\r\n var(--copper-light);\r\n\r\n box-shadow:\r\n 0 0 5px var(--copper-light);\r\n\r\n animation:\r\n particleFloat\r\n var(--particle-duration,9s)\r\n linear infinite;\r\n\r\n animation-delay:\r\n var(--particle-delay,0s);\r\n}\r\n\r\n@keyframes particleFloat {\r\n 0% {\r\n opacity: 0;\r\n\r\n transform:\r\n translateY(50px)\r\n translateX(0);\r\n }\r\n\r\n 20% {\r\n opacity: .22;\r\n }\r\n\r\n 70% {\r\n opacity: .08;\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n\r\n transform:\r\n translateY(-180px)\r\n translateX(25px);\r\n }\r\n}\r\n\r\n\r\n\/* ============================================================\r\n SLIDE FOOTER\r\n ============================================================ *\/\r\n\r\n.slide-footer {\r\n position: absolute;\r\n\r\n z-index: 20;\r\n\r\n left: 50%;\r\n bottom: 20px;\r\n\r\n transform:\r\n translateX(-50%);\r\n\r\n width:\r\n min(1150px,calc(100% - 80px));\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n color:\r\n rgba(255,255,255,.36);\r\n\r\n font-size: 9px;\r\n font-weight: 600;\r\n\r\n letter-spacing: .2em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.scroll-hint {\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n gap: 10px;\r\n}\r\n\r\n.mouse {\r\n position: relative;\r\n\r\n width: 19px;\r\n height: 29px;\r\n\r\n border:\r\n 1px solid rgba(255,255,255,.38);\r\n\r\n border-radius:\r\n 12px;\r\n}\r\n\r\n.mouse::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 6px;\r\n left: 50%;\r\n\r\n width: 2px;\r\n height: 5px;\r\n\r\n border-radius: 5px;\r\n\r\n background:\r\n var(--copper-light);\r\n\r\n transform:\r\n translateX(-50%);\r\n\r\n animation:\r\n mouseWheel\r\n 1.6s infinite;\r\n}\r\n\r\n@keyframes mouseWheel {\r\n 0% {\r\n opacity: 0;\r\n\r\n transform:\r\n translate(-50%,-3px);\r\n }\r\n\r\n 35% {\r\n opacity: 1;\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n\r\n transform:\r\n translate(-50%,8px);\r\n }\r\n}\r\n\r\n\r\n\/* ============================================================\r\n COPYRIGHT\r\n ============================================================ *\/\r\n\r\n.academy-copyright {\r\n position: relative;\r\n\r\n z-index: 100;\r\n\r\n padding:\r\n 0 40px 32px;\r\n\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(7,12,14,0),\r\n #070c0e 30%\r\n );\r\n}\r\n\r\n.copyright-line {\r\n width:\r\n min(1180px,100%);\r\n\r\n height: 1px;\r\n\r\n margin:\r\n 0 auto 24px;\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n transparent,\r\n rgba(213,162,60,.45),\r\n rgba(39,201,235,.22),\r\n transparent\r\n );\r\n}\r\n\r\n.copyright-inner {\r\n width:\r\n min(1180px,100%);\r\n\r\n margin:\r\n 0 auto;\r\n\r\n display: flex;\r\n\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n gap: 25px;\r\n\r\n color:\r\n rgba(255,255,255,.42);\r\n\r\n font-size: 9px;\r\n font-weight: 600;\r\n\r\n letter-spacing: .12em;\r\n\r\n text-transform: uppercase;\r\n}\r\n\r\n.copyright-brand {\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n gap: 10px;\r\n}\r\n\r\n.copyright-brand strong {\r\n color:\r\n rgba(255,255,255,.72);\r\n}\r\n\r\n.copyright-separator {\r\n margin:\r\n 0 7px;\r\n\r\n color:\r\n var(--copper-light);\r\n}\r\n\r\n.copyright-shield {\r\n width: 18px;\r\n height: 21px;\r\n\r\n display:\r\n inline-block;\r\n\r\n flex:\r\n 0 0 auto;\r\n\r\n border:\r\n 1px solid rgba(255,255,255,.7);\r\n\r\n border-radius:\r\n 4px 4px 8px 8px;\r\n\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n var(--red) 0 47%,\r\n #fff 47% 57%,\r\n #076391 57%\r\n );\r\n\r\n box-shadow:\r\n 0 0 10px rgba(255,255,255,.08);\r\n}\r\n\r\n.copyright-link {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n\r\n gap: 7px;\r\n\r\n color:\r\n #79dced;\r\n\r\n text-decoration: none;\r\n\r\n transition:\r\n color .25s ease,\r\n transform .25s ease;\r\n}\r\n\r\n.copyright-link span {\r\n color:\r\n var(--copper-light);\r\n\r\n transition:\r\n transform .25s ease;\r\n}\r\n\r\n.copyright-link:hover {\r\n color:\r\n #d1f8ff;\r\n\r\n transform:\r\n translateY(-1px);\r\n}\r\n\r\n.copyright-link:hover span {\r\n transform:\r\n translateX(3px);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n DOWNLOAD STATUS\r\n ============================================================ *\/\r\n\r\n.download-status {\r\n position: fixed;\r\n\r\n z-index: 20000;\r\n\r\n left: 50%;\r\n bottom: 28px;\r\n\r\n transform:\r\n translate(-50%,30px);\r\n\r\n padding:\r\n 13px 20px;\r\n\r\n border:\r\n 1px solid rgba(240,173,85,.45);\r\n\r\n border-radius:\r\n 6px;\r\n\r\n background:\r\n rgba(12,17,19,.97);\r\n\r\n color:\r\n #f3e5ce;\r\n\r\n font-size:\r\n 12px;\r\n\r\n box-shadow:\r\n 0 15px 40px rgba(0,0,0,.45);\r\n\r\n opacity: 0;\r\n\r\n visibility: hidden;\r\n\r\n transition:\r\n .3s ease;\r\n}\r\n\r\n.download-status.show {\r\n opacity: 1;\r\n\r\n visibility: visible;\r\n\r\n transform:\r\n translate(-50%,0);\r\n}\r\n\r\n.download-status.success {\r\n border-color:\r\n rgba(39,201,235,.6);\r\n}\r\n\r\n.download-status.error {\r\n border-color:\r\n rgba(201,30,36,.8);\r\n}\r\n\r\n\r\n\/* ============================================================\r\n RESPONSIVE\r\n ============================================================ *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n html {\r\n scroll-snap-type:\r\n y proximity;\r\n }\r\n\r\n .topbar {\r\n top: 12px;\r\n\r\n width:\r\n calc(100vw - 24px);\r\n\r\n min-height:\r\n 54px;\r\n }\r\n\r\n .header-title,\r\n .status {\r\n display: none;\r\n }\r\n\r\n .slide-nav {\r\n right: 9px;\r\n }\r\n\r\n .slide {\r\n min-height:\r\n 100svh;\r\n\r\n padding:\r\n 90px\r\n 32px\r\n 65px;\r\n }\r\n\r\n .slide-inner {\r\n grid-template-columns:\r\n 1fr;\r\n\r\n gap:\r\n 30px;\r\n }\r\n\r\n .slide-copy {\r\n width:\r\n min(520px,100%);\r\n\r\n margin:\r\n 0 auto;\r\n\r\n text-align:\r\n center;\r\n }\r\n\r\n .eyebrow {\r\n justify-content:\r\n center;\r\n }\r\n\r\n .slide-copy h2,\r\n .slide-copy p {\r\n margin-left:\r\n auto;\r\n\r\n margin-right:\r\n auto;\r\n }\r\n\r\n .page-number {\r\n position:\r\n absolute;\r\n\r\n top:\r\n -10px;\r\n\r\n left:\r\n 50%;\r\n\r\n transform:\r\n translateX(-50%);\r\n\r\n opacity:\r\n .16;\r\n\r\n z-index:\r\n -1;\r\n }\r\n\r\n .brochure-stage {\r\n width:\r\n min(450px,75vw);\r\n\r\n margin:\r\n 0 auto;\r\n }\r\n\r\n .pipe {\r\n display: none;\r\n }\r\n\r\n .gear-a {\r\n right: -120px;\r\n }\r\n\r\n .gear-b {\r\n left: -70px;\r\n }\r\n\r\n .slide-footer {\r\n width:\r\n calc(100% - 50px);\r\n\r\n justify-content:\r\n center;\r\n }\r\n\r\n .slide-footer > span:first-child {\r\n display: none;\r\n }\r\n\r\n .copyright-inner {\r\n flex-direction:\r\n column;\r\n\r\n justify-content:\r\n center;\r\n\r\n text-align:\r\n center;\r\n\r\n gap:\r\n 12px;\r\n }\r\n}\r\n\r\n\r\n@media (max-width: 560px) {\r\n\r\n .slide {\r\n padding:\r\n 80px\r\n 27px\r\n 60px;\r\n }\r\n\r\n .slide-inner {\r\n gap:\r\n 20px;\r\n }\r\n\r\n .slide-copy h2 {\r\n font-size:\r\n clamp(27px,8.5vw,40px);\r\n }\r\n\r\n .slide-copy p {\r\n margin-top:\r\n 13px;\r\n\r\n font-size:\r\n 13px;\r\n\r\n line-height:\r\n 1.55;\r\n }\r\n\r\n .eyebrow {\r\n margin-bottom:\r\n 10px;\r\n\r\n font-size:\r\n 8px;\r\n }\r\n\r\n .course-link {\r\n margin-top:\r\n 14px;\r\n }\r\n\r\n .download-wrap {\r\n margin-top:\r\n 11px;\r\n }\r\n\r\n .download-button {\r\n padding:\r\n 11px 14px;\r\n\r\n font-size:\r\n 9px;\r\n }\r\n\r\n .brochure-stage {\r\n width:\r\n min(385px,78vw);\r\n }\r\n\r\n .slide-nav {\r\n right: 6px;\r\n\r\n gap:\r\n 10px;\r\n }\r\n\r\n .nav-dot {\r\n width: 11px;\r\n height: 11px;\r\n }\r\n\r\n .academy-copyright {\r\n padding:\r\n 5px 25px 28px;\r\n }\r\n\r\n .copyright-brand {\r\n flex-direction:\r\n column;\r\n }\r\n\r\n .copyright-separator {\r\n display: none;\r\n }\r\n}\r\n\r\n\r\n\/* ============================================================\r\n REDUCED MOTION\r\n ============================================================ *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n html {\r\n scroll-behavior:\r\n auto;\r\n }\r\n\r\n *,\r\n *::before,\r\n *::after {\r\n animation-duration:\r\n .001ms !important;\r\n\r\n animation-iteration-count:\r\n 1 !important;\r\n\r\n transition-duration:\r\n .001ms !important;\r\n }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<!-- ============================================================\r\n ATMOSPHERE\r\n ============================================================ -->\r\n\r\n<div class=\"scanlines\"><\/div>\r\n\r\n<div\r\n class=\"ambient-light\"\r\n id=\"ambientLight\">\r\n<\/div>\r\n\r\n\r\n<!-- ============================================================\r\n PROGRESS\r\n ============================================================ -->\r\n\r\n<div class=\"progress-track\">\r\n\r\n <div\r\n class=\"progress-bar\"\r\n id=\"progressBar\">\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- ============================================================\r\n HEADER\r\n ============================================================ -->\r\n\r\n<header class=\"topbar\">\r\n\r\n <div class=\"brand\">\r\n\r\n <div class=\"shield\"><\/div>\r\n\r\n <div class=\"brand-name\">\r\n CCTV\r\n <span>ACADEMY<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"header-title\">\r\n\r\n Van Beeld tot\r\n <strong>Intelligentie<\/strong>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"status\">\r\n\r\n <span class=\"status-light\"><\/span>\r\n\r\n Interactieve brochure\r\n\r\n <\/div>\r\n\r\n<\/header>\r\n\r\n\r\n<!-- ============================================================\r\n NAVIGATION\r\n ============================================================ -->\r\n\r\n<nav\r\n class=\"slide-nav\"\r\n aria-label=\"Brochurepagina's\">\r\n\r\n <button\r\n class=\"nav-dot active\"\r\n data-target=\"slide-1\"\r\n aria-label=\"Pagina 1\">\r\n <\/button>\r\n\r\n <button\r\n class=\"nav-dot\"\r\n data-target=\"slide-2\"\r\n aria-label=\"Pagina 2\">\r\n <\/button>\r\n\r\n <button\r\n class=\"nav-dot\"\r\n data-target=\"slide-3\"\r\n aria-label=\"Pagina 3\">\r\n <\/button>\r\n\r\n <button\r\n class=\"nav-dot\"\r\n data-target=\"slide-4\"\r\n aria-label=\"Pagina 4\">\r\n <\/button>\r\n\r\n<\/nav>\r\n\r\n\r\n<!-- ============================================================\r\n SLIDE 01\r\n VOORBLAD\r\n ============================================================ -->\r\n\r\n<section\r\n class=\"slide visible\"\r\n id=\"slide-1\">\r\n\r\n <div class=\"pipe pipe-left\"><\/div>\r\n <div class=\"pipe pipe-right\"><\/div>\r\n\r\n <div class=\"gear gear-a\"><\/div>\r\n <div class=\"gear gear-b\"><\/div>\r\n\r\n <span\r\n class=\"particle\"\r\n style=\"\r\n left:12%;\r\n bottom:12%;\r\n --particle-delay:0s;\r\n --particle-duration:10s;\r\n \">\r\n <\/span>\r\n\r\n <span\r\n class=\"particle\"\r\n style=\"\r\n left:19%;\r\n bottom:7%;\r\n --particle-delay:3s;\r\n --particle-duration:12s;\r\n \">\r\n <\/span>\r\n\r\n <span\r\n class=\"particle\"\r\n style=\"\r\n right:16%;\r\n bottom:15%;\r\n --particle-delay:6s;\r\n --particle-duration:11s;\r\n \">\r\n <\/span>\r\n\r\n\r\n <div class=\"slide-inner\">\r\n\r\n\r\n <div class=\"slide-copy\">\r\n\r\n\r\n <div class=\"eyebrow\">\r\n CCTV Academy\r\n <\/div>\r\n\r\n\r\n <div class=\"page-number\">\r\n 01\r\n <\/div>\r\n\r\n\r\n <h2>\r\n\r\n Van Beeld tot\r\n\r\n <span class=\"accent\">\r\n Intelligentie.\r\n <\/span>\r\n\r\n <\/h2>\r\n\r\n\r\n <p>\r\n\r\n Ontdek CCTV Academy en bouw stap voor stap\r\n praktijkgerichte kennis op rond camerabewaking,\r\n netwerken en intelligente beveiligingstechnologie.\r\n\r\n <\/p>\r\n\r\n\r\n <a\r\n class=\"course-link\"\r\n href=\"https:\/\/cctvacademy.be\/\"\r\n aria-label=\"Ga naar CCTV Academy\">\r\n\r\n Ontdek CCTV Academy\r\n\r\n <\/a>\r\n\r\n\r\n <div class=\"download-wrap\">\r\n\r\n <button\r\n type=\"button\"\r\n class=\"download-button\"\r\n data-image=\"\/wp-content\/uploads\/2026\/09\/CCTV_Academy_A3_liggend_folder-wkb260919-scaled.png\"\r\n data-side=\"right\"\r\n data-filename=\"CCTV-Academy-Voorblad.jpg\">\r\n\r\n <span class=\"download-icon\">\r\n \u2193\r\n <\/span>\r\n\r\n Download affiche als JPEG\r\n\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"brochure-stage\">\r\n\r\n\r\n <div class=\"brochure-shadow\"><\/div>\r\n\r\n\r\n <div class=\"page-frame\">\r\n\r\n\r\n <span class=\"rivet r1\"><\/span>\r\n <span class=\"rivet r2\"><\/span>\r\n <span class=\"rivet r3\"><\/span>\r\n <span class=\"rivet r4\"><\/span>\r\n\r\n\r\n <div\r\n class=\"brochure-page\"\r\n role=\"img\"\r\n aria-label=\"CCTV Academy voorblad\"\r\n style=\"\r\n background-image:\r\n url('\/wp-content\/uploads\/2026\/09\/CCTV_Academy_A3_liggend_folder-wkb260919-scaled.png');\r\n\r\n background-position:\r\n right center;\r\n \">\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"slide-footer\">\r\n\r\n <span>\r\n CCTV Academy \u00b7 01 \/ 04\r\n <\/span>\r\n\r\n\r\n <div class=\"scroll-hint\">\r\n\r\n <div class=\"mouse\"><\/div>\r\n\r\n <span>\r\n Scroll om te ontdekken\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ============================================================\r\n SLIDE 02\r\n CAMERA'S & BEELDKWALITEIT\r\n ============================================================ -->\r\n\r\n<section\r\n class=\"slide\"\r\n id=\"slide-2\">\r\n\r\n <div class=\"pipe pipe-left\"><\/div>\r\n\r\n <div class=\"gear gear-a\"><\/div>\r\n <div class=\"gear gear-c\"><\/div>\r\n\r\n\r\n <span\r\n class=\"particle\"\r\n style=\"\r\n left:14%;\r\n bottom:10%;\r\n --particle-delay:2s;\r\n --particle-duration:12s;\r\n \">\r\n <\/span>\r\n\r\n <span\r\n class=\"particle\"\r\n style=\"\r\n right:20%;\r\n bottom:8%;\r\n --particle-delay:5s;\r\n --particle-duration:10s;\r\n \">\r\n <\/span>\r\n\r\n\r\n <div class=\"slide-inner\">\r\n\r\n\r\n <div class=\"slide-copy\">\r\n\r\n\r\n <div class=\"eyebrow\">\r\n Camera fundamentals\r\n <\/div>\r\n\r\n\r\n <div class=\"page-number\">\r\n 02\r\n <\/div>\r\n\r\n\r\n <h2>\r\n\r\n Camera's &\r\n\r\n <span class=\"accent\">\r\n beeldkwaliteit.\r\n <\/span>\r\n\r\n <\/h2>\r\n\r\n\r\n <p>\r\n\r\n Sensoren, lenzen, kijkhoek, licht,\r\n contrast en scherpte. Begrijp welke\r\n technische elementen samen bepalen\r\n wat een camerasysteem werkelijk ziet.\r\n\r\n <\/p>\r\n\r\n\r\n <a\r\n class=\"course-link\"\r\n href=\"https:\/\/cctvacademy.be\/\"\r\n aria-label=\"Ga naar CCTV Academy\">\r\n\r\n Bekijk opleiding CCTV Basis\r\n\r\n <\/a>\r\n\r\n\r\n <div class=\"download-wrap\">\r\n\r\n <button\r\n type=\"button\"\r\n class=\"download-button\"\r\n data-image=\"\/wp-content\/uploads\/2026\/09\/CCTV_Academy_A3_liggend_folder-wkb260919-scaled.png\"\r\n data-side=\"left\"\r\n data-filename=\"CCTV-Academy-Cameras-Beeldkwaliteit.jpg\">\r\n\r\n <span class=\"download-icon\">\r\n \u2193\r\n <\/span>\r\n\r\n Download affiche als JPEG\r\n\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"brochure-stage\">\r\n\r\n\r\n <div class=\"brochure-shadow\"><\/div>\r\n\r\n\r\n <div class=\"page-frame\">\r\n\r\n\r\n <span class=\"rivet r1\"><\/span>\r\n <span class=\"rivet r2\"><\/span>\r\n <span class=\"rivet r3\"><\/span>\r\n <span class=\"rivet r4\"><\/span>\r\n\r\n\r\n <div\r\n class=\"brochure-page\"\r\n role=\"img\"\r\n aria-label=\"CCTV camera's en beeldkwaliteit\"\r\n style=\"\r\n background-image:\r\n url('\/wp-content\/uploads\/2026\/09\/CCTV_Academy_A3_liggend_folder-wkb260919-scaled.png');\r\n\r\n background-position:\r\n left center;\r\n \">\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"slide-footer\">\r\n\r\n <span>\r\n CCTV Academy \u00b7 02 \/ 04\r\n <\/span>\r\n\r\n\r\n <div class=\"scroll-hint\">\r\n\r\n <div class=\"mouse\"><\/div>\r\n\r\n <span>\r\n Scroll verder\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ============================================================\r\n SLIDE 03\r\n NETWERKEN VOOR CCTV\r\n ============================================================ -->\r\n\r\n<section\r\n class=\"slide\"\r\n id=\"slide-3\">\r\n\r\n <div class=\"pipe pipe-right\"><\/div>\r\n\r\n <div class=\"gear gear-a\"><\/div>\r\n <div class=\"gear gear-b\"><\/div>\r\n\r\n\r\n <span\r\n class=\"particle\"\r\n style=\"\r\n left:10%;\r\n bottom:14%;\r\n --particle-delay:1s;\r\n --particle-duration:11s;\r\n \">\r\n <\/span>\r\n\r\n <span\r\n class=\"particle\"\r\n style=\"\r\n left:25%;\r\n bottom:6%;\r\n --particle-delay:6s;\r\n --particle-duration:13s;\r\n \">\r\n <\/span>\r\n\r\n\r\n <div class=\"slide-inner\">\r\n\r\n\r\n <div class=\"slide-copy\">\r\n\r\n\r\n <div class=\"eyebrow\">\r\n IP & Networking\r\n <\/div>\r\n\r\n\r\n <div class=\"page-number\">\r\n 03\r\n <\/div>\r\n\r\n\r\n <h2>\r\n\r\n Netwerken\r\n\r\n <span class=\"accent\">\r\n voor CCTV.\r\n <\/span>\r\n\r\n <\/h2>\r\n\r\n\r\n <p>\r\n\r\n Van IP-adressen en subnetten tot PoE,\r\n switches, bandbreedte en praktische\r\n configuratie. Ontdek de netwerkbasis\r\n achter moderne camerasystemen.\r\n\r\n <\/p>\r\n\r\n\r\n <a\r\n class=\"course-link\"\r\n href=\"https:\/\/cctvacademy.be\/\"\r\n aria-label=\"Ga naar CCTV Academy\">\r\n\r\n Bekijk opleiding IP & Netwerken\r\n\r\n <\/a>\r\n\r\n\r\n <div class=\"download-wrap\">\r\n\r\n <button\r\n type=\"button\"\r\n class=\"download-button\"\r\n data-image=\"\/wp-content\/uploads\/2026\/09\/CCTV_Academy_binnenkant_A3_liggend_300dpi-wkb260919-scaled.png\"\r\n data-side=\"left\"\r\n data-filename=\"CCTV-Academy-Netwerken-voor-CCTV.jpg\">\r\n\r\n <span class=\"download-icon\">\r\n \u2193\r\n <\/span>\r\n\r\n Download affiche als JPEG\r\n\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"brochure-stage\">\r\n\r\n\r\n <div class=\"brochure-shadow\"><\/div>\r\n\r\n\r\n <div class=\"page-frame\">\r\n\r\n\r\n <span class=\"rivet r1\"><\/span>\r\n <span class=\"rivet r2\"><\/span>\r\n <span class=\"rivet r3\"><\/span>\r\n <span class=\"rivet r4\"><\/span>\r\n\r\n\r\n <div\r\n class=\"brochure-page\"\r\n role=\"img\"\r\n aria-label=\"Netwerken voor CCTV\"\r\n style=\"\r\n background-image:\r\n url('\/wp-content\/uploads\/2026\/09\/CCTV_Academy_binnenkant_A3_liggend_300dpi-wkb260919-scaled.png');\r\n\r\n background-position:\r\n left center;\r\n \">\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"slide-footer\">\r\n\r\n <span>\r\n CCTV Academy \u00b7 03 \/ 04\r\n <\/span>\r\n\r\n\r\n <div class=\"scroll-hint\">\r\n\r\n <div class=\"mouse\"><\/div>\r\n\r\n <span>\r\n Scroll verder\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ============================================================\r\n SLIDE 04\r\n OPLEIDINGSTRAJECTEN\r\n ============================================================ -->\r\n\r\n<section\r\n class=\"slide\"\r\n id=\"slide-4\">\r\n\r\n <div class=\"pipe pipe-left\"><\/div>\r\n <div class=\"pipe pipe-right\"><\/div>\r\n\r\n <div class=\"gear gear-a\"><\/div>\r\n <div class=\"gear gear-c\"><\/div>\r\n\r\n\r\n <span\r\n class=\"particle\"\r\n style=\"\r\n left:16%;\r\n bottom:8%;\r\n --particle-delay:3s;\r\n --particle-duration:12s;\r\n \">\r\n <\/span>\r\n\r\n <span\r\n class=\"particle\"\r\n style=\"\r\n right:13%;\r\n bottom:12%;\r\n --particle-delay:7s;\r\n --particle-duration:10s;\r\n \">\r\n <\/span>\r\n\r\n\r\n <div class=\"slide-inner\">\r\n\r\n\r\n <div class=\"slide-copy\">\r\n\r\n\r\n <div class=\"eyebrow\">\r\n Learning path\r\n <\/div>\r\n\r\n\r\n <div class=\"page-number\">\r\n 04\r\n <\/div>\r\n\r\n\r\n <h2>\r\n\r\n E\u00e9n logisch\r\n\r\n <span class=\"accent\">\r\n groeipad.\r\n <\/span>\r\n\r\n <\/h2>\r\n\r\n\r\n <p>\r\n\r\n Start waar jouw kennis begint:\r\n van CCTV-basis naar AI CCTV en verder\r\n naar geavanceerde toepassingen zoals\r\n MD, IVS en SMD.\r\n\r\n <\/p>\r\n\r\n\r\n <a\r\n class=\"course-link\"\r\n href=\"https:\/\/cctvacademy.be\/\"\r\n aria-label=\"Ga naar CCTV Academy\">\r\n\r\n Bekijk opleidingen AI CCTV\r\n\r\n <\/a>\r\n\r\n\r\n <div class=\"download-wrap\">\r\n\r\n <button\r\n type=\"button\"\r\n class=\"download-button\"\r\n data-image=\"\/wp-content\/uploads\/2026\/09\/CCTV_Academy_binnenkant_A3_liggend_300dpi-wkb260919-scaled.png\"\r\n data-side=\"right\"\r\n data-filename=\"CCTV-Academy-Opleidingstrajecten.jpg\">\r\n\r\n <span class=\"download-icon\">\r\n \u2193\r\n <\/span>\r\n\r\n Download affiche als JPEG\r\n\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"brochure-stage\">\r\n\r\n\r\n <div class=\"brochure-shadow\"><\/div>\r\n\r\n\r\n <div class=\"page-frame\">\r\n\r\n\r\n <span class=\"rivet r1\"><\/span>\r\n <span class=\"rivet r2\"><\/span>\r\n <span class=\"rivet r3\"><\/span>\r\n <span class=\"rivet r4\"><\/span>\r\n\r\n\r\n <div\r\n class=\"brochure-page\"\r\n role=\"img\"\r\n aria-label=\"CCTV Academy opleidingstrajecten\"\r\n style=\"\r\n background-image:\r\n url('\/wp-content\/uploads\/2026\/09\/CCTV_Academy_binnenkant_A3_liggend_300dpi-wkb260919-scaled.png');\r\n\r\n background-position:\r\n right center;\r\n \">\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"slide-footer\">\r\n\r\n <span>\r\n CCTV Academy \u00b7 04 \/ 04\r\n <\/span>\r\n\r\n <span>\r\n RAS | AIS Academy\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ============================================================\r\n COPYRIGHT\r\n ============================================================ -->\r\n\r\n<footer class=\"academy-copyright\">\r\n\r\n\r\n <div class=\"copyright-line\"><\/div>\r\n\r\n\r\n <div class=\"copyright-inner\">\r\n\r\n\r\n <div class=\"copyright-brand\">\r\n\r\n <span class=\"copyright-shield\"><\/span>\r\n\r\n <span>\r\n\r\n <strong>CCTV Academy<\/strong>\r\n\r\n <span class=\"copyright-separator\">\r\n |\r\n <\/span>\r\n\r\n RAS \u00b7 AIS Academy\r\n\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"copyright-text\">\r\n\r\n \u00a9\r\n <span id=\"copyrightYear\"><\/span>\r\n\r\n CCTV Academy \u00b7 Alle rechten voorbehouden.\r\n\r\n <\/div>\r\n\r\n\r\n <a\r\n href=\"https:\/\/cctvacademy.be\/\"\r\n class=\"copyright-link\"\r\n aria-label=\"Ga naar de homepage van CCTV Academy\">\r\n\r\n cctvacademy.be\r\n\r\n <span>\r\n \u2192\r\n <\/span>\r\n\r\n <\/a>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n<\/footer>\r\n\r\n\r\n<!-- ============================================================\r\n DOWNLOAD STATUS\r\n ============================================================ -->\r\n\r\n<div\r\n class=\"download-status\"\r\n id=\"downloadStatus\"\r\n role=\"status\"\r\n aria-live=\"polite\">\r\n\r\n Affiche wordt voorbereid...\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\n\r\n\/* ============================================================\r\n ELEMENTS\r\n ============================================================ *\/\r\n\r\nconst slides =\r\n [...document.querySelectorAll('.slide')];\r\n\r\nconst dots =\r\n [...document.querySelectorAll('.nav-dot')];\r\n\r\nconst progressBar =\r\n document.getElementById('progressBar');\r\n\r\nconst downloadStatus =\r\n document.getElementById('downloadStatus');\r\n\r\nconst ambientLight =\r\n document.getElementById('ambientLight');\r\n\r\nconst reduceMotion =\r\n window.matchMedia(\r\n '(prefers-reduced-motion: reduce)'\r\n ).matches;\r\n\r\n\r\n\/* ============================================================\r\n COPYRIGHT YEAR\r\n ============================================================ *\/\r\n\r\ndocument.getElementById(\r\n 'copyrightYear'\r\n).textContent =\r\n new Date().getFullYear();\r\n\r\n\r\n\/* ============================================================\r\n SLIDE OBSERVER\r\n ============================================================ *\/\r\n\r\nconst observer =\r\n new IntersectionObserver(\r\n\r\n entries => {\r\n\r\n entries.forEach(\r\n entry => {\r\n\r\n if (!entry.isIntersecting) {\r\n return;\r\n }\r\n\r\n\r\n entry.target\r\n .classList\r\n .add('visible');\r\n\r\n\r\n const currentId =\r\n entry.target.id;\r\n\r\n\r\n dots.forEach(\r\n dot => {\r\n\r\n dot.classList.toggle(\r\n\r\n 'active',\r\n\r\n dot.dataset.target ===\r\n currentId\r\n\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n },\r\n\r\n {\r\n threshold: .55\r\n }\r\n );\r\n\r\n\r\nslides.forEach(\r\n slide => {\r\n\r\n observer.observe(\r\n slide\r\n );\r\n\r\n }\r\n);\r\n\r\n\r\n\/* ============================================================\r\n DOT NAVIGATION\r\n ============================================================ *\/\r\n\r\ndots.forEach(\r\n dot => {\r\n\r\n dot.addEventListener(\r\n 'click',\r\n () => {\r\n\r\n const target =\r\n document.getElementById(\r\n dot.dataset.target\r\n );\r\n\r\n\r\n if (!target) {\r\n return;\r\n }\r\n\r\n\r\n target.scrollIntoView({\r\n\r\n behavior:\r\n 'smooth',\r\n\r\n block:\r\n 'start'\r\n\r\n });\r\n\r\n }\r\n );\r\n\r\n }\r\n);\r\n\r\n\r\n\/* ============================================================\r\n SCROLL PROGRESS\r\n ============================================================ *\/\r\n\r\nfunction updateProgress() {\r\n\r\n const scrollTop =\r\n\r\n window.scrollY ||\r\n\r\n document.documentElement.scrollTop;\r\n\r\n\r\n const maxScroll =\r\n\r\n document.documentElement.scrollHeight -\r\n\r\n window.innerHeight;\r\n\r\n\r\n const progress =\r\n\r\n maxScroll > 0\r\n\r\n ? (scrollTop \/ maxScroll) * 100\r\n\r\n : 0;\r\n\r\n\r\n progressBar.style.width =\r\n\r\n Math.min(\r\n\r\n 100,\r\n\r\n Math.max(\r\n 0,\r\n progress\r\n )\r\n\r\n ) + '%';\r\n}\r\n\r\n\r\nwindow.addEventListener(\r\n\r\n 'scroll',\r\n\r\n updateProgress,\r\n\r\n {\r\n passive: true\r\n }\r\n\r\n);\r\n\r\n\r\nupdateProgress();\r\n\r\n\r\n\/* ============================================================\r\n KEYBOARD NAVIGATION\r\n ============================================================ *\/\r\n\r\nfunction getCurrentSlideIndex() {\r\n\r\n let closest =\r\n 0;\r\n\r\n let distance =\r\n Infinity;\r\n\r\n\r\n slides.forEach(\r\n (slide,index) => {\r\n\r\n const currentDistance =\r\n\r\n Math.abs(\r\n\r\n slide\r\n .getBoundingClientRect()\r\n .top\r\n\r\n );\r\n\r\n\r\n if (\r\n currentDistance < distance\r\n ) {\r\n\r\n distance =\r\n currentDistance;\r\n\r\n closest =\r\n index;\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n return closest;\r\n}\r\n\r\n\r\nfunction goToSlide(index) {\r\n\r\n const safeIndex =\r\n\r\n Math.max(\r\n\r\n 0,\r\n\r\n Math.min(\r\n slides.length - 1,\r\n index\r\n )\r\n\r\n );\r\n\r\n\r\n slides[safeIndex]\r\n .scrollIntoView({\r\n\r\n behavior:\r\n 'smooth',\r\n\r\n block:\r\n 'start'\r\n\r\n });\r\n}\r\n\r\n\r\nwindow.addEventListener(\r\n 'keydown',\r\n event => {\r\n\r\n const current =\r\n getCurrentSlideIndex();\r\n\r\n\r\n if (\r\n event.key === 'ArrowDown' ||\r\n event.key === 'PageDown'\r\n ) {\r\n\r\n event.preventDefault();\r\n\r\n goToSlide(\r\n current + 1\r\n );\r\n }\r\n\r\n\r\n if (\r\n event.key === 'ArrowUp' ||\r\n event.key === 'PageUp'\r\n ) {\r\n\r\n event.preventDefault();\r\n\r\n goToSlide(\r\n current - 1\r\n );\r\n }\r\n\r\n\r\n if (\r\n event.key === 'Home'\r\n ) {\r\n\r\n event.preventDefault();\r\n\r\n goToSlide(0);\r\n }\r\n\r\n\r\n if (\r\n event.key === 'End'\r\n ) {\r\n\r\n event.preventDefault();\r\n\r\n goToSlide(\r\n slides.length - 1\r\n );\r\n }\r\n\r\n }\r\n);\r\n\r\n\r\n\/* ============================================================\r\n DOWNLOAD STATUS\r\n ============================================================ *\/\r\n\r\nlet statusTimer;\r\n\r\n\r\nfunction showStatus(\r\n message,\r\n type = ''\r\n) {\r\n\r\n clearTimeout(\r\n statusTimer\r\n );\r\n\r\n\r\n downloadStatus.textContent =\r\n message;\r\n\r\n\r\n downloadStatus.className =\r\n 'download-status show';\r\n\r\n\r\n if (type) {\r\n\r\n downloadStatus\r\n .classList\r\n .add(type);\r\n }\r\n\r\n\r\n statusTimer =\r\n setTimeout(\r\n () => {\r\n\r\n downloadStatus\r\n .classList\r\n .remove('show');\r\n\r\n },\r\n\r\n 2800\r\n );\r\n}\r\n\r\n\r\n\/* ============================================================\r\n IMAGE CACHE\r\n ============================================================ *\/\r\n\r\nconst imageCache =\r\n new Map();\r\n\r\n\r\n\/* ============================================================\r\n LOAD IMAGE\r\n\r\n De afbeeldingen worden relatief geladen zodat ze op\r\n cctvacademy.be same-origin zijn.\r\n ============================================================ *\/\r\n\r\nfunction loadImage(url) {\r\n\r\n if (\r\n imageCache.has(url)\r\n ) {\r\n\r\n return Promise.resolve(\r\n imageCache.get(url)\r\n );\r\n }\r\n\r\n\r\n return new Promise(\r\n (resolve,reject) => {\r\n\r\n const image =\r\n new Image();\r\n\r\n\r\n image.onload =\r\n () => {\r\n\r\n imageCache.set(\r\n url,\r\n image\r\n );\r\n\r\n\r\n resolve(\r\n image\r\n );\r\n };\r\n\r\n\r\n image.onerror =\r\n () => {\r\n\r\n reject(\r\n\r\n new Error(\r\n 'Afbeelding kon niet geladen worden.'\r\n )\r\n\r\n );\r\n\r\n };\r\n\r\n\r\n image.src =\r\n url;\r\n\r\n }\r\n );\r\n}\r\n\r\n\r\n\/* ============================================================\r\n JPEG DOWNLOAD\r\n\r\n De originele A3-afbeelding bevat twee verticale pagina's.\r\n\r\n We nemen:\r\n - links = pagina links\r\n - rechts = pagina rechts\r\n\r\n Daarna wordt uitsluitend die pagina als hoogwaardige\r\n JPEG gedownload.\r\n ============================================================ *\/\r\n\r\nasync function downloadPosterJPEG(\r\n imageURL,\r\n side,\r\n filename,\r\n button\r\n) {\r\n\r\n const originalHTML =\r\n button.innerHTML;\r\n\r\n\r\n try {\r\n\r\n\r\n button.disabled =\r\n true;\r\n\r\n\r\n button.innerHTML =\r\n\r\n '<span class=\"download-icon\">\u2026<\/span>' +\r\n\r\n 'JPEG wordt gemaakt';\r\n\r\n\r\n showStatus(\r\n 'Affiche wordt voorbereid...'\r\n );\r\n\r\n\r\n const image =\r\n await loadImage(\r\n imageURL\r\n );\r\n\r\n\r\n const fullWidth =\r\n image.naturalWidth;\r\n\r\n\r\n const fullHeight =\r\n image.naturalHeight;\r\n\r\n\r\n if (\r\n !fullWidth ||\r\n !fullHeight\r\n ) {\r\n\r\n throw new Error(\r\n 'Ongeldige afbeeldingsafmetingen.'\r\n );\r\n }\r\n\r\n\r\n \/*\r\n * Iedere pagina is exact de helft\r\n * van de horizontale A3-afbeelding.\r\n *\/\r\n\r\n const sourceWidth =\r\n\r\n Math.floor(\r\n fullWidth \/ 2\r\n );\r\n\r\n\r\n const sourceHeight =\r\n fullHeight;\r\n\r\n\r\n const sourceX =\r\n\r\n side === 'right'\r\n\r\n ? fullWidth - sourceWidth\r\n\r\n : 0;\r\n\r\n\r\n \/*\r\n * Canvas krijgt de originele\r\n * resolutie van \u00e9\u00e9n affichepagina.\r\n *\/\r\n\r\n const canvas =\r\n document.createElement(\r\n 'canvas'\r\n );\r\n\r\n\r\n canvas.width =\r\n sourceWidth;\r\n\r\n\r\n canvas.height =\r\n sourceHeight;\r\n\r\n\r\n const context =\r\n canvas.getContext(\r\n '2d',\r\n {\r\n alpha: false\r\n }\r\n );\r\n\r\n\r\n if (!context) {\r\n\r\n throw new Error(\r\n 'Canvas wordt niet ondersteund.'\r\n );\r\n }\r\n\r\n\r\n \/*\r\n * Witte achtergrond.\r\n *\/\r\n\r\n context.fillStyle =\r\n '#ffffff';\r\n\r\n\r\n context.fillRect(\r\n\r\n 0,\r\n 0,\r\n\r\n canvas.width,\r\n canvas.height\r\n\r\n );\r\n\r\n\r\n \/*\r\n * De juiste helft van de bron\r\n * naar het canvas kopi\u00ebren.\r\n *\/\r\n\r\n context.drawImage(\r\n\r\n image,\r\n\r\n sourceX,\r\n 0,\r\n\r\n sourceWidth,\r\n sourceHeight,\r\n\r\n 0,\r\n 0,\r\n\r\n sourceWidth,\r\n sourceHeight\r\n\r\n );\r\n\r\n\r\n \/*\r\n * JPEG op hoge kwaliteit.\r\n *\/\r\n\r\n const blob =\r\n await new Promise(\r\n (resolve,reject) => {\r\n\r\n canvas.toBlob(\r\n\r\n result => {\r\n\r\n if (result) {\r\n\r\n resolve(\r\n result\r\n );\r\n\r\n } else {\r\n\r\n reject(\r\n\r\n new Error(\r\n 'JPEG kon niet worden aangemaakt.'\r\n )\r\n\r\n );\r\n }\r\n\r\n },\r\n\r\n 'image\/jpeg',\r\n\r\n .98\r\n\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/*\r\n * Tijdelijke download URL.\r\n *\/\r\n\r\n const blobURL =\r\n URL.createObjectURL(\r\n blob\r\n );\r\n\r\n\r\n const link =\r\n document.createElement(\r\n 'a'\r\n );\r\n\r\n\r\n link.href =\r\n blobURL;\r\n\r\n\r\n link.download =\r\n filename;\r\n\r\n\r\n document.body\r\n .appendChild(\r\n link\r\n );\r\n\r\n\r\n link.click();\r\n\r\n\r\n link.remove();\r\n\r\n\r\n \/*\r\n * Geheugen vrijgeven.\r\n *\/\r\n\r\n setTimeout(\r\n () => {\r\n\r\n URL.revokeObjectURL(\r\n blobURL\r\n );\r\n\r\n },\r\n\r\n 2000\r\n );\r\n\r\n\r\n showStatus(\r\n\r\n 'JPEG-download gestart \u2713',\r\n\r\n 'success'\r\n\r\n );\r\n\r\n }\r\n\r\n catch(error) {\r\n\r\n\r\n console.error(\r\n 'CCTV Academy JPEG download:',\r\n error\r\n );\r\n\r\n\r\n showStatus(\r\n\r\n 'JPEG kon niet worden aangemaakt.',\r\n\r\n 'error'\r\n\r\n );\r\n\r\n }\r\n\r\n finally {\r\n\r\n\r\n button.disabled =\r\n false;\r\n\r\n\r\n button.innerHTML =\r\n originalHTML;\r\n\r\n }\r\n}\r\n\r\n\r\n\/* ============================================================\r\n DOWNLOAD BUTTONS\r\n ============================================================ *\/\r\n\r\ndocument\r\n .querySelectorAll(\r\n '.download-button'\r\n )\r\n .forEach(\r\n button => {\r\n\r\n button.addEventListener(\r\n 'click',\r\n () => {\r\n\r\n downloadPosterJPEG(\r\n\r\n button.dataset.image,\r\n\r\n button.dataset.side,\r\n\r\n button.dataset.filename,\r\n\r\n button\r\n\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n\/* ============================================================\r\n PRELOAD\r\n ============================================================ *\/\r\n\r\nwindow.addEventListener(\r\n 'load',\r\n () => {\r\n\r\n const sources = [\r\n\r\n '\/wp-content\/uploads\/2026\/09\/CCTV_Academy_A3_liggend_folder-wkb260919-scaled.png',\r\n\r\n '\/wp-content\/uploads\/2026\/09\/CCTV_Academy_binnenkant_A3_liggend_300dpi-wkb260919-scaled.png'\r\n\r\n ];\r\n\r\n\r\n sources.forEach(\r\n source => {\r\n\r\n loadImage(source)\r\n .catch(\r\n error => {\r\n\r\n console.warn(\r\n 'Preload:',\r\n error.message\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n);\r\n\r\n\r\n\/* ============================================================\r\n SUBTLE MOUSE PARALLAX\r\n ============================================================ *\/\r\n\r\nif (\r\n !reduceMotion &&\r\n window.innerWidth > 900\r\n) {\r\n\r\n document.addEventListener(\r\n 'mousemove',\r\n event => {\r\n\r\n const x =\r\n\r\n (\r\n event.clientX \/\r\n window.innerWidth\r\n ) - .5;\r\n\r\n\r\n const y =\r\n\r\n (\r\n event.clientY \/\r\n window.innerHeight\r\n ) - .5;\r\n\r\n\r\n \/*\r\n * Zeer subtiele beweging\r\n * van de achtergrondgloed.\r\n *\/\r\n\r\n ambientLight.style.transform =\r\n\r\n `translate(\r\n ${x * 25}px,\r\n ${y * 18}px\r\n )`;\r\n\r\n\r\n \/*\r\n * Lichte 3D-reactie op de affiche.\r\n *\/\r\n\r\n document\r\n .querySelectorAll(\r\n '.slide.visible .brochure-stage'\r\n )\r\n .forEach(\r\n stage => {\r\n\r\n const rect =\r\n stage.getBoundingClientRect();\r\n\r\n\r\n if (\r\n rect.bottom > 0 &&\r\n rect.top < window.innerHeight\r\n ) {\r\n\r\n stage.style.transform =\r\n\r\n `perspective(1200px)\r\n rotateY(${x * 1.25}deg)\r\n rotateX(${y * -1}deg)\r\n translateY(0)\r\n scale(1)`;\r\n }\r\n\r\n }\r\n );\r\n\r\n },\r\n\r\n {\r\n passive: true\r\n }\r\n );\r\n\r\n\r\n document.addEventListener(\r\n 'mouseleave',\r\n () => {\r\n\r\n document\r\n .querySelectorAll(\r\n '.brochure-stage'\r\n )\r\n .forEach(\r\n stage => {\r\n\r\n stage.style.transform =\r\n '';\r\n\r\n }\r\n );\r\n\r\n }\r\n );\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CCTV Academy | Van Beeld tot Intelligentie CCTV ACADEMY Van Beeld tot Intelligentie Interactieve brochure CCTV Academy 01 Van Beeld tot Intelligentie. Ontdek CCTV Academy en bouw stap voor stap praktijkgerichte kennis op rond camerabewaking, netwerken en intelligente beveiligingstechnologie. Ontdek CCTV Academy \u2193 Download affiche als JPEG CCTV Academy \u00b7 01 \/ 04 Scroll om […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"zakra_page_container_layout":"customizer","zakra_page_sidebar_layout":"customizer","zakra_remove_content_margin":false,"zakra_sidebar":"customizer","zakra_transparent_header":"customizer","zakra_logo":0,"zakra_main_header_style":"default","zakra_menu_item_color":"","zakra_menu_item_hover_color":"","zakra_menu_item_active_color":"","zakra_menu_active_style":"","zakra_page_header":true,"h5ap_radio_sources":[],"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"class_list":["post-51217","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CCTV Academy \u2014 Van Beeld tot Intelligentie - RAS\/AIS CCTV Academy<\/title>\n<meta name=\"description\" content=\"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cctvacademy.be\/fr\/cctv-academy-van-beeld-tot-intelligentie\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie\" \/>\n<meta property=\"og:description\" content=\"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cctvacademy.be\/fr\/cctv-academy-van-beeld-tot-intelligentie\/\" \/>\n<meta property=\"og:site_name\" content=\"RAS\/AIS CCTV Academy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61576769152561\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-19T15:52:35+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cctvacademy.be\\\/cctv-academy-van-beeld-tot-intelligentie\\\/\",\"url\":\"https:\\\/\\\/cctvacademy.be\\\/cctv-academy-van-beeld-tot-intelligentie\\\/\",\"name\":\"CCTV Academy \u2014 Van Beeld tot Intelligentie - RAS\\\/AIS CCTV Academy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cctvacademy.be\\\/#website\"},\"datePublished\":\"2026-09-19T14:53:35+00:00\",\"dateModified\":\"2026-09-19T15:52:35+00:00\",\"description\":\"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cctvacademy.be\\\/cctv-academy-van-beeld-tot-intelligentie\\\/#breadcrumb\"},\"inLanguage\":\"fr-BE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cctvacademy.be\\\/cctv-academy-van-beeld-tot-intelligentie\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cctvacademy.be\\\/cctv-academy-van-beeld-tot-intelligentie\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/cctvacademy.be\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CCTV Academy \u2014 Van Beeld tot Intelligentie\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cctvacademy.be\\\/#website\",\"url\":\"https:\\\/\\\/cctvacademy.be\\\/\",\"name\":\"CCTV Academy\",\"description\":\"CCTV Opleidingen en CCTV Micro Learning\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cctvacademy.be\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-BE\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CCTV Academy \u2014 Van Beeld tot Intelligentie - RAS\/AIS CCTV Academy","description":"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cctvacademy.be\/fr\/cctv-academy-van-beeld-tot-intelligentie\/","og_locale":"fr_FR","og_type":"article","og_title":"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie","og_description":"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie","og_url":"https:\/\/cctvacademy.be\/fr\/cctv-academy-van-beeld-tot-intelligentie\/","og_site_name":"RAS\/AIS CCTV Academy","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61576769152561","article_modified_time":"2026-09-19T15:52:35+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cctvacademy.be\/cctv-academy-van-beeld-tot-intelligentie\/","url":"https:\/\/cctvacademy.be\/cctv-academy-van-beeld-tot-intelligentie\/","name":"CCTV Academy \u2014 Van Beeld tot Intelligentie - RAS\/AIS CCTV Academy","isPartOf":{"@id":"https:\/\/cctvacademy.be\/#website"},"datePublished":"2026-09-19T14:53:35+00:00","dateModified":"2026-09-19T15:52:35+00:00","description":"Ontdek de technologie achter moderne camerabewakingCamera's \u00b7 Beeldkwaliteit \u00b7 IP-netwerken \u00b7 AI \u00b7 Slimme detectie","breadcrumb":{"@id":"https:\/\/cctvacademy.be\/cctv-academy-van-beeld-tot-intelligentie\/#breadcrumb"},"inLanguage":"fr-BE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cctvacademy.be\/cctv-academy-van-beeld-tot-intelligentie\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cctvacademy.be\/cctv-academy-van-beeld-tot-intelligentie\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cctvacademy.be\/"},{"@type":"ListItem","position":2,"name":"CCTV Academy \u2014 Van Beeld tot Intelligentie"}]},{"@type":"WebSite","@id":"https:\/\/cctvacademy.be\/#website","url":"https:\/\/cctvacademy.be\/","name":"CCTV Academy","description":"Formation \u00e0 la vid\u00e9osurveillance et micro-apprentissage de la vid\u00e9osurveillance","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cctvacademy.be\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-BE"}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cctvacademy.be\/fr\/wp-json\/wp\/v2\/pages\/51217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cctvacademy.be\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cctvacademy.be\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cctvacademy.be\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cctvacademy.be\/fr\/wp-json\/wp\/v2\/comments?post=51217"}],"version-history":[{"count":18,"href":"https:\/\/cctvacademy.be\/fr\/wp-json\/wp\/v2\/pages\/51217\/revisions"}],"predecessor-version":[{"id":51242,"href":"https:\/\/cctvacademy.be\/fr\/wp-json\/wp\/v2\/pages\/51217\/revisions\/51242"}],"wp:attachment":[{"href":"https:\/\/cctvacademy.be\/fr\/wp-json\/wp\/v2\/media?parent=51217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}