281 lines
16 KiB
HTML
281 lines
16 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>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> |