ziggylott commited on
Commit
bad175e
·
verified ·
1 Parent(s): 5f5d566

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1157 -18
index.html CHANGED
@@ -1,19 +1,1158 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ParentWise • AI-Powered Parenting for ADHD &amp; Neurotypical Kids (0–18+)</title>
7
+ <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">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
10
+ <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
11
+ <script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
12
+ <style>
13
+ :root {
14
+ --clr-bg: #FFFBF5;
15
+ --clr-bg-alt: #FFF7ED;
16
+ --clr-surface: #ffffff;
17
+ --clr-surface-raised: #FEF3E2;
18
+ --clr-primary: #D97706;
19
+ --clr-primary-dark: #B45309;
20
+ --clr-primary-light: #FDE68A;
21
+ --clr-accent: #0E7490;
22
+ --clr-accent-light: #CFFAFE;
23
+ --clr-text: #1C1917;
24
+ --clr-text-muted: #78716C;
25
+ --clr-text-light: #A8A29E;
26
+ --clr-border: #E7E5E4;
27
+ --clr-hero-from: #FDE68A;
28
+ --clr-hero-to: #FED7AA;
29
+ --clr-hero-accent: #FFFBEB;
30
+ --clr-card-hover: #FFFBEB;
31
+ --clr-footer-bg: #1C1917;
32
+ --clr-footer-text: #A8A29E;
33
+ --clr-footer-heading: #FAFAF9;
34
+ --clr-tag-bg: #FEF3C7;
35
+ --clr-tag-text: #92400E;
36
+ --clr-success: #059669;
37
+ --clr-success-bg: #ECFDF5;
38
+ --clr-error: #DC2626;
39
+ --clr-overlay: rgba(0,0,0,0.5);
40
+ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
41
+ --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
42
+ --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
43
+ --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
44
+ --radius-sm: 8px;
45
+ --radius-md: 12px;
46
+ --radius-lg: 20px;
47
+ --radius-xl: 28px;
48
+ }
49
+ html.dark {
50
+ --clr-bg: #0C0A09;
51
+ --clr-bg-alt: #1C1917;
52
+ --clr-surface: #1C1917;
53
+ --clr-surface-raised: #292524;
54
+ --clr-primary: #F59E0B;
55
+ --clr-primary-dark: #FBBF24;
56
+ --clr-primary-light: #78350F;
57
+ --clr-accent: #22D3EE;
58
+ --clr-accent-light: #164E63;
59
+ --clr-text: #FAFAF9;
60
+ --clr-text-muted: #A8A29E;
61
+ --clr-text-light: #78716C;
62
+ --clr-border: #44403C;
63
+ --clr-hero-from: #451A03;
64
+ --clr-hero-to: #1C1917;
65
+ --clr-hero-accent: #292524;
66
+ --clr-card-hover: #292524;
67
+ --clr-footer-bg: #0C0A09;
68
+ --clr-footer-text: #78716C;
69
+ --clr-footer-heading: #FAFAF9;
70
+ --clr-tag-bg: #451A03;
71
+ --clr-tag-text: #FDE68A;
72
+ --clr-success-bg: #064E3B;
73
+ --clr-overlay: rgba(0,0,0,0.7);
74
+ }
75
+ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
76
+ body {
77
+ font-family: 'Plus Jakarta Sans', sans-serif;
78
+ background: var(--clr-bg);
79
+ color: var(--clr-text);
80
+ line-height: 1.6;
81
+ overflow-x: hidden;
82
+ }
83
+ h1,h2,h3,h4 { font-family: 'DM Serif Display', serif; line-height:1.2; }
84
+ a { text-decoration:none; color:inherit; }
85
+ button,input,select,textarea { font-family:inherit; }
86
+ .container { max-width:1280px; margin:0 auto; padding:0 24px; }
87
+
88
+ /* NAV */
89
+ .nav { position:sticky; top:0; z-index:100; background:var(--clr-surface); border-bottom:1px solid var(--clr-border); backdrop-filter:blur(12px); }
90
+ .nav-inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
91
+ .nav-logo { font-family:'DM Serif Display',serif; font-size:1.75rem; color:var(--clr-primary); display:flex; align-items:center; gap:10px; }
92
+ .nav-links { display:flex; gap:32px; list-style:none; }
93
+ .nav-links a { font-weight:500; color:var(--clr-text-muted); transition:color .2s; }
94
+ .nav-links a:hover { color:var(--clr-primary); }
95
+ .nav-cta { background:var(--clr-primary); color:#fff; padding:12px 28px; border-radius:100px; font-weight:700; transition:all .2s; }
96
+ .nav-cta:hover { background:var(--clr-primary-dark); transform:translateY(-2px); }
97
+ .nav-mobile-btn { display:none; background:none; border:none; cursor:pointer; color:var(--clr-text); font-size:1.5rem; }
98
+
99
+ @media (max-width:768px) {
100
+ .nav-links, .nav-cta { display:none; }
101
+ .nav-mobile-btn { display:block; }
102
+ .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); }
103
+ .hero-grid { grid-template-columns:1fr !important; gap:40px !important; }
104
+ .hero h1 { font-size:2.2rem !important; }
105
+ }
106
+
107
+ /* HERO */
108
+ .hero {
109
+ background: linear-gradient(135deg, var(--clr-hero-from) 0%, var(--clr-hero-to) 60%, var(--clr-bg) 100%);
110
+ padding: 100px 0 120px; position:relative; overflow:hidden;
111
+ }
112
+ .hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
113
+ .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; }
114
+ .hero h1 { font-size:3.4rem; margin-bottom:24px; line-height:1.1; }
115
+ .hero-desc { font-size:1.2rem; color:var(--clr-text-muted); max-width:540px; margin-bottom:32px; }
116
+ .personalize-form {
117
+ background:var(--clr-surface); border:2px solid var(--clr-border);
118
+ border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-md);
119
+ }
120
+ .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
121
+ @media(max-width:600px){ .form-grid{grid-template-columns:1fr;} }
122
+ .form-label { display:block; margin-bottom:8px; font-weight:600; font-size:0.95rem; }
123
+ .form-select, .form-input {
124
+ width:100%; padding:14px; border:2px solid var(--clr-border);
125
+ border-radius:var(--radius-md); font-size:1rem;
126
+ background:var(--clr-surface); color:var(--clr-text);
127
+ transition:border-color .2s;
128
+ }
129
+ .form-select:focus, .form-input:focus { outline:none; border-color:var(--clr-primary); }
130
+ .btn-primary {
131
+ background:var(--clr-primary); color:#fff; padding:16px 36px;
132
+ border-radius:100px; font-weight:700; font-size:1.05rem; border:none; cursor:pointer;
133
+ display:inline-flex; align-items:center; gap:12px; transition:all .25s;
134
+ }
135
+ .btn-primary:hover { background:var(--clr-primary-dark); transform:translateY(-3px); box-shadow:0 12px 32px rgba(217,119,6,0.35); }
136
+ .btn-secondary {
137
+ background:var(--clr-surface-raised); color:var(--clr-text); padding:12px 24px;
138
+ border-radius:100px; font-weight:600; border:none; cursor:pointer; transition:all .2s;
139
+ }
140
+ .btn-secondary:hover { background:var(--clr-border); }
141
+ .btn-danger { background:#EC4899; color:#fff; padding:12px 24px; border-radius:100px; font-weight:600; border:none; cursor:pointer; }
142
+
143
+ /* ADHD MODE BADGE */
144
+ .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; }
145
+
146
+ /* TRACKER TABS */
147
+ .tracker-tab {
148
+ padding:10px 20px; border-radius:100px; border:2px solid var(--clr-border);
149
+ background:var(--clr-surface); color:var(--clr-text-muted); cursor:pointer; font-weight:600; transition:all .2s;
150
+ }
151
+ .tracker-tab.active { background:var(--clr-primary); color:#fff; border-color:var(--clr-primary); }
152
+
153
+ /* DASHBOARD + ADHD HUB */
154
+ .dashboard-card { background:var(--clr-surface-raised); border-radius:var(--radius-xl); padding:40px; box-shadow:var(--shadow-xl); }
155
+ .adhd-hub { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; margin-top:24px; }
156
+
157
+ /* TRACKERS */
158
+ .tracker-container { background:var(--clr-surface); border-radius:var(--radius-xl); padding:32px; box-shadow:var(--shadow-lg); }
159
+ .focus-timer { text-align:center; }
160
+ .timer-display { font-size:3.5rem; font-family:'DM Serif Display',serif; margin:20px 0; color:var(--clr-primary); }
161
+ .timer-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
162
+
163
+ /* LOG ENTRY */
164
+ .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; }
165
+ .log-entry button { background:none; border:none; cursor:pointer; color:#DC2626; font-size:1.1rem; }
166
+
167
+ /* AI CHAT */
168
+ .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; }
169
+ .chat-message { max-width:82%; padding:14px 20px; border-radius:20px; font-size:0.95rem; line-height:1.5; }
170
+ .chat-user { align-self:flex-end; background:var(--clr-primary); color:#fff; border-bottom-right-radius:4px; }
171
+ .chat-ai { align-self:flex-start; background:var(--clr-surface-raised); border-bottom-left-radius:4px; }
172
+
173
+ /* VIDEO GRID */
174
+ .video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; }
175
+ .video-card { background:var(--clr-surface); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--clr-border); transition:all .3s; }
176
+ .video-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl); }
177
+ .video-card iframe { width:100%; aspect-ratio:16/9; border:none; display:block; }
178
+
179
+ /* MODULES */
180
+ .module-card { background:var(--clr-surface); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--clr-border); margin-bottom:20px; }
181
+ .progress-bar { height:8px; background:var(--clr-border); border-radius:9999px; overflow:hidden; }
182
+ .progress-fill { height:100%; background:linear-gradient(90deg,var(--clr-primary),#10b981); transition:width .5s ease; }
183
+
184
+ /* PRICING */
185
+ .pricing-card { background:var(--clr-surface); border-radius:24px; padding:36px; text-align:center; box-shadow:var(--shadow-md); transition:transform .2s; }
186
+ .pricing-card:hover { transform:translateY(-4px); }
187
+ .price { font-size:3.2rem; font-family:'DM Serif Display',serif; color:var(--clr-primary); }
188
+ .price-sub { font-size:0.9rem; color:var(--clr-text-muted); margin-bottom:24px; }
189
+ .feature-list { list-style:none; text-align:left; margin:20px 0; }
190
+ .feature-list li { padding:8px 0; border-bottom:1px solid var(--clr-border); display:flex; gap:10px; align-items:center; }
191
+ .feature-list li::before { content:'✓'; color:#10b981; font-weight:700; }
192
+
193
+ .section { padding:90px 0; }
194
+ .section-header { text-align:center; margin-bottom:56px; }
195
+ .section-header h2 { font-size:2.4rem; margin:16px 0 20px; }
196
+ .section-header p { color:var(--clr-text-muted); max-width:640px; margin:0 auto; font-size:1.05rem; }
197
+ .section-tag {
198
+ display:inline-flex; align-items:center; gap:8px;
199
+ background:var(--clr-tag-bg); color:var(--clr-tag-text);
200
+ padding:6px 18px; border-radius:100px; font-size:0.8rem; font-weight:700;
201
+ }
202
+
203
+ /* STAT CARDS */
204
+ .stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-bottom:32px; }
205
+ .stat-card { background:var(--clr-surface); padding:24px; border-radius:var(--radius-lg); text-align:center; box-shadow:var(--shadow-sm); }
206
+ .stat-num { font-size:2.5rem; font-family:'DM Serif Display',serif; color:var(--clr-primary); }
207
+
208
+ /* TOAST */
209
+ .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; }
210
+ @keyframes slideIn { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
211
+
212
+ /* ── Smart Notes ── */
213
+ .sn-layout { display:flex; gap:16px; min-height:420px; }
214
+ .sn-sidebar { width:200px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; }
215
+ .sn-main { flex:1; display:flex; flex-direction:column; gap:10px; }
216
+ .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; }
217
+ .sn-note-item:hover,.sn-note-item.active { background:var(--clr-primary); color:#fff; border-color:var(--clr-primary); }
218
+ .sn-note-item .sn-note-date { font-size:0.75rem; opacity:.7; margin-top:3px; }
219
+ .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; }
220
+ .sn-title-input:focus { border-color:var(--clr-primary); }
221
+ .ql-toolbar.ql-snow { border-radius:var(--radius-sm) var(--radius-sm) 0 0; background:var(--clr-surface-raised); border-color:var(--clr-border); }
222
+ .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; }
223
+ .sn-actions { display:flex; gap:8px; flex-wrap:wrap; }
224
+ .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; }
225
+ .sn-btn:hover { background:var(--clr-primary); color:#fff; border-color:var(--clr-primary); }
226
+ .sn-btn.danger:hover { background:#dc2626; border-color:#dc2626; }
227
+ .sn-empty { text-align:center; padding:40px 20px; color:var(--clr-text-muted); }
228
+ @media(max-width:600px){.sn-layout{flex-direction:column;}.sn-sidebar{width:100%;flex-direction:row;overflow-x:auto;}}
229
+ </style>
230
+ </head>
231
+ <body>
232
+
233
+ <!-- NAV -->
234
+ <nav class="nav">
235
+ <div class="container nav-inner">
236
+ <a href="#" class="nav-logo">
237
+ <i class="fa-solid fa-baby"></i> ParentWise
238
+ <span id="adhdBadge" class="adhd-mode" style="display:none;"><i class="fa-solid fa-brain"></i> ADHD MODE</span>
239
+ </a>
240
+ <ul class="nav-links" id="navLinks">
241
+ <li><a href="#dashboard">Dashboard</a></li>
242
+ <li><a href="#adhd-hub">ADHD Hub</a></li>
243
+ <li><a href="#trackers">Trackers</a></li>
244
+ <li><a href="#videos">Videos</a></li>
245
+ <li><a href="#modules">Modules</a></li>
246
+ <li><a href="#ai-advisor">Grok AI</a></li>
247
+ <li><a href="#pricing">Pricing</a></li>
248
+ </ul>
249
+ <a href="#pricing" class="nav-cta">Get Lifetime Access <i class="fa-solid fa-arrow-right"></i></a>
250
+ <button class="nav-mobile-btn" id="mobileNavBtn" aria-label="Toggle menu"><i class="fa-solid fa-bars"></i></button>
251
+ </div>
252
+ </nav>
253
+
254
+ <!-- HERO -->
255
+ <section class="hero">
256
+ <div class="container">
257
+ <div class="hero-grid">
258
+ <div>
259
+ <div class="hero-badge"><i class="fa-solid fa-star"></i> 12,400+ Parents • Grok AI + ADHD Research • Built from r/ADHDparenting</div>
260
+ <h1>Parenting That Works for <span style="color:#EC4899;">ADHD Brains</span> — From Toddler to Adulthood</h1>
261
+ <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>
262
+
263
+ <div class="personalize-form">
264
+ <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>
265
+ <div class="form-grid">
266
+ <div>
267
+ <label class="form-label">Child's Age Stage</label>
268
+ <select id="childAge" class="form-select">
269
+ <option value="">Select age...</option>
270
+ <option value="0-3">0–3 mo (Newborn)</option>
271
+ <option value="3-6">3–6 mo</option>
272
+ <option value="6-12">6–12 mo</option>
273
+ <option value="12-24">12–24 mo (Toddler)</option>
274
+ <option value="24-36">24–36 mo</option>
275
+ <option value="6-12y">6–12 years</option>
276
+ <option value="13-18">13–18 (Teen → Adult Transition)</option>
277
+ </select>
278
+ </div>
279
+ <div>
280
+ <label class="form-label">Biggest Challenge</label>
281
+ <select id="bigChallenge" class="form-select">
282
+ <option value="">Select challenge...</option>
283
+ <option value="sleep">Sleep / Night Wakings</option>
284
+ <option value="tantrums">Emotional Dysregulation / Tantrums</option>
285
+ <option value="focus">Executive Function / Focus</option>
286
+ <option value="sensory">Sensory Needs</option>
287
+ <option value="potty">Potty / Routines</option>
288
+ <option value="adhd">ADHD-Specific (Diagnosis Confirmed)</option>
289
+ </select>
290
+ </div>
291
+ </div>
292
+ <div style="margin-top:16px;">
293
+ <label style="display:flex;gap:10px;align-items:center;font-weight:600;cursor:pointer;">
294
+ <input type="checkbox" id="adhdToggle" style="width:18px;height:18px;accent-color:var(--clr-primary);">
295
+ This child (or parent) has ADHD
296
+ </label>
297
+ </div>
298
+ <button onclick="savePersonalization()" class="btn-primary" style="width:100%;margin-top:24px;justify-content:center;">
299
+ <i class="fa-solid fa-rocket"></i> Generate My ADHD-Aware Roadmap
300
+ </button>
301
+ </div>
302
+ </div>
303
+
304
+ <div class="dashboard-card" id="heroPreviewCard">
305
+ <h3 style="margin-bottom:20px;"><i class="fa-solid fa-chart-pie" style="color:var(--clr-primary);"></i> Your Dashboard Preview</h3>
306
+ <div id="heroDashboardPreview">
307
+ <div style="text-align:center;padding:40px 20px;color:var(--clr-text-muted);">
308
+ <i class="fa-solid fa-brain" style="font-size:3rem;color:var(--clr-primary-light);"></i>
309
+ <p style="margin-top:16px;">Complete the form to unlock your personalized ADHD-aware dashboard, visual schedules, regulation streaks & Grok AI insights.</p>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </section>
316
+
317
+ <!-- DASHBOARD -->
318
+ <section id="dashboard" class="section" style="background:var(--clr-bg-alt);">
319
+ <div class="container">
320
+ <div class="section-header">
321
+ <div class="section-tag"><i class="fa-solid fa-chart-line"></i> LIVE DASHBOARD</div>
322
+ <h2>Your Personalized Parenting Hub</h2>
323
+ </div>
324
+ <div id="fullDashboard" class="dashboard-card">
325
+ <p id="dashboardPlaceholder" style="text-align:center;padding:80px 20px;color:var(--clr-text-muted);">
326
+ <i class="fa-solid fa-lock" style="font-size:2rem;display:block;margin-bottom:16px;"></i>
327
+ Complete the form above to unlock your full ADHD-aware dashboard.
328
+ </p>
329
+ </div>
330
+ </div>
331
+ </section>
332
+
333
+ <!-- ADHD HUB -->
334
+ <section id="adhd-hub" class="section">
335
+ <div class="container">
336
+ <div class="section-header">
337
+ <div class="section-tag"><i class="fa-solid fa-brain"></i> ADHD HUB • Research-Backed</div>
338
+ <h2>Executive Function Tools • Visual Schedules • Sensory Regulation</h2>
339
+ <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>
340
+ </div>
341
+ <div class="adhd-hub">
342
+ <!-- Visual Schedule Builder -->
343
+ <div class="tracker-container">
344
+ <h3 style="margin-bottom:20px;"><i class="fa-solid fa-calendar-check" style="color:var(--clr-primary);"></i> Daily Visual Schedule</h3>
345
+ <div id="scheduleList"></div>
346
+ <input id="newTask" class="form-input" placeholder="Add task (e.g. 10min movement break)" style="margin-bottom:12px;margin-top:16px;">
347
+ <button onclick="addScheduleTask()" class="btn-primary" style="width:100%;justify-content:center;">
348
+ <i class="fa-solid fa-plus"></i> Add to Schedule
349
+ </button>
350
+ </div>
351
+
352
+ <!-- ADHD Focus Timer -->
353
+ <div class="tracker-container focus-timer">
354
+ <h3 style="margin-bottom:8px;"><i class="fa-solid fa-stopwatch" style="color:var(--clr-primary);"></i> ADHD Focus Timer</h3>
355
+ <p style="color:var(--clr-text-muted);font-size:0.9rem;">25 min focus + 5 min movement break</p>
356
+ <div id="timerDisplay" class="timer-display">25:00</div>
357
+ <div class="timer-btns">
358
+ <button onclick="startTimer()" class="btn-primary" style="padding:12px 24px;">▶ Start</button>
359
+ <button onclick="pauseTimer()" class="btn-secondary">⏸ Pause</button>
360
+ <button onclick="resetTimer()" class="btn-danger">↺ Reset</button>
361
+ </div>
362
+ <p style="margin-top:20px;font-size:0.85rem;color:var(--clr-text-muted);">Short bursts + built-in breaks = ADHD-optimized productivity</p>
363
+ </div>
364
+
365
+ <!-- ADHD Second Brain -->
366
+ <div class="tracker-container">
367
+ <h3 style="margin-bottom:16px;"><i class="fa-solid fa-database" style="color:var(--clr-primary);"></i> ADHD Second Brain</h3>
368
+ <div style="display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;">
369
+ <button onclick="switchBrainTab(0)" class="tracker-tab active" id="brainTab0">🧠 Brain Dump</button>
370
+ <button onclick="switchBrainTab(1)" class="tracker-tab" id="brainTab1">✅ Quick Tasks</button>
371
+ <button onclick="switchBrainTab(2)" class="tracker-tab" id="brainTab2">📓 Journal</button>
372
+ <button onclick="switchBrainTab(3)" class="tracker-tab" id="brainTab3">📝 Smart Notes</button>
373
+ </div>
374
+ <div id="brainContent"></div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </section>
379
+
380
+ <!-- TRACKERS -->
381
+ <section id="trackers" class="section" style="background:var(--clr-bg-alt);">
382
+ <div class="container">
383
+ <div class="section-header">
384
+ <div class="section-tag"><i class="fa-solid fa-clipboard-list"></i> LIVE TRACKERS</div>
385
+ <h2>Sleep • Feeding • Regulation • Focus • Sensory</h2>
386
+ <p>Log everything in one place. Charts auto-update so you can spot patterns and show your pediatrician real data.</p>
387
+ </div>
388
+ <div class="tracker-container">
389
+ <div style="display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;" id="trackerTabs"></div>
390
+ <div id="trackerView"></div>
391
+ <div style="height:280px;margin-top:24px;"><canvas id="trackerChart"></canvas></div>
392
+ </div>
393
+ </div>
394
+ </section>
395
+
396
+ <!-- VIDEOS -->
397
+ <section id="videos" class="section">
398
+ <div class="container">
399
+ <div class="section-header">
400
+ <div class="section-tag"><i class="fa-solid fa-play"></i> Research-Backed Videos</div>
401
+ <h2>ADHD Parenting + Executive Function + Emotional Regulation</h2>
402
+ <p>Curated from top experts — Dr. Barkley, How to ADHD, and more — so you get science you can actually use tonight.</p>
403
+ </div>
404
+ <div class="video-grid" id="videoGrid"></div>
405
+ </div>
406
+ </section>
407
+
408
+ <!-- GROK AI ADVISOR -->
409
+ <section id="ai-advisor" class="section" style="background:var(--clr-bg-alt);">
410
+ <div class="container">
411
+ <div class="section-header">
412
+ <div class="section-tag"><i class="fa-solid fa-robot"></i> Grok AI Advisor</div>
413
+ <h2>Ask Grok Anything About ADHD Parenting</h2>
414
+ <p>Get instant, research-backed scripts, strategies, and schedules — tailored to your child's age and needs.</p>
415
+ </div>
416
+ <div style="max-width:720px;margin:0 auto;background:var(--clr-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;">
417
+ <div style="padding:20px;background:linear-gradient(135deg,#EC4899,#D97706);display:flex;align-items:center;gap:12px;">
418
+ <i class="fa-solid fa-robot" style="color:#fff;font-size:1.5rem;"></i>
419
+ <span style="color:#fff;font-weight:700;font-size:1.1rem;">Grok ADHD Parenting Coach</span>
420
+ <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>
421
+ </div>
422
+ <div id="chatWindow" class="chat-window"></div>
423
+ <div style="padding:16px;background:var(--clr-surface-raised);display:flex;gap:12px;">
424
+ <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()">
425
+ <button onclick="sendToGrok()" class="btn-primary" style="padding:0 28px;white-space:nowrap;">Ask Grok <i class="fa-solid fa-paper-plane"></i></button>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </section>
430
+
431
+ <!-- MODULES -->
432
+ <section id="modules" class="section">
433
+ <div class="container">
434
+ <div class="section-header">
435
+ <div class="section-tag"><i class="fa-solid fa-book-open"></i> Curriculum</div>
436
+ <h2>ADHD-Aware Modules — From Birth to Adulthood</h2>
437
+ <p>Sequential learning path covering newborn basics through teen ADHD transition — all in one lifetime access.</p>
438
+ </div>
439
+ <div id="modulesContainer"></div>
440
+ </div>
441
+ </section>
442
+
443
+ <!-- PRICING -->
444
+ <section id="pricing" class="section" style="background:var(--clr-bg-alt);">
445
+ <div class="container">
446
+ <div class="section-header">
447
+ <div class="section-tag"><i class="fa-solid fa-tag"></i> Pricing</div>
448
+ <h2>Lifetime Access • Full ADHD Hub Included</h2>
449
+ <p>One-time payment. No subscriptions. Every update free forever.</p>
450
+ </div>
451
+ <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:1000px;margin:0 auto;">
452
+
453
+ <div class="pricing-card">
454
+ <h3>Starter</h3>
455
+ <div class="price">$29</div>
456
+ <div class="price-sub">One-time payment</div>
457
+ <ul class="feature-list">
458
+ <li>Visual Schedule Builder</li>
459
+ <li>Sleep + Feeding Tracker</li>
460
+ <li>5 Core Modules</li>
461
+ <li>Video Library (5 videos)</li>
462
+ </ul>
463
+ <button onclick="handlePurchase('Starter',29)" class="btn-primary" style="width:100%;justify-content:center;">Get Starter</button>
464
+ </div>
465
+
466
+ <div class="pricing-card" style="border:3px solid var(--clr-primary);position:relative;">
467
+ <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>
468
+ <h3>Complete + ADHD Hub</h3>
469
+ <div class="price">$97</div>
470
+ <div class="price-sub">One-time • Lifetime updates</div>
471
+ <ul class="feature-list">
472
+ <li>Everything in Starter</li>
473
+ <li>Full ADHD Hub (Schedule + Timer + Brain)</li>
474
+ <li>Grok AI Advisor (unlimited)</li>
475
+ <li>All 5 Trackers + Charts</li>
476
+ <li>All 5 Modules + ADHD modules</li>
477
+ <li>Emotion Regulation Scripts</li>
478
+ <li>Lifespan ADHD: Teen → Adult</li>
479
+ </ul>
480
+ <button onclick="handlePurchase('Complete',97)" class="btn-primary" style="width:100%;justify-content:center;">Get Full Access</button>
481
+ </div>
482
+
483
+ <div class="pricing-card">
484
+ <h3>Premium + Coaching</h3>
485
+ <div class="price">$197</div>
486
+ <div class="price-sub">One-time • Includes community</div>
487
+ <ul class="feature-list">
488
+ <li>Everything in Complete</li>
489
+ <li>Private Community Access</li>
490
+ <li>Monthly Group Q&A</li>
491
+ <li>Printable Visual Schedule PDF</li>
492
+ <li>Built-in Smart Notes & Parenting Journal (Notion-style)</li>
493
+ <li>Priority Grok AI access</li>
494
+ </ul>
495
+ <button onclick="handlePurchase('Premium',197)" class="btn-primary" style="width:100%;justify-content:center;">Unlock Everything</button>
496
+ </div>
497
+ </div>
498
+ <p style="text-align:center;margin-top:40px;color:var(--clr-text-muted);">30-day satisfaction guarantee • Used by 12,400+ parents worldwide</p>
499
+ </div>
500
+ </section>
501
+
502
+ <!-- FOOTER -->
503
+ <footer style="background:var(--clr-footer-bg);color:var(--clr-footer-text);padding:60px 0 40px;text-align:center;">
504
+ <div class="container">
505
+ <div style="font-family:'DM Serif Display',serif;font-size:1.5rem;color:var(--clr-footer-heading);margin-bottom:16px;">ParentWise</div>
506
+ <p>Built from real Reddit r/ADHDparenting insights, YouTube experts &amp; Grok AI</p>
507
+ <p style="margin-top:8px;">❤️ Designed for every neurotype — ADHD, neurotypical, and everything in between</p>
508
+ <p style="margin-top:24px;font-size:0.85rem;">© 2026 ParentWise • T. Lott Creative</p>
509
+ </div>
510
+ </footer>
511
+
512
+ <script>
513
+ // ============================================================
514
+ // STATE
515
+ // ============================================================
516
+ let userProfile = JSON.parse(localStorage.getItem('pwProfile')) || {};
517
+ let trackersData = JSON.parse(localStorage.getItem('pwTrackers')) || { sleep:[], feeding:[], regulation:[], focus:[], sensory:[] };
518
+ let scheduleTasks = JSON.parse(localStorage.getItem('pwSchedule')) || [];
519
+ let brainData = JSON.parse(localStorage.getItem('pwBrain')) || { dump:[], tasks:[], journal:[] };
520
+ let timerInterval = null;
521
+ let timerSeconds = 1500;
522
+ let timerMode = 'focus';
523
+ let currentTrackerIndex = 0;
524
+ let currentBrainTab = 0;
525
+ let chartInstance = null;
526
+
527
+ // ============================================================
528
+ // DARK MODE + MOBILE NAV
529
+ // ============================================================
530
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
531
+ document.documentElement.classList.add('dark');
532
+ }
533
+
534
+ document.getElementById('mobileNavBtn').addEventListener('click', () => {
535
+ const links = document.getElementById('navLinks');
536
+ links.classList.toggle('open');
537
+ const icon = document.querySelector('#mobileNavBtn i');
538
+ icon.className = links.classList.contains('open') ? 'fa-solid fa-xmark' : 'fa-solid fa-bars';
539
+ });
540
+
541
+ // ============================================================
542
+ // PERSONALIZATION
543
+ // ============================================================
544
+ function savePersonalization() {
545
+ const age = document.getElementById('childAge').value;
546
+ const challenge = document.getElementById('bigChallenge').value;
547
+ const isADHD = document.getElementById('adhdToggle').checked;
548
+ if (!age || !challenge) { showToast('Please select both age and challenge ⚠️', 'warn'); return; }
549
+
550
+ userProfile = { age, challenge, isADHD, saved: new Date().toISOString() };
551
+ localStorage.setItem('pwProfile', JSON.stringify(userProfile));
552
+
553
+ if (isADHD) document.getElementById('adhdBadge').style.display = 'inline-flex';
554
+ renderHeroPreview();
555
+ renderDashboard();
556
+ showToast('🚀 Your ADHD-aware plan is ready!', 'success');
557
+ document.getElementById('dashboard').scrollIntoView({ behavior:'smooth' });
558
+ }
559
+
560
+ function renderHeroPreview() {
561
+ if (!userProfile.age) return;
562
+ const adhdTag = userProfile.isADHD ? '<span class="adhd-mode" style="font-size:0.75rem;">ADHD MODE</span>' : '';
563
+ document.getElementById('heroDashboardPreview').innerHTML = `
564
+ <div style="background:var(--clr-surface);padding:24px;border-radius:16px;margin-bottom:16px;">
565
+ <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
566
+ <strong>Child Age:</strong> <span>${userProfile.age} ${adhdTag}</span>
567
+ </div>
568
+ <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
569
+ <strong>Focus Area:</strong> <span>${userProfile.challenge}</span>
570
+ </div>
571
+ <div style="color:#10b981;margin-top:16px;font-weight:600;">
572
+ ✅ Visual schedule ready<br>
573
+ ✅ Regulation tracker active<br>
574
+ ✅ Grok ADHD prompts loaded
575
+ </div>
576
+ </div>
577
+ <div class="stat-grid" style="margin-top:0;">
578
+ <div class="stat-card"><div class="stat-num">4🔥</div><small>Focus Streak</small></div>
579
+ <div class="stat-card"><div class="stat-num" style="color:#10b981;">82%</div><small>Regulation Score</small></div>
580
+ <div class="stat-card"><div class="stat-num">18m</div><small>Next Break</small></div>
581
+ </div>`;
582
+ }
583
+
584
+ function renderDashboard() {
585
+ if (!userProfile.age) return;
586
+ const el = document.getElementById('fullDashboard');
587
+ document.getElementById('dashboardPlaceholder').style.display = 'none';
588
+ const adhdNote = userProfile.isADHD ? `
589
+ <div style="background:linear-gradient(135deg,#EC4899,#D97706);color:#fff;padding:20px;border-radius:16px;margin-bottom:24px;">
590
+ <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.
591
+ </div>` : '';
592
+
593
+ el.innerHTML = `
594
+ ${adhdNote}
595
+ <h3 style="margin-bottom:24px;">Today's Snapshot — ${new Date().toLocaleDateString('en-US', {weekday:'long', month:'long', day:'numeric'})}</h3>
596
+ <div class="stat-grid">
597
+ <div class="stat-card"><div class="stat-num">4🔥</div><small>Focus Streak</small></div>
598
+ <div class="stat-card"><div class="stat-num" style="color:#10b981;">82%</div><small>Regulation Score</small></div>
599
+ <div class="stat-card"><div class="stat-num">${trackersData.sleep.length}</div><small>Sleep Logs</small></div>
600
+ <div class="stat-card"><div class="stat-num">${trackersData.focus.length}</div><small>Focus Sessions</small></div>
601
+ </div>
602
+ <div style="background:var(--clr-success-bg);border:1px solid #10b981;padding:20px;border-radius:16px;margin-top:24px;">
603
+ <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.
604
+ </div>`;
605
+ }
606
+
607
+ // ============================================================
608
+ // VISUAL SCHEDULE
609
+ // ============================================================
610
+ function addScheduleTask() {
611
+ const input = document.getElementById('newTask');
612
+ if (!input.value.trim()) return;
613
+ scheduleTasks.unshift({ text: input.value.trim(), completed: false, time: new Date().toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) });
614
+ localStorage.setItem('pwSchedule', JSON.stringify(scheduleTasks));
615
+ input.value = '';
616
+ renderSchedule();
617
+ showToast('Task added to schedule!', 'success');
618
+ }
619
+
620
+ function renderSchedule() {
621
+ document.getElementById('scheduleList').innerHTML = scheduleTasks.length
622
+ ? scheduleTasks.map((t,i) => `
623
+ <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--clr-border);">
624
+ <label style="display:flex;gap:12px;align-items:center;flex:1;cursor:pointer;">
625
+ <input type="checkbox" ${t.completed?'checked':''} onchange="toggleSchedule(${i})" style="width:18px;height:18px;accent-color:var(--clr-primary);">
626
+ <span style="${t.completed?'text-decoration:line-through;opacity:0.5':''}">${t.text}</span>
627
+ </label>
628
+ <small style="color:var(--clr-text-muted);margin-left:12px;">${t.time}</small>
629
+ </div>`).join('')
630
+ : '<p style="color:var(--clr-text-muted);padding:16px 0;">No tasks yet — add your first schedule item above!</p>';
631
+ }
632
+
633
+ function toggleSchedule(i) {
634
+ scheduleTasks[i].completed = !scheduleTasks[i].completed;
635
+ localStorage.setItem('pwSchedule', JSON.stringify(scheduleTasks));
636
+ renderSchedule();
637
+ }
638
+
639
+ // ============================================================
640
+ // FOCUS TIMER
641
+ // ============================================================
642
+ function startTimer() {
643
+ if (timerInterval) return;
644
+ timerInterval = setInterval(() => {
645
+ timerSeconds--;
646
+ const m = Math.floor(timerSeconds / 60);
647
+ const s = timerSeconds % 60;
648
+ document.getElementById('timerDisplay').textContent = `${m}:${s < 10 ? '0' : ''}${s}`;
649
+ if (timerSeconds <= 0) {
650
+ clearInterval(timerInterval); timerInterval = null;
651
+ if (timerMode === 'focus') {
652
+ showToast('🎉 Focus done! Time for a 5-min movement break!', 'success');
653
+ timerSeconds = 300; timerMode = 'break';
654
+ document.getElementById('timerDisplay').textContent = '05:00';
655
+ } else {
656
+ showToast('Movement break done! Ready for another focus session?', 'success');
657
+ timerSeconds = 1500; timerMode = 'focus';
658
+ document.getElementById('timerDisplay').textContent = '25:00';
659
+ }
660
+ }
661
+ }, 1000);
662
+ }
663
+ function pauseTimer() { clearInterval(timerInterval); timerInterval = null; }
664
+ function resetTimer() { clearInterval(timerInterval); timerInterval = null; timerSeconds = 1500; timerMode = 'focus'; document.getElementById('timerDisplay').textContent = '25:00'; }
665
+
666
+ // ============================================================
667
+ // ADHD SECOND BRAIN
668
+ // ============================================================
669
+ // ============================================================
670
+ // SMART NOTES (Notion-like)
671
+ // ============================================================
672
+ let smartNotes = JSON.parse(localStorage.getItem('pwSmartNotes')) || [];
673
+ let currentNoteId = null;
674
+ let quillInstances = {};
675
+ let snSaveTimer = null;
676
+
677
+ function snGenerateId() {
678
+ return 'note_' + Date.now() + '_' + Math.random().toString(36).substr(2,5);
679
+ }
680
+
681
+ function snSaveNotes() {
682
+ localStorage.setItem('pwSmartNotes', JSON.stringify(smartNotes));
683
+ }
684
+
685
+ function snCreateNote(category='General') {
686
+ const note = {
687
+ id: snGenerateId(),
688
+ title: 'Untitled Note',
689
+ category,
690
+ content: '',
691
+ delta: null,
692
+ created: new Date().toLocaleDateString(),
693
+ updated: new Date().toLocaleString()
694
+ };
695
+ smartNotes.unshift(note);
696
+ snSaveNotes();
697
+ renderSmartNotes();
698
+ snOpenNote(note.id);
699
+ }
700
+
701
+ function snDeleteNote(id) {
702
+ smartNotes = smartNotes.filter(n => n.id !== id);
703
+ snSaveNotes();
704
+ currentNoteId = null;
705
+ renderSmartNotes();
706
+ renderSnEditor();
707
+ }
708
+
709
+ function snOpenNote(id) {
710
+ currentNoteId = id;
711
+ renderSmartNotes();
712
+ renderSnEditor();
713
+ }
714
+
715
+ function snAutoSave() {
716
+ if (!currentNoteId) return;
717
+ const q = quillInstances['snQuill'];
718
+ if (!q) return;
719
+ const note = smartNotes.find(n => n.id === currentNoteId);
720
+ if (!note) return;
721
+ const titleEl = document.getElementById('snTitleInput');
722
+ if (titleEl) note.title = titleEl.value || 'Untitled Note';
723
+ note.delta = JSON.stringify(q.getContents());
724
+ note.content = q.getText().trim().substring(0, 120);
725
+ note.updated = new Date().toLocaleString();
726
+ snSaveNotes();
727
+ renderSnSidebar();
728
+ }
729
+
730
+ function renderSnSidebar() {
731
+ const el = document.getElementById('snSidebar');
732
+ if (!el) return;
733
+ if (smartNotes.length === 0) {
734
+ el.innerHTML = '<p style="color:var(--clr-text-muted);font-size:0.85rem;padding:8px;">No notes yet. Click + New Note.</p>';
735
+ return;
736
+ }
737
+ el.innerHTML = smartNotes.map(n => `
738
+ <div class="sn-note-item ${n.id===currentNoteId?'active':''}" onclick="snOpenNote('${n.id}')">
739
+ <div style="font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${n.title}</div>
740
+ <div class="sn-note-date">${n.updated}</div>
741
+ </div>`).join('');
742
+ }
743
+
744
+ function renderSnEditor() {
745
+ const el = document.getElementById('snEditor');
746
+ if (!el) return;
747
+ const note = smartNotes.find(n => n.id === currentNoteId);
748
+ if (!note) {
749
+ 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>';
750
+ return;
751
+ }
752
+ el.innerHTML = `
753
+ <div class="sn-actions" style="margin-bottom:10px;">
754
+ <button class="sn-btn" onclick="snExportNote()"><i class="fa-solid fa-copy"></i> Copy Text</button>
755
+ <button class="sn-btn danger" onclick="snDeleteNote('${note.id}')"><i class="fa-solid fa-trash"></i> Delete</button>
756
+ <span style="margin-left:auto;font-size:0.78rem;color:var(--clr-text-muted);align-self:center;">Auto-saved ✓</span>
757
+ </div>
758
+ <input id="snTitleInput" class="sn-title-input" value="${note.title}" placeholder="Note title…" oninput="snScheduleSave()">
759
+ <div id="snQuillEditor" style="margin-top:10px;"></div>`;
760
+
761
+ // Init Quill
762
+ const q = new Quill('#snQuillEditor', {
763
+ theme: 'snow',
764
+ placeholder: 'Start writing… use headings, bullets, checklists ✓',
765
+ modules: {
766
+ toolbar: [
767
+ [{ header: [1, 2, 3, false] }],
768
+ ['bold', 'italic', 'underline'],
769
+ [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
770
+ ['blockquote', 'code-block'],
771
+ ['clean']
772
+ ]
773
+ }
774
+ });
775
+ quillInstances['snQuill'] = q;
776
+
777
+ // Load saved content
778
+ if (note.delta) {
779
+ try { q.setContents(JSON.parse(note.delta)); } catch(e) {}
780
+ }
781
+
782
+ // Autosave on change
783
+ q.on('text-change', () => {
784
+ clearTimeout(snSaveTimer);
785
+ snSaveTimer = setTimeout(snAutoSave, 400);
786
+ });
787
+ }
788
+
789
+ function renderSmartNotes() {
790
+ renderSnSidebar();
791
+ }
792
+
793
+ function snScheduleSave() {
794
+ clearTimeout(snSaveTimer);
795
+ snSaveTimer = setTimeout(snAutoSave, 400);
796
+ }
797
+
798
+ function snExportNote() {
799
+ const q = quillInstances['snQuill'];
800
+ if (!q) return;
801
+ const text = q.getText().trim();
802
+ navigator.clipboard.writeText(text).then(() => showToast('Note copied to clipboard!', 'success'));
803
+ }
804
+
805
+ function initSmartNotes() {
806
+ const c = document.getElementById('brainContent');
807
+ const categories = ['General', 'Sleep Notes', 'Feeding Log', 'Milestone Notes', 'Dr. Questions', 'ADHD Tips'];
808
+ c.innerHTML = `
809
+ <div class="sn-actions" style="margin-bottom:12px;">
810
+ <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>
811
+ <span style="font-size:0.82rem;color:var(--clr-text-muted);align-self:center;">Quick:</span>
812
+ ${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('')}
813
+ </div>
814
+ <div class="sn-layout">
815
+ <div class="sn-sidebar" id="snSidebar"></div>
816
+ <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>
817
+ </div>`;
818
+ renderSnSidebar();
819
+ if (smartNotes.length > 0 && !currentNoteId) {
820
+ snOpenNote(smartNotes[0].id);
821
+ } else if (currentNoteId) {
822
+ snOpenNote(currentNoteId);
823
+ }
824
+ }
825
+
826
+ // ============================================================
827
+ // BRAIN TABS (upgraded)
828
+ // ============================================================
829
+ function switchBrainTab(n) {
830
+ currentBrainTab = n;
831
+ ['brainTab0','brainTab1','brainTab2','brainTab3'].forEach((id,i) => {
832
+ const el = document.getElementById(id);
833
+ if (el) el.classList.toggle('active', i===n);
834
+ });
835
+ const c = document.getElementById('brainContent');
836
+ if (n===0) {
837
+ c.innerHTML = `
838
+ <div id="dumpQuillEditor" style="min-height:120px;"></div>
839
+ <div style="display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;">
840
+ <button onclick="saveDump()" class="btn-primary">Save Dump <i class="fa-solid fa-bolt"></i></button>
841
+ <button onclick="clearDumpEditor()" class="sn-btn">Clear</button>
842
+ </div>
843
+ <div id="dumpList" style="margin-top:16px;max-height:180px;overflow:auto;"></div>`;
844
+ const dq = new Quill('#dumpQuillEditor', {
845
+ theme: 'snow',
846
+ placeholder: 'Brain dump anything right now — no filters...',
847
+ modules: { toolbar: [['bold','italic'],[{ list:'bullet'}],['clean']] }
848
+ });
849
+ quillInstances['dump'] = dq;
850
+ renderBrainDump();
851
+ } else if (n===1) {
852
+ c.innerHTML = `<input id="taskInput" class="form-input" placeholder="Add a task — e.g. 'Call pediatrician'" style="margin-bottom:8px;">
853
+ <button onclick="addQuickTask()" class="btn-primary" style="margin-bottom:16px;">+ Add Task</button>
854
+ <div id="taskList"></div>`;
855
+ renderQuickTasks();
856
+ } else if (n===2) {
857
+ c.innerHTML = `
858
+ <div id="journalQuillEditor" style="min-height:160px;"></div>
859
+ <div style="display:flex;gap:8px;margin-top:8px;align-items:center;">
860
+ <button onclick="saveJournal()" class="btn-primary">Save Entry <i class="fa-solid fa-book-open"></i></button>
861
+ <span style="font-size:0.82rem;color:var(--clr-text-muted);">${brainData.journal.length} entries saved</span>
862
+ </div>
863
+ <div id="journalList" style="margin-top:16px;max-height:180px;overflow:auto;"></div>`;
864
+ const jq = new Quill('#journalQuillEditor', {
865
+ theme: 'snow',
866
+ placeholder: 'How did regulation go today? What worked? What was hard?',
867
+ modules: { toolbar: [['bold','italic'],[{ list:'bullet'}],['blockquote'],['clean']] }
868
+ });
869
+ quillInstances['journal'] = jq;
870
+ renderJournalList();
871
+ } else if (n===3) {
872
+ initSmartNotes();
873
+ }
874
+ }
875
+
876
+ function clearDumpEditor() {
877
+ const q = quillInstances['dump'];
878
+ if (q) q.setText('');
879
+ }
880
+
881
+ function saveDump() {
882
+ const q = quillInstances['dump'];
883
+ const v = q ? q.getText().trim() : '';
884
+ if (!v) return;
885
+ brainData.dump.unshift({ text: v, html: q.root.innerHTML, time: new Date().toLocaleString() });
886
+ localStorage.setItem('pwBrain', JSON.stringify(brainData));
887
+ q.setText('');
888
+ renderBrainDump();
889
+ showToast('Brain dump saved!', 'success');
890
+ }
891
+
892
+ function renderBrainDump() {
893
+ const el = document.getElementById('dumpList');
894
+ if (!el) return;
895
+ el.innerHTML = brainData.dump.map((item,i) => `
896
+ <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>';
897
+ }
898
+
899
+ function renderJournalList() {
900
+ const el = document.getElementById('journalList');
901
+ if (!el) return;
902
+ el.innerHTML = brainData.journal.map((item,i) => `
903
+ <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>';
904
+ }
905
+
906
+ function saveJournal() {
907
+ const q = quillInstances['journal'];
908
+ const v = q ? q.getText().trim() : '';
909
+ if (!v) return;
910
+ brainData.journal.unshift({ entry: v, html: q.root.innerHTML, date: new Date().toLocaleDateString() });
911
+ localStorage.setItem('pwBrain', JSON.stringify(brainData));
912
+ q.setText('');
913
+ renderJournalList();
914
+ const countEl = document.querySelector('#brainContent span[style*="text-muted"]');
915
+ if (countEl) countEl.textContent = brainData.journal.length + ' entries saved';
916
+ showToast('Journal entry saved! 📓', 'success');
917
+ }
918
+
919
+
920
+ function addQuickTask() {
921
+ const input = document.getElementById('taskInput');
922
+ if (!input.value) return;
923
+ brainData.tasks.unshift({ text: input.value, points:10, done:false });
924
+ localStorage.setItem('pwBrain', JSON.stringify(brainData));
925
+ input.value = '';
926
+ renderQuickTasks();
927
+ showToast('+10 dopamine points! 🎉', 'success');
928
+ }
929
+ function renderQuickTasks() {
930
+ const el = document.getElementById('quickList');
931
+ if (!el) return;
932
+ el.innerHTML = brainData.tasks.map((t,i) => `
933
+ <div class="log-entry">
934
+ <label style="display:flex;gap:8px;align-items:center;cursor:pointer;">
935
+ <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);">
936
+ <span style="${t.done?'text-decoration:line-through;opacity:0.5':''}">${t.text}</span>
937
+ </label>
938
+ <span style="color:#10b981;font-weight:700;">+${t.points}</span>
939
+ </div>`).join('') || '<p style="color:var(--clr-text-muted);font-size:0.9rem;">No tasks yet.</p>';
940
+ }
941
+
942
+ // ============================================================
943
+ // TRACKERS
944
+ // ============================================================
945
+ const trackerTypes = [
946
+ { key:'sleep', name:'Sleep Log', icon:'🌙', inputType:'text', placeholder:'e.g. Slept 7.5 hrs, woke once at 3am' },
947
+ { key:'feeding', name:'Feeding', icon:'🍎', inputType:'text', placeholder:'e.g. 8oz formula, 6:30am' },
948
+ { key:'regulation', name:'ADHD Regulation', icon:'🧘', inputType:'number', placeholder:'Mood score 1-10', min:1, max:10 },
949
+ { key:'focus', name:'Focus Time', icon:'⏳', inputType:'number', placeholder:'Minutes focused', min:1 },
950
+ { 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'] }
951
+ ];
952
+
953
+ function renderTrackerTabs() {
954
+ document.getElementById('trackerTabs').innerHTML = trackerTypes.map((t,i) => `
955
+ <button onclick="switchTracker(${i})" class="tracker-tab ${i===currentTrackerIndex?'active':''}">${t.icon} ${t.name}</button>`).join('');
956
+ }
957
+ function switchTracker(n) { currentTrackerIndex = n; renderTrackerTabs(); renderTrackerView(); }
958
+
959
+ function renderTrackerView() {
960
+ const t = trackerTypes[currentTrackerIndex];
961
+ const data = trackersData[t.key] || [];
962
+ let inputHtml = '';
963
+
964
+ if (t.inputType === 'select') {
965
+ inputHtml = `<select id="trackerInput" class="form-select" style="margin-bottom:12px;">${t.options.map(o=>`<option>${o}</option>`).join('')}</select>`;
966
+ } else {
967
+ 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;">`;
968
+ }
969
+
970
+ document.getElementById('trackerView').innerHTML = `
971
+ <h3 style="margin-bottom:20px;">${t.icon} ${t.name}</h3>
972
+ ${inputHtml}
973
+ <button onclick="logTracker('${t.key}')" class="btn-primary" style="width:100%;justify-content:center;margin-bottom:20px;">
974
+ <i class="fa-solid fa-plus"></i> Log ${t.name}
975
+ </button>
976
+ <div style="max-height:220px;overflow:auto;">
977
+ ${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>'}
978
+ </div>`;
979
+ updateChart(t.key, data);
980
+ }
981
+
982
+ function logTracker(key) {
983
+ const input = document.getElementById('trackerInput');
984
+ const val = input.value || input.options?.[input.selectedIndex]?.value;
985
+ if (!val) return;
986
+ if (!trackersData[key]) trackersData[key] = [];
987
+ const entry = { value: val, time: new Date().toLocaleString() };
988
+ trackersData[key].unshift(entry);
989
+ localStorage.setItem('pwTrackers', JSON.stringify(trackersData));
990
+ if (input.type !== 'select-one') input.value = '';
991
+ renderTrackerView();
992
+ showToast(`${trackerTypes[currentTrackerIndex].icon} ${trackerTypes[currentTrackerIndex].name} logged!`, 'success');
993
+ }
994
+ function deleteLog(key, i) {
995
+ trackersData[key].splice(i,1);
996
+ localStorage.setItem('pwTrackers', JSON.stringify(trackersData));
997
+ renderTrackerView();
998
+ }
999
+
1000
+ function updateChart(key, data) {
1001
+ const ctx = document.getElementById('trackerChart').getContext('2d');
1002
+ if (chartInstance) chartInstance.destroy();
1003
+ const recent = data.slice(0,10).reverse();
1004
+ const labels = recent.map(e => (e.time||'').split(',')[0] || 'Log');
1005
+ const values = recent.map(e => parseFloat(e.value) || 1);
1006
+ chartInstance = new Chart(ctx, {
1007
+ type: 'line',
1008
+ data: {
1009
+ labels: labels.length ? labels : ['No data yet'],
1010
+ datasets: [{
1011
+ label: key.toUpperCase(),
1012
+ data: values.length ? values : [0],
1013
+ borderColor: '#D97706',
1014
+ backgroundColor: 'rgba(217,119,6,0.08)',
1015
+ tension: 0.4,
1016
+ fill: true,
1017
+ pointBackgroundColor: '#D97706'
1018
+ }]
1019
+ },
1020
+ options: { responsive:true, maintainAspectRatio:false, plugins:{legend:{display:false}}, scales:{y:{beginAtZero:true}} }
1021
+ });
1022
+ }
1023
+
1024
+ // ============================================================
1025
+ // GROK AI CHAT
1026
+ // ============================================================
1027
+ let chatHistory = [];
1028
+ const adhdResponses = {
1029
+ 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.'",
1030
+ 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",
1031
+ 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",
1032
+ 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",
1033
+ 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",
1034
+ 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)"
1035
+ };
1036
+
1037
+ function sendToGrok() {
1038
+ const input = document.getElementById('chatInput');
1039
+ const query = input.value.trim();
1040
+ if (!query) return;
1041
+ chatHistory.push({ role:'user', content: query });
1042
+ renderChat();
1043
+ input.value = '';
1044
+
1045
+ setTimeout(() => {
1046
+ const q = query.toLowerCase();
1047
+ 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?";
1048
+ if (q.match(/tantrum|emotion|meltdown|dysreg|angry|rage/)) response = adhdResponses.tantrum;
1049
+ else if (q.match(/schedule|routine|transition|morning|bedtime/)) response = adhdResponses.schedule;
1050
+ else if (q.match(/teen|adult|college|transition|high school/)) response = adhdResponses.teen;
1051
+ else if (q.match(/focus|executive|attention|distract|concentrate/)) response = adhdResponses.focus;
1052
+ else if (q.match(/sensory|sensitive|overwhelm|noise|touch/)) response = adhdResponses.sensory;
1053
+ else if (q.match(/sleep|night|bedtime|wake|insomnia/)) response = adhdResponses.sleep;
1054
+
1055
+ chatHistory.push({ role:'assistant', content: response });
1056
+ renderChat();
1057
+ }, 800);
1058
+ }
1059
+
1060
+ function renderChat() {
1061
+ const win = document.getElementById('chatWindow');
1062
+ win.innerHTML = chatHistory.map(m => `
1063
+ <div class="chat-message ${m.role==='user'?'chat-user':'chat-ai'}">
1064
+ <strong>${m.role==='user'?'You':'🧠 Grok AI'}</strong><br>
1065
+ ${m.content.replace(/\n/g,'<br>')}
1066
+ </div>`).join('');
1067
+ win.scrollTop = win.scrollHeight;
1068
+ }
1069
+
1070
+ // ============================================================
1071
+ // MODULES
1072
+ // ============================================================
1073
+ function renderModules() {
1074
+ const modules = [
1075
+ { title:'Phase 1: Newborn Essentials (0–6 mo)', prog:80, adhd:false, desc:'Safe sleep, feeding cues, developmental milestones, postpartum support' },
1076
+ { title:'Phase 2: Toddler Foundations (6 mo–3 yr)', prog:65, adhd:false, desc:'Language, motor skills, attachment, early behavior management' },
1077
+ { title:'ADHD Executive Function Foundations', prog:45, adhd:true, desc:'Working memory, planning, impulse control — practical strategies from Dr. Barkley' },
1078
+ { title:'Emotional Regulation & CALM Method', prog:30, adhd:true, desc:'Co-regulation, meltdown prevention, sensory strategies, body doubling' },
1079
+ { title:'Lifespan ADHD: Teen → Adulthood Transition', prog:10, adhd:true, desc:'Medication continuity, college planning, executive function independence, self-advocacy' }
1080
+ ];
1081
+ document.getElementById('modulesContainer').innerHTML = modules.map((m,i) => `
1082
+ <div class="module-card">
1083
+ <div style="padding:24px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;">
1084
+ <div style="flex:1;">
1085
+ <h3>${m.title} ${m.adhd?'<span class="adhd-mode" style="font-size:0.7rem;">ADHD</span>':''}</h3>
1086
+ <p style="color:var(--clr-text-muted);font-size:0.9rem;margin-top:6px;">${m.desc}</p>
1087
+ </div>
1088
+ <div style="min-width:200px;text-align:right;">
1089
+ <div style="margin-bottom:8px;font-weight:700;color:var(--clr-primary);">${m.prog}% Complete</div>
1090
+ <div class="progress-bar" style="width:200px;margin-left:auto;"><div class="progress-fill" style="width:${m.prog}%"></div></div>
1091
+ </div>
1092
+ </div>
1093
+ </div>`).join('');
1094
+ }
1095
+
1096
+ // ============================================================
1097
+ // VIDEOS
1098
+ // ============================================================
1099
+ function renderVideos() {
1100
+ const videos = [
1101
+ { title:"Why Kids With ADHD Need Different Parenting (Dr. Barkley)", url:"https://www.youtube.com/embed/ktb520seHYk" },
1102
+ { title:"How to Handle Emotional Dysregulation in ADHD Kids", url:"https://www.youtube.com/embed/aiZmQldQEUk" },
1103
+ { title:"Executive Function Strategies for ADHD (Practical)", url:"https://www.youtube.com/embed/Bco_kwkNVLs" },
1104
+ { title:"Ms Rachel – First Words & Language Development", url:"https://www.youtube.com/embed/hTqtGJwsJVE" },
1105
+ { title:"Safe Sleep + Sensory Strategies for Babies", url:"https://www.youtube.com/embed/ETTYrswlWyY" }
1106
+ ];
1107
+ document.getElementById('videoGrid').innerHTML = videos.map(v => `
1108
+ <div class="video-card">
1109
+ <iframe src="${v.url}" allowfullscreen loading="lazy"></iframe>
1110
+ <div style="padding:20px;"><h4>${v.title}</h4></div>
1111
+ </div>`).join('');
1112
+ }
1113
+
1114
+ // ============================================================
1115
+ // PURCHASE
1116
+ // ============================================================
1117
+ function handlePurchase(plan, price) {
1118
+ window.open('https://tlott12.gumroad.com/l/parentwise', '_blank');
1119
+ showToast(`Redirecting to secure checkout for ${plan} ($${price})...`, 'success');
1120
+ }
1121
+
1122
+ // ============================================================
1123
+ // TOAST
1124
+ // ============================================================
1125
+ function showToast(msg, type='success') {
1126
+ const colors = { success:'#10b981', warn:'#f59e0b', error:'#dc2626' };
1127
+ const t = document.createElement('div');
1128
+ t.className = 'toast';
1129
+ t.style.background = colors[type] || colors.success;
1130
+ t.textContent = msg;
1131
+ document.body.appendChild(t);
1132
+ setTimeout(() => { t.style.opacity='0'; t.style.transition='opacity .3s'; setTimeout(()=>t.remove(),300); }, 4000);
1133
+ }
1134
+
1135
+ // ============================================================
1136
+ // INIT
1137
+ // ============================================================
1138
+ window.addEventListener('load', () => {
1139
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) document.documentElement.classList.add('dark');
1140
+ renderHeroPreview();
1141
+ if (Object.keys(userProfile).length > 0) {
1142
+ renderDashboard();
1143
+ if (userProfile.isADHD) document.getElementById('adhdBadge').style.display = 'inline-flex';
1144
+ }
1145
+ renderSchedule();
1146
+ renderTrackerTabs();
1147
+ switchTracker(0);
1148
+ renderVideos();
1149
+ renderModules();
1150
+ switchBrainTab(0);
1151
+
1152
+ // Pre-load chat greeting
1153
+ 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?" }];
1154
+ renderChat();
1155
+ });
1156
+ </script>
1157
+ </body>
1158
  </html>