Serve app via redirect to dist/Pytrade/browser

.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

CHANGELOG.md

@@ -0,0 +1,16 @@
+This file explains how Visual Studio created the project.
+
+The following tools were used to generate this project:
+- Angular CLI (ng)
+
+The following steps were used to generate this project:
+- Create Angular project with ng: `ng new Pytrade --defaults --skip-install --skip-git --no-standalone `.
+- Update angular.json with port.
+- Create project file (`Pytrade.esproj`).
+- Create `launch.json` to enable debugging.
+- Update package.json to add `jest-editor-support`.
+- Update `start` script in `package.json` to specify host.
+- Add `karma.conf.js` for unit tests.
+- Update `angular.json` to point to `karma.conf.js`.
+- Add project to solution.
+- Write this file.

Pytrade.esproj

@@ -0,0 +1,10 @@
+<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0.2752196">
+  <PropertyGroup>
+    <StartupCommand>npm start</StartupCommand>
+    <JavaScriptTestFramework>Jasmine</JavaScriptTestFramework>
+    <!-- Allows the build (or compile) script located on package.json to run on Build -->
+    <ShouldRunBuildScript>false</ShouldRunBuildScript>
+    <!-- Folder where production build objects will be placed -->
+    <BuildOutputFolder>$(MSBuildProjectDirectory)\dist\Pytrade\browser\</BuildOutputFolder>
+  </PropertyGroup>
+</Project>

Pytrade.sln

@@ -0,0 +1,27 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.14.36301.6 d17.14
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{54A90642-561A-4BB1-A94E-469ADEE60C69}") = "Pytrade", "Pytrade.esproj", "{54209CD0-4BE7-905C-7951-7A10E456A6D9}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{54209CD0-4BE7-905C-7951-7A10E456A6D9}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{54209CD0-4BE7-905C-7951-7A10E456A6D9}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{54209CD0-4BE7-905C-7951-7A10E456A6D9}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{54209CD0-4BE7-905C-7951-7A10E456A6D9}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{54209CD0-4BE7-905C-7951-7A10E456A6D9}.Release|Any CPU.Build.0 = Release|Any CPU
+		{54209CD0-4BE7-905C-7951-7A10E456A6D9}.Release|Any CPU.Deploy.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {9D215C41-589A-46E9-ABAA-BB49FAEA1A1F}
+	EndGlobalSection
+EndGlobal

angular.json

@@ -0,0 +1,110 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "Pytrade": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "standalone": false
+        },
+        "@schematics/angular:directive": {
+          "standalone": false
+        },
+        "@schematics/angular:pipe": {
+          "standalone": false
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/custom-theme.scss",
+              "src/styles.css"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "Pytrade:build:production"
+            },
+            "development": {
+              "buildTarget": "Pytrade:build:development"
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
+            "port": 57205
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "karmaConfig": "karma.conf.js"
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "eab27a52-ee79-4cb0-aa82-d323da3c6b06"
+  }
+}

index.html

@@ -1,19 +1,10 @@
 <!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Pytrade</title>
+    <meta http-equiv="refresh" content="0; url=./dist/Pytrade/browser/">
+    <script>window.location.replace('./dist/Pytrade/browser/');</script>
+  </head>
+  <body></body>
 </html>

karma.conf.js

@@ -0,0 +1,44 @@
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true,
+    listenAddress: 'localhost',
+    hostname: 'localhost'
+  });
+};
+

obj/Debug/package.g.props

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project>
+  <PropertyGroup>
+    <PackageJsonName Condition="$(PackageJsonName) == ''">pytrade</PackageJsonName>
+    <PackageJsonVersion Condition="$(PackageJsonVersion) == ''">0.0.0</PackageJsonVersion>
+    <PackageJsonScriptsNg Condition="$(PackageJsonScriptsNg) == ''">ng</PackageJsonScriptsNg>
+    <PackageJsonScriptsStart Condition="$(PackageJsonScriptsStart) == ''">ng serve --host=127.0.0.1</PackageJsonScriptsStart>
+    <PackageJsonScriptsBuild Condition="$(PackageJsonScriptsBuild) == ''">ng build</PackageJsonScriptsBuild>
+    <PackageJsonScriptsWatch Condition="$(PackageJsonScriptsWatch) == ''">ng build --watch --configuration development</PackageJsonScriptsWatch>
+    <PackageJsonScriptsTest Condition="$(PackageJsonScriptsTest) == ''">ng test</PackageJsonScriptsTest>
+    <PackageJsonPrettierPrintwidth Condition="$(PackageJsonPrettierPrintwidth) == ''">100</PackageJsonPrettierPrintwidth>
+    <PackageJsonPrettierSinglequote Condition="$(PackageJsonPrettierSinglequote) == ''">true</PackageJsonPrettierSinglequote>
+    <PackageJsonPrettierOverrides Condition="$(PackageJsonPrettierOverrides) == ''">[
+  {
+    "files": "*.html",
+    "options": {
+      "parser": "angular"
+    }
+  }
+]</PackageJsonPrettierOverrides>
+    <PackageJsonPrivate Condition="$(PackageJsonPrivate) == ''">true</PackageJsonPrivate>
+    <PackageJsonDependenciesAngularCdk Condition="$(PackageJsonDependenciesAngularCdk) == ''">^20.2.1</PackageJsonDependenciesAngularCdk>
+    <PackageJsonDependenciesAngularCommon Condition="$(PackageJsonDependenciesAngularCommon) == ''">^20.2.0</PackageJsonDependenciesAngularCommon>
+    <PackageJsonDependenciesAngularCompiler Condition="$(PackageJsonDependenciesAngularCompiler) == ''">^20.2.0</PackageJsonDependenciesAngularCompiler>
+    <PackageJsonDependenciesAngularCore Condition="$(PackageJsonDependenciesAngularCore) == ''">^20.2.0</PackageJsonDependenciesAngularCore>
+    <PackageJsonDependenciesAngularForms Condition="$(PackageJsonDependenciesAngularForms) == ''">^20.2.0</PackageJsonDependenciesAngularForms>
+    <PackageJsonDependenciesAngularMaterial Condition="$(PackageJsonDependenciesAngularMaterial) == ''">^20.2.1</PackageJsonDependenciesAngularMaterial>
+    <PackageJsonDependenciesAngularPlatformBrowser Condition="$(PackageJsonDependenciesAngularPlatformBrowser) == ''">^20.2.0</PackageJsonDependenciesAngularPlatformBrowser>
+    <PackageJsonDependenciesAngularRouter Condition="$(PackageJsonDependenciesAngularRouter) == ''">^20.2.0</PackageJsonDependenciesAngularRouter>
+    <PackageJsonDependenciesApexcharts Condition="$(PackageJsonDependenciesApexcharts) == ''">^5.3.4</PackageJsonDependenciesApexcharts>
+    <PackageJsonDependenciesAxios Condition="$(PackageJsonDependenciesAxios) == ''">^1.11.0</PackageJsonDependenciesAxios>
+    <PackageJsonDependenciesJestEditorSupport Condition="$(PackageJsonDependenciesJestEditorSupport) == ''">*</PackageJsonDependenciesJestEditorSupport>
+    <PackageJsonDependenciesNgApexcharts Condition="$(PackageJsonDependenciesNgApexcharts) == ''">^2.0.1</PackageJsonDependenciesNgApexcharts>
+    <PackageJsonDependenciesRxjs Condition="$(PackageJsonDependenciesRxjs) == ''">~7.8.0</PackageJsonDependenciesRxjs>
+    <PackageJsonDependenciesTslib Condition="$(PackageJsonDependenciesTslib) == ''">^2.3.0</PackageJsonDependenciesTslib>
+    <PackageJsonDependenciesZoneJs Condition="$(PackageJsonDependenciesZoneJs) == ''">~0.15.0</PackageJsonDependenciesZoneJs>
+    <PackageJsonDevdependenciesAngularBuild Condition="$(PackageJsonDevdependenciesAngularBuild) == ''">^20.2.0</PackageJsonDevdependenciesAngularBuild>
+    <PackageJsonDevdependenciesAngularCli Condition="$(PackageJsonDevdependenciesAngularCli) == ''">^20.2.0</PackageJsonDevdependenciesAngularCli>
+    <PackageJsonDevdependenciesAngularCompilerCli Condition="$(PackageJsonDevdependenciesAngularCompilerCli) == ''">^20.2.0</PackageJsonDevdependenciesAngularCompilerCli>
+    <PackageJsonDevdependenciesTypesJasmine Condition="$(PackageJsonDevdependenciesTypesJasmine) == ''">~5.1.0</PackageJsonDevdependenciesTypesJasmine>
+    <PackageJsonDevdependenciesJasmineCore Condition="$(PackageJsonDevdependenciesJasmineCore) == ''">~5.9.0</PackageJsonDevdependenciesJasmineCore>
+    <PackageJsonDevdependenciesKarma Condition="$(PackageJsonDevdependenciesKarma) == ''">~6.4.0</PackageJsonDevdependenciesKarma>
+    <PackageJsonDevdependenciesKarmaChromeLauncher Condition="$(PackageJsonDevdependenciesKarmaChromeLauncher) == ''">~3.2.0</PackageJsonDevdependenciesKarmaChromeLauncher>
+    <PackageJsonDevdependenciesKarmaCoverage Condition="$(PackageJsonDevdependenciesKarmaCoverage) == ''">~2.2.0</PackageJsonDevdependenciesKarmaCoverage>
+    <PackageJsonDevdependenciesKarmaJasmine Condition="$(PackageJsonDevdependenciesKarmaJasmine) == ''">~5.1.0</PackageJsonDevdependenciesKarmaJasmine>
+    <PackageJsonDevdependenciesKarmaJasmineHtmlReporter Condition="$(PackageJsonDevdependenciesKarmaJasmineHtmlReporter) == ''">~2.1.0</PackageJsonDevdependenciesKarmaJasmineHtmlReporter>
+    <PackageJsonDevdependenciesTypescript Condition="$(PackageJsonDevdependenciesTypescript) == ''">~5.9.2</PackageJsonDevdependenciesTypescript>
+  </PropertyGroup>
+</Project>

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "pytrade",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --host=127.0.0.1",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/cdk": "^20.2.1",
+    "@angular/common": "^20.2.0",
+    "@angular/compiler": "^20.2.0",
+    "@angular/core": "^20.2.0",
+    "@angular/forms": "^20.2.0",
+    "@angular/material": "^20.2.1",
+    "@angular/platform-browser": "^20.2.0",
+    "@angular/router": "^20.2.0",
+    "apexcharts": "^5.3.4",
+    "axios": "^1.11.0",
+    "jest-editor-support": "*",
+    "ng-apexcharts": "^2.0.1",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^20.2.0",
+    "@angular/cli": "^20.2.0",
+    "@angular/compiler-cli": "^20.2.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.9.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.9.2"
+  }
+}

public/bgvideo.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:61d87371c7239259e64e17998d41f2fe1bb52fd5d9dcaa419c887f9e51cae818
+size 2263652

public/marketselect.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5e761f128092c0b54cc74bb95529c01593d9423e21e9b16771fe0da458b23188
+size 2022987

src/app/analysispage/analysispage.html

@@ -0,0 +1,291 @@
+<div class="analyse-container">
+
+
+  <mat-card>
+    <h1>Overall Score Board</h1>
+
+    <table>
+      <thead>
+        <tr>
+          <th>Company Name</th>
+          <th>Ticker</th>
+          <th>Overall Signal</th>
+          <th>Overall Score</th>
+          <th>Technical Analysis Score (80%)</th>
+          <th>Fundamental Analysis Score (15%)</th>
+          <th>News Score (5%)</th>
+        </tr>
+      </thead>
+      <tbody id="resultsTable">
+        <tr *ngFor="let scoreboard of result;let i = index">
+          <td style="cursor:pointer"
+              (click)="selectCompany(i)"
+              [ngClass]="{ 'active-td': activeCompany === i }"
+              >{{scoreboard.company_name}}</td>
+          <td>{{scoreboard.ticker}}</td>
+          <td>
+            <div class="dot"
+                 [ngClass]="getClass(scoreboard.combined_overall_signal)"></div>
+          </td>
+          <td>{{scoreboard.combined_overall_score}}</td>
+          <td>{{scoreboard.overall_ta_score}}</td>
+          <td>{{scoreboard.fundamental_analysis.overall_fa_score}}</td>
+          <td>{{scoreboard.news_overall_score}}</td>
+        </tr>
+      </tbody>
+    </table>
+
+  </mat-card>
+
+
+  <mat-card>
+    <h1>Close Price Chart</h1>
+    <div class="chart-container">
+      <div>
+        <apx-chart [series]="chartOptions.series"
+                   [chart]="chartOptions.chart"
+                   [xaxis]="chartOptions.xaxis"
+                   [yaxis]="chartOptions.yaxis"></apx-chart>
+      </div>
+      <div>
+        <!-- Include ApexCharts in your HTML file -->
+        <apx-chart [series]="overallChart.series"
+                   [chart]="overallChart.chart"
+                   [labels]="overallChart.labels"
+                   [plotOptions]="overallChart.plotOptions"
+                   [fill]="overallChart.fill"
+                   [tooltip]="overallChart.tooltip"
+                   [legend]="overallChart.legend">
+        </apx-chart>
+
+
+      </div>
+    </div>
+
+
+  </mat-card>
+
+
+  <mat-card>
+    <h1>Trade Recommendations</h1>
+    <ng-container>     
+      <table>
+        <thead>
+          <tr>
+            <th>Current Price</th>
+            <th>Entry Point</th>
+            <th>Stop Loss</th>
+            <th>Target Price</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <p style="font-size:2vw;">{{result[activeCompany].live_price}}</p>
+              <p [ngStyle]="{'color': result[activeCompany].price_change > 0 ? 'green' : (result[activeCompany].price_change < 0 ? 'red' : 'green')}">{{result[activeCompany].price_change}} ({{result[activeCompany].percentage_change}}%)</p>
+            </td>
+            <td>{{result[activeCompany].tradingInfo.entry_point}}</td>
+            <td>{{result[activeCompany].tradingInfo.stop_loss}}</td>
+            <td>{{result[activeCompany].tradingInfo.target_price}}</td>
+
+          </tr>
+        </tbody>
+      </table>
+
+      <table>
+        <thead>
+          <tr>
+            <th>Pivot Points</th>
+            <th>Support</th>
+            <th>Resistance</th>
+            <th>Remarks</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <div>
+                {{result[activeCompany].tradingInfo.pivot_point}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.p1_pect}}%)
+              </div>
+            </td>
+            <td>
+              <div>
+                <span color="#ec2932!important"><b>S1:</b></span>&nbsp;&nbsp; {{result[activeCompany].tradingInfo.support1}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.s1_pect}}%)
+              </div>
+              <div>
+                <span color="#ec2932!important"><b>S2:</b></span>&nbsp;&nbsp; {{result[activeCompany].tradingInfo.support2}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.s2_pect}}%)
+              </div>
+              <div>
+                <span color="#ec2932!important"><b>S3:</b></span>&nbsp;&nbsp; {{result[activeCompany].tradingInfo.support3}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.s3_pect}}%)
+              </div>
+            </td>
+            <td>
+              <div>
+                <span color="#ec2932!important"><b>R1:</b></span>&nbsp;&nbsp; {{result[activeCompany].tradingInfo.resistance1}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.r1_pect}}%)
+              </div>
+              <div>
+                <span color="#ec2932!important"><b>R2:</b></span>&nbsp;&nbsp; {{result[activeCompany].tradingInfo.resistance2}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.r2_pect}}%)
+              </div>
+              <div>
+                <span color="#ec2932!important"><b>R3:</b></span>&nbsp;&nbsp; {{result[activeCompany].tradingInfo.resistance3}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.r3_pect}}%)
+              </div>
+            </td>
+
+            <td>{{result[activeCompany].tradingInfo.remarks}}</td>
+          </tr>
+        </tbody>
+      </table>
+
+
+    </ng-container>
+  </mat-card>
+
+
+
+
+  <mat-card>
+    <h1>Technical Analysis</h1>
+
+
+    <table>
+      <thead>
+        <tr>
+          <th style="cursor:pointer;"
+              *ngFor="let kv of result[activeCompany].final_trade_signal | keyvalue"
+              (click)="showStrategies(kv.key)"
+              [ngClass]="{ 'active-td': selectedIndicator === kv.key }">
+            {{ kv.key }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td *ngFor="let kv of result[activeCompany].final_trade_signal | keyvalue">
+            <div class="dot"
+                 [ngClass]="getClass(kv.value)"></div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="strategy-chart-container">
+
+      <div class="strategy-container">
+
+        <ng-container *ngFor="let kv of result[activeCompany][selectedIndicator] | keyvalue">
+          <div class="strategy">
+            <div class="content" style="cursor:pointer;"
+                 (click)="loadStrategiesChart(kv.key)"
+                 [ngClass]="{ 'active-td': selectedStrategy === kv.key }">{{kv.key}}</div>
+            <!--<div class="dot"
+                 [ngClass]="getClass(kv.value)"></div>-->
+
+            <div class="dot" [ngClass]="getClass(kv.value)"></div>
+            <span *ngIf="getClass(kv.value) === 'strategyvalue'">{{ kv.value }}</span>
+          </div>
+
+        </ng-container>
+
+      </div>
+
+      <div class="strategy-chart" *ngFor="let strategyCharts of strategyChart">
+        <apx-chart [series]="strategyCharts.series"
+                   [chart]="strategyCharts.chart"
+                   [xaxis]="strategyCharts.xaxis"
+                   [yaxis]="strategyCharts.yaxis"
+                   [stroke]="strategyCharts.stroke"
+                   [tooltip]="strategyCharts.tooltip"
+                   [annotations]="strategyCharts.annotations">
+        </apx-chart>
+      </div>
+    </div>
+
+
+  </mat-card>
+
+
+  <mat-card>
+    <h1>Fundamental Analysis</h1>
+
+    <table>
+      <thead>
+        <tr>
+          <th *ngFor="let kv of result[activeCompany].fundamental_analysis.fa_strategy | keyvalue">
+            {{ kv.key }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td *ngFor="let kv of result[activeCompany].fundamental_analysis.fa_strategy | keyvalue">
+            <div class="dot"
+                 [ngClass]="getClass(kv.value)"></div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+
+    <div class="fa-metrics">
+      <ng-container *ngFor="let kv of result[activeCompany].fundamental_analysis | keyvalue">
+        <div class="strategy-container" *ngIf="kv.key !== 'overall_fa_score'&& kv.key !== 'fa_strategy'">
+
+          <div class="fa-title">{{ kv.key }}</div>
+
+          <div class="fa-content" *ngIf="kv.value && typeof kv.value === 'object'">
+            <div class="metrics" *ngFor="let kvalue of kv.value | keyvalue">
+              <div>{{ kvalue.key }}</div>
+              <div>{{ kvalue.value }}</div>
+            </div>
+          </div>
+
+        </div>
+      </ng-container>
+    </div>
+
+
+
+
+
+  </mat-card>
+
+
+
+  <mat-card>
+    <h1>Candlestick Chart</h1>
+    <apx-chart [series]="candlestickChartOptions.series"
+               [chart]="candlestickChartOptions.chart"
+               [xaxis]="candlestickChartOptions.xaxis"
+               [yaxis]="candlestickChartOptions.yaxis"></apx-chart>
+
+  </mat-card>
+
+
+  <mat-card>
+    <h1>Predicted Close Price for next 15 days</h1>
+    <div class="strategy-container">
+      <p>Maximum Highest Price Prediction:  {{result[activeCompany].ai_predicted_highest_price}}</p>
+      <p>Maximum Lowest Price Prediction:  {{result[activeCompany].ai_predicted_lowest_price}}</p>
+    </div>
+      <apx-chart [series]="predictedChart.series"
+                 [chart]="predictedChart.chart"
+                 [xaxis]="predictedChart.xaxis">
+      </apx-chart>
+  </mat-card>
+
+  <mat-card>
+    <h1>Latest News</h1>
+    <div class="news-container">
+      <ng-container *ngFor="let news of result[activeCompany].news">
+
+        <div class="strategy-container">
+          <div class="dot"
+               [ngClass]="getClass(news.sentiment)"></div>
+          <a [href]="news.url">{{news.title}}</a>
+          <span>{{news.published}}</span>
+        </div>
+
+      </ng-container>
+    </div>
+  </mat-card>
+</div>

src/app/analysispage/analysispage.scss

@@ -0,0 +1,156 @@
+.analyse-container{
+    width:94%;
+    padding: 3vw;
+    display:flex;
+    flex-direction:column;
+    gap:2vw;
+}
+
+mat-card {
+  background: #142133;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
+  padding: 2vw;
+  
+
+  h1 {
+    color: #38bdf8 !important;
+    font-size: 1.5vw;
+    font-family: arial;
+  }
+}
+
+/* ---- Theme ---- */
+:host {
+  --bg: #0f172a;
+  --card: #121a27;
+  --line: #243044;
+  --ink: #e2e8f0;
+  --dim: #94a3b8;
+  --head: #2a3a52;
+  --good: #22c55e;
+  --warn: #eab308;
+  --bad: #ef4444;
+}
+
+
+/* ---- Table base ---- */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--ink);
+  background: var(--card);
+  /*border: 1px solid var(--line);
+  border-radius: 14px;*/ /* visible if you do not use .table-wrap */
+  overflow: hidden; /* keeps rounded corners on header */
+}
+
+thead th {
+  background: var(--head);
+  color: #d9e7ff;
+  font-weight: 700;
+  letter-spacing: .3px;
+  padding: 12px 14px;
+  text-align: left;
+  border-bottom: 1px solid var(--line);
+  font-family: arial;
+}
+
+tbody td {
+  padding: 12px 14px;
+  border-top: 1px solid var(--line);
+  vertical-align: middle;
+}
+
+
+
+.dot {
+  width: 1vw;
+  height: 1vw;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.green {
+  background: var(--good);
+}
+
+.yellow {
+  background: var(--warn);
+}
+
+.red {
+  background: var(--bad);
+}
+
+.strategy-container {
+  background-color: #334155;
+ /* border: 1px solid #334155;*/
+  padding: 15px;
+  border-radius: 10px;
+  color: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  gap: 2vw;
+  font-family: Arial;
+  width: 20vw;
+  /*margin-top: 2vw;*/
+
+  .strategy {
+    display: flex;
+    font-family: Arial;
+    justify-content: space-between;
+  }
+}
+
+.fa-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
+  max-width: 75vw;
+  margin: auto;
+}
+.fa-title {
+  color: #38bdf8 !important;
+}
+.fa-content {
+  display: flex;
+  flex-direction:column;
+  gap:1vw;
+}
+.metrics {
+  display: flex;
+  justify-content: space-between;
+}
+
+.news-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1vw;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    font-family: Arial;
+  }
+}
+
+.chart-container {
+  display: flex;
+  background-color: #1e293b;
+}
+.strategy-chart-container {
+  display: flex;
+  align-items: center;
+  gap: 2vw;
+
+  .strategy-chart {
+    background-color: #FFFFFF;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  }
+}
+
+.active-td {
+  color: #38bdf8 !important;
+  font-weight:bold;
+}

src/app/analysispage/analysispage.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Analysispage } from './analysispage';
+
+describe('Analysispage', () => {
+  let component: Analysispage;
+  let fixture: ComponentFixture<Analysispage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Analysispage]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Analysispage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/analysispage/analysispage.ts

@@ -0,0 +1,226 @@
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { Location } from '@angular/common';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { ChartService } from './chart.service';
+
+@Component({
+  selector: 'app-analysispage',
+  standalone: true,
+  imports: [CommonModule, MatCardModule, NgApexchartsModule],
+  templateUrl: './analysispage.html',
+  styleUrls: ['./analysispage.scss']
+})
+export class Analysispage implements OnInit {
+  private location = inject(Location);  
+  result: any;
+  chartOptions: any; 
+  candlestickChartOptions: any;
+  overallChart: any;
+  strategyChart: any;
+  predictedChart: any;
+  selectedIndicator:any = 'ADX';
+  selectedStrategy: any = 'ADX';
+  activeCompany: number = 0;
+  constructor(private chartService: ChartService) { }
+
+  ngOnInit(): void {
+    const s = this.location.getState() as { result?: unknown } | null;
+    this.result = s?.result ?? null;
+    console.log('Analysis result:', this.result);
+    this.loadCharts();
+    this.loadStrategiesChart('ADX');
+  }
+
+  showStrategies(selectedIndicator:any) {
+    this.selectedIndicator = selectedIndicator;
+  }
+
+  loadStrategiesChart(strategyName: any) {
+    this.selectedStrategy = strategyName;
+    
+    this.strategyChart = this.chartService.getChartOptions(strategyName, this.result[this.activeCompany]);
+    console.log(this.strategyChart);
+  }
+
+  getClass(signal: any) {
+    if (typeof signal === 'string') {
+      switch (signal.toLowerCase()) {
+        case 'buy':
+        case 'good':
+        case 'positive':
+        case 'bullish':
+          return 'green';
+        case 'dbuy':
+        case 'bad':
+        case 'negative':
+        case 'bearish':
+          return 'red';
+        case 'neutral':
+        case 'none':
+          return 'yellow';
+        default:
+          return '';
+      }
+    } else {
+      return 'strategyvalue'
+    }
+  }
+
+  loadCharts() {
+    let closePrices = this.result[this.activeCompany].ohlc_data.map((data:any) => ({
+      x: new Date(data.x).getTime(),  
+      y: data.y[3]  
+    }));
+    this.chartOptions = {
+      series: [{
+        name: "Close Price",
+        data: closePrices
+      }],
+      chart: {
+        type: 'area',
+        height: 350,
+        width: 1200
+      },
+      xaxis: {
+        type: 'datetime',
+        labels: {
+          style: {
+            colors: '#ffffff'          
+          },
+        },
+      },
+      yaxis: {
+        title: {
+          text: 'Close Price'
+        }
+      }
+    };
+
+    this.candlestickChartOptions = {
+      chart: {
+        type: 'candlestick',
+        height: 550,
+        width: 1700
+      },
+      series: [{
+        data: this.result[this.activeCompany].ohlc_data
+      }],
+      xaxis: {
+        type: 'datetime',
+        labels: {
+          style: {
+            colors: '#ffffff'
+          },
+        },
+      },
+      yaxis: {
+        opposite: true,
+        labels: {
+          style: {
+            colors: '#ffffff'
+          },
+        },
+      }
+    };
+
+    this.overallChart = {
+      series: [
+        this.result[this.activeCompany].overall_ta_score,
+        this.result[this.activeCompany].overall_fa_score,
+        this.result[this.activeCompany].news_overall_score
+      ],  // Three values for the donut chart
+      chart: {
+        type: 'donut',
+        width: 500
+      },
+      labels: ['TA', 'FA', 'News'],  // Set the labels to show on the chart
+      plotOptions: {
+        pie: {
+          donut: {
+            size: '60%',  // Control the thickness of the donut
+            labels: {
+              show: true,
+              name: {
+                show: false
+              },
+              value: {
+                show: true,  // Show values inside the donut chart
+                fontSize: '16px', // Font size for values
+                color: 'white'   // White color for the values
+              },
+              total: {
+                show: true,
+                label: 'Total', // Label at the center
+                formatter: (w: any) => {
+                  // Display the total value (sum of all slices)
+                  return w.globals.seriesTotals.reduce((a: any, b: any) => a + b, 0) + '%';
+                }
+              }
+            }
+          }
+        }
+      },
+      fill: {
+        type: 'solid',
+        colors: ['#ff5733', '#33ff57', '#ffcc00'] // Colors for TA, FA, and News
+      },
+      tooltip: {
+        enabled: true,  // Enable tooltips for the chart
+        fillSeriesColor: false,
+        theme: 'dark',
+        style: {
+          fontSize: '14px',
+          color: 'white'  // White text color for tooltips
+        }
+      },
+      legend: {
+        show: true,
+        position: 'bottom',  // Position the legend at the bottom
+        labels: {
+          useSeriesColors: true,  // Use the series colors for legend
+          colors: ['white']  // White text color for legend
+        }
+      }
+    };
+
+
+
+    const prediction_prices = this.result[this.activeCompany]['prediction_prices']
+    const prediction_dates = this.result[this.activeCompany]['prediction_dates']
+
+    this.predictedChart = {
+      series: [
+        {
+          name: "Predicted Price",
+          data: prediction_prices.map((value: any) => Number(value.toFixed(2))),
+          color: '#28a745'
+        }
+
+      ],
+      chart: {
+        type: "area",
+        height: 460,
+        width: 1650
+      },
+      xaxis: {
+        categories: prediction_dates,
+        labels: {
+          style: {
+            colors: '#ffffff'
+          },
+        },
+      }
+    };  
+
+  }
+
+
+  selectCompany(index: number) {
+    this.activeCompany = index;
+    this.loadCharts();
+  }
+
+
+}

src/app/analysispage/chart.service.ts

@@ -0,0 +1,558 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ChartService {
+
+  constructor() { }
+
+  getChartOptions(strategyName: any, fetchData: any): any[] {
+    const strategyConfig: any = {
+
+      'RSI 14': {
+        panels: [
+          {
+            indicators: ['RSI 14'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          }
+        ]
+      },
+      'Overbought/Oversold': {
+        panels: [
+          {
+            indicators: ['RSI 14'],
+            showAnnotations: true,
+            levels: [
+              { value: 70, color: '#FF0000', label: 'Overbought (70)' },
+              { value: 30, color: '#008000', label: 'Oversold (30)' }
+            ],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          }
+        ]
+      },
+      'RSI Swing Rejection': {
+        panels: [
+          {
+            indicators: ['RSI 14'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          }
+        ]
+      },
+      'RSI Divergence': {
+        panels: [
+          {
+            indicators: ['RSI 14'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          }
+        ]
+      },
+      'RSI 5/14 Crossover': {
+        panels: [
+          {
+            indicators: ['RSI 14', 'RSI 5'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          }
+        ]
+      },
+      'RSI Trend 50 Confirmation': {
+        panels: [
+          {
+            indicators: ['RSI 14'],
+            showAnnotations: true,
+            levels: [
+              { value: 70, color: '#FF0000', label: 'Overbought (70)' },
+              { value: 50, color: '#775DD0', label: 'RSI (50)' },
+              { value: 30, color: '#008000', label: 'Oversold (30)' }
+            ],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          }
+        ]
+      },
+      'Mean Reversion': {
+        panels: [
+          {
+            indicators: ['RSI 14'],
+            showAnnotations: true,
+            levels: [
+              { value: 80, color: '#FF0000', label: 'Overbought (80)' },
+              { value: 20, color: '#008000', label: 'Oversold (20)' }
+            ],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          }
+        ]
+      },
+      'RSI_Bollinger Band': {
+        panels: [
+          {
+            indicators: ['RSI 14'],
+            showAnnotations: true,
+            levels: [
+              { value: 70, color: '#FF0000', label: 'Overbought (70)' },
+              { value: 30, color: '#008000', label: 'Oversold (30)' }
+            ],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          },
+          {
+            indicators: ['Close', 'UpperBB', 'LowerBB'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {}  // auto-scaling
+          }
+        ]
+      },
+      'RSI_MA': {
+        panels: [
+          {
+            indicators: ['RSI 14'],
+            showAnnotations: true,
+            levels: [
+              { value: 70, color: '#FF0000', label: 'Overbought (70)' },
+              { value: 30, color: '#008000', label: 'Oversold (30)' }
+            ],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          },
+          {
+            indicators: ['Close', 'MA_20'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {}  // auto-scaling
+          }
+        ]
+      },
+      'MACD': {
+        panels: [
+          {
+            indicators: ['MACDLine'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {}
+          }
+        ]
+      },
+      'MACD Line Crossover': {
+        panels: [
+          {
+            indicators: ['MACDLine', 'MACDSignalLine', 'MACDHistogram'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {}
+          }
+        ]
+      },
+      'MACD Zero-Line Crossover': {
+        panels: [
+          {
+            indicators: ['MACDLine'],
+            showAnnotations: true,
+            levels: [{ value: 0, color: '#FF0000', label: 'MACD ZeroLine' },],
+            yaxisconfig: {}
+          }
+        ]
+      },
+      'MACD Momentum': {
+        panels: [
+          {
+            indicators: ['MACDLine', 'MACDSignalLine', 'MACDHistogram'],
+            showAnnotations: false,
+            levels: [{ value: 0, color: '#FF0000', label: 'MACD ZeroLine' },],
+            yaxisconfig: {}
+          }
+        ]
+      },
+      'ATR': {
+        panels: [
+          {
+            indicators: ['ATRValue'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+      'ATR Breakout': {
+        panels: [
+          {
+            indicators: ['ATRValue'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          },
+          {
+            indicators: ['Close'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling for Close Price
+          }
+        ]
+      },
+      'ATR Expansion': {
+        panels: [
+          {
+            indicators: ['ATRValue'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+      'ATR Squeeze': {
+        panels: [
+          {
+            indicators: ['ATRValue'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+      'ATR Trend Reversal': {
+        panels: [
+          {
+            indicators: ['ATRValue'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+      'EMA 20': {
+        panels: [
+          {
+            indicators: ['EMA 20'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+
+      'EMA 50': {
+        panels: [
+          {
+            indicators: ['EMA 50'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+
+      'EMA Crossover': {
+        panels: [
+          {
+            indicators: ['EMA 20', 'EMA 50'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+      'EMA Price Crossover': {
+        panels: [
+          {
+            indicators: ['EMA 20', 'Close'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+      'Triple EMA': {
+        panels: [
+          {
+            indicators: ['EMA 5', 'EMA 20', 'EMA 50'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+      'ADX': {
+        panels: [
+          {
+            indicators: ['ADX_Indicator'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          }
+        ]
+      },
+
+      'ADX + DI Crossover': {
+        panels: [
+          {
+            indicators: ['ADX_Indicator', 'PLUS_DI', 'MINUS_DI'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          }
+        ]
+      },
+      'ADX Divergence': {
+        panels: [
+          {
+            indicators: ['ADX_Indicator'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          },
+          {
+            indicators: ['Close'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scale for price
+          }
+        ]
+      },
+      'ADX Slope': {
+        panels: [
+          {
+            indicators: ['ADX_Indicator'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          }
+        ]
+      },
+      'ADX Breakout': {
+        panels: [
+          {
+            indicators: ['ADX_Indicator'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {
+              min: 0,
+              max: 100
+            }
+          },
+          {
+            indicators: ['Close'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scale for price
+          }
+        ]
+      },
+      'Fibonacci Retracement Bounce': {
+        panels: [
+          {
+            indicators: ['Candlestick'],
+            showAnnotations: true,
+            levels: [
+              { value: 0.382, color: '#00008B', label: '38.2%' },
+              { value: 0.5, color: '#FF0000', label: '50%' },
+              { value: 0.618, color: '#FF5722', label: '61.8%' }
+            ],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+
+      'Fibonacci Breakout': {
+        panels: [
+          {
+            indicators: ['Candlestick'],
+            showAnnotations: true,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+
+      'Fibonacci Confluence': {
+        panels: [
+          {
+            indicators: ['Close', 'EMA9'],
+            showAnnotations: true,
+            levels: [],  // dynamically filled
+            yaxisconfig: {}  // auto-scaling
+          }
+        ]
+      },
+
+      'Golden Pocket Reversal': {
+        panels: [
+          {
+            indicators: ['Candlestick'],
+            showAnnotations: true,
+            levels: [
+              { value: fetchData.FIB_61_8, color: '#FF0000', label: '61.8%' },
+              { value: fetchData.FIB_65, color: '#FFC107', label: '65%' }
+            ],
+            yaxisconfig: {}  // auto-scaling
+          }
+        ]
+      },
+
+      'BB Squeeze': {
+        panels: [
+          {
+            indicators: ['Close', 'UpperBB', 'LowerBB'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+
+      'BB Breakout': {
+        panels: [
+          {
+            indicators: ['Close', 'UpperBB', 'LowerBB'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+
+
+      'BB Reversal': {
+        panels: [
+          {
+            indicators: ['Close', 'UpperBB', 'LowerBB'],
+            showAnnotations: false,
+            levels: [],
+            yaxisconfig: {} // auto-scaling
+          }
+        ]
+      },
+
+
+
+    };
+
+    const config = strategyConfig[strategyName];
+
+    if (strategyName === 'Fibonacci Breakout') {
+      config.panels[0].levels = [
+        { value: fetchData.FIB_61_8, color: '#FF5722', label: '61.8% Breakout' }
+      ];
+    }
+
+    // For Fibonacci Retracement Bounce, convert levels to price-based annotations
+    if (strategyName === 'Fibonacci Retracement Bounce') {
+      config.panels[0].levels = [
+        { value: fetchData.FIB_38_2, color: '#00008B', label: '38.2%' },
+        { value: fetchData.FIB_50, color: '#FF0000', label: '50%' },
+        { value: fetchData.FIB_61_8, color: '#FF5722', label: '61.8%' }
+      ];
+    }
+
+    if (strategyName === 'Fibonacci Confluence') {
+      config.panels[0].levels = [
+        { value: fetchData.FIB_61_8, color: '#FF5722', label: '61.8% Confluence' }
+      ];
+    }
+
+
+    const chartOptionsArray = config.panels.map((panel: any) => {
+      const referenceData = fetchData[panel.indicators[0]];
+      const categories = Object.keys(referenceData);
+
+      const series = panel.indicators.map((indicator: string) => {
+        const indicatorData = fetchData[indicator];
+
+        if (indicator === 'Candlestick') {
+          return {
+            name: 'Candlestick',
+            type: 'candlestick',
+            data: indicatorData  // already in [{x, y: [o,h,l,c]}] format
+          };
+        }
+
+        return {
+          name: indicator,
+          type: indicator === 'MACDHistogram' ? 'bar' : 'line',
+          data: indicatorData ? Object.entries(indicatorData).map(([x, y]) => ({ x, y })) : []
+        };
+      });
+
+      const annotations = panel.showAnnotations ? {
+        yaxis: panel.levels.map((level: any) => ({
+          y: level.value,
+          borderColor: level.color,
+          label: {
+            borderColor: level.color,
+            style: {
+              color: '#fff',
+              background: level.color
+            },
+            text: level.label
+          }
+        }))
+      } : {};
+
+      return {
+        series: series,
+        chart: {
+          type: 'line',
+          height: 500,
+          width: 1300
+        },
+        xaxis: {
+          categories: categories
+        },
+        yaxis: panel.yaxisconfig || {},
+        stroke: {
+          curve: 'smooth',
+          width: 2
+        },
+        annotations: annotations
+      };
+    });
+
+    return chartOptionsArray;
+  }
+
+
+
+}

src/app/app-module.ts

@@ -0,0 +1,49 @@
+import { NgModule, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing-module';
+import { App } from './app';
+import { Homepage } from './homepage/homepage';
+import { RouterModule, Routes } from '@angular/router';
+
+
+import { CommonModule } from '@angular/common';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import {  HttpClientModule } from '@angular/common/http';
+
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';     // Import mat-form-field module
+import { MatInputModule } from '@angular/material/input';
+            // Import mat-input module
+
+
+@NgModule({
+  declarations: [
+    App,
+    Homepage,
+   
+   
+    
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    CommonModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule
+    
+    //RouterModule.forRoot(routes, {
+    //  scrollPositionRestoration: 'enabled',
+    //  anchorScrolling: 'enabled',
+    //  bindToComponentInputs: true
+    //})
+  ],
+  providers: [
+    provideBrowserGlobalErrorListeners()
+  ],
+  bootstrap: [App]
+})
+export class AppModule { }

src/app/app-routing-module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MarketSelectComponent } from './marketselect/marketselect';
+import { Homepage } from './homepage/homepage';
+import { Analysispage } from './analysispage/analysispage';
+import { Chatbot } from './chatbot/chatbot';
+import { ToolspageComponent } from './toolspage/toolspage.component';
+import { Screenerpage } from './screenerpage/screenerpage';
+
+const routes: Routes = [
+  { path: '', component: Homepage },
+  { path: 'home', component: Homepage },
+  { path: 'tools', component: MarketSelectComponent },
+  { path: 'analysepage', component: Analysispage },
+  { path: 'chatbot', component: Chatbot },
+  { path: 'screener', component: Screenerpage },
+  { path: 'marketselect', component: ToolspageComponent },
+  { path: '**', redirectTo: '' }
+];
+
+
+
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.html

@@ -0,0 +1,19 @@
+<div class="navigation-container">
+  <div class="nav-content">
+    <img src="logo.png" alt="PyTrade Logo" class="logo-img">
+    <h1 class="logo-title">PY-TRADE</h1>
+    <div style="display: flex; gap: 2vw; margin-left: 47vw;align-self:flex-start;">
+      <p class="menu-item">Markets</p>
+      <p class="menu-item">Community</p>
+      <p class="menu-item">AI Assistant</p>
+
+    </div>
+
+    <div class="user-avatar">
+      <img src="https://cdn-icons-png.flaticon.com/512/847/847969.png" alt="User Image">
+    </div>
+  </div>
+
+</div>
+
+<router-outlet></router-outlet>

src/app/app.scss

@@ -0,0 +1,52 @@
+// Navigation Styles
+.navigation-container {
+  background: linear-gradient(180deg, #0f0f0f, #0f0f0f00);
+  position: fixed;
+  width: 98%;
+  height: 10vw;
+  padding: 1vw;
+  .nav-content
+
+{
+  display: flex;
+  gap: 2vw;
+  align-items: center;
+  justify-content: space-between;
+  .logo-img
+
+{
+  width: 6vw;
+  height: 6vw;
+  border-radius: 50%;
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
+}
+
+.logo-title {
+  font-size: 3vw;
+}
+
+.menu-item {
+  font-size: 1vw;
+}
+
+.user-avatar {
+  width: 2.5vw; /* Size of the avatar */
+  height: 2.5vw;
+  border-radius: 50%; /* Makes it circular */
+  overflow: hidden; /* Ensures image stays within circle */
+  display: inline-block;
+  position: relative;
+  background: linear-gradient(135deg, #38bdf8, #712d74); /* Gradient border */
+  padding: 3px; /* Space for gradient border */
+  align-self: flex-start
+}
+
+  .user-avatar img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%; /* Keep image circular */
+    object-fit: cover; /* Cover the container without distortion */
+  }
+
+}
+}

src/app/app.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterModule.forRoot([])
+      ],
+      declarations: [
+        App
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, Pytrade');
+  });
+});

src/app/app.ts

@@ -0,0 +1,11 @@
+import { Component, signal } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.html',
+  standalone: false,
+  styleUrl: './app.scss'
+})
+export class App {
+  protected readonly title = signal('Pytrade');
+}

src/app/chatbot/chatbot.html

@@ -0,0 +1,10 @@
+<div class="chatbot-container">
+  <div class="chatbox">
+    <div *ngFor="let message of messages" class="message">
+      <div class="user-message"><strong>User:</strong> {{ message.user }}</div>
+      <div class="bot-response"><strong>Bot:</strong> {{ message.bot }}</div>
+    </div>
+  </div>
+  <input [(ngModel)]="userQuestion" placeholder="Ask a question..." />
+  <button (click)="getChatbotResponse()">Ask</button>
+</div>

src/app/chatbot/chatbot.scss

@@ -0,0 +1,133 @@
+/* General Container */
+.chatbot-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 15px;
+  background-color: #f4f7fc;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  font-family: 'Arial', sans-serif;
+}
+
+/* Chatbox Container */
+.chatbox {
+  max-height: 300px;
+  overflow-y: auto;
+  margin-bottom: 20px;
+  padding-right: 10px;
+  border-bottom: 2px solid #dcdfe6;
+  padding-left: 15px;
+  background: #fff;
+  border-radius: 10px;
+}
+
+/* Individual Message Styling */
+.message {
+  margin-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.user-message {
+  background-color: #e0f7fa;
+  padding: 8px 12px;
+  border-radius: 10px;
+  margin-bottom: 5px;
+  max-width: 80%;
+  align-self: flex-start;
+  font-size: 14px;
+  color: #00796b;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  animation: fadeIn 0.5s ease;
+}
+
+.bot-response {
+  background-color: #e8f5e9;
+  padding: 8px 12px;
+  border-radius: 10px;
+  max-width: 80%;
+  align-self: flex-end;
+  font-size: 14px;
+  color: #388e3c;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  animation: fadeIn 0.5s ease;
+}
+
+/* Input Box Styling */
+input {
+  width: 80%;
+  padding: 12px;
+  font-size: 14px;
+  border-radius: 25px;
+  border: 1px solid #ccc;
+  margin-right: 10px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+button {
+  padding: 12px;
+  font-size: 14px;
+  background-color: #00796b;
+  color: white;
+  border: none;
+  border-radius: 25px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+button:hover {
+  background-color: #004d40;
+  transform: scale(1.05);
+}
+
+button:focus {
+  outline: none;
+}
+
+/* Scrollbar Styling */
+.chatbox::-webkit-scrollbar {
+  width: 8px;
+}
+
+.chatbox::-webkit-scrollbar-thumb {
+  background-color: #00796b;
+  border-radius: 10px;
+}
+
+.chatbox::-webkit-scrollbar-track {
+  background-color: #f4f7fc;
+}
+
+/* Loading Spinner */
+.loader {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #00796b;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  animation: spin 1s linear infinite;
+  margin: 0 auto;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/app/chatbot/chatbot.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Chatbot } from './chatbot';
+
+describe('Chatbot', () => {
+  let component: Chatbot;
+  let fixture: ComponentFixture<Chatbot>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [Chatbot]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Chatbot);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chatbot/chatbot.ts

@@ -0,0 +1,49 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import axios from 'axios';
+
+@Component({
+  selector: 'app-chatbot',
+  standalone: true,
+  imports: [FormsModule],
+  templateUrl: './chatbot.html',
+  styleUrl: './chatbot.scss'
+})
+export class Chatbot {
+  userQuestion: string = '';   // Holds the user's question
+  chatbotAnswer: string = '';  // Holds the chatbot's answer
+
+  // Define messages array to store conversation
+  messages: { user: string, bot: string }[] = [];  // This is the missing property
+
+  // Handle user input and make API call to backend
+  async getChatbotResponse() {
+    if (this.userQuestion.trim()) {
+      // Add user's question to the messages array
+      this.messages.push({ user: this.userQuestion, bot: '...' });
+
+      try {
+        // Make API call to backend for the answer
+        const response = await axios.post('http://127.0.0.1:5000/ask', {
+          question: this.userQuestion
+        });
+
+        // Get the answer from the response and update the chatbot response
+        this.chatbotAnswer = response.data.answer;
+
+        // Add the chatbot's answer to the messages array
+        this.messages[this.messages.length - 1].bot = this.chatbotAnswer;
+
+        // Clear the user question input
+        this.userQuestion = '';
+
+      } catch (error) {
+        console.error('Error while getting response from chatbot API:', error);
+        // Handle error gracefully by adding an error message in the conversation
+        this.messages.push({ user: this.userQuestion, bot: 'Sorry, I am unable to get an answer right now.' });
+        this.userQuestion = '';
+      }
+    }
+  }
+}

src/app/homepage/homepage.html

@@ -0,0 +1,149 @@
+<!--Fixed Navigation-->
+
+<!--<div class="navigation-container">
+  <div class="nav-content">
+    <img src="logo.png" alt="PyTrade Logo" class="logo-img">
+    <h1 class="logo-title">PY-TRADE</h1>
+    <div style="display: flex; gap: 2vw; margin-left: 47vw;align-self:flex-start;">
+      <p class="menu-item">Markets</p>
+      <p class="menu-item">Community</p>
+      <p class="menu-item">AI Assistant</p>
+
+    </div> 
+
+    <div class="user-avatar">
+      <img src="https://cdn-icons-png.flaticon.com/512/847/847969.png" alt="User Image">
+    </div>
+  </div>
+
+</div>-->
+
+<!--Landing Page-->
+<div class="homepage-container">
+
+  <h1 class="py-title">Unlock the Future of Trading</h1>
+  <p class="py-quote">Empower your decisions with data, and turn insights into profitable action.</p>
+  <button class="get-started-btn" routerLink="/marketselect">
+    Get Started
+  </button>
+</div>
+
+
+<!--Features container-->
+<div class="key-feature-container">
+  <h1>Key Features</h1>
+
+  <div class="features">
+    <div class="feature-card">
+      <span>📊</span>
+      <div class="feature-title">Technical Analysis</div>
+      <div class="feature-detail">
+        Technical analysis helps you make informed decisions by analyzing historical market data like price and volume.
+        It includes charts, indicators, and price patterns to forecast market movements.
+      </div>
+    </div>
+
+    <div class="feature-card">
+      <span>💹</span>
+      <div class="feature-title">Fundamental Analysis</div>
+      <div class="feature-detail">
+        Fundamental analysis helps evaluate the financial health of a company by analyzing financial statements,
+        earnings, revenue, and market conditions. It assists in determining the intrinsic value of stocks for long-term investments.
+      </div>
+    </div>
+
+    <div class="feature-card">
+      <span>📰</span>
+      <div class="feature-title">Market News Sentiment Analysis</div>
+      <div class="feature-detail">
+        Market news sentiment analysis evaluates the mood and sentiment of market participants by analyzing news,
+        social media, and other relevant information. It helps predict potential market reactions to news events.
+      </div>
+    </div>
+
+    <div class="feature-card">
+      <span>🔮</span>
+      <div class="feature-title">Predictions with LSTM</div>
+      <div class="feature-detail">
+        Long Short-Term Memory (LSTM) models predict future price movements using historical market data.
+        These models are highly effective in capturing patterns and trends for more accurate predictions in volatile markets.
+      </div>
+    </div>
+
+    <div class="feature-card">
+      <span>⚡</span>
+      <div class="feature-title">Live Data</div>
+      <div class="feature-detail">
+        Access to live market data ensures you stay updated with the latest prices, volumes, and other important metrics
+        in real-time, enabling you to make quick, informed decisions.
+      </div>
+    </div>
+
+    <div class="feature-card">
+      <span>💡</span>
+      <div class="feature-title">Trade Recommendations</div>
+      <div class="feature-detail">
+        Get personalized trade recommendations based on your trading strategy and market analysis.
+        These recommendations are powered by advanced algorithms that analyze historical and real-time data.
+      </div>
+    </div>
+
+    <div class="feature-card">
+      <span>📉</span>
+      <div class="feature-title">Chart Analysis</div>
+      <div class="feature-detail">
+        Analyze various types of charts like candlestick, line, and bar charts to identify trends, support, resistance levels,
+        and chart patterns. This helps in making better trading decisions.
+      </div>
+    </div>
+
+    <div class="feature-card">
+      <span>🔔</span>
+      <div class="feature-title">Smart Alerts</div>
+      <div class="feature-detail">
+        Set smart alerts to get notified about market events, price movements, or specific conditions,
+        so you never miss important trading opportunities.
+      </div>
+    </div>
+
+    <div class="feature-card">
+      <span>🤖</span>
+      <div class="feature-title">AI Assistant</div>
+      <div class="feature-detail">
+        The AI Assistant provides insights, analyzes patterns, and helps you make data-driven decisions with the power of artificial intelligence,
+        making trading more efficient and less stressful.
+      </div>
+    </div>
+  </div>
+
+</div>
+
+
+
+<footer class="footer">
+  <div class="footer-content">
+    <div class="footer-left">
+      <p>&copy; 2025 PyTrade. All rights reserved.</p>
+    </div>
+    <div class="footer-center">
+      <ul class="footer-links">
+        <li><a href="/about">About Us</a></li>
+        <li><a href="/contact">Contact</a></li>
+        <li><a href="/privacy">Privacy Policy</a></li>
+        <li><a href="/terms">Terms & Conditions</a></li>
+      </ul>
+    </div>
+    <div class="footer-right">
+      <div class="social-media">
+        <a href="https://facebook.com" target="_blank" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
+        <a href="https://twitter.com" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+        <a href="https://linkedin.com" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
+        <a href="https://instagram.com" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+
+

src/app/homepage/homepage.scss

@@ -0,0 +1,217 @@
+// Navigation Styles
+.navigation-container {
+  background: linear-gradient(180deg, #0f0f0f, #0f0f0f00);
+  position: fixed;
+  width: 98%;
+  height: 10vw;
+  padding: 1vw;
+
+  .nav-content {
+    display: flex;
+    gap: 2vw;
+    align-items: center;
+    justify-content: space-between;
+
+    .logo-img {
+      width: 6vw;
+      height: 6vw;
+      border-radius: 50%;
+      box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
+    }
+
+    .logo-title {
+      font-size: 3vw;
+    }
+
+    .menu-item {
+      font-size: 1vw;
+    }
+
+    .user-avatar {
+      width: 2.5vw; /* Size of the avatar */
+      height: 2.5vw;
+      border-radius: 50%; /* Makes it circular */
+      overflow: hidden; /* Ensures image stays within circle */
+      display: inline-block;
+      position: relative;
+      background: linear-gradient(135deg, #38bdf8, #712d74); /* Gradient border */
+      padding: 3px; /* Space for gradient border */
+      align-self:flex-start
+    }
+
+    .user-avatar img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%; /* Keep image circular */
+      object-fit: cover; /* Cover the container without distortion */
+    }
+  }
+}
+
+// Homepage Styles
+.homepage-container {
+  height: 48vw;
+  background: url('../../../public/final.png') no-repeat;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .py-title {
+    font-size: 4vw;
+    color: #fff;
+  }
+
+  .py-quote {
+    font-size: 1.5vw;
+    color: #fff;
+  }
+
+  .get-started-btn {
+    background: linear-gradient(90deg, #5af4fb, #712d74, #f134d0);
+    color: #fff;
+    padding: 10px 18px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 1vw;
+    width: 8vw;
+    height: 3vw;
+    transition: all 0.3s ease-in-out;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+}
+
+// Key Features Section
+.key-feature-container {
+  background: url('../../../public/bgkey.png') no-repeat;
+  background-size: cover;
+  padding-left: 1vw;
+  text-align: center;
+  margin-top: -2vw;
+  padding-top: 2vw;
+  padding-bottom: 2vw;
+
+  h1 {
+    color: #fff;
+    font-size: 2vw;
+  }
+
+  .features {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 40px;
+    max-width: 75vw;
+    margin: auto;
+
+    .feature-card {
+      background: #334155;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+      transition: transform 0.2s ease-in-out;
+      cursor: pointer;
+      color: #fff;
+      font-weight: bold;
+      font-size: 1vw;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 1vw;
+      height: 13vw;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+
+      span {
+        font-size: 2rem;
+      }
+
+      .feature-title {
+        color: #38bdf8;
+      }
+
+      .feature-detail {
+        padding: 1vw;
+        font-size: 0.8vw;
+      }
+    }
+  }
+}
+
+// Footer Styles
+.footer {
+  background: linear-gradient(90deg, #38bdf8, #712d74); /* Gradient from blue to purple */
+  color: white;
+  padding: 20px 0;
+  text-align: center;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.footer-left p {
+  font-size: 1rem;
+  margin: 0;
+}
+
+.footer-center .footer-links {
+  list-style: none;
+  padding: 0;
+}
+
+.footer-center .footer-links li {
+  display: inline-block;
+  margin: 0 15px;
+}
+
+.footer-center .footer-links li a {
+  color: white;
+  text-decoration: none;
+  font-size: 1rem;
+  transition: color 0.3s ease;
+}
+
+.footer-center .footer-links li a:hover {
+  color: #f134d0; /* Accent color on hover */
+}
+
+.footer-right .social-media a {
+  color: white;
+  font-size: 1.5rem;
+  margin: 0 10px;
+  transition: color 0.3s ease;
+}
+
+.footer-right .social-media a:hover {
+  color: #f134d0; /* Accent color on hover */
+}
+
+@media screen and (max-width: 768px) {
+  .footer-content {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .footer-center {
+    margin-top: 20px;
+  }
+
+  .footer-left,
+  .footer-right {
+    margin-bottom: 20px;
+  }
+}
+
+

src/app/homepage/homepage.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Homepage } from './homepage';
+
+describe('Homepage', () => {
+  let component: Homepage;
+  let fixture: ComponentFixture<Homepage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [Homepage]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Homepage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/homepage/homepage.ts

@@ -0,0 +1,34 @@
+import { Component, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'app-homepage',
+  standalone: false,
+  templateUrl: './homepage.html',
+  styleUrl: './homepage.scss'
+})
+export class Homepage {
+
+  constructor(private el: ElementRef) { }
+
+
+  ngAfterViewInit(): void {
+    const blocks: NodeListOf<HTMLElement> = this.el.nativeElement.querySelectorAll('.reveal');
+
+    if (!('IntersectionObserver' in window)) {
+      blocks.forEach(b => b.classList.add('in-view'));
+      return;
+    }
+
+    const io = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.remove('in-view');
+          void (entry.target as HTMLElement).offsetWidth; // force reflow
+          entry.target.classList.add('in-view');
+        }
+      });
+    }, { threshold: 0.3 });
+
+    blocks.forEach(b => io.observe(b));
+  }
+}

src/app/marketselect/market.service.ts

@@ -0,0 +1,24 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { of } from 'rxjs';
+@Injectable({
+  providedIn: 'root'
+})
+export class MarketService {
+
+  private pyCompaniesApiUrl = 'http://127.0.0.1:5000/getcompanies';
+  private pyAnalyseApiUrl = 'http://127.0.0.1:5000/analysestock';  
+  constructor(private http: HttpClient) { }
+
+  getCompanies(): Observable<any> {    
+    return this.http.get<any>(this.pyCompaniesApiUrl);
+  }
+
+  getAnalyseResult(ticker: string[]): Observable<any> {
+    console.log(ticker)
+    return this.http.post<any>(this.pyAnalyseApiUrl, { ticker });
+  }
+
+  
+}

src/app/marketselect/marketselect.html

@@ -0,0 +1,78 @@
+<div class="page">
+  <header class="header">
+    <div class="title">Market Selection</div>
+    <div class="subtitle">Choose Country → Exchange → Market, then pick Companies</div>
+  </header>
+
+  <section class="grid">
+    <!-- Filters -->
+    <div class="card">
+      <h3>Filters</h3>
+
+      <form [formGroup]="form" class="form">
+        <label>🌍 Country</label>
+        <select class="select" formControlName="country">
+          <option value="">-- Select Country --</option>
+          <option value="USA">USA</option>
+          <option value="India">India</option>
+          <option value="USA">Sweden</option>
+          <option value="USA">Germany</option>
+        </select>
+
+        <label>🏛️ Exchange</label>
+        <select class="select" formControlName="exchange" [disabled]="!exchanges.length">
+          <option value="">-- Select Exchange --</option>
+          <option *ngFor="let ex of exchanges" [value]="ex">{{ ex }}</option>
+        </select>
+
+        <label>📊 Market</label>
+        <select class="select" formControlName="market" [disabled]="!markets.length">
+          <option value="">-- Select Market --</option>
+          <option *ngFor="let m of markets" [value]="m">{{ m }}</option>
+        </select>
+
+        <button type="button" class="btn-primary" (click)="submit()">Run Analysis</button>
+      </form>
+    </div>
+
+    <!-- Companies -->
+    <div class="card">
+      <div class="companies-head">
+        <h3>Companies</h3>
+        <div class="badge">{{ (form.value.companies || []).length }}</div>
+      </div>
+
+      <div class="hint" *ngIf="!form.value.market">
+        Select a market to view the companies.
+      </div>
+
+      <div class="toolbar" *ngIf="form.value.market && companies.length">
+        <button class="btn-ghost" (click)="selectAll()">Select All</button>
+        <button class="btn-ghost" (click)="clearAll()" [disabled]="!(form.value.companies || []).length">Clear</button>
+      </div>
+
+      <div class="company-list" *ngIf="form.value.market && companies.length">
+        <label class="company"
+               *ngFor="let c of companies; trackBy: trackByName"
+               (click)="toggleCompany(c)"
+               [class.active]="isSelected(c)">
+          <span class="tick" aria-hidden="true">✔</span>
+          <span class="name">{{ c }}</span>
+        </label>
+      </div>
+
+      <div class="empty" *ngIf="form.value.market && !companies.length">
+        No companies available for this market.
+      </div>
+    </div>
+  </section>
+</div>
+
+
+<div class="overlay" *ngIf="loading">
+  <mat-spinner diameter="50"></mat-spinner>
+  <div class="hint">Processing…</div>
+</div>
+
+
+

src/app/marketselect/marketselect.scss

@@ -0,0 +1,201 @@
+:host {
+  display: block;
+}
+
+.page {
+  min-height: 100vh;
+  padding: 32px 24px 48px;
+  background: linear-gradient(135deg, #0f172a, #1e293b);
+  color: #e2e8f0;
+  font-family: Arial, sans-serif;
+}
+
+.header {
+  max-width: 1200px;
+  margin: 0 auto 24px;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  color: #38bdf8;
+}
+
+.subtitle {
+  color: #94a3b8;
+  margin-top: 4px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1.3fr;
+  gap: 28px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.card {
+  background: #1e293b;
+  border-radius: 14px;
+  box-shadow: 0 8px 20px rgba(0,0,0,.35);
+  padding: 22px;
+}
+
+h3 {
+  margin: 0 0 12px;
+  color: #e2e8f0;
+}
+
+.form label {
+  display: block;
+  margin: 14px 0 6px;
+  font-weight: 600;
+  color: #cbd5e1;
+}
+
+.select {
+  width: 100%;
+  background: #0f172a;
+  color: #e2e8f0;
+  border: 1px solid #334155;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color .2s;
+}
+
+.select:focus {
+  border-color: #38bdf8;
+}
+
+.btn-primary {
+  margin-top: 18px;
+  width: 100%;
+  padding: 12px 14px;
+  font-size: 15px;
+  font-weight: 700;
+  background: linear-gradient(90deg, #4f46e5, #9333ea, #22c55e);
+  color: #fff;
+  border: 0;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: opacity .15s;
+}
+
+.btn-primary:hover {
+  opacity: .9;
+}
+
+.companies-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.badge {
+  background: #0ea5e9;
+  color: #0b1220;
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-weight: 800;
+  font-size: 12px;
+}
+
+.hint {
+  margin-top: 8px;
+  color: #94a3b8;
+  font-size: 13px;
+}
+
+.toolbar {
+  display: flex;
+  gap: 8px;
+  margin: 10px 0 8px;
+}
+
+.btn-ghost {
+  background: #0f172a;
+  color: #e2e8f0;
+  border: 1px solid #334155;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.btn-ghost:hover {
+  border-color: #38bdf8;
+}
+
+.company-list {
+  margin-top: 8px;
+  max-height: 320px;
+  overflow: auto;
+  border: 1px solid #334155;
+  border-radius: 10px;
+  padding: 8px;
+  background: #0f172a;
+}
+
+.company {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background .15s, border-color .15s;
+  user-select: none;
+}
+
+.company:hover {
+  background: #0b1220;
+  border-color: #1f2a44;
+}
+
+.company.active {
+  background: #0b1220;
+  border-color: #22c55e;
+}
+
+.company .tick {
+  opacity: 0;
+  font-size: 14px;
+  width: 16px;
+}
+
+.company.active .tick {
+  opacity: 1;
+}
+
+.company .name {
+  flex: 1;
+}
+
+.empty {
+  padding: 14px;
+  color: #94a3b8;
+  text-align: center;
+}
+
+@media (max-width: 960px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
+.overlay {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgba(0,0,0,.45);
+  z-index: 1000;
+  color: #fff;
+  text-align: center;
+}
+
+.hint {
+  margin-top: 12px;
+}

src/app/marketselect/marketselect.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Marketselect } from './marketselect';
+
+describe('Marketselect', () => {
+  let component: Marketselect;
+  let fixture: ComponentFixture<Marketselect>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [Marketselect]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Marketselect);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/marketselect/marketselect.ts

@@ -0,0 +1,173 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MarketService } from './market.service';
+import { Router } from '@angular/router';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { finalize } from 'rxjs';
+
+type CountryKey = 'India' | 'USA';
+type ExchangeKey = 'NSE' | 'BSE' | 'NYSE' | 'NASDAQ';
+
+interface ExchangeData {
+  markets: string[];
+  marketCompanies: Record<string, string[]>; // market -> companies
+}
+
+const DATA: Record<CountryKey, Partial<Record<ExchangeKey, ExchangeData>>> = {
+  India: {
+    NSE: {
+      markets: ['Nifty50', 'Nifty100', 'Midcap', 'BankNifty'],
+      marketCompanies: {
+        Nifty50: ['Reliance Industries', 'TCS', 'Infosys', 'HDFC Bank', 'ICICI Bank', 'ITC', 'Bharti Airtel'],
+        Nifty100: ['L&T', 'Axis Bank', 'Kotak Mahindra Bank', 'Hindustan Unilever', 'Bajaj Finance', 'Wipro'],
+        Midcap: ['Crompton Greaves', 'Dixon Technologies', 'Deepak Nitrite', 'Astral', 'AU Small Finance Bank'],
+        BankNifty: ['HDFC Bank', 'ICICI Bank', 'Axis Bank', 'Kotak Mahindra Bank', 'SBI']
+      }
+    },
+    BSE: {
+      markets: ['Sensex', 'BSE 100', 'BSE 200', 'Midcap'],
+      marketCompanies: {
+        Sensex: ['Reliance Industries', 'TCS', 'Infosys', 'HDFC Bank', 'HCLTech', 'Tata Motors', 'NTPC'],
+        'BSE 100': ['Mahindra & Mahindra', 'UltraTech Cement', 'Power Grid', 'Sun Pharma', 'Maruti Suzuki'],
+        'BSE 200': ['Pidilite', 'Dabur', 'Divi’s Labs', 'Britannia', 'Grasim'],
+        Midcap: ['Voltas', 'BEL', 'Tata Power', 'Tata Elxsi', 'UBL']
+      }
+    }
+  },
+  USA: {
+    NYSE: {
+      markets: ['S&P 500', 'Dow Jones', 'Midcap', 'Sector ETFs'],
+      marketCompanies: {
+        'S&P 500': ['Apple', 'Microsoft', 'NVIDIA', 'Amazon', 'Meta Platforms', 'Alphabet (A)'],
+        'Dow Jones': ['Coca-Cola', 'Johnson & Johnson', 'Walmart', 'Chevron', 'Visa'],
+        Midcap: ['Ball Corp', 'Keysight', 'Fortinet', 'CrowdStrike', 'AMD'],
+        'Sector ETFs': ['XLE', 'XLK', 'XLF', 'XLV', 'XLY']
+      }
+    },
+    NASDAQ: {
+      markets: ['NASDAQ 100', 'Growth', 'Midcap'],
+      marketCompanies: {
+        'NASDAQ 100': ['Apple', 'Microsoft', 'NVIDIA', 'Amazon', 'Meta Platforms', 'Tesla', 'Adobe', 'Netflix'],
+        Growth: ['Snowflake', 'Datadog', 'ServiceNow', 'MongoDB', 'Cloudflare'],
+        Midcap: ['Zscaler', 'Okta', 'Trade Desk', 'Marvell Technology', 'On Semiconductor']
+      }
+    }
+  }
+};
+
+@Component({
+  selector: 'app-marketselect',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, MatProgressSpinnerModule],
+  templateUrl: './marketselect.html',
+  styleUrls: ['./marketselect.scss']
+})
+export class MarketSelectComponent implements OnInit {
+  form: FormGroup;
+  loading = false;
+  exchanges: ExchangeKey[] = [];
+  markets: string[] = [];
+  companies: string[] = []; // populated only after market selection
+  selectedCompanies: string[] = [];
+  constructor(private fb: FormBuilder, private marketService: MarketService, private router:Router) {
+    this.form = this.fb.group({
+      country: new FormControl<CountryKey | ''>(''),
+      exchange: new FormControl<ExchangeKey | ''>(''),
+      market: new FormControl<string | ''>(''),
+      companies: this.fb.control<string[]>([])
+    });
+  }
+
+  ngOnInit(): void {
+
+    this.marketService.getCompanies()      
+      .subscribe({
+        next: res => {        
+          console.log(res);         
+        },
+        error: err => {
+          console.error('API error:', err);          
+        }
+      });
+
+    // Country change: reset and load exchanges
+    this.form.get('country')!.valueChanges.subscribe((country) => {
+      this.form.patchValue({ exchange: '', market: '', companies: [] }, { emitEvent: false });
+      this.exchanges = this.getExchanges(country as CountryKey | '');
+      this.markets = [];
+      this.companies = [];
+    });
+
+    // Exchange change: reset and load markets
+    this.form.get('exchange')!.valueChanges.subscribe((exchange) => {
+      const country = this.form.value.country as CountryKey | '';
+      this.form.patchValue({ market: '', companies: [] }, { emitEvent: false });
+      this.markets = this.getMarkets(country, exchange as ExchangeKey | '');
+      this.companies = [];
+    });
+
+    // Market change: load companies for that market
+    this.form.get('market')!.valueChanges.subscribe((market) => {
+      const country = this.form.value.country as CountryKey | '';
+      const exchange = this.form.value.exchange as ExchangeKey | '';
+      this.form.patchValue({ companies: [] }, { emitEvent: false });
+      this.companies = this.getCompanies(country, exchange, (market || '') as string);
+    });
+  }
+
+  // Helpers
+  private getExchanges(country: CountryKey | ''): ExchangeKey[] {
+    if (!country) return [];
+    return Object.keys(DATA[country] || {}) as ExchangeKey[];
+  }
+
+  private getMarkets(country: CountryKey | '', exchange: ExchangeKey | ''): string[] {
+    if (!country || !exchange) return [];
+    return DATA[country]?.[exchange]?.markets ?? [];
+  }
+
+  private getCompanies(country: CountryKey | '', exchange: ExchangeKey | '', market: string): string[] {
+    if (!country || !exchange || !market) return [];
+    return DATA[country]?.[exchange]?.marketCompanies?.[market] ?? [];
+  }
+
+  // Company selection
+  isSelected(name: string): boolean {
+    const selected = this.form.value.companies ?? [];
+    return selected.includes(name);
+  }
+  toggleCompany(name: string): void {
+    const set = new Set(this.form.value.companies ?? []);
+    set.has(name) ? set.delete(name) : set.add(name);
+    this.form.patchValue({ companies: Array.from(set) });
+  }
+  selectAll(): void {
+    this.form.patchValue({ companies: this.companies.slice() });
+  }
+  clearAll(): void {
+    this.form.patchValue({ companies: [] });
+  }
+
+  submit(): void {
+    this.loading = true;
+    this.selectedCompanies = ['TCS.NS', 'ICICIBANK.NS']
+    this.marketService.getAnalyseResult(this.selectedCompanies)
+      .pipe(finalize(() => this.loading = false))
+      .subscribe({
+        next: res => {
+          // navigate AFTER data is returned; pass the value
+          console.log(res);
+          this.router.navigate(['/analysepage'], { state: { result: res } });
+        },
+        error: err => {
+          console.error('API error:', err);
+          // you can add MatSnackBar here if needed
+        }
+      });
+  }
+
+  
+
+  trackByName = (_: number, name: string) => name;
+}

src/app/screenerpage/screenerpage.css

@@ -0,0 +1,83 @@
+body {
+  background-color: #0f172a;
+  color: #e2e8f0;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+}
+
+h1, h2 {
+  text-align: center;
+  color: #38bdf8;
+  margin-bottom: 20px;
+}
+
+.dashboard {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 25px;
+}
+
+.card {
+  background: #1e293b;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
+
+  .card h2 {
+    margin-bottom: 15px;
+    font-size: 1.2rem;
+    color: #38bdf8;
+  }
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+  table th, table td {
+    border-bottom: 1px solid #334155;
+    padding: 8px;
+    text-align: left;
+  }
+
+  table th {
+    color: #38bdf8;
+  }
+
+.big-table {
+  margin-top: 40px;
+  background: #1e293b;
+  padding: 20px;
+  border-radius: 12px;
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  gap: 20px;
+  overflow-y: auto;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  font-size: 0.95em;
+  color: #94a3b8;
+  margin-bottom: -10px;
+  font-size: 16px;
+}
+
+  .breadcrumb a {
+    color: #38bdf8;
+    text-decoration: none;
+    margin-right: 5px;
+  }
+
+  .breadcrumb span {
+    margin: 0 5px;
+  }