deploy app

.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

.gitattributes

@@ -33,3 +33,13 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text
+*.svg filter=lfs diff=lfs merge=lfs -text
+*.otf filter=lfs diff=lfs merge=lfs -text
+*.ttf filter=lfs diff=lfs merge=lfs -text
+*.woff filter=lfs diff=lfs merge=lfs -text
+*.woff2 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,42 @@
+# 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/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

.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:4200",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "localhost (Chrome)",
+      "url": "http://localhost:4200",
+      "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"
+          }
+        }
+      }
+    }
+  ]
+}

README.md

@@ -1,10 +1,41 @@
 ---
-title: Py Match
-emoji: 😻
-colorFrom: yellow
-colorTo: purple
+title: PY-Match
+emoji: 🎯
+colorFrom: indigo
+colorTo: blue
 sdk: static
-pinned: false
+app_build_command: npm ci && npm run build -- --configuration production
+app_file: dist/py-match/index.html
+fullWidth: true
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+
+
+# PyMatch
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

angular.json

@@ -0,0 +1,103 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "py-match": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/py-match",
+            "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": "4.5kb",
+                  "maximumError": "6kb"
+                }
+              ],
+              "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": "py-match:build:production"
+            },
+            "development": {
+              "browserTarget": "py-match:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "py-match: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",
+              "node_modules/@fortawesome/fontawesome-free/css/all.css"
+            ],
+            "scripts": [],
+            "karmaConfig": "karma.conf.js"
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "c88a5f95-78ff-4d1a-be52-0edf479dc3e1"
+  }
+}

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'
+  });
+};
+

nuget.config

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <packageSources>
+    <clear />
+    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
+  </packageSources>
+  <disabledPackageSources>
+    <clear />
+  </disabledPackageSources>
+</configuration>

obj/Debug/py-match.esproj.FileListAbsolute.txt

@@ -0,0 +1,7 @@
+D:\py-match\py-match\py-match\obj\Debug\py-match.esproj.CoreCompileInputs.cache
+D:\py-match\nw\New folder\py-match\py-match\py-match\obj\Debug\py-match.esproj.CoreCompileInputs.cache
+C:\Users\Admin\Desktop\py-match\py-match\py-match\obj\Debug\py-match.esproj.CoreCompileInputs.cache
+C:\Users\Admin\Desktop\Learning\py-match\py-match\py-match\py-match\obj\Debug\py-match.esproj.CoreCompileInputs.cache
+D:\py-match\py-match\py-match\py-match\py-match\py-match\obj\Debug\py-match.esproj.CoreCompileInputs.cache
+D:\py-match\py-match\py-match\py-match\obj\Debug\py-match.esproj.CoreCompileInputs.cache
+D:\py-match\Frontend\py-match\py-match\py-match\obj\Debug\py-match.esproj.CoreCompileInputs.cache

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "py-match",
+  "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",
+    "@fortawesome/fontawesome-free": "^7.0.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",
+    "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",
+    "typescript": "~5.1.3"
+  }
+}

py-match.esproj

@@ -0,0 +1,10 @@
+<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.271090-alpha">
+  <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-match\</BuildOutputFolder>
+  </PropertyGroup>
+</Project>

py-match.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>

src/app/api.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../environments/environment';
+
+@Injectable({ providedIn: 'root' })
+export class ApiService {
+  private base = environment.apiBase;
+
+  constructor(private http: HttpClient) { }
+
+  start(body = { n_questions: 10, batch_size: 5, domain: 'marriage' }) {
+    return this.http.post<any>(`${this.base}/q/start`, body);
+  }
+
+  next(session_id: string, selected_color: 'blue' | 'green' | 'red' | 'yellow') {
+    return this.http.post<any>(`${this.base}/q/next`, { session_id, selected_color });
+  }
+}

src/app/app-routing.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { IntroPageComponent } from './intro-page/intro-page.component';
+import { QuestionAnswerComponent } from './question-answer/question-answer.component';
+import { QuizComponent } from './quiz/quiz.component';
+
+const routes: Routes = [
+  {
+    path: 'auth',
+    children: [
+      {
+        path: 'signin',
+        loadComponent: () =>
+          import('./auth/sign-in/sign-in.component').then(m => m.SignInComponent),
+      },
+      {
+        path: 'signup',
+        loadComponent: () =>
+          import('./auth/sign-up/sign-up.component').then(m => m.SignUpComponent),
+      },
+    ],
+  },
+
+  { path: '', component: IntroPageComponent, pathMatch: 'full' },
+
+  { path: 'sign-in', redirectTo: 'auth/signin', pathMatch: 'full' },
+  { path: 'sign-up', redirectTo: 'auth/signup', pathMatch: 'full' },
+  { path: 'question-answer', component: QuestionAnswerComponent },
+  { path: 'quiz', component: QuizComponent },
+  { path: '**', redirectTo: '' },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -0,0 +1 @@
+<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 'py-match'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('py-match');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('py-match app is running!');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,79 @@
+
+//import { Component } from '@angular/core';
+//import { FormsModule } from '@angular/forms';  // Import FormsModule
+//import { CommonModule } from '@angular/common'; // Import CommonModule
+
+//import { IntroPageComponent } from './intro-page/intro-page.component';
+//import { SignInComponent } from './auth/sign-in/sign-in.component';
+//import { SignUpComponent } from './auth/sign-up/sign-up.component';
+//import { QuestionAnswerComponent } from './question-answer/question-answer.component';
+//import { QuizComponent } from './quiz/quiz.component';
+//import { ApiService } from './api.service';
+//import { RouterOutlet } from '@angular/router';
+//type Color = 'blue' | 'green' | 'red' | 'yellow';
+
+//@Component({
+//  selector: 'app-root',
+//  standalone: true,
+//  imports: [RouterOutlet, QuestionAnswerComponent, IntroPageComponent, QuizComponent,
+//    SignInComponent,
+//    SignUpComponent,
+//    FormsModule,   // Add FormsModule here
+//    CommonModule] ,  // Add CommonModule here], 
+//  templateUrl: './app.component.html',
+//  styleUrls: ['./app.component.css']
+//})
+//export class AppComponent {
+//  title = 'py-match';
+//  sessionId: string | null = null;
+//  index = 0;
+//  total = 0;
+//  question = '';
+//  options: { text: string, color: Color }[] = [];
+//  progress?: Record<Color, number>; // percentages
+
+//  constructor(private api: ApiService) { }
+
+//  start() {
+//    this.api.start({ n_questions: 10, batch_size: 5, domain: 'marriage' })
+//      .subscribe(res => {
+//        this.sessionId = res.session_id;
+//        this.index = res.index;
+//        this.total = res.total;
+//        this.question = res.question;
+//        this.options = res.options;
+//        this.progress = undefined; // first question has no progress yet
+//      });
+//  }
+
+//  answer(color: Color) {
+//    if (!this.sessionId) { return; }
+//    this.api.next(this.sessionId, color).subscribe(res => {
+//      if (res.done) {
+//        alert('Finished! Check console for final mix.');
+//        console.log('Final mix (percent):', res.mix);
+//        return;
+//      }
+//      this.index = res.index;
+//      this.total = res.total;
+//      this.question = res.question;
+//      this.options = res.options;
+//      this.progress = res.progress; // already in percentages (from your backend change)
+//    });
+//  }
+//}
+
+
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'py-match';
+}

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

@@ -0,0 +1,134 @@
+:host {
+  display: block
+}
+
+
+.auth-box {
+  width: 49vw;
+  display: grid;
+  grid-template-columns: 1fr;
+  background: #2b1b6b;
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,.35)
+}
+
+.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 {
+    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 img {
+  max-width: 100%;
+  height: auto;
+  display: block
+}
+
+.panel-left {
+  padding: clamp(22px,3.5vw,36px);
+  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
+}
+
+.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
+  }
+
+@media(min-width:900px) {
+  .auth-box {
+    grid-template-columns: 520px 1fr
+  }
+}
+
+.topTitle {
+  display: flex;
+  align-items: center;
+  gap: 21px;
+}
+
+.topHeader {
+  font-size: 1vw;
+}

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

@@ -0,0 +1,52 @@
+<section class="auth-page">
+  <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)="submit()" novalidate>
+        <div class="field">
+          <label for="email">
+            Email
+            <small *ngIf="controlHasError('email','required')" class="error">*</small>
+          </label>
+          <input id="email" type="email" formControlName="email" placeholder="you@example.com"
+                 [attr.aria-invalid]="controlHasError('email')" />
+          <small *ngIf="controlHasError('email','email')" class="error">Enter a valid email.</small>
+        </div>
+
+        <div class="field">
+          <label for="password">
+            Password
+            <small *ngIf="controlHasError('password','required')" class="error">*</small>
+          </label>
+          <input id="password" type="password" formControlName="password" placeholder="••••••••"
+                 [attr.aria-invalid]="controlHasError('password')" />
+          <small *ngIf="controlHasError('password','minlength')" class="error">Use at least 6 characters.</small>
+        </div>
+
+        <button class="btn btn-primary" type="submit"
+                [disabled]="form.invalid || submitting()" [attr.aria-busy]="submitting()">
+          Sign in
+        </button>
+
+        <p class="footnote">
+          New here?
+          <!-- Use click handler instead of routerLink -->
+          <a href="#" (click)="goToSignUp(); $event.preventDefault()">Create an account</a>
+        </p>
+      </form>
+    </div>
+
+    <!-- Right (image) -->
+    <div class="panel-right">
+      <div class="right-image">
+        <img src="/assets/user.png" alt="Decorative" />
+      </div>
+    </div>
+  </div>
+</section>

src/app/auth/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/auth/sign-in/sign-in.component.ts

@@ -0,0 +1,63 @@
+import { Component, ChangeDetectionStrategy, signal, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+
+@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 {
+  submitting = signal(false);
+  form: FormGroup;
+
+  @Output() switchToSignUp = new EventEmitter<void>();
+  @Output() signInSuccess = new EventEmitter<void>();
+
+  constructor(private fb: FormBuilder, private router: Router) {
+    this.form = this.fb.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required, Validators.minLength(8)]],
+      remember: [true]
+    });
+  }
+
+  navigateHome() {
+    this.router.navigate(['/']);
+  }
+
+  goToSignUp() {
+    this.switchToSignUp.emit();
+  }
+
+  controlHasError(name: string, key?: string) {
+    const c = this.form.get(name);
+    if (!c) return false;
+    if (!key) return c.invalid && (c.dirty || c.touched);
+    return c.hasError(key) && (c.dirty || c.touched);
+  }
+
+  async submit() {
+    if (this.form.invalid) {
+      this.form.markAllAsTouched();
+      return;
+    }
+    this.submitting.set(true);
+    try {
+      const payload = this.form.value;
+      console.log('SIGN IN payload', payload);
+
+      // Emit success event instead of alert
+      this.signInSuccess.emit();
+
+      // Optional: You can also navigate or do other actions here
+      // this.router.navigate(['/question-answer']);
+    } finally {
+      this.submitting.set(false);
+    }
+  }
+}

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

@@ -0,0 +1,147 @@
+:host {
+  display: block
+}
+
+/*.auth-page {
+  min-height: 100svh;
+  display: grid;
+  place-items: center;
+  padding: clamp(16px,3vw,24px);
+  background: linear-gradient(135deg,#5b21b6 0%,#7c3aed 50%,#4c1d95 100%);
+}*/
+
+.auth-box {
+  width: 49vw;
+  display: grid;
+  grid-template-columns: 1fr;
+  background: #2b1b6b;
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,.35);
+}
+
+.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 {
+    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;
+}
+
+  .right-image img {
+    max-width: 100%;
+    height: auto;
+    display: block
+  }
+
+.panel-left {
+  padding: clamp(22px,3.5vw,36px);
+  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
+}
+
+.form {
+  display: grid;
+  gap: 12px
+}
+
+.field {
+  display: grid;
+  gap: 6px
+}
+
+label {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+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)
+}
+
+.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
+  }
+
+@media(min-width:900px) {
+  .auth-box {
+    grid-template-columns: 520px 1fr
+  }
+}
+
+.topTitle {
+  display: flex;
+  align-items: center;
+  gap: 21px;
+}
+
+.topHeader {
+  font-size: 1vw;
+}

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

@@ -0,0 +1,76 @@
+<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 class="form" [formGroup]="form" (ngSubmit)="submit()" novalidate>
+        <!-- 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')" />
+          <small *ngIf="controlHasError('name','minlength')" class="error">Enter at least 2 characters.</small>
+        </div>
+
+        <!-- Email/Phone (contact) -->
+        <div class="field">
+          <label for="contact">
+            Email
+            <small *ngIf="controlHasError('contact','required')" class="error">*</small>
+          </label>
+          <input id="contact" type="text" placeholder="hello@gmail.com"
+                 formControlName="contact" [attr.aria-invalid]="controlHasError('contact')" />
+          <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 up
+        </button>
+
+        <p class="footnote">
+          Already have an account?
+          <!-- 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/user.png" alt="Decorative" />
+      </div>
+    </div>
+  </div>
+</section>

src/app/auth/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/auth/sign-up/sign-up.component.ts

@@ -0,0 +1,100 @@
+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, SignupPayload } from './sign-up.service';
+
+@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>();
+  @Output() signUpSuccess = new EventEmitter<void>();
+
+  constructor(private fb: FormBuilder, private router: Router, private signupService: SignupService) {
+    this.form = this.fb.group({
+      name: ['', [Validators.required, Validators.minLength(2)]],
+      contact: ['', [Validators.required, Validators.pattern(/(^[^\s@]+@[^\s@]+\.[^\s@]+$)|(^\+?\d[\d\-\s]{8,14}\d$)/)]],
+      password: ['', [Validators.required, Validators.minLength(6)]],
+      confirmPassword: ['', [Validators.required]],
+    }, { validators: [this.passwordsMatchValidator] });
+  }
+
+  control(path: string): AbstractControl | null {
+    return this.form.get(path);
+  }
+
+  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 };
+  }
+
+  submitting(): boolean {
+    return this.isSubmitting;
+  }
+
+  async submit() {
+    this.form.markAllAsTouched();
+
+    if (this.form.invalid) {
+      return;
+    }
+
+    const payload: SignupPayload = {
+      name: this.control('name')?.value,
+      email: this.control('contact')?.value,
+      password: this.control('password')?.value
+    };
+
+    this.isSubmitting = true;
+
+    try {
+      const res = await this.signupService.signup(payload).toPromise();
+      if (res && res.message) {
+        alert('Success: ' + res.message);
+        this.signUpSuccess.emit(); // Emit success instead of navigating
+      } else if (res && res.error) {
+        alert('Signup failed: ' + res.error);
+      } else {
+        alert('Unexpected response');
+      }
+    } catch (err: any) {
+      console.error('Signup error:', err);
+      alert('Signup failed due to server or network error.');
+    } finally {
+      this.isSubmitting = false;
+    }
+  }
+
+  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);
+  }
+
+  navigateHome() { this.router.navigateByUrl('/'); }
+
+  goToLogin() {
+    this.switchToSignIn.emit();
+  }
+
+  tr(key: string): string {
+    const map: Record<string, string> = { title: 'Create your account', subtitle: 'Join to continue' };
+    return map[key] || '';
+  }
+}

src/app/auth/sign-up/sign-up.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Observable, catchError, throwError } from 'rxjs';
+
+import { environment } from '../../../environments/environment';
+export interface SignupPayload {
+  name: string;
+  email: string;  // email or phone
+
+  password: string;
+}
+
+export interface SignupResponse {
+  message?: string;  // success message from backend
+  error?: string;    // error message from backend
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SignupService {
+
+//  private apiUrl = 'http://localhost:5000/api/signup'; // Replace with your backend URL
+  private apiUrl = 'http://localhost:5000/api'; // Replace with your backend URL
+  //private base = environment.apiBase; // e.g., http://192.168.29.27:5000
+  constructor(private http: HttpClient) { }
+
+  signup(payload: SignupPayload): Observable<SignupResponse> {
+    return this.http.post<SignupResponse>(`${this.apiUrl}/signup`, payload).pipe(
+      catchError(this.handleError)
+    );
+  }
+
+  private handleError(error: HttpErrorResponse) {
+    return throwError(() => new Error(error.message || 'Something went wrong'));
+  }
+}

src/app/intro-page/intro-page.component.css

@@ -0,0 +1,380 @@
+:host {
+  display: block;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+  .skip-link:focus {
+    left: 16px;
+    top: 12px;
+    width: auto;
+    height: auto;
+    padding: 8px 10px;
+    background: #fff;
+    color: #000;
+    border-radius: 6px;
+    z-index: 10;
+  }
+
+.page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: url(/assets/4.png) no-repeat center center fixed;
+  background-size: cover;
+  color: #e5e7eb;
+  justify-content: space-around;
+  gap: 6vw;
+}
+
+/* Topbar */
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: 54vw;
+  width: 100%;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.brand__logo {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background: #00ff88;
+}
+
+.brand__name {
+  letter-spacing: 3.2px;
+  font-size: 2.5vw;
+  font-family: Roliana;
+  font-weight: lighter;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Controls / buttons */
+.select {
+  background: #0b0f1a;
+  color: #e5e7eb;
+  border: 1px solid #2b3246;
+  border-radius: 10px;
+  padding: 8px 10px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: #0b0f1a;
+  color: #e5e7eb;
+  border: 1px solid #2b3246;
+  border-radius: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+  text-decoration: none;
+  border: 2px solid #f3a54c;
+}
+
+  .btn:hover {
+    border-color: #00ff88;
+  }
+
+.btn-primary {
+  background: #f3a54c;
+  color: #0b0f1a;
+  border: none;
+  font-weight: 700;
+}
+
+.btn-ghost {
+  background: #0b0f1a;
+}
+
+/*.btn-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}*/
+
+  .btn-disabled:hover {
+    border-color: #f3a54c !important;
+  }
+
+/* Hero */
+.hero {
+  margin-left: 5vw;
+}
+
+.hero__content {
+  max-width: 620px;
+}
+
+.hero__title {
+  margin: 0 0 10px;
+  font-size: clamp(26px, 4.2vw, 44px);
+  line-height: 1.12;
+  font-weight: 800;
+}
+
+.hero__text {
+  color: #b9c2d0;
+  margin: 0 0 18px;
+  font-size: clamp(14px, 2vw, 16px);
+}
+
+.cta {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+/* Footer */
+.footer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-left: 5vw;
+  font-size: 0.7vw;
+}
+
+  .footer a {
+    text-decoration: unset;
+    align-items: center;
+    border: 2px solid #f3a54c;
+    color: white;
+    border-radius: 2vw;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, .25);
+    background: rgba(11, 15, 26, 0.6);
+    color: #cfe8ff;
+    cursor: pointer;
+    padding: 0 4px;
+  }
+
+    .footer a i {
+      margin-right: 2px;
+      line-height: 1;
+    }
+
+.about-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  border: 1px solid rgba(255,255,255,.25);
+  background: rgba(11, 15, 26, 0.6);
+  color: #cfe8ff;
+  cursor: pointer;
+}
+
+  .about-btn:hover, .footer a:hover {
+    border-color: #00ff88;
+  }
+
+/* High contrast mode */
+.page.high-contrast {
+  background: #000;
+  color: #fff;
+}
+
+  .page.high-contrast a {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  .page.high-contrast .card, .page.high-contrast .banner {
+    background: #000;
+    border: 2px solid #fff;
+  }
+
+  .page.high-contrast .btn, .page.high-contrast .select {
+    border-color: #fff !important;
+  }
+
+.brand__logo-img {
+  background: white;
+  max-width: 5vw;
+  height: auto;
+  border-radius: 1vw;
+  margin: 0.5vw;
+}
+
+.brand__link {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* AUTH Modal overlay */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgb(255 255 255 / 34%);
+  display: grid;
+  place-items: center;
+  z-index: 1000;
+}
+
+button.modal-close {
+  border: 3px solid #ff0000;
+  background: transparent;
+  color: white;
+  position: relative;
+  left: 47vw;
+  top: 1.8vw;
+  z-index: 11;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+
+
+  /* Ensure the auth components fit properly in the modal */
+  .modal-panel app-sign-in,
+  .modal-panel app-sign-up {
+    display: block;
+    width: 100%;
+  }
+
+
+/* ABOUT Modal (new) */
+.about-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgb(255 255 255 / 34%);
+  z-index: 1100; /* above auth backdrop */
+}
+
+.about-modal {
+  position: fixed;
+  z-index: 1101; /* above auth modal */
+  inset: 50% auto auto 50%;
+  transform: translate(-50%, -50%);
+  width: min(720px, 92vw);
+  max-height: 80vh;
+  overflow: auto;
+  background: #ffffff;
+  color: #111;
+  border-radius: 12px;
+  box-shadow: 0 20px 50px rgba(0,0,0,.25);
+  outline: none;
+}
+
+.about-modal__header,
+.about-modal__footer {
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(0,0,0,.08);
+  display: flex;
+}
+
+.about-modal__footer {
+  border-top: 1px solid rgba(0,0,0,.08);
+  border-bottom: none;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.about-modal__body {
+  padding: 16px 20px;
+  line-height: 1.6;
+}
+
+.about-close {
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  font-size: 20px;
+  cursor: pointer;
+  color: #111;
+}
+
+/* Make the embedded auth components look like panels */
+/*:host ::ng-deep app-sign-in .auth-page,
+:host ::ng-deep app-sign-up .auth-page {
+  min-height: auto !important;
+  padding: 0 !important;
+  background: transparent !important;
+}*/
+
+/*:host ::ng-deep app-sign-in .auth-box,
+:host ::ng-deep app-sign-up .auth-box {
+  width: min(920px, 92vw) !important;
+  margin: 0 auto !important;
+}*/
+
+/* Optional: if you want a tighter width for Sign-In 
+:host ::ng-deep app-sign-in .auth-box {
+  width: min(720px, 92vw) !important;
+}
+*/
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgb(255 255 255 / 34%);
+  display: grid;
+  place-items: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.modal-panel {
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/app/intro-page/intro-page.component.html

@@ -0,0 +1,100 @@
+<a class="skip-link" href="#main">Skip to content</a>
+
+<section class="page">
+
+  <!-- Top bar -->
+  <header class="topbar" role="banner" aria-label="Top navigation">
+    <div class="brand" aria-label="Application name">
+      <img src="assets/pykara-logo.png" alt="Pykara Technologies logo" class="brand__logo-img" />
+      <span class="brand__name">{{ tr('brand') }}</span>
+    </div>
+
+    <nav class="actions" aria-label="Actions">
+      <!-- CHANGED: open modal instead of routerLink -->
+      <button type="button" class="btn btn-primary" (click)="openSignUp()">{{ tr('signup') }}</button>
+      <button type="button" class="btn btn-ghost" (click)="openSignIn()">{{ tr('signin') }}</button>
+    </nav>
+  </header>
+
+  <!-- Hero (unchanged) -->
+  <main id="main" class="hero" role="main">
+    <div class="hero__content">
+      <h1 class="hero__title">{{ tr('tagline') }}</h1>
+      <p class="hero__text">{{ tr('subtext') }}</p>
+      <div class="cta">
+        <!-- Updated: Add disabled attribute and tooltip -->
+        <a routerLink="/question-answer"
+           class="btn btn-primary"
+           [class.btn-disabled]="!isSignedIn"
+           [attr.aria-disabled]="!isSignedIn"
+           [title]="!isSignedIn ? 'Please sign in first' : ''">
+          {{ tr('getStarted') }}
+        </a>
+        <small *ngIf="!isSignedIn" style="display: block; margin-top: 8px; color: #ffa500;">
+          Please sign in to get started
+        </small>
+      </div>
+    </div>
+  </main>
+
+  <!-- Footer (updated) -->
+  <footer class="footer" aria-label="Footer">
+    <a href="https://pykara.net/"
+       target="_blank"
+       rel="noopener noreferrer"
+       aria-label="Visit Pykara website">
+      <i class="fa-solid fa-globe" aria-hidden="true"></i>
+      <span style="font-family: sans-serif">Visit Pykara</span>
+    </a>
+
+    <!-- About us button -->
+    <button type="button"
+            class="about-btn"
+            (click)="openAbout()"
+            aria-haspopup="dialog"
+            aria-controls="aboutDialog"
+            [attr.aria-expanded]="isAboutOpen ? 'true' : 'false'">
+      <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
+      <span>About us</span>
+    </button>
+  </footer>
+
+  <!-- AUTH MODAL OVERLAY (unchanged) -->
+  <div class="modal-backdrop" *ngIf="modal" (click)="backdropClick($event)">
+    <div class="modal-panel modal-panel--white"
+         role="dialog"
+         aria-modal="true"
+         [attr.aria-label]="modal === 'signin' ? 'Sign in' : 'Sign up'">
+      <button type="button" class="modal-close" (click)="closeModal()" aria-label="Close">×</button>
+
+      <app-sign-in *ngIf="modal === 'signin'"
+                   (switchToSignUp)="openSignUp()"
+                   (signInSuccess)="handleSignInSuccess()"></app-sign-in>
+      <app-sign-up *ngIf="modal === 'signup'"
+                   (switchToSignIn)="openSignIn()"
+                   (signUpSuccess)="handleSignUpSuccess()"></app-sign-up> <!-- Add this line -->
+    </div>
+  </div>
+
+  <!-- ABOUT MODAL OVERLAY (new) -->
+  <div class="about-backdrop" *ngIf="isAboutOpen" (click)="closeAbout()" tabindex="-1"></div>
+
+  <div class="about-modal"
+       *ngIf="isAboutOpen"
+       role="dialog"
+       aria-modal="true"
+       aria-labelledby="aboutTitle"
+       id="aboutDialog"
+       tabindex="-1">
+    <div class="about-modal__header">
+      <h2 id="aboutTitle">About Py-Match</h2>
+      <button class="about-close" (click)="closeAbout()" aria-label="Close dialog">×</button>
+    </div>
+
+    <div class="about-modal__body">
+      <p><strong>Py-Match</strong> is an AI-driven personality profiling and matching system that models human traits using four colors — Red, Blue, Green, and Yellow. It conducts an adaptive Q&amp;A session where each response secretly maps to a color; the engine then computes a percentage distribution across the four colors to describe the user’s dominant and supporting traits.</p>
+      <p>The platform applies these profiles to practical scenarios — such as marriage compatibility, recruitment, leadership assessment, and personal development — by comparing user profiles to role templates with weighted color mixes. The system architecture includes a web/mobile UI, an AI question generator, a scoring and profile calculator, a matching engine, and secure data storage. The design emphasizes simplicity, scalability, localization, and privacy.</p>
+    </div>
+  </div>
+
+</section>

src/app/intro-page/intro-page.component.spec.ts

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

src/app/intro-page/intro-page.component.ts

@@ -0,0 +1,92 @@
+import { Component, ChangeDetectionStrategy, HostListener } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { SignInComponent } from '../auth/sign-in/sign-in.component';
+import { SignUpComponent } from '../auth/sign-up/sign-up.component';
+
+type AuthModal = 'signin' | 'signup' | null;
+
+@Component({
+  selector: 'app-intro-page',
+  standalone: true,
+  imports: [CommonModule, RouterLink, SignInComponent, SignUpComponent],
+  templateUrl: './intro-page.component.html',
+  styleUrls: ['./intro-page.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IntroPageComponent {
+  modal: AuthModal = null;
+  isSignedIn = false;
+  isAboutOpen = false;
+
+  // --- Auth modal handlers ---
+  openSignIn(): void {
+    this.modal = 'signin';
+    document.body.style.overflow = 'hidden';
+  }
+
+  openSignUp(): void {
+    this.modal = 'signup';
+    document.body.style.overflow = 'hidden';
+  }
+
+  closeModal(): void {
+    this.modal = null;
+    if (!this.isAboutOpen) document.body.style.overflow = '';
+  }
+
+
+  // Called by child components on success
+  handleSignInSuccess(): void {
+    this.isSignedIn = true;
+    this.closeModal();
+  }
+
+  // Handle sign-up success - switch to sign-in modal
+  handleSignUpSuccess(): void {
+    // Close sign-up and open sign-in
+    this.modal = 'signin';
+    // You can optionally show a success message here
+    alert('Sign up successful! Please sign in to continue.');
+  }
+
+  backdropClick(e: MouseEvent): void {
+    if ((e.target as HTMLElement).classList.contains('modal-backdrop')) {
+      this.closeModal();
+    }
+  }
+
+  // --- About modal handlers ---
+  openAbout(): void {
+    this.isAboutOpen = true;
+    document.body.style.overflow = 'hidden';
+    // Move focus into the dialog for accessibility
+    setTimeout(() => document.getElementById('aboutDialog')?.focus(), 0);
+  }
+
+  closeAbout(): void {
+    this.isAboutOpen = false;
+    // If Auth is also open, keep scroll locked. Otherwise restore.
+    if (!this.modal) document.body.style.overflow = '';
+  }
+
+  // --- Global ESC handler closes whichever is open ---
+  @HostListener('document:keydown.escape')
+  onEsc(): void {
+    if (this.modal) this.closeModal();
+    else if (this.isAboutOpen) this.closeAbout();
+  }
+
+  // Your existing i18n helper, keep as-is if already present:
+  tr(key: string): string {
+    const dict = {
+      brand: 'Py-Match',
+      signup: 'Sign up',
+      signin: 'Sign in',
+      tagline: 'Better match starts here',
+      subtext: 'Designed for trust, focused on fit.',
+      getStarted: 'Get started'
+    };
+    return dict[key as keyof typeof dict] ?? key;
+  }
+}

src/app/llm-quiz/llm-quiz.component.css

@@ -0,0 +1,274 @@
+/*.quiz-wrap {
+  max-width: 880px;
+  margin: 20px auto;
+  padding: 12px;
+  font-family: system-ui, Arial, sans-serif;
+}
+
+h2 {
+  margin: 0 0 12px;
+}
+
+.panel, .qcard, .result {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 12px;
+  background: #fff;
+  margin-bottom: 14px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+  .row.column {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .row label {
+    width: 180px;
+    font-weight: 600;
+  }
+
+  .row input[type="number"], .row select, textarea {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+  }
+
+.actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+  .actions button {
+    padding: 8px 14px;
+    border: 0;
+    border-radius: 6px;
+    background: #111827;
+    color: #fff;
+    cursor: pointer;
+  }
+
+    .actions button[disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+.error {
+  color: #b91c1c;
+  margin-top: 8px;
+}
+
+.loading {
+  margin-top: 10px;
+}
+
+.meta {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  color: #374151;
+  font-size: 13px;
+}
+
+.question {
+  font-size: 18px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.options {
+  display: grid;
+  gap: 8px;
+}
+
+.opt {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  border: 1px solid #eee;
+  border-radius: 6px;
+}
+
+  .opt input {
+    transform: scale(1.1);
+  }
+
+.badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  color: #fff;
+}
+
+  .badge.blue {
+    background: #2563eb;
+  }
+
+  .badge.green {
+    background: #059669;
+  }
+
+  .badge.red {
+    background: #dc2626;
+  }
+
+  .badge.yellow {
+    background: #d97706;
+  }
+
+.mix, .result {
+  margin-top: 14px;
+}
+
+.bar {
+  display: grid;
+  grid-template-columns: 90px 1fr 48px;
+  align-items: center;
+  gap: 8px;
+  margin: 6px 0;
+}
+
+.bar-label {
+  font-weight: 600;
+}
+
+.bar-track {
+  height: 10px;
+  background: #f3f4f6;
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.bar-fill {
+  height: 100%;
+}
+
+  .bar-fill.blue {
+    background: #93c5fd;
+  }
+
+  .bar-fill.green {
+    background: #86efac;
+  }
+
+  .bar-fill.red {
+    background: #fca5a5;
+  }
+
+  .bar-fill.yellow {
+    background: #fde68a;
+  }
+
+.bar-val {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+*/
+
+
+.panel {
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 8px 0;
+}
+
+  .row label {
+    width: 160px;
+  }
+
+.actions {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+}
+
+.loader-overlay {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgba(0,0,0,0.08);
+}
+
+.question-card {
+  padding: 16px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+}
+
+.q-meta {
+  display: flex;
+  gap: 16px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.q-text {
+  margin: 8px 0 16px;
+}
+
+.options {
+  display: grid;
+  gap: 8px;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.opt-color {
+  color: #888;
+}
+
+.progress, .result {
+  margin-top: 16px;
+}
+
+.bar {
+  display: grid;
+  grid-template-columns: 80px 1fr 60px;
+  align-items: center;
+  gap: 8px;
+  margin: 6px 0;
+}
+
+.bar-track {
+  height: 10px;
+  background: #eee;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.bar-fill {
+  height: 100%;
+  background: #7dafff;
+}
+
+.bar-val {
+  text-align: right;
+}
+
+.empty {
+  color: #777;
+  margin-top: 16px;
+}

src/app/llm-quiz/llm-quiz.component.html

@@ -0,0 +1,142 @@
+<!-- Control panel -->
+<!--<section class="panel">
+  <div class="row">
+    <label>User ID</label>
+    <input type="text" [(ngModel)]="userId" placeholder="e.g. 1" />
+  </div>
+
+  <div class="row">
+    <label>Role</label>
+    <select [(ngModel)]="role">
+      <option value="interview">interview</option>
+      <option value="marriage">marriage</option>
+      <option value="partnership">partnership</option>
+      <option value="team">team</option>
+      <option value="general">general</option>
+      <option value="assistant">assistant</option>
+      <option value="ceo">ceo</option>
+    </select>
+  </div>
+
+  <div class="row">
+    <label>No. of questions</label>
+    <input type="number" [(ngModel)]="nQuestions" min="1" max="50" />
+  </div>
+
+  <div class="row">
+    <label>Batch size</label>
+    <input type="number" [(ngModel)]="batchSize" min="1" max="20" />
+  </div>
+
+  <div class="actions">
+    <button type="button" (click)="start()" [disabled]="loading">Start</button>
+    <button type="button" (click)="restart()" [disabled]="loading">Reset</button>
+  </div>
+
+  <p class="error" *ngIf="errorMsg">{{ errorMsg }}</p>
+</section>-->
+
+<!-- Loader -->
+<div class="loader-overlay" *ngIf="loading">
+  <div class="loader">Loading…</div>
+</div>
+
+<!-- Quiz area -->
+<section class="quiz" *ngIf="!loading">
+
+  <!-- When there is an active question -->
+  <div class="question-card" *ngIf="!isDone && question">
+    <div class="q-meta">
+      <div class="q-count">Question {{ index }} / {{ total }}</div>
+      <div class="q-role">Role: {{ role }}</div>
+    </div>
+
+    <h2 class="q-text">{{ question }}</h2>
+
+    <form (ngSubmit)="submitAnswer()">
+      <div class="options">
+        <label class="option" *ngFor="let opt of options; let i = index">
+          <input type="radio"
+                 name="answer"
+                 [value]="opt.color"
+                 [(ngModel)]="selectedColor"
+                 required />
+          <span class="opt-text">{{ opt.text }}</span>
+          <!--<small class="opt-color">({{ opt.color }})</small>-->
+        </label>
+      </div>
+
+      <div class="actions">
+        <button type="submit" [disabled]="!selectedColor || loading">Submit</button>
+      </div>
+    </form>
+
+    <!-- In-progress mix (live) -->
+    <!--<div class="progress" *ngIf="inProgressMix">
+      <h3>Current mix</h3>
+      <div class="bar">
+        <span>Blue</span>
+        <div class="bar-track"><div class="bar-fill" [style.width.%]="getInProgressMixValue('blue')"></div></div>
+        <div class="bar-val">{{ asPercent(getInProgressMixValue('blue')) }}%</div>
+      </div>
+
+      <div class="bar">
+        <span>Green</span>
+        <div class="bar-track"><div class="bar-fill" [style.width.%]="getInProgressMixValue('green')"></div></div>
+        <div class="bar-val">{{ asPercent(getInProgressMixValue('green')) }}%</div>
+      </div>
+
+      <div class="bar">
+        <span>Red</span>
+        <div class="bar-track"><div class="bar-fill" [style.width.%]="getInProgressMixValue('red')"></div></div>
+        <div class="bar-val">{{ asPercent(getInProgressMixValue('red')) }}%</div>
+      </div>
+
+      <div class="bar">
+        <span>Yellow</span>
+        <div class="bar-track"><div class="bar-fill" [style.width.%]="getInProgressMixValue('yellow')"></div></div>
+        <div class="bar-val">{{ asPercent(getInProgressMixValue('yellow')) }}%</div>
+      </div>
+    </div>-->
+  </div>
+
+  <!-- Final result -->
+  <div>DONE</div>
+  <!--<div class="result" *ngIf="isDone && finalMix">
+    <h2>Final result</h2>
+
+    <div class="bar">
+      <span>Blue</span>
+      <div class="bar-track"><div class="bar-fill" [style.width.%]="getFinalMixValue('blue')"></div></div>-->
+      <!--<div class="bar-val">{{ asPercent(getFinalMixValue('blue')) }}%</div>-->
+    <!--</div>
+
+    <div class="bar">
+      <span>Green</span>
+      <div class="bar-track"><div class="bar-fill" [style.width.%]="getFinalMixValue('green')"></div></div>-->
+      <!--<div class="bar-val">{{ asPercent(getFinalMixValue('green')) }}%</div>-->
+    <!--</div>
+
+    <div class="bar">
+      <span>Red</span>
+      <div class="bar-track"><div class="bar-fill" [style.width.%]="getFinalMixValue('red')"></div></div>-->
+      <!--<div class="bar-val">{{ asPercent(getFinalMixValue('red')) }}%</div>-->
+    <!--</div>
+
+    <div class="bar">
+      <span>Yellow</span>
+      <div class="bar-track"><div class="bar-fill" [style.width.%]="getFinalMixValue('yellow')"></div></div>-->
+      <!--<div class="bar-val">{{ asPercent(getFinalMixValue('yellow')) }}%</div>-->
+    <!--</div>
+
+    <div class="actions">
+      <button type="button" (click)="restart()">Restart</button>
+    </div>
+  </div>-->
+
+  <!-- Empty state -->
+  <div class="empty" *ngIf="!isDone && !question && !errorMsg">
+    <p>Press <strong>Start</strong> to begin the quiz.</p>
+  </div>
+</section>
+

src/app/llm-quiz/llm-quiz.component.spec.ts

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

src/app/llm-quiz/llm-quiz.component.ts

@@ -0,0 +1,244 @@
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { LlmQaService, Role, ColorKey, StartResponse, NextResponse } from '../services/llm-qa.service';
+import { ActivatedRoute, Router } from '@angular/router';
+
+type Mix = Record<ColorKey, number>;
+
+@Component({
+  selector: 'app-llm-quiz',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './llm-quiz.component.html',
+  styleUrls: ['./llm-quiz.component.css'],
+})
+export class LlmQuizComponent implements OnInit {
+  // --- Config bound to the UI ---
+  role: Role = 'marriage';
+  nQuestions = 5;
+  batchSize = 5;
+
+  /** Provide user id. Will auto-read from localStorage('user_id') if available. */
+  userId = '';
+
+  // --- Runtime state ---
+  sessionId = '';
+  index = 0;
+  total = 0;
+
+  question = '';
+  options: { text: string; color: ColorKey }[] = [];
+  selectedColor: ColorKey | '' = '';
+
+  loading = false;
+  errorMsg = '';
+  isDone = false;
+
+  inProgressMix: Mix | null = null; // live progress returned by backend
+  finalMix: Mix | null = null;
+
+  /*constructor(private api: LlmQaService) { }*/
+ 
+
+constructor(
+  private api: LlmQaService,
+  private route: ActivatedRoute,
+  private router: Router
+) { }
+
+ngOnInit(): void {
+  const qp = this.route.snapshot.queryParamMap;
+  const uid = (qp.get('user_id') || localStorage.getItem('user_id') || '').trim();
+  const role = (qp.get('role') || localStorage.getItem('role') || '').toLowerCase();
+  const autostart = qp.get('autostart') === '1';
+
+  if(uid) this.userId = uid;
+  if(role) this.role = role as any;
+
+  if(autostart && this.userId && this.role) {
+  this.start();
+}
+}
+
+
+  // ---------- Helpers ----------
+  asPercent(v: number | undefined | null): number {
+    const n = Number(v);
+    return Number.isFinite(n) ? Math.round(n) : 0;
+  }
+
+  /** Safe getter for in-progress mix values. */
+  getInProgressMixValue(c: string): number {
+    if (!this.inProgressMix) return 0;
+    const key = this.toColorKey(c);
+    return key ? this.inProgressMix[key] ?? 0 : 0;
+  }
+
+  /** Safe getter for final mix values. */
+  getFinalMixValue(c: string): number {
+    if (!this.finalMix) return 0;
+    const key = this.toColorKey(c);
+    return key ? this.finalMix[key] ?? 0 : 0;
+  }
+
+  private toColorKey(c: string): ColorKey | null {
+    switch (c) {
+      case 'blue':
+      case 'green':
+      case 'red':
+      case 'yellow':
+        return c;
+      default:
+        return null;
+    }
+  }
+
+  // ---------- Flow ----------
+  //start(): void {
+  //  this.errorMsg = '';
+  //  this.isDone = false;
+  //  this.finalMix = null;
+  //  this.inProgressMix = null;
+  //  this.selectedColor = '';
+  //  this.sessionId = '';
+  //  this.index = 0;
+  //  this.total = 0;
+  //  this.question = '';
+  //  this.options = [];
+
+  //  if (!this.userId?.trim()) {
+  //    this.errorMsg = 'User ID is required.';
+  //    return;
+  //  }
+
+  //  this.loading = true;
+  //  this.api .start({
+
+  //      user_id: this.userId.trim(),
+  //      role: this.role,
+  //      n_questions: this.nQuestions,
+  //      batch_size: this.batchSize,
+  //    })
+  //    .subscribe({
+  //      next: (res: StartResponse) => {
+  //        this.loading = false;
+  //        this.sessionId = res.session_id;
+  //        this.index = res.index;
+  //        this.total = res.total;
+  //        this.question = res.question;
+  //        this.options = (res.options || []) as any;
+  //        // Optional: inspect res.profile_used
+  //        if (res.profile_used === false) {
+  //          this.errorMsg =
+  //            'No profile found for this user and role. Please complete the profile first.';
+  //        }
+  //      },
+  //      error: (err) => {
+  //        this.loading = false;
+  //        this.errorMsg = err?.error?.error || 'Failed to start LLM session.';
+  //      },
+  //    });
+  //}
+  start(): void {
+    this.errorMsg = '';
+    this.isDone = false;
+    this.finalMix = null;
+    this.inProgressMix = null;
+    this.selectedColor = '';
+    this.sessionId = '';
+    this.index = 0;
+    this.total = 0;
+    this.question = '';
+    this.options = [];
+
+    if (!this.userId?.trim()) {
+      this.errorMsg = 'User ID is required.';
+      return;
+    }
+
+    this.loading = true;
+
+    // Log the payload before the API request
+    const payload = {
+      user_id: this.userId.trim(),
+      role: this.role,
+      n_questions: this.nQuestions,
+      batch_size: this.batchSize,
+    };
+
+    console.log('Payload:', payload); // Add this line to log the payload
+
+    this.api.start(payload).subscribe({
+      next: (res: StartResponse) => {
+        this.loading = false;
+        this.sessionId = res.session_id;
+        this.index = res.index;
+        this.total = res.total;
+        this.question = res.question;
+        this.options = (res.options || []) as any;
+        console.log("res", res);
+        // Optional: inspect res.profile_used
+        if (res.profile_used === false) {
+          this.errorMsg =
+            'No profile found for this user and role. Please complete the profile first.';
+        }
+      },
+      error: (err) => {
+        this.loading = false;
+        this.errorMsg = err?.error?.error || 'Failed to start LLM session.';
+      },
+    });
+  }
+
+  submitAnswer(): void {
+    if (!this.sessionId || !this.selectedColor) return;
+    this.loading = true;
+    this.errorMsg = '';
+
+    this.api
+      .next({ session_id: this.sessionId, selected_color: this.selectedColor })
+      .subscribe({
+        next: (res: NextResponse) => {
+          this.loading = false;
+
+          // Finished?
+          if (res.done) {
+            this.isDone = true;
+            this.finalMix = (res.mix || {
+              blue: 0,
+              green: 0,
+              red: 0,
+              yellow: 0,
+            }) as Mix;
+            return;
+          }
+
+          // Continue
+          this.index = res.index ?? this.index + 1;
+          this.total = res.total ?? this.total;
+          this.question = res.question || '';
+          this.options = (res.options || []) as any;
+          this.inProgressMix = (res.progress || null) as Mix;
+          this.selectedColor = ''; // reset selection
+        },
+        error: (err) => {
+          this.loading = false;
+          this.errorMsg = err?.error?.error || 'Failed to fetch next question.';
+        },
+      });
+  }
+
+  restart(): void {
+    this.isDone = false;
+    this.finalMix = null;
+    this.inProgressMix = null;
+    this.selectedColor = '';
+    this.sessionId = '';
+    this.index = 0;
+    this.total = 0;
+    this.question = '';
+    this.options = [];
+    this.errorMsg = '';
+  }
+}

src/app/question-answer/question-answer-service.service.ts

@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../environments/environment';
+import { Observable } from 'rxjs';
+export interface QAItem {
+  label: string;
+  input_type: 'text' | 'date' | 'radio' | 'select';
+  options?: string[];
+  column_key: string;
+}
+@Injectable({ providedIn: 'root' })
+export class QuestionAnswerService {
+  private baseUrl = 'http://127.0.0.1:5000/api/questions';
+
+  constructor(private http: HttpClient) { }
+
+  // Assign role to user
+  assignRole(payload: { user_id: number; role_name: string; assigned_at: string }): Observable<any> {
+    return this.http.post<any>(`${this.baseUrl}/select-role`, payload);
+  }
+
+  // Fetch questions by role
+
+  //getQuestions(role: string): Observable<any> {
+  //  return this.http.get<any>(`${this.baseUrl}/${role}`);
+  //}
+
+
+  // Submit answers
+  //submitAnswers(role: string, userId: number, answers: any[]): Observable<any> {
+  //  const payload = {
+  //    user_id: userId,
+  //    ...answers.reduce((acc, ans, i) => {
+  //      acc[`q${i + 1}`] = ans; // map answers to fields (adjust backend expected fields if needed)
+  //      return acc;
+  //    }, {}),
+  //    created_at: new Date().toISOString()
+  //  };
+
+  //  return this.http.post(`${this.baseUrl}/submit-answers/${role}`, payload);
+  //}
+  getQuestions(role: string): Observable<QAItem[]> {
+    return this.http.get<QAItem[]>(`${this.baseUrl}/${role}`);
+  }
+
+  // fields = { full_name: 'John', created_at: '...' }
+  submitAnswers(role: string, userId: number, fields: Record<string, any>): Observable<any> {
+    return this.http.post(`${this.baseUrl}/submit-answers/${role}`, { user_id: userId, ...fields });
+  }
+}

src/app/question-answer/question-answer.component.css

@@ -0,0 +1,317 @@
+/* ---------- Page & Topbar ---------- */
+.qa-page {
+  height: 100%;
+  position: relative;
+  background-image: url('/assets/Q&A-BG.png'); /* Set the background image */
+  background-size: cover; /* Ensure the image covers the entire area */
+  background-position: center center; /* Center the background image */
+  color: #1a1a1a;
+  overflow: hidden;
+}
+
+.topbar {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  background: transparent;
+}
+
+.home-btn {
+  appearance: none;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: rgba(255,255,255,0.9);
+  backdrop-filter: blur(6px);
+  padding: 8px 12px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: transform .15s ease, box-shadow .15s ease;
+}
+
+  .home-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+    border: 1px solid #f3a54c;
+  }
+
+  .home-btn:active {
+    transform: translateY(0);
+  }
+
+  .home-btn:focus-visible {
+    outline: 3px solid #7cc4ff;
+    outline-offset: 2px;
+  }
+
+.title {
+  margin: 0;
+  text-align: center;
+  color: #3a3a3a;
+  font-size: 3vw;
+  color: white;
+}
+
+.topbar-spacer {
+  width: 52px;
+  height: 1px;
+}
+
+/* ---------- Ambient soft background (subtle stripes + light blobs) ---------- */
+.ambient {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: #e9cfad57;
+  opacity: 0.8;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 28vw;
+  margin: 0 auto;
+  border-radius: 8vw;
+  border: 2px solid #e9cfad;
+}
+
+.stage {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* Shared orb styles */
+.orb {
+  --size: clamp(160px, 26vw, 260px);
+  width: var(--size);
+  height: var(--size);
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  border: 10px solid rgba(255,255,255,0.9); /* white rim to mimic gaps */
+  box-shadow: 0 28px 60px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.6);
+  position: absolute;
+  cursor: pointer;
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: 800;
+  letter-spacing: .04em;
+  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
+}
+
+/* Color palette inspired by your reference image */
+.orb-top {
+  background: #595a5e;
+  color: #ffffff;
+}
+/* dark grey */
+.orb-left {
+  background: #f3a54c;
+  color: #2b2316;
+}
+/* warm orange */
+.orb-right {
+  background: #d2a784;
+  color: #2a1e17;
+}
+/* soft tan */
+
+/* Placement to form a neat triad */
+.orb-top {
+  bottom: -2vw;
+  right: -6vw;
+}
+
+.orb-left {
+  left: -2vw;
+  top: -2vw;
+}
+
+.orb-right {
+  right: 0vw;
+  top: -2vw;
+}
+
+/* Hover / focus interactions */
+.orb:hover {
+  /*transform: translate(-50%, 0) scale(1.02);*/
+  box-shadow: 0 36px 80px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.65);
+  transform: translate(0,0) scale(1.02);
+}
+
+.orb-left:hover {
+  transform: translate(0,0) scale(1.02);
+}
+
+.orb-right:hover {
+  transform: translate(0,0) scale(1.02);
+}
+
+.orb:focus-visible {
+  outline: 4px solid #7cc4ff;
+  outline-offset: 3px;
+}
+
+/* Text inside circles */
+.orb > span {
+  line-height: 1.15;
+  font-size: clamp(13px, 1.6vw, 18px);
+  padding: 0 18px;
+}
+
+
+/* Modal Overlay */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  animation: 0.3s ease-in-out;
+}
+
+/* Modal Content */
+.modal {
+  display: flex;
+  border-radius: 20px;
+  width: 70%;
+  max-height: 80%;
+  overflow-y: auto;
+  position: relative;
+  animation: slideUp 0.3s ease-out;
+}
+
+  /* Left Side: Header and Image */
+  .modal .left-side {
+    width: 50%;
+    background: url('/assets/popup.png') no-repeat center center;
+    background-size: cover;
+    position: relative;
+    padding: 20px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  .modal h2 {
+    font-size: 24px;
+    font-weight: 700;
+    color: #fff;
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.5); /* Background for readability */
+    padding: 5px 10px;
+    border-radius: 5px;
+  }
+
+  /* Right Side: Questions and Options */
+  .modal .right-side {
+    width: 50%;
+    padding: 20px;
+    color: #eb4814;
+    background-color: #fbeccf;
+    overflow-y: auto;
+  }
+
+  /* Modal Question Styling */
+  .modal label {
+    display: block;
+    font-size: 18px;
+    font-weight: 500;
+    margin-bottom: 10px;
+    color: #000000;
+  }
+
+  .modal div {
+    margin-bottom: 20px;
+  }
+
+  .modal input[type="radio"] {
+    margin-right: 10px;
+  }
+
+  .modal input[type="text"] {
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    width: 100%;
+    margin-top: 10px;
+  }
+
+/* Close Button */
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 25px;
+  background: transparent;
+  font-size: 24px;
+  color: #aaa;
+  cursor: pointer;
+  transition: color 0.3s;
+  width: 2vw;
+  border: 3px solid #eb48149c;
+  padding: 1px;
+}
+
+  .close-btn:hover {
+    color: #333;
+  }
+
+/* Button Styling */
+button {
+  padding: 12px 20px;
+  background-color: #007bff;
+  color: black;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  width: 100%;
+  text-align: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+  button:active {
+    transform: translateY(1px);
+  }
+
+  button:focus-visible {
+    outline: 3px solid #7cc4ff;
+    outline-offset: 3px;
+  }
+
+/* Animations for modal */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}

src/app/question-answer/question-answer.component.html

@@ -0,0 +1,67 @@
+<div class="qa-page">
+  <header class="topbar">
+    <button class="home-btn" type="button" (click)="goHome()" aria-label="Go to Home">Home</button>
+    <h1 class="title">{{ heading }}</h1>
+  </header>
+
+  <main class="stage">
+    <button class="orb orb-top" type="button" (click)="onSelect('marriage')" aria-label="Select MARRIAGE">
+      <span><i class="fa-solid fa-ring"></i>&nbsp;MARRIAGE</span>
+    </button>
+    <button class="orb orb-left" type="button" (click)="onSelect('interview')" aria-label="Select INTERVIEW">
+      <span><i class="fa-solid fa-user-tie"></i>&nbsp;INTERVIEW</span>
+    </button>
+    <button class="orb orb-right" type="button" (click)="onSelect('partnership')" aria-label="Select BUSINESS PARTNERS">
+      <span><i class="fa-solid fa-handshake"></i>&nbsp;BUSINESS PARTNERS</span>
+    </button>
+  </main>
+
+  <div *ngIf="isModalOpen" class="modal-overlay">
+    <div class="modal">
+      <button class="close-btn" (click)="closeModal()">×</button>
+
+      <div class="left-side">
+        <h2>Questions for {{ selectedOption | uppercase }}</h2>
+      </div>
+
+      <div class="right-side">
+        <div *ngIf="selectedQuestions.length > 0; else noQuestions">
+          <form (ngSubmit)="submitAnswers()">
+            <div *ngFor="let q of selectedQuestions; let i = index">
+              <label>{{ q.label }}</label>
+
+              <!-- text/date -->
+              <div *ngIf="q.input_type === 'text' || q.input_type === 'date'">
+                <input [type]="q.input_type === 'date' ? 'date' : 'text'"
+                       [(ngModel)]="answers[i]"
+                       name="answer{{ i }}"
+                       (ngModelChange)="onAnswerChange(i, $event)"
+                       placeholder="Enter your answer" />
+              </div>
+
+              <!-- radio/select -->
+              <div *ngIf="(q.input_type === 'select' || q.input_type === 'radio') && q.options?.length">
+                <label *ngFor="let option of q.options" class="option">
+                  <input type="radio"
+                         [name]="'answer' + i"
+                         [value]="option"
+                         [(ngModel)]="answers[i]"
+                         (change)="onAnswerChange(i, option)" />
+                  {{ option }}
+                </label>
+              </div>
+            </div>
+
+            <button type="submit">Submit Answers</button>
+          </form>
+          <!--<button [routerLink]="'/quiz'">Go to Quiz</button>-->
+          <a routerLink="/llmquiz" class="btn btn-primary">{{ tr('Go to Quiz') }}</a>
+        </div>
+
+        <ng-template #noQuestions>
+          <p>No questions available for this role.</p>
+        </ng-template>
+      </div>
+    </div>
+  </div>
+</div>

src/app/question-answer/question-answer.component.spec.ts

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

src/app/question-answer/question-answer.component.ts

@@ -0,0 +1,157 @@
+import { Component, OnInit } from '@angular/core';
+import { QuestionAnswerService, QAItem } from './question-answer-service.service';
+import { Router, RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
+
+@Component({
+  selector: 'app-question-answer',
+  standalone: true,
+  imports: [FormsModule, CommonModule, RouterLink],
+  templateUrl: './question-answer.component.html',
+  styleUrls: ['./question-answer.component.css']
+})
+export class QuestionAnswerComponent implements OnInit {
+  heading: string = 'CHOOSE YOUR ROLE';
+  selectedOption: string = '';                 // 'marriage' | 'interview' | 'partnership'
+  selectedQuestions: QAItem[] = [];            // questions fetched for selected role
+  isModalOpen: boolean = false;
+
+  // If you already know the logged-in user id, set it here or load from localStorage in ngOnInit.
+  userId: number = 1;
+
+  // Template-driven answers storage (bound via [(ngModel)])
+  answers: any[] = [];
+
+  constructor(
+    private qaService: QuestionAnswerService,
+    private router: Router
+  ) { }
+
+  ngOnInit(): void {
+    // Optional: restore from localStorage if available
+    const uid = localStorage.getItem('user_id');
+    if (uid) {
+      const n = Number(uid);
+      if (!Number.isNaN(n)) this.userId = n;
+    }
+
+    const savedRole = localStorage.getItem('role');
+    if (savedRole) this.selectedOption = savedRole;
+  }
+
+  onSelect(role: string): void {
+    this.selectedOption = role;
+    this.fetchQuestions(role);
+    this.isModalOpen = true;
+    this.assignRoleToUser(role);
+  }
+
+  assignRoleToUser(role: string): void {
+    const payload = {
+      user_id: this.userId,
+      role_name: role,
+      assigned_at: new Date().toISOString()
+    };
+
+    this.qaService.assignRole(payload).subscribe({
+      next: (res) => console.log('Role assigned successfully:', res),
+      error: (err: HttpErrorResponse) => console.error('Error assigning role:', err)
+    });
+  }
+
+  fetchQuestions(role: string): void {
+    this.qaService.getQuestions(role).subscribe({
+      next: (data: QAItem[]) => {
+        this.selectedQuestions = data;
+        // Prepare answers array for template-driven binding
+        this.answers = new Array(data.length).fill('');
+        console.log('Fetched questions:', data);
+      },
+      error: (err: HttpErrorResponse) => console.error('Error fetching questions:', err)
+    });
+  }
+
+  submitAnswers(): void {
+    const role = (this.selectedOption || '').toLowerCase(); // 'marriage' | 'interview' | 'partnership'
+    const userIdNum = Number(this.userId);
+
+    if (!role || !userIdNum) {
+      console.error('Role and user id are required.');
+      return;
+    }
+
+    // Build the "fields" object from questions + answers.
+    // We prefer the backend-provided DB column name: r.column_key.
+    const fields: Record<string, any> = {};
+    this.selectedQuestions.forEach((q: QAItem, idx: number) => {
+      const key =
+        (q as any).column_key ||   // from RoleQuestions table
+        (q as any).key ||          // fallback if present
+        `q_${idx + 1}`;            // final fallback
+      fields[key] = this.answers[idx] ?? '';
+    });
+
+    // Many insert statements expect created_at. Add if your backend uses it.
+    fields['created_at'] = new Date().toISOString();
+
+    // Service signature: submitAnswers(role: string, userId: number, fields: Record<string, any>)
+    this.qaService.submitAnswers(role, userIdNum, fields).subscribe({
+      next: () => {
+        // Close profile modal
+        this.isModalOpen = false;
+
+        // Persist for LLM Quiz
+        localStorage.setItem('user_id', String(userIdNum));
+        localStorage.setItem('role', role);
+        // Log the values passed to router
+        console.log('Navigating to LLM Quiz with queryParams:', fields);
+        // Navigate to LLM Quiz with autostart
+        // Prepare queryParams
+        const queryParams = {
+          user_id: String(userIdNum),
+          role,
+          fields,           // Fields object (you might want to reconsider passing this depending on the size/complexity)
+          autostart: '1'
+        };
+
+        // Log the queryParams before navigating
+        this.router.navigate(['/llmquiz'], {
+          queryParams: { user_id: String(userIdNum), role, fields, autostart: '1' }
+        });
+        console.log('queryParams:', queryParams);
+      },
+      error: (err: HttpErrorResponse) => {
+        console.error('Error submitting answers:', err);
+      }
+    });
+  }
+
+  onAnswerChange(i: number, v: any): void {
+    this.answers[i] = v;
+  }
+
+  closeModal(): void {
+    this.isModalOpen = false;
+  }
+
+  goHome(): void {
+    this.router.navigate(['/intro-page']);
+  }
+
+  // i18n helper (keep if used in template)
+  tr(key: string): string {
+    const dict = {
+      brand: 'Pykara',
+      signup: 'Sign up',
+      signin: 'Sign in',
+      tagline: 'Discover your profile. Match with purpose.',
+      subtext: 'Py-Match runs a short, privacy-first assessment and builds a profile used for responsible matching. Color results are not shown to users.',
+      getStarted: 'Get started',
+      tos: 'Terms',
+      privacy: 'Privacy'
+    };
+    return dict[key as keyof typeof dict] ?? key;
+  }
+}

src/app/quiz/quiz.component.css

@@ -0,0 +1,126 @@
+/* General styling for the quiz container */
+.quiz-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; /* Full viewport height */
+  background-image: url('src/assets/background.png');
+  background-size: cover; /* Ensures the image covers the entire area */
+  background-position: center; /* Center the image */
+  background-repeat: no-repeat; /* Prevents the image from repeating */
+  margin: 0; /* Remove default margin */
+}
+
+
+/* Overlay for dimming the background */
+.quiz-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Card for the quiz with soft green background */
+.quiz-card {
+  background-color: #eaf6e2; /* Soft light green background */
+  border-radius: 15px;
+  padding: 30px;
+  text-align: center;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  max-width: 450px;
+  width: 100%;
+  position: relative;
+}
+
+/* Profile image */
+.profile-picture {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 20px;
+}
+
+/* Title styling */
+.quiz-title {
+  font-size: 22px;
+  font-weight: bold;
+  color: #4caf50; /* Green color */
+  margin-bottom: 20px;
+}
+
+/* Question text styling */
+.question {
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 30px;
+}
+
+/* Button styling for options */
+.option-button {
+  background-color: #4caf50;
+  color: white;
+  padding: 12px 20px;
+  margin: 10px;
+  border: none;
+  border-radius: 10px;
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+  .option-button:hover {
+    background-color: #45a049;
+  }
+
+/* Button styling for "Next" and "Submit" */
+.next-button, .submit-button {
+  background-color: #4caf50;
+  color: white;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 10px;
+  margin-top: 20px;
+  width: 100%;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+  .next-button:hover, .submit-button:hover {
+    background-color: #45a049;
+  }
+
+/* Success Popup */
+.success-popup {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 20px;
+  border-radius: 10px;
+  text-align: center;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+  .success-popup button {
+    background-color: #4caf50;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 15px;
+    transition: background-color 0.3s ease;
+  }
+
+    .success-popup button:hover {
+      background-color: #45a049;
+    }

src/app/quiz/quiz.component.html

@@ -0,0 +1,35 @@
+<div class="quiz-container">
+  <div class="quiz-overlay">
+    <div class="quiz-card">
+      <h1 class="quiz-title">QUIZ</h1>
+      <div class="question-container">
+        <p class="question">{{ questions[currentQuestionIndex].question }}</p>
+        <div class="options">
+          <button *ngFor="let option of questions[currentQuestionIndex].options"
+                  class="option-button"
+                  (click)="selectOption(option)">
+            {{ option }}
+          </button>
+        </div>
+        <button *ngIf="currentQuestionIndex < questions.length - 1"
+                class="next-button"
+                [disabled]="!isOptionSelected"
+                (click)="nextQuestion()">
+          Next
+        </button>
+        <button *ngIf="currentQuestionIndex === questions.length - 1"
+                class="submit-button"
+                [disabled]="!isOptionSelected"
+                (click)="submitQuiz()">
+          Submit
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Success Popup -->
+<div *ngIf="isSubmitted" class="success-popup">
+  <p>Your test is submitted!</p>
+  <button (click)="closePopup()">Close</button>
+</div>

src/app/quiz/quiz.component.spec.ts

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

src/app/quiz/quiz.component.ts

@@ -0,0 +1,107 @@
+import { Component, OnInit  } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+interface QuizQuestion {
+  question: string;
+  options: string[];
+  // store the selected answer; start as null and set to a string later
+  answer: string | null;
+}
+
+@Component({
+  selector: 'app-quiz',
+  standalone: true,
+  imports: [FormsModule, CommonModule, RouterLink],
+  templateUrl: './quiz.component.html',
+  styleUrls: ['./quiz.component.css'],
+})
+export class QuizComponent implements OnInit {
+
+  constructor(public router: Router) { }
+  ngOnInit(): void { }
+  questions: QuizQuestion[] = [
+    {
+      question: 'You are leading a small team. A new member is quiet and avoids discussions. What will you do first?',
+      options: [
+        'Assign a simple task and review later',
+        'Speak privately to understand concerns',
+        'Ask them to present in the next meeting',
+        'Ignore it and focus on deadlines'
+      ],
+      answer: null,
+    },
+    {
+      question: 'A stakeholder requests a big change late in the sprint. What is your approach?',
+      options: [
+        'Accept it immediately',
+        'Reject it immediately',
+        'Evaluate impact and negotiate scope/time',
+        'Ask the team to work overtime'
+      ],
+      answer: null,
+    },
+    {
+      question: 'Two teammates disagree on a solution. How do you proceed?',
+      options: [
+        'Pick the faster option',
+        'Let them resolve it alone',
+        'Facilitate a short decision session with facts',
+        'Escalate to management'
+      ],
+      answer: null,
+    },
+    {
+      question: 'You find a recurring production bug. What is your first step?',
+      options: [
+        'Hotfix every time',
+        'Add logs and create a root-cause ticket',
+        'Disable the feature',
+        'Rollback to an old release'
+      ],
+      answer: null,
+    },
+    {
+      question: 'Your release is on time but test coverage is low. What will you do?',
+      options: [
+        'Release as-is',
+        'Block the release',
+        'Risk-assess, add critical tests, and plan coverage',
+        'Let QA handle it later'
+      ],
+      answer: null,
+    },
+  ];
+
+  currentQuestionIndex = 0;
+  isOptionSelected = false;   // controls Next/Submit button enabled state
+  isSubmitted = false;        // controls the success popup
+
+  selectOption(option: string): void {
+    this.questions[this.currentQuestionIndex].answer = option; // type-safe: string | null
+    this.isOptionSelected = true;
+  }
+
+  nextQuestion(): void {
+    if (!this.isOptionSelected) return;
+    this.currentQuestionIndex++;
+
+    // Reset the enable/disable state for the next question
+    const next = this.questions[this.currentQuestionIndex];
+    this.isOptionSelected = !!next?.answer; // true if already answered, else false
+  }
+
+  submitQuiz(): void {
+    if (!this.isOptionSelected) return;
+    this.isSubmitted = true; // shows the “Your test is submitted!” popup
+  }
+
+  closePopup(): void {
+    this.isSubmitted = false;
+    // Optionally navigate or reset after closing:
+    // this.currentQuestionIndex = 0;
+    // this.questions.forEach(q => (q.answer = null));
+    // this.isOptionSelected = false;
+  }
+}

src/app/quiz/quiz.service.spec.ts

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

src/app/quiz/quiz.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class QuizService {
+  private apiUrl = 'http://localhost:5000';  // Your Flask backend URL
+
+  constructor(private http: HttpClient) { }
+
+  // Start the quiz by sending the profile and role
+  startQuiz(nQuestions: number, batchSize: number, role: string, profile: any): Observable<any> {
+    return this.http.post<any>(`${this.apiUrl}/q/start`, {
+      n_questions: nQuestions,
+      batch_size: batchSize,
+      role: role,
+      profile: profile
+    });
+  }
+
+  // Fetch next question
+  nextQuestion(sessionId: string, selectedColor: string): Observable<any> {
+    return this.http.post<any>(`${this.apiUrl}/q/next`, {
+      session_id: sessionId,
+      selected_color: selectedColor
+    });
+  }
+}