Skip to main content

oefenhub_leerling_01_frontpage_v6_3.html

Korte beschrijving​

Deze mockup toont de reguliere leerlingfrontpage na inloggen, met categorienavigatie, populaire categorieën, recent geoefend en statistieken.

De pagina helpt de leerling snel verder oefenen binnen het actieve niveau en toont samenvattende voortgang op basis van afgeronde oefenruns. De voorbeeldwaarden zijn fictief en kunnen per leerling, niveau en oefening verschillen.

Gerelateerde documentatie​

Bestand​

Broncode​

/mockups_html/leerling/oefenhub_leerling_01_frontpage_v6_3.html
<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>OefenHub - Frontpage Leerling</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);
    }

    .hero {
      display: grid;
      grid-template-columns: 1fr .62fr;
      gap: 22px;
      align-items: stretch;
      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 22px;
      margin-bottom: 16px;
    }

     .hero-tag {
      display: inline-block;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(75,151,225,.10);
      border: 1px solid rgba(75,151,225,.18);
      color: var(--blue-4);
      font-size: 11px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .hero h1 {
      margin: 0 0 8px;
      font-size: 22px;
      line-height: 1.2;
      color: #0f4d91;
    }

    .hero p {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
      color: #496d99;
      max-width: 660px;
      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);
      border: 1px solid rgba(255,255,255,.36);
      padding: 12px 16px;
      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: 15px;
      line-height: 1.45;
      color: rgba(255,255,255,.92);
      font-weight: 600;
    }

    .quick-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .metric {
      border-radius: 14px;
      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 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .panel {
      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);
      padding: 16px 20px 18px;
    }

    .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(170,204,238,.42);
      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: 9px 15px;
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff, #f7fbff);
      border: 1px solid rgba(170,204,238,.38);
      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: 20px;
      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);
      padding: 16px 24px 18px;
    }

    .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: 18px;
      align-items: start;
    }

    .stats-col {
      background: rgba(255,255,255,.76);
      border-radius: 20px;
      border: 1px solid rgba(170,204,238,.45);
      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);
      border: 1px solid rgba(170,204,238,.35);
      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);
      box-shadow: 0 -10px 24px rgba(35,100,177,.06);
      border-radius: 26px 26px 0 0;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr 1fr;
      gap: 36px;
      align-items: start;
    }

    .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: 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;
      }
    }

  </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">
      <section class="hero">
      <div>
        <div class="hero-tag">Actief niveau: Basisschool - Groep 7</div>
        <h1>Klaar om verder te oefenen?</h1>
        <p>Oefen, leer en word steeds beter. Kies hierboven een categorie of ga direct verder waar je gebleven was.</p>

        <div class="hero-actions">
          <button class="btn btn-primary">Verder waar ik was</button>
          <button class="btn btn-secondary">Bekijk categorieën</button>
        </div>
      </div>

      <div class="quick-card">
        <div class="small">Vandaag</div>
        <h2>Jouw snelle start</h2>
        <p>Je hebt deze week al 23 oefeningen gemaakt. Goed bezig!</p>
        <div class="quick-metrics">
          <div class="metric">
            <div class="label">Deze week</div>
            <div class="value">23</div>
          </div>
          <div class="metric">
            <div class="label">Favoriet</div>
            <div class="value" style="font-size:20px;">Rekenen</div>
          </div>
        </div>
      </div>
    </section>

      <section class="content-row">
      <div class="panel">
        <div class="panel-title">
          <h3>Populaire categorieën</h3>
          <a href="#">Alles bekijken</a>
        </div>
        <div class="popular-grid">
          <a href="#" class="popular-card">
            <div class="popular-top blue"><div class="popular-top-inner"><span>🔢</span><h4>Rekenen</h4></div></div>
            <div class="popular-body">
              <p>Optellen · Aftrekken · Tafels</p>
            </div>
          </a>

          <a href="#" class="popular-card">
            <div class="popular-top orange"><div class="popular-top-inner"><span>📖</span><h4>Taal</h4></div></div>
            <div class="popular-body">
              <p>Spelling · Lezen · Woordenschat</p>
            </div>
          </a>

          <a href="#" class="popular-card">
            <div class="popular-top green"><div class="popular-top-inner"><span>🇬🇧</span><h4>Engels</h4></div></div>
            <div class="popular-body">
              <p>Woorden · Zinnen · Begrijpen</p>
            </div>
          </a>
        </div>
      </div>

      <div class="panel">
        <div class="panel-title">
          <h3>Recent geoefend</h3>
          <a href="#">Geschiedenis</a>
        </div>
        <div class="recent-list">
          <a href="#" class="recent-item">
            <div class="recent-title">Rekenen → Tafels</div>
            <div class="recent-meta">Laatst geoefend: vandaag</div>
          </a>
          <a href="#" class="recent-item">
            <div class="recent-title">Taal → Begrijpend lezen</div>
            <div class="recent-meta">Laatst geoefend: gisteren</div>
          </a>
          <a href="#" class="recent-item">
            <div class="recent-title">Klokkijken → Hele uren</div>
            <div class="recent-meta">Laatst geoefend: 3 dagen geleden</div>
          </a>
        </div>
      </div>
    </section>

      <section class="stats-shell">
      <div class="stats-title">Statistieken</div>

      <div class="stats-grid">
        <div class="stats-col">
          <div class="small-title">Samenvatting</div>

          <div class="summary-cards">
            <div class="summary-card">
              <div class="summary-label">Totaal gemaakt</div>
              <div class="summary-value">153</div>
              <div class="summary-sub">alle oefeningen</div>
            </div>
            <div class="summary-card">
              <div class="summary-label">Deze maand</div>
              <div class="summary-value">37</div>
              <div class="summary-sub">nieuw afgerond</div>
            </div>
            <div class="summary-card">
              <div class="summary-label">Favoriete categorie</div>
              <div class="summary-value" style="font-size:18px;">Rekenen</div>
              <div class="summary-sub">meest geoefend</div>
            </div>
            <div class="summary-card">
              <div class="summary-label">Gem. tijd per vraag</div>
              <div class="summary-value">18s</div>
              <div class="summary-sub">afgelopen maand</div>
            </div>
          </div>

          <div class="divider"></div>

          <div class="cat-row">
            <div class="cat-head">
              <div class="cat-name">Rekenen</div>
              <div class="cat-total">58 oefeningen</div>
            </div>
            <div class="bar"><span class="fill-blue" style="width:92%;"></span></div>
          </div>

          <div class="cat-row">
            <div class="cat-head">
              <div class="cat-name">Taal</div>
              <div class="cat-total">19 oefeningen</div>
            </div>
            <div class="bar"><span class="fill-orange" style="width:42%;"></span></div>
          </div>

          <div class="cat-row">
            <div class="cat-head">
              <div class="cat-name">Klokkijken</div>
              <div class="cat-total">11 oefeningen</div>
            </div>
            <div class="bar"><span class="fill-green" style="width:28%;"></span></div>
          </div>

          <div class="cat-row">
            <div class="cat-head">
              <div class="cat-name">Topografie</div>
              <div class="cat-total">8 oefeningen</div>
            </div>
            <div class="bar"><span class="fill-yellow" style="width:20%;"></span></div>
          </div>
        </div>

        <div class="stats-col">
          <div class="category-group">
            <div class="group-name">Rekenen</div>

            <div class="sub-row">
              <div class="sub-head">
                <div class="sub-name">Optellen</div>
                <div class="sub-total">42 oefeningen</div>
              </div>
              <div class="bar"><span class="fill-blue" style="width:72%;"></span></div>
            </div>

            <div class="sub-row">
              <div class="sub-head">
                <div class="sub-name">Aftrekken</div>
                <div class="sub-total">31 oefeningen</div>
              </div>
              <div class="bar"><span class="fill-blue" style="width:55%;"></span></div>
            </div>

            <div class="sub-row">
              <div class="sub-head">
                <div class="sub-name">Tafels</div>
                <div class="sub-total">58 oefeningen</div>
              </div>
              <div class="bar"><span class="fill-blue" style="width:90%;"></span></div>
            </div>
          </div>

          <div class="category-group">
            <div class="group-name">Taal</div>

            <div class="sub-row">
              <div class="sub-head">
                <div class="sub-name">Spelling</div>
                <div class="sub-total">19 oefeningen</div>
              </div>
              <div class="bar"><span class="fill-orange" style="width:44%;"></span></div>
            </div>

            <div class="sub-row">
              <div class="sub-head">
                <div class="sub-name">Begrijpend lezen</div>
                <div class="sub-total">11 oefeningen</div>
              </div>
              <div class="bar"><span class="fill-orange" style="width:26%;"></span></div>
            </div>
          </div>
        </div>

        <div class="stats-col">
          <div class="category-group">
            <div class="group-name">Klokkijken</div>

            <div class="sub-row">
              <div class="sub-head">
                <div class="sub-name">Hele uren</div>
                <div class="sub-total">7 oefeningen</div>
              </div>
              <div class="bar"><span class="fill-green" style="width:22%;"></span></div>
            </div>

            <div class="sub-row">
              <div class="sub-head">
                <div class="sub-name">Halve uren</div>
                <div class="sub-total">4 oefeningen</div>
              </div>
              <div class="bar"><span class="fill-green" style="width:12%;"></span></div>
            </div>
          </div>

          <div class="category-group">
            <div class="group-name">Topografie</div>

            <div class="sub-row">
              <div class="sub-head">
                <div class="sub-name">Nederland</div>
                <div class="sub-total">5 oefeningen</div>
              </div>
              <div class="bar"><span class="fill-yellow" style="width:18%;"></span></div>
            </div>

            <div class="sub-row">
              <div class="sub-head">
                <div class="sub-name">Europa</div>
                <div class="sub-total">3 oefeningen</div>
              </div>
              <div class="bar"><span class="fill-yellow" style="width:10%;"></span></div>
            </div>
          </div>
        </div>
      </div>
      </section>
    </div>
  </main>

  <footer class="site-footer">
    <div class="wrap">
      <div class="footer-grid">
        <div class="footer-col">
          <h4>OefenHub</h4>
          <p>OefenHub helpt kinderen spelenderwijs schoolvakken oefenen, herhalen en beter begrijpen. Alles overzichtelijk op één plek.</p>
        </div>

        <div class="footer-col">
          <h4>Handige Links</h4>
          <div class="footer-links">
            <a href="#">Over OefenHub</a>
            <a href="#">Contact</a>
            <a href="#">Privacybeleid</a>
          </div>
        </div>

        <div class="footer-col">
          <h4>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 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>