custom1/investment_forecast.html

324 lines
25 KiB
HTML
Raw Permalink Normal View History

SafeValue must use [property]=binding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Investment Forecast</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-wrapper">
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">WealthPilot</div><ul class="nav-1-nav-links"><li><a href="home.html">Dashboard</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Features</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<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">Join Now</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Your Financial Future, Illuminated.</p><h2 class="text-2-heading">Master Your Money. Maximize Your Growth.</h2><p class="text-2-description">Seamlessly link your bank accounts and investments to effortlessly track expenses, forecast savings goals, and receive personalized AI-driven investment advice. Take control of your financial destiny.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Get Started</button><button class="text-2-btn text-2-outline">Learn More</button></div></section></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Summary</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="portfolio-summary-section" aria-labelledby="portfolio-summary-heading">
<header class="section-header">
<h2 id="portfolio-summary-heading">Your Financial Dashboard</h2>
<p>Get a bird's-eye view of your linked accounts, investments, and financial health. Understand your money at a glance.</p>
</header>
<div class="portfolio-grid">
<article class="summary-card" aria-labelledby="card-heading-1">
<h3 id="card-heading-1">Total Net Worth</h3>
<p>Your combined assets minus liabilities across all linked accounts.</p>
<div class="metric-value">$85,250.75</div>
<div class="metric-change positive">
<span class="icon" aria-hidden="true">&#x2191;</span>
<span>+2.3% last month</span>
</div>
<div class="card-footer">
<time datetime="2023-10-26">Last updated: Oct 26, 2023</time>
<a href="#link-to-net-worth-details" class="link-text">View Details</a>
</div>
<span class="visually-hidden" aria-live="polite">Total Net Worth is $85,250.75, up 2.3% last month.</span>
</article>
<article class="summary-card" aria-labelledby="card-heading-2">
<h3 id="card-heading-2">Available Cash</h3>
<p>Total liquid funds across checking and savings accounts.</p>
<div class="metric-value">$12,450.00</div>
<div class="metric-change negative">
<span class="icon" aria-hidden="true">&#x2193;</span>
<span>-1.5% last week</span>
</div>
<div class="card-footer">
<time datetime="2023-10-26">Last updated: Oct 26, 2023</time>
<a href="#link-to-cash-details" class="link-text">Manage Cash</a>
</div>
<span class="visually-hidden" aria-live="polite">Available Cash is $12,450.00, down 1.5% last week.</span>
</article>
<article class="summary-card" aria-labelledby="card-heading-3">
<h3 id="card-heading-3">Investment Portfolio</h3>
<p>Current value of your stocks, bonds, and other investments.</p>
<div class="metric-value">$68,120.50</div>
<div class="metric-change positive">
<span class="icon" aria-hidden="true">&#x2191;</span>
<span>+4.1% YTD</span>
</div>
<div class="card-footer">
<time datetime="2023-10-26">Last updated: Oct 26, 2023</time>
<a href="#link-to-investment-details" class="link-text">Explore Investments</a>
</div>
<span class="visually-hidden" aria-live="polite">Investment Portfolio value is $68,120.50, up 4.1% year to date.</span>
</article>
<article class="summary-card" aria-labelledby="card-heading-4">
<h3 id="card-heading-4">Total Liabilities</h3>
<p>Outstanding balances on credit cards, loans, and mortgages.</p>
<div class="metric-value">$5,320.00</div>
<div class="metric-change negative">
<span class="icon" aria-hidden="true">&#x2193;</span>
<span>-0.8% last month</span>
</div>
<div class="card-footer">
<time datetime="2023-10-26">Last updated: Oct 26, 2023</time>
<a href="#link-to-liability-details" class="link-text">Review Debts</a>
</div>
<span class="visually-hidden" aria-live="polite">Total Liabilities are $5,320.00, down 0.8% last month.</span>
</article>
<article class="summary-card" aria-labelledby="card-heading-5">
<h3 id="card-heading-5">Monthly Spending</h3>
<p>Your categorized expenditures for the current month.</p>
<div class="metric-value">$2,180.30</div>
<div class="metric-change positive">
<span class="icon" aria-hidden="true">&#x2191;</span>
<span>+12.0% vs avg</span>
</div>
<div class="card-footer">
<time datetime="2023-10-26">Period: Oct 2023</time>
<a href="#link-to-spending-details" class="link-text">Analyze Spending</a>
</div>
<span class="visually-hidden" aria-live="polite">Monthly Spending is $2,180.30, up 12% compared to average.</span>
</article>
<article class="summary-card" aria-labelledby="card-heading-6">
<h3 id="card-heading-6">Savings Goal Progress</h3>
<p>Track your progress towards specific financial objectives.</p>
<div class="metric-value">65% Complete</div>
<p>Target: $10,000 for new car</p>
<div class="card-footer">
<time datetime="2023-10-26">Estimated completion: Dec 2024</time>
<a href="#link-to-goals-details" class="link-text">Manage Goals</a>
</div>
<span class="visually-hidden" aria-live="polite">Savings Goal Progress is 65% complete for a $10,000 new car target. Estimated completion December 2024.</span>
</article>
</div>
<div style="text-align: center; margin-top: var(--spacing-xl);">
<a href="#link-to-full-dashboard" class="cta-button">View Full Dashboard</a>
</div>
</section>
</body>
</html>
<div class="app-form"><h1>Unlock Your Financial Potential</h1><h2>Your Journey to Financial Empowerment</h2><div class="form-row"><div class="form-group"><label>Your First Name</label><input id="first-name" type="text" placeholder="Enter your first name"></input></div><div class="form-group"><label>Your Last Name</label><input id="last-name" type="text" placeholder="Enter your last name"></input></div></div><div class="form-group full-width"><label>Your Email Address</label><input id="email" type="email" placeholder="Your best email for updates"></input></div><h2>Your Contact Details</h2><div class="form-group full-width"><label>Mobile Phone Number</label><input id="phone" type="tel" placeholder="Your best contact number"></input></div><h2>Your Financial Aspirations</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Briefly share your financial goals, what you hope to achieve with us, or why you're excited about AI-driven financial insights."></textarea></div><button type="submit">Start Your Financial Transformation</button></div>
<section id="projection-chart" class="section-padding">
<div class="container">
<h2 class="section-title">Your Financial Projection Chart</h2>
<div class="chart-controls-wrapper">
<p class="controls-label">View Projections For:</p>
<div class="chart-controls">
<button class="control-button active">1 Year</button>
<button class="control-button">5 Years</button>
<button class="control-button">10 Years</button>
<button class="control-button">Custom Range</button>
</div>
<select class="scenario-select" aria-label="Select Projection Scenario">
<option value="current">Current Habits Scenario</option>
<option value="optimized">Optimized Growth Scenario</option>
<option value="retirement">Early Retirement Scenario</option>
</select>
</div>
<div class="chart-display-area">
<div class="chart-placeholder">
<p>Interactive chart will appear here, visualizing your projected financial growth (e.g., net worth, savings, debt) over time based on your linked accounts and defined goals.</p>
<div class="placeholder-graphic">
[Placeholder for Line Graph / Bar Chart Visualization]
</div>
</div>
<div class="chart-summary">
<h3>Projected Milestones & Key Insights</h3>
<p>Based on your current financial data and selected projection scenario, here are some key insights and future milestones:</p>
<ul>
<li><strong>Estimated Net Worth by 5 Years:</strong> $[X,XXX,XXX]</li>
<li><strong>First Major Savings Goal Achieved:</strong> [Goal Name] by [Date]</li>
<li><strong>AI Recommendation:</strong> Consider increasing your monthly investment contributions by Y% to reach your retirement goal 3 years sooner.</li>
</ul>
<button class="button-primary">Optimize Your Plan</button>
</div>
</div>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">WealthFlow AI</h3><p class="footer-1-newsletter-text">Unlock your financial potential. Subscribe for exclusive insights and updates on smart money management.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Enter your email"></input><button class="footer-1-subscribe-btn">Subscribe</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive updates and financial insights from WealthFlow AI.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Our Features</h4><ul><li><a href="#">Expense Tracking</a></li><li><a href="#">Investment Insights</a></li><li><a href="#">Savings Forecast</a></li><li><a href="#">AI-Driven Advice</a></li><li><a href="#">Account Sync</a></li></ul></div><div class="footer-1-column"><h4>Company</h4><ul><li><a href="#">About Us</a></li><li><a href="#">Blog</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Contact</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X (Twitter)</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>YouTube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2023 WealthFlow AI. All rights reserved.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookie Settings</a></li></ul></div></section></div>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">WealthPilot</div><ul class="nav-1-nav-links"><li><a href="home.html">Dashboard</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Features</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<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">Join Now</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Your Financial Future, Illuminated.</p><h2 class="text-2-heading">Master Your Money. Maximize Your Growth.</h2><p class="text-2-description">Seamlessly link your bank accounts and investments to effortlessly track expenses, forecast savings goals, and receive personalized AI-driven investment advice. Take control of your financial destiny.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Get Started</button><button class="text-2-btn text-2-outline">Learn More</button></div></section></div>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Summary</title>
<link rel="stylesheet" href="style.css" />
<section class="portfolio-summary-section" aria-labelledby="portfolio-summary-heading">
<header class="section-header">
<h2 id="portfolio-summary-heading">Your Financial Dashboard</h2>
<p>Get a bird's-eye view of your linked accounts, investments, and financial health. Understand your money at a glance.</p>
</header>
<div class="portfolio-grid">
<article class="summary-card" aria-labelledby="card-heading-1">
<h3 id="card-heading-1">Total Net Worth</h3>
<p>Your combined assets minus liabilities across all linked accounts.</p>
<div class="metric-value">$85,250.75</div>
<div class="metric-change positive">
<span class="icon" aria-hidden="true"></span>
<span>+2.3% last month</span>
</div>
<div class="card-footer">
<time datetime="2023-10-26">Last updated: Oct 26, 2023</time>
<a href="#link-to-net-worth-details" class="link-text">View Details</a>
</div>
<span class="visually-hidden" aria-live="polite">Total Net Worth is $85,250.75, up 2.3% last month.</span>
</article>
<article class="summary-card" aria-labelledby="card-heading-2">
<h3 id="card-heading-2">Available Cash</h3>
<p>Total liquid funds across checking and savings accounts.</p>
<div class="metric-value">$12,450.00</div>
<div class="metric-change negative">
<span class="icon" aria-hidden="true"></span>
<span>-1.5% last week</span>
</div>
<div class="card-footer">
<time datetime="2023-10-26">Last updated: Oct 26, 2023</time>
<a href="#link-to-cash-details" class="link-text">Manage Cash</a>
</div>
<span class="visually-hidden" aria-live="polite">Available Cash is $12,450.00, down 1.5% last week.</span>
</article>
<article class="summary-card" aria-labelledby="card-heading-3">
<h3 id="card-heading-3">Investment Portfolio</h3>
<p>Current value of your stocks, bonds, and other investments.</p>
<div class="metric-value">$68,120.50</div>
<div class="metric-change positive">
<span class="icon" aria-hidden="true"></span>
<span>+4.1% YTD</span>
</div>
<div class="card-footer">
<time datetime="2023-10-26">Last updated: Oct 26, 2023</time>
<a href="#link-to-investment-details" class="link-text">Explore Investments</a>
</div>
<span class="visually-hidden" aria-live="polite">Investment Portfolio value is $68,120.50, up 4.1% year to date.</span>
</article>
<article class="summary-card" aria-labelledby="card-heading-4">
<h3 id="card-heading-4">Total Liabilities</h3>
<p>Outstanding balances on credit cards, loans, and mortgages.</p>
<div class="metric-value">$5,320.00</div>
<div class="metric-change negative">
<span class="icon" aria-hidden="true"></span>
<span>-0.8% last month</span>
</div>
<div class="card-footer">
<time datetime="2023-10-26">Last updated: Oct 26, 2023</time>
<a href="#link-to-liability-details" class="link-text">Review Debts</a>
</div>
<span class="visually-hidden" aria-live="polite">Total Liabilities are $5,320.00, down 0.8% last month.</span>
</article>
<article class="summary-card" aria-labelledby="card-heading-5">
<h3 id="card-heading-5">Monthly Spending</h3>
<p>Your categorized expenditures for the current month.</p>
<div class="metric-value">$2,180.30</div>
<div class="metric-change positive">
<span class="icon" aria-hidden="true"></span>
<span>+12.0% vs avg</span>
</div>
<div class="card-footer">
<time datetime="2023-10-26">Period: Oct 2023</time>
<a href="#link-to-spending-details" class="link-text">Analyze Spending</a>
</div>
<span class="visually-hidden" aria-live="polite">Monthly Spending is $2,180.30, up 12% compared to average.</span>
</article>
<article class="summary-card" aria-labelledby="card-heading-6">
<h3 id="card-heading-6">Savings Goal Progress</h3>
<p>Track your progress towards specific financial objectives.</p>
<div class="metric-value">65% Complete</div>
<p>Target: $10,000 for new car</p>
<div class="card-footer">
<time datetime="2023-10-26">Estimated completion: Dec 2024</time>
<a href="#link-to-goals-details" class="link-text">Manage Goals</a>
</div>
<span class="visually-hidden" aria-live="polite">Savings Goal Progress is 65% complete for a $10,000 new car target. Estimated completion December 2024.</span>
</article>
</div>
<div style="text-align: center; margin-top: var(--spacing-xl);">
<a href="#link-to-full-dashboard" class="cta-button">View Full Dashboard</a>
</div>
</section>
<div class="app-form"><h1>Unlock Your Financial Potential</h1><h2>Your Journey to Financial Empowerment</h2><div class="form-row"><div class="form-group"><label>Your First Name</label><input id="first-name" type="text" placeholder="Enter your first name"></div><div class="form-group"><label>Your Last Name</label><input id="last-name" type="text" placeholder="Enter your last name"></div></div><div class="form-group full-width"><label>Your Email Address</label><input id="email" type="email" placeholder="Your best email for updates"></div><h2>Your Contact Details</h2><div class="form-group full-width"><label>Mobile Phone Number</label><input id="phone" type="tel" placeholder="Your best contact number"></div><h2>Your Financial Aspirations</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Briefly share your financial goals, what you hope to achieve with us, or why you're excited about AI-driven financial insights."></textarea></div><button type="submit">Start Your Financial Transformation</button></div>
<section id="projection-chart" class="section-padding">
<div class="container">
<h2 class="section-title">Your Financial Projection Chart</h2>
<div class="chart-controls-wrapper">
<p class="controls-label">View Projections For:</p>
<div class="chart-controls">
<button class="control-button active">1 Year</button>
<button class="control-button">5 Years</button>
<button class="control-button">10 Years</button>
<button class="control-button">Custom Range</button>
</div>
<select class="scenario-select" aria-label="Select Projection Scenario">
<option value="current">Current Habits Scenario</option>
<option value="optimized">Optimized Growth Scenario</option>
<option value="retirement">Early Retirement Scenario</option>
</select>
</div>
<div class="chart-display-area">
<div class="chart-placeholder">
<p>Interactive chart will appear here, visualizing your projected financial growth (e.g., net worth, savings, debt) over time based on your linked accounts and defined goals.</p>
<div class="placeholder-graphic">
[Placeholder for Line Graph / Bar Chart Visualization]
</div>
</div>
<div class="chart-summary">
<h3>Projected Milestones &amp; Key Insights</h3>
<p>Based on your current financial data and selected projection scenario, here are some key insights and future milestones:</p>
<ul>
<li><strong>Estimated Net Worth by 5 Years:</strong> $[X,XXX,XXX]</li>
<li><strong>First Major Savings Goal Achieved:</strong> [Goal Name] by [Date]</li>
<li><strong>AI Recommendation:</strong> Consider increasing your monthly investment contributions by Y% to reach your retirement goal 3 years sooner.</li>
</ul>
<button class="button-primary">Optimize Your Plan</button>
</div>
</div>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">WealthFlow AI</h3><p class="footer-1-newsletter-text">Unlock your financial potential. Subscribe for exclusive insights and updates on smart money management.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Enter your email"><button class="footer-1-subscribe-btn">Subscribe</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive updates and financial insights from WealthFlow AI.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Our Features</h4><ul><li><a href="#">Expense Tracking</a></li><li><a href="#">Investment Insights</a></li><li><a href="#">Savings Forecast</a></li><li><a href="#">AI-Driven Advice</a></li><li><a href="#">Account Sync</a></li></ul></div><div class="footer-1-column"><h4>Company</h4><ul><li><a href="#">About Us</a></li><li><a href="#">Blog</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Contact</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X (Twitter)</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>YouTube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2023 WealthFlow AI. All rights reserved.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookie Settings</a></li></ul></div></section></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
</script>
</body>
</html> (see https://g.co/ng/security#xss)