oefenhub_docent_06_online_overzicht_v2_16.html
Korte beschrijving
Mockup van het online-overzicht waarin zichtbaar is welke gekoppelde leerlingen online zijn en of live meekijken beschikbaar is.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/docent/oefenhub_docent_06_online_overzicht_v2_16.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 Online</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);
--shadow-soft:0 8px 18px rgba(35,100,177,.08);
--shadow:0 12px 28px rgba(35,100,177,.12);
}
*{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.wrap { padding: 22px 0 0; }
.page{padding:0 0 28px}
.page-shell{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}
.page-content{display:grid;gap:18px}
.page-breadcrumb{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#5d7fa7;margin:0 0 2px 4px}
.page-breadcrumb a{color:#0d5db8;text-decoration:none}
.page-breadcrumb-sep{color:#7fa1c8}
.hero-card,.list-card{padding:18px 20px;border:1px solid rgba(170,204,238,.62);border-radius:28px;background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));width:100%;min-width:0}
.hero-card{padding:18px 22px}.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#e9f4ff;color:#1d5a9c;font-weight:900;border-radius:999px;padding:6px 12px;font-size:13px}h1{margin:0px 0 10px;color:#1659a6;font-size:31px;line-height:1.1}.hero-card p{margin:0;color:#315d91;font-size:15px;line-height:1.55}
.field{display:flex;flex-direction:column;gap:8px}.field label{font-size:13px;font-weight:800;color:#3a6695}.field input,.field select{width:100%;height:50px;border-radius:16px;border:1px solid rgba(17,79,149,.14);background:#fff;padding:0 16px;font-size:15px;color:var(--text)}
.list-card{margin-top:18px;padding:16px}.card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.card-title-row h2{margin:0;color:#1659a6;font-size:21px}.card-title-row p{margin:4px 0 0;color:#5f7ea5;font-size:14px;line-height:1.45}.count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:999px;background:#eef6ff;color:#1659a6;font-weight:900}
.student-list-teacher{display:flex;flex-direction:column;gap:9px;max-height:620px;overflow:auto;padding-right:6px}.student-item{border:1px solid rgba(17,79,149,.10);background:#f9fcff;border-radius:18px;padding:12px 13px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.student-main{min-width:0}.student-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.student-name{font-size:16px;font-weight:900;color:#1659a6}.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.online{background:#4fcb5f;box-shadow:0 0 0 3px rgba(79,203,95,.18)}.away{background:#ffb020;box-shadow:0 0 0 3px rgba(255,176,32,.18)}
.student-list-parentGuardian{display:flex;flex-direction:column;gap:9px;max-height:620px;overflow:auto;padding-right:6px}.student-item{border:1px solid rgba(17,79,149,.10);background:#f9fcff;border-radius:18px;padding:12px 13px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.student-main{min-width:0}.student-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.student-name{font-size:16px;font-weight:900;color:#1659a6}.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.online{background:#4fcb5f;box-shadow:0 0 0 3px rgba(79,203,95,.18)}.away{background:#ffb020;box-shadow:0 0 0 3px rgba(255,176,32,.18)}
.student-meta{margin-top:4px;color:#5e7ca0;font-size:13px;line-height:1.4}
.student-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.action-btn{border:none;border-radius:14px;padding:10px 12px;font-weight:900;font-size:13px;cursor:pointer}.primary{background:linear-gradient(180deg,#1e82e4,#155daa);color:#fff}.secondary{background:#eef5ff;color:#1659a6}.disabled{background:#eef2f7;color:#97a8bd;cursor:not-allowed}
.site-footer{display:block;clear:both;width:100%;margin-top:24px !important}.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:36px;align-items:start;padding:0}.footer-col h4{margin:0 0 10px;color:#1659a6;font-size:14px}.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}.footer-bottom{margin-top:18px;padding-top:14px;border-top:1px solid rgba(17,79,149,.08);color:#6f89a9;font-size:12px;font-weight:700}
@media (max-width:860px){.header-row{grid-template-columns:1fr}.brand{min-width:0}.nav-pills{justify-content:flex-start;overflow:auto;padding-bottom:4px}.header-actions{justify-content:flex-end}.student-item{grid-template-columns:1fr}.student-actions{justify-content:flex-start}.footer-grid{grid-template-columns:1fr;gap:24px}}
footer{display:block;clear:both;width:100%;margin-top:24px !important}
.list-card{width:100%}
@media (max-width:860px){
}
.filters{
display:flex;
flex-wrap:nowrap;
gap:16px;
align-items:flex-end;
justify-content:flex-start;
margin:14px 0 18px;
width:auto;
}
.filter-item{
width:220px;
min-width:220px;
max-width:220px;
display:flex;
flex-direction:column;
gap:6px;
}
.filter-item label{
font-size:14px;
font-weight:800;
color:var(--text);
margin:0;
}
.filter-item select{
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:44px;
border-radius:14px;
border:1px solid rgba(17,79,149,.14);
background:#fff;
padding:0 14px;
font-size:14px;
color:var(--text);
box-sizing:border-box;
display:block;
}
.context-tabs{
display:flex;
align-items:flex-end;
gap:4px;
margin:14px 0 0;
padding:0;
border-bottom:1px solid rgba(170,204,238,.82);
flex-wrap:wrap;
}
.context-tab{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:116px;
margin:0;
border:1px solid rgba(170,204,238,.82);
border-bottom:none;
background:linear-gradient(180deg, rgba(245,250,255,.98), rgba(232,242,253,.98));
color:#58779d;
border-radius:10px 10px 0 0;
padding:10px 18px 9px;
font-size:14px;
font-weight:700;
letter-spacing:0;
font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
line-height:1.15;
cursor:pointer;
box-shadow:none;
transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.context-tab:hover{
color:#335f92;
border-color:rgba(170,204,238,.92);
background:linear-gradient(180deg, rgba(248,252,255,.99), rgba(236,246,255,.99));
}
.context-tab.active{
color:#1659a6;
background:#fff;
border-color:rgba(170,204,238,.92);
z-index:2;
}
.context-tab.active::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-1px;
height:1px;
background:#fff;
}
.context-section{display:none; padding-top:18px;}
.context-section.active{display:block}
.section-mini-title{
font-size:18px;
font-weight:900;
color:var(--text);
margin:0 0 12px;
}
.section-context-copy{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.45}
.site-footer{
display:block;
width:100%;
margin-top:24px;
background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96));
border-top:1px solid rgba(170,204,238,.62);
box-shadow:var(--shadow);
border-radius:26px 26px 0 0;
padding:0;
overflow:visible;
}
.footer-wrap{width:min(1220px,calc(100% - 30px));margin:0 auto;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: 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; }
.footer-wrap { padding: 20px 18px 16px; }
.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-manage-layout { display:grid; gap:16px; }
.teacher-manage-columns { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.teacher-left-stack, .teacher-right-stack { display:grid; gap:16px; }
.teacher-manage-hero-main {
background: rgba(255,255,255,.96);
border: 1px solid rgba(255,255,255,.72);
border-radius: 28px;
box-shadow: var(--shadow);
padding: 18px 20px;
}
.teacher-manage-hero {
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:16px;
align-items:start;
}
.teacher-manage-panel {
background: rgba(255,255,255,.96);
border: 1px solid rgba(255,255,255,.72);
border-radius: 28px;
box-shadow: var(--shadow);
padding: 18px 20px;
}
.teacher-manage-title { margin:0 0 8px; font-size:24px; }
.teacher-manage-panel--flat { background:transparent; border:none; box-shadow:none; border-radius:0; padding:0; }
.teacher-manage-text { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.teacher-summary-card {
background: rgba(255,255,255,.96);
border: 1px solid rgba(255,255,255,.72);
border-radius: 28px;
box-shadow: var(--shadow);
padding: 14px 16px;
display:grid;
gap:8px;
}
.teacher-summary-row {
display:grid;
grid-template-columns: 1fr auto;
align-items:center;
gap:10px;
padding:10px 12px;
border-radius:16px;
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,249,255,.94));
border:1px solid rgba(17,79,149,.10);
}
.teacher-summary-row strong { display:block; font-size:12px; }
.teacher-summary-row em { font-style:normal; font-size:20px; font-weight:900; color:var(--blue-4); }
.teacher-manage-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; }
.teacher-panel {
background: rgba(255,255,255,.96);
border: 1px solid rgba(255,255,255,.72);
border-radius: 28px;
box-shadow: var(--shadow);
padding: 16px 18px 18px;
}
.teacher-panel h2 { margin:0 0 6px; font-size:18px; }
.teacher-panel-intro { margin:0 0 12px; color:var(--muted); font-size:12px; line-height:1.45; }
.teacher-toolbar { display:grid; grid-template-columns:minmax(260px,1fr) repeat(2, minmax(170px, auto)); gap:8px; margin-bottom:12px; }
.teacher-toolbar input, .teacher-toolbar select {
width:100%; min-width:0; border:1px solid rgba(17,79,149,.12); border-radius:14px;
padding:10px 12px; font-size:13px; color:var(--text); background: rgba(245,250,255,.96);
box-shadow: inset 0 1px 2px rgba(17,79,149,.04);
}
.student-manage-list { display:grid; gap:8px; max-height:660px; overflow:auto; padding-right:4px; }
.student-manage-card {
background:#fff; border:1px solid rgba(155,197,236,.55); border-radius:22px; padding:10px 14px 11px; box-shadow: var(--shadow-soft);
display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto; gap:2px 12px; align-items:start;
}
.student-manage-avatar {
width:44px; height:44px; border-radius:16px; display:grid; place-items:center; font-weight:900; color:#fff; background:linear-gradient(180deg, #8f6dff, #5c44db); font-size:20px;
grid-column:1; grid-row:1 / span 2;
}
.student-manage-main { grid-column:2; grid-row:1 / span 2; min-width:0; }
.student-manage-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.student-manage-name { margin:0; font-size:16px; }
.student-manage-badges { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.student-manage-badge {
display:inline-flex; align-items:center; justify-content:center; min-height:24px; padding:4px 10px; border-radius:999px; color:#fff; font-size:12px; font-weight:800;
}
.student-manage-badge.blue { background: linear-gradient(180deg, #4fa8ff, #176acc); }
.student-manage-badge.orange { background: linear-gradient(180deg, #ffc052, #ff8518); }
.student-manage-toggle {
grid-column:3; grid-row:1 / span 2; align-self:start; justify-self:end; width:34px; height:34px; border-radius:999px; border:2px solid rgba(17,79,149,.35); background:#fff; color:var(--text); display:grid; place-items:center; cursor:pointer; font-size:14px; box-shadow: var(--shadow-soft);
}
.student-manage-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; }
.student-link { color:var(--blue-4); text-decoration:none; font-weight:900; font-size:14px; }
.student-link.danger { color:#e55c5c; }
.student-manage-extra { display:none; grid-column:1 / -1; margin-top:6px; padding-top:8px; border-top:1px solid rgba(17,79,149,.10); color:var(--muted); font-size:12px; line-height:1.45; }
.student-manage-extra p { margin:0 0 4px; }
.student-manage-card.is-open .student-manage-extra { display:block; }
.student-manage-card.is-open .student-manage-toggle { transform:rotate(180deg); }
@media (max-width: 960px) {
.teacher-manage-hero { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
.student-manage-card { grid-template-columns:auto minmax(0,1fr) auto; }
.student-manage-head { flex-direction:column; align-items:flex-start; }
.student-manage-badges { justify-content:flex-start; }
}
.teacher-link-list { display:grid; gap:8px; }
.teacher-side-link {
display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; padding:10px 11px; border-radius:16px;
background: rgba(246,250,255,.96); border:1px solid rgba(17,79,149,.08); color:var(--text); text-decoration:none; font-size:12px; font-weight:800; box-shadow: var(--shadow-soft);
}
.teacher-side-link .icon { width:28px; height:28px; border-radius:10px; display:grid; place-items:center; color:#fff; background: linear-gradient(180deg, var(--orange-1), var(--orange-3)); font-size:14px; }
.teacher-side-tip { padding:10px 11px; border-radius:16px; border:1px solid rgba(17,79,149,.08); background: rgba(248,251,255,.96); }
.teacher-side-tip strong { display:block; margin-bottom:2px; font-size:12px; }
.teacher-side-tip p { margin:0; font-size:11px; line-height:1.45; color:var(--muted); }
.teacher-side-links { display:grid; gap:16px; }
.student-pagination {
margin-top: 12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
padding-top:10px;
border-top:1px solid rgba(17,79,149,.10);
}
.student-pagination-info { color: var(--muted); font-size:12px; }
.student-pagination-controls { display:flex; align-items:center; gap:8px; }
.pagination-btn, .pagination-page {
border:1px solid rgba(17,79,149,.14);
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,247,255,.95));
color: var(--text);
border-radius: 12px;
min-height: 34px;
padding: 0 12px;
font-size: 13px;
font-weight: 800;
box-shadow: var(--shadow-soft);
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
cursor:pointer;
}
.pagination-page.is-active {
background: linear-gradient(180deg, #4fa8ff, #176acc);
color: #fff;
border-color: rgba(23,106,204,.45);
}
@media (max-width: 1080px) {
.teacher-manage-hero, .teacher-manage-grid { grid-template-columns:1fr; }
.teacher-toolbar { grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width: 760px) {
.teacher-toolbar { grid-template-columns:1fr; }
.student-manage-top { grid-template-columns:auto 1fr; }
.student-manage-badges { justify-content:flex-start; grid-column:1 / -1; }
}
.frontpage-main-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:28px;box-shadow:var(--shadow);padding:16px}
.tab-shell{display:grid;width:100%;}
.top-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0;background:transparent;border:0;box-shadow:none}
.tab-btn{position:relative;border:1px solid rgba(17,79,149,.16);background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(237,246,255,.92));border-radius:18px 18px 0 0;padding:0 20px;color:#2d5f97;font-size:13px;font-weight:900;cursor:pointer;box-shadow:var(--shadow-soft);min-height:25px}
.tab-btn.active{background:linear-gradient(180deg,#2f88ea,#176acc);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(35,100,177,.18)}
.tab-panel{display:none;background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.96));border:1px solid rgba(170,204,238,.6);border-radius:0 24px 24px 24px;box-shadow:var(--shadow);padding:18px 20px 20px;min-height:620px}
.tab-panel.active{display:block}
.frontpage-tab-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.frontpage-tab-main{display:grid;gap:16px}
.frontpage-side-card{margin:0}
.frontpage-side-card,
.tab-panel .list-card,
.tab-panel .detail-card,
.tab-panel .section-card,
.tab-panel .info-card{box-shadow:none}
.tab-panel .section-mini-title{margin:0;font-size:18px;color:#0f4d91;font-weight:800}
.tab-panel .section-context-copy{margin:0;font-size:13px;line-height:1.55;color:#5a7ba3}
.tab-panel .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;align-items:center}
.tab-panel .filter-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center}
.tab-panel .filter-item label{display:block;margin:0;color:#235790;font-size:13px;font-weight:900}
.tab-panel .filter-item select{width:100%;max-width:100%;appearance:auto;-webkit-appearance:menulist;-moz-appearance:menulist;border:1px solid rgba(170,204,238,.72);background:#fff;border-radius:14px;padding:10px 12px;font:inherit;color:#134f92;box-shadow:none;min-height:44px}
.tab-panel .student-list-teacher{display:grid;gap:12px;height:425px;overflow-y:auto;padding-right:6px;align-content:start}
.tab-panel .student-list-parentGuardian{display:grid;gap:12px;height:520px;overflow-y:auto;padding-right:6px;align-content:start}
.tab-panel .student-item{border:1px solid rgba(170,204,238,.58);border-radius:18px;background:linear-gradient(180deg, #fff, #f3f9ff);padding:12px 13px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;box-shadow:var(--shadow-soft)}
.tab-panel .student-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tab-panel .student-name{font-size:16px;font-weight:900;color:#0f4d91}
.tab-panel .student-meta{margin-top:6px;font-size:13px;line-height:1.5;color:#5d7da4}
.tab-panel .student-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.tab-panel .status-dot{width:14px;height:14px;border-radius:999px;display:inline-block;box-shadow:0 0 0 6px rgba(255,255,255,.75)}
.tab-panel .status-dot.online{background:linear-gradient(180deg,#79cf5b,#48a432)}
.tab-panel .status-dot.away{background:linear-gradient(180deg,#ffd45a,#f0b000)}
@media (max-width: 980px){.frontpage-tab-grid{grid-template-columns:1fr}}
@media (max-width: 760px){.tab-panel .filters{grid-template-columns:1fr}.tab-panel .filter-item{grid-template-columns:1fr;gap:6px}.tab-panel .student-item{grid-template-columns:1fr}.tab-panel .student-actions{justify-content:flex-start}}
</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="wrap">
<section class="page-shell">
<div class="page-content">
<nav class="page-breadcrumb" aria-label="Kruimelpad">
<a href="#">Home</a>
<span class="page-breadcrumb-sep">›</span>
<span aria-current="page">Online</span>
</nav>
<section class="hero-card">
<h1>Online</h1>
<p>Bekijk welke van jouw leerlingen nu online zijn. Je ziet per leerling het huidige niveau en, wanneer de leerling bezig is met een oefening, ook de categorie en oefening. Vanuit hier kun je direct live meekijken of de geschiedenis openen.</p>
</section>
</section>
<article class="list-card frontpage-main-card">
<div class="card-title-row"><div><h2>Actieve sessies</h2></div></div>
<div class="tab-shell" aria-label="Context selector actieve sessies">
<div class="top-tabs" role="tablist" aria-label="Actieve sessies contexten">
<button class="tab-btn active" type="button" role="tab" aria-selected="true" aria-controls="teacherSection" id="tabTeacher">Docent</button>
<button class="tab-btn" type="button" role="tab" aria-selected="false" aria-controls="guardianSection" id="tabGuardian">Ouder/voogd</button>
</div>
<section id="teacherSection" class="tab-panel active" role="tabpanel" aria-labelledby="tabTeacher">
<div class="frontpage-tab-grid">
<div class="frontpage-tab-main">
<div>
<div class="section-mini-title">Mijn leerlingen</div>
<p class="section-context-copy">Alleen leerlingen die binnen jouw docentcontext zichtbaar mogen zijn.</p>
</div>
<div class="filters">
<div class="filter-item">
<label for="teacherNiveauFilter">Niveau</label>
<select id="teacherNiveauFilter">
<option>Alle niveaus</option>
<option>Groep 7 - Rekenen</option>
<option>Groep 7 - Taal</option>
<option>Engels compact - groep 7</option>
</select>
</div>
<div class="filter-item">
<label for="teacherSorteringFilter">Sortering</label>
<select id="teacherSorteringFilter">
<option>Recentste activiteit</option>
<option>Naam A-Z</option>
<option>Langst online</option>
</select>
</div>
</div>
<div class="student-list-teacher">
<div class="student-item"><div class="student-main"><div class="student-name-row"><span class="status-dot online"></span><span class="student-name">Lotte Timmer</span></div><div class="student-meta">Huidig niveau: Groep 7 – Taal<br/>Spelling • Woordpakket 4</div></div><div class="student-actions"><button class="action-btn primary">Kijk live mee</button><button class="action-btn secondary">Geschiedenis</button></div></div>
<div class="student-item"><div class="student-main"><div class="student-name-row"><span class="status-dot online"></span><span class="student-name">Yara Verbeek</span></div><div class="student-meta">Huidig niveau: Groep 7 – Rekenen<br/>Breuken • Optellen en aftrekken</div></div><div class="student-actions"><button class="action-btn primary">Kijk live mee</button><button class="action-btn secondary">Geschiedenis</button></div></div>
<div class="student-item"><div class="student-main"><div class="student-name-row"><span class="status-dot away"></span><span class="student-name">Sem de Bruin</span></div><div class="student-meta">Huidig niveau: Groep 7 – Rekenen</div></div><div class="student-actions"><button class="action-btn disabled" disabled title="Deze leerling is op dit moment niet bezig met een oefening, daarom kan er niet meegekeken worden.">Kijk live mee</button><button class="action-btn secondary">Geschiedenis</button></div></div>
<div class="student-item"><div class="student-main"><div class="student-name-row"><span class="status-dot online"></span><span class="student-name">Amira Molenaar</span></div><div class="student-meta">Huidig niveau: Plusklas 2026<br/>Engels • Present simple</div></div><div class="student-actions"><button class="action-btn primary">Kijk live mee</button><button class="action-btn secondary">Geschiedenis</button></div></div>
<div class="student-item"><div class="student-main"><div class="student-name-row"><span class="status-dot away"></span><span class="student-name">Noah Peters</span></div><div class="student-meta">Huidig niveau: Groep 7 – Taal</div></div><div class="student-actions"><button class="action-btn disabled" disabled title="Deze leerling is op dit moment niet bezig met een oefening, daarom kan er niet meegekeken worden.">Kijk live mee</button><button class="action-btn secondary">Geschiedenis</button></div></div>
</div>
</div>
</div>
</section>
<section id="guardianSection" class="tab-panel" role="tabpanel" aria-labelledby="tabGuardian">
<div class="frontpage-tab-grid">
<div class="frontpage-tab-main">
<div>
<div class="section-mini-title">Mijn kinderen</div>
<p class="section-context-copy">Alleen kinderen die binnen jouw ouder-/voogdcontext zichtbaar mogen zijn.</p>
</div>
<div class="student-list-parentGuardian">
<div class="student-item"><div class="student-main"><div class="student-name-row"><span class="status-dot online"></span><span class="student-name">Mila de Groot</span></div><div class="student-meta">Mijn kind • Groep 7 – Rekenen<br/>Tafels • Tafels 6 t/m 9</div></div><div class="student-actions"><button class="action-btn primary">Kijk live mee</button><button class="action-btn secondary">Geschiedenis</button></div></div>
<div class="student-item"><div class="student-main"><div class="student-name-row"><span class="status-dot away"></span><span class="student-name">Daan de Groot</span></div><div class="student-meta">Mijn kind • Groep 5 – Rekenen</div></div><div class="student-actions"><button class="action-btn disabled" disabled title="Dit kind is op dit moment niet bezig met een oefening, daarom kan er niet meegekeken worden.">Kijk live mee</button><button class="action-btn secondary">Geschiedenis</button></div></div>
<div class="student-item"><div class="student-main"><div class="student-name-row"><span class="status-dot online"></span><span class="student-name">Sara de Groot</span></div><div class="student-meta">Mijn kind • Groep 8 – Taal<br/>Werkwoorden • Tegenwoordige tijd</div></div><div class="student-actions"><button class="action-btn primary">Kijk live mee</button><button class="action-btn secondary">Geschiedenis</button></div></div>
<div class="student-item"><div class="student-main"><div class="student-name-row"><span class="status-dot online"></span><span class="student-name">Finn de Groot</span></div><div class="student-meta">Mijn kind • Groep 6 – Begrijpend lezen<br/>Thema • Samenvatten</div></div><div class="student-actions"><button class="action-btn primary">Kijk live mee</button><button class="action-btn secondary">Geschiedenis</button></div></div>
<div class="student-item"><div class="student-main"><div class="student-name-row"><span class="status-dot away"></span><span class="student-name">Luca de Groot</span></div><div class="student-meta">Mijn kind • Groep 4 – Rekenen</div></div><div class="student-actions"><button class="action-btn disabled" disabled title="Dit kind is op dit moment niet bezig met een oefening, daarom kan er niet meegekeken worden.">Kijk live mee</button><button class="action-btn secondary">Geschiedenis</button></div></div>
<div class="student-item"><div class="student-main"><div class="student-name-row"><span class="status-dot online"></span><span class="student-name">Nova de Groot</span></div><div class="student-meta">Mijn kind • Groep 7 – Engels<br/>Woordenschat • Food and drinks</div></div><div class="student-actions"><button class="action-btn primary">Kijk live mee</button><button class="action-btn secondary">Geschiedenis</button></div></div>
</div>
</div>
</div>
</section>
</div>
</article>
</div>
</main>
<footer class="site-footer">
<div class="footer-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>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>
</main>
<script>
(function () {
const tabs = Array.from(document.querySelectorAll('.top-tabs .tab-btn'));
const panels = Array.from(document.querySelectorAll('.tab-panel'));
function activate(tab) {
const targetId = tab.getAttribute('aria-controls');
tabs.forEach(btn => {
const isActive = btn === tab;
btn.classList.toggle('active', isActive);
btn.setAttribute('aria-selected', String(isActive));
});
panels.forEach(panel => {
panel.classList.toggle('active', panel.id === targetId);
});
}
tabs.forEach(tab => tab.addEventListener('click', () => activate(tab)));
})();
</script>
</body>
</html>