oefenhub_docent_01_frontpage_v1_10.html
Korte beschrijving
Mockup van de docent-frontpage met het hoofdmenu, samenvattingsblokken en directe ingangen naar oefenaanbod, leerlingen en online-overzicht.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/docent/oefenhub_docent_01_frontpage_v1_10.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>OefenHub - Docent FrontPage</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;
--orange-3: #f87400;
--green-1: #8adf67;
--green-2: #57ba3c;
--green-3: #2c9348;
--yellow-1: #ffd04e;
--yellow-2: #f6aa07;
--red-soft: #fde4e4;
--red-text: #b74d4d;
--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: 1;
}
.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; }
.welcome-text {
font-size: 12px;
color: rgba(17,79,149,.82);
font-weight: 700;
margin-top: -10px;
margin-left: 53px;
}
.nav-pills {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: nowrap;
white-space: nowrap;
}
.nav-item { position: relative; display: inline-flex; align-items: center; }
.pill {
border: 0;
border-radius: 12px;
padding: 9px 14px;
color: #fff;
font-size: 13px;
font-weight: 900;
box-shadow: var(--shadow-soft);
line-height: 1;
cursor: pointer;
flex: 0 0 auto;
}
.pill.orange { background: linear-gradient(180deg, #ffbb4d, #ff7f12); }
.pill.blue { background: linear-gradient(180deg, #2f88ea, #176acc); }
.pill.yellow { background: linear-gradient(180deg, #ffd04d, #f4ab08); }
.pill.green { background: linear-gradient(180deg, #8adf67, #58ba3d); }
.pill.purple { background: linear-gradient(180deg, #BF67DF, #863DBA); }
.pill.has-chevron { display: inline-flex; align-items: center; gap: 6px; padding-right: 14px; }
.pill-caret { font-size: 12px; line-height: 1; transform: translateY(1px); }
.dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 306px;
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;
z-index: 40;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.dropdown-menu::before {
content: "";
position: absolute;
top: -10px;
left: 36px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(255,255,255,.97);
filter: drop-shadow(0 -1px 0 rgba(170, 204, 238, .45));
}
.dropdown-menu.align-right { left: auto; right: 0; width: 306px; }
.dropdown-menu.align-right::before { left: auto; right: 20px; }
.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu,
.nav-item.open .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.menu-list { display: flex; flex-direction: column; gap: 0; }
.menu-link {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 9px;
padding: 8px 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,
.menu-link.is-active { background: linear-gradient(180deg, #edf5ff, #dcecff); }
.menu-link:hover { 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.blue { background: linear-gradient(180deg, #49a4ff, #1f7fe2); }
.menu-icon.yellow { background: linear-gradient(180deg, #ffd45a, #f0b000); color: #8a5d00; }
.menu-icon.purple { background: linear-gradient(180deg, #8d6cff, #6147d8); }
.menu-icon.red { background: linear-gradient(180deg, #ff9a9a, #ea6767); }
.menu-arrow { color: #18518f; font-size: 22px; line-height: 1; font-weight: 700; }
.menu-link.no-arrow { grid-template-columns: auto 1fr; }
.menu-link.no-arrow .menu-arrow { display: none; }
.pill-icon { font-size: 14px; line-height: 1; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 120px; }
.mail-btn, .profile-chip { border: 0; box-shadow: var(--shadow-soft); cursor: pointer; }
.mail-btn {
position: relative;
width: 40px;
height: 40px;
border-radius: 999px;
background: linear-gradient(180deg, #ffffff, #eef6ff);
color: var(--blue-4);
font-size: 17px;
}
.badge {
position: absolute;
right: -2px;
bottom: -2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #e23838;
color: #fff;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
.profile-nav { position: relative; }
.profile-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 999px;
background: linear-gradient(180deg, #ffffff, #edf6ff);
padding: 0;
}
.avatar {
width: 28px;
height: 28px;
border-radius: 999px;
display: grid;
place-items: center;
color: #fff;
font-size: 13px;
font-weight: 900;
background: linear-gradient(180deg, #ffb247, #ff8120);
}
main.page-main { padding: 14px 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; }
.page-hero {
display: grid; grid-template-columns: minmax(0, 1.2fr) 320px; gap: 18px; align-items: stretch;
margin-bottom: 18px;
}
.hero-card, .side-card, .form-card, .status-card, .info-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: 14px 24px 22px; }
.hero-title { margin: 0 0 10px; font-size: 20px; line-height: 1.15; color: #0d5db8; }
.hero-text { margin: 0; font-size: 15px; line-height: 1.6; max-width: 760px; }
.hero-guide { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(17,79,149,.12); }
.hero-guide h3 { margin: 0 0 10px; font-size: 16px; color: #0d5db8; }
.hero-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hero-guide-item { background: rgba(255,255,255,.58); border: 1px solid rgba(132, 186, 236, .35); border-radius: 14px; padding: 12px 14px; }
.hero-guide-item strong { display: block; margin-bottom: 4px; color: #0d5db8; font-size: 14px; }
.hero-guide-item p { margin: 0; font-size: 14px; color: #2f5f95; line-height: 1.45; }
.side-card { padding: 18px; display: grid; gap: 12px; align-content: start; }
.side-card h2, .form-card h2, .info-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: 13px; 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); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
.form-card { padding: 12px 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid.one-col { grid-template-columns: 1fr; }
.field, .field-full { display: grid; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label, .field-full label { font-size: 13px; font-weight: 900; color: #235790; }
.field input, .field select, .field textarea,
.field-full input, .field-full select, .field-full textarea {
width: 100%; border: 1px solid rgba(17,79,149,.14); background: rgba(255,255,255,.98);
border-radius: 16px; padding: 13px 14px; font: inherit; color: #134f92; box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
textarea { min-height: 138px; resize: vertical; }
.hint { font-size: 12px; line-height: 1.45; color: #6d88aa; margin-top: -2px; }
.segmented { display: flex; flex-wrap: wrap; gap: 10px; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px;
border-radius: 14px; border: 1px solid rgba(17,79,149,.12); background: #fff; font-size: 13px; font-weight: 800; color: #20538d; cursor: pointer;
box-shadow: var(--shadow-soft); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.segmented label:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(35,100,177,.14); border-color: rgba(47,143,236,.28); background: linear-gradient(180deg, #ffffff, #f3f8ff); }
.segmented input:checked + label { background: linear-gradient(180deg, #eef6ff, #dcecff); border-color: rgba(47,143,236,.34); color: #0d5db8; }
.segmented input:checked + label:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(35,100,177,.16); border-color: rgba(47,143,236,.40); }
.context-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.info-card { padding: 16px; }
.info-card h3 { margin: 0 0 8px; font-size: 15px; color: #0d5db8; }
.info-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text); }
.checkbox-list { display: grid; gap: 10px; }
.checkbox-item { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 13px; color: var(--text); }
.checkbox-item input { margin-top: 2px; accent-color: #2f8fec; }
.upload-box {
border: 2px dashed rgba(47,143,236,.28); border-radius: 20px; padding: 22px 18px; text-align: center;
background: linear-gradient(180deg, rgba(239,247,255,.8), rgba(255,255,255,.96)); color: #4872a8;
}
.upload-box strong { display: block; font-size: 14px; color: #0d5db8; margin-bottom: 6px; }
.form-actions {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px;
padding-top: 18px; border-top: 1px solid rgba(17,79,149,.10);
}
.btn-spacer { flex: 1 1 auto; }
.btn-row { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.btn {
border: 0; border-radius: 15px; min-height: 46px; padding: 0 18px; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer;
box-shadow: var(--shadow-soft);
}
.btn-primary { background: linear-gradient(180deg, #ffbc4b, #ff9621); color: #fff; }
.btn-secondary { background: linear-gradient(180deg, #eef6ff, #dcecff); color: #0d5db8; }
.status-stack { display: grid; gap: 14px; }
.status-card { padding: 10px 16px; }
.status-card h3 { margin: 0 0 12px; font-size: 16px; color: #0d5db8; }
.ticket-list { display: grid; gap: 10px; }
.ticket {
position: relative;
border-radius: 16px; border: 1px solid rgba(17,79,149,.08); background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,251,255,.96)); padding: 12px 13px;
box-shadow: var(--shadow-soft); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.ticket::after {
content: 'Bekijk melding'; position: absolute; right: 12px; bottom: 10px; font-size: 11px; font-weight: 900; letter-spacing: .02em;
color: #0d5db8; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease;
}
.ticket:hover, .ticket:focus-visible {
transform: translateY(-4px) scale(1.01); box-shadow: 0 18px 34px rgba(35,100,177,.22); border-color: rgba(47,143,236,.42);
background: linear-gradient(180deg, #ffffff, #eef6ff); outline: none;
}
.ticket:hover::after, .ticket:focus-visible::after { opacity: 1; transform: translateY(0); }
.ticket-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.ticket-title { margin: 0; font-size: 14px; font-weight: 900; color: #1f2f42; }
.ticket-date { font-size: 12px; color: #73859a; font-weight: 800; white-space: nowrap; }
.ticket-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.chip.orange { background: #fff0d8; color: #c27209; }
.chip.blue { background: #dceeff; color: #216ab9; }
.chip.green { background: #e3f7ea; color: #23804a; }
.ticket p { margin: 0; font-size: 13px; line-height: 1.5; color: #5d7087; }
.bullet-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bullet-list li {
position: relative; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--text);
}
.bullet-list li::before {
content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 999px;
background: linear-gradient(180deg, #5eb8ff, #2f8fec);
}
.modal-overlay {
position: fixed; inset: 0; background: rgba(18, 50, 88, .34); backdrop-filter: blur(3px);
display: none; align-items: center; justify-content: center; padding: 24px; z-index: 120;
}
.modal-overlay.open { display: flex; }
.modal-card {
width: min(560px, 100%); background: #fff; border-radius: 24px; padding: 22px;
box-shadow: 0 22px 44px rgba(13, 56, 110, .22); border: 1px solid rgba(17,79,149,.1);
}
.modal-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.modal-head h3 { margin: 0; font-size: 20px; color: #0d5db8; }
.modal-close { border: 0; background: #eef6ff; color: #0d5db8; width: 38px; height: 38px; border-radius: 999px; cursor: pointer; font-size: 20px; font-weight: 700; }
.modal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.modal-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--text); }
.modal-section-title { font-size: 12px; font-weight: 900; color: #6c89ad; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.site-footer {
margin-top: 30px;
width: 100%;
background: transparent;
padding: 0px;
overflow: visible;
}
.footer-inner {
width: 100%;
max-width: none;
margin: 0 auto;
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-bottom: 0;
border-radius: 28px 28px 0 0;
padding: 22px 24px 18px;
box-shadow: 0 -10px 24px rgba(35, 100, 177, 0.06);
}
.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: 1100px) {
.header-row { grid-template-columns: 1fr; gap: 14px; }
.brand { justify-self: center; align-items: center; min-width: 0; }
.welcome-text { margin-left: 0; margin-top: -6px; }
.header-actions { justify-content: center; }
.nav-pills { overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; width: 100%; }
.page-hero, .content-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 700px) {
.wrap { width: min(100%, calc(100% - 18px)); }
.page-content { padding: 18px; }
.hero-title { font-size: 20px; }
.form-grid, .context-row { grid-template-columns: 1fr; }
.dropdown-menu { width: 276px; }
.dropdown-menu.align-right { width: 286px; }
.hero-guide-grid { grid-template-columns: 1fr; }
.site-footer { padding: 0px; }
.footer-inner {
width: 100%;
padding: 20px 18px 16px;
border-radius: 22px 22px 0 0;
}
.footer-bottom { justify-content: flex-start; }
.form-actions { align-items: center; }
.btn-spacer { display: none; }
.btn-row { width: auto; }
.btn-row .btn { flex: 0 0 auto; }
}
.modal-overlay {
position: fixed; inset: 0; background: rgba(18, 50, 88, .34); backdrop-filter: blur(3px);
display: none; align-items: center; justify-content: center; padding: 24px; z-index: 120;
}
.modal-overlay.open { display: flex; }
.modal-card {
width: min(560px, 100%); background: #fff; border-radius: 24px; padding: 22px;
box-shadow: 0 22px 44px rgba(13, 56, 110, .22); border: 1px solid rgba(17,79,149,.1);
}
.modal-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.modal-head h3 { margin: 0; font-size: 20px; color: #0d5db8; }
.modal-close { border: 0; background: #eef6ff; color: #0d5db8; width: 38px; height: 38px; border-radius: 999px; cursor: pointer; font-size: 20px; font-weight: 700; }
.modal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.modal-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--text); }
.modal-section-title { font-size: 12px; font-weight: 900; color: #6c89ad; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.relations-layout { display: grid; grid-template-columns: minmax(0, 1.22fr) 320px; gap: 18px; align-items: start; }
.side-card.is-collapsible .side-toggle { border:0; background:transparent; width:100%; text-align:left; padding:0 28px 0 0; margin:0; font-size:17px; font-weight:900; color:#0d5db8; position:relative; cursor:pointer; }
.side-card.is-collapsible .side-toggle::after { content:"▾"; position:absolute; right:0; top:0; color:#5b7fa7; transition: transform .18s ease; }
.side-card.is-collapsible:not(.is-collapsed) .side-toggle::after { transform: rotate(180deg); }
.side-card.is-collapsible.is-collapsed .side-collapsible-content { display:none; }
.hero-meta-grid { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(17,79,149,.12); display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.hero-meta-item { background: rgba(255,255,255,.62); border:1px solid rgba(132,186,236,.35); border-radius:14px; padding:12px 14px; }
.hero-meta-item strong { display:block; margin-bottom:4px; color:#0d5db8; font-size:14px; }
.hero-meta-item span { font-size:13px; color:#285d96; line-height:1.45; }
.relations-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; margin-top:18px; }
.relation-card { background: rgba(255,255,255,.92); border:1px solid rgba(17,79,149,.08); border-radius:24px; box-shadow: var(--shadow-soft); padding:18px 20px; }
.relation-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.relation-card-title { margin:0; font-size:18px; color:#0d5db8; }
.relation-card-sub { margin:4px 0 0; font-size:13px; color:#5a7ea6; line-height:1.45; }
.mini-btn { border:0; border-radius:999px; padding:9px 14px; font-weight:800; font-size:13px; color:#fff; cursor:pointer; box-shadow: var(--shadow-soft); }
.mini-btn.orange { background: linear-gradient(180deg, #ffbe54, #ef8d1a); }
.mini-btn.blue { background: linear-gradient(180deg, #4f9fff, #1b77db); }
.mini-btn.green { background: linear-gradient(180deg, #8ee46c, #56ba3e); }
.relation-list { display:grid; gap:5px; max-height:240px; overflow:auto; padding-right:4px; }
.relation-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px 10px; align-items:center; background: linear-gradient(180deg, rgba(246,250,255,.96), rgba(235,244,255,.92)); border:1px solid rgba(132,186,236,.34); border-radius:18px; padding:4px 13px; }
.relation-avatar { width:40px; height:40px; border-radius:14px; display:grid; place-items:center; color:#fff; font-weight:900; font-size:15px; }
.relation-avatar.friend { background: linear-gradient(180deg, #8e6cff, #6f46e7); }
.relation-avatar.guardian { background: linear-gradient(180deg, #3fa6ff, #1978d8); }
.relation-avatar.teacher { background: linear-gradient(180deg, #f6b04f, #ea7f17); }
.relation-avatar.pending { background: linear-gradient(180deg, #97de79, #59b840); }
.relation-name { margin:0; font-size:13px; font-weight:800; color:#124f94; }
.relation-meta { margin:3px 0 0; font-size:12px; color:#5a7ea6; line-height:1.45; }
.relation-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; grid-column:2 / -1; align-self:start; }
.ghost-link { border:0; background:transparent; color:#0d5db8; font-size:12px; font-weight:800; cursor:pointer; padding:4px 0; }
.ghost-link.warn { color:#c65d14; }
.ghost-link.danger { color:#cf5353; }
.side-stack { display:grid; gap:16px; }
.summary-list { display:grid; gap:10px; margin-top:2px; }
.summary-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; color:#285d96; padding:8px 0; border-top:1px solid rgba(17,79,149,.08); }
.summary-row:first-child { border-top:0; padding-top:0; }
.summary-row strong { color:#0d5db8; }
.hint-list { display:grid; gap:10px; margin-top:2px; }
.hint-item { background: rgba(243,248,255,.9); border:1px solid rgba(132,186,236,.28); border-radius:16px; padding:12px 13px; }
.hint-item strong { display:block; margin-bottom:4px; color:#0d5db8; font-size:13px; }
.hint-item p { margin:0; font-size:13px; color:#4e7198; line-height:1.5; }
.relation-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:800; color:#0d5db8; background: rgba(13,93,184,.08); }
.relation-badge.pending { color:#c46b00; background: rgba(255, 190, 84, .2); }
.relation-badge.shared { color:#6f46e7; background: rgba(111,70,231,.12); }
.empty-state { padding:12px 0 2px; font-size:13px; color:#5a7ea6; }
.relation-card-scroll { max-height: 250px; overflow: auto; padding-right: 4px; }
.relation-card-scroll::-webkit-scrollbar, .relation-list::-webkit-scrollbar { width: 10px; }
.relation-card-scroll::-webkit-scrollbar-thumb, .relation-list::-webkit-scrollbar-thumb { background: rgba(17,79,149,.18); border-radius: 999px; }
.relation-badge { justify-content:center; text-align:center; min-width:116px; }
.relation-card-bottom { grid-column: 1 / -1; }
.hint-list.horizontal { grid-template-columns: repeat(3, minmax(0,1fr)); }
.hint-item { padding:10px 12px; }
.relation-avatar svg, .menu-icon svg { display:block; width:20px; height:20px; }
.menu-icon.purple { color:#fff; }
.menu-icon.purple svg * { stroke:#fff !important; fill:none; }
.menu-icon .stroke-current { stroke: currentColor; }
.menu-icon .fill-current { fill: currentColor; }
.relation-inline-toggle { border:0; background:transparent; color:#0d5db8; cursor:pointer; padding:0; width:26px; height:26px; border-radius:999px; position:relative; justify-self:end; grid-column:3 / 4; grid-row:1 / 2; align-self:start; margin-top:2px; }
.relation-inline-toggle::after { content:"▾"; position:absolute; inset:0; display:grid; place-items:center; color:#5b7fa7; font-size:16px; transition: transform .18s ease; }
.relation-item.is-open .relation-inline-toggle::after { transform: rotate(180deg); }
.relation-details { display:none; grid-column: 2 / -1; margin:-2px 0 0; padding:0 0 2px; }
.relation-item.is-open .relation-details { display:block; }
.relation-detail-line { font-size:12px; color:#5a7ea6; line-height:1.45; margin:0; }
.relation-actions.compact { align-items:center; }
.tooltip-anchor { cursor:help; }
@media (max-width: 840px) {
.relations-layout { grid-template-columns: 1fr; }
.hero-meta-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
.relations-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
.hero-meta-grid { grid-template-columns: 1fr; }
.hint-list.horizontal { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.relation-item { grid-template-columns: auto minmax(0,1fr); }
.relation-inline-toggle { grid-column: 2 / 3; grid-row:1 / 2; justify-self:end; }
.relation-actions { grid-column: 1 / -1; justify-content:flex-start; }
.relation-details { grid-column: 1 / -1; }
.hint-list.horizontal { grid-template-columns: 1fr; }
.relation-card-head { flex-direction:column; align-items:flex-start; }
}
.teacher-nav { flex-wrap: wrap; }
.teacher-nav .pill.long { justify-content: center; }
.teacher-shell { padding: 28px 24px 26px; }
.teacher-page { display: grid; gap: 22px; }
.teacher-hero-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .9fr); gap: 18px; align-items: start; }
.teacher-hero-card { padding: 18px 22px 20px; }
.eyebrow { display:inline-flex; align-items:center; border-radius:999px; background:#eaf2fb; color:#18518f; font-size:12px; font-weight:800; letter-spacing:.02em; padding:6px 10px; margin-bottom:8px; }
.teacher-meta-grid { margin-top: 16px; }
.teacher-side-stack { gap: 16px; }
.side-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.side-title { margin:0; color: var(--blue-4); font-size: 18px; line-height: 1.1; }
.summary-list.compact .summary-row { padding: 7px 0; }
.teacher-actions-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.teacher-action-card { background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: 18px 18px 16px; display:grid; gap:12px; min-height: 208px; box-shadow: 0 10px 24px rgba(16,66,129,.07); }
.teacher-action-icon { width: 56px; height:56px; border-radius:18px; display:grid; place-items:center; font-size:26px; }
.highlight-levels .teacher-action-icon { background: linear-gradient(135deg,#7a5cf0,#9f74ff); }
.highlight-students .teacher-action-icon { background: linear-gradient(135deg,#2f86ee,#68b0ff); }
.highlight-online .teacher-action-icon { background: linear-gradient(135deg,#6fba4c,#95d37d); }
.teacher-action-title { margin:0; color: var(--blue-4); font-size: 21px; line-height:1.1; }
.teacher-action-text { margin: 0; color: #4770a0; font-size: 14px; line-height: 1.5; }
.teacher-action-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }
.teacher-action-links a, .teacher-level-item a, .teacher-alert-link, .teacher-online-actions a { color:#18518f; font-size:14px; font-weight:800; text-decoration:none; }
.teacher-action-links a:hover, .teacher-level-item a:hover, .teacher-alert-link:hover, .teacher-online-actions a:hover { text-decoration: underline; }
.teacher-content-grid { display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); gap: 18px; }
.teacher-content-grid.lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.teacher-card { padding: 18px 22px 18px; display:grid; gap: 16px; }
.teacher-card-head { align-items:flex-start; }
.teacher-card-head.split { display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; }
.teacher-alert-list, .teacher-level-list, .teacher-online-list { display:grid; gap: 10px; }
.teacher-alert-item, .teacher-level-item, .teacher-online-item { border:1px solid #b7cff2; background:#f7fbff; border-radius:24px; padding:12px 14px; display:grid; align-items:center; }
.teacher-alert-item { grid-template-columns: auto 1fr auto; gap: 12px; }
.teacher-alert-badge { width: 38px; height:38px; border-radius:14px; display:grid; place-items:center; color:#fff; font-weight:900; font-size:15px; }
.teacher-alert-badge.orange { background: linear-gradient(135deg,#f5a431,#f08a17); }
.teacher-alert-badge.green { background: linear-gradient(135deg,#7abf52,#59a83b); }
.teacher-alert-badge.blue { background: linear-gradient(135deg,#4d92f0,#2678e7); }
.teacher-alert-copy { display:grid; gap:3px; }
.teacher-alert-copy strong { color: var(--blue-4); font-size:15px; }
.teacher-alert-copy span { color:#5376a2; font-size:13px; line-height:1.45; }
.teacher-inline-tag { display:inline-flex; align-items:center; min-height:32px; padding: 5px 12px; border-radius:999px; background:#eaf2fb; color:#1b5ca0; font-size:13px; font-weight:800; text-align:center; }
.teacher-test-form { display:grid; gap: 14px; }
.teacher-form-grid { display:grid; gap: 12px; }
.teacher-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.teacher-form-grid.test-row { grid-template-columns: 170px auto; align-items:end; }
.teacher-field { display:grid; gap:6px; }
.teacher-field span { color:#1d5b9c; font-size:13px; font-weight:800; }
.teacher-field select, .teacher-field input { width:100%; border:1px solid #b6cfee; background:#fff; border-radius:16px; padding:11px 13px; color:#174e8d; font-size:14px; font-weight:700; outline:none; }
.teacher-field select:focus, .teacher-field input:focus { border-color:#5798ea; box-shadow:0 0 0 3px rgba(82,138,215,.12); }
.mini-btn.large { min-height:48px; font-size:15px; }
.teacher-form-note { margin:0; color:#5a7ba5; font-size:13px; line-height:1.5; }
.teacher-level-item { grid-template-columns: 1fr auto; gap: 14px; }
.teacher-level-item strong { color: var(--blue-4); font-size:15px; }
.teacher-level-item span { display:block; color:#5779a4; font-size:13px; margin-top:3px; }
.teacher-online-item { grid-template-columns: auto minmax(0,1fr) auto; gap:12px; }
.teacher-online-dot { width: 11px; height:11px; border-radius:999px; background:#49b85c; margin-left:4px; box-shadow:0 0 0 5px rgba(73,184,92,.12); }
.teacher-online-item strong { color: var(--blue-4); font-size:15px; }
.teacher-online-item span { display:block; color:#5779a4; font-size:13px; margin-top:3px; }
.teacher-online-actions { display:flex; align-items:center; gap: 12px; flex-wrap:wrap; }
.teacher-online-actions.disabled span { color:#9bb2cc; font-size:14px; font-weight:800; }
.mini-btn.ghost { background:#eef5fd; color:#1b5ca0; box-shadow:none; }
.mini-btn.ghost:hover { transform:none; background:#e2eefb; }
@media (max-width: 980px) { .teacher-actions-grid { grid-template-columns: 1fr; } .teacher-content-grid, .teacher-content-grid.lower { grid-template-columns:1fr; } }
@media (max-width: 1020px) { .teacher-hero-layout { grid-template-columns:1fr; } }
@media (max-width: 760px) { .teacher-form-grid.three, .teacher-form-grid.test-row { grid-template-columns:1fr; } .teacher-card-head.split { flex-direction:column; } .teacher-online-item, .teacher-alert-item, .teacher-level-item { grid-template-columns:1fr; } .teacher-online-actions { justify-content:flex-start; } }
.teacher-frontpage-shell { padding: 18px 0 26px; }
.teacher-frontpage-layout { display: grid; gap: 18px; }
.teacher-frontpage-layout.page-content { padding: 0; }
.frontpage-intro-card {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-radius: 24px;
box-shadow: var(--shadow-soft);
padding: 22px 24px 20px;
}
.frontpage-intro-title { margin: 0 0 10px; font-size: 28px; line-height: 1.12; color: #0d5db8; }
.frontpage-intro-text { margin: 0; color: #315d91; font-size: 15px; line-height: 1.65; max-width: 940px; }
.frontpage-intro-note {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(17,79,149,.10);
font-size: 13px;
line-height: 1.55;
color: #5377a0;
}
.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.summary-card{background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));border:1px solid rgba(170,204,238,.62);border-radius:24px;box-shadow:var(--shadow-soft);padding:18px 18px 16px;display:grid;gap:14px;min-height:290px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-title-wrap{display:grid;gap:6px}
.card-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:#6b86a8}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.dot.teacher{background:linear-gradient(180deg,#8d6cff,#6147d8)}
.card-title{margin:0;font-size:22px;line-height:1.15;color:#0d5db8}
.card-intro{margin:0;color:#55789f;font-size:14px;line-height:1.5}
.context-tag{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:900;white-space:nowrap}
.context-tag.teacher{background:linear-gradient(180deg, rgba(141,108,255,.18), rgba(97,71,216,.18));color:#5f45cb}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat-box{border-radius:18px;padding:14px 14px 12px;border:1px solid rgba(170,204,238,.42);background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,250,255,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.stat-label{display:block;font-size:12px;font-weight:800;letter-spacing:.02em;color:#6f89aa;margin-bottom:8px;line-height:1.35}
.stat-value{display:block;font-size:29px;line-height:1;color:#0d5db8;font-weight:900;margin-bottom:8px}
.stat-meta{display:block;font-size:12px;line-height:1.45;color:#55789f}
.card-foot{margin-top:auto;padding-top:12px;border-top:1px solid rgba(17,79,149,.10);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.foot-label{font-size:12px;font-weight:900;color:#0d5db8}
.foot-copy{font-size:12px;line-height:1.45;color:#5f7ea5}
@media (max-width: 900px) { .dashboard-grid { grid-template-columns:1fr; } }
@media (max-width: 700px) {
.teacher-frontpage-shell { padding: 18px; }
.frontpage-intro-title { font-size: 24px; }
.stats-grid { grid-template-columns:1fr; }
}
</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 class="welcome-text">Welkom terug, Eva</div>
</div>
<div class="nav-pills teacher-nav">
<button class="pill purple long">🧩 Oefenaanbod</button>
<button class="pill blue long">👥 Leerlingen</button>
<button class="pill green long">🟢 Online</button>
</div>
<div class="header-actions">
<button class="mail-btn" aria-label="Berichten">✉️<span class="badge">3</span></button>
<div class="nav-item profile-nav" data-menu="profielmenu">
<button class="profile-chip" type="button" aria-label="Gebruikersmenu" aria-haspopup="true" aria-expanded="false">
<span class="avatar">E</span>
</button>
<div class="dropdown-menu align-right" role="menu" aria-label="Gebruikersmenu">
<div class="menu-list">
<a class="menu-link no-arrow" href="#"><span class="menu-icon blue">👤</span><span>Profiel</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon green">⚙</span><span>Voorkeuren</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon yellow">Aa</span><span>Toegankelijkheid</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon purple" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path class="stroke-current" d="M16 19v-1a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle class="stroke-current" cx="9.5" cy="7" r="3" stroke-width="2"/><path class="stroke-current" d="M21 19v-1a4 4 0 0 0-3-3.87" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path class="stroke-current" d="M16 4.13a4 4 0 0 1 0 7.75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span>Relaties</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon red">!</span><span>Meld een probleem</span><span class="menu-arrow">›</span></a>
<a class="menu-link no-arrow" href="#"><span class="menu-icon blue">↪</span><span>Uitloggen</span><span class="menu-arrow">›</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main class="page-main">
<section class="wrap teacher-frontpage-shell">
<div class="page-content teacher-frontpage-layout">
<section class="frontpage-intro-card" aria-label="Introductie docent frontpage">
<h1 class="frontpage-intro-title">Welkom op je docent-frontpage</h1>
<p class="frontpage-intro-text">Vanaf deze startpagina krijg je in één oogopslag inzicht in je docentcontext. Je ziet hier kerninformatie over je gekoppelde leerlingen, actieve autorisaties, niveaus en inhoud. Dieper beheer blijft bewust via de bestaande menu-ingangen verlopen, zodat deze frontpage rustig en overzichtelijk blijft.</p>
<div class="frontpage-intro-note">Gebruik deze pagina vooral als snelle oriëntatieplek. Beheer van leerlingen, niveaus, categorieën en oefeningen blijft bereikbaar via de vertrouwde navigatie bovenin.</div>
</section>
<section class="dashboard-grid" aria-label="Docentoverzicht blokken">
<article class="summary-card">
<div class="card-head">
<div class="card-title-wrap">
<div class="card-kicker"><span class="dot teacher"></span>Docent</div>
<h2 class="card-title">Leerlingenoverzicht</h2>
<p class="card-intro">Kerncijfers rond gekoppelde leerlingen en toegang. Geen selectie van losse leerlingen, maar alleen schaalbare samenvatting.</p>
</div>
<span class="context-tag teacher">Overzicht</span>
</div>
<div class="stats-grid">
<div class="stat-box">
<span class="stat-label">Gekoppelde leerlingen</span>
<span class="stat-value">24</span>
<span class="stat-meta">Actieve docent-leerlingrelaties binnen je accountcontext.</span>
</div>
<div class="stat-box">
<span class="stat-label">Actieve autorisaties</span>
<span class="stat-value">31</span>
<span class="stat-meta">Toegang van leerlingen tot één of meer docentniveaus.</span>
</div>
<div class="stat-box">
<span class="stat-label">Leerlingen op huidig niveau</span>
<span class="stat-value">12</span>
<span class="stat-meta">Leerlingen met toegang tot het nu geselecteerde niveau.</span>
</div>
<div class="stat-box">
<span class="stat-label">Openstaande uitnodigingen</span>
<span class="stat-value">2</span>
<span class="stat-meta">Nog niet geaccepteerde of afgewezen koppelingen.</span>
</div>
</div>
<div class="card-foot">
<span class="foot-label">Geen leerlinglijst in dit blok</span>
<span class="foot-copy">Voorkomt arbitraire selectie bij 20+ leerlingen en houdt de kaart compact.</span>
</div>
</article>
<article class="summary-card">
<div class="card-head">
<div class="card-title-wrap">
<div class="card-kicker"><span class="dot teacher"></span>Docent</div>
<h2 class="card-title">Niveaus & inhoud</h2>
<p class="card-intro">Samenvatting van je docentstructuur en inhoud. Geen alternatieve navigatie naar dezelfde beheerpagina, wel direct inzicht.</p>
</div>
<span class="context-tag teacher">Structuur</span>
</div>
<div class="stats-grid">
<div class="stat-box">
<span class="stat-label">Actieve niveaus</span>
<span class="stat-value">4</span>
<span class="stat-meta">Niveaus met actuele eigenaar of actieve samenwerking.</span>
</div>
<div class="stat-box">
<span class="stat-label">Gekoppelde categorieën</span>
<span class="stat-value">18</span>
<span class="stat-meta">Centrale categorieën die in je niveaus gebruikt worden.</span>
</div>
<div class="stat-box">
<span class="stat-label">Actieve oefeningen</span>
<span class="stat-value">56</span>
<span class="stat-meta">Oefeningen die beschikbaar zijn voor normaal gebruik.</span>
</div>
<div class="stat-box">
<span class="stat-label">In onderhoud</span>
<span class="stat-value">3</span>
<span class="stat-meta">Oefeningen die tijdelijk niet actief inzetbaar zijn.</span>
</div>
</div>
<div class="card-foot">
<span class="foot-label">Alleen overzicht, geen dubbele CTA</span>
<span class="foot-copy">Beheer van niveaus en categorieën blijft via de bestaande menu-ingang lopen.</span>
</div>
</article>
</section>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-inner">
<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>Snel naar</h4>
<div class="footer-links">
<a href="#">Profiel</a>
<a href="#">Berichten</a>
<a href="#">Meld een probleem</a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 OefenHub</span>
</div>
</div>
</footer>
<script>
(function () {
const navItems = document.querySelectorAll('.nav-item[data-menu]');
navItems.forEach(function (item) {
const trigger = item.querySelector('button');
if (!trigger) return;
trigger.addEventListener('click', function (event) {
event.preventDefault();
const isOpen = item.classList.contains('open');
navItems.forEach(function (other) {
other.classList.remove('open');
const btn = other.querySelector('button');
if (btn) btn.setAttribute('aria-expanded', 'false');
});
if (!isOpen) {
item.classList.add('open');
trigger.setAttribute('aria-expanded', 'true');
}
});
});
document.addEventListener('click', function (event) {
navItems.forEach(function (item) {
if (!item.contains(event.target)) {
item.classList.remove('open');
const btn = item.querySelector('button');
if (btn) btn.setAttribute('aria-expanded', 'false');
}
});
});
})();
</script>
</body>
</html>