Test UI integration

[gignatov6034]

User description

Merge the up-to-date Development changes with UI pages into REQ128-Django-create for testing purposes.
All changes can be reverted later if necessary

---

CodeAnt-AI Description

• Added HTML structures for various web client pages including home, market prediction, account, portfolio, and registration.
• Implemented JavaScript functionalities for market prediction and user authentication checks.
• Styled web client pages using CSS for responsive design and user interface consistency.
• Initialized a Flutter mobile client with basic setup and counter example.
• Implemented Win32 and GTK window management for Flutter applications on Windows and Linux.
• Added a basic widget test for the Flutter application to verify counter functionality.

This PR introduces a comprehensive user interface for both web and mobile clients, enhancing the overall user experience with structured pages, dynamic content, and responsive design. It also sets up the foundation for cross-platform mobile development using Flutter.

---

Changes walkthrough

	Relevant files
Enhancement	14 files index.html Added HTML structure for the home page.                                                src/UI/web_client/index.html Added a complete HTML structure for the home page of "The Almanac". Integrated Bootstrap and AOS for styling and animations. Included sections for navigation, welcome message, features, FAQ, and contact form. +273/-0  marketprediction.html Added HTML structure for market prediction page.                              src/UI/web_client/marketprediction.html Created HTML structure for the "The Almanac Predictor" page. Integrated Bootstrap for responsive design. Added sections for stock input, market prediction, and related news. +169/-0  account.html Added HTML structure for account management page.                            src/UI/web_client/account.html Developed HTML structure for the account management page. Included sections for viewing and importing portfolio information. +85/-0    portfolio.html Added HTML structure for portfolio management page.                        src/UI/web_client/portfolio.html Created HTML structure for the portfolio management page. Included placeholders for stock management features. +77/-0    register.html Added HTML structure for registration and login.                              src/UI/web_client/register.html Developed HTML structure for user registration and login. Integrated form elements for user input. +70/-0    index.html Initialized HTML structure for mobile client.                                    src/UI/mobile_client/web/index.html Initialized basic HTML structure for the mobile client. Included meta tags for mobile compatibility. +38/-0    win32_window.cpp Implemented Win32 window management for Flutter app.                      src/UI/mobile_client/windows/runner/win32_window.cpp Implemented Win32 window management for Flutter application. Added support for DPI scaling and dark mode. +288/-0  my_application.cc Implemented GTK application setup for Linux.                                      src/UI/mobile_client/linux/runner/my_application.cc Implemented GTK application setup for Linux. Configured window properties and Flutter view integration. +130/-0  marketPrediction.js Added JavaScript for market prediction functionality.                    src/UI/web_client/js/marketPrediction.js Added JavaScript functionality for market prediction page. Implemented stock data fetching and chart rendering. +309/-0  index.js Added JavaScript for user authentication checks.                              src/UI/web_client/js/index.js Added JavaScript for user authentication checks. Managed display of portfolio and account links based on login status. +34/-0    register.css Styled registration and login forms.                                                      src/UI/web_client/css/register.css Styled registration and login forms. Applied responsive design techniques. +215/-0  marketprediction.css Styled market prediction page elements.                                                src/UI/web_client/css/marketprediction.css Styled market prediction page elements. Added styles for active content sections. +95/-0    global.css Set global styles for the web client.                                                    src/UI/web_client/css/global.css Set global styles for the web client. Applied background image and color settings. +20/-0    main.dart Initialized Flutter application with basic setup.                            src/UI/mobile_client/lib/main.dart Initialized Flutter application with a basic counter example. Configured theme and home page. +125/-0
Tests	1 files widget_test.dart Added basic widget test for Flutter app.                                              src/UI/mobile_client/test/widget_test.dart Added a basic widget test for the Flutter application. Tested counter increment functionality. +30/-0

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[codeant-ai]

Pull Request Feedback 🔍

🔒 No security issues identified

⚡ Recommended areas for review HTML Structure The element is placed inside the section, which is non-standard HTML. Consider moving it into the block for improved semantic correctness and accessibility. Duplicate Function The function resetCharts is defined twice in the same file, which can lead to confusion or unexpected behavior. Consolidate these definitions to ensure a single, clear implementation.

[codeant-ai]

Suggestion: Move the navigation element from the head to the body for valid HTML structure. [possible issue]

Suggested change

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>The Almanac | Account</title>
	<link href="css/global.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
	integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
	<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
	<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
	<div class="container-fluid">
	<a class="navbar-brand" href="index.html"><img src="./images/logo.jpeg" alt="Bootstrap" width="30"
	height="30"></a>
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
	aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
	<div class="navbar-nav">
	<a class="nav-link" href="index.html">Home</a>
	<a class="nav-link" href="marketprediction.html">The Almanac Predictor</a>
	<a class="nav-link" href="portfolio.html">Your Portfolio</a>
	</div>
	<div class="navbar-nav ms-auto">
	<a class="nav-link active" aria-current="page" href="account.html">Account</a>
	</div>
	</div>
	</div>
	</nav>
	<head>
	...
	</head>
	<body>
	<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
	...
	</nav>

[codeant-ai]

Suggestion: Move the navigation element from the head to the body to meet HTML standards. [possible issue]

Suggested change

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>The Almanac | Home</title>
	<link href="css/global.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
	<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
	<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
	<div class="container-fluid">
	<a class="navbar-brand" href="index.html"><img src="./images/logo.jpeg" alt="Bootstrap" width="30"
	height="30"></a>
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
	aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
	<div class="navbar-nav">
	<a class="nav-link active" aria-current="page" href="index.html">Home</a>
	<a class="nav-link" href="marketprediction.html">The Almanac Predictor</a>
	<a class="nav-link" href="portfolio.html">Your Portfolio</a>
	</div>
	<div class="navbar-nav ms-auto">
	<a class="nav-link" href="account.html">Account</a>
	</div>
	</div>
	</div>
	</nav>
	<head>
	...
	</head>
	<body>
	<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
	...
	</nav>

[codeant-ai]

Suggestion: Relocate the navigation element from the head into the body for valid markup. [possible issue]

Suggested change

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>The Almanac | Predictions</title>
	<link href="css/global.css" rel="stylesheet">
	<link href="css/marketprediction.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
	<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
	<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
	<div class="container-fluid">
	<a class="navbar-brand" href="index.html"><img src="./images/logo.jpeg" alt="Bootstrap" width="30"
	height="30"></a>
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
	aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
	<div class="navbar-nav">
	<a class="nav-link" href="index.html">Home</a>
	<a class="nav-link active" aria-current="page" href="marketprediction.html">The Almanac Predictor</a>
	<a class="nav-link" href="portfolio.html">Your Portfolio</a>
	</div>
	<div class="navbar-nav ms-auto">
	<a class="nav-link" href="account.html">Account</a>
	</div>
	</div>
	</div>
	</nav>
	<head>
	...
	</head>
	<body>
	<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
	...
	</nav>

[codeant-ai]

Suggestion: Correct the typo in the portfolio description. [typo]

Suggested change

	<p class="fs-3">View and track you portfolio</p>
	<p class="fs-3">View and track your portfolio</p>

[codeant-ai]

Suggestion: Add name attributes to input fields to ensure form data is correctly submitted. [possible bug]

Suggested change

	<input type="text" placeholder="Email Address" required>
	<input type="text" name="email" placeholder="Email Address" required>

[codeant-ai]

Suggestion: Pass GetModuleHandle(nullptr) as the second argument to UnregisterClass for proper unregistration. [possible bug]

Suggested change

	UnregisterClass(kWindowClassName, nullptr);
	UnregisterClass(kWindowClassName, GetModuleHandle(nullptr));

[codeant-ai]

Suggestion: Remove the duplicate resetCharts function definition to prevent unintended behavior. [possible bug]

Suggested change

	function resetCharts() {
	// Reset chart data to initial state or empty state
	const chartElements = [document.getElementById("chLine"), document.getElementById("chLine2"), document.getElementById("chBar"), document.getElementById("chScatter")];
	chartElements.forEach(chartElement => {
	if (chartElement && chartElement.chart) {
	chartElement.chart.data.datasets.forEach(dataset => {
	dataset.data = [];
	});
	chartElement.chart.update();
	}
	});
	}
	function resetStockData() {
	// Reset the selected stock display
	selectedStock.textContent = "";
	removeStockBtn.style.display = "none";
	// Reset the stock data fields
	document.getElementById("PriceAtClose").textContent = "Price at Close";
	document.getElementById("AfterHoursPrice").textContent = "After Hours Price";
	document.getElementById("PriceToEarnings").textContent = "Price to Earnings";
	document.getElementById("PriceToBook").textContent = "Price to Book";
	// Clear the news content
	document.getElementById("newsContent").innerHTML = "";
	// Reset the charts (if needed)
	resetCharts();
	// Optionally, hide the fourth section until new data is loaded
	document.getElementById("fourthSection").setAttribute("hidden", true);
	}
	function resetCharts() {
	// Reset chart data to initial state or empty state
	const chartElements = [document.getElementById("chLine"), document.getElementById("chLine2"), document.getElementById("chBar"), document.getElementById("chScatter")];
	chartElements.forEach(chartElement => {
	if (chartElement && chartElement.chart) {
	chartElement.chart.data.datasets.forEach(dataset => {
	dataset.data = [];
	});
	chartElement.chart.update();
	}
	});
	}
	function resetCharts() {
	chartElements.forEach(chartElement => {
	if (chartElement && chartElement.chart) {
	chartElement.chart.data.datasets.forEach(dataset => {
	dataset.data = [];
	});
	chartElement.chart.update();
	}
	});
	}

[codeant-ai]

Suggestion: Replace pump() with pumpAndSettle() after the tap action to ensure that all animations have completed before verifying the UI state. [performance]

Suggested change

	await tester.tap(find.byIcon(Icons.add));
	await tester.pump();
	await tester.tap(find.byIcon(Icons.add));
	await tester.pumpAndSettle();