all update

.editorconfig

@@ -0,0 +1,16 @@
+# 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
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,44 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+.vs
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
+.vs

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

.vscode/launch.json

@@ -0,0 +1,19 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "edge",
+      "request": "launch",
+      "name": "localhost (Edge)",
+      "url": "http://localhost:51272",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "localhost (Chrome)",
+      "url": "http://localhost:51272",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

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 PyDetect --defaults --skip-install --skip-git `.
+- Update angular.json with port.
+- Create project file (`AngularProject1.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.

Py-Detect.esproj

@@ -0,0 +1,16 @@
+<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\Py-Detect\</BuildOutputFolder>
+  </PropertyGroup>
+  <ItemGroup>
+    <None Remove="postcss.config.js.txt" />
+  </ItemGroup>
+  <ItemGroup>
+    <None Include="Py-Detect.esproj" />
+  </ItemGroup>
+</Project>

Py-Detect.esproj.user

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
+    <DebuggerFlavor>LaunchJsonDebugger</DebuggerFlavor>
+    <LaunchJsonTarget>
+    </LaunchJsonTarget>
+  </PropertyGroup>
+</Project>

Py-Detect.sln

@@ -0,0 +1,27 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.14.36414.22 d17.14
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{54A90642-561A-4BB1-A94E-469ADEE60C69}") = "Py-Detect", "Py-Detect.esproj", "{83D35911-4668-16FC-F96B-AF2EBA027839}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{83D35911-4668-16FC-F96B-AF2EBA027839}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{83D35911-4668-16FC-F96B-AF2EBA027839}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{83D35911-4668-16FC-F96B-AF2EBA027839}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{83D35911-4668-16FC-F96B-AF2EBA027839}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{83D35911-4668-16FC-F96B-AF2EBA027839}.Release|Any CPU.Build.0 = Release|Any CPU
+		{83D35911-4668-16FC-F96B-AF2EBA027839}.Release|Any CPU.Deploy.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {B10E018F-46C2-409C-8CB2-631740B0CB75}
+	EndGlobalSection
+EndGlobal

Py-Detect.vbproj

@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
+    <Platform Condition=" '$(Platform)' == '' ">x86</Platform>
+    <ProjectGuid>{B0E7CDD1-5D44-4320-BCBC-D63ACCC09351}</ProjectGuid>
+    <OutputType>Exe</OutputType>
+    <StartupObject>
+    </StartupObject>
+    <RootNamespace>
+    </RootNamespace>
+    <AssemblyName>ConsoleApplication</AssemblyName>
+    <FileAlignment>512</FileAlignment>
+    <MyType>Console</MyType>
+    <TargetFrameworkVersion>v4.8</TargetFrameworkVersion>
+    <TargetFrameworkProfile>
+    </TargetFrameworkProfile>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|x86' ">
+    <DebugSymbols>true</DebugSymbols>
+    <DebugType>full</DebugType>
+    <DefineDebug>true</DefineDebug>
+    <DefineTrace>true</DefineTrace>
+    <OutputPath>bin\Debug\</OutputPath>
+    <NoWarn>42016,41999,42017,42018,42019,42032,42036,42020,42021,42022</NoWarn>
+    <PlatformTarget>x86</PlatformTarget>
+    <Prefer32Bit>false</Prefer32Bit>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|x86' ">
+    <DebugType>pdbonly</DebugType>
+    <DefineDebug>false</DefineDebug>
+    <DefineTrace>true</DefineTrace>
+    <Optimize>true</Optimize>
+    <OutputPath>bin\Release\</OutputPath>
+    <NoWarn>42016,41999,42017,42018,42019,42032,42036,42020,42021,42022</NoWarn>
+    <PlatformTarget>x86</PlatformTarget>
+    <Prefer32Bit>false</Prefer32Bit>
+  </PropertyGroup>
+  <PropertyGroup>
+    <OptionExplicit>On</OptionExplicit>
+  </PropertyGroup>
+  <PropertyGroup>
+    <OptionCompare>Binary</OptionCompare>
+  </PropertyGroup>
+  <PropertyGroup>
+    <OptionStrict>Off</OptionStrict>
+  </PropertyGroup>
+  <PropertyGroup>
+    <OptionInfer>On</OptionInfer>
+  </PropertyGroup>
+  <ItemGroup>
+    <Reference Include="System" />
+    <Reference Include="System.Data" />
+    <Reference Include="System.Deployment" />
+    <Reference Include="System.Xml" />
+    <Reference Include="System.Core" />
+    <Reference Include="System.Xml.Linq" />
+    <Reference Include="System.Data.DataSetExtensions" />
+  </ItemGroup>
+  <ItemGroup>
+    <Import Include="Microsoft.VisualBasic" />
+    <Import Include="System" />
+    <Import Include="System.Collections" />
+    <Import Include="System.Collections.Generic" />
+    <Import Include="System.Data" />
+    <Import Include="System.Diagnostics" />
+    <Import Include="System.Linq" />
+    <Import Include="System.Xml.Linq" />
+  </ItemGroup>
+  <ItemGroup>
+    <None Include="app.config" />
+  </ItemGroup>
+  <Import Project="$(MSBuildToolsPath)\Microsoft.VisualBasic.Targets" />
+  <ProjectExtensions>
+    <VisualStudio AllowExistingFolder="true" />
+  </ProjectExtensions>
+  <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
+       Other similar extension points exist, see Microsoft.Common.targets.
+  <Target Name="BeforeBuild">
+  </Target>
+  <Target Name="AfterBuild">
+  </Target>
+  -->
+</Project>

angular.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "PyDetect": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/py-detect",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "20kb",
+                  "maximumError": "20kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "PyDetect:build:production"
+            },
+            "development": {
+              "browserTarget": "PyDetect:build:development"
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
+            "port": 51272
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "PyDetect:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": [],
+            "karmaConfig": "karma.conf.js"
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "26ed0fe9-fe22-459c-80d4-3f1e393fedc1"
+  }
+}

app.config

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+
+    <system.diagnostics>
+        <sources>
+            <!-- This section defines the logging configuration for My.Application.Log -->
+            <source name="DefaultSource" switchName="DefaultSwitch">
+                <listeners>
+                    <add name="FileLog"/>
+                    <!-- Uncomment the below section to write to the Application Event Log -->
+                    <!--<add name="EventLog"/>-->
+                </listeners>
+            </source>
+        </sources>
+        <switches>
+            <add name="DefaultSwitch" value="Information"/>
+        </switches>
+        <sharedListeners>
+            <add name="FileLog" type="Microsoft.VisualBasic.Logging.FileLogTraceListener, Microsoft.VisualBasic, Version=8.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a, processorArchitecture=MSIL" initializeData="FileLogWriter"/>
+            <!-- Uncomment the below section and replace APPLICATION_NAME with the name of your application to write to the Application Event Log -->
+            <!--<add name="EventLog" type="System.Diagnostics.EventLogTraceListener" initializeData="APPLICATION_NAME"/> -->
+        </sharedListeners>
+    </system.diagnostics>
+
+<startup><supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.8"/></startup></configuration>

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/AngularProject1.esproj.FileListAbsolute.txt

@@ -0,0 +1,4 @@
+C:\Users\Admin\Desktop\AngularProject1\obj\Debug\AngularProject1.esproj.CoreCompileInputs.cache
+C:\Users\Admin\Desktop\AngularProject1\AngularProject1\obj\Debug\AngularProject1.esproj.CoreCompileInputs.cache
+C:\Users\Admin\Desktop\AngularProject1\PyDetect\obj\Debug\AngularProject1.esproj.CoreCompileInputs.cache
+C:\Users\Admin\Desktop\AngularProject1\Py-Detect\obj\Debug\AngularProject1.esproj.CoreCompileInputs.cache

obj/Debug/Py-Detect.esproj.FileListAbsolute.txt

@@ -0,0 +1 @@
+C:\Users\Admin\Desktop\Py-Detect\obj\Debug\Py-Detect.esproj.CoreCompileInputs.cache

obj/Debug/package.g.props

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project>
+  <PropertyGroup>
+    <PackageJsonName Condition="$(PackageJsonName) == ''">Py-Detect</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>
+    <PackageJsonPrivate Condition="$(PackageJsonPrivate) == ''">true</PackageJsonPrivate>
+    <PackageJsonDependenciesAngularAnimations Condition="$(PackageJsonDependenciesAngularAnimations) == ''">^16.1.0</PackageJsonDependenciesAngularAnimations>
+    <PackageJsonDependenciesAngularCommon Condition="$(PackageJsonDependenciesAngularCommon) == ''">^16.1.0</PackageJsonDependenciesAngularCommon>
+    <PackageJsonDependenciesAngularCompiler Condition="$(PackageJsonDependenciesAngularCompiler) == ''">^16.1.0</PackageJsonDependenciesAngularCompiler>
+    <PackageJsonDependenciesAngularCore Condition="$(PackageJsonDependenciesAngularCore) == ''">^16.1.0</PackageJsonDependenciesAngularCore>
+    <PackageJsonDependenciesAngularForms Condition="$(PackageJsonDependenciesAngularForms) == ''">^16.1.0</PackageJsonDependenciesAngularForms>
+    <PackageJsonDependenciesAngularPlatformBrowser Condition="$(PackageJsonDependenciesAngularPlatformBrowser) == ''">^16.1.0</PackageJsonDependenciesAngularPlatformBrowser>
+    <PackageJsonDependenciesAngularPlatformBrowserDynamic Condition="$(PackageJsonDependenciesAngularPlatformBrowserDynamic) == ''">^16.1.0</PackageJsonDependenciesAngularPlatformBrowserDynamic>
+    <PackageJsonDependenciesAngularRouter Condition="$(PackageJsonDependenciesAngularRouter) == ''">^16.1.0</PackageJsonDependenciesAngularRouter>
+    <PackageJsonDependenciesJestEditorSupport Condition="$(PackageJsonDependenciesJestEditorSupport) == ''">*</PackageJsonDependenciesJestEditorSupport>
+    <PackageJsonDependenciesRxjs Condition="$(PackageJsonDependenciesRxjs) == ''">~7.8.0</PackageJsonDependenciesRxjs>
+    <PackageJsonDependenciesTslib Condition="$(PackageJsonDependenciesTslib) == ''">^2.3.0</PackageJsonDependenciesTslib>
+    <PackageJsonDependenciesZoneJs Condition="$(PackageJsonDependenciesZoneJs) == ''">~0.13.0</PackageJsonDependenciesZoneJs>
+    <PackageJsonDevdependenciesAngularDevkitBuildAngular Condition="$(PackageJsonDevdependenciesAngularDevkitBuildAngular) == ''">^16.1.0</PackageJsonDevdependenciesAngularDevkitBuildAngular>
+    <PackageJsonDevdependenciesAngularCli Condition="$(PackageJsonDevdependenciesAngularCli) == ''">~16.1.0</PackageJsonDevdependenciesAngularCli>
+    <PackageJsonDevdependenciesAngularCompilerCli Condition="$(PackageJsonDevdependenciesAngularCompilerCli) == ''">^16.1.0</PackageJsonDevdependenciesAngularCompilerCli>
+    <PackageJsonDevdependenciesTypesJasmine Condition="$(PackageJsonDevdependenciesTypesJasmine) == ''">~4.3.0</PackageJsonDevdependenciesTypesJasmine>
+    <PackageJsonDevdependenciesAutoprefixer Condition="$(PackageJsonDevdependenciesAutoprefixer) == ''">^10.4.21</PackageJsonDevdependenciesAutoprefixer>
+    <PackageJsonDevdependenciesJasmineCore Condition="$(PackageJsonDevdependenciesJasmineCore) == ''">~4.6.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>
+    <PackageJsonDevdependenciesPostcss Condition="$(PackageJsonDevdependenciesPostcss) == ''">^8.5.6</PackageJsonDevdependenciesPostcss>
+    <PackageJsonDevdependenciesTailwindcss Condition="$(PackageJsonDevdependenciesTailwindcss) == ''">^3.4.17</PackageJsonDevdependenciesTailwindcss>
+    <PackageJsonDevdependenciesTypescript Condition="$(PackageJsonDevdependenciesTypescript) == ''">~5.1.3</PackageJsonDevdependenciesTypescript>
+  </PropertyGroup>
+</Project>

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "Py-Detect",
+  "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"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^16.1.0",
+    "@angular/common": "^16.1.0",
+    "@angular/compiler": "^16.1.0",
+    "@angular/core": "^16.1.0",
+    "@angular/forms": "^16.1.0",
+    "@angular/platform-browser": "^16.1.0",
+    "@angular/platform-browser-dynamic": "^16.1.0",
+    "@angular/router": "^16.1.0",
+    "jest-editor-support": "*",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.13.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.1.0",
+    "@angular/cli": "~16.1.0",
+    "@angular/compiler-cli": "^16.1.0",
+    "@types/jasmine": "~4.3.0",
+    "autoprefixer": "^10.4.21",
+    "jasmine-core": "~4.6.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",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.1.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app/app-routing.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HomepageComponent } from './homepage/homepage.component';
+import { PyDetectComponent } from './py-detect/py-detect.component';
+import { InfopageComponent } from './infopage/infopage.component';
+import { ValidationpageComponent } from './validationpage/validationpage.component';
+import { RecordpageComponent } from './recordpage/recordpage.component';
+import { CaseDetailsPageComponent } from './case-details-page/case-details-page.component';
+
+const routes: Routes = [
+  { path: '', component: HomepageComponent },
+  { path: 'infopage', component: InfopageComponent },
+  { path: 'infopage/:id', component: InfopageComponent },
+  { path: 'py-detect', component: PyDetectComponent },
+  { path: 'validationpage', component: ValidationpageComponent },
+  { path: 'record', component: RecordpageComponent },
+  { path: 'case-details', component: CaseDetailsPageComponent },
+  { path: 'case-details/:id', component: CaseDetailsPageComponent },
+
+  {
+    path: 'auth/signin', loadComponent: () =>
+      import('./homepage/sign-in/sign-in.component').then(m => m.SignInComponent)
+  },
+  {
+    path: 'auth/signup', loadComponent: () =>
+      import('./homepage/sign-up/sign-up.component').then(m => m.SignUpComponent)
+  },
+
+  { path: '**', redirectTo: '' }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
+

src/app/app.component.html

@@ -0,0 +1,5 @@
+<!--
+<app-sample></app-sample>
+-->
+<router-outlet></router-outlet>
+

src/app/app.component.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    declarations: [AppComponent]
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'PyDetect'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('PyDetect');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('PyDetect app is running!');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'PyDetect';
+}

src/app/app.module.ts

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { AppComponent } from './app.component';
+import { InfopageComponent } from './infopage/infopage.component';
+import { AppRoutingModule } from './app-routing.module';
+import { ValidationpageComponent } from './validationpage/validationpage.component';
+import { SignInComponent } from './homepage/sign-in/sign-in.component';
+import { SignUpComponent } from './homepage/sign-up/sign-up.component';
+import { RecordpageComponent } from './recordpage/recordpage.component';
+import { HomepageComponent } from './homepage/homepage.component';
+import { CaseDetailsPageComponent } from './case-details-page/case-details-page.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    InfopageComponent,
+    ValidationpageComponent,
+    RecordpageComponent,
+    CaseDetailsPageComponent
+  ],
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule,
+    FormsModule,
+    CommonModule,
+    AppRoutingModule,
+    HttpClientModule,
+    HomepageComponent,
+    SignInComponent,
+    SignUpComponent
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/app/case-details-page/case-details-page.component.css

@@ -0,0 +1,330 @@
+@import '../recordpage/recordpage.component.css';
+
+.case-details-list {
+  width: 100%;
+  max-width: 1700px;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 32px rgba(30,41,59,0.12);
+  padding: 32px 48px;
+}
+
+.case-details-item {
+  border-bottom: 1px solid #edf2f7;
+  padding: 24px 0;
+}
+
+.case-details-item:last-child {
+  border-bottom: none;
+}
+
+h2 {
+  color: #38bdf8;
+  font-size: 2.1rem;
+  font-weight: 800;
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+h3 {
+  color: #23272b;
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+p {
+  margin: 4px 0;
+  color: #334155;
+}
+
+hr {
+  margin: 24px 0 0 0;
+  border: none;
+  border-top: 1px solid #e2e8f0;
+}
+
+.welcome-user {
+  position: absolute;
+  top: 24px;
+  left: 32px;
+  font-size: 1.1rem;
+  color: #ffffff;
+  font-weight: 600;
+  z-index: 2;
+}
+
+.welcome-user-fixed {
+  position: absolute;
+  top: 24px;
+  left: 32px;
+  font-size: 1.1rem;
+  color: #334155;
+  font-weight: 600;
+  z-index: 2;
+}
+
+.page-title-centered {
+  text-align: center;
+  margin-top: 24px;
+  font-size: 2.1rem;
+  font-weight: 800;
+  color: #38bdf8;
+}
+
+.wrapper.records-center {
+  position: relative;
+}
+
+.welcome-left {
+  text-align: left;
+  font-size: 2.1rem;
+  font-weight: 800;
+  color: #38bdf8;
+  margin-bottom: 32px;
+  margin-top: 0;
+}
+
+.table-wrap {
+  position: relative;
+}
+
+.welcome-left {
+  font-size: 2.1rem;
+  font-weight: 800;
+  color: #38bdf8;
+  margin-bottom: 16px;
+  text-align: left;
+  position: relative;
+  right: 32vw;
+}
+
+.modal-case-details {
+  background: #f8fbfd;
+  border-radius: 18px;
+  box-shadow: 0 20px 60px rgba(0,0,0,.25);
+  padding: 0;
+  max-width: 540px;
+  min-width: 340px;
+}
+
+.modal-header-case {
+  background: #f5fafd;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 24px 24px 12px 24px;
+}
+
+.modal-header-case h2 {
+  font-size: 1.6rem;
+  font-weight: 800;
+  color: #23272b;
+  margin: 0;
+}
+
+.modal-body-case {
+  padding: 18px 24px 8px 24px;
+  background: #f8fbfd;
+}
+
+.modal-footer-case {
+  background: #f5fafd;
+  border-top: 1px solid #e2e8f0;
+  padding: 16px 24px;
+  text-align: left;
+}
+
+.detail-row {
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  gap: 8px;
+  padding: 6px 0;
+  color: #334155;
+}
+
+.detail-row span {
+  color: #64748b;
+  font-weight: 500;
+}
+
+.detail-row b {
+  color: #23272b;
+  font-weight: 500;
+}
+
+.bold-value {
+  font-weight: 700 !important;
+  color: #23272b !important;
+}
+
+.detail-block .label {
+  font-weight: 700;
+  margin-bottom: 6px;
+  color: #23272b;
+}
+
+hr {
+  margin: 18px 0 12px 0;
+  border: none;
+  border-top: 1px solid #e2e8f0;
+}
+
+/* Modal for case details (match record page style) */
+.modal-blur-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.modal {
+  background: #fefefe;
+  border-radius: 8px;
+  box-shadow: 0 4px 32px rgba(30, 41, 59, 0.12);
+  overflow: hidden;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1001;
+  width: 90%;
+  max-width: 600px;
+  display: flex;
+  flex-direction: column;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.modal-header {
+  background: #f5fafd;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h2 {
+  font-size: 1.4rem;
+  font-weight: 700;
+  margin: 0;
+  color: #23272b;
+}
+
+.modal-body {
+  padding: 16px;
+  background: #fff;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.modal-footer {
+  background: #f5fafd;
+  border-top: 1px solid #e2e8f0;
+  padding: 12px;
+  text-align: right;
+}
+
+.btn {
+  background: #38bdf8;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.btn:hover {
+  background: #34b3e0;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.active-cases-label {
+  font-size: 1.8rem;
+  font-weight: 800;
+  color: #38bdf8;
+  margin-bottom: 16px;
+  position: relative;
+  text-align: left;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.actions .btn {
+  min-width: 150px;
+  max-width: 200px;
+  padding: 12px 20px;
+  font-size: 1.08rem;
+  white-space: nowrap;
+  border-radius: 8px;
+  box-sizing: border-box;
+  overflow: visible;
+  text-overflow: unset;
+  margin: 0 2px;
+}
+
+.actions-col {
+  text-align: center;
+  vertical-align: middle;
+}
+
+.records th.actions-col,
+.records td.actions {
+  width: 28% !important;
+  min-width: 260px;
+  max-width: 320px;
+}
+
+@media (max-width: 700px) {
+  .actions .btn {
+    min-width: 120px;
+    max-width: 160px;
+    font-size: 1rem;
+    padding: 8px 10px;
+  }
+  .records th.actions-col,
+  .records td.actions {
+    min-width: 140px;
+    max-width: 180px;
+    width: 36% !important;
+  }
+}
+
+/* Make all table columns equal width */
+.records {
+  table-layout: fixed;
+  width: 100%;
+}
+.records th,
+.records td {
+  width: 16.66%; /* 6 columns, 100/6 = 16.66% */
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+

src/app/case-details-page/case-details-page.component.html

@@ -0,0 +1,107 @@
+<div class="searchbar-topright">
+  <form class="modern-searchbar-form compact white-bg">
+    <span class="modern-searchbar-icon">
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="11" cy="11" r="8"/>
+        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+      </svg>
+    </span>
+    <input type="text" class="modern-searchbar-input white-bg" placeholder="Search... (not active)" autocomplete="off" />
+  </form>
+</div>
+
+<div class="logo-title-row">
+  <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img" style="cursor:pointer;" (click)="navigateHome()" />
+  <div class="py-detect-title">
+    <span class="py-letter p">P</span>
+    <span class="py-letter y">Y</span>
+    <span class="py-shape"></span>
+    <span class="py-letter d">D</span>
+    <span class="py-letter e">E</span>
+    <span class="py-letter t">T</span>
+    <span class="py-letter e2">E</span>
+    <span class="py-letter c">C</span>
+    <span class="py-letter t2">T</span>
+  </div>
+</div>
+
+<div style="height:128px;"></div>
+
+<main class="content" role="main">
+  <div class="wrapper records-center">
+    <div class="welcome-left">Welcome User 👮</div>
+    <div *ngIf="username" class="welcome-user">Welcome, {{ username }}👮</div>
+    <div class="active-cases-label left-align"><b>Your Active Cases</b></div>
+    <div class="table-wrap padded-table-wrap">
+      <table class="records">
+        <thead>
+          <tr>
+            <th>Case ID</th>
+            <th>Crime</th>
+            <th>Date &amp; Time</th>
+            <th>Location</th>
+            <th>Status</th>
+            <th class="actions-col">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let c of cases">
+            <td class="mono">{{ c.caseId || '—' }}</td>
+            <td>{{ c.crime || '—' }}</td>
+            <td>{{ c.dateTime ? (c.dateTime | date:'yyyy-MM-dd HH:mm') : '—' }}</td>
+            <td class="ellipsis" [title]="c.police.address || ''">{{ c.police.address || '—' }}</td>
+            <td>
+              <span class="status"
+                    [class.open]="c.status==='Open'"
+                    [class.under]="c.status==='Under Investigation'"
+                    [class.closed]="c.status==='Closed'">
+                {{ c.status || '—' }}
+              </span>
+            </td>
+            <td class="actions">
+              <button type="button" class="btn view" (click)="openDetails(c)">View Details</button>
+              <button type="button" class="btn edit" (click)="goToDetect()">Go Detect</button>
+            </td>
+          </tr>
+          <tr *ngIf="cases.length === 0">
+            <td colspan="6" class="empty">No records found.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Modal for case details -->
+    <!-- ...existing code above... -->
+    <!-- Modal for case details -->
+    <!-- ...existing code above... -->
+    <!-- Modal for case details (match record page style) -->
+    <div class="modal-blur-overlay" *ngIf="showDetails"></div>
+    <div class="modal" *ngIf="showDetails" role="dialog" aria-modal="true" aria-labelledby="detailsTitle">
+      <div class="modal-header">
+        <h2 id="detailsTitle">Case Details</h2>
+      </div>
+      <div class="modal-body" *ngIf="selectedCase as sc">
+        <div class="detail-row"><span>Case ID</span><b>{{ sc.caseId || '—' }}</b></div>
+        <div class="detail-row"><span>Crime</span><b>{{ sc.crime || '—' }}</b></div>
+        <div class="detail-row"><span>Date & Time</span><b>{{ sc.dateTime ? (sc.dateTime | date:'yyyy-MM-dd HH:mm') : '—' }}</b></div>
+        <div class="detail-row"><span>Location</span><b>{{ sc.police.address || '—' }}</b></div>
+        <hr />
+        <div class="detail-row"><span>Investigation Officer</span><b>{{ sc.police.name || '—' }}</b></div>
+        <div class="detail-row"><span>Duty Person</span><b>{{ sc.police.dutyPerson || '—' }}</b></div>
+        <div class="detail-row"><span>Mode of Crime</span><b>{{ sc.police.modeOfCrime || '—' }}</b></div>
+        <hr />
+        <div class="detail-row"><span>Accused Name</span><b>{{ sc.accused.name || '—' }}</b></div>
+        <div class="detail-row"><span>Accused Gender</span><b>{{ sc.accused.gender || '—' }}</b></div>
+        <div class="detail-row"><span>Accused Age</span><b>{{ sc.accused.age || '—' }}</b></div>
+        <div class="detail-row"><span>Accused Address</span><b>{{ sc.accused.address || '—' }}</b></div>
+        <hr />
+        <div class="detail-block">
+          <div class="label">Notes / Explanation</div>
+          <p class="explain">{{ sc.police.information || '—' }}</p>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn" (click)="closeDetails()">Close</button>
+      </div>
+    </div>
+

src/app/case-details-page/case-details-page.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaseDetailsPageComponent } from './case-details-page.component';
+
+describe('CaseDetailsPageComponent', () => {
+  let component: CaseDetailsPageComponent;
+  let fixture: ComponentFixture<CaseDetailsPageComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CaseDetailsPageComponent]
+    });
+    fixture = TestBed.createComponent(CaseDetailsPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/case-details-page/case-details-page.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { CaseStoreService, PoliceCase } from '../shared/case-store.service';
+
+@Component({
+  selector: 'app-case-details-page',
+  templateUrl: './case-details-page.component.html',
+  styleUrls: ['./case-details-page.component.css']
+})
+export class CaseDetailsPageComponent implements OnInit {
+  cases: PoliceCase[] = [];
+  showDetails = false;
+  selectedCase: PoliceCase | null = null;
+  username: string = '';
+
+  constructor(private caseStore: CaseStoreService, private router: Router) {}
+
+  ngOnInit(): void {
+    this.cases = this.caseStore.getPoliceCases();
+    this.username = localStorage.getItem('username') || sessionStorage.getItem('username') || '';
+  }
+
+  openDetails(c: PoliceCase): void {
+    this.selectedCase = c;
+    this.showDetails = true;
+  }
+
+  closeDetails(): void {
+    this.showDetails = false;
+    this.selectedCase = null;
+  }
+
+  goToDetect(): void {
+    window.location.href = '/py-detect';
+  }
+
+  navigateHome(): void {
+    this.router.navigate(['/']);
+  }
+}

src/app/case-store.service.ts

@@ -0,0 +1,104 @@
+import { Injectable } from '@angular/core';
+
+export interface PoliceCase {
+  // Optional metadata used by your UI
+  caseId?: string;
+  dateTime?: string;
+  status?: 'Open' | 'Under Investigation' | 'Closed';
+  crime: string;
+  police: {
+    name: string;
+    station: string;
+    address: string;
+    pincode: string;
+    dutyPerson: string;
+    modeOfCrime: string;
+    information?: string;
+  };
+  accused: {
+    name: string;
+    age: string | number;
+    gender: string;
+    address: string;
+    occupation?: string;
+  };
+}
+
+@Injectable({ providedIn: 'root' })
+export class CaseStoreService {
+  private readonly storageKey = 'py_detect_police_cases';
+  private cases: PoliceCase[] = [];
+
+  constructor() {
+    this.load();
+  }
+
+  /** Create (newest first) */
+  addPoliceCase(c: PoliceCase): void {
+    this.cases.unshift(c);
+    this.save();
+  }
+
+  /** Read */
+  getPoliceCases(): PoliceCase[] {
+    return this.cases;
+  }
+
+  /** Update by array index */
+  updatePoliceCaseAt(index: number, updated: PoliceCase): void {
+    if (index >= 0 && index < this.cases.length) {
+      this.cases[index] = updated;
+      this.save();
+    }
+  }
+
+  /**
+   * Convenience: map Info page reactive-form value to PoliceCase and store it.
+   * Call with the whole this.form.value from InfopageComponent.
+   */
+  addFromInfoForm(formValue: any): void {
+    const crime = (formValue && formValue.crime) || {};
+    const suspect = (formValue && formValue.suspect) || {};
+    const notes = (formValue && formValue.notes) || {};
+
+    const mapped: PoliceCase = {
+      caseId: crime.caseId || '',
+      dateTime: crime.dateTime || '',
+      status: notes.status || 'Open',
+      crime: crime.crimeType || 'Unknown',
+      police: {
+        name: notes.officerInCharge || '—',
+        station: '—',                   // not captured on Info page
+        address: crime.location || '—',
+        pincode: '',                    // not captured on Info page
+        dutyPerson: notes.officerInCharge || '—',
+        modeOfCrime: crime.crimeType || '—',
+        information: notes.initialFindings || ''
+      },
+      accused: {
+        name: suspect.fullName || '—',
+        age: suspect.age || '—',
+        gender: suspect.gender || '—',
+        address: suspect.address || '—',
+        occupation: suspect.alias || ''
+      }
+    };
+
+    this.addPoliceCase(mapped);
+  }
+
+  /** Persist to localStorage (safe to keep; remove if not needed) */
+  private save(): void {
+    try { localStorage.setItem(this.storageKey, JSON.stringify(this.cases)); } catch { }
+  }
+
+  /** Load from localStorage */
+  private load(): void {
+    try {
+      const raw = localStorage.getItem(this.storageKey);
+      this.cases = raw ? (JSON.parse(raw) as PoliceCase[]) : [];
+    } catch {
+      this.cases = [];
+    }
+  }
+}

src/app/homepage/homepage.component.css

@@ -0,0 +1,1118 @@
+body, html {
+  margin: 0;
+  padding: 0;
+  font-family: 'Arial', 'Segoe UI', 'Roboto', sans-serif;
+  background: url('/assets/background.jpg') no-repeat center center fixed !important;
+  background-size: cover !important;
+}
+
+.homepage-container {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  color: #e3f6ff;
+  position: relative;
+  align-items: center; /* Center content vertically */
+  justify-content: center; /* Center content horizontally */
+  background: url(/assets/py-detect-illustration.png) no-repeat center center fixed;
+  background-size: cover;
+}
+
+.left-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center; /* Center vertically */
+  align-items: center; /* Center horizontally */
+  padding-left: 120px; /* Reduced from 240px to 120px */
+  padding-top: 0;
+  position: relative;
+}
+
+.topbar {
+  display: flex;
+  align-items: flex-start;
+  height: 80px;
+  padding-left: 0;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 30;
+}
+
+.logo {
+  width: 120px;
+  height: 120px;
+  margin-left: 0;
+  margin-top: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 40;
+}
+
+.logo-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 120px;
+  height: 120px;
+  z-index: 100;
+  margin: 0;
+}
+
+/* Add gap between logo and browser border */
+.logo-img {
+  width: 6vw;
+  height: 6vw;
+  border-radius: 50%;
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
+  position: fixed;
+  top: 18px; /* Add gap from top */
+  left: 18px; /* Add gap from left */
+  z-index: 300;
+  margin: 0;
+}
+
+/* Move Py-Detect text further down by increasing top value of .logo-title-row */
+.logo-title-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: absolute;
+  top: 180px; /* Increased from 120px to move text further down */
+  left: 48px;
+  z-index: 300;
+  gap: 32px;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.py-detect-title {
+  position: fixed;
+  margin-left: 132px;
+  margin-top: -208px;
+  text-align: left;
+  font-size: 4vw;
+  color: #38bdf8;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+  font-weight: 900;
+  letter-spacing: 6px;
+  background: none;
+  border: none;
+  box-shadow: none;
+  min-width: unset;
+  max-width: unset;
+}
+
+  /* Py-Detect title: each letter with its own color */
+  .py-detect-title .py-letter.p {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title .py-letter.y {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title .py-shape {
+    color: #e3f6ff;
+    background: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+    box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+    border: 2px solid #23272b;
+  }
+
+  .py-detect-title .py-letter.d {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title .py-letter.e {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title .py-letter.t {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title .py-letter.e2 {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title .py-letter.c {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title .py-letter.t2 {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+.center-instructions {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 200;
+  width: 100%;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+
+.detection-info {
+  margin: 0 auto;
+  max-width: 500px;
+  background: rgba(30,41,59,0.85);
+  border-radius: 12px;
+  padding: 20px 28px;
+  box-shadow: 0 2px 16px #1e293b44, 0 0 12px #38bdf844;
+  font-size: 24px;
+  color: #e3f6ff;
+  font-weight: 500;
+  line-height: 1.4;
+  letter-spacing: 1px;
+  border-left: 6px solid #38bdf8;
+  border-top: 2px solid #1e293b;
+  backdrop-filter: blur(1px);
+  text-align: left;
+}
+
+  .detection-info ul {
+    margin-top: 12px;
+    margin-bottom: 0;
+    font-size: 20px;
+    color: #bae6fd;
+    padding-left: 18px;
+    text-align: left; /* Align list to left */
+  }
+
+  .detection-info li {
+    margin-bottom: 6px;
+    padding-left: 2px;
+    font-weight: 400;
+    text-shadow: 0 0 4px #38bdf888;
+    text-align: left; /* Align each point to left */
+  }
+
+.right-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  padding-right: 0;
+  height: 100vh;
+}
+
+.sign-in-form {
+  background: rgba(30,41,59,0.92);
+  padding: 32px 48px 32px 64px; /* Reduced vertical and horizontal padding */
+  border-radius: 24px;
+  box-shadow: 0 8px 32px rgba(30,41,59,0.48), 0 0 24px #38bdf844;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 28px; /* Reduced gap between children */
+  min-width: 340px;
+  max-width: 480px;
+  border: 3px solid #38bdf8;
+  backdrop-filter: blur(2px);
+  transition: box-shadow 0.3s, border-color 0.3s;
+  height: 320px; /* Further reduced height */
+  min-height: 320px;
+  max-height: 340px;
+}
+
+  .sign-in-form:hover {
+    box-shadow: 0 4px 32px #38bdf844, 0 0 16px #1e293b88;
+    border-color: #bae6fd;
+  }
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; /* Align label and input to left */
+  gap: 12px;
+  min-width: 180px;
+  width: 100%;
+  margin-left: -24px; /* Shift fields a bit to the left */
+}
+
+label {
+  color: #bae6fd;
+  font-size: 26px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  letter-spacing: 1px;
+  text-shadow: 0 0 6px #38bdf888;
+}
+
+.input-field {
+  padding: 20px;
+  border-radius: 12px;
+  border: 3px solid #38bdf8;
+  background: rgba(30,41,59,0.98);
+  color: #e3f6ff;
+  font-size: 28px;
+  width: 100%;
+  box-shadow: 0 2px 12px #38bdf844;
+  transition: border-color 0.3s;
+  text-align: left; /* Align text to left */
+}
+
+  .input-field:focus {
+    border-color: #bae6fd;
+    outline: none;
+  }
+
+  .input-field::placeholder {
+    color: #bae6fd;
+    font-size: 24px;
+    opacity: 0.8;
+  }
+
+.sign-in-button {
+  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+  color: #e3f6ff;
+  padding: 22px 0;
+  font-size: 32px;
+  border: none;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+  width: 100%;
+  margin-top: 0;
+  font-weight: bold;
+  letter-spacing: 1px;
+  box-shadow: 0 2px 16px #38bdf888;
+  text-shadow: 0 0 6px #23272b;
+  align-self: stretch;
+  min-width: 180px;
+}
+
+  .sign-in-button:hover {
+    background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+    color: #bae6fd;
+    box-shadow: 0 2px 24px #bae6fd88;
+  }
+
+/* Buttons that open the popup */
+.auth-links {
+  display: flex;
+  gap: 16px;
+  margin-top: -12px;
+  flex-wrap: wrap;
+}
+
+.link-btn {
+  background: transparent;
+  border: 1px dashed #38bdf8;
+  color: #bae6fd;
+  padding: 10px 16px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+  .link-btn:hover {
+    border-style: solid;
+    color: #e3f6ff;
+  }
+
+.social-bar {
+  position: absolute;
+  top: 32px;
+  right: 60px;
+  display: flex;
+  gap: 24px;
+  z-index: 30;
+}
+
+.social-icon img {
+  width: 38px;
+  height: 38px;
+  filter: drop-shadow(0 0 6px #38bdf8);
+  transition: transform 0.2s;
+}
+
+.social-icon:hover img {
+  transform: scale(1.15);
+  filter: drop-shadow(0 0 12px #bae6fd);
+}
+
+.footer-link {
+  position: fixed;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  font-size: 18px;
+  color: #bae6fd;
+  background: rgba(30,41,59,0.85);
+  border-radius: 8px;
+  padding: 10px 22px 10px 22px;
+  box-shadow: 0 2px 8px #1e293b44;
+  z-index: 40;
+  text-align: center;
+  min-width: 320px;
+}
+
+.footer-info {
+  font-size: 16px;
+  color: #bae6fd;
+  margin-bottom: 2px;
+  font-weight: 400;
+}
+
+.footer-link-highlight {
+  color: #38bdf8;
+  font-weight: 600;
+}
+
+.footer-link a {
+  color: #38bdf8;
+  text-decoration: none;
+  font-size: 18px;
+  font-weight: 500;
+  letter-spacing: 1px;
+  display: block;
+  margin-bottom: 2px;
+}
+
+  .footer-link a:hover {
+    color: #e3f6ff;
+  }
+
+.footer-tech {
+  font-size: 15px;
+  color: #e3f6ff;
+  margin-top: 2px;
+  font-weight: 600;
+  letter-spacing: 1px;
+}
+
+.login-title {
+  display: block;
+  font-size: 40px;
+  font-weight: 800;
+  color: #38bdf8;
+  text-align: left;
+  margin-bottom: 0;
+  letter-spacing: 2px;
+}
+
+.back-btn {
+  margin-top: 32px;
+  padding: 14px 38px;
+  font-size: 1.3rem;
+  font-weight: 700;
+  border-radius: 12px;
+  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+  color: #e3f6ff;
+  border: none;
+  box-shadow: 0 2px 16px #38bdf888;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+}
+
+  .back-btn:hover {
+    background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+    color: #bae6fd;
+    box-shadow: 0 2px 24px #bae6fd88;
+  }
+
+/* ===== Modal (popup) styles ===== */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,.45);
+  z-index: 1000;
+}
+
+.modal {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  z-index: 1001;
+  background: #ffffff45;
+}
+
+  .modal > app-sign-in,
+  .modal > app-sign-up {
+    max-width: 900px;
+    width: min(92vw, 900px);
+  }
+
+.modal__close {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 48px;
+  height: 48px;
+  border: none;
+  background: linear-gradient(135deg, #23272b 60%, #18181b 100%);
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 2.2rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(30,41,59,0.28);
+  z-index: 20;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+  outline: none;
+}
+
+  .modal__close:hover {
+    background: linear-gradient(135deg, #333 60%, #23272b 100%);
+    color: #38bdf8;
+    box-shadow: 0 8px 24px #38bdf888;
+  }
+
+.signin-close {
+  position: absolute;
+  top: 189px;
+  right: 363px;
+  width: 48px;
+  height: 48px;
+  border: none;
+  background: linear-gradient(135deg, #23272b 60%, #18181b 100%);
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 2.2rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(30,41,59,0.28);
+  z-index: 20;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+  outline: none;
+}
+
+  .signin-close:hover {
+    background: linear-gradient(135deg, #333 60%, #23272b 100%);
+    color: #38bdf8;
+    box-shadow: 0 8px 24px #38bdf888;
+  }
+
+.signup-close {
+  position: absolute;
+  top: 110px;
+  right: 453px;
+  width: 48px;
+  height: 48px;
+  border: none;
+  background: linear-gradient(135deg, #23272b 60%, #18181b 100%);
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 2.2rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(30,41,59,0.28);
+  z-index: 20;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+  outline: none;
+}
+
+  .signup-close:hover {
+    background: linear-gradient(135deg, #333 60%, #23272b 100%);
+    color: #38bdf8;
+    box-shadow: 0 8px 24px #38bdf888;
+  }
+
+/* Keep app-sign-in/up wrapper */
+.app-sign-in, .app-sign-up {
+  position: relative;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 20px 60px rgba(0,0,0,.35);
+}
+
+.py-shape {
+  display: inline-block;
+  width: 18px;
+  height: 4px;
+  background: #38bdf8;
+  margin: 0 8px;
+  vertical-align: middle;
+  border-radius: 2px;
+  box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+  border: 2px solid #23272b;
+}
+
+.auth-topright {
+  position: fixed;
+  top: 32px;
+  right: 48px;
+  z-index: 200;
+  display: flex;
+  gap: 18px;
+}
+
+.auth-btn {
+  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: 2px;
+  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+  color: #e3f6ff;
+  box-shadow: 0 2px 16px #38bdf888;
+  border: none;
+  border-radius: 12px;
+  padding: 0.7rem 2rem;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+}
+
+  .auth-btn:hover {
+    background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+    color: #bae6fd;
+    box-shadow: 0 2px 24px #bae6fd88;
+  }
+
+.py-detect-image {
+  width: 420px;
+  max-width: 100%;
+  height: auto;
+  border-radius: 24px;
+  box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
+  border: 3px solid #38bdf8;
+  background: #23272b;
+  margin-top: 48px;
+  margin-bottom: 48px;
+  display: block;
+}
+
+/* Footer Styles */
+.footer {
+  background: linear-gradient(90deg, #18181b 0%, #38bdf8 100%); /* Dual color: black to cyan */
+  color: #fff; /* All text white */
+  padding: 0; /* Remove extra padding for a slim footer */
+  text-align: center;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 200;
+  height: 46px; /* Further reduced height for a slim footer */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 32px;
+  gap: 64px;
+}
+
+.footer-left,
+.footer-center,
+.footer-right {
+  margin: 0;
+  min-width: 0;
+  flex: 1 1 1;
+  display: flex;
+  align-items: center;
+  color: #fff !important;
+  justify-content: center;
+}
+
+.footer-center,
+.footer-right {
+  color: #fff !important;
+}
+
+  .footer-center .footer-links {
+    display: flex;
+    flex-direction: row;
+    gap: 32px;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+
+    .footer-center .footer-links li {
+      display: flex;
+      align-items: center;
+      margin: 0;
+    }
+
+  .footer-right .social-media {
+    display: flex;
+    flex-direction: row;
+    gap: 18px;
+    align-items: center;
+    margin-left: 24px;
+  }
+
+  .footer-center .footer-links a {
+    color: #fff !important;
+    text-decoration: none !important;
+  }
+
+  .footer-center .footer-links a:hover {
+    color: #38bdf8 !important;
+    text-decoration: none !important;
+  }
+
+  .footer-right .social-media a,
+  .footer-right .social-media i {
+    color: #fff !important;
+    text-decoration: none !important;
+  }
+
+@media screen and (max-width: 900px) {
+  .footer-content {
+    flex-direction: column;
+    gap: 16px;
+    padding: 8px 8px;
+  }
+
+  .footer-left,
+  .footer-center,
+  .footer-right {
+    justify-content: center;
+    width: 100%;
+    margin: 0;
+  }
+
+    .footer-center .footer-links {
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 12px;
+      white-space: normal;
+    }
+
+    .footer-right .social-media {
+      margin-left: 0;
+      justify-content: center;
+    }
+}
+
+/* Align detection info boxes to start from left, with space at right */
+.detection-info-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 24px;
+  justify-content: flex-start;
+  align-items: stretch;
+  margin: 0 0 0 48px; /* Add left margin, remove auto centering */
+  width: auto;
+  max-width: 1200px;
+}
+
+.detection-info-box {
+  background: rgba(30,41,59,0.92);
+  border-radius: 16px;
+  box-shadow: 0 2px 16px #38bdf844, 0 0 12px #1e293b88;
+  border-left: 6px solid #38bdf8;
+  border-top: 2px solid #1e293b;
+  padding: 18px 24px 16px 24px;
+  min-width: 220px;
+  max-width: 280px;
+  flex: 1 1 0;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+  color: #e3f6ff;
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0.5px;
+  position: relative;
+  margin-bottom: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  opacity: 0;
+  transform: translateY(40px) scale(0.98);
+  animation: detectionBoxFadeIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s;
+}
+
+  .detection-info-box:hover {
+    transform: scale(1.06);
+    box-shadow: 0 8px 32px #38bdf888, 0 0 24px #1e293b88;
+    z-index: 10;
+  }
+
+  .detection-info-box:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+
+  .detection-info-box:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+
+  .detection-info-box:nth-child(4) {
+    animation-delay: 0.45s;
+  }
+
+@keyframes detectionBoxFadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(40px) scale(0.98);
+  }
+
+  80% {
+    opacity: 1;
+    transform: translateY(-4px) scale(1.02);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .detection-info-row {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .detection-info-box {
+    max-width: 98vw;
+    min-width: 0;
+    font-size: 15px;
+    padding: 14px 6vw;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .detection-info-row {
+    flex-direction: column;
+    gap: 18px;
+    align-items: center;
+  }
+
+  .detection-info-box {
+    max-width: 98vw;
+    min-width: 0;
+    font-size: 15px;
+    padding: 14px 6vw;
+    height: auto;
+  }
+}
+
+/* Footer social icon styles */
+.footer-social-icon {
+  width: 32px;
+  height: 32px;
+  margin: 0 8px;
+  vertical-align: middle;
+  filter: drop-shadow(0 0 6px #38bdf8);
+  transition: transform 0.2s, filter 0.2s;
+}
+
+  .footer-social-icon:hover {
+    transform: scale(1.15);
+    filter: drop-shadow(0 0 12px #bae6fd);
+  }
+
+/* Style for Next button in footer */
+.footer-next-btn {
+  margin-left: 24px;
+  padding: 12px 32px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  border-radius: 10px;
+  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+  color: #e3f6ff;
+  border: none;
+  box-shadow: 0 2px 12px #38bdf888;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+}
+
+  .footer-next-btn:hover {
+    background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+    color: #bae6fd;
+    box-shadow: 0 2px 24px #bae6fd88;
+  }
+
+.tour-btn {
+  background: linear-gradient(90deg, #38bdf8 0%, #712d74 100%);
+  color: #fff;
+  font-size: 1.2rem;
+  font-weight: 700;
+  border: none;
+  border-radius: 12px;
+  padding: 14px 38px;
+  box-shadow: 0 2px 16px #38bdf888;
+  cursor: pointer;
+  margin: 0 auto;
+  display: block;
+  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+}
+
+  .tour-btn:hover {
+    background: linear-gradient(90deg, #712d74 0%, #38bdf8 100%);
+    color: #bae6fd;
+    box-shadow: 0 2px 24px #bae6fd88;
+  }
+
+.tour-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(24,24,27,0.92);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tour-content {
+  background: #23272b;
+  color: #fff;
+  border-radius: 18px;
+  padding: 48px 36px 36px 36px;
+  box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
+  max-width: 480px;
+  width: 90vw;
+  text-align: center;
+  position: relative;
+}
+
+.tour-close {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 44px;
+  height: 44px;
+  border: none;
+  background: #18181b;
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 2rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  z-index: 10;
+  transition: background 0.2s, color 0.2s;
+}
+
+  .tour-close:hover {
+    background: #333;
+    color: #f134d0;
+  }
+
+.tour-next {
+  margin-top: 24px;
+  background: linear-gradient(90deg, #38bdf8 0%, #712d74 100%);
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 10px;
+  padding: 12px 32px;
+  box-shadow: 0 2px 12px #38bdf888;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+}
+
+  .tour-next:hover {
+    background: linear-gradient(90deg, #712d74 0%, #38bdf8 100%);
+    color: #bae6fd;
+    box-shadow: 0 2px 24px #bae6fd88;
+  }
+
+.info-link {
+  margin-left: 12px;
+  color: #38bdf8;
+  font-size: 0.95em;
+  cursor: pointer;
+  text-decoration: underline;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+  .info-link:hover {
+    color: #bae6fd;
+  }
+
+.detection-info-box .detection-description,
+.detection-info-box .detection-list {
+  margin-top: 10px;
+}
+
+.detection-icon {
+  font-size: 3vw;
+}
+
+.detection-info-box .detection-icon {
+  font-size: 3vw !important;
+}
+
+.welcome-title {
+  margin-left: 12px;
+  margin-bottom: 8px;
+}
+
+.main-title {
+  font-size: 2.2em;
+  font-weight: bold;
+  background: linear-gradient(90deg, #f134d0 0%, #38bdf8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+  letter-spacing: 2px;
+}
+
+.sub-title {
+  font-size: 1.2em;
+  font-weight: bold;
+  color: #fff;
+}
+
+.detection-description {
+  margin: 12px 0 18px 0;
+  color: #e3f6ff;
+  font-size: 1em;
+  font-weight: 400;
+}
+
+.read-more-btn {
+  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+  color: #fff;
+  font-size: 1em;
+  font-weight: 600;
+  border: none;
+  border-radius: 22px;
+  padding: 10px 32px;
+  box-shadow: 0 2px 12px #38bdf888;
+  cursor: pointer;
+  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+  margin-top: 8px;
+  letter-spacing: 1px;
+}
+
+  .read-more-btn:hover {
+    background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+    color: #bae6fd;
+    box-shadow: 0 2px 24px #bae6fd88;
+  }
+
+/* ===================== */
+/* Info Dialog Animations */
+/* ===================== */
+@keyframes fadeInBackdrop {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes zoomInModal {
+  0% {
+    opacity: 0;
+    transform: translateY(8px) scale(0.96);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.modal-backdrop--fade {
+  animation: fadeInBackdrop .25s ease-out both;
+}
+
+.dialog-modal--zoom {
+  animation: zoomInModal .28s cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+
+/* Dialog content card */
+.dialog-content {
+  background: #23272b;
+  color: #fff;
+  border-radius: 16px;
+  padding: 36px;
+  max-width: 720px;
+  width: 92vw;
+  text-align: left;
+  position: relative;
+  box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
+}
+
+/* Titles inside dialog */
+.dialog-title {
+  color: #38bdf8;
+  margin: 0 0 16px 0;
+  font-size: 1.6rem;
+  font-weight: 800;
+  letter-spacing: 1px;
+}
+
+.dialog-content h3 {
+  margin-top: 18px;
+  margin-bottom: 8px;
+  color: #38bdf8;
+  font-size: 1.15rem;
+}
+
+.dialog-content p,
+.dialog-content ul {
+  font-size: 1rem;
+  color: #bae6fd;
+  margin-bottom: 12px;
+}
+
+.dialog-content ul {
+  padding-left: 18px;
+}
+
+/* Close button at top-right */
+.dialog-close {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: #18181b;
+  color: #fff;
+  font-size: 1.6rem;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+  transition: background 0.2s, color 0.2s;
+}
+
+  .dialog-close:hover {
+    background: #333;
+    color: #38bdf8;
+  }

src/app/homepage/homepage.component.html

@@ -0,0 +1,121 @@
+<!-- Logo and Py-Detect Title (kept as your last version) -->
+<div class="logo-title-row">
+  <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img" />
+  <div class="py-detect-title">
+    <span class="py-letter p">P</span>
+    <span class="py-letter y">Y</span>
+    <span class="py-shape"></span>
+    <span class="py-letter d">D</span>
+    <span class="py-letter e">E</span>
+    <span class="py-letter t">T</span>
+    <span class="py-letter e2">E</span>
+    <span class="py-letter c">C</span>
+    <span class="py-letter t2">T</span>
+  </div>
+</div>
+
+<div class="homepage-container">
+  <!-- Top-right: Sign-In/Sign-Up buttons (reverted; unchanged from your last version) -->
+  <div class="auth-topright">
+    <button class="auth-btn" (click)="openSignIn()">Sign In</button>
+    <button class="auth-btn" (click)="openSignUp()">Sign Up</button>
+  </div>
+
+  <!-- Left-side instruction/info (position unchanged) -->
+  <div class="left-instructions"
+       style="position: absolute; left: 0; width: 50vw; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: 80px; z-index: 10;">
+    <div style="max-width: 520px;">
+      <h1 style="font-size:2.5em; font-weight:800; color:#38bdf8; margin-bottom:12px;">
+        Welcome to Py-Detect
+      </h1>
+      <div style="font-size: 1.2em; color: #e3f6ff; margin-bottom: 18px; width: 33vw; text-align: justify;">
+        {{ welcomeText }}
+      </div>
+      <!-- Know More as a styled button -->
+      <button class="know-more-btn" (click)="openInfoDialog()"
+              style="font-size:1.1em; font-weight:600; color:#fff;
+                     background:linear-gradient(90deg,#38bdf8 0%,#23272b 100%);
+                     border:none; border-radius:22px; padding:10px 32px;
+                     box-shadow:0 2px 12px #38bdf888; cursor:pointer;
+                     transition:background 0.3s, color 0.3s, box-shadow 0.3s;
+                     margin-top:8px; letter-spacing:1px;">
+        Know more
+      </button>
+    </div>
+  </div>
+
+  <!-- Optional tour overlay (unchanged) -->
+  <div class="tour-overlay" *ngIf="showTourOverlay">
+    <div class="tour-content">
+      <button class="tour__close" (click)="showTourOverlay = false" aria-label="Close">×</button>
+      <h2>Welcome to Py-Detect!</h2>
+      <p>Discover what Py-Detect can do for you:</p>
+      <ul>
+        <li>🕵️ Intelligent lie detection platform</li>
+        <li>🔍 AI-powered analysis of responses</li>
+        <li>🎯 Designed for investigators, educators, HR, and more</li>
+        <li>💡 Fast, non-invasive, and data-driven insights</li>
+      </ul>
+      <button class="tour-next" (click)="showTourOverlay = false">Got it!</button>
+    </div>
+  </div>
+</div>
+
+<!-- Footer (unchanged) -->
+<footer class="footer">
+  <div class="footer-content">
+    <div class="footer-left">
+      <p>© 2025 Pykara Technologies. 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="fa-brands fa-facebook-f"></i></a>
+        <a href="https://twitter.com" target="_blank" aria-label="Twitter"><i class="fa-brands fa-twitter"></i></a>
+        <a href="https://linkedin.com" target="_blank" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
+        <a href="https://instagram.com" target="_blank" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<!-- ===== Auth Modals (unchanged) ===== -->
+<div class="modal-backdrop" *ngIf="showSignIn || showSignUp" (click)="closeModal()"></div>
+<div class="modal" *ngIf="showSignIn || showSignUp" role="dialog" aria-modal="true">
+  <ng-container *ngIf="showSignIn">
+    <button class="signin-close" (click)="closeModal()" aria-label="Close">×</button>
+    <app-sign-in (switchToSignUp)="openSignUp()"
+                 (signInSuccess)="handleSignInSuccess()">
+    </app-sign-in>
+  </ng-container>
+  <ng-container *ngIf="showSignUp">
+    <button class="signup-close" (click)="closeModal()" aria-label="Close">×</button>
+    <app-sign-up (switchToSignIn)="openSignIn()">
+    </app-sign-up>
+  </ng-container>
+</div>
+
+<!-- ===== Info Dialog (unchanged) ===== -->
+<div class="modal-backdrop modal-backdrop--fade" *ngIf="showInfoDialog" (click)="closeInfoDialog()"></div>
+<div class="modal dialog-modal dialog-modal--zoom" *ngIf="showInfoDialog" role="dialog" aria-modal="true" aria-label="About Py-Detect">
+  <div class="dialog-content">
+    <!-- Close button at top-right (replaces Back) -->
+    <button class="dialog-close" (click)="closeInfoDialog()" aria-label="Close">×</button>
+
+    <h3>How It Works</h3>
+    <p>Py-Detect asks personalized, context-aware questions and analyzes verbal, facial, and behavioral signals using AI and computer vision. It then produces a concise report with an estimated lie probability.</p>
+
+    <h3>Who Can Use Py-Detect?</h3>
+    <p>Investigators, law enforcement teams, educators and school administrators, HR professionals, recruiters, and any organization that needs reliable behavioral insights.</p>
+
+    <h3>Why Py-Detect?</h3>
+    <p>It is fast, non-invasive, configurable for different scenarios, and supports decisions with clear, data-driven evidence.</p>
+  </div>
+</div>

src/app/homepage/homepage.component.spec.ts

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

src/app/homepage/homepage.component.ts

@@ -0,0 +1,59 @@
+import { Component, Renderer2, OnInit, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { SignInComponent } from './sign-in/sign-in.component';
+import { SignUpComponent } from './sign-up/sign-up.component';
+
+@Component({
+  selector: 'app-homepage',
+  standalone: true,
+  templateUrl: './homepage.component.html',
+  styleUrls: ['./homepage.component.css'],
+  imports: [CommonModule, SignInComponent, SignUpComponent]
+})
+export class HomepageComponent implements OnInit, OnDestroy {
+  // Keep your existing auth modal flags (reverted)
+  showSignIn = false;
+  showSignUp = false;
+  showTourOverlay = false;
+
+  // (Optional legacy flags kept intact if used elsewhere)
+  selectedInfo: string | null = null;
+  showDetails = false;
+
+  // New: "Know more" dialog flag
+  showInfoDialog = false;
+
+  welcomeText = `Py-Detect is an intelligent lie detection platform designed to analyze human responses and uncover hidden truths. During each session, we also record and analyze body language using video to provide deeper behavioral insights. Whether you're evaluating a suspect, interviewing a student, or conducting sensitive assessments, Py-Detect uses advanced algorithms to ask targeted questions and deliver a truthfulness score—a percentage-based estimate of how likely the person is being honest.`;
+
+  constructor(private router: Router, private renderer: Renderer2) { }
+
+  ngOnInit() {
+    this.renderer.addClass(document.body, 'homepage-bg');
+  }
+
+  ngOnDestroy() {
+    this.renderer.removeClass(document.body, 'homepage-bg');
+  }
+
+  // === Auth modal open/close (same as your last version in the template) ===
+  openSignIn() { this.showSignIn = true; this.showSignUp = false; }
+  openSignUp() { this.showSignUp = true; this.showSignIn = false; }
+  closeModal() { this.showSignIn = this.showSignUp = false; }
+
+  // If your <app-sign-in> emits signInSuccess, keep the same handler
+  handleSignInSuccess() {
+    this.closeModal();
+    // keep your existing navigation if any; otherwise, do nothing
+    // this.router.navigate(['/infopage']);
+  }
+
+  // === Info dialog controls ===
+  openInfoDialog() { this.showInfoDialog = true; }
+  closeInfoDialog() { this.showInfoDialog = false; }
+
+  // (Optional) preserved helper
+  toggleInfo(info: string) {
+    this.selectedInfo = (this.selectedInfo === info) ? null : info;
+  }
+}

src/app/homepage/sign-in/sign-in.component.css

@@ -0,0 +1,243 @@
+:host {
+  display: block
+}
+
+
+.auth-box {
+  width: 54vw;
+  display: grid;
+  grid-template-columns: 1fr;
+  background: #2b1b6b;
+  border-radius: 18px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px 0 #18181b, 0 0 32px #38bdf888;
+  min-height: 420px;
+  max-height: 520px;
+  z-index: 1100;
+  animation: popupZoomIn .35s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+@keyframes popupZoomIn {
+  0% { opacity: 0; transform: scale(0.96) translateY(16px); }
+  100% { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.panel-right {
+  position: relative;
+  background: radial-gradient(120% 120% at 20% 50%,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 60%);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+.right-image {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+.right-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.panel-left {
+  padding: clamp(22px,3vw,38px);
+  background: white;
+  color: black;
+}
+
+.brand-mark {
+  width: 4vw;
+  margin-bottom: 14px;
+  border: 2px solid #b1b1b17d;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+.title {
+  margin: 0 0 6px;
+  font-size: clamp(22px,3vw,26px);
+  font-weight: 700
+}
+.subtitle {
+  margin: 0 0 8px; /* Reduced space below Create Account text */
+}
+
+.form {
+  display: grid;
+  gap: 12px
+}
+
+.field {
+  display: grid;
+  gap: 6px
+}
+
+label {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+input[type="email"], input[type="password"] {
+  color: black;
+  border: 1px solid rgb(0 0 0 / 57%);
+  border-radius: 10px;
+  padding: 11px 12px;
+  outline: none
+}
+
+input::placeholder {
+  color: #808080;
+}
+
+input:focus {
+  border-color: #a78bfa;
+  box-shadow: 0 0 0 3px rgba(167,139,250,.25)
+}
+
+.error {
+  color: red;
+  font-size: 12px
+}
+
+.btn {
+  width: 100%;
+  border-radius: 999px;
+  padding: 12px 18px;
+  cursor: pointer
+}
+
+.btn-primary {
+  background: #0b0f1a;
+  color: #fff;
+  border: none;
+  font-weight: 700
+}
+
+.btn[aria-busy="true"] {
+  opacity: .75;
+  cursor: progress
+}
+
+.footnote {
+  margin: 14px 0 0;
+  font-size: 13px;
+}
+
+  .footnote a {
+    color: red;
+    text-decoration: underline
+  }
+
+.admin-info {
+  margin: 10px 0 16px 0;
+  color: #f134d0;
+  font-size: 1em;
+  font-weight: 600;
+  text-align: center;
+}
+
+.admin-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 10px 0 0 0;
+}
+.admin-checkbox input[type="checkbox"] {
+  accent-color: #2b1b6b;
+  width: 18px;
+  height: 18px;
+}
+.admin-checkbox label {
+  color: #2b1b6b;
+  font-size: 1em;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+
+@keyframes fadeInBackdrop {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media(min-width:900px) {
+  .auth-box {
+    grid-template-columns: 520px 1fr
+  }
+}
+
+
+.topTitle {
+  display: flex;
+  align-items: center;
+  gap: 21px;
+}
+
+.topHeader {
+  font-size: 1vw;
+}
+
+.signin-close {
+  position: absolute;
+  top: 158px;
+  right: 450px;
+  width: 44px;
+  height: 3px;
+  border: none;
+  background: #18181b;
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 2rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  z-index: 10;
+  transition: background 0.2s, color 0.2s;
+}
+
+.signin-close:hover {
+  background: #333;
+  color: #f134d0;
+}
+
+.signin-close:hover, .signup-close:hover {
+  background: linear-gradient(135deg, #333 60%, #23272b 100%);
+  color: #38bdf8;
+  box-shadow: 0 8px 24px #38bdf888;
+}
+
+.modal__close {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 44px;
+  height: 44px;
+  border: none;
+  background: #18181b;
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 2rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  z-index: 10;
+  transition: background 0.2s, color 0.2s;
+}
+
+.modal__close:hover {
+  background: #333;
+  color: #f134d0;
+}

src/app/homepage/sign-in/sign-in.component.html

@@ -0,0 +1,45 @@
+<section class="auth-page">
+  <div class="signin-modal-backdrop"></div>
+  <div class="auth-box" role="dialog" aria-labelledby="siTitle">
+    <!-- Left (form) -->
+    <div class="panel-left">
+      <div class="topTitle">
+        <img class="brand-mark" src="/assets/pykara-logo.png" alt="Brand" />
+        <span class="topHeader"><b>Welcome back!</b></span>
+      </div>
+      <h2 id="siTitle" class="title">Log in</h2>
+
+      <form class="form" [formGroup]="form" (ngSubmit)="signIn()" novalidate>
+        <div class="field">
+          <label for="email">
+            Email
+          </label>
+          <input id="email" type="email" formControlName="email" placeholder="you@example.com" />
+        </div>
+
+        <div class="field">
+          <label for="password">
+            Password
+          </label>
+          <input id="password" type="password" formControlName="password" placeholder="••••••••" />
+        </div>
+
+        <button class="btn btn-primary" type="submit">
+          Sign in
+        </button>
+      </form>
+
+      <p class="footnote">
+        New here?
+        <a href="#" (click)="goToSignUp(); $event.preventDefault()">Create an account</a>
+      </p>
+    </div>
+
+    <!-- Right (image) -->
+    <div class="panel-right">
+      <div class="right-image">
+        <img src="/assets/signin.png" alt="Decorative" />
+      </div>
+    </div>
+  </div>
+</section>

src/app/homepage/sign-in/sign-in.component.spec.ts

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

src/app/homepage/sign-in/sign-in.component.ts

@@ -0,0 +1,55 @@
+// sign-in.component.ts
+import { Component, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { SignInService } from './sign-in.service';  // Import SignInService
+
+@Component({
+  selector: 'app-sign-in',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, RouterLink],
+  templateUrl: './sign-in.component.html',
+  styleUrls: ['./sign-in.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SignInComponent {
+  @Output() switchToSignUp = new EventEmitter<void>();
+  form: FormGroup;
+
+  constructor(private fb: FormBuilder, private router: Router, private signInService: SignInService) {
+    this.form = this.fb.group({
+      email: ['', [Validators.required, Validators.email]],  // Added email validation
+      password: ['', [Validators.required]]
+    });
+  }
+
+  goToSignUp() {
+    this.switchToSignUp.emit();
+  }
+
+  signIn() {
+    if (this.form.invalid) {
+      console.log("Form is invalid:", this.form.errors);
+      return;
+    }
+
+    const payload = {
+      email: this.form.get('email')?.value,
+      password: this.form.get('password')?.value
+    };
+
+    this.signInService.signIn(payload).subscribe(
+      (response) => {
+        console.log('Login successful:', response);
+        // Navigate to case details or home page after login success
+        this.router.navigate(['/case-details']);
+      },
+      (error) => {
+        console.error('Login failed:', error);
+        alert('Invalid email or password!');
+      }
+    );
+
+  }
+}

src/app/homepage/sign-in/sign-in.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SignInService } from './sign-in.service';
+
+describe('SignInService', () => {
+  let service: SignInService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SignInService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/homepage/sign-in/sign-in.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SignInService {
+
+  constructor(private http: HttpClient) { }
+
+  signIn(payload: any): Observable<any> {
+    return this.http.post('http://127.0.0.1:5000/sign-in', payload);
+  }
+}

src/app/homepage/sign-up/sign-up.component.css

@@ -0,0 +1,245 @@
+:host {
+  display: block
+}
+
+
+
+/* Two-column card */
+.auth-box {
+  width: 49vw;
+  display: grid;
+  grid-template-columns: 1fr;
+  background: #2b1b6b; /* purple base under left panel */
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,.35);
+  position: relative;
+}
+
+/* Right column (image) */
+.panel-right {
+  position: relative;
+  background: radial-gradient(120% 120% at 20% 50%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%);
+}
+
+  .panel-right::before {
+    /* vertical fold shade between left and right */
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 26%);
+    pointer-events: none;
+  }
+
+.right-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 23.9vw;
+}
+
+  .right-image img {
+    width: 100%;
+    display: block
+  }
+
+/* Left column (form) */
+.panel-left {
+  padding: clamp(22px,3.5vw,36px);
+  background: white; /* brighter purple */
+  color: black;
+}
+
+.brand-mark {
+  width: 4vw;
+  margin-bottom: 14px;
+  border: 2px solid #b1b1b17d;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+.title {
+  margin: 0 0 6px;
+  font-size: clamp(22px,3vw,26px);
+  font-weight: 700
+}
+
+.subtitle {
+  margin: 0 0 18px;
+}
+
+.form {
+  display: grid;
+  gap: 12px
+}
+
+.field {
+  display: grid;
+  gap: 6px
+}
+
+label {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+/* Inputs: translucent with subtle border */
+input[type="text"], input[type="password"] {
+  color: #000000;
+  border: 1px solid rgb(0 0 0 / 57%);
+  border-radius: 10px;
+  padding: 11px 12px;
+  outline: none;
+}
+
+input::placeholder {
+  color: #808080
+}
+
+input:focus {
+  border-color: #a78bfa;
+  box-shadow: 0 0 0 3px rgba(167,139,250,.25)
+}
+
+select.input-field {
+  color: #000000;
+  border: 1px solid rgb(0 0 0 / 57%);
+  border-radius: 10px;
+  padding: 11px 12px;
+  outline: none;
+  font-size: 16px;
+  width: 100%;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+select.input-field:focus {
+  border-color: #a78bfa;
+  box-shadow: 0 0 0 3px rgba(167,139,250,.25);
+}
+
+.error {
+  color: red;
+  font-size: 12px
+}
+
+/* Buttons */
+.btn {
+  width: 100%;
+  border-radius: 999px;
+  padding: 12px 18px;
+  cursor: pointer
+}
+
+.btn-primary {
+  background: #0b0f1a;
+  color: #fff;
+  border: none;
+  font-weight: 700
+}
+
+.btn-dark {
+  background: #111827;
+  color: #fff;
+  border: none;
+  margin-top: 8px
+}
+
+.btn[aria-busy="true"] {
+  opacity: .75;
+  cursor: progress
+}
+
+.footnote {
+  margin: 14px 0 0;
+  font-size: 13px;
+}
+
+  .footnote a {
+    color: red;
+    text-decoration: underline
+  }
+
+/* Layout: stack on small, split on >= 900px */
+@media(min-width:900px) {
+  .auth-box {
+    grid-template-columns: 520px 1fr
+  }
+}
+
+.topTitle {
+  display: flex;
+  align-items: center;
+  gap: 21px;
+}
+
+.topHeader {
+  font-size: 1vw;
+}
+
+@keyframes fadeInBackdrop {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+
+.signup-close {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 48px;
+  height: 48px;
+  border: none;
+  background: linear-gradient(135deg, #23272b 60%, #18181b 100%);
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 2.2rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(30,41,59,0.28);
+  z-index: 20;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+  outline: none;
+}
+
+.signup-close:hover {
+  background: linear-gradient(135deg, #333 60%, #23272b 100%);
+  color: #38bdf8;
+  box-shadow: 0 8px 24px #38bdf888;
+}
+
+.signin-close {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 48px;
+  height: 48px;
+  border: none;
+  background: linear-gradient(135deg, #23272b 60%, #18181b 100%);
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 2.2rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(30,41,59,0.28);
+  z-index: 20;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+  outline: none;
+}
+
+.signin-close:hover {
+  background: linear-gradient(135deg, #333 60%, #23272b 100%);
+  color: #38bdf8;
+  box-shadow: 0 8px 24px #38bdf888;
+}
+

src/app/homepage/sign-up/sign-up.component.html

@@ -0,0 +1,98 @@
+<section class="auth-page">
+  <div class="auth-box" role="dialog" aria-labelledby="suTitle">
+    <!-- Left (form) -->
+    <div class="panel-left">
+      <div class="topTitle">
+        <img class="brand-mark" src="/assets/pykara-logo.png" alt="Brand" />
+        <p class="topHeader"><b>Let's get started!</b></p>
+      </div>
+      <h2 id="suTitle" class="title">Create an account</h2>
+
+      <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
+
+        <button class="btn btn-primary" type="submit">
+          Sign up
+        </button>
+        <!-- Name -->
+        <div class="field">
+          <label for="name">
+            Name
+            <small *ngIf="controlHasError('name','required')" class="error">*</small>
+          </label>
+          <input id="name" type="text" placeholder="John"
+                 formControlName="name" [attr.aria-invalid]="controlHasError('name')" class="input-field" />
+          <small *ngIf="controlHasError('name','minlength')" class="error">Enter at least 2 characters.</small>
+        </div>
+
+        <!-- Role dropdown (moved below Name, styled) -->
+        <div class="field">
+          <label for="role">
+            Role
+            <small *ngIf="controlHasError('role','required')" class="error">*</small>
+          </label>
+          <select id="role" formControlName="role"
+                  [attr.aria-invalid]="controlHasError('role')"
+                  class="input-field" required>
+            <option value="">-- Select Role --</option>
+            <option value="teachers">Teachers</option>
+            <option value="lawyers">Lawyers</option>
+            <option value="investigators">Investigators</option>
+            <option value="others">Others</option>
+          </select>
+        </div>
+
+        <!-- Email/Phone (contact) -->
+        <div class="field">
+          <label for="contact">
+            Email
+            <small *ngIf="controlHasError('contact','required')" class="error">*</small>
+          </label>
+          <input id="email" type="text" placeholder="hello@gmail.com" formControlName="email" [attr.aria-invalid]="controlHasError('email')" class="input-field" />
+
+          <!--<input id="contact" type="text" placeholder="hello@gmail.com"
+                 formControlName="contact" [attr.aria-invalid]="controlHasError('contact')" class="input-field" />-->
+          <small *ngIf="controlHasError('contact','pattern')" class="error">Enter a valid email/phone.</small>
+        </div>
+
+        <!-- Password -->
+        <div class="field">
+          <label for="password">
+            Password
+            <small *ngIf="controlHasError('password','required')" class="error">*</small>
+          </label>
+          <input id="password" type="password" placeholder="••••••••"
+                 formControlName="password" [attr.aria-invalid]="controlHasError('password')" />
+          <small *ngIf="controlHasError('password','minlength')" class="error">Use at least 6 characters.</small>
+        </div>
+
+        <!-- Confirm password -->
+        <div class="field">
+          <label for="confirmPassword">
+            Confirm password
+            <small *ngIf="controlHasError('confirmPassword','required')" class="error">*</small>
+          </label>
+          <input id="confirmPassword" type="password" placeholder="••••••••"
+                 formControlName="confirmPassword" [attr.aria-invalid]="showPwdMismatch()" />
+          <small *ngIf="showPwdMismatch()" class="error">Passwords do not match.</small>
+        </div>
+
+        <!--<button class="btn btn-primary" type="submit" [disabled]="form.invalid || submitting()" [attr.aria-busy]="submitting()">
+    Sign up1
+  </button>-->
+
+        <p class="footnote">
+          Already have an account?
+          <!-- CHANGED: Use click handler instead of routerLink -->
+          <a href="#" (click)="goToLogin(); $event.preventDefault()">Log in</a>
+        </p>
+      </form>
+    </div>
+
+    <!-- Right (image) -->
+    <div class="panel-right">
+      <div class="right-image">
+        <img src="/assets/signup.png" alt="Decorative" />
+      </div>
+    </div>
+  </div>
+</section>

src/app/homepage/sign-up/sign-up.component.spec.ts

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

src/app/homepage/sign-up/sign-up.component.ts

@@ -0,0 +1,117 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators, AbstractControl } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { SignUpService } from './sign-up.service';  // Import the SignUpService
+
+@Component({
+  selector: 'app-sign-up',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, RouterLink],
+  templateUrl: './sign-up.component.html',
+  styleUrls: ['./sign-up.component.css']
+})
+export class SignUpComponent {
+  form: FormGroup;
+  private isSubmitting = false;
+
+  @Output() switchToSignIn = new EventEmitter<void>();
+
+  constructor(private fb: FormBuilder, private router: Router, private signUpService: SignUpService) {  // Inject SignUpService
+    this.form = this.fb.group({
+      name: ['', [Validators.required, Validators.minLength(2)]],
+      email: ['', [
+        Validators.required,
+        Validators.pattern(/(^[^@]+@[^@]+\.[^@]+$)|(^\+?\d[\d\-\s]{8,14}\d$)/)
+      ]],
+      //gender: ['', [Validators.required]],
+      password: ['', [Validators.required, Validators.minLength(6)]],
+      confirmPassword: ['', [Validators.required]],
+      role: ['', [Validators.required]],
+    }, { validators: [this.passwordsMatchValidator] });
+  }
+
+  control(path: string): AbstractControl | null { return this.form.get(path); }
+
+  controlHasError(path: string, error?: string): boolean {
+    const c = this.control(path);
+    if (!c) return false;
+    return error ? !!(c.touched && c.errors?.[error]) : !!(c.touched && c.invalid);
+  }
+
+  showPwdMismatch(): boolean {
+    const pw = this.control('password');
+    const cpw = this.control('confirmPassword');
+    const groupMismatch = this.form.errors?.['passwordMismatch'];
+    return !!(pw && cpw && (cpw.touched || pw.touched) && groupMismatch);
+  }
+
+  passwordsMatchValidator(group: AbstractControl) {
+    const pw = group.get('password')?.value;
+    const cpw = group.get('confirmPassword')?.value;
+    return pw && cpw && pw === cpw ? null : { passwordMismatch: true };
+  }
+
+  
+
+  async submit() {
+    // Confirm button click
+    alert("Sign-Up button clicked!");
+    console.log("Sign-Up button clicked!");
+
+    // Mark all form controls as touched to trigger validation
+    this.form.markAllAsTouched();
+
+    // Check if the form is invalid
+    if (this.form.invalid) {
+      console.log("Form is invalid:");
+
+      // Log individual control states for debugging
+      Object.keys(this.form.controls).forEach(controlName => {
+        const control = this.form.get(controlName);
+        if (control?.invalid) {
+          console.log(`${controlName} is invalid. Errors:`, control?.errors);
+        }
+      });
+      return;
+    }
+
+    try {
+      // Prepare the payload to send to the backend
+      const payload = {
+        name: this.control('name')?.value,
+        email: this.control('email')?.value,
+        //gender: this.control('gender')?.value,
+        password: this.control('password')?.value,
+        role: this.control('role')?.value
+      };
+
+      console.log("Form data before submission:", this.form.value);
+      console.log("Payload to send:", payload);
+
+      // Make the HTTP request
+      await this.signUpService.signUp(payload).toPromise();
+      console.log("Sign-up request sent successfully!");
+
+      // On success, navigate to Sign-In page
+      this.router.navigateByUrl('/auth/signin');
+    } catch (error) {
+      console.error("Error occurred during sign-up:", error); // Log any errors from the API call
+    }
+  }
+
+
+
+  
+
+  navigateHome() { this.router.navigateByUrl('/'); }
+
+  goToLogin() {
+    this.switchToSignIn.emit(); // ← Emit event instead of router navigation
+  }
+
+  tr(key: string): string {
+    const map: Record<string, string> = { title: 'Create your account', subtitle: 'Join to continue' };
+    return map[key] || '';
+  }
+}