-
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. | -|||||
+
-
-
-
-
-
-
-
+
+ Total Cases
+ {{ totalCases }}
+
+ Open
+ {{ openCases }}
+
+
+ Closed
+ {{ closedCases }}
+
+
+ Pending Review
+ {{ reviewCases }}
+
-
-
+
+
+
+
+
Case Details
+ + + + + +| # | +Case ID | +Priority | +Status | +Crime Type | +Date & Time | +Location | +Suspect Name | +Last Updated | +Progress | +Next Action | +Actions | +
|---|---|---|---|---|---|---|---|---|---|---|---|
| {{ i + 1 }} | ++ + {{ c.caseId || '—' }} + + | +
+ |
+ + + {{ c.status || '—' }} + + | +{{ c.crime || '—' }} | +{{ c.dateTime ? (c.dateTime | date:'M/d/yyyy HH:mm') : '—' }} | +{{ c.police?.address || '—' }} | +{{ c.accused?.name || '—' }} | +{{ c.lastUpdated ? (c.lastUpdated | date:'M/d/yyyy HH:mm') : '—' }} | +
+ |
+ + {{ getNextActionMessage(c) }} + | ++ + + | +
| No records found. | +|||||||||||
+
+
+
+
+
Upload Evidence for Case: {{ selectedCase.caseId }}
+ +
+
+
+
+
+ {{ file.name }}
-
-
-
-
-
+ 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/case-details-page/case-details-page.component.ts b/src/app/case-details-page/case-details-page.component.ts
index d042afa051ca26a0b57398de94ffca9ad359abf1..1d85f64d070e9e7bbd6d341c47a94d5980b8959d 100644
--- a/src/app/case-details-page/case-details-page.component.ts
+++ b/src/app/case-details-page/case-details-page.component.ts
@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CaseStoreService, PoliceCase } from '../shared/case-store.service';
+type EvidenceType = 'Document' | 'Photo';
+
@Component({
selector: 'app-case-details-page',
templateUrl: './case-details-page.component.html',
@@ -12,6 +14,59 @@ export class CaseDetailsPageComponent implements OnInit {
showDetails = false;
selectedCase: PoliceCase | null = null;
username: string = '';
+ q: string = '';
+
+ filterStatus: string = '';
+ filterCrimeType: string = '';
+ filterDateFrom: string = '';
+ filterDateTo: string = '';
+
+ sections: any = {
+ crime: {
+ title: 'Crime Details',
+ subgroups: {
+ 'Identification & Timing': ['Case ID', 'FIR / Ref #', 'Crime Type', 'Case Category', 'Date & Time (Entry)', 'Occurred From', 'Occurred To', 'Time Reported', 'Time Discovered', 'Country', 'State', 'District', 'Number of Victims', 'Brief Description'],
+ 'Location & People': ['Location', 'Jurisdiction / PS', 'Scene Type', 'Reported By', 'Reported Contact', 'Witness Count', 'Victim Name', 'Victim Contact', 'Victim Summary', 'Suspected Offender Known?', 'Suspect Link'],
+ 'Offence & Context': ['Legal Sections / Charges', 'Offence Category', 'Offence Description', 'Suspected Motive', 'Confirmed Motive', 'Weapon Involved', 'Property Loss / Damage'],
+ 'Evidence & Scene': ['Evidence Collected', 'Forensic Tests Required', 'Scene Condition', 'Photos / Video?', 'CCTV Present?', 'CCTV Sources / IDs', 'Physical Evidence (list)', 'Chain of Custody?', 'Digital Evidence', 'Evidence Storage Reference'],
+ 'Operational Notes': ['Investigating Officer', 'Duty Person', 'Supervising Officer', 'Patrol Notes', 'Arrest Made', 'Arrest Location', 'Initial Actions Taken', 'riskLevel', 'Confidentiality'],
+ 'Status & Linkage': ['Biometric / Forensic IDs', 'DNA Ref ID', 'Fingerprint ID', 'Case Status', 'Linked Cases', 'arrestCount', 'Case Priority', 'Follow-up Date', 'Court Case ID', 'Next Hearing Date', 'Final Summary'],
+ 'Remark': ['Remark']
+ }
+ },
+ suspect: {
+ title: 'Suspect Details',
+ subgroups: {
+ 'Identity': ['Suspect ID', 'Suspect Name', 'Alias / Nickname', 'Age', 'Gender', 'Nationality', 'Nationality ID / Passport Number', 'Languages', 'Address', 'Known Aliases', 'Government ID'],
+ 'Physical Description': ['Height (cm)', 'Weight (kg)', 'Build', 'Hair Color', 'Eye Color', 'Distinguishing Marks', 'Tattoo Details', 'Scar Details', 'Photo Upload'],
+ 'Background': ['Employment', 'Education', 'Occupation', 'Company', 'Workplace Address', 'Marital Status', 'Known Habits', 'Known Financial Details'],
+ 'Known Associates': ['Associate Names', 'Gang Affiliation', 'Family Connections', 'Social Media Handles'],
+ 'Prior Records': ['Criminal History', 'Prior Arrests', 'Probation/Parole Status'],
+ 'Remark': ['Remark']
+ }
+ },
+ notes: {
+ title: 'Evidence and Documents',
+ subgroups: {
+ 'Investigation Notes': ['Initial Findings', 'Detailed Notes', 'Status', 'Version History / Updates'],
+ 'Evidence Files': ['Evidence Photos', 'Evidence Videos', 'Evidence Documents'],
+ 'Links and Recommendation': ['Links to Evidence', 'Final Recommendations'],
+ 'Remark': ['Remark']
+ }
+ }
+ };
+
+ selectedSubgroup: any = {
+ crime: 'Identification & Timing',
+ suspect: 'Identity',
+ notes: 'Investigation Notes'
+ };
+
+ uploadedEvidence: File[] = [];
+
+ evidencePanelCase: PoliceCase | null = null;
+ evidenceType: EvidenceType = 'Document';
+ evidenceFiles: { [caseId: string]: { Document: File[]; Photo: File[] } } = {};
constructor(private caseStore: CaseStoreService, private router: Router) {}
@@ -20,14 +75,59 @@ export class CaseDetailsPageComponent implements OnInit {
this.username = localStorage.getItem('username') || sessionStorage.getItem('username') || '';
}
+ get filteredCases(): PoliceCase[] {
+ let filtered = this.cases;
+
+ if (this.filterStatus) {
+ filtered = filtered.filter(c => c.status === this.filterStatus);
+ }
+ if (this.filterCrimeType) {
+ filtered = filtered.filter(c => c.crime === this.filterCrimeType);
+ }
+ // Add date filtering logic here if needed
+
+ if (!this.q?.trim()) return filtered;
+ const qLower = this.q.trim().toLowerCase();
+ return filtered.filter(c =>
+ (c.caseId || '').toLowerCase().includes(qLower) ||
+ (c.status || '').toLowerCase().includes(qLower) ||
+ (c.crime || '').toLowerCase().includes(qLower) ||
+ (c.police?.address || '').toLowerCase().includes(qLower) ||
+ (c.accused?.name || '').toLowerCase().includes(qLower)
+ );
+ }
+
+ get totalCases(): number {
+ return this.cases.length;
+ }
+ get openCases(): number {
+ return this.cases.filter(c => c.status === 'Open').length;
+ }
+ get closedCases(): number {
+ return this.cases.filter(c => c.status === 'Closed').length;
+ }
+
+ get reviewCases(): number {
+ return this.cases.filter(c => c.status === 'Under Investigation').length;
+ }
+
+ get statusTypes(): string[] {
+ return Array.from(new Set(this.cases.map(c => c.status).filter(s => !!s))) as string[];
+ }
+ get crimeTypes(): string[] {
+ return Array.from(new Set(this.cases.map(c => c.crime).filter(s => !!s))) as string[];
+ }
+
openDetails(c: PoliceCase): void {
this.selectedCase = c;
this.showDetails = true;
+ document.body.classList.add('popup-open');
}
closeDetails(): void {
this.showDetails = false;
this.selectedCase = null;
+ document.body.classList.remove('popup-open');
}
goToDetect(): void {
@@ -37,4 +137,246 @@ export class CaseDetailsPageComponent implements OnInit {
navigateHome(): void {
this.router.navigate(['/']);
}
+
+ applyFilters() {
+ // No-op: filteredCases getter will use filters
+ }
+ resetFilters() {
+ this.filterStatus = '';
+ this.filterCrimeType = '';
+ this.filterDateFrom = '';
+ this.filterDateTo = '';
+ this.q = '';
+ }
+ getSubgroups(sectionKey: string): string[] {
+ return Object.keys(this.sections[sectionKey].subgroups);
+ }
+
+ getFieldsForSubgroup(sectionKey: string, subgroup: string): string[] {
+ return this.sections[sectionKey].subgroups[subgroup] || [];
+ }
+
+ selectSubgroup(sectionKey: string, subgroup: string) {
+ this.selectedSubgroup[sectionKey] = subgroup;
+ }
+
+ getFieldValue(sc: any, sectionKey: string, field: string): any {
+ // Map field labels to PoliceCase property paths (copied from recordpage.component.ts)
+ const fieldMap: { [key: string]: string | string[] } = {
+ // Crime Details
+ 'Case ID': 'caseId',
+ 'FIR / Ref #': 'firRef',
+ 'Crime Type': 'crime',
+ 'Case Category': 'caseCategory',
+ 'Date & Time (Entry)': 'dateTime',
+ 'Occurred From': 'occurredFrom',
+ 'Occurred To': 'occurredTo',
+ 'Time Reported': 'timeReported',
+ 'Time Discovered': 'timeDiscovered',
+ 'Country': 'country',
+ 'State': 'state',
+ 'District': 'district',
+ 'Number of Victims': 'numberOfVictims',
+ 'Brief Description': 'briefDescription',
+ 'Location': ['police', 'address'],
+ 'Jurisdiction / PS': 'jurisdiction',
+ 'Scene Type': 'sceneType',
+ 'Reported By': 'reportedBy',
+ 'Reported Contact': 'reportedContact',
+ 'Witness Count': 'witnessCount',
+ 'Victim Name': 'victimName',
+ 'Victim Contact': 'victimContact',
+ 'Victim Summary': 'victimSummary',
+ 'Suspected Offender Known?': 'suspectedOffenderKnown',
+ 'Suspect Link': 'suspectLink',
+ 'Legal Sections / Charges': 'legalSections',
+ 'Offence Category': 'offenceCategory',
+ 'Offence Description': 'offenceDescription',
+ 'Suspected Motive': 'suspectedMotive',
+ 'Confirmed Motive': 'confirmedMotive',
+ 'Weapon Involved': 'weaponInvolved',
+ 'Property Loss / Damage': 'propertyLoss',
+ 'Evidence Collected': 'evidenceCollected',
+ 'Forensic Tests Required': 'forensicTestsRequired',
+ 'Scene Condition': 'sceneCondition',
+ 'Photos / Video?': 'photosVideo',
+ 'CCTV Present?': 'cctvPresent',
+ 'CCTV Sources / IDs': 'cctvSources',
+ 'Physical Evidence (list)': 'physicalEvidence',
+ 'Chain of Custody?': 'chainOfCustody',
+ 'Digital Evidence': 'digitalEvidence',
+ 'Evidence Storage Reference': 'evidenceStorageReference',
+ 'Investigating Officer': ['police', 'name'],
+ 'Duty Person': ['police', 'dutyPerson'],
+ 'Supervising Officer': ['police', 'supervisingOfficer'],
+ 'Patrol Notes': ['police', 'patrolNotes'],
+ 'Arrest Made': 'arrestMade',
+ 'Arrest Location': 'arrestLocation',
+ 'Initial Actions Taken': 'initialActionsTaken',
+ 'riskLevel': 'riskLevel',
+ 'Confidentiality': 'confidentiality',
+ 'Biometric / Forensic IDs': 'biometricIds',
+ 'DNA Ref ID': 'dnaRefId',
+ 'Fingerprint ID': 'fingerprintId',
+ 'Case Status': 'status',
+ 'Linked Cases': 'linkedCases',
+ 'arrestCount': 'arrestCount',
+ 'Case Priority': 'casePriority',
+ 'Follow-up Date': 'followUpDate',
+ 'Court Case ID': 'courtCaseId',
+ 'Next Hearing Date': 'nextHearingDate',
+ 'Final Summary': 'finalSummary',
+ 'Remark': 'remark',
+ // Suspect Details
+ 'Suspect ID': ['accused', 'suspectId'],
+ 'Suspect Name': ['accused', 'name'],
+ 'Alias / Nickname': ['accused', 'alias'],
+ 'Age': ['accused', 'age'],
+ 'Gender': ['accused', 'gender'],
+ 'Nationality': ['accused', 'nationality'],
+ 'Nationality ID / Passport Number': ['accused', 'passportNumber'],
+ 'Languages': ['accused', 'languages'],
+ 'Address': ['accused', 'address'],
+ 'Known Aliases': ['accused', 'knownAliases'],
+ 'Government ID': ['accused', 'governmentId'],
+ 'Height (cm)': ['accused', 'height'],
+ 'Weight (kg)': ['accused', 'weight'],
+ 'Build': ['accused', 'build'],
+ 'Hair Color': ['accused', 'hairColor'],
+ 'Eye Color': ['accused', 'eyeColor'],
+ 'Distinguishing Marks': ['accused', 'distinguishingMarks'],
+ 'Tattoo Details': ['accused', 'tattooDetails'],
+ 'Scar Details': ['accused', 'scarDetails'],
+ 'Photo Upload': ['accused', 'photoUpload'],
+ 'Employment': ['accused', 'employment'],
+ 'Education': ['accused', 'education'],
+ 'Occupation': ['accused', 'occupation'],
+ 'Company': ['accused', 'company'],
+ 'Workplace Address': ['accused', 'workplaceAddress'],
+ 'Marital Status': ['accused', 'maritalStatus'],
+ 'Known Habits': ['accused', 'knownHabits'],
+ 'Known Financial Details': ['accused', 'knownFinancialDetails'],
+ 'Associate Names': ['accused', 'associateNames'],
+ 'Gang Affiliation': ['accused', 'gangAffiliation'],
+ 'Family Connections': ['accused', 'familyConnections'],
+ 'Social Media Handles': ['accused', 'socialMediaHandles'],
+ 'Criminal History': ['accused', 'criminalHistory'],
+ 'Prior Arrests': ['accused', 'priorArrests'],
+ 'Probation/Parole Status': ['accused', 'probationStatus'],
+ // Notes/Evidence
+ 'Initial Findings': ['police', 'information'],
+ 'Detailed Notes': ['notes', 'detailedNotes'],
+ 'Status': 'status',
+ 'Version History / Updates': ['notes', 'versionHistory'],
+ 'Evidence Photos': ['legal', 'evidencePhotos'],
+ 'Evidence Videos': ['legal', 'evidenceVideos'],
+ 'Evidence Documents': ['legal', 'evidenceDocuments'],
+ 'Links to Evidence': ['legal', 'linksToEvidence'],
+ 'Final Recommendations': ['legal', 'finalRecommendations'],
+ 'Witness Statements': ['legal', 'witnessStatements'],
+ 'Confessions': ['legal', 'confessions'],
+ // Audit Fields
+ 'Created By': 'createdBy',
+ 'Creation Date': 'creationDate',
+ 'Last Updated': 'lastUpdated',
+ 'Verified By': 'verifiedBy'
+ };
+
+ const path = fieldMap[field] || field;
+ if (Array.isArray(path)) {
+ let value = sc;
+ for (const p of path) {
+ if (value && value[p] !== undefined) value = value[p];
+ else return '—';
+ }
+ return value !== undefined && value !== null && value !== '' ? value : '—';
+ } else {
+ return sc[path] !== undefined && sc[path] !== null && sc[path] !== '' ? sc[path] : '—';
+ }
+ }
+
+ getProgressValue(caseObj: any): number {
+ let total = 0, filled = 0;
+ ['crime', 'suspect', 'notes'].forEach(sectionKey => {
+ const subgroups = this.getSubgroups(sectionKey);
+ subgroups.forEach(subgroup => {
+ const fields = this.getFieldsForSubgroup(sectionKey, subgroup);
+ total += fields.length;
+ fields.forEach(field => {
+ const value = this.getFieldValue(caseObj, sectionKey, field);
+ if (value && value !== '—') filled++;
+ });
+ });
+ });
+ return total ? Math.round((filled / total) * 100) : 0;
+ }
+ getNextActionMessage(c: any): string {
+ // Example logic based on status and progress
+ const progress = this.getProgressValue(c);
+ if (c.status === 'Closed' || progress === 100) {
+ return 'Case completed';
+ }
+ if (c.status === 'Under Review' || progress >= 75) {
+ return 'Await supervisor approval';
+ }
+ if (c.status === 'Open' || progress < 75) {
+ return 'Collect evidence';
+ }
+ return '—';
+ }
+ getCasePriority(c: PoliceCase): 'High' | 'Medium' | 'Low' {
+ // Automatic logic based on crime type and status
+ const highCrimes = ['Murder', 'Robbery'];
+ const mediumCrimes = ['Theft', 'Assault'];
+ if (highCrimes.includes(c.crime) || c.status === 'Open') {
+ return 'High';
+ }
+ if (mediumCrimes.includes(c.crime) || c.status === 'Under Investigation') {
+ return 'Medium';
+ }
+ return 'Low';
+ }
+
+ isInvestigator(): boolean {
+ // Simple role check: username contains 'investigator' (customize as needed)
+ return this.username.toLowerCase().includes('investigator');
+ }
+
+ onEvidenceUpload(event: any): void {
+ const files = Array.from(event.target.files) as File[];
+ this.uploadedEvidence = [...this.uploadedEvidence, ...files];
+ // You can add logic to save evidence to the case or backend here
+ }
+
+ showEvidencePanel(c: PoliceCase): void {
+ if (!c.caseId) return;
+ this.evidencePanelCase = c;
+ this.evidenceType = 'Document';
+ if (!this.evidenceFiles[c.caseId]) {
+ this.evidenceFiles[c.caseId] = { Document: [], Photo: [] };
+ }
+ }
+
+ setEvidenceType(type: EvidenceType): void {
+ this.evidenceType = type;
+ }
+
+ onEvidenceFileSelectType(event: any): void {
+ const files = Array.from(event.target.files) as File[];
+ if (this.evidencePanelCase && this.evidencePanelCase.caseId) {
+ this.evidenceFiles[this.evidencePanelCase.caseId][this.evidenceType].push(...files);
+ }
+ }
+
+ getEvidenceIcon(filename: string): string {
+ if (filename.match(/\.(jpg|jpeg|png|gif)$/i)) return 'fas fa-camera';
+ if (filename.match(/\.(mp4|avi|mov)$/i)) return 'fas fa-film';
+ if (filename.match(/\.(pdf)$/i)) return 'fas fa-file-pdf';
+ return 'fas fa-file';
+ }
+
+ viewEvidenceFile(file: File): void {
+ const url = URL.createObjectURL(file);
+ window.open(url, '_blank');
+ }
}
diff --git a/src/app/case-store.service.ts b/src/app/case-store.service.ts
index 43ab4ce4e3426a96d6d8f78b089d40d1a8d61175..47d693a66a2899322895525a73eb1d63d215b2c5 100644
--- a/src/app/case-store.service.ts
+++ b/src/app/case-store.service.ts
@@ -1,8 +1,19 @@
import { Injectable } from '@angular/core';
+export interface LegalInfo {
+ witnessStatements: string;
+ confessions: string;
+ evidence: File[]; // Assuming you're collecting file(s) as evidence
+}
+
export interface PoliceCase {
// Optional metadata used by your UI
caseId?: string;
+ firRef?: string;
+ occurredFrom?: string;
+ occurredTo?: string;
+ jurisdiction?: string;
+ sceneType?: string;
dateTime?: string;
status?: 'Open' | 'Under Investigation' | 'Closed';
crime: string;
@@ -22,6 +33,12 @@ export interface PoliceCase {
address: string;
occupation?: string;
};
+ legal: LegalInfo; // Add the legal property here
+ victimName?: string;
+ caseCategory?: string;
+ reportedBy?: string;
+ lastUpdated?: string;
+ verifiedBy?: string;
}
@Injectable({ providedIn: 'root' })
@@ -34,7 +51,21 @@ export class CaseStoreService {
}
/** Create (newest first) */
+ private getNextCaseId(): string {
+ const max = this.cases
+ .map(c => c.caseId)
+ .map(id => parseInt((id || '').replace('CASE-', ''), 10))
+ .filter(n => !isNaN(n))
+ .reduce((a, b) => Math.max(a, b), 0);
+ return `CASE-${(max + 1).toString().padStart(3, '0')}`;
+ }
+
addPoliceCase(c: PoliceCase): void {
+ if (!c.caseId) {
+ c.caseId = this.getNextCaseId();
+ }
+ c.lastUpdated = new Date().toISOString();
+ c.verifiedBy = c.verifiedBy || '';
this.cases.unshift(c);
this.save();
}
@@ -47,11 +78,20 @@ export class CaseStoreService {
/** Update by array index */
updatePoliceCaseAt(index: number, updated: PoliceCase): void {
if (index >= 0 && index < this.cases.length) {
+ updated.lastUpdated = new Date().toISOString();
this.cases[index] = updated;
this.save();
}
}
+ /** Delete by array index */
+ deletePoliceCaseAt(index: number): void {
+ if (index >= 0 && index < this.cases.length) {
+ this.cases.splice(index, 1);
+ this.save();
+ }
+ }
+
/**
* Convenience: map Info page reactive-form value to PoliceCase and store it.
* Call with the whole this.form.value from InfopageComponent.
@@ -60,17 +100,23 @@ export class CaseStoreService {
const crime = (formValue && formValue.crime) || {};
const suspect = (formValue && formValue.suspect) || {};
const notes = (formValue && formValue.notes) || {};
+ const legal = (formValue && formValue.legal) || {};
const mapped: PoliceCase = {
caseId: crime.caseId || '',
+ firRef: crime['FIR / Ref #'] || formValue['FIR / Ref #'] || '',
+ occurredFrom: crime['Occurred From'] || formValue['Occurred From'] || '',
+ occurredTo: crime['Occurred To'] || formValue['Occurred To'] || '',
+ jurisdiction: crime['Jurisdiction / PS'] || formValue['Jurisdiction / PS'] || '',
+ sceneType: crime['Scene Type'] || formValue['Scene Type'] || '',
dateTime: crime.dateTime || '',
status: notes.status || 'Open',
crime: crime.crimeType || 'Unknown',
police: {
name: notes.officerInCharge || '—',
- station: '—', // not captured on Info page
+ station: '—',
address: crime.location || '—',
- pincode: '', // not captured on Info page
+ pincode: '',
dutyPerson: notes.officerInCharge || '—',
modeOfCrime: crime.crimeType || '—',
information: notes.initialFindings || ''
@@ -81,7 +127,17 @@ export class CaseStoreService {
gender: suspect.gender || '—',
address: suspect.address || '—',
occupation: suspect.alias || ''
- }
+ },
+ legal: {
+ witnessStatements: legal.witnessStatements || '',
+ confessions: legal.confessions || '',
+ evidence: legal.evidence || []
+ },
+ victimName: crime.victimName || formValue['Victim Name'] || '',
+ caseCategory: crime.caseCategory || formValue['Case Category'] || '',
+ reportedBy: crime.reportedBy || formValue['Reported By'] || '',
+ lastUpdated: new Date().toISOString(),
+ verifiedBy: formValue.verifiedBy || '',
};
this.addPoliceCase(mapped);
diff --git a/src/app/homepage/homepage.component.css b/src/app/homepage/homepage.component.css
index 3ede10fa84bcf9ffe68e7207a0c701cc8e306dcb..86ad47bcdc768fccd8c1cff11eb3e03ec06f0a19 100644
--- a/src/app/homepage/homepage.component.css
+++ b/src/app/homepage/homepage.component.css
@@ -2,8 +2,7 @@ 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;
+ /* Background is managed globally via body.homepage-bg in styles.css */
}
.homepage-container {
@@ -65,14 +64,19 @@ body, html {
/* 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 */
+ top: 21px;
+ left: 36px;
z-index: 300;
margin: 0;
+ background: #ffffff;
+ max-width: 4.2vw;
+ min-width: 56px;
+ height: auto;
+ border-radius: 50%;
+ padding: 4px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+ transition: transform .25s ease;
}
/* Move Py-Detect text further down by increasing top value of .logo-title-row */
@@ -91,10 +95,10 @@ body, html {
.py-detect-title {
position: fixed;
- margin-left: 132px;
- margin-top: -208px;
+ margin-left: 97px;
+ margin-top: -228px;
text-align: left;
- font-size: 4vw;
+ font-size: 3vw;
color: #38bdf8;
font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
font-weight: 900;
@@ -125,6 +129,18 @@ body, html {
border: 2px solid #23272b;
}
+.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;
+}
+
.py-detect-title .py-letter.d {
color: #e3f6ff;
text-shadow: 0 0 6px #38bdf8;
@@ -212,6 +228,49 @@ body, html {
height: 100vh;
}
+.auth-topright {
+ position: fixed;
+ top: 46px;
+ 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;
+}
+
.sign-in-form {
background: rgba(30,41,59,0.92);
padding: 32px 48px 32px 64px; /* Reduced vertical and horizontal padding */
@@ -535,469 +594,141 @@ label {
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;
-}
+/* Preserve existing header logo/title and auth buttons styles from before (no change) */
-/* 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;
+/* New Landing styles (scoped to homepage to avoid affecting auth pages) */
+.landing {
+ min-height: 100vh;
+ /* Use global body.homepage-bg background; remove local hero override */
+ background: transparent;
+ color: #fff;
}
-.footer-content {
+/* Simple navbar that does not override existing top-right auth */
+.navbar {
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%);
+ padding: 15px 30px;
+}
+.navbar h1 { font-size: 22px; letter-spacing: 2px; margin: 0; }
+.nav-right { display: flex; align-items: center; gap: 15px; }
+
+/* Dropdown */
+.dropdown { position: relative; display: inline-block; }
+.dropbtn { background-color: #222; color: #fff; padding: 10px 16px; border: none; cursor: pointer; border-radius: 4px; }
+.dropdown-content { display: none; position: absolute; right: 0; background: #333; min-width: 180px; box-shadow: 0 8px 16px rgba(0,0,0,.3); border-radius: 4px; z-index: 1; }
+.dropdown-content a { color: #fff; padding: 12px 16px; text-decoration: none; display: block; }
+.dropdown-content a:hover { background: #444; }
+.dropdown:hover .dropdown-content { display: block; }
+
+/* Buttons */
+.btn {
+ background: #c62828;
color: #fff;
- font-size: 1.2rem;
- font-weight: 700;
border: none;
- border-radius: 12px;
- padding: 14px 38px;
- box-shadow: 0 2px 16px #38bdf888;
+ padding: 10px 16px;
+ border-radius: 4px;
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;
+ font-weight: bold;
+ text-decoration: none;
}
+.btn:hover { background: #e53935; }
-.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;
+/* Hero */
+.hero {
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;
+ min-height: 31vh;
display: flex;
- align-items: center;
+ flex-direction: column;
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;
+ align-items: center;
+ padding: 2vw;
+ position: fixed;
+ top: 37vh;
+ left: calc(100% - 68vw);
+ width: 32vw;
+ text-wrap: auto;
+ font-weight: 800;
+ /*background: #011329d6;*/
+ border-radius: 4vw;
}
-.welcome-title {
- margin-left: 12px;
- margin-bottom: 8px;
+.blue-section, .how-to-use, .features {
+ position: relative;
+ z-index: 1;
+}
+
+
+/* Specialisations */
+.specialisations { padding: 25px 10%; text-align: center; background: linear-gradient(to right, #011329 0%, #010207 23%, #71a4c2 23%, #0171a3 77%, #010207 77%, #011329 100%); }
+.specialisation-cards { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
+.card { background: #fff; padding: 40px 30px; flex: 1 1 350px; max-width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,.1); transition: transform .3s; }
+.card:hover { transform: translateY(-8px); }
+.card .icon { font-size: 48px; margin-bottom: 20px; color: #c62828; }
+.card h3 { font-size: 20px; margin-bottom: 15px; color: #c62828; }
+.card p { font-size: 16px; line-height: 1.6; color: #000; }
+
+/* Mission */
+.mission { background: transparent; color: #fff; padding: 60px 10%; text-align: center; }
+.mission-row { display: flex; justify-content: space-between; gap: 30px; margin-top: 20px; margin-left: 7vw; flex-wrap: wrap; }
+.mission-left, .mission-right { flex: 1; min-width: 300px; text-align: left; font-size: 16px; line-height: 1.6; color: #f0f4f8; }
+
+/* Features */
+.features { padding: 60px 10%; background: #011329; color: #010207; }
+.feature-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 60px; background: #f9f9f9; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.1); padding: 30px; gap: 20px; flex-wrap: wrap; }
+.feature-row.reverse { flex-direction: row-reverse; }
+.feature-text { flex: 1 1 320px; padding: 20px; }
+.feature-text h2 { color: #c62828; margin-bottom: 15px; }
+.feature-text p { font-size: 20px; line-height: 1.6; }
+.feature-image { flex: 1 1 320px; padding: 20px; }
+.feature-image img { width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,.2); }
+
+/* Footer */
+footer { background: linear-gradient(to right, #011022, #01030a); color: #fff; text-align: center; padding: 15px 10px; }
+footer a { color: #fff; text-decoration: none; margin: 0 10px; }
+footer .social-icons { margin-top:12px; display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
+footer .social-icons .si-wrap { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; letter-spacing:.5px; font-family:'Segoe UI', Arial, sans-serif; color:#cfe9f7; }
+footer .social-icons .si-wrap .si-text { transition:color .25s; }
+footer .social-icons .si { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#122434; color:#38bdf8; font-size:18px; box-shadow:0 0 0 1px #214055, 0 4px 14px #0006; transition:background .25s, color .25s, transform .25s, box-shadow .25s; text-decoration:none; }
+footer .social-icons .si:hover { background:#38bdf8; color:#0c2533; transform:translateY(-4px); box-shadow:0 6px 20px #38bdf8aa,0 0 0 2px #38bdf8 inset; }
+footer .social-icons .si-wrap:hover .si-text { color:#ffffff; }
+footer .social-icons .si.fb { background:#1877f2; color:#fff; }
+footer .social-icons .si.fb:hover { background:#fff; color:#1877f2; }
+footer .social-icons .si.yt { background:#ff0000; color:#fff; }
+footer .social-icons .si.yt:hover { background:#fff; color:#ff0000; }
+footer .social-icons .si.li { background:#0a66c2; color:#fff; }
+footer .social-icons .si.li:hover { background:#fff; color:#0a66c2; }
+footer .social-icons .si.ig { background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%); color:#fff; }
+footer .social-icons .si.ig:hover { filter:brightness(1.15); color:#fff; box-shadow:0 6px 22px rgba(253,89,73,.6); }
+
+/* Keep existing modal styling (unchanged) */
+.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; }
+
+/* Ensure info dialog is a real centered popup overlay */
+.dialog-modal {
+ position: fixed;
+ inset: 0;
+ display: grid;
+ place-items: center;
+ z-index: 2001; /* above backdrop and page */
+ pointer-events: auto;
}
-.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;
+.modal-backdrop--fade {
+ animation: fadeInBackdrop .25s ease-out both;
}
-.sub-title {
- font-size: 1.2em;
- font-weight: bold;
- color: #fff;
+.dialog-modal--zoom {
+ animation: zoomInModal .28s cubic-bezier(0.23, 1, 0.32, 1) both;
}
-.detection-description {
- margin: 12px 0 18px 0;
- color: #e3f6ff;
- font-size: 1em;
- font-weight: 400;
+/* Dialog card sizing */
+.dialog-content {
+ max-width: 720px;
+ width: min(92vw, 720px);
}
.read-more-btn {
@@ -1116,3 +847,130 @@ label {
background: #333;
color: #38bdf8;
}
+
+.back-colo {
+ background: #011329;
+ width: 100%;
+ height: 7vw;
+ position: fixed;
+ z-index: 3;
+}
+
+/* how to use */
+.how-to-use {
+ padding: 80px 10%;
+ text-align: center;
+ background: linear-gradient(to right, #011329 0%, #010207 23%, #01040b 23%, #01030a 77%, #010207 77%, #011329 100%);
+ color: #fff;
+}
+
+
+ .how-to-use .section-title {
+ font-size: 28px;
+ color: #0d9de3; /* blue highlight */
+ margin-bottom: 10px;
+ }
+
+ .how-to-use .section-subtitle {
+ font-size: 16px;
+ color: #f0f4f8;
+ margin-bottom: 40px;
+ }
+
+.use-cards {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 25px;
+}
+
+.use-card {
+ background: #fff;
+ color: #000;
+ flex: 1 1 calc(20% - 20px); /* 5 cards in a row */
+ min-width: 220px;
+ border-radius: 12px;
+ padding: 25px 20px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ transition: transform 0.3s;
+}
+
+ .use-card:hover {
+ transform: translateY(-6px);
+ }
+
+ .use-card .icon {
+ font-size: 40px;
+ margin-bottom: 15px;
+ color: #3328c6; /* red accent */
+ }
+
+ .use-card h3 {
+ font-size: 18px;
+ margin-bottom: 10px;
+ color: #3328c6;
+ }
+
+ .use-card p {
+ font-size: 16px;
+ line-height: 1.5;
+ color: #000;
+ }
+
+.social-icons {
+ display: flex;
+ justify-content: center;
+ gap: 15px;
+ margin-top: 10px;
+}
+
+.social-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.1);
+ color: white;
+ text-decoration: none;
+ font-size: 18px;
+ transition: all 0.3s ease;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+footer .social-icons {
+ margin-top: 10px;
+}
+
+ footer .social-icons img {
+ width: 25px;
+ margin: 0 8px;
+ vertical-align: middle;
+ }
+
+.social-icon:hover {
+ transform: translateY(-3px);
+ background: rgba(255, 255, 255, 0.2);
+}
+
+/* Specific colors for each platform */
+.social-icon.facebook:hover {
+ background: #3b5998;
+ box-shadow: 0 4px 8px rgba(59, 89, 152, 0.3);
+}
+
+.social-icon.youtube:hover {
+ background: #ff0000;
+ box-shadow: 0 4px 8px rgba(255, 0, 0, 0.3);
+}
+
+.social-icon.linkedin:hover {
+ background: #0077b5;
+ box-shadow: 0 4px 8px rgba(0, 119, 181, 0.3);
+}
+
+.social-icon.instagram:hover {
+ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
+ box-shadow: 0 4px 8px rgba(188, 24, 136, 0.3);
+}
diff --git a/src/app/homepage/homepage.component.html b/src/app/homepage/homepage.component.html
index f93f3155eac1ed23de3af8aff3d4698d4bf5f515..d209bcd89ebc52e7060db2906d71e03024ef13ff 100644
--- a/src/app/homepage/homepage.component.html
+++ b/src/app/homepage/homepage.component.html
@@ -1,4 +1,5 @@
++
+
+ Evidence Upload for Case: {{ evidencePanelCase.caseId }}
+
+ +
+
+
+
+
+
+
+ + + + + +
@@ -13,100 +14,240 @@
T
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+Real-Time Truth & Deception Detection
++ One intelligent platform for law enforcement, recruiters, and security teams. + Analyse verbal responses and body language in real-time to detect deception, assess risks, and build trust. +
+ Know More
+
+
+
+
+
+
OUR MISSION IS SIMPLE & IMPACTFUL
+
+
+
+
+ + Py-Detect is designed to reduce deception, fraud, and risk by enabling + investigators, recruiters, and security professionals to uncover hidden truths + with precision and speed. Our goal is to create safer communities, fairer + recruitment processes, and stronger organisational security. +
+
+
+
+ By combining AI-powered verbal analysis, body language
detection, and facial
+ recognition, Py-Detect provides
real-time deception scores and behavioural insights.
+ This empowers law enforcement, HR teams, and security
officers to make
+ confident, evidence-based decisions that
enhance safety, trust, and efficiency.
+
+
+
+
+
-
- AI-Powered Investigation
++ Advanced NLP and computer vision analyse verbal and non-verbal cues in real time, + supporting law enforcement with reliable truth detection. +
+
-
+
-
-
-
+
+
+- Welcome to Py-Detect -
-
- {{ welcomeText }}
+
+
+
+
+
+
-
-
+
+
+ High Accuracy
++ Trained on diverse behavioural datasets, Py-Detect delivers strong accuracy across + multiple scenarios including crime, recruitment, and security. +
+
+
+ Secure & Scalable
++ Built with data privacy in mind, Py-Detect ensures secure handling of sensitive inputs + while scaling for enterprise or government use. +
+How to Use Py-Detect?
++ Py-Detect supports both Admins (e.g., Inspectors) and Users (e.g., Constables) + to manage cases, conduct investigations, and analyse suspects with AI. +
+ +
+
+
+
+
+
+
+
+ 1. Admin Creates Case
++ The Admin (Inspector) logs in, enters case details, and assigns + the investigation to specific users. +
+
+
+
+
+
+ 2. User Views Assignment
++ Assigned Users (Constables) log in to see their cases, + review case details, and prepare for investigation. +
+
+
+
+
+
+ 3. Investigation Recording
++ During interrogation, the system generates AI-based questions. + Video and audio responses are recorded in real time. +
+
+
+
+
+
+ 4. AI Analysis
++ Py-Detect analyses tone, body language, and facial expressions + to produce a deception score and behavioural insights. +
+
+
+
5. Report & Decision
++ A final AI-powered prediction report is generated, + helping investigators make evidence-based decisions quickly. +
-
-
-
+
+
-
-Welcome to Py-Detect!
-Discover what Py-Detect can do for you:
--
-
- 🕵️ Intelligent lie detection platform -
- 🔍 AI-powered analysis of responses -
- 🎯 Designed for investigators, educators, HR, and more -
- 💡 Fast, non-invasive, and data-driven insights -
+
-
+
+ Crime Investigation
++ Py-Detect assists law enforcement and police by analysing suspects’ verbal responses + and body language during interrogations. With AI-driven facial recognition, tone analysis, + and micro-expression detection, investigators gain deeper behavioural insights and + a real-time deception score to uncover hidden truths. +
+
+ 