Automated commit to test10 from Docker container
This commit is contained in:
risadmin_prod
parent
06054aab4a
commit
1ff585c47c
335
connected_accounts.html
Normal file
335
connected_accounts.html
Normal file
@ -0,0 +1,335 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Connected Accounts</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" />
|
||||||
|
<header class="navbar" role="navigation" aria-label="Main Navigation">
|
||||||
|
<a href="/" class="navbar-brand" aria-label="Your Financial CoPilot Home">
|
||||||
|
Financial<span>CoPilot</span>
|
||||||
|
</a>
|
||||||
|
<nav class="navbar-nav-wrapper">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a href="#dashboard" class="nav-link active">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">Forecast</a></li>
|
||||||
|
<li class="nav-item"><a href="#advice" class="nav-link">AI Advice</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="navbar-actions">
|
||||||
|
<a href="#login" class="btn btn-outline-primary">Log In</a>
|
||||||
|
<a href="#signup" class="btn btn-primary">Sign Up</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<h1>Website Content Placeholder</h1>
|
||||||
|
<p>Scroll down to see the sticky navbar in action.</p>
|
||||||
|
<p>This area represents the main content of your financial management dashboard.</p>
|
||||||
|
<p>It would typically contain charts, transaction lists, and financial insights.</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>More Content</h2>
|
||||||
|
<p>Ensuring the layout is clean and responsive for various devices.</p>
|
||||||
|
<p>User experience is key for financial applications.</p>
|
||||||
|
</section>
|
||||||
|
<header class="page-header">
|
||||||
|
<div class="header-container">
|
||||||
|
<a href="#" class="header-logo">
|
||||||
|
<span class="logo-placeholder">[Your Logo/Icon]</span>
|
||||||
|
<span class="site-title">FinFlow</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="main-navigation">
|
||||||
|
<ul class="nav-list">
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Accounts</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Investments</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Advice</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Savings</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="header-actions">
|
||||||
|
<button class="action-button primary-button">Sign Up</button>
|
||||||
|
<button class="action-button secondary-button">Sign In</button>
|
||||||
|
<!-- For authenticated users, these might be: -->
|
||||||
|
<!-- <a href="#" class="user-avatar">[User Avatar]</a> -->
|
||||||
|
<!-- <button class="action-button notification-button">[Notifications]</button> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="mobile-menu-toggle" aria-label="Toggle navigation menu">
|
||||||
|
<span class="toggle-icon">[Menu Icon]</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section id="account-details-section" class="py-8 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<h2 class="text-3xl font-extrabold text-gray-900 mb-6">Your Linked Accounts</h2>
|
||||||
|
|
||||||
|
<div class="bg-white shadow overflow-hidden rounded-lg">
|
||||||
|
<div class="p-4 sm:p-6 border-b border-gray-200 flex justify-between items-center">
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Account Summary</h3>
|
||||||
|
<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Add New Account
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead class="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Account Name</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Institution</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Account Type</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Updated</th>
|
||||||
|
<th scope="col" class="relative px-6 py-3">
|
||||||
|
<span class="sr-only">Actions</span>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white divide-y divide-gray-200">
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="text-sm font-medium text-gray-900">Everyday Checking</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500">**** 1234</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="text-sm text-gray-900">Bank of America</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||||||
|
Checking
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900">
|
||||||
|
$2,450.75
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
2023-10-27 10:30 AM
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
|
||||||
|
<span class="text-gray-300 mx-2">|</span>
|
||||||
|
<a href="#" class="text-red-600 hover:text-red-900">Unlink</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="text-sm font-medium text-gray-900">Growth Savings</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500">**** 5678</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="text-sm text-gray-900">Wells Fargo</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
|
||||||
|
Savings
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900">
|
||||||
|
$15,890.10
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
2023-10-27 09:15 AM
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
|
||||||
|
<span class="text-gray-300 mx-2">|</span>
|
||||||
|
<a href="#" class="text-red-600 hover:text-red-900">Unlink</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="text-sm font-medium text-gray-900">Retirement Portfolio</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500">**** 9012</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="text-sm text-gray-900">Fidelity Investments</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
|
||||||
|
Investment
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900">
|
||||||
|
$123,456.78
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
2023-10-26 05:00 PM
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
|
||||||
|
<span class="text-gray-300 mx-2">|</span>
|
||||||
|
<a href="#" class="text-red-600 hover:text-red-900">Unlink</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="text-sm font-medium text-gray-900">Travel Rewards Card</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500">**** 3456</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="text-sm text-gray-900">Chase</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
|
||||||
|
Credit Card
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900">
|
||||||
|
-$789.00
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
2023-10-27 11:00 AM
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
|
||||||
|
<span class="text-gray-300 mx-2">|</span>
|
||||||
|
<a href="#" class="text-red-600 hover:text-red-900">Unlink</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="add-account-section">
|
||||||
|
<div class="section-container">
|
||||||
|
<div class="add-account-prompt">
|
||||||
|
<h2 class="section-heading">Connect Your Financial Accounts</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Link your bank accounts and investments to start tracking expenses, forecasting savings, and receiving AI-driven investment advice.
|
||||||
|
</p>
|
||||||
|
<button type="button" class="add-account-button">
|
||||||
|
<span class="button-icon">+</span> Add New Account
|
||||||
|
</button>
|
||||||
|
<p class="security-note">
|
||||||
|
Your financial data is securely handled by industry-leading providers.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="data-status-section" style="font-family: Arial, sans-serif; max-width: 700px; margin: 2rem auto; padding: 1.5rem; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
|
||||||
|
<header style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
||||||
|
<h2 style="font-size: 1.6rem; margin: 0;">Refresh Data Status</h2>
|
||||||
|
<p style="font-size: 0.9rem; margin: 0;">Last updated: <time datetime="2023-10-27T10:30:00Z">Oct 27, 2023, 10:30 AM</time></p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; background-color: #f8f8f8; border-radius: 6px;">
|
||||||
|
<span style="font-size: 2rem; line-height: 1;">✔</span>
|
||||||
|
<p style="font-size: 1.2rem; font-weight: bold; margin: 0;">Your financial data is up to date.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;">
|
||||||
|
<p style="font-size: 0.95rem; margin: 0; flex-grow: 1;">Next automatic refresh: <span style="font-weight: bold;">Oct 28, 2023, 03:00 AM</span>.</p>
|
||||||
|
<button style="padding: 0.8rem 1.5rem; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; font-weight: bold;">
|
||||||
|
Refresh Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eee;">
|
||||||
|
<p style="font-size: 0.85rem; margin: 0;">Some accounts may require re-authentication. <a href="#" style="color: #007bff; text-decoration: none;">View details</a>.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-brand">
|
||||||
|
<a href="#" class="footer-logo">
|
||||||
|
<img src="placeholder-logo.svg" alt="[Your Company Name] Logo">
|
||||||
|
<span class="sr-only">[Your Company Name]</span>
|
||||||
|
</a>
|
||||||
|
<p class="footer-tagline">Your intelligent financial companion.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<div class="footer-nav-group">
|
||||||
|
<h3>Product</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Features Overview</a></li>
|
||||||
|
<li><a href="#">Expense Tracking</a></li>
|
||||||
|
<li><a href="#">Savings Forecasting</a></li>
|
||||||
|
<li><a href="#">AI Investment Advice</a></li>
|
||||||
|
<li><a href="#">Bank & Investment 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="#">Press</a></li>
|
||||||
|
<li><a href="#">Blog</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-nav-group">
|
||||||
|
<h3>Support</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Help Center</a></li>
|
||||||
|
<li><a href="#">Contact Us</a></li>
|
||||||
|
<li><a href="#">Security</a></li>
|
||||||
|
<li><a href="#">API Status</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-nav-group">
|
||||||
|
<h3>Legal</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Privacy Policy</a></li>
|
||||||
|
<li><a href="#">Terms of Service</a></li>
|
||||||
|
<li><a href="#">Cookie Policy</a></li>
|
||||||
|
<li><a href="#">Disclosures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="footer-social-connect">
|
||||||
|
<h3>Connect With Us</h3>
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="#" class="social-icon" aria-label="Follow us on LinkedIn">
|
||||||
|
<!-- Placeholder SVG for LinkedIn -->
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2zM4 2.5a1.5 1.5 0 1 1 0 3A1.5 1.5 0 0 1 4 2.5z"></path></svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="social-icon" aria-label="Follow us on Twitter">
|
||||||
|
<!-- Placeholder SVG for Twitter -->
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-6.814L4.99 21.75H1.68l7.73-8.825L1.254 2.25H8.08l4.714 6.236L18.244 2.25zm-.398 1.146L7.403 21.24h-1.39L16.602 3.396h1.242z"></path></svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="social-icon" aria-label="Follow us on Facebook">
|
||||||
|
<!-- Placeholder SVG for Facebook -->
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M14 13.5h2.5l1-4H14V6.75c0-1.033.45-1.75 1.803-1.75H18V2.97c-1.834-.234-3.483-.35-5.185-.35C9.57 2.62 7 5.166 7 9.556V13.5H3v4h4V22h4v-4h3.5v-4.5z"></path></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p class="footer-copyright">© <span id="current-year">2023</span> [Your Company Name]. All rights reserved.</p>
|
||||||
|
<p class="footer-disclaimer">Investment advice provided by [Your Company Name] is for informational purposes only and does not constitute financial advice. Consult a professional advisor before making investment decisions.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.body.style.display = 'none';
|
||||||
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
323
dashboard.html
Normal file
323
dashboard.html
Normal file
@ -0,0 +1,323 @@
|
|||||||
|
|
||||||
|
<!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>
|
||||||
611
expense_tracking.html
Normal file
611
expense_tracking.html
Normal file
@ -0,0 +1,611 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Expense Tracking</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-wrapper">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-container">
|
||||||
|
<a href="#" class="navbar-brand">FinTrackAI</a>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" aria-label="Toggle navigation menu">
|
||||||
|
<span class="toggler-bar"></span>
|
||||||
|
<span class="toggler-bar"></span>
|
||||||
|
<span class="toggler-bar"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="navbar-collapse">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Accounts</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Expenses</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Forecast</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Advice</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="navbar-actions">
|
||||||
|
<a href="#" class="btn btn-secondary">Sign In</a>
|
||||||
|
<a href="#" class="btn btn-primary">Sign Up</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<section id="expense-overview-header" class="expense-overview-section">
|
||||||
|
<div class="container">
|
||||||
|
<header class="expense-header-controls">
|
||||||
|
<h2 class="section-title">Expense Overview</h2>
|
||||||
|
<div class="date-range-selector">
|
||||||
|
<label for="expense-period-select" class="visually-hidden">Select Expense Period</label>
|
||||||
|
<select id="expense-period-select" class="select-period">
|
||||||
|
<option value="current-month">This Month</option>
|
||||||
|
<option value="last-month">Last Month</option>
|
||||||
|
<option value="last-3-months">Last 3 Months</option>
|
||||||
|
<option value="current-year">This Year</option>
|
||||||
|
<option value="custom">Custom Range</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="expense-summary-cards">
|
||||||
|
<div class="summary-card">
|
||||||
|
<p class="card-label">Total Spent</p>
|
||||||
|
<p class="card-value">$1,234.56</p>
|
||||||
|
<p class="card-description">as of October 25, 2023</p>
|
||||||
|
</div>
|
||||||
|
<div class="summary-card">
|
||||||
|
<p class="card-label">Remaining Budget</p>
|
||||||
|
<p class="card-value text-positive">$765.44</p>
|
||||||
|
<p class="card-description">of $2,000.00 monthly budget</p>
|
||||||
|
</div>
|
||||||
|
<div class="summary-card">
|
||||||
|
<p class="card-label">Largest Expense</p>
|
||||||
|
<p class="card-value">$350.00</p>
|
||||||
|
<p class="card-description">Groceries on Oct 22</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="expense-actions">
|
||||||
|
<button class="button button-primary">Add New Expense</button>
|
||||||
|
<button class="button button-secondary">View All Transactions</button>
|
||||||
|
<button class="button button-tertiary">Analyze Spending Patterns</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="transaction-list-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Transaction History</h2>
|
||||||
|
|
||||||
|
<div class="filters-controls">
|
||||||
|
<div class="filter-group">
|
||||||
|
<label for="date-range-filter" class="sr-only">Filter by Date Range</label>
|
||||||
|
<select id="date-range-filter" class="filter-select">
|
||||||
|
<option value="last-30-days">Last 30 Days</option>
|
||||||
|
<option value="this-month">This Month</option>
|
||||||
|
<option value="last-month">Last Month</option>
|
||||||
|
<option value="this-year">This Year</option>
|
||||||
|
<option value="custom">Custom Range</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-group">
|
||||||
|
<label for="account-filter" class="sr-only">Filter by Account</label>
|
||||||
|
<select id="account-filter" class="filter-select">
|
||||||
|
<option value="all-accounts">All Accounts</option>
|
||||||
|
<option value="checking">Checking (...1234)</option>
|
||||||
|
<option value="savings">Savings (...5678)</option>
|
||||||
|
<option value="investment">Investment (...9012)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-group">
|
||||||
|
<label for="category-filter" class="sr-only">Filter by Category</label>
|
||||||
|
<select id="category-filter" class="filter-select">
|
||||||
|
<option value="all-categories">All Categories</option>
|
||||||
|
<option value="food">Food & Dining</option>
|
||||||
|
<option value="housing">Housing</option>
|
||||||
|
<option value="transportation">Transportation</option>
|
||||||
|
<option value="utilities">Utilities</option>
|
||||||
|
<option value="income">Income</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="search-group">
|
||||||
|
<label for="transaction-search" class="sr-only">Search Transactions</label>
|
||||||
|
<input type="search" id="transaction-search" class="search-input" placeholder="Search transactions...">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="transaction-table-wrapper">
|
||||||
|
<table class="transaction-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="date-col">Date</th>
|
||||||
|
<th scope="col" class="description-col">Description</th>
|
||||||
|
<th scope="col" class="category-col">Category</th>
|
||||||
|
<th scope="col" class="account-col">Account</th>
|
||||||
|
<th scope="col" class="amount-col">Amount</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Date">Oct 26, 2023</td>
|
||||||
|
<td data-label="Description">Starbucks Coffee</td>
|
||||||
|
<td data-label="Category">Food & Dining</td>
|
||||||
|
<td data-label="Account">Checking (...1234)</td>
|
||||||
|
<td data-label="Amount" class="expense">-$5.75</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Date">Oct 25, 2023</td>
|
||||||
|
<td data-label="Description">Groceries at Whole Foods</td>
|
||||||
|
<td data-label="Category">Groceries</td>
|
||||||
|
<td data-label="Account">Checking (...1234)</td>
|
||||||
|
<td data-label="Amount" class="expense">-$82.30</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Date">Oct 25, 2023</td>
|
||||||
|
<td data-label="Description">Salary Deposit</td>
|
||||||
|
<td data-label="Category">Income</td>
|
||||||
|
<td data-label="Account">Checking (...1234)</td>
|
||||||
|
<td data-label="Amount" class="income">+$2,500.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Date">Oct 24, 2023</td>
|
||||||
|
<td data-label="Description">Netflix Subscription</td>
|
||||||
|
<td data-label="Category">Entertainment</td>
|
||||||
|
<td data-label="Account">Savings (...5678)</td>
|
||||||
|
<td data-label="Amount" class="expense">-$19.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Date">Oct 23, 2023</td>
|
||||||
|
<td data-label="Description">Investment Purchase (AAPL)</td>
|
||||||
|
<td data-label="Category">Investments</td>
|
||||||
|
<td data-label="Account">Investment (...9012)</td>
|
||||||
|
<td data-label="Amount" class="expense">-$500.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Date">Oct 22, 2023</td>
|
||||||
|
<td data-label="Description">Utility Bill (Electricity)</td>
|
||||||
|
<td data-label="Category">Utilities</td>
|
||||||
|
<td data-label="Account">Checking (...1234)</td>
|
||||||
|
<td data-label="Amount" class="expense">-$75.50</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pagination-controls">
|
||||||
|
<button class="load-more-btn">Load More Transactions</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="category-breakdown-chart" class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Your Financial Categories at a Glance</h2>
|
||||||
|
<p class="section-description">Understand where your money is going with a detailed breakdown of your expenses and income categories.</p>
|
||||||
|
|
||||||
|
<div class="chart-controls">
|
||||||
|
<button class="control-button active">Last 30 Days</button>
|
||||||
|
<button class="control-button">This Quarter</button>
|
||||||
|
<button class="control-button">This Year</button>
|
||||||
|
<select class="control-select">
|
||||||
|
<option value="all-accounts">All Accounts</option>
|
||||||
|
<option value="checking">Checking</option>
|
||||||
|
<option value="credit-card">Credit Card</option>
|
||||||
|
<option value="investments">Investments</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-content-wrapper">
|
||||||
|
<div class="chart-area">
|
||||||
|
<p class="chart-placeholder-text">Placeholder for Dynamic Chart Visualization (e.g., Pie Chart, Bar Chart)</p>
|
||||||
|
<div class="chart-visual-placeholder"></div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-legend">
|
||||||
|
<h3>Category Details</h3>
|
||||||
|
<ul class="category-list">
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #FF6384;"></span>
|
||||||
|
<span class="category-name">Housing & Utilities</span>
|
||||||
|
<span class="category-value">$1,850.00 <span class="percentage">(38%)</span></span>
|
||||||
|
</li>
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #36A2EB;"></span>
|
||||||
|
<span class="category-name">Food & Groceries</span>
|
||||||
|
<span class="category-value">$720.50 <span class="percentage">(15%)</span></span>
|
||||||
|
</li>
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #FFCD56;"></span>
|
||||||
|
<span class="category-name">Transportation</span>
|
||||||
|
<span class="category-value">$500.00 <span class="percentage">(10%)</span></span>
|
||||||
|
</li>
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #4BC0C0;"></span>
|
||||||
|
<span class="category-name">Shopping & Personal Care</span>
|
||||||
|
<span class="category-value">$650.00 <span class="percentage">(13%)</span></span>
|
||||||
|
</li>
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #9966FF;"></span>
|
||||||
|
<span class="category-name">Entertainment & Leisure</span>
|
||||||
|
<span class="category-value">$400.00 <span class="percentage">(8%)</span></span>
|
||||||
|
</li>
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #FF9F40;"></span>
|
||||||
|
<span class="category-name">Health & Wellness</span>
|
||||||
|
<span class="category-value">$280.00 <span class="percentage">(6%)</span></span>
|
||||||
|
</li>
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #C9CBCF;"></span>
|
||||||
|
<span class="category-name">Other Expenses</span>
|
||||||
|
<span class="category-value">$500.00 <span class="percentage">(10%)</span></span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p class="legend-note">Data reflects spending from linked accounts during the selected period.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="budgeting-tool" class="section-container">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Budgeting Tool</h2>
|
||||||
|
<p class="section-description">Take control of your finances. Link your bank accounts, track every expense, forecast your savings, and make smarter financial decisions.</p>
|
||||||
|
|
||||||
|
<div class="grid-layout">
|
||||||
|
<!-- Budget Overview Card -->
|
||||||
|
<div class="card budget-overview-card">
|
||||||
|
<h3 class="card-title">Current Budget Overview</h3>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="metric-group">
|
||||||
|
<p class="metric-label">Income This Month:</p>
|
||||||
|
<p class="metric-value placeholder-income">$XXXX.XX</p>
|
||||||
|
</div>
|
||||||
|
<div class="metric-group">
|
||||||
|
<p class="metric-label">Expenses This Month:</p>
|
||||||
|
<p class="metric-value placeholder-expenses">$XXXX.XX</p>
|
||||||
|
</div>
|
||||||
|
<div class="metric-group remaining-budget">
|
||||||
|
<p class="metric-label">Remaining Budget:</p>
|
||||||
|
<p class="metric-value placeholder-remaining">$XXXX.XX</p>
|
||||||
|
</div>
|
||||||
|
<div class="chart-placeholder">
|
||||||
|
<p>[Placeholder: Visual Bar Chart - Income vs. Expenses]</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expense Tracking Card -->
|
||||||
|
<div class="card expense-tracking-card">
|
||||||
|
<h3 class="card-title">Track Expenses</h3>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="input-form-placeholder">
|
||||||
|
<p>[Placeholder: Input fields for 'Amount', 'Category', 'Description', 'Date']</p>
|
||||||
|
<button class="button primary-button">Add Expense</button>
|
||||||
|
</div>
|
||||||
|
<h4 class="sub-title">Recent Transactions</h4>
|
||||||
|
<ul class="transaction-list">
|
||||||
|
<li class="transaction-item">
|
||||||
|
<span class="transaction-description">Groceries</span>
|
||||||
|
<span class="transaction-amount">-$XX.XX</span>
|
||||||
|
<span class="transaction-date">MM/DD/YYYY</span>
|
||||||
|
</li>
|
||||||
|
<li class="transaction-item">
|
||||||
|
<span class="transaction-description">Rent Payment</span>
|
||||||
|
<span class="transaction-amount">-$XXX.XX</span>
|
||||||
|
<span class="transaction-date">MM/DD/YYYY</span>
|
||||||
|
</li>
|
||||||
|
<li class="transaction-item">
|
||||||
|
<span class="transaction-description">Salary Deposit</span>
|
||||||
|
<span class="transaction-amount">+$XXXX.XX</span>
|
||||||
|
<span class="transaction-date">MM/DD/YYYY</span>
|
||||||
|
</li>
|
||||||
|
<li class="transaction-item">
|
||||||
|
<span class="transaction-description">Utilities Bill</span>
|
||||||
|
<span class="transaction-amount">-$XX.XX</span>
|
||||||
|
<span class="transaction-date">MM/DD/YYYY</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="button secondary-button">View All Transactions</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Savings Goals & Forecast Card -->
|
||||||
|
<div class="card savings-forecast-card">
|
||||||
|
<h3 class="card-title">Savings Goals & Forecast</h3>
|
||||||
|
<div class="card-content">
|
||||||
|
<ul class="goal-list">
|
||||||
|
<li class="goal-item">
|
||||||
|
<span class="goal-name">Down Payment</span>
|
||||||
|
<span class="goal-progress">Progress: XX% ($X,XXX / $XX,XXX)</span>
|
||||||
|
</li>
|
||||||
|
<li class="goal-item">
|
||||||
|
<span class="goal-name">Emergency Fund</span>
|
||||||
|
<span class="goal-progress">Progress: XX% ($X,XXX / $X,XXX)</span>
|
||||||
|
</li>
|
||||||
|
<li class="goal-item">
|
||||||
|
<span class="goal-name">Vacation Fund</span>
|
||||||
|
<span class="goal-progress">Progress: XX% ($XXX / $X,XXX)</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="chart-placeholder">
|
||||||
|
<p>[Placeholder: Line Chart - Savings Projection Over Time]</p>
|
||||||
|
</div>
|
||||||
|
<button class="button primary-button">Set New Goal</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Linked Accounts Card -->
|
||||||
|
<div class="card linked-accounts-card">
|
||||||
|
<h3 class="card-title">Linked Accounts</h3>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>Connect your financial institutions to automatically track income and expenses using Plaid or similar services.</p>
|
||||||
|
<button class="button primary-button connect-plaid-button">
|
||||||
|
<span class="icon-placeholder">[🔗]</span> Link New Account
|
||||||
|
</button>
|
||||||
|
<h4 class="sub-title">Your Linked Banks:</h4>
|
||||||
|
<ul class="account-list">
|
||||||
|
<li class="account-item">Bank of America <span class="status-indicator">[Active]</span></li>
|
||||||
|
<li class="account-item">Fidelity Investments <span class="status-indicator">[Active]</span></li>
|
||||||
|
<li class="account-item">Chase Bank <span class="status-indicator">[Active]</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AI Budgeting Insights Card -->
|
||||||
|
<div class="card ai-insights-card">
|
||||||
|
<h3 class="card-title">Personalized Budgeting Advice</h3>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>Our AI analyzes your spending habits and financial goals to provide tailored recommendations.</p>
|
||||||
|
<ul class="advice-list">
|
||||||
|
<li>"Consider reducing spending in 'Dining Out' by 15% this month for faster goal achievement."</li>
|
||||||
|
<li>"You have an opportunity to save an extra $XX by optimizing your 'Shopping' budget."</li>
|
||||||
|
<li>"Your projected savings goal is achievable X months earlier if you increase contributions by $XX."</li>
|
||||||
|
</ul>
|
||||||
|
<button class="button secondary-button">Get More Insights</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="expense-management" class="py-12 bg-gray-50 dark:bg-gray-800">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8">Expense Filtering & Sorting</h2>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 mb-8">
|
||||||
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Filter Expenses</h3>
|
||||||
|
<form class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="search-expenses" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Search by Merchant/Description</label>
|
||||||
|
<input type="search" id="search-expenses" name="search" placeholder="e.g., Starbucks, Rent" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="filter-category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
|
||||||
|
<select id="filter-category" name="category" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
<option value="">All Categories</option>
|
||||||
|
<option value="food">Food & Dining</option>
|
||||||
|
<option value="transport">Transportation</option>
|
||||||
|
<option value="bills">Bills & Utilities</option>
|
||||||
|
<option value="shopping">Shopping</option>
|
||||||
|
<option value="entertainment">Entertainment</option>
|
||||||
|
<option value="health">Health & Fitness</option>
|
||||||
|
<option value="housing">Housing</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="filter-account" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Account</label>
|
||||||
|
<select id="filter-account" name="account" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
<option value="">All Accounts</option>
|
||||||
|
<option value="checking">Checking Account (**** 1234)</option>
|
||||||
|
<option value="savings">Savings Account (**** 5678)</option>
|
||||||
|
<option value="credit">Credit Card (**** 9012)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-1 md:col-span-2 lg:col-span-1">
|
||||||
|
<label for="filter-start-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Date Range (From)</label>
|
||||||
|
<input type="date" id="filter-start-date" name="startDate" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 md:col-span-2 lg:col-span-1">
|
||||||
|
<label for="filter-end-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Date Range (To)</label>
|
||||||
|
<input type="date" id="filter-end-date" name="endDate" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="filter-min-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Min Amount</label>
|
||||||
|
<input type="number" id="filter-min-amount" name="minAmount" placeholder="$0.00" min="0" step="0.01" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="filter-max-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Max Amount</label>
|
||||||
|
<input type="number" id="filter-max-amount" name="maxAmount" placeholder="$1000.00" min="0" step="0.01" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-full flex justify-end space-x-3 mt-4">
|
||||||
|
<button type="reset" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||||
|
Clear Filters
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||||
|
Apply Filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 mb-8">
|
||||||
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Sort Expenses</h3>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="sort-by" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Sort By</label>
|
||||||
|
<select id="sort-by" name="sortBy" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
<option value="date">Date</option>
|
||||||
|
<option value="amount">Amount</option>
|
||||||
|
<option value="category">Category</option>
|
||||||
|
<option value="merchant">Merchant</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="sort-order" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Sort Order</label>
|
||||||
|
<select id="sort-order" name="sortOrder" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
<option value="desc">Descending</option>
|
||||||
|
<option value="asc">Ascending</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 overflow-x-auto">
|
||||||
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Your Expenses</h3>
|
||||||
|
<div class="min-w-full">
|
||||||
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<thead class="bg-gray-50 dark:bg-gray-800">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Date</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Merchant</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Category</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Amount</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Account</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-26</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Coffee Shop Name</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Food & Dining</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$5.50</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Checking</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-25</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Grocery Store Name</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Shopping</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$75.23</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Credit Card</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-24</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Electric Company</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Bills & Utilities</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$120.00</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Checking</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-23</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Online Streaming Service</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Entertainment</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$15.99</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Credit Card</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-22</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Gas Station</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Transportation</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$40.00</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Savings</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="mt-6 flex justify-between items-center" aria-label="Pagination">
|
||||||
|
<div class="hidden sm:block">
|
||||||
|
<p class="text-sm text-gray-700 dark:text-gray-300">
|
||||||
|
Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">50</span> results
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex justify-between sm:justify-end">
|
||||||
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||||
|
Previous
|
||||||
|
</a>
|
||||||
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||||
|
Next
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-brand">
|
||||||
|
<a href="#" class="footer-logo">
|
||||||
|
<!-- Placeholder for logo image or text -->
|
||||||
|
<span class="logo-text">FinTrack AI</span>
|
||||||
|
</a>
|
||||||
|
<p class="footer-description">
|
||||||
|
Your smart financial companion for tracking, forecasting, and investing.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<div class="footer-nav-column">
|
||||||
|
<h3 class="footer-heading">Product</h3>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="#">How It Works</a></li>
|
||||||
|
<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="#">Security</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-nav-column">
|
||||||
|
<h3 class="footer-heading">Company</h3>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<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>
|
||||||
|
<li><a href="#">Developers (API)</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-nav-column">
|
||||||
|
<h3 class="footer-heading">Support</h3>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="#">FAQ</a></li>
|
||||||
|
<li><a href="#">Help Center</a></li>
|
||||||
|
<li><a href="#">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-nav-column">
|
||||||
|
<h3 class="footer-heading">Legal</h3>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="#">Privacy Policy</a></li>
|
||||||
|
<li><a href="#">Terms of Service</a></li>
|
||||||
|
<li><a href="#">Disclaimer</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="footer-social">
|
||||||
|
<h3 class="footer-heading">Connect</h3>
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="#" aria-label="Facebook"><span class="icon-placeholder">Fb</span></a>
|
||||||
|
<a href="#" aria-label="Twitter"><span class="icon-placeholder">Tw</span></a>
|
||||||
|
<a href="#" aria-label="LinkedIn"><span class="icon-placeholder">Li</span></a>
|
||||||
|
<a href="#" aria-label="Instagram"><span class="icon-placeholder">Ig</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p class="footer-copyright">
|
||||||
|
© 2023 FinTrack AI. All rights reserved.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.body.style.display = 'none';
|
||||||
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
19
index.html
19
index.html
@ -1,4 +1,4 @@
|
|||||||
SafeValue must use [property]=binding:
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
@ -9,14 +9,13 @@ SafeValue must use [property]=binding:
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="page-wrapper">
|
<div class="page-wrapper">
|
||||||
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Amazon Prime</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Products</a></li><li><a href="product_detail_page.html">Deals</a></li><li><a href="cart_page.html">Cart</a></li><li><a href="checkout_page.html">Checkout</a></li><li><a href="user_account_dashboard.html">My Account</a></li><li class="nav-1-dropdown"><a href="#">Shop by Category<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">Sign In</button><button class="nav-1-btn nav-1-solid">Register</button></div></nav></div>
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Amazon Prime</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Products</a></li><li><a href="product_detail_page.html">Deals</a></li><li><a href="cart_page.html">Cart</a></li><li><a href="checkout_page.html">Checkout</a></li><li><a href="user_account_dashboard.html">My Account</a></li><li class="nav-1-dropdown"><a href="#">Shop by Category<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">Sign In</button><button class="nav-1-btn nav-1-solid">Register</button></div></nav></div>
|
||||||
<div class="hero-2-wrapper"><section class="hero-2-centered-hero"><h2 class="hero-2-heading">Your Daily Dose of Deals & Discoveries</h2><p class="hero-2-description">Explore millions of products, from electronics to fashion, home goods to groceries. Enjoy fast shipping, competitive prices, and a secure shopping experience tailored just for you.</p><div class="hero-2-button-group"><button class="hero-2-btn hero-2-solid">Start Shopping</button><button class="hero-2-btn hero-2-outline">Today's Deals</button></div><div class="hero-2-image"><img class="hero-2-placeholder" src="https://images.unsplash.com/photo-1583167727779-915662aef3a8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHxvbmxpbmUlMjUyMHNob3BwaW5nJTJDJTI1MjBtYXJrZXRwbGFjZSUyQyUyNTIwcHJvZHVjdHMlMkMlMjUyMGRlYWxzJTJDJTI1MjBkZWxpdmVyeSUyQyUyNTIwZS1jb21tZXJjZXxlbnwwfHx8fDE3NTIzMjc3Njl8MA&ixlib=rb-4.1.0&q=80&w=1080" /></div></section></div>
|
<div class="hero-2-wrapper"><section class="hero-2-centered-hero"><h2 class="hero-2-heading">Your Daily Dose of Deals & Discoveries</h2><p class="hero-2-description">Explore millions of products, from electronics to fashion, home goods to groceries. Enjoy fast shipping, competitive prices, and a secure shopping experience tailored just for you.</p><div class="hero-2-button-group"><button class="hero-2-btn hero-2-solid">Start Shopping</button><button class="hero-2-btn hero-2-outline">Today's Deals</button></div><div class="hero-2-image"><img class="hero-2-placeholder" src="https://images.unsplash.com/photo-1583167727779-915662aef3a8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHxvbmxpbmUlMjUyMHNob3BwaW5nJTJDJTI1MjBtYXJrZXRwbGFjZSUyQyUyNTIwcHJvZHVjdHMlMkMlMjUyMGRlYWxzJTJDJTI1MjBkZWxpdmVyeSUyQyUyNTIwZS1jb21tZXJjZXxlbnwwfHx8fDE3NTIzMjc3Njl8MA&ixlib=rb-4.1.0&q=80&w=1080"></div></section></div>
|
||||||
<div class="feature-6-wrapper"><section class="feature-6-section"><div class="feature-6-text"><p class="feature-6-tag">Unbeatable Selection</p><h1 class="feature-6-title">Your World, Delivered.</h1><p class="feature-6-subtitle">Explore a universe of products, from everyday necessities to unique finds. Our seamless shopping experience brings convenience, incredible value, and fast delivery right to your fingertips.</p><div class="feature-6-benefits"><div class="feature-6-benefit"><i class="fas fa-cube"></i><h3>Vast Product Range</h3><p>Find everything you need and more, with millions of products across countless categories.</p></div><div class="feature-6-benefit"><i class="fas fa-cube"></i><h3>Fast & Reliable Delivery</h3><p>Get your orders delivered quickly and securely, often with same-day or next-day options.</p></div></div><div class="feature-6-actions"><button class="feature-6-btn feature-6-primary">Start Shopping Now</button><a class="feature-6-btn-link">Create Account</a></div></div><div class="feature-6-image"><div class="feature-6-placeholder"></div></div></section></div>
|
<div class="feature-6-wrapper"><section class="feature-6-section"><div class="feature-6-text"><p class="feature-6-tag">Unbeatable Selection</p><h1 class="feature-6-title">Your World, Delivered.</h1><p class="feature-6-subtitle">Explore a universe of products, from everyday necessities to unique finds. Our seamless shopping experience brings convenience, incredible value, and fast delivery right to your fingertips.</p><div class="feature-6-benefits"><div class="feature-6-benefit"><i class="fas fa-cube"></i><h3>Vast Product Range</h3><p>Find everything you need and more, with millions of products across countless categories.</p></div><div class="feature-6-benefit"><i class="fas fa-cube"></i><h3>Fast & Reliable Delivery</h3><p>Get your orders delivered quickly and securely, often with same-day or next-day options.</p></div></div><div class="feature-6-actions"><button class="feature-6-btn feature-6-primary">Start Shopping Now</button><a class="feature-6-btn-link">Create Account</a></div></div><div class="feature-6-image"><div class="feature-6-placeholder"></div></div></section></div>
|
||||||
<div class="testimonial-1-wrapper"><div class="testimonial-1-container"><img class="testimonial-1-logo" src="webflow-logo.svg" alt="Webflow"></img><p class="testimonial-1-text">The selection on ShopCentral is unbelievable – I find everything from daily essentials to unique gifts. What truly stands out is the lightning-fast delivery and the seamless return process. My absolute favorite online marketplace!</p><div class="testimonial-1-author"><img class="testimonial-1-author-image" src="author-avatar.jpg" alt="Author Avatar"></img><div class="testimonial-1-author-info"><p class="testimonial-1-author-name">Maria S.</p><p class="testimonial-1-author-position">Online Shopping Enthusiast</p></div></div></div></div>
|
<div class="testimonial-1-wrapper"><div class="testimonial-1-container"><img class="testimonial-1-logo" src="webflow-logo.svg" alt="Webflow"><p class="testimonial-1-text">The selection on ShopCentral is unbelievable – I find everything from daily essentials to unique gifts. What truly stands out is the lightning-fast delivery and the seamless return process. My absolute favorite online marketplace!</p><div class="testimonial-1-author"><img class="testimonial-1-author-image" src="author-avatar.jpg" alt="Author Avatar"><div class="testimonial-1-author-info"><p class="testimonial-1-author-name">Maria S.</p><p class="testimonial-1-author-position">Online Shopping Enthusiast</p></div></div></div></div>
|
||||||
⚠️ HTML API call failed.
|
<div class="pricing-2-wrapper"><section class="pricing-2-section"><p class="pricing-2-tagline">Unlock More Savings</p><h2 class="pricing-2-heading">Choose Your Prime Membership</h2><p class="pricing-2-subheading">Discover exclusive benefits, faster shipping, and endless entertainment with Amazon Prime. Join millions of satisfied members today!</p><div class="pricing-2-toggle"><button class="pricing-2-btn pricing-2-btn-active">Monthly Billing</button><button class="pricing-2-btn">Annual Billing (Save 15%)</button></div><div class="pricing-2-grid"><div class="pricing-2-card"><i class="fas fa-cube pricing-2-icon"></i><h3 class="pricing-2-plan-title">Prime Monthly</h3><p class="pricing-2-plan-subtitle">Flexible benefits, cancel anytime.</p><p class="pricing-2-price">$14.99/mo</p><hr class="pricing-2-divider"><p class="pricing-2-includes">Includes:</p><ul class="pricing-2-feature-list"><li>✓ Fast, FREE Shipping on millions of items</li><li>✓ Unlimited streaming of Prime Video</li><li>✓ Ad-free access to 100 million songs with Amazon Music</li><li>✓ Exclusive Prime Day Deals</li><li>✓ Free games and in-game content with Prime Gaming</li><li>✓ Prime Reading: borrow eBooks, magazines, and more</li></ul><button class="pricing-2-cta">Start your Free Trial</button></div><div class="pricing-2-card"><i class="fas fa-cube pricing-2-icon"></i><h3 class="pricing-2-plan-title">Prime Annual</h3><p class="pricing-2-plan-subtitle">Best value for a full year of benefits.</p><p class="pricing-2-price">$139/year</p><hr class="pricing-2-divider"><p class="pricing-2-includes">Includes:</p><ul class="pricing-2-feature-list"><li>✓ All Monthly Prime benefits included</li><li>✓ Significant savings compared to monthly plan</li><li>✓ Priority access to Lightning Deals</li><li>✓ Prime Try Before You Buy for fashion</li><li>✓ Unlimited photo storage with Amazon Photos</li><li>✓ Share benefits with household members</li></ul><button class="pricing-2-cta">Join Prime Annually</button></div></div></section></div>
|
||||||
<div class="pricing-2-wrapper"><section class="pricing-2-section"><p class="pricing-2-tagline">Unlock More Savings</p><h2 class="pricing-2-heading">Choose Your Prime Membership</h2><p class="pricing-2-subheading">Discover exclusive benefits, faster shipping, and endless entertainment with Amazon Prime. Join millions of satisfied members today!</p><div class="pricing-2-toggle"><button class="pricing-2-btn pricing-2-btn-active">Monthly Billing</button><button class="pricing-2-btn">Annual Billing (Save 15%)</button></div><div class="pricing-2-grid"><div class="pricing-2-card"><i class="fas fa-cube pricing-2-icon"></i><h3 class="pricing-2-plan-title">Prime Monthly</h3><p class="pricing-2-plan-subtitle">Flexible benefits, cancel anytime.</p><p class="pricing-2-price">$14.99/mo</p><hr class="pricing-2-divider"></hr><p class="pricing-2-includes">Includes:</p><ul class="pricing-2-feature-list"><li>✓ Fast, FREE Shipping on millions of items</li><li>✓ Unlimited streaming of Prime Video</li><li>✓ Ad-free access to 100 million songs with Amazon Music</li><li>✓ Exclusive Prime Day Deals</li><li>✓ Free games and in-game content with Prime Gaming</li><li>✓ Prime Reading: borrow eBooks, magazines, and more</li></ul><button class="pricing-2-cta">Start your Free Trial</button></div><div class="pricing-2-card"><i class="fas fa-cube pricing-2-icon"></i><h3 class="pricing-2-plan-title">Prime Annual</h3><p class="pricing-2-plan-subtitle">Best value for a full year of benefits.</p><p class="pricing-2-price">$139/year</p><hr class="pricing-2-divider"></hr><p class="pricing-2-includes">Includes:</p><ul class="pricing-2-feature-list"><li>✓ All Monthly Prime benefits included</li><li>✓ Significant savings compared to monthly plan</li><li>✓ Priority access to Lightning Deals</li><li>✓ Prime Try Before You Buy for fashion</li><li>✓ Unlimited photo storage with Amazon Photos</li><li>✓ Share benefits with household members</li></ul><button class="pricing-2-cta">Join Prime Annually</button></div></div></section></div>
|
<div class="cta-3-wrapper"><section class="cta-3-section"><h2 class="cta-3-heading">Explore Millions of Products, Endless Possibilities</h2><p class="cta-3-description">From electronics to fashion, home essentials to books, find everything you love and need with fast delivery and great prices.</p><div class="cta-3-button-group"><button class="cta-3-btn cta-3-solid">Shop Now</button><button class="cta-3-btn cta-3-outline">Create Account</button></div></section></div>
|
||||||
<div class="cta-3-wrapper"><section class="cta-3-section"><h2 class="cta-3-heading">Explore Millions of Products, Endless Possibilities</h2><p class="cta-3-description">From electronics to fashion, home essentials to books, find everything you love and need with fast delivery and great prices.</p><div class="cta-3-button-group"><button class="cta-3-btn cta-3-solid">Shop Now</button><button class="cta-3-btn cta-3-outline">Create Account</button></div></section></div>
|
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Amazon</h3><p><strong>Address:</strong><br><br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br><br><span>1800 123 4567</span><br><br><a href="mailto:info@amazon.com">info@amazon.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="your_account.html">Your Account</a></li><li><a href="your_orders.html">Your Orders</a></li><li><a href="shipping_delivery.html">Shipping & Delivery</a></li><li><a href="returns_replacements.html">Returns & Replacements</a></li><li><a href="help.html">Help</a></li></ul><ul><li><a href="sell_on_amazon.html">Sell on Amazon</a></li><li><a href="amazon_associates.html">Amazon Associates</a></li><li><a href="careers.html">Careers</a></li><li><a href="gift_cards.html">Gift Cards</a></li><li><a href="amazon_app.html">Amazon App</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2025 Amazon. All rights reserved.</p><ul class="footer-2-links"><li><a href="privacy_policy.html">Privacy Policy</a></li><li><a href="conditions_of_use.html">Conditions of Use</a></li><li><a href="cookies_settings.html">Cookies Settings</a></li><li><a href="order_confirmation_page.html">Order Confirmation</a></li></ul></div></section></div>
|
||||||
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Amazon</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1800 123 4567</span><br></br><a href="mailto:info@amazon.com">info@amazon.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="your_account.html">Your Account</a></li><li><a href="your_orders.html">Your Orders</a></li><li><a href="shipping_delivery.html">Shipping & Delivery</a></li><li><a href="returns_replacements.html">Returns & Replacements</a></li><li><a href="help.html">Help</a></li></ul><ul><li><a href="sell_on_amazon.html">Sell on Amazon</a></li><li><a href="amazon_associates.html">Amazon Associates</a></li><li><a href="careers.html">Careers</a></li><li><a href="gift_cards.html">Gift Cards</a></li><li><a href="amazon_app.html">Amazon App</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2025 Amazon. All rights reserved.</p><ul class="footer-2-links"><li><a href="privacy_policy.html">Privacy Policy</a></li><li><a href="conditions_of_use.html">Conditions of Use</a></li><li><a href="cookies_settings.html">Cookies Settings</a></li><li><a href="order_confirmation_page.html">Order Confirmation</a></li></ul></div></section></div>
|
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
@ -25,4 +24,4 @@ SafeValue must use [property]=binding:
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html> (see https://g.co/ng/security#xss)
|
</html>
|
||||||
448
investment_advice.html
Normal file
448
investment_advice.html
Normal file
@ -0,0 +1,448 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Investment Advice</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" />
|
||||||
|
<header class="navbar">
|
||||||
|
<a href="#" class="navbar__logo" aria-label="FinTech Platform Homepage">
|
||||||
|
<span class="navbar__logo-icon" aria-hidden="true"></span>
|
||||||
|
<span class="navbar__logo-text">FinTrack</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="navbar__nav-wrapper">
|
||||||
|
<ul class="navbar__nav-links">
|
||||||
|
<li><a href="#dashboard" class="active">Dashboard</a></li>
|
||||||
|
<li><a href="#accounts">Accounts</a></li>
|
||||||
|
<li><a href="#expenses">Expenses</a></li>
|
||||||
|
<li><a href="#savings">Savings</a></li>
|
||||||
|
<li><a href="#advice">Advice</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="navbar__actions">
|
||||||
|
<a href="#connect" class="navbar__button">Connect Account</a>
|
||||||
|
<div class="navbar__user-profile" aria-haspopup="true" aria-expanded="false" tabindex="0" role="button">
|
||||||
|
<span class="navbar__user-avatar" aria-label="User Avatar">JD</span>
|
||||||
|
<span class="navbar__user-name">John Doe</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="navbar__hamburger" aria-label="Toggle navigation menu">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
<main style="padding: 2rem; max-width: 1200px; margin: 20px auto; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
|
||||||
|
<h1>Welcome to FinTrack</h1>
|
||||||
|
<p>This is placeholder content for your main dashboard area.</p>
|
||||||
|
<p>Your financial overview, expense tracking, savings forecast, and AI-driven investment advice will appear here after connecting your accounts.</p>
|
||||||
|
<div style="height: 800px; background-color: #f9f9f9; border: 1px dashed #ccc; margin-top: 20px; display: flex; justify-content: center; align-items: center; color: #888;">
|
||||||
|
Wireframe Placeholder for Dashboard Content
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
// Simple JavaScript for hamburger menu toggle (for demonstration)
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const hamburger = document.querySelector('.navbar__hamburger');
|
||||||
|
const navLinks = document.querySelector('.navbar__nav-links');
|
||||||
|
|
||||||
|
hamburger.addEventListener('click', () => {
|
||||||
|
navLinks.classList.toggle('active');
|
||||||
|
hamburger.setAttribute('aria-expanded', navLinks.classList.contains('active'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close nav when a link is clicked (on mobile)
|
||||||
|
navLinks.querySelectorAll('a').forEach(link => {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
if (navLinks.classList.contains('active')) {
|
||||||
|
navLinks.classList.remove('active');
|
||||||
|
hamburger.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<section class="advice-header">
|
||||||
|
<div class="container">
|
||||||
|
<h1>AI-Driven Financial Insights</h1>
|
||||||
|
<p>Unlock personalized investment advice and strategic recommendations based on your linked accounts, expenses, and savings goals.</p>
|
||||||
|
<a href="#get-advice" class="button primary-button">Get My Personalized Advice</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="recommendation-card-section" style="padding: 4rem 1rem; background-color: #f8f8f8; font-family: Arial, sans-serif; text-align: center;">
|
||||||
|
<div style="max-width: 1200px; margin: 0 auto;">
|
||||||
|
<h2 style="font-size: 2.5rem; color: #333; margin-bottom: 1rem;">Your AI-Powered Financial Recommendations</h2>
|
||||||
|
<p style="font-size: 1.1rem; color: #666; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto;">
|
||||||
|
Based on your linked accounts and investment goals, our AI has generated personalized advice to help you grow your wealth.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
|
||||||
|
<article style="background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: left; display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<h3 style="font-size: 1.6rem; color: #007bff; margin-bottom: 1rem;">Diversify Your Portfolio</h3>
|
||||||
|
<p style="font-size: 1rem; color: #555; line-height: 1.6;">
|
||||||
|
Consider allocating a portion of your funds to diversified ETFs to mitigate risk and capture broad market growth. Our analysis suggests specific sectors.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 1.5rem;">
|
||||||
|
<a href="#" style="display: inline-block; padding: 0.8rem 1.5rem; background-color: #007bff; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease;">
|
||||||
|
Explore Details
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article style="background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: left; display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<h3 style="font-size: 1.6rem; color: #28a745; margin-bottom: 1rem;">Optimize Your Savings Rate</h3>
|
||||||
|
<p style="font-size: 1rem; color: #555; line-height: 1.6;">
|
||||||
|
Your current savings rate could be optimized for faster goal achievement. We recommend adjusting your monthly contributions to reach milestones sooner.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 1.5rem;">
|
||||||
|
<a href="#" style="display: inline-block; padding: 0.8rem 1.5rem; background-color: #28a745; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease;">
|
||||||
|
Adjust Plan
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article style="background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: left; display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<h3 style="font-size: 1.6rem; color: #ffc107; margin-bottom: 1rem;">Consider Alternative Investments</h3>
|
||||||
|
<p style="font-size: 1rem; color: #555; line-height: 1.6;">
|
||||||
|
Based on your risk tolerance, explore opportunities in real estate crowdfunding or peer-to-peer lending for potentially higher returns.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 1.5rem;">
|
||||||
|
<a href="#" style="display: inline-block; padding: 0.8rem 1.5rem; background-color: #ffc107; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease;">
|
||||||
|
Learn More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article style="background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: left; display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<h3 style="font-size: 1.6rem; color: #17a2b8; margin-bottom: 1rem;">Rebalance Your Holdings</h3>
|
||||||
|
<p style="font-size: 1rem; color: #555; line-height: 1.6;">
|
||||||
|
Your portfolio may have drifted from its target asset allocation. We suggest rebalancing to maintain your desired risk-reward profile.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 1.5rem;">
|
||||||
|
<a href="#" style="display: inline-block; padding: 0.8rem 1.5rem; background-color: #17a2b8; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease;">
|
||||||
|
Review Now
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Portfolio Performance</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<section class="portfolio-performance-section" aria-labelledby="portfolio-performance-heading">
|
||||||
|
<h2 id="portfolio-performance-heading">Portfolio Performance</h2>
|
||||||
|
|
||||||
|
<div class="chart-controls">
|
||||||
|
<div class="time-range-buttons" role="group" aria-label="Select time range for chart">
|
||||||
|
<button type="button" class="active">1D</button>
|
||||||
|
<button type="button">1W</button>
|
||||||
|
<button type="button">1M</button>
|
||||||
|
<button type="button">3M</button>
|
||||||
|
<button type="button">1Y</button>
|
||||||
|
<button type="button">All</button>
|
||||||
|
</div>
|
||||||
|
<div class="view-selector">
|
||||||
|
<label for="chart-view-select" class="sr-only">Select chart view type</label>
|
||||||
|
<select id="chart-view-select" aria-label="Chart view type">
|
||||||
|
<option value="value">Portfolio Value</option>
|
||||||
|
<option value="gain-loss">Daily Gain/Loss</option>
|
||||||
|
<option value="allocation">Asset Allocation</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-container" role="img" aria-label="Interactive chart showing portfolio performance over time">
|
||||||
|
<p class="chart-placeholder-text">Placeholder for interactive performance chart (e.g., Line Chart with D3.js or Chart.js)</p>
|
||||||
|
<!-- A real chart library (e.g., Chart.js, D3.js, Highcharts) would render here -->
|
||||||
|
<!-- Example: <canvas id="performanceChart"></canvas> or <svg id="performanceSVG"></svg> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="key-metrics">
|
||||||
|
<div class="metric-card">
|
||||||
|
<p class="metric-label">Current Value</p>
|
||||||
|
<p class="metric-value">$52,345.67</p>
|
||||||
|
<p class="metric-change positive">+1.23% ($634.50)</p>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card">
|
||||||
|
<p class="metric-label">Total Gain/Loss</p>
|
||||||
|
<p class="metric-value positive">+$7,890.12</p>
|
||||||
|
<p class="metric-change positive">+17.75% (All Time)</p>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card">
|
||||||
|
<p class="metric-label">Today's Change</p>
|
||||||
|
<p class="metric-value negative">-$123.45</p>
|
||||||
|
<p class="metric-change negative">-0.24%</p>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card">
|
||||||
|
<p class="metric-label">Annualized Return</p>
|
||||||
|
<p class="metric-value positive">8.50%</p>
|
||||||
|
<p class="metric-change neutral">(Estimated)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="risk-profile-assessment" class="py-12 bg-gray-50">
|
||||||
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-extrabold text-gray-900 text-center mb-6">Your Risk Profile Assessment</h2>
|
||||||
|
<p class="text-lg text-gray-700 text-center mb-10">
|
||||||
|
Understand your investment comfort level to help us tailor personalized advice. Your responses will guide our AI in recommending suitable investment strategies.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form class="space-y-8 bg-white p-8 rounded-lg shadow-xl">
|
||||||
|
|
||||||
|
<!-- Question 1: Investment Horizon -->
|
||||||
|
<fieldset class="border-b border-gray-200 pb-8">
|
||||||
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 1 of 5: Investment Horizon</legend>
|
||||||
|
<p class="text-gray-700 mb-4">How long do you plan to invest your money before needing to withdraw it?</p>
|
||||||
|
<div class="mt-4 space-y-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="horizon-short" name="investment_horizon" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="horizon-short" class="ml-3 block text-base font-medium text-gray-700">Less than 3 years (Short-term)</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="horizon-medium" name="investment_horizon" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="horizon-medium" class="ml-3 block text-base font-medium text-gray-700">3-7 years (Medium-term)</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="horizon-long" name="investment_horizon" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="horizon-long" class="ml-3 block text-base font-medium text-gray-700">More than 7 years (Long-term)</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- Question 2: Risk Tolerance for Loss -->
|
||||||
|
<fieldset class="border-b border-gray-200 pb-8 pt-8">
|
||||||
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 2 of 5: Risk Tolerance</legend>
|
||||||
|
<p class="text-gray-700 mb-4">How would you react if your investment portfolio lost 20% of its value in a short period?</p>
|
||||||
|
<div class="mt-4 space-y-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="loss-panic" name="loss_reaction" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="loss-panic" class="ml-3 block text-base font-medium text-gray-700">Panic and sell immediately</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="loss-worry" name="loss_reaction" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="loss-worry" class="ml-3 block text-base font-medium text-gray-700">Worried, but would wait for recovery</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="loss-buy" name="loss_reaction" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="loss-buy" class="ml-3 block text-base font-medium text-gray-700">See it as a buying opportunity</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- Question 3: Financial Goals -->
|
||||||
|
<fieldset class="border-b border-gray-200 pb-8 pt-8">
|
||||||
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 3 of 5: Financial Goals</legend>
|
||||||
|
<p class="text-gray-700 mb-4">Which of the following best describes your primary financial goal?</p>
|
||||||
|
<div class="mt-4 space-y-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="goal-preserve" name="financial_goal" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="goal-preserve" class="ml-3 block text-base font-medium text-gray-700">Capital preservation (low risk, low return)</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="goal-growth" name="financial_goal" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="goal-growth" class="ml-3 block text-base font-medium text-gray-700">Balanced growth (moderate risk, moderate return)</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="goal-aggressive" name="financial_goal" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="goal-aggressive" class="ml-3 block text-base font-medium text-gray-700">Aggressive growth (high risk, high return potential)</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- Question 4: Investment Knowledge -->
|
||||||
|
<fieldset class="border-b border-gray-200 pb-8 pt-8">
|
||||||
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 4 of 5: Investment Knowledge</legend>
|
||||||
|
<p class="text-gray-700 mb-4">How would you describe your current knowledge of investment products and markets?</p>
|
||||||
|
<select id="investment-knowledge" name="investment_knowledge" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
|
||||||
|
<option value="">Please select...</option>
|
||||||
|
<option value="beginner">Beginner (Little to no knowledge)</option>
|
||||||
|
<option value="intermediate">Intermediate (Understand basic concepts)</option>
|
||||||
|
<option value="advanced">Advanced (Familiar with complex instruments)</option>
|
||||||
|
<option value="expert">Expert (Professionally involved)</option>
|
||||||
|
</select>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- Question 5: Income Stability -->
|
||||||
|
<fieldset class="pb-8 pt-8">
|
||||||
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 5 of 5: Income Stability</legend>
|
||||||
|
<p class="text-gray-700 mb-4">How stable is your current income and financial situation?</p>
|
||||||
|
<div class="mt-4 space-y-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="income-unstable" name="income_stability" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="income-unstable" class="ml-3 block text-base font-medium text-gray-700">Very unstable (Income fluctuates significantly)</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="income-moderate" name="income_stability" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="income-moderate" class="ml-3 block text-base font-medium text-gray-700">Moderately stable (Some fluctuations, but manageable)</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="income-stable" name="income_stability" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="income-stable" class="ml-3 block text-base font-medium text-gray-700">Very stable (Consistent income, secure employment)</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<div class="pt-8 flex justify-end">
|
||||||
|
<button type="submit" class="inline-flex justify-center py-3 px-6 border border-transparent shadow-sm text-lg font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Get My Risk Profile
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="educational-resources" aria-labelledby="educational-resources-heading">
|
||||||
|
<div class="container">
|
||||||
|
<h2 id="educational-resources-heading">Empower Your Financial Journey with Knowledge</h2>
|
||||||
|
<p class="section-description">Dive into our comprehensive library of guides, articles, and insights designed to help you understand personal finance, investment strategies, and market trends.</p>
|
||||||
|
|
||||||
|
<nav class="resource-categories" aria-label="Educational Resource Categories">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#category-investing" class="category-link active">Investing Basics</a></li>
|
||||||
|
<li><a href="#category-savings" class="category-link">Savings & Budgeting</a></li>
|
||||||
|
<li><a href="#category-debt" class="category-link">Debt Management</a></li>
|
||||||
|
<li><a href="#category-ai" class="category-link">AI & Future Finance</a></li>
|
||||||
|
<li><a href="#category-glossary" class="category-link">Financial Glossary</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="resources-grid">
|
||||||
|
<article class="resource-card">
|
||||||
|
<div class="resource-image-placeholder">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-up"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
|
||||||
|
</div>
|
||||||
|
<h3>Understanding Investment Risks</h3>
|
||||||
|
<p>Learn about different types of investment risks and how to manage them effectively for a balanced portfolio.</p>
|
||||||
|
<a href="#read-more-risk" class="read-more-link">Read More</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="resource-card">
|
||||||
|
<div class="resource-image-placeholder">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book-open"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<h3>Beginner's Guide to Stock Market</h3>
|
||||||
|
<p>Start your journey into the stock market with this essential guide covering basics, terms, and first steps.</p>
|
||||||
|
<a href="#read-more-stocks" class="read-more-link">Read More</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="resource-card">
|
||||||
|
<div class="resource-image-placeholder">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-piggy-bank"><path d="M16 10a4 4 0 0 0-4-4V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-4a4 4 0 0 0 4-4v-4zm-4 4h0"></path></svg>
|
||||||
|
</div>
|
||||||
|
<h3>Building Your Emergency Fund</h3>
|
||||||
|
<p>Discover practical steps to build and maintain a robust emergency fund for financial security.</p>
|
||||||
|
<a href="#read-more-emergency" class="read-more-link">Read More</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="resource-card">
|
||||||
|
<div class="resource-image-placeholder">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cpu"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="15" x2="23" y2="15"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="15" x2="4" y2="15"></line></svg>
|
||||||
|
</div>
|
||||||
|
<h3>How AI Boosts Your Portfolio</h3>
|
||||||
|
<p>Explore how artificial intelligence can analyze data and provide personalized investment advice.</p>
|
||||||
|
<a href="#read-more-ai" class="read-more-link">Read More</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="resource-card">
|
||||||
|
<div class="resource-image-placeholder">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
|
||||||
|
</div>
|
||||||
|
<h3>Debt Management Strategies</h3>
|
||||||
|
<p>Practical strategies to tackle debt, improve your credit score, and achieve financial freedom.</p>
|
||||||
|
<a href="#read-more-debt" class="read-more-link">Read More</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="resource-card">
|
||||||
|
<div class="resource-image-placeholder">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<h3>The Power of Compound Interest</h3>
|
||||||
|
<p>Unpack the magic of compound interest and how it can significantly grow your wealth over time.</p>
|
||||||
|
<a href="#read-more-compound" class="read-more-link">Read More</a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="call-to-action">
|
||||||
|
<p>Can't find what you're looking for? <a href="#contact-us">Suggest a topic</a> or <a href="#faqs">visit our FAQs</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-column footer-branding">
|
||||||
|
<a href="#" class="footer-logo">YourCompany</a>
|
||||||
|
<p class="footer-tagline">Empowering your financial future with smart insights.</p>
|
||||||
|
<div class="social-links">
|
||||||
|
<a href="#" aria-label="Link to Facebook"><span class="social-icon-placeholder">FB</span></a>
|
||||||
|
<a href="#" aria-label="Link to Twitter"><span class="social-icon-placeholder">TW</span></a>
|
||||||
|
<a href="#" aria-label="Link to LinkedIn"><span class="social-icon-placeholder">LI</span></a>
|
||||||
|
<a href="#" aria-label="Link to Instagram"><span class="social-icon-placeholder">IG</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="footer-column footer-nav">
|
||||||
|
<h3>Product</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Link Accounts</a></li>
|
||||||
|
<li><a href="#">Track Expenses</a></li>
|
||||||
|
<li><a href="#">Forecast Savings</a></li>
|
||||||
|
<li><a href="#">Investment Advice</a></li>
|
||||||
|
<li><a href="#">Security</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="footer-column footer-nav">
|
||||||
|
<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="#">Contact</a></li>
|
||||||
|
<li><a href="#">Press Kit</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="footer-column footer-nav">
|
||||||
|
<h3>Support & Legal</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">FAQ</a></li>
|
||||||
|
<li><a href="#">Help Center</a></li>
|
||||||
|
<li><a href="#">Privacy Policy</a></li>
|
||||||
|
<li><a href="#">Terms of Service</a></li>
|
||||||
|
<li><a href="#">Plaid & Data</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom-bar">
|
||||||
|
<p class="copyright-text">© 2023 YourCompany. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.body.style.display = 'none';
|
||||||
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
275
login.html
Normal file
275
login.html
Normal file
@ -0,0 +1,275 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Login</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="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" />
|
||||||
|
<header class="navbar">
|
||||||
|
<a href="#" class="navbar__logo">
|
||||||
|
<span class="navbar__logo-icon">💰</span>
|
||||||
|
FinTrack
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar__menu-and-auth">
|
||||||
|
<button class="navbar__menu-toggle" aria-expanded="false" aria-controls="main-navigation">
|
||||||
|
☰ <!-- Hamburger icon -->
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="navbar__nav-links" id="main-navigation">
|
||||||
|
<ul class="navbar__nav-links-list">
|
||||||
|
<li class="navbar__nav-item">
|
||||||
|
<a href="#" class="active-link" aria-current="page">Dashboard</a>
|
||||||
|
</li>
|
||||||
|
<li class="navbar__nav-item">
|
||||||
|
<a href="#">Accounts</a>
|
||||||
|
</li>
|
||||||
|
<li class="navbar__nav-item">
|
||||||
|
<a href="#">Expenses</a>
|
||||||
|
</li>
|
||||||
|
<li class="navbar__nav-item">
|
||||||
|
<a href="#">Savings</a>
|
||||||
|
</li>
|
||||||
|
<li class="navbar__nav-item">
|
||||||
|
<a href="#">Advice</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="navbar__auth-buttons">
|
||||||
|
<a href="#" class="navbar__button navbar__button--secondary">Sign In</a>
|
||||||
|
<a href="#" class="navbar__button navbar__button--primary">Sign Up</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main style="padding: 2rem; text-align: center;">
|
||||||
|
<h1>Welcome to FinTrack</h1>
|
||||||
|
<p>Your ultimate financial management platform.</p>
|
||||||
|
<div style="background-color: white; border: 1px dashed var(--border-color); padding: 3rem; margin-top: 2rem; color: var(--text-light-color);">
|
||||||
|
Content Area Placeholder
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const menuToggle = document.querySelector('.navbar__menu-toggle');
|
||||||
|
const navLinks = document.getElementById('main-navigation');
|
||||||
|
const authButtons = document.querySelector('.navbar__auth-buttons'); // Select auth buttons for mobile toggle
|
||||||
|
|
||||||
|
if (menuToggle && navLinks && authButtons) {
|
||||||
|
menuToggle.addEventListener('click', () => {
|
||||||
|
const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
|
||||||
|
menuToggle.setAttribute('aria-expanded', !isExpanded);
|
||||||
|
navLinks.classList.toggle('is-open');
|
||||||
|
authButtons.classList.toggle('is-open'); // Toggle auth buttons visibility
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Login - Financial Dashboard</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<section class="login-container" aria-labelledby="login-heading">
|
||||||
|
<h1 id="login-heading">Welcome Back!</h1>
|
||||||
|
<p>Log in to access your financial dashboard and insights.</p>
|
||||||
|
|
||||||
|
<form action="/login" method="POST">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email Address</label>
|
||||||
|
<input type="email" id="email" name="email" placeholder="your.email@example.com" required="" autocomplete="email">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input type="password" id="password" name="password" placeholder="••••••••" required="" autocomplete="current-password">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit">Log In</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<a href="/forgot-password" class="forgot-password">Forgot Password?</a>
|
||||||
|
<p class="signup-link">Don't have an account? <a href="/signup">Sign Up</a></p>
|
||||||
|
</section>
|
||||||
|
<main class="forgot-password-section">
|
||||||
|
<div class="forgot-password-content">
|
||||||
|
<h1 class="forgot-password-title">Forgot Your Password?</h1>
|
||||||
|
<p class="forgot-password-description">
|
||||||
|
Enter your email address below and we'll send you a link to reset your password.
|
||||||
|
</p>
|
||||||
|
<form action="/reset-password" method="POST" class="forgot-password-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email" class="form-label">Email Address</label>
|
||||||
|
<input type="email" id="email" name="email" class="form-input" placeholder="e.g., user@example.com" required="" autocomplete="email">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="submit-button">Send Reset Link</button>
|
||||||
|
</form>
|
||||||
|
<div class="back-to-login">
|
||||||
|
<p>Remembered your password? <a href="/login">Back to Login</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<section class="signup-prompt">
|
||||||
|
<div class="signup-prompt__container">
|
||||||
|
<div class="signup-prompt__content">
|
||||||
|
<h2 class="signup-prompt__headline">Take Control of Your Financial Future</h2>
|
||||||
|
<p class="signup-prompt__description">
|
||||||
|
Link bank accounts, track expenses, forecast savings, and get AI-driven investment advice.
|
||||||
|
</p>
|
||||||
|
<ul class="signup-prompt__features">
|
||||||
|
<li>Securely connect all your financial accounts</li>
|
||||||
|
<li>Monitor spending and categorize transactions</li>
|
||||||
|
<li>Project savings growth and achieve financial goals</li>
|
||||||
|
<li>Receive personalized AI investment insights</li>
|
||||||
|
</ul>
|
||||||
|
<a href="/signup" class="signup-prompt__button">Start Your Free Journey</a>
|
||||||
|
</div>
|
||||||
|
<div class="signup-prompt__visual">
|
||||||
|
<div class="placeholder-graphic">
|
||||||
|
<!-- Placeholder for a dashboard or data visualization illustration -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="security-disclaimer" class="py-16 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200">
|
||||||
|
<div class="container mx-auto px-4 max-w-4xl">
|
||||||
|
<h2 class="text-4xl md:text-5xl font-bold text-center mb-10 text-indigo-700 dark:text-indigo-400">Security Disclaimer</h2>
|
||||||
|
|
||||||
|
<div class="space-y-8">
|
||||||
|
<p class="text-lg leading-relaxed text-center mb-8">
|
||||||
|
Your financial security is paramount. We employ industry-leading measures to protect your sensitive data and ensure a secure experience.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-600">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Data Encryption & Protection</h3>
|
||||||
|
<p class="leading-relaxed mb-4">
|
||||||
|
All data transmitted between your device and our servers, as well as data at rest, is encrypted using robust, bank-grade encryption protocols (e.g., AES-256). We utilize Secure Socket Layer (SSL/TLS) technology to ensure the confidentiality and integrity of your information during transit.
|
||||||
|
</p>
|
||||||
|
<p class="leading-relaxed">
|
||||||
|
Access to your data is strictly controlled, monitored, and requires multi-factor authentication for internal personnel. We conduct regular security audits and vulnerability assessments.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-600">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Financial Data Integration (Plaid & Similar APIs)</h3>
|
||||||
|
<p class="leading-relaxed mb-4">
|
||||||
|
We partner with reputable third-party financial data aggregators, such as Plaid, to securely connect to your bank accounts and investment portfolios.
|
||||||
|
</p>
|
||||||
|
<ul class="list-disc pl-6 space-y-2 leading-relaxed">
|
||||||
|
<li>We never store your bank login credentials on our servers. These credentials are handled directly and securely by the financial data provider.</li>
|
||||||
|
<li>These providers use advanced encryption and security measures, are SOC 2 compliant, and employ robust fraud prevention systems.</li>
|
||||||
|
<li>You grant read-only access to your financial data. We cannot move money or initiate transactions on your behalf.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-600">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Your Role in Security</h3>
|
||||||
|
<p class="leading-relaxed mb-4">
|
||||||
|
While we take extensive measures to protect your data, your vigilance is also crucial.
|
||||||
|
</p>
|
||||||
|
<ul class="list-disc pl-6 space-y-2 leading-relaxed">
|
||||||
|
<li>Use strong, unique passwords for your account.</li>
|
||||||
|
<li>Enable two-factor authentication (2FA) for an added layer of security.</li>
|
||||||
|
<li>Be cautious of phishing attempts and suspicious emails. We will never ask for your password via email.</li>
|
||||||
|
<li>Log out of your account when using shared or public computers.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-600">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">AI-Driven Advice Disclaimer</h3>
|
||||||
|
<p class="leading-relaxed">
|
||||||
|
The AI-driven investment advice and financial forecasts provided on this platform are for informational and educational purposes only. They are based on algorithms and the data you provide, and do not constitute financial, investment, tax, or legal advice.
|
||||||
|
</p>
|
||||||
|
<p class="leading-relaxed mt-2">
|
||||||
|
Before making any financial decisions, including investments, we strongly recommend consulting with a qualified financial professional. Past performance is not indicative of future results. All investment carries risk.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-center text-lg leading-relaxed pt-4">
|
||||||
|
If you have any security concerns or questions, please do not hesitate to <a href="/contact" class="text-indigo-600 dark:text-indigo-300 hover:underline font-medium">contact our support team</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
|
||||||
|
<div class="footer-brand-info">
|
||||||
|
<a href="#" class="footer-logo-placeholder">YourFinTech Logo</a>
|
||||||
|
<p class="footer-tagline">
|
||||||
|
Your financial future, simplified. Track, forecast, and grow your wealth with AI-driven insights.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-links-grid">
|
||||||
|
<nav class="footer-nav-group">
|
||||||
|
<h3>Product</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Features Overview</a></li>
|
||||||
|
<li><a href="#">How It Works</a></li>
|
||||||
|
<li><a href="#">Pricing Plans</a></li>
|
||||||
|
<li><a href="#">Security & Privacy</a></li>
|
||||||
|
<li><a href="#">Integrations (Plaid)</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav 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="#">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="footer-nav-group">
|
||||||
|
<h3>Support</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">FAQ</a></li>
|
||||||
|
<li><a href="#">Help Center</a></li>
|
||||||
|
<li><a href="#">Get Started Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="footer-nav-group">
|
||||||
|
<h3>Legal</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Privacy Policy</a></li>
|
||||||
|
<li><a href="#">Terms of Service</a></li>
|
||||||
|
<li><a href="#">AI Investment Disclaimer</a></li>
|
||||||
|
<li><a href="#">Cookie Policy</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom-bar">
|
||||||
|
<div class="footer-social-links">
|
||||||
|
<a href="#" aria-label="Facebook"><span class="social-icon-placeholder">Fb</span></a>
|
||||||
|
<a href="#" aria-label="Twitter"><span class="social-icon-placeholder">Tw</span></a>
|
||||||
|
<a href="#" aria-label="LinkedIn"><span class="social-icon-placeholder">Li</span></a>
|
||||||
|
<a href="#" aria-label="Instagram"><span class="social-icon-placeholder">Ig</span></a>
|
||||||
|
</div>
|
||||||
|
<p class="footer-copyright">© 2023 YourFinTech Inc. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.body.style.display = 'none';
|
||||||
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
281
sign_up.html
Normal file
281
sign_up.html
Normal file
@ -0,0 +1,281 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Sign Up</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" role="navigation" aria-label="Main navigation">
|
||||||
|
<div class="navbar__header">
|
||||||
|
<a href="#" class="navbar__logo" aria-label="FinTech Platform Homepage">FinWise AI</a>
|
||||||
|
<button class="navbar__toggle" aria-controls="main-menu" aria-expanded="false" type="button">
|
||||||
|
☰ <!-- Hamburger icon -->
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ul class="navbar__menu" id="main-menu">
|
||||||
|
<li class="navbar__item"><a href="#dashboard">Dashboard</a></li>
|
||||||
|
<li class="navbar__item"><a href="#accounts">Accounts</a></li>
|
||||||
|
<li class="navbar__item"><a href="#expenses">Expenses</a></li>
|
||||||
|
<li class="navbar__item"><a href="#forecast">Forecast</a></li>
|
||||||
|
<li class="navbar__item"><a href="#advice">AI Advice</a></li>
|
||||||
|
<li class="navbar__item"><a href="#support">Support</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="navbar__actions">
|
||||||
|
<a href="#login" class="navbar__button navbar__button--secondary">Log In</a>
|
||||||
|
<a href="#signup" class="navbar__button navbar__button--primary">Sign Up</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const toggleButton = document.querySelector('.navbar__toggle');
|
||||||
|
const navMenu = document.querySelector('.navbar__menu');
|
||||||
|
const navActions = document.querySelector('.navbar__actions');
|
||||||
|
|
||||||
|
toggleButton.addEventListener('click', () => {
|
||||||
|
const isExpanded = toggleButton.getAttribute('aria-expanded') === 'true';
|
||||||
|
toggleButton.setAttribute('aria-expanded', !isExpanded);
|
||||||
|
navMenu.classList.toggle('is-active');
|
||||||
|
navActions.classList.toggle('is-active'); /* Optional: show actions with menu */
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Registration Form</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 id="registration-form" class="registration-section">
|
||||||
|
<div class="registration-header">
|
||||||
|
<h1>Create Your Account</h1>
|
||||||
|
<p>Join us to link your finances, track spending, forecast savings, and receive AI-driven investment advice.</p>
|
||||||
|
</div>
|
||||||
|
<form action="#" method="POST">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="full-name">Full Name</label>
|
||||||
|
<input type="text" id="full-name" name="full_name" placeholder="John Doe" required="" autocomplete="name">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email Address</label>
|
||||||
|
<input type="email" id="email" name="email" placeholder="john.doe@example.com" required="" autocomplete="email">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input type="password" id="password" name="password" placeholder="Min. 8 characters" required="" minlength="8" autocomplete="new-password">
|
||||||
|
<p class="password-strength-indicator">Password strength: <span id="password-strength-text">Weak</span></p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="confirm-password">Confirm Password</label>
|
||||||
|
<input type="password" id="confirm-password" name="confirm_password" placeholder="Re-enter your password" required="" autocomplete="new-password">
|
||||||
|
</div>
|
||||||
|
<div class="checkbox-group">
|
||||||
|
<input type="checkbox" id="terms-privacy" name="terms_privacy" required="">
|
||||||
|
<label for="terms-privacy">I agree to the <a href="#terms">Terms of Service</a> and <a href="#privacy">Privacy Policy</a>.</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit">Register Now</button>
|
||||||
|
</form>
|
||||||
|
<div class="login-link">
|
||||||
|
Already have an account? <a href="#login">Log In</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const passwordInput = document.getElementById('password');
|
||||||
|
const passwordStrengthText = document.getElementById('password-strength-text');
|
||||||
|
|
||||||
|
passwordInput.addEventListener('input', () => {
|
||||||
|
const password = passwordInput.value;
|
||||||
|
let strength = 'Weak';
|
||||||
|
let strengthClass = 'weak';
|
||||||
|
|
||||||
|
if (password.length >= 8) {
|
||||||
|
let score = 0;
|
||||||
|
if (/[A-Z]/.test(password)) score++;
|
||||||
|
if (/[a-z]/.test(password)) score++;
|
||||||
|
if (/[0-9]/.test(password)) score++;
|
||||||
|
if (/[^A-Za-z0-9]/.test(password)) score++;
|
||||||
|
|
||||||
|
if (score === 4 && password.length >= 12) {
|
||||||
|
strength = 'Strong';
|
||||||
|
strengthClass = 'strong';
|
||||||
|
} else if (score >= 2) {
|
||||||
|
strength = 'Medium';
|
||||||
|
strengthClass = 'medium';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
passwordStrengthText.textContent = strength;
|
||||||
|
passwordStrengthText.className = strengthClass;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<section class="privacy-consent-section">
|
||||||
|
<div class="container">
|
||||||
|
<header class="section-header">
|
||||||
|
<h1>Your Privacy Matters</h1>
|
||||||
|
<p>Welcome to [Your App Name]! To provide you with personalized financial insights and services, we need your consent regarding how we handle your data.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<article class="privacy-details">
|
||||||
|
<div class="privacy-point">
|
||||||
|
<h2>1. Data Collection</h2>
|
||||||
|
<p>We collect essential data to power your financial experience. This includes:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Bank Account and Investment Data:</strong> Accessed securely via Plaid API or similar financial data sources (e.g., transaction history, account balances, investment holdings).</li>
|
||||||
|
<li><strong>Personal Information:</strong> (e.g., name, email address) for account creation and communication.</li>
|
||||||
|
<li><strong>Usage Data:</strong> How you interact with our platform to improve services.</li>
|
||||||
|
</ul>
|
||||||
|
<p>We do NOT collect data that can identify you outside of our platform, nor do we sell your data to third parties for marketing purposes.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="privacy-point">
|
||||||
|
<h2>2. How We Use Your Data</h2>
|
||||||
|
<p>Your data is used solely to provide and improve the core services of [Your App Name]:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Expense Tracking & Budgeting:</strong> Categorize transactions and visualize spending.</li>
|
||||||
|
<li><strong>Savings Forecasting:</strong> Analyze your habits to predict future savings.</li>
|
||||||
|
<li><strong>AI-Driven Investment Advice:</strong> Generate personalized investment recommendations based on your financial profile.</li>
|
||||||
|
<li><strong>Service Improvement:</strong> Enhance app features, security, and user experience.</li>
|
||||||
|
<li><strong>Customer Support:</strong> Assist with any queries or issues you may have.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="privacy-point">
|
||||||
|
<h2>3. Data Sharing & Third Parties</h2>
|
||||||
|
<p>We partner with trusted third-party services to deliver our functionalities:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Financial Data Providers (e.g., Plaid):</strong> To securely connect and retrieve your financial data from institutions. This data is encrypted and handled according to industry standards.</li>
|
||||||
|
<li><strong>Cloud Hosting Providers:</strong> To store and process your data securely.</li>
|
||||||
|
<li><strong>Analytics Services:</strong> (Anonymized) to understand app usage and improve features.</li>
|
||||||
|
</ul>
|
||||||
|
<p>We ensure all third-party partners adhere to strict data protection and privacy standards.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="privacy-point">
|
||||||
|
<h2>4. Your Rights & Control</h2>
|
||||||
|
<p>You have full control over your data:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Access:</strong> Request a copy of your personal data we hold.</li>
|
||||||
|
<li><strong>Correction:</strong> Request corrections to inaccurate data.</li>
|
||||||
|
<li><strong>Deletion:</strong> Request the deletion of your account and associated data (subject to legal obligations).</li>
|
||||||
|
<li><strong>Withdraw Consent:</strong> You can withdraw your consent at any time, which may affect your ability to use certain features of the service.</li>
|
||||||
|
</ul>
|
||||||
|
<p>For more details, please review our comprehensive <a href="#privacy-policy" aria-label="Read our full privacy policy">Privacy Policy</a>.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<footer class="privacy-actions">
|
||||||
|
<p>By clicking "Accept and Continue", you agree to our <a href="#terms-of-service" aria-label="Read our terms of service">Terms of Service</a> and the Privacy Consent outlined above. If you do not consent, you will not be able to use our service.</p>
|
||||||
|
<div class="button-group">
|
||||||
|
<button type="submit" class="button button-primary">Accept and Continue</button>
|
||||||
|
<button type="button" class="button button-secondary">Decline</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<section class="terms-conditions-section" aria-labelledby="legal-information-heading">
|
||||||
|
<div class="container">
|
||||||
|
<!-- A visually hidden heading for accessibility, providing context for screen readers -->
|
||||||
|
<h2 id="legal-information-heading" style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;">Legal Information and Agreements</h2>
|
||||||
|
<p class="terms-text">
|
||||||
|
By continuing to use our platform, you acknowledge and agree to our comprehensive
|
||||||
|
<a href="#placeholder-terms-of-service" class="terms-link" aria-label="Read our Terms and Conditions">Terms and Conditions</a>
|
||||||
|
and our commitment to your privacy as outlined in our
|
||||||
|
<a href="#placeholder-privacy-policy" class="privacy-link" aria-label="Read our Privacy Policy">Privacy Policy</a>.
|
||||||
|
</p>
|
||||||
|
<p class="disclaimer">
|
||||||
|
<small>
|
||||||
|
Your financial data is handled with the highest standards of security and encryption. For detailed information on data privacy, security measures, and your rights, please review our full legal documentation linked above.
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="login-prompt-section">
|
||||||
|
<div class="login-prompt-container">
|
||||||
|
<h2 class="login-prompt-heading">Welcome Back!</h2>
|
||||||
|
<p class="login-prompt-description">
|
||||||
|
Access your personalized financial dashboard and smart investment insights.
|
||||||
|
</p>
|
||||||
|
<form class="login-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email-address" class="form-label">Email Address</label>
|
||||||
|
<input type="email" id="email-address" name="email" placeholder="your.email@example.com" required="" class="form-input">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password" class="form-label">Password</label>
|
||||||
|
<input type="password" id="password" name="password" placeholder="••••••••" required="" class="form-input">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="login-button">Login</button>
|
||||||
|
<div class="form-links">
|
||||||
|
<a href="#" class="forgot-password-link">Forgot Password?</a>
|
||||||
|
<span class="separator">|</span>
|
||||||
|
<a href="#" class="signup-link">Don't have an account? Sign Up</a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="footer-container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-grid">
|
||||||
|
<div class="footer-column footer-about">
|
||||||
|
<div class="footer-logo">Your Finance App Logo</div>
|
||||||
|
<p class="footer-description">Manage your money, forecast your future, and invest smarter with AI-driven insights.</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-column">
|
||||||
|
<h3 class="footer-heading">Features</h3>
|
||||||
|
<ul class="footer-nav-list">
|
||||||
|
<li class="footer-nav-item"><a href="#track-expenses" class="footer-link">Track Expenses</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#forecast-savings" class="footer-link">Forecast Savings</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#investment-advice" class="footer-link">Investment Advice</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#bank-linking" class="footer-link">Bank & Investment Linking</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-column">
|
||||||
|
<h3 class="footer-heading">Company</h3>
|
||||||
|
<ul class="footer-nav-list">
|
||||||
|
<li class="footer-nav-item"><a href="#about-us" class="footer-link">About Us</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#careers" class="footer-link">Careers</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#contact-us" class="footer-link">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-column">
|
||||||
|
<h3 class="footer-heading">Legal</h3>
|
||||||
|
<ul class="footer-nav-list">
|
||||||
|
<li class="footer-nav-item"><a href="#privacy-policy" class="footer-link">Privacy Policy</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#terms-of-service" class="footer-link">Terms of Service</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#disclaimer" class="footer-link">Disclaimer</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<div class="footer-copyright">
|
||||||
|
<p>© 2023 Your Finance App. All rights reserved.</p>
|
||||||
|
<p class="footer-tech-info">Powered by Plaid and AI.</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-social-links">
|
||||||
|
<a href="#" class="footer-social-icon">Social Icon 1</a>
|
||||||
|
<a href="#" class="footer-social-icon">Social Icon 2</a>
|
||||||
|
<a href="#" class="footer-social-icon">Social Icon 3</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.body.style.display = 'none';
|
||||||
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user