facecog-liveness-showcase 0.0.1

package/projects/facecog-liveness-verification-test/src/global.scss

@@ -0,0 +1,288 @@
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* AWS Amplify UI Liveness Styles - Required for FaceLivenessDetector */
+@import '../../../node_modules/@aws-amplify/ui-react/dist/styles.css';
+
+/* Core CSS required for Ionic components to work properly */
+@import "@ionic/angular/css/core.css";
+
+/* Basic CSS for apps built with Ionic */
+@import "@ionic/angular/css/normalize.css";
+@import "@ionic/angular/css/structure.css";
+@import "@ionic/angular/css/typography.css";
+@import "@ionic/angular/css/display.css";
+
+/* Optional CSS utils that can be commented out */
+@import "@ionic/angular/css/padding.css";
+@import "@ionic/angular/css/float-elements.css";
+@import "@ionic/angular/css/text-alignment.css";
+@import "@ionic/angular/css/text-transformation.css";
+@import "@ionic/angular/css/flex-utils.css";
+
+/**
+ * Ionic Dark Mode
+ * -----------------------------------------------------
+ * For more info, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+/* @import "@ionic/angular/css/palettes/dark.always.css"; */
+/* @import "@ionic/angular/css/palettes/dark.class.css"; */
+@import "@ionic/angular/css/palettes/dark.system.css";
+
+/* Custom Fonts */
+@font-face {
+  font-family: 'Gilroy-Regular';
+  src: url('./assets/fonts/gilroy/Gilroy-Regular_0.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Gilroy-Medium';
+  src: url('./assets/fonts/gilroy/Gilroy-Medium_0.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Gilroy-SemiBold';
+  src: url('./assets/fonts/gilroy/Gilroy-SemiBold_0.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Gilroy-Bold';
+  src: url('./assets/fonts/gilroy/Gilroy-Bold_0.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Gilroy-Thin';
+  src: url('./assets/fonts/gilroy/Gilroy-Thin_0.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+/* Next Sapien Component Library Theme */
+@import '../../../node_modules/@naniteninja/ionic-lib/src/lib/shared-styles/styles.scss';
+
+/* Global Theme Overrides */
+:root {
+  --ion-background-color: #1a1a2e;
+  --ion-background-color-rgb: 26, 26, 46;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255, 255, 255;
+
+  --ion-color-primary: #fe3c72;
+  --ion-color-primary-rgb: 254, 60, 114;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #e03564;
+  --ion-color-primary-tint: #fe5080;
+
+  --ion-toolbar-background: #2b2d42;
+  --ion-item-background: #2b2d42;
+  --ion-card-background: #2b2d42;
+}
+
+body {
+  font-family: 'Gilroy-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #1a1a2e;
+}
+
+* {
+  font-family: 'Gilroy-Regular', sans-serif;
+}
+
+/* Verification Modal - full screen on mobile, centered on desktop */
+.verification-modal {
+  --width: 100%;
+  --height: 100%;
+  --border-radius: 0;
+
+  @media (min-width: 768px) {
+    --width: 520px;
+    --height: 85vh;
+    --border-radius: 16px;
+  }
+
+  .ion-page {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+/* AWS Amplify FaceLivenessDetector Full Screen Overrides */
+app-aws-face-liveness {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+}
+
+.aws-face-liveness-container {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100vh !important;
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  z-index: 9999 !important;
+  background: #fff !important;
+  overflow: auto !important;
+}
+
+.aws-face-liveness-container .react-container {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100vh !important;
+  overflow: auto !important;
+}
+
+/* AWS Amplify Liveness Detector - Make it full screen */
+.face-liveness-container {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100vh !important;
+  overflow: auto !important;
+}
+
+/* Override Amplify UI Liveness Component styles */
+[data-amplify-liveness-detector] {
+  width: 100% !important;
+  height: auto !important;
+  min-height: 100vh !important;
+  overflow: visible !important;
+}
+
+/* Fix Amplify Flex container that wraps everything */
+[data-amplify-liveness-detector] > .amplify-flex {
+  width: 100% !important;
+  height: auto !important;
+  min-height: 100vh !important;
+  flex-direction: column !important;
+  overflow: visible !important;
+}
+
+/* Start screen container - ensure full visibility */
+[class*="StartScreen"] {
+  width: 100% !important;
+  height: auto !important;
+  min-height: 100vh !important;
+  padding-bottom: 100px !important;
+  overflow: visible !important;
+}
+
+/* Amplify View container */
+.amplify-view {
+  width: 100% !important;
+  height: auto !important;
+  overflow: visible !important;
+}
+
+/* Fix the start screen scrolling */
+.amplify-liveness-start-screen,
+[class*="liveness-detector-start"] {
+  width: 100% !important;
+  height: auto !important;
+  min-height: 100vh !important;
+  overflow-y: auto !important;
+  padding-bottom: 120px !important;
+}
+
+/* Make sure the button container is visible */
+.amplify-button,
+[data-amplify-liveness-detector] button {
+  z-index: 10000 !important;
+  position: relative !important;
+}
+
+/* Start video check button - ensure visibility */
+[class*="StartButton"],
+button[class*="start"],
+.amplify-button--primary {
+  position: relative !important;
+  z-index: 10001 !important;
+  margin-top: 20px !important;
+  margin-bottom: 40px !important;
+}
+
+/* Camera/video preview area */
+.amplify-liveness-video-container,
+.amplify-liveness-canvas-container,
+[class*="VideoContainer"] {
+  width: 100% !important;
+  max-height: 60vh !important;
+}
+
+/* Ensure the oval overlay fills properly during check */
+.amplify-liveness-oval-canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* Fix the instructions and hints */
+[class*="Instructions"],
+[class*="Hint"] {
+  padding: 16px !important;
+  text-align: center !important;
+}
+
+/* Recording indicator */
+.amplify-liveness-recording-icon-container {
+  position: fixed !important;
+  top: 20px !important;
+  right: 20px !important;
+  z-index: 10002 !important;
+}
+
+/* Cancel button visibility */
+.amplify-liveness-cancel-button,
+button[class*="cancel"],
+button[class*="Cancel"] {
+  position: relative !important;
+  z-index: 10001 !important;
+  margin: 20px !important;
+}
+
+/* Photosensitivity warning screen */
+[class*="PhotosensitiveWarning"],
+[class*="photosensitive"] {
+  width: 100% !important;
+  height: auto !important;
+  min-height: 100vh !important;
+  padding: 20px !important;
+  padding-bottom: 100px !important;
+  overflow-y: auto !important;
+}
+
+/* Good fit / too far images container */
+[class*="FigureContainer"],
+[class*="figure-container"] {
+  display: flex !important;
+  justify-content: center !important;
+  gap: 20px !important;
+  flex-wrap: wrap !important;
+  padding: 20px !important;
+}
+

package/projects/facecog-liveness-verification-test/src/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Ionic App</title>
+
+  <base href="/" />
+
+  <meta name="color-scheme" content="light dark" />
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="format-detection" content="telephone=no" />
+  <meta name="msapplication-tap-highlight" content="no" />
+
+  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
+
+  <!-- Google Fonts - Calistoga -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
+
+  <!-- add to homescreen for ios -->
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+</head>
+
+<body>
+  <app-root></app-root>
+</body>
+
+</html>

package/projects/facecog-liveness-verification-test/src/main.ts

@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));

package/projects/facecog-liveness-verification-test/src/polyfills.ts

@@ -0,0 +1,55 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+ 
+import './zone-flags';
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

package/projects/facecog-liveness-verification-test/src/theme/nextsapien-theme.scss

@@ -0,0 +1,174 @@
+// Next Sapien Component Library Theme
+// Replicated from showcase.thecyrano.app
+
+// Color Palette
+$ns-primary: #fe3c72;
+$ns-accent: #ff6b9d;
+$ns-background: #1a1a2e;
+$ns-surface: #2b2d42;
+$ns-card-bg: #2b2d42;
+$ns-text: #ffffff;
+$ns-text-secondary: rgba(255, 255, 255, 0.7);
+$ns-border: rgba(255, 255, 255, 0.1);
+$ns-shadow: rgba(0, 0, 0, 0.3);
+
+// Success/Error Colors
+$ns-success: #4caf50;
+$ns-warning: #ff9800;
+$ns-error: #f44336;
+$ns-info: #2196f3;
+
+// Typography
+$ns-font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$ns-font-size-base: 14px;
+$ns-font-size-small: 12px;
+$ns-font-size-large: 16px;
+$ns-font-size-xlarge: 20px;
+
+// Spacing
+$ns-spacing-xs: 4px;
+$ns-spacing-sm: 8px;
+$ns-spacing-md: 16px;
+$ns-spacing-lg: 24px;
+$ns-spacing-xl: 32px;
+
+// Border Radius
+$ns-border-radius-sm: 4px;
+$ns-border-radius-md: 8px;
+$ns-border-radius-lg: 12px;
+$ns-border-radius-xl: 16px;
+
+// Shadows
+$ns-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+$ns-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
+$ns-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
+$ns-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.4);
+
+// Base Card
+@mixin ns-card {
+  background: $ns-card-bg;
+  border-radius: $ns-border-radius-md;
+  box-shadow: $ns-shadow-md;
+  padding: $ns-spacing-lg;
+}
+
+// Primary Button
+@mixin ns-button-primary {
+  background: linear-gradient(135deg, $ns-primary 0%, $ns-accent 100%);
+  color: $ns-text;
+  border: none;
+  border-radius: $ns-border-radius-sm;
+  padding: 12px 24px;
+  font-size: $ns-font-size-base;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba($ns-primary, 0.3);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba($ns-primary, 0.4);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+  }
+}
+
+// Secondary Button
+@mixin ns-button-secondary {
+  background: transparent;
+  color: $ns-primary;
+  border: 2px solid $ns-primary;
+  border-radius: $ns-border-radius-sm;
+  padding: 10px 22px;
+  font-size: $ns-font-size-base;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba($ns-primary, 0.1);
+    transform: translateY(-2px);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// Progress Bar
+@mixin ns-progress-bar {
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+
+  .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, $ns-primary 0%, $ns-accent 100%);
+    transition: width 0.3s ease;
+    border-radius: 4px;
+  }
+}
+
+// Toast Notification
+@mixin ns-toast {
+  background: $ns-surface;
+  color: $ns-text;
+  padding: $ns-spacing-md $ns-spacing-lg;
+  border-radius: $ns-border-radius-sm;
+  box-shadow: $ns-shadow-lg;
+  display: flex;
+  align-items: center;
+  gap: $ns-spacing-sm;
+  min-width: 300px;
+
+  &.success {
+    border-left: 4px solid $ns-success;
+  }
+
+  &.error {
+    border-left: 4px solid $ns-error;
+  }
+
+  &.warning {
+    border-left: 4px solid $ns-warning;
+  }
+
+  &.info {
+    border-left: 4px solid $ns-info;
+  }
+}
+
+// Input Field
+@mixin ns-input {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid $ns-border;
+  border-radius: $ns-border-radius-sm;
+  color: $ns-text;
+  padding: 12px 16px;
+  font-size: $ns-font-size-base;
+  transition: all 0.3s ease;
+
+  &:focus {
+    outline: none;
+    border-color: $ns-primary;
+    box-shadow: 0 0 0 3px rgba($ns-primary-rgb, 0.1);
+  }
+
+  &::placeholder {
+    color: $ns-text-secondary;
+  }
+}

package/projects/facecog-liveness-verification-test/src/theme/variables.scss

@@ -0,0 +1,2 @@
+// For information on how to create your own theme, please see:
+// http://ionicframework.com/docs/theming/

package/projects/facecog-liveness-verification-test/src/zone-flags.ts

@@ -0,0 +1,6 @@
+/**
+ * Prevents Angular change detection from
+ * running with certain Web Component callbacks
+ */
+// eslint-disable-next-line no-underscore-dangle
+(window as any).__Zone_disable_customElements = true;

package/projects/facecog-liveness-verification-test/tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.tsx"
+  ]
+}

package/projects/facecog-liveness-verification-test/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}