feat: Allow vertical scan and add camera resolution options (#17)

* feat(VINScanner): allow vertical scan on barcode mode (#11)

* feat(VINScanner): add resolution options (#10)

* feat(VINScanner): add resolution select

* fix: camera list width

* feat: notification on camera switch

* fix: judge resolution

* fix: button switches

---------

Co-authored-by: felixindrawan <indrawan.felix123@gmail.com>

---------

Co-authored-by: felixindrawan <indrawan.felix123@gmail.com>

Author: Felix-Dynamsoft

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 dist
 build
+CaptureImageModal
 
 # local env files
 .env.local

VINScanner/assets/phone-rotate.svg

@@ -148,13 +148,12 @@ img {
 }
 
 .scanner-container .header .camera-list {
-  width: 165px;
   position: absolute;
   top: 46px;
   left: 0;
   background-color: #000000;
   border-right: #aaaaaa;
-  z-index: 1;
+  z-index: 3;
   display: none;
 }
 
@@ -226,32 +225,6 @@ img {
   z-index: 1;
 }
 
-.scanner-container .camera-view-container .scan-mode-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  bottom: -55%;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  cursor: pointer;
-  gap: 0.5rem;
-  font-size: 24px;
-  font-family: OpenSans-Regular;
-  color: #ffffff;
-  user-select: none;
-}
-
-.scanner-container .camera-view-container .scan-mode-container:hover {
-  opacity: 0.8;
-}
-
-.scanner-container .camera-view-container .scan-mode-container .settings-btn {
-  width: 24px;
-  height: 24px;
-}
-
 .result-container {
   position: absolute;
   width: 100%;
@@ -266,7 +239,7 @@ img {
 }
 
 .result-container .result-btn-container {
-  padding: 15px 15px 7.5px 30px;
+  padding: 15px 15px 0 30px;
   display: flex;
   gap: 2rem;
 }
@@ -300,6 +273,10 @@ img {
   cursor: pointer;
 }
 
+.result-container #result-image-container {
+  display: flex;
+  justify-content: center;
+}
 .result-container .parsed-result-area {
   width: 100%;
   padding: 15px 15px 0 30px;
@@ -332,6 +309,7 @@ img {
   align-items: center;
   margin-top: auto;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  background-color: #2b2b2b;
 }
 
 .result-container .restart-video .btn-restart-video {
@@ -344,59 +322,62 @@ img {
   font-family: "Oswald-Regular";
 }
 
-.settings-modal {
+.scan-mode-container {
   display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.4);
-  z-index: 2;
   justify-content: center;
   align-items: center;
+  position: fixed;
+  bottom: 15%;
+  left: 5%;
+  right: 5%;
+  z-index: 2;
 }
 
-.settings-modal-content {
-  background-color: #323234;
-  padding: 1rem 2rem 2rem;
-  color: #ffffff;
-  font-family: Oswald-Light;
-  font-size: 20px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.settings-modal-top {
+.scan-mode-container .scan-mode-content {
+  position: relative;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  margin-bottom: 0.5rem;
-}
-
-.settings-option-title {
-  font-family: Oswald-Regular;
-  margin: 0;
-  margin-bottom: 0.5rem;
-  font-weight: normal;
+  background-color: rgb(34, 34, 34);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 0.5rem;
+  width: max-content;
+  opacity: 0.8;
 }
 
-.settings-option-btn {
-  background-color: rgb(34, 34, 34);
+.scan-option-btn {
+  background-color: transparent;
   padding: 0.5rem;
   font-family: OpenSans-Regular;
   color: white;
+  width: 5rem;
 }
 
 .selected {
   background-color: #fe8e14;
+  color: white;
+  border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-.close-settings-btn {
-  display: flex;
+.scan-orientation-btn {
+  position: absolute;
+  top: -90%;
+  right: 0;
+  padding: 0.5rem;
+  display: none;
   justify-content: center;
   align-items: center;
-  background: transparent;
+  border-radius: 8px;
+  opacity: 0.8;
+  background-color: rgb(34, 34, 34);
+}
+
+.scan-orientation-btn .scan-orientation-icon {
+  width: 24px;
+  height: 24px;
+  filter: invert(0.4);
 }
 
 #notification {
@@ -431,7 +412,25 @@ img {
 }
 .banner-success {
   background-color: rgb(124, 252, 0, 0.4);
-  border: 1px solid #7cfc00;
+  border: 1px solid #00fc15;
+}
+
+.get-demo-code {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ffae38;
+  margin-left: auto;
+  margin-right: 1rem;
+  font-family: Oswald-Regular;
+  text-decoration: none;
+}
+
+.dbr-download-code-icon {
+  width: 16px;
+  height: 16px;
+  stroke: #ffae38;
+  margin-left: 5px;
 }
 
 @keyframes dce-rotate {
@@ -443,15 +442,6 @@ img {
   }
 }
 
-@keyframes dce-scanlight {
-  from {
-    top: 0;
-  }
-  to {
-    top: 97%;
-  }
-}
-
 @media screen and (max-width: 800px) {
   html,
   body {
@@ -469,27 +459,12 @@ img {
   .home-page .description .start-btn {
     font-size: 20px;
   }
-
-  .scanner-container .camera-view-container .scan-mode-container .settings-btn {
-    width: 16px;
-    height: 16px;
-  }
-
-  .settings-modal-content {
-    width: 100%;
-    height: 100%;
-  }
 }
 @media screen and (max-width: 1300px) {
   .scanner-container .camera-view-container .scan-help-msg {
     font-size: 12px;
     top: -35%;
   }
-
-  .scanner-container .camera-view-container .scan-mode-container {
-    bottom: -45%;
-    font-size: 12px;
-  }
 }
 @media screen and (max-width: 800px) and (orientation: landscape) {
   .result-container .parsed-result-area .parsed-filed {