| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ParentWise • AI-Powered Parenting for ADHD & Neurotypical Kids (0–18+)</title> |
| <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script> |
| <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"> |
| <script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script> |
| <style> |
| :root { |
| --clr-bg: #FFFBF5; |
| --clr-bg-alt: #FFF7ED; |
| --clr-surface: #ffffff; |
| --clr-surface-raised: #FEF3E2; |
| --clr-primary: #D97706; |
| --clr-primary-dark: #B45309; |
| --clr-primary-light: #FDE68A; |
| --clr-accent: #0E7490; |
| --clr-accent-light: #CFFAFE; |
| --clr-text: #1C1917; |
| --clr-text-muted: #78716C; |
| --clr-text-light: #A8A29E; |
| --clr-border: #E7E5E4; |
| --clr-hero-from: #FDE68A; |
| --clr-hero-to: #FED7AA; |
| --clr-hero-accent: #FFFBEB; |
| --clr-card-hover: #FFFBEB; |
| --clr-footer-bg: #1C1917; |
| --clr-footer-text: #A8A29E; |
| --clr-footer-heading: #FAFAF9; |
| --clr-tag-bg: #FEF3C7; |
| --clr-tag-text: #92400E; |
| --clr-success: #059669; |
| --clr-success-bg: #ECFDF5; |
| --clr-error: #DC2626; |
| --clr-overlay: rgba(0,0,0,0.5); |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); |
| --shadow-md: 0 4px 16px rgba(0,0,0,0.08); |
| --shadow-lg: 0 8px 32px rgba(0,0,0,0.1); |
| --shadow-xl: 0 16px 48px rgba(0,0,0,0.12); |
| --radius-sm: 8px; |
| --radius-md: 12px; |
| --radius-lg: 20px; |
| --radius-xl: 28px; |
| } |
| html.dark { |
| --clr-bg: #0C0A09; |
| --clr-bg-alt: #1C1917; |
| --clr-surface: #1C1917; |
| --clr-surface-raised: #292524; |
| --clr-primary: #F59E0B; |
| --clr-primary-dark: #FBBF24; |
| --clr-primary-light: #78350F; |
| --clr-accent: #22D3EE; |
| --clr-accent-light: #164E63; |
| --clr-text: #FAFAF9; |
| --clr-text-muted: #A8A29E; |
| --clr-text-light: #78716C; |
| --clr-border: #44403C; |
| --clr-hero-from: #451A03; |
| --clr-hero-to: #1C1917; |
| --clr-hero-accent: #292524; |
| --clr-card-hover: #292524; |
| --clr-footer-bg: #0C0A09; |
| --clr-footer-text: #78716C; |
| --clr-footer-heading: #FAFAF9; |
| --clr-tag-bg: #451A03; |
| --clr-tag-text: #FDE68A; |
| --clr-success-bg: #064E3B; |
| --clr-overlay: rgba(0,0,0,0.7); |
| } |
| *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } |
| body { |
| font-family: 'Plus Jakarta Sans', sans-serif; |
| background: var(--clr-bg); |
| color: var(--clr-text); |
| line-height: 1.6; |
| overflow-x: hidden; |
| } |
| h1,h2,h3,h4 { font-family: 'DM Serif Display', serif; line-height:1.2; } |
| a { text-decoration:none; color:inherit; } |
| button,input,select,textarea { font-family:inherit; } |
| .container { max-width:1280px; margin:0 auto; padding:0 24px; } |
|
|
| /* NAV */ |
| .nav { position:sticky; top:0; z-index:100; background:var(--clr-surface); border-bottom:1px solid var(--clr-border); backdrop-filter:blur(12px); } |
| .nav-inner { display:flex; align-items:center; justify-content:space-between; height:72px; } |
| .nav-logo { font-family:'DM Serif Display',serif; font-size:1.75rem; color:var(--clr-primary); display:flex; align-items:center; gap:10px; } |
| .nav-links { display:flex; gap:32px; list-style:none; } |
| .nav-links a { font-weight:500; color:var(--clr-text-muted); transition:color .2s; } |
| .nav-links a:hover { color:var(--clr-primary); } |
| .nav-cta { background:var(--clr-primary); color:#fff; padding:12px 28px; border-radius:100px; font-weight:700; transition:all .2s; } |
| .nav-cta:hover { background:var(--clr-primary-dark); transform:translateY(-2px); } |
| .nav-mobile-btn { display:none; background:none; border:none; cursor:pointer; color:var(--clr-text); font-size:1.5rem; } |
|
|
| @media (max-width:768px) { |
| .nav-links, .nav-cta { display:none; } |
| .nav-mobile-btn { display:block; } |
| .nav-links.open { position:absolute; top:72px; left:0; right:0; background:var(--clr-surface); display:flex; flex-direction:column; padding:24px; gap:20px; box-shadow:var(--shadow-lg); border-bottom:1px solid var(--clr-border); } |
| .hero-grid { grid-template-columns:1fr !important; gap:40px !important; } |
| .hero h1 { font-size:2.2rem !important; } |
| } |
|
|
| /* HERO */ |
| .hero { |
| background: linear-gradient(135deg, var(--clr-hero-from) 0%, var(--clr-hero-to) 60%, var(--clr-bg) 100%); |
| padding: 100px 0 120px; position:relative; overflow:hidden; |
| } |
| .hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } |
| .hero-badge { display:inline-flex; align-items:center; gap:10px; background:var(--clr-tag-bg); color:var(--clr-tag-text); padding:8px 20px; border-radius:100px; font-weight:700; font-size:0.85rem; margin-bottom:24px; } |
| .hero h1 { font-size:3.4rem; margin-bottom:24px; line-height:1.1; } |
| .hero-desc { font-size:1.2rem; color:var(--clr-text-muted); max-width:540px; margin-bottom:32px; } |
| .personalize-form { |
| background:var(--clr-surface); border:2px solid var(--clr-border); |
| border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-md); |
| } |
| .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; } |
| @media(max-width:600px){ .form-grid{grid-template-columns:1fr;} } |
| .form-label { display:block; margin-bottom:8px; font-weight:600; font-size:0.95rem; } |
| .form-select, .form-input { |
| width:100%; padding:14px; border:2px solid var(--clr-border); |
| border-radius:var(--radius-md); font-size:1rem; |
| background:var(--clr-surface); color:var(--clr-text); |
| transition:border-color .2s; |
| } |
| .form-select:focus, .form-input:focus { outline:none; border-color:var(--clr-primary); } |
| .btn-primary { |
| background:var(--clr-primary); color:#fff; padding:16px 36px; |
| border-radius:100px; font-weight:700; font-size:1.05rem; border:none; cursor:pointer; |
| display:inline-flex; align-items:center; gap:12px; transition:all .25s; |
| } |
| .btn-primary:hover { background:var(--clr-primary-dark); transform:translateY(-3px); box-shadow:0 12px 32px rgba(217,119,6,0.35); } |
| .btn-secondary { |
| background:var(--clr-surface-raised); color:var(--clr-text); padding:12px 24px; |
| border-radius:100px; font-weight:600; border:none; cursor:pointer; transition:all .2s; |
| } |
| .btn-secondary:hover { background:var(--clr-border); } |
| .btn-danger { background:#EC4899; color:#fff; padding:12px 24px; border-radius:100px; font-weight:600; border:none; cursor:pointer; } |
|
|
| /* ADHD MODE BADGE */ |
| .adhd-mode { background:#EC4899; color:#fff; padding:4px 14px; border-radius:9999px; font-size:0.75rem; font-weight:700; display:inline-flex; align-items:center; gap:6px; } |
|
|
| /* TRACKER TABS */ |
| .tracker-tab { |
| padding:10px 20px; border-radius:100px; border:2px solid var(--clr-border); |
| background:var(--clr-surface); color:var(--clr-text-muted); cursor:pointer; font-weight:600; transition:all .2s; |
| } |
| .tracker-tab.active { background:var(--clr-primary); color:#fff; border-color:var(--clr-primary); } |
|
|
| /* DASHBOARD + ADHD HUB */ |
| .dashboard-card { background:var(--clr-surface-raised); border-radius:var(--radius-xl); padding:40px; box-shadow:var(--shadow-xl); } |
| .adhd-hub { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; margin-top:24px; } |
|
|
| /* TRACKERS */ |
| .tracker-container { background:var(--clr-surface); border-radius:var(--radius-xl); padding:32px; box-shadow:var(--shadow-lg); } |
| .focus-timer { text-align:center; } |
| .timer-display { font-size:3.5rem; font-family:'DM Serif Display',serif; margin:20px 0; color:var(--clr-primary); } |
| .timer-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } |
|
|
| /* LOG ENTRY */ |
| .log-entry { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--clr-border); font-size:0.9rem; } |
| .log-entry button { background:none; border:none; cursor:pointer; color:#DC2626; font-size:1.1rem; } |
|
|
| /* AI CHAT */ |
| .chat-window { height:420px; overflow-y:auto; background:var(--clr-surface); border-radius:var(--radius-lg); padding:20px; display:flex; flex-direction:column; gap:16px; } |
| .chat-message { max-width:82%; padding:14px 20px; border-radius:20px; font-size:0.95rem; line-height:1.5; } |
| .chat-user { align-self:flex-end; background:var(--clr-primary); color:#fff; border-bottom-right-radius:4px; } |
| .chat-ai { align-self:flex-start; background:var(--clr-surface-raised); border-bottom-left-radius:4px; } |
|
|
| /* VIDEO GRID */ |
| .video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; } |
| .video-card { background:var(--clr-surface); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--clr-border); transition:all .3s; } |
| .video-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl); } |
| .video-card iframe { width:100%; aspect-ratio:16/9; border:none; display:block; } |
|
|
| /* MODULES */ |
| .module-card { background:var(--clr-surface); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--clr-border); margin-bottom:20px; } |
| .progress-bar { height:8px; background:var(--clr-border); border-radius:9999px; overflow:hidden; } |
| .progress-fill { height:100%; background:linear-gradient(90deg,var(--clr-primary),#10b981); transition:width .5s ease; } |
|
|
| /* PRICING */ |
| .pricing-card { background:var(--clr-surface); border-radius:24px; padding:36px; text-align:center; box-shadow:var(--shadow-md); transition:transform .2s; } |
| .pricing-card:hover { transform:translateY(-4px); } |
| .price { font-size:3.2rem; font-family:'DM Serif Display',serif; color:var(--clr-primary); } |
| .price-sub { font-size:0.9rem; color:var(--clr-text-muted); margin-bottom:24px; } |
| .feature-list { list-style:none; text-align:left; margin:20px 0; } |
| .feature-list li { padding:8px 0; border-bottom:1px solid var(--clr-border); display:flex; gap:10px; align-items:center; } |
| .feature-list li::before { content:'✓'; color:#10b981; font-weight:700; } |
|
|
| .section { padding:90px 0; } |
| .section-header { text-align:center; margin-bottom:56px; } |
| .section-header h2 { font-size:2.4rem; margin:16px 0 20px; } |
| .section-header p { color:var(--clr-text-muted); max-width:640px; margin:0 auto; font-size:1.05rem; } |
| .section-tag { |
| display:inline-flex; align-items:center; gap:8px; |
| background:var(--clr-tag-bg); color:var(--clr-tag-text); |
| padding:6px 18px; border-radius:100px; font-size:0.8rem; font-weight:700; |
| } |
|
|
| /* STAT CARDS */ |
| .stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-bottom:32px; } |
| .stat-card { background:var(--clr-surface); padding:24px; border-radius:var(--radius-lg); text-align:center; box-shadow:var(--shadow-sm); } |
| .stat-num { font-size:2.5rem; font-family:'DM Serif Display',serif; color:var(--clr-primary); } |
|
|
| /* TOAST */ |
| .toast { position:fixed; bottom:30px; right:30px; padding:16px 28px; border-radius:9999px; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:9999; font-weight:600; font-size:0.95rem; animation:slideIn .3s ease; } |
| @keyframes slideIn { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} } |
|
|
| /* ── Smart Notes ── */ |
| .sn-layout { display:flex; gap:16px; min-height:420px; } |
| .sn-sidebar { width:200px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; } |
| .sn-main { flex:1; display:flex; flex-direction:column; gap:10px; } |
| .sn-note-item { padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; background:var(--clr-surface-raised); border:1px solid var(--clr-border); font-size:0.88rem; transition:all .15s; } |
| .sn-note-item:hover,.sn-note-item.active { background:var(--clr-primary); color:#fff; border-color:var(--clr-primary); } |
| .sn-note-item .sn-note-date { font-size:0.75rem; opacity:.7; margin-top:3px; } |
| .sn-title-input { width:100%; font-size:1.1rem; font-weight:700; border:none; border-bottom:2px solid var(--clr-border); padding:8px 0; background:transparent; color:var(--clr-text); outline:none; } |
| .sn-title-input:focus { border-color:var(--clr-primary); } |
| .ql-toolbar.ql-snow { border-radius:var(--radius-sm) var(--radius-sm) 0 0; background:var(--clr-surface-raised); border-color:var(--clr-border); } |
| .ql-container.ql-snow { border-radius:0 0 var(--radius-sm) var(--radius-sm); border-color:var(--clr-border); min-height:200px; font-size:0.95rem; } |
| .sn-actions { display:flex; gap:8px; flex-wrap:wrap; } |
| .sn-btn { padding:6px 14px; border-radius:var(--radius-sm); border:1px solid var(--clr-border); background:var(--clr-surface-raised); cursor:pointer; font-size:0.82rem; color:var(--clr-text); transition:all .15s; } |
| .sn-btn:hover { background:var(--clr-primary); color:#fff; border-color:var(--clr-primary); } |
| .sn-btn.danger:hover { background:#dc2626; border-color:#dc2626; } |
| .sn-empty { text-align:center; padding:40px 20px; color:var(--clr-text-muted); } |
| @media(max-width:600px){.sn-layout{flex-direction:column;}.sn-sidebar{width:100%;flex-direction:row;overflow-x:auto;}} |
| </style> |
| </head> |
| <body> |
|
|
| |
| <nav class="nav"> |
| <div class="container nav-inner"> |
| <a href="#" class="nav-logo"> |
| <i class="fa-solid fa-baby"></i> ParentWise |
| <span id="adhdBadge" class="adhd-mode" style="display:none;"><i class="fa-solid fa-brain"></i> ADHD MODE</span> |
| </a> |
| <ul class="nav-links" id="navLinks"> |
| <li><a href="#dashboard">Dashboard</a></li> |
| <li><a href="#adhd-hub">ADHD Hub</a></li> |
| <li><a href="#trackers">Trackers</a></li> |
| <li><a href="#videos">Videos</a></li> |
| <li><a href="#modules">Modules</a></li> |
| <li><a href="#ai-advisor">Grok AI</a></li> |
| <li><a href="#pricing">Pricing</a></li> |
| </ul> |
| <a href="#pricing" class="nav-cta">Get Lifetime Access <i class="fa-solid fa-arrow-right"></i></a> |
| <button class="nav-mobile-btn" id="mobileNavBtn" aria-label="Toggle menu"><i class="fa-solid fa-bars"></i></button> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero"> |
| <div class="container"> |
| <div class="hero-grid"> |
| <div> |
| <div class="hero-badge"><i class="fa-solid fa-star"></i> 12,400+ Parents • Grok AI + ADHD Research • Built from r/ADHDparenting</div> |
| <h1>Parenting That Works for <span style="color:#EC4899;">ADHD Brains</span> — From Toddler to Adulthood</h1> |
| <p class="hero-desc">Visual schedules, emotional regulation tools, executive function trackers, sensory logs, and Grok AI that actually understands ADHD. Built from real Reddit research + top YouTube experts.</p> |
|
|
| <div class="personalize-form"> |
| <h3 style="margin-bottom:20px;"><i class="fa-solid fa-wand-magic-sparkles" style="color:var(--clr-primary);"></i> Build Your ADHD-Aware Parenting Plan</h3> |
| <div class="form-grid"> |
| <div> |
| <label class="form-label">Child's Age Stage</label> |
| <select id="childAge" class="form-select"> |
| <option value="">Select age...</option> |
| <option value="0-3">0–3 mo (Newborn)</option> |
| <option value="3-6">3–6 mo</option> |
| <option value="6-12">6–12 mo</option> |
| <option value="12-24">12–24 mo (Toddler)</option> |
| <option value="24-36">24–36 mo</option> |
| <option value="6-12y">6–12 years</option> |
| <option value="13-18">13–18 (Teen → Adult Transition)</option> |
| </select> |
| </div> |
| <div> |
| <label class="form-label">Biggest Challenge</label> |
| <select id="bigChallenge" class="form-select"> |
| <option value="">Select challenge...</option> |
| <option value="sleep">Sleep / Night Wakings</option> |
| <option value="tantrums">Emotional Dysregulation / Tantrums</option> |
| <option value="focus">Executive Function / Focus</option> |
| <option value="sensory">Sensory Needs</option> |
| <option value="potty">Potty / Routines</option> |
| <option value="adhd">ADHD-Specific (Diagnosis Confirmed)</option> |
| </select> |
| </div> |
| </div> |
| <div style="margin-top:16px;"> |
| <label style="display:flex;gap:10px;align-items:center;font-weight:600;cursor:pointer;"> |
| <input type="checkbox" id="adhdToggle" style="width:18px;height:18px;accent-color:var(--clr-primary);"> |
| This child (or parent) has ADHD |
| </label> |
| </div> |
| <button onclick="savePersonalization()" class="btn-primary" style="width:100%;margin-top:24px;justify-content:center;"> |
| <i class="fa-solid fa-rocket"></i> Generate My ADHD-Aware Roadmap |
| </button> |
| </div> |
| </div> |
|
|
| <div class="dashboard-card" id="heroPreviewCard"> |
| <h3 style="margin-bottom:20px;"><i class="fa-solid fa-chart-pie" style="color:var(--clr-primary);"></i> Your Dashboard Preview</h3> |
| <div id="heroDashboardPreview"> |
| <div style="text-align:center;padding:40px 20px;color:var(--clr-text-muted);"> |
| <i class="fa-solid fa-brain" style="font-size:3rem;color:var(--clr-primary-light);"></i> |
| <p style="margin-top:16px;">Complete the form to unlock your personalized ADHD-aware dashboard, visual schedules, regulation streaks & Grok AI insights.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="dashboard" class="section" style="background:var(--clr-bg-alt);"> |
| <div class="container"> |
| <div class="section-header"> |
| <div class="section-tag"><i class="fa-solid fa-chart-line"></i> LIVE DASHBOARD</div> |
| <h2>Your Personalized Parenting Hub</h2> |
| </div> |
| <div id="fullDashboard" class="dashboard-card"> |
| <p id="dashboardPlaceholder" style="text-align:center;padding:80px 20px;color:var(--clr-text-muted);"> |
| <i class="fa-solid fa-lock" style="font-size:2rem;display:block;margin-bottom:16px;"></i> |
| Complete the form above to unlock your full ADHD-aware dashboard. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="adhd-hub" class="section"> |
| <div class="container"> |
| <div class="section-header"> |
| <div class="section-tag"><i class="fa-solid fa-brain"></i> ADHD HUB • Research-Backed</div> |
| <h2>Executive Function Tools • Visual Schedules • Sensory Regulation</h2> |
| <p>Built from r/ADHDparenting research and YouTube experts — body doubling, gamification, and emotional regulation scripts included. Includes your built-in Smart Notes workspace.</p> |
| </div> |
| <div class="adhd-hub"> |
| |
| <div class="tracker-container"> |
| <h3 style="margin-bottom:20px;"><i class="fa-solid fa-calendar-check" style="color:var(--clr-primary);"></i> Daily Visual Schedule</h3> |
| <div id="scheduleList"></div> |
| <input id="newTask" class="form-input" placeholder="Add task (e.g. 10min movement break)" style="margin-bottom:12px;margin-top:16px;"> |
| <button onclick="addScheduleTask()" class="btn-primary" style="width:100%;justify-content:center;"> |
| <i class="fa-solid fa-plus"></i> Add to Schedule |
| </button> |
| </div> |
|
|
| |
| <div class="tracker-container focus-timer"> |
| <h3 style="margin-bottom:8px;"><i class="fa-solid fa-stopwatch" style="color:var(--clr-primary);"></i> ADHD Focus Timer</h3> |
| <p style="color:var(--clr-text-muted);font-size:0.9rem;">25 min focus + 5 min movement break</p> |
| <div id="timerDisplay" class="timer-display">25:00</div> |
| <div class="timer-btns"> |
| <button onclick="startTimer()" class="btn-primary" style="padding:12px 24px;">▶ Start</button> |
| <button onclick="pauseTimer()" class="btn-secondary">⏸ Pause</button> |
| <button onclick="resetTimer()" class="btn-danger">↺ Reset</button> |
| </div> |
| <p style="margin-top:20px;font-size:0.85rem;color:var(--clr-text-muted);">Short bursts + built-in breaks = ADHD-optimized productivity</p> |
| </div> |
|
|
| |
| <div class="tracker-container"> |
| <h3 style="margin-bottom:16px;"><i class="fa-solid fa-database" style="color:var(--clr-primary);"></i> ADHD Second Brain</h3> |
| <div style="display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;"> |
| <button onclick="switchBrainTab(0)" class="tracker-tab active" id="brainTab0">🧠 Brain Dump</button> |
| <button onclick="switchBrainTab(1)" class="tracker-tab" id="brainTab1">✅ Quick Tasks</button> |
| <button onclick="switchBrainTab(2)" class="tracker-tab" id="brainTab2">📓 Journal</button> |
| <button onclick="switchBrainTab(3)" class="tracker-tab" id="brainTab3">📝 Smart Notes</button> |
| </div> |
| <div id="brainContent"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="trackers" class="section" style="background:var(--clr-bg-alt);"> |
| <div class="container"> |
| <div class="section-header"> |
| <div class="section-tag"><i class="fa-solid fa-clipboard-list"></i> LIVE TRACKERS</div> |
| <h2>Sleep • Feeding • Regulation • Focus • Sensory</h2> |
| <p>Log everything in one place. Charts auto-update so you can spot patterns and show your pediatrician real data.</p> |
| </div> |
| <div class="tracker-container"> |
| <div style="display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;" id="trackerTabs"></div> |
| <div id="trackerView"></div> |
| <div style="height:280px;margin-top:24px;"><canvas id="trackerChart"></canvas></div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="videos" class="section"> |
| <div class="container"> |
| <div class="section-header"> |
| <div class="section-tag"><i class="fa-solid fa-play"></i> Research-Backed Videos</div> |
| <h2>ADHD Parenting + Executive Function + Emotional Regulation</h2> |
| <p>Curated from top experts — Dr. Barkley, How to ADHD, and more — so you get science you can actually use tonight.</p> |
| </div> |
| <div class="video-grid" id="videoGrid"></div> |
| </div> |
| </section> |
|
|
| |
| <section id="ai-advisor" class="section" style="background:var(--clr-bg-alt);"> |
| <div class="container"> |
| <div class="section-header"> |
| <div class="section-tag"><i class="fa-solid fa-robot"></i> Grok AI Advisor</div> |
| <h2>Ask Grok Anything About ADHD Parenting</h2> |
| <p>Get instant, research-backed scripts, strategies, and schedules — tailored to your child's age and needs.</p> |
| </div> |
| <div style="max-width:720px;margin:0 auto;background:var(--clr-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;"> |
| <div style="padding:20px;background:linear-gradient(135deg,#EC4899,#D97706);display:flex;align-items:center;gap:12px;"> |
| <i class="fa-solid fa-robot" style="color:#fff;font-size:1.5rem;"></i> |
| <span style="color:#fff;font-weight:700;font-size:1.1rem;">Grok ADHD Parenting Coach</span> |
| <span style="background:rgba(255,255,255,0.2);color:#fff;padding:4px 12px;border-radius:100px;font-size:0.75rem;margin-left:auto;">● Online</span> |
| </div> |
| <div id="chatWindow" class="chat-window"></div> |
| <div style="padding:16px;background:var(--clr-surface-raised);display:flex;gap:12px;"> |
| <input id="chatInput" type="text" class="form-input" placeholder="E.g. 'ADHD tantrum script for 7yo' or 'executive function routine for teen'" style="flex:1;" onkeydown="if(event.key==='Enter')sendToGrok()"> |
| <button onclick="sendToGrok()" class="btn-primary" style="padding:0 28px;white-space:nowrap;">Ask Grok <i class="fa-solid fa-paper-plane"></i></button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="modules" class="section"> |
| <div class="container"> |
| <div class="section-header"> |
| <div class="section-tag"><i class="fa-solid fa-book-open"></i> Curriculum</div> |
| <h2>ADHD-Aware Modules — From Birth to Adulthood</h2> |
| <p>Sequential learning path covering newborn basics through teen ADHD transition — all in one lifetime access.</p> |
| </div> |
| <div id="modulesContainer"></div> |
| </div> |
| </section> |
|
|
| |
| <section id="pricing" class="section" style="background:var(--clr-bg-alt);"> |
| <div class="container"> |
| <div class="section-header"> |
| <div class="section-tag"><i class="fa-solid fa-tag"></i> Pricing</div> |
| <h2>Lifetime Access • Full ADHD Hub Included</h2> |
| <p>One-time payment. No subscriptions. Every update free forever.</p> |
| </div> |
| <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:1000px;margin:0 auto;"> |
|
|
| <div class="pricing-card"> |
| <h3>Starter</h3> |
| <div class="price">$29</div> |
| <div class="price-sub">One-time payment</div> |
| <ul class="feature-list"> |
| <li>Visual Schedule Builder</li> |
| <li>Sleep + Feeding Tracker</li> |
| <li>5 Core Modules</li> |
| <li>Video Library (5 videos)</li> |
| </ul> |
| <button onclick="handlePurchase('Starter',29)" class="btn-primary" style="width:100%;justify-content:center;">Get Starter</button> |
| </div> |
|
|
| <div class="pricing-card" style="border:3px solid var(--clr-primary);position:relative;"> |
| <div style="position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--clr-primary);color:#fff;padding:5px 24px;border-radius:100px;font-size:0.8rem;font-weight:700;white-space:nowrap;">⭐ MOST POPULAR</div> |
| <h3>Complete + ADHD Hub</h3> |
| <div class="price">$97</div> |
| <div class="price-sub">One-time • Lifetime updates</div> |
| <ul class="feature-list"> |
| <li>Everything in Starter</li> |
| <li>Full ADHD Hub (Schedule + Timer + Brain)</li> |
| <li>Grok AI Advisor (unlimited)</li> |
| <li>All 5 Trackers + Charts</li> |
| <li>All 5 Modules + ADHD modules</li> |
| <li>Emotion Regulation Scripts</li> |
| <li>Lifespan ADHD: Teen → Adult</li> |
| </ul> |
| <button onclick="handlePurchase('Complete',97)" class="btn-primary" style="width:100%;justify-content:center;">Get Full Access</button> |
| </div> |
|
|
| <div class="pricing-card"> |
| <h3>Premium + Coaching</h3> |
| <div class="price">$197</div> |
| <div class="price-sub">One-time • Includes community</div> |
| <ul class="feature-list"> |
| <li>Everything in Complete</li> |
| <li>Private Community Access</li> |
| <li>Monthly Group Q&A</li> |
| <li>Printable Visual Schedule PDF</li> |
| <li>Built-in Smart Notes & Parenting Journal (Notion-style)</li> |
| <li>Priority Grok AI access</li> |
| </ul> |
| <button onclick="handlePurchase('Premium',197)" class="btn-primary" style="width:100%;justify-content:center;">Unlock Everything</button> |
| </div> |
| </div> |
| <p style="text-align:center;margin-top:40px;color:var(--clr-text-muted);">30-day satisfaction guarantee • Used by 12,400+ parents worldwide</p> |
| </div> |
| </section> |
|
|
| |
| <footer style="background:var(--clr-footer-bg);color:var(--clr-footer-text);padding:60px 0 40px;text-align:center;"> |
| <div class="container"> |
| <div style="font-family:'DM Serif Display',serif;font-size:1.5rem;color:var(--clr-footer-heading);margin-bottom:16px;">ParentWise</div> |
| <p>Built from real Reddit r/ADHDparenting insights, YouTube experts & Grok AI</p> |
| <p style="margin-top:8px;">❤️ Designed for every neurotype — ADHD, neurotypical, and everything in between</p> |
| <p style="margin-top:24px;font-size:0.85rem;">© 2026 ParentWise • T. Lott Creative</p> |
| </div> |
| </footer> |
|
|
| <script> |
| // ============================================================ |
| // STATE |
| // ============================================================ |
| let userProfile = JSON.parse(localStorage.getItem('pwProfile')) || {}; |
| let trackersData = JSON.parse(localStorage.getItem('pwTrackers')) || { sleep:[], feeding:[], regulation:[], focus:[], sensory:[] }; |
| let scheduleTasks = JSON.parse(localStorage.getItem('pwSchedule')) || []; |
| let brainData = JSON.parse(localStorage.getItem('pwBrain')) || { dump:[], tasks:[], journal:[] }; |
| let timerInterval = null; |
| let timerSeconds = 1500; |
| let timerMode = 'focus'; |
| let currentTrackerIndex = 0; |
| let currentBrainTab = 0; |
| let chartInstance = null; |
| |
| // ============================================================ |
| // DARK MODE + MOBILE NAV |
| // ============================================================ |
| if (window.matchMedia('(prefers-color-scheme: dark)').matches) { |
| document.documentElement.classList.add('dark'); |
| } |
| |
| document.getElementById('mobileNavBtn').addEventListener('click', () => { |
| const links = document.getElementById('navLinks'); |
| links.classList.toggle('open'); |
| const icon = document.querySelector('#mobileNavBtn i'); |
| icon.className = links.classList.contains('open') ? 'fa-solid fa-xmark' : 'fa-solid fa-bars'; |
| }); |
| |
| // ============================================================ |
| // PERSONALIZATION |
| // ============================================================ |
| function savePersonalization() { |
| const age = document.getElementById('childAge').value; |
| const challenge = document.getElementById('bigChallenge').value; |
| const isADHD = document.getElementById('adhdToggle').checked; |
| if (!age || !challenge) { showToast('Please select both age and challenge ⚠️', 'warn'); return; } |
| |
| userProfile = { age, challenge, isADHD, saved: new Date().toISOString() }; |
| localStorage.setItem('pwProfile', JSON.stringify(userProfile)); |
| |
| if (isADHD) document.getElementById('adhdBadge').style.display = 'inline-flex'; |
| renderHeroPreview(); |
| renderDashboard(); |
| showToast('🚀 Your ADHD-aware plan is ready!', 'success'); |
| document.getElementById('dashboard').scrollIntoView({ behavior:'smooth' }); |
| } |
| |
| function renderHeroPreview() { |
| if (!userProfile.age) return; |
| const adhdTag = userProfile.isADHD ? '<span class="adhd-mode" style="font-size:0.75rem;">ADHD MODE</span>' : ''; |
| document.getElementById('heroDashboardPreview').innerHTML = ` |
| <div style="background:var(--clr-surface);padding:24px;border-radius:16px;margin-bottom:16px;"> |
| <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;"> |
| <strong>Child Age:</strong> <span>${userProfile.age} ${adhdTag}</span> |
| </div> |
| <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;"> |
| <strong>Focus Area:</strong> <span>${userProfile.challenge}</span> |
| </div> |
| <div style="color:#10b981;margin-top:16px;font-weight:600;"> |
| ✅ Visual schedule ready<br> |
| ✅ Regulation tracker active<br> |
| ✅ Grok ADHD prompts loaded |
| </div> |
| </div> |
| <div class="stat-grid" style="margin-top:0;"> |
| <div class="stat-card"><div class="stat-num">4🔥</div><small>Focus Streak</small></div> |
| <div class="stat-card"><div class="stat-num" style="color:#10b981;">82%</div><small>Regulation Score</small></div> |
| <div class="stat-card"><div class="stat-num">18m</div><small>Next Break</small></div> |
| </div>`; |
| } |
| |
| function renderDashboard() { |
| if (!userProfile.age) return; |
| const el = document.getElementById('fullDashboard'); |
| document.getElementById('dashboardPlaceholder').style.display = 'none'; |
| const adhdNote = userProfile.isADHD ? ` |
| <div style="background:linear-gradient(135deg,#EC4899,#D97706);color:#fff;padding:20px;border-radius:16px;margin-bottom:24px;"> |
| <strong>🧠 ADHD Mode Active</strong> — Visual schedules, regulation scripts, executive function tools, and body-doubling strategies are all enabled. Grok AI is pre-loaded with ADHD-specific prompts. |
| </div>` : ''; |
| |
| el.innerHTML = ` |
| ${adhdNote} |
| <h3 style="margin-bottom:24px;">Today's Snapshot — ${new Date().toLocaleDateString('en-US', {weekday:'long', month:'long', day:'numeric'})}</h3> |
| <div class="stat-grid"> |
| <div class="stat-card"><div class="stat-num">4🔥</div><small>Focus Streak</small></div> |
| <div class="stat-card"><div class="stat-num" style="color:#10b981;">82%</div><small>Regulation Score</small></div> |
| <div class="stat-card"><div class="stat-num">${trackersData.sleep.length}</div><small>Sleep Logs</small></div> |
| <div class="stat-card"><div class="stat-num">${trackersData.focus.length}</div><small>Focus Sessions</small></div> |
| </div> |
| <div style="background:var(--clr-success-bg);border:1px solid #10b981;padding:20px;border-radius:16px;margin-top:24px;"> |
| <strong style="color:#059669;">💡 Today's ADHD Tip:</strong> Use the 5-4-3-2-1 grounding technique before starting a focus session. 5 things you see, 4 you feel, 3 you hear, 2 you smell, 1 you taste. Activates the prefrontal cortex. |
| </div>`; |
| } |
| |
| // ============================================================ |
| // VISUAL SCHEDULE |
| // ============================================================ |
| function addScheduleTask() { |
| const input = document.getElementById('newTask'); |
| if (!input.value.trim()) return; |
| scheduleTasks.unshift({ text: input.value.trim(), completed: false, time: new Date().toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) }); |
| localStorage.setItem('pwSchedule', JSON.stringify(scheduleTasks)); |
| input.value = ''; |
| renderSchedule(); |
| showToast('Task added to schedule!', 'success'); |
| } |
| |
| function renderSchedule() { |
| document.getElementById('scheduleList').innerHTML = scheduleTasks.length |
| ? scheduleTasks.map((t,i) => ` |
| <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--clr-border);"> |
| <label style="display:flex;gap:12px;align-items:center;flex:1;cursor:pointer;"> |
| <input type="checkbox" ${t.completed?'checked':''} onchange="toggleSchedule(${i})" style="width:18px;height:18px;accent-color:var(--clr-primary);"> |
| <span style="${t.completed?'text-decoration:line-through;opacity:0.5':''}">${t.text}</span> |
| </label> |
| <small style="color:var(--clr-text-muted);margin-left:12px;">${t.time}</small> |
| </div>`).join('') |
| : '<p style="color:var(--clr-text-muted);padding:16px 0;">No tasks yet — add your first schedule item above!</p>'; |
| } |
| |
| function toggleSchedule(i) { |
| scheduleTasks[i].completed = !scheduleTasks[i].completed; |
| localStorage.setItem('pwSchedule', JSON.stringify(scheduleTasks)); |
| renderSchedule(); |
| } |
| |
| // ============================================================ |
| // FOCUS TIMER |
| // ============================================================ |
| function startTimer() { |
| if (timerInterval) return; |
| timerInterval = setInterval(() => { |
| timerSeconds--; |
| const m = Math.floor(timerSeconds / 60); |
| const s = timerSeconds % 60; |
| document.getElementById('timerDisplay').textContent = `${m}:${s < 10 ? '0' : ''}${s}`; |
| if (timerSeconds <= 0) { |
| clearInterval(timerInterval); timerInterval = null; |
| if (timerMode === 'focus') { |
| showToast('🎉 Focus done! Time for a 5-min movement break!', 'success'); |
| timerSeconds = 300; timerMode = 'break'; |
| document.getElementById('timerDisplay').textContent = '05:00'; |
| } else { |
| showToast('Movement break done! Ready for another focus session?', 'success'); |
| timerSeconds = 1500; timerMode = 'focus'; |
| document.getElementById('timerDisplay').textContent = '25:00'; |
| } |
| } |
| }, 1000); |
| } |
| function pauseTimer() { clearInterval(timerInterval); timerInterval = null; } |
| function resetTimer() { clearInterval(timerInterval); timerInterval = null; timerSeconds = 1500; timerMode = 'focus'; document.getElementById('timerDisplay').textContent = '25:00'; } |
| |
| // ============================================================ |
| // ADHD SECOND BRAIN |
| // ============================================================ |
| // ============================================================ |
| // SMART NOTES (Notion-like) |
| // ============================================================ |
| let smartNotes = JSON.parse(localStorage.getItem('pwSmartNotes')) || []; |
| let currentNoteId = null; |
| let quillInstances = {}; |
| let snSaveTimer = null; |
| |
| function snGenerateId() { |
| return 'note_' + Date.now() + '_' + Math.random().toString(36).substr(2,5); |
| } |
| |
| function snSaveNotes() { |
| localStorage.setItem('pwSmartNotes', JSON.stringify(smartNotes)); |
| } |
| |
| function snCreateNote(category='General') { |
| const note = { |
| id: snGenerateId(), |
| title: 'Untitled Note', |
| category, |
| content: '', |
| delta: null, |
| created: new Date().toLocaleDateString(), |
| updated: new Date().toLocaleString() |
| }; |
| smartNotes.unshift(note); |
| snSaveNotes(); |
| renderSmartNotes(); |
| snOpenNote(note.id); |
| } |
| |
| function snDeleteNote(id) { |
| smartNotes = smartNotes.filter(n => n.id !== id); |
| snSaveNotes(); |
| currentNoteId = null; |
| renderSmartNotes(); |
| renderSnEditor(); |
| } |
| |
| function snOpenNote(id) { |
| currentNoteId = id; |
| renderSmartNotes(); |
| renderSnEditor(); |
| } |
| |
| function snAutoSave() { |
| if (!currentNoteId) return; |
| const q = quillInstances['snQuill']; |
| if (!q) return; |
| const note = smartNotes.find(n => n.id === currentNoteId); |
| if (!note) return; |
| const titleEl = document.getElementById('snTitleInput'); |
| if (titleEl) note.title = titleEl.value || 'Untitled Note'; |
| note.delta = JSON.stringify(q.getContents()); |
| note.content = q.getText().trim().substring(0, 120); |
| note.updated = new Date().toLocaleString(); |
| snSaveNotes(); |
| renderSnSidebar(); |
| } |
| |
| function renderSnSidebar() { |
| const el = document.getElementById('snSidebar'); |
| if (!el) return; |
| if (smartNotes.length === 0) { |
| el.innerHTML = '<p style="color:var(--clr-text-muted);font-size:0.85rem;padding:8px;">No notes yet. Click + New Note.</p>'; |
| return; |
| } |
| el.innerHTML = smartNotes.map(n => ` |
| <div class="sn-note-item ${n.id===currentNoteId?'active':''}" onclick="snOpenNote('${n.id}')"> |
| <div style="font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${n.title}</div> |
| <div class="sn-note-date">${n.updated}</div> |
| </div>`).join(''); |
| } |
| |
| function renderSnEditor() { |
| const el = document.getElementById('snEditor'); |
| if (!el) return; |
| const note = smartNotes.find(n => n.id === currentNoteId); |
| if (!note) { |
| el.innerHTML = '<div class="sn-empty"><i class="fa-solid fa-file-pen" style="font-size:2rem;margin-bottom:12px;display:block;"></i><p>Select a note or create a new one</p></div>'; |
| return; |
| } |
| el.innerHTML = ` |
| <div class="sn-actions" style="margin-bottom:10px;"> |
| <button class="sn-btn" onclick="snExportNote()"><i class="fa-solid fa-copy"></i> Copy Text</button> |
| <button class="sn-btn danger" onclick="snDeleteNote('${note.id}')"><i class="fa-solid fa-trash"></i> Delete</button> |
| <span style="margin-left:auto;font-size:0.78rem;color:var(--clr-text-muted);align-self:center;">Auto-saved ✓</span> |
| </div> |
| <input id="snTitleInput" class="sn-title-input" value="${note.title}" placeholder="Note title…" oninput="snScheduleSave()"> |
| <div id="snQuillEditor" style="margin-top:10px;"></div>`; |
| |
| // Init Quill |
| const q = new Quill('#snQuillEditor', { |
| theme: 'snow', |
| placeholder: 'Start writing… use headings, bullets, checklists ✓', |
| modules: { |
| toolbar: [ |
| [{ header: [1, 2, 3, false] }], |
| ['bold', 'italic', 'underline'], |
| [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }], |
| ['blockquote', 'code-block'], |
| ['clean'] |
| ] |
| } |
| }); |
| quillInstances['snQuill'] = q; |
| |
| // Load saved content |
| if (note.delta) { |
| try { q.setContents(JSON.parse(note.delta)); } catch(e) {} |
| } |
| |
| // Autosave on change |
| q.on('text-change', () => { |
| clearTimeout(snSaveTimer); |
| snSaveTimer = setTimeout(snAutoSave, 400); |
| }); |
| } |
| |
| function renderSmartNotes() { |
| renderSnSidebar(); |
| } |
| |
| function snScheduleSave() { |
| clearTimeout(snSaveTimer); |
| snSaveTimer = setTimeout(snAutoSave, 400); |
| } |
| |
| function snExportNote() { |
| const q = quillInstances['snQuill']; |
| if (!q) return; |
| const text = q.getText().trim(); |
| navigator.clipboard.writeText(text).then(() => showToast('Note copied to clipboard!', 'success')); |
| } |
| |
| function initSmartNotes() { |
| const c = document.getElementById('brainContent'); |
| const categories = ['General', 'Sleep Notes', 'Feeding Log', 'Milestone Notes', 'Dr. Questions', 'ADHD Tips']; |
| c.innerHTML = ` |
| <div class="sn-actions" style="margin-bottom:12px;"> |
| <button class="sn-btn" onclick="snCreateNote('General')" style="background:var(--clr-primary);color:#fff;border-color:var(--clr-primary);"><i class="fa-solid fa-plus"></i> New Note</button> |
| <span style="font-size:0.82rem;color:var(--clr-text-muted);align-self:center;">Quick:</span> |
| ${categories.slice(1).map(cat => `<button class="sn-btn" onclick="snCreateNote('${cat}')" title="New ${cat} note"><i class="fa-solid fa-tag"></i> ${cat}</button>`).join('')} |
| </div> |
| <div class="sn-layout"> |
| <div class="sn-sidebar" id="snSidebar"></div> |
| <div class="sn-main" id="snEditor"><div class="sn-empty"><i class="fa-solid fa-file-pen" style="font-size:2rem;margin-bottom:12px;display:block;"></i><p>Select a note or create a new one</p></div></div> |
| </div>`; |
| renderSnSidebar(); |
| if (smartNotes.length > 0 && !currentNoteId) { |
| snOpenNote(smartNotes[0].id); |
| } else if (currentNoteId) { |
| snOpenNote(currentNoteId); |
| } |
| } |
| |
| // ============================================================ |
| // BRAIN TABS (upgraded) |
| // ============================================================ |
| function switchBrainTab(n) { |
| currentBrainTab = n; |
| ['brainTab0','brainTab1','brainTab2','brainTab3'].forEach((id,i) => { |
| const el = document.getElementById(id); |
| if (el) el.classList.toggle('active', i===n); |
| }); |
| const c = document.getElementById('brainContent'); |
| if (n===0) { |
| c.innerHTML = ` |
| <div id="dumpQuillEditor" style="min-height:120px;"></div> |
| <div style="display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;"> |
| <button onclick="saveDump()" class="btn-primary">Save Dump <i class="fa-solid fa-bolt"></i></button> |
| <button onclick="clearDumpEditor()" class="sn-btn">Clear</button> |
| </div> |
| <div id="dumpList" style="margin-top:16px;max-height:180px;overflow:auto;"></div>`; |
| const dq = new Quill('#dumpQuillEditor', { |
| theme: 'snow', |
| placeholder: 'Brain dump anything right now — no filters...', |
| modules: { toolbar: [['bold','italic'],[{ list:'bullet'}],['clean']] } |
| }); |
| quillInstances['dump'] = dq; |
| renderBrainDump(); |
| } else if (n===1) { |
| c.innerHTML = `<input id="taskInput" class="form-input" placeholder="Add a task — e.g. 'Call pediatrician'" style="margin-bottom:8px;"> |
| <button onclick="addQuickTask()" class="btn-primary" style="margin-bottom:16px;">+ Add Task</button> |
| <div id="taskList"></div>`; |
| renderQuickTasks(); |
| } else if (n===2) { |
| c.innerHTML = ` |
| <div id="journalQuillEditor" style="min-height:160px;"></div> |
| <div style="display:flex;gap:8px;margin-top:8px;align-items:center;"> |
| <button onclick="saveJournal()" class="btn-primary">Save Entry <i class="fa-solid fa-book-open"></i></button> |
| <span style="font-size:0.82rem;color:var(--clr-text-muted);">${brainData.journal.length} entries saved</span> |
| </div> |
| <div id="journalList" style="margin-top:16px;max-height:180px;overflow:auto;"></div>`; |
| const jq = new Quill('#journalQuillEditor', { |
| theme: 'snow', |
| placeholder: 'How did regulation go today? What worked? What was hard?', |
| modules: { toolbar: [['bold','italic'],[{ list:'bullet'}],['blockquote'],['clean']] } |
| }); |
| quillInstances['journal'] = jq; |
| renderJournalList(); |
| } else if (n===3) { |
| initSmartNotes(); |
| } |
| } |
| |
| function clearDumpEditor() { |
| const q = quillInstances['dump']; |
| if (q) q.setText(''); |
| } |
| |
| function saveDump() { |
| const q = quillInstances['dump']; |
| const v = q ? q.getText().trim() : ''; |
| if (!v) return; |
| brainData.dump.unshift({ text: v, html: q.root.innerHTML, time: new Date().toLocaleString() }); |
| localStorage.setItem('pwBrain', JSON.stringify(brainData)); |
| q.setText(''); |
| renderBrainDump(); |
| showToast('Brain dump saved!', 'success'); |
| } |
| |
| function renderBrainDump() { |
| const el = document.getElementById('dumpList'); |
| if (!el) return; |
| el.innerHTML = brainData.dump.map((item,i) => ` |
| <div class="log-entry"><span>${item.text.substring(0,80)}${item.text.length>80?'…':''} <small style="color:var(--clr-text-muted)">${item.time}</small></span><button onclick="brainData.dump.splice(${i},1);localStorage.setItem('pwBrain',JSON.stringify(brainData));renderBrainDump()">×</button></div>`).join('') || '<p style="color:var(--clr-text-muted);font-size:0.9rem;">No entries yet.</p>'; |
| } |
| |
| function renderJournalList() { |
| const el = document.getElementById('journalList'); |
| if (!el) return; |
| el.innerHTML = brainData.journal.map((item,i) => ` |
| <div class="log-entry"><span>📓 ${item.date} — ${(item.entry||'').substring(0,60)}${(item.entry||'').length>60?'…':''}</span><button onclick="brainData.journal.splice(${i},1);localStorage.setItem('pwBrain',JSON.stringify(brainData));renderJournalList()">×</button></div>`).join('') || '<p style="color:var(--clr-text-muted);font-size:0.9rem;">No journal entries yet.</p>'; |
| } |
| |
| function saveJournal() { |
| const q = quillInstances['journal']; |
| const v = q ? q.getText().trim() : ''; |
| if (!v) return; |
| brainData.journal.unshift({ entry: v, html: q.root.innerHTML, date: new Date().toLocaleDateString() }); |
| localStorage.setItem('pwBrain', JSON.stringify(brainData)); |
| q.setText(''); |
| renderJournalList(); |
| const countEl = document.querySelector('#brainContent span[style*="text-muted"]'); |
| if (countEl) countEl.textContent = brainData.journal.length + ' entries saved'; |
| showToast('Journal entry saved! 📓', 'success'); |
| } |
| |
| |
| function addQuickTask() { |
| const input = document.getElementById('taskInput'); |
| if (!input.value) return; |
| brainData.tasks.unshift({ text: input.value, points:10, done:false }); |
| localStorage.setItem('pwBrain', JSON.stringify(brainData)); |
| input.value = ''; |
| renderQuickTasks(); |
| showToast('+10 dopamine points! 🎉', 'success'); |
| } |
| function renderQuickTasks() { |
| const el = document.getElementById('quickList'); |
| if (!el) return; |
| el.innerHTML = brainData.tasks.map((t,i) => ` |
| <div class="log-entry"> |
| <label style="display:flex;gap:8px;align-items:center;cursor:pointer;"> |
| <input type="checkbox" ${t.done?'checked':''} onchange="brainData.tasks[${i}].done=!brainData.tasks[${i}].done;localStorage.setItem('pwBrain',JSON.stringify(brainData));renderQuickTasks()" style="accent-color:var(--clr-primary);"> |
| <span style="${t.done?'text-decoration:line-through;opacity:0.5':''}">${t.text}</span> |
| </label> |
| <span style="color:#10b981;font-weight:700;">+${t.points}</span> |
| </div>`).join('') || '<p style="color:var(--clr-text-muted);font-size:0.9rem;">No tasks yet.</p>'; |
| } |
| |
| // ============================================================ |
| // TRACKERS |
| // ============================================================ |
| const trackerTypes = [ |
| { key:'sleep', name:'Sleep Log', icon:'🌙', inputType:'text', placeholder:'e.g. Slept 7.5 hrs, woke once at 3am' }, |
| { key:'feeding', name:'Feeding', icon:'🍎', inputType:'text', placeholder:'e.g. 8oz formula, 6:30am' }, |
| { key:'regulation', name:'ADHD Regulation', icon:'🧘', inputType:'number', placeholder:'Mood score 1-10', min:1, max:10 }, |
| { key:'focus', name:'Focus Time', icon:'⏳', inputType:'number', placeholder:'Minutes focused', min:1 }, |
| { key:'sensory', name:'Sensory Needs', icon:'🌈', inputType:'select', options:['Heavy work (jumping)', 'Noise-cancelling headphones', 'Fidget toy', 'Weighted blanket', 'Cold water on wrists', 'Chewing gum'] } |
| ]; |
| |
| function renderTrackerTabs() { |
| document.getElementById('trackerTabs').innerHTML = trackerTypes.map((t,i) => ` |
| <button onclick="switchTracker(${i})" class="tracker-tab ${i===currentTrackerIndex?'active':''}">${t.icon} ${t.name}</button>`).join(''); |
| } |
| function switchTracker(n) { currentTrackerIndex = n; renderTrackerTabs(); renderTrackerView(); } |
| |
| function renderTrackerView() { |
| const t = trackerTypes[currentTrackerIndex]; |
| const data = trackersData[t.key] || []; |
| let inputHtml = ''; |
| |
| if (t.inputType === 'select') { |
| inputHtml = `<select id="trackerInput" class="form-select" style="margin-bottom:12px;">${t.options.map(o=>`<option>${o}</option>`).join('')}</select>`; |
| } else { |
| inputHtml = `<input id="trackerInput" type="${t.inputType}" class="form-input" placeholder="${t.placeholder}" ${t.min?`min="${t.min}"`:''} ${t.max?`max="${t.max}"`:''} style="margin-bottom:12px;">`; |
| } |
| |
| document.getElementById('trackerView').innerHTML = ` |
| <h3 style="margin-bottom:20px;">${t.icon} ${t.name}</h3> |
| ${inputHtml} |
| <button onclick="logTracker('${t.key}')" class="btn-primary" style="width:100%;justify-content:center;margin-bottom:20px;"> |
| <i class="fa-solid fa-plus"></i> Log ${t.name} |
| </button> |
| <div style="max-height:220px;overflow:auto;"> |
| ${data.map((e,i) => `<div class="log-entry"><span>${JSON.stringify(e).replace(/[{}"]/g,'').substring(0,80)}</span><button onclick="deleteLog('${t.key}',${i})">×</button></div>`).join('') || '<p style="color:var(--clr-text-muted);">No entries yet — start logging above!</p>'} |
| </div>`; |
| updateChart(t.key, data); |
| } |
| |
| function logTracker(key) { |
| const input = document.getElementById('trackerInput'); |
| const val = input.value || input.options?.[input.selectedIndex]?.value; |
| if (!val) return; |
| if (!trackersData[key]) trackersData[key] = []; |
| const entry = { value: val, time: new Date().toLocaleString() }; |
| trackersData[key].unshift(entry); |
| localStorage.setItem('pwTrackers', JSON.stringify(trackersData)); |
| if (input.type !== 'select-one') input.value = ''; |
| renderTrackerView(); |
| showToast(`${trackerTypes[currentTrackerIndex].icon} ${trackerTypes[currentTrackerIndex].name} logged!`, 'success'); |
| } |
| function deleteLog(key, i) { |
| trackersData[key].splice(i,1); |
| localStorage.setItem('pwTrackers', JSON.stringify(trackersData)); |
| renderTrackerView(); |
| } |
| |
| function updateChart(key, data) { |
| const ctx = document.getElementById('trackerChart').getContext('2d'); |
| if (chartInstance) chartInstance.destroy(); |
| const recent = data.slice(0,10).reverse(); |
| const labels = recent.map(e => (e.time||'').split(',')[0] || 'Log'); |
| const values = recent.map(e => parseFloat(e.value) || 1); |
| chartInstance = new Chart(ctx, { |
| type: 'line', |
| data: { |
| labels: labels.length ? labels : ['No data yet'], |
| datasets: [{ |
| label: key.toUpperCase(), |
| data: values.length ? values : [0], |
| borderColor: '#D97706', |
| backgroundColor: 'rgba(217,119,6,0.08)', |
| tension: 0.4, |
| fill: true, |
| pointBackgroundColor: '#D97706' |
| }] |
| }, |
| options: { responsive:true, maintainAspectRatio:false, plugins:{legend:{display:false}}, scales:{y:{beginAtZero:true}} } |
| }); |
| } |
| |
| // ============================================================ |
| // GROK AI CHAT |
| // ============================================================ |
| let chatHistory = []; |
| const adhdResponses = { |
| tantrum: "Use the CALM method:\n✅ Check yourself (regulate first)\n✅ Acknowledge & Label ('I see you're really angry')\n✅ Listen & Limit (validate, then set boundary)\n✅ Move forward (don't re-litigate after calm)\n\nScript: 'I see you're really angry. It's okay to feel big feelings. I'm here with you. When you're ready, we can talk.'", |
| schedule: "ADHD brains love visual schedules + timers. Try:\n• Use images, not just words (for younger kids)\n• Add 5-min warning before transitions\n• Body-doubling: do tasks side-by-side\n• Gamify with points system\n• Keep schedule in same visible spot daily", |
| teen: "For teens transitioning to adulthood:\n• Start medication continuity discussions at 16\n• Externalize executive function with your ParentWise Smart Notes, alarms & reminders\n• Teach body doubling as a lifelong skill\n• Involve them in IEP/504 meetings by age 14\n• Discuss ADHD openly — self-awareness = superpower", |
| focus: "Executive function strategies that work:\n• Break tasks into 3-step chunks max\n• Use visual timers (Time Timer app)\n• 'First-Then' boards for transitions\n• Remove decision fatigue: lay out clothes night before\n• Reward effort, not outcomes", |
| sensory: "Sensory regulation toolkit:\n• Proprioceptive input: jumping, push-ups, carrying heavy things\n• Vestibular: swinging, rocking chair\n• Tactile: fidgets, playdough, chewing gum\n• Auditory: white noise, noise-cancelling headphones\n• Create a calm-down corner with sensory tools", |
| sleep: "ADHD sleep strategies:\n• Consistent bedtime ± 30 min (non-negotiable)\n• Blue light cutoff 90 min before bed\n• Weighted blanket (20-30% body weight)\n• White noise machine\n• Melatonin 30-60 min before bed (consult pediatrician)\n• Cool room temperature (65-68°F optimal)" |
| }; |
| |
| function sendToGrok() { |
| const input = document.getElementById('chatInput'); |
| const query = input.value.trim(); |
| if (!query) return; |
| chatHistory.push({ role:'user', content: query }); |
| renderChat(); |
| input.value = ''; |
| |
| setTimeout(() => { |
| const q = query.toLowerCase(); |
| let response = "Great question! Based on r/ADHDparenting research and ADHD expert consensus:\n\nThe most effective strategy here is to start with co-regulation — your child's nervous system mirrors yours. When you're calm, they can become calm. Try the 4-7-8 breath together first, then address the specific challenge.\n\nWant me to create a custom script for your specific situation?"; |
| if (q.match(/tantrum|emotion|meltdown|dysreg|angry|rage/)) response = adhdResponses.tantrum; |
| else if (q.match(/schedule|routine|transition|morning|bedtime/)) response = adhdResponses.schedule; |
| else if (q.match(/teen|adult|college|transition|high school/)) response = adhdResponses.teen; |
| else if (q.match(/focus|executive|attention|distract|concentrate/)) response = adhdResponses.focus; |
| else if (q.match(/sensory|sensitive|overwhelm|noise|touch/)) response = adhdResponses.sensory; |
| else if (q.match(/sleep|night|bedtime|wake|insomnia/)) response = adhdResponses.sleep; |
| |
| chatHistory.push({ role:'assistant', content: response }); |
| renderChat(); |
| }, 800); |
| } |
| |
| function renderChat() { |
| const win = document.getElementById('chatWindow'); |
| win.innerHTML = chatHistory.map(m => ` |
| <div class="chat-message ${m.role==='user'?'chat-user':'chat-ai'}"> |
| <strong>${m.role==='user'?'You':'🧠 Grok AI'}</strong><br> |
| ${m.content.replace(/\n/g,'<br>')} |
| </div>`).join(''); |
| win.scrollTop = win.scrollHeight; |
| } |
| |
| // ============================================================ |
| // MODULES |
| // ============================================================ |
| function renderModules() { |
| const modules = [ |
| { title:'Phase 1: Newborn Essentials (0–6 mo)', prog:80, adhd:false, desc:'Safe sleep, feeding cues, developmental milestones, postpartum support' }, |
| { title:'Phase 2: Toddler Foundations (6 mo–3 yr)', prog:65, adhd:false, desc:'Language, motor skills, attachment, early behavior management' }, |
| { title:'ADHD Executive Function Foundations', prog:45, adhd:true, desc:'Working memory, planning, impulse control — practical strategies from Dr. Barkley' }, |
| { title:'Emotional Regulation & CALM Method', prog:30, adhd:true, desc:'Co-regulation, meltdown prevention, sensory strategies, body doubling' }, |
| { title:'Lifespan ADHD: Teen → Adulthood Transition', prog:10, adhd:true, desc:'Medication continuity, college planning, executive function independence, self-advocacy' } |
| ]; |
| document.getElementById('modulesContainer').innerHTML = modules.map((m,i) => ` |
| <div class="module-card"> |
| <div style="padding:24px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;"> |
| <div style="flex:1;"> |
| <h3>${m.title} ${m.adhd?'<span class="adhd-mode" style="font-size:0.7rem;">ADHD</span>':''}</h3> |
| <p style="color:var(--clr-text-muted);font-size:0.9rem;margin-top:6px;">${m.desc}</p> |
| </div> |
| <div style="min-width:200px;text-align:right;"> |
| <div style="margin-bottom:8px;font-weight:700;color:var(--clr-primary);">${m.prog}% Complete</div> |
| <div class="progress-bar" style="width:200px;margin-left:auto;"><div class="progress-fill" style="width:${m.prog}%"></div></div> |
| </div> |
| </div> |
| </div>`).join(''); |
| } |
| |
| // ============================================================ |
| // VIDEOS |
| // ============================================================ |
| function renderVideos() { |
| const videos = [ |
| { title:"Why Kids With ADHD Need Different Parenting (Dr. Barkley)", url:"https://www.youtube.com/embed/ktb520seHYk" }, |
| { title:"How to Handle Emotional Dysregulation in ADHD Kids", url:"https://www.youtube.com/embed/aiZmQldQEUk" }, |
| { title:"Executive Function Strategies for ADHD (Practical)", url:"https://www.youtube.com/embed/Bco_kwkNVLs" }, |
| { title:"Ms Rachel – First Words & Language Development", url:"https://www.youtube.com/embed/hTqtGJwsJVE" }, |
| { title:"Safe Sleep + Sensory Strategies for Babies", url:"https://www.youtube.com/embed/ETTYrswlWyY" } |
| ]; |
| document.getElementById('videoGrid').innerHTML = videos.map(v => ` |
| <div class="video-card"> |
| <iframe src="${v.url}" allowfullscreen loading="lazy"></iframe> |
| <div style="padding:20px;"><h4>${v.title}</h4></div> |
| </div>`).join(''); |
| } |
| |
| // ============================================================ |
| // PURCHASE |
| // ============================================================ |
| function handlePurchase(plan, price) { |
| window.open('https://tlott12.gumroad.com/l/parentwise', '_blank'); |
| showToast(`Redirecting to secure checkout for ${plan} ($${price})...`, 'success'); |
| } |
| |
| // ============================================================ |
| // TOAST |
| // ============================================================ |
| function showToast(msg, type='success') { |
| const colors = { success:'#10b981', warn:'#f59e0b', error:'#dc2626' }; |
| const t = document.createElement('div'); |
| t.className = 'toast'; |
| t.style.background = colors[type] || colors.success; |
| t.textContent = msg; |
| document.body.appendChild(t); |
| setTimeout(() => { t.style.opacity='0'; t.style.transition='opacity .3s'; setTimeout(()=>t.remove(),300); }, 4000); |
| } |
| |
| // ============================================================ |
| // INIT |
| // ============================================================ |
| window.addEventListener('load', () => { |
| if (window.matchMedia('(prefers-color-scheme: dark)').matches) document.documentElement.classList.add('dark'); |
| renderHeroPreview(); |
| if (Object.keys(userProfile).length > 0) { |
| renderDashboard(); |
| if (userProfile.isADHD) document.getElementById('adhdBadge').style.display = 'inline-flex'; |
| } |
| renderSchedule(); |
| renderTrackerTabs(); |
| switchTracker(0); |
| renderVideos(); |
| renderModules(); |
| switchBrainTab(0); |
| |
| // Pre-load chat greeting |
| chatHistory = [{ role:'assistant', content:"Hi! I'm your Grok ADHD Parenting Coach. Ask me anything — tantrum scripts, focus routines, sensory strategies, sleep help, or teen transitions. What's your biggest parenting challenge right now?" }]; |
| renderChat(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
