unnecessary changes lol

README.md

@@ -57,3 +57,50 @@ Angular CLI does not come with an end-to-end testing framework by default. You c
 ## Additional Resources
 
 For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+
+# Capacitor CLI Commands
+
+Below are common Capacitor commands you can run with `npx capacitor`:
+
+```bash
+# Add a platform (android or ios)
+npx cap add android
+npx cap add ios
+
+# Copy web assets to native platform
+npx cap copy
+
+# Sync native projects (copy + update plugins)
+npx cap sync
+
+# Open native IDE (Android Studio / Xcode)
+npx cap open android
+npx cap open ios
+
+# Build web assets first, then sync
+npm run build
+npx cap sync
+
+# Run on connected device or emulator (Android)
+npx cap run android
+
+# Run on simulator/device (iOS)
+npx cap run ios
+
+# Update Capacitor to latest version
+npx cap update
+
+
+
+flow => npx cap add android/ios(1 time setup) -> npx run build (After every change) -> npx cap copy android -> npx cap open android
+# 1. Build Angular project
+npm run build
+
+# 2. Copy web assets to Android
+npx cap copy android / npx cap sync android (sync additioanl plugins)
+
+# 3. Open Android Studio to run the app
+npx cap open android
+
+# Optional: Sync plugins/config if changed
+npx cap sync android

android/app/capacitor.build.gradle

@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-barcode-scanner')
+    implementation project(':capacitor-camera')
     implementation project(':capgo-capacitor-native-biometric')
 
 }

android/app/src/main/res/xml/network_security_config.xml

@@ -1,6 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <network-security-config>
-  <domain-config cleartextTrafficPermitted="true">
+  <domain-config cleartextTrafficPermitted="false">
     <domain includeSubdomains="true">192.168.100.100</domain>
+    <trust-anchors>
+      <certificates src="system" />
+      <certificates src="user" /> <!-- trust user-installed certs -->
+    </trust-anchors>
   </domain-config>
 </network-security-config>

android/capacitor.settings.gradle

@@ -5,5 +5,8 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-barcode-scanner'
 project(':capacitor-barcode-scanner').projectDir = new File('../node_modules/@capacitor/barcode-scanner/android')
 
+include ':capacitor-camera'
+project(':capacitor-camera').projectDir = new File('../node_modules/@capacitor/camera/android')
+
 include ':capgo-capacitor-native-biometric'
 project(':capgo-capacitor-native-biometric').projectDir = new File('../node_modules/@capgo/capacitor-native-biometric/android')

package-lock.json

@@ -20,6 +20,7 @@
         "@angular/router": "^20.0.5",
         "@capacitor/android": "^7.4.0",
         "@capacitor/barcode-scanner": "^2.0.3",
+        "@capacitor/camera": "^7.0.2",
         "@capacitor/core": "^7.4.0",
         "@capgo/capacitor-native-biometric": "^7.1.7",
         "@simplewebauthn/browser": "^13.1.0",
@@ -2505,6 +2506,15 @@
         "@capacitor/core": ">=7.0.0"
       }
     },
+    "node_modules/@capacitor/camera": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/camera/-/camera-7.0.2.tgz",
+      "integrity": "sha512-1/UbZZ8MSbRTMMvjQHQFJ0cs2ZNURNoyuUex0rAJwECsyHO0I5SRvu7YoMY5qTcRWScBcqT+3QZcJvETtRg7ug==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=7.0.0"
+      }
+    },
     "node_modules/@capacitor/cli": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-7.4.0.tgz",

package.json

@@ -25,6 +25,7 @@
     "@angular/router": "^20.0.5",
     "@capacitor/android": "^7.4.0",
     "@capacitor/barcode-scanner": "^2.0.3",
+    "@capacitor/camera": "^7.0.2",
     "@capacitor/core": "^7.4.0",
     "@capgo/capacitor-native-biometric": "^7.1.7",
     "@simplewebauthn/browser": "^13.1.0",

src/app/config.ts

@@ -1,4 +1,5 @@
 export const webConfig = {
-    exposedUrl: `https://myapp.local:4000`,
+    // exposedUrl: `https://myapp.local:4000`,
     // exposedUrl: `http://localhost:4000`,
+    exposedUrl: `https://192.168.100.100:4000`
 }

src/app/webcam/webcam.component.css

@@ -1,6 +1,8 @@
+/* Base card style (desktop-friendly) */
 .webcam-card {
-  max-width: 480px;
-  margin: 40px auto;
+  width: 95%;          /* fluid width for mobile */
+  max-width: 480px;    /* constrain on desktop */
+  margin: 20px auto;   /* less top margin on mobile */
   padding: 24px;
   border-radius: 12px;
   text-align: center;
@@ -14,6 +16,7 @@
   color: #333;
 }
 
+/* Video container */
 .video-wrapper {
   position: relative;
   width: 100%;
@@ -37,9 +40,9 @@ video {
   width: 100%;
   height: 100%;
   pointer-events: none;
-  /* allows clicking through */
 }
 
+/* Actions (buttons) */
 .actions {
   margin-top: 16px;
   display: flex;
@@ -52,6 +55,7 @@ video {
   font-weight: 500;
 }
 
+/* Recognized faces */
 .recognized-profiles {
   margin-top: 24px;
   text-align: left;
@@ -87,4 +91,37 @@ video {
   font-size: 0.95rem;
   color: #333;
   font-weight: 500;
-}
+}
+
+/* ----------- Mobile adjustments ----------- */
+@media (max-width: 480px) {
+  .actions {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .actions button {
+    width: 100%;
+    min-width: auto;
+  }
+
+  .profile-card {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .profile-info {
+    flex-direction: row;
+    gap: 8px;
+  }
+
+  .profile-photo {
+    width: 50px;
+    height: 50px;
+  }
+
+  .profile-text p {
+    font-size: 0.9rem;
+  }
+}