{"id":987,"date":"2026-08-29T10:03:10","date_gmt":"2026-08-29T08:03:10","guid":{"rendered":"https:\/\/pieterbatenburg.com\/?p=987"},"modified":"2026-08-29T10:03:10","modified_gmt":"2026-08-29T08:03:10","slug":"pensioen-calculator","status":"publish","type":"post","link":"https:\/\/pieterbatenburg.com\/?p=987","title":{"rendered":"Pensioen calculator"},"content":{"rendered":"\n<!-- ================================================================= -->\n<!-- PENSIOEN AFTEL CALCULATOR - WORDPRESS MODULE                      -->\n<!-- Instructies voor WordPress:                                        -->\n<!-- 1. Open je pagina of bericht in WordPress.                         -->\n<!-- 2. Voeg een blok toe: kies voor \"Aangepaste HTML\" (Custom HTML).  -->\n<!-- 3. Plak de volledige inhoud van dit bestand in het blok.           -->\n<!-- ================================================================= -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&#038;family=Playfair+Display:ital,wght@0,600;0,700;1,400&#038;display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script>\n    if (typeof tailwind !== 'undefined') {\n        tailwind.config = {\n            theme: {\n                extend: {\n                    fontFamily: {\n                        sans: ['\"Plus Jakarta Sans\"', 'sans-serif'],\n                        serif: ['\"Playfair Display\"', 'serif'],\n                    }\n                }\n            }\n        };\n    }\n<\/script>\n\n<style>\n    #pensioen-calculator-wp-root {\n        font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;\n        box-sizing: border-box;\n    }\n    #pensioen-calculator-wp-root * {\n        box-sizing: border-box;\n    }\n    #pensioen-calculator-wp-root .glass-card {\n        background: rgba(255, 255, 255, 0.92);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n        border: 1px solid rgba(226, 232, 240, 0.8);\n    }\n    @keyframes wp-pulse-soft {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.8; }\n    }\n    #pensioen-calculator-wp-root .wp-pulse-soft {\n        animation: wp-pulse-soft 3s infinite;\n    }\n<\/style>\n\n<div id=\"pensioen-calculator-wp-root\" class=\"w-full my-6 bg-gradient-to-br from-amber-50\/70 via-teal-50\/50 to-emerald-100\/70 rounded-3xl p-4 sm:p-8 text-slate-800 shadow-xl border border-emerald-100\">\n    \n    <!-- HEADER -->\n    <header class=\"text-center mb-8\">\n        <div class=\"inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-bold bg-emerald-100 text-emerald-800 mb-3 shadow-sm border border-emerald-200\">\n            <svg class=\"w-4 h-4 text-emerald-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 14l9-5-9-5-9 5 9 5z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0112 20.055a11.952 11.952 0 01-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z\"><\/path><\/svg>\n            <span>Onderwijs Aftelkalender \u2022 Regio Zuid<\/span>\n        <\/div>\n        <h2 class=\"text-3xl sm:text-5xl font-extrabold text-slate-900 tracking-tight font-serif mb-2\">\n            Pensioen <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-500\">In Zicht<\/span>\n        <\/h2>\n        <p class=\"text-sm sm:text-base text-slate-600 max-w-xl mx-auto\">\n            Aftellen naar jouw welverdiende pensioen op <span class=\"font-bold text-emerald-700\">24 juli 2027<\/span>.\n        <\/p>\n    <\/header>\n\n    <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6\">\n        \n        <!-- LEFT COLUMN: COUNTDOWN + STATS -->\n        <div class=\"lg:col-span-2 space-y-6\">\n            \n            <!-- HERO COUNTDOWN CARD -->\n            <div class=\"glass-card rounded-3xl p-5 sm:p-7 shadow-md relative overflow-hidden\">\n                <div class=\"flex flex-wrap justify-between items-center gap-2 mb-5\">\n                    <div>\n                        <span class=\"text-[11px] uppercase tracking-wider text-emerald-700 font-bold\">Nauwkeurige Aftelling<\/span>\n                        <h3 class=\"text-lg font-bold text-slate-800\">Maanden &#038; Dagen over<\/h3>\n                    <\/div>\n                    <div class=\"bg-emerald-50 text-emerald-800 text-xs font-semibold px-3 py-1.5 rounded-xl border border-emerald-200 shadow-sm flex items-center gap-1.5\">\n                        <span class=\"w-2 h-2 rounded-full bg-emerald-500 animate-ping\"><\/span>\n                        <span>Pensioen: 24-07-2027<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Months & Days Display -->\n                <div class=\"grid grid-cols-2 gap-4 mb-6\">\n                    <div class=\"bg-white rounded-2xl p-4 sm:p-5 text-center shadow-sm border border-slate-100\">\n                        <span id=\"wp-countdown-months\" class=\"block text-4xl sm:text-6xl font-extrabold text-emerald-600 tracking-tight\">00<\/span>\n                        <span class=\"text-xs sm:text-sm font-semibold text-slate-500 uppercase tracking-widest mt-1 block\" id=\"wp-label-months\">Maanden<\/span>\n                    <\/div>\n                    <div class=\"bg-white rounded-2xl p-4 sm:p-5 text-center shadow-sm border border-slate-100\">\n                        <span id=\"wp-countdown-days\" class=\"block text-4xl sm:text-6xl font-extrabold text-teal-600 tracking-tight\">00<\/span>\n                        <span class=\"text-xs sm:text-sm font-semibold text-slate-500 uppercase tracking-widest mt-1 block\" id=\"wp-label-days\">Dagen<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- TEACHER SPECIAL: LESDAGEN TELLER -->\n                <div class=\"bg-gradient-to-r from-emerald-600 to-teal-700 text-white rounded-2xl p-4 sm:p-5 mb-5 shadow-md\">\n                    <div class=\"flex flex-col sm:flex-row items-center justify-between gap-3 text-center sm:text-left\">\n                        <div>\n                            <span class=\"text-[11px] font-bold uppercase tracking-wider text-emerald-200 block\">Onderwijs Berekening<\/span>\n                            <h4 class=\"text-base sm:text-lg font-extrabold\">Echte Lesdagen voor de klas<\/h4>\n                            <p class=\"text-xs text-emerald-100 mt-0.5\" id=\"wp-school-info-sub\">\n                                Berekend op basis van 3 werkdagen\/week en vakanties (Regio Zuid).\n                            <\/p>\n                        <\/div>\n                        <div class=\"bg-white\/15 px-5 py-2.5 rounded-2xl border border-white\/20 text-center min-w-[110px]\">\n                            <span id=\"wp-teacher-working-days\" class=\"block text-3xl font-extrabold text-white\">0<\/span>\n                            <span class=\"text-[10px] uppercase font-bold text-emerald-200 tracking-wider\">Lesdagen<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Live Ticker -->\n                <div class=\"bg-slate-900\/5 rounded-2xl p-3 sm:p-4 mb-5\">\n                    <h4 class=\"text-center text-[11px] text-slate-500 uppercase tracking-wider mb-2 font-semibold\">Live secondenteller<\/h4>\n                    <div class=\"flex justify-center items-center gap-4 text-slate-700 font-mono\">\n                        <div class=\"text-center\">\n                            <span id=\"wp-ticker-hours\" class=\"text-lg sm:text-2xl font-bold\">00<\/span>\n                            <span class=\"block text-[9px] text-slate-500 uppercase font-sans\">Uur<\/span>\n                        <\/div>\n                        <span class=\"text-slate-400 font-sans font-bold\">:<\/span>\n                        <div class=\"text-center\">\n                            <span id=\"wp-ticker-minutes\" class=\"text-lg sm:text-2xl font-bold\">00<\/span>\n                            <span class=\"block text-[9px] text-slate-500 uppercase font-sans\">Min<\/span>\n                        <\/div>\n                        <span class=\"text-slate-400 font-sans font-bold\">:<\/span>\n                        <div class=\"text-center\">\n                            <span id=\"wp-ticker-seconds\" class=\"text-lg sm:text-2xl font-bold text-emerald-600\">00<\/span>\n                            <span class=\"block text-[9px] text-slate-500 uppercase font-sans\">Sec<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Progress Section -->\n                <div class=\"space-y-2.5\">\n                    <div class=\"flex justify-between text-xs sm:text-sm font-medium\">\n                        <span class=\"text-slate-600\">Voortgang naar pensioen<\/span>\n                        <span id=\"wp-progress-percentage\" class=\"text-emerald-700 font-bold\">0%<\/span>\n                    <\/div>\n                    <div class=\"w-full bg-slate-200\/80 h-3 rounded-full overflow-hidden p-[2px]\">\n                        <div id=\"wp-progress-bar\" class=\"bg-gradient-to-r from-emerald-500 to-teal-400 h-full rounded-full transition-all duration-1000 wp-pulse-soft\" style=\"width: 0%\"><\/div>\n                    <\/div>\n                    <div class=\"flex justify-between text-[11px] text-slate-400 pt-0.5\">\n                        <span>Startdatum: <span class=\"text-emerald-700 font-semibold\" id=\"wp-label-start-date\">01-08-2025<\/span><\/span>\n                        <span>Einddatum: 24-07-2027<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- STATS ROW -->\n            <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-3\">\n                <div class=\"glass-card rounded-2xl p-3.5 text-center shadow-sm\">\n                    <span class=\"text-[10px] text-slate-500 uppercase tracking-wider font-bold block mb-1\">Totaal in dagen<\/span>\n                    <span id=\"wp-total-days-only\" class=\"text-xl sm:text-2xl font-bold text-slate-800\">&#8212;<\/span>\n                    <span class=\"text-[11px] text-slate-400 block\">kalenderdagen<\/span>\n                <\/div>\n                <div class=\"glass-card rounded-2xl p-3.5 text-center shadow-sm\">\n                    <span class=\"text-[10px] text-slate-500 uppercase tracking-wider font-bold block mb-1\">In Weken<\/span>\n                    <span id=\"wp-total-weeks\" class=\"text-xl sm:text-2xl font-bold text-slate-800\">&#8212;<\/span>\n                    <span class=\"text-[11px] text-slate-400 block\">weken &#038; dagen<\/span>\n                <\/div>\n                <div class=\"glass-card rounded-2xl p-3.5 text-center shadow-sm\">\n                    <span class=\"text-[10px] text-slate-500 uppercase tracking-wider font-bold block mb-1\">Vakantieweken over<\/span>\n                    <span id=\"wp-total-holiday-weeks\" class=\"text-xl sm:text-2xl font-bold text-emerald-600\">&#8212;<\/span>\n                    <span class=\"text-[11px] text-slate-400 block\">onderwijsvakanties<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- MILESTONES TIMELINE -->\n            <div class=\"glass-card rounded-3xl p-5 sm:p-6 shadow-sm\">\n                <h4 class=\"text-base font-bold text-slate-900 mb-3 flex items-center gap-2\">\n                    <svg class=\"w-4 h-4 text-amber-500\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z\"><\/path><\/svg>\n                    Mijlpalen Routekaart\n                <\/h4>\n                <div class=\"space-y-3.5\">\n                    <div class=\"relative pl-5 border-l-2 border-emerald-100 pb-1\">\n                        <div class=\"absolute -left-[5px] top-1.5 w-2.5 h-2.5 rounded-full bg-emerald-500\"><\/div>\n                        <div class=\"flex flex-col sm:flex-row sm:justify-between sm:items-center\">\n                            <span class=\"font-semibold text-xs sm:text-sm text-slate-800\">Halverwege de countdown (50%)<\/span>\n                            <span class=\"text-[11px] px-2 py-0.5 rounded bg-emerald-100 text-emerald-800 font-medium\" id=\"wp-ms-halverwege\">Berekenen&#8230;<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"relative pl-5 border-l-2 border-emerald-100 pb-1\">\n                        <div class=\"absolute -left-[5px] top-1.5 w-2.5 h-2.5 rounded-full bg-amber-500\"><\/div>\n                        <div class=\"flex flex-col sm:flex-row sm:justify-between sm:items-center\">\n                            <span class=\"font-semibold text-xs sm:text-sm text-slate-800\">Laatste Schooljaar gestart<\/span>\n                            <span class=\"text-[11px] px-2 py-0.5 rounded bg-amber-100 text-amber-800 font-medium\">1 september 2026<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"relative pl-5\">\n                        <div class=\"absolute -left-[5px] top-1.5 w-2.5 h-2.5 rounded-full bg-red-500\"><\/div>\n                        <div class=\"flex flex-col sm:flex-row sm:justify-between sm:items-center\">\n                            <span class=\"font-semibold text-xs sm:text-sm text-slate-800\">Start Pensioen &#038; Zomervakantie \ud83c\udf89<\/span>\n                            <span class=\"text-[11px] px-2 py-0.5 rounded bg-red-100 text-red-800 font-medium\">24 juli 2027<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n        <!-- RIGHT COLUMN: SETTINGS, INSPIRATION & BUCKETLIST -->\n        <div class=\"space-y-6\">\n            \n            <!-- SETTINGS \/ CONFIGURATION PANEL -->\n            <div class=\"glass-card rounded-3xl p-5 shadow-sm\">\n                <h4 class=\"text-xs uppercase tracking-wider font-bold text-slate-800 mb-3 flex items-center gap-1.5\">\n                    <svg class=\"w-4 h-4 text-emerald-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"><\/path><\/svg>\n                    Onderwijs Instellingen\n                <\/h4>\n\n                <div class=\"space-y-3.5\">\n                    <!-- Werkdagen selectie -->\n                    <div>\n                        <label class=\"block text-[11px] font-bold text-slate-700 uppercase mb-1.5\">Vaste Werkdagen (3 Dagen)<\/label>\n                        <div class=\"grid grid-cols-5 gap-1 text-center\" id=\"wp-workday-checkboxes\">\n                            <label class=\"cursor-pointer\"><input type=\"checkbox\" value=\"1\" class=\"sr-only peer\"><span class=\"block p-1.5 text-xs font-bold rounded-lg border border-slate-200 peer-checked:bg-emerald-600 peer-checked:text-white peer-checked:border-emerald-600\">Ma<\/span><\/label>\n                            <label class=\"cursor-pointer\"><input type=\"checkbox\" value=\"2\" class=\"sr-only peer\"><span class=\"block p-1.5 text-xs font-bold rounded-lg border border-slate-200 peer-checked:bg-emerald-600 peer-checked:text-white peer-checked:border-emerald-600\">Di<\/span><\/label>\n                            <label class=\"cursor-pointer\"><input type=\"checkbox\" value=\"3\" class=\"sr-only peer\"><span class=\"block p-1.5 text-xs font-bold rounded-lg border border-slate-200 peer-checked:bg-emerald-600 peer-checked:text-white peer-checked:border-emerald-600\">Wo<\/span><\/label>\n                            <label class=\"cursor-pointer\"><input type=\"checkbox\" value=\"4\" class=\"sr-only peer\"><span class=\"block p-1.5 text-xs font-bold rounded-lg border border-slate-200 peer-checked:bg-emerald-600 peer-checked:text-white peer-checked:border-emerald-600\">Do<\/span><\/label>\n                            <label class=\"cursor-pointer\"><input type=\"checkbox\" value=\"5\" class=\"sr-only peer\"><span class=\"block p-1.5 text-xs font-bold rounded-lg border border-slate-200 peer-checked:bg-emerald-600 peer-checked:text-white peer-checked:border-emerald-600\">Vr<\/span><\/label>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Regio -->\n                    <div>\n                        <label class=\"block text-[11px] font-bold text-slate-700 uppercase mb-1\">Onderwijs Regio<\/label>\n                        <select id=\"wp-select-region\" class=\"w-full bg-white border border-slate-200 rounded-xl px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500\">\n                            <option value=\"Zuid\" selected>Regio Zuid (Ingesteld)<\/option>\n                            <option value=\"Midden\">Regio Midden<\/option>\n                            <option value=\"Noord\">Regio Noord<\/option>\n                        <\/select>\n                    <\/div>\n\n                    <!-- Extra Margedagen -->\n                    <div>\n                        <label class=\"block text-[11px] font-bold text-slate-700 uppercase mb-1\">Extra Margedagen \/ Vrij<\/label>\n                        <input type=\"number\" id=\"wp-input-marge-days\" min=\"0\" max=\"100\" value=\"0\" class=\"w-full bg-white border border-slate-200 rounded-xl px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500\" placeholder=\"Aantal extra losse vrije dagen\">\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- INSPIRATIE KAART -->\n            <div class=\"bg-gradient-to-br from-emerald-800 to-teal-900 text-white rounded-3xl p-5 shadow-md relative overflow-hidden\">\n                <h4 class=\"text-[10px] uppercase tracking-wider text-emerald-300 font-bold mb-2\">Pensioen Inspiratie<\/h4>\n                <blockquote class=\"font-serif italic text-sm sm:text-base text-emerald-50 mb-2\" id=\"wp-quote-text\">\n                    &#8220;Pensioen is de beloning voor jaren van passie voor de klas.&#8221;\n                <\/blockquote>\n                <p class=\"text-[11px] text-emerald-300\/80 mb-3\" id=\"wp-quote-author\">\u2014 Docent Wijsheid<\/p>\n                \n                <button type=\"button\" id=\"wp-btn-new-quote\" class=\"inline-flex items-center gap-1.5 text-[11px] text-emerald-100 hover:text-white bg-white\/10 px-2.5 py-1 rounded-lg border border-white\/10\">\n                    <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 1121.27 15H18\"><\/path><\/svg>\n                    Ander citaat\n                <\/button>\n            <\/div>\n\n            <!-- BUCKETLIST -->\n            <div class=\"glass-card rounded-3xl p-5 shadow-sm\">\n                <h4 class=\"text-sm font-bold text-slate-900 mb-1 flex items-center gap-1.5\">\n                    <svg class=\"w-4 h-4 text-teal-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\"><\/path><\/svg>\n                    Pensioen Bucketlist\n                <\/h4>\n                <p class=\"text-[11px] text-slate-500 mb-3\">Plannen voor als de schoolbel straks stil is:<\/p>\n                \n                <form id=\"wp-bucket-form\" class=\"flex gap-1.5 mb-3\">\n                    <input type=\"text\" id=\"wp-bucket-input\" placeholder=\"Bijv. Reizen buiten het hoogseizoen...\" required class=\"flex-1 bg-white border border-slate-200 rounded-xl px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-emerald-500\">\n                    <button type=\"submit\" class=\"bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl px-3 py-1.5 text-xs font-bold transition-colors\">+<\/button>\n                <\/form>\n\n                <div id=\"wp-bucket-list\" class=\"space-y-1.5 max-h-48 overflow-y-auto pr-1\"><\/div>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    \/\/ 24 juli 2027 Pensioendatum\n    const targetDate = new Date(\"2027-07-24T17:00:00\");\n    const startDate = new Date(\"2025-08-01T00:00:00\");\n\n    let selectedWorkdays = [1, 2, 3]; \/\/ Ma, Di, Wo\n    let schoolRegion = \"Zuid\";\n    let margeDays = 0;\n\n    const quotes = [\n        { text: \"Pensioen is niet het einde van de weg, het is de start van de open snelweg.\", author: \"Anoniem\" },\n        { text: \"Een goede leerkracht plant zaadjes die eeuwig blijven bloeien. Nu is het tijd om te ontspannen!\", author: \"Onderwijs Inspiratie\" },\n        { text: \"Het mooiste aan pensioen in het onderwijs? Altijd vakantie, \u00f3\u00f3k buiten het hoogseizoen!\", author: \"Oud-Docent\" },\n        { text: \"Geen wekkers meer om 06:30 uur, geen toetsen nakijken in het weekend. Geniet van je tijd.\", author: \"Vrijheidsdenker\" }\n    ];\n\n    let bucketList = [\n        { id: 1, text: \"Op vakantie buiten het dure hoogseizoen \u2708\ufe0f\", done: false },\n        { id: 2, text: \"Uitslapen op maandagochtend met rustige koffie \u2615\", done: true },\n        { id: 3, text: \"Gezellige afscheidsborrel met het schoolteam \ud83e\udd42\", done: false }\n    ];\n\n    \/\/ Offici\u00eble schoolvakanties Regio Zuid (en referentie voor Midden\/Noord)\n    const holidays = {\n        \"Zuid\": [\n            [\"2025-07-12\", \"2025-08-24\"],\n            [\"2025-10-18\", \"2025-10-26\"],\n            [\"2025-12-20\", \"2026-01-04\"],\n            [\"2026-02-14\", \"2026-02-22\"], \/\/ Carnaval \/ Voorjaar Zuid\n            [\"2026-04-25\", \"2026-05-03\"],\n            [\"2026-07-11\", \"2026-08-23\"],\n            [\"2026-10-17\", \"2026-10-25\"],\n            [\"2026-12-19\", \"2027-01-03\"],\n            [\"2027-02-06\", \"2027-02-14\"], \/\/ Carnaval \/ Voorjaar Zuid\n            [\"2027-04-24\", \"2027-05-02\"],\n            [\"2027-07-24\", \"2027-09-05\"]\n        ],\n        \"Midden\": [\n            [\"2025-07-19\", \"2025-08-31\"], [\"2025-10-18\", \"2025-10-26\"], [\"2025-12-20\", \"2026-01-04\"],\n            [\"2026-02-21\", \"2026-03-01\"], [\"2026-04-25\", \"2026-05-03\"], [\"2026-07-18\", \"2026-08-30\"],\n            [\"2026-10-17\", \"2026-10-25\"], [\"2026-12-19\", \"2027-01-03\"], [\"2027-02-20\", \"2027-02-28\"],\n            [\"2027-04-24\", \"2027-05-02\"]\n        ],\n        \"Noord\": [\n            [\"2025-07-05\", \"2025-08-17\"], [\"2025-10-11\", \"2025-10-19\"], [\"2025-12-20\", \"2026-01-04\"],\n            [\"2026-02-21\", \"2026-03-01\"], [\"2026-04-25\", \"2026-05-03\"], [\"2026-07-04\", \"2026-08-16\"],\n            [\"2026-10-10\", \"2026-10-18\"], [\"2026-12-19\", \"2027-01-03\"], [\"2027-02-20\", \"2027-02-28\"],\n            [\"2027-04-24\", \"2027-05-02\"]\n        ]\n    };\n\n    function calculateMonthsAndDays(start, end) {\n        let years = end.getFullYear() - start.getFullYear();\n        let months = end.getMonth() - start.getMonth();\n        let days = end.getDate() - start.getDate();\n\n        if (days < 0) {\n            months--;\n            let prevMonth = new Date(end.getFullYear(), end.getMonth(), 0);\n            days += prevMonth.getDate();\n        }\n        if (months < 0) {\n            years--;\n            months += 12;\n        }\n        return { months: (years * 12) + months, days: days };\n    }\n\n    function calculateTeacherDays(start, end) {\n        let current = new Date(start);\n        current.setHours(0, 0, 0, 0);\n        let target = new Date(end);\n        target.setHours(23, 59, 59, 999);\n\n        let activeHolidays = holidays[schoolRegion] || holidays[\"Zuid\"];\n        let workDays = 0;\n        let holidayDays = 0;\n\n        while (current <= target) {\n            let dayOfWeek = current.getDay();\n            let dateStr = current.toISOString().split('T')[0];\n            let isHoliday = activeHolidays.some(h => dateStr >= h[0] && dateStr <= h[1]);\n\n            if (isHoliday) {\n                holidayDays++;\n            } else {\n                if (selectedWorkdays.includes(dayOfWeek)) {\n                    workDays++;\n                }\n            }\n            current.setDate(current.getDate() + 1);\n        }\n\n        return {\n            workDays: Math.max(0, workDays - margeDays),\n            holidayWeeks: Math.round(holidayDays \/ 7)\n        };\n    }\n\n    function updateView() {\n        const now = new Date();\n        const diffMs = targetDate - now;\n\n        if (diffMs <= 0) {\n            const mEl = document.getElementById('wp-countdown-months');\n            const dEl = document.getElementById('wp-countdown-days');\n            if (mEl) mEl.innerText = \"00\";\n            if (dEl) dEl.innerText = \"00\";\n            const pb = document.getElementById('wp-progress-bar');\n            if (pb) pb.style.width = \"100%\";\n            return;\n        }\n\n        \/\/ Maanden &#038; Dagen\n        const md = calculateMonthsAndDays(now, targetDate);\n        const mEl = document.getElementById('wp-countdown-months');\n        const dEl = document.getElementById('wp-countdown-days');\n        if (mEl) mEl.innerText = String(md.months).padStart(2, '0');\n        if (dEl) dEl.innerText = String(md.days).padStart(2, '0');\n\n        const lm = document.getElementById('wp-label-months');\n        const ld = document.getElementById('wp-label-days');\n        if (lm) lm.innerText = md.months === 1 ? 'Maand' : 'Maanden';\n        if (ld) ld.innerText = md.days === 1 ? 'Dag' : 'Dagen';\n\n        \/\/ Ticker\n        const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\n        const minutes = Math.floor((diffMs % (1000 * 60 * 60)) \/ (1000 * 60));\n        const seconds = Math.floor((diffMs % (1000 * 60)) \/ 1000);\n\n        const th = document.getElementById('wp-ticker-hours');\n        const tm = document.getElementById('wp-ticker-minutes');\n        const ts = document.getElementById('wp-ticker-seconds');\n        if (th) th.innerText = String(hours).padStart(2, '0');\n        if (tm) tm.innerText = String(minutes).padStart(2, '0');\n        if (ts) ts.innerText = String(seconds).padStart(2, '0');\n\n        \/\/ Totalen\n        const totalDays = Math.ceil(diffMs \/ (1000 * 60 * 60 * 24));\n        const tDaysEl = document.getElementById('wp-total-days-only');\n        if (tDaysEl) tDaysEl.innerText = totalDays;\n\n        const totalWeeks = Math.floor(totalDays \/ 7);\n        const remDays = totalDays % 7;\n        const twEl = document.getElementById('wp-total-weeks');\n        if (twEl) twEl.innerText = `${totalWeeks}w, ${remDays}d`;\n\n        \/\/ Lesdagen\n        const teacher = calculateTeacherDays(now, targetDate);\n        const twd = document.getElementById('wp-teacher-working-days');\n        if (twd) twd.innerText = teacher.workDays;\n\n        const hw = document.getElementById('wp-total-holiday-weeks');\n        if (hw) hw.innerText = teacher.holidayWeeks;\n\n        \/\/ Voortgang\n        const totalSpan = targetDate - startDate;\n        const passed = now - startDate;\n        let pct = (passed \/ totalSpan) * 100;\n        pct = Math.max(0, Math.min(100, pct));\n        \n        const pb = document.getElementById('wp-progress-bar');\n        const pp = document.getElementById('wp-progress-percentage');\n        if (pb) pb.style.width = pct.toFixed(2) + '%';\n        if (pp) pp.innerText = pct.toFixed(1) + '%';\n\n        \/\/ Mijlpaal halverwege\n        const halfDate = new Date(startDate.getTime() + (totalSpan \/ 2));\n        const halfEl = document.getElementById('wp-ms-halverwege');\n        if (halfEl) halfEl.innerText = halfDate.toLocaleDateString('nl-NL', { day: 'numeric', month: 'short', year: 'numeric' });\n    }\n\n    function renderBucket() {\n        const container = document.getElementById('wp-bucket-list');\n        if (!container) return;\n        container.innerHTML = '';\n\n        bucketList.forEach(item => {\n            const div = document.createElement('div');\n            div.className = \"flex items-center justify-between p-2 rounded-xl border text-xs \" + \n                (item.done ? \"bg-emerald-50 text-slate-400 line-through border-emerald-100\" : \"bg-white text-slate-700 border-slate-100 shadow-sm\");\n            div.innerHTML = `\n                <div class=\"flex items-center gap-2 flex-1 cursor-pointer\" onclick=\"window.wpToggleBucket(${item.id})\">\n                    <div class=\"w-3.5 h-3.5 rounded border flex items-center justify-center ${item.done ? 'bg-emerald-600 border-emerald-600 text-white' : 'border-slate-300'}\">\n                        ${item.done ? '\u2713' : ''}\n                    <\/div>\n                    <span>${item.text}<\/span>\n                <\/div>\n                <button type=\"button\" onclick=\"window.wpDeleteBucket(${item.id})\" class=\"text-slate-300 hover:text-red-500 px-1 font-bold\">\u00d7<\/button>\n            `;\n            container.appendChild(div);\n        });\n    }\n\n    window.wpToggleBucket = function(id) {\n        bucketList = bucketList.map(item => item.id === id ? { ...item, done: !item.done } : item);\n        renderBucket();\n    };\n\n    window.wpDeleteBucket = function(id) {\n        bucketList = bucketList.filter(item => item.id !== id);\n        renderBucket();\n    };\n\n    function initListeners() {\n        \/\/ Werkdagen checkboxes\n        const checkboxes = document.querySelectorAll('#wp-workday-checkboxes input[type=\"checkbox\"]');\n        checkboxes.forEach(cb => {\n            cb.checked = selectedWorkdays.includes(parseInt(cb.value, 10));\n            cb.addEventListener('change', () => {\n                const checked = document.querySelectorAll('#wp-workday-checkboxes input[type=\"checkbox\"]:checked');\n                selectedWorkdays = Array.from(checked).map(c => parseInt(c.value, 10));\n                updateView();\n            });\n        });\n\n        \/\/ Regio select\n        const regSelect = document.getElementById('wp-select-region');\n        if (regSelect) {\n            regSelect.addEventListener('change', (e) => {\n                schoolRegion = e.target.value;\n                const sub = document.getElementById('wp-school-info-sub');\n                if (sub) sub.innerText = `Berekend op basis van ${selectedWorkdays.length} werkdag(en)\/week en vakanties (Regio ${schoolRegion}).`;\n                updateView();\n            });\n        }\n\n        \/\/ Marge dagen\n        const margeInput = document.getElementById('wp-input-marge-days');\n        if (margeInput) {\n            margeInput.addEventListener('input', (e) => {\n                margeDays = parseInt(e.target.value, 10) || 0;\n                updateView();\n            });\n        }\n\n        \/\/ Citaat knop\n        const quoteBtn = document.getElementById('wp-btn-new-quote');\n        if (quoteBtn) {\n            quoteBtn.addEventListener('click', () => {\n                const q = quotes[Math.floor(Math.random() * quotes.length)];\n                document.getElementById('wp-quote-text').innerText = `\"${q.text}\"`;\n                document.getElementById('wp-quote-author').innerText = `\u2014 ${q.author}`;\n            });\n        }\n\n        \/\/ Bucketlist formulier\n        const bucketForm = document.getElementById('wp-bucket-form');\n        if (bucketForm) {\n            bucketForm.addEventListener('submit', (e) => {\n                e.preventDefault();\n                const input = document.getElementById('wp-bucket-input');\n                if (input && input.value.trim()) {\n                    bucketList.push({ id: Date.now(), text: input.value.trim(), done: false });\n                    input.value = '';\n                    renderBucket();\n                }\n            });\n        }\n    }\n\n    \/\/ Start direct of bij DOMContentLoaded\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', () => {\n            initListeners();\n            renderBucket();\n            updateView();\n            setInterval(updateView, 1000);\n        });\n    } else {\n        initListeners();\n        renderBucket();\n        updateView();\n        setInterval(updateView, 1000);\n    }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Onderwijs Aftelkalender \u2022 Regio Zuid Pensioen In Zicht Aftellen naar jouw welverdiende pensioen op 24 juli 2027. Nauwkeurige Aftelling Maanden &#038; Dagen over Pensioen: 24-07-2027 00 Maanden 00 Dagen Onderwijs Berekening Echte Lesdagen voor de klas Berekend op basis van 3 werkdagen\/week en vakanties (Regio Zuid). 0 Lesdagen Live secondenteller 00 Uur : 00 Min &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/pieterbatenburg.com\/?p=987\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Pensioen calculator&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-987","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/posts\/987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=987"}],"version-history":[{"count":1,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/posts\/987\/revisions"}],"predecessor-version":[{"id":988,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=\/wp\/v2\/posts\/987\/revisions\/988"}],"wp:attachment":[{"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pieterbatenburg.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}