diff --git a/ROADMAP.md b/ROADMAP.md
index f1c4c9b..658d12f 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -115,8 +115,9 @@ volgt.
- [x] **Grote leerlingweergave** (één dag, groot pictogram + vakkleur) en
**ouderweergave** (weekoverzicht), per leerling of groep.
- [x] Vakkleur duidelijk gebruikt in de weergaven.
-- [ ] Later: pictogrammen ook per losse activiteit/stap binnen een dag; dagdeel-
- indeling met picto's.
+- [x] **Dagdeel-indeling (Ochtend/Middag)** met koppen + scheidingslijn in de
+ leerling- en ouderweergave (grens 12:00).
+- [ ] Later: pictogrammen ook per losse activiteit/stap binnen een dagdeel.
## Later
diff --git a/frontend/src/pages.jsx b/frontend/src/pages.jsx
index 2e7b3f6..f03a8f3 100644
--- a/frontend/src/pages.jsx
+++ b/frontend/src/pages.jsx
@@ -2773,6 +2773,18 @@ export function EenvoudigRooster({ mode }) {
);
}
+ function dagdeelSecties(items, groot) {
+ const ocht = items.filter(({ t }) => (t.start_tijd || "") < "12:00");
+ const midd = items.filter(({ t }) => (t.start_tijd || "") >= "12:00");
+ const secties = [["Ochtend", "\u2600\uFE0F", ocht], ["Middag", "\uD83C\uDF24\uFE0F", midd]].filter(([, , arr]) => arr.length > 0);
+ return secties.map(([label, icon, arr]) => (
+
+
{icon} {label}
+
{arr.map((x) => blokKaart(x, groot))}
+
+ ));
+ }
+
return (
{ouder ? "Weekrooster" : "Mijn rooster"}
@@ -2805,7 +2817,7 @@ export function EenvoudigRooster({ mode }) {
{WEEKDAGEN[i].label} {fmtDM(datum)}
{vrij && {vrij.type_label}
}
{!vrij && items.length === 0 && —
}
- {!vrij && items.map((x) => blokKaart(x, false))}
+ {!vrij && dagdeelSecties(items, false)}
);
})}
@@ -2823,7 +2835,7 @@ export function EenvoudigRooster({ mode }) {
{vrij && {vrij.type_label}{vrij.omschrijving ? `: ${vrij.omschrijving}` : ""}
}
{!vrij && items.length === 0 && Geen lessen op deze dag.
}
- {!vrij && {items.map((x) => blokKaart(x, true))}
}
+ {!vrij && dagdeelSecties(items, true)}
);
})()}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 0aeed8e..85971d2 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -454,9 +454,18 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
.ez-dag-titel { font-size: 24px; font-weight: 800; }
.btn.groot { font-size: 24px; padding: 8px 20px; }
.ez-dag-blokken { display: flex; flex-direction: column; gap: 14px; }
-.ez-dag-blokken .ez-blok.groot { flex-direction: row; justify-content: flex-start; gap: 18px; padding: 16px 20px; border-width: 4px; }
+.ez-blok.groot { flex-direction: row; justify-content: flex-start; gap: 18px; padding: 16px 20px; border-width: 4px; }
.ez-blok.groot .ez-tijd { font-size: 22px; min-width: 70px; }
.ez-blok.groot .ez-picto { width: 84px; height: 84px; }
.ez-blok.groot .ez-emoji { font-size: 64px; }
.ez-blok.groot .ez-vak { font-size: 26px; }
.ez-vrij.groot { font-size: 22px; padding: 30px; }
+
+/* Dagdeel-indeling (ochtend/middag) in de eenvoudige weergave */
+.ez-dagdeel { margin-bottom: 16px; }
+.ez-dagdeel-kop { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; margin: 6px 0 8px; padding-bottom: 4px; border-bottom: 2px dashed var(--line); }
+.ez-dagdeel-icon { font-size: 22px; }
+.ez-dagdeel-blokken { display: flex; flex-direction: column; gap: 12px; }
+.ez-week .ez-dagdeel-kop { font-size: 13px; margin: 4px 0 6px; }
+.ez-week .ez-dagdeel-icon { font-size: 15px; }
+.ez-week .ez-dagdeel-blokken { gap: 8px; }