added a mask to aim more easily

clawfire · Jun 27, 2021 · 616c456 · 616c456 · clawfire · Jun 27, 2021
1 parent fa8d136
commit 616c456
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/src/index.html b/src/index.html
@@ -90,6 +90,7 @@
                     <video id="scanner">
                         <p>Your browser is not compatible with our technology.</p>
                     </video>
+                    <div id="mask"></div>
                 </div>
                 <div class="content">
                     <div class="description">

diff --git a/src/index.js b/src/index.js
@@ -160,6 +160,12 @@ window.addEventListener('load', function() {
         const flashlight_btn = document.getElementById('flashlight_btn');
         // we select the video element, which will provide the user feedback
         const video = document.getElementById('scanner');
+        const mask = document.getElementById('mask');
+        const width = Math.max($(video).width(), $(video).height())
+        $(video).width(width)
+        $(video).height(width)
+        $(mask).width(width)
+        $(mask).height(width)
 
         QrScanner.hasCamera().then(hasCamera => {
             if (!hasCamera) {

diff --git a/src/styles/master.scss b/src/styles/master.scss
@@ -3,4 +3,18 @@ section.ui.fixed.menu + section{
 }
 video{
     width: 100%;
+    object-fit: cover;
+    margin-top: 40px;
 }
+
+#mask{
+    position:absolute;
+    top:40px;
+    width:100%;
+    height:100%;
+    background:rgba(117, 117, 117, 0.8) ;
+
+    -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
+    clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
+
+  }