Spaces:
Running
Running
Delete insights.html
Browse files- insights.html +0 -860
insights.html
DELETED
|
@@ -1,860 +0,0 @@
|
|
| 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>FinWise — AI Insights</title>
|
| 7 |
-
<link rel="stylesheet" href="shared.css">
|
| 8 |
-
<style>
|
| 9 |
-
/* ── AI Chat Interface ──────────────────────────────────────────── */
|
| 10 |
-
.ai-chat-wrap {
|
| 11 |
-
display: flex;
|
| 12 |
-
flex-direction: column;
|
| 13 |
-
height: 420px;
|
| 14 |
-
background: var(--bg2);
|
| 15 |
-
border: 1px solid var(--border);
|
| 16 |
-
border-radius: var(--r);
|
| 17 |
-
overflow: hidden;
|
| 18 |
-
}
|
| 19 |
-
.chat-messages {
|
| 20 |
-
flex: 1;
|
| 21 |
-
overflow-y: auto;
|
| 22 |
-
padding: 20px;
|
| 23 |
-
display: flex;
|
| 24 |
-
flex-direction: column;
|
| 25 |
-
gap: 14px;
|
| 26 |
-
}
|
| 27 |
-
.chat-message {
|
| 28 |
-
display: flex;
|
| 29 |
-
gap: 10px;
|
| 30 |
-
max-width: 90%;
|
| 31 |
-
animation: fadeInUp 0.3s ease;
|
| 32 |
-
}
|
| 33 |
-
.chat-message.user {
|
| 34 |
-
margin-left: auto;
|
| 35 |
-
flex-direction: row-reverse;
|
| 36 |
-
}
|
| 37 |
-
.chat-avatar {
|
| 38 |
-
width: 32px; height: 32px;
|
| 39 |
-
border-radius: 50%;
|
| 40 |
-
display: flex; align-items: center; justify-content: center;
|
| 41 |
-
font-size: 16px;
|
| 42 |
-
flex-shrink: 0;
|
| 43 |
-
align-self: flex-end;
|
| 44 |
-
}
|
| 45 |
-
.chat-avatar.ai-av { background: linear-gradient(135deg, var(--cyan), var(--emerald)); }
|
| 46 |
-
.chat-avatar.user-av { background: linear-gradient(135deg, var(--violet), var(--indigo)); }
|
| 47 |
-
.chat-bubble {
|
| 48 |
-
padding: 12px 16px;
|
| 49 |
-
border-radius: 14px;
|
| 50 |
-
font-size: 14px;
|
| 51 |
-
line-height: 1.6;
|
| 52 |
-
max-width: 100%;
|
| 53 |
-
}
|
| 54 |
-
.chat-bubble.ai { background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
|
| 55 |
-
.chat-bubble.user { background: linear-gradient(135deg,var(--cyan-d),var(--cyan)); color: var(--bg); border-bottom-right-radius: 4px; }
|
| 56 |
-
.chat-bubble.ai strong { color: var(--cyan); }
|
| 57 |
-
.chat-bubble.ai em { color: var(--emerald); font-style: normal; font-weight: 600; }
|
| 58 |
-
.chat-bubble ul { padding-left: 18px; margin-top: 6px; }
|
| 59 |
-
.chat-bubble li { margin-bottom: 4px; }
|
| 60 |
-
|
| 61 |
-
.chat-typing {
|
| 62 |
-
display: flex;
|
| 63 |
-
gap: 4px;
|
| 64 |
-
padding: 14px 16px;
|
| 65 |
-
background: var(--card);
|
| 66 |
-
border: 1px solid var(--border);
|
| 67 |
-
border-radius: 14px;
|
| 68 |
-
border-bottom-left-radius: 4px;
|
| 69 |
-
width: fit-content;
|
| 70 |
-
}
|
| 71 |
-
.chat-typing span {
|
| 72 |
-
width: 7px; height: 7px;
|
| 73 |
-
border-radius: 50%;
|
| 74 |
-
background: var(--cyan);
|
| 75 |
-
animation: typing 1.2s infinite;
|
| 76 |
-
}
|
| 77 |
-
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
|
| 78 |
-
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
|
| 79 |
-
@keyframes typing { 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:1;transform:scale(1)} }
|
| 80 |
-
|
| 81 |
-
.chat-input-bar {
|
| 82 |
-
border-top: 1px solid var(--border);
|
| 83 |
-
padding: 12px 16px;
|
| 84 |
-
display: flex;
|
| 85 |
-
gap: 10px;
|
| 86 |
-
background: var(--bg2);
|
| 87 |
-
}
|
| 88 |
-
.chat-input {
|
| 89 |
-
flex: 1;
|
| 90 |
-
background: var(--bg3);
|
| 91 |
-
border: 1px solid var(--border);
|
| 92 |
-
border-radius: 100px;
|
| 93 |
-
padding: 10px 18px;
|
| 94 |
-
color: var(--text);
|
| 95 |
-
font-family: var(--font-body);
|
| 96 |
-
font-size: 14px;
|
| 97 |
-
outline: none;
|
| 98 |
-
transition: border-color var(--transition);
|
| 99 |
-
width: auto;
|
| 100 |
-
}
|
| 101 |
-
.chat-input:focus { border-color: var(--cyan); }
|
| 102 |
-
.chat-send-btn {
|
| 103 |
-
width: 42px; height: 42px;
|
| 104 |
-
border-radius: 50%;
|
| 105 |
-
background: linear-gradient(135deg, var(--cyan-d), var(--cyan));
|
| 106 |
-
border: none;
|
| 107 |
-
cursor: pointer;
|
| 108 |
-
display: flex; align-items: center; justify-content: center;
|
| 109 |
-
font-size: 18px;
|
| 110 |
-
transition: all var(--transition);
|
| 111 |
-
flex-shrink: 0;
|
| 112 |
-
}
|
| 113 |
-
.chat-send-btn:hover { box-shadow: 0 0 16px rgba(34,211,238,0.5); transform: scale(1.05); }
|
| 114 |
-
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
|
| 115 |
-
|
| 116 |
-
.quick-prompts {
|
| 117 |
-
display: flex;
|
| 118 |
-
gap: 8px;
|
| 119 |
-
flex-wrap: wrap;
|
| 120 |
-
padding: 10px 16px;
|
| 121 |
-
border-top: 1px solid var(--border);
|
| 122 |
-
background: var(--bg2);
|
| 123 |
-
}
|
| 124 |
-
.quick-prompt {
|
| 125 |
-
padding: 6px 12px;
|
| 126 |
-
border-radius: 100px;
|
| 127 |
-
border: 1px solid var(--border2);
|
| 128 |
-
background: transparent;
|
| 129 |
-
color: var(--text2);
|
| 130 |
-
font-size: 12px;
|
| 131 |
-
font-weight: 600;
|
| 132 |
-
cursor: pointer;
|
| 133 |
-
font-family: var(--font-body);
|
| 134 |
-
transition: all var(--transition);
|
| 135 |
-
white-space: nowrap;
|
| 136 |
-
}
|
| 137 |
-
.quick-prompt:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(34,211,238,0.06); }
|
| 138 |
-
|
| 139 |
-
/* ── Concept Cards ──────────────────────────────────────────────── */
|
| 140 |
-
.concept-grid {
|
| 141 |
-
display: grid;
|
| 142 |
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
| 143 |
-
gap: 16px;
|
| 144 |
-
}
|
| 145 |
-
.concept-card {
|
| 146 |
-
background: var(--card);
|
| 147 |
-
border: 1px solid var(--border);
|
| 148 |
-
border-radius: var(--r);
|
| 149 |
-
padding: 20px;
|
| 150 |
-
transition: all var(--transition);
|
| 151 |
-
cursor: pointer;
|
| 152 |
-
position: relative;
|
| 153 |
-
overflow: hidden;
|
| 154 |
-
}
|
| 155 |
-
.concept-card::before {
|
| 156 |
-
content: '';
|
| 157 |
-
position: absolute;
|
| 158 |
-
top: 0; left: 0; right: 0;
|
| 159 |
-
height: 2px;
|
| 160 |
-
background: var(--concept-color, var(--cyan));
|
| 161 |
-
}
|
| 162 |
-
.concept-card:hover {
|
| 163 |
-
border-color: var(--border2);
|
| 164 |
-
transform: translateY(-3px);
|
| 165 |
-
box-shadow: 0 8px 30px rgba(0,0,0,0.4);
|
| 166 |
-
}
|
| 167 |
-
.concept-icon { font-size: 32px; margin-bottom: 10px; }
|
| 168 |
-
.concept-title { font-family: var(--font-head); font-size: 16px; font-weight: 700; margin-bottom: 6px; }
|
| 169 |
-
.concept-desc { font-size: 13px; color: var(--text2); line-height: 1.5; }
|
| 170 |
-
.concept-tag { margin-top: 12px; }
|
| 171 |
-
|
| 172 |
-
/* ── Do's & Don'ts ──────────────────────────────────────────────── */
|
| 173 |
-
.dos-donts {
|
| 174 |
-
display: grid;
|
| 175 |
-
grid-template-columns: 1fr 1fr;
|
| 176 |
-
gap: 20px;
|
| 177 |
-
}
|
| 178 |
-
.do-card {
|
| 179 |
-
background: rgba(16,185,129,0.05);
|
| 180 |
-
border: 1px solid rgba(16,185,129,0.2);
|
| 181 |
-
border-radius: var(--r);
|
| 182 |
-
padding: 20px;
|
| 183 |
-
}
|
| 184 |
-
.dont-card {
|
| 185 |
-
background: rgba(244,63,94,0.05);
|
| 186 |
-
border: 1px solid rgba(244,63,94,0.2);
|
| 187 |
-
border-radius: var(--r);
|
| 188 |
-
padding: 20px;
|
| 189 |
-
}
|
| 190 |
-
.do-header { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--emerald); margin-bottom: 14px; }
|
| 191 |
-
.dont-header { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--rose); margin-bottom: 14px; }
|
| 192 |
-
.tip-item {
|
| 193 |
-
display: flex;
|
| 194 |
-
gap: 10px;
|
| 195 |
-
margin-bottom: 12px;
|
| 196 |
-
font-size: 13px;
|
| 197 |
-
line-height: 1.5;
|
| 198 |
-
}
|
| 199 |
-
.tip-icon { flex-shrink: 0; font-size: 16px; margin-top: 1px; }
|
| 200 |
-
|
| 201 |
-
/* ── Insight Cards ──────────────────────────────────────────────── */
|
| 202 |
-
.insight-feed { display: flex; flex-direction: column; gap: 14px; }
|
| 203 |
-
.insight-item {
|
| 204 |
-
display: flex;
|
| 205 |
-
gap: 14px;
|
| 206 |
-
padding: 16px;
|
| 207 |
-
background: var(--card);
|
| 208 |
-
border: 1px solid var(--border);
|
| 209 |
-
border-radius: var(--r-sm);
|
| 210 |
-
transition: all var(--transition);
|
| 211 |
-
}
|
| 212 |
-
.insight-item:hover { border-color: var(--border2); }
|
| 213 |
-
.insight-category {
|
| 214 |
-
display: inline-flex;
|
| 215 |
-
align-items: center;
|
| 216 |
-
gap: 5px;
|
| 217 |
-
font-size: 10px;
|
| 218 |
-
font-weight: 800;
|
| 219 |
-
text-transform: uppercase;
|
| 220 |
-
letter-spacing: 0.1em;
|
| 221 |
-
margin-bottom: 6px;
|
| 222 |
-
}
|
| 223 |
-
.insight-title { font-weight: 700; font-size: 14px; margin-bottom: 5px; }
|
| 224 |
-
.insight-body { font-size: 13px; color: var(--text2); line-height: 1.5; }
|
| 225 |
-
|
| 226 |
-
/* ── Glossary ───────────────────────────────────────────────────── */
|
| 227 |
-
.glossary-grid {
|
| 228 |
-
display: grid;
|
| 229 |
-
grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
|
| 230 |
-
gap: 12px;
|
| 231 |
-
}
|
| 232 |
-
.glossary-item {
|
| 233 |
-
background: var(--bg3);
|
| 234 |
-
border-radius: var(--r-sm);
|
| 235 |
-
padding: 14px;
|
| 236 |
-
border: 1px solid var(--border);
|
| 237 |
-
}
|
| 238 |
-
.glos-term { font-weight: 700; color: var(--cyan); margin-bottom: 4px; font-size: 14px; }
|
| 239 |
-
.glos-def { font-size: 12px; color: var(--text2); line-height: 1.5; }
|
| 240 |
-
|
| 241 |
-
/* ── Tabs ───────────────────────────────────────────────────────── */
|
| 242 |
-
.insight-tabs {
|
| 243 |
-
display: flex;
|
| 244 |
-
gap: 6px;
|
| 245 |
-
margin-bottom: 24px;
|
| 246 |
-
flex-wrap: wrap;
|
| 247 |
-
}
|
| 248 |
-
.ins-tab {
|
| 249 |
-
padding: 9px 18px;
|
| 250 |
-
border-radius: 100px;
|
| 251 |
-
border: 1px solid var(--border);
|
| 252 |
-
background: transparent;
|
| 253 |
-
color: var(--text2);
|
| 254 |
-
font-family: var(--font-body);
|
| 255 |
-
font-size: 13px;
|
| 256 |
-
font-weight: 600;
|
| 257 |
-
cursor: pointer;
|
| 258 |
-
transition: all var(--transition);
|
| 259 |
-
}
|
| 260 |
-
.ins-tab:hover { border-color: var(--border2); color: var(--text); }
|
| 261 |
-
.ins-tab.active { border-color: var(--cyan); background: rgba(34,211,238,0.1); color: var(--cyan); }
|
| 262 |
-
|
| 263 |
-
.ins-panel { display: none; }
|
| 264 |
-
.ins-panel.active { display: block; }
|
| 265 |
-
|
| 266 |
-
.gamification-bar {
|
| 267 |
-
background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(34,211,238,0.05));
|
| 268 |
-
border: 1px solid rgba(139,92,246,0.2);
|
| 269 |
-
border-radius: var(--r);
|
| 270 |
-
padding: 20px 24px;
|
| 271 |
-
margin-bottom: 24px;
|
| 272 |
-
display: flex;
|
| 273 |
-
align-items: center;
|
| 274 |
-
gap: 20px;
|
| 275 |
-
}
|
| 276 |
-
.xp-badge {
|
| 277 |
-
background: linear-gradient(135deg, var(--violet), var(--indigo));
|
| 278 |
-
border-radius: var(--r-sm);
|
| 279 |
-
padding: 14px;
|
| 280 |
-
text-align: center;
|
| 281 |
-
min-width: 80px;
|
| 282 |
-
}
|
| 283 |
-
.xp-val { font-family: var(--font-head); font-size: 22px; font-weight: 800; }
|
| 284 |
-
.xp-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }
|
| 285 |
-
.level-info { flex: 1; }
|
| 286 |
-
.level-name { font-family: var(--font-head); font-size: 18px; font-weight: 700; margin-bottom: 4px; }
|
| 287 |
-
.achievements {
|
| 288 |
-
display: flex;
|
| 289 |
-
gap: 8px;
|
| 290 |
-
flex-wrap: wrap;
|
| 291 |
-
margin-top: 12px;
|
| 292 |
-
}
|
| 293 |
-
.achievement {
|
| 294 |
-
background: var(--bg3);
|
| 295 |
-
border-radius: var(--r-sm);
|
| 296 |
-
padding: 8px 12px;
|
| 297 |
-
font-size: 12px;
|
| 298 |
-
display: flex;
|
| 299 |
-
align-items: center;
|
| 300 |
-
gap: 6px;
|
| 301 |
-
border: 1px solid var(--border);
|
| 302 |
-
}
|
| 303 |
-
.achievement.earned { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); }
|
| 304 |
-
</style>
|
| 305 |
-
</head>
|
| 306 |
-
<body>
|
| 307 |
-
<div class="app-shell">
|
| 308 |
-
<nav class="sidebar">
|
| 309 |
-
<div class="sidebar-logo">
|
| 310 |
-
<div class="logo-mark">
|
| 311 |
-
<div class="logo-icon">📈</div>
|
| 312 |
-
<div><div class="logo-text">FinWise</div><div class="logo-sub">Smart Investing</div></div>
|
| 313 |
-
</div>
|
| 314 |
-
</div>
|
| 315 |
-
<div class="nav-section">
|
| 316 |
-
<div class="nav-label">Main</div>
|
| 317 |
-
<a href="index.html" class="nav-item"><span class="nav-icon">🏠</span> Dashboard</a>
|
| 318 |
-
<a href="portfolio.html" class="nav-item"><span class="nav-icon">📊</span> Portfolio Builder</a>
|
| 319 |
-
<a href="risk.html" class="nav-item"><span class="nav-icon">🎯</span> Risk Analyzer</a>
|
| 320 |
-
<a href="tracker.html" class="nav-item"><span class="nav-icon">📈</span> Tracker</a>
|
| 321 |
-
<div class="nav-label">Tools</div>
|
| 322 |
-
<a href="calculators.html" class="nav-item"><span class="nav-icon">🧮</span> Calculators</a>
|
| 323 |
-
<a href="insights.html" class="nav-item"><span class="nav-icon">💡</span> Insights <span class="nav-badge">New</span></a>
|
| 324 |
-
</div>
|
| 325 |
-
<div class="sidebar-footer">
|
| 326 |
-
<div class="market-ticker">Live Market</div>
|
| 327 |
-
<div id="sidebar-tickers"></div>
|
| 328 |
-
</div>
|
| 329 |
-
</nav>
|
| 330 |
-
|
| 331 |
-
<main class="main-content">
|
| 332 |
-
<div class="page-header fade-in">
|
| 333 |
-
<div class="page-title">AI <span>Insights</span></div>
|
| 334 |
-
<div class="page-subtitle">Personalized guidance, education, and smart financial tips powered by AI</div>
|
| 335 |
-
</div>
|
| 336 |
-
|
| 337 |
-
<!-- Gamification Bar -->
|
| 338 |
-
<div class="gamification-bar fade-in">
|
| 339 |
-
<div class="xp-badge">
|
| 340 |
-
<div class="xp-val">340</div>
|
| 341 |
-
<div class="xp-lbl">XP Points</div>
|
| 342 |
-
</div>
|
| 343 |
-
<div class="level-info">
|
| 344 |
-
<div class="level-name">🌱 Growing Investor — Level 4</div>
|
| 345 |
-
<div class="text-muted text-sm">160 XP until Level 5: Savvy Saver</div>
|
| 346 |
-
<div class="progress-bar" style="margin-top:8px">
|
| 347 |
-
<div class="progress-fill" style="width:68%;background:linear-gradient(90deg,var(--violet),var(--cyan))"></div>
|
| 348 |
-
</div>
|
| 349 |
-
<div class="achievements">
|
| 350 |
-
<div class="achievement earned">🏆 First Portfolio</div>
|
| 351 |
-
<div class="achievement earned">📊 Risk Assessed</div>
|
| 352 |
-
<div class="achievement earned">🧮 Calc Explorer</div>
|
| 353 |
-
<div class="achievement" style="opacity:0.5">🎯 Goal Setter</div>
|
| 354 |
-
<div class="achievement" style="opacity:0.5">💰 $10K Milestone</div>
|
| 355 |
-
</div>
|
| 356 |
-
</div>
|
| 357 |
-
</div>
|
| 358 |
-
|
| 359 |
-
<!-- Tab Nav -->
|
| 360 |
-
<div class="insight-tabs fade-in">
|
| 361 |
-
<button class="ins-tab active" data-ins="ai-chat">🤖 AI Advisor</button>
|
| 362 |
-
<button class="ins-tab" data-ins="daily">💡 Daily Insights</button>
|
| 363 |
-
<button class="ins-tab" data-ins="concepts">📚 Concepts</button>
|
| 364 |
-
<button class="ins-tab" data-ins="dos-donts">✅ Do's & Don'ts</button>
|
| 365 |
-
<button class="ins-tab" data-ins="glossary">📖 Glossary</button>
|
| 366 |
-
</div>
|
| 367 |
-
|
| 368 |
-
<!-- ════════════════════════════════════════════════════════════
|
| 369 |
-
AI ADVISOR TAB
|
| 370 |
-
════════════════════════════════════════════════════════════ -->
|
| 371 |
-
<div class="ins-panel active fade-in" id="ins-ai-chat">
|
| 372 |
-
<div class="grid-60-40">
|
| 373 |
-
<div>
|
| 374 |
-
<div class="card" style="padding:0;overflow:hidden">
|
| 375 |
-
<div style="padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px">
|
| 376 |
-
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--emerald));display:flex;align-items:center;justify-content:center;font-size:18px">🤖</div>
|
| 377 |
-
<div>
|
| 378 |
-
<div style="font-weight:700;font-size:15px">FinWise AI</div>
|
| 379 |
-
<div style="font-size:12px;color:var(--emerald)">● Online · Powered by Claude</div>
|
| 380 |
-
</div>
|
| 381 |
-
<div style="margin-left:auto">
|
| 382 |
-
<span class="badge badge-cyan">Beta</span>
|
| 383 |
-
</div>
|
| 384 |
-
</div>
|
| 385 |
-
<div class="ai-chat-wrap" style="border:none;border-radius:0;height:380px">
|
| 386 |
-
<div class="chat-messages" id="chat-messages">
|
| 387 |
-
<!-- Initial message -->
|
| 388 |
-
<div class="chat-message">
|
| 389 |
-
<div class="chat-avatar ai-av">🤖</div>
|
| 390 |
-
<div class="chat-bubble ai">
|
| 391 |
-
<strong>Hey there, investor! 👋</strong><br><br>
|
| 392 |
-
I'm your AI financial advisor. I can help you understand your portfolio, explain investing concepts, and give personalized guidance based on your goals.<br><br>
|
| 393 |
-
<em>What would you like to explore today?</em>
|
| 394 |
-
</div>
|
| 395 |
-
</div>
|
| 396 |
-
</div>
|
| 397 |
-
<div class="quick-prompts">
|
| 398 |
-
<button class="quick-prompt" onclick="sendQuickPrompt(this)">📊 Analyze my portfolio</button>
|
| 399 |
-
<button class="quick-prompt" onclick="sendQuickPrompt(this)">🎯 Am I taking too much risk?</button>
|
| 400 |
-
<button class="quick-prompt" onclick="sendQuickPrompt(this)">💡 How do ETFs work?</button>
|
| 401 |
-
<button class="quick-prompt" onclick="sendQuickPrompt(this)">🏖️ Retirement planning tips</button>
|
| 402 |
-
<button class="quick-prompt" onclick="sendQuickPrompt(this)">📈 What is dollar-cost averaging?</button>
|
| 403 |
-
<button class="quick-prompt" onclick="sendQuickPrompt(this)">⚡ Should I rebalance now?</button>
|
| 404 |
-
</div>
|
| 405 |
-
<div class="chat-input-bar">
|
| 406 |
-
<input type="text" class="chat-input" id="chat-input" placeholder="Ask me anything about investing…" onkeydown="if(event.key==='Enter')sendMessage()">
|
| 407 |
-
<button class="chat-send-btn" id="send-btn" onclick="sendMessage()">➤</button>
|
| 408 |
-
</div>
|
| 409 |
-
</div>
|
| 410 |
-
</div>
|
| 411 |
-
</div>
|
| 412 |
-
|
| 413 |
-
<!-- Sidebar topics -->
|
| 414 |
-
<div>
|
| 415 |
-
<div class="card">
|
| 416 |
-
<div class="card-title">📌 Suggested Topics</div>
|
| 417 |
-
<div class="insight-feed">
|
| 418 |
-
<div class="insight-item" style="cursor:pointer" onclick="sendText('What is compound interest and why is it important?')">
|
| 419 |
-
<div>
|
| 420 |
-
<div class="insight-category" style="color:var(--cyan)">🎓 Education</div>
|
| 421 |
-
<div class="insight-title">The Magic of Compound Interest</div>
|
| 422 |
-
<div class="insight-body">Why time in market beats timing the market</div>
|
| 423 |
-
</div>
|
| 424 |
-
</div>
|
| 425 |
-
<div class="insight-item" style="cursor:pointer" onclick="sendText('Explain the 4% rule for retirement withdrawals')">
|
| 426 |
-
<div>
|
| 427 |
-
<div class="insight-category" style="color:var(--emerald)">🏖️ Retirement</div>
|
| 428 |
-
<div class="insight-title">The 4% Withdrawal Rule</div>
|
| 429 |
-
<div class="insight-body">How much you can safely spend in retirement</div>
|
| 430 |
-
</div>
|
| 431 |
-
</div>
|
| 432 |
-
<div class="insight-item" style="cursor:pointer" onclick="sendText('What is portfolio rebalancing and when should I do it?')">
|
| 433 |
-
<div>
|
| 434 |
-
<div class="insight-category" style="color:var(--violet)">⚖️ Strategy</div>
|
| 435 |
-
<div class="insight-title">When to Rebalance</div>
|
| 436 |
-
<div class="insight-body">Keep your risk in check automatically</div>
|
| 437 |
-
</div>
|
| 438 |
-
</div>
|
| 439 |
-
<div class="insight-item" style="cursor:pointer" onclick="sendText('What is the difference between ETFs and mutual funds?')">
|
| 440 |
-
<div>
|
| 441 |
-
<div class="insight-category" style="color:var(--amber)">📊 Basics</div>
|
| 442 |
-
<div class="insight-title">ETFs vs Mutual Funds</div>
|
| 443 |
-
<div class="insight-body">Which is better for beginner investors?</div>
|
| 444 |
-
</div>
|
| 445 |
-
</div>
|
| 446 |
-
</div>
|
| 447 |
-
</div>
|
| 448 |
-
|
| 449 |
-
<!-- AI context card -->
|
| 450 |
-
<div class="card" style="margin-top:16px;background:linear-gradient(135deg,rgba(34,211,238,0.06),rgba(16,185,129,0.03))">
|
| 451 |
-
<div class="card-title">📊 Your Portfolio Context</div>
|
| 452 |
-
<div id="context-summary" style="font-size:13px;color:var(--text2);line-height:1.6"></div>
|
| 453 |
-
</div>
|
| 454 |
-
</div>
|
| 455 |
-
</div>
|
| 456 |
-
</div>
|
| 457 |
-
|
| 458 |
-
<!-- ════════════════════════════════════════════════════════════
|
| 459 |
-
DAILY INSIGHTS TAB
|
| 460 |
-
════════════════════════════════════════════════════════════ -->
|
| 461 |
-
<div class="ins-panel" id="ins-daily">
|
| 462 |
-
<div class="insight-feed">
|
| 463 |
-
<div class="insight-item">
|
| 464 |
-
<div style="font-size:36px">🌅</div>
|
| 465 |
-
<div>
|
| 466 |
-
<div class="insight-category badge-cyan">Daily Tip</div>
|
| 467 |
-
<div class="insight-title">Automate Your Investments</div>
|
| 468 |
-
<div class="insight-body">Set up automatic monthly contributions — even $100/month invested consistently can grow to over $200,000 in 30 years at a 10% return. Automation removes emotion from the equation and builds the habit effortlessly.</div>
|
| 469 |
-
</div>
|
| 470 |
-
</div>
|
| 471 |
-
<div class="insight-item">
|
| 472 |
-
<div style="font-size:36px">📰</div>
|
| 473 |
-
<div>
|
| 474 |
-
<div class="insight-category badge-amber">Market Insight</div>
|
| 475 |
-
<div class="insight-title">Fed Policy & Your Bonds</div>
|
| 476 |
-
<div class="insight-body">When interest rates rise, bond prices fall. If you're holding BND or similar ETFs in your portfolio, rising rates reduce their short-term value — but also mean higher yields going forward. Long-term investors should stay the course.</div>
|
| 477 |
-
</div>
|
| 478 |
-
</div>
|
| 479 |
-
<div class="insight-item">
|
| 480 |
-
<div style="font-size:36px">⚡</div>
|
| 481 |
-
<div>
|
| 482 |
-
<div class="insight-category badge-emerald">Action Item</div>
|
| 483 |
-
<div class="insight-title">Review Your Emergency Fund First</div>
|
| 484 |
-
<div class="insight-body">Before investing more, ensure you have 3-6 months of expenses in a high-yield savings account (HYSA). With rates above 4.5% APY at some banks, your emergency fund can earn real money while staying liquid.</div>
|
| 485 |
-
</div>
|
| 486 |
-
</div>
|
| 487 |
-
<div class="insight-item">
|
| 488 |
-
<div style="font-size:36px">🧠</div>
|
| 489 |
-
<div>
|
| 490 |
-
<div class="insight-category badge-violet">Behavioral Finance</div>
|
| 491 |
-
<div class="insight-title">Don't Check Your Portfolio Daily</div>
|
| 492 |
-
<div class="insight-body">Studies show that investors who check their portfolios more often make more emotional trades and achieve worse returns. Set a calendar reminder to review quarterly — not daily. Your future self will thank you.</div>
|
| 493 |
-
</div>
|
| 494 |
-
</div>
|
| 495 |
-
<div class="insight-item">
|
| 496 |
-
<div style="font-size:36px">💡</div>
|
| 497 |
-
<div>
|
| 498 |
-
<div class="insight-category badge-rose">Watch Out For</div>
|
| 499 |
-
<div class="insight-title">Expense Ratios Add Up</div>
|
| 500 |
-
<div class="insight-body">A fund with 1% expense ratio vs 0.03% (like VOO) costs you over $250,000 on a $100K investment over 30 years. Always compare expense ratios before buying mutual funds or ETFs.</div>
|
| 501 |
-
</div>
|
| 502 |
-
</div>
|
| 503 |
-
</div>
|
| 504 |
-
</div>
|
| 505 |
-
|
| 506 |
-
<!-- ════════════════════════════════════════════════════════════
|
| 507 |
-
CONCEPTS TAB
|
| 508 |
-
════════════════════════════════════════════════════════════ -->
|
| 509 |
-
<div class="ins-panel" id="ins-concepts">
|
| 510 |
-
<div class="concept-grid">
|
| 511 |
-
<div class="concept-card" style="--concept-color:var(--cyan)" onclick="sendText('Explain compound interest with a real example')">
|
| 512 |
-
<div class="concept-icon">⚡</div>
|
| 513 |
-
<div class="concept-title">Compound Interest</div>
|
| 514 |
-
<div class="concept-desc">The 8th wonder of the world — earning interest on your interest. Time is your greatest asset.</div>
|
| 515 |
-
<div class="concept-tag"><span class="badge badge-cyan">Beginner</span></div>
|
| 516 |
-
</div>
|
| 517 |
-
<div class="concept-card" style="--concept-color:var(--emerald)" onclick="sendText('What is dollar-cost averaging and how do I use it?')">
|
| 518 |
-
<div class="concept-icon">📅</div>
|
| 519 |
-
<div class="concept-title">Dollar-Cost Averaging</div>
|
| 520 |
-
<div class="concept-desc">Invest a fixed amount regularly regardless of price. Reduces the impact of volatility automatically.</div>
|
| 521 |
-
<div class="concept-tag"><span class="badge badge-emerald">Strategy</span></div>
|
| 522 |
-
</div>
|
| 523 |
-
<div class="concept-card" style="--concept-color:var(--violet)" onclick="sendText('Explain diversification and why it matters')">
|
| 524 |
-
<div class="concept-icon">🌍</div>
|
| 525 |
-
<div class="concept-title">Diversification</div>
|
| 526 |
-
<div class="concept-desc">Don't put all your eggs in one basket. Spreading across assets reduces risk without sacrificing returns.</div>
|
| 527 |
-
<div class="concept-tag"><span class="badge badge-violet">Risk Management</span></div>
|
| 528 |
-
</div>
|
| 529 |
-
<div class="concept-card" style="--concept-color:var(--amber)" onclick="sendText('What is asset allocation and how should I allocate my portfolio?')">
|
| 530 |
-
<div class="concept-icon">🥧</div>
|
| 531 |
-
<div class="concept-title">Asset Allocation</div>
|
| 532 |
-
<div class="concept-desc">How you divide money between stocks, bonds, and other assets. The most important investment decision you'll make.</div>
|
| 533 |
-
<div class="concept-tag"><span class="badge badge-amber">Portfolio</span></div>
|
| 534 |
-
</div>
|
| 535 |
-
<div class="concept-card" style="--concept-color:var(--rose)" onclick="sendText('What is beta in investing and what does it tell me?')">
|
| 536 |
-
<div class="concept-icon">β</div>
|
| 537 |
-
<div class="concept-title">Beta & Volatility</div>
|
| 538 |
-
<div class="concept-desc">Beta measures how much an asset moves relative to the market. A beta of 1.5 means 50% more volatile than S&P 500.</div>
|
| 539 |
-
<div class="concept-tag"><span class="badge badge-rose">Metrics</span></div>
|
| 540 |
-
</div>
|
| 541 |
-
<div class="concept-card" style="--concept-color:var(--indigo)" onclick="sendText('What is an index fund and why do most pros recommend it?')">
|
| 542 |
-
<div class="concept-icon">📊</div>
|
| 543 |
-
<div class="concept-title">Index Funds</div>
|
| 544 |
-
<div class="concept-desc">Passively track a market index like the S&P 500. Low cost, diversified, and statistically outperform most active funds.</div>
|
| 545 |
-
<div class="concept-tag"><span class="badge badge-cyan">Beginner</span></div>
|
| 546 |
-
</div>
|
| 547 |
-
<div class="concept-card" style="--concept-color:var(--emerald)" onclick="sendText('Explain the 4% rule for retirement')">
|
| 548 |
-
<div class="concept-icon">🏖️</div>
|
| 549 |
-
<div class="concept-title">The 4% Rule</div>
|
| 550 |
-
<div class="concept-desc">Withdraw 4% of your nest egg annually in retirement. Based on 95% survival rate across 30-year historical periods.</div>
|
| 551 |
-
<div class="concept-tag"><span class="badge badge-emerald">Retirement</span></div>
|
| 552 |
-
</div>
|
| 553 |
-
<div class="concept-card" style="--concept-color:var(--cyan)" onclick="sendText('What is rebalancing and when should I rebalance my portfolio?')">
|
| 554 |
-
<div class="concept-icon">⚖️</div>
|
| 555 |
-
<div class="concept-title">Rebalancing</div>
|
| 556 |
-
<div class="concept-desc">Selling overweight assets and buying underweight ones to restore your target allocation. Do it annually or at 5% drift.</div>
|
| 557 |
-
<div class="concept-tag"><span class="badge badge-cyan">Strategy</span></div>
|
| 558 |
-
</div>
|
| 559 |
-
<div class="concept-card" style="--concept-color:var(--amber)" onclick="sendText('What is expense ratio and how does it affect my returns?')">
|
| 560 |
-
<div class="concept-icon">💸</div>
|
| 561 |
-
<div class="concept-title">Expense Ratios</div>
|
| 562 |
-
<div class="concept-desc">The annual fee funds charge as % of your investment. Even 0.5% more can cost $100K+ over 30 years.</div>
|
| 563 |
-
<div class="concept-tag"><span class="badge badge-amber">Cost</span></div>
|
| 564 |
-
</div>
|
| 565 |
-
</div>
|
| 566 |
-
</div>
|
| 567 |
-
|
| 568 |
-
<!-- ════════════════════════════════════════════════════════════
|
| 569 |
-
DO'S & DON'TS TAB
|
| 570 |
-
════════════════════════════════════════════════════════════ -->
|
| 571 |
-
<div class="ins-panel" id="ins-dos-donts">
|
| 572 |
-
<div class="dos-donts">
|
| 573 |
-
<div class="do-card">
|
| 574 |
-
<div class="do-header">✅ Do This</div>
|
| 575 |
-
<div class="tip-item"><div class="tip-icon">🕰️</div><div><strong>Start early</strong> — Even $50/month at 22 beats $500/month starting at 40. Time is your biggest multiplier.</div></div>
|
| 576 |
-
<div class="tip-item"><div class="tip-icon">📅</div><div><strong>Automate contributions</strong> — Set it and forget it. Remove emotion and ensure consistency every month.</div></div>
|
| 577 |
-
<div class="tip-item"><div class="tip-icon">📊</div><div><strong>Keep expense ratios low</strong> — Choose ETFs like VOO (0.03%) over actively managed funds (1%+).</div></div>
|
| 578 |
-
<div class="tip-item"><div class="tip-icon">🌍</div><div><strong>Diversify broadly</strong> — No single stock should exceed 10% of your portfolio when starting out.</div></div>
|
| 579 |
-
<div class="tip-item"><div class="tip-icon">💰</div><div><strong>Max out tax-advantaged accounts</strong> — 401k, Roth IRA, or HSA first before taxable accounts.</div></div>
|
| 580 |
-
<div class="tip-item"><div class="tip-icon">🛡️</div><div><strong>Maintain an emergency fund</strong> — 3–6 months of expenses in cash before investing aggressively.</div></div>
|
| 581 |
-
<div class="tip-item"><div class="tip-icon">📚</div><div><strong>Keep learning</strong> — Read one finance book a year. Try "The Little Book of Common Sense Investing" by Bogle.</div></div>
|
| 582 |
-
<div class="tip-item"><div class="tip-icon">📆</div><div><strong>Review quarterly</strong> — Check your portfolio every 3 months, not every day. Avoid reaction trading.</div></div>
|
| 583 |
-
</div>
|
| 584 |
-
<div class="dont-card">
|
| 585 |
-
<div class="dont-header">❌ Don't Do This</div>
|
| 586 |
-
<div class="tip-item"><div class="tip-icon">📰</div><div><strong>Don't invest based on news</strong> — By the time it's news, the market has already priced it in. Stay the course.</div></div>
|
| 587 |
-
<div class="tip-item"><div class="tip-icon">🎲</div><div><strong>Don't YOLO into meme stocks</strong> — Treat speculative picks as entertainment money — never more than 5% of portfolio.</div></div>
|
| 588 |
-
<div class="tip-item"><div class="tip-icon">😱</div><div><strong>Don't panic sell in crashes</strong> — Market drops of 20–40% are normal and temporary. Selling locks in your loss permanently.</div></div>
|
| 589 |
-
<div class="tip-item"><div class="tip-icon">⏰</div><div><strong>Don't try to time the market</strong> — Missing the 10 best days in the market over 20 years can cut your returns in half.</div></div>
|
| 590 |
-
<div class="tip-item"><div class="tip-icon">💳</div><div><strong>Don't invest money you need soon</strong> — Any money needed within 3 years should be in a HYSA, not the market.</div></div>
|
| 591 |
-
<div class="tip-item"><div class="tip-icon">🤙</div><div><strong>Don't take tips from social media</strong> — Most "finfluencers" are not licensed advisors. Verify everything independently.</div></div>
|
| 592 |
-
<div class="tip-item"><div class="tip-icon">🏦</div><div><strong>Don't ignore fees</strong> — Trading commissions, fund fees, and advisory fees compound over time just like returns do — negatively.</div></div>
|
| 593 |
-
<div class="tip-item"><div class="tip-icon">🔮</div><div><strong>Don't predict the market</strong> — Even professional fund managers fail to consistently beat the index. Humility pays.</div></div>
|
| 594 |
-
</div>
|
| 595 |
-
</div>
|
| 596 |
-
</div>
|
| 597 |
-
|
| 598 |
-
<!-- ════════════════════════════════════════════════════════════
|
| 599 |
-
GLOSSARY TAB
|
| 600 |
-
════════════════════════════════════════════════════════════ -->
|
| 601 |
-
<div class="ins-panel" id="ins-glossary">
|
| 602 |
-
<div style="margin-bottom:16px">
|
| 603 |
-
<input type="text" id="glossary-search" placeholder="🔍 Search terms…" oninput="filterGlossary()" style="max-width:320px">
|
| 604 |
-
</div>
|
| 605 |
-
<div class="glossary-grid" id="glossary-grid"></div>
|
| 606 |
-
</div>
|
| 607 |
-
|
| 608 |
-
</main>
|
| 609 |
-
</div>
|
| 610 |
-
|
| 611 |
-
<nav class="bottom-nav">
|
| 612 |
-
<div class="bottom-nav-inner">
|
| 613 |
-
<a href="index.html" class="bottom-nav-item"><span class="bnav-icon">🏠</span>Home</a>
|
| 614 |
-
<a href="portfolio.html" class="bottom-nav-item"><span class="bnav-icon">📊</span>Portfolio</a>
|
| 615 |
-
<a href="risk.html" class="bottom-nav-item"><span class="bnav-icon">🎯</span>Risk</a>
|
| 616 |
-
<a href="tracker.html" class="bottom-nav-item"><span class="bnav-icon">📈</span>Track</a>
|
| 617 |
-
<a href="calculators.html" class="bottom-nav-item"><span class="bnav-icon">🧮</span>Calc</a>
|
| 618 |
-
<a href="insights.html" class="bottom-nav-item"><span class="bnav-icon">💡</span>Insights</a>
|
| 619 |
-
</div>
|
| 620 |
-
</nav>
|
| 621 |
-
|
| 622 |
-
<script src="shared.js"></script>
|
| 623 |
-
<script>
|
| 624 |
-
// ── Tab Switching ─────────────────────────────────────────────────
|
| 625 |
-
document.querySelectorAll('.ins-tab').forEach(btn => {
|
| 626 |
-
btn.addEventListener('click', () => {
|
| 627 |
-
document.querySelectorAll('.ins-tab,.ins-panel').forEach(el => el.classList.remove('active'));
|
| 628 |
-
btn.classList.add('active');
|
| 629 |
-
document.getElementById('ins-' + btn.dataset.ins).classList.add('active');
|
| 630 |
-
});
|
| 631 |
-
});
|
| 632 |
-
|
| 633 |
-
// ── Portfolio Context Summary ─────────────────────────────────────
|
| 634 |
-
function buildContextSummary() {
|
| 635 |
-
const p = getPortfolio();
|
| 636 |
-
const totalVal = p.assets.reduce((s,a)=>s+a.shares*a.price,0);
|
| 637 |
-
const riskScore = calcRiskScore(p);
|
| 638 |
-
const divScore = calcDiversification(p);
|
| 639 |
-
const equityPct = p.assets.filter(a=>a.type==='Stock'||a.type==='ETF').reduce((s,a)=>s+a.pct,0);
|
| 640 |
-
document.getElementById('context-summary').innerHTML = `
|
| 641 |
-
<div style="display:flex;flex-direction:column;gap:6px">
|
| 642 |
-
<div>💼 <strong>${p.assets.length} holdings</strong> · Total: <strong>${fmt$(totalVal)}</strong></div>
|
| 643 |
-
<div>🎯 Risk Score: <strong style="color:var(--amber)">${riskScore}/100</strong> · Profile: <strong>${p.riskProfile||'Moderate'}</strong></div>
|
| 644 |
-
<div>🌍 Diversification: <strong style="color:var(--emerald)">${divScore}/100</strong></div>
|
| 645 |
-
<div>📊 Equity: <strong>${equityPct}%</strong> · Goals: <strong>${(p.goals||['Wealth Building']).join(', ')}</strong></div>
|
| 646 |
-
</div>
|
| 647 |
-
`;
|
| 648 |
-
}
|
| 649 |
-
|
| 650 |
-
// ── AI Chat ───────────────────────────────────────────────────────
|
| 651 |
-
let chatHistory = [];
|
| 652 |
-
let isLoading = false;
|
| 653 |
-
|
| 654 |
-
function buildSystemPrompt() {
|
| 655 |
-
const p = getPortfolio();
|
| 656 |
-
const totalVal = p.assets.reduce((s,a)=>s+a.shares*(MARKET_PRICES[a.ticker]?.price||a.price),0);
|
| 657 |
-
const riskScore = calcRiskScore(p);
|
| 658 |
-
const divScore = calcDiversification(p);
|
| 659 |
-
const equityPct = p.assets.filter(a=>a.type==='Stock'||a.type==='ETF').reduce((s,a)=>s+a.pct,0);
|
| 660 |
-
const bondPct = p.assets.filter(a=>a.type==='Bond').reduce((s,a)=>s+a.pct,0);
|
| 661 |
-
|
| 662 |
-
return `You are FinWise AI, a friendly, expert financial advisor built into the FinWise personal finance app.
|
| 663 |
-
|
| 664 |
-
USER'S PORTFOLIO CONTEXT:
|
| 665 |
-
- Holdings: ${p.assets.map(a=>`${a.ticker} (${a.pct}%)`).join(', ')}
|
| 666 |
-
- Total Value: $${totalVal.toFixed(2)}
|
| 667 |
-
- Total Invested: $${p.totalInvested}
|
| 668 |
-
- Risk Score: ${riskScore}/100 (${p.riskProfile || 'Moderate'})
|
| 669 |
-
- Diversification Score: ${divScore}/100
|
| 670 |
-
- Equity Allocation: ${equityPct}%
|
| 671 |
-
- Bond Allocation: ${bondPct}%
|
| 672 |
-
- Investment Goals: ${(p.goals||['Wealth Building']).join(', ')}
|
| 673 |
-
|
| 674 |
-
PERSONA:
|
| 675 |
-
- Friendly, warm, encouraging — never condescending
|
| 676 |
-
- Use simple language; avoid jargon (or explain it when necessary)
|
| 677 |
-
- Be direct and actionable — give concrete advice, not just generic platitudes
|
| 678 |
-
- Use bullet points and bold text for clarity
|
| 679 |
-
- Add relevant emojis to make responses engaging
|
| 680 |
-
- Be concise but complete — aim for 100-200 words per response
|
| 681 |
-
- Always note: you're an AI, not a licensed financial advisor
|
| 682 |
-
|
| 683 |
-
FOCUS: Help beginners understand investing. Provide personalized insights based on their actual portfolio above.`;
|
| 684 |
-
}
|
| 685 |
-
|
| 686 |
-
async function sendMessage() {
|
| 687 |
-
const input = document.getElementById('chat-input');
|
| 688 |
-
const msg = input.value.trim();
|
| 689 |
-
if (!msg || isLoading) return;
|
| 690 |
-
input.value = '';
|
| 691 |
-
sendText(msg);
|
| 692 |
-
}
|
| 693 |
-
|
| 694 |
-
function sendQuickPrompt(btn) {
|
| 695 |
-
sendText(btn.textContent.replace(/^[^ ]+ /,'').trim());
|
| 696 |
-
}
|
| 697 |
-
|
| 698 |
-
async function sendText(text) {
|
| 699 |
-
if (isLoading) return;
|
| 700 |
-
|
| 701 |
-
appendMessage('user', text);
|
| 702 |
-
chatHistory.push({ role:'user', content: text });
|
| 703 |
-
|
| 704 |
-
isLoading = true;
|
| 705 |
-
document.getElementById('send-btn').disabled = true;
|
| 706 |
-
|
| 707 |
-
const typingEl = appendTyping();
|
| 708 |
-
|
| 709 |
-
try {
|
| 710 |
-
const response = await fetch('https://api.anthropic.com/v1/messages', {
|
| 711 |
-
method: 'POST',
|
| 712 |
-
headers: { 'Content-Type': 'application/json' },
|
| 713 |
-
body: JSON.stringify({
|
| 714 |
-
model: 'claude-sonnet-4-20250514',
|
| 715 |
-
max_tokens: 1000,
|
| 716 |
-
system: buildSystemPrompt(),
|
| 717 |
-
messages: chatHistory
|
| 718 |
-
})
|
| 719 |
-
});
|
| 720 |
-
|
| 721 |
-
typingEl.remove();
|
| 722 |
-
const data = await response.json();
|
| 723 |
-
|
| 724 |
-
if (data.error) throw new Error(data.error.message);
|
| 725 |
-
|
| 726 |
-
const reply = data.content?.[0]?.text || 'Sorry, I had trouble generating a response. Please try again.';
|
| 727 |
-
appendMessage('ai', formatAIReply(reply));
|
| 728 |
-
chatHistory.push({ role:'assistant', content: reply });
|
| 729 |
-
|
| 730 |
-
} catch (err) {
|
| 731 |
-
typingEl.remove();
|
| 732 |
-
// Fallback: use built-in responses
|
| 733 |
-
const fallback = getFallbackResponse(text);
|
| 734 |
-
appendMessage('ai', formatAIReply(fallback));
|
| 735 |
-
chatHistory.push({ role:'assistant', content: fallback });
|
| 736 |
-
}
|
| 737 |
-
|
| 738 |
-
isLoading = false;
|
| 739 |
-
document.getElementById('send-btn').disabled = false;
|
| 740 |
-
}
|
| 741 |
-
|
| 742 |
-
function formatAIReply(text) {
|
| 743 |
-
return text
|
| 744 |
-
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
|
| 745 |
-
.replace(/\*(.*?)\*/g, '<em>$1</em>')
|
| 746 |
-
.replace(/\n\n/g, '<br><br>')
|
| 747 |
-
.replace(/\n- /g, '<br>• ')
|
| 748 |
-
.replace(/\n• /g, '<br>• ')
|
| 749 |
-
.replace(/\n(\d+)\. /g, '<br>$1. ');
|
| 750 |
-
}
|
| 751 |
-
|
| 752 |
-
function getFallbackResponse(query) {
|
| 753 |
-
const q = query.toLowerCase();
|
| 754 |
-
const p = getPortfolio();
|
| 755 |
-
const equityPct = p.assets.filter(a=>a.type==='Stock'||a.type==='ETF').reduce((s,a)=>s+a.pct,0);
|
| 756 |
-
const riskScore = calcRiskScore(p);
|
| 757 |
-
|
| 758 |
-
if (q.includes('portfolio') || q.includes('analyze')) {
|
| 759 |
-
return `**Here's a quick analysis of your portfolio:** 📊\n\n` +
|
| 760 |
-
`You're holding **${p.assets.length} assets** with **${equityPct}% in equities**. ` +
|
| 761 |
-
`Your risk score is **${riskScore}/100**, which puts you in the **${p.riskProfile||'Moderate'}** category.\n\n` +
|
| 762 |
-
`**Strengths:**\n- Good asset count for diversification\n- Mix of ETFs and individual stocks\n\n` +
|
| 763 |
-
`**Suggestions:**\n- Consider if bond allocation matches your timeline\n- Review any single position over 30%\n\n` +
|
| 764 |
-
`*Disclaimer: This is AI-generated analysis, not licensed financial advice.*`;
|
| 765 |
-
}
|
| 766 |
-
if (q.includes('etf') || q.includes('index')) {
|
| 767 |
-
return `**ETFs (Exchange-Traded Funds) 101:** 📊\n\nAn ETF is a basket of stocks or bonds that trades on an exchange like a single stock.\n\n**Why they're great for beginners:**\n- **Instant diversification** — VOO holds ~500 companies\n- **Low cost** — VOO charges just 0.03% annually\n- **No stock picking required** — just buy the market\n\n**Your portfolio already has ETFs:** ${p.assets.filter(a=>a.type==='ETF').map(a=>a.ticker).join(', ')||'None yet'} — great choice! 🎉`;
|
| 768 |
-
}
|
| 769 |
-
if (q.includes('compound')) {
|
| 770 |
-
return `**Compound Interest — The 8th Wonder of the World** ⚡\n\nCompound interest means earning returns on your returns.\n\n**Simple example:**\n- Invest $10,000 at 8%/year\n- Year 1: $10,800\n- Year 10: $21,589\n- Year 30: $100,627 — **10× your money!**\n\nThe key insight: **time accelerates everything**. Starting at 25 vs 35 can mean the difference of $300,000+ at retirement — even with the same contributions.`;
|
| 771 |
-
}
|
| 772 |
-
if (q.includes('risk') || q.includes('rebalance')) {
|
| 773 |
-
return `**Your Risk Profile:** 🎯\n\nYour current risk score is **${riskScore}/100**.\n\n**Quick rebalancing check:**\n- If any single asset has drifted >5% from target → trim it\n- If equity % has grown significantly → add bonds\n- Do this **annually** or when allocation drifts >5%\n\n**For your portfolio:** ${equityPct > 80 ? '⚠️ High equity concentration. Consider adding some bonds for stability.' : '✅ Equity balance looks reasonable for a growth-oriented investor.'}\n\n*Review every quarter, rebalance annually.*`;
|
| 774 |
-
}
|
| 775 |
-
if (q.includes('retirement') || q.includes('4%')) {
|
| 776 |
-
return `**The 4% Rule Explained** 🏖️\n\nThe 4% rule says: in retirement, you can safely withdraw 4% of your portfolio annually and it should last 30+ years.\n\n**Example:**\n- $1,000,000 nest egg → $40,000/year ($3,333/mo)\n- $500,000 → $20,000/year ($1,667/mo)\n\n**Your goal:** Save **25× your annual expenses**\n\n**Use our Retirement Calculator** to see exactly when you'll hit your number! 🧮`;
|
| 777 |
-
}
|
| 778 |
-
if (q.includes('dollar') || q.includes('dca') || q.includes('averaging')) {
|
| 779 |
-
return `**Dollar-Cost Averaging (DCA)** 📅\n\nInstead of investing a lump sum, you invest a fixed amount at regular intervals — regardless of the market price.\n\n**Why it works:**\n- Removes emotion from investing\n- You buy more shares when prices are low\n- You buy fewer shares when prices are high\n- Averages out your cost over time\n\n**Example:** $300/month in VOO no matter what the market does. You don't need to predict anything — just stay consistent. That's it! 🎯`;
|
| 780 |
-
}
|
| 781 |
-
|
| 782 |
-
return `**Great question!** 💡\n\nThat's an important topic in personal finance. Based on your portfolio (${p.assets.map(a=>a.ticker).join(', ')}), here's what I'd suggest:\n\n- Keep learning and asking questions like this — financial literacy compounds just like money does!\n- Use the Calculators to model different scenarios\n- Review the Concepts section for deeper dives\n\n*Connect to the internet to get fully personalized AI responses powered by Claude.* 🤖`;
|
| 783 |
-
}
|
| 784 |
-
|
| 785 |
-
function appendMessage(role, html) {
|
| 786 |
-
const msgs = document.getElementById('chat-messages');
|
| 787 |
-
const div = document.createElement('div');
|
| 788 |
-
div.className = 'chat-message ' + (role==='user'?'user':'');
|
| 789 |
-
div.innerHTML = `
|
| 790 |
-
<div class="chat-avatar ${role==='user'?'user-av':'ai-av'}">${role==='user'?'👤':'🤖'}</div>
|
| 791 |
-
<div class="chat-bubble ${role}">${html}</div>
|
| 792 |
-
`;
|
| 793 |
-
msgs.appendChild(div);
|
| 794 |
-
msgs.scrollTop = msgs.scrollHeight;
|
| 795 |
-
return div;
|
| 796 |
-
}
|
| 797 |
-
|
| 798 |
-
function appendTyping() {
|
| 799 |
-
const msgs = document.getElementById('chat-messages');
|
| 800 |
-
const div = document.createElement('div');
|
| 801 |
-
div.className = 'chat-message';
|
| 802 |
-
div.innerHTML = `
|
| 803 |
-
<div class="chat-avatar ai-av">🤖</div>
|
| 804 |
-
<div class="chat-typing"><span></span><span></span><span></span></div>
|
| 805 |
-
`;
|
| 806 |
-
msgs.appendChild(div);
|
| 807 |
-
msgs.scrollTop = msgs.scrollHeight;
|
| 808 |
-
return div;
|
| 809 |
-
}
|
| 810 |
-
|
| 811 |
-
// ── Glossary ──────────────────────────────────────────────────────
|
| 812 |
-
const GLOSSARY = [
|
| 813 |
-
{ term:'APY', def:'Annual Percentage Yield — the real return earned in a year, including compound interest.' },
|
| 814 |
-
{ term:'Asset Allocation', def:'How you divide your portfolio among different asset classes like stocks, bonds, and cash.' },
|
| 815 |
-
{ term:'Bear Market', def:'A market decline of 20% or more from recent highs, lasting at least 2 months.' },
|
| 816 |
-
{ term:'Beta', def:'Measures an asset\'s volatility vs the market. Beta>1 = more volatile than the S&P 500.' },
|
| 817 |
-
{ term:'Blue-Chip Stock', def:'Shares of large, reputable companies with long track records of stable performance.' },
|
| 818 |
-
{ term:'Bond', def:'A loan you give to a company or government. They pay you interest and return your principal at maturity.' },
|
| 819 |
-
{ term:'Bull Market', def:'A period of rising prices, generally defined as a 20%+ gain from recent lows.' },
|
| 820 |
-
{ term:'Compound Interest', def:'Earning returns on your returns. The longer you invest, the more powerful this becomes.' },
|
| 821 |
-
{ term:'Diversification', def:'Spreading investments across many assets to reduce risk without necessarily reducing returns.' },
|
| 822 |
-
{ term:'Dividend', def:'A portion of a company\'s profits paid to shareholders, usually quarterly.' },
|
| 823 |
-
{ term:'DCA', def:'Dollar-Cost Averaging — investing a fixed amount regularly, regardless of market price.' },
|
| 824 |
-
{ term:'ETF', def:'Exchange-Traded Fund — a basket of securities that trades on an exchange like a single stock.' },
|
| 825 |
-
{ term:'Expense Ratio', def:'Annual fee charged by mutual funds/ETFs, expressed as % of your investment.' },
|
| 826 |
-
{ term:'FIRE', def:'Financial Independence, Retire Early — movement focused on saving aggressively to retire young.' },
|
| 827 |
-
{ term:'Index Fund', def:'A fund that tracks a market index (like S&P 500) passively. Usually low-cost and diversified.' },
|
| 828 |
-
{ term:'Liquidity', def:'How easily an asset can be converted to cash. Stocks are liquid; real estate is not.' },
|
| 829 |
-
{ term:'Market Cap', def:'Total market value of a company\'s outstanding shares (Price × Shares Outstanding).' },
|
| 830 |
-
{ term:'P/E Ratio', def:'Price-to-Earnings ratio — how much investors pay per dollar of earnings. Measures valuation.' },
|
| 831 |
-
{ term:'Rebalancing', def:'Adjusting your portfolio back to target allocation by selling overweighted and buying underweighted assets.' },
|
| 832 |
-
{ term:'Risk Tolerance', def:'Your ability (financial) and willingness (emotional) to endure market fluctuations.' },
|
| 833 |
-
{ term:'Roth IRA', def:'A retirement account funded with after-tax money. Qualified withdrawals are tax-free.' },
|
| 834 |
-
{ term:'S&P 500', def:'An index tracking 500 of the largest US publicly traded companies by market cap.' },
|
| 835 |
-
{ term:'SIP', def:'Systematic Investment Plan — regular, automated investments at fixed intervals.' },
|
| 836 |
-
{ term:'Volatility', def:'The degree of price variation over time. Higher volatility = higher risk and potential reward.' },
|
| 837 |
-
{ term:'Yield', def:'Income generated by an investment, usually expressed as a percentage of the investment\'s value.' },
|
| 838 |
-
];
|
| 839 |
-
|
| 840 |
-
function renderGlossary(filter='') {
|
| 841 |
-
const items = filter ? GLOSSARY.filter(g=>g.term.toLowerCase().includes(filter)||g.def.toLowerCase().includes(filter)) : GLOSSARY;
|
| 842 |
-
document.getElementById('glossary-grid').innerHTML = items.map(g => `
|
| 843 |
-
<div class="glossary-item">
|
| 844 |
-
<div class="glos-term">${g.term}</div>
|
| 845 |
-
<div class="glos-def">${g.def}</div>
|
| 846 |
-
</div>
|
| 847 |
-
`).join('');
|
| 848 |
-
}
|
| 849 |
-
|
| 850 |
-
function filterGlossary() {
|
| 851 |
-
renderGlossary(document.getElementById('glossary-search').value.toLowerCase());
|
| 852 |
-
}
|
| 853 |
-
|
| 854 |
-
document.addEventListener('DOMContentLoaded', () => {
|
| 855 |
-
buildContextSummary();
|
| 856 |
-
renderGlossary();
|
| 857 |
-
});
|
| 858 |
-
</script>
|
| 859 |
-
</body>
|
| 860 |
-
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|