From fac02d4db51debd3d85c19f9f1a10c0a2f7ce74d Mon Sep 17 00:00:00 2001 From: yushulx Date: Fri, 11 Oct 2024 13:56:03 +0800 Subject: [PATCH] Update --- src/app/mrz-reader/mrz-reader.component.css | 32 --- .../product-list/product-list.component.html | 4 + .../product-list/product-list.component.ts | 6 +- src/app/products.ts | 14 +- src/styles.css | 252 ++++++++++-------- 5 files changed, 159 insertions(+), 149 deletions(-) diff --git a/src/app/mrz-reader/mrz-reader.component.css b/src/app/mrz-reader/mrz-reader.component.css index 4ecb40f..d47726e 100644 --- a/src/app/mrz-reader/mrz-reader.component.css +++ b/src/app/mrz-reader/mrz-reader.component.css @@ -43,36 +43,4 @@ textarea { display: flex; justify-content: space-between; align-items: center; -} - -.loading-indicator { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - z-index: 1000; - display: flex; - align-items: center; - justify-content: center; -} - -.spinner { - width: 50px; - height: 50px; - border: 5px solid #fff; - border-radius: 50%; - animation: spin 1s linear infinite; - background: linear-gradient(to right, #FF0000 0%, #FF8000 17%, #FFFF00 33%, #00FF00 50%, #00FFFF 67%, #0080FF 83%, #0000FF 100%); -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } } \ No newline at end of file diff --git a/src/app/product-list/product-list.component.html b/src/app/product-list/product-list.component.html index b2b3c49..5842eec 100644 --- a/src/app/product-list/product-list.component.html +++ b/src/app/product-list/product-list.component.html @@ -1,3 +1,7 @@ +
+ +
+
Get a License key from { - + this.isLoading = true; this.processedText = this.inputText.toUpperCase(); // Configure the paths where the .wasm files and other necessary resources for modules are located. CoreModule.engineResourcePaths = { @@ -65,9 +66,10 @@ export class ProductListComponent { Dynamsoft.DWT.ResourcesPath = "assets/dynamic-web-twain"; Dynamsoft.DWT.UseLocalService = true; } catch (error) { - alert(error); + console.log(error); } + this.isLoading = false; } toggleDivVisibility(): void { diff --git a/src/app/products.ts b/src/app/products.ts index f6ab7df..f64b3ce 100644 --- a/src/app/products.ts +++ b/src/app/products.ts @@ -8,12 +8,12 @@ export interface Product { export const products = [ { id: 'reader', - name: 'Barcode and QR Code Reader', + name: 'Barcode and QR Code Reader (File)', description: 'Scan barcode and QR code from image files', }, { id: 'scanner', - name: 'Barcode and QR Code Scanner', + name: 'Barcode and QR Code Scanner (Camera)', description: 'Scan barcode and QR code from camera stream', }, { @@ -28,28 +28,28 @@ export const products = [ }, { id: 'mrz-reader', - name: 'MRZ Reader', + name: 'MRZ Reader (File)', description: 'Scan MRZ from image files', }, { id: 'mrz-scanner', - name: 'MRZ Scanner', + name: 'MRZ Scanner (Camera)', description: 'Scan MRZ from camera stream', }, { id: 'document-viewer', - name: 'Document Viewer', + name: 'Document Viewer (File)', description: 'View, edit and save documents', }, { id: 'acquire-image', - name: 'Acquire Image', + name: 'Acquire Image (TWAIN/SANE/ICA Scanner)', description: 'The basic document scanning functionality', }, { id: 'image-editor', - name: 'Image Editor', + name: 'Image Editor (TWAIN/SANE/ICA Scanner)', description: 'Image editing: rotate, mirror, flip and more', }, ]; diff --git a/src/styles.css b/src/styles.css index 2f74ef0..dc79072 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,111 +1,147 @@ /* Global Styles */ * { - font-family: 'Roboto', Arial, sans-serif; - color: #616161; - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - body { - margin: 0; - } - - .container { - display: flex; - flex-direction: row; - } - - router-outlet + * { - padding: 0 16px; - } - - /* Text */ - - h1 { - font-size: 32px; - } - - h2 { - font-size: 20px; - } - - h1, h2 { - font-weight: lighter; - } - - p { - font-size: 14px; - } - - /* Hyperlink */ - - a { - cursor: pointer; - color: #1976d2; - text-decoration: none; - } - - a:hover { - opacity: 0.8; - } - - /* Input */ - - input { - font-size: 14px; - border-radius: 2px; - padding: 8px; - margin-bottom: 16px; - border: 1px solid #BDBDBD; - } - - label { - font-size: 12px; - font-weight: bold; - margin-bottom: 4px; - display: block; - text-transform: uppercase; - } - - /* Button */ - .button, button { - display: inline-flex; - align-items: center; - padding: 8px 16px; - border-radius: 2px; - font-size: 14px; - cursor: pointer; - background-color: #1976d2; - color: white; - border: none; - } - - .button:hover, button:hover { - opacity: 0.8; - font-weight: normal; - } - - .button:disabled, button:disabled { - opacity: 0.5; - cursor: auto; - } - - /* Top Bar */ - - app-top-bar { - width: 100%; - height: 68px; - background-color: #1976d2; - padding: 16px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - } - - app-top-bar h1 { - color: white; - margin: 0; - } + font-family: 'Roboto', Arial, sans-serif; + color: #616161; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + margin: 0; +} + +.container { + display: flex; + flex-direction: row; +} + +router-outlet+* { + padding: 0 16px; +} + +/* Text */ + +h1 { + font-size: 32px; +} + +h2 { + font-size: 20px; +} + +h1, +h2 { + font-weight: lighter; +} + +p { + font-size: 14px; +} + +/* Hyperlink */ + +a { + cursor: pointer; + color: #1976d2; + text-decoration: none; +} + +a:hover { + opacity: 0.8; +} + +/* Input */ + +input { + font-size: 14px; + border-radius: 2px; + padding: 8px; + margin-bottom: 16px; + border: 1px solid #BDBDBD; +} + +label { + font-size: 12px; + font-weight: bold; + margin-bottom: 4px; + display: block; + text-transform: uppercase; +} + +/* Button */ +.button, +button { + display: inline-flex; + align-items: center; + padding: 8px 16px; + border-radius: 2px; + font-size: 14px; + cursor: pointer; + background-color: #1976d2; + color: white; + border: none; +} + +.button:hover, +button:hover { + opacity: 0.8; + font-weight: normal; +} + +.button:disabled, +button:disabled { + opacity: 0.5; + cursor: auto; +} + +/* Top Bar */ + +app-top-bar { + width: 100%; + height: 68px; + background-color: #1976d2; + padding: 16px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +app-top-bar h1 { + color: white; + margin: 0; +} + +.loading-indicator { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; +} + +.spinner { + width: 50px; + height: 50px; + border: 5px solid #fff; + border-radius: 50%; + animation: spin 1s linear infinite; + background: linear-gradient(to right, #FF0000 0%, #FF8000 17%, #FFFF00 33%, #00FF00 50%, #00FFFF 67%, #0080FF 83%, #0000FF 100%); +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} \ No newline at end of file