@regulaforensics/ionic-native-document-reader
Version:
Ionic Native wrapper for cordova documentreader
116 lines (106 loc) • 5.94 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="color-scheme" content="light" />
<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="manifest" href="/manifest.json" />
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<div class="rfidUI" style="text-align: center; background-color: #F5FCFF; height: 100%; width:100%; display: none;">
<div style="position: absolute; top: 50%; left: 50%; width:100%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); ">
<p class="rfidUIHeader">Reading RFID</p>
<p class="rfidDescription">Place your phone on top of the NFC tag</p>
<progress class="rfidProgress" value="0" max="100"></progress>
<br><br><br>
<button class="cancelButton">X</button>
</div>
</div>
<div class="mainUI" style="text-align: center;background-color: #F5FCFF;height: 100%;">
<div style="align-items: center; text-align: center; width: 100%">
<br><br>
<p class="status">Ready</p>
</div>
<div style=" align-items:center; text-align: center;display: inline-block;">
<p style="margin-bottom: 5px">Portrait</p>
<img style="height: 133px; width: 100px" src="public/assets/img/portrait.png" resizeMode="contain" class="portraitImage" />
</div>
<div style="align-items: center; text-align: center; display: inline-block;">
<p style="margin-bottom: 5px">Document</p>
<img style="height: 133px;" src="public/assets/img/id.png" resizeMode="contain" class="documentImage" />
</div>
<br><br>
<div class="scenariosRadioGroup" style="position: absolute; bottom: 100px; top: 280px; left: 75px; padding: 5px; text-align:left; overflow: auto">
</div>
<div style="position: absolute; bottom: 10px; width: 100%; text-align: center; align-items: center">
<div id="rfidDiv" style="flex-direction: row; padding: 5px">
<input type="checkbox" class="rfidCheckbox" name="rfid" disabled=true></input><span class="rfidCheckboxText" style="color: lightgrey"> Process rfid reading(unavailable)</span><br>
</div>
<div style="flex-direction: row; padding: 10px">
<button class="showScannerButton" style="margin-right: 20px">scan doc</button>
<button class="showImagePicker" style="margin-left: 20px">scan image</button>
</div>
</div>
</div>
<div id="root" style="display: none">
</div>
<script type="module" src="/src/main.tsx"></script>
<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;
}
div {
color: black;
}
</style>
</body>
</html>