275 lines
14 KiB
HTML
275 lines
14 KiB
HTML
|
|
<!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> |