Kitten geboorte Calculator | 65 dagen \u2022 #AE9354 editie<\/title>\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n \/* basis achtergrond met zachte verdunning van #AE9354 *\/\n background: linear-gradient(145deg, #e7dfce 0%, #d6cbb3 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: 'Segoe UI', 'Poppins', 'Roboto', system-ui, -apple-system, 'Inter', sans-serif;\n padding: 1.5rem;\n }\n\n \/* kaart container met subtiele rand en lichte schaduw *\/\n .card {\n max-width: 650px;\n width: 100%;\n background: #fffdf9;\n border-radius: 64px 48px 64px 48px;\n box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2), 0 8px 18px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n transition: all 0.2s ease;\n }\n\n \/* HEADER: hoofdkleur #AE9354 en verdunningen voor patroon en accenten *\/\n .header {\n background: #AE9354; \/* hoofdkleur *\/\n background-image: radial-gradient(circle at 10% 20%, rgba(218, 195, 138, 0.45) 2%, transparent 2.5%);\n background-size: 28px 28px;\n padding: 1.8rem 2rem 1.2rem 2rem;\n text-align: center;\n color: white;\n border-bottom: 5px solid #dbbc86; \/* lichtere verdunning *\/\n }\n\n .header h1 {\n font-size: 2.1rem;\n letter-spacing: -0.3px;\n font-weight: 800;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n justify-content: center;\n text-shadow: 0 2px 3px rgba(0,0,0,0.1);\n }\n\n .header h1 span {\n background: #fef1dd;\n padding: 0 12px;\n border-radius: 100px;\n font-size: 1.5rem;\n color: #7c623b; \/* donkerdere variant *\/\n }\n\n .sub {\n margin-top: 12px;\n font-size: 1rem;\n font-weight: 500;\n background: rgba(0, 0, 0, 0.2);\n display: inline-block;\n padding: 4px 18px;\n border-radius: 40px;\n backdrop-filter: blur(2px);\n }\n\n \/* inhoud *\/\n .content {\n padding: 2rem 2rem 2rem 2rem;\n }\n\n .info-badge {\n background: #faf4e8; \/* zeer lichte verdunning *\/\n border-left: 7px solid #AE9354; \/* hoofdkleur *\/\n padding: 0.9rem 1.3rem;\n border-radius: 36px;\n margin-bottom: 2rem;\n font-size: 0.95rem;\n color: #4a3a28;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);\n }\n\n .info-badge strong {\n color: #8b6f3e; \/* verdonkerde variant maar warm *\/\n font-weight: 700;\n }\n\n .form-group {\n margin-bottom: 1.9rem;\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n font-size: 1.1rem;\n color: #5e4a2c; \/* donkerbruin uit de #AE9354 familie *\/\n margin-bottom: 10px;\n }\n\n label i {\n font-size: 1.4rem;\n }\n\n input {\n width: 100%;\n padding: 15px 18px;\n font-size: 1.1rem;\n border: 2px solid #dfd0b5; \/* lichte verdunning *\/\n border-radius: 60px;\n background: white;\n font-family: inherit;\n transition: 0.2s;\n color: #3f2e19;\n font-weight: 500;\n }\n\n input:focus {\n outline: none;\n border-color: #AE9354;\n box-shadow: 0 0 0 3px rgba(174, 147, 84, 0.3);\n }\n\n .button-group {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n margin: 1.8rem 0 1.2rem;\n }\n\n button {\n flex: 1;\n background: #b99c61; \/* iets lichtere variant van hoofdkleur *\/\n border: none;\n padding: 14px 18px;\n font-size: 1.05rem;\n font-weight: 700;\n border-radius: 60px;\n color: white;\n cursor: pointer;\n transition: all 0.2s ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n font-family: inherit;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);\n }\n\n button:first-child {\n background: #AE9354; \/* hoofdkleur *\/\n box-shadow: 0 4px 12px rgba(174, 147, 84, 0.35);\n }\n\n button:first-child:hover {\n background: #9a7d45; \/* donkerdere variant *\/\n transform: scale(0.97);\n }\n\n button:last-child {\n background: #cbb786; \/* zachtere verdunning *\/\n color: #4c3b21;\n }\n\n button:last-child:hover {\n background: #bca46e;\n transform: scale(0.97);\n color: white;\n }\n\n .result-container {\n margin-top: 2rem;\n background: #fdf8ef; \/* bijna wit met warme ondertoon *\/\n border-radius: 40px;\n padding: 1.4rem 1.8rem;\n border: 1px solid #e6d7be;\n transition: all 0.2s;\n }\n\n .result-title {\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-weight: 600;\n color: #AE9354;\n margin-bottom: 12px;\n }\n\n .birth-date {\n font-size: 2rem;\n font-weight: 800;\n color: #4f3a1f;\n background: white;\n display: inline-block;\n padding: 0.2rem 1.2rem;\n border-radius: 60px;\n margin: 12px 0 8px;\n letter-spacing: 1px;\n box-shadow: inset 0 0 0 1px #e9dabc, 0 4px 8px rgba(0,0,0,0.02);\n }\n\n .countdown {\n font-size: 1rem;\n margin-top: 12px;\n background: #f6efdf;\n padding: 10px 16px;\n border-radius: 40px;\n color: #7a5f36;\n font-weight: 500;\n }\n\n .footnote {\n font-size: 0.75rem;\n text-align: center;\n margin-top: 1.8rem;\n color: #aa8f60;\n border-top: 1px solid #ebddc6;\n padding-top: 1.2rem;\n }\n\n @media (max-width: 500px) {\n .card {\n border-radius: 40px 32px 40px 32px;\n }\n .header h1 {\n font-size: 1.5rem;\n }\n .birth-date {\n font-size: 1.4rem;\n word-break: break-word;\n }\n .content {\n padding: 1.5rem;\n }\n button {\n padding: 12px;\n }\n }\n\n \/* extra accent voor verdunning *\/\n .info-badge::before {\n content: \"\ud83d\udc3e\";\n margin-right: 8px;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"card\">\n <div class=\"header\">\n <h1>\n \ud83d\udc31 Kittenkalender \n <span>\ud83d\udc3e<\/span>\n <\/h1>\n <div class=\"sub\">Draagtijd calculator \u2014 65 dagen zwangerschap<\/div>\n <\/div>\n\n <div class=\"content\">\n <div class=\"info-badge\">\n \ud83d\udcc5 <strong>Precieze draagtijd<\/strong> Bij katten duurt een gezonde dracht gemiddeld 63\u201367 dagen. \n Deze calculator werkt met <strong>65 dagen<\/strong> als exacte termijn. Perfect voor fokkers en liefhebbers!\n\n\n \n <\/div>\n\n <div class=\"form-group\">\n <label>\n \ud83d\uddd3\ufe0f <span>Datum van dekking <\/span>\n <\/label>\n <input type=\"date\" id=\"matingDate\" value=\"\">\n <\/div>\n\n <div class=\"button-group\">\n <button id=\"calculateBtn\">\n \ud83d\udd4a\ufe0f Bereken uitgerekende datum\n <\/button>\n <button id=\"resetBtn\">\n \ud83d\udd04 Reset\n <\/button>\n <\/div>\n\n <div id=\"resultArea\" class=\"result-container\" style=\"display: none;\">\n <div class=\"result-title\">\ud83d\udc08 Uitgerekende geboortedatum (65 dagen na dekking)<\/div>\n <div class=\"birth-date\" id=\"dueDateDisplay\">\u2014<\/div>\n <div class=\"countdown\" id=\"countdownMessage\"><\/div>\n <\/div>\n \n <div id=\"errorMessage\" style=\"color: #b1622c; font-weight: 500; background: #fcf0e4; padding: 10px 18px; border-radius: 60px; margin-top: 1rem; display: none; text-align: center;\"><\/div>\n\n <div class=\"footnote\">\n \u2695\ufe0f * Raadpleeg bij twijfel altijd een dierenarts. Dit is een indicatieve berekening gebaseerd op 65 dagen draagtijd.\n\n<div class=\"footnote\">\n Gemaakt door Cattery Kalaisa in samenwerking met Studio Trettjin.\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n (function() {\n \/\/ CONSTANTE draagtijd in dagen (kat)\n const GESTATION_DAYS = 65;\n\n \/\/ DOM elementen\n const matingDateInput = document.getElementById('matingDate');\n const calculateBtn = document.getElementById('calculateBtn');\n const resetBtn = document.getElementById('resetBtn');\n const resultArea = document.getElementById('resultArea');\n const dueDateDisplay = document.getElementById('dueDateDisplay');\n const countdownMessage = document.getElementById('countdownMessage');\n const errorMessageDiv = document.getElementById('errorMessage');\n\n \/\/ Hulpfunctie om foutmelding te tonen en resultaat te verbergen\n function showError(msg) {\n errorMessageDiv.style.display = 'block';\n errorMessageDiv.innerText = msg;\n resultArea.style.display = 'none';\n }\n\n function hideError() {\n errorMessageDiv.style.display = 'none';\n errorMessageDiv.innerText = '';\n }\n\n \/\/ Toon het resultaat met de uitgerekende datum en countdown (of verstreken info)\n function displayResult(dueDate, matingDateObj) {\n if (!dueDate || isNaN(dueDate.getTime())) {\n showError(\"Ongeldige datumberekening. Probeer opnieuw.\");\n return;\n }\n \n \/\/ Formatteer de uitgerekende datum naar leesbare NL notatie\n const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };\n const formattedDue = dueDate.toLocaleDateString('nl-NL', options);\n dueDateDisplay.innerText = formattedDue;\n \n \/\/ Bepaal countdown of verstreken dagen ten opzichte van vandaag\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n const dueDateTime = new Date(dueDate);\n dueDateTime.setHours(0, 0, 0, 0);\n \n const diffTime = dueDateTime - today;\n const diffDays = Math.ceil(diffTime \/ (1000 * 60 * 60 * 24));\n \n let countdownText = \"\";\n if (diffDays > 0) {\n if (diffDays === 1) countdownText = `\ud83d\udc23 Nog 1 dag tot de verwachte geboorte! \ud83c\udf89`;\n else countdownText = `\u23f3 Nog ${diffDays} dagen tot de uitgerekende datum. Zorg voor een comfortabele werpkist!`;\n } else if (diffDays === 0) {\n countdownText = `\u2728 Vandaag is de verwachte geboortedag! Houd de poes goed in de gaten. \u2728`;\n } else {\n const daysOver = Math.abs(diffDays);\n if (daysOver === 1) countdownText = `\ud83d\udcc6 De verwachte datum was gisteren. Raadpleeg een dierenarts als de bevalling nog niet is begonnen.`;\n else countdownText = `\ud83d\udcc6 De verwachte geboortedatum is ${daysOver} dagen verstreken. Neem bij twijfel contact op met een dierenarts.`;\n }\n \n \/\/ Extra: dekking tot nu toe informatie \n const todayNoTime = new Date();\n todayNoTime.setHours(0,0,0,0);\n const matingDay = new Date(matingDateObj);\n matingDay.setHours(0,0,0,0);\n const daysSinceMating = Math.floor((todayNoTime - matingDay) \/ (1000*60*60*24));\n if (daysSinceMating >= 0 && daysSinceMating <= GESTATION_DAYS) {\n const progress = Math.round((daysSinceMating \/ GESTATION_DAYS) * 100);\n countdownText += ` (\ud83d\udc3e ${progress}% van de draagtijd voltooid, dag ${daysSinceMating}\/${GESTATION_DAYS})`;\n } else if (daysSinceMating > GESTATION_DAYS) {\n countdownText += ` (Draagtijd overschreden, ${daysSinceMating - GESTATION_DAYS} dagen voorbij de 65)`;\n }\n \n countdownMessage.innerText = countdownText;\n resultArea.style.display = 'block';\n hideError();\n }\n \n \/\/ Hoofdfunctie: bereken op basis van geselecteerde dekdatum\n function calculateDueDate() {\n const matingDateValue = matingDateInput.value;\n if (!matingDateValue) {\n showError(\"\u274c Kies een geldige dekdatum (wanneer de poes gedekt is).\");\n return false;\n }\n \n const matingDate = new Date(matingDateValue);\n if (isNaN(matingDate.getTime())) {\n showError(\"\u274c Ongeldige datum. Gebruik het datumveld.\");\n return false;\n }\n \n \/\/ Controle: dekking in de toekomst? dan waarschuwing\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n const matingDayOnly = new Date(matingDate);\n matingDayOnly.setHours(0, 0, 0, 0);\n \n if (matingDayOnly > today) {\n showError(\"\u26a0\ufe0f De dekdatum ligt in de toekomst. Kies een datum in het verleden of vandaag.\");\n return false;\n }\n \n \/\/ Bereken de geboortedatum: matingDate + GESTATION_DAYS dagen\n const dueDate = new Date(matingDate);\n dueDate.setDate(matingDate.getDate() + GESTATION_DAYS);\n \n \/\/ Extra controle: als de uitgerekende datum erg ver in het verleden is, maar toch laten we zien\n displayResult(dueDate, matingDate);\n return true;\n }\n \n \/\/ Reset alle velden en verberg resultaten\n function resetCalculator() {\n matingDateInput.value = '';\n resultArea.style.display = 'none';\n hideError();\n dueDateDisplay.innerText = '\u2014';\n countdownMessage.innerText = '';\n \/\/ focus gemak\n matingDateInput.focus();\n }\n \n \/\/ Event listeners\n calculateBtn.addEventListener('click', calculateDueDate);\n resetBtn.addEventListener('click', resetCalculator);\n \n \/\/ Als de gebruiker op Enter drukt in het datumveld, berekenen we ook.\n matingDateInput.addEventListener('keypress', function(event) {\n if (event.key === 'Enter') {\n event.preventDefault();\n calculateDueDate();\n }\n });\n \n \/\/ Wis error bij interactie zonder resultaat te wissen (gebruiksvriendelijk)\n matingDateInput.addEventListener('input', function() {\n if (errorMessageDiv.style.display === 'block') {\n hideError();\n }\n });\n \n \/\/ Kleine console log ter info\n console.log(\"\ud83d\udc31 Katten geboorte calculator (thema #AE9354) | Draagtijd = 65 dagen\");\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Nieuwe calculator Kitten geboorte Calculator | 65 dagen \u2022 #AE9354 editie \ud83d\udc31 Kittenkalender \ud83d\udc3e Draagtijd calculator \u2014 65 dagen zwangerschap \ud83d\udcc5 Precieze draagtijd Bij katten duurt een gezonde dracht gemiddeld 63\u201367 dagen. Deze calculator werkt met 65 dagen als exacte termijn. Perfect voor fokkers en liefhebbers! \ud83d\uddd3\ufe0f Datum van dekking \ud83d\udd4a\ufe0f Bereken uitgerekende datum \ud83d\udd04 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-74","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/pages\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":4,"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/pages\/74\/revisions"}],"predecessor-version":[{"id":148,"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/pages\/74\/revisions\/148"}],"wp:attachment":[{"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/media?parent=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":74,"date":"2026-02-14T11:41:23","date_gmt":"2026-02-14T11:41:23","guid":{"rendered":"https:\/\/test.bankstelherstel.nl\/?page_id=74"},"modified":"2026-04-08T15:21:08","modified_gmt":"2026-04-08T13:21:08","slug":"74-2","status":"publish","type":"page","link":"https:\/\/test.bankstelherstel.nl\/index.php\/74-2\/","title":{"rendered":"Kittencalculator"},"content":{"rendered":"

[planwisewp]<\/p>\n\n\n\nNieuwe calculator \n\n\n\n\n \n \n Kitten geboorte Calculator | 65 dagen \u2022 #AE9354 editie<\/title>\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n \/* basis achtergrond met zachte verdunning van #AE9354 *\/\n background: linear-gradient(145deg, #e7dfce 0%, #d6cbb3 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: 'Segoe UI', 'Poppins', 'Roboto', system-ui, -apple-system, 'Inter', sans-serif;\n padding: 1.5rem;\n }\n\n \/* kaart container met subtiele rand en lichte schaduw *\/\n .card {\n max-width: 650px;\n width: 100%;\n background: #fffdf9;\n border-radius: 64px 48px 64px 48px;\n box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2), 0 8px 18px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n transition: all 0.2s ease;\n }\n\n \/* HEADER: hoofdkleur #AE9354 en verdunningen voor patroon en accenten *\/\n .header {\n background: #AE9354; \/* hoofdkleur *\/\n background-image: radial-gradient(circle at 10% 20%, rgba(218, 195, 138, 0.45) 2%, transparent 2.5%);\n background-size: 28px 28px;\n padding: 1.8rem 2rem 1.2rem 2rem;\n text-align: center;\n color: white;\n border-bottom: 5px solid #dbbc86; \/* lichtere verdunning *\/\n }\n\n .header h1 {\n font-size: 2.1rem;\n letter-spacing: -0.3px;\n font-weight: 800;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n justify-content: center;\n text-shadow: 0 2px 3px rgba(0,0,0,0.1);\n }\n\n .header h1 span {\n background: #fef1dd;\n padding: 0 12px;\n border-radius: 100px;\n font-size: 1.5rem;\n color: #7c623b; \/* donkerdere variant *\/\n }\n\n .sub {\n margin-top: 12px;\n font-size: 1rem;\n font-weight: 500;\n background: rgba(0, 0, 0, 0.2);\n display: inline-block;\n padding: 4px 18px;\n border-radius: 40px;\n backdrop-filter: blur(2px);\n }\n\n \/* inhoud *\/\n .content {\n padding: 2rem 2rem 2rem 2rem;\n }\n\n .info-badge {\n background: #faf4e8; \/* zeer lichte verdunning *\/\n border-left: 7px solid #AE9354; \/* hoofdkleur *\/\n padding: 0.9rem 1.3rem;\n border-radius: 36px;\n margin-bottom: 2rem;\n font-size: 0.95rem;\n color: #4a3a28;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);\n }\n\n .info-badge strong {\n color: #8b6f3e; \/* verdonkerde variant maar warm *\/\n font-weight: 700;\n }\n\n .form-group {\n margin-bottom: 1.9rem;\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n font-size: 1.1rem;\n color: #5e4a2c; \/* donkerbruin uit de #AE9354 familie *\/\n margin-bottom: 10px;\n }\n\n label i {\n font-size: 1.4rem;\n }\n\n input {\n width: 100%;\n padding: 15px 18px;\n font-size: 1.1rem;\n border: 2px solid #dfd0b5; \/* lichte verdunning *\/\n border-radius: 60px;\n background: white;\n font-family: inherit;\n transition: 0.2s;\n color: #3f2e19;\n font-weight: 500;\n }\n\n input:focus {\n outline: none;\n border-color: #AE9354;\n box-shadow: 0 0 0 3px rgba(174, 147, 84, 0.3);\n }\n\n .button-group {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n margin: 1.8rem 0 1.2rem;\n }\n\n button {\n flex: 1;\n background: #b99c61; \/* iets lichtere variant van hoofdkleur *\/\n border: none;\n padding: 14px 18px;\n font-size: 1.05rem;\n font-weight: 700;\n border-radius: 60px;\n color: white;\n cursor: pointer;\n transition: all 0.2s ease;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n font-family: inherit;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);\n }\n\n button:first-child {\n background: #AE9354; \/* hoofdkleur *\/\n box-shadow: 0 4px 12px rgba(174, 147, 84, 0.35);\n }\n\n button:first-child:hover {\n background: #9a7d45; \/* donkerdere variant *\/\n transform: scale(0.97);\n }\n\n button:last-child {\n background: #cbb786; \/* zachtere verdunning *\/\n color: #4c3b21;\n }\n\n button:last-child:hover {\n background: #bca46e;\n transform: scale(0.97);\n color: white;\n }\n\n .result-container {\n margin-top: 2rem;\n background: #fdf8ef; \/* bijna wit met warme ondertoon *\/\n border-radius: 40px;\n padding: 1.4rem 1.8rem;\n border: 1px solid #e6d7be;\n transition: all 0.2s;\n }\n\n .result-title {\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-weight: 600;\n color: #AE9354;\n margin-bottom: 12px;\n }\n\n .birth-date {\n font-size: 2rem;\n font-weight: 800;\n color: #4f3a1f;\n background: white;\n display: inline-block;\n padding: 0.2rem 1.2rem;\n border-radius: 60px;\n margin: 12px 0 8px;\n letter-spacing: 1px;\n box-shadow: inset 0 0 0 1px #e9dabc, 0 4px 8px rgba(0,0,0,0.02);\n }\n\n .countdown {\n font-size: 1rem;\n margin-top: 12px;\n background: #f6efdf;\n padding: 10px 16px;\n border-radius: 40px;\n color: #7a5f36;\n font-weight: 500;\n }\n\n .footnote {\n font-size: 0.75rem;\n text-align: center;\n margin-top: 1.8rem;\n color: #aa8f60;\n border-top: 1px solid #ebddc6;\n padding-top: 1.2rem;\n }\n\n @media (max-width: 500px) {\n .card {\n border-radius: 40px 32px 40px 32px;\n }\n .header h1 {\n font-size: 1.5rem;\n }\n .birth-date {\n font-size: 1.4rem;\n word-break: break-word;\n }\n .content {\n padding: 1.5rem;\n }\n button {\n padding: 12px;\n }\n }\n\n \/* extra accent voor verdunning *\/\n .info-badge::before {\n content: \"\ud83d\udc3e\";\n margin-right: 8px;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"card\">\n <div class=\"header\">\n <h1>\n \ud83d\udc31 Kittenkalender \n <span>\ud83d\udc3e<\/span>\n <\/h1>\n <div class=\"sub\">Draagtijd calculator \u2014 65 dagen zwangerschap<\/div>\n <\/div>\n\n <div class=\"content\">\n <div class=\"info-badge\">\n \ud83d\udcc5 <strong>Precieze draagtijd<\/strong> Bij katten duurt een gezonde dracht gemiddeld 63\u201367 dagen. \n Deze calculator werkt met <strong>65 dagen<\/strong> als exacte termijn. Perfect voor fokkers en liefhebbers!\n\n\n \n <\/div>\n\n <div class=\"form-group\">\n <label>\n \ud83d\uddd3\ufe0f <span>Datum van dekking <\/span>\n <\/label>\n <input type=\"date\" id=\"matingDate\" value=\"\">\n <\/div>\n\n <div class=\"button-group\">\n <button id=\"calculateBtn\">\n \ud83d\udd4a\ufe0f Bereken uitgerekende datum\n <\/button>\n <button id=\"resetBtn\">\n \ud83d\udd04 Reset\n <\/button>\n <\/div>\n\n <div id=\"resultArea\" class=\"result-container\" style=\"display: none;\">\n <div class=\"result-title\">\ud83d\udc08 Uitgerekende geboortedatum (65 dagen na dekking)<\/div>\n <div class=\"birth-date\" id=\"dueDateDisplay\">\u2014<\/div>\n <div class=\"countdown\" id=\"countdownMessage\"><\/div>\n <\/div>\n \n <div id=\"errorMessage\" style=\"color: #b1622c; font-weight: 500; background: #fcf0e4; padding: 10px 18px; border-radius: 60px; margin-top: 1rem; display: none; text-align: center;\"><\/div>\n\n <div class=\"footnote\">\n \u2695\ufe0f * Raadpleeg bij twijfel altijd een dierenarts. Dit is een indicatieve berekening gebaseerd op 65 dagen draagtijd.\n\n<div class=\"footnote\">\n Gemaakt door Cattery Kalaisa in samenwerking met Studio Trettjin.\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n (function() {\n \/\/ CONSTANTE draagtijd in dagen (kat)\n const GESTATION_DAYS = 65;\n\n \/\/ DOM elementen\n const matingDateInput = document.getElementById('matingDate');\n const calculateBtn = document.getElementById('calculateBtn');\n const resetBtn = document.getElementById('resetBtn');\n const resultArea = document.getElementById('resultArea');\n const dueDateDisplay = document.getElementById('dueDateDisplay');\n const countdownMessage = document.getElementById('countdownMessage');\n const errorMessageDiv = document.getElementById('errorMessage');\n\n \/\/ Hulpfunctie om foutmelding te tonen en resultaat te verbergen\n function showError(msg) {\n errorMessageDiv.style.display = 'block';\n errorMessageDiv.innerText = msg;\n resultArea.style.display = 'none';\n }\n\n function hideError() {\n errorMessageDiv.style.display = 'none';\n errorMessageDiv.innerText = '';\n }\n\n \/\/ Toon het resultaat met de uitgerekende datum en countdown (of verstreken info)\n function displayResult(dueDate, matingDateObj) {\n if (!dueDate || isNaN(dueDate.getTime())) {\n showError(\"Ongeldige datumberekening. Probeer opnieuw.\");\n return;\n }\n \n \/\/ Formatteer de uitgerekende datum naar leesbare NL notatie\n const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };\n const formattedDue = dueDate.toLocaleDateString('nl-NL', options);\n dueDateDisplay.innerText = formattedDue;\n \n \/\/ Bepaal countdown of verstreken dagen ten opzichte van vandaag\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n const dueDateTime = new Date(dueDate);\n dueDateTime.setHours(0, 0, 0, 0);\n \n const diffTime = dueDateTime - today;\n const diffDays = Math.ceil(diffTime \/ (1000 * 60 * 60 * 24));\n \n let countdownText = \"\";\n if (diffDays > 0) {\n if (diffDays === 1) countdownText = `\ud83d\udc23 Nog 1 dag tot de verwachte geboorte! \ud83c\udf89`;\n else countdownText = `\u23f3 Nog ${diffDays} dagen tot de uitgerekende datum. Zorg voor een comfortabele werpkist!`;\n } else if (diffDays === 0) {\n countdownText = `\u2728 Vandaag is de verwachte geboortedag! Houd de poes goed in de gaten. \u2728`;\n } else {\n const daysOver = Math.abs(diffDays);\n if (daysOver === 1) countdownText = `\ud83d\udcc6 De verwachte datum was gisteren. Raadpleeg een dierenarts als de bevalling nog niet is begonnen.`;\n else countdownText = `\ud83d\udcc6 De verwachte geboortedatum is ${daysOver} dagen verstreken. Neem bij twijfel contact op met een dierenarts.`;\n }\n \n \/\/ Extra: dekking tot nu toe informatie \n const todayNoTime = new Date();\n todayNoTime.setHours(0,0,0,0);\n const matingDay = new Date(matingDateObj);\n matingDay.setHours(0,0,0,0);\n const daysSinceMating = Math.floor((todayNoTime - matingDay) \/ (1000*60*60*24));\n if (daysSinceMating >= 0 && daysSinceMating <= GESTATION_DAYS) {\n const progress = Math.round((daysSinceMating \/ GESTATION_DAYS) * 100);\n countdownText += ` (\ud83d\udc3e ${progress}% van de draagtijd voltooid, dag ${daysSinceMating}\/${GESTATION_DAYS})`;\n } else if (daysSinceMating > GESTATION_DAYS) {\n countdownText += ` (Draagtijd overschreden, ${daysSinceMating - GESTATION_DAYS} dagen voorbij de 65)`;\n }\n \n countdownMessage.innerText = countdownText;\n resultArea.style.display = 'block';\n hideError();\n }\n \n \/\/ Hoofdfunctie: bereken op basis van geselecteerde dekdatum\n function calculateDueDate() {\n const matingDateValue = matingDateInput.value;\n if (!matingDateValue) {\n showError(\"\u274c Kies een geldige dekdatum (wanneer de poes gedekt is).\");\n return false;\n }\n \n const matingDate = new Date(matingDateValue);\n if (isNaN(matingDate.getTime())) {\n showError(\"\u274c Ongeldige datum. Gebruik het datumveld.\");\n return false;\n }\n \n \/\/ Controle: dekking in de toekomst? dan waarschuwing\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n const matingDayOnly = new Date(matingDate);\n matingDayOnly.setHours(0, 0, 0, 0);\n \n if (matingDayOnly > today) {\n showError(\"\u26a0\ufe0f De dekdatum ligt in de toekomst. Kies een datum in het verleden of vandaag.\");\n return false;\n }\n \n \/\/ Bereken de geboortedatum: matingDate + GESTATION_DAYS dagen\n const dueDate = new Date(matingDate);\n dueDate.setDate(matingDate.getDate() + GESTATION_DAYS);\n \n \/\/ Extra controle: als de uitgerekende datum erg ver in het verleden is, maar toch laten we zien\n displayResult(dueDate, matingDate);\n return true;\n }\n \n \/\/ Reset alle velden en verberg resultaten\n function resetCalculator() {\n matingDateInput.value = '';\n resultArea.style.display = 'none';\n hideError();\n dueDateDisplay.innerText = '\u2014';\n countdownMessage.innerText = '';\n \/\/ focus gemak\n matingDateInput.focus();\n }\n \n \/\/ Event listeners\n calculateBtn.addEventListener('click', calculateDueDate);\n resetBtn.addEventListener('click', resetCalculator);\n \n \/\/ Als de gebruiker op Enter drukt in het datumveld, berekenen we ook.\n matingDateInput.addEventListener('keypress', function(event) {\n if (event.key === 'Enter') {\n event.preventDefault();\n calculateDueDate();\n }\n });\n \n \/\/ Wis error bij interactie zonder resultaat te wissen (gebruiksvriendelijk)\n matingDateInput.addEventListener('input', function() {\n if (errorMessageDiv.style.display === 'block') {\n hideError();\n }\n });\n \n \/\/ Kleine console log ter info\n console.log(\"\ud83d\udc31 Katten geboorte calculator (thema #AE9354) | Draagtijd = 65 dagen\");\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Nieuwe calculator Kitten geboorte Calculator | 65 dagen \u2022 #AE9354 editie \ud83d\udc31 Kittenkalender \ud83d\udc3e Draagtijd calculator \u2014 65 dagen zwangerschap \ud83d\udcc5 Precieze draagtijd Bij katten duurt een gezonde dracht gemiddeld 63\u201367 dagen. Deze calculator werkt met 65 dagen als exacte termijn. Perfect voor fokkers en liefhebbers! \ud83d\uddd3\ufe0f Datum van dekking \ud83d\udd4a\ufe0f Bereken uitgerekende datum \ud83d\udd04 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-74","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/pages\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":4,"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/pages\/74\/revisions"}],"predecessor-version":[{"id":148,"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/pages\/74\/revisions\/148"}],"wp:attachment":[{"href":"https:\/\/test.bankstelherstel.nl\/index.php\/wp-json\/wp\/v2\/media?parent=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}