feat: update v1 (#14)

- updated home page
- updated template
- updated to dcv 2.4.2000
- add image preview and crop image to the recognized text lines
- removed redundant MRZ formatter (already in template)
- add validation status icons to result from DCP
- add comm100 livechat

Author: Felix-Dynamsoft

README.md

@@ -30,7 +30,7 @@ git clone https://github.com/Dynamsoft/mrz-scanner-javascript
 
 ## Request a Trial License
 
-The key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this solution (found in the js/init.js file) is a test license valid for 24 hours for any newly authorized browser. If you wish to test the SDK further, you can request a 30-day free trial license through the <a href="https://www.dynamsoft.com/customer/license/trialLicense?product=mrz&utm_source=samples&package=js" target="_blank">Request a Trial License</a> link.
+The key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this solution (found in the js/init.js file) is a test license valid for 24 hours for any newly authorized browser. If you wish to test the SDK further, you can request a 30-day free trial license through the <a href="https://www.dynamsoft.com/customer/license/trialLicense?product=mrz&utm_source=samples&package=js" target="_blank">Request a Trial License</a> link. For more information, see [Specify the License](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/user-guide/mrz-scanner.html#specify-the-license) or contact [[email protected]](mailto:[email protected]).
 
 ## Project Structure
 

assets/arrow-down 1.svg renamed to assets/arrow-down.svg

@@ -57,44 +57,74 @@ img {
 }
 
 .home-page .logo {
-  width: 150px;
-  height: 36px;
+  width: 112.5px;
+  height: 27px;
 }
 
 .home-page .description {
-  width: 50%;
+  width: 85%;
   text-align: center;
   background-color: #323234;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem 2rem 2rem;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 .home-page .description .title {
-  font-size: 30px;
+  font-size: 26px;
   font-family: Oswald-Regular;
 }
 
 .home-page .description .content {
   font-family: OpenSans-Regular;
   font-size: 16px;
   line-height: 26px;
-  margin: 16px 0 25px;
+  margin: 1rem 0 1rem;
+}
+
+.home-page .description .desktop-qr-container {
+  font-family: OpenSans-Regular;
+  background-color: #2b2b2b;
+  padding: 2rem;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.home-page .description .desktop-start-btn {
+  font-family: OpenSans-Regular;
+  background-color: #2b2b2b;
+  margin-top: 1rem;
+  padding: 2rem;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 1rem;
+  text-align: start;
+}
+
+.home-page .description .desktop-start-btn .start-btn {
+  display: flex;
+  width: 100%;
 }
 
 .home-page .description .start-btn {
-  width: 180px;
   height: 6vh;
   min-height: 40px;
   max-height: 60px;
   background-color: #fe8e14;
   font-family: Oswald-Regular;
-  font-size: 20px;
+  font-size: 16px;
   margin: 0 auto;
-  display: flex;
+  display: none;
   justify-content: center;
   align-items: center;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  padding: 2rem;
 }
 
 .home-page .description .start-btn:hover {
@@ -185,8 +215,8 @@ img {
 }
 
 .scanner-container .header .music-container {
-  width: 30px;
-  height: 30px;
+  width: 24px;
+  height: 24px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -208,6 +238,20 @@ img {
   display: none;
 }
 
+.scanner-container .header .upload-img-btn {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.scanner-container .header .upload-img-icon {
+  width: 24px;
+  height: 24px;
+}
+
 .result-container {
   position: absolute;
   width: 100%;
@@ -239,6 +283,17 @@ img {
   color: #aaaaaa;
 }
 
+.result-container .scanned-image {
+  max-height: 200px;
+}
+
+.result-container .scanned-image img,
+.result-container .scanned-image canvas {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
 .result-container .parsed-result-area {
   width: 100%;
   height: 84%;
@@ -254,15 +309,38 @@ img {
 
 .result-container .parsed-result-area .parsed-filed .field-name {
   color: #aaaaaa;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 .result-container .parsed-result-area .parsed-filed .field-value {
   word-wrap: break-word;
 }
+
 .result-container .parsed-result-area .code .field-value {
   font-family: monospace;
 }
 
-.result-container .restart-video {
+.result-container .parsed-result-area .parsed-filed .status-icon {
+  display: inline-flex;
+  align-items: center;
+  cursor: help; /* Indicates there's a tooltip */
+}
+
+.result-container .parsed-result-area .parsed-filed .status-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.result-container .parsed-result-area .parsed-filed .status-success {
+  color: #22c55e; /* Green */
+}
+
+.result-container .parsed-result-area .parsed-filed .status-failed {
+  color: #ef4444; /* Red */
+}
+
+.result-container .scan-again {
   width: 100%;
   height: 10%;
   min-height: 60px;
@@ -274,7 +352,7 @@ img {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-.result-container .restart-video .btn-restart-video {
+.result-container .scan-again .btn-scan-again {
   width: 160px;
   height: 60%;
   border: 0;
@@ -450,6 +528,20 @@ img {
   }
 }
 
+/* LIVE CHAT */
+.scanner-container .header .live-chat {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  display: none;
+  align-items: center;
+  cursor: pointer;
+}
+
+.scanner-container .header .live-chat:hover {
+  opacity: 0.8;
+}
+
 @media screen and (max-width: 800px) {
   html,
   body,
@@ -462,8 +554,27 @@ img {
     box-shadow: none;
   }
 
+  .home-page .description .desktop-qr-container {
+    display: none;
+  }
+
+  .home-page .description .desktop-start-btn {
+    display: none;
+  }
+
   .home-page .description .start-btn {
+    display: flex;
     font-size: 20px;
+    padding: 1.5rem;
+  }
+
+  /* LIVE CHAT CSS */
+  .live-chat {
+    display: flex !important;
+  }
+
+  #comm100-float-button-20242b05-3781-4d86-9b7f-fab63ddcdde3-2 {
+    display: none !important;
   }
 }