Memory \u2013 Dieren (eigen, reclamevrij)<\/title>\n <style>\n :root{\n --bg:#f9fafb;\n --card:#ffffff;\n --accent:#1d4ed8;\n --muted:#4b5563;\n --shadow: 0 6px 18px rgba(0,0,0,0.05);\n }\n html,body{height:100%}\n body{\n margin:0;\n font-family: Arial, sans-serif;\n background: linear-gradient(180deg, #eff6ff, #ffffff);\n display:flex;\n align-items:flex-start;\n justify-content:center;\n padding:20px;\n color:#111827;\n }\n .container{\n width:100%;\n max-width:800px;\n background:white;\n border-radius:12px;\n padding:20px;\n box-shadow:var(--shadow);\n }\n header{\n display:flex;\n flex-wrap:wrap;\n justify-content:space-between;\n align-items:center;\n }\n h1 { margin: 0 0 10px 0; font-size:24px; }\n .stats { display:flex; gap:10px; margin-bottom:10px; }\n .stat {\n background:var(--card);\n padding:6px 10px;\n border-radius:6px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.04);\n font-size:14px;\n }\n .controls { margin-bottom:15px; }\n button {\n padding:8px 14px;\n border:none;\n border-radius:6px;\n background:var(--accent);\n color:white;\n font-size:14px;\n cursor:pointer;\n }\n .grid {\n display:grid;\n gap:12px;\n justify-items: stretch;\n }\n @media (min-width: 600px) {\n .grid { grid-template-columns: repeat(4, 1fr); }\n }\n @media (max-width: 599px) {\n .grid { grid-template-columns: repeat(2, 1fr); }\n }\n .card {\n position: relative;\n width: 100%;\n padding-top: 100%;\n cursor: pointer;\n perspective: 800px;\n }\n .card-inner {\n position: absolute;\n width: 100%; height: 100%;\n transition: transform 0.4s;\n transform-style: preserve-3d;\n border-radius:8px;\n }\n .card.flipped .card-inner {\n transform: rotateY(180deg);\n }\n .face {\n position: absolute;\n width: 100%; height: 100%;\n backface-visibility: hidden;\n border-radius:8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 40px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n }\n .face.front {\n background: var(--accent);\n color: #fff;\n }\n .face.back {\n background: var(--card);\n transform: rotateY(180deg);\n }\n .message {\n margin-top:16px;\n padding:12px;\n background: #e5f4e3;\n border-radius:8px;\n display: none;\n font-size:16px;\n }\n .message.show {\n display: block;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>Memory \u2013 Dieren<\/h1>\n <div class=\"controls\">\n <button id=\"newGame\">Nieuw spel<\/button>\n <\/div>\n <\/header>\n <div class=\"stats\">\n <div class=\"stat\" id=\"moveCount\">Bewegingen: 0<\/div>\n <div class=\"stat\" id=\"foundPairs\">Gevonden paren: 0<\/div>\n <\/div>\n <div id=\"board\" class=\"grid\"><\/div>\n <div class=\"message\" id=\"message\"><\/div>\n <\/div>\n\n <script>\n \/\/ --- Instellingen \/ kaartendata ---\n \/\/ Vervang of breid uit met eigen afbeeldingen: zie commentaar hieronder.\n const animalCards = [\n { id: 'lion', label: '\ud83e\udd81' },\n { id: 'tiger', label: '\ud83d\udc2f' },\n { id: 'elephant', label: '\ud83d\udc18' },\n { id: 'giraffe', label: '\ud83e\udd92' },\n { id: 'monkey', label: '\ud83d\udc12' },\n { id: 'panda', label: '\ud83d\udc3c' },\n { id: 'frog', label: '\ud83d\udc38' },\n { id: 'dog', label: '\ud83d\udc36' }\n \/\/ je kunt meer dieren toevoegen, of bestaande overschrijven met bijv.\n \/\/ { id: 'bear', label: 'Beer', img: 'img\/bear.png' }\n \/\/ als je liever een afbeelding gebruikt i.p.v. emoji. \n ];\n\n let deck = [];\n let firstCard = null;\n let secondCard = null;\n let lock = false;\n let moves = 0;\n let found = 0;\n\n const boardEl = document.getElementById('board');\n const moveCountEl = document.getElementById('moveCount');\n const foundPairsEl = document.getElementById('foundPairs');\n const newGameBtn = document.getElementById('newGame');\n const messageEl = document.getElementById('message');\n\n function shuffle(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n return array;\n }\n\n function buildDeck() {\n const selected = animalCards.slice(0); \/\/ copy\n const pairSet = selected.slice(0, 8); \/\/ pak 8 dieren (of pas aan naar wens)\n let d = [];\n pairSet.forEach(card => {\n d.push({ ...card });\n d.push({ ...card });\n });\n return shuffle(d);\n }\n\n function renderBoard() {\n boardEl.innerHTML = '';\n deck.forEach((cardData, idx) => {\n const card = document.createElement('div');\n card.className = 'card';\n card.dataset.idx = idx;\n\n const inner = document.createElement('div');\n inner.className = 'card-inner';\n\n const front = document.createElement('div');\n front.className = 'face front';\n front.textContent = '?';\n\n const back = document.createElement('div');\n back.className = 'face back';\n\n if (cardData.img) {\n const img = document.createElement('img');\n img.src = cardData.img;\n img.alt = cardData.label;\n img.style.maxWidth = '80%';\n img.style.maxHeight = '80%';\n back.appendChild(img);\n } else {\n back.textContent = cardData.label;\n }\n\n inner.appendChild(front);\n inner.appendChild(back);\n card.appendChild(inner);\n\n card.addEventListener('click', onCardClick);\n boardEl.appendChild(card);\n });\n }\n\n function onCardClick(e) {\n if (lock) return;\n const card = e.currentTarget;\n const idx = card.dataset.idx;\n if (card.classList.contains('flipped')) return;\n\n card.classList.add('flipped');\n\n if (!firstCard) {\n firstCard = { card, idx };\n return;\n }\n\n secondCard = { card, idx };\n moves++;\n moveCountEl.textContent = `Bewegingen: ${moves}`;\n\n checkMatch();\n }\n\n function checkMatch() {\n const a = deck[firstCard.idx];\n const b = deck[secondCard.idx];\n if (a.id === b.id) {\n \/\/ match\n found++;\n foundPairsEl.textContent = `Gevonden paren: ${found}`;\n resetTurn();\n if (found === deck.length \/ 2) {\n showWin();\n }\n } else {\n lock = true;\n setTimeout(() => {\n firstCard.card.classList.remove('flipped');\n secondCard.card.classList.remove('flipped');\n resetTurn();\n }, 800);\n }\n }\n\n function resetTurn() {\n [firstCard, secondCard] = [null, null];\n lock = false;\n }\n\n function showWin() {\n messageEl.classList.add('show');\n messageEl.textContent = `Gefeliciteerd \u2014 je hebt alle ${found} paren gevonden in ${moves} bewegingen!`;\n }\n\n function startGame() {\n deck = buildDeck();\n moves = 0;\n found = 0;\n firstCard = secondCard = null;\n moveCountEl.textContent = `Bewegingen: 0`;\n foundPairsEl.textContent = `Gevonden paren: 0`;\n messageEl.classList.remove('show');\n renderBoard();\n }\n\n newGameBtn.addEventListener('click', startGame);\n\n \/\/ start eerste spel\n startGame();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Memory \u2013 Dieren (eigen, reclamevrij) Memory \u2013 Dieren Nieuw spel Bewegingen: 0 Gevonden paren: 0<\/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-64","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":2,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages\/64\/revisions"}],"predecessor-version":[{"id":96,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages\/64\/revisions\/96"}],"wp:attachment":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/media?parent=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":64,"date":"2025-11-28T11:35:50","date_gmt":"2025-11-28T11:35:50","guid":{"rendered":"https:\/\/test.brandburgservice.nl\/?page_id=64"},"modified":"2025-11-28T21:18:02","modified_gmt":"2025-11-28T21:18:02","slug":"letters","status":"publish","type":"page","link":"https:\/\/test.brandburgservice.nl\/index.php\/letters\/","title":{"rendered":"Letters"},"content":{"rendered":"\n\n\n\n \n \n Memory \u2013 Dieren (eigen, reclamevrij)<\/title>\n <style>\n :root{\n --bg:#f9fafb;\n --card:#ffffff;\n --accent:#1d4ed8;\n --muted:#4b5563;\n --shadow: 0 6px 18px rgba(0,0,0,0.05);\n }\n html,body{height:100%}\n body{\n margin:0;\n font-family: Arial, sans-serif;\n background: linear-gradient(180deg, #eff6ff, #ffffff);\n display:flex;\n align-items:flex-start;\n justify-content:center;\n padding:20px;\n color:#111827;\n }\n .container{\n width:100%;\n max-width:800px;\n background:white;\n border-radius:12px;\n padding:20px;\n box-shadow:var(--shadow);\n }\n header{\n display:flex;\n flex-wrap:wrap;\n justify-content:space-between;\n align-items:center;\n }\n h1 { margin: 0 0 10px 0; font-size:24px; }\n .stats { display:flex; gap:10px; margin-bottom:10px; }\n .stat {\n background:var(--card);\n padding:6px 10px;\n border-radius:6px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.04);\n font-size:14px;\n }\n .controls { margin-bottom:15px; }\n button {\n padding:8px 14px;\n border:none;\n border-radius:6px;\n background:var(--accent);\n color:white;\n font-size:14px;\n cursor:pointer;\n }\n .grid {\n display:grid;\n gap:12px;\n justify-items: stretch;\n }\n @media (min-width: 600px) {\n .grid { grid-template-columns: repeat(4, 1fr); }\n }\n @media (max-width: 599px) {\n .grid { grid-template-columns: repeat(2, 1fr); }\n }\n .card {\n position: relative;\n width: 100%;\n padding-top: 100%;\n cursor: pointer;\n perspective: 800px;\n }\n .card-inner {\n position: absolute;\n width: 100%; height: 100%;\n transition: transform 0.4s;\n transform-style: preserve-3d;\n border-radius:8px;\n }\n .card.flipped .card-inner {\n transform: rotateY(180deg);\n }\n .face {\n position: absolute;\n width: 100%; height: 100%;\n backface-visibility: hidden;\n border-radius:8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 40px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n }\n .face.front {\n background: var(--accent);\n color: #fff;\n }\n .face.back {\n background: var(--card);\n transform: rotateY(180deg);\n }\n .message {\n margin-top:16px;\n padding:12px;\n background: #e5f4e3;\n border-radius:8px;\n display: none;\n font-size:16px;\n }\n .message.show {\n display: block;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>Memory \u2013 Dieren<\/h1>\n <div class=\"controls\">\n <button id=\"newGame\">Nieuw spel<\/button>\n <\/div>\n <\/header>\n <div class=\"stats\">\n <div class=\"stat\" id=\"moveCount\">Bewegingen: 0<\/div>\n <div class=\"stat\" id=\"foundPairs\">Gevonden paren: 0<\/div>\n <\/div>\n <div id=\"board\" class=\"grid\"><\/div>\n <div class=\"message\" id=\"message\"><\/div>\n <\/div>\n\n <script>\n \/\/ --- Instellingen \/ kaartendata ---\n \/\/ Vervang of breid uit met eigen afbeeldingen: zie commentaar hieronder.\n const animalCards = [\n { id: 'lion', label: '\ud83e\udd81' },\n { id: 'tiger', label: '\ud83d\udc2f' },\n { id: 'elephant', label: '\ud83d\udc18' },\n { id: 'giraffe', label: '\ud83e\udd92' },\n { id: 'monkey', label: '\ud83d\udc12' },\n { id: 'panda', label: '\ud83d\udc3c' },\n { id: 'frog', label: '\ud83d\udc38' },\n { id: 'dog', label: '\ud83d\udc36' }\n \/\/ je kunt meer dieren toevoegen, of bestaande overschrijven met bijv.\n \/\/ { id: 'bear', label: 'Beer', img: 'img\/bear.png' }\n \/\/ als je liever een afbeelding gebruikt i.p.v. emoji. \n ];\n\n let deck = [];\n let firstCard = null;\n let secondCard = null;\n let lock = false;\n let moves = 0;\n let found = 0;\n\n const boardEl = document.getElementById('board');\n const moveCountEl = document.getElementById('moveCount');\n const foundPairsEl = document.getElementById('foundPairs');\n const newGameBtn = document.getElementById('newGame');\n const messageEl = document.getElementById('message');\n\n function shuffle(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n return array;\n }\n\n function buildDeck() {\n const selected = animalCards.slice(0); \/\/ copy\n const pairSet = selected.slice(0, 8); \/\/ pak 8 dieren (of pas aan naar wens)\n let d = [];\n pairSet.forEach(card => {\n d.push({ ...card });\n d.push({ ...card });\n });\n return shuffle(d);\n }\n\n function renderBoard() {\n boardEl.innerHTML = '';\n deck.forEach((cardData, idx) => {\n const card = document.createElement('div');\n card.className = 'card';\n card.dataset.idx = idx;\n\n const inner = document.createElement('div');\n inner.className = 'card-inner';\n\n const front = document.createElement('div');\n front.className = 'face front';\n front.textContent = '?';\n\n const back = document.createElement('div');\n back.className = 'face back';\n\n if (cardData.img) {\n const img = document.createElement('img');\n img.src = cardData.img;\n img.alt = cardData.label;\n img.style.maxWidth = '80%';\n img.style.maxHeight = '80%';\n back.appendChild(img);\n } else {\n back.textContent = cardData.label;\n }\n\n inner.appendChild(front);\n inner.appendChild(back);\n card.appendChild(inner);\n\n card.addEventListener('click', onCardClick);\n boardEl.appendChild(card);\n });\n }\n\n function onCardClick(e) {\n if (lock) return;\n const card = e.currentTarget;\n const idx = card.dataset.idx;\n if (card.classList.contains('flipped')) return;\n\n card.classList.add('flipped');\n\n if (!firstCard) {\n firstCard = { card, idx };\n return;\n }\n\n secondCard = { card, idx };\n moves++;\n moveCountEl.textContent = `Bewegingen: ${moves}`;\n\n checkMatch();\n }\n\n function checkMatch() {\n const a = deck[firstCard.idx];\n const b = deck[secondCard.idx];\n if (a.id === b.id) {\n \/\/ match\n found++;\n foundPairsEl.textContent = `Gevonden paren: ${found}`;\n resetTurn();\n if (found === deck.length \/ 2) {\n showWin();\n }\n } else {\n lock = true;\n setTimeout(() => {\n firstCard.card.classList.remove('flipped');\n secondCard.card.classList.remove('flipped');\n resetTurn();\n }, 800);\n }\n }\n\n function resetTurn() {\n [firstCard, secondCard] = [null, null];\n lock = false;\n }\n\n function showWin() {\n messageEl.classList.add('show');\n messageEl.textContent = `Gefeliciteerd \u2014 je hebt alle ${found} paren gevonden in ${moves} bewegingen!`;\n }\n\n function startGame() {\n deck = buildDeck();\n moves = 0;\n found = 0;\n firstCard = secondCard = null;\n moveCountEl.textContent = `Bewegingen: 0`;\n foundPairsEl.textContent = `Gevonden paren: 0`;\n messageEl.classList.remove('show');\n renderBoard();\n }\n\n newGameBtn.addEventListener('click', startGame);\n\n \/\/ start eerste spel\n startGame();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Memory \u2013 Dieren (eigen, reclamevrij) Memory \u2013 Dieren Nieuw spel Bewegingen: 0 Gevonden paren: 0<\/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-64","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":2,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages\/64\/revisions"}],"predecessor-version":[{"id":96,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages\/64\/revisions\/96"}],"wp:attachment":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/media?parent=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}