323 lines
16 KiB
HTML
323 lines
16 KiB
HTML
|
|
<!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">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Navbar</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<nav class="navbar" aria-label="Main navigation">
|
|
<a href="#" class="navbar-brand">
|
|
<span class="logo-icon">💰</span>
|
|
FinTrack
|
|
</a>
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item"><a href="#dashboard" class="nav-link active" aria-current="page">Dashboard</a></li>
|
|
<li class="nav-item"><a href="#accounts" class="nav-link">Accounts</a></li>
|
|
<li class="nav-item"><a href="#expenses" class="nav-link">Expenses</a></li>
|
|
<li class="nav-item"><a href="#forecast" class="nav-link">Savings Forecast</a></li>
|
|
<li class="nav-item"><a href="#advice" class="nav-link">AI Advice</a></li>
|
|
</ul>
|
|
<div class="navbar-actions">
|
|
<a href="#login" class="btn btn-secondary">Log In</a>
|
|
<a href="#signup" class="btn btn-primary">Sign Up</a>
|
|
</div>
|
|
</nav>
|
|
<main style="padding: 2rem; max-width: 1200px; margin: 2rem auto; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.05);">
|
|
<h1>Welcome to FinTrack</h1>
|
|
<p>This is placeholder content to demonstrate the navbar's responsiveness and sticky behavior. Scroll down to see the navbar remain fixed at the top.</p>
|
|
<p>FinTrack helps you connect your bank accounts and investments, track your spending habits, forecast your financial future, and receive personalized investment advice powered by AI.</p>
|
|
<div style="height: 1000px; background-color: #f9f9f9; border: 1px dashed #ccc; margin-top: 2rem; display: flex; justify-content: center; align-items: center; color: #888;">
|
|
<p>Scrollable content area</p>
|
|
</div>
|
|
<p>End of placeholder content.</p>
|
|
</main>
|
|
<header class="dashboard-header">
|
|
<div class="dashboard-header-container">
|
|
<div class="header-left">
|
|
<a href="#" class="site-logo" aria-label="FinTrackPro Home">FinTrackPro</a>
|
|
</div>
|
|
<div class="header-search">
|
|
<input type="text" placeholder="Search accounts, transactions, insights..." aria-label="Search">
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="btn btn-primary">Connect New Account</button>
|
|
<a href="#" class="icon-button notification-icon" aria-label="Notifications">
|
|
<span class="icon-placeholder">🔔</span>
|
|
<span class="notification-badge">3</span>
|
|
</a>
|
|
<div class="user-profile">
|
|
<a href="#" class="profile-link" aria-label="User Profile">
|
|
<span class="avatar-placeholder">👤</span>
|
|
<span class="username-display">John D.</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section class="account-summary-widget">
|
|
<div class="widget-header">
|
|
<h2>Account Summary</h2>
|
|
<button class="view-all-btn">View All Accounts</button>
|
|
</div>
|
|
|
|
<div class="total-net-worth-card">
|
|
<p class="card-title">Total Net Worth</p>
|
|
<p class="balance-amount">$XX,XXX.XX</p>
|
|
<span class="balance-change-indicator positive">+X.XX% today</span>
|
|
</div>
|
|
|
|
<div class="accounts-list">
|
|
<div class="account-item">
|
|
<div class="account-info">
|
|
<span class="account-icon bank-icon"></span>
|
|
<p class="account-name">Checking Account</p>
|
|
<span class="account-identifier">**** 1234</span>
|
|
</div>
|
|
<p class="account-balance">$X,XXX.XX</p>
|
|
</div>
|
|
|
|
<div class="account-item">
|
|
<div class="account-info">
|
|
<span class="account-icon bank-icon"></span>
|
|
<p class="account-name">Savings Account</p>
|
|
<span class="account-identifier">**** 5678</span>
|
|
</div>
|
|
<p class="account-balance">$XX,XXX.XX</p>
|
|
</div>
|
|
|
|
<div class="account-item">
|
|
<div class="account-info">
|
|
<span class="account-icon investment-icon"></span>
|
|
<p class="account-name">Investment Portfolio</p>
|
|
<span class="account-identifier">Brokerage</span>
|
|
</div>
|
|
<p class="account-balance">$XX,XXX.XX</p>
|
|
</div>
|
|
|
|
<div class="account-item">
|
|
<div class="account-info">
|
|
<span class="account-icon credit-card-icon"></span>
|
|
<p class="account-name">Credit Card</p>
|
|
<span class="account-identifier">**** 9012</span>
|
|
</div>
|
|
<p class="account-balance">-$X,XXX.XX</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="widget-actions">
|
|
<button class="add-account-btn">+ Link New Account</button>
|
|
</div>
|
|
</section>
|
|
<section class="recent-activity-feed">
|
|
<header class="activity-feed-header">
|
|
<h2 class="activity-feed-title">Recent Activity Feed</h2>
|
|
<a href="#" class="activity-feed-view-all">View All</a>
|
|
</header>
|
|
<ul class="activity-list">
|
|
<li class="activity-item">
|
|
<div class="activity-icon transaction-icon"></div>
|
|
<div class="activity-content">
|
|
<p class="activity-description"><strong>Transaction:</strong> Groceries at FreshMarket</p>
|
|
<p class="activity-details">-$72.50 from Checking Account</p>
|
|
<time class="activity-timestamp" datetime="2023-10-26T15:30:00Z">2 hours ago</time>
|
|
</div>
|
|
</li>
|
|
<li class="activity-item">
|
|
<div class="activity-icon investment-icon"></div>
|
|
<div class="activity-content">
|
|
<p class="activity-description"><strong>Investment Buy:</strong> +3 shares of MSFT</p>
|
|
<p class="activity-details">-$980.00 from Investment Portfolio</p>
|
|
<time class="activity-timestamp" datetime="2023-10-26T10:00:00Z">Today, 10:00 AM</time>
|
|
</div>
|
|
</li>
|
|
<li class="activity-item">
|
|
<div class="activity-icon forecast-icon"></div>
|
|
<div class="activity-content">
|
|
<p class="activity-description"><strong>Savings Goal Update:</strong> On track for Q4 target</p>
|
|
<p class="activity-details">You've saved 75% of your vacation fund!</p>
|
|
<time class="activity-timestamp" datetime="2023-10-25T18:00:00Z">Yesterday, 6:00 PM</time>
|
|
</div>
|
|
</li>
|
|
<li class="activity-item">
|
|
<div class="activity-icon advice-icon"></div>
|
|
<div class="activity-content">
|
|
<p class="activity-description"><strong>AI Investment Advice:</strong> Rebalance recommended</p>
|
|
<p class="activity-details">Consider adjusting exposure to tech stocks</p>
|
|
<time class="activity-timestamp" datetime="2023-10-25T09:15:00Z">Yesterday, 9:15 AM</time>
|
|
</div>
|
|
</li>
|
|
<li class="activity-item">
|
|
<div class="activity-icon account-icon"></div>
|
|
<div class="activity-content">
|
|
<p class="activity-description"><strong>New Account Linked:</strong> Discover Credit Card</p>
|
|
<p class="activity-details">Account data imported successfully</p>
|
|
<time class="activity-timestamp" datetime="2023-10-24T16:45:00Z">October 24</time>
|
|
</div>
|
|
</li>
|
|
<li class="activity-item">
|
|
<div class="activity-icon expense-icon"></div>
|
|
<div class="activity-content">
|
|
<p class="activity-description"><strong>Expense Categorized:</strong> Utilities - Internet Bill</p>
|
|
<p class="activity-details">-$65.00 from Checking Account</p>
|
|
<time class="activity-timestamp" datetime="2023-10-24T11:00:00Z">October 24</time>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Quick Actions Panel</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<section class="quick-actions-panel" aria-labelledby="quick-actions-heading">
|
|
<header class="quick-actions-panel__header">
|
|
<h2 id="quick-actions-heading">Quick Actions</h2>
|
|
<button type="button">Manage All Tools</button>
|
|
</header>
|
|
<div class="quick-actions-panel__grid">
|
|
<article class="quick-action-card">
|
|
<span class="quick-action-card__icon" aria-hidden="true">💸</span> <!-- Money bag emoji for investments -->
|
|
<h3 class="quick-action-card__title">Link Accounts</h3>
|
|
<p class="quick-action-card__description">Connect your bank and investment accounts securely using Plaid.</p>
|
|
<a href="#link-accounts" class="quick-action-card__button">Connect Now</a>
|
|
</article>
|
|
|
|
<article class="quick-action-card">
|
|
<span class="quick-action-card__icon" aria-hidden="true">💰</span> <!-- Money with wings emoji for expenses -->
|
|
<h3 class="quick-action-card__title">Track Expenses</h3>
|
|
<p class="quick-action-card__description">Categorize and visualize your spending habits.</p>
|
|
<a href="#track-expenses" class="quick-action-card__button">View Expenses</a>
|
|
</article>
|
|
|
|
<article class="quick-action-card">
|
|
<span class="quick-action-card__icon" aria-hidden="true">📈</span> <!-- Chart with upwards trend emoji for savings -->
|
|
<h3 class="quick-action-card__title">Forecast Savings</h3>
|
|
<p class="quick-action-card__description">Project your future savings based on your income and spending.</p>
|
|
<a href="#forecast-savings" class="quick-action-card__button">Plan Savings</a>
|
|
</article>
|
|
|
|
<article class="quick-action-card">
|
|
<span class="quick-action-card__icon" aria-hidden="true">🧠</span> <!-- Brain emoji for AI advice -->
|
|
<h3 class="quick-action-card__title">Get Investment Advice</h3>
|
|
<p class="quick-action-card__description">Receive personalized, AI-driven investment recommendations.</p>
|
|
<a href="#investment-advice" class="quick-action-card__button">Get Advice</a>
|
|
</article>
|
|
|
|
<article class="quick-action-card">
|
|
<span class="quick-action-card__icon" aria-hidden="true">📃</span> <!-- Page with curl emoji for reports -->
|
|
<h3 class="quick-action-card__title">Generate Reports</h3>
|
|
<p class="quick-action-card__description">Create custom financial reports for analysis or tax purposes.</p>
|
|
<a href="#generate-reports" class="quick-action-card__button">Create Report</a>
|
|
</article>
|
|
|
|
<article class="quick-action-card">
|
|
<span class="quick-action-card__icon" aria-hidden="true">📝</span> <!-- Memo emoji for budget -->
|
|
<h3 class="quick-action-card__title">Set Budgets</h3>
|
|
<p class="quick-action-card__description">Define spending limits for different categories and stay on track.</p>
|
|
<a href="#set-budgets" class="quick-action-card__button">Manage Budgets</a>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
<section class="savings-progress-widget">
|
|
<h2 class="widget-title">Savings Progress</h2>
|
|
|
|
<div class="goal-card">
|
|
<header class="goal-header">
|
|
<h3 class="goal-name">Emergency Fund</h3>
|
|
<p class="goal-target">Goal: <span class="goal-amount">$10,000</span></p>
|
|
</header>
|
|
|
|
<div class="progress-display">
|
|
<div class="current-amount-wrapper">
|
|
<span class="current-amount-value">$7,500</span>
|
|
<span class="current-amount-label">saved</span>
|
|
</div>
|
|
<div class="progress-bar-container">
|
|
<progress class="savings-progress-bar" value="75" max="100">75%</progress>
|
|
<span class="progress-percentage">75%</span>
|
|
</div>
|
|
<p class="goal-deadline">Target Date: Q4 2024</p>
|
|
</div>
|
|
|
|
<div class="goal-insights">
|
|
<p class="insight-message">You're on track! Keep up the great work.</p>
|
|
<button class="cta-button">View Details</button>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="widget-footer">
|
|
<button class="footer-cta-button">Set New Goal</button>
|
|
<button class="footer-cta-button">Review All Goals</button>
|
|
</footer>
|
|
</section>
|
|
<footer class="site-footer">
|
|
<div class="footer-container">
|
|
<div class="footer-brand-info">
|
|
<a href="#" class="footer-logo">[Your Company Logo/Name]</a>
|
|
<p class="footer-tagline">Your financial future, simplified.</p>
|
|
<p class="footer-description">Connect bank accounts, track expenses, forecast savings, and get AI-driven investment advice.</p>
|
|
</div>
|
|
|
|
<nav class="footer-nav">
|
|
<div class="footer-nav-group">
|
|
<h3>Product</h3>
|
|
<ul>
|
|
<li><a href="#">Expense Tracking</a></li>
|
|
<li><a href="#">Savings Forecast</a></li>
|
|
<li><a href="#">AI Investment Advice</a></li>
|
|
<li><a href="#">Bank Linking</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-nav-group">
|
|
<h3>Company</h3>
|
|
<ul>
|
|
<li><a href="#">About Us</a></li>
|
|
<li><a href="#">Careers</a></li>
|
|
<li><a href="#">Blog</a></li>
|
|
<li><a href="#">Press</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-nav-group">
|
|
<h3>Support</h3>
|
|
<ul>
|
|
<li><a href="#">FAQ</a></li>
|
|
<li><a href="#">Contact Us</a></li>
|
|
<li><a href="#">Privacy Policy</a></li>
|
|
<li><a href="#">Terms of Service</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-nav-group footer-social">
|
|
<h3>Connect</h3>
|
|
<ul>
|
|
<li><a href="#">[Social Icon - LinkedIn]</a></li>
|
|
<li><a href="#">[Social Icon - Twitter]</a></li>
|
|
<li><a href="#">[Social Icon - Facebook]</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p class="footer-copyright">© 2023 [Your Company Name]. All rights reserved.</p>
|
|
<p class="footer-disclaimer">Disclaimer: Investment advice provided is for informational purposes only and does not constitute financial advice. Please consult a qualified professional for personalized financial guidance.</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |