@regulaforensics/ionic-native-face-api/example/src/app/home/home.page.html

Ionic Native wrapper for cordova face api

<ion-header>
</ion-header>

<ion-content>
    <div #mainUI style="
            text-align: center;
            background-color: #F5FCFF;
            height: 100%;">
        <br>
        <br>
        <br>
        <div>
            <img style="width: 150px" src="assets/img/portrait.png" #img1/><br>
            <img style="width: 150px" src="assets/img/portrait.png" #img2/>
        </div>

        <div>
            <br>
            <button #matchFacesButton style="margin: 3px; width:75%">Match</button>
            <br>
            <button #livenessButton style="margin: 3px; width:75%">Liveness</button>
            <br>
            <button #clearResultsButton style="margin: 3px; width:75%">Clear</button>
        </div>
        <br>
        <div>
            Similarity: <span style="margin-right: 15px" #similarityResult>nil</span> Liveness: <span #livenessResult>nil</span>
        </div>
    </div>

    <style type="text/css">
        button {
            width: 40%;
            -moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
            -webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
            box-shadow: inset 0px -3px 7px 0px #29bbff;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
            background: -moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
            background: -webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
            background: -o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
            background: -ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
            background: linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa', GradientType=0);
            background-color: #2dabf9;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            border: 1px solid #0b0e07;
            display: inline-block;
            cursor: pointer;
            color: #ffffff;
            font-family: Arial;
            font-size: 15px;
            padding: 9px 23px;
            text-decoration: none;
            text-shadow: 0px 1px 0px #263666;
        }

        button:hover {
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
            background: -moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
            background: -webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
            background: -o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
            background: -ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
            background: linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9', GradientType=0);
            background-color: #0688fa;
        }

        button:active {
            position: relative;
            top: 1px;
        }
    </style>
</ion-content>