Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FinWise โ AI Insights</title> | |
| <link rel="stylesheet" href="shared.css"> | |
| <style> | |
| /* โโ AI Chat Interface โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ | |
| .ai-chat-wrap { | |
| display: flex; | |
| flex-direction: column; | |
| height: 420px; | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r); | |
| overflow: hidden; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .chat-message { | |
| display: flex; | |
| gap: 10px; | |
| max-width: 90%; | |
| animation: fadeInUp 0.3s ease; | |
| } | |
| .chat-message.user { | |
| margin-left: auto; | |
| flex-direction: row-reverse; | |
| } | |
| .chat-avatar { | |
| width: 32px; height: 32px; | |
| border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 16px; | |
| flex-shrink: 0; | |
| align-self: flex-end; | |
| } | |
| .chat-avatar.ai-av { background: linear-gradient(135deg, var(--cyan), var(--emerald)); } | |
| .chat-avatar.user-av { background: linear-gradient(135deg, var(--violet), var(--indigo)); } | |
| .chat-bubble { | |
| padding: 12px 16px; | |
| border-radius: 14px; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| max-width: 100%; | |
| } | |
| .chat-bubble.ai { background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; } | |
| .chat-bubble.user { background: linear-gradient(135deg,var(--cyan-d),var(--cyan)); color: var(--bg); border-bottom-right-radius: 4px; } | |
| .chat-bubble.ai strong { color: var(--cyan); } | |
| .chat-bubble.ai em { color: var(--emerald); font-style: normal; font-weight: 600; } | |
| .chat-bubble ul { padding-left: 18px; margin-top: 6px; } | |
| .chat-bubble li { margin-bottom: 4px; } | |
| .chat-typing { | |
| display: flex; | |
| gap: 4px; | |
| padding: 14px 16px; | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| border-bottom-left-radius: 4px; | |
| width: fit-content; | |
| } | |
| .chat-typing span { | |
| width: 7px; height: 7px; | |
| border-radius: 50%; | |
| background: var(--cyan); | |
| animation: typing 1.2s infinite; | |
| } | |
| .chat-typing span:nth-child(2) { animation-delay: 0.2s; } | |
| .chat-typing span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes typing { 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:1;transform:scale(1)} } | |
| .chat-input-bar { | |
| border-top: 1px solid var(--border); | |
| padding: 12px 16px; | |
| display: flex; | |
| gap: 10px; | |
| background: var(--bg2); | |
| } | |
| .chat-input { | |
| flex: 1; | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: 100px; | |
| padding: 10px 18px; | |
| color: var(--text); | |
| font-family: var(--font-body); | |
| font-size: 14px; | |
| outline: none; | |
| transition: border-color var(--transition); | |
| width: auto; | |
| } | |
| .chat-input:focus { border-color: var(--cyan); } | |
| .chat-send-btn { | |
| width: 42px; height: 42px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--cyan-d), var(--cyan)); | |
| border: none; | |
| cursor: pointer; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 18px; | |
| transition: all var(--transition); | |
| flex-shrink: 0; | |
| } | |
| .chat-send-btn:hover { box-shadow: 0 0 16px rgba(34,211,238,0.5); transform: scale(1.05); } | |
| .chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } | |
| .quick-prompts { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| padding: 10px 16px; | |
| border-top: 1px solid var(--border); | |
| background: var(--bg2); | |
| } | |
| .quick-prompt { | |
| padding: 6px 12px; | |
| border-radius: 100px; | |
| border: 1px solid var(--border2); | |
| background: transparent; | |
| color: var(--text2); | |
| font-size: 12px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| font-family: var(--font-body); | |
| transition: all var(--transition); | |
| white-space: nowrap; | |
| } | |
| .quick-prompt:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(34,211,238,0.06); } | |
| /* โโ Concept Cards โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ | |
| .concept-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 16px; | |
| } | |
| .concept-card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r); | |
| padding: 20px; | |
| transition: all var(--transition); | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .concept-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: var(--concept-color, var(--cyan)); | |
| } | |
| .concept-card:hover { | |
| border-color: var(--border2); | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 30px rgba(0,0,0,0.4); | |
| } | |
| .concept-icon { font-size: 32px; margin-bottom: 10px; } | |
| .concept-title { font-family: var(--font-head); font-size: 16px; font-weight: 700; margin-bottom: 6px; } | |
| .concept-desc { font-size: 13px; color: var(--text2); line-height: 1.5; } | |
| .concept-tag { margin-top: 12px; } | |
| /* โโ Do's & Don'ts โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ | |
| .dos-donts { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| } | |
| .do-card { | |
| background: rgba(16,185,129,0.05); | |
| border: 1px solid rgba(16,185,129,0.2); | |
| border-radius: var(--r); | |
| padding: 20px; | |
| } | |
| .dont-card { | |
| background: rgba(244,63,94,0.05); | |
| border: 1px solid rgba(244,63,94,0.2); | |
| border-radius: var(--r); | |
| padding: 20px; | |
| } | |
| .do-header { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--emerald); margin-bottom: 14px; } | |
| .dont-header { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--rose); margin-bottom: 14px; } | |
| .tip-item { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 12px; | |
| font-size: 13px; | |
| line-height: 1.5; | |
| } | |
| .tip-icon { flex-shrink: 0; font-size: 16px; margin-top: 1px; } | |
| /* โโ Insight Cards โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ | |
| .insight-feed { display: flex; flex-direction: column; gap: 14px; } | |
| .insight-item { | |
| display: flex; | |
| gap: 14px; | |
| padding: 16px; | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--r-sm); | |
| transition: all var(--transition); | |
| } | |
| .insight-item:hover { border-color: var(--border2); } | |
| .insight-category { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| font-size: 10px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| margin-bottom: 6px; | |
| } | |
| .insight-title { font-weight: 700; font-size: 14px; margin-bottom: 5px; } | |
| .insight-body { font-size: 13px; color: var(--text2); line-height: 1.5; } | |
| /* โโ Glossary โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ | |
| .glossary-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); | |
| gap: 12px; | |
| } | |
| .glossary-item { | |
| background: var(--bg3); | |
| border-radius: var(--r-sm); | |
| padding: 14px; | |
| border: 1px solid var(--border); | |
| } | |
| .glos-term { font-weight: 700; color: var(--cyan); margin-bottom: 4px; font-size: 14px; } | |
| .glos-def { font-size: 12px; color: var(--text2); line-height: 1.5; } | |
| /* โโ Tabs โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */ | |
| .insight-tabs { | |
| display: flex; | |
| gap: 6px; | |
| margin-bottom: 24px; | |
| flex-wrap: wrap; | |
| } | |
| .ins-tab { | |
| padding: 9px 18px; | |
| border-radius: 100px; | |
| border: 1px solid var(--border); | |
| background: transparent; | |
| color: var(--text2); | |
| font-family: var(--font-body); | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| } | |
| .ins-tab:hover { border-color: var(--border2); color: var(--text); } | |
| .ins-tab.active { border-color: var(--cyan); background: rgba(34,211,238,0.1); color: var(--cyan); } | |
| .ins-panel { display: none; } | |
| .ins-panel.active { display: block; } | |
| .gamification-bar { | |
| background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(34,211,238,0.05)); | |
| border: 1px solid rgba(139,92,246,0.2); | |
| border-radius: var(--r); | |
| padding: 20px 24px; | |
| margin-bottom: 24px; | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .xp-badge { | |
| background: linear-gradient(135deg, var(--violet), var(--indigo)); | |
| border-radius: var(--r-sm); | |
| padding: 14px; | |
| text-align: center; | |
| min-width: 80px; | |
| } | |
| .xp-val { font-family: var(--font-head); font-size: 22px; font-weight: 800; } | |
| .xp-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; } | |
| .level-info { flex: 1; } | |
| .level-name { font-family: var(--font-head); font-size: 18px; font-weight: 700; margin-bottom: 4px; } | |
| .achievements { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| margin-top: 12px; | |
| } | |
| .achievement { | |
| background: var(--bg3); | |
| border-radius: var(--r-sm); | |
| padding: 8px 12px; | |
| font-size: 12px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| border: 1px solid var(--border); | |
| } | |
| .achievement.earned { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-shell"> | |
| <nav class="sidebar"> | |
| <div class="sidebar-logo"> | |
| <div class="logo-mark"> | |
| <div class="logo-icon">๐</div> | |
| <div><div class="logo-text">FinWise</div><div class="logo-sub">Smart Investing</div></div> | |
| </div> | |
| </div> | |
| <div class="nav-section"> | |
| <div class="nav-label">Main</div> | |
| <a href="index.html" class="nav-item"><span class="nav-icon">๐ </span> Dashboard</a> | |
| <a href="portfolio.html" class="nav-item"><span class="nav-icon">๐</span> Portfolio Builder</a> | |
| <a href="risk.html" class="nav-item"><span class="nav-icon">๐ฏ</span> Risk Analyzer</a> | |
| <a href="tracker.html" class="nav-item"><span class="nav-icon">๐</span> Tracker</a> | |
| <div class="nav-label">Tools</div> | |
| <a href="calculators.html" class="nav-item"><span class="nav-icon">๐งฎ</span> Calculators</a> | |
| <a href="insights.html" class="nav-item"><span class="nav-icon">๐ก</span> Insights <span class="nav-badge">New</span></a> | |
| </div> | |
| <div class="sidebar-footer"> | |
| <div class="market-ticker">Live Market</div> | |
| <div id="sidebar-tickers"></div> | |
| </div> | |
| </nav> | |
| <main class="main-content"> | |
| <div class="page-header fade-in"> | |
| <div class="page-title">AI <span>Insights</span></div> | |
| <div class="page-subtitle">Personalized guidance, education, and smart financial tips powered by AI</div> | |
| </div> | |
| <!-- Gamification Bar --> | |
| <div class="gamification-bar fade-in"> | |
| <div class="xp-badge"> | |
| <div class="xp-val">340</div> | |
| <div class="xp-lbl">XP Points</div> | |
| </div> | |
| <div class="level-info"> | |
| <div class="level-name">๐ฑ Growing Investor โ Level 4</div> | |
| <div class="text-muted text-sm">160 XP until Level 5: Savvy Saver</div> | |
| <div class="progress-bar" style="margin-top:8px"> | |
| <div class="progress-fill" style="width:68%;background:linear-gradient(90deg,var(--violet),var(--cyan))"></div> | |
| </div> | |
| <div class="achievements"> | |
| <div class="achievement earned">๐ First Portfolio</div> | |
| <div class="achievement earned">๐ Risk Assessed</div> | |
| <div class="achievement earned">๐งฎ Calc Explorer</div> | |
| <div class="achievement" style="opacity:0.5">๐ฏ Goal Setter</div> | |
| <div class="achievement" style="opacity:0.5">๐ฐ $10K Milestone</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab Nav --> | |
| <div class="insight-tabs fade-in"> | |
| <button class="ins-tab active" data-ins="ai-chat">๐ค AI Advisor</button> | |
| <button class="ins-tab" data-ins="daily">๐ก Daily Insights</button> | |
| <button class="ins-tab" data-ins="concepts">๐ Concepts</button> | |
| <button class="ins-tab" data-ins="dos-donts">โ Do's & Don'ts</button> | |
| <button class="ins-tab" data-ins="glossary">๐ Glossary</button> | |
| </div> | |
| <!-- โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ | |
| AI ADVISOR TAB | |
| โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ --> | |
| <div class="ins-panel active fade-in" id="ins-ai-chat"> | |
| <div class="grid-60-40"> | |
| <div> | |
| <div class="card" style="padding:0;overflow:hidden"> | |
| <div style="padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px"> | |
| <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> | |
| <div> | |
| <div style="font-weight:700;font-size:15px">FinWise AI</div> | |
| <div style="font-size:12px;color:var(--emerald)">โ Online ยท Powered by Claude</div> | |
| </div> | |
| <div style="margin-left:auto"> | |
| <span class="badge badge-cyan">Beta</span> | |
| </div> | |
| </div> | |
| <div class="ai-chat-wrap" style="border:none;border-radius:0;height:380px"> | |
| <div class="chat-messages" id="chat-messages"> | |
| <!-- Initial message --> | |
| <div class="chat-message"> | |
| <div class="chat-avatar ai-av">๐ค</div> | |
| <div class="chat-bubble ai"> | |
| <strong>Hey there, investor! ๐</strong><br><br> | |
| 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> | |
| <em>What would you like to explore today?</em> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="quick-prompts"> | |
| <button class="quick-prompt" onclick="sendQuickPrompt(this)">๐ Analyze my portfolio</button> | |
| <button class="quick-prompt" onclick="sendQuickPrompt(this)">๐ฏ Am I taking too much risk?</button> | |
| <button class="quick-prompt" onclick="sendQuickPrompt(this)">๐ก How do ETFs work?</button> | |
| <button class="quick-prompt" onclick="sendQuickPrompt(this)">๐๏ธ Retirement planning tips</button> | |
| <button class="quick-prompt" onclick="sendQuickPrompt(this)">๐ What is dollar-cost averaging?</button> | |
| <button class="quick-prompt" onclick="sendQuickPrompt(this)">โก Should I rebalance now?</button> | |
| </div> | |
| <div class="chat-input-bar"> | |
| <input type="text" class="chat-input" id="chat-input" placeholder="Ask me anything about investingโฆ" onkeydown="if(event.key==='Enter')sendMessage()"> | |
| <button class="chat-send-btn" id="send-btn" onclick="sendMessage()">โค</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar topics --> | |
| <div> | |
| <div class="card"> | |
| <div class="card-title">๐ Suggested Topics</div> | |
| <div class="insight-feed"> | |
| <div class="insight-item" style="cursor:pointer" onclick="sendText('What is compound interest and why is it important?')"> | |
| <div> | |
| <div class="insight-category" style="color:var(--cyan)">๐ Education</div> | |
| <div class="insight-title">The Magic of Compound Interest</div> | |
| <div class="insight-body">Why time in market beats timing the market</div> | |
| </div> | |
| </div> | |
| <div class="insight-item" style="cursor:pointer" onclick="sendText('Explain the 4% rule for retirement withdrawals')"> | |
| <div> | |
| <div class="insight-category" style="color:var(--emerald)">๐๏ธ Retirement</div> | |
| <div class="insight-title">The 4% Withdrawal Rule</div> | |
| <div class="insight-body">How much you can safely spend in retirement</div> | |
| </div> | |
| </div> | |
| <div class="insight-item" style="cursor:pointer" onclick="sendText('What is portfolio rebalancing and when should I do it?')"> | |
| <div> | |
| <div class="insight-category" style="color:var(--violet)">โ๏ธ Strategy</div> | |
| <div class="insight-title">When to Rebalance</div> | |
| <div class="insight-body">Keep your risk in check automatically</div> | |
| </div> | |
| </div> | |
| <div class="insight-item" style="cursor:pointer" onclick="sendText('What is the difference between ETFs and mutual funds?')"> | |
| <div> | |
| <div class="insight-category" style="color:var(--amber)">๐ Basics</div> | |
| <div class="insight-title">ETFs vs Mutual Funds</div> | |
| <div class="insight-body">Which is better for beginner investors?</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI context card --> | |
| <div class="card" style="margin-top:16px;background:linear-gradient(135deg,rgba(34,211,238,0.06),rgba(16,185,129,0.03))"> | |
| <div class="card-title">๐ Your Portfolio Context</div> | |
| <div id="context-summary" style="font-size:13px;color:var(--text2);line-height:1.6"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ | |
| DAILY INSIGHTS TAB | |
| โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ --> | |
| <div class="ins-panel" id="ins-daily"> | |
| <div class="insight-feed"> | |
| <div class="insight-item"> | |
| <div style="font-size:36px">๐ </div> | |
| <div> | |
| <div class="insight-category badge-cyan">Daily Tip</div> | |
| <div class="insight-title">Automate Your Investments</div> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="insight-item"> | |
| <div style="font-size:36px">๐ฐ</div> | |
| <div> | |
| <div class="insight-category badge-amber">Market Insight</div> | |
| <div class="insight-title">Fed Policy & Your Bonds</div> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="insight-item"> | |
| <div style="font-size:36px">โก</div> | |
| <div> | |
| <div class="insight-category badge-emerald">Action Item</div> | |
| <div class="insight-title">Review Your Emergency Fund First</div> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="insight-item"> | |
| <div style="font-size:36px">๐ง </div> | |
| <div> | |
| <div class="insight-category badge-violet">Behavioral Finance</div> | |
| <div class="insight-title">Don't Check Your Portfolio Daily</div> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="insight-item"> | |
| <div style="font-size:36px">๐ก</div> | |
| <div> | |
| <div class="insight-category badge-rose">Watch Out For</div> | |
| <div class="insight-title">Expense Ratios Add Up</div> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ | |
| CONCEPTS TAB | |
| โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ --> | |
| <div class="ins-panel" id="ins-concepts"> | |
| <div class="concept-grid"> | |
| <div class="concept-card" style="--concept-color:var(--cyan)" onclick="sendText('Explain compound interest with a real example')"> | |
| <div class="concept-icon">โก</div> | |
| <div class="concept-title">Compound Interest</div> | |
| <div class="concept-desc">The 8th wonder of the world โ earning interest on your interest. Time is your greatest asset.</div> | |
| <div class="concept-tag"><span class="badge badge-cyan">Beginner</span></div> | |
| </div> | |
| <div class="concept-card" style="--concept-color:var(--emerald)" onclick="sendText('What is dollar-cost averaging and how do I use it?')"> | |
| <div class="concept-icon">๐ </div> | |
| <div class="concept-title">Dollar-Cost Averaging</div> | |
| <div class="concept-desc">Invest a fixed amount regularly regardless of price. Reduces the impact of volatility automatically.</div> | |
| <div class="concept-tag"><span class="badge badge-emerald">Strategy</span></div> | |
| </div> | |
| <div class="concept-card" style="--concept-color:var(--violet)" onclick="sendText('Explain diversification and why it matters')"> | |
| <div class="concept-icon">๐</div> | |
| <div class="concept-title">Diversification</div> | |
| <div class="concept-desc">Don't put all your eggs in one basket. Spreading across assets reduces risk without sacrificing returns.</div> | |
| <div class="concept-tag"><span class="badge badge-violet">Risk Management</span></div> | |
| </div> | |
| <div class="concept-card" style="--concept-color:var(--amber)" onclick="sendText('What is asset allocation and how should I allocate my portfolio?')"> | |
| <div class="concept-icon">๐ฅง</div> | |
| <div class="concept-title">Asset Allocation</div> | |
| <div class="concept-desc">How you divide money between stocks, bonds, and other assets. The most important investment decision you'll make.</div> | |
| <div class="concept-tag"><span class="badge badge-amber">Portfolio</span></div> | |
| </div> | |
| <div class="concept-card" style="--concept-color:var(--rose)" onclick="sendText('What is beta in investing and what does it tell me?')"> | |
| <div class="concept-icon">ฮฒ</div> | |
| <div class="concept-title">Beta & Volatility</div> | |
| <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> | |
| <div class="concept-tag"><span class="badge badge-rose">Metrics</span></div> | |
| </div> | |
| <div class="concept-card" style="--concept-color:var(--indigo)" onclick="sendText('What is an index fund and why do most pros recommend it?')"> | |
| <div class="concept-icon">๐</div> | |
| <div class="concept-title">Index Funds</div> | |
| <div class="concept-desc">Passively track a market index like the S&P 500. Low cost, diversified, and statistically outperform most active funds.</div> | |
| <div class="concept-tag"><span class="badge badge-cyan">Beginner</span></div> | |
| </div> | |
| <div class="concept-card" style="--concept-color:var(--emerald)" onclick="sendText('Explain the 4% rule for retirement')"> | |
| <div class="concept-icon">๐๏ธ</div> | |
| <div class="concept-title">The 4% Rule</div> | |
| <div class="concept-desc">Withdraw 4% of your nest egg annually in retirement. Based on 95% survival rate across 30-year historical periods.</div> | |
| <div class="concept-tag"><span class="badge badge-emerald">Retirement</span></div> | |
| </div> | |
| <div class="concept-card" style="--concept-color:var(--cyan)" onclick="sendText('What is rebalancing and when should I rebalance my portfolio?')"> | |
| <div class="concept-icon">โ๏ธ</div> | |
| <div class="concept-title">Rebalancing</div> | |
| <div class="concept-desc">Selling overweight assets and buying underweight ones to restore your target allocation. Do it annually or at 5% drift.</div> | |
| <div class="concept-tag"><span class="badge badge-cyan">Strategy</span></div> | |
| </div> | |
| <div class="concept-card" style="--concept-color:var(--amber)" onclick="sendText('What is expense ratio and how does it affect my returns?')"> | |
| <div class="concept-icon">๐ธ</div> | |
| <div class="concept-title">Expense Ratios</div> | |
| <div class="concept-desc">The annual fee funds charge as % of your investment. Even 0.5% more can cost $100K+ over 30 years.</div> | |
| <div class="concept-tag"><span class="badge badge-amber">Cost</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ | |
| DO'S & DON'TS TAB | |
| โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ --> | |
| <div class="ins-panel" id="ins-dos-donts"> | |
| <div class="dos-donts"> | |
| <div class="do-card"> | |
| <div class="do-header">โ Do This</div> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| <div class="dont-card"> | |
| <div class="dont-header">โ Don't Do This</div> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ | |
| GLOSSARY TAB | |
| โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ --> | |
| <div class="ins-panel" id="ins-glossary"> | |
| <div style="margin-bottom:16px"> | |
| <input type="text" id="glossary-search" placeholder="๐ Search termsโฆ" oninput="filterGlossary()" style="max-width:320px"> | |
| </div> | |
| <div class="glossary-grid" id="glossary-grid"></div> | |
| </div> | |
| </main> | |
| </div> | |
| <nav class="bottom-nav"> | |
| <div class="bottom-nav-inner"> | |
| <a href="index.html" class="bottom-nav-item"><span class="bnav-icon">๐ </span>Home</a> | |
| <a href="portfolio.html" class="bottom-nav-item"><span class="bnav-icon">๐</span>Portfolio</a> | |
| <a href="risk.html" class="bottom-nav-item"><span class="bnav-icon">๐ฏ</span>Risk</a> | |
| <a href="tracker.html" class="bottom-nav-item"><span class="bnav-icon">๐</span>Track</a> | |
| <a href="calculators.html" class="bottom-nav-item"><span class="bnav-icon">๐งฎ</span>Calc</a> | |
| <a href="insights.html" class="bottom-nav-item"><span class="bnav-icon">๐ก</span>Insights</a> | |
| </div> | |
| </nav> | |
| <script src="shared.js"></script> | |
| <script> | |
| // โโ Tab Switching โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ | |
| document.querySelectorAll('.ins-tab').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| document.querySelectorAll('.ins-tab,.ins-panel').forEach(el => el.classList.remove('active')); | |
| btn.classList.add('active'); | |
| document.getElementById('ins-' + btn.dataset.ins).classList.add('active'); | |
| }); | |
| }); | |
| // โโ Portfolio Context Summary โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ | |
| function buildContextSummary() { | |
| const p = getPortfolio(); | |
| const totalVal = p.assets.reduce((s,a)=>s+a.shares*a.price,0); | |
| const riskScore = calcRiskScore(p); | |
| const divScore = calcDiversification(p); | |
| const equityPct = p.assets.filter(a=>a.type==='Stock'||a.type==='ETF').reduce((s,a)=>s+a.pct,0); | |
| document.getElementById('context-summary').innerHTML = ` | |
| <div style="display:flex;flex-direction:column;gap:6px"> | |
| <div>๐ผ <strong>${p.assets.length} holdings</strong> ยท Total: <strong>${fmt$(totalVal)}</strong></div> | |
| <div>๐ฏ Risk Score: <strong style="color:var(--amber)">${riskScore}/100</strong> ยท Profile: <strong>${p.riskProfile||'Moderate'}</strong></div> | |
| <div>๐ Diversification: <strong style="color:var(--emerald)">${divScore}/100</strong></div> | |
| <div>๐ Equity: <strong>${equityPct}%</strong> ยท Goals: <strong>${(p.goals||['Wealth Building']).join(', ')}</strong></div> | |
| </div> | |
| `; | |
| } | |
| // โโ AI Chat โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ | |
| let chatHistory = []; | |
| let isLoading = false; | |
| function buildSystemPrompt() { | |
| const p = getPortfolio(); | |
| const totalVal = p.assets.reduce((s,a)=>s+a.shares*(MARKET_PRICES[a.ticker]?.price||a.price),0); | |
| const riskScore = calcRiskScore(p); | |
| const divScore = calcDiversification(p); | |
| const equityPct = p.assets.filter(a=>a.type==='Stock'||a.type==='ETF').reduce((s,a)=>s+a.pct,0); | |
| const bondPct = p.assets.filter(a=>a.type==='Bond').reduce((s,a)=>s+a.pct,0); | |
| return `You are FinWise AI, a friendly, expert financial advisor built into the FinWise personal finance app. | |
| USER'S PORTFOLIO CONTEXT: | |
| - Holdings: ${p.assets.map(a=>`${a.ticker} (${a.pct}%)`).join(', ')} | |
| - Total Value: $${totalVal.toFixed(2)} | |
| - Total Invested: $${p.totalInvested} | |
| - Risk Score: ${riskScore}/100 (${p.riskProfile || 'Moderate'}) | |
| - Diversification Score: ${divScore}/100 | |
| - Equity Allocation: ${equityPct}% | |
| - Bond Allocation: ${bondPct}% | |
| - Investment Goals: ${(p.goals||['Wealth Building']).join(', ')} | |
| PERSONA: | |
| - Friendly, warm, encouraging โ never condescending | |
| - Use simple language; avoid jargon (or explain it when necessary) | |
| - Be direct and actionable โ give concrete advice, not just generic platitudes | |
| - Use bullet points and bold text for clarity | |
| - Add relevant emojis to make responses engaging | |
| - Be concise but complete โ aim for 100-200 words per response | |
| - Always note: you're an AI, not a licensed financial advisor | |
| FOCUS: Help beginners understand investing. Provide personalized insights based on their actual portfolio above.`; | |
| } | |
| async function sendMessage() { | |
| const input = document.getElementById('chat-input'); | |
| const msg = input.value.trim(); | |
| if (!msg || isLoading) return; | |
| input.value = ''; | |
| sendText(msg); | |
| } | |
| function sendQuickPrompt(btn) { | |
| sendText(btn.textContent.replace(/^[^ ]+ /,'').trim()); | |
| } | |
| async function sendText(text) { | |
| if (isLoading) return; | |
| appendMessage('user', text); | |
| chatHistory.push({ role:'user', content: text }); | |
| isLoading = true; | |
| document.getElementById('send-btn').disabled = true; | |
| const typingEl = appendTyping(); | |
| try { | |
| const response = await fetch('https://api.anthropic.com/v1/messages', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| model: 'claude-sonnet-4-20250514', | |
| max_tokens: 1000, | |
| system: buildSystemPrompt(), | |
| messages: chatHistory | |
| }) | |
| }); | |
| typingEl.remove(); | |
| const data = await response.json(); | |
| if (data.error) throw new Error(data.error.message); | |
| const reply = data.content?.[0]?.text || 'Sorry, I had trouble generating a response. Please try again.'; | |
| appendMessage('ai', formatAIReply(reply)); | |
| chatHistory.push({ role:'assistant', content: reply }); | |
| } catch (err) { | |
| typingEl.remove(); | |
| // Fallback: use built-in responses | |
| const fallback = getFallbackResponse(text); | |
| appendMessage('ai', formatAIReply(fallback)); | |
| chatHistory.push({ role:'assistant', content: fallback }); | |
| } | |
| isLoading = false; | |
| document.getElementById('send-btn').disabled = false; | |
| } | |
| function formatAIReply(text) { | |
| return text | |
| .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') | |
| .replace(/\*(.*?)\*/g, '<em>$1</em>') | |
| .replace(/\n\n/g, '<br><br>') | |
| .replace(/\n- /g, '<br>โข ') | |
| .replace(/\nโข /g, '<br>โข ') | |
| .replace(/\n(\d+)\. /g, '<br>$1. '); | |
| } | |
| function getFallbackResponse(query) { | |
| const q = query.toLowerCase(); | |
| const p = getPortfolio(); | |
| const equityPct = p.assets.filter(a=>a.type==='Stock'||a.type==='ETF').reduce((s,a)=>s+a.pct,0); | |
| const riskScore = calcRiskScore(p); | |
| if (q.includes('portfolio') || q.includes('analyze')) { | |
| return `**Here's a quick analysis of your portfolio:** ๐\n\n` + | |
| `You're holding **${p.assets.length} assets** with **${equityPct}% in equities**. ` + | |
| `Your risk score is **${riskScore}/100**, which puts you in the **${p.riskProfile||'Moderate'}** category.\n\n` + | |
| `**Strengths:**\n- Good asset count for diversification\n- Mix of ETFs and individual stocks\n\n` + | |
| `**Suggestions:**\n- Consider if bond allocation matches your timeline\n- Review any single position over 30%\n\n` + | |
| `*Disclaimer: This is AI-generated analysis, not licensed financial advice.*`; | |
| } | |
| if (q.includes('etf') || q.includes('index')) { | |
| 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! ๐`; | |
| } | |
| if (q.includes('compound')) { | |
| 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.`; | |
| } | |
| if (q.includes('risk') || q.includes('rebalance')) { | |
| 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.*`; | |
| } | |
| if (q.includes('retirement') || q.includes('4%')) { | |
| 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! ๐งฎ`; | |
| } | |
| if (q.includes('dollar') || q.includes('dca') || q.includes('averaging')) { | |
| 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! ๐ฏ`; | |
| } | |
| 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.* ๐ค`; | |
| } | |
| function appendMessage(role, html) { | |
| const msgs = document.getElementById('chat-messages'); | |
| const div = document.createElement('div'); | |
| div.className = 'chat-message ' + (role==='user'?'user':''); | |
| div.innerHTML = ` | |
| <div class="chat-avatar ${role==='user'?'user-av':'ai-av'}">${role==='user'?'๐ค':'๐ค'}</div> | |
| <div class="chat-bubble ${role}">${html}</div> | |
| `; | |
| msgs.appendChild(div); | |
| msgs.scrollTop = msgs.scrollHeight; | |
| return div; | |
| } | |
| function appendTyping() { | |
| const msgs = document.getElementById('chat-messages'); | |
| const div = document.createElement('div'); | |
| div.className = 'chat-message'; | |
| div.innerHTML = ` | |
| <div class="chat-avatar ai-av">๐ค</div> | |
| <div class="chat-typing"><span></span><span></span><span></span></div> | |
| `; | |
| msgs.appendChild(div); | |
| msgs.scrollTop = msgs.scrollHeight; | |
| return div; | |
| } | |
| // โโ Glossary โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ | |
| const GLOSSARY = [ | |
| { term:'APY', def:'Annual Percentage Yield โ the real return earned in a year, including compound interest.' }, | |
| { term:'Asset Allocation', def:'How you divide your portfolio among different asset classes like stocks, bonds, and cash.' }, | |
| { term:'Bear Market', def:'A market decline of 20% or more from recent highs, lasting at least 2 months.' }, | |
| { term:'Beta', def:'Measures an asset\'s volatility vs the market. Beta>1 = more volatile than the S&P 500.' }, | |
| { term:'Blue-Chip Stock', def:'Shares of large, reputable companies with long track records of stable performance.' }, | |
| { term:'Bond', def:'A loan you give to a company or government. They pay you interest and return your principal at maturity.' }, | |
| { term:'Bull Market', def:'A period of rising prices, generally defined as a 20%+ gain from recent lows.' }, | |
| { term:'Compound Interest', def:'Earning returns on your returns. The longer you invest, the more powerful this becomes.' }, | |
| { term:'Diversification', def:'Spreading investments across many assets to reduce risk without necessarily reducing returns.' }, | |
| { term:'Dividend', def:'A portion of a company\'s profits paid to shareholders, usually quarterly.' }, | |
| { term:'DCA', def:'Dollar-Cost Averaging โ investing a fixed amount regularly, regardless of market price.' }, | |
| { term:'ETF', def:'Exchange-Traded Fund โ a basket of securities that trades on an exchange like a single stock.' }, | |
| { term:'Expense Ratio', def:'Annual fee charged by mutual funds/ETFs, expressed as % of your investment.' }, | |
| { term:'FIRE', def:'Financial Independence, Retire Early โ movement focused on saving aggressively to retire young.' }, | |
| { term:'Index Fund', def:'A fund that tracks a market index (like S&P 500) passively. Usually low-cost and diversified.' }, | |
| { term:'Liquidity', def:'How easily an asset can be converted to cash. Stocks are liquid; real estate is not.' }, | |
| { term:'Market Cap', def:'Total market value of a company\'s outstanding shares (Price ร Shares Outstanding).' }, | |
| { term:'P/E Ratio', def:'Price-to-Earnings ratio โ how much investors pay per dollar of earnings. Measures valuation.' }, | |
| { term:'Rebalancing', def:'Adjusting your portfolio back to target allocation by selling overweighted and buying underweighted assets.' }, | |
| { term:'Risk Tolerance', def:'Your ability (financial) and willingness (emotional) to endure market fluctuations.' }, | |
| { term:'Roth IRA', def:'A retirement account funded with after-tax money. Qualified withdrawals are tax-free.' }, | |
| { term:'S&P 500', def:'An index tracking 500 of the largest US publicly traded companies by market cap.' }, | |
| { term:'SIP', def:'Systematic Investment Plan โ regular, automated investments at fixed intervals.' }, | |
| { term:'Volatility', def:'The degree of price variation over time. Higher volatility = higher risk and potential reward.' }, | |
| { term:'Yield', def:'Income generated by an investment, usually expressed as a percentage of the investment\'s value.' }, | |
| ]; | |
| function renderGlossary(filter='') { | |
| const items = filter ? GLOSSARY.filter(g=>g.term.toLowerCase().includes(filter)||g.def.toLowerCase().includes(filter)) : GLOSSARY; | |
| document.getElementById('glossary-grid').innerHTML = items.map(g => ` | |
| <div class="glossary-item"> | |
| <div class="glos-term">${g.term}</div> | |
| <div class="glos-def">${g.def}</div> | |
| </div> | |
| `).join(''); | |
| } | |
| function filterGlossary() { | |
| renderGlossary(document.getElementById('glossary-search').value.toLowerCase()); | |
| } | |
| document.addEventListener('DOMContentLoaded', () => { | |
| buildContextSummary(); | |
| renderGlossary(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |