335 lines
19 KiB
HTML
335 lines
19 KiB
HTML
|
|
<!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> |