He Taonga Tuku Iho Hub – Digital Whakapapa Platform<\/title>\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 --darkest-grey: #0a0a0a;\n --dark-grey: #1a1a1a;\n --medium-grey: #2a2a2a;\n --light-grey: #3a3a3a;\n --yellow: #ffd700;\n --red: #ff1744;\n --white: #ffffff;\n --gradient-primary: linear-gradient(135deg, var(--yellow), var(--red));\n --shadow-glow: 0 0 20px rgba(255, 215, 0, 0.3);\n --border-radius: 12px;\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: var(--darkest-grey);\n color: var(--white);\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* Navigation *\/\n .nav-container {\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1000;\n background: rgba(10, 10, 10, 0.9);\n backdrop-filter: blur(10px);\n border-bottom: 1px solid var(--light-grey);\n }\n\n .nav-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n max-width: 1400px;\n margin: 0 auto;\n }\n\n .logo {\n font-size: 1.5rem;\n font-weight: 700;\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n }\n\n .nav-links a {\n color: var(--white);\n text-decoration: none;\n position: relative;\n transition: var(--transition);\n }\n\n .nav-links a:hover {\n color: var(--yellow);\n }\n\n .nav-links a::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--gradient-primary);\n transition: var(--transition);\n }\n\n .nav-links a:hover::after {\n width: 100%;\n }\n\n .auth-buttons {\n display: flex;\n gap: 1rem;\n }\n\n .btn {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: var(--border-radius);\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .btn-primary {\n background: var(--gradient-primary);\n color: var(--white);\n box-shadow: var(--shadow-glow);\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 30px rgba(255, 215, 0, 0.4);\n }\n\n .btn-secondary {\n background: transparent;\n color: var(--white);\n border: 2px solid var(--light-grey);\n }\n\n .btn-secondary:hover {\n border-color: var(--yellow);\n color: var(--yellow);\n }\n\n \/* Landing Page *\/\n .hero {\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: radial-gradient(circle at center, var(--dark-grey) 0%, var(--darkest-grey) 100%);\n position: relative;\n overflow: hidden;\n }\n\n .hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grid\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\"><path d=\"M 10 0 L 0 0 0 10\" fill=\"none\" stroke=\"%23333\" stroke-width=\"0.5\"\/><\/pattern><\/defs><rect width=\"100\" height=\"100\" fill=\"url(%23grid)\"\/><\/svg>');\n opacity: 0.1;\n }\n\n .hero-content {\n text-align: center;\n max-width: 800px;\n padding: 2rem;\n z-index: 1;\n }\n\n .hero h1 {\n font-size: clamp(2.5rem, 5vw, 4rem);\n margin-bottom: 1rem;\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .hero p {\n font-size: 1.25rem;\n color: var(--light-grey);\n margin-bottom: 2rem;\n }\n\n .hero-buttons {\n display: flex;\n gap: 1rem;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n \/* Dashboard *\/\n .dashboard {\n display: none;\n min-height: 100vh;\n padding-top: 80px;\n background: var(--darkest-grey);\n }\n\n .dashboard-grid {\n display: grid;\n grid-template-columns: 250px 1fr;\n gap: 2rem;\n max-width: 1400px;\n margin: 0 auto;\n padding: 2rem;\n }\n\n .sidebar {\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n padding: 1.5rem;\n height: fit-content;\n position: sticky;\n top: 100px;\n }\n\n .sidebar h3 {\n color: var(--yellow);\n margin-bottom: 1rem;\n font-size: 1.25rem;\n }\n\n .sidebar ul {\n list-style: none;\n }\n\n .sidebar li {\n margin-bottom: 0.5rem;\n }\n\n .sidebar a {\n color: var(--white);\n text-decoration: none;\n display: block;\n padding: 0.5rem;\n border-radius: 8px;\n transition: var(--transition);\n }\n\n .sidebar a:hover,\n .sidebar a.active {\n background: var(--medium-grey);\n color: var(--yellow);\n }\n\n .main-content {\n display: grid;\n gap: 2rem;\n }\n\n .content-section {\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n padding: 2rem;\n border: 1px solid var(--medium-grey);\n }\n\n .content-section h2 {\n color: var(--yellow);\n margin-bottom: 1rem;\n font-size: 1.75rem;\n }\n\n \/* Family Tree *\/\n .family-tree {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 2rem;\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n }\n\n .generation {\n background: var(--medium-grey);\n border-radius: var(--border-radius);\n padding: 1.5rem;\n border-left: 4px solid var(--yellow);\n }\n\n .generation h3 {\n color: var(--yellow);\n margin-bottom: 1rem;\n }\n\n .person {\n display: flex;\n align-items: center;\n gap: 1rem;\n margin-bottom: 0.5rem;\n padding: 0.5rem;\n background: var(--light-grey);\n border-radius: 8px;\n }\n\n .person-info {\n display: flex;\n flex-direction: column;\n }\n\n .person-name {\n font-weight: 600;\n color: var(--white);\n }\n\n .person-details {\n font-size: 0.875rem;\n color: var(--light-grey);\n }\n\n \/* AI Tools *\/\n .ai-tools-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1.5rem;\n }\n\n .tool-card {\n background: var(--medium-grey);\n border-radius: var(--border-radius);\n padding: 1.5rem;\n text-align: center;\n transition: var(--transition);\n border: 1px solid transparent;\n }\n\n .tool-card:hover {\n transform: translateY(-5px);\n border-color: var(--yellow);\n box-shadow: var(--shadow-glow);\n }\n\n .tool-icon {\n font-size: 3rem;\n color: var(--yellow);\n margin-bottom: 1rem;\n }\n\n \/* Forms *\/\n .form-group {\n margin-bottom: 1.5rem;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 0.5rem;\n color: var(--yellow);\n font-weight: 600;\n }\n\n .form-group input,\n .form-group textarea,\n .form-group select {\n width: 100%;\n padding: 0.75rem;\n background: var(--medium-grey);\n border: 1px solid var(--light-grey);\n border-radius: 8px;\n color: var(--white);\n font-size: 1rem;\n }\n\n .form-group input:focus,\n .form-group textarea:focus,\n .form-group select:focus {\n outline: none;\n border-color: var(--yellow);\n box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);\n }\n\n \/* Modal *\/\n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.8);\n z-index: 2000;\n align-items: center;\n justify-content: center;\n }\n\n .modal-content {\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n padding: 2rem;\n max-width: 500px;\n width: 90%;\n max-height: 80vh;\n overflow-y: auto;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n }\n\n .close {\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--light-grey);\n }\n\n .close:hover {\n color: var(--red);\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n\n .dashboard-grid {\n grid-template-columns: 1fr;\n }\n\n .sidebar {\n position: static;\n }\n\n .hero-buttons {\n flex-direction: column;\n align-items: center;\n }\n }\n\n \/* Animations *\/\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .fade-in {\n animation: fadeIn 0.6s ease-out;\n }\n\n \/* Utility Classes *\/\n .hidden {\n display: none !important;\n }\n\n .text-center {\n text-align: center;\n }\n\n .mb-2 {\n margin-bottom: 1rem;\n }\n\n .mt-2 {\n margin-top: 1rem;\n }\n\n \/* Language Toggle *\/\n .language-toggle {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background: var(--yellow);\n color: var(--darkest-grey);\n padding: 0.75rem;\n border-radius: 50%;\n cursor: pointer;\n box-shadow: var(--shadow-glow);\n transition: var(--transition);\n }\n\n .language-toggle:hover {\n transform: scale(1.1);\n }\n <\/style>\n <\/head>\n\n <body>\n <nav class=\"nav-container\">\n <div class=\"nav-content\">\n <div class=\"logo\">\n <i class=\"fas fa-kiwi-bird\"><\/i>\n He Taonga Tuku Iho\n <\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#home\" onclick=\"showLanding()\">Home<\/a><\/li>\n <li><a href=\"#dashboard\" onclick=\"showDashboard()\">Dashboard<\/a><\/li>\n <li><a href=\"#community\" onclick=\"showSection('community')\">Community<\/a><\/li>\n <li><a href=\"#about\" onclick=\"showSection('about')\">About<\/a><\/li>\n <\/ul>\n <div class=\"auth-buttons\">\n <button class=\"btn btn-secondary\" onclick=\"openModal('loginModal')\">Sign In<\/button>\n <button class=\"btn btn-primary\" onclick=\"openModal('registerModal')\">Sign Up<\/button>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <main id=\"landingPage\">\n <section class=\"hero\">\n <div class=\"hero-content fade-in\">\n <h1>He Taonga Tuku Iho Hub<\/h1>\n <p>Digital Whakapapa Platform – Preserving our heritage, connecting generations with AI-powered tools<\/p>\n <div class=\"hero-buttons\">\n <button class=\"btn btn-primary\" onclick=\"openModal('registerModal')\">\n <i class=\"fas fa-user-plus\"><\/i>\n Join Our Wh\u0101nau\n <\/button>\n <button class=\"btn btn-secondary\" onclick=\"showDashboard()\">\n <i class=\"fas fa-tachometer-alt\"><\/i>\n Explore Dashboard\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <main id=\"dashboard\" class=\"dashboard\">\n <div class=\"dashboard-grid\">\n <aside class=\"sidebar\">\n <h3>Navigation<\/h3>\n <ul>\n <li><a href=\"#\" onclick=\"showSection('whakapapa')\" class=\"active\">\n <i class=\"fas fa-sitemap\"><\/i> Whakapapa\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('ai-tools')\">\n <i class=\"fas fa-robot\"><\/i> AI Tools\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('stories')\">\n <i class=\"fas fa-book\"><\/i> Stories\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('te-reo')\">\n <i class=\"fas fa-language\"><\/i> Te Reo M\u0101ori\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('games')\">\n <i class=\"fas fa-gamepad\"><\/i> Games\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('merch')\">\n <i class=\"fas fa-tshirt\"><\/i> Merch Generator\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('messages')\">\n <i class=\"fas fa-comments\"><\/i> Messages\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('profile')\">\n <i class=\"fas fa-user\"><\/i> Profile\n <\/a><\/li>\n <\/ul>\n <\/aside>\n\n <div class=\"main-content\">\n \n <div id=\"whakapapa\" class=\"content-section\">\n <h2>Whakapapa – Family Tree<\/h2>\n <button class=\"btn btn-primary mb-2\" onclick=\"openModal('addPersonModal')\">\n <i class=\"fas fa-plus\"><\/i> Add Person\n <\/button>\n <div class=\"family-tree\" id=\"familyTreeContainer\">\n \n <\/div>\n <\/div>\n\n \n <div id=\"ai-tools\" class=\"content-section hidden\">\n <h2>AI-Powered Creation Tools<\/h2>\n <div class=\"ai-tools-grid\">\n <div class=\"tool-card\">\n <i class=\"fas fa-magic tool-icon\"><\/i>\n <h3>Story Generator<\/h3>\n <p>Create engaging stories with AI assistance<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('storyModal')\">Create Story<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-music tool-icon\"><\/i>\n <h3>Waiata Creator<\/h3>\n <p>Generate lyrics in te reo M\u0101ori<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('lyricsModal')\">Create Lyrics<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-newspaper tool-icon\"><\/i>\n <h3>Newsletter Generator<\/h3>\n <p>Create community newsletters<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('newsletterModal')\">Create Newsletter<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-globe tool-icon\"><\/i>\n <h3>Website Generator<\/h3>\n <p>Generate website content<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('websiteModal')\">Create Website<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-gamepad tool-icon\"><\/i>\n <h3>Game Generator<\/h3>\n <p>Convert text to interactive games<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('gameModal')\">Create Game<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-palette tool-icon\"><\/i>\n <h3>Merch Designer<\/h3>\n <p>Design family merchandise<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('merchModal')\">Design Merch<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"stories\" class=\"content-section hidden\">\n <h2>Family Stories<\/h2>\n <div id=\"storiesContainer\">\n <p>Stories will appear here…<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"te-reo\" class=\"content-section hidden\">\n <h2>Learn Te Reo M\u0101ori<\/h2>\n <div class=\"ai-tools-grid\">\n <div class=\"tool-card\">\n <i class=\"fas fa-graduation-cap tool-icon\"><\/i>\n <h3>Beginner Lessons<\/h3>\n <p>Start your te reo journey<\/p>\n <button class=\"btn btn-primary\">Start Learning<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-microphone tool-icon\"><\/i>\n <h3>Pronunciation Guide<\/h3>\n <p>Perfect your pronunciation<\/p>\n <button class=\"btn btn-primary\">Practice<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"games\" class=\"content-section hidden\">\n <h2>Interactive Games<\/h2>\n <div class=\"ai-tools-grid\">\n <div class=\"tool-card\">\n <i class=\"fas fa-puzzle-piece tool-icon\"><\/i>\n <h3>Whakapapa Challenge<\/h3>\n <p>Test your knowledge of family history<\/p>\n <button class=\"btn btn-primary\">Play Game<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-cards-blank tool-icon\"><\/i>\n <h3>Memory Match<\/h3>\n <p>Remember family connections<\/p>\n <button class=\"btn btn-primary\">Play Game<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"messages\" class=\"content-section hidden\">\n <h2>Community Messages<\/h2>\n <div id=\"messagesContainer\">\n <div class=\"form-group\">\n <label>New Message<\/label>\n <textarea rows=\"4\" placeholder=\"Share your thoughts with the wh\u0101nau...\"><\/textarea>\n <\/div>\n <button class=\"btn btn-primary\">Send Message<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"profile\" class=\"content-section hidden\">\n <h2>Profile Settings<\/h2>\n <form>\n <div class=\"form-group\">\n <label>Full Name<\/label>\n <input type=\"text\" value=\"John Doe\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" value=\"john@example.com\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Iwi\/Hap\u016b<\/label>\n <input type=\"text\" placeholder=\"Te Arawa\" \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Update Profile<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n \n <div class=\"language-toggle\" onclick=\"toggleLanguage()\">\n <i class=\"fas fa-language\"><\/i>\n <\/div>\n\n \n <div id=\"loginModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Sign In<\/h2>\n <span class=\"close\" onclick=\"closeModal('loginModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"handleLogin(event)\">\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Password<\/label>\n <input type=\"password\" required \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Sign In<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div id=\"registerModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Join Our Wh\u0101nau<\/h2>\n <span class=\"close\" onclick=\"closeModal('registerModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"handleRegister(event)\">\n <div class=\"form-group\">\n <label>Full Name<\/label>\n <input type=\"text\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Password<\/label>\n <input type=\"password\" required \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Create Account<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div id=\"addPersonModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Add Family Member<\/h2>\n <span class=\"close\" onclick=\"closeModal('addPersonModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"addPerson(event)\">\n <div class=\"form-group\">\n <label>Name<\/label>\n <input type=\"text\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Birth Year<\/label>\n <input type=\"number\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Death Year<\/label>\n <input type=\"number\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Generation<\/label>\n <select required>\n <option value=\"1\">Generation 1<\/option>\n <option value=\"2\">Generation 2<\/option>\n <option value=\"3\">Generation 3<\/option>\n <option value=\"4\">Generation 4<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Add Person<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div id=\"storyModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Create Story<\/h2>\n <span class=\"close\" onclick=\"closeModal('storyModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"createStory(event)\">\n <div class=\"form-group\">\n <label>Title<\/label>\n <input type=\"text\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Story<\/label>\n <textarea rows=\"6\" required><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Create Story<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Global state\n let currentUser = null;\n let currentLanguage = 'en';\n let familyData = [{\n name: \"Kotua\",\n birth: 1702,\n death: 1750,\n generation: 1,\n spouse: \"Hape Kaitoa\"\n },\n {\n name: \"Hape Kaitoa\",\n birth: 1704,\n death: 1751,\n generation: 1,\n spouse: \"Kotua\"\n },\n {\n name: \"Paihau\",\n birth: 1730,\n death: 1760,\n generation: 2,\n spouse: \"Punatoto\"\n },\n {\n name: \"Punatoto\",\n birth: 1732,\n death: 1761,\n generation: 2,\n spouse: \"Paihau\"\n },\n {\n name: \"Kaawa\",\n birth: 1760,\n death: 1789,\n generation: 3,\n spouse: \"Kiriwaepana\"\n },\n {\n name: \"Kiriwaepana\",\n birth: 1759,\n death: 1762,\n generation: 3,\n spouse: \"Kaawa\"\n },\n {\n name: \"Horotai\",\n birth: 1785,\n death: 1825,\n generation: 4,\n spouse: \"Urumatariki\"\n },\n {\n name: \"Urumatariki\",\n birth: 1790,\n death: 1826,\n generation: 4,\n spouse: \"Horotai\"\n }\n ];\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', function() {\n renderFamilyTree();\n });\n \/\/ Navigation\n function showLanding() {\n document.getElementById('landingPage').style.display = 'block';\n document.getElementById('dashboard').style.display = 'none';\n }\n\n function showDashboard() {\n document.getElementById('landingPage').style.display = 'none';\n document.getElementById('dashboard').style.display = 'block';\n showSection('whakapapa');\n }\n\n function showSection(sectionId) {\n \/\/ Hide all sections\n const sections = document.querySelectorAll('.content-section');\n sections.forEach(section => section.classList.add('hidden'));\n \/\/ Show selected section\n document.getElementById(sectionId).classList.remove('hidden');\n \/\/ Update active nav\n const navLinks = document.querySelectorAll('.sidebar a');\n navLinks.forEach(link => link.classList.remove('active'));\n event.target.classList.add('active');\n }\n \/\/ Modal functions\n function openModal(modalId) {\n document.getElementById(modalId).style.display = 'flex';\n }\n\n function closeModal(modalId) {\n document.getElementById(modalId).style.display = 'none';\n }\n \/\/ Authentication\n function handleLogin(e) {\n e.preventDefault();\n currentUser = {\n name: 'Demo User',\n email: 'demo@example.com'\n };\n closeModal('loginModal');\n showDashboard();\n }\n\n function handleRegister(e) {\n e.preventDefault();\n currentUser = {\n name: 'New User',\n email: 'new@example.com'\n };\n closeModal('registerModal');\n showDashboard();\n }\n \/\/ Family Tree\n function renderFamilyTree() {\n const container = document.getElementById('familyTreeContainer');\n container.innerHTML = '';\n const generations = {};\n familyData.forEach(person => {\n if (!generations[person.generation]) {\n generations[person.generation] = [];\n }\n generations[person.generation].push(person);\n });\n Object.keys(generations).sort().forEach(gen => {\n const genDiv = document.createElement('div');\n genDiv.className = 'generation';\n genDiv.innerHTML = `<h3>Generation ${gen}<\/h3>`;\n generations[gen].forEach(person => {\n const personDiv = document.createElement('div');\n personDiv.className = 'person';\n personDiv.innerHTML = `\n <div class=\"person-info\">\n <span class=\"person-name\">${person.name}<\/span>\n <span class=\"person-details\">${person.birth}-${person.death || 'Living'}<\/span>\n ${person.spouse ? `<span class=\"person-details\">Spouse: ${person.spouse}<\/span>` : ''}\n <\/div>\n `;\n genDiv.appendChild(personDiv);\n });\n container.appendChild(genDiv);\n });\n }\n\n function addPerson(e) {\n e.preventDefault();\n const formData = new FormData(e.target);\n const newPerson = {\n name: formData.get('name'),\n birth: parseInt(formData.get('birth')),\n death: parseInt(formData.get('death')) || null,\n generation: parseInt(formData.get('generation'))\n };\n familyData.push(newPerson);\n renderFamilyTree();\n closeModal('addPersonModal');\n e.target.reset();\n }\n \/\/ AI Tools\n function createStory(e) {\n e.preventDefault();\n const formData = new FormData(e.target);\n const story = {\n title: formData.get('title'),\n content: formData.get('story'),\n date: new Date().toISOString()\n };\n \/\/ Add to stories\n const container = document.getElementById('storiesContainer');\n container.innerHTML = `\n <div class=\"content-section\">\n <h3>${story.title}<\/h3>\n <p>${story.content}<\/p>\n <small>Created: ${new Date(story.date).toLocaleDateString()}<\/small>\n <\/div>\n `;\n closeModal('storyModal');\n e.target.reset();\n showSection('stories');\n }\n \/\/ Language toggle\n function toggleLanguage() {\n currentLanguage = currentLanguage === 'en' ? 'mi' : 'en';\n \/\/ Implement language switching logic here\n alert(`Language switched to ${currentLanguage === 'en' ? 'English' : 'Te Reo M\u0101ori'}`);\n }\n \/\/ Close modals when clicking outside\n window.onclick = function(event) {\n if (event.target.classList.contains('modal')) {\n event.target.style.display = 'none';\n }\n }\n <\/script>\n <\/body>\n\n <\/html>\n\n\n\n<DOCTYPE html>\n <html lang=\"en\">\n\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>He Taonga Tuku Iho Hub – Digital Whakapapa Platform<\/title>\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 --darkest-grey: #0a0a0a;\n --dark-grey: #1a1a1a;\n --medium-grey: #2a2a2a;\n --light-grey: #3a3a3a;\n --yellow: #ffd700;\n --red: #ff1744;\n --white: #ffffff;\n --gradient-primary: linear-gradient(135deg, var(--yellow), var(--red));\n --shadow-glow: 0 0 20px rgba(255, 215, 0, 0.3);\n --border-radius: 12px;\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: var(--darkest-grey);\n color: var(--white);\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* Navigation *\/\n .nav-container {\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1000;\n background: rgba(10, 10, 10, 0.9);\n backdrop-filter: blur(10px);\n border-bottom: 1px solid var(--light-grey);\n }\n\n .nav-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n max-width: 1400px;\n margin: 0 auto;\n }\n\n .logo {\n font-size: 1.5rem;\n font-weight: 700;\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n }\n\n .nav-links a {\n color: var(--white);\n text-decoration: none;\n position: relative;\n transition: var(--transition);\n }\n\n .nav-links a:hover {\n color: var(--yellow);\n }\n\n .nav-links a::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--gradient-primary);\n transition: var(--transition);\n }\n\n .nav-links a:hover::after {\n width: 100%;\n }\n\n .auth-buttons {\n display: flex;\n gap: 1rem;\n }\n\n .btn {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: var(--border-radius);\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .btn-primary {\n background: var(--gradient-primary);\n color: var(--white);\n box-shadow: var(--shadow-glow);\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 30px rgba(255, 215, 0, 0.4);\n }\n\n .btn-secondary {\n background: transparent;\n color: var(--white);\n border: 2px solid var(--light-grey);\n }\n\n .btn-secondary:hover {\n border-color: var(--yellow);\n color: var(--yellow);\n }\n\n \/* Landing Page *\/\n .hero {\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: radial-gradient(circle at center, var(--dark-grey) 0%, var(--darkest-grey) 100%);\n position: relative;\n overflow: hidden;\n }\n\n .hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grid\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\"><path d=\"M 10 0 L 0 0 0 10\" fill=\"none\" stroke=\"%23333\" stroke-width=\"0.5\"\/><\/pattern><\/defs><rect width=\"100\" height=\"100\" fill=\"url(%23grid)\"\/><\/svg>');\n opacity: 0.1;\n }\n\n .hero-content {\n text-align: center;\n max-width: 800px;\n padding: 2rem;\n z-index: 1;\n }\n\n .hero h1 {\n font-size: clamp(2.5rem, 5vw, 4rem);\n margin-bottom: 1rem;\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .hero p {\n font-size: 1.25rem;\n color: var(--light-grey);\n margin-bottom: 2rem;\n }\n\n .hero-buttons {\n display: flex;\n gap: 1rem;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n \/* Dashboard *\/\n .dashboard {\n display: none;\n min-height: 100vh;\n padding-top: 80px;\n background: var(--darkest-grey);\n }\n\n .dashboard-grid {\n display: grid;\n grid-template-columns: 250px 1fr;\n gap: 2rem;\n max-width: 1400px;\n margin: 0 auto;\n padding: 2rem;\n }\n\n .sidebar {\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n padding: 1.5rem;\n height: fit-content;\n position: sticky;\n top: 100px;\n }\n\n .sidebar h3 {\n color: var(--yellow);\n margin-bottom: 1rem;\n font-size: 1.25rem;\n }\n\n .sidebar ul {\n list-style: none;\n }\n\n .sidebar li {\n margin-bottom: 0.5rem;\n }\n\n .sidebar a {\n color: var(--white);\n text-decoration: none;\n display: block;\n padding: 0.5rem;\n border-radius: 8px;\n transition: var(--transition);\n }\n\n .sidebar a:hover,\n .sidebar a.active {\n background: var(--medium-grey);\n color: var(--yellow);\n }\n\n .main-content {\n display: grid;\n gap: 2rem;\n }\n\n .content-section {\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n padding: 2rem;\n border: 1px solid var(--medium-grey);\n }\n\n .content-section h2 {\n color: var(--yellow);\n margin-bottom: 1rem;\n font-size: 1.75rem;\n }\n\n \/* Family Tree *\/\n .family-tree {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 2rem;\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n }\n\n .generation {\n background: var(--medium-grey);\n border-radius: var(--border-radius);\n padding: 1.5rem;\n border-left: 4px solid var(--yellow);\n }\n\n .generation h3 {\n color: var(--yellow);\n margin-bottom: 1rem;\n }\n\n .person {\n display: flex;\n align-items: center;\n gap: 1rem;\n margin-bottom: 0.5rem;\n padding: 0.5rem;\n background: var(--light-grey);\n border-radius: 8px;\n }\n\n .person-info {\n display: flex;\n flex-direction: column;\n }\n\n .person-name {\n font-weight: 600;\n color: var(--white);\n }\n\n .person-details {\n font-size: 0.875rem;\n color: var(--light-grey);\n }\n\n \/* AI Tools *\/\n .ai-tools-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1.5rem;\n }\n\n .tool-card {\n background: var(--medium-grey);\n border-radius: var(--border-radius);\n padding: 1.5rem;\n text-align: center;\n transition: var(--transition);\n border: 1px solid transparent;\n }\n\n .tool-card:hover {\n transform: translateY(-5px);\n border-color: var(--yellow);\n box-shadow: var(--shadow-glow);\n }\n\n .tool-icon {\n font-size: 3rem;\n color: var(--yellow);\n margin-bottom: 1rem;\n }\n\n \/* Forms *\/\n .form-group {\n margin-bottom: 1.5rem;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 0.5rem;\n color: var(--yellow);\n font-weight: 600;\n }\n\n .form-group input,\n .form-group textarea,\n .form-group select {\n width: 100%;\n padding: 0.75rem;\n background: var(--medium-grey);\n border: 1px solid var(--light-grey);\n border-radius: 8px;\n color: var(--white);\n font-size: 1rem;\n }\n\n .form-group input:focus,\n .form-group textarea:focus,\n .form-group select:focus {\n outline: none;\n border-color: var(--yellow);\n box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);\n }\n\n \/* Modal *\/\n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.8);\n z-index: 2000;\n align-items: center;\n justify-content: center;\n }\n\n .modal-content {\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n padding: 2rem;\n max-width: 500px;\n width: 90%;\n max-height: 80vh;\n overflow-y: auto;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n }\n\n .close {\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--light-grey);\n }\n\n .close:hover {\n color: var(--red);\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n\n .dashboard-grid {\n grid-template-columns: 1fr;\n }\n\n .sidebar {\n position: static;\n }\n\n .hero-buttons {\n flex-direction: column;\n align-items: center;\n }\n }\n\n \/* Animations *\/\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .fade-in {\n animation: fadeIn 0.6s ease-out;\n }\n\n \/* Utility Classes *\/\n .hidden {\n display: none !important;\n }\n\n .text-center {\n text-align: center;\n }\n\n .mb-2 {\n margin-bottom: 1rem;\n }\n\n .mt-2 {\n margin-top: 1rem;\n }\n\n \/* Language Toggle *\/\n .language-toggle {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background: var(--yellow);\n color: var(--darkest-grey);\n padding: 0.75rem;\n border-radius: 50%;\n cursor: pointer;\n box-shadow: var(--shadow-glow);\n transition: var(--transition);\n }\n\n .language-toggle:hover {\n transform: scale(1.1);\n }\n <\/style>\n <\/head>\n\n <body>\n <nav class=\"nav-container\">\n <div class=\"nav-content\">\n <div class=\"logo\">\n <i class=\"fas fa-kiwi-bird\"><\/i>\n He Taonga Tuku Iho\n <\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#home\" onclick=\"showLanding()\">Home<\/a><\/li>\n <li><a href=\"#dashboard\" onclick=\"showDashboard()\">Dashboard<\/a><\/li>\n <li><a href=\"#community\" onclick=\"showSection('community')\">Community<\/a><\/li>\n <li><a href=\"#about\" onclick=\"showSection('about')\">About<\/a><\/li>\n <\/ul>\n <div class=\"auth-buttons\">\n <button class=\"btn btn-secondary\" onclick=\"openModal('loginModal')\">Sign In<\/button>\n <button class=\"btn btn-primary\" onclick=\"openModal('registerModal')\">Sign Up<\/button>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <main id=\"landingPage\">\n <section class=\"hero\">\n <div class=\"hero-content fade-in\">\n <h1>He Taonga Tuku Iho Hub<\/h1>\n <p>Digital Whakapapa Platform – Preserving our heritage, connecting generations with AI-powered tools<\/p>\n <div class=\"hero-buttons\">\n <button class=\"btn btn-primary\" onclick=\"openModal('registerModal')\">\n <i class=\"fas fa-user-plus\"><\/i>\n Join Our Wh\u0101nau\n <\/button>\n <button class=\"btn btn-secondary\" onclick=\"showDashboard()\">\n <i class=\"fas fa-tachometer-alt\"><\/i>\n Explore Dashboard\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <main id=\"dashboard\" class=\"dashboard\">\n <div class=\"dashboard-grid\">\n <aside class=\"sidebar\">\n <h3>Navigation<\/h3>\n <ul>\n <li><a href=\"#\" onclick=\"showSection('whakapapa')\" class=\"active\">\n <i class=\"fas fa-sitemap\"><\/i> Whakapapa\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('ai-tools')\">\n <i class=\"fas fa-robot\"><\/i> AI Tools\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('stories')\">\n <i class=\"fas fa-book\"><\/i> Stories\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('te-reo')\">\n <i class=\"fas fa-language\"><\/i> Te Reo M\u0101ori\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('games')\">\n <i class=\"fas fa-gamepad\"><\/i> Games\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('merch')\">\n <i class=\"fas fa-tshirt\"><\/i> Merch Generator\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('messages')\">\n <i class=\"fas fa-comments\"><\/i> Messages\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('profile')\">\n <i class=\"fas fa-user\"><\/i> Profile\n <\/a><\/li>\n <\/ul>\n <\/aside>\n\n <div class=\"main-content\">\n \n <div id=\"whakapapa\" class=\"content-section\">\n <h2>Whakapapa – Family Tree<\/h2>\n <button class=\"btn btn-primary mb-2\" onclick=\"openModal('addPersonModal')\">\n <i class=\"fas fa-plus\"><\/i> Add Person\n <\/button>\n <div class=\"family-tree\" id=\"familyTreeContainer\">\n \n <\/div>\n <\/div>\n\n \n <div id=\"ai-tools\" class=\"content-section hidden\">\n <h2>AI-Powered Creation Tools<\/h2>\n <div class=\"ai-tools-grid\">\n <div class=\"tool-card\">\n <i class=\"fas fa-magic tool-icon\"><\/i>\n <h3>Story Generator<\/h3>\n <p>Create engaging stories with AI assistance<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('storyModal')\">Create Story<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-music tool-icon\"><\/i>\n <h3>Waiata Creator<\/h3>\n <p>Generate lyrics in te reo M\u0101ori<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('lyricsModal')\">Create Lyrics<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-newspaper tool-icon\"><\/i>\n <h3>Newsletter Generator<\/h3>\n <p>Create community newsletters<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('newsletterModal')\">Create Newsletter<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-globe tool-icon\"><\/i>\n <h3>Website Generator<\/h3>\n <p>Generate website content<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('websiteModal')\">Create Website<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-gamepad tool-icon\"><\/i>\n <h3>Game Generator<\/h3>\n <p>Convert text to interactive games<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('gameModal')\">Create Game<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-palette tool-icon\"><\/i>\n <h3>Merch Designer<\/h3>\n <p>Design family merchandise<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('merchModal')\">Design Merch<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"stories\" class=\"content-section hidden\">\n <h2>Family Stories<\/h2>\n <div id=\"storiesContainer\">\n <p>Stories will appear here…<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"te-reo\" class=\"content-section hidden\">\n <h2>Learn Te Reo M\u0101ori<\/h2>\n <div class=\"ai-tools-grid\">\n <div class=\"tool-card\">\n <i class=\"fas fa-graduation-cap tool-icon\"><\/i>\n <h3>Beginner Lessons<\/h3>\n <p>Start your te reo journey<\/p>\n <button class=\"btn btn-primary\">Start Learning<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-microphone tool-icon\"><\/i>\n <h3>Pronunciation Guide<\/h3>\n <p>Perfect your pronunciation<\/p>\n <button class=\"btn btn-primary\">Practice<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"games\" class=\"content-section hidden\">\n <h2>Interactive Games<\/h2>\n <div class=\"ai-tools-grid\">\n <div class=\"tool-card\">\n <i class=\"fas fa-puzzle-piece tool-icon\"><\/i>\n <h3>Whakapapa Challenge<\/h3>\n <p>Test your knowledge of family history<\/p>\n <button class=\"btn btn-primary\">Play Game<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-cards-blank tool-icon\"><\/i>\n <h3>Memory Match<\/h3>\n <p>Remember family connections<\/p>\n <button class=\"btn btn-primary\">Play Game<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"messages\" class=\"content-section hidden\">\n <h2>Community Messages<\/h2>\n <div id=\"messagesContainer\">\n <div class=\"form-group\">\n <label>New Message<\/label>\n <textarea rows=\"4\" placeholder=\"Share your thoughts with the wh\u0101nau...\"><\/textarea>\n <\/div>\n <button class=\"btn btn-primary\">Send Message<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"profile\" class=\"content-section hidden\">\n <h2>Profile Settings<\/h2>\n <form>\n <div class=\"form-group\">\n <label>Full Name<\/label>\n <input type=\"text\" value=\"John Doe\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" value=\"john@example.com\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Iwi\/Hap\u016b<\/label>\n <input type=\"text\" placeholder=\"Te Arawa\" \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Update Profile<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n \n <div class=\"language-toggle\" onclick=\"toggleLanguage()\">\n <i class=\"fas fa-language\"><\/i>\n <\/div>\n\n \n <div id=\"loginModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Sign In<\/h2>\n <span class=\"close\" onclick=\"closeModal('loginModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"handleLogin(event)\">\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Password<\/label>\n <input type=\"password\" required \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Sign In<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div id=\"registerModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Join Our Wh\u0101nau<\/h2>\n <span class=\"close\" onclick=\"closeModal('registerModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"handleRegister(event)\">\n <div class=\"form-group\">\n <label>Full Name<\/label>\n <input type=\"text\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Password<\/label>\n <input type=\"password\" required \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Create Account<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div id=\"addPersonModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Add Family Member<\/h2>\n <span class=\"close\" onclick=\"closeModal('addPersonModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"addPerson(event)\">\n <div class=\"form-group\">\n <label>Name<\/label>\n <input type=\"text\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Birth Year<\/label>\n <input type=\"number\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Death Year<\/label>\n <input type=\"number\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Generation<\/label>\n <select required>\n <option value=\"1\">Generation 1<\/option>\n <option value=\"2\">Generation 2<\/option>\n <option value=\"3\">Generation 3<\/option>\n <option value=\"4\">Generation 4<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Add Person<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div id=\"storyModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Create Story<\/h2>\n <span class=\"close\" onclick=\"closeModal('storyModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"createStory(event)\">\n <div class=\"form-group\">\n <label>Title<\/label>\n <input type=\"text\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Story<\/label>\n <textarea rows=\"6\" required><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Create Story<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Global state\n let currentUser = null;\n let currentLanguage = 'en';\n let familyData = [{\n name: \"Kotua\",\n birth: 1702,\n death: 1750,\n generation: 1,\n spouse: \"Hape Kaitoa\"\n },\n {\n name: \"Hape Kaitoa\",\n birth: 1704,\n death: 1751,\n generation: 1,\n spouse: \"Kotua\"\n },\n {\n name: \"Paihau\",\n birth: 1730,\n death: 1760,\n generation: 2,\n spouse: \"Punatoto\"\n },\n {\n name: \"Punatoto\",\n birth: 1732,\n death: 1761,\n generation: 2,\n spouse: \"Paihau\"\n },\n {\n name: \"Kaawa\",\n birth: 1760,\n death: 1789,\n generation: 3,\n spouse: \"Kiriwaepana\"\n },\n {\n name: \"Kiriwaepana\",\n birth: 1759,\n death: 1762,\n generation: 3,\n spouse: \"Kaawa\"\n },\n {\n name: \"Horotai\",\n birth: 1785,\n death: 1825,\n generation: 4,\n spouse: \"Urumatariki\"\n },\n {\n name: \"Urumatariki\",\n birth: 1790,\n death: 1826,\n generation: 4,\n spouse: \"Horotai\"\n }\n ];\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', function() {\n renderFamilyTree();\n });\n \/\/ Navigation\n function showLanding() {\n document.getElementById('landingPage').style.display = 'block';\n document.getElementById('dashboard').style.display = 'none';\n }\n\n function showDashboard() {\n document.getElementById('landingPage').style.display = 'none';\n document.getElementById('dashboard').style.display = 'block';\n showSection('whakapapa');\n }\n\n function showSection(sectionId) {\n \/\/ Hide all sections\n const sections = document.querySelectorAll('.content-section');\n sections.forEach(section => section.classList.add('hidden'));\n \/\/ Show selected section\n document.getElementById(sectionId).classList.remove('hidden');\n \/\/ Update active nav\n const navLinks = document.querySelectorAll('.sidebar a');\n navLinks.forEach(link => link.classList.remove('active'));\n event.target.classList.add('active');\n }\n \/\/ Modal functions\n function openModal(modalId) {\n document.getElementById(modalId).style.display = 'flex';\n }\n\n function closeModal(modalId) {\n document.getElementById(modalId).style.display = 'none';\n }\n \/\/ Authentication\n function handleLogin(e) {\n e.preventDefault();\n currentUser = {\n name: 'Demo User',\n email: 'demo@example.com'\n };\n closeModal('loginModal');\n showDashboard();\n }\n\n function handleRegister(e) {\n e.preventDefault();\n currentUser = {\n name: 'New User',\n email: 'new@example.com'\n };\n closeModal('registerModal');\n showDashboard();\n }\n \/\/ Family Tree\n function renderFamilyTree() {\n const container = document.getElementById('familyTreeContainer');\n container.innerHTML = '';\n const generations = {};\n familyData.forEach(person => {\n if (!generations[person.generation]) {\n generations[person.generation] = [];\n }\n generations[person.generation].push(person);\n });\n Object.keys(generations).sort().forEach(gen => {\n const genDiv = document.createElement('div');\n genDiv.className = 'generation';\n genDiv.innerHTML = `<h3>Generation ${gen}<\/h3>`;\n generations[gen].forEach(person => {\n const personDiv = document.createElement('div');\n personDiv.className = 'person';\n personDiv.innerHTML = `\n <div class=\"person-info\">\n <span class=\"person-name\">${person.name}<\/span>\n <span class=\"person-details\">${person.birth}-${person.death || 'Living'}<\/span>\n ${person.spouse ? `<span class=\"person-details\">Spouse: ${person.spouse}<\/span>` : ''}\n <\/div>\n `;\n genDiv.appendChild(personDiv);\n });\n container.appendChild(genDiv);\n });\n }\n\n function addPerson(e) {\n e.preventDefault();\n const formData = new FormData(e.target);\n const newPerson = {\n name: formData.get('name'),\n birth: parseInt(formData.get('birth')),\n death: parseInt(formData.get('death')) || null,\n generation: parseInt(formData.get('generation'))\n };\n familyData.push(newPerson);\n renderFamilyTree();\n closeModal('addPersonModal');\n e.target.reset();\n }\n \/\/ AI Tools\n function createStory(e) {\n e.preventDefault();\n const formData = new FormData(e.target);\n const story = {\n title: formData.get('title'),\n content: formData.get('story'),\n date: new Date().toISOString()\n };\n \/\/ Add to stories\n const container = document.getElementById('storiesContainer');\n container.innerHTML = `\n <div class=\"content-section\">\n <h3>${story.title}<\/h3>\n <p>${story.content}<\/p>\n <small>Created: ${new Date(story.date).toLocaleDateString()}<\/small>\n <\/div>\n `;\n closeModal('storyModal');\n e.target.reset();\n showSection('stories');\n }\n \/\/ Language toggle\n function toggleLanguage() {\n currentLanguage = currentLanguage === 'en' ? 'mi' : 'en';\n \/\/ Implement language switching logic here\n alert(`Language switched to ${currentLanguage === 'en' ? 'English' : 'Te Reo M\u0101ori'}`);\n }\n \/\/ Close modals when clicking outside\n window.onclick = function(event) {\n if (event.target.classList.contains('modal')) {\n event.target.style.display = 'none';\n }\n }\n <\/script>\n <\/body>\n\n <\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>He Taonga Tuku Iho Hub – Digital Whakapapa Platform He Taonga Tuku Iho Home Dashboard Community About Sign In Sign […]<\/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":"","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-550","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":"He Taonga Tuku Iho Hub – Digital Whakapapa Platform He Taonga Tuku Iho Home Dashboard Community About Sign In Sign […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/550","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=550"}],"version-history":[{"count":3,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/550\/revisions"}],"predecessor-version":[{"id":553,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/550\/revisions\/553"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=550"}],"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":550,"date":"2025-08-11T23:48:36","date_gmt":"2025-08-11T23:48:36","guid":{"rendered":"https:\/\/taonga.nxfanz.com\/?page_id=550"},"modified":"2025-08-11T23:48:38","modified_gmt":"2025-08-11T23:48:38","slug":"550-2","status":"publish","type":"page","link":"https:\/\/taonga.nxfanz.com\/?page_id=550","title":{"rendered":""},"content":{"rendered":"\n\n \n\n \n \n \n He Taonga Tuku Iho Hub – Digital Whakapapa Platform<\/title>\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 --darkest-grey: #0a0a0a;\n --dark-grey: #1a1a1a;\n --medium-grey: #2a2a2a;\n --light-grey: #3a3a3a;\n --yellow: #ffd700;\n --red: #ff1744;\n --white: #ffffff;\n --gradient-primary: linear-gradient(135deg, var(--yellow), var(--red));\n --shadow-glow: 0 0 20px rgba(255, 215, 0, 0.3);\n --border-radius: 12px;\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: var(--darkest-grey);\n color: var(--white);\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* Navigation *\/\n .nav-container {\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1000;\n background: rgba(10, 10, 10, 0.9);\n backdrop-filter: blur(10px);\n border-bottom: 1px solid var(--light-grey);\n }\n\n .nav-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n max-width: 1400px;\n margin: 0 auto;\n }\n\n .logo {\n font-size: 1.5rem;\n font-weight: 700;\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n }\n\n .nav-links a {\n color: var(--white);\n text-decoration: none;\n position: relative;\n transition: var(--transition);\n }\n\n .nav-links a:hover {\n color: var(--yellow);\n }\n\n .nav-links a::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--gradient-primary);\n transition: var(--transition);\n }\n\n .nav-links a:hover::after {\n width: 100%;\n }\n\n .auth-buttons {\n display: flex;\n gap: 1rem;\n }\n\n .btn {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: var(--border-radius);\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .btn-primary {\n background: var(--gradient-primary);\n color: var(--white);\n box-shadow: var(--shadow-glow);\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 30px rgba(255, 215, 0, 0.4);\n }\n\n .btn-secondary {\n background: transparent;\n color: var(--white);\n border: 2px solid var(--light-grey);\n }\n\n .btn-secondary:hover {\n border-color: var(--yellow);\n color: var(--yellow);\n }\n\n \/* Landing Page *\/\n .hero {\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: radial-gradient(circle at center, var(--dark-grey) 0%, var(--darkest-grey) 100%);\n position: relative;\n overflow: hidden;\n }\n\n .hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grid\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\"><path d=\"M 10 0 L 0 0 0 10\" fill=\"none\" stroke=\"%23333\" stroke-width=\"0.5\"\/><\/pattern><\/defs><rect width=\"100\" height=\"100\" fill=\"url(%23grid)\"\/><\/svg>');\n opacity: 0.1;\n }\n\n .hero-content {\n text-align: center;\n max-width: 800px;\n padding: 2rem;\n z-index: 1;\n }\n\n .hero h1 {\n font-size: clamp(2.5rem, 5vw, 4rem);\n margin-bottom: 1rem;\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .hero p {\n font-size: 1.25rem;\n color: var(--light-grey);\n margin-bottom: 2rem;\n }\n\n .hero-buttons {\n display: flex;\n gap: 1rem;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n \/* Dashboard *\/\n .dashboard {\n display: none;\n min-height: 100vh;\n padding-top: 80px;\n background: var(--darkest-grey);\n }\n\n .dashboard-grid {\n display: grid;\n grid-template-columns: 250px 1fr;\n gap: 2rem;\n max-width: 1400px;\n margin: 0 auto;\n padding: 2rem;\n }\n\n .sidebar {\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n padding: 1.5rem;\n height: fit-content;\n position: sticky;\n top: 100px;\n }\n\n .sidebar h3 {\n color: var(--yellow);\n margin-bottom: 1rem;\n font-size: 1.25rem;\n }\n\n .sidebar ul {\n list-style: none;\n }\n\n .sidebar li {\n margin-bottom: 0.5rem;\n }\n\n .sidebar a {\n color: var(--white);\n text-decoration: none;\n display: block;\n padding: 0.5rem;\n border-radius: 8px;\n transition: var(--transition);\n }\n\n .sidebar a:hover,\n .sidebar a.active {\n background: var(--medium-grey);\n color: var(--yellow);\n }\n\n .main-content {\n display: grid;\n gap: 2rem;\n }\n\n .content-section {\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n padding: 2rem;\n border: 1px solid var(--medium-grey);\n }\n\n .content-section h2 {\n color: var(--yellow);\n margin-bottom: 1rem;\n font-size: 1.75rem;\n }\n\n \/* Family Tree *\/\n .family-tree {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 2rem;\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n }\n\n .generation {\n background: var(--medium-grey);\n border-radius: var(--border-radius);\n padding: 1.5rem;\n border-left: 4px solid var(--yellow);\n }\n\n .generation h3 {\n color: var(--yellow);\n margin-bottom: 1rem;\n }\n\n .person {\n display: flex;\n align-items: center;\n gap: 1rem;\n margin-bottom: 0.5rem;\n padding: 0.5rem;\n background: var(--light-grey);\n border-radius: 8px;\n }\n\n .person-info {\n display: flex;\n flex-direction: column;\n }\n\n .person-name {\n font-weight: 600;\n color: var(--white);\n }\n\n .person-details {\n font-size: 0.875rem;\n color: var(--light-grey);\n }\n\n \/* AI Tools *\/\n .ai-tools-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1.5rem;\n }\n\n .tool-card {\n background: var(--medium-grey);\n border-radius: var(--border-radius);\n padding: 1.5rem;\n text-align: center;\n transition: var(--transition);\n border: 1px solid transparent;\n }\n\n .tool-card:hover {\n transform: translateY(-5px);\n border-color: var(--yellow);\n box-shadow: var(--shadow-glow);\n }\n\n .tool-icon {\n font-size: 3rem;\n color: var(--yellow);\n margin-bottom: 1rem;\n }\n\n \/* Forms *\/\n .form-group {\n margin-bottom: 1.5rem;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 0.5rem;\n color: var(--yellow);\n font-weight: 600;\n }\n\n .form-group input,\n .form-group textarea,\n .form-group select {\n width: 100%;\n padding: 0.75rem;\n background: var(--medium-grey);\n border: 1px solid var(--light-grey);\n border-radius: 8px;\n color: var(--white);\n font-size: 1rem;\n }\n\n .form-group input:focus,\n .form-group textarea:focus,\n .form-group select:focus {\n outline: none;\n border-color: var(--yellow);\n box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);\n }\n\n \/* Modal *\/\n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.8);\n z-index: 2000;\n align-items: center;\n justify-content: center;\n }\n\n .modal-content {\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n padding: 2rem;\n max-width: 500px;\n width: 90%;\n max-height: 80vh;\n overflow-y: auto;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n }\n\n .close {\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--light-grey);\n }\n\n .close:hover {\n color: var(--red);\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n\n .dashboard-grid {\n grid-template-columns: 1fr;\n }\n\n .sidebar {\n position: static;\n }\n\n .hero-buttons {\n flex-direction: column;\n align-items: center;\n }\n }\n\n \/* Animations *\/\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .fade-in {\n animation: fadeIn 0.6s ease-out;\n }\n\n \/* Utility Classes *\/\n .hidden {\n display: none !important;\n }\n\n .text-center {\n text-align: center;\n }\n\n .mb-2 {\n margin-bottom: 1rem;\n }\n\n .mt-2 {\n margin-top: 1rem;\n }\n\n \/* Language Toggle *\/\n .language-toggle {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background: var(--yellow);\n color: var(--darkest-grey);\n padding: 0.75rem;\n border-radius: 50%;\n cursor: pointer;\n box-shadow: var(--shadow-glow);\n transition: var(--transition);\n }\n\n .language-toggle:hover {\n transform: scale(1.1);\n }\n <\/style>\n <\/head>\n\n <body>\n <nav class=\"nav-container\">\n <div class=\"nav-content\">\n <div class=\"logo\">\n <i class=\"fas fa-kiwi-bird\"><\/i>\n He Taonga Tuku Iho\n <\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#home\" onclick=\"showLanding()\">Home<\/a><\/li>\n <li><a href=\"#dashboard\" onclick=\"showDashboard()\">Dashboard<\/a><\/li>\n <li><a href=\"#community\" onclick=\"showSection('community')\">Community<\/a><\/li>\n <li><a href=\"#about\" onclick=\"showSection('about')\">About<\/a><\/li>\n <\/ul>\n <div class=\"auth-buttons\">\n <button class=\"btn btn-secondary\" onclick=\"openModal('loginModal')\">Sign In<\/button>\n <button class=\"btn btn-primary\" onclick=\"openModal('registerModal')\">Sign Up<\/button>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <main id=\"landingPage\">\n <section class=\"hero\">\n <div class=\"hero-content fade-in\">\n <h1>He Taonga Tuku Iho Hub<\/h1>\n <p>Digital Whakapapa Platform – Preserving our heritage, connecting generations with AI-powered tools<\/p>\n <div class=\"hero-buttons\">\n <button class=\"btn btn-primary\" onclick=\"openModal('registerModal')\">\n <i class=\"fas fa-user-plus\"><\/i>\n Join Our Wh\u0101nau\n <\/button>\n <button class=\"btn btn-secondary\" onclick=\"showDashboard()\">\n <i class=\"fas fa-tachometer-alt\"><\/i>\n Explore Dashboard\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <main id=\"dashboard\" class=\"dashboard\">\n <div class=\"dashboard-grid\">\n <aside class=\"sidebar\">\n <h3>Navigation<\/h3>\n <ul>\n <li><a href=\"#\" onclick=\"showSection('whakapapa')\" class=\"active\">\n <i class=\"fas fa-sitemap\"><\/i> Whakapapa\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('ai-tools')\">\n <i class=\"fas fa-robot\"><\/i> AI Tools\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('stories')\">\n <i class=\"fas fa-book\"><\/i> Stories\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('te-reo')\">\n <i class=\"fas fa-language\"><\/i> Te Reo M\u0101ori\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('games')\">\n <i class=\"fas fa-gamepad\"><\/i> Games\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('merch')\">\n <i class=\"fas fa-tshirt\"><\/i> Merch Generator\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('messages')\">\n <i class=\"fas fa-comments\"><\/i> Messages\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('profile')\">\n <i class=\"fas fa-user\"><\/i> Profile\n <\/a><\/li>\n <\/ul>\n <\/aside>\n\n <div class=\"main-content\">\n \n <div id=\"whakapapa\" class=\"content-section\">\n <h2>Whakapapa – Family Tree<\/h2>\n <button class=\"btn btn-primary mb-2\" onclick=\"openModal('addPersonModal')\">\n <i class=\"fas fa-plus\"><\/i> Add Person\n <\/button>\n <div class=\"family-tree\" id=\"familyTreeContainer\">\n \n <\/div>\n <\/div>\n\n \n <div id=\"ai-tools\" class=\"content-section hidden\">\n <h2>AI-Powered Creation Tools<\/h2>\n <div class=\"ai-tools-grid\">\n <div class=\"tool-card\">\n <i class=\"fas fa-magic tool-icon\"><\/i>\n <h3>Story Generator<\/h3>\n <p>Create engaging stories with AI assistance<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('storyModal')\">Create Story<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-music tool-icon\"><\/i>\n <h3>Waiata Creator<\/h3>\n <p>Generate lyrics in te reo M\u0101ori<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('lyricsModal')\">Create Lyrics<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-newspaper tool-icon\"><\/i>\n <h3>Newsletter Generator<\/h3>\n <p>Create community newsletters<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('newsletterModal')\">Create Newsletter<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-globe tool-icon\"><\/i>\n <h3>Website Generator<\/h3>\n <p>Generate website content<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('websiteModal')\">Create Website<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-gamepad tool-icon\"><\/i>\n <h3>Game Generator<\/h3>\n <p>Convert text to interactive games<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('gameModal')\">Create Game<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-palette tool-icon\"><\/i>\n <h3>Merch Designer<\/h3>\n <p>Design family merchandise<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('merchModal')\">Design Merch<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"stories\" class=\"content-section hidden\">\n <h2>Family Stories<\/h2>\n <div id=\"storiesContainer\">\n <p>Stories will appear here…<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"te-reo\" class=\"content-section hidden\">\n <h2>Learn Te Reo M\u0101ori<\/h2>\n <div class=\"ai-tools-grid\">\n <div class=\"tool-card\">\n <i class=\"fas fa-graduation-cap tool-icon\"><\/i>\n <h3>Beginner Lessons<\/h3>\n <p>Start your te reo journey<\/p>\n <button class=\"btn btn-primary\">Start Learning<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-microphone tool-icon\"><\/i>\n <h3>Pronunciation Guide<\/h3>\n <p>Perfect your pronunciation<\/p>\n <button class=\"btn btn-primary\">Practice<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"games\" class=\"content-section hidden\">\n <h2>Interactive Games<\/h2>\n <div class=\"ai-tools-grid\">\n <div class=\"tool-card\">\n <i class=\"fas fa-puzzle-piece tool-icon\"><\/i>\n <h3>Whakapapa Challenge<\/h3>\n <p>Test your knowledge of family history<\/p>\n <button class=\"btn btn-primary\">Play Game<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-cards-blank tool-icon\"><\/i>\n <h3>Memory Match<\/h3>\n <p>Remember family connections<\/p>\n <button class=\"btn btn-primary\">Play Game<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"messages\" class=\"content-section hidden\">\n <h2>Community Messages<\/h2>\n <div id=\"messagesContainer\">\n <div class=\"form-group\">\n <label>New Message<\/label>\n <textarea rows=\"4\" placeholder=\"Share your thoughts with the wh\u0101nau...\"><\/textarea>\n <\/div>\n <button class=\"btn btn-primary\">Send Message<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"profile\" class=\"content-section hidden\">\n <h2>Profile Settings<\/h2>\n <form>\n <div class=\"form-group\">\n <label>Full Name<\/label>\n <input type=\"text\" value=\"John Doe\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" value=\"john@example.com\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Iwi\/Hap\u016b<\/label>\n <input type=\"text\" placeholder=\"Te Arawa\" \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Update Profile<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n \n <div class=\"language-toggle\" onclick=\"toggleLanguage()\">\n <i class=\"fas fa-language\"><\/i>\n <\/div>\n\n \n <div id=\"loginModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Sign In<\/h2>\n <span class=\"close\" onclick=\"closeModal('loginModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"handleLogin(event)\">\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Password<\/label>\n <input type=\"password\" required \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Sign In<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div id=\"registerModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Join Our Wh\u0101nau<\/h2>\n <span class=\"close\" onclick=\"closeModal('registerModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"handleRegister(event)\">\n <div class=\"form-group\">\n <label>Full Name<\/label>\n <input type=\"text\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Password<\/label>\n <input type=\"password\" required \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Create Account<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div id=\"addPersonModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Add Family Member<\/h2>\n <span class=\"close\" onclick=\"closeModal('addPersonModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"addPerson(event)\">\n <div class=\"form-group\">\n <label>Name<\/label>\n <input type=\"text\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Birth Year<\/label>\n <input type=\"number\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Death Year<\/label>\n <input type=\"number\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Generation<\/label>\n <select required>\n <option value=\"1\">Generation 1<\/option>\n <option value=\"2\">Generation 2<\/option>\n <option value=\"3\">Generation 3<\/option>\n <option value=\"4\">Generation 4<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Add Person<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div id=\"storyModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Create Story<\/h2>\n <span class=\"close\" onclick=\"closeModal('storyModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"createStory(event)\">\n <div class=\"form-group\">\n <label>Title<\/label>\n <input type=\"text\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Story<\/label>\n <textarea rows=\"6\" required><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Create Story<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Global state\n let currentUser = null;\n let currentLanguage = 'en';\n let familyData = [{\n name: \"Kotua\",\n birth: 1702,\n death: 1750,\n generation: 1,\n spouse: \"Hape Kaitoa\"\n },\n {\n name: \"Hape Kaitoa\",\n birth: 1704,\n death: 1751,\n generation: 1,\n spouse: \"Kotua\"\n },\n {\n name: \"Paihau\",\n birth: 1730,\n death: 1760,\n generation: 2,\n spouse: \"Punatoto\"\n },\n {\n name: \"Punatoto\",\n birth: 1732,\n death: 1761,\n generation: 2,\n spouse: \"Paihau\"\n },\n {\n name: \"Kaawa\",\n birth: 1760,\n death: 1789,\n generation: 3,\n spouse: \"Kiriwaepana\"\n },\n {\n name: \"Kiriwaepana\",\n birth: 1759,\n death: 1762,\n generation: 3,\n spouse: \"Kaawa\"\n },\n {\n name: \"Horotai\",\n birth: 1785,\n death: 1825,\n generation: 4,\n spouse: \"Urumatariki\"\n },\n {\n name: \"Urumatariki\",\n birth: 1790,\n death: 1826,\n generation: 4,\n spouse: \"Horotai\"\n }\n ];\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', function() {\n renderFamilyTree();\n });\n \/\/ Navigation\n function showLanding() {\n document.getElementById('landingPage').style.display = 'block';\n document.getElementById('dashboard').style.display = 'none';\n }\n\n function showDashboard() {\n document.getElementById('landingPage').style.display = 'none';\n document.getElementById('dashboard').style.display = 'block';\n showSection('whakapapa');\n }\n\n function showSection(sectionId) {\n \/\/ Hide all sections\n const sections = document.querySelectorAll('.content-section');\n sections.forEach(section => section.classList.add('hidden'));\n \/\/ Show selected section\n document.getElementById(sectionId).classList.remove('hidden');\n \/\/ Update active nav\n const navLinks = document.querySelectorAll('.sidebar a');\n navLinks.forEach(link => link.classList.remove('active'));\n event.target.classList.add('active');\n }\n \/\/ Modal functions\n function openModal(modalId) {\n document.getElementById(modalId).style.display = 'flex';\n }\n\n function closeModal(modalId) {\n document.getElementById(modalId).style.display = 'none';\n }\n \/\/ Authentication\n function handleLogin(e) {\n e.preventDefault();\n currentUser = {\n name: 'Demo User',\n email: 'demo@example.com'\n };\n closeModal('loginModal');\n showDashboard();\n }\n\n function handleRegister(e) {\n e.preventDefault();\n currentUser = {\n name: 'New User',\n email: 'new@example.com'\n };\n closeModal('registerModal');\n showDashboard();\n }\n \/\/ Family Tree\n function renderFamilyTree() {\n const container = document.getElementById('familyTreeContainer');\n container.innerHTML = '';\n const generations = {};\n familyData.forEach(person => {\n if (!generations[person.generation]) {\n generations[person.generation] = [];\n }\n generations[person.generation].push(person);\n });\n Object.keys(generations).sort().forEach(gen => {\n const genDiv = document.createElement('div');\n genDiv.className = 'generation';\n genDiv.innerHTML = `<h3>Generation ${gen}<\/h3>`;\n generations[gen].forEach(person => {\n const personDiv = document.createElement('div');\n personDiv.className = 'person';\n personDiv.innerHTML = `\n <div class=\"person-info\">\n <span class=\"person-name\">${person.name}<\/span>\n <span class=\"person-details\">${person.birth}-${person.death || 'Living'}<\/span>\n ${person.spouse ? `<span class=\"person-details\">Spouse: ${person.spouse}<\/span>` : ''}\n <\/div>\n `;\n genDiv.appendChild(personDiv);\n });\n container.appendChild(genDiv);\n });\n }\n\n function addPerson(e) {\n e.preventDefault();\n const formData = new FormData(e.target);\n const newPerson = {\n name: formData.get('name'),\n birth: parseInt(formData.get('birth')),\n death: parseInt(formData.get('death')) || null,\n generation: parseInt(formData.get('generation'))\n };\n familyData.push(newPerson);\n renderFamilyTree();\n closeModal('addPersonModal');\n e.target.reset();\n }\n \/\/ AI Tools\n function createStory(e) {\n e.preventDefault();\n const formData = new FormData(e.target);\n const story = {\n title: formData.get('title'),\n content: formData.get('story'),\n date: new Date().toISOString()\n };\n \/\/ Add to stories\n const container = document.getElementById('storiesContainer');\n container.innerHTML = `\n <div class=\"content-section\">\n <h3>${story.title}<\/h3>\n <p>${story.content}<\/p>\n <small>Created: ${new Date(story.date).toLocaleDateString()}<\/small>\n <\/div>\n `;\n closeModal('storyModal');\n e.target.reset();\n showSection('stories');\n }\n \/\/ Language toggle\n function toggleLanguage() {\n currentLanguage = currentLanguage === 'en' ? 'mi' : 'en';\n \/\/ Implement language switching logic here\n alert(`Language switched to ${currentLanguage === 'en' ? 'English' : 'Te Reo M\u0101ori'}`);\n }\n \/\/ Close modals when clicking outside\n window.onclick = function(event) {\n if (event.target.classList.contains('modal')) {\n event.target.style.display = 'none';\n }\n }\n <\/script>\n <\/body>\n\n <\/html>\n\n\n\n<DOCTYPE html>\n <html lang=\"en\">\n\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>He Taonga Tuku Iho Hub – Digital Whakapapa Platform<\/title>\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 --darkest-grey: #0a0a0a;\n --dark-grey: #1a1a1a;\n --medium-grey: #2a2a2a;\n --light-grey: #3a3a3a;\n --yellow: #ffd700;\n --red: #ff1744;\n --white: #ffffff;\n --gradient-primary: linear-gradient(135deg, var(--yellow), var(--red));\n --shadow-glow: 0 0 20px rgba(255, 215, 0, 0.3);\n --border-radius: 12px;\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: var(--darkest-grey);\n color: var(--white);\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* Navigation *\/\n .nav-container {\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1000;\n background: rgba(10, 10, 10, 0.9);\n backdrop-filter: blur(10px);\n border-bottom: 1px solid var(--light-grey);\n }\n\n .nav-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n max-width: 1400px;\n margin: 0 auto;\n }\n\n .logo {\n font-size: 1.5rem;\n font-weight: 700;\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n }\n\n .nav-links a {\n color: var(--white);\n text-decoration: none;\n position: relative;\n transition: var(--transition);\n }\n\n .nav-links a:hover {\n color: var(--yellow);\n }\n\n .nav-links a::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--gradient-primary);\n transition: var(--transition);\n }\n\n .nav-links a:hover::after {\n width: 100%;\n }\n\n .auth-buttons {\n display: flex;\n gap: 1rem;\n }\n\n .btn {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: var(--border-radius);\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .btn-primary {\n background: var(--gradient-primary);\n color: var(--white);\n box-shadow: var(--shadow-glow);\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 30px rgba(255, 215, 0, 0.4);\n }\n\n .btn-secondary {\n background: transparent;\n color: var(--white);\n border: 2px solid var(--light-grey);\n }\n\n .btn-secondary:hover {\n border-color: var(--yellow);\n color: var(--yellow);\n }\n\n \/* Landing Page *\/\n .hero {\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: radial-gradient(circle at center, var(--dark-grey) 0%, var(--darkest-grey) 100%);\n position: relative;\n overflow: hidden;\n }\n\n .hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grid\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\"><path d=\"M 10 0 L 0 0 0 10\" fill=\"none\" stroke=\"%23333\" stroke-width=\"0.5\"\/><\/pattern><\/defs><rect width=\"100\" height=\"100\" fill=\"url(%23grid)\"\/><\/svg>');\n opacity: 0.1;\n }\n\n .hero-content {\n text-align: center;\n max-width: 800px;\n padding: 2rem;\n z-index: 1;\n }\n\n .hero h1 {\n font-size: clamp(2.5rem, 5vw, 4rem);\n margin-bottom: 1rem;\n background: var(--gradient-primary);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .hero p {\n font-size: 1.25rem;\n color: var(--light-grey);\n margin-bottom: 2rem;\n }\n\n .hero-buttons {\n display: flex;\n gap: 1rem;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n \/* Dashboard *\/\n .dashboard {\n display: none;\n min-height: 100vh;\n padding-top: 80px;\n background: var(--darkest-grey);\n }\n\n .dashboard-grid {\n display: grid;\n grid-template-columns: 250px 1fr;\n gap: 2rem;\n max-width: 1400px;\n margin: 0 auto;\n padding: 2rem;\n }\n\n .sidebar {\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n padding: 1.5rem;\n height: fit-content;\n position: sticky;\n top: 100px;\n }\n\n .sidebar h3 {\n color: var(--yellow);\n margin-bottom: 1rem;\n font-size: 1.25rem;\n }\n\n .sidebar ul {\n list-style: none;\n }\n\n .sidebar li {\n margin-bottom: 0.5rem;\n }\n\n .sidebar a {\n color: var(--white);\n text-decoration: none;\n display: block;\n padding: 0.5rem;\n border-radius: 8px;\n transition: var(--transition);\n }\n\n .sidebar a:hover,\n .sidebar a.active {\n background: var(--medium-grey);\n color: var(--yellow);\n }\n\n .main-content {\n display: grid;\n gap: 2rem;\n }\n\n .content-section {\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n padding: 2rem;\n border: 1px solid var(--medium-grey);\n }\n\n .content-section h2 {\n color: var(--yellow);\n margin-bottom: 1rem;\n font-size: 1.75rem;\n }\n\n \/* Family Tree *\/\n .family-tree {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 2rem;\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n }\n\n .generation {\n background: var(--medium-grey);\n border-radius: var(--border-radius);\n padding: 1.5rem;\n border-left: 4px solid var(--yellow);\n }\n\n .generation h3 {\n color: var(--yellow);\n margin-bottom: 1rem;\n }\n\n .person {\n display: flex;\n align-items: center;\n gap: 1rem;\n margin-bottom: 0.5rem;\n padding: 0.5rem;\n background: var(--light-grey);\n border-radius: 8px;\n }\n\n .person-info {\n display: flex;\n flex-direction: column;\n }\n\n .person-name {\n font-weight: 600;\n color: var(--white);\n }\n\n .person-details {\n font-size: 0.875rem;\n color: var(--light-grey);\n }\n\n \/* AI Tools *\/\n .ai-tools-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1.5rem;\n }\n\n .tool-card {\n background: var(--medium-grey);\n border-radius: var(--border-radius);\n padding: 1.5rem;\n text-align: center;\n transition: var(--transition);\n border: 1px solid transparent;\n }\n\n .tool-card:hover {\n transform: translateY(-5px);\n border-color: var(--yellow);\n box-shadow: var(--shadow-glow);\n }\n\n .tool-icon {\n font-size: 3rem;\n color: var(--yellow);\n margin-bottom: 1rem;\n }\n\n \/* Forms *\/\n .form-group {\n margin-bottom: 1.5rem;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 0.5rem;\n color: var(--yellow);\n font-weight: 600;\n }\n\n .form-group input,\n .form-group textarea,\n .form-group select {\n width: 100%;\n padding: 0.75rem;\n background: var(--medium-grey);\n border: 1px solid var(--light-grey);\n border-radius: 8px;\n color: var(--white);\n font-size: 1rem;\n }\n\n .form-group input:focus,\n .form-group textarea:focus,\n .form-group select:focus {\n outline: none;\n border-color: var(--yellow);\n box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);\n }\n\n \/* Modal *\/\n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.8);\n z-index: 2000;\n align-items: center;\n justify-content: center;\n }\n\n .modal-content {\n background: var(--dark-grey);\n border-radius: var(--border-radius);\n padding: 2rem;\n max-width: 500px;\n width: 90%;\n max-height: 80vh;\n overflow-y: auto;\n }\n\n .modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n }\n\n .close {\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--light-grey);\n }\n\n .close:hover {\n color: var(--red);\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n\n .dashboard-grid {\n grid-template-columns: 1fr;\n }\n\n .sidebar {\n position: static;\n }\n\n .hero-buttons {\n flex-direction: column;\n align-items: center;\n }\n }\n\n \/* Animations *\/\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .fade-in {\n animation: fadeIn 0.6s ease-out;\n }\n\n \/* Utility Classes *\/\n .hidden {\n display: none !important;\n }\n\n .text-center {\n text-align: center;\n }\n\n .mb-2 {\n margin-bottom: 1rem;\n }\n\n .mt-2 {\n margin-top: 1rem;\n }\n\n \/* Language Toggle *\/\n .language-toggle {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background: var(--yellow);\n color: var(--darkest-grey);\n padding: 0.75rem;\n border-radius: 50%;\n cursor: pointer;\n box-shadow: var(--shadow-glow);\n transition: var(--transition);\n }\n\n .language-toggle:hover {\n transform: scale(1.1);\n }\n <\/style>\n <\/head>\n\n <body>\n <nav class=\"nav-container\">\n <div class=\"nav-content\">\n <div class=\"logo\">\n <i class=\"fas fa-kiwi-bird\"><\/i>\n He Taonga Tuku Iho\n <\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#home\" onclick=\"showLanding()\">Home<\/a><\/li>\n <li><a href=\"#dashboard\" onclick=\"showDashboard()\">Dashboard<\/a><\/li>\n <li><a href=\"#community\" onclick=\"showSection('community')\">Community<\/a><\/li>\n <li><a href=\"#about\" onclick=\"showSection('about')\">About<\/a><\/li>\n <\/ul>\n <div class=\"auth-buttons\">\n <button class=\"btn btn-secondary\" onclick=\"openModal('loginModal')\">Sign In<\/button>\n <button class=\"btn btn-primary\" onclick=\"openModal('registerModal')\">Sign Up<\/button>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <main id=\"landingPage\">\n <section class=\"hero\">\n <div class=\"hero-content fade-in\">\n <h1>He Taonga Tuku Iho Hub<\/h1>\n <p>Digital Whakapapa Platform – Preserving our heritage, connecting generations with AI-powered tools<\/p>\n <div class=\"hero-buttons\">\n <button class=\"btn btn-primary\" onclick=\"openModal('registerModal')\">\n <i class=\"fas fa-user-plus\"><\/i>\n Join Our Wh\u0101nau\n <\/button>\n <button class=\"btn btn-secondary\" onclick=\"showDashboard()\">\n <i class=\"fas fa-tachometer-alt\"><\/i>\n Explore Dashboard\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n \n <main id=\"dashboard\" class=\"dashboard\">\n <div class=\"dashboard-grid\">\n <aside class=\"sidebar\">\n <h3>Navigation<\/h3>\n <ul>\n <li><a href=\"#\" onclick=\"showSection('whakapapa')\" class=\"active\">\n <i class=\"fas fa-sitemap\"><\/i> Whakapapa\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('ai-tools')\">\n <i class=\"fas fa-robot\"><\/i> AI Tools\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('stories')\">\n <i class=\"fas fa-book\"><\/i> Stories\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('te-reo')\">\n <i class=\"fas fa-language\"><\/i> Te Reo M\u0101ori\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('games')\">\n <i class=\"fas fa-gamepad\"><\/i> Games\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('merch')\">\n <i class=\"fas fa-tshirt\"><\/i> Merch Generator\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('messages')\">\n <i class=\"fas fa-comments\"><\/i> Messages\n <\/a><\/li>\n <li><a href=\"#\" onclick=\"showSection('profile')\">\n <i class=\"fas fa-user\"><\/i> Profile\n <\/a><\/li>\n <\/ul>\n <\/aside>\n\n <div class=\"main-content\">\n \n <div id=\"whakapapa\" class=\"content-section\">\n <h2>Whakapapa – Family Tree<\/h2>\n <button class=\"btn btn-primary mb-2\" onclick=\"openModal('addPersonModal')\">\n <i class=\"fas fa-plus\"><\/i> Add Person\n <\/button>\n <div class=\"family-tree\" id=\"familyTreeContainer\">\n \n <\/div>\n <\/div>\n\n \n <div id=\"ai-tools\" class=\"content-section hidden\">\n <h2>AI-Powered Creation Tools<\/h2>\n <div class=\"ai-tools-grid\">\n <div class=\"tool-card\">\n <i class=\"fas fa-magic tool-icon\"><\/i>\n <h3>Story Generator<\/h3>\n <p>Create engaging stories with AI assistance<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('storyModal')\">Create Story<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-music tool-icon\"><\/i>\n <h3>Waiata Creator<\/h3>\n <p>Generate lyrics in te reo M\u0101ori<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('lyricsModal')\">Create Lyrics<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-newspaper tool-icon\"><\/i>\n <h3>Newsletter Generator<\/h3>\n <p>Create community newsletters<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('newsletterModal')\">Create Newsletter<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-globe tool-icon\"><\/i>\n <h3>Website Generator<\/h3>\n <p>Generate website content<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('websiteModal')\">Create Website<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-gamepad tool-icon\"><\/i>\n <h3>Game Generator<\/h3>\n <p>Convert text to interactive games<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('gameModal')\">Create Game<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-palette tool-icon\"><\/i>\n <h3>Merch Designer<\/h3>\n <p>Design family merchandise<\/p>\n <button class=\"btn btn-primary\" onclick=\"openModal('merchModal')\">Design Merch<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"stories\" class=\"content-section hidden\">\n <h2>Family Stories<\/h2>\n <div id=\"storiesContainer\">\n <p>Stories will appear here…<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"te-reo\" class=\"content-section hidden\">\n <h2>Learn Te Reo M\u0101ori<\/h2>\n <div class=\"ai-tools-grid\">\n <div class=\"tool-card\">\n <i class=\"fas fa-graduation-cap tool-icon\"><\/i>\n <h3>Beginner Lessons<\/h3>\n <p>Start your te reo journey<\/p>\n <button class=\"btn btn-primary\">Start Learning<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-microphone tool-icon\"><\/i>\n <h3>Pronunciation Guide<\/h3>\n <p>Perfect your pronunciation<\/p>\n <button class=\"btn btn-primary\">Practice<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"games\" class=\"content-section hidden\">\n <h2>Interactive Games<\/h2>\n <div class=\"ai-tools-grid\">\n <div class=\"tool-card\">\n <i class=\"fas fa-puzzle-piece tool-icon\"><\/i>\n <h3>Whakapapa Challenge<\/h3>\n <p>Test your knowledge of family history<\/p>\n <button class=\"btn btn-primary\">Play Game<\/button>\n <\/div>\n <div class=\"tool-card\">\n <i class=\"fas fa-cards-blank tool-icon\"><\/i>\n <h3>Memory Match<\/h3>\n <p>Remember family connections<\/p>\n <button class=\"btn btn-primary\">Play Game<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"messages\" class=\"content-section hidden\">\n <h2>Community Messages<\/h2>\n <div id=\"messagesContainer\">\n <div class=\"form-group\">\n <label>New Message<\/label>\n <textarea rows=\"4\" placeholder=\"Share your thoughts with the wh\u0101nau...\"><\/textarea>\n <\/div>\n <button class=\"btn btn-primary\">Send Message<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"profile\" class=\"content-section hidden\">\n <h2>Profile Settings<\/h2>\n <form>\n <div class=\"form-group\">\n <label>Full Name<\/label>\n <input type=\"text\" value=\"John Doe\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" value=\"john@example.com\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Iwi\/Hap\u016b<\/label>\n <input type=\"text\" placeholder=\"Te Arawa\" \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Update Profile<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n \n <div class=\"language-toggle\" onclick=\"toggleLanguage()\">\n <i class=\"fas fa-language\"><\/i>\n <\/div>\n\n \n <div id=\"loginModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Sign In<\/h2>\n <span class=\"close\" onclick=\"closeModal('loginModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"handleLogin(event)\">\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Password<\/label>\n <input type=\"password\" required \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Sign In<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div id=\"registerModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Join Our Wh\u0101nau<\/h2>\n <span class=\"close\" onclick=\"closeModal('registerModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"handleRegister(event)\">\n <div class=\"form-group\">\n <label>Full Name<\/label>\n <input type=\"text\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Email<\/label>\n <input type=\"email\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Password<\/label>\n <input type=\"password\" required \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Create Account<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div id=\"addPersonModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Add Family Member<\/h2>\n <span class=\"close\" onclick=\"closeModal('addPersonModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"addPerson(event)\">\n <div class=\"form-group\">\n <label>Name<\/label>\n <input type=\"text\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Birth Year<\/label>\n <input type=\"number\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Death Year<\/label>\n <input type=\"number\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Generation<\/label>\n <select required>\n <option value=\"1\">Generation 1<\/option>\n <option value=\"2\">Generation 2<\/option>\n <option value=\"3\">Generation 3<\/option>\n <option value=\"4\">Generation 4<\/option>\n <\/select>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Add Person<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <div id=\"storyModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h2>Create Story<\/h2>\n <span class=\"close\" onclick=\"closeModal('storyModal')\">×<\/span>\n <\/div>\n <form onsubmit=\"createStory(event)\">\n <div class=\"form-group\">\n <label>Title<\/label>\n <input type=\"text\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Story<\/label>\n <textarea rows=\"6\" required><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\">Create Story<\/button>\n <\/form>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Global state\n let currentUser = null;\n let currentLanguage = 'en';\n let familyData = [{\n name: \"Kotua\",\n birth: 1702,\n death: 1750,\n generation: 1,\n spouse: \"Hape Kaitoa\"\n },\n {\n name: \"Hape Kaitoa\",\n birth: 1704,\n death: 1751,\n generation: 1,\n spouse: \"Kotua\"\n },\n {\n name: \"Paihau\",\n birth: 1730,\n death: 1760,\n generation: 2,\n spouse: \"Punatoto\"\n },\n {\n name: \"Punatoto\",\n birth: 1732,\n death: 1761,\n generation: 2,\n spouse: \"Paihau\"\n },\n {\n name: \"Kaawa\",\n birth: 1760,\n death: 1789,\n generation: 3,\n spouse: \"Kiriwaepana\"\n },\n {\n name: \"Kiriwaepana\",\n birth: 1759,\n death: 1762,\n generation: 3,\n spouse: \"Kaawa\"\n },\n {\n name: \"Horotai\",\n birth: 1785,\n death: 1825,\n generation: 4,\n spouse: \"Urumatariki\"\n },\n {\n name: \"Urumatariki\",\n birth: 1790,\n death: 1826,\n generation: 4,\n spouse: \"Horotai\"\n }\n ];\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', function() {\n renderFamilyTree();\n });\n \/\/ Navigation\n function showLanding() {\n document.getElementById('landingPage').style.display = 'block';\n document.getElementById('dashboard').style.display = 'none';\n }\n\n function showDashboard() {\n document.getElementById('landingPage').style.display = 'none';\n document.getElementById('dashboard').style.display = 'block';\n showSection('whakapapa');\n }\n\n function showSection(sectionId) {\n \/\/ Hide all sections\n const sections = document.querySelectorAll('.content-section');\n sections.forEach(section => section.classList.add('hidden'));\n \/\/ Show selected section\n document.getElementById(sectionId).classList.remove('hidden');\n \/\/ Update active nav\n const navLinks = document.querySelectorAll('.sidebar a');\n navLinks.forEach(link => link.classList.remove('active'));\n event.target.classList.add('active');\n }\n \/\/ Modal functions\n function openModal(modalId) {\n document.getElementById(modalId).style.display = 'flex';\n }\n\n function closeModal(modalId) {\n document.getElementById(modalId).style.display = 'none';\n }\n \/\/ Authentication\n function handleLogin(e) {\n e.preventDefault();\n currentUser = {\n name: 'Demo User',\n email: 'demo@example.com'\n };\n closeModal('loginModal');\n showDashboard();\n }\n\n function handleRegister(e) {\n e.preventDefault();\n currentUser = {\n name: 'New User',\n email: 'new@example.com'\n };\n closeModal('registerModal');\n showDashboard();\n }\n \/\/ Family Tree\n function renderFamilyTree() {\n const container = document.getElementById('familyTreeContainer');\n container.innerHTML = '';\n const generations = {};\n familyData.forEach(person => {\n if (!generations[person.generation]) {\n generations[person.generation] = [];\n }\n generations[person.generation].push(person);\n });\n Object.keys(generations).sort().forEach(gen => {\n const genDiv = document.createElement('div');\n genDiv.className = 'generation';\n genDiv.innerHTML = `<h3>Generation ${gen}<\/h3>`;\n generations[gen].forEach(person => {\n const personDiv = document.createElement('div');\n personDiv.className = 'person';\n personDiv.innerHTML = `\n <div class=\"person-info\">\n <span class=\"person-name\">${person.name}<\/span>\n <span class=\"person-details\">${person.birth}-${person.death || 'Living'}<\/span>\n ${person.spouse ? `<span class=\"person-details\">Spouse: ${person.spouse}<\/span>` : ''}\n <\/div>\n `;\n genDiv.appendChild(personDiv);\n });\n container.appendChild(genDiv);\n });\n }\n\n function addPerson(e) {\n e.preventDefault();\n const formData = new FormData(e.target);\n const newPerson = {\n name: formData.get('name'),\n birth: parseInt(formData.get('birth')),\n death: parseInt(formData.get('death')) || null,\n generation: parseInt(formData.get('generation'))\n };\n familyData.push(newPerson);\n renderFamilyTree();\n closeModal('addPersonModal');\n e.target.reset();\n }\n \/\/ AI Tools\n function createStory(e) {\n e.preventDefault();\n const formData = new FormData(e.target);\n const story = {\n title: formData.get('title'),\n content: formData.get('story'),\n date: new Date().toISOString()\n };\n \/\/ Add to stories\n const container = document.getElementById('storiesContainer');\n container.innerHTML = `\n <div class=\"content-section\">\n <h3>${story.title}<\/h3>\n <p>${story.content}<\/p>\n <small>Created: ${new Date(story.date).toLocaleDateString()}<\/small>\n <\/div>\n `;\n closeModal('storyModal');\n e.target.reset();\n showSection('stories');\n }\n \/\/ Language toggle\n function toggleLanguage() {\n currentLanguage = currentLanguage === 'en' ? 'mi' : 'en';\n \/\/ Implement language switching logic here\n alert(`Language switched to ${currentLanguage === 'en' ? 'English' : 'Te Reo M\u0101ori'}`);\n }\n \/\/ Close modals when clicking outside\n window.onclick = function(event) {\n if (event.target.classList.contains('modal')) {\n event.target.style.display = 'none';\n }\n }\n <\/script>\n <\/body>\n\n <\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>He Taonga Tuku Iho Hub – Digital Whakapapa Platform He Taonga Tuku Iho Home Dashboard Community About Sign In Sign […]<\/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":"","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-550","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":"He Taonga Tuku Iho Hub – Digital Whakapapa Platform He Taonga Tuku Iho Home Dashboard Community About Sign In Sign […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/550","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=550"}],"version-history":[{"count":3,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/550\/revisions"}],"predecessor-version":[{"id":553,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/550\/revisions\/553"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}