Can you give me the completed html for homepage and dash board:
This is my manuscript:  The project, named WealthGuardian, is a comprehensive personal financial management application designed to help individuals monitor and manage their daily economic activities. WealthGuardian was chosen as the name because it emphasizes the app’s role in guarding and optimizing users’ wealth through insightful financial monitoring and guidance. The core functionalities of WealthGuardian include budget tracking, which allows users to set monthly spending limits and track day-to-day expenses to ensure they stay on budget. The investment tracker enables users to monitor their portfolio performance, providing insights on stocks, bonds, and other investments (although this part may be an overreach on the dev’s part).   

  Additionally, WealthGuardian offers a savings goal tracker that motivates and assists users in achieving their short and long-term saving objectives by setting incremental landmarks. Finally, the application integrates a debt management plan that offers tailored advice on reducing liabilities and improving financial health. Overall, the aim of WealthGuardian is to offer an intuitive and accessible interface that empowers users to enhance their financial literacy and achieve greater economic security.




Essentials (MUST have)

- User authentication and management.

- Basic transaction tracking.

- Basic budget creation and tracking.

Important (SHOULD have)

- A detailed dashboard for a quick overview of financial health.

- Alerts or notifications for budget limits.

Nice to Have (COULD have)

- Investment tracking (simplified version).

- Use of interactive charts for financial data visualization.

Non-Essential (WON’T have this time)

- Comprehensive debt management tools.

- Advanced investment analysis features.

- In-depth financial health reports.





1. User - Manages user information and authentication details.

2. Transaction - Records individual financial transactions to monitor spending and investments.

3. Account - Represents various financial accounts, such as checking, savings, or investment accounts.

4. Budget - Helps in setting and tracking monthly spending limits and financial goals.



1. Table Name: Users

- Primary Key: user_id

- Model Related: User



- Primary Key: transaction_id

3- Foreign Key: account_id (links to Accounts table)

- Model Related: Transaction



- Primary Key: account_id

- Foreign Key: user_id (links to Users table)

- Model Related: Account



- Primary Key: budget_id

- Foreign Key: user_id (links to Users table)

- Model Related: Budget



1. Dashboard - Provides an overview of all financial metrics including recent transactions, budget summary, and savings goals.

2. Transaction History - Displays a detailed log of all financial transactions allowing users to review past expenses and deposits.

3. Budget Management - Enables users to create, edit, and monitor their monthly budgets, visualizing data to aid in financial decision-making.

4. Investments Tracker - Offers a comprehensive view of investment portfolios with performance metrics and individual asset reviews.

5. Savings Goals - Allows setting and tracking of various saving objectives, offering motivational insights and progress reports.

6. Debt Overview - Shows all liabilities and provides plans and suggestions for efficient debt management.

This is what I want for my HTML5:
### HTML (32% of Total Points)

#### Page Structure
1. Homepage:
- Welcome users and brief intro to WealthGuardian.
- Links to Dashboard, Profile, and Transaction pages.
- Quick summary of latest account status.

2. Dashboard Page:
- Detailed overview of financial health including transaction summaries, budget charts, and investment status.
- Utilizes <table>, <div>, and <span> tags to organize financial data effectively.

3. Transaction Page:
- Form for entering new transactions with <input>, <select> and <button>.
- History log showing past transactions through an HTML <table>.

4. Profile/Settings Page:
- User can update their personal settings.
- Form including user preferences, notification settings, and authentication details.

#### Features Across Pages
- Consistent layout using grids.
- Navigation bar with dropdown menus using <nav> and <ul>.
- Forms on settings and transactions pages for user inputs, equipped with HTML5 validation via regex for inputs like email and monetary values.

#### Content and Media
- Web fonts implemented for typography enhancements.
- Use of different types of content: text descriptions, icons/images for user-friendly interfaces, GIFs for loading animations.