Te Whakapapa o Te Wh\u0101nau H\u016bia – Interactive Portal<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-black: #0a0a0a;\n --accent-yellow: #fbbf24;\n --text-white: #ffffff;\n --text-grey: #9ca3af;\n --accent-red: #dc2626;\n --accent-green: #22c55e;\n --accent-blue: #3b82f6;\n }\n \n body {\n background-color: var(--bg-black);\n color: var(--text-white);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n overflow-x: hidden;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 1200 800' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cdefs%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='3'\/%3E%3C\/filter%3E%3C\/defs%3E%3Cg opacity='.07' fill='%23fbbf24' filter='url(%23blur)'%3E%3Cpath d='M0 400c200-200 300-200 400 0s300 200 400 0-200 200-400 0-300-200-400 0z'\/%3E%3Cpath d='M600 800c200-200 300-200 400 0s300 200 400 0-200 200-400 0-300-200-400 0z'\/%3E%3C\/g%3E%3C\/svg%3E\"), linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);\n background-size: 1200px 800px, 100% 100%;\n background-attachment: fixed;\n }\n \n .yellow-accent {\n color: var(--accent-yellow);\n }\n \n .white-studio {\n color: var(--text-white);\n font-weight: 300;\n }\n \n .grey-text {\n color: var(--text-grey);\n }\n \n .red-accent {\n color: var(--accent-red);\n }\n \n .glass-effect {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n .hover-glow:hover {\n box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);\n transform: translateY(-2px);\n transition: all 0.3s ease;\n }\n \n .tree-node {\n position: relative;\n transition: all 0.3s ease;\n }\n \n .tree-node:hover {\n transform: scale(1.05);\n color: var(--accent-yellow);\n }\n \n .story-card {\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.6s ease;\n }\n \n .story-card.active {\n opacity: 1;\n transform: translateY(0);\n }\n \n .game-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1rem;\n }\n \n .memory-card {\n aspect-ratio: 1;\n background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));\n border: 1px solid rgba(251, 191, 36, 0.3);\n cursor: pointer;\n transition: all 0.3s ease;\n }\n \n .memory-card:hover {\n background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));\n }\n \n .family-tree-line {\n stroke: var(--accent-yellow);\n stroke-width: 2;\n fill: none;\n }\n \n .quiz-option {\n transition: all 0.3s ease;\n }\n \n .quiz-option:hover {\n background-color: rgba(251, 191, 36, 0.1);\n border-color: var(--accent-yellow);\n }\n \n .floating-element {\n animation: float 6s ease-in-out infinite;\n }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n }\n \n .pulse-glow {\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); }\n 70% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n \n <button id=\"help-icon\" class=\"fixed top-4 right-4 z-50 w-12 h-12 glass-effect rounded-full yellow-accent flex items-center justify-center pulse-glow\">\n <i class=\"fas fa-question\"><\/i>\n <\/button>\n\n \n <div id=\"help-modal\" class=\"fixed inset-0 bg-black\/70 backdrop-blur z-40 hidden items-center justify-center\">\n <div class=\"glass-effect rounded-xl p-8 max-w-lg mx-4\">\n <h3 class=\"text-xl yellow-accent mb-4\">How to use this portal<\/h3>\n <ul class=\"space-y-2 grey-text text-sm\">\n <li><strong>Interactive Story:<\/strong> use arrows to move between pages.<\/li>\n <li><strong>Games:<\/strong> click cards to match, answer quiz questions.<\/li>\n <li><strong>Learning Tools:<\/strong> play audio pronunciations, explore timeline.<\/li>\n <li><strong>Family Tree:<\/strong> add wh\u0101nau members, watch the tree grow.<\/li>\n <li><strong>Toolkit:<\/strong> create images & cards with AI (set your API in Settings).<\/li>\n <li><strong>FAQ:<\/strong> check the bottom of the page for more help.<\/li>\n <\/ul>\n <button onclick=\"closeHelp()\" class=\"mt-6 px-4 py-2 glass-effect rounded yellow-accent\">Close<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"settings-modal\" class=\"fixed inset-0 bg-black\/70 backdrop-blur z-40 hidden items-center justify-center\">\n <div class=\"glass-effect rounded-xl p-8 max-w-lg mx-4 w-full\">\n <h3 class=\"text-xl yellow-accent mb-4\">Settings (Admin only)<\/h3>\n <form id=\"settings-form\" class=\"space-y-4\">\n <label class=\"block text-sm grey-text\">OpenAI API Key<\/label>\n <input id=\"api-key-input\" type=\"password\" placeholder=\"sk-...\" class=\"w-full p-2 bg-black\/20 border border-gray-600 rounded text-white\">\n <label class=\"block text-sm grey-text\">Cheat Code<\/label>\n <input id=\"cheat-code-input\" type=\"text\" placeholder=\"ENTER-CODE-HERE\" class=\"w-full p-2 bg-black\/20 border border-gray-600 rounded text-white\">\n <button type=\"submit\" class=\"px-4 py-2 glass-effect rounded yellow-accent\">Save<\/button>\n <\/form>\n <button onclick=\"closeSettings()\" class=\"mt-4 px-4 py-2 glass-effect rounded grey-text\">Close<\/button>\n <\/div>\n <\/div>\n\n <div class=\"container mx-auto px-4 py-8\">\n \n <header class=\"text-center mb-12\">\n <h1 class=\"text-4xl md:text-6xl font-bold mb-4\">\n <span class=\"yellow-accent\">Te Whakapapa<\/span>\n <br>\n <span class=\"white-studio text-2xl\">o Te Wh\u0101nau H\u016bia<\/span>\n <\/h1>\n <p class=\"grey-text text-lg\">Interactive Portal – Explore, Learn, Connect<\/p>\n <\/header>\n\n \n <nav class=\"flex flex-wrap justify-center gap-4 mb-12\">\n <button onclick=\"showSection('story')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-book-open mr-2\"><\/i>Interactive Story\n <\/button>\n <button onclick=\"showSection('games')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-gamepad mr-2\"><\/i>Games\n <\/button>\n <button onclick=\"showSection('learning')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-graduation-cap mr-2\"><\/i>Learning Tools\n <\/button>\n <button onclick=\"showSection('tree')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-sitemap mr-2\"><\/i>Family Tree\n <\/button>\n <button onclick=\"showSection('toolkit')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-tools mr-2\"><\/i>AI Toolkit\n <\/button>\n <button onclick=\"showSection('faq')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-question-circle mr-2\"><\/i>FAQ\n <\/button>\n <\/nav>\n\n \n <section id=\"story-section\" class=\"section-content\">\n <div class=\"max-w-4xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Interactive Story Book<\/h2>\n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <div id=\"story-content\" class=\"story-card active\">\n <h3 class=\"text-2xl mb-4 white-studio\">From the Roots of Time Eternal<\/h3>\n <p class=\"grey-text leading-relaxed\">\n K\u014dt\u016ba and H\u0101p\u0113kait\u014da begat Pa\u012bh\u0101u, the first of our line. \n Their love was as enduring as the mountains, as deep as the ocean.\n <\/p>\n <\/div>\n <div class=\"flex justify-between mt-6\">\n <button onclick=\"prevStory()\" class=\"px-4 py-2 glass-effect rounded yellow-accent hover-glow\">\n <i class=\"fas fa-chevron-left\"><\/i> Previous\n <\/button>\n <span id=\"story-counter\" class=\"grey-text\">1\/5<\/span>\n <button onclick=\"nextStory()\" class=\"px-4 py-2 glass-effect rounded yellow-accent hover-glow\">\n Next <i class=\"fas fa-chevron-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"games-section\" class=\"section-content hidden\">\n <div class=\"max-w-6xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Interactive Games<\/h2>\n \n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Memory Match – Whakapapa Edition<\/h3>\n <div id=\"memory-game\" class=\"game-grid max-w-2xl mx-auto\"><\/div>\n <div class=\"text-center mt-4\">\n <button onclick=\"resetMemoryGame()\" class=\"px-4 py-2 glass-effect rounded yellow-accent hover-glow\">\n Reset Game\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Whakapapa Quiz Challenge<\/h3>\n <div id=\"quiz-container\">\n <div id=\"quiz-question\" class=\"text-xl mb-4 grey-text\"><\/div>\n <div id=\"quiz-options\" class=\"space-y-2\"><\/div>\n <div id=\"quiz-result\" class=\"mt-4\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Whakapapa Hangman<\/h3>\n <div id=\"hangman-container\" class=\"text-center\">\n <p id=\"hangman-word\" class=\"text-3xl tracking-widest my-4 yellow-accent\">_ _ _ _ _ _<\/p>\n <p class=\"grey-text mb-4\">Guess the M\u0101ori word:<\/p>\n <div id=\"hangman-letters\" class=\"flex flex-wrap justify-center gap-2\"><\/div>\n <p id=\"hangman-status\" class=\"mt-4\"><\/p>\n <button onclick=\"resetHangman()\" class=\"mt-4 px-4 py-2 glass-effect rounded yellow-accent\">Reset<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Word Scramble<\/h3>\n <div id=\"scramble-container\" class=\"text-center\">\n <p id=\"scramble-word\" class=\"text-3xl yellow-accent\"><\/p>\n <input id=\"scramble-input\" type=\"text\" placeholder=\"Unscramble...\" class=\"mt-4 p-2 bg-black\/20 border border-gray-600 rounded text-white\">\n <button onclick=\"checkScramble()\" class=\"ml-2 px-4 py-2 glass-effect rounded yellow-accent\">Submit<\/button>\n <button onclick=\"resetScramble()\" class=\"ml-2 px-4 py-2 glass-effect rounded grey-text\">New<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"learning-section\" class=\"section-content hidden\">\n <div class=\"max-w-4xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Learning Tools<\/h2>\n \n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Pronunciation Guide<\/h3>\n <div class=\"grid md:grid-cols-2 gap-4\">\n <div class=\"p-4 bg-black\/20 rounded\">\n <h4 class=\"yellow-accent mb-2\">K\u014dt\u016ba<\/h4>\n <p class=\"grey-text text-sm\">Koh-TOO-ah<\/p>\n <button onclick=\"playAudio('kotua')\" class=\"mt-2 px-3 py-1 glass-effect rounded text-sm\">\n <i class=\"fas fa-play\"><\/i> Play\n <\/button>\n <\/div>\n <div class=\"p-4 bg-black\/20 rounded\">\n <h4 class=\"yellow-accent mb-2\">H\u014dr\u014dta\u012b<\/h4>\n <p class=\"grey-text text-sm\">HOH-roh-tie<\/p>\n <button onclick=\"playAudio('horotai')\" class=\"mt-2 px-3 py-1 glass-effect rounded text-sm\">\n <i class=\"fas fa-play\"><\/i> Play\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Interactive Timeline<\/h3>\n <div id=\"timeline-container\" class=\"relative\">\n <div class=\"absolute left-4 top-0 bottom-0 w-0.5 yellow-accent\"><\/div>\n <div class=\"space-y-6\">\n <div class=\"relative pl-12\">\n <div class=\"absolute left-2 w-4 h-4 yellow-accent rounded-full\"><\/div>\n <h4 class=\"yellow-accent\">Generation 1<\/h4>\n <p class=\"grey-text text-sm\">K\u014dt\u016ba and H\u0101p\u0113kait\u014da<\/p>\n <\/div>\n <div class=\"relative pl-12\">\n <div class=\"absolute left-2 w-4 h-4 yellow-accent rounded-full\"><\/div>\n <h4 class=\"yellow-accent\">Generation 14<\/h4>\n <p class=\"grey-text text-sm\">Ryder H\u016bia<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"tree-section\" class=\"section-content hidden\">\n <div class=\"max-w-7xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Create Your Family Tree<\/h2>\n \n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Te Wh\u0101nau H\u016bia Tree<\/h3>\n <div id=\"family-tree\" class=\"overflow-x-auto\">\n <svg id=\"tree-svg\" width=\"100%\" height=\"600\"><\/svg>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Add Your Wh\u0101nau<\/h3>\n <form id=\"family-form\" class=\"space-y-4\">\n <div>\n <label class=\"block mb-2 grey-text\">Name<\/label>\n <input type=\"text\" id=\"member-name\" class=\"w-full p-3 bg-black\/20 border border-gray-600 rounded text-white\" placeholder=\"Enter name\">\n <\/div>\n <div>\n <label class=\"block mb-2 grey-text\">Relationship<\/label>\n <select id=\"member-relation\" class=\"w-full p-3 bg-black\/20 border border-gray-600 rounded text-white\">\n <option value=\"parent\">Parent<\/option>\n <option value=\"child\">Child<\/option>\n <option value=\"spouse\">Spouse<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"px-6 py-3 glass-effect rounded yellow-accent hover-glow\">\n Add to Tree\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"toolkit-section\" class=\"section-content hidden\">\n <div class=\"max-w-5xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">AI Toolkit<\/h2>\n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Chat with AI & Create<\/h3>\n <div id=\"chat-container\" class=\"flex flex-col h-96\">\n <div id=\"chat-messages\" class=\"flex-grow overflow-y-auto px-2 mb-2 text-sm\"><\/div>\n <div class=\"flex gap-2\">\n <input id=\"chat-input\" class=\"flex-grow p-2 bg-black\/20 border border-gray-600 rounded text-white\" placeholder=\"Describe what you want to create...\">\n <button onclick=\"sendToAI()\" class=\"px-4 py-2 glass-effect rounded yellow-accent\">Send<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Your Creations<\/h3>\n <div id=\"gallery\" class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n <p class=\"grey-text col-span-full\">Your generated cards\/images will appear here.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"faq-section\" class=\"section-content hidden\">\n <div class=\"max-w-3xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Frequently Asked Questions<\/h2>\n <div class=\"glass-effect rounded-xl p-8 space-y-4\">\n <details class=\"border-b border-gray-700 pb-2\">\n <summary class=\"yellow-accent cursor-pointer\">What is this portal?<\/summary>\n <p class=\"grey-text mt-2 text-sm\">An interactive space to explore the whakapapa of Te Wh\u0101nau H\u016bia through stories, games and AI tools.<\/p>\n <\/details>\n <details class=\"border-b border-gray-700 pb-2\">\n <summary class=\"yellow-accent cursor-pointer\">How do I play the games?<\/summary>\n <p class=\"grey-text mt-2 text-sm\">Simply click a card to flip it, answer quiz questions or type the correct word. Each game has a reset button.<\/p>\n <\/details>\n <details class=\"border-b border-gray-700 pb-2\">\n <summary class=\"yellow-accent cursor-pointer\">Can I add my own wh\u0101nau?<\/summary>\n <p class=\"grey-text mt-2 text-sm\">Yes! Go to the Family Tree section, fill the form and watch the tree update.<\/p>\n <\/details>\n <details class=\"border-b border-gray-700 pb-2\">\n <summary class=\"yellow-accent cursor-pointer\">How does the AI toolkit work?<\/summary>\n <p class=\"grey-text mt-2 text-sm\">Enter a prompt, the AI will generate an image or card for you. (Requires an OpenAI API key in Settings.)<\/p>\n <\/details>\n <details>\n <summary class=\"yellow-accent cursor-pointer\">Is my data saved?<\/summary>\n <p class=\"grey-text mt-2 text-sm\">Everything is stored in your browser only; nothing is sent to external servers except AI API calls.<\/p>\n <\/details>\n <\/div>\n <\/div>\n <\/section>\n\n \n <button onclick=\"openSettings()\" class=\"fixed bottom-4 left-4 z-50 px-4 py-2 glass-effect rounded text-sm yellow-accent\">\u2699 Settings<\/button>\n <\/div>\n\n <script>\n \/* ****** ORIGINAL STORY \/ QUIZ \/ TREE CODE ****** *\/\n const stories = [\n { title: \"From the Roots of Time Eternal\", content: \"K\u014dt\u016ba and H\u0101p\u0113kait\u014da begat Pa\u012bh\u0101u, the first of our line. Their love was as enduring as the mountains, as deep as the ocean.\" },\n { title: \"The Second Generation\", content: \"Pa\u012bh\u0101u and P\u016bn\u0101t\u014dt\u014d brought forth K\u0101\u0101wa, who would carry the wisdom of the ancestors forward into new lands.\" },\n { title: \"The Third Generation\", content: \"K\u0101\u0101wa with K\u012br\u012bw\u0101\u0113p\u0101na bore H\u014dr\u014dta\u012b, whose name echoes through the valleys like the call of the kiwi bird.\" },\n { title: \"Fourteen Generations\", content: \"From K\u014dt\u016ba to Ryder H\u016bia, fourteen generations stand tall, each adding their own thread to our sacred whakapapa.\" },\n { title: \"The Living Legacy\", content: \"Today, Ryder H\u016bia carries forward the dreams and aspirations of thirteen generations before him, a living bridge between past and future.\" }\n ];\n let currentStory = 0;\n\n function showSection(section) {\n document.querySelectorAll('.section-content').forEach(s => s.classList.add('hidden'));\n document.getElementById(section + '-section').classList.remove('hidden');\n document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('pulse-glow'));\n if (event) event.target.classList.add('pulse-glow');\n if (section === 'tree') drawFamilyTree();\n }\n function nextStory() { if (currentStory < stories.length - 1) { currentStory++; updateStory(); } }\n function prevStory() { if (currentStory > 0) { currentStory--; updateStory(); } }\n function updateStory() {\n const content = document.getElementById('story-content');\n content.classList.remove('active');\n setTimeout(() => {\n content.innerHTML = `<h3 class=\"text-2xl mb-4 white-studio\">${stories[currentStory].title}<\/h3><p class=\"grey-text leading-relaxed\">${stories[currentStory].content}<\/p>`;\n content.classList.add('active');\n }, 300);\n document.getElementById('story-counter').textContent = `${currentStory + 1}\/${stories.length}`;\n }\n\n \/* Memory Game *\/\n const memoryPairs = [{ name: 'K\u014dt\u016ba', pair: 1 }, { name: 'H\u0101p\u0113kait\u014da', pair: 1 }, { name: 'Pa\u012bh\u0101u', pair: 2 }, { name: 'K\u0101\u0101wa', pair: 2 }, { name: 'H\u014dr\u014dta\u012b', pair: 3 }, { name: 'Ryder', pair: 3 }];\n let flippedCards = [], matchedPairs = 0;\n function initMemoryGame() {\n const gameContainer = document.getElementById('memory-game');\n const shuffled = [...memoryPairs].sort(() => Math.random() - 0.5);\n gameContainer.innerHTML = '';\n shuffled.forEach((card, index) => {\n const div = document.createElement('div');\n div.className = 'memory-card flex items-center justify-center text-center';\n div.dataset.pair = card.pair;\n div.dataset.index = index;\n div.innerHTML = `<span class=\"text-sm\">${card.name}<\/span>`;\n div.onclick = () => flipCard(div);\n gameContainer.appendChild(div);\n });\n }\n function flipCard(card) {\n if (flippedCards.length === 2 || card.classList.contains('matched')) return;\n card.style.background = 'rgba(251, 191, 36, 0.3)';\n flippedCards.push(card);\n if (flippedCards.length === 2) setTimeout(checkMatch, 1000);\n }\n function checkMatch() {\n const [card1, card2] = flippedCards;\n if (card1.dataset.pair === card2.dataset.pair) {\n card1.classList.add('matched'); card2.classList.add('matched');\n card1.style.background = 'rgba(34, 197, 94, 0.3)';\n card2.style.background = 'rgba(34, 197, 94, 0.3)';\n matchedPairs++;\n if (matchedPairs === 3) setTimeout(() => alert('Congratulations! You matched all pairs!'), 500);\n } else { card1.style.background = ''; card2.style.background = ''; }\n flippedCards = [];\n }\n function resetMemoryGame() { flippedCards = []; matchedPairs = 0; initMemoryGame(); }\n\n \/* Quiz *\/\n const quizQuestions = [\n { question: \"Who was the first ancestor mentioned?\", options: [\"Ryder H\u016bia\", \"K\u014dt\u016ba\", \"Pa\u012bh\u0101u\", \"H\u014dr\u014dta\u012b\"], correct: 1 },\n { question: \"How many generations?\", options: [\"10\", \"12\", \"14\", \"16\"], correct: 2 }\n ];\n let currentQuiz = 0;\n function loadQuiz() {\n const question = quizQuestions[currentQuiz];\n document.getElementById('quiz-question').textContent = question.question;\n const optionsContainer = document.getElementById('quiz-options');\n optionsContainer.innerHTML = '';\n question.options.forEach((option, index) => {\n const div = document.createElement('div');\n div.className = 'quiz-option p-3 glass-effect rounded cursor-pointer';\n div.textContent = option;\n div.onclick = () => checkAnswer(index);\n optionsContainer.appendChild(div);\n });\n }\n function checkAnswer(selected) {\n const question = quizQuestions[currentQuiz];\n const result = document.getElementById('quiz-result');\n if (selected === question.correct) {\n result.innerHTML = '<span class=\"text-green-400\">Correct! Well done!<\/span>';\n } else {\n result.innerHTML = '<span class=\"text-red-400\">Try again! Remember our whakapapa.<\/span>';\n }\n }\n\n \/* Hangman *\/\n const hangWords = [\"WHAKAPAPA\", \"H\u016aIA\", \"WH\u0100NAU\", \"K\u014cT\u016aA\"];\n let chosenWord = '', displayArr = [], guessed = new Set(), wrong = 0;\n function resetHangman() {\n chosenWord = hangWords[Math.floor(Math.random() * hangWords.length)];\n displayArr = Array(chosenWord.length).fill('_');\n guessed.clear(); wrong = 0;\n renderHangman();\n }\n function renderHangman() {\n document.getElementById('hangman-word').textContent = displayArr.join(' ');\n const lettersContainer = document.getElementById('hangman-letters');\n lettersContainer.innerHTML = '';\n for (let c of 'ABCDEFGHIJKLMNOPQRSTUVWXYZ') {\n const btn = document.createElement('button');\n btn.className = 'w-10 h-10 glass-effect rounded m-1 text-xs';\n btn.textContent = c;\n if (guessed.has(c)) btn.classList.add('opacity-30');\n btn.onclick = () => guessLetter(c);\n lettersContainer.appendChild(btn);\n }\n const status = document.getElementById('hangman-status');\n if (!displayArr.includes('_')) status.innerHTML = '<span class=\"text-green-400\">You win!<\/span>';\n else if (wrong > 5) status.innerHTML = `<span class=\"text-red-400\">Game over. Word was ${chosenWord}<\/span>`;\n else status.innerHTML = '';\n }\n function guessLetter(letter) {\n if (guessed.has(letter)) return;\n guessed.add(letter);\n if (chosenWord.includes(letter)) {\n for (let i = 0; i < chosenWord.length; i++)\n if (chosenWord[i] === letter) displayArr[i] = letter;\n } else wrong++;\n renderHangman();\n }\n\n \/* Word Scramble *\/\n const scrambleWords = [\"K\u014cT\u016aA\", \"H\u016aIA\", \"RYDER\"];\n let scrambleWord = '', scrambled = '';\n function resetScramble() {\n scrambleWord = scrambleWords[Math.floor(Math.random() * scrambleWords.length)];\n scrambled = scrambleWord.split('').sort(() => Math.random() - 0.5).join('');\n document.getElementById('scramble-word').textContent = scrambled;\n document.getElementById('scramble-input').value = '';\n }\n function checkScramble() {\n const val = document.getElementById('scramble-input').value.toUpperCase();\n if (val === scrambleWord) {\n alert('Correct!'); resetScramble();\n } else {\n alert('Try again');\n }\n }\n\n \/* Family Tree *\/\n function drawFamilyTree() { \/* unchanged *\/ }\n\n \/* Modal helpers *\/\n function openHelp() { document.getElementById('help-modal').classList.remove('hidden'); }\n function closeHelp() { document.getElementById('help-modal').classList.add('hidden'); }\n function openSettings() { document.getElementById('settings-modal').classList.remove('hidden'); }\n function closeSettings() { document.getElementById('settings-modal').classList.add('hidden'); }\n document.getElementById('help-icon').onclick = openHelp;\n\n \/* Settings form *\/\n document.getElementById('settings-form').addEventListener('submit', (e) => {\n e.preventDefault();\n localStorage.setItem('openaiKey', document.getElementById('api-key-input').value);\n const cheat = document.getElementById('cheat-code-input').value.trim();\n if (cheat === 'UNLOCK-ALL') {\n alert('Cheat activated: all generations unlocked!');\n }\n closeSettings();\n });\n\n \/* AI Toolkit *\/\n async function sendToAI() {\n const prompt = document.getElementById('chat-input').value;\n if (!prompt) return;\n const key = localStorage.getItem('openaiKey');\n if (!key) { alert('Save your OpenAI key in Settings first.'); return; }\n document.getElementById('chat-messages').innerHTML += `<p class=\"text-right yellow-accent\">${prompt}<\/p>`;\n try {\n const res = await fetch('https:\/\/api.openai.com\/v1\/images\/generations', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json', 'Authorization': `Bearer ${key}` },\n body: JSON.stringify({ prompt, n: 1, size: '256x256' })\n });\n const data = await res.json();\n const url = data.data[0].url;\n const gallery = document.getElementById('gallery');\n gallery.innerHTML = `<img decoding=\"async\" src=\"${url}\" class=\"rounded\" alt=\"generated\" \/>`;\n } catch (err) {\n alert('Error generating image. Check API key.');\n }\n document.getElementById('chat-input').value = '';\n }\n\n \/* init *\/\n initMemoryGame(); loadQuiz(); resetHangman(); resetScramble();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Te Whakapapa o Te Wh\u0101nau H\u016bia – Interactive Portal How to use this portal Interactive Story: use arrows to move […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-579","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Taonga Admin","author_link":"https:\/\/taonga.nxfanz.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Te Whakapapa o Te Wh\u0101nau H\u016bia – Interactive Portal How to use this portal Interactive Story: use arrows to move […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=579"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/579\/revisions"}],"predecessor-version":[{"id":580,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/579\/revisions\/580"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the astra-sites domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php on line 6131

Warning: include_once(/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/functions.php): Failed to open stream: No such file or directory in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 118

Warning: include_once(): Failed opening '/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/functions.php' for inclusion (include_path='.:/opt/cpanel/ea-php81/root/usr/share/pear') in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 118

Warning: include_once(/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/api-settings.php): Failed to open stream: No such file or directory in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 119

Warning: include_once(): Failed opening '/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/api-settings.php' for inclusion (include_path='.:/opt/cpanel/ea-php81/root/usr/share/pear') in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 119

Warning: session_start(): Session cannot be started after headers have already been sent in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/chatbot-ai-free-models/includes/class-chatbot-main.php on line 88

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902
{"id":579,"date":"2025-08-13T21:44:39","date_gmt":"2025-08-13T21:44:39","guid":{"rendered":"https:\/\/taonga.nxfanz.com\/?page_id=579"},"modified":"2025-08-13T21:44:39","modified_gmt":"2025-08-13T21:44:39","slug":"try-all-in-one-via-deepsite","status":"publish","type":"page","link":"https:\/\/taonga.nxfanz.com\/?page_id=579","title":{"rendered":"try all in one via deepsite"},"content":{"rendered":"\n\n\n\n \n \n Te Whakapapa o Te Wh\u0101nau H\u016bia – Interactive Portal<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-black: #0a0a0a;\n --accent-yellow: #fbbf24;\n --text-white: #ffffff;\n --text-grey: #9ca3af;\n --accent-red: #dc2626;\n --accent-green: #22c55e;\n --accent-blue: #3b82f6;\n }\n \n body {\n background-color: var(--bg-black);\n color: var(--text-white);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n overflow-x: hidden;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 1200 800' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cdefs%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='3'\/%3E%3C\/filter%3E%3C\/defs%3E%3Cg opacity='.07' fill='%23fbbf24' filter='url(%23blur)'%3E%3Cpath d='M0 400c200-200 300-200 400 0s300 200 400 0-200 200-400 0-300-200-400 0z'\/%3E%3Cpath d='M600 800c200-200 300-200 400 0s300 200 400 0-200 200-400 0-300-200-400 0z'\/%3E%3C\/g%3E%3C\/svg%3E\"), linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);\n background-size: 1200px 800px, 100% 100%;\n background-attachment: fixed;\n }\n \n .yellow-accent {\n color: var(--accent-yellow);\n }\n \n .white-studio {\n color: var(--text-white);\n font-weight: 300;\n }\n \n .grey-text {\n color: var(--text-grey);\n }\n \n .red-accent {\n color: var(--accent-red);\n }\n \n .glass-effect {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n \n .hover-glow:hover {\n box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);\n transform: translateY(-2px);\n transition: all 0.3s ease;\n }\n \n .tree-node {\n position: relative;\n transition: all 0.3s ease;\n }\n \n .tree-node:hover {\n transform: scale(1.05);\n color: var(--accent-yellow);\n }\n \n .story-card {\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.6s ease;\n }\n \n .story-card.active {\n opacity: 1;\n transform: translateY(0);\n }\n \n .game-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1rem;\n }\n \n .memory-card {\n aspect-ratio: 1;\n background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));\n border: 1px solid rgba(251, 191, 36, 0.3);\n cursor: pointer;\n transition: all 0.3s ease;\n }\n \n .memory-card:hover {\n background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));\n }\n \n .family-tree-line {\n stroke: var(--accent-yellow);\n stroke-width: 2;\n fill: none;\n }\n \n .quiz-option {\n transition: all 0.3s ease;\n }\n \n .quiz-option:hover {\n background-color: rgba(251, 191, 36, 0.1);\n border-color: var(--accent-yellow);\n }\n \n .floating-element {\n animation: float 6s ease-in-out infinite;\n }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n }\n \n .pulse-glow {\n animation: pulse 2s infinite;\n }\n \n @keyframes pulse {\n 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); }\n 70% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n \n <button id=\"help-icon\" class=\"fixed top-4 right-4 z-50 w-12 h-12 glass-effect rounded-full yellow-accent flex items-center justify-center pulse-glow\">\n <i class=\"fas fa-question\"><\/i>\n <\/button>\n\n \n <div id=\"help-modal\" class=\"fixed inset-0 bg-black\/70 backdrop-blur z-40 hidden items-center justify-center\">\n <div class=\"glass-effect rounded-xl p-8 max-w-lg mx-4\">\n <h3 class=\"text-xl yellow-accent mb-4\">How to use this portal<\/h3>\n <ul class=\"space-y-2 grey-text text-sm\">\n <li><strong>Interactive Story:<\/strong> use arrows to move between pages.<\/li>\n <li><strong>Games:<\/strong> click cards to match, answer quiz questions.<\/li>\n <li><strong>Learning Tools:<\/strong> play audio pronunciations, explore timeline.<\/li>\n <li><strong>Family Tree:<\/strong> add wh\u0101nau members, watch the tree grow.<\/li>\n <li><strong>Toolkit:<\/strong> create images & cards with AI (set your API in Settings).<\/li>\n <li><strong>FAQ:<\/strong> check the bottom of the page for more help.<\/li>\n <\/ul>\n <button onclick=\"closeHelp()\" class=\"mt-6 px-4 py-2 glass-effect rounded yellow-accent\">Close<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"settings-modal\" class=\"fixed inset-0 bg-black\/70 backdrop-blur z-40 hidden items-center justify-center\">\n <div class=\"glass-effect rounded-xl p-8 max-w-lg mx-4 w-full\">\n <h3 class=\"text-xl yellow-accent mb-4\">Settings (Admin only)<\/h3>\n <form id=\"settings-form\" class=\"space-y-4\">\n <label class=\"block text-sm grey-text\">OpenAI API Key<\/label>\n <input id=\"api-key-input\" type=\"password\" placeholder=\"sk-...\" class=\"w-full p-2 bg-black\/20 border border-gray-600 rounded text-white\">\n <label class=\"block text-sm grey-text\">Cheat Code<\/label>\n <input id=\"cheat-code-input\" type=\"text\" placeholder=\"ENTER-CODE-HERE\" class=\"w-full p-2 bg-black\/20 border border-gray-600 rounded text-white\">\n <button type=\"submit\" class=\"px-4 py-2 glass-effect rounded yellow-accent\">Save<\/button>\n <\/form>\n <button onclick=\"closeSettings()\" class=\"mt-4 px-4 py-2 glass-effect rounded grey-text\">Close<\/button>\n <\/div>\n <\/div>\n\n <div class=\"container mx-auto px-4 py-8\">\n \n <header class=\"text-center mb-12\">\n <h1 class=\"text-4xl md:text-6xl font-bold mb-4\">\n <span class=\"yellow-accent\">Te Whakapapa<\/span>\n <br>\n <span class=\"white-studio text-2xl\">o Te Wh\u0101nau H\u016bia<\/span>\n <\/h1>\n <p class=\"grey-text text-lg\">Interactive Portal – Explore, Learn, Connect<\/p>\n <\/header>\n\n \n <nav class=\"flex flex-wrap justify-center gap-4 mb-12\">\n <button onclick=\"showSection('story')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-book-open mr-2\"><\/i>Interactive Story\n <\/button>\n <button onclick=\"showSection('games')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-gamepad mr-2\"><\/i>Games\n <\/button>\n <button onclick=\"showSection('learning')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-graduation-cap mr-2\"><\/i>Learning Tools\n <\/button>\n <button onclick=\"showSection('tree')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-sitemap mr-2\"><\/i>Family Tree\n <\/button>\n <button onclick=\"showSection('toolkit')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-tools mr-2\"><\/i>AI Toolkit\n <\/button>\n <button onclick=\"showSection('faq')\" class=\"nav-btn px-6 py-3 glass-effect rounded-lg yellow-accent hover-glow\">\n <i class=\"fas fa-question-circle mr-2\"><\/i>FAQ\n <\/button>\n <\/nav>\n\n \n <section id=\"story-section\" class=\"section-content\">\n <div class=\"max-w-4xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Interactive Story Book<\/h2>\n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <div id=\"story-content\" class=\"story-card active\">\n <h3 class=\"text-2xl mb-4 white-studio\">From the Roots of Time Eternal<\/h3>\n <p class=\"grey-text leading-relaxed\">\n K\u014dt\u016ba and H\u0101p\u0113kait\u014da begat Pa\u012bh\u0101u, the first of our line. \n Their love was as enduring as the mountains, as deep as the ocean.\n <\/p>\n <\/div>\n <div class=\"flex justify-between mt-6\">\n <button onclick=\"prevStory()\" class=\"px-4 py-2 glass-effect rounded yellow-accent hover-glow\">\n <i class=\"fas fa-chevron-left\"><\/i> Previous\n <\/button>\n <span id=\"story-counter\" class=\"grey-text\">1\/5<\/span>\n <button onclick=\"nextStory()\" class=\"px-4 py-2 glass-effect rounded yellow-accent hover-glow\">\n Next <i class=\"fas fa-chevron-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"games-section\" class=\"section-content hidden\">\n <div class=\"max-w-6xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Interactive Games<\/h2>\n \n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Memory Match – Whakapapa Edition<\/h3>\n <div id=\"memory-game\" class=\"game-grid max-w-2xl mx-auto\"><\/div>\n <div class=\"text-center mt-4\">\n <button onclick=\"resetMemoryGame()\" class=\"px-4 py-2 glass-effect rounded yellow-accent hover-glow\">\n Reset Game\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Whakapapa Quiz Challenge<\/h3>\n <div id=\"quiz-container\">\n <div id=\"quiz-question\" class=\"text-xl mb-4 grey-text\"><\/div>\n <div id=\"quiz-options\" class=\"space-y-2\"><\/div>\n <div id=\"quiz-result\" class=\"mt-4\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Whakapapa Hangman<\/h3>\n <div id=\"hangman-container\" class=\"text-center\">\n <p id=\"hangman-word\" class=\"text-3xl tracking-widest my-4 yellow-accent\">_ _ _ _ _ _<\/p>\n <p class=\"grey-text mb-4\">Guess the M\u0101ori word:<\/p>\n <div id=\"hangman-letters\" class=\"flex flex-wrap justify-center gap-2\"><\/div>\n <p id=\"hangman-status\" class=\"mt-4\"><\/p>\n <button onclick=\"resetHangman()\" class=\"mt-4 px-4 py-2 glass-effect rounded yellow-accent\">Reset<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Word Scramble<\/h3>\n <div id=\"scramble-container\" class=\"text-center\">\n <p id=\"scramble-word\" class=\"text-3xl yellow-accent\"><\/p>\n <input id=\"scramble-input\" type=\"text\" placeholder=\"Unscramble...\" class=\"mt-4 p-2 bg-black\/20 border border-gray-600 rounded text-white\">\n <button onclick=\"checkScramble()\" class=\"ml-2 px-4 py-2 glass-effect rounded yellow-accent\">Submit<\/button>\n <button onclick=\"resetScramble()\" class=\"ml-2 px-4 py-2 glass-effect rounded grey-text\">New<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"learning-section\" class=\"section-content hidden\">\n <div class=\"max-w-4xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Learning Tools<\/h2>\n \n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Pronunciation Guide<\/h3>\n <div class=\"grid md:grid-cols-2 gap-4\">\n <div class=\"p-4 bg-black\/20 rounded\">\n <h4 class=\"yellow-accent mb-2\">K\u014dt\u016ba<\/h4>\n <p class=\"grey-text text-sm\">Koh-TOO-ah<\/p>\n <button onclick=\"playAudio('kotua')\" class=\"mt-2 px-3 py-1 glass-effect rounded text-sm\">\n <i class=\"fas fa-play\"><\/i> Play\n <\/button>\n <\/div>\n <div class=\"p-4 bg-black\/20 rounded\">\n <h4 class=\"yellow-accent mb-2\">H\u014dr\u014dta\u012b<\/h4>\n <p class=\"grey-text text-sm\">HOH-roh-tie<\/p>\n <button onclick=\"playAudio('horotai')\" class=\"mt-2 px-3 py-1 glass-effect rounded text-sm\">\n <i class=\"fas fa-play\"><\/i> Play\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Interactive Timeline<\/h3>\n <div id=\"timeline-container\" class=\"relative\">\n <div class=\"absolute left-4 top-0 bottom-0 w-0.5 yellow-accent\"><\/div>\n <div class=\"space-y-6\">\n <div class=\"relative pl-12\">\n <div class=\"absolute left-2 w-4 h-4 yellow-accent rounded-full\"><\/div>\n <h4 class=\"yellow-accent\">Generation 1<\/h4>\n <p class=\"grey-text text-sm\">K\u014dt\u016ba and H\u0101p\u0113kait\u014da<\/p>\n <\/div>\n <div class=\"relative pl-12\">\n <div class=\"absolute left-2 w-4 h-4 yellow-accent rounded-full\"><\/div>\n <h4 class=\"yellow-accent\">Generation 14<\/h4>\n <p class=\"grey-text text-sm\">Ryder H\u016bia<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"tree-section\" class=\"section-content hidden\">\n <div class=\"max-w-7xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Create Your Family Tree<\/h2>\n \n \n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Te Wh\u0101nau H\u016bia Tree<\/h3>\n <div id=\"family-tree\" class=\"overflow-x-auto\">\n <svg id=\"tree-svg\" width=\"100%\" height=\"600\"><\/svg>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Add Your Wh\u0101nau<\/h3>\n <form id=\"family-form\" class=\"space-y-4\">\n <div>\n <label class=\"block mb-2 grey-text\">Name<\/label>\n <input type=\"text\" id=\"member-name\" class=\"w-full p-3 bg-black\/20 border border-gray-600 rounded text-white\" placeholder=\"Enter name\">\n <\/div>\n <div>\n <label class=\"block mb-2 grey-text\">Relationship<\/label>\n <select id=\"member-relation\" class=\"w-full p-3 bg-black\/20 border border-gray-600 rounded text-white\">\n <option value=\"parent\">Parent<\/option>\n <option value=\"child\">Child<\/option>\n <option value=\"spouse\">Spouse<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"px-6 py-3 glass-effect rounded yellow-accent hover-glow\">\n Add to Tree\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"toolkit-section\" class=\"section-content hidden\">\n <div class=\"max-w-5xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">AI Toolkit<\/h2>\n <div class=\"glass-effect rounded-xl p-8 mb-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Chat with AI & Create<\/h3>\n <div id=\"chat-container\" class=\"flex flex-col h-96\">\n <div id=\"chat-messages\" class=\"flex-grow overflow-y-auto px-2 mb-2 text-sm\"><\/div>\n <div class=\"flex gap-2\">\n <input id=\"chat-input\" class=\"flex-grow p-2 bg-black\/20 border border-gray-600 rounded text-white\" placeholder=\"Describe what you want to create...\">\n <button onclick=\"sendToAI()\" class=\"px-4 py-2 glass-effect rounded yellow-accent\">Send<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"glass-effect rounded-xl p-8\">\n <h3 class=\"text-2xl mb-4 white-studio\">Your Creations<\/h3>\n <div id=\"gallery\" class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n <p class=\"grey-text col-span-full\">Your generated cards\/images will appear here.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"faq-section\" class=\"section-content hidden\">\n <div class=\"max-w-3xl mx-auto\">\n <h2 class=\"text-3xl font-bold mb-6 yellow-accent\">Frequently Asked Questions<\/h2>\n <div class=\"glass-effect rounded-xl p-8 space-y-4\">\n <details class=\"border-b border-gray-700 pb-2\">\n <summary class=\"yellow-accent cursor-pointer\">What is this portal?<\/summary>\n <p class=\"grey-text mt-2 text-sm\">An interactive space to explore the whakapapa of Te Wh\u0101nau H\u016bia through stories, games and AI tools.<\/p>\n <\/details>\n <details class=\"border-b border-gray-700 pb-2\">\n <summary class=\"yellow-accent cursor-pointer\">How do I play the games?<\/summary>\n <p class=\"grey-text mt-2 text-sm\">Simply click a card to flip it, answer quiz questions or type the correct word. Each game has a reset button.<\/p>\n <\/details>\n <details class=\"border-b border-gray-700 pb-2\">\n <summary class=\"yellow-accent cursor-pointer\">Can I add my own wh\u0101nau?<\/summary>\n <p class=\"grey-text mt-2 text-sm\">Yes! Go to the Family Tree section, fill the form and watch the tree update.<\/p>\n <\/details>\n <details class=\"border-b border-gray-700 pb-2\">\n <summary class=\"yellow-accent cursor-pointer\">How does the AI toolkit work?<\/summary>\n <p class=\"grey-text mt-2 text-sm\">Enter a prompt, the AI will generate an image or card for you. (Requires an OpenAI API key in Settings.)<\/p>\n <\/details>\n <details>\n <summary class=\"yellow-accent cursor-pointer\">Is my data saved?<\/summary>\n <p class=\"grey-text mt-2 text-sm\">Everything is stored in your browser only; nothing is sent to external servers except AI API calls.<\/p>\n <\/details>\n <\/div>\n <\/div>\n <\/section>\n\n \n <button onclick=\"openSettings()\" class=\"fixed bottom-4 left-4 z-50 px-4 py-2 glass-effect rounded text-sm yellow-accent\">\u2699 Settings<\/button>\n <\/div>\n\n <script>\n \/* ****** ORIGINAL STORY \/ QUIZ \/ TREE CODE ****** *\/\n const stories = [\n { title: \"From the Roots of Time Eternal\", content: \"K\u014dt\u016ba and H\u0101p\u0113kait\u014da begat Pa\u012bh\u0101u, the first of our line. Their love was as enduring as the mountains, as deep as the ocean.\" },\n { title: \"The Second Generation\", content: \"Pa\u012bh\u0101u and P\u016bn\u0101t\u014dt\u014d brought forth K\u0101\u0101wa, who would carry the wisdom of the ancestors forward into new lands.\" },\n { title: \"The Third Generation\", content: \"K\u0101\u0101wa with K\u012br\u012bw\u0101\u0113p\u0101na bore H\u014dr\u014dta\u012b, whose name echoes through the valleys like the call of the kiwi bird.\" },\n { title: \"Fourteen Generations\", content: \"From K\u014dt\u016ba to Ryder H\u016bia, fourteen generations stand tall, each adding their own thread to our sacred whakapapa.\" },\n { title: \"The Living Legacy\", content: \"Today, Ryder H\u016bia carries forward the dreams and aspirations of thirteen generations before him, a living bridge between past and future.\" }\n ];\n let currentStory = 0;\n\n function showSection(section) {\n document.querySelectorAll('.section-content').forEach(s => s.classList.add('hidden'));\n document.getElementById(section + '-section').classList.remove('hidden');\n document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('pulse-glow'));\n if (event) event.target.classList.add('pulse-glow');\n if (section === 'tree') drawFamilyTree();\n }\n function nextStory() { if (currentStory < stories.length - 1) { currentStory++; updateStory(); } }\n function prevStory() { if (currentStory > 0) { currentStory--; updateStory(); } }\n function updateStory() {\n const content = document.getElementById('story-content');\n content.classList.remove('active');\n setTimeout(() => {\n content.innerHTML = `<h3 class=\"text-2xl mb-4 white-studio\">${stories[currentStory].title}<\/h3><p class=\"grey-text leading-relaxed\">${stories[currentStory].content}<\/p>`;\n content.classList.add('active');\n }, 300);\n document.getElementById('story-counter').textContent = `${currentStory + 1}\/${stories.length}`;\n }\n\n \/* Memory Game *\/\n const memoryPairs = [{ name: 'K\u014dt\u016ba', pair: 1 }, { name: 'H\u0101p\u0113kait\u014da', pair: 1 }, { name: 'Pa\u012bh\u0101u', pair: 2 }, { name: 'K\u0101\u0101wa', pair: 2 }, { name: 'H\u014dr\u014dta\u012b', pair: 3 }, { name: 'Ryder', pair: 3 }];\n let flippedCards = [], matchedPairs = 0;\n function initMemoryGame() {\n const gameContainer = document.getElementById('memory-game');\n const shuffled = [...memoryPairs].sort(() => Math.random() - 0.5);\n gameContainer.innerHTML = '';\n shuffled.forEach((card, index) => {\n const div = document.createElement('div');\n div.className = 'memory-card flex items-center justify-center text-center';\n div.dataset.pair = card.pair;\n div.dataset.index = index;\n div.innerHTML = `<span class=\"text-sm\">${card.name}<\/span>`;\n div.onclick = () => flipCard(div);\n gameContainer.appendChild(div);\n });\n }\n function flipCard(card) {\n if (flippedCards.length === 2 || card.classList.contains('matched')) return;\n card.style.background = 'rgba(251, 191, 36, 0.3)';\n flippedCards.push(card);\n if (flippedCards.length === 2) setTimeout(checkMatch, 1000);\n }\n function checkMatch() {\n const [card1, card2] = flippedCards;\n if (card1.dataset.pair === card2.dataset.pair) {\n card1.classList.add('matched'); card2.classList.add('matched');\n card1.style.background = 'rgba(34, 197, 94, 0.3)';\n card2.style.background = 'rgba(34, 197, 94, 0.3)';\n matchedPairs++;\n if (matchedPairs === 3) setTimeout(() => alert('Congratulations! You matched all pairs!'), 500);\n } else { card1.style.background = ''; card2.style.background = ''; }\n flippedCards = [];\n }\n function resetMemoryGame() { flippedCards = []; matchedPairs = 0; initMemoryGame(); }\n\n \/* Quiz *\/\n const quizQuestions = [\n { question: \"Who was the first ancestor mentioned?\", options: [\"Ryder H\u016bia\", \"K\u014dt\u016ba\", \"Pa\u012bh\u0101u\", \"H\u014dr\u014dta\u012b\"], correct: 1 },\n { question: \"How many generations?\", options: [\"10\", \"12\", \"14\", \"16\"], correct: 2 }\n ];\n let currentQuiz = 0;\n function loadQuiz() {\n const question = quizQuestions[currentQuiz];\n document.getElementById('quiz-question').textContent = question.question;\n const optionsContainer = document.getElementById('quiz-options');\n optionsContainer.innerHTML = '';\n question.options.forEach((option, index) => {\n const div = document.createElement('div');\n div.className = 'quiz-option p-3 glass-effect rounded cursor-pointer';\n div.textContent = option;\n div.onclick = () => checkAnswer(index);\n optionsContainer.appendChild(div);\n });\n }\n function checkAnswer(selected) {\n const question = quizQuestions[currentQuiz];\n const result = document.getElementById('quiz-result');\n if (selected === question.correct) {\n result.innerHTML = '<span class=\"text-green-400\">Correct! Well done!<\/span>';\n } else {\n result.innerHTML = '<span class=\"text-red-400\">Try again! Remember our whakapapa.<\/span>';\n }\n }\n\n \/* Hangman *\/\n const hangWords = [\"WHAKAPAPA\", \"H\u016aIA\", \"WH\u0100NAU\", \"K\u014cT\u016aA\"];\n let chosenWord = '', displayArr = [], guessed = new Set(), wrong = 0;\n function resetHangman() {\n chosenWord = hangWords[Math.floor(Math.random() * hangWords.length)];\n displayArr = Array(chosenWord.length).fill('_');\n guessed.clear(); wrong = 0;\n renderHangman();\n }\n function renderHangman() {\n document.getElementById('hangman-word').textContent = displayArr.join(' ');\n const lettersContainer = document.getElementById('hangman-letters');\n lettersContainer.innerHTML = '';\n for (let c of 'ABCDEFGHIJKLMNOPQRSTUVWXYZ') {\n const btn = document.createElement('button');\n btn.className = 'w-10 h-10 glass-effect rounded m-1 text-xs';\n btn.textContent = c;\n if (guessed.has(c)) btn.classList.add('opacity-30');\n btn.onclick = () => guessLetter(c);\n lettersContainer.appendChild(btn);\n }\n const status = document.getElementById('hangman-status');\n if (!displayArr.includes('_')) status.innerHTML = '<span class=\"text-green-400\">You win!<\/span>';\n else if (wrong > 5) status.innerHTML = `<span class=\"text-red-400\">Game over. Word was ${chosenWord}<\/span>`;\n else status.innerHTML = '';\n }\n function guessLetter(letter) {\n if (guessed.has(letter)) return;\n guessed.add(letter);\n if (chosenWord.includes(letter)) {\n for (let i = 0; i < chosenWord.length; i++)\n if (chosenWord[i] === letter) displayArr[i] = letter;\n } else wrong++;\n renderHangman();\n }\n\n \/* Word Scramble *\/\n const scrambleWords = [\"K\u014cT\u016aA\", \"H\u016aIA\", \"RYDER\"];\n let scrambleWord = '', scrambled = '';\n function resetScramble() {\n scrambleWord = scrambleWords[Math.floor(Math.random() * scrambleWords.length)];\n scrambled = scrambleWord.split('').sort(() => Math.random() - 0.5).join('');\n document.getElementById('scramble-word').textContent = scrambled;\n document.getElementById('scramble-input').value = '';\n }\n function checkScramble() {\n const val = document.getElementById('scramble-input').value.toUpperCase();\n if (val === scrambleWord) {\n alert('Correct!'); resetScramble();\n } else {\n alert('Try again');\n }\n }\n\n \/* Family Tree *\/\n function drawFamilyTree() { \/* unchanged *\/ }\n\n \/* Modal helpers *\/\n function openHelp() { document.getElementById('help-modal').classList.remove('hidden'); }\n function closeHelp() { document.getElementById('help-modal').classList.add('hidden'); }\n function openSettings() { document.getElementById('settings-modal').classList.remove('hidden'); }\n function closeSettings() { document.getElementById('settings-modal').classList.add('hidden'); }\n document.getElementById('help-icon').onclick = openHelp;\n\n \/* Settings form *\/\n document.getElementById('settings-form').addEventListener('submit', (e) => {\n e.preventDefault();\n localStorage.setItem('openaiKey', document.getElementById('api-key-input').value);\n const cheat = document.getElementById('cheat-code-input').value.trim();\n if (cheat === 'UNLOCK-ALL') {\n alert('Cheat activated: all generations unlocked!');\n }\n closeSettings();\n });\n\n \/* AI Toolkit *\/\n async function sendToAI() {\n const prompt = document.getElementById('chat-input').value;\n if (!prompt) return;\n const key = localStorage.getItem('openaiKey');\n if (!key) { alert('Save your OpenAI key in Settings first.'); return; }\n document.getElementById('chat-messages').innerHTML += `<p class=\"text-right yellow-accent\">${prompt}<\/p>`;\n try {\n const res = await fetch('https:\/\/api.openai.com\/v1\/images\/generations', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json', 'Authorization': `Bearer ${key}` },\n body: JSON.stringify({ prompt, n: 1, size: '256x256' })\n });\n const data = await res.json();\n const url = data.data[0].url;\n const gallery = document.getElementById('gallery');\n gallery.innerHTML = `<img decoding=\"async\" src=\"${url}\" class=\"rounded\" alt=\"generated\" \/>`;\n } catch (err) {\n alert('Error generating image. Check API key.');\n }\n document.getElementById('chat-input').value = '';\n }\n\n \/* init *\/\n initMemoryGame(); loadQuiz(); resetHangman(); resetScramble();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Te Whakapapa o Te Wh\u0101nau H\u016bia – Interactive Portal How to use this portal Interactive Story: use arrows to move […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-579","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Taonga Admin","author_link":"https:\/\/taonga.nxfanz.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Te Whakapapa o Te Wh\u0101nau H\u016bia – Interactive Portal How to use this portal Interactive Story: use arrows to move […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=579"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/579\/revisions"}],"predecessor-version":[{"id":580,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/579\/revisions\/580"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}