custom1/dashboard.html

468 lines
27 KiB
HTML

SafeValue must use [property]=binding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-wrapper">
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">WealthPilot</div><ul class="nav-1-nav-links"><li><a href="home.html">Dashboard</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Features</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join Now</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Your Financial Future, Illuminated.</p><h2 class="text-2-heading">Master Your Money. Maximize Your Growth.</h2><p class="text-2-description">Seamlessly link your bank accounts and investments to effortlessly track expenses, forecast savings goals, and receive personalized AI-driven investment advice. Take control of your financial destiny.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Get Started</button><button class="text-2-btn text-2-outline">Learn More</button></div></section></div>
<section class="account-summary-section">
<header class="section-header">
<h2 class="section-title">Your Financial Overview</h2>
<p class="section-description">A quick glance at your linked accounts and financial health.</p>
</header>
<div class="account-summary-cards-container">
<!-- Total Net Worth Card -->
<div class="summary-card">
<div class="card-header">
<h3 class="card-title">Total Net Worth</h3>
</div>
<p class="card-balance-value">$123,456.78</p>
<div class="card-meta-info">
<p>As of <span>Oct 26, 2023</span></p>
<p><span class="trend-indicator-positive">+2.15%</span> since last month</p>
</div>
<a href="#" class="card-action">View Details &rarr;</a>
</div>
<!-- Bank Accounts Card -->
<div class="summary-card">
<div class="card-header">
<h3 class="card-title">Bank Accounts</h3>
<span class="card-icon" aria-hidden="true">🏦</span>
</div>
<p class="card-balance-value">$12,345.00</p>
<div class="card-meta-info">
<p><span>3</span> accounts linked</p>
<p>Last synced: <span>2 min ago</span></p>
</div>
<a href="#" class="card-action">Manage Accounts &rarr;</a>
</div>
<!-- Investments Card -->
<div class="summary-card">
<div class="card-header">
<h3 class="card-title">Investments</h3>
<span class="card-icon" aria-hidden="true">📈</span>
</div>
<p class="card-balance-value">$98,765.43</p>
<div class="card-meta-info">
<p><span>2</span> portfolios</p>
<p>Today's gain: <span class="trend-indicator-positive">+$1,234.56</span></p>
</div>
<a href="#" class="card-action">Explore Portfolios &rarr;</a>
</div>
<!-- Credit Cards Card -->
<div class="summary-card">
<div class="card-header">
<h3 class="card-title">Credit Cards</h3>
<span class="card-icon" aria-hidden="true">💳</span>
</div>
<p class="card-balance-value">$5,678.90</p>
<div class="card-meta-info">
<p><span>2</span> cards linked</p>
<p>Next payment due: <span>Nov 15</span></p>
</div>
<a href="#" class="card-action">Manage Debts &rarr;</a>
</div>
<!-- Savings & Goals Card -->
<div class="summary-card">
<div class="card-header">
<h3 class="card-title">Savings & Goals</h3>
<span class="card-icon" aria-hidden="true">💰</span>
</div>
<p class="card-balance-value">On Track</p>
<div class="card-meta-info">
<p><span>$500/month</span> target</p>
<p>Forecasted: <span>$6,000</span> by year-end</p>
</div>
<a href="#" class="card-action">Adjust Goals &rarr;</a>
</div>
</div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Actions</title>
<link rel="stylesheet" href="style.css" />
<!-- Font Awesome for icons (placeholder, ideally self-hosted or more minimal icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<section class="quick-actions-panel" aria-labelledby="quickActionsTitle">
<header class="quick-actions-panel__header">
<h2 id="quickActionsTitle" class="quick-actions-panel__title">Quick Actions</h2>
<a href="/all-actions" class="quick-actions-panel__view-all">View All Actions &rarr;</a>
</header>
<div class="quick-actions-panel__grid">
<a href="/link-account" class="quick-action-card">
<i class="fas fa-link quick-action-card__icon" aria-hidden="true"></i>
<h3 class="quick-action-card__title">Link Account</h3>
<p class="quick-action-card__description">Connect a new bank or investment account.</p>
</a>
<a href="/track-expense" class="quick-action-card">
<i class="fas fa-plus-circle quick-action-card__icon" aria-hidden="true"></i>
<h3 class="quick-action-card__title">Add Expense</h3>
<p class="quick-action-card__description">Manually log a recent transaction.</p>
</a>
<a href="/savings-forecast" class="quick-action-card">
<i class="fas fa-chart-line quick-action-card__icon" aria-hidden="true"></i>
<h3 class="quick-action-card__title">Forecast Savings</h3>
<p class="quick-action-card__description">Project your future financial growth.</p>
</a>
<a href="/investment-advice" class="quick-action-card">
<i class="fas fa-lightbulb quick-action-card__icon" aria-hidden="true"></i>
<h3 class="quick-action-card__title">Get Investment Advice</h3>
<p class="quick-action-card__description">Receive AI-driven insights for your portfolio.</p>
</a>
<a href="/set-budget" class="quick-action-card">
<i class="fas fa-wallet quick-action-card__icon" aria-hidden="true"></i>
<h3 class="quick-action-card__title">Set Budget</h3>
<p class="quick-action-card__description">Create or adjust spending limits.</p>
</a>
<a href="/review-transactions" class="quick-action-card">
<i class="fas fa-receipt quick-action-card__icon" aria-hidden="true"></i>
<h3 class="quick-action-card__title">Review Transactions</h3>
<p class="quick-action-card__description">Categorize and review recent activity.</p>
</a>
</div>
</section>
</body>
</html>
<section class="investment-snapshot">
<div class="container">
<header class="section-header">
<h2>Investment Snapshot</h2>
<p>Your current financial overview at a glance.</p>
</header>
<div class="summary-cards">
<div class="card summary-card total-investments">
<h3>Total Investments</h3>
<p class="value">$1,234,567.89</p>
<span class="change change-positive">▲ +$12,345.67 (+1.01%) today</span>
</div>
<div class="card summary-card net-worth">
<h3>Estimated Net Worth</h3>
<p class="value">$2,345,678.90</p>
<span class="change change-negative">▼ -$5,432.10 (-0.23%) this month</span>
</div>
<div class="card summary-card recent-performance">
<h3>YTD Performance</h3>
<p class="value">+$234,567.89</p>
<span class="change change-positive">▲ +12.34% YTD</span>
</div>
</div>
<div class="investment-details">
<article class="card portfolio-breakdown">
<h3>Portfolio Allocation</h3>
<figure class="chart-placeholder">
<p>[Placeholder for Interactive Pie Chart or Donut Chart showing asset distribution]</p>
<figcaption>Distribution of assets across your portfolio.</figcaption>
</figure>
<ul class="asset-list">
<li>
<span class="asset-type">Stocks</span>
<span class="asset-value">$800,000.00</span>
<span class="asset-percentage">65%</span>
</li>
<li>
<span class="asset-type">Bonds</span>
<span class="asset-value">$200,000.00</span>
<span class="asset-percentage">16%</span>
</li>
<li>
<span class="asset-type">Mutual Funds & ETFs</span>
<span class="asset-value">$180,000.00</span>
<span class="asset-percentage">15%</span>
</li>
<li>
<span class="asset-type">Cash & Equivalents</span>
<span class="asset-value">$54,567.89</span>
<span class="asset-percentage">4%</span>
</li>
</ul>
</article>
<article class="card connected-accounts">
<h3>Connected Accounts</h3>
<ul class="account-list">
<li>
<div class="account-info">
<span class="account-name">Brokerage Account</span>
<span class="account-institution">Vanguard</span>
</div>
<span class="account-balance">$600,000.00</span>
</li>
<li>
<div class="account-info">
<span class="account-name">401k Account</span>
<span class="account-institution">Fidelity</span>
</div>
<span class="account-balance">$350,000.00</span>
</li>
<li>
<div class="account-info">
<span class="account-name">IRA Account</span>
<span class="account-institution">Schwab</span>
</div>
<span class="account-balance">$150,000.00</span>
</li>
<li>
<div class="account-info">
<span class="account-name">Savings Account</span>
<span class="account-institution">Bank of America</span>
</div>
<span class="account-balance">$134,567.89</span>
</li>
</ul>
<div class="account-actions">
<a href="#" class="button button-primary">View All Investments</a>
<a href="#" class="button button-secondary">Connect Another Account</a>
</div>
</article>
</div>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">WealthFlow AI</h3><p class="footer-1-newsletter-text">Unlock your financial potential. Subscribe for exclusive insights and updates on smart money management.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Enter your email"></input><button class="footer-1-subscribe-btn">Subscribe</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive updates and financial insights from WealthFlow AI.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Our Features</h4><ul><li><a href="#">Expense Tracking</a></li><li><a href="#">Investment Insights</a></li><li><a href="#">Savings Forecast</a></li><li><a href="#">AI-Driven Advice</a></li><li><a href="#">Account Sync</a></li></ul></div><div class="footer-1-column"><h4>Company</h4><ul><li><a href="#">About Us</a></li><li><a href="#">Blog</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Contact</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X (Twitter)</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>YouTube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2023 WealthFlow AI. All rights reserved.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookie Settings</a></li></ul></div></section></div>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">WealthPilot</div><ul class="nav-1-nav-links"><li><a href="home.html">Dashboard</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Features</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join Now</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Your Financial Future, Illuminated.</p><h2 class="text-2-heading">Master Your Money. Maximize Your Growth.</h2><p class="text-2-description">Seamlessly link your bank accounts and investments to effortlessly track expenses, forecast savings goals, and receive personalized AI-driven investment advice. Take control of your financial destiny.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Get Started</button><button class="text-2-btn text-2-outline">Learn More</button></div></section></div>
<section class="account-summary-section">
<header class="section-header">
<h2 class="section-title">Your Financial Overview</h2>
<p class="section-description">A quick glance at your linked accounts and financial health.</p>
</header>
<div class="account-summary-cards-container">
<!-- Total Net Worth Card -->
<div class="summary-card">
<div class="card-header">
<h3 class="card-title">Total Net Worth</h3>
</div>
<p class="card-balance-value">$123,456.78</p>
<div class="card-meta-info">
<p>As of <span>Oct 26, 2023</span></p>
<p><span class="trend-indicator-positive">+2.15%</span> since last month</p>
</div>
<a href="#" class="card-action">View Details →</a>
</div>
<!-- Bank Accounts Card -->
<div class="summary-card">
<div class="card-header">
<h3 class="card-title">Bank Accounts</h3>
<span class="card-icon" aria-hidden="true">🏦</span>
</div>
<p class="card-balance-value">$12,345.00</p>
<div class="card-meta-info">
<p><span>3</span> accounts linked</p>
<p>Last synced: <span>2 min ago</span></p>
</div>
<a href="#" class="card-action">Manage Accounts →</a>
</div>
<!-- Investments Card -->
<div class="summary-card">
<div class="card-header">
<h3 class="card-title">Investments</h3>
<span class="card-icon" aria-hidden="true">📈</span>
</div>
<p class="card-balance-value">$98,765.43</p>
<div class="card-meta-info">
<p><span>2</span> portfolios</p>
<p>Today's gain: <span class="trend-indicator-positive">+$1,234.56</span></p>
</div>
<a href="#" class="card-action">Explore Portfolios →</a>
</div>
<!-- Credit Cards Card -->
<div class="summary-card">
<div class="card-header">
<h3 class="card-title">Credit Cards</h3>
<span class="card-icon" aria-hidden="true">💳</span>
</div>
<p class="card-balance-value">$5,678.90</p>
<div class="card-meta-info">
<p><span>2</span> cards linked</p>
<p>Next payment due: <span>Nov 15</span></p>
</div>
<a href="#" class="card-action">Manage Debts →</a>
</div>
<!-- Savings & Goals Card -->
<div class="summary-card">
<div class="card-header">
<h3 class="card-title">Savings &amp; Goals</h3>
<span class="card-icon" aria-hidden="true">💰</span>
</div>
<p class="card-balance-value">On Track</p>
<div class="card-meta-info">
<p><span>$500/month</span> target</p>
<p>Forecasted: <span>$6,000</span> by year-end</p>
</div>
<a href="#" class="card-action">Adjust Goals →</a>
</div>
</div>
</section>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Actions</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<section class="quick-actions-panel" aria-labelledby="quickActionsTitle">
<header class="quick-actions-panel__header">
<h2 id="quickActionsTitle" class="quick-actions-panel__title">Quick Actions</h2>
<a href="/all-actions" class="quick-actions-panel__view-all">View All Actions →</a>
</header>
<div class="quick-actions-panel__grid">
<a href="/link-account" class="quick-action-card">
<i class="fas fa-link quick-action-card__icon" aria-hidden="true"></i>
<h3 class="quick-action-card__title">Link Account</h3>
<p class="quick-action-card__description">Connect a new bank or investment account.</p>
</a>
<a href="/track-expense" class="quick-action-card">
<i class="fas fa-plus-circle quick-action-card__icon" aria-hidden="true"></i>
<h3 class="quick-action-card__title">Add Expense</h3>
<p class="quick-action-card__description">Manually log a recent transaction.</p>
</a>
<a href="/savings-forecast" class="quick-action-card">
<i class="fas fa-chart-line quick-action-card__icon" aria-hidden="true"></i>
<h3 class="quick-action-card__title">Forecast Savings</h3>
<p class="quick-action-card__description">Project your future financial growth.</p>
</a>
<a href="/investment-advice" class="quick-action-card">
<i class="fas fa-lightbulb quick-action-card__icon" aria-hidden="true"></i>
<h3 class="quick-action-card__title">Get Investment Advice</h3>
<p class="quick-action-card__description">Receive AI-driven insights for your portfolio.</p>
</a>
<a href="/set-budget" class="quick-action-card">
<i class="fas fa-wallet quick-action-card__icon" aria-hidden="true"></i>
<h3 class="quick-action-card__title">Set Budget</h3>
<p class="quick-action-card__description">Create or adjust spending limits.</p>
</a>
<a href="/review-transactions" class="quick-action-card">
<i class="fas fa-receipt quick-action-card__icon" aria-hidden="true"></i>
<h3 class="quick-action-card__title">Review Transactions</h3>
<p class="quick-action-card__description">Categorize and review recent activity.</p>
</a>
</div>
</section>
<section class="investment-snapshot">
<div class="container">
<header class="section-header">
<h2>Investment Snapshot</h2>
<p>Your current financial overview at a glance.</p>
</header>
<div class="summary-cards">
<div class="card summary-card total-investments">
<h3>Total Investments</h3>
<p class="value">$1,234,567.89</p>
<span class="change change-positive">▲ +$12,345.67 (+1.01%) today</span>
</div>
<div class="card summary-card net-worth">
<h3>Estimated Net Worth</h3>
<p class="value">$2,345,678.90</p>
<span class="change change-negative">▼ -$5,432.10 (-0.23%) this month</span>
</div>
<div class="card summary-card recent-performance">
<h3>YTD Performance</h3>
<p class="value">+$234,567.89</p>
<span class="change change-positive">▲ +12.34% YTD</span>
</div>
</div>
<div class="investment-details">
<article class="card portfolio-breakdown">
<h3>Portfolio Allocation</h3>
<figure class="chart-placeholder">
<p>[Placeholder for Interactive Pie Chart or Donut Chart showing asset distribution]</p>
<figcaption>Distribution of assets across your portfolio.</figcaption>
</figure>
<ul class="asset-list">
<li>
<span class="asset-type">Stocks</span>
<span class="asset-value">$800,000.00</span>
<span class="asset-percentage">65%</span>
</li>
<li>
<span class="asset-type">Bonds</span>
<span class="asset-value">$200,000.00</span>
<span class="asset-percentage">16%</span>
</li>
<li>
<span class="asset-type">Mutual Funds &amp; ETFs</span>
<span class="asset-value">$180,000.00</span>
<span class="asset-percentage">15%</span>
</li>
<li>
<span class="asset-type">Cash &amp; Equivalents</span>
<span class="asset-value">$54,567.89</span>
<span class="asset-percentage">4%</span>
</li>
</ul>
</article>
<article class="card connected-accounts">
<h3>Connected Accounts</h3>
<ul class="account-list">
<li>
<div class="account-info">
<span class="account-name">Brokerage Account</span>
<span class="account-institution">Vanguard</span>
</div>
<span class="account-balance">$600,000.00</span>
</li>
<li>
<div class="account-info">
<span class="account-name">401k Account</span>
<span class="account-institution">Fidelity</span>
</div>
<span class="account-balance">$350,000.00</span>
</li>
<li>
<div class="account-info">
<span class="account-name">IRA Account</span>
<span class="account-institution">Schwab</span>
</div>
<span class="account-balance">$150,000.00</span>
</li>
<li>
<div class="account-info">
<span class="account-name">Savings Account</span>
<span class="account-institution">Bank of America</span>
</div>
<span class="account-balance">$134,567.89</span>
</li>
</ul>
<div class="account-actions">
<a href="#" class="button button-primary">View All Investments</a>
<a href="#" class="button button-secondary">Connect Another Account</a>
</div>
</article>
</div>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">WealthFlow AI</h3><p class="footer-1-newsletter-text">Unlock your financial potential. Subscribe for exclusive insights and updates on smart money management.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Enter your email"><button class="footer-1-subscribe-btn">Subscribe</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive updates and financial insights from WealthFlow AI.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Our Features</h4><ul><li><a href="#">Expense Tracking</a></li><li><a href="#">Investment Insights</a></li><li><a href="#">Savings Forecast</a></li><li><a href="#">AI-Driven Advice</a></li><li><a href="#">Account Sync</a></li></ul></div><div class="footer-1-column"><h4>Company</h4><ul><li><a href="#">About Us</a></li><li><a href="#">Blog</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Contact</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X (Twitter)</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>YouTube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2023 WealthFlow AI. All rights reserved.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookie Settings</a></li></ul></div></section></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
</script>
</body>
</html> (see https://g.co/ng/security#xss)