@regulaforensics/face-sdk 6.3.3-beta

package/examples/capacitor/src/pages/Home.tsx

@@ -0,0 +1,159 @@
+import { IonPage } from '@ionic/react'
+import React from "react"
+import { File } from '@awesome-cordova-plugins/file'
+import { Dialogs } from '@awesome-cordova-plugins/dialogs'
+import { Camera, DestinationType, MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera'
+import { FaceSDK, MatchFacesRequest, MatchFacesImage, InitConfig, LivenessSkipStep, ImageType, LivenessStatus, LivenessConfig } from '@regulaforensics/face-sdk'
+
+async function init() {
+  if (!await initialize()) return
+  setStatus("Ready")
+}
+
+async function startLiveness() {
+  var response = await faceSdk.startLiveness({
+    config: new LivenessConfig({
+      skipStep: [LivenessSkipStep.ONBOARDING_STEP]
+    }),
+    notificationCompletion: (notification) => {
+      console.log("LivenessStatus: " + notification.status)
+    }
+  })
+  if (response.image == null) return
+  setImage(response.image, ImageType.LIVE, 1)
+  setLivenessStatus(response.liveness == LivenessStatus.PASSED ? "passed" : "unknown")
+}
+
+async function matchFaces() {
+  if (image1 == null || image2 == null) {
+    setStatus("Both images required!")
+    return
+  }
+  setStatus("Processing...")
+  var request = new MatchFacesRequest([image1, image2])
+  var response = await faceSdk.matchFaces(request)
+  var split = await faceSdk.splitComparedFaces(response.results, 0.75)
+  var match = split.matchedFaces
+  setSimilarityStatus("failed")
+  if (match.length > 0)
+    setSimilarityStatus((match[0].similarity * 100).toFixed(2) + "%")
+  setStatus("Ready")
+}
+
+function clearResults() {
+  setStatus("Ready")
+  setSimilarityStatus("null")
+  setLivenessStatus("null")
+  resetImages()
+  image1 = null
+  image2 = null
+}
+
+// If 'regula.license' exists, init using license(enables offline match)
+// otherwise init without license.
+async function initialize() {
+  setStatus("Initializing...")
+  var license = await loadAssetIfExists("regula.license")
+  var config: InitConfig | undefined
+  if (license != null) config = new InitConfig(license)
+  var [success, error] = await faceSdk.initialize({ config: config })
+  if (!success && error != null) {
+    setStatus(error.message)
+    console.log(error.code + ": " + error.message)
+  }
+  return success
+}
+
+function setImage(base64: string, type: number, position: number) {
+  setSimilarityStatus("null")
+  var mfImage = new MatchFacesImage(base64, type)
+  if (position == 1) {
+    image1 = mfImage
+    setUiImage1("data:image/png;base64," + base64)
+    setLivenessStatus("null")
+  }
+  if (position == 2) {
+    image2 = mfImage
+    setUiImage2("data:image/png;base64," + base64)
+  }
+}
+
+async function useCamera(position: number) {
+  var response = await faceSdk.startFaceCapture()
+  if (response.image == null) return
+  var image = response.image
+  setImage(image.image, image.imageType, position)
+}
+
+function useGallery(position: number) {
+  Camera.getPicture({
+    destinationType: DestinationType.DATA_URL,
+    mediaType: MediaType.PICTURE,
+    sourceType: PictureSourceType.PHOTOLIBRARY
+  }).then((result: string) => setImage(result, ImageType.PRINTED, position))
+}
+
+function pickImage(position: number) {
+  Dialogs.confirm("", "Select option", ["Use gallery", "Use camera"]).then(button => {
+    if (button == 1) useGallery(position)
+    else useCamera(position)
+  })
+}
+
+async function loadAssetIfExists(path: string): Promise<string | null> {
+  try {
+    var dir = await File.resolveDirectoryUrl(File.applicationDirectory + "public/assets")
+    var fileEntry = await File.getFile(dir, path, {})
+    var result = await new Promise<string | null>((resolve, _) => {
+      fileEntry.file(file => {
+        var reader = new FileReader()
+        reader.onloadend = (_) => resolve(reader.result as string)
+        reader.readAsDataURL(file)
+      }, _ => resolve(null))
+    })
+    return result
+  } catch (_) {
+    return null
+  }
+}
+
+var faceSdk = FaceSDK.instance
+
+var image1: MatchFacesImage | null
+var image2: MatchFacesImage | null
+
+var setStatus = (data: string) => status.innerHTML = data
+var setSimilarityStatus = (data: string) => similarityResult.innerHTML = data
+var setLivenessStatus = (data: string) => livenessResult.innerHTML = data
+var setUiImage1 = (data: string) => img1.src = data
+var setUiImage2 = (data: string) => img2.src = data
+var resetImages = () => {
+  setUiImage1("assets/img/portrait.png")
+  setUiImage2("assets/img/portrait.png")
+}
+
+const status = document.querySelector('.status') as HTMLElement
+const similarityResult = document.querySelector('.similarityResult') as HTMLElement
+const livenessResult = document.querySelector('.livenessResult') as HTMLElement
+const img1 = document.querySelector('.img1') as any
+const img2 = document.querySelector('.img2') as any
+const matchFacesButton = document.querySelector('.matchFacesButton') as HTMLElement
+const livenessButton = document.querySelector('.livenessButton') as HTMLElement
+const clearResultsButton = document.querySelector('.clearResultsButton') as HTMLElement
+
+img1.addEventListener("click", () => pickImage(1))
+img2.addEventListener("click", () => pickImage(2))
+matchFacesButton.addEventListener("click", matchFaces)
+livenessButton.addEventListener("click", startLiveness)
+clearResultsButton.addEventListener("click", clearResults)
+
+document.addEventListener('deviceready', init)
+
+const Home: React.FC = () => {
+  return (
+    <IonPage>
+    </IonPage>
+  )
+}
+
+export default Home

package/examples/capacitor/src/setupTests.ts

@@ -0,0 +1,14 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
+
+// Mock matchmedia
+window.matchMedia = window.matchMedia || function() {
+  return {
+      matches: false,
+      addListener: function() {},
+      removeListener: function() {}
+  };
+};

package/examples/capacitor/src/theme/variables.css

@@ -0,0 +1,242 @@
+/* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+/** Ionic CSS Variables **/
+:root {
+  /** primary **/
+  --ion-color-primary: #3880ff;
+  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3171e0;
+  --ion-color-primary-tint: #4c8dff;
+
+  /** secondary **/
+  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-tint: #50c8ff;
+
+  /** tertiary **/
+  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-tint: #6370ff;
+
+  /** success **/
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  /** warning **/
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255, 196, 9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  /** danger **/
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  /** dark **/
+  --ion-color-dark: #222428;
+  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #1e2023;
+  --ion-color-dark-tint: #383a3e;
+
+  /** medium **/
+  --ion-color-medium: #92949c;
+  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #808289;
+  --ion-color-medium-tint: #9d9fa6;
+
+  /** light **/
+  --ion-color-light: #f4f5f8;
+  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-tint: #f5f6f9;
+}
+
+@media (prefers-color-scheme: dark) {
+  /*
+   * Dark Colors
+   * -------------------------------------------
+   */
+
+  body {
+    --ion-color-primary: #428cff;
+    --ion-color-primary-rgb: 66,140,255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255,255,255;
+    --ion-color-primary-shade: #3a7be0;
+    --ion-color-primary-tint: #5598ff;
+
+    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary-rgb: 80,200,255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255,255,255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106,100,255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255,255,255;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47,223,117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0,0,0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #ffd534;
+    --ion-color-warning-rgb: 255,213,52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0,0,0;
+    --ion-color-warning-shade: #e0bb2e;
+    --ion-color-warning-tint: #ffd948;
+
+    --ion-color-danger: #ff4961;
+    --ion-color-danger-rgb: 255,73,97;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255,255,255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244,245,248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0,0,0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152,154,162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0,0,0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34,36,40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255,255,255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
+  }
+
+  /*
+   * iOS Dark Theme
+   * -------------------------------------------
+   */
+
+  .ios body {
+    --ion-background-color: #000000;
+    --ion-background-color-rgb: 0,0,0;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-color-step-50: #0d0d0d;
+    --ion-color-step-100: #1a1a1a;
+    --ion-color-step-150: #262626;
+    --ion-color-step-200: #333333;
+    --ion-color-step-250: #404040;
+    --ion-color-step-300: #4d4d4d;
+    --ion-color-step-350: #595959;
+    --ion-color-step-400: #666666;
+    --ion-color-step-450: #737373;
+    --ion-color-step-500: #808080;
+    --ion-color-step-550: #8c8c8c;
+    --ion-color-step-600: #999999;
+    --ion-color-step-650: #a6a6a6;
+    --ion-color-step-700: #b3b3b3;
+    --ion-color-step-750: #bfbfbf;
+    --ion-color-step-800: #cccccc;
+    --ion-color-step-850: #d9d9d9;
+    --ion-color-step-900: #e6e6e6;
+    --ion-color-step-950: #f2f2f2;
+
+    --ion-item-background: #000000;
+
+    --ion-card-background: #1c1c1d;
+  }
+
+  .ios ion-modal {
+    --ion-background-color: var(--ion-color-step-100);
+    --ion-toolbar-background: var(--ion-color-step-150);
+    --ion-toolbar-border-color: var(--ion-color-step-250);
+  }
+
+
+  /*
+   * Material Design Dark Theme
+   * -------------------------------------------
+   */
+
+  .md body {
+    --ion-background-color: #121212;
+    --ion-background-color-rgb: 18,18,18;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255,255,255;
+
+    --ion-border-color: #222222;
+
+    --ion-color-step-50: #1e1e1e;
+    --ion-color-step-100: #2a2a2a;
+    --ion-color-step-150: #363636;
+    --ion-color-step-200: #414141;
+    --ion-color-step-250: #4d4d4d;
+    --ion-color-step-300: #595959;
+    --ion-color-step-350: #656565;
+    --ion-color-step-400: #717171;
+    --ion-color-step-450: #7d7d7d;
+    --ion-color-step-500: #898989;
+    --ion-color-step-550: #949494;
+    --ion-color-step-600: #a0a0a0;
+    --ion-color-step-650: #acacac;
+    --ion-color-step-700: #b8b8b8;
+    --ion-color-step-750: #c4c4c4;
+    --ion-color-step-800: #d0d0d0;
+    --ion-color-step-850: #dbdbdb;
+    --ion-color-step-900: #e7e7e7;
+    --ion-color-step-950: #f3f3f3;
+
+    --ion-item-background: #1e1e1e;
+
+    --ion-toolbar-background: #1f1f1f;
+
+    --ion-tab-bar-background: #1f1f1f;
+
+    --ion-card-background: #1e1e1e;
+  }
+}
+
+html {
+  /* For more information on dynamic font scaling, visit the documentation: 
+  https://ionicframework.com/docs/layout/dynamic-font-scaling */
+  --ion-dynamic-font: var(--ion-default-dynamic-font);
+}

package/examples/capacitor/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/examples/capacitor/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/examples/capacitor/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/examples/capacitor/vite.config.ts

@@ -0,0 +1,16 @@
+import legacy from '@vitejs/plugin-legacy'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    legacy()
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/setupTests.ts',
+  }
+})

package/examples/cordova/.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Debug Android on emulator",
+            "type": "cordova",
+            "request": "launch",
+            "platform": "android",
+            "target": "emulator",
+            "port": 9222,
+            "sourceMaps": true,
+            "cwd": "${workspaceFolder}"
+        },
+        {
+            "name": "Debug Android on device",
+            "type": "cordova",
+            "request": "launch",
+            "platform": "android",
+            "target": "device",
+            "port": 9222,
+            "sourceMaps": true,
+            "cwd": "${workspaceFolder}"
+        }
+    ]
+}

package/examples/cordova/config.xml

@@ -0,0 +1,37 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget android-packageName="com.regula.faceapi" ios-CFBundleIdentifier="regula.FaceSDKSample" version="1.0.0" xmlns:android="http://schemas.android.com/apk/res/android" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>FaceSDK</name>
+    <author email="cordova.support@regulaforensics.com" href="https://mobile.regulaforensics.com">Regula Forensics Inc.</author>
+    <content src="index.html" />
+    <access origin="*" />
+    <allow-intent href="http://*/*" />
+    <allow-intent href="https://*/*" />
+    <allow-intent href="tel:*" />
+    <allow-intent href="sms:*" />
+    <allow-intent href="mailto:*" />
+    <allow-intent href="geo:*" />
+    <platform name="android">
+        <preference name="orientation" value="portrait" />
+        <preference name="GradlePluginKotlinEnabled" value="true" />
+        <preference name="android-minSdkVersion" value="23" />
+        <preference name="android-targetSdkVersion" value="34" />
+        <allow-intent href="market:*" />
+        <config-file parent="/*" target="AndroidManifest.xml">
+            <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+        </config-file>
+        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
+            <application android:usesCleartextTraffic="true" />
+        </edit-config>
+    </platform>
+    <platform name="ios">
+        <preference name="orientation" value="portrait" />
+        <allow-intent href="itms:*" />
+        <allow-intent href="itms-apps:*" />
+        <config-file target="*-Info.plist" parent="NSCameraUsageDescription">
+            <string>To use camera</string>
+        </config-file>
+        <config-file target="*-Info.plist" parent="NSPhotoLibraryUsageDescription">
+            <string>To pick images</string>
+        </config-file>
+    </platform>
+</widget>

package/examples/cordova/jsconfig.json

@@ -0,0 +1 @@
+{}

package/examples/cordova/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "face-sdk",
+  "displayName": "FaceSDK",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "setup": "npm install && cordova prepare",
+    "android": "cordova run android",
+    "ios": "cordova run ios"
+  },
+  "keywords": [
+    "ecosystem:cordova"
+  ],
+  "author": "Regula Forensics Inc.",
+  "license": "commercial",
+  "dependencies": {
+    "@regulaforensics/face-sdk": "6.3.3-beta",
+    "@regulaforensics/cordova-plugin-face-core-basic": "6.2.1",
+    "cordova-android": "12.0.1",
+    "cordova-ios": "7.0.1",
+    "cordova-plugin-add-swift-support": "2.0.2",
+    "cordova-plugin-camera": "7.0.0",
+    "jetifier": "2.0.0",
+    "cordova-plugin-dialogs": "2.0.2",
+    "cordova-plugin-file": "8.0.0"
+  },
+  "cordova": {
+    "plugins": {
+      "@regulaforensics/face-sdk": {},
+      "@regulaforensics/cordova-plugin-face-core-basic": {},
+      "cordova-plugin-camera": {},
+      "cordova-plugin-dialogs": {},
+      "cordova-plugin-file": {}
+    },
+    "platforms": [
+      "android",
+      "ios"
+    ]
+  }
+}

package/examples/cordova/www/css/index.css

@@ -0,0 +1,107 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+* {
+    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
+}
+
+body {
+    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
+    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
+    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
+    background-color:#E4E4E4;
+    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
+    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
+    font-size:12px;
+    height:100vh;
+    margin:0px;
+    padding:0px;
+    /* Padding to avoid the "unsafe" areas behind notches in the screen */
+    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px);
+    text-transform:uppercase;
+    width:100%;
+}
+
+/* Portrait layout (default) */
+.app {
+    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
+    position:absolute;             /* position in the center of the screen */
+    left:50%;
+    top:50%;
+    height:50px;                   /* text area height */
+    width:225px;                   /* text area width */
+    text-align:center;
+    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
+    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
+                                   /* offset horizontal: half of text area width */
+}
+
+/* Landscape layout (with min-width) */
+@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
+    .app {
+        background-position:left center;
+        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
+        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
+                                      /* offset horizontal: half of image width and text area width */
+    }
+}
+
+h1 {
+    font-size:24px;
+    font-weight:normal;
+    margin:0px;
+    overflow:visible;
+    padding:0px;
+    text-align:center;
+}
+
+.event {
+    border-radius:4px;
+    -webkit-border-radius:4px;
+    color:#FFFFFF;
+    font-size:12px;
+    margin:0px 30px;
+    padding:2px 0px;
+}
+
+.event.listening {
+    background-color:#333333;
+    display:block;
+}
+
+.event.received {
+    background-color:#4B946A;
+    display:none;
+}
+
+@keyframes fade {
+    from { opacity: 1.0; }
+    50% { opacity: 0.4; }
+    to { opacity: 1.0; }
+}
+ 
+@-webkit-keyframes fade {
+    from { opacity: 1.0; }
+    50% { opacity: 0.4; }
+    to { opacity: 1.0; }
+}
+ 
+.blink {
+    animation:fade 3000ms infinite;
+    -webkit-animation:fade 3000ms infinite;
+}