feat: add barcode reader

public/barcode-reader/barcode-reader.css

@@ -0,0 +1,111 @@
+:host {
+    display: flex;
+    --video-width: 100%;
+    --video-height: 100dvh;
+    --video-background-color: #cccccc;
+    --dialog-background-color: #ffffff;
+    --dialog-backdrop-background-color: #cecece;
+}
+    
+#container {
+    display: none;
+    position: relative;
+    width: var(--video-width);
+    background-color: #000000;
+}
+    
+@media screen and (min-width: 1024px) {
+    #container {
+        min-width: 400px;
+        min-height: 300px;
+    }
+}
+    
+#video-container {
+    position: relative;
+    overflow: hidden;
+    height: var(--video-height);
+    max-height: var(--video-height);
+}
+    
+video {
+    width: 100%;
+    display: block;
+    object-fit: cover;
+    height: 100%;
+}
+    
+canvas {
+    position: absolute;
+    top: 30%;
+    width: 100%;
+    height: 25%;
+}   
+    
+#data-canvas {
+    visibility: hidden;
+}
+    
+#frame {
+    opacity: 1;
+    position: absolute;
+    top: 30%;
+    left: 0;
+    width: 100%;
+    height: 25%;
+    background-color: transparent;
+    transform-origin: center center;
+    transform: scale(0.9);
+    transition: transform .3s ease-out;
+}
+    
+:host([capturing]) #frame {
+    transform: scale(0.5);
+}
+    
+:host([no-frame]) #frame {
+    display: none;
+}
+
+.corner {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    border: 3px solid #ee0b0b;
+    clip-path: polygon(0 48px, 48px 48px, 48px 0, 0 0);
+}
+    
+.top-left {
+    top: 0;
+    left: 0;
+}
+    
+.top-right {
+    top: 0;
+    right: 0;
+    transform: rotate(90deg);
+}
+    
+.bottom-right {
+    bottom: 0;
+    right: 0;
+    transform: rotate(180deg);
+}
+    
+.bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: rotate(-90deg);
+}
+
+.overlay {
+    position: absolute;
+    top: 31%;
+    left: 2%;
+    width: 96%;
+    height: 23%;
+    border-radius: 2%;
+    z-index: 100;
+    box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.6);
+    pointer-events: none;
+}