@regulaforensics/ionic-native-document-reader 6.9.0 → 7.1.0

package/reactExample/src/pages/Home.tsx

@@ -1,9 +1,8 @@
-import { IonPage, isPlatform } from '@ionic/react'
-import { DocumentReader, DocumentReaderScenario, Enum, DocumentReaderCompletion, DocumentReaderResults, DocumentReaderNotification, ScannerConfig, RecognizeConfig } from '@regulaforensics/ionic-native-document-reader'
+import { IonPage } from '@ionic/react'
+import { DocumentReader, DocumentReaderScenario, Enum, DocumentReaderCompletion, DocumentReaderResults, DocumentReaderNotification, ScannerConfig, RecognizeConfig, DocReaderConfig } from '@regulaforensics/ionic-native-document-reader'
 import React from "react"
-import { DirectoryEntry, Entry, File, FileEntry, IFile } from '@awesome-cordova-plugins/file'
-import { AndroidPermissions } from "@awesome-cordova-plugins/android-permissions"
-import { ImagePicker } from "@awesome-cordova-plugins/image-picker"
+import { DirectoryEntry, File, FileEntry, IFile } from '@awesome-cordova-plugins/file'
+import { Camera, DestinationType, MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera'
 
 var selectedScenario = "Mrz"
 var doRfid: boolean = false
@@ -29,59 +28,42 @@ const rfidDescriptionRef = document.querySelector('.rfidDescription') as HTMLEle
 const rfidProgressRef = document.querySelector('.rfidProgress') as HTMLIonProgressBarElement
 const cancelButtonRef = document.querySelector('.cancelButton') as HTMLElement
 
-var error1 = (e: any) => {
-  console.log(e)
-  status.innerHTML = e
-  status.style.backgroundColor = "red"
-}
-var error2 = (e: any) => {
-  e = JSON.stringify(e, undefined, 2)
-  console.log(e)
-  alert(e)
+function onInitialized() {
+  status.innerHTML = "Ready"
+  status.style.backgroundColor = "green"
+
+  DocumentReader.setFunctionality({
+    showCaptureButton: true
+  })
 }
 
-cancelButtonRef.addEventListener("click", stopRfid)
+cancelButtonRef.addEventListener("click", hideRfidUI)
 updateUI()
 status.innerHTML = "loading......"
 status.style.backgroundColor = "grey"
 document.addEventListener("deviceready", onDeviceReady, false)
 
 function onDeviceReady() {
-  readFile("public/assets", "regula.license", (license: any) => {
-    DocumentReader.prepareDatabase("Full").subscribe((response: string) => {
-      if (response != "database prepared")
-        status.innerHTML = "Downloading database: " + response + "%"
-      else {
-        status.innerHTML = "Loading......"
-        DocumentReader.initializeReader({
-          license: license,
-          delayedNNLoad: true
-        }).then((_r: string) => onInitialized()).catch(error1)
-      }
-    })
-  })
-}
-
-function addCertificates() {
-  File.resolveDirectoryUrl(File.applicationDirectory + "certificates").then((dir: DirectoryEntry) => {
-    dir.createReader().readEntries((entries: Entry[]) => {
-      for (let i = 0; i < entries.length; i++) {
-        if (entries[i].isFile) {
-          var findExt = entries[i].name.split('.')
-          var pkdResourceType = 0
-          if (findExt.length > 0)
-            pkdResourceType = Enum.PKDResourceType.getType(findExt[findExt.length - 1].toLowerCase())
-          readFile("certificates", entries[i].name, (file: any, resType: any) => {
-            resType = resType[0]
-            var certificates = []
-            certificates.push({
-              'binaryData': file,
-              'resourceType': resType
-            })
-            DocumentReader.addPKDCertificates(certificates).then((_r: string) => console.log("certificate added")).catch(error1)
-          }, pkdResourceType)
-        }
+  readFile("public/assets", "regula.license", (license: string) => {
+    var config = new DocReaderConfig()
+    config.license = license
+    config.delayedNNLoad = true
+    DocumentReader.initializeReader(config).then((message: string) => {
+      var callback = JSON.parse(message)
+      if (!callback.success) {
+        var error = "Init error: " + callback.error.message
+        console.log(error)
+        status.innerHTML = error
+        status.style.backgroundColor = "red"
+        return
       }
+      console.log("Init complete")
+      showScannerButton.addEventListener("click", scan)
+      showImagePicker.addEventListener("click", recognize)
+      DocumentReader.getAvailableScenarios().then((sc: string) =>
+        DocumentReader.getIsRFIDAvailableForUse().then((canRfid: boolean) =>
+          postInitialize(JSON.parse(sc), canRfid)))
+      onInitialized()
     })
   })
 }
@@ -89,7 +71,7 @@ function addCertificates() {
 function readFile(dirPath: string, fileName: string, callback: any, ...items: any) {
   File.resolveDirectoryUrl(File.applicationDirectory + dirPath).then((dir: DirectoryEntry) => File.getFile(dir, fileName, {})).then((fileEntry: FileEntry) => fileEntry.file((file: IFile) => {
     var reader = new FileReader()
-    reader.onloadend = (evt) => {
+    reader.onloadend = (_) => {
       var data = reader.result as String
       data = data.substring(data.indexOf(',') + 1)
       callback(data, items)
@@ -107,33 +89,27 @@ function updateUI() {
   rfidProgressRef.value = rfidProgress
 }
 
-function stopRfid() {
-  hideRfidUI()
-  DocumentReader.stopRFIDReader()
-}
-
-function handleCompletion(completion?: DocumentReaderCompletion) {
-  if (completion == undefined) return
-  console.log("DocReaderAction: " + completion.action)
-  if (isReadingRfidCustomUi && (completion.action === Enum.DocReaderAction.CANCEL || completion.action === Enum.DocReaderAction.ERROR))
-    hideRfidUI()
-  if (isReadingRfidCustomUi && completion.action === Enum.DocReaderAction.NOTIFICATION)
-    updateRfidUI(completion.results!.documentReaderNotification!)
-  if (completion.action === Enum.DocReaderAction.COMPLETE)
-    if (isReadingRfidCustomUi) {
-      if (completion.results!.rfidResult !== 1)
-        restartRfidUI()
-      else {
-        hideRfidUI()
-        displayResults(completion.results!)
-      }
+function handleCompletion(completion: DocumentReaderCompletion) {
+  if (isReadingRfidCustomUi) {
+    if (completion.action == Enum.DocReaderAction.ERROR) restartRfidUI()
+    if (actionSuccess(completion.action!) || actionError(completion.action!)) {
+      hideRfidUI()
+      displayResults(completion.results!)
     }
-    else
-      handleResults(completion.results!)
-  if (completion.action === Enum.DocReaderAction.TIMEOUT)
+  } else if (actionSuccess(completion.action!))
     handleResults(completion.results!)
 }
 
+function actionSuccess(action: number) {
+  if (action == Enum.DocReaderAction.COMPLETE || action == Enum.DocReaderAction.TIMEOUT) return true
+  return false
+}
+
+function actionError(action: number) {
+  if (action == Enum.DocReaderAction.CANCEL || action == Enum.DocReaderAction.ERROR) return true
+  return false
+}
+
 function showRfidUI() {
   // show animation
   isReadingRfidCustomUi = true
@@ -142,6 +118,7 @@ function showRfidUI() {
 
 function hideRfidUI() {
   // show animation
+  DocumentReader.stopRFIDReader()
   restartRfidUI()
   isReadingRfidCustomUi = false
   rfidUIHeader = "Reading RFID"
@@ -159,72 +136,36 @@ function restartRfidUI() {
 
 function updateRfidUI(notification: DocumentReaderNotification) {
   if (notification.notificationCode === Enum.eRFID_NotificationCodes.RFID_NOTIFICATION_PCSC_READING_DATAGROUP)
-    rfidDescription = notification.dataFileType!.toString()
+    rfidDescription = "ERFIDDataFileType: " + notification.dataFileType
   rfidUIHeader = "Reading RFID"
   rfidUIHeaderColor = "black"
-  rfidProgress = notification.progress!
+  if (notification.progress != undefined)
+    rfidProgress = notification.progress
   updateUI()
-  if (isPlatform("ios"))
-    DocumentReader.setRfidSessionStatus(rfidDescription + "\n" + notification.progress + "%")
 }
 
 function customRFID() {
   showRfidUI()
-  DocumentReader.readRFID().subscribe((m: string) =>
-    handleCompletion(DocumentReaderCompletion.fromJson(JSON.parse(m))))
+  DocumentReader.readRFID(false, false, false).subscribe((m: string) => handleRfidCompletion(m))
 }
 
 function usualRFID() {
   isReadingRfid = true
-  var notification = "rfidNotificationCompletionEvent"
-  var paCert = "paCertificateCompletionEvent"
-  var taCert = "taCertificateCompletionEvent"
-  var taSig = "taSignatureCompletionEvent"
-  DocumentReader.startRFIDReader().subscribe((m: string) => {
-    if (m.substring(0, notification.length) === notification) {
-      m = m.substring(notification.length, m.length)
-      console.log(notification + ": " + m)
-    } else if (m.substring(0, paCert.length) === paCert) {
-      m = m.substring(paCert.length, m.length)
-      console.log(paCert + ": " + m)
-    } else if (m.substring(0, taCert.length) === taCert) {
-      m = m.substring(taCert.length, m.length)
-      console.log(taCert + ": " + m)
-    } else if (m.substring(0, taSig.length) === taSig) {
-      m = m.substring(taSig.length, m.length)
-      console.log(taSig + ": " + m)
-    } else
-      handleCompletion(DocumentReaderCompletion.fromJson(JSON.parse(m)))
-  })
+  DocumentReader.startRFIDReader(false, false, false).subscribe((m: string) => handleRfidCompletion(m))
 }
 
-function onInitialized() {
-  status.innerHTML = "Ready"
-  status.style.backgroundColor = "green"
-  showScannerButton.addEventListener("click", scan)
-  if (isPlatform("android"))
-    showImagePicker.addEventListener("click", recognizeAndroid)
-  if (isPlatform("ios"))
-    showImagePicker.addEventListener("click", recognize)
-  DocumentReader.setConfig({
-    functionality: {
-      videoCaptureMotionControl: true,
-      showCaptureButton: true
-    },
-    customization: {
-      showResultStatusMessages: true,
-      showStatusMessages: true
-    },
-    processParams: {
-      scenario: "Mrz",
-      doRfid: false
-    },
-  })
-  DocumentReader.getAvailableScenarios().then((sc: string) =>
-    DocumentReader.isRFIDAvailableForUse().then((canRfid: boolean) =>
-      postInitialize(JSON.parse(sc), canRfid)))
-  DocumentReader.setRfidDelegate(Enum.RFIDDelegate.NO_PA)
-  // addCertificates()
+function handleRfidCompletion(raw: string) {
+  var idDetected = "rfidOnChipDetectedEvent"
+  var idProgress = "rfidOnProgressCompletion"
+  var idRetry = "rfidOnRetryReadChipEvent"
+  if (raw.substring(0, idDetected.length) === idDetected)
+    console.log("chip detected")
+  else if (raw.substring(0, idRetry.length) === idRetry)
+    console.log("error reading chip, retrying...")
+  else if (raw.substring(0, idProgress.length) === idProgress)
+    updateRfidUI(DocumentReaderNotification.fromJson(JSON.parse(raw.substring(idProgress.length, raw.length)))!)
+  else
+    handleCompletion(DocumentReaderCompletion.fromJson(JSON.parse(raw))!)
 }
 
 function postInitialize(scenarios: Array<any>, canRfid: boolean) {
@@ -259,8 +200,7 @@ function postInitialize(scenarios: Array<any>, canRfid: boolean) {
 }
 
 function handleResults(results: DocumentReaderResults) {
-  clearResults()
-  if (doRfid && !isReadingRfid && results != null && results.chipPage != 0) {
+  if (doRfid && !isReadingRfid && results != null) {
     // customRFID()
     usualRFID()
   } else {
@@ -292,49 +232,38 @@ function displayResults(results: DocumentReaderResults) {
 
 function clearResults() {
   status.innerHTML = "Ready"
-  documentImage.src = "assets/img/id.png"
-  portraitImage.src = "assets/img/portrait.png"
+  status.style.backgroundColor = "green"
+  readFile("public/assets/img", "id.png", (img: string) => {
+    documentImage.src = "data:image/png;base64," + img
+  })
+  readFile("public/assets/img", "portrait.png", (img: string) => {
+    portraitImage.src = "data:image/png;base64," + img
+  })
 }
 
 function scan() {
+  clearResults()
   var config = new ScannerConfig()
   config.scenario = selectedScenario
   DocumentReader.scan(config).subscribe((m: string) =>
-    handleCompletion(DocumentReaderCompletion.fromJson(JSON.parse(m))))
+    handleCompletion(DocumentReaderCompletion.fromJson(JSON.parse(m))!))
 }
 
 function recognize() {
-  ImagePicker.getPictures({ maximumImagesCount: 1 }).then((results: any) => {
-    if (results.length > 0) {
-      clearResults()
-      status.innerHTML = "copying image......"
-      status.style.backgroundColor = "grey"
-    }
-    File.readAsDataURL((isPlatform("ios") ? "file://" : "") + results[0].substring(0, (results[0] as string).lastIndexOf("/")), results[0].substring((results[0] as string).lastIndexOf("/") + 1)).then((file => {
-      status.innerHTML = "processing image......"
-      status.style.backgroundColor = "grey"
-      let fileString = (file as string)
-      var config = new RecognizeConfig()
-      config.scenario = selectedScenario
-      config.image = fileString.substring(fileString.indexOf(",") + 1)
-      DocumentReader.recognize(config).subscribe((m: string) =>
-        handleCompletion(DocumentReaderCompletion.fromJson(JSON.parse(m))))
-    })).catch(error2)
-  }, error2)
-}
-
-function recognizeAndroid() {
-  AndroidPermissions.checkPermission(AndroidPermissions.PERMISSION.READ_EXTERNAL_STORAGE).then((result: any) => {
-    if (result.hasPermission)
-      recognize()
-    else
-      AndroidPermissions.requestPermission(AndroidPermissions.PERMISSION.READ_EXTERNAL_STORAGE).then((result: any) => {
-        if (result.hasPermission)
-          recognize()
-        else
-          console.log("storage permission denied")
-      }, (err: any) => console.log(JSON.stringify(err)))
-  }, (err: any) => console.log(JSON.stringify(err)))
+  Camera.getPicture({
+    destinationType: DestinationType.DATA_URL,
+    mediaType: MediaType.PICTURE,
+    sourceType: PictureSourceType.PHOTOLIBRARY
+  }).then((result: string) => {
+    clearResults()
+    status.innerHTML = "processing image......"
+    status.style.backgroundColor = "grey"
+    var config = new RecognizeConfig()
+    config.scenario = selectedScenario
+    config.image = result
+    DocumentReader.recognize(config).subscribe((m: string) =>
+      handleCompletion(DocumentReaderCompletion.fromJson(JSON.parse(m))!))
+  })
 }
 
 const Home: React.FC = () => {

package/reactExample/src/theme/variables.css

@@ -234,3 +234,9 @@ http://ionicframework.com/docs/theming/ */
     --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/reactExample/src/vite-env.d.ts

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

package/reactExample/tsconfig.json

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

package/reactExample/tsconfig.node.json

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

package/reactExample/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/reactExample/ios/App/App/capacitor.config.json

@@ -1,6 +0,0 @@
-{
-	"appId": "com.regula.documentreader",
-	"appName": "DocumentReader",
-	"webDir": "build",
-	"bundledWebRuntime": false
-}

package/reactExample/ios/App/App/config.xml

@@ -1,19 +0,0 @@
-<?xml version='1.0' encoding='utf-8'?>
-<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
-  <access origin="*" />
-  
-  <feature name="DocumentReader">
-    <param name="ios-package" value="RGLDocumentReader"/>
-  </feature>
-
-  <feature name="File">
-    <param name="ios-package" value="CDVFile"/>
-    <param name="onload" value="true"/>
-  </feature>
-
-  <feature name="ImagePicker">
-    <param name="ios-package" value="SOSPicker"/>
-  </feature>
-
-  
-</widget>

package/reactExample/ios/App/App.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>IDEDidComputeMac32BitWarning</key>
-	<true/>
-</dict>
-</plist>

package/reactExample/public/assets/shapes.svg

@@ -1 +0,0 @@
-<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

package/reactExample/public/index.html

@@ -1,114 +0,0 @@
-<!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="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/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>
-            <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="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="assets/img/id.png" resizeMode="contain" class="documentImage" />
-        </div>
-        <br><br>
-        <div class="scenariosRadioGroup" style="position: absolute; bottom: 100px; top: 230px; 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>
-
-
-    <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>