oefenhub_generiek_11_privacybeleid_V1_6.html
Korte beschrijving
Deze HTML-mockup toont de publieke vaste pagina Privacybeleid. De inhoud licht toe hoe OefenHub omgaat met gegevens, relaties, toegang en herleidbaarheid, zonder dat de pagina zelf gebruikergebonden records toont.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/generiek/oefenhub_generiek_11_privacybeleid_V1_6.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>OefenHub - Privacybeleid</title>
<link href="./oefenhub_shared_logo.css" rel="stylesheet">
<style>
:root {
--blue-1: #8fd0ff;
--blue-2: #5bb3ff;
--blue-3: #1f82e9;
--blue-4: #0d5db8;
--text: #114f95;
--muted: #5f7ea5;
--line: rgba(17,79,149,.12);
--orange-1: #ffbb4d;
--orange-2: #ff9620;
--green-1: #8adf67;
--green-2: #57ba3c;
--yellow-1: #ffd04e;
--yellow-2: #f6aa07;
--shadow: 0 12px 28px rgba(35, 100, 177, 0.12);
--shadow-soft: 0 8px 18px rgba(35, 100, 177, 0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: var(--text);
background:
radial-gradient(circle at 8% 14%, rgba(255,255,255,.68) 0 12%, transparent 13%),
radial-gradient(circle at 18% 10%, rgba(255,255,255,.45) 0 9%, transparent 10%),
radial-gradient(circle at 86% 17%, rgba(255,255,255,.58) 0 11%, transparent 12%),
linear-gradient(180deg, #7ec2f8 0%, #bfe2fd 15%, #edf7ff 34%, #f7fbff 100%);
min-height: 100vh;
}
.wrap { width: min(1220px, calc(100% - 30px)); margin: 0 auto; }
.header {
padding: 10px 0 12px;
background: linear-gradient(180deg, rgba(100,171,238,.92), rgba(120,192,248,.85));
border-bottom: 1px solid rgba(255,255,255,.38);
box-shadow: 0 8px 20px rgba(28, 100, 177, .08);
position: relative;
z-index: 5;
}
.header-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
}
.brand {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 250px;
}
.brand img {
display: block;
height: 46px;
width: auto;
max-width: 220px;
object-fit: contain;
filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
position: relative;
z-index: 2;
}
.header-center {
display:flex;
justify-content:center;
align-items:center;
}
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 120px; }
.menu-shell { position: relative; }
.menu-btn {
width: 42px;
height: 42px;
border-radius: 999px;
border: 0;
background: linear-gradient(180deg, #ffffff, #edf6ff);
box-shadow: var(--shadow-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--blue-4);
font-size: 18px;
font-weight: 900;
}
.menu-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 260px;
background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,250,255,.98));
border-radius: 20px;
box-shadow: 0 12px 24px rgba(35,100,177,.16);
border: 1px solid rgba(170, 204, 238, .55);
padding: 10px 12px;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.menu-shell.open .menu-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-list { display: grid; gap: 2px; }
.menu-link {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px;
padding: 10px 11px;
border-radius: 13px;
text-decoration: none;
color: #18518f;
font-size: 15px;
font-weight: 900;
box-shadow: inset 0 -1px 0 rgba(17,79,149,.10);
transition: background .18s ease, transform .18s ease;
}
.menu-link:last-child { box-shadow: none; }
.menu-link:hover { background: linear-gradient(180deg, #edf5ff, #dcecff); transform: translateX(2px); }
.menu-icon {
width: 23px; height: 23px; border-radius: 7px; display:grid; place-items:center;
color:#fff; font-size:14px; font-weight:900; box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 4px 8px rgba(0,0,0,.10);
}
.menu-icon.green { background: linear-gradient(180deg, #8add68, #4baa35); }
.menu-icon.orange { background: linear-gradient(180deg, #ffb558, #f97e18); }
main.wrap { padding: 24px 0 0; }
.page-shell {
background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.95));
border-radius: 34px;
box-shadow: var(--shadow);
overflow: hidden;
}
.page-content { padding: 24px 24px 28px; }
.breadcrumb {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 16px;
color: #5f7ea5;
font-size: 13px;
font-weight: 800;
}
.breadcrumb a { color: #1b5ca0; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.hero-card, .content-card, .side-card, .notice-card {
background: rgba(255,255,255,.92);
border: 1px solid rgba(17,79,149,.08);
border-radius: 24px;
box-shadow: var(--shadow-soft);
}
.hero-card { padding: 24px 26px; margin-bottom: 18px; }
.hero-title { margin: 0 0 10px; font-size: 30px; line-height: 1.1; color: #0d5db8; }
.hero-text { margin: 0; color: #315d91; font-size: 15px; line-height: 1.68; }
.hero-points {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(17,79,149,.10);
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
}
.point-box {
border-radius:18px;
padding:14px 14px 12px;
border:1px solid rgba(17,79,149,.08);
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,249,255,.95));
}
.point-box strong { display:block; color:#0d5db8; margin-bottom:6px; font-size:14px; }
.point-box p { margin:0; font-size:13px; line-height:1.5; color:#55789f; }
.content-layout {
display:grid;
grid-template-columns: minmax(0, 1.1fr) minmax(280px, .78fr);
gap: 18px;
align-items: start;
}
.content-stack { display:grid; gap: 18px; }
.content-grid-two { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.content-card { padding: 22px 24px; }
.section-title { margin: 0 0 10px; font-size: 22px; color: #0d5db8; }
.section-text { margin: 0; font-size: 15px; line-height: 1.7; color: #315d91; }
.section-text + .section-text { margin-top: 12px; }
.info-list { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.spaced-block { margin-top: 18px; }
.info-item {
border-radius: 18px;
background: linear-gradient(180deg, #fff, #f5faff);
border: 1px solid rgba(17,79,149,.09);
padding: 14px 15px;
}
.info-item strong { display:block; margin-bottom: 5px; color:#0d5db8; }
.info-item p { margin:0; font-size: 14px; line-height: 1.55; color:#56779f; }
.side-card { padding: 18px; display:grid; gap: 12px; align-content:start; }
.side-card h2 { margin: 0; font-size: 18px; color: #0d5db8; }
.mini-stat {
padding: 12px 14px;
border-radius: 16px;
background: #f7fbff;
border: 1px solid rgba(17,79,149,.08);
}
.mini-stat strong {
display:block; font-size:12px; color:#6b8bb2; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;
}
.mini-stat span { display:block; font-size:14px; line-height:1.5; font-weight:700; color:var(--text); }
.notice-card {
padding: 16px 18px;
background: linear-gradient(180deg, #fff8e7, #fff1ca);
border: 1px solid rgba(241, 186, 74, .34);
}
.notice-card h3 {
margin: 0 0 8px;
font-size: 18px;
color: #9a6400;
}
.notice-card p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #7a5d23;
}
.site-footer {
margin-top: 26px;
background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96));
border-top: 1px solid rgba(17,79,149,.10);
box-shadow: var(--shadow);
border-radius: 26px 26px 0 0;
padding: 0;
overflow: visible;
}
.site-footer > .wrap {
padding: 22px 28px 18px;
}
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 36px; align-items: start; padding: 0; }
.footer-col h4 {
margin: 0 0 12px; font-size: 15px; color: #0d5db8; font-weight: 900; padding-bottom: 8px; border-bottom: 1px solid rgba(17,79,149,.14);
}
.footer-col p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); font-weight: 600; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: #18518f; text-decoration: none; font-size: 13px; font-weight: 700; transition: color .18s ease; }
.footer-links a:hover { color: var(--blue-4); text-decoration: underline; }
.footer-bottom {
margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(17,79,149,.10); display: flex; justify-content: space-between; gap: 12px;
align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); font-weight: 600;
}
@media (max-width: 980px) {
.content-layout, .content-grid-two, .hero-points, .footer-grid, .info-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.wrap { width: min(100%, calc(100% - 18px)); }
.header-row { grid-template-columns: auto 1fr auto; }
.page-content { padding: 18px; }
.hero-title { font-size: 24px; }
.site-footer > .wrap { padding: 20px 18px 16px; }
.footer-bottom { justify-content: flex-start; }
}
.contact-info-card {
background: linear-gradient(180deg, rgba(225,240,255,.95), rgba(214,233,255,.95));
border: 1px solid rgba(79, 150, 225, .28);
border-radius: 24px;
box-shadow: var(--shadow-soft);
padding: 18px 22px;
}
.contact-info-card h3 { margin: 0 0 8px; font-size: 18px; color: #0d5db8; }
.contact-info-card p { margin: 0; font-size: 14px; line-height: 1.6; color: #315d91; }
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="header-row">
<div class="brand">
<div class="brand-logo" aria-label="OefenHub logo" role="img"></div>
</div>
<div class="header-center">
</div>
<div class="header-actions">
<div class="menu-shell" data-menu="">
<button aria-expanded="false" aria-label="Menu" class="menu-btn" type="button">☰</button>
<div class="menu-dropdown">
<div class="menu-list">
<a class="menu-link" href="#"><span class="menu-icon green">→</span><span>Inloggen</span></a>
<a class="menu-link" href="#"><span class="menu-icon orange">＋</span><span>Registreren</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="wrap">
<nav aria-label="Breadcrumb" class="breadcrumb">
<a href="#">Home</a>
<span>›</span>
<span>Privacybeleid</span>
</nav>
<section class="hero-card">
<h1 class="hero-title">Privacybeleid</h1>
<p class="hero-text">Op deze pagina lees je op hoofdlijnen hoe OefenHub omgaat met persoonsgegevens, relatiegebonden toegang en informatie die tijdens het oefenen wordt vastgelegd. Het doel is helderheid geven over wie welke informatie kan zien, hoe toegang werkt en wat er gebeurt wanneer rollen of relaties veranderen.</p>
<div class="hero-points">
<div class="point-box">
<strong>Alleen relevante toegang</strong>
<p>Informatie wordt zichtbaar gemaakt op basis van rol en actieve relatiecontext, zodat gebruikers alleen zien wat voor hun situatie bedoeld is.</p>
</div>
<div class="point-box">
<strong>Relatie bepaalt inzage</strong>
<p>Docenten, ouders en verzorgers krijgen alleen toegang tot leerlinginformatie zolang er een geldige koppeling bestaat.</p>
</div>
<div class="point-box">
<strong>Duidelijke herleidbaarheid</strong>
<p>Belangrijke acties en wijzigingen worden waar nodig vastgelegd, zodat zichtbaar blijft wat er is aangepast en door wie.</p>
</div>
</div>
</section>
<div class="content-layout">
<section class="content-stack">
<div class="content-grid-two">
<article class="content-card">
<h2 class="section-title">Welke informatie wordt gebruikt</h2>
<p class="section-text">OefenHub gebruikt gegevens die nodig zijn om accounts te laten werken, rollen toe te kennen, relaties tussen gebruikers te beheren en oefenresultaten zichtbaar te maken. Denk hierbij aan profielgegevens, rolinformatie, relatiekoppelingen, oefenconfiguraties en voortgangs- of resultaatinformatie.</p>
<p class="section-text">Niet iedere gebruiker ziet dezelfde informatie. De omgeving is juist zo ingericht dat leerling, docent, ouder of beheerder elk alleen die onderdelen te zien krijgen die passen bij hun rol en relatie tot andere gebruikers.</p>
</article>
<article class="content-card">
<h2 class="section-title">Wie kan welke informatie zien</h2>
<p class="section-text">Leerlingen werken in hun eigen omgeving. Docenten kunnen leerlinginformatie alleen inzien wanneer er een geldige docent-leerlingrelatie bestaat. Ouders en verzorgers kunnen informatie van hun kind alleen inzien wanneer er een geldige ouder/voogd-leerlingrelatie actief is.</p>
<p class="section-text">Beheerders hebben beheerrechten waar dat voor beheer en ondersteuning noodzakelijk is, maar ook daar blijft de toegang gekoppeld aan de functionele verantwoordelijkheden van die rol.</p>
</article>
</div>
</section>
<aside class="content-stack">
<div class="side-card">
<h2>Privacy in het kort</h2>
<div class="mini-stat">
<strong>Toegang</strong>
<span>Rol- en relatiegestuurd</span>
</div>
<div class="mini-stat">
<strong>Leerlinginformatie</strong>
<span>Alleen zichtbaar bij geldige koppeling</span>
</div>
<div class="mini-stat">
<strong>Na ontkoppelen</strong>
<span>Toegang vervalt direct</span>
</div>
</div>
<article class="notice-card">
<h3>Toegang vervalt direct</h3>
<p>Wanneer een docent-leerlingrelatie of ouder/voogd-leerlingrelatie wordt verbroken, vervalt de toegang van die docent, ouder of verzorger per direct. Vanaf dat moment kan die gebruiker de informatie van de betreffende leerling niet langer inzien via OefenHub.</p>
</article>
</aside>
</div>
<article class="content-card spaced-block">
<h2 class="section-title">Berichten, meldingen en historie</h2>
<p class="section-text">OefenHub kan systeemberichten, privéberichten en meldingen gebruiken om gebruikers te informeren over relevante gebeurtenissen. Daarnaast kan historie worden vastgelegd voor onderdelen zoals wijzigingen, relatiebeheer of resultaten, zodat acties later beter te herleiden zijn.</p>
<div class="info-list">
<div class="info-item">
<strong>Resultaten en voortgang</strong>
<p>Oefenresultaten en voortgang worden gebruikt om leerlingen, docenten en waar passend ouders/verzorgers inzicht te geven in het oefenproces.</p>
</div>
<div class="info-item">
<strong>Meldingen en tickets</strong>
<p>Wanneer een gebruiker een probleem meldt, wordt die informatie gebruikt voor opvolging door beheerders en om de status van het ticket te volgen.</p>
</div>
<div class="info-item">
<strong>Wijzigingsgeschiedenis</strong>
<p>Voor onderdelen die beheerd of aangepast kunnen worden, kan historie worden vastgelegd om aanpassingen en verantwoordelijken terug te zien.</p>
</div>
</div>
</article>
<article class="contact-info-card spaced-block"><h3>Vragen?</h3><p>Heb je vragen over privacy of over hoe OefenHub met gegevens omgaat? Neem dan contact op via de contactpagina. Daar vind je de juiste route om je vraag of verzoek in te dienen.</p></article>
</div>
</div>
</main>
<footer class="site-footer">
<div class="wrap">
<div class="footer-grid">
<div class="footer-col">
<h4>OefenHub</h4>
<p>OefenHub helpt kinderen spelenderwijs schoolvakken oefenen, herhalen en beter begrijpen. Alles overzichtelijk op één plek.</p>
</div>
<div class="footer-col">
<h4>Handige Links</h4>
<div class="footer-links">
<a href="#">Over OefenHub</a>
<a href="#">Contact</a>
<a href="#">Privacybeleid</a>
</div>
</div>
<div class="footer-col">
<h4>Starten</h4>
<div class="footer-links">
<a href="#">Inloggen</a>
<a href="#">Registreren</a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 OefenHub</span>
</div>
</div>
</footer>
<script>
(function () {
const menu = document.querySelector('[data-menu]');
const btn = menu?.querySelector('.menu-btn');
function setOpen(open) {
if (!menu || !btn) return;
menu.classList.toggle('open', open);
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
}
if (menu && btn) {
setOpen(false);
btn.addEventListener('click', function (event) {
event.preventDefault();
event.stopPropagation();
setOpen(!menu.classList.contains('open'));
});
document.addEventListener('click', function (event) {
if (!menu.contains(event.target)) setOpen(false);
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape') setOpen(false);
});
}
})();
</script>
</body>
</html>