oefenhub_leerling_03_oefening_v3_2.html
Korte beschrijving
Deze mockup toont de oefening-startpagina voor een specifieke subcategorie, zoals Rekenen > Optellen.
De leerling kiest hier tussen verdergaan met een openstaande run, een nieuwe oefening starten of de geschiedenis bekijken. De pagina vormt de schakel tussen categorienavigatie en het daadwerkelijke oefenscherm.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/leerling/oefenhub_leerling_03_oefening_v3_2.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OefenHub - Rekenen - Optellen</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;
--yellow-1: #ffd04e;
--yellow-2: #f6aa07;
--shadow: 0 12px 28px rgba(35, 100, 177, 0.12);
--shadow-soft: 0 8px 18px rgba(35, 100, 177, 0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
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;
}
.hub-page {
padding: 22px 0 28px;
}
.breadcrumb-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 14px;
font-size: 13px;
font-weight: 800;
color: #5f7ea5;
}
.breadcrumb-bar a {
color: #2364a7;
text-decoration: none;
}
.breadcrumb-bar a:hover {
text-decoration: underline;
}
.breadcrumb-sep {
opacity: .7;
}
.header {
padding: 10px 0 12px;
background: linear-gradient(180deg, rgba(100,171,238,.92), rgba(120,192,248,.85));
border-bottom: 1px solid rgba(255,255,255,.38);
box-shadow: 0 8px 20px rgba(28, 100, 177, .08);
position: relative;
z-index: 5;
}
.header-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
}
.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: 10px;
flex-wrap: nowrap;
white-space: nowrap;
}
.pill {
border: 0;
border-radius: 14px;
padding: 10px 16px;
color: #fff;
font-size: 14px;
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); }
.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-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 { padding: 24px 0 42px; }
.hero {
display: grid;
grid-template-columns: 1fr .62fr;
gap: 22px;
align-items: stretch;
background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.94));
border-radius: 34px;
box-shadow: var(--shadow);
padding: 15px 15px;
}
.hero-tag {
display: inline-block;
padding: 5px 10px;
border-radius: 999px;
background: rgba(75,151,225,.10);
border: 1px solid rgba(75,151,225,.12);
color: var(--blue-4);
font-size: 11px;
font-weight: 500;
margin-bottom: 14px;
}
.hero h1 {
margin: 0 0 12px;
font-size: 20px;
line-height: 1.05;
color: #0d5db8;
}
.hero p {
margin: 0;
font-size: 13px;
line-height: 1.4;
color: #18599e;
max-width: 620px;
font-weight: 500;
}
.hero-actions {
margin-top: 22px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
min-height: 35px;
padding: 0 22px;
font-size: 13px;
font-weight: 900;
text-decoration: none;
box-shadow: var(--shadow-soft);
cursor: pointer;
}
.btn-primary {
color: #fff;
background: linear-gradient(180deg, var(--orange-1), var(--orange-3));
}
.btn-secondary {
color: var(--blue-4);
background: linear-gradient(180deg, #ffffff, #edf6ff);
border: 1px solid rgba(57,132,206,.14);
}
.quick-card {
background: linear-gradient(180deg, rgba(68,146,225,.98), rgba(40,116,200,.98));
color: #fff;
border-radius: 20px;
box-shadow: var(--shadow-soft);
padding: 9px 15px;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.quick-card .small {
font-size: 13px;
font-weight: 700;
opacity: .88;
margin-bottom: 6px;
}
.quick-card h2 {
margin: 0 0 8px;
font-size: 20px;
line-height: 1.1;
}
.quick-card p {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.35;
color: rgba(255,255,255,.92);
font-weight: 600;
}
.quick-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.metric {
border-radius: 12px;
background: rgba(255,255,255,.14);
padding: 9px 15px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.metric .label {
font-size: 12px;
opacity: .86;
margin-bottom: 6px;
font-weight: 700;
}
.metric .value {
font-size: 20px;
font-weight: 900;
line-height: 1;
}
.content-row {
margin-top: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.panel {
background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.96));
border-radius: 30px;
box-shadow: var(--shadow);
padding: 10px 20px;
}
.panel-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.panel-title h3 {
margin: 0;
font-size: 20px;
color: #0d5db8;
}
.panel-title a {
color: var(--muted);
text-decoration: none;
font-weight: 700;
font-size: 13px;
}
.popular-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.popular-card {
display: block;
background: linear-gradient(180deg, #ffffff, #fafdff);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid rgba(255,255,255,.7);
text-decoration: none;
color: inherit;
}
.popular-top {
height: 35px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
color: #fff;
font-size: 20px;
}
.popular-top-inner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
text-align: center;
}
.popular-top h4 {
font-size: 15px;
text-align: center;
margin: 0;
color: #fff;
font-weight: 800;
line-height: 1;
}
.popular-top.blue { background: linear-gradient(135deg, #79c2fb, #3997ee 65%, #2286e6); }
.popular-top.orange { background: linear-gradient(135deg, #ffd15b, #ffab22 60%, #ff8b15); }
.popular-top.green { background: linear-gradient(135deg, #9be67d, #68c84d 65%, #55b73d); }
.popular-body {
text-align: center;
padding: 4px 14px 16px;
}
.popular-body p {
margin: 0;
font-size: 13px;
color: var(--muted);
font-weight: 700;
line-height: 1.45;
}
.recent-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.recent-item {
display: block;
padding: 4px 15px;
border-radius: 12px;
background: linear-gradient(180deg, #ffffff, #f7fbff);
box-shadow: var(--shadow-soft);
text-decoration: none;
color: inherit;
}
.recent-title {
font-size: 14px;
font-weight: 900;
color: #18518f;
margin-bottom: 4px;
}
.recent-meta {
font-size: 11px;
color: var(--muted);
font-weight: 700;
}
.stats-shell {
margin-top: 24px;
background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.97));
border-radius: 34px;
box-shadow: var(--shadow);
padding: 12px 24px;
}
.stats-title {
text-align: center;
margin-bottom: 12px;
font-size: 20px;
font-weight: 900;
color: #0d5db8;
}
.stats-grid {
display: grid;
grid-template-columns: 1.02fr .99fr .99fr;
gap: 14px;
align-items: start;
}
.stats-col {
background: rgba(255,255,255,.72);
border-radius: 20px;
border: 1px solid rgba(50,120,195,.10);
padding: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
min-height: 100%;
}
.stats-col + .stats-col {
position: relative;
}
.stats-col + .stats-col::before {
content: "";
position: absolute;
left: -10px;
top: 12px;
bottom: 12px;
width: 1px;
background: rgba(17,79,149,.08);
}
.small-title {
margin: 0 0 12px;
color: #0d5db8;
font-size: 15px;
font-weight: 900;
text-align: center;
}
.summary-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.summary-card {
padding: 10px 12px;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff, #f2f8ff);
box-shadow: var(--shadow-soft);
min-height: 72px;
}
.summary-label {
font-size: 12px;
color: var(--muted);
font-weight: 800;
margin-bottom: 6px;
}
.summary-value {
font-size: 21px;
color: #0d5db8;
font-weight: 900;
line-height: 1;
margin-bottom: 4px;
}
.summary-sub {
font-size: 12px;
color: #7390af;
font-weight: 700;
}
.divider {
height: 1px;
background: var(--line);
margin: 12px 0;
}
.cat-row, .sub-row {
margin-bottom: 10px;
}
.cat-row:last-child, .sub-row:last-child {
margin-bottom: 0;
}
.cat-head, .sub-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: baseline;
margin-bottom: 4px;
}
.cat-name, .group-name {
color: #18518f;
font-weight: 900;
}
.cat-name {
font-size: 15px;
}
.cat-total, .sub-total {
font-size: 13px;
color: var(--muted);
font-weight: 500;
white-space: nowrap;
}
.group-name {
font-size: 15px;
margin: 0 0 8px;
}
.sub-name {
font-size: 14px;
font-weight: 600;
color: #18518f;
}
.bar {
height: 10px;
background: linear-gradient(180deg, #e7f1fd, #dbeafb);
border-radius: 999px;
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(40,100,170,.08);
}
.bar > span {
display: block;
height: 100%;
border-radius: 999px;
}
.fill-blue { background: linear-gradient(90deg, #8fd0ff, #2f94ed 65%, #1b75d7); }
.fill-orange { background: linear-gradient(90deg, #ffd15a, #ffae25 60%, #ff8b18); }
.fill-green { background: linear-gradient(90deg, #98e579, #67c64a 60%, #57b63f); }
.fill-yellow { background: linear-gradient(90deg, #ffe06f, #f7ba1b 60%, #eea400); }
.category-group {
margin-bottom: 14px;
}
.category-group:last-child { margin-bottom: 0; }
.footer-space { height: 10px; }
.nav-item {
position: relative;
display: inline-flex;
align-items: center;
}
.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));
}
.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: 0 6px 12px rgba(35,100,177,.12);
}
.menu-icon.green { background: linear-gradient(180deg, #89da69, #59bb3e); }
.menu-icon.blue { background: linear-gradient(180deg, #67baf4, #2f88ea); }
.menu-icon.yellow { background: linear-gradient(180deg, #ffd45e, #f4ac10); }
.menu-icon.purple { background: linear-gradient(180deg, #9c7af2, #6b49dd); }
.menu-arrow {
color: #0d5db8;
font-size: 24px;
line-height: 1;
}
.pill:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
.mail-btn:hover, .profile-chip:hover {
background: linear-gradient(180deg, #ffffff, #e4f1ff);
transform: translateY(-1px);
}
.btn-primary:hover {
background: linear-gradient(180deg, #ffc35a, #ff8617);
transform: translateY(-1px);
}
.btn-secondary:hover {
background: linear-gradient(180deg, #ffffff, #e3f1ff);
transform: translateY(-1px);
}
.popular-card:hover, .recent-item:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(35, 100, 177, 0.14);
}
.panel-title a:hover {
color: var(--blue-4);
text-decoration: underline;
}
.pill, .mail-btn, .profile-chip, .btn, .popular-card, .recent-item, .panel-title a {
transition: all .18s ease;
}
.site-footer {
margin-top: 22px;
padding: 24px 0 22px;
background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(235,246,255,.92));
border-top: 1px solid rgba(170,204,238,.62);
border-radius: 26px 26px 0 0;
box-shadow: 0 -10px 24px rgba(35,100,177,.06);
}
.footer-grid {
width: min(1220px, calc(100% - 30px));
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 22px;
align-items: start;
}
.footer-col h4 {
margin: 0 0 8px;
font-size: 16px;
color: #0f4d91;
font-weight: 900;
}
.footer-col p {
margin: 0;
color: #5d7da4;
font-size: 14px;
line-height: 1.55;
font-weight: 600;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 7px;
}
.footer-links a {
color: #2364a7;
text-decoration: none;
font-weight: 700;
font-size: 14px;
transition: color .18s ease;
}
.footer-links a:hover {
color: var(--blue-4);
text-decoration: underline;
}
.footer-bottom {
width: min(1220px, calc(100% - 30px));
margin: 18px auto 0;
padding-top: 14px;
border-top: 1px solid rgba(170,204,238,.56);
color: #6b86aa;
font-size: 13px;
font-weight: 700;
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
@media (max-width: 1120px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.header-row {
grid-template-columns: 1fr;
justify-items: center;
gap: 12px;
}
.brand {
align-items: center;
min-width: 0;
}
.header-actions {
min-width: 0;
}
.hero {
grid-template-columns: 1fr;
}
.content-row {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: 1fr;
}
.stats-col + .stats-col::before {
display: none;
}
}
@media (max-width: 900px) {
.dropdown-menu { width: 266px; }
.popular-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.summary-cards {
grid-template-columns: 1fr 1fr;
}
.hero p {
font-size: 15px;
}
.brand img {
height: 42px;
}
}
@media (max-width: 560px) {
.dropdown-menu { width: min(266px, calc(100vw - 32px)); }
.summary-cards {
grid-template-columns: 1fr;
}
.quick-metrics {
grid-template-columns: 1fr;
}
}
.subpage-shell {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-radius: 26px;
box-shadow: var(--shadow);
padding: 20px 24px 24px;
}
.subpage-title {
margin: 0 0 8px;
font-size: 24px;
line-height: 1.18;
color: #0f4d91;
}
.subpage-intro {
max-width: 780px;
font-size: 14px;
line-height: 1.6;
color: #496d99;
}
.subpage-actions-shell {
margin-top: 18px;
padding: 14px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(247,251,255,.94), rgba(238,247,255,.96));
border: 1px solid rgba(170,204,238,.62);
box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.exercise-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 248px));
gap: 12px;
align-items: stretch;
justify-content: center;
}
.exercise-card {
position: relative;
background: linear-gradient(180deg, #ffffff, #f7fbff);
border-radius: 18px;
border: 1px solid rgba(170,204,238,.62);
box-shadow: var(--shadow-soft);
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
min-height: 204px;
transform: translateY(0);
transition: transform .16s ease, box-shadow .16s ease;
}
.exercise-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 18px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
.exercise-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(35, 100, 177, 0.14);
}
.exercise-top {
padding: 8px 14px 7px;
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 14px;
font-weight: 900;
letter-spacing: -0.01em;
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
box-shadow: inset 0 2px 0 rgba(255,255,255,0.35);
}
.exercise-top.blue { background: linear-gradient(180deg, #4195ff, #1658df); }
.exercise-top.green { background: linear-gradient(180deg, #8adf67, #58ba3d); }
.exercise-top.orange { background: linear-gradient(180deg, #ffbb4d, #ff7f12); }
.exercise-icon {
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: rgba(255,255,255,0.22);
box-shadow: inset 0 2px 0 rgba(255,255,255,0.26);
}
.exercise-body {
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
flex: 1;
}
.exercise-copy {
display: grid;
gap: 8px;
align-content: start;
}
.exercise-title {
font-size: 20px;
font-weight: 900;
color: #244d95;
margin: 0;
}
.exercise-description {
margin: 0;
font-size: 14px;
line-height: 1.4;
color: #48628f;
}
.exercise-detail {
font-size: 13px;
line-height: 1.35;
color: #5e76a1;
margin: 0;
font-weight: 700;
}
.exercise-input {
margin: 0 auto;
width: 100%;
max-width: 170px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #ffffff, #eef3fb);
border: 1px solid rgba(170,204,238,.62);
border-radius: 12px;
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(49, 80, 130, 0.06);
}
.exercise-input .amount {
width: 62px;
padding: 5px 8px;
font-size: 17px;
font-weight: 900;
color: #244d95;
background: rgba(255,255,255,0.95);
border: 0;
border-right: 1px solid rgba(170,204,238,.62);
outline: none;
text-align: center;
font-family: inherit;
}
.exercise-input .amount::-webkit-outer-spin-button,
.exercise-input .amount::-webkit-inner-spin-button {
margin: 0;
}
.exercise-input .label {
padding: 5px 10px;
font-size: 13px;
font-weight: 800;
color: #5b74a2;
}
.exercise-button {
border: none;
border-radius: 999px;
padding: 8px 14px;
font-size: 14px;
font-weight: 900;
color: white;
cursor: pointer;
box-shadow: inset 0 2px 0 rgba(255,255,255,0.26), 0 4px 10px rgba(0,0,0,0.12);
transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.exercise-button.blue { background: linear-gradient(180deg, #4195ff, #1658df); }
.exercise-button.green { background: linear-gradient(180deg, #8adf67, #58ba3d); }
.exercise-button.orange { background: linear-gradient(180deg, #ffbb4d, #ff7f12); }
.exercise-button:hover {
filter: brightness(1.05);
box-shadow: inset 0 2px 0 rgba(255,255,255,0.30), 0 6px 14px rgba(0,0,0,0.16);
}
.exercise-button:active {
transform: translateY(1px);
box-shadow: inset 0 2px 0 rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.14);
}
@media (max-width: 1020px) {
.exercise-cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.subpage-shell { border-radius: 22px; padding: 18px; }
.subpage-title { font-size: 22px; }
.subpage-intro { font-size: 14px; }
.subpage-actions-shell { padding: 12px; }
.exercise-card { min-height: auto; }
}
</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, Emma</div>
</div>
<div class="nav-pills">
<div class="nav-item">
<button class="pill orange has-chevron" type="button" aria-expanded="false" aria-controls="rekenen-menu">🔢 Rekenen <span class="pill-caret">▾</span></button>
<div class="dropdown-menu" id="rekenen-menu">
<div class="menu-list">
<a href="#" class="menu-link is-active"><span class="menu-icon green">＋</span><span>Optellen</span><span class="menu-arrow">›</span></a>
<a href="#" class="menu-link"><span class="menu-icon blue">−</span><span>Aftrekken</span></a>
<a href="#" class="menu-link"><span class="menu-icon yellow">×</span><span>Vermenigvuldigen</span></a>
<a href="#" class="menu-link"><span class="menu-icon purple">÷</span><span>Delen</span></a>
</div>
</div>
</div>
<button class="pill blue">📖 Taal</button>
<button class="pill blue">🇬🇧 Engels</button>
<button class="pill yellow">✏️ Spelling</button>
<button class="pill green">🌍 Topografie</button>
</div>
<div class="header-actions">
<button class="mail-btn" aria-label="Berichten">✉️<span class="badge">3</span></button>
<button class="profile-chip" aria-label="Profiel"><span class="avatar">E</span></button>
</div>
</div>
</div>
</header>
<main class="hub-page">
<div class="wrap">
<nav class="breadcrumb-bar" aria-label="Breadcrumb">
<a href="#">Home</a>
<span class="breadcrumb-sep">›</span>
<a href="#">Rekenen</a>
<span class="breadcrumb-sep">›</span>
<span>Optellen</span>
</nav>
<section class="subpage-shell">
<div class="subpage-content">
<h1 class="subpage-title">Optellen oefenen</h1>
<p class="subpage-intro">In deze subcategorie oefen je met optelsommen tot en met 50. Kies hieronder of je verder wilt gaan met je laatste oefening, meteen een nieuwe reeks wilt starten of je eerdere resultaten wilt bekijken.</p>
<div class="subpage-actions-shell">
<div class="exercise-cards">
<article class="exercise-card">
<div class="exercise-top blue"><span class="exercise-icon">▶</span><span>Verder gaan</span></div>
<div class="exercise-body">
<div class="exercise-copy">
<p class="exercise-description">Ga verder met de laatste nog niet afgeronde oefening.</p>
<p class="exercise-detail">Nog 5 van de 20 resterend</p>
</div>
<button class="exercise-button blue" type="button">Verder gaan</button>
</div>
</article>
<article class="exercise-card">
<div class="exercise-top green"><span class="exercise-icon">＋</span><span>Start nieuwe</span></div>
<div class="exercise-body">
<div class="exercise-copy">
<p class="exercise-description">Maak een nieuwe set oefeningen en start direct.</p>
<div class="exercise-input"><input class="amount" type="number" value="15" min="1" max="100" aria-label="Aantal oefeningen"><span class="label">oefeningen</span></div>
</div>
<button class="exercise-button green" type="button">Start nieuwe</button>
</div>
</article>
<article class="exercise-card">
<div class="exercise-top orange"><span class="exercise-icon">⟳</span><span>Geschiedenis</span></div>
<div class="exercise-body">
<div class="exercise-copy">
<p class="exercise-description">Kijk terug naar eerder gemaakte oefeningen.</p>
<p class="exercise-detail">13 oefeningen afgerond</p>
</div>
<button class="exercise-button orange" type="button">Bekijk geschiedenis</button>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</main>
<footer class="site-footer">
<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>
</footer>
<script>
(function () {
const navItem = document.querySelector('.nav-item');
const trigger = navItem?.querySelector('.pill');
if (!navItem || !trigger) return;
trigger.addEventListener('click', function (event) {
event.preventDefault();
const isOpen = navItem.classList.toggle('open');
trigger.setAttribute('aria-expanded', String(isOpen));
});
document.addEventListener('click', function (event) {
if (!navItem.contains(event.target)) {
navItem.classList.remove('open');
trigger.setAttribute('aria-expanded', 'false');
}
});
})();
</script>
</body>
</html>