<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <style> :root{--ink:#20332b;--muted:#68786f;--green:#3f7d50;--green2:#dfeee3;--cream:#f7f4ed;--peach:#f7dfd1;--lav:#e9e1f2;--blue:#dfeaf4;--line:#dfe5df;--white:#fff;--shadow:0 14px 40px rgba(32,51,43,.10)} *{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.app{min-height:100vh}.top{position:sticky;top:0;z-index:20;background:rgba(247,244,237,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(63,125,80,.12)}.topin{max-width:1180px;margin:auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;font-weight:850}.mark{width:38px;height:38px;border-radius:13px;background:var(--green);color:#fff;display:grid;place-items:center;font-size:20px}.nav{display:flex;gap:6px}.nav button{border:0;background:transparent;color:var(--muted);font-weight:750;padding:9px 12px;border-radius:11px;cursor:pointer}.nav button.active,.nav button:hover{background:var(--green2);color:#2c653c}.profileBtn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;font-weight:750;color:var(--ink);cursor:pointer}.wrap{max-width:1180px;margin:auto;padding:26px 20px 80px}.view{display:none}.view.active{display:block}.hero{display:grid;grid-template-columns:1.6fr .8fr;gap:18px;margin-bottom:30px}.heroMain{min-height:330px;border-radius:30px;padding:42px;background:linear-gradient(135deg,#dcece1 0%,#e9e1f2 55%,#f7dfd1 100%);position:relative;overflow:hidden}.heroMain:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;top:-60px;background:rgba(255,255,255,.35)}.kicker{display:inline-flex;background:#fff9;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:850;color:#376b46}.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.04em;max-width:760px;margin:18px 0 16px}.hero p{font-size:17px;line-height:1.6;max-width:650px;color:#4f6258}.heroActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.primary,.secondary{border:0;border-radius:13px;padding:13px 17px;font-weight:850;cursor:pointer}.primary{background:var(--green);color:white}.secondary{background:white;color:var(--ink);border:1px solid #d7dfd8}.childCard{background:var(--ink);color:#fff;border-radius:30px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;min-height:330px}.childIcon{width:54px;height:54px;border-radius:18px;background:#ffffff18;display:grid;place-items:center;font-size:27px}.childCard h3{font-size:24px;margin:18px 0 8px}.childCard p{color:#d2ddd6;line-height:1.5}.childMeta{display:flex;gap:8px;flex-wrap:wrap}.childMeta span{background:#ffffff14;padding:7px 9px;border-radius:999px;font-size:11px}.childCard button{width:100%;margin-top:18px;background:#fff;color:var(--ink);border:0;border-radius:12px;padding:12px;font-weight:850;cursor:pointer}.section{margin-top:32px}.sectionHead{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}.sectionHead h2{font-size:27px;letter-spacing:-.02em;margin:0}.sectionHead p{color:var(--muted);margin:6px 0 0}.linkBtn{border:0;background:transparent;color:var(--green);font-weight:850;cursor:pointer}.stages{display:grid;grid-template-columns:repeat(7,minmax(135px,1fr));gap:10px;overflow:auto;padding-bottom:5px}.stage{min-height:128px;border:1px solid var(--line);background:#fff;border-radius:18px;padding:15px;text-align:left;cursor:pointer;transition:.2s}.stage:hover,.stage.active{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#7fa98a}.stageNo{font-size:11px;color:var(--muted);font-weight:800}.stageIcon{font-size:24px;margin:13px 0}.stage b{display:block;font-size:13px;line-height:1.3}.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.quickCard{border:0;border-radius:20px;padding:19px;text-align:left;cursor:pointer;min-height:125px;color:var(--ink)}.quickCard:nth-child(3n+1){background:var(--peach)}.quickCard:nth-child(3n+2){background:var(--blue)}.quickCard:nth-child(3n){background:var(--lav)}.quickCard span{font-size:24px}.quickCard b{display:block;margin-top:18px;font-size:15px}.searchBar{background:#fff;border:1px solid var(--line);border-radius:16px;padding:7px;display:flex;gap:8px;margin:16px 0}.searchBar input{flex:1;border:0;padding:10px 12px;font-size:15px;outline:none;background:transparent}.tabs{display:flex;gap:8px;flex-wrap:wrap}.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;font-weight:800;color:var(--muted);cursor:pointer}.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:17px}.card{background:#fff;border:1px solid var(--line);border-radius:21px;overflow:hidden;box-shadow:0 5px 18px rgba(32,51,43,.05);display:flex;flex-direction:column}.cover{height:145px;background:linear-gradient(135deg,var(--green2),var(--lav));background-size:cover;background-position:center;padding:14px;display:flex;align-items:flex-start;justify-content:space-between}.badge{background:#fff;color:var(--green);border-radius:999px;padding:6px 8px;font-size:10px;font-weight:900}.saveBtn{border:0;background:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:17px}.saveBtn.on{background:var(--green);color:#fff}.cardBody{padding:17px;display:flex;flex-direction:column;flex:1}.card h3{font-size:18px;margin:0 0 8px}.card p{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 15px}.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}.meta span{font-size:10px;background:#f0f4f1;border-radius:999px;padding:5px 7px}.open{width:100%;margin-top:14px;border:0;border-radius:11px;padding:10px;background:#edf4ef;color:#306942;font-weight:850;cursor:pointer}.empty{grid-column:1/-1;background:#fff;border:1px dashed #b8c4bb;border-radius:22px;padding:42px;text-align:center}.emptyIcon{width:66px;height:66px;background:var(--green2);border-radius:22px;display:grid;place-items:center;font-size:30px;margin:0 auto 15px}.empty h3{margin:0 0 8px}.empty p{color:var(--muted);max-width:520px;margin:0 auto;line-height:1.55}.miniNote{margin-top:12px;font-size:12px;color:#7a887f}.savedIntro,.childIntro{background:linear-gradient(135deg,#dcece1,#f7dfd1);border-radius:24px;padding:28px;margin-bottom:18px}.savedIntro h1,.childIntro h1{font-size:34px;margin:0 0 8px}.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px}.profileGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.profileStat{background:#f6f8f6;border-radius:15px;padding:16px}.profileStat span{font-size:11px;color:var(--muted)}.profileStat b{display:block;margin-top:6px}.modalBack{display:none;position:fixed;inset:0;background:#18261dcc;z-index:50;padding:18px;overflow:auto}.modalBack.open{display:flex;align-items:center;justify-content:center}.modal{width:min(720px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:25px;padding:25px;position:relative}.close{position:absolute;right:18px;top:16px;border:0;background:#eef2ef;width:35px;height:35px;border-radius:50%;cursor:pointer}.modal h2{font-size:29px;margin:8px 45px 8px 0}.modalLead{color:var(--muted);line-height:1.55}.contentBlock{background:#f5f8f6;border-left:4px solid var(--green);padding:16px;border-radius:0 15px 15px 0;margin:15px 0;white-space:pre-wrap;line-height:1.6}.storyBlock{background:#fff3dd;border:1px solid #eed5a7;border-radius:15px;padding:16px;white-space:pre-wrap;line-height:1.6}.actionBlock{border:1px solid var(--line);border-radius:15px;padding:16px;margin-top:15px}.checkline{display:flex;gap:10px;align-items:flex-start}.checkbox{width:21px;height:21px;border:2px solid var(--green);border-radius:6px;flex:0 0 auto}.notes{width:100%;min-height:100px;border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;margin-top:8px}.field{margin:14px 0}.field label{display:block;font-size:12px;font-weight:850;margin-bottom:6px}.field input,.field select{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px;font:inherit}.checks{display:flex;flex-wrap:wrap;gap:7px}.choice{border:1px solid var(--line);border-radius:999px;padding:8px 10px;background:#fff;cursor:pointer;font-size:12px}.choice.on{background:var(--green2);border-color:#79a486}.toast{position:fixed;right:20px;bottom:20px;background:var(--ink);color:#fff;padding:12px 15px;border-radius:12px;z-index:90;opacity:0;transform:translateY(12px);transition:.2s}.toast.show{opacity:1;transform:none} @media(max-width:900px){.hero{grid-template-columns:1fr}.childCard{min-height:230px}.cards{grid-template-columns:repeat(2,1fr)}.quick{grid-template-columns:repeat(2,1fr)}.nav{display:none}}@media(max-width:600px){.topin{padding:10px 12px}.brandText{display:none}.wrap{padding:16px 12px 70px}.heroMain{padding:27px 22px;min-height:380px}.hero h1{font-size:38px}.cards,.quick,.profileGrid{grid-template-columns:1fr}.profileBtn{font-size:12px}.sectionHead{align-items:flex-start}.stage{min-width:145px}.modal{padding:21px}.modal h2{font-size:25px}} </style></head><body><div class="app"> <header class="top"><div class="topin"><div class="brand"><div class="mark">✦</div><span class="brandText">Together Through School</span></div><nav class="nav"><button class="navBtn active" data-view="home">Home</button><button class="navBtn" data-view="explore">Explore</button><button class="navBtn" data-view="saved">Saved</button><button class="navBtn" data-view="child">My Child</button></nav><button class="profileBtn" id="profileTop">+ Add child profile</button></div></header> <div class="wrap"> <section class="view active" id="home"> <div class="hero"><div class="heroMain"><span class="kicker">Practical neurodivergent school support</span><h1>You don’t have to figure school out alone.</h1><p>Find calm, useful guidance for the exact stage and situation your family is facing—plus tools you can actually use, not just information to read.</p><div class="heroActions"><button class="primary goExplore">Find support now</button><button class="secondary" id="setupHero">Personalize my experience</button></div></div> <aside class="childCard"><div><div class="childIcon">☺</div><h3 id="childWelcome">Make it personal</h3><p id="childDesc">Add a child profile so the app can remember their grade and support needs on this device.</p></div><div><div class="childMeta" id="childMeta"><span>Private to this device</span><span>Edit anytime</span></div><button id="childCardBtn">Set up child profile</button></div></aside></div> <div class="section"><div class="sectionHead"><div><h2>Where are you in the journey?</h2><p>Choose a stage to narrow down what may be most useful right now.</p></div></div><div class="stages" id="stageList"></div></div> <div class="section"><div class="sectionHead"><div><h2>What’s happening right now?</h2><p>Start with the situation—not a diagnosis or a label.</p></div><button class="linkBtn goExplore">See everything →</button></div><div class="quick" id="quickList"></div></div> <div class="section"><div class="sectionHead"><div><h2>New and useful</h2><p>Modules, tools and printable resources will appear here as they are published.</p></div></div><div class="cards" id="featuredCards"></div></div> </section> <section class="view" id="explore"><div class="savedIntro"><h1>Explore support</h1><p>Search by what is happening, browse by content type, or choose a journey stage.</p></div><div class="searchBar"><input id="search" placeholder="Search transitions, advocacy, masking, routines…"><button class="primary" id="searchBtn">Search</button></div><div class="tabs"><button class="tab active" data-type="all">Everything</button><button class="tab" data-type="modules">Modules</button><button class="tab" data-type="tools">Tools</button><button class="tab" data-type="resources">Resources</button></div><div class="cards" id="libraryCards"></div></section> <section class="view" id="saved"><div class="savedIntro"><h1>Your saved support</h1><p>Keep the pieces you want to return to without having to find them again.</p></div><div class="cards" id="savedCards"></div></section> <section class="view" id="child"><div class="childIntro"><h1>Your child’s school journey</h1><p>A lightweight profile helps prioritize relevant support. This first version saves information only on your device.</p></div><div class="panel" id="childPanel"></div></section> </div></div> <div class="modalBack" id="detailBack"><div class="modal"><button class="close" data-close="detailBack">×</button><span class="kicker" id="dType">Module</span><h2 id="dTitle"></h2><p class="modalLead" id="dSummary"></p><div class="contentBlock" id="dBody"></div><div class="storyBlock" id="dStory"></div><div class="actionBlock"><b>Try this next</b><div class="checkline" style="margin-top:10px"><span class="checkbox"></span><span id="dAction"></span></div></div><div class="field"><label>Your notes</label><textarea class="notes" id="dNotes" placeholder="Write down what you want to remember…"></textarea></div><div class="heroActions"><button class="primary" id="saveNote">Save note</button><button class="secondary" id="detailSave">♡ Save this</button></div></div></div> <div class="modalBack" id="profileBack"><div class="modal"><button class="close" data-close="profileBack">×</button><span class="kicker">Personalization</span><h2>Set up a child profile</h2><p class="modalLead">Use a first name or nickname. This version stores the information only in this browser.</p><div class="field"><label>Name or nickname</label><input id="pName" placeholder="e.g. Sam"></div><div class="field"><label>Grade</label><select id="pGrade"><option value="">Choose a grade</option><option>Pre-K</option><option>Kindergarten</option><option>Grade 1</option><option>Grade 2</option><option>Grade 3</option><option>Grade 4</option><option>Grade 5</option><option>Grade 6</option><option>Grade 7</option><option>Grade 8</option><option>Grade 9</option><option>Grade 10</option><option>Grade 11</option><option>Grade 12</option></select></div><div class="field"><label>What support areas matter most?</label><div class="checks" id="profileChoices"></div></div><button class="primary" id="saveProfile">Save profile</button></div></div> <div class="toast" id="toast"></div> <script> var stages=[['Before the First Bell','Preparing for school'],['Finding Your Footing','Starting and settling in'],['Building Confidence','Learning what helps'],['Navigating Change','Transitions and challenges'],['Growing Independence','Skills and self-advocacy'],['Planning Ahead','Preparing next steps'],['What Comes Next','Moving beyond school']]; var quick=[['↻','Transitions and unexpected change'],['⌂','School refusal and difficult mornings'],['☁','After-school overwhelm'],['◉','Masking and hidden distress'],['✎','Meetings, plans and advocacy'],['◇','Friendships, conflict and bullying']]; var profileAreas=['Transitions','Communication','Sensory needs','Emotional regulation','Executive functioning','Self-advocacy']; var db={modules:[],tools:[],resources:[],situations:[]}, currentType='all', currentStage='', currentItem=null; var saved=JSON.parse(localStorage.getItem('ttsSaved')||'[]'), notes=JSON.parse(localStorage.getItem('ttsNotes')||'{}'), profile=JSON.parse(localStorage.getItem('ttsProfile')||'null'); function esc(s){return String(s||'').replace(/[&<>"']/g,function(c){return {'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]})} function toast(t){var x=document.getElementById('toast');x.textContent=t;x.classList.add('show');setTimeout(function(){x.classList.remove('show')},1900)} function items(){return [].concat(db.modules||[],db.tools||[],db.resources||[])} function itemId(x){return x._id||x.id||((x.type||'item')+'-'+(x.title||''))} function stageText(x){return Array.isArray(x.journeyStages)?x.journeyStages.map(function(s){return s.title||s.stageName||s}).join(' '):(x.journeyStages||'')} function renderStages(){document.getElementById('stageList').innerHTML=stages.map(function(s,i){return '<button class="stage '+(currentStage===s[0]?'active':'')+'" data-stage="'+esc(s[0])+'"><span class="stageNo">STAGE '+(i+1)+'</span><div class="stageIcon">'+['◌','↗','✦','↻','△','⌁','→'][i]+'</div><b>'+esc(s[0])+'</b></button>'}).join('');document.querySelectorAll('.stage').forEach(function(b){b.onclick=function(){currentStage=b.dataset.stage;showView('explore');renderLibrary()}})} function renderQuick(){document.getElementById('quickList').innerHTML=quick.map(function(q){return '<button class="quickCard" data-q="'+esc(q[1])+'"><span>'+q[0]+'</span><b>'+esc(q[1])+'</b></button>'}).join('');document.querySelectorAll('.quickCard').forEach(function(b){b.onclick=function(){showView('explore');document.getElementById('search').value=b.dataset.q;renderLibrary()}})} function card(x){var id=itemId(x), isSaved=saved.indexOf(id)>-1, cover=typeof x.coverImage==='string'?x.coverImage:'';return '<article class="card"><div class="cover" '+(cover?'style="background-image:url("'+esc(cover)+'")"':'')+'><span class="badge">'+esc(x.type||'Support')+'</span><button class="saveBtn '+(isSaved?'on':'')+'" data-save="'+esc(id)+'">'+(isSaved?'♥':'♡')+'</button></div><div class="cardBody"><h3>'+esc(x.title||'Untitled')+'</h3><p>'+esc(x.shortDescription||'Practical support for families navigating school.')+'</p><div class="meta">'+(x.gradeRange?'<span>'+esc(x.gradeRange)+'</span>':'')+'<span>'+esc(x.accessLevel||'Free')+'</span></div><button class="open" data-open="'+esc(id)+'">Open '+esc((x.type||'support').toLowerCase())+'</button></div></article>'} function bindCards(){document.querySelectorAll('[data-save]').forEach(function(b){b.onclick=function(e){e.stopPropagation();toggleSave(b.dataset.save)}});document.querySelectorAll('[data-open]').forEach(function(b){b.onclick=function(){openItem(b.dataset.open)}})} function empty(message){return '<div class="empty"><div class="emptyIcon">✦</div><h3>Your support library is being prepared</h3><p>'+esc(message)+'</p><div class="miniNote">The page is working—published content will appear automatically.</div></div>'} function renderFeatured(){var a=items().filter(function(x){return x.featured}).slice(0,3);if(!a.length)a=items().slice(0,3);document.getElementById('featuredCards').innerHTML=a.length?a.map(card).join(''):empty('Madeleine is creating the first practical modules, tools and resources now.');bindCards()} function renderLibrary(){var q=(document.getElementById('search').value||'').toLowerCase(), a=items();if(currentType!=='all')a=a.filter(function(x){return (x.type||'').toLowerCase()===currentType.slice(0,-1)});if(currentStage)a=a.filter(function(x){return stageText(x).toLowerCase().indexOf(currentStage.toLowerCase())>-1});if(q)a=a.filter(function(x){return ((x.title||'')+' '+(x.shortDescription||'')+' '+(x.supportAreas||[]).join(' ')).toLowerCase().indexOf(q)>-1});document.getElementById('libraryCards').innerHTML=a.length?a.map(card).join(''):empty(q||currentStage?'No published content matches this search yet. Try another phrase or choose Everything.':'Published modules, tools and resources will appear here automatically.');bindCards()} function renderSaved(){var a=items().filter(function(x){return saved.indexOf(itemId(x))>-1});document.getElementById('savedCards').innerHTML=a.length?a.map(card).join(''):empty('Tap the heart on any module, tool or resource to keep it here.');bindCards()} function toggleSave(id){var i=saved.indexOf(id);if(i>-1){saved.splice(i,1);toast('Removed from saved')}else{saved.push(id);toast('Saved for later')}localStorage.setItem('ttsSaved',JSON.stringify(saved));renderFeatured();renderLibrary();renderSaved();if(currentItem)document.getElementById('detailSave').textContent=saved.indexOf(id)>-1?'♥ Saved':'♡ Save this'} function openItem(id){currentItem=items().find(function(x){return itemId(x)===id});if(!currentItem)return;var s=currentItem.studioContent||{};document.getElementById('dType').textContent=currentItem.type||'Support';document.getElementById('dTitle').textContent=currentItem.title||'Untitled';document.getElementById('dSummary').textContent=currentItem.shortDescription||'';document.getElementById('dBody').textContent=s.body||currentItem.body||'This section is still being prepared.';document.getElementById('dStory').textContent=s.story?'From lived experience\n\n'+s.story:'A lived-experience story will be added here.';document.getElementById('dAction').textContent=s.action||'Choose one small step that feels manageable today.';document.getElementById('dNotes').value=notes[id]||'';document.getElementById('detailSave').textContent=saved.indexOf(id)>-1?'♥ Saved':'♡ Save this';document.getElementById('detailBack').classList.add('open')} function showView(id){document.querySelectorAll('.view').forEach(function(v){v.classList.toggle('active',v.id===id)});document.querySelectorAll('.navBtn').forEach(function(b){b.classList.toggle('active',b.dataset.view===id)});if(id==='saved')renderSaved();if(id==='child')renderProfile();window.scrollTo(0,0)} function openProfile(){document.getElementById('pName').value=profile&&profile.name||'';document.getElementById('pGrade').value=profile&&profile.grade||'';document.querySelectorAll('#profileChoices .choice').forEach(function(c){c.classList.toggle('on',profile&&profile.areas&&profile.areas.indexOf(c.textContent)>-1)});document.getElementById('profileBack').classList.add('open')} function updateProfileUI(){var btn=document.getElementById('profileTop');if(profile&&profile.name){btn.textContent='☺ '+profile.name;document.getElementById('childWelcome').textContent='Supporting '+profile.name;document.getElementById('childDesc').textContent=(profile.grade?profile.grade+' • ':'')+'Recommendations will prioritize '+((profile.areas||[]).slice(0,2).join(' and ')||'their current needs')+'.';document.getElementById('childCardBtn').textContent="View "+profile.name+"'s profile";document.getElementById('childMeta').innerHTML=(profile.areas||[]).slice(0,3).map(function(x){return '<span>'+esc(x)+'</span>'}).join('')||'<span>Profile ready</span>'}else{btn.textContent='+ Add child profile'}} function renderProfile(){var p=document.getElementById('childPanel');if(!profile){p.innerHTML='<div class="empty"><div class="emptyIcon">☺</div><h3>No child profile yet</h3><p>Add a nickname, grade and current support needs to personalize this experience.</p><button class="primary" style="margin-top:15px" id="emptyProfile">Create profile</button></div>';document.getElementById('emptyProfile').onclick=openProfile;return}p.innerHTML='<div class="sectionHead"><div><h2>'+esc(profile.name)+"'s profile</h2><p>Saved privately in this browser.</p></div><button class="secondary" id="editProfile">Edit profile</button></div><div class="profileGrid"><div class="profileStat"><span>GRADE</span><b>'+esc(profile.grade||'Not selected')+'</b></div><div class="profileStat"><span>PRIORITY SUPPORT</span><b>'+esc((profile.areas||[])[0]||'Not selected')+'</b></div><div class="profileStat"><span>SAVED ITEMS</span><b>'+saved.length+'</b></div></div>';document.getElementById('editProfile').onclick=openProfile} function receiveData(m){db=m.data||db;renderFeatured();renderLibrary();renderSaved()} window.addEventListener('message',function(e){var m=e.data||{};if(m.type==='cmsData')receiveData(m)}); document.querySelectorAll('.navBtn').forEach(function(b){b.onclick=function(){showView(b.dataset.view)}});document.querySelectorAll('.goExplore').forEach(function(b){b.onclick=function(){showView('explore')}});document.getElementById('setupHero').onclick=openProfile;document.getElementById('profileTop').onclick=function(){profile?showView('child'):openProfile()};document.getElementById('childCardBtn').onclick=function(){profile?showView('child'):openProfile()};document.querySelectorAll('[data-close]').forEach(function(b){b.onclick=function(){document.getElementById(b.dataset.close).classList.remove('open')}});document.querySelectorAll('.modalBack').forEach(function(b){b.onclick=function(e){if(e.target===b)b.classList.remove('open')}}); document.getElementById('profileChoices').innerHTML=profileAreas.map(function(x){return '<button class="choice" type="button">'+x+'</button>'}).join('');document.querySelectorAll('#profileChoices .choice').forEach(function(c){c.onclick=function(){c.classList.toggle('on')}}); document.getElementById('saveProfile').onclick=function(){var name=document.getElementById('pName').value.trim();if(!name){toast('Add a name or nickname first');return}profile={name:name,grade:document.getElementById('pGrade').value,areas:Array.from(document.querySelectorAll('#profileChoices .choice.on')).map(function(x){return x.textContent})};localStorage.setItem('ttsProfile',JSON.stringify(profile));document.getElementById('profileBack').classList.remove('open');updateProfileUI();renderProfile();toast('Profile saved')}; document.getElementById('search').oninput=renderLibrary;document.getElementById('searchBtn').onclick=renderLibrary;document.querySelectorAll('.tab').forEach(function(t){t.onclick=function(){document.querySelectorAll('.tab').forEach(function(x){x.classList.remove('active')});t.classList.add('active');currentType=t.dataset.type;renderLibrary()}}); document.getElementById('saveNote').onclick=function(){if(!currentItem)return;notes[itemId(currentItem)]=document.getElementById('dNotes').value;localStorage.setItem('ttsNotes',JSON.stringify(notes));toast('Note saved on this device')};document.getElementById('detailSave').onclick=function(){if(currentItem)toggleSave(itemId(currentItem))}; renderStages();renderQuick();renderFeatured();renderLibrary();renderSaved();updateProfileUI();window.parent.postMessage({type:'requestCmsData'},'*'); </script></body></html>
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <style> :root{--ink:#20332b;--muted:#68786f;--green:#3f7d50;--green2:#dfeee3;--cream:#f7f4ed;--peach:#f7dfd1;--lav:#e9e1f2;--blue:#dfeaf4;--line:#dfe5df;--white:#fff;--shadow:0 14px 40px rgba(32,51,43,.10)} *{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.app{min-height:100vh}.top{position:sticky;top:0;z-index:20;background:rgba(247,244,237,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(63,125,80,.12)}.topin{max-width:1180px;margin:auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;font-weight:850}.mark{width:38px;height:38px;border-radius:13px;background:var(--green);color:#fff;display:grid;place-items:center;font-size:20px}.nav{display:flex;gap:6px}.nav button{border:0;background:transparent;color:var(--muted);font-weight:750;padding:9px 12px;border-radius:11px;cursor:pointer}.nav button.active,.nav button:hover{background:var(--green2);color:#2c653c}.profileBtn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;font-weight:750;color:var(--ink);cursor:pointer}.wrap{max-width:1180px;margin:auto;padding:26px 20px 80px}.view{display:none}.view.active{display:block}.hero{display:grid;grid-template-columns:1.6fr .8fr;gap:18px;margin-bottom:30px}.heroMain{min-height:330px;border-radius:30px;padding:42px;background:linear-gradient(135deg,#dcece1 0%,#e9e1f2 55%,#f7dfd1 100%);position:relative;overflow:hidden}.heroMain:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;top:-60px;background:rgba(255,255,255,.35)}.kicker{display:inline-flex;background:#fff9;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:850;color:#376b46}.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.04em;max-width:760px;margin:18px 0 16px}.hero p{font-size:17px;line-height:1.6;max-width:650px;color:#4f6258}.heroActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.primary,.secondary{border:0;border-radius:13px;padding:13px 17px;font-weight:850;cursor:pointer}.primary{background:var(--green);color:white}.secondary{background:white;color:var(--ink);border:1px solid #d7dfd8}.childCard{background:var(--ink);color:#fff;border-radius:30px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;min-height:330px}.childIcon{width:54px;height:54px;border-radius:18px;background:#ffffff18;display:grid;place-items:center;font-size:27px}.childCard h3{font-size:24px;margin:18px 0 8px}.childCard p{color:#d2ddd6;line-height:1.5}.childMeta{display:flex;gap:8px;flex-wrap:wrap}.childMeta span{background:#ffffff14;padding:7px 9px;border-radius:999px;font-size:11px}.childCard button{width:100%;margin-top:18px;background:#fff;color:var(--ink);border:0;border-radius:12px;padding:12px;font-weight:850;cursor:pointer}.section{margin-top:32px}.sectionHead{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}.sectionHead h2{font-size:27px;letter-spacing:-.02em;margin:0}.sectionHead p{color:var(--muted);margin:6px 0 0}.linkBtn{border:0;background:transparent;color:var(--green);font-weight:850;cursor:pointer}.stages{display:grid;grid-template-columns:repeat(7,minmax(135px,1fr));gap:10px;overflow:auto;padding-bottom:5px}.stage{min-height:128px;border:1px solid var(--line);background:#fff;border-radius:18px;padding:15px;text-align:left;cursor:pointer;transition:.2s}.stage:hover,.stage.active{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#7fa98a}.stageNo{font-size:11px;color:var(--muted);font-weight:800}.stageIcon{font-size:24px;margin:13px 0}.stage b{display:block;font-size:13px;line-height:1.3}.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.quickCard{border:0;border-radius:20px;padding:19px;text-align:left;cursor:pointer;min-height:125px;color:var(--ink)}.quickCard:nth-child(3n+1){background:var(--peach)}.quickCard:nth-child(3n+2){background:var(--blue)}.quickCard:nth-child(3n){background:var(--lav)}.quickCard span{font-size:24px}.quickCard b{display:block;margin-top:18px;font-size:15px}.searchBar{background:#fff;border:1px solid var(--line);border-radius:16px;padding:7px;display:flex;gap:8px;margin:16px 0}.searchBar input{flex:1;border:0;padding:10px 12px;font-size:15px;outline:none;background:transparent}.tabs{display:flex;gap:8px;flex-wrap:wrap}.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;font-weight:800;color:var(--muted);cursor:pointer}.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:17px}.card{background:#fff;border:1px solid var(--line);border-radius:21px;overflow:hidden;box-shadow:0 5px 18px rgba(32,51,43,.05);display:flex;flex-direction:column}.cover{height:145px;background:linear-gradient(135deg,var(--green2),var(--lav));background-size:cover;background-position:center;padding:14px;display:flex;align-items:flex-start;justify-content:space-between}.badge{background:#fff;color:var(--green);border-radius:999px;padding:6px 8px;font-size:10px;font-weight:900}.saveBtn{border:0;background:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:17px}.saveBtn.on{background:var(--green);color:#fff}.cardBody{padding:17px;display:flex;flex-direction:column;flex:1}.card h3{font-size:18px;margin:0 0 8px}.card p{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 15px}.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}.meta span{font-size:10px;background:#f0f4f1;border-radius:999px;padding:5px 7px}.open{width:100%;margin-top:14px;border:0;border-radius:11px;padding:10px;background:#edf4ef;color:#306942;font-weight:850;cursor:pointer}.empty{grid-column:1/-1;background:#fff;border:1px dashed #b8c4bb;border-radius:22px;padding:42px;text-align:center}.emptyIcon{width:66px;height:66px;background:var(--green2);border-radius:22px;display:grid;place-items:center;font-size:30px;margin:0 auto 15px}.empty h3{margin:0 0 8px}.empty p{color:var(--muted);max-width:520px;margin:0 auto;line-height:1.55}.miniNote{margin-top:12px;font-size:12px;color:#7a887f}.savedIntro,.childIntro{background:linear-gradient(135deg,#dcece1,#f7dfd1);border-radius:24px;padding:28px;margin-bottom:18px}.savedIntro h1,.childIntro h1{font-size:34px;margin:0 0 8px}.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px}.profileGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.profileStat{background:#f6f8f6;border-radius:15px;padding:16px}.profileStat span{font-size:11px;color:var(--muted)}.profileStat b{display:block;margin-top:6px}.modalBack{display:none;position:fixed;inset:0;background:#18261dcc;z-index:50;padding:18px;overflow:auto}.modalBack.open{display:flex;align-items:center;justify-content:center}.modal{width:min(720px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:25px;padding:25px;position:relative}.close{position:absolute;right:18px;top:16px;border:0;background:#eef2ef;width:35px;height:35px;border-radius:50%;cursor:pointer}.modal h2{font-size:29px;margin:8px 45px 8px 0}.modalLead{color:var(--muted);line-height:1.55}.contentBlock{background:#f5f8f6;border-left:4px solid var(--green);padding:16px;border-radius:0 15px 15px 0;margin:15px 0;white-space:pre-wrap;line-height:1.6}.storyBlock{background:#fff3dd;border:1px solid #eed5a7;border-radius:15px;padding:16px;white-space:pre-wrap;line-height:1.6}.actionBlock{border:1px solid var(--line);border-radius:15px;padding:16px;margin-top:15px}.checkline{display:flex;gap:10px;align-items:flex-start}.checkbox{width:21px;height:21px;border:2px solid var(--green);border-radius:6px;flex:0 0 auto}.notes{width:100%;min-height:100px;border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;margin-top:8px}.field{margin:14px 0}.field label{display:block;font-size:12px;font-weight:850;margin-bottom:6px}.field input,.field select{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px;font:inherit}.checks{display:flex;flex-wrap:wrap;gap:7px}.choice{border:1px solid var(--line);border-radius:999px;padding:8px 10px;background:#fff;cursor:pointer;font-size:12px}.choice.on{background:var(--green2);border-color:#79a486}.toast{position:fixed;right:20px;bottom:20px;background:var(--ink);color:#fff;padding:12px 15px;border-radius:12px;z-index:90;opacity:0;transform:translateY(12px);transition:.2s}.toast.show{opacity:1;transform:none} @media(max-width:900px){.hero{grid-template-columns:1fr}.childCard{min-height:230px}.cards{grid-template-columns:repeat(2,1fr)}.quick{grid-template-columns:repeat(2,1fr)}.nav{display:none}}@media(max-width:600px){.topin{padding:10px 12px}.brandText{display:none}.wrap{padding:16px 12px 70px}.heroMain{padding:27px 22px;min-height:380px}.hero h1{font-size:38px}.cards,.quick,.profileGrid{grid-template-columns:1fr}.profileBtn{font-size:12px}.sectionHead{align-items:flex-start}.stage{min-width:145px}.modal{padding:21px}.modal h2{font-size:25px}} </style><style id="brand-refresh"> :root{ --ink:#19354A; --muted:#5F7586; --green:#67B8EA; --green2:#E6F5FE; --cream:#F7FBFE; --peach:#FFE5D9; --lav:#EAE5FA; --blue:#DCEFFF; --line:#D5E8F4; --white:#FFFFFF; --primary:#67B8EA; --primary-dark:#2E78A8; --primary-soft:#E6F5FE; --navy:#183A54; --shadow:0 18px 50px rgba(44,111,153,.12); } html{scroll-behavior:smooth} body{ background: radial-gradient(circle at 7% 5%,rgba(132,202,243,.18),transparent 24rem), radial-gradient(circle at 92% 18%,rgba(215,200,244,.2),transparent 26rem), #F7FBFE; color:var(--ink); } .top{ background:rgba(255,255,255,.94); border-bottom:1px solid rgba(103,184,234,.24); box-shadow:0 5px 24px rgba(37,102,145,.06); } .topin{padding:10px 24px} .mark{ background:linear-gradient(145deg,#78C7F3,#428FC3); box-shadow:0 8px 20px rgba(75,153,205,.28); } .nav button{color:#587186} .nav button.active,.nav button:hover{background:#E5F4FD;color:#246B9A} .profileBtn{border-color:#CBE5F4;background:#F7FCFF;color:#215E86} .profileBtn:hover{background:#E8F6FE} .wrap{padding-top:14px;padding-left:clamp(18px,3vw,38px);padding-right:clamp(18px,3vw,38px)} .hero{gap:16px;margin-bottom:24px} .heroMain{ min-height:310px; padding:36px; border:1px solid rgba(103,184,234,.22); background:linear-gradient(135deg,#DDF2FF 0%,#ECE9FB 58%,#FFE7DD 100%); box-shadow:var(--shadow); } .heroMain:before{ content:""; position:absolute; width:145px;height:145px; left:-40px;bottom:-48px; border:25px solid rgba(255,255,255,.25); border-radius:50%; } .heroMain:after{background:rgba(255,255,255,.32)} .kicker{background:rgba(255,255,255,.8);color:#256A97;border:1px solid rgba(103,184,234,.22)} .hero h1{color:#183A54} .hero p{color:#49677B} .primary{ background:linear-gradient(135deg,#67B8EA,#3D91C8); color:#fff; box-shadow:0 9px 20px rgba(62,145,200,.25); } .primary:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(62,145,200,.32)} .secondary{border-color:#CFE4F1;background:rgba(255,255,255,.92);color:#214F6D} .primary,.secondary,.profileBtn,.stage,.quickCard,.card,.tab,.open{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease} .childCard{ min-height:310px; background:linear-gradient(155deg,#193A54 0%,#245C7E 100%); box-shadow:0 18px 42px rgba(25,58,84,.2); } .childIcon{background:rgba(137,208,247,.16);color:#A9DEFA} .childCard button{color:#205A7E} .section{margin-top:26px} .sectionHead h2{color:#1A3A50} .sectionHead p{color:#6A8090} .linkBtn{color:#2D82B8} .stages{gap:12px;padding:4px 2px 9px} .stage{ min-height:136px; border-color:#D6E9F4; box-shadow:0 6px 18px rgba(48,113,155,.06); position:relative; overflow:hidden; } .stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:#82C8EF} .stage:nth-child(2n):after{background:#B6A8E2} .stage:nth-child(3n):after{background:#F3B9A7} .stage:hover,.stage.active{border-color:#78BFE8;box-shadow:0 14px 30px rgba(55,130,176,.15)} .stageNo{color:#668196;letter-spacing:.05em} .stageIcon{ width:42px;height:42px;border-radius:14px; background:#E7F6FE;display:grid;place-items:center; margin:11px 0;color:#2F7FAD; } .quick{gap:14px} .quickCard{ border:1px solid rgba(76,140,180,.09); box-shadow:0 9px 24px rgba(42,98,135,.08); min-height:132px; } .quickCard:nth-child(3n+1){background:linear-gradient(135deg,#E1F3FF,#F3FAFE)} .quickCard:nth-child(3n+2){background:linear-gradient(135deg,#EDE8FB,#F9F7FE)} .quickCard:nth-child(3n){background:linear-gradient(135deg,#FFE8DD,#FFF7F2)} .quickCard:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(42,98,135,.14)} .quickCard span{ width:43px;height:43px;border-radius:14px;background:rgba(255,255,255,.74); display:grid;place-items:center; } .searchBar{border-color:#CFE5F2;box-shadow:0 10px 26px rgba(45,105,143,.07)} .tab{border-color:#D4E6F1;color:#5F7789} .tab.active{background:#255F84;border-color:#255F84} .card{border-color:#D4E7F2;box-shadow:0 10px 28px rgba(43,102,140,.09)} .card:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(43,102,140,.14)} .cover{background:linear-gradient(135deg,#DDF2FF,#EDE8FB 60%,#FFE9DF)} .badge{color:#2B79A8} .meta span{background:#EAF5FB;color:#486A80} .open{background:#E7F5FD;color:#246B97} .open:hover{background:#D8EEFA} .empty{border-color:#BFDDEC;background:rgba(255,255,255,.82)} .emptyIcon{background:#E2F3FC;color:#2D80B2} .savedIntro,.childIntro{ background:linear-gradient(135deg,#DCF1FE,#EDE8FB 60%,#FFE8DE); border:1px solid rgba(103,184,234,.18); box-shadow:0 12px 30px rgba(44,111,153,.08); } .panel{border-color:#D4E7F2;box-shadow:0 10px 28px rgba(43,102,140,.07)} .profileStat{background:#EDF7FC} .modal{border:1px solid #D4E7F2;box-shadow:0 30px 80px rgba(20,57,80,.25)} .contentBlock{background:#EFF8FD;border-left-color:#63B5E7} .storyBlock{background:#FFF4EC;border-color:#F1D2C2} .actionBlock{border-color:#D4E7F2;background:#FBFDFF} .checkbox{border-color:#4B9FD2} .choice.on{background:#DFF2FC;border-color:#74BDE6;color:#245F84} .toast{background:#183A54} :focus-visible{outline:3px solid rgba(103,184,234,.55);outline-offset:3px} @media(max-width:900px){ .top{position:relative;background:#fff} .topin{display:block;padding:0} .brand,.profileBtn{display:none} .nav{ display:flex;position:static;inset:auto;z-index:20; justify-content:space-around;gap:4px;padding:6px;margin:0 12px 10px; background:#fff;border:1px solid #CDE5F2;border-radius:18px; box-shadow:0 10px 28px rgba(25,67,94,.14); } .nav button{flex:1;padding:10px 5px;font-size:11px} .wrap{padding-top:10px;padding-bottom:105px} .heroMain{min-height:0} } @media(max-width:600px){ .wrap{padding-left:12px;padding-right:12px} .heroMain{padding:25px 21px} .hero h1{font-size:36px} .childCard{min-height:220px} .section{margin-top:22px} .stage{min-width:150px} } </style><style id="portal-redesign-v2"> :root{--portal-navy:#163b5c;--portal-blue:#9fd8f4;--portal-sky:#eaf7fd;--portal-peri:#e7e9ff;--portal-peach:#ffe1d2;--portal-mint:#def3e9;--portal-ink:#17384f;--portal-muted:#617b8d;--portal-line:#cfe6f2;--portal-white:#fff;--portal-shadow:0 18px 50px rgba(31,83,115,.12)} body{background:#f5fbff;color:var(--portal-ink)}.app{background:linear-gradient(180deg,#fafdff 0%,#f4faff 100%)} .top{position:relative;background:#fff;border-bottom:1px solid var(--portal-line);backdrop-filter:none}.topin{max-width:1240px;padding:15px 24px}.brand{gap:12px;color:var(--portal-navy)}.mark{width:43px;height:43px;border-radius:15px;background:linear-gradient(145deg,#8fd5f5,#91aef1);font-size:12px;letter-spacing:-.03em;box-shadow:0 8px 22px rgba(70,139,187,.22)}.brandLockup{display:flex;flex-direction:column;line-height:1.15}.brandText{font-size:15px;font-weight:900}.brandLockup small{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#6f8fa3;margin-top:4px}.nav{padding:4px;background:#f4f9fc;border:1px solid #e3f0f6;border-radius:15px}.nav button{color:#607b8e;padding:9px 13px}.nav button.active,.nav button:hover{background:#dff2fb;color:#1c5f86;box-shadow:0 3px 10px rgba(37,102,141,.08)}.profileBtn{border-color:#c9e6f2;color:#1d5d82;border-radius:14px;background:#fff} .wrap{max-width:1240px;padding:24px 24px 72px}.portalContext{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid #cce7f3;background:linear-gradient(90deg,#eef9fe,#f4f1ff);border-radius:18px;padding:13px 17px;margin-bottom:18px}.portalContext>div{display:flex;align-items:center;gap:11px}.portalContext span,.sectionEyebrow,.cardEyebrow{font-size:10px;font-weight:900;letter-spacing:.12em;color:#4081a5}.portalContext b{font-size:13px;background:#fff;border:1px solid #d8eaf2;padding:7px 10px;border-radius:999px}.portalContext p{margin:0;color:#6c8493;font-size:12px} .hero{grid-template-columns:minmax(0,1.62fr) minmax(280px,.72fr);gap:18px;margin-bottom:28px}.heroMain{min-height:410px;padding:46px;border-radius:32px;background:linear-gradient(135deg,#d8f2fc 0%,#e9ecff 58%,#ffe7de 100%);box-shadow:var(--portal-shadow)}.heroMain:after{width:330px;height:330px;right:-90px;top:-120px;background:rgba(255,255,255,.46)}.heroMain:before{content:"";position:absolute;width:160px;height:160px;border:1px solid rgba(40,106,143,.13);border-radius:50%;right:70px;bottom:-85px}.kicker{background:rgba(255,255,255,.82);color:#276989;border:1px solid rgba(255,255,255,.9);padding:9px 13px}.hero h1{color:#143b57;font-size:clamp(40px,5vw,66px);max-width:820px;margin-top:21px}.hero p{color:#4e7084;font-size:18px;max-width:720px}.primary{background:#245f85;color:#fff;box-shadow:0 8px 20px rgba(36,95,133,.18)}.primary:hover{background:#174d70}.secondary{color:#245f85;border-color:#c6e2ef}.trustRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.trustRow span{font-size:10px;font-weight:800;color:#476d82;background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.82);padding:7px 9px;border-radius:999px} .childCard{min-height:410px;border-radius:32px;padding:28px;background:linear-gradient(165deg,#173d5a,#205f83);box-shadow:var(--portal-shadow);position:relative;overflow:hidden}.childCard:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(159,216,244,.12);right:-45px;top:55px}.childIcon{background:#ffffff18;color:#b8e9ff}.cardEyebrow{display:block;color:#a8dbf2;margin-top:20px}.childCard h3{font-size:27px;line-height:1.08}.childCard p{font-size:14px}.childCard button{color:#1a5679} .section{margin-top:38px}.sectionHead{align-items:flex-end}.sectionHead h2{color:#173d59;margin:5px 0 5px;font-size:30px;line-height:1.08}.sectionHead p{color:#6a8292;max-width:700px}.startSection{border:1px solid #d7eaf3;background:#fff;border-radius:28px;padding:27px;box-shadow:0 14px 36px rgba(42,94,125,.07)}.startGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.startCard{display:grid;grid-template-columns:48px 1fr;gap:13px;text-align:left;border:1px solid #d9eaf2;background:#fbfdff;border-radius:20px;padding:17px;color:var(--portal-ink);cursor:pointer;transition:.18s}.startCard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(35,86,116,.1);border-color:#b7ddec}.startCard div{min-width:0}.startCard small{display:block;color:#6c8ea2;font-size:9px;font-weight:900;letter-spacing:.09em;margin-bottom:6px}.startCard b{display:block;font-size:16px;line-height:1.2}.startCard p{font-size:12px;line-height:1.45;color:#718896;margin:7px 0}.startCard em{grid-column:2;font-size:11px;font-weight:900;color:#2c7299;font-style:normal}.startIcon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:20px;font-weight:900}.startIcon.coral{background:var(--portal-peach);color:#bd6545}.startIcon.lavender{background:var(--portal-peri);color:#6973bd}.startIcon.mint{background:var(--portal-mint);color:#367c61} .stages{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(165px,1fr);gap:10px;overflow-x:auto;padding:3px 2px 11px;scroll-snap-type:x proximity}.stage{scroll-snap-align:start;background:#fff;border:1px solid #d8eaf2;border-radius:19px;padding:16px;min-height:145px;color:#234e68;box-shadow:0 8px 24px rgba(40,87,113,.06)}.stage:hover,.stage.active{background:#eaf7fd;border-color:#9ed4eb}.stageNo{color:#6895aa}.stageIcon{background:#e7f5fb;color:#2b7298} .quick{grid-template-columns:repeat(3,1fr);gap:11px}.quickCard{min-height:100px;border:1px solid #d8eaf2;background:#fff;border-radius:19px;padding:17px;color:#244f69;box-shadow:0 8px 22px rgba(46,91,116,.05)}.quickCard span{background:#eaf7fd;color:#2e769b}.linkBtn{color:#2b7399}.latestSection{padding-top:8px}.card,.empty{border-color:#d7eaf2;box-shadow:0 12px 32px rgba(44,89,115,.07)}.empty{background:linear-gradient(135deg,#fff,#f1f9fd);border-style:solid}.emptyIcon{background:#e4f5fc;color:#2e759a}.empty h3{color:#19425f}.miniNote{background:#edf7fb;color:#5b7d90} .portalIntro{background:linear-gradient(135deg,#e3f6fd,#f1efff);border:1px solid #d5e9f3;border-radius:28px;padding:31px;margin-bottom:20px}.portalIntro h1{color:#153d5a;margin:7px 0;font-size:38px}.portalIntro p{color:#617d8e}.searchBar{background:#fff;border:1px solid #d4e8f1;border-radius:18px;padding:8px;box-shadow:0 10px 30px rgba(45,87,111,.07)}.searchBar input{border:0}.tabs{gap:8px}.tab{border-color:#d2e7f0;color:#55778a}.tab.active{background:#245f85;color:#fff;border-color:#245f85}.panel{border-color:#d6e9f1}.toast{background:#173e5b} @media(max-width:900px){ .wrap{padding:12px 12px 34px}.portalContext{display:block;padding:12px;margin-bottom:12px}.portalContext>div{display:block}.portalContext span{display:block;margin-bottom:7px}.portalContext b{display:inline-block}.portalContext p{font-size:10px;line-height:1.4;margin-top:8px} .hero{grid-template-columns:1fr;gap:10px}.heroMain{min-height:auto;padding:24px 20px;border-radius:24px}.hero h1{font-size:35px;line-height:1.02;margin:16px 0 13px}.hero p{font-size:14px;line-height:1.55}.heroActions{display:grid;grid-template-columns:1fr;gap:8px}.heroActions button{width:100%}.trustRow{gap:5px}.trustRow span{font-size:8px;padding:6px 7px} .childCard{min-height:285px;border-radius:24px;padding:21px}.childCard h3{font-size:22px}.childCard p{font-size:12px}.cardEyebrow{margin-top:12px} .section{margin-top:25px}.sectionHead{display:block}.sectionHead h2{font-size:24px}.sectionHead p{font-size:12px;line-height:1.45}.startSection{padding:18px 14px;border-radius:22px}.startGrid{grid-template-columns:1fr;gap:8px;margin-top:14px}.startCard{grid-template-columns:42px 1fr;padding:13px;border-radius:17px}.startIcon{width:40px;height:40px}.startCard b{font-size:14px}.startCard p{font-size:10px;margin:5px 0}.startCard em{font-size:10px} .stages{grid-auto-columns:210px}.stage{min-height:125px;padding:14px}.quick{grid-template-columns:1fr 1fr;gap:8px}.quickCard{min-height:98px;padding:13px;font-size:11px}.linkBtn{margin-top:8px}.portalIntro{padding:22px 18px;border-radius:22px}.portalIntro h1{font-size:30px}.tabs{overflow-x:auto;flex-wrap:nowrap}.tab{white-space:nowrap;font-size:11px} } @media(max-width:380px){.nav button{font-size:10px;padding:8px 7px}.quick{grid-template-columns:1fr}.portalContext p{display:none}.hero h1{font-size:32px}} </style></head><body><div class="app"> <header class="top"><div class="topin"><div class="brand"><div class="mark">MW</div><div class="brandLockup"><span class="brandText">Together Through School</span><small>Parents & caregivers</small></div></div><nav class="nav"><button class="navBtn active" data-view="home">Home</button><button class="navBtn" data-view="explore">Find Support</button><button class="navBtn" data-view="saved">Saved</button><button class="navBtn" data-view="child">My Child</button></nav><button class="profileBtn" id="profileTop">+ Add child profile</button></div></header> <div class="wrap"> <section class="view active" id="home"> <div class="portalContext"><div><span>MADELEINE WELSH SUPPORT HUB</span><b>Parents & Caregivers</b></div><p>This is the family portal. Dedicated spaces for educators and neurodivergent people will join it.</p></div> <div class="hero"><div class="heroMain"><span class="kicker">Guidance for the school moments that feel hard</span><h1>When school feels hard, know what to do next.</h1><p>Start with what is happening today. We’ll help you understand what may be underneath it, choose a manageable next step and find a practical tool you can actually use.</p><div class="heroActions"><button class="primary goExplore">Tell me what’s happening</button><button class="secondary" id="setupHero">Personalize for my child</button></div><div class="trustRow"><span>Built from lived experience</span><span>Practical, not clinical</span><span>Save what helps</span></div></div> <aside class="childCard"><div><div class="childIcon">◎</div><span class="cardEyebrow">YOUR FAMILY’S SPACE</span><h3 id="childWelcome">Make the guidance feel personal</h3><p id="childDesc">Add a nickname, grade and current support needs so the most relevant guidance is easier to find.</p></div><div><div class="childMeta" id="childMeta"><span>Private to this device</span><span>Edit anytime</span></div><button id="childCardBtn">Set up child profile</button></div></aside></div> <div class="section startSection"><div class="sectionHead"><div><span class="sectionEyebrow">CHOOSE YOUR STARTING POINT</span><h2>You don’t need to know what to search for.</h2><p>Begin wherever feels easiest. Each path leads to guidance, an action and a useful tool.</p></div></div><div class="startGrid"> <button class="startCard goExplore"><span class="startIcon coral">!</span><div><small>START WITH TODAY</small><b>Something is happening right now</b><p>School refusal, overwhelm, masking, conflict or a difficult meeting.</p></div><em>Find support →</em></button> <button class="startCard goStages"><span class="startIcon lavender">↗</span><div><small>START WITH THE JOURNEY</small><b>Your child is entering a new stage</b><p>Find guidance that matches where they are in school.</p></div><em>Choose a stage →</em></button> <button class="startCard goTools"><span class="startIcon mint">✓</span><div><small>START WITH ACTION</small><b>You need something practical</b><p>Use scripts, planners, checklists and other tools.</p></div><em>Open the toolkit →</em></button> </div></div> <div class="section" id="journeyStart"><div class="sectionHead"><div><span class="sectionEyebrow">SCHOOL JOURNEY</span><h2>Where is your child right now?</h2><p>Choose the closest stage. It does not have to fit perfectly.</p></div></div><div class="stages" id="stageList"></div></div> <div class="section situationSection"><div class="sectionHead"><div><span class="sectionEyebrow">START WITH THE SITUATION</span><h2>What is your family dealing with today?</h2><p>You do not need a diagnosis or the “right” words—just choose what feels closest.</p></div><button class="linkBtn goExplore">View all support →</button></div><div class="quick" id="quickList"></div></div> <div class="section latestSection"><div class="sectionHead"><div><span class="sectionEyebrow">FROM MADELEINE</span><h2>Latest guidance and tools</h2><p>New practical support will appear here as it is published.</p></div></div><div class="cards" id="featuredCards"></div></div> </section> <section class="view" id="explore"><div class="savedIntro portalIntro"><span class="sectionEyebrow">PARENTS & CAREGIVERS</span><h1>Find the right support for this moment</h1><p>Search in your own words, begin with a situation, or browse practical guides and tools.</p></div><div class="searchBar"><input id="search" placeholder="Try “difficult mornings” or “school meeting”…"><button class="primary" id="searchBtn">Find support</button></div><div class="tabs"><button class="tab active" data-type="all">All support</button><button class="tab" data-type="modules">Guides</button><button class="tab" data-type="tools">Practical tools</button><button class="tab" data-type="resources">Printables</button></div><div class="cards" id="libraryCards"></div></section> <section class="view" id="saved"><div class="savedIntro portalIntro"><span class="sectionEyebrow">YOUR LIBRARY</span><h1>Support you want to come back to</h1><p>Keep useful guidance, tools and notes together so you do not have to find them twice.</p></div><div class="cards" id="savedCards"></div></section> <section class="view" id="child"><div class="childIntro portalIntro"><span class="sectionEyebrow">PERSONALIZATION</span><h1>Your child’s school journey</h1><p>Add only what feels useful. This first version stores the profile privately on this device.</p></div><div class="panel" id="childPanel"></div></section> </div></div> <div class="modalBack" id="detailBack"><div class="modal"><button class="close" data-close="detailBack">×</button><span class="kicker" id="dType">Module</span><h2 id="dTitle"></h2><p class="modalLead" id="dSummary"></p><div class="contentBlock" id="dBody"></div><div class="storyBlock" id="dStory"></div><div class="actionBlock"><b>Try this next</b><div class="checkline" style="margin-top:10px"><span class="checkbox"></span><span id="dAction"></span></div></div><div class="field"><label>Your notes</label><textarea class="notes" id="dNotes" placeholder="Write down what you want to remember…"></textarea></div><div class="heroActions"><button class="primary" id="saveNote">Save note</button><button class="secondary" id="detailSave">♡ Save this</button></div></div></div> <div class="modalBack" id="profileBack"><div class="modal"><button class="close" data-close="profileBack">×</button><span class="kicker">Personalization</span><h2>Set up a child profile</h2><p class="modalLead">Use a first name or nickname. This version stores the information only in this browser.</p><div class="field"><label>Name or nickname</label><input id="pName" placeholder="e.g. Sam"></div><div class="field"><label>Grade</label><select id="pGrade"><option value="">Choose a grade</option><option>Pre-K</option><option>Kindergarten</option><option>Grade 1</option><option>Grade 2</option><option>Grade 3</option><option>Grade 4</option><option>Grade 5</option><option>Grade 6</option><option>Grade 7</option><option>Grade 8</option><option>Grade 9</option><option>Grade 10</option><option>Grade 11</option><option>Grade 12</option></select></div><div class="field"><label>What support areas matter most?</label><div class="checks" id="profileChoices"></div></div><button class="primary" id="saveProfile">Save profile</button></div></div> <div class="toast" id="toast"></div> <script> var stages=[['Before the First Bell','Preparing for school'],['Finding Your Footing','Starting and settling in'],['Building Confidence','Learning what helps'],['Navigating Change','Transitions and challenges'],['Growing Independence','Skills and self-advocacy'],['Planning Ahead','Preparing next steps'],['What Comes Next','Moving beyond school']]; var quick=[['↻','Transitions and unexpected change'],['⌂','School refusal and difficult mornings'],['☁','After-school overwhelm'],['◉','Masking and hidden distress'],['✎','Meetings, plans and advocacy'],['◇','Friendships, conflict and bullying']]; var profileAreas=['Transitions','Communication','Sensory needs','Emotional regulation','Executive functioning','Self-advocacy']; var db={modules:[],tools:[],resources:[],situations:[]}, currentType='all', currentStage='', currentItem=null; var saved=JSON.parse(localStorage.getItem('ttsSaved')||'[]'), notes=JSON.parse(localStorage.getItem('ttsNotes')||'{}'), profile=JSON.parse(localStorage.getItem('ttsProfile')||'null'); function esc(s){return String(s||'').replace(/[&<>"']/g,function(c){return {'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]})} function toast(t){var x=document.getElementById('toast');x.textContent=t;x.classList.add('show');setTimeout(function(){x.classList.remove('show')},1900)} function items(){return [].concat(db.modules||[],db.tools||[],db.resources||[])} function itemId(x){return x._id||x.id||((x.type||'item')+'-'+(x.title||''))} function stageText(x){return Array.isArray(x.journeyStages)?x.journeyStages.map(function(s){return s.title||s.stageName||s}).join(' '):(x.journeyStages||'')} function renderStages(){document.getElementById('stageList').innerHTML=stages.map(function(s,i){return '<button class="stage '+(currentStage===s[0]?'active':'')+'" data-stage="'+esc(s[0])+'"><span class="stageNo">STAGE '+(i+1)+'</span><div class="stageIcon">'+['◌','↗','✦','↻','△','⌁','→'][i]+'</div><b>'+esc(s[0])+'</b></button>'}).join('');document.querySelectorAll('.stage').forEach(function(b){b.onclick=function(){currentStage=b.dataset.stage;showView('explore');renderLibrary()}})} function renderQuick(){document.getElementById('quickList').innerHTML=quick.map(function(q){return '<button class="quickCard" data-q="'+esc(q[1])+'"><span>'+q[0]+'</span><b>'+esc(q[1])+'</b></button>'}).join('');document.querySelectorAll('.quickCard').forEach(function(b){b.onclick=function(){showView('explore');document.getElementById('search').value=b.dataset.q;renderLibrary()}})} function card(x){var id=itemId(x), isSaved=saved.indexOf(id)>-1, cover=typeof x.coverImage==='string'?x.coverImage:'';return '<article class="card"><div class="cover" '+(cover?'style="background-image:url("'+esc(cover)+'")"':'')+'><span class="badge">'+esc(x.type||'Support')+'</span><button class="saveBtn '+(isSaved?'on':'')+'" data-save="'+esc(id)+'">'+(isSaved?'♥':'♡')+'</button></div><div class="cardBody"><h3>'+esc(x.title||'Untitled')+'</h3><p>'+esc(x.shortDescription||'Practical support for families navigating school.')+'</p><div class="meta">'+(x.gradeRange?'<span>'+esc(x.gradeRange)+'</span>':'')+'<span>'+esc(x.accessLevel||'Free')+'</span></div><button class="open" data-open="'+esc(id)+'">Open '+esc((x.type||'support').toLowerCase())+'</button></div></article>'} function bindCards(){document.querySelectorAll('[data-save]').forEach(function(b){b.onclick=function(e){e.stopPropagation();toggleSave(b.dataset.save)}});document.querySelectorAll('[data-open]').forEach(function(b){b.onclick=function(){openItem(b.dataset.open)}})} function empty(message){return '<div class="empty"><div class="emptyIcon">MW</div><h3>Madeleine is preparing new support</h3><p>'+esc(message)+'</p><div class="miniNote">Guidance, practical tools and printable resources will appear here as they are published.</div></div>'} function renderFeatured(){var a=items().filter(function(x){return x.featured}).slice(0,3);if(!a.length)a=items().slice(0,3);document.getElementById('featuredCards').innerHTML=a.length?a.map(card).join(''):empty('Madeleine is creating the first practical modules, tools and resources now.');bindCards()} function renderLibrary(){var q=(document.getElementById('search').value||'').toLowerCase(), a=items();if(currentType!=='all')a=a.filter(function(x){return (x.type||'').toLowerCase()===currentType.slice(0,-1)});if(currentStage)a=a.filter(function(x){return stageText(x).toLowerCase().indexOf(currentStage.toLowerCase())>-1});if(q)a=a.filter(function(x){return ((x.title||'')+' '+(x.shortDescription||'')+' '+(x.supportAreas||[]).join(' ')).toLowerCase().indexOf(q)>-1});document.getElementById('libraryCards').innerHTML=a.length?a.map(card).join(''):empty(q||currentStage?'No published content matches this search yet. Try another phrase or choose Everything.':'Published modules, tools and resources will appear here automatically.');bindCards()} function renderSaved(){var a=items().filter(function(x){return saved.indexOf(itemId(x))>-1});document.getElementById('savedCards').innerHTML=a.length?a.map(card).join(''):empty('Tap the heart on any module, tool or resource to keep it here.');bindCards()} function toggleSave(id){var i=saved.indexOf(id);if(i>-1){saved.splice(i,1);toast('Removed from saved')}else{saved.push(id);toast('Saved for later')}localStorage.setItem('ttsSaved',JSON.stringify(saved));renderFeatured();renderLibrary();renderSaved();if(currentItem)document.getElementById('detailSave').textContent=saved.indexOf(id)>-1?'♥ Saved':'♡ Save this'} function openItem(id){currentItem=items().find(function(x){return itemId(x)===id});if(!currentItem)return;var s=currentItem.studioContent||{};document.getElementById('dType').textContent=currentItem.type||'Support';document.getElementById('dTitle').textContent=currentItem.title||'Untitled';document.getElementById('dSummary').textContent=currentItem.shortDescription||'';document.getElementById('dBody').textContent=s.body||currentItem.body||'This section is still being prepared.';document.getElementById('dStory').textContent=s.story?'From lived experience\n\n'+s.story:'A lived-experience story will be added here.';document.getElementById('dAction').textContent=s.action||'Choose one small step that feels manageable today.';document.getElementById('dNotes').value=notes[id]||'';document.getElementById('detailSave').textContent=saved.indexOf(id)>-1?'♥ Saved':'♡ Save this';document.getElementById('detailBack').classList.add('open')} function showView(id){document.querySelectorAll('.view').forEach(function(v){v.classList.toggle('active',v.id===id)});document.querySelectorAll('.navBtn').forEach(function(b){b.classList.toggle('active',b.dataset.view===id)});if(id==='saved')renderSaved();if(id==='child')renderProfile();if(id==='explore')renderLibrary();window.scrollTo(0,0)} function openProfile(){document.getElementById('pName').value=profile&&profile.name||'';document.getElementById('pGrade').value=profile&&profile.grade||'';document.querySelectorAll('#profileChoices .choice').forEach(function(c){c.classList.toggle('on',profile&&profile.areas&&profile.areas.indexOf(c.textContent)>-1)});document.getElementById('profileBack').classList.add('open')} function updateProfileUI(){var btn=document.getElementById('profileTop');if(profile&&profile.name){btn.textContent='☺ '+profile.name;document.getElementById('childWelcome').textContent='Supporting '+profile.name;document.getElementById('childDesc').textContent=(profile.grade?profile.grade+' • ':'')+'Recommendations will prioritize '+((profile.areas||[]).slice(0,2).join(' and ')||'their current needs')+'.';document.getElementById('childCardBtn').textContent="View "+profile.name+"'s profile";document.getElementById('childMeta').innerHTML=(profile.areas||[]).slice(0,3).map(function(x){return '<span>'+esc(x)+'</span>'}).join('')||'<span>Profile ready</span>'}else{btn.textContent='+ Add child profile'}} function renderProfile(){var p=document.getElementById('childPanel');if(!profile){p.innerHTML='<div class="empty"><div class="emptyIcon">☺</div><h3>No child profile yet</h3><p>Add a nickname, grade and current support needs to personalize this experience.</p><button class="primary" style="margin-top:15px" id="emptyProfile">Create profile</button></div>';document.getElementById('emptyProfile').onclick=openProfile;return}p.innerHTML='<div class="sectionHead"><div><h2>'+esc(profile.name)+"'s profile</h2><p>Saved privately in this browser.</p></div><button class="secondary" id="editProfile">Edit profile</button></div><div class="profileGrid"><div class="profileStat"><span>GRADE</span><b>'+esc(profile.grade||'Not selected')+'</b></div><div class="profileStat"><span>PRIORITY SUPPORT</span><b>'+esc((profile.areas||[])[0]||'Not selected')+'</b></div><div class="profileStat"><span>SAVED ITEMS</span><b>'+saved.length+'</b></div></div>';document.getElementById('editProfile').onclick=openProfile} function receiveData(m){db=m.data||db;renderFeatured();renderLibrary();renderSaved()} window.addEventListener('message',function(e){var m=e.data||{};if(m.type==='cmsData')receiveData(m)}); document.querySelectorAll('.navBtn').forEach(function(b){b.onclick=function(){showView(b.dataset.view)}});document.querySelectorAll('.goExplore').forEach(function(b){b.onclick=function(){currentType='all';showView('explore');renderLibrary()}});document.querySelectorAll('.goStages').forEach(function(b){b.onclick=function(){showView('home');setTimeout(function(){document.getElementById('journeyStart').scrollIntoView({behavior:'smooth'})},50)}});document.querySelectorAll('.goTools').forEach(function(b){b.onclick=function(){currentType='tools';document.querySelectorAll('.tab').forEach(function(x){x.classList.toggle('active',x.dataset.type==='tools')});showView('explore');renderLibrary()}});document.getElementById('setupHero').onclick=openProfile;document.getElementById('profileTop').onclick=function(){profile?showView('child'):openProfile()};document.getElementById('childCardBtn').onclick=function(){profile?showView('child'):openProfile()};document.querySelectorAll('[data-close]').forEach(function(b){b.onclick=function(){document.getElementById(b.dataset.close).classList.remove('open')}});document.querySelectorAll('.modalBack').forEach(function(b){b.onclick=function(e){if(e.target===b)b.classList.remove('open')}}); document.getElementById('profileChoices').innerHTML=profileAreas.map(function(x){return '<button class="choice" type="button">'+x+'</button>'}).join('');document.querySelectorAll('#profileChoices .choice').forEach(function(c){c.onclick=function(){c.classList.toggle('on')}}); document.getElementById('saveProfile').onclick=function(){var name=document.getElementById('pName').value.trim();if(!name){toast('Add a name or nickname first');return}profile={name:name,grade:document.getElementById('pGrade').value,areas:Array.from(document.querySelectorAll('#profileChoices .choice.on')).map(function(x){return x.textContent})};localStorage.setItem('ttsProfile',JSON.stringify(profile));document.getElementById('profileBack').classList.remove('open');updateProfileUI();renderProfile();toast('Profile saved')}; document.getElementById('search').oninput=renderLibrary;document.getElementById('searchBtn').onclick=renderLibrary;document.querySelectorAll('.tab').forEach(function(t){t.onclick=function(){document.querySelectorAll('.tab').forEach(function(x){x.classList.remove('active')});t.classList.add('active');currentType=t.dataset.type;renderLibrary()}}); document.getElementById('saveNote').onclick=function(){if(!currentItem)return;notes[itemId(currentItem)]=document.getElementById('dNotes').value;localStorage.setItem('ttsNotes',JSON.stringify(notes));toast('Note saved on this device')};document.getElementById('detailSave').onclick=function(){if(currentItem)toggleSave(itemId(currentItem))}; renderStages();renderQuick();renderFeatured();renderLibrary();renderSaved();updateProfileUI();window.parent.postMessage({type:'requestCmsData'},'*'); </script></body></html>
244
0
0