+ ;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [CaseDetailsPageComponent]
+ });
+ fixture = TestBed.createComponent(CaseDetailsPageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/case-details-page/case-details-page.component.ts b/src/app/case-details-page/case-details-page.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d042afa051ca26a0b57398de94ffca9ad359abf1
--- /dev/null
+++ b/src/app/case-details-page/case-details-page.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { CaseStoreService, PoliceCase } from '../shared/case-store.service';
+
+@Component({
+ selector: 'app-case-details-page',
+ templateUrl: './case-details-page.component.html',
+ styleUrls: ['./case-details-page.component.css']
+})
+export class CaseDetailsPageComponent implements OnInit {
+ cases: PoliceCase[] = [];
+ showDetails = false;
+ selectedCase: PoliceCase | null = null;
+ username: string = '';
+
+ constructor(private caseStore: CaseStoreService, private router: Router) {}
+
+ ngOnInit(): void {
+ this.cases = this.caseStore.getPoliceCases();
+ this.username = localStorage.getItem('username') || sessionStorage.getItem('username') || '';
+ }
+
+ openDetails(c: PoliceCase): void {
+ this.selectedCase = c;
+ this.showDetails = true;
+ }
+
+ closeDetails(): void {
+ this.showDetails = false;
+ this.selectedCase = null;
+ }
+
+ goToDetect(): void {
+ window.location.href = '/py-detect';
+ }
+
+ navigateHome(): void {
+ this.router.navigate(['/']);
+ }
+}
diff --git a/src/app/case-store.service.ts b/src/app/case-store.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..43ab4ce4e3426a96d6d8f78b089d40d1a8d61175
--- /dev/null
+++ b/src/app/case-store.service.ts
@@ -0,0 +1,104 @@
+import { Injectable } from '@angular/core';
+
+export interface PoliceCase {
+ // Optional metadata used by your UI
+ caseId?: string;
+ dateTime?: string;
+ status?: 'Open' | 'Under Investigation' | 'Closed';
+ crime: string;
+ police: {
+ name: string;
+ station: string;
+ address: string;
+ pincode: string;
+ dutyPerson: string;
+ modeOfCrime: string;
+ information?: string;
+ };
+ accused: {
+ name: string;
+ age: string | number;
+ gender: string;
+ address: string;
+ occupation?: string;
+ };
+}
+
+@Injectable({ providedIn: 'root' })
+export class CaseStoreService {
+ private readonly storageKey = 'py_detect_police_cases';
+ private cases: PoliceCase[] = [];
+
+ constructor() {
+ this.load();
+ }
+
+ /** Create (newest first) */
+ addPoliceCase(c: PoliceCase): void {
+ this.cases.unshift(c);
+ this.save();
+ }
+
+ /** Read */
+ getPoliceCases(): PoliceCase[] {
+ return this.cases;
+ }
+
+ /** Update by array index */
+ updatePoliceCaseAt(index: number, updated: PoliceCase): void {
+ if (index >= 0 && index < this.cases.length) {
+ this.cases[index] = updated;
+ this.save();
+ }
+ }
+
+ /**
+ * Convenience: map Info page reactive-form value to PoliceCase and store it.
+ * Call with the whole this.form.value from InfopageComponent.
+ */
+ addFromInfoForm(formValue: any): void {
+ const crime = (formValue && formValue.crime) || {};
+ const suspect = (formValue && formValue.suspect) || {};
+ const notes = (formValue && formValue.notes) || {};
+
+ const mapped: PoliceCase = {
+ caseId: crime.caseId || '',
+ dateTime: crime.dateTime || '',
+ status: notes.status || 'Open',
+ crime: crime.crimeType || 'Unknown',
+ police: {
+ name: notes.officerInCharge || '—',
+ station: '—', // not captured on Info page
+ address: crime.location || '—',
+ pincode: '', // not captured on Info page
+ dutyPerson: notes.officerInCharge || '—',
+ modeOfCrime: crime.crimeType || '—',
+ information: notes.initialFindings || ''
+ },
+ accused: {
+ name: suspect.fullName || '—',
+ age: suspect.age || '—',
+ gender: suspect.gender || '—',
+ address: suspect.address || '—',
+ occupation: suspect.alias || ''
+ }
+ };
+
+ this.addPoliceCase(mapped);
+ }
+
+ /** Persist to localStorage (safe to keep; remove if not needed) */
+ private save(): void {
+ try { localStorage.setItem(this.storageKey, JSON.stringify(this.cases)); } catch { }
+ }
+
+ /** Load from localStorage */
+ private load(): void {
+ try {
+ const raw = localStorage.getItem(this.storageKey);
+ this.cases = raw ? (JSON.parse(raw) as PoliceCase[]) : [];
+ } catch {
+ this.cases = [];
+ }
+ }
+}
diff --git a/src/app/homepage/homepage.component.css b/src/app/homepage/homepage.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..3ede10fa84bcf9ffe68e7207a0c701cc8e306dcb
--- /dev/null
+++ b/src/app/homepage/homepage.component.css
@@ -0,0 +1,1118 @@
+body, html {
+ margin: 0;
+ padding: 0;
+ font-family: 'Arial', 'Segoe UI', 'Roboto', sans-serif;
+ background: url('/assets/background.jpg') no-repeat center center fixed !important;
+ background-size: cover !important;
+}
+
+.homepage-container {
+ display: flex;
+ flex-direction: row;
+ height: 100vh;
+ color: #e3f6ff;
+ position: relative;
+ align-items: center; /* Center content vertically */
+ justify-content: center; /* Center content horizontally */
+ background: url(/assets/py-detect-illustration.png) no-repeat center center fixed;
+ background-size: cover;
+}
+
+.left-section {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center; /* Center vertically */
+ align-items: center; /* Center horizontally */
+ padding-left: 120px; /* Reduced from 240px to 120px */
+ padding-top: 0;
+ position: relative;
+}
+
+.topbar {
+ display: flex;
+ align-items: flex-start;
+ height: 80px;
+ padding-left: 0;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 30;
+}
+
+.logo {
+ width: 120px;
+ height: 120px;
+ margin-left: 0;
+ margin-top: 0;
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 40;
+}
+
+.logo-fixed {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 120px;
+ height: 120px;
+ z-index: 100;
+ margin: 0;
+}
+
+/* Add gap between logo and browser border */
+.logo-img {
+ width: 6vw;
+ height: 6vw;
+ border-radius: 50%;
+ box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
+ position: fixed;
+ top: 18px; /* Add gap from top */
+ left: 18px; /* Add gap from left */
+ z-index: 300;
+ margin: 0;
+}
+
+/* Move Py-Detect text further down by increasing top value of .logo-title-row */
+.logo-title-row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ position: absolute;
+ top: 180px; /* Increased from 120px to move text further down */
+ left: 48px;
+ z-index: 300;
+ gap: 32px;
+ justify-content: flex-start;
+ width: 100%;
+}
+
+.py-detect-title {
+ position: fixed;
+ margin-left: 132px;
+ margin-top: -208px;
+ text-align: left;
+ font-size: 4vw;
+ color: #38bdf8;
+ font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+ font-weight: 900;
+ letter-spacing: 6px;
+ background: none;
+ border: none;
+ box-shadow: none;
+ min-width: unset;
+ max-width: unset;
+}
+
+ /* Py-Detect title: each letter with its own color */
+ .py-detect-title .py-letter.p {
+ color: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.y {
+ color: #38bdf8;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-shape {
+ color: #e3f6ff;
+ background: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+ border: 2px solid #23272b;
+ }
+
+ .py-detect-title .py-letter.d {
+ color: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.e {
+ color: #38bdf8;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.t {
+ color: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.e2 {
+ color: #38bdf8;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.c {
+ color: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.t2 {
+ color: #38bdf8;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+.center-instructions {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 200;
+ width: 100%;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+}
+
+.detection-info {
+ margin: 0 auto;
+ max-width: 500px;
+ background: rgba(30,41,59,0.85);
+ border-radius: 12px;
+ padding: 20px 28px;
+ box-shadow: 0 2px 16px #1e293b44, 0 0 12px #38bdf844;
+ font-size: 24px;
+ color: #e3f6ff;
+ font-weight: 500;
+ line-height: 1.4;
+ letter-spacing: 1px;
+ border-left: 6px solid #38bdf8;
+ border-top: 2px solid #1e293b;
+ backdrop-filter: blur(1px);
+ text-align: left;
+}
+
+ .detection-info ul {
+ margin-top: 12px;
+ margin-bottom: 0;
+ font-size: 20px;
+ color: #bae6fd;
+ padding-left: 18px;
+ text-align: left; /* Align list to left */
+ }
+
+ .detection-info li {
+ margin-bottom: 6px;
+ padding-left: 2px;
+ font-weight: 400;
+ text-shadow: 0 0 4px #38bdf888;
+ text-align: left; /* Align each point to left */
+ }
+
+.right-section {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-end;
+ padding-right: 0;
+ height: 100vh;
+}
+
+.sign-in-form {
+ background: rgba(30,41,59,0.92);
+ padding: 32px 48px 32px 64px; /* Reduced vertical and horizontal padding */
+ border-radius: 24px;
+ box-shadow: 0 8px 32px rgba(30,41,59,0.48), 0 0 24px #38bdf844;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 28px; /* Reduced gap between children */
+ min-width: 340px;
+ max-width: 480px;
+ border: 3px solid #38bdf8;
+ backdrop-filter: blur(2px);
+ transition: box-shadow 0.3s, border-color 0.3s;
+ height: 320px; /* Further reduced height */
+ min-height: 320px;
+ max-height: 340px;
+}
+
+ .sign-in-form:hover {
+ box-shadow: 0 4px 32px #38bdf844, 0 0 16px #1e293b88;
+ border-color: #bae6fd;
+ }
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start; /* Align label and input to left */
+ gap: 12px;
+ min-width: 180px;
+ width: 100%;
+ margin-left: -24px; /* Shift fields a bit to the left */
+}
+
+label {
+ color: #bae6fd;
+ font-size: 26px;
+ font-weight: 600;
+ margin-bottom: 4px;
+ letter-spacing: 1px;
+ text-shadow: 0 0 6px #38bdf888;
+}
+
+.input-field {
+ padding: 20px;
+ border-radius: 12px;
+ border: 3px solid #38bdf8;
+ background: rgba(30,41,59,0.98);
+ color: #e3f6ff;
+ font-size: 28px;
+ width: 100%;
+ box-shadow: 0 2px 12px #38bdf844;
+ transition: border-color 0.3s;
+ text-align: left; /* Align text to left */
+}
+
+ .input-field:focus {
+ border-color: #bae6fd;
+ outline: none;
+ }
+
+ .input-field::placeholder {
+ color: #bae6fd;
+ font-size: 24px;
+ opacity: 0.8;
+ }
+
+.sign-in-button {
+ background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+ color: #e3f6ff;
+ padding: 22px 0;
+ font-size: 32px;
+ border: none;
+ border-radius: 14px;
+ cursor: pointer;
+ transition: background 0.3s ease, box-shadow 0.3s ease;
+ width: 100%;
+ margin-top: 0;
+ font-weight: bold;
+ letter-spacing: 1px;
+ box-shadow: 0 2px 16px #38bdf888;
+ text-shadow: 0 0 6px #23272b;
+ align-self: stretch;
+ min-width: 180px;
+}
+
+ .sign-in-button:hover {
+ background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+ color: #bae6fd;
+ box-shadow: 0 2px 24px #bae6fd88;
+ }
+
+/* Buttons that open the popup */
+.auth-links {
+ display: flex;
+ gap: 16px;
+ margin-top: -12px;
+ flex-wrap: wrap;
+}
+
+.link-btn {
+ background: transparent;
+ border: 1px dashed #38bdf8;
+ color: #bae6fd;
+ padding: 10px 16px;
+ border-radius: 10px;
+ cursor: pointer;
+}
+
+ .link-btn:hover {
+ border-style: solid;
+ color: #e3f6ff;
+ }
+
+.social-bar {
+ position: absolute;
+ top: 32px;
+ right: 60px;
+ display: flex;
+ gap: 24px;
+ z-index: 30;
+}
+
+.social-icon img {
+ width: 38px;
+ height: 38px;
+ filter: drop-shadow(0 0 6px #38bdf8);
+ transition: transform 0.2s;
+}
+
+.social-icon:hover img {
+ transform: scale(1.15);
+ filter: drop-shadow(0 0 12px #bae6fd);
+}
+
+.footer-link {
+ position: fixed;
+ left: 50%;
+ bottom: 24px;
+ transform: translateX(-50%);
+ font-size: 18px;
+ color: #bae6fd;
+ background: rgba(30,41,59,0.85);
+ border-radius: 8px;
+ padding: 10px 22px 10px 22px;
+ box-shadow: 0 2px 8px #1e293b44;
+ z-index: 40;
+ text-align: center;
+ min-width: 320px;
+}
+
+.footer-info {
+ font-size: 16px;
+ color: #bae6fd;
+ margin-bottom: 2px;
+ font-weight: 400;
+}
+
+.footer-link-highlight {
+ color: #38bdf8;
+ font-weight: 600;
+}
+
+.footer-link a {
+ color: #38bdf8;
+ text-decoration: none;
+ font-size: 18px;
+ font-weight: 500;
+ letter-spacing: 1px;
+ display: block;
+ margin-bottom: 2px;
+}
+
+ .footer-link a:hover {
+ color: #e3f6ff;
+ }
+
+.footer-tech {
+ font-size: 15px;
+ color: #e3f6ff;
+ margin-top: 2px;
+ font-weight: 600;
+ letter-spacing: 1px;
+}
+
+.login-title {
+ display: block;
+ font-size: 40px;
+ font-weight: 800;
+ color: #38bdf8;
+ text-align: left;
+ margin-bottom: 0;
+ letter-spacing: 2px;
+}
+
+.back-btn {
+ margin-top: 32px;
+ padding: 14px 38px;
+ font-size: 1.3rem;
+ font-weight: 700;
+ border-radius: 12px;
+ background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+ color: #e3f6ff;
+ border: none;
+ box-shadow: 0 2px 16px #38bdf888;
+ cursor: pointer;
+ transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+}
+
+ .back-btn:hover {
+ background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+ color: #bae6fd;
+ box-shadow: 0 2px 24px #bae6fd88;
+ }
+
+/* ===== Modal (popup) styles ===== */
+.modal-backdrop {
+ position: fixed;
+ inset: 0;
+ background: rgba(0,0,0,.45);
+ z-index: 1000;
+}
+
+.modal {
+ position: fixed;
+ inset: 0;
+ display: grid;
+ place-items: center;
+ padding: 24px;
+ z-index: 1001;
+ background: #ffffff45;
+}
+
+ .modal > app-sign-in,
+ .modal > app-sign-up {
+ max-width: 900px;
+ width: min(92vw, 900px);
+ }
+
+.modal__close {
+ position: absolute;
+ top: 18px;
+ right: 18px;
+ width: 48px;
+ height: 48px;
+ border: none;
+ background: linear-gradient(135deg, #23272b 60%, #18181b 100%);
+ color: #fff;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 2.2rem;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 16px rgba(30,41,59,0.28);
+ z-index: 20;
+ transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+ outline: none;
+}
+
+ .modal__close:hover {
+ background: linear-gradient(135deg, #333 60%, #23272b 100%);
+ color: #38bdf8;
+ box-shadow: 0 8px 24px #38bdf888;
+ }
+
+.signin-close {
+ position: absolute;
+ top: 189px;
+ right: 363px;
+ width: 48px;
+ height: 48px;
+ border: none;
+ background: linear-gradient(135deg, #23272b 60%, #18181b 100%);
+ color: #fff;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 2.2rem;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 16px rgba(30,41,59,0.28);
+ z-index: 20;
+ transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+ outline: none;
+}
+
+ .signin-close:hover {
+ background: linear-gradient(135deg, #333 60%, #23272b 100%);
+ color: #38bdf8;
+ box-shadow: 0 8px 24px #38bdf888;
+ }
+
+.signup-close {
+ position: absolute;
+ top: 110px;
+ right: 453px;
+ width: 48px;
+ height: 48px;
+ border: none;
+ background: linear-gradient(135deg, #23272b 60%, #18181b 100%);
+ color: #fff;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 2.2rem;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 16px rgba(30,41,59,0.28);
+ z-index: 20;
+ transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+ outline: none;
+}
+
+ .signup-close:hover {
+ background: linear-gradient(135deg, #333 60%, #23272b 100%);
+ color: #38bdf8;
+ box-shadow: 0 8px 24px #38bdf888;
+ }
+
+/* Keep app-sign-in/up wrapper */
+.app-sign-in, .app-sign-up {
+ position: relative;
+ background: #fff;
+ border-radius: 14px;
+ box-shadow: 0 20px 60px rgba(0,0,0,.35);
+}
+
+.py-shape {
+ display: inline-block;
+ width: 18px;
+ height: 4px;
+ background: #38bdf8;
+ margin: 0 8px;
+ vertical-align: middle;
+ border-radius: 2px;
+ box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+ border: 2px solid #23272b;
+}
+
+.auth-topright {
+ position: fixed;
+ top: 32px;
+ right: 48px;
+ z-index: 200;
+ display: flex;
+ gap: 18px;
+}
+
+.auth-btn {
+ font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+ font-size: 1.1rem;
+ font-weight: 700;
+ letter-spacing: 2px;
+ background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+ color: #e3f6ff;
+ box-shadow: 0 2px 16px #38bdf888;
+ border: none;
+ border-radius: 12px;
+ padding: 0.7rem 2rem;
+ cursor: pointer;
+ transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+}
+
+ .auth-btn:hover {
+ background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+ color: #bae6fd;
+ box-shadow: 0 2px 24px #bae6fd88;
+ }
+
+.py-detect-image {
+ width: 420px;
+ max-width: 100%;
+ height: auto;
+ border-radius: 24px;
+ box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
+ border: 3px solid #38bdf8;
+ background: #23272b;
+ margin-top: 48px;
+ margin-bottom: 48px;
+ display: block;
+}
+
+/* Footer Styles */
+.footer {
+ background: linear-gradient(90deg, #18181b 0%, #38bdf8 100%); /* Dual color: black to cyan */
+ color: #fff; /* All text white */
+ padding: 0; /* Remove extra padding for a slim footer */
+ text-align: center;
+ width: 100%;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ z-index: 200;
+ height: 46px; /* Further reduced height for a slim footer */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.footer-content {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 32px;
+ gap: 64px;
+}
+
+.footer-left,
+.footer-center,
+.footer-right {
+ margin: 0;
+ min-width: 0;
+ flex: 1 1 1;
+ display: flex;
+ align-items: center;
+ color: #fff !important;
+ justify-content: center;
+}
+
+.footer-center,
+.footer-right {
+ color: #fff !important;
+}
+
+ .footer-center .footer-links {
+ display: flex;
+ flex-direction: row;
+ gap: 32px;
+ align-items: center;
+ margin: 0;
+ padding: 0;
+ flex-wrap: nowrap;
+ white-space: nowrap;
+ }
+
+ .footer-center .footer-links li {
+ display: flex;
+ align-items: center;
+ margin: 0;
+ }
+
+ .footer-right .social-media {
+ display: flex;
+ flex-direction: row;
+ gap: 18px;
+ align-items: center;
+ margin-left: 24px;
+ }
+
+ .footer-center .footer-links a {
+ color: #fff !important;
+ text-decoration: none !important;
+ }
+
+ .footer-center .footer-links a:hover {
+ color: #38bdf8 !important;
+ text-decoration: none !important;
+ }
+
+ .footer-right .social-media a,
+ .footer-right .social-media i {
+ color: #fff !important;
+ text-decoration: none !important;
+ }
+
+@media screen and (max-width: 900px) {
+ .footer-content {
+ flex-direction: column;
+ gap: 16px;
+ padding: 8px 8px;
+ }
+
+ .footer-left,
+ .footer-center,
+ .footer-right {
+ justify-content: center;
+ width: 100%;
+ margin: 0;
+ }
+
+ .footer-center .footer-links {
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 12px;
+ white-space: normal;
+ }
+
+ .footer-right .social-media {
+ margin-left: 0;
+ justify-content: center;
+ }
+}
+
+/* Align detection info boxes to start from left, with space at right */
+.detection-info-row {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ gap: 24px;
+ justify-content: flex-start;
+ align-items: stretch;
+ margin: 0 0 0 48px; /* Add left margin, remove auto centering */
+ width: auto;
+ max-width: 1200px;
+}
+
+.detection-info-box {
+ background: rgba(30,41,59,0.92);
+ border-radius: 16px;
+ box-shadow: 0 2px 16px #38bdf844, 0 0 12px #1e293b88;
+ border-left: 6px solid #38bdf8;
+ border-top: 2px solid #1e293b;
+ padding: 18px 24px 16px 24px;
+ min-width: 220px;
+ max-width: 280px;
+ flex: 1 1 0;
+ font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+ color: #e3f6ff;
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 1.5;
+ letter-spacing: 0.5px;
+ position: relative;
+ margin-bottom: 0;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ opacity: 0;
+ transform: translateY(40px) scale(0.98);
+ animation: detectionBoxFadeIn 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+ transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s;
+}
+
+ .detection-info-box:hover {
+ transform: scale(1.06);
+ box-shadow: 0 8px 32px #38bdf888, 0 0 24px #1e293b88;
+ z-index: 10;
+ }
+
+ .detection-info-box:nth-child(2) {
+ animation-delay: 0.15s;
+ }
+
+ .detection-info-box:nth-child(3) {
+ animation-delay: 0.3s;
+ }
+
+ .detection-info-box:nth-child(4) {
+ animation-delay: 0.45s;
+ }
+
+@keyframes detectionBoxFadeIn {
+ 0% {
+ opacity: 0;
+ transform: translateY(40px) scale(0.98);
+ }
+
+ 80% {
+ opacity: 1;
+ transform: translateY(-4px) scale(1.02);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+
+@media screen and (max-width: 1200px) {
+ .detection-info-row {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .detection-info-box {
+ max-width: 98vw;
+ min-width: 0;
+ font-size: 15px;
+ padding: 14px 6vw;
+ }
+}
+
+@media screen and (max-width: 900px) {
+ .detection-info-row {
+ flex-direction: column;
+ gap: 18px;
+ align-items: center;
+ }
+
+ .detection-info-box {
+ max-width: 98vw;
+ min-width: 0;
+ font-size: 15px;
+ padding: 14px 6vw;
+ height: auto;
+ }
+}
+
+/* Footer social icon styles */
+.footer-social-icon {
+ width: 32px;
+ height: 32px;
+ margin: 0 8px;
+ vertical-align: middle;
+ filter: drop-shadow(0 0 6px #38bdf8);
+ transition: transform 0.2s, filter 0.2s;
+}
+
+ .footer-social-icon:hover {
+ transform: scale(1.15);
+ filter: drop-shadow(0 0 12px #bae6fd);
+ }
+
+/* Style for Next button in footer */
+.footer-next-btn {
+ margin-left: 24px;
+ padding: 12px 32px;
+ font-size: 1.1rem;
+ font-weight: 600;
+ border-radius: 10px;
+ background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+ color: #e3f6ff;
+ border: none;
+ box-shadow: 0 2px 12px #38bdf888;
+ cursor: pointer;
+ transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+}
+
+ .footer-next-btn:hover {
+ background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+ color: #bae6fd;
+ box-shadow: 0 2px 24px #bae6fd88;
+ }
+
+.tour-btn {
+ background: linear-gradient(90deg, #38bdf8 0%, #712d74 100%);
+ color: #fff;
+ font-size: 1.2rem;
+ font-weight: 700;
+ border: none;
+ border-radius: 12px;
+ padding: 14px 38px;
+ box-shadow: 0 2px 16px #38bdf888;
+ cursor: pointer;
+ margin: 0 auto;
+ display: block;
+ transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+}
+
+ .tour-btn:hover {
+ background: linear-gradient(90deg, #712d74 0%, #38bdf8 100%);
+ color: #bae6fd;
+ box-shadow: 0 2px 24px #bae6fd88;
+ }
+
+.tour-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(24,24,27,0.92);
+ z-index: 2000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.tour-content {
+ background: #23272b;
+ color: #fff;
+ border-radius: 18px;
+ padding: 48px 36px 36px 36px;
+ box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
+ max-width: 480px;
+ width: 90vw;
+ text-align: center;
+ position: relative;
+}
+
+.tour-close {
+ position: absolute;
+ top: 18px;
+ right: 18px;
+ width: 44px;
+ height: 44px;
+ border: none;
+ background: #18181b;
+ color: #fff;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 2rem;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+ z-index: 10;
+ transition: background 0.2s, color 0.2s;
+}
+
+ .tour-close:hover {
+ background: #333;
+ color: #f134d0;
+ }
+
+.tour-next {
+ margin-top: 24px;
+ background: linear-gradient(90deg, #38bdf8 0%, #712d74 100%);
+ color: #fff;
+ font-size: 1rem;
+ font-weight: 600;
+ border: none;
+ border-radius: 10px;
+ padding: 12px 32px;
+ box-shadow: 0 2px 12px #38bdf888;
+ cursor: pointer;
+ transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+}
+
+ .tour-next:hover {
+ background: linear-gradient(90deg, #712d74 0%, #38bdf8 100%);
+ color: #bae6fd;
+ box-shadow: 0 2px 24px #bae6fd88;
+ }
+
+.info-link {
+ margin-left: 12px;
+ color: #38bdf8;
+ font-size: 0.95em;
+ cursor: pointer;
+ text-decoration: underline;
+ font-weight: 500;
+ transition: color 0.2s;
+}
+
+ .info-link:hover {
+ color: #bae6fd;
+ }
+
+.detection-info-box .detection-description,
+.detection-info-box .detection-list {
+ margin-top: 10px;
+}
+
+.detection-icon {
+ font-size: 3vw;
+}
+
+.detection-info-box .detection-icon {
+ font-size: 3vw !important;
+}
+
+.welcome-title {
+ margin-left: 12px;
+ margin-bottom: 8px;
+}
+
+.main-title {
+ font-size: 2.2em;
+ font-weight: bold;
+ background: linear-gradient(90deg, #f134d0 0%, #38bdf8 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ text-fill-color: transparent;
+ letter-spacing: 2px;
+}
+
+.sub-title {
+ font-size: 1.2em;
+ font-weight: bold;
+ color: #fff;
+}
+
+.detection-description {
+ margin: 12px 0 18px 0;
+ color: #e3f6ff;
+ font-size: 1em;
+ font-weight: 400;
+}
+
+.read-more-btn {
+ background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+ color: #fff;
+ font-size: 1em;
+ font-weight: 600;
+ border: none;
+ border-radius: 22px;
+ padding: 10px 32px;
+ box-shadow: 0 2px 12px #38bdf888;
+ cursor: pointer;
+ transition: background 0.3s, color 0.3s, box-shadow 0.3s;
+ margin-top: 8px;
+ letter-spacing: 1px;
+}
+
+ .read-more-btn:hover {
+ background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+ color: #bae6fd;
+ box-shadow: 0 2px 24px #bae6fd88;
+ }
+
+/* ===================== */
+/* Info Dialog Animations */
+/* ===================== */
+@keyframes fadeInBackdrop {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes zoomInModal {
+ 0% {
+ opacity: 0;
+ transform: translateY(8px) scale(0.96);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+
+.modal-backdrop--fade {
+ animation: fadeInBackdrop .25s ease-out both;
+}
+
+.dialog-modal--zoom {
+ animation: zoomInModal .28s cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+
+/* Dialog content card */
+.dialog-content {
+ background: #23272b;
+ color: #fff;
+ border-radius: 16px;
+ padding: 36px;
+ max-width: 720px;
+ width: 92vw;
+ text-align: left;
+ position: relative;
+ box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
+}
+
+/* Titles inside dialog */
+.dialog-title {
+ color: #38bdf8;
+ margin: 0 0 16px 0;
+ font-size: 1.6rem;
+ font-weight: 800;
+ letter-spacing: 1px;
+}
+
+.dialog-content h3 {
+ margin-top: 18px;
+ margin-bottom: 8px;
+ color: #38bdf8;
+ font-size: 1.15rem;
+}
+
+.dialog-content p,
+.dialog-content ul {
+ font-size: 1rem;
+ color: #bae6fd;
+ margin-bottom: 12px;
+}
+
+.dialog-content ul {
+ padding-left: 18px;
+}
+
+/* Close button at top-right */
+.dialog-close {
+ position: absolute;
+ top: 18px;
+ right: 18px;
+ width: 40px;
+ height: 40px;
+ border: none;
+ border-radius: 50%;
+ background: #18181b;
+ color: #fff;
+ font-size: 1.6rem;
+ font-weight: bold;
+ cursor: pointer;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+ transition: background 0.2s, color 0.2s;
+}
+
+ .dialog-close:hover {
+ background: #333;
+ color: #38bdf8;
+ }
diff --git a/src/app/homepage/homepage.component.html b/src/app/homepage/homepage.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..f93f3155eac1ed23de3af8aff3d4698d4bf5f515
--- /dev/null
+++ b/src/app/homepage/homepage.component.html
@@ -0,0 +1,121 @@
+
+;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [HomepageComponent]
+ });
+ fixture = TestBed.createComponent(HomepageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/homepage/homepage.component.ts b/src/app/homepage/homepage.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d18de3c386275b4e491fa8ccd10542a1b73dd9e5
--- /dev/null
+++ b/src/app/homepage/homepage.component.ts
@@ -0,0 +1,59 @@
+import { Component, Renderer2, OnInit, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { SignInComponent } from './sign-in/sign-in.component';
+import { SignUpComponent } from './sign-up/sign-up.component';
+
+@Component({
+ selector: 'app-homepage',
+ standalone: true,
+ templateUrl: './homepage.component.html',
+ styleUrls: ['./homepage.component.css'],
+ imports: [CommonModule, SignInComponent, SignUpComponent]
+})
+export class HomepageComponent implements OnInit, OnDestroy {
+ // Keep your existing auth modal flags (reverted)
+ showSignIn = false;
+ showSignUp = false;
+ showTourOverlay = false;
+
+ // (Optional legacy flags kept intact if used elsewhere)
+ selectedInfo: string | null = null;
+ showDetails = false;
+
+ // New: "Know more" dialog flag
+ showInfoDialog = false;
+
+ welcomeText = `Py-Detect is an intelligent lie detection platform designed to analyze human responses and uncover hidden truths. During each session, we also record and analyze body language using video to provide deeper behavioral insights. Whether you're evaluating a suspect, interviewing a student, or conducting sensitive assessments, Py-Detect uses advanced algorithms to ask targeted questions and deliver a truthfulness score—a percentage-based estimate of how likely the person is being honest.`;
+
+ constructor(private router: Router, private renderer: Renderer2) { }
+
+ ngOnInit() {
+ this.renderer.addClass(document.body, 'homepage-bg');
+ }
+
+ ngOnDestroy() {
+ this.renderer.removeClass(document.body, 'homepage-bg');
+ }
+
+ // === Auth modal open/close (same as your last version in the template) ===
+ openSignIn() { this.showSignIn = true; this.showSignUp = false; }
+ openSignUp() { this.showSignUp = true; this.showSignIn = false; }
+ closeModal() { this.showSignIn = this.showSignUp = false; }
+
+ // If your emits signInSuccess, keep the same handler
+ handleSignInSuccess() {
+ this.closeModal();
+ // keep your existing navigation if any; otherwise, do nothing
+ // this.router.navigate(['/infopage']);
+ }
+
+ // === Info dialog controls ===
+ openInfoDialog() { this.showInfoDialog = true; }
+ closeInfoDialog() { this.showInfoDialog = false; }
+
+ // (Optional) preserved helper
+ toggleInfo(info: string) {
+ this.selectedInfo = (this.selectedInfo === info) ? null : info;
+ }
+}
diff --git a/src/app/homepage/sign-in/sign-in.component.css b/src/app/homepage/sign-in/sign-in.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..e8945c62c8d802da5dfbffe34806ba91b3445549
--- /dev/null
+++ b/src/app/homepage/sign-in/sign-in.component.css
@@ -0,0 +1,243 @@
+:host {
+ display: block
+}
+
+
+.auth-box {
+ width: 54vw;
+ display: grid;
+ grid-template-columns: 1fr;
+ background: #2b1b6b;
+ border-radius: 18px;
+ overflow: hidden;
+ box-shadow: 0 20px 60px 0 #18181b, 0 0 32px #38bdf888;
+ min-height: 420px;
+ max-height: 520px;
+ z-index: 1100;
+ animation: popupZoomIn .35s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+@keyframes popupZoomIn {
+ 0% { opacity: 0; transform: scale(0.96) translateY(16px); }
+ 100% { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.panel-right {
+ position: relative;
+ background: radial-gradient(120% 120% at 20% 50%,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 60%);
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: stretch;
+ justify-content: stretch;
+}
+
+.right-image {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: stretch;
+ justify-content: stretch;
+}
+
+.right-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+}
+
+.panel-left {
+ padding: clamp(22px,3vw,38px);
+ background: white;
+ color: black;
+}
+
+.brand-mark {
+ width: 4vw;
+ margin-bottom: 14px;
+ border: 2px solid #b1b1b17d;
+ box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+.title {
+ margin: 0 0 6px;
+ font-size: clamp(22px,3vw,26px);
+ font-weight: 700
+}
+.subtitle {
+ margin: 0 0 8px; /* Reduced space below Create Account text */
+}
+
+.form {
+ display: grid;
+ gap: 12px
+}
+
+.field {
+ display: grid;
+ gap: 6px
+}
+
+label {
+ font-weight: 600;
+ font-size: 13px;
+}
+
+input[type="email"], input[type="password"] {
+ color: black;
+ border: 1px solid rgb(0 0 0 / 57%);
+ border-radius: 10px;
+ padding: 11px 12px;
+ outline: none
+}
+
+input::placeholder {
+ color: #808080;
+}
+
+input:focus {
+ border-color: #a78bfa;
+ box-shadow: 0 0 0 3px rgba(167,139,250,.25)
+}
+
+.error {
+ color: red;
+ font-size: 12px
+}
+
+.btn {
+ width: 100%;
+ border-radius: 999px;
+ padding: 12px 18px;
+ cursor: pointer
+}
+
+.btn-primary {
+ background: #0b0f1a;
+ color: #fff;
+ border: none;
+ font-weight: 700
+}
+
+.btn[aria-busy="true"] {
+ opacity: .75;
+ cursor: progress
+}
+
+.footnote {
+ margin: 14px 0 0;
+ font-size: 13px;
+}
+
+ .footnote a {
+ color: red;
+ text-decoration: underline
+ }
+
+.admin-info {
+ margin: 10px 0 16px 0;
+ color: #f134d0;
+ font-size: 1em;
+ font-weight: 600;
+ text-align: center;
+}
+
+.admin-checkbox {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin: 10px 0 0 0;
+}
+.admin-checkbox input[type="checkbox"] {
+ accent-color: #2b1b6b;
+ width: 18px;
+ height: 18px;
+}
+.admin-checkbox label {
+ color: #2b1b6b;
+ font-size: 1em;
+ font-weight: 600;
+ cursor: pointer;
+}
+
+
+@keyframes fadeInBackdrop {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@media(min-width:900px) {
+ .auth-box {
+ grid-template-columns: 520px 1fr
+ }
+}
+
+
+.topTitle {
+ display: flex;
+ align-items: center;
+ gap: 21px;
+}
+
+.topHeader {
+ font-size: 1vw;
+}
+
+.signin-close {
+ position: absolute;
+ top: 158px;
+ right: 450px;
+ width: 44px;
+ height: 3px;
+ border: none;
+ background: #18181b;
+ color: #fff;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 2rem;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+ z-index: 10;
+ transition: background 0.2s, color 0.2s;
+}
+
+.signin-close:hover {
+ background: #333;
+ color: #f134d0;
+}
+
+.signin-close:hover, .signup-close:hover {
+ background: linear-gradient(135deg, #333 60%, #23272b 100%);
+ color: #38bdf8;
+ box-shadow: 0 8px 24px #38bdf888;
+}
+
+.modal__close {
+ position: absolute;
+ top: 18px;
+ right: 18px;
+ width: 44px;
+ height: 44px;
+ border: none;
+ background: #18181b;
+ color: #fff;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 2rem;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+ z-index: 10;
+ transition: background 0.2s, color 0.2s;
+}
+
+.modal__close:hover {
+ background: #333;
+ color: #f134d0;
+}
diff --git a/src/app/homepage/sign-in/sign-in.component.html b/src/app/homepage/sign-in/sign-in.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..33c3521017c91cc6fc8f32d6f457d2a28fe472ef
--- /dev/null
+++ b/src/app/homepage/sign-in/sign-in.component.html
@@ -0,0 +1,45 @@
+
+
+
diff --git a/src/app/homepage/sign-in/sign-in.component.spec.ts b/src/app/homepage/sign-in/sign-in.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a493c028eccdc0bb264aa7a333750fdde2fffb36
--- /dev/null
+++ b/src/app/homepage/sign-in/sign-in.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignInComponent } from './sign-in.component';
+
+describe('SignInComponent', () => {
+ let component: SignInComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [SignInComponent]
+ });
+ fixture = TestBed.createComponent(SignInComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/homepage/sign-in/sign-in.component.ts b/src/app/homepage/sign-in/sign-in.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d0e9eed69279440d5f7c02ac1af02d94a1dd3d4d
--- /dev/null
+++ b/src/app/homepage/sign-in/sign-in.component.ts
@@ -0,0 +1,55 @@
+// sign-in.component.ts
+import { Component, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { SignInService } from './sign-in.service'; // Import SignInService
+
+@Component({
+ selector: 'app-sign-in',
+ standalone: true,
+ imports: [CommonModule, ReactiveFormsModule, RouterLink],
+ templateUrl: './sign-in.component.html',
+ styleUrls: ['./sign-in.component.css'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SignInComponent {
+ @Output() switchToSignUp = new EventEmitter();
+ form: FormGroup;
+
+ constructor(private fb: FormBuilder, private router: Router, private signInService: SignInService) {
+ this.form = this.fb.group({
+ email: ['', [Validators.required, Validators.email]], // Added email validation
+ password: ['', [Validators.required]]
+ });
+ }
+
+ goToSignUp() {
+ this.switchToSignUp.emit();
+ }
+
+ signIn() {
+ if (this.form.invalid) {
+ console.log("Form is invalid:", this.form.errors);
+ return;
+ }
+
+ const payload = {
+ email: this.form.get('email')?.value,
+ password: this.form.get('password')?.value
+ };
+
+ this.signInService.signIn(payload).subscribe(
+ (response) => {
+ console.log('Login successful:', response);
+ // Navigate to case details or home page after login success
+ this.router.navigate(['/case-details']);
+ },
+ (error) => {
+ console.error('Login failed:', error);
+ alert('Invalid email or password!');
+ }
+ );
+
+ }
+}
diff --git a/src/app/homepage/sign-in/sign-in.service.spec.ts b/src/app/homepage/sign-in/sign-in.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6204be26c1fcd8b394fee9561bce9c9740675d98
--- /dev/null
+++ b/src/app/homepage/sign-in/sign-in.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SignInService } from './sign-in.service';
+
+describe('SignInService', () => {
+ let service: SignInService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(SignInService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/homepage/sign-in/sign-in.service.ts b/src/app/homepage/sign-in/sign-in.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fde9bc29afab84ca39e38f3cadf6ce3d94899c25
--- /dev/null
+++ b/src/app/homepage/sign-in/sign-in.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class SignInService {
+
+ constructor(private http: HttpClient) { }
+
+ signIn(payload: any): Observable {
+ return this.http.post('http://127.0.0.1:5000/sign-in', payload);
+ }
+}
diff --git a/src/app/homepage/sign-up/sign-up.component.css b/src/app/homepage/sign-up/sign-up.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..c13101e788a829c383ceafd36ba491aff290965e
--- /dev/null
+++ b/src/app/homepage/sign-up/sign-up.component.css
@@ -0,0 +1,245 @@
+:host {
+ display: block
+}
+
+
+
+/* Two-column card */
+.auth-box {
+ width: 49vw;
+ display: grid;
+ grid-template-columns: 1fr;
+ background: #2b1b6b; /* purple base under left panel */
+ border-radius: 14px;
+ overflow: hidden;
+ box-shadow: 0 20px 60px rgba(0,0,0,.35);
+ position: relative;
+}
+
+/* Right column (image) */
+.panel-right {
+ position: relative;
+ background: radial-gradient(120% 120% at 20% 50%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%);
+}
+
+ .panel-right::before {
+ /* vertical fold shade between left and right */
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 26%);
+ pointer-events: none;
+ }
+
+.right-image {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 23.9vw;
+}
+
+ .right-image img {
+ width: 100%;
+ display: block
+ }
+
+/* Left column (form) */
+.panel-left {
+ padding: clamp(22px,3.5vw,36px);
+ background: white; /* brighter purple */
+ color: black;
+}
+
+.brand-mark {
+ width: 4vw;
+ margin-bottom: 14px;
+ border: 2px solid #b1b1b17d;
+ box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+.title {
+ margin: 0 0 6px;
+ font-size: clamp(22px,3vw,26px);
+ font-weight: 700
+}
+
+.subtitle {
+ margin: 0 0 18px;
+}
+
+.form {
+ display: grid;
+ gap: 12px
+}
+
+.field {
+ display: grid;
+ gap: 6px
+}
+
+label {
+ font-weight: 600;
+ font-size: 13px;
+}
+
+/* Inputs: translucent with subtle border */
+input[type="text"], input[type="password"] {
+ color: #000000;
+ border: 1px solid rgb(0 0 0 / 57%);
+ border-radius: 10px;
+ padding: 11px 12px;
+ outline: none;
+}
+
+input::placeholder {
+ color: #808080
+}
+
+input:focus {
+ border-color: #a78bfa;
+ box-shadow: 0 0 0 3px rgba(167,139,250,.25)
+}
+
+select.input-field {
+ color: #000000;
+ border: 1px solid rgb(0 0 0 / 57%);
+ border-radius: 10px;
+ padding: 11px 12px;
+ outline: none;
+ font-size: 16px;
+ width: 100%;
+ background: #fff;
+ box-sizing: border-box;
+}
+
+select.input-field:focus {
+ border-color: #a78bfa;
+ box-shadow: 0 0 0 3px rgba(167,139,250,.25);
+}
+
+.error {
+ color: red;
+ font-size: 12px
+}
+
+/* Buttons */
+.btn {
+ width: 100%;
+ border-radius: 999px;
+ padding: 12px 18px;
+ cursor: pointer
+}
+
+.btn-primary {
+ background: #0b0f1a;
+ color: #fff;
+ border: none;
+ font-weight: 700
+}
+
+.btn-dark {
+ background: #111827;
+ color: #fff;
+ border: none;
+ margin-top: 8px
+}
+
+.btn[aria-busy="true"] {
+ opacity: .75;
+ cursor: progress
+}
+
+.footnote {
+ margin: 14px 0 0;
+ font-size: 13px;
+}
+
+ .footnote a {
+ color: red;
+ text-decoration: underline
+ }
+
+/* Layout: stack on small, split on >= 900px */
+@media(min-width:900px) {
+ .auth-box {
+ grid-template-columns: 520px 1fr
+ }
+}
+
+.topTitle {
+ display: flex;
+ align-items: center;
+ gap: 21px;
+}
+
+.topHeader {
+ font-size: 1vw;
+}
+
+@keyframes fadeInBackdrop {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+
+.signup-close {
+ position: absolute;
+ top: 18px;
+ right: 18px;
+ width: 48px;
+ height: 48px;
+ border: none;
+ background: linear-gradient(135deg, #23272b 60%, #18181b 100%);
+ color: #fff;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 2.2rem;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 16px rgba(30,41,59,0.28);
+ z-index: 20;
+ transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+ outline: none;
+}
+
+.signup-close:hover {
+ background: linear-gradient(135deg, #333 60%, #23272b 100%);
+ color: #38bdf8;
+ box-shadow: 0 8px 24px #38bdf888;
+}
+
+.signin-close {
+ position: absolute;
+ top: 18px;
+ right: 18px;
+ width: 48px;
+ height: 48px;
+ border: none;
+ background: linear-gradient(135deg, #23272b 60%, #18181b 100%);
+ color: #fff;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 2.2rem;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 16px rgba(30,41,59,0.28);
+ z-index: 20;
+ transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+ outline: none;
+}
+
+.signin-close:hover {
+ background: linear-gradient(135deg, #333 60%, #23272b 100%);
+ color: #38bdf8;
+ box-shadow: 0 8px 24px #38bdf888;
+}
+
diff --git a/src/app/homepage/sign-up/sign-up.component.html b/src/app/homepage/sign-up/sign-up.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..c5b56fb38593896d6f594c24c696ec2ae75ce8fd
--- /dev/null
+++ b/src/app/homepage/sign-up/sign-up.component.html
@@ -0,0 +1,98 @@
+
+
diff --git a/src/app/homepage/sign-up/sign-up.component.spec.ts b/src/app/homepage/sign-up/sign-up.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a538848d2086c87a2e6ba18889c82da46c89e35f
--- /dev/null
+++ b/src/app/homepage/sign-up/sign-up.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SignUpComponent } from './sign-up.component';
+
+describe('SignUpComponent', () => {
+ let component: SignUpComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [SignUpComponent]
+ });
+ fixture = TestBed.createComponent(SignUpComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/homepage/sign-up/sign-up.component.ts b/src/app/homepage/sign-up/sign-up.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9160f87674d20c3cb4fbb602555cda0163cab8ee
--- /dev/null
+++ b/src/app/homepage/sign-up/sign-up.component.ts
@@ -0,0 +1,117 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators, AbstractControl } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { SignUpService } from './sign-up.service'; // Import the SignUpService
+
+@Component({
+ selector: 'app-sign-up',
+ standalone: true,
+ imports: [CommonModule, ReactiveFormsModule, RouterLink],
+ templateUrl: './sign-up.component.html',
+ styleUrls: ['./sign-up.component.css']
+})
+export class SignUpComponent {
+ form: FormGroup;
+ private isSubmitting = false;
+
+ @Output() switchToSignIn = new EventEmitter();
+
+ constructor(private fb: FormBuilder, private router: Router, private signUpService: SignUpService) { // Inject SignUpService
+ this.form = this.fb.group({
+ name: ['', [Validators.required, Validators.minLength(2)]],
+ email: ['', [
+ Validators.required,
+ Validators.pattern(/(^[^@]+@[^@]+\.[^@]+$)|(^\+?\d[\d\-\s]{8,14}\d$)/)
+ ]],
+ //gender: ['', [Validators.required]],
+ password: ['', [Validators.required, Validators.minLength(6)]],
+ confirmPassword: ['', [Validators.required]],
+ role: ['', [Validators.required]],
+ }, { validators: [this.passwordsMatchValidator] });
+ }
+
+ control(path: string): AbstractControl | null { return this.form.get(path); }
+
+ controlHasError(path: string, error?: string): boolean {
+ const c = this.control(path);
+ if (!c) return false;
+ return error ? !!(c.touched && c.errors?.[error]) : !!(c.touched && c.invalid);
+ }
+
+ showPwdMismatch(): boolean {
+ const pw = this.control('password');
+ const cpw = this.control('confirmPassword');
+ const groupMismatch = this.form.errors?.['passwordMismatch'];
+ return !!(pw && cpw && (cpw.touched || pw.touched) && groupMismatch);
+ }
+
+ passwordsMatchValidator(group: AbstractControl) {
+ const pw = group.get('password')?.value;
+ const cpw = group.get('confirmPassword')?.value;
+ return pw && cpw && pw === cpw ? null : { passwordMismatch: true };
+ }
+
+
+
+ async submit() {
+ // Confirm button click
+ alert("Sign-Up button clicked!");
+ console.log("Sign-Up button clicked!");
+
+ // Mark all form controls as touched to trigger validation
+ this.form.markAllAsTouched();
+
+ // Check if the form is invalid
+ if (this.form.invalid) {
+ console.log("Form is invalid:");
+
+ // Log individual control states for debugging
+ Object.keys(this.form.controls).forEach(controlName => {
+ const control = this.form.get(controlName);
+ if (control?.invalid) {
+ console.log(`${controlName} is invalid. Errors:`, control?.errors);
+ }
+ });
+ return;
+ }
+
+ try {
+ // Prepare the payload to send to the backend
+ const payload = {
+ name: this.control('name')?.value,
+ email: this.control('email')?.value,
+ //gender: this.control('gender')?.value,
+ password: this.control('password')?.value,
+ role: this.control('role')?.value
+ };
+
+ console.log("Form data before submission:", this.form.value);
+ console.log("Payload to send:", payload);
+
+ // Make the HTTP request
+ await this.signUpService.signUp(payload).toPromise();
+ console.log("Sign-up request sent successfully!");
+
+ // On success, navigate to Sign-In page
+ this.router.navigateByUrl('/auth/signin');
+ } catch (error) {
+ console.error("Error occurred during sign-up:", error); // Log any errors from the API call
+ }
+ }
+
+
+
+
+
+ navigateHome() { this.router.navigateByUrl('/'); }
+
+ goToLogin() {
+ this.switchToSignIn.emit(); // ← Emit event instead of router navigation
+ }
+
+ tr(key: string): string {
+ const map: Record = { title: 'Create your account', subtitle: 'Join to continue' };
+ return map[key] || '';
+ }
+}
diff --git a/src/app/homepage/sign-up/sign-up.service.spec.ts b/src/app/homepage/sign-up/sign-up.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8d9c755c97f2ec904f303397d087834436659ad3
--- /dev/null
+++ b/src/app/homepage/sign-up/sign-up.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SignUpService } from './sign-up.service';
+
+describe('SignUpService', () => {
+ let service: SignUpService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(SignUpService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/homepage/sign-up/sign-up.service.ts b/src/app/homepage/sign-up/sign-up.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2689153fd55cd0bb1e5daddae94e29e5f0ccb417
--- /dev/null
+++ b/src/app/homepage/sign-up/sign-up.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http'; // Import HttpClient for API calls
+import { Observable } from 'rxjs'; // Import Observable for async handling
+
+@Injectable({
+ providedIn: 'root'
+})
+export class SignUpService {
+ private apiUrl = 'http://127.0.0.1:5000'; // The base URL for your Flask backend
+ constructor(private http: HttpClient) { }
+
+ // Method to sign up a user
+ signUp(payload: any): Observable {
+ return this.http.post(`${this.apiUrl}/sign-up`, payload);
+ }
+}
diff --git a/src/app/infopage/infopage.component.css b/src/app/infopage/infopage.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..8959e943317636a3bffedf515bb605599635739b
--- /dev/null
+++ b/src/app/infopage/infopage.component.css
@@ -0,0 +1,362 @@
+body, html {
+ margin: 0;
+ padding: 0;
+ font-family: 'Arial', 'Segoe UI', 'Roboto', sans-serif;
+ background: url('/assets/background.jpg') no-repeat center center fixed !important;
+ background-size: cover !important;
+}
+
+.homepage-container {
+ display: flex;
+ flex-direction: row;
+ height: 100vh;
+ color: #e3f6ff;
+ position: relative;
+ align-items: center; /* Center content vertically */
+ justify-content: center; /* Center content horizontally */
+ background: url(/assets/py-detect-illustration.png) no-repeat center center fixed;
+ background-size: cover;
+}
+
+.left-section {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center; /* Center vertically */
+ align-items: center; /* Center horizontally */
+ padding-left: 120px; /* Reduced from 240px to 120px */
+ padding-top: 0;
+ position: relative;
+}
+
+.topbar {
+ display: flex;
+ align-items: flex-start;
+ height: 80px;
+ padding-left: 0;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 30;
+}
+
+.logo {
+ width: 120px;
+ height: 120px;
+ margin-left: 0;
+ margin-top: 0;
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 40;
+}
+
+.logo-fixed {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 120px;
+ height: 120px;
+ z-index: 100;
+ margin: 0;
+}
+
+/* Add gap between logo and browser border */
+.logo-img {
+ width: 6vw;
+ height: 6vw;
+ border-radius: 50%;
+ box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
+ position: fixed;
+ top: 18px; /* Add gap from top */
+ left: 18px; /* Add gap from left */
+ z-index: 300;
+ margin: 0;
+}
+
+/* Move Py-Detect text further down by increasing top value of .logo-title-row */
+.logo-title-row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ position: absolute;
+ top: 180px; /* Increased from 120px to move text further down */
+ left: 48px;
+ z-index: 300;
+ gap: 32px;
+ justify-content: flex-start;
+ width: 100%;
+}
+
+.py-detect-title {
+ position: fixed;
+ margin-left: 132px;
+ margin-top: -208px;
+ text-align: left;
+ font-size: 4vw;
+ color: #38bdf8;
+ font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+ font-weight: 900;
+ letter-spacing: 6px;
+ background: none;
+ border: none;
+ box-shadow: none;
+ min-width: unset;
+ max-width: unset;
+}
+
+ /* Py-Detect title: each letter with its own color */
+ .py-detect-title .py-letter.p {
+ color: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.y {
+ color: #38bdf8;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-shape {
+ color: #e3f6ff;
+ background: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+ border: 2px solid #23272b;
+ }
+
+ .py-detect-title .py-letter.d {
+ color: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.e {
+ color: #38bdf8;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.t {
+ color: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.e2 {
+ color: #38bdf8;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.c {
+ color: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.t2 {
+ color: #38bdf8;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+.py-shape {
+ display: inline-block;
+ width: 18px;
+ height: 4px;
+ background: #38bdf8;
+ margin: 0 8px;
+ vertical-align: middle;
+ border-radius: 2px;
+ box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+ border: 2px solid #23272b;
+}
+/* ===== Layout ===== */
+.content {
+ min-height: calc(100vh - var(--masthead-min-height));
+ display: flex;
+ justify-content: center;
+ padding: 16px;
+}
+
+.wrapper {
+ max-width: 960px;
+ width: 100%;
+ margin: 80px auto 0 auto; /* Add top margin to wrapper to create space below title */
+}
+
+.page-title {
+ margin: 0 0 12px;
+ color: #fff;
+ font-weight: 800;
+}
+
+/* ===== Steps / Card / Form ===== */
+.steps {
+ display: flex;
+ gap: 8px;
+ margin-bottom: 16px;
+}
+
+.step {
+ flex: 1;
+ text-align: center;
+ padding: 10px 8px;
+ border-radius: 8px;
+ background: #e9ecef;
+ font-weight: 600;
+ opacity: 0.8;
+}
+
+ .step.active {
+ background: #2f855a;
+ color: #fff;
+ opacity: 1;
+ }
+
+.card {
+ border: 1px solid #e2e8f0;
+ border-radius: 10px;
+ padding: 16px;
+ background: #fff;
+ box-shadow: 0 2px 10px rgba(0,0,0,.04);
+ margin-bottom: 16px;
+ width: 100%;
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 12px 16px;
+}
+
+label {
+ display: flex;
+ flex-direction: column; /* input below the label text */
+ gap: 6px;
+ font-size: 14px;
+}
+
+/* Put label text and * on the same line */
+.label-main {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ font-weight: 600;
+}
+
+label.full {
+ grid-column: 1 / -1;
+}
+
+input, select, textarea, button {
+ font: inherit;
+}
+
+input, select, textarea {
+ padding: 10px;
+ border: 1px solid #cbd5e0;
+ border-radius: 6px;
+ background: #fdfdfd;
+}
+
+textarea {
+ resize: vertical;
+}
+
+fieldset {
+ border: 1px dashed #cbd5e0;
+ border-radius: 8px;
+ padding: 10px 12px;
+}
+
+legend {
+ padding: 0 6px;
+}
+
+.req {
+ color: #c53030;
+ line-height: 1;
+}
+
+.error {
+ color: #c53030;
+ font-size: 12px;
+}
+
+.row-between {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.list {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-top: 8px;
+}
+
+.list-item {
+ display: flex;
+ gap: 8px;
+}
+
+button.link {
+ background: none;
+ border: none;
+ color: #2b6cb0;
+ cursor: pointer;
+ padding: 0;
+}
+
+button.danger {
+ background: #e53e3e;
+ color: #fff;
+ border: none;
+ border-radius: 6px;
+ padding: 8px 10px;
+ cursor: pointer;
+}
+
+.files {
+ margin: 6px 0 0;
+ padding-left: 16px;
+}
+
+.actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+}
+
+button {
+ padding: 10px 14px;
+ border: 1px solid #cbd5e0;
+ border-radius: 8px;
+ background: #f7fafc;
+ cursor: pointer;
+}
+
+ button.primary {
+ background: #2f855a;
+ color: #fff;
+ border-color: #2f855a;
+ }
+
+ button:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
+
+.scrollable-suspect-form {
+ max-height: 350px;
+ overflow-y: auto;
+ padding-right: 8px; /* Optional: for scrollbar space */
+}
+
+@media (max-width: 700px) {
+ .grid {
+ grid-template-columns: 1fr;
+ }
+
+ .brand-logo {
+ width: 64px;
+ height: 64px;
+ }
+}
diff --git a/src/app/infopage/infopage.component.html b/src/app/infopage/infopage.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..acc33153941256f741b849e492b26ee1e3a4e407
--- /dev/null
+++ b/src/app/infopage/infopage.component.html
@@ -0,0 +1,245 @@
+
+
+
+
+
+
diff --git a/src/app/infopage/infopage.component.spec.ts b/src/app/infopage/infopage.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..13c83b1cd6aac8c1c7c603f6caa84a54fda3be51
--- /dev/null
+++ b/src/app/infopage/infopage.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InfopageComponent } from './infopage.component';
+
+describe('InfopageComponent', () => {
+ let component: InfopageComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [InfopageComponent]
+ });
+ fixture = TestBed.createComponent(InfopageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/infopage/infopage.component.ts b/src/app/infopage/infopage.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4d5b259a5a4ca394cef1a286b181f31ba9c0f9ef
--- /dev/null
+++ b/src/app/infopage/infopage.component.ts
@@ -0,0 +1,223 @@
+import { Component, OnInit } from '@angular/core';
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { CaseStoreService, PoliceCase } from '../case-store.service';
+
+type CrimeType = 'Theft' | 'Assault' | 'Fraud' | 'Murder' | 'Cybercrime' | 'Other';
+type Gender = 'Male' | 'Female' | 'Other';
+type CaseStatus = 'Open' | 'Under Investigation' | 'Closed';
+
+@Component({
+ selector: 'app-infopage',
+ templateUrl: './infopage.component.html',
+ styleUrls: ['./infopage.component.css']
+})
+export class InfopageComponent implements OnInit {
+ step = 1;
+
+ crimeTypes: CrimeType[] = ['Theft', 'Assault', 'Fraud', 'Murder', 'Cybercrime', 'Other'];
+ genders: Gender[] = ['Male', 'Female', 'Other'];
+ statuses: CaseStatus[] = ['Open', 'Under Investigation', 'Closed'];
+
+ // If navigating here via Edit, we store the index to update.
+ private editIndex: number | null = null;
+
+ form: FormGroup = this.fb.group({
+ crime: this.fb.group({
+ caseId: [''],
+ crimeType: ['', Validators.required],
+ dateTime: ['', Validators.required],
+ location: ['', Validators.required],
+ reportedByName: [''],
+ reportedByContact: [''],
+ description: ['', [Validators.required, Validators.minLength(10)]],
+ }),
+
+ suspect: this.fb.group({
+ suspectId: [''],
+ fullName: ['', Validators.required],
+ alias: [''],
+ dob: [''],
+ age: ['', [Validators.min(0)]],
+ gender: ['Male' as Gender, Validators.required],
+ address: [''],
+ knownLocations: this.fb.array([]),
+ contact: this.fb.group({
+ phone: [''],
+ email: ['', Validators.email],
+ }),
+ physical: this.fb.group({
+ heightCm: [''],
+ weightKg: [''],
+ build: [''],
+ hairColor: [''],
+ eyeColor: [''],
+ marks: [''],
+ }),
+ photo: [null], // File
+ }),
+
+ notes: this.fb.group({
+ initialFindings: [''],
+ officerInCharge: [''],
+ status: ['Open' as CaseStatus, Validators.required],
+ attachments: this.fb.array([]), // Files
+ }),
+ });
+
+ constructor(
+ private fb: FormBuilder,
+ private router: Router,
+ private route: ActivatedRoute,
+ private caseStore: CaseStoreService
+ ) { }
+
+ // ----------------- lifecycle -----------------
+ ngOnInit(): void {
+ // If navigated with router state from Record page Edit action
+ const state: any = history.state || {};
+ if (typeof state.editIndex === 'number' && state.editCase) {
+ this.editIndex = state.editIndex;
+ this.patchFromCase(state.editCase as PoliceCase);
+ return;
+ }
+ // If navigated via /infopage/:id, load by caseId
+ const caseId = this.route.snapshot.paramMap.get('id');
+ if (caseId) {
+ const cases = this.caseStore.getPoliceCases();
+ const idx = cases.findIndex(c => c.caseId == caseId);
+ if (idx !== -1) {
+ this.editIndex = idx;
+ this.patchFromCase(cases[idx]);
+ }
+ }
+ }
+
+ // ----------------- getters -----------------
+ get crimeGroup() { return this.form.get('crime') as FormGroup; }
+ get suspectGroup() { return this.form.get('suspect') as FormGroup; }
+ get notesGroup() { return this.form.get('notes') as FormGroup; }
+
+ get knownLocations(): FormArray {
+ return this.suspectGroup.get('knownLocations') as FormArray;
+ }
+ get attachments(): FormArray {
+ return this.notesGroup.get('attachments') as FormArray;
+ }
+
+ // ----------------- helpers (arrays) -----------------
+ addKnownLocation() { this.knownLocations.push(new FormControl('')); }
+ removeKnownLocation(index: number) { this.knownLocations.removeAt(index); }
+
+ // ----------------- file helpers -----------------
+ setPhoto(file: File | null) { this.suspectGroup.get('photo')?.setValue(file || null); }
+ addAttachment(file: File) { this.attachments.push(new FormControl(file)); }
+
+ onPhotoChange(event: Event): void {
+ const input = event.target as HTMLInputElement | null;
+ let file: File | null = null;
+ if (input && input.files && input.files.length > 0) file = input.files[0];
+ this.setPhoto(file);
+ if (input) input.value = '';
+ }
+
+ onAttachmentsChange(event: Event): void {
+ const input = event.target as HTMLInputElement | null;
+ if (!input || !input.files || input.files.length === 0) return;
+ for (let i = 0; i < input.files.length; i++) {
+ const f = input.files.item(i);
+ if (f) this.addAttachment(f);
+ }
+ input.value = '';
+ }
+
+ // ----------------- wizard -----------------
+ next() {
+ if (this.step === 1 && this.crimeGroup.invalid) { this.crimeGroup.markAllAsTouched(); return; }
+ if (this.step === 2 && this.suspectGroup.invalid) { this.suspectGroup.markAllAsTouched(); return; }
+ this.step = Math.min(3, this.step + 1);
+ }
+ back() { this.step = Math.max(1, this.step - 1); }
+
+ // ----------------- edit support -----------------
+ private patchFromCase(c: PoliceCase): void {
+ // Patch only fields guaranteed by your current PoliceCase type
+ // (do not read c.caseId / c.dateTime here to avoid TS errors)
+ this.form.patchValue({
+ crime: {
+ caseId: '', // optional: leave as is or derive from elsewhere
+ crimeType: c.crime || '',
+ dateTime: '', // optional: leave as is
+ location: c.police?.address || '',
+ reportedByName: '',
+ reportedByContact: '',
+ description: c.police?.information || ''
+ },
+ suspect: {
+ suspectId: '',
+ fullName: c.accused?.name || '',
+ alias: c.accused?.occupation || '',
+ dob: '',
+ age: c.accused?.age || '',
+ gender: c.accused?.gender || '',
+ address: c.accused?.address || ''
+ },
+ notes: {
+ initialFindings: c.police?.information || '',
+ officerInCharge: c.police?.name || '',
+ status: 'Open',
+ }
+ });
+ // Reset arrays (optional)
+ this.knownLocations.clear();
+ this.attachments.clear();
+ this.step = 1;
+ }
+
+ private mapToPoliceCase(): PoliceCase {
+ const v: any = this.form.value;
+ // Build an object that matches your current PoliceCase type (no caseId/dateTime)
+ return {
+ crime: v.crime?.crimeType || 'Unknown',
+ police: {
+ name: v.notes?.officerInCharge || '—',
+ station: '—',
+ address: v.crime?.location || '—',
+ pincode: '',
+ dutyPerson: v.notes?.officerInCharge || '—',
+ modeOfCrime: v.crime?.crimeType || '—',
+ information: v.notes?.initialFindings || ''
+ },
+ accused: {
+ name: v.suspect?.fullName || '—',
+ age: v.suspect?.age || '—',
+ gender: v.suspect?.gender || '—',
+ address: v.suspect?.address || '—',
+ occupation: v.suspect?.alias || ''
+ }
+ };
+ }
+
+ // ----------------- submit -----------------
+ submit() {
+ if (this.form.invalid) {
+ this.form.markAllAsTouched();
+ return;
+ }
+
+ if (this.editIndex !== null) {
+ // Update existing record (service must have updatePoliceCaseAt; see earlier message)
+ this.caseStore.updatePoliceCaseAt(this.editIndex, this.mapToPoliceCase() as PoliceCase);
+ } else {
+ // Add new record using your existing service mapping
+ this.caseStore.addFromInfoForm(this.form.value);
+ }
+
+ // Navigate to record page
+ this.router.navigate(['/record']);
+ }
+
+ navigateHome(): void {
+ this.router.navigate(['/']);
+ }
+}
diff --git a/src/app/py-detect/py-detect.component.css b/src/app/py-detect/py-detect.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..43ca682da111b73cf75fb134ebf325995ab298a0
--- /dev/null
+++ b/src/app/py-detect/py-detect.component.css
@@ -0,0 +1,394 @@
+/* Custom Styles */
+body, html {
+ background: url('/assets/background.jpg') no-repeat center center fixed;
+ background-color: #1a202c;
+ margin: 0;
+ padding: 0;
+ font-family: 'Inter', Arial, sans-serif;
+}
+
+.h-full {
+ min-height: 100vh;
+}
+
+.bg-gray-900 {
+ background-color: #1a202c;
+}
+
+.text-gray-200 {
+ color: #e2e8f0;
+}
+
+.flex {
+ display: flex;
+}
+
+.flex-col {
+ flex-direction: column;
+}
+
+.justify-between {
+ justify-content: space-between;
+}
+
+.items-center {
+ align-items: center;
+}
+
+.p-4 {
+ padding: 1rem;
+}
+
+.border-b {
+ border-bottom: 1px solid #4a5568;
+}
+
+.bg-gray-800 {
+ background-color: #2d3748;
+}
+
+.text-lg {
+ font-size: 1.125rem;
+}
+
+.font-semibold {
+ font-weight: 600;
+}
+
+.tracking-wide {
+ letter-spacing: 0.05em;
+}
+
+.text-white {
+ color: #fff;
+}
+
+.gap-4 {
+ gap: 1rem;
+}
+
+.home-btn, .btn-start, .btn-stop {
+ background: none;
+ border: none;
+ color: #fff;
+ font-size: 1rem;
+ padding: 0.5rem 1.2rem;
+ border-radius: 6px;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.home-btn:hover, .btn-start:hover, .btn-stop:hover {
+ background: #2b6cb0;
+}
+
+.max-w-4xl {
+ max-width: 56rem;
+}
+
+.mx-auto {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.space-y-6 > * + * {
+ margin-top: 1.5rem;
+}
+
+.bg-gray-800 {
+ background-color: #2d3748;
+}
+
+.border {
+ border: 1px solid #4a5568;
+}
+
+.rounded-xl {
+ border-radius: 1rem;
+}
+
+.shadow-md {
+ box-shadow: 0 4px 24px rgba(0,0,0,0.12);
+}
+
+.text-sm {
+ font-size: 0.875rem;
+}
+
+.text-gray-400 {
+ color: #a0aec0;
+}
+
+.mb-2 {
+ margin-bottom: 0.5rem;
+}
+
+.text-lg {
+ font-size: 1.125rem;
+}
+
+.font-semibold {
+ font-weight: 600;
+}
+
+.text-gray-200 {
+ color: #e2e8f0;
+}
+
+.mb-4 {
+ margin-bottom: 1rem;
+}
+
+.flex {
+ display: flex;
+}
+
+.items-center {
+ align-items: center;
+}
+
+.justify-between {
+ justify-content: space-between;
+}
+
+.badge {
+ padding: 4px 8px;
+ border-radius: 9999px;
+ font-size: 12px;
+ letter-spacing: 0.5px;
+ background: #2d3748;
+ color: #fff;
+ margin-right: 8px;
+}
+
+.badge.bg-blue-600 {
+ background: #3182ce;
+}
+.badge.bg-green-600 {
+ background: #38a169;
+}
+.badge.bg-yellow-600 {
+ background: #ecc94b;
+ color: #222;
+}
+
+.mic {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background: #4a5568;
+ box-shadow: 0 0 0 0 rgba(31, 130, 68, 0.7);
+ transition: box-shadow 0.25s ease;
+ margin-right: 8px;
+}
+.mic.bg-green-600 {
+ background: #2f855a;
+ box-shadow: 0 0 8px 2px rgba(31, 130, 68, 0.7);
+}
+
+.recog {
+ font-size: 12px;
+ padding: 4px 10px;
+ border-radius: 6px;
+ border: 1px dashed #3a3f47;
+ opacity: 0.8;
+ background: #2d3748;
+ color: #fff;
+}
+.recog.bg-blue-600 {
+ border-style: solid;
+ border-color: #3b82f6;
+}
+
+.text-xs {
+ font-size: 0.75rem;
+}
+.text-gray-500 {
+ color: #718096;
+}
+.flex-1 {
+ flex: 1;
+}
+.mt-2 {
+ margin-top: 0.5rem;
+}
+.space-x-6 > * + * {
+ margin-left: 1.5rem;
+}
+.w-full {
+ width: 100%;
+}
+.bg-gray-700 {
+ background-color: #4a5568;
+}
+.rounded-xl {
+ border-radius: 1rem;
+}
+
+/* Stylish font and button animation */
+.stylish-font {
+ font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+ letter-spacing: 2px;
+ text-shadow: 0 0 8px #38bdf8, 0 2px 8px #22222244;
+ transition: color 0.3s, text-shadow 0.3s;
+}
+
+.main-flex-layout {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: flex-start;
+ width: 100%;
+ height: 80vh;
+ gap: 32px;
+}
+
+.question-section {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ min-width: 420px;
+ max-width: 700px;
+ padding: 32px 24px 32px 32px;
+ position: relative;
+}
+
+.big-question {
+ font-size: 3.2rem;
+ font-weight: 900;
+ color: #38bdf8;
+ margin-bottom: 24px;
+ text-align: left;
+ min-height: 100px;
+ max-width: 700px;
+ word-break: break-word;
+}
+
+.big-question-animated {
+ animation: questionFadeIn 0.7s, pulseText 1.2s infinite alternate;
+}
+
+@keyframes pulseText {
+ 0% { text-shadow: 0 0 8px #38bdf8, 0 2px 8px #22222244; }
+ 100% { text-shadow: 0 0 32px #38bdf8, 0 2px 24px #22222288; }
+}
+
+.video-section {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ min-width: 400px;
+ max-width: 100vw;
+ padding: 32px 32px 32px 0;
+}
+
+.camera-video {
+ border-radius: 18px;
+ border: 4px solid #38bdf8;
+ box-shadow: 0 0 24px #38bdf844, 0 0 8px #1e293b88;
+ background: #222;
+ object-fit: cover;
+ margin-bottom: 18px;
+ transition: box-shadow 0.4s, border 0.4s;
+}
+
+.camera-video-large {
+ width: 60vw;
+ max-width: 800px;
+ height: 40vh;
+ max-height: 60vh;
+}
+
+/* Animated buttons */
+.home-btn, .btn-start, .btn-stop, .btn-resume, .btn-submit, .back-btn {
+ font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+ font-size: 1.05rem;
+ font-weight: 700;
+ letter-spacing: 2px;
+ background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+ color: #e3f6ff;
+ box-shadow: 0 2px 16px #38bdf888;
+ border: none;
+ border-radius: 12px;
+ padding: 0.55rem 1.3rem;
+ margin: 0 0.3rem;
+ cursor: pointer;
+ transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
+ position: relative;
+ overflow: hidden;
+ animation: buttonPulse 1.2s infinite alternate;
+}
+
+.btn-submit {
+ position: fixed;
+ right: 32px;
+ bottom: 32px;
+ z-index: 1000;
+ font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+ font-size: 1.05rem;
+ font-weight: 700;
+ letter-spacing: 2px;
+ background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+ color: #e3f6ff;
+ box-shadow: 0 2px 16px #38bdf888;
+ border: none;
+ border-radius: 12px;
+ padding: 0.55rem 1.3rem;
+ margin: 0 0.3rem;
+ cursor: pointer;
+ transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
+ overflow: hidden;
+ animation: buttonPulse 1.2s infinite alternate;
+}
+
+@keyframes buttonPulse {
+ 0% { box-shadow: 0 2px 16px #38bdf888; transform: scale(1); }
+ 100% { box-shadow: 0 2px 32px #bae6fd88; transform: scale(1.07); }
+}
+
+.home-btn:hover, .btn-start:hover, .btn-stop:hover, .btn-resume:hover, .btn-submit:hover, .back-btn:hover {
+ background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+ color: #bae6fd;
+ box-shadow: 0 2px 24px #bae6fd88;
+ animation: buttonPulse 0.7s;
+}
+
+.fade-out {
+ opacity: 0.4;
+ pointer-events: none;
+ transition: opacity 0.5s;
+}
+
+.global-bottom-left-btn {
+ position: fixed;
+ left: 24px;
+ bottom: 24px;
+ z-index: 1000;
+}
+
+/* Reduce Pykara logo size in py-detect topbar */
+header .pykara-logo-small {
+ width: 48px;
+ height: 48px;
+ object-fit: contain;
+}
+
+/* Pykara logo size for consistency across homepage, py-detect, and infopage */
+.pykara-logo-consistent {
+ width: 120px;
+ height: 120px;
+ object-fit: contain;
+}
+
+header .text-lg.font-semibold.tracking-wide.text-white {
+ font-size: 2.8rem;
+ font-weight: 900;
+ letter-spacing: 8px;
+ color: #e3f6ff;
+ font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+ text-shadow: 0 0 16px #1e293b, 0 0 8px #38bdf8, 0 2px 8px #22222244;
+}
diff --git a/src/app/py-detect/py-detect.component.html b/src/app/py-detect/py-detect.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..86225c309a7bc61d7d3b88217f8b0e3d92b6fb59
--- /dev/null
+++ b/src/app/py-detect/py-detect.component.html
@@ -0,0 +1,57 @@
+;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [SampleComponent]
+ });
+ fixture = TestBed.createComponent(SampleComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/py-detect/py-detect.component.ts b/src/app/py-detect/py-detect.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e3d892fbb2d7f00cf45cfa03608e997fc2ba85ef
--- /dev/null
+++ b/src/app/py-detect/py-detect.component.ts
@@ -0,0 +1,611 @@
+import { Component, OnDestroy, OnInit, signal, ViewChild, ElementRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router, NavigationStart } from '@angular/router';
+import { Subscription } from 'rxjs';
+
+declare global {
+ interface Window {
+ webkitSpeechRecognition?: any;
+ SpeechRecognition?: any;
+ }
+}
+
+type QAResult = {
+ question: string;
+ transcript: string;
+ language: string;
+ avgPitchHz: number | null;
+ avgVolume: number | null; // 0..1 (rough RMS)
+ audioUrl: string;
+ startedAt: number;
+ endedAt: number;
+};
+
+@Component({
+ standalone: true,
+ selector: 'app-py-detect',
+ imports: [CommonModule],
+ templateUrl: './py-detect.component.html',
+ styleUrls: ['./py-detect.component.css']
+})
+export class PyDetectComponent implements OnInit, OnDestroy {
+
+ // ---- UI state ----
+ status = signal<'idle' | 'asking' | 'listening' | 'processing'>('idle');
+ autoMode = signal(true); // Auto Next is always enabled
+ micOn = signal(false);
+ ttsEnabled = signal(true); // Speak Questions is always enabled
+ recognizerReady = signal(false);
+
+ // ---- TTS active flag ----
+ private isActive = false;
+
+ // ---- Q/A data ----
+ currentQuestion = signal('');
+ questionIndex = signal(0);
+ log: QAResult[] = [];
+
+
+ // ---- Constructor with Router Injection ----
+ private routerSubscription?: Subscription;
+
+ constructor(private router: Router) {
+ // Cancel TTS on any navigation away
+ this.routerSubscription = this.router.events.subscribe(event => {
+ if (event instanceof NavigationStart) {
+ if (window.speechSynthesis) {
+ window.speechSynthesis.cancel();
+ }
+ }
+ });
+ }
+
+ // ---- Recording/analysis handles ----
+ private mediaStream?: MediaStream;
+ private mediaRecorder?: MediaRecorder;
+ private audioChunks: Blob[] = [];
+
+ private audioCtx?: AudioContext;
+ private analyser?: AnalyserNode;
+ private sourceNode?: MediaStreamAudioSourceNode;
+
+ private pitchSamples: number[] = [];
+ private volumeSamples: number[] = [];
+ private analyserBuffer?: Float32Array;
+ private analyserTimer?: any;
+
+ // ---- Speech Recognition ----
+ private recognition?: any; // webkitSpeechRecognition
+ private transcriptSoFar = '';
+ private detectedLang = 'auto';
+
+ // ---- Settings ----
+ private maxAnswerMs = 10_000; // per answer recording window
+ private silenceTimeout?: any; // Declare silenceTimeout here
+
+ private analyserWindowMs = 100; // Declare analyserWindowMs property
+
+ // Example question source (replace with API call when ready)
+ private seedQuestions = [
+ 'Please introduce yourself in two sentences.',
+ 'What motivates you to take on challenging tasks?',
+ 'Describe a situation where you solved a tough problem.',
+ 'How do you handle disagreements in a team?',
+ 'What is a recent technology you learned and why?'
+ ];
+
+ // Button state signals
+ startDisabled = signal(false); // Always enabled
+ stopDisabled = signal(true);
+ resumeDisabled = signal(true);
+ submitDisabled = signal(true);
+
+ // Add missing public methods and properties for template binding
+ public videoStatus: string = '';
+ public videoStream?: MediaStream;
+ public videoRecorder?: MediaRecorder;
+ @ViewChild('videoElement', { static: false }) videoElement?: ElementRef;
+ public videoChunks: Blob[] = [];
+ public videoAnswers: Blob[] = [];
+
+ // Navigate back to the homepage
+ navigateHome() {
+ if (window.speechSynthesis) {
+ window.speechSynthesis.cancel(); // Stop any TTS audio immediately on navigation
+ }
+ this.router.navigate(['/']); // Navigates to the root (homepage)
+ }
+
+ // Navigate to the info page
+ goToInfoPage() {
+ if (window.speechSynthesis) {
+ window.speechSynthesis.cancel(); // Stop any TTS audio immediately on navigation
+ }
+ this.router.navigate(['/infopage']);
+ }
+
+ // ======== Lifecycle ========
+ ngOnInit(): void {
+ this.isActive = true;
+ }
+
+ ngOnDestroy(): void {
+ this.isActive = false;
+ if (this.routerSubscription) {
+ this.routerSubscription.unsubscribe();
+ }
+ this.cleanupAll();
+ this.stopVideoRecording();
+ this.micOn.set(false); // Stop mic indicator
+ this.recognizerReady.set(false); // Stop recognizer indicator
+ this.videoStatus = '';
+ if (this.videoStream) {
+ this.videoStream.getTracks().forEach(t => t.stop());
+ this.videoStream = undefined;
+ }
+ this.videoRecorder = undefined;
+ if (window.speechSynthesis) {
+ window.speechSynthesis.cancel(); // Stop any TTS audio
+ }
+ }
+
+ // ======== Main flow ========
+ async start(): Promise {
+ if (this.status() !== 'idle') return;
+ this.status.set('asking');
+ this.setupRecognition();
+ this.recognizerReady.set(!!this.recognition);
+ await this.startCamera();
+ this.startDisabled.set(false); // Always enabled
+ this.stopDisabled.set(false);
+ this.resumeDisabled.set(true);
+ this.submitDisabled.set(true);
+ this.autoMode.set(true); // Enable auto mode for continuous questions
+ this.nextQuestionLoopRunning = true;
+ this.nextQuestionLoop();
+ }
+
+ stopAll(): void {
+ this.autoMode.set(false); // Stop auto mode to halt question loop
+ this.nextQuestionLoopRunning = false;
+ if (this.videoRecorder && this.videoRecorder.state === 'recording') {
+ this.videoRecorder.stop();
+ }
+ if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
+ this.cleanupRecording();
+ }
+ this.stopRecognition();
+ if (window.speechSynthesis) {
+ window.speechSynthesis.cancel(); // Stop any TTS audio
+ }
+ // Stop and clear video stream
+ if (this.videoStream) {
+ this.videoStream.getTracks().forEach(t => t.stop());
+ this.videoStream = undefined;
+ if (this.videoElement?.nativeElement) {
+ this.videoElement.nativeElement.srcObject = null;
+ }
+ }
+ this.videoRecorder = undefined;
+ this.videoStatus = '';
+ this.micOn.set(false);
+ this.recognizerReady.set(false);
+ this.status.set('idle');
+ this.startDisabled.set(false); // Always enabled
+ this.stopDisabled.set(false); // Ensure Stop button is enabled after stopping
+ this.resumeDisabled.set(false);
+ this.submitDisabled.set(false);
+ }
+
+ public resume() {
+ // Start camera if not already started
+ this.startCamera();
+ // Resume video recording if paused
+ if (this.videoRecorder && this.videoRecorder.state === 'paused') {
+ this.videoRecorder.resume();
+ this.videoStatus = 'Recording...';
+ this.stopDisabled.set(false);
+ this.resumeDisabled.set(true);
+ this.submitDisabled.set(true);
+ }
+ // Resume question loop if stopped
+ if (this.status() === 'idle') {
+ this.autoMode.set(true);
+ this.nextQuestionLoopRunning = true;
+ this.startDisabled.set(false);
+ this.stopDisabled.set(false);
+ this.resumeDisabled.set(true);
+ this.submitDisabled.set(true);
+ this.nextQuestionLoop();
+ }
+ }
+
+ public submitAll() {
+ this.stopAll();
+ this.stopVideoRecording();
+ this.videoStatus = 'Submitted!';
+ this.startDisabled.set(true);
+ this.stopDisabled.set(true);
+ this.resumeDisabled.set(true);
+ this.submitDisabled.set(true);
+ // TODO: Upload all videoAnswers to backend
+
+ // Example: Calculate dummy percentages (replace with real logic)
+ const truePercentage = 70;
+ const falsePercentage = 30;
+ this.router.navigate(['/validationpage'], { state: { truePercentage, falsePercentage } });
+ }
+
+ private nextQuestionLoopRunning = false;
+
+ private async nextQuestionLoop(): Promise {
+ while (this.autoMode() && this.nextQuestionLoopRunning) {
+ // 1) Get next question
+ const q = await this.fetchNextQuestion();
+ this.currentQuestion.set(q);
+ this.status.set('asking');
+ if (this.ttsEnabled()) {
+ await this.speak(q);
+ }
+ this.status.set('listening');
+ await this.startVideoRecording();
+ const startedAt = Date.now();
+ let silenceTimer: any;
+ let userSpoke = false;
+ this.transcriptSoFar = '';
+ this.startRecognition('en-IN');
+ const speechPromise = new Promise((resolve) => {
+ const checkSpeech = () => {
+ if (this.transcriptSoFar.trim().length > 0) {
+ userSpoke = true;
+ clearTimeout(silenceTimer);
+ resolve();
+ } else {
+ silenceTimer = setTimeout(() => resolve(), 5000);
+ }
+ };
+ const poll = () => {
+ checkSpeech();
+ if (!userSpoke && silenceTimer && this.nextQuestionLoopRunning) setTimeout(poll, 500);
+ };
+ poll();
+ });
+ await speechPromise;
+ this.stopRecognition();
+ this.stopVideoRecording();
+ const { audioUrl, avgPitchHz, avgVolume, transcript, language } =
+ await this.captureAnswerWithAnalysis(this.maxAnswerMs);
+ const endedAt = Date.now();
+ this.log.push({
+ question: q,
+ transcript,
+ language,
+ avgPitchHz,
+ avgVolume,
+ audioUrl,
+ startedAt,
+ endedAt
+ });
+ this.questionIndex.set(this.questionIndex() + 1);
+ this.status.set('processing');
+ await this.sleep(700);
+ }
+ this.status.set('idle');
+ this.stopVideoRecording();
+ this.startDisabled.set(false);
+ this.stopDisabled.set(true);
+ this.resumeDisabled.set(false);
+ this.submitDisabled.set(false);
+ }
+
+ // ======== Question source ========
+ private async fetchNextQuestion(): Promise {
+ // Replace this with HTTP call to your backend if needed.
+ // Example: const { question } = await this.http.get<{question:string}>('/api/next-question').toPromise();
+ const i = this.questionIndex() % this.seedQuestions.length;
+ return this.seedQuestions[i];
+ }
+
+ // ======== TTS (question playback) ========
+ private speak(text: string): Promise {
+ return new Promise((resolve) => {
+ if (!this.isActive) return resolve(); // Only play TTS if component is active
+ const synth = window.speechSynthesis;
+ if (!synth) return resolve(); // gracefully continue without TTS
+
+ const utter = new SpeechSynthesisUtterance(text);
+ // Optional voice selection: pick an Indian English voice if available
+ const prefer = ['en-IN', 'en-GB', 'en-US'];
+ const voices = synth.getVoices();
+ const v = voices.find(v =>
+ prefer.includes(v.lang) || v.lang.toLowerCase().startsWith('en'));
+ if (v) utter.voice = v;
+
+ utter.rate = 1.0;
+ utter.pitch = 1.0;
+ utter.onend = () => resolve();
+ utter.onerror = () => resolve(); // do not block flow
+ synth.cancel(); // ensure clean queue
+ synth.speak(utter);
+ });
+ }
+
+ // ======== Recording + Recognition + Analysis ========
+ private async captureAnswerWithAnalysis(ms: number): Promise<{
+ audioUrl: string; avgPitchHz: number | null; avgVolume: number | null; transcript: string; language: string;
+ }> {
+ // reset buffers
+ this.audioChunks = [];
+ this.pitchSamples = [];
+ this.volumeSamples = [];
+ this.transcriptSoFar = '';
+ this.detectedLang = 'auto';
+
+ // 1) mic stream
+ this.mediaStream = await navigator.mediaDevices.getUserMedia({
+ audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true },
+ video: false
+ });
+ this.micOn.set(true);
+
+ // 2) prepare MediaRecorder
+ const mime = this.chooseMimeType();
+ this.mediaRecorder = new MediaRecorder(this.mediaStream, { mimeType: mime });
+ this.mediaRecorder.ondataavailable = (e) => {
+ if (e.data && e.data.size > 0) this.audioChunks.push(e.data);
+ };
+
+ // 3) start recognition (if available)
+ this.startRecognition('en-IN');
+
+ // 4) start analysis
+ await this.startAnalyser(this.mediaStream);
+
+ // 5) record for fixed window
+ const recordPromise = new Promise((resolve) => {
+ this.mediaRecorder!.onstop = () => resolve();
+ this.mediaRecorder!.start(200); // gather chunks
+ setTimeout(() => {
+ if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
+ this.mediaRecorder.stop();
+ }
+ }, ms);
+ });
+
+ await recordPromise;
+
+ // 6) stop analysis + recognition + mic
+ this.stopAnalyser();
+ this.stopRecognition();
+ this.cleanupMediaStream();
+ this.micOn.set(false);
+
+ // 7) build audio URL
+ const blob = new Blob(this.audioChunks, { type: mime });
+ const audioUrl = URL.createObjectURL(blob);
+
+ // 8) aggregate metrics
+ const avgPitchHz = this.averageNonZero(this.pitchSamples) ?? null;
+ const avgVolume = this.averageNonZero(this.volumeSamples) ?? null;
+
+ const transcript = this.transcriptSoFar.trim();
+ const language = this.detectedLang;
+
+ return { audioUrl, avgPitchHz, avgVolume, transcript, language };
+ }
+
+ private waitForSilenceOrContinue() {
+ if (this.silenceTimeout) clearTimeout(this.silenceTimeout);
+ this.silenceTimeout = setTimeout(() => {
+ this.stopAll();
+ }, 5000); // Timeout after 5 seconds of silence
+ }
+
+
+ private chooseMimeType(): string {
+ const candidates = [
+ 'audio/webm;codecs=opus',
+ 'audio/webm',
+ 'audio/mp4',
+ 'audio/mpeg'
+ ];
+ for (const c of candidates) {
+ if (MediaRecorder.isTypeSupported(c)) return c;
+ }
+ return '';
+ }
+
+ // ======== Web Audio analysis (pitch + volume) ========
+ private async startAnalyser(stream: MediaStream) {
+ this.audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();
+ this.sourceNode = this.audioCtx.createMediaStreamSource(stream);
+ this.analyser = this.audioCtx.createAnalyser();
+ this.analyser.fftSize = 2048;
+ this.sourceNode.connect(this.analyser);
+
+ this.analyserBuffer = new Float32Array(this.analyser.fftSize);
+
+ const tick = () => {
+ if (!this.analyser || !this.analyserBuffer) return;
+ this.analyser.getFloatTimeDomainData(this.analyserBuffer);
+
+ const pitch = this.estimatePitchFromAutocorrelation(
+ this.analyserBuffer, this.audioCtx!.sampleRate
+ );
+ const vol = this.rootMeanSquare(this.analyserBuffer);
+
+ if (pitch) this.pitchSamples.push(pitch);
+ this.volumeSamples.push(vol);
+
+ this.analyserTimer = setTimeout(tick, this.analyserWindowMs);
+ };
+ tick();
+ }
+
+ private stopAnalyser() {
+ if (this.analyserTimer) clearTimeout(this.analyserTimer);
+ this.analyserTimer = null;
+ if (this.sourceNode) { try { this.sourceNode.disconnect(); } catch { } }
+ if (this.analyser) { try { this.analyser.disconnect(); } catch { } }
+ if (this.audioCtx) { try { this.audioCtx.close(); } catch { } }
+ this.sourceNode = undefined;
+ this.analyser = undefined;
+ this.audioCtx = undefined;
+ }
+
+ // Simple autocorrelation-based pitch estimator
+ private estimatePitchFromAutocorrelation(buf: Float32Array, sampleRate: number): number | null {
+ // 1) normalize
+ let size = buf.length;
+ let rms = 0;
+ for (let i = 0; i < size; i++) rms += buf[i] * buf[i];
+ rms = Math.sqrt(rms / size);
+ if (rms < 0.01) return null; // too quiet
+
+ // 2) autocorrelation
+ const MAX_SAMPLES = Math.floor(size / 2);
+ let bestOffset = -1;
+ let bestCorr = 0;
+ let lastCorr = 1;
+
+ for (let offset = 1; offset < MAX_SAMPLES; offset++) {
+ let corr = 0;
+ for (let i = 0; i < MAX_SAMPLES; i++) {
+ corr += Math.abs(buf[i] - buf[i + offset]);
+ }
+ corr = 1 - (corr / MAX_SAMPLES);
+ if (corr > 0.9 && corr > lastCorr) {
+ bestCorr = corr;
+ bestOffset = offset;
+ }
+ lastCorr = corr;
+ }
+ if (bestOffset > 0) {
+ const freq = sampleRate / bestOffset;
+ if (freq >= 50 && freq <= 400) return Math.round(freq); // human speech band (rough)
+ }
+ return null;
+ }
+
+ private rootMeanSquare(buf: Float32Array): number {
+ let sum = 0;
+ for (let i = 0; i < buf.length; i++) sum += buf[i] * buf[i];
+ return Math.sqrt(sum / buf.length); // 0..~0.5 typical speech
+ }
+
+ private averageNonZero(arr: number[]): number | undefined {
+ const f = arr.filter(x => x && isFinite(x));
+ if (!f.length) return undefined;
+ return Math.round((f.reduce((a, b) => a + b, 0) / f.length) * 100) / 100;
+ }
+
+ // ======== Speech Recognition ========
+ private setupRecognition() {
+ const Ctor = window.webkitSpeechRecognition || window.SpeechRecognition;
+ if (!Ctor) return;
+
+ this.recognition = new Ctor();
+ this.recognition.continuous = true;
+ this.recognition.interimResults = false; // Disable interim results (only final results)
+
+ this.recognition.onresult = (event: any) => {
+ let finalText = '';
+
+ // Loop over all result sets, but only process final results
+ for (let i = event.resultIndex; i < event.results.length; i++) {
+ const result = event.results[i];
+ // Get the transcript of the final recognized word
+ if (result.isFinal) {
+ finalText += result[0].transcript.trim(); // Append final result and clean up
+ }
+ }
+
+ // Clean up the result by removing filler words (optional)
+ this.transcriptSoFar = this.removeFillerWords(finalText.trim());
+ };
+
+ this.recognition.onerror = (error: any) => {
+ console.error('Speech recognition error', error);
+ };
+
+ this.recognition.onend = () => {
+ console.log('Speech recognition has ended');
+ };
+ }
+
+ private removeFillerWords(text: string): string {
+ const fillerWords = ['um', 'ah', 'like', 'you know', 'so', 'actually', 'basically'];
+ const regex = new RegExp(`\\b(${fillerWords.join('|')})\\b`, 'gi');
+ return text.replace(regex, '').replace(/\s+/g, ' ').trim(); // Clean extra spaces after removal
+ }
+
+ private startRecognition(lang: string) {
+ if (!this.recognition) return;
+ try {
+ this.recognition.lang = lang; // set your target language; change to 'ta-IN' for Tamil, etc.
+ this.recognition.start();
+ } catch { /* ignore double-start */ }
+ }
+
+ private stopRecognition() {
+ if (!this.recognition) return;
+ try { this.recognition.stop(); } catch { /* ignore */ }
+ }
+
+ // ======== Clean-up ========
+ private cleanupMediaStream() {
+ if (this.mediaStream) {
+ this.mediaStream.getTracks().forEach(t => t.stop());
+ }
+ this.mediaStream = undefined;
+ }
+
+ private cleanupRecording() {
+ try { if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') this.mediaRecorder.stop(); } catch { }
+ this.mediaRecorder = undefined;
+ this.audioChunks = [];
+ this.stopAnalyser();
+ this.cleanupMediaStream();
+ }
+
+ private cleanupAll() {
+ this.stopRecognition();
+ this.cleanupRecording();
+ }
+
+ // ======== Helpers ========
+ private sleep(ms: number) { return new Promise(res => setTimeout(res, ms)); }
+
+ public async startCamera() {
+ if (!this.videoStream) {
+ this.videoStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+ if (this.videoElement?.nativeElement) {
+ this.videoElement.nativeElement.srcObject = this.videoStream;
+ }
+ }
+ }
+
+ public async startVideoRecording() {
+ if (!this.videoStream) return;
+ this.videoChunks = [];
+ this.videoRecorder = new MediaRecorder(this.videoStream, { mimeType: 'video/webm' });
+ this.videoRecorder.ondataavailable = (e) => {
+ if (e.data && e.data.size > 0) this.videoChunks.push(e.data);
+ };
+ this.videoRecorder.onstart = () => {
+ this.videoStatus = 'Recording...';
+ };
+ this.videoRecorder.onstop = () => {
+ this.videoStatus = 'Stopped';
+ const videoBlob = new Blob(this.videoChunks, { type: 'video/webm' });
+ this.videoAnswers.push(videoBlob);
+ };
+ this.videoRecorder.start();
+ }
+
+ public stopVideoRecording() {
+ if (this.videoRecorder && this.videoRecorder.state !== 'inactive') {
+ this.videoRecorder.stop();
+ }
+ }
+}
diff --git a/src/app/recordpage/recordpage.component.css b/src/app/recordpage/recordpage.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..47cedaede7a5fc5ff40b3d7a5953c2cae3e8a5e2
--- /dev/null
+++ b/src/app/recordpage/recordpage.component.css
@@ -0,0 +1,665 @@
+/* ===== Header ===== */
+:root {
+ --masthead-min-height: 140px;
+}
+
+.masthead {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ padding: 24px 24px 12px;
+ min-height: var(--masthead-min-height);
+ background: transparent;
+ margin-bottom: 48px;
+}
+
+
+.logo {
+ width: 120px;
+ height: 120px;
+ margin-left: 0;
+ margin-top: 0;
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 40;
+}
+
+.logo-fixed {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 120px;
+ height: 120px;
+ z-index: 100;
+ margin: 0;
+}
+
+/* Add gap between logo and browser border */
+.logo-img {
+ width: 6vw;
+ height: 6vw;
+ border-radius: 50%;
+ box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
+ position: fixed;
+ top: 18px; /* Add gap from top */
+ left: 18px; /* Add gap from left */
+ z-index: 300;
+ margin: 0;
+}
+
+.logo-title-row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ position: absolute;
+ top: 180px; /* Increased from 120px to move text further down */
+ left: 48px;
+ z-index: 300;
+ gap: 32px;
+ justify-content: flex-start;
+ width: 100%;
+}
+
+.py-detect-title {
+ position: fixed;
+ margin-left: 132px;
+ margin-top: -208px;
+ text-align: left;
+ font-size: 4vw;
+ color: #38bdf8;
+ font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+ font-weight: 900;
+ letter-spacing: 6px;
+ background: none;
+ border: none;
+ box-shadow: none;
+ min-width: unset;
+ max-width: unset;
+}
+
+ /* Py-Detect title: each letter with its own color */
+ .py-detect-title .py-letter.p {
+ color: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.y {
+ color: #38bdf8;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-shape {
+ color: #e3f6ff;
+ background: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+ border: 2px solid #23272b;
+ }
+
+ .py-detect-title .py-letter.d {
+ color: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.e {
+ color: #38bdf8;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.t {
+ color: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.e2 {
+ color: #38bdf8;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.c {
+ color: #e3f6ff;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+ .py-detect-title .py-letter.t2 {
+ color: #38bdf8;
+ text-shadow: 0 0 6px #38bdf8;
+ }
+
+.py-shape {
+ display: inline-block;
+ width: 18px;
+ height: 4px;
+ background: #38bdf8;
+ margin: 0 8px;
+ vertical-align: middle;
+ border-radius: 2px;
+ box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
+ border: 2px solid #23272b;
+}
+
+/*.title {
+ font-weight: 800;
+ margin-bottom: 12px;
+}*/
+
+/* header tools */
+.toolbar {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ position: absolute;
+ right: 32px;
+ top: -211%;
+ transform: translateY(-50%);
+ width: auto;
+ margin-bottom: 0;
+ z-index: 2;
+}
+
+.search {
+ padding: 10px;
+ border: 1px solid #cbd5e0;
+ border-radius: 6px;
+ width: min(360px, 100%);
+}
+
+/* layout: keep table centered and scrollable */
+.padded-table-wrap {
+ width: 100%;
+ padding-left: 48px;
+ padding-right: 48px;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ background: rgba(30, 41, 59, 0.55); /* semi-transparent dark background */
+ border-radius: 18px;
+ box-shadow: 0 4px 32px rgba(30,41,59,0.12);
+ position: relative;
+ z-index: 1;
+}
+
+.table-wrap {
+ width: 100%;
+ max-width: 1700px;
+ margin: 0 auto;
+ max-height: 80vh;
+ min-height: 252px;
+ overflow: auto;
+}
+
+/* table */
+.records {
+ width: 100%;
+ min-width: 1500px;
+ max-width: 1700px;
+ border-collapse: collapse;
+ background: #fff;
+ border: 1px solid #e2e8f0;
+ border-radius: 8px;
+ margin: 0 auto;
+}
+
+@media (max-width: 1800px) {
+ .records {
+ max-width: 100vw;
+ min-width: 1000px;
+ }
+ .table-wrap {
+ max-width: 100vw;
+ min-height: 400px;
+ }
+}
+
+@media (max-width: 900px) {
+ .records {
+ min-width: 0;
+ width: 100%;
+ max-width: 100vw;
+ }
+ .table-wrap {
+ min-height: 200px;
+ }
+ .padded-table-wrap {
+ padding-left: 4px;
+ padding-right: 4px;
+ }
+ .records-header-row {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 12px;
+ padding-left: 4px;
+ padding-right: 4px;
+ }
+ .page-title {
+ text-align: center;
+ margin-right: 0;
+ }
+ .toolbar {
+ position: static;
+ transform: none;
+ width: 100%;
+ justify-content: flex-end;
+ margin-top: 8px;
+ }
+}
+
+.records th, .records td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #edf2f7;
+ text-align: left;
+ white-space: nowrap;
+}
+
+.records thead th {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ background: linear-gradient(90deg, #23272b 0%, #0ea5e9 100%);
+ color: #fff;
+ font-weight: 800;
+ font-size: 1.08rem;
+ letter-spacing: 0.5px;
+ box-shadow: 0 2px 8px rgba(30,41,59,0.10);
+ border-bottom: 2.5px solid #0ea5e9;
+ text-shadow: 0 1px 4px rgba(30,41,59,0.10);
+ padding-top: 14px;
+ padding-bottom: 14px;
+}
+
+.records th.actions-col, .records td.actions {
+ color: #fff;
+}
+
+.records tbody tr:last-child td {
+ border-bottom: none;
+}
+
+.records tbody tr {
+ transition: background 0.18s;
+}
+
+ .records tbody tr:nth-child(odd) {
+ background: #fafafa;
+ }
+
+ .records tbody tr:hover {
+ background: #eef5ff;
+ }
+
+/* column widths */
+.records th:nth-child(1), .records td:nth-child(1) {
+ width: 90px;
+}
+
+.records th:nth-child(2), .records td:nth-child(2) {
+ width: 140px;
+}
+
+.records th:nth-child(3), .records td:nth-child(3) {
+ width: 180px;
+}
+
+.records th:nth-child(4), .records td:nth-child(4) {
+ min-width: 220px;
+}
+
+.records th:nth-child(5), .records td:nth-child(5) {
+ width: 130px;
+}
+
+.records th:nth-child(6), .records td:nth-child(6) {
+ width: 140px;
+}
+
+.actions-col {
+ width: 200px;
+}
+
+/* badges + helpers */
+.status {
+ display: inline-block;
+ padding: 2px 8px;
+ border-radius: 999px;
+ font-weight: 600;
+ font-size: 12px;
+}
+
+ .status.open {
+ background: #dcfce7;
+ color: #166534;
+ }
+
+ .status.under {
+ background: #fff7ed;
+ color: #9a3412;
+ }
+
+ .status.closed {
+ background: #fee2e2;
+ color: #991b1b;
+ }
+
+.mono {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+.ellipsis {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+/* buttons */
+.actions {
+ display: flex;
+ gap: 8px;
+}
+
+.btn {
+ padding: 8px 12px;
+ border: 1px solid #cbd5e0;
+ border-radius: 8px;
+ background: #f7fafc;
+ cursor: pointer;
+}
+
+ .btn.view {
+ background: #2b6cb0;
+ color: #fff;
+ border-color: #2b6cb0;
+ }
+
+ .btn.edit {
+ background: #805ad5;
+ color: #fff;
+ border-color: #805ad5;
+ }
+
+.empty {
+ text-align: center;
+ color: #718096;
+ padding: 24px;
+}
+
+/* modal */
+.modal-backdrop {
+ position: fixed;
+ inset: 0;
+ background: rgba(0,0,0,.45);
+}
+
+.modal {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ width: min(720px, 94vw);
+ background: #fff;
+ border-radius: 12px;
+ box-shadow: 0 20px 60px rgba(0,0,0,.2);
+ overflow: hidden;
+}
+
+.modal-header, .modal-footer {
+ padding: 12px 16px;
+ background: #f7fafc;
+}
+
+.modal-body {
+ padding: 16px;
+}
+
+
+
+.detail-row {
+ display: grid;
+ grid-template-columns: 160px 1fr;
+ gap: 8px;
+ padding: 6px 0;
+}
+
+ .detail-row span {
+ color: #4a5568;
+ }
+
+.detail-block .label {
+ font-weight: 700;
+ margin-bottom: 6px;
+}
+
+.explain {
+ white-space: pre-wrap;
+}
+
+.records-center {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 90px;
+}
+
+.records-header-row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ margin-bottom: 24px;
+ padding-left: 48px;
+ padding-right: 48px;
+ box-sizing: border-box;
+ position: relative;
+}
+
+.page-title {
+ text-align: center;
+ width: 100%;
+ color: #fff;
+ font-weight: 800;
+ margin-bottom: 32px; /* Increased from 0 to 32px for more space */
+ margin-right: 0;
+ font-size: 2.1rem;
+ position: relative;
+ z-index: 1;
+}
+
+/* sort indicators */
+.sort {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ margin-left: 6px;
+}
+
+ .sort.asc {
+ border-bottom: 6px solid #4a5568;
+ }
+
+ .sort.desc {
+ border-top: 6px solid #4a5568;
+ }
+
+/* Remove global blur and pointer-events when modal is open */
+/*
+.show-details body > *:not(.cdk-overlay-container):not(app-root),
+.show-details app-root > *:not(.modal):not(.modal-backdrop) {
+ filter: blur(8px) !important;
+ pointer-events: none !important;
+ user-select: none !important;
+}
+*/
+
+.show-details .modal,
+.show-details .modal-backdrop {
+ filter: none !important;
+ pointer-events: auto !important;
+ user-select: auto !important;
+ z-index: 200;
+}
+
+/* Remove previous ::before blur if present */
+.show-details main.content::before {
+ display: none !important;
+}
+
+/* Modal blur overlay for white shadow and blur effect */
+.modal-blur-overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 199;
+ background: rgba(255,255,255,0.45); /* white shadow */
+ backdrop-filter: blur(8px);
+ pointer-events: none;
+ display: block;
+}
+
+.show-details .modal-blur-overlay {
+ display: block;
+}
+
+/* Modern Searchbar Styles */
+.modern-searchbar-container {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ margin: 48px 0 32px 0;
+ z-index: 10;
+}
+
+.modern-searchbar-container.compact {
+ width: auto;
+ margin: 0 0 0 24px;
+ align-items: center;
+}
+
+.modern-searchbar-form {
+ display: flex;
+ align-items: center;
+ background: linear-gradient(90deg, #38bdf8 0%, #7c3aed 100%);
+ border-radius: 48px;
+ box-shadow: 0 4px 24px rgba(30,41,59,0.18);
+ padding: 0 16px 0 18px;
+ width: min(600px, 90vw);
+ height: 72px;
+ position: relative;
+}
+
+.modern-searchbar-form.compact {
+ height: 44px;
+ min-width: 260px;
+ width: 320px;
+ padding: 0 8px 0 10px;
+}
+
+.modern-searchbar-icon {
+ display: flex;
+ align-items: center;
+ margin-right: 12px;
+}
+
+.modern-searchbar-input {
+ flex: 1;
+ border: none;
+ outline: none;
+ background: transparent;
+ color: #fff;
+ font-size: 1.05rem;
+ font-weight: 500;
+ letter-spacing: 0.5px;
+ padding: 0 6px;
+ height: 32px;
+}
+
+.modern-searchbar-input::placeholder {
+ color: #e0e7ef;
+ opacity: 1;
+ font-weight: 400;
+}
+
+.modern-searchbar-btn {
+ background: #fff;
+ color: #7c3aed;
+ border: none;
+ border-radius: 32px;
+ font-size: 0.98rem;
+ font-weight: 700;
+ padding: 0 18px;
+ height: 32px;
+ margin-left: 10px;
+ cursor: pointer;
+ box-shadow: 0 2px 8px rgba(124,58,237,0.10);
+ transition: background 0.18s, color 0.18s;
+}
+
+.modern-searchbar-btn:hover {
+ background: #ede9fe;
+ color: #4f46e5;
+}
+
+.modern-searchbar-form.white-bg {
+ background: #fff !important;
+ box-shadow: 0 4px 24px rgba(30,41,59,0.10);
+}
+
+.modern-searchbar-input.white-bg {
+ background: #fff !important;
+ color: #23272b !important;
+}
+
+.modern-searchbar-input.white-bg::placeholder {
+ color: #64748b !important;
+ opacity: 1;
+}
+
+.modern-searchbar-icon svg {
+ stroke: #64748b !important;
+}
+
+.modern-searchbar-btn {
+ background: #64748b;
+ color: #fff;
+ border: none;
+ border-radius: 32px;
+ font-size: 0.98rem;
+ font-weight: 700;
+ padding: 0 18px;
+ height: 32px;
+ margin-left: 10px;
+ cursor: pointer;
+ box-shadow: 0 2px 8px rgba(124,58,237,0.10);
+ transition: background 0.18s, color 0.18s;
+}
+
+.modern-searchbar-btn:hover {
+ background: #38bdf8;
+ color: #fff;
+}
+
+/* Search bar at top right corner */
+.searchbar-topright {
+ position: fixed;
+ top: 54px;
+ right: 48px;
+ z-index: 1001;
+ display: flex;
+ align-items: center;
+}
+
+@media (max-width: 900px) {
+ .searchbar-topright {
+ top: 12px;
+ right: 8px;
+ width: 95vw;
+ justify-content: flex-end;
+ }
+ .modern-searchbar-form.compact {
+ width: 100%;
+ min-width: 0;
+ }
+}
+
+
diff --git a/src/app/recordpage/recordpage.component.html b/src/app/recordpage/recordpage.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..b6769d3232b193d62908f8fda447159ccbf4f93b
--- /dev/null
+++ b/src/app/recordpage/recordpage.component.html
@@ -0,0 +1,117 @@
+
+
+
+
+
+
diff --git a/src/app/recordpage/recordpage.component.spec.ts b/src/app/recordpage/recordpage.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4d13c055195c41b89d1dbf6495c247394d4ccf40
--- /dev/null
+++ b/src/app/recordpage/recordpage.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecordpageComponent } from './recordpage.component';
+
+describe('RecordpageComponent', () => {
+ let component: RecordpageComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [RecordpageComponent]
+ });
+ fixture = TestBed.createComponent(RecordpageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/recordpage/recordpage.component.ts b/src/app/recordpage/recordpage.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0e3937f71c7c891a43c3976f17c87afdd5d11fb
--- /dev/null
+++ b/src/app/recordpage/recordpage.component.ts
@@ -0,0 +1,111 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { CaseStoreService, PoliceCase } from '../case-store.service';
+
+@Component({
+ selector: 'app-recordpage',
+ templateUrl: './recordpage.component.html',
+ styleUrls: ['./recordpage.component.css']
+})
+export class RecordpageComponent implements OnInit {
+ cases: PoliceCase[] = [];
+
+ // modal
+ showDetails = false;
+ selectedCase: PoliceCase | null = null;
+ selectedIndex = -1;
+
+ // quick filter
+ q = '';
+
+ // simple sort state
+ sortKey: 'caseId' | 'crime' | 'dateTime' | 'location' | 'status' | 'Investigation Officer' = 'dateTime';
+ sortDir: 'asc' | 'desc' = 'desc';
+
+ constructor(private caseStore: CaseStoreService, private router: Router) { }
+
+ ngOnInit(): void {
+ this.load();
+ }
+
+ load(): void {
+ this.cases = this.caseStore.getPoliceCases();
+ }
+
+ // search over visible columns (no accused)
+ get filtered(): PoliceCase[] {
+ const s = (this.q || '').toLowerCase();
+ if (!s) return this.cases;
+ return this.cases.filter(c =>
+ (c.caseId || '').toString().toLowerCase().includes(s) ||
+ (c.crime || '').toLowerCase().includes(s) ||
+ (c.police?.address || '').toLowerCase().includes(s) ||
+ (c.status || '').toLowerCase().includes(s) ||
+ (c.police?.name || '').toLowerCase().includes(s)
+ );
+ }
+
+ // sorting helpers
+ setSort(key: typeof this.sortKey) {
+ if (this.sortKey === key) {
+ this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
+ } else {
+ this.sortKey = key;
+ this.sortDir = key === 'dateTime' ? 'desc' : 'asc';
+ }
+ }
+ isAsc(key: typeof this.sortKey) { return this.sortKey === key && this.sortDir === 'asc'; }
+ isDesc(key: typeof this.sortKey) { return this.sortKey === key && this.sortDir === 'desc'; }
+ ariaSort(key: typeof this.sortKey) {
+ return this.sortKey === key ? (this.sortDir === 'asc' ? 'ascending' : 'descending') : 'none';
+ }
+
+ private cell(c: any, key: typeof this.sortKey): string | number {
+ switch (key) {
+ case 'caseId': return (c.caseId ?? '').toString();
+ case 'crime': return (c.crime ?? '').toString();
+ case 'dateTime': return c.dateTime ? new Date(c.dateTime).getTime() : 0;
+ case 'location': return (c.police?.address ?? '').toString();
+ case 'status': return (c.status ?? '').toString();
+ case 'Investigation Officer': return (c.police?.name ?? '').toString();
+ }
+ }
+
+ get rows(): PoliceCase[] {
+ const out = this.filtered.slice();
+ const key = this.sortKey, dir = this.sortDir === 'asc' ? 1 : -1;
+ out.sort((a, b) => {
+ const va = this.cell(a, key), vb = this.cell(b, key);
+ if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;
+ return va.toString().localeCompare(vb.toString()) * dir;
+ });
+ return out;
+ }
+
+ openDetails(c: PoliceCase, i: number): void {
+ this.selectedCase = c;
+ this.selectedIndex = i;
+ this.showDetails = true;
+ }
+
+ closeDetails(): void {
+ this.showDetails = false;
+ this.selectedCase = null;
+ this.selectedIndex = -1;
+ }
+
+ editCase(c: PoliceCase, i: number): void {
+ // Navigate to /infopage/:id for editing
+ this.router.navigate(['/infopage', c.caseId]);
+ }
+
+ onModernSearch() {
+ // Optionally, you can trigger filtering or any other logic here
+ // For now, just prevent form submission from reloading the page
+ return false;
+ }
+
+ navigateHome(): void {
+ this.router.navigate(['/']);
+ }
+}
diff --git a/src/app/shared/case-store.service.ts b/src/app/shared/case-store.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c47867714eac86ab0e4949e293ad868a500604e0
--- /dev/null
+++ b/src/app/shared/case-store.service.ts
@@ -0,0 +1,132 @@
+import { Injectable } from '@angular/core';
+
+export interface PoliceCase {
+ // Optional metadata used by your UI
+ caseId?: string;
+ dateTime?: string;
+ status?: 'Open' | 'Under Investigation' | 'Closed';
+ crime: string;
+ police: {
+ name: string;
+ station: string;
+ address: string;
+ pincode: string;
+ dutyPerson: string;
+ modeOfCrime: string;
+ information?: string;
+ };
+ accused: {
+ name: string;
+ age: string | number;
+ gender: string;
+ address: string;
+ occupation?: string;
+ };
+}
+
+@Injectable({ providedIn: 'root' })
+export class CaseStoreService {
+ private readonly storageKey = 'py_detect_police_cases';
+ private cases: PoliceCase[] = [];
+
+ constructor() {
+ this.load();
+ }
+
+ /** Create (newest first) */
+ addPoliceCase(c: PoliceCase): void {
+ this.cases.unshift(c);
+ this.save();
+ }
+
+ /** Read */
+ getPoliceCases(): PoliceCase[] {
+ return this.cases;
+ }
+
+ /** Update by array index */
+ updatePoliceCaseAt(index: number, updated: PoliceCase): void {
+ if (index >= 0 && index < this.cases.length) {
+ this.cases[index] = updated;
+ this.save();
+ }
+ }
+
+ /**
+ * Convenience: map Info page reactive-form value to PoliceCase and store it.
+ * Call with the whole this.form.value from InfopageComponent.
+ */
+ addFromInfoForm(formValue: any): void {
+ const crime = (formValue && formValue.crime) || {};
+ const suspect = (formValue && formValue.suspect) || {};
+ const notes = (formValue && formValue.notes) || {};
+
+ const mapped: PoliceCase = {
+ caseId: crime.caseId || '',
+ dateTime: crime.dateTime || '',
+ status: notes.status || 'Open',
+ crime: crime.crimeType || 'Unknown',
+ police: {
+ name: notes.officerInCharge || '—',
+ station: '—', // not captured on Info page
+ address: crime.location || '—',
+ pincode: '', // not captured on Info page
+ dutyPerson: notes.officerInCharge || '—',
+ modeOfCrime: crime.crimeType || '—',
+ information: notes.initialFindings || ''
+ },
+ accused: {
+ name: suspect.fullName || '—',
+ age: suspect.age || '—',
+ gender: suspect.gender || '—',
+ address: suspect.address || '—',
+ occupation: suspect.alias || ''
+ }
+ };
+
+ this.addPoliceCase(mapped);
+ }
+
+ /** Persist to localStorage (safe to keep; remove if not needed) */
+ private save(): void {
+ try { localStorage.setItem(this.storageKey, JSON.stringify(this.cases)); } catch { }
+ }
+
+ /** Load from localStorage */
+ private load(): void {
+ try {
+ const raw = localStorage.getItem(this.storageKey);
+ this.cases = raw ? (JSON.parse(raw) as PoliceCase[]) : [];
+ } catch {
+ this.cases = [];
+ }
+ // Seed a default case if none exist (for development/testing)
+ if (this.cases.length === 0) {
+ this.cases = [
+ {
+ caseId: 'CASE-001',
+ dateTime: new Date().toISOString(),
+ status: 'Open',
+ crime: 'Theft',
+ police: {
+ name: 'Officer John Doe',
+ station: 'Central Station',
+ address: '123 Main St, City',
+ pincode: '123456',
+ dutyPerson: 'Officer John Doe',
+ modeOfCrime: 'Burglary',
+ information: 'Initial investigation started.'
+ },
+ accused: {
+ name: 'Jane Smith',
+ age: 30,
+ gender: 'Female',
+ address: '456 Side Rd, City',
+ occupation: 'Unemployed'
+ }
+ }
+ ];
+ this.save();
+ }
+ }
+}
diff --git a/src/app/validationpage/validationpage.component.css b/src/app/validationpage/validationpage.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..adc4c5d2662d332872382aef4158d1284be27567
--- /dev/null
+++ b/src/app/validationpage/validationpage.component.css
@@ -0,0 +1,108 @@
+/* Professional, modern look for validation results */
+.validation-result-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: linear-gradient(120deg, #23272b 0%, #38bdf8 100%);
+ position: relative;
+}
+
+h2 {
+ font-size: 2.6rem;
+ font-weight: 900;
+ color: #e3f6ff;
+ margin-bottom: 32px;
+ letter-spacing: 2px;
+ text-shadow: 0 2px 16px #1e293b88;
+}
+
+.percentage-box {
+ background: rgba(30,41,59,0.92);
+ border-radius: 18px;
+ box-shadow: 0 8px 32px rgba(30,41,59,0.48), 0 0 24px #38bdf844;
+ border: 3px solid #38bdf8;
+ padding: 48px 64px;
+ min-width: 340px;
+ max-width: 480px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 32px;
+}
+
+.percentage-box p {
+ font-size: 2.2rem;
+ font-weight: 700;
+ color: #bae6fd;
+ margin: 0;
+ letter-spacing: 1px;
+ text-shadow: 0 0 8px #38bdf888;
+}
+
+.percentage-box p strong {
+ color: #38bdf8;
+ font-size: 2.3rem;
+ font-weight: 900;
+ margin-right: 12px;
+}
+
+/* Add a subtle animation for result appearance */
+.validation-result-container {
+ animation: fadeInUp 0.8s cubic-bezier(.39,.58,.57,1) both;
+}
+
+@keyframes fadeInUp {
+ 0% {
+ opacity: 0;
+ transform: translateY(40px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.global-bottom-left-btn {
+ position: fixed;
+ left: 32px;
+ bottom: 32px;
+ z-index: 1000;
+ margin: 0;
+ box-shadow: 0 0 32px #38bdf888, 0 2px 24px #22222288;
+}
+
+.back-btn {
+ font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+ font-size: 1.05rem;
+ font-weight: 700;
+ letter-spacing: 2px;
+ background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+ color: #e3f6ff;
+ box-shadow: 0 2px 16px #38bdf888;
+ border: none;
+ border-radius: 12px;
+ padding: 0.55rem 1.3rem;
+ margin: 0 0.3rem;
+ cursor: pointer;
+ transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
+ position: fixed;
+ left: 24px;
+ bottom: 24px;
+ z-index: 1000;
+ overflow: hidden;
+ animation: buttonPulse 1.2s infinite alternate;
+}
+
+.back-btn:hover {
+ background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
+ color: #bae6fd;
+ box-shadow: 0 2px 24px #bae6fd88;
+ animation: buttonPulse 0.7s;
+}
+
+@keyframes buttonPulse {
+ 0% { box-shadow: 0 2px 16px #38bdf888; transform: scale(1); }
+ 100% { box-shadow: 0 2px 32px #bae6fd88; transform: scale(1.07); }
+}
diff --git a/src/app/validationpage/validationpage.component.html b/src/app/validationpage/validationpage.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..117bdfa3fac7cb6411d3914b6ad97c3bdb591b2d
--- /dev/null
+++ b/src/app/validationpage/validationpage.component.html
@@ -0,0 +1,8 @@
+;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [ValidationpageComponent]
+ });
+ fixture = TestBed.createComponent(ValidationpageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/validationpage/validationpage.component.ts b/src/app/validationpage/validationpage.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5e196ead7bb0e817ffc50f4acf9ee0bbfd010e4d
--- /dev/null
+++ b/src/app/validationpage/validationpage.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+ selector: 'app-validationpage',
+ templateUrl: './validationpage.component.html',
+ styleUrls: ['./validationpage.component.css']
+})
+export class ValidationpageComponent {
+ truePercentage: number = 0;
+ falsePercentage: number = 0;
+
+ constructor(private router: Router) {
+ const nav = this.router.getCurrentNavigation();
+ const state = nav?.extras?.state as { truePercentage?: number; falsePercentage?: number };
+ this.truePercentage = state?.truePercentage ?? 0;
+ this.falsePercentage = state?.falsePercentage ?? 0;
+ }
+
+ goBack() {
+ this.router.navigate(['/py-detect']);
+ }
+}
diff --git a/src/favicon.ico b/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..997406ad22c29aae95893fb3d666c30258a09537
Binary files /dev/null and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..4154e705678a292edb24a8cf3f0cb9e885b1abce
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ Py-Detect
+
Welcome User 👮
+ Welcome, {{ username }}👮
+ Your Active Cases
+
+
+
+
+
+
+
+
+
+
+
+
+ | Case ID | +Crime | +Date & Time | +Location | +Status | +Actions | +
|---|---|---|---|---|---|
| {{ c.caseId || '—' }} | +{{ c.crime || '—' }} | +{{ c.dateTime ? (c.dateTime | date:'yyyy-MM-dd HH:mm') : '—' }} | +{{ c.police.address || '—' }} | ++ + {{ c.status || '—' }} + + | ++ + + | +
| No records found. | +|||||
+
+
diff --git a/src/app/case-details-page/case-details-page.component.spec.ts b/src/app/case-details-page/case-details-page.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..168cdcb89650da7b8abf9b7d8b7d2497d628a6f4
--- /dev/null
+++ b/src/app/case-details-page/case-details-page.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaseDetailsPageComponent } from './case-details-page.component';
+
+describe('CaseDetailsPageComponent', () => {
+ let component: CaseDetailsPageComponent;
+ let fixture: ComponentFixture
+
+ Case Details
+
+
+
+
+
+
+ Case ID{{ sc.caseId || '—' }}
+ Crime{{ sc.crime || '—' }}
+ Date & Time{{ sc.dateTime ? (sc.dateTime | date:'yyyy-MM-dd HH:mm') : '—' }}
+ Location{{ sc.police.address || '—' }}
+ +
Investigation Officer{{ sc.police.name || '—' }}
+ Duty Person{{ sc.police.dutyPerson || '—' }}
+ Mode of Crime{{ sc.police.modeOfCrime || '—' }}
+ +
Accused Name{{ sc.accused.name || '—' }}
+ Accused Gender{{ sc.accused.gender || '—' }}
+ Accused Age{{ sc.accused.age || '—' }}
+ Accused Address{{ sc.accused.address || '—' }}
+ +
+
+ Notes / Explanation
+ {{ sc.police.information || '—' }}
+
+ 
+
+
+
+
+ P
+ Y
+
+ D
+ E
+ T
+ E
+ C
+ T
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Welcome to Py-Detect +
+
+ {{ welcomeText }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/homepage/homepage.component.spec.ts b/src/app/homepage/homepage.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5115657f150a55f06efcbaecfad7808af0712496
--- /dev/null
+++ b/src/app/homepage/homepage.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomepageComponent } from './homepage.component';
+
+describe('HomepageComponent', () => {
+ let component: HomepageComponent;
+ let fixture: ComponentFixture
+
+
+
+
+How It Works
+Py-Detect asks personalized, context-aware questions and analyzes verbal, facial, and behavioral signals using AI and computer vision. It then produces a concise report with an estimated lie probability.
+ +Who Can Use Py-Detect?
+Investigators, law enforcement teams, educators and school administrators, HR professionals, recruiters, and any organization that needs reliable behavioral insights.
+ +Why Py-Detect?
+It is fast, non-invasive, configurable for different scenarios, and supports decisions with clear, data-driven evidence.
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's get started!
+Create an account
+ + +
+
+
+ 
+
+
+
+
+
+
+
+
+
+ P
+ Y
+
+ D
+ E
+ T
+ E
+ C
+ T
+
+
+
+Investigation Form
+ + +
+
+
+
+ 1. Crime
+ 2. Suspect
+ 3. Notes & Attachments
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/py-detect/py-detect.component.spec.ts b/src/app/py-detect/py-detect.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..513510266946fdf6a46f3b8a41effbfe748f7470
--- /dev/null
+++ b/src/app/py-detect/py-detect.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SampleComponent } from './py-detect.component';
+
+describe('SampleComponent', () => {
+ let component: SampleComponent;
+ let fixture: ComponentFixture
+
+ 
+
+
+
+ Py-Detect
+
+
+
+
+
+
+
+
+
+
+
+ Question {{ questionIndex() + 1 }}
+
+
+ {{ currentQuestion() }}
+
+
+
+
+
+
+
+ {{ status() | uppercase }}
+
+
+ STT
+
+ {{ videoStatus }}
+
+
+
+
+
+
+
+
+ P
+ Y
+
+ D
+ E
+ T
+ E
+ C
+ T
+
+
+
+
+Police Investigation Records
+
+
+
+
+
+
+
+
+
+
+
+
+ | Case ID | +Crime | +Date & Time | +Location | +Status | +Investigation Officer | +Actions | +
|---|---|---|---|---|---|---|
| {{ c.caseId || '—' }} | +{{ c.crime || '—' }} | +{{ c.dateTime ? (c.dateTime | date:'yyyy-MM-dd HH:mm') : '—' }} | +{{ c.police.address || '—' }} | ++ + {{ c.status || '—' }} + + | +{{ c.police.name || '—' }} | ++ + + | +
| No records found. | +||||||
+
+
+
+ Case Details
+
+
+ +
+ +
+ +
+
+ Case ID{{ sc.caseId || '—' }}
+ Crime{{ sc.crime || '—' }}
+ Date & Time{{ sc.dateTime ? (sc.dateTime | date:'yyyy-MM-dd HH:mm') : '—' }}
+ Location{{ sc.police.address || '—' }}
+
+ + +
Investigation Officer{{ sc.police.name || '—' }}
+ Duty Person{{ sc.police.dutyPerson || '—' }}
+ Mode of Crime{{ sc.police.modeOfCrime || '—' }}
+
+ + +
Accused Name{{ sc.accused.name || '—' }}
+ Accused Gender{{ sc.accused.gender || '—' }}
+ Accused Age{{ sc.accused.age || '—' }}
+ Accused Address{{ sc.accused.address || '—' }}
+
+ + +
+
+ Notes / Explanation
+ {{ sc.police.information || '—' }}
+
+
diff --git a/src/app/validationpage/validationpage.component.spec.ts b/src/app/validationpage/validationpage.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a9d98bd636be798a47e17a488dc73e04991995b
--- /dev/null
+++ b/src/app/validationpage/validationpage.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ValidationpageComponent } from './validationpage.component';
+
+describe('ValidationpageComponent', () => {
+ let component: ValidationpageComponent;
+ let fixture: ComponentFixtureValidation Results
+
+
+
+Pass Percentage: {{ truePercentage }}%
+Fail Percentage: {{ falsePercentage }}%
+