From 41b930a1c4b9457bec8f65d60cdefdcc1e6cb23b Mon Sep 17 00:00:00 2001
From: iBNu Maksum <me@ibnux.net>
Date: Wed, 19 Jun 2024 17:05:15 +0700
Subject: [PATCH] ok

---
 index.html | 137 ++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 109 insertions(+), 28 deletions(-)
diff --git a/index.html b/index.html
index b36b5de..4f7a7ba 100644
--- a/index.html
+++ b/index.html
@@ -1,35 +1,116 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-<title>QR LOGIN</title>
-  <style>
-    video{width:100%!important;height:auto!important}#reload{margin-top:5px;margin-bottom:10px;padding:5px;background-color:#0336FF;color:#f3f4f5;border-radius:3px;width:150px;cursor:pointer}a{text-decoration:none;color:#0336FF}.progress{padding:10px;margin-top:5px}#camera{position:relative;width:auto;height:100%}#camera:after,#camera:before,#camera>:first-child:after,#camera>:first-child:before{position:absolute;width:80px;height:80px;border-color:red;border-style:solid;content:' '}#camera:before{top:0;left:0;border-width:5px 0 0 5px}#camera:after{top:0;right:0;border-width:5px 5px 0 0}#camera>:first-child:before{bottom:0;right:0;border-width:0 5px 5px 0}#camera>:first-child:after{bottom:0;left:0;border-width:0 0 5px 5px}#camera-inside{padding:10px;margin-bottom:-5px}#hasil{font-size:20px;font-weight:600px;background-color:#76ff03;color:#202020}
-
-  </style>
-<script type="text/javascript" src="llqrcode.js"></script>
-<script type="text/javascript" src="webqr.js"></script>
+    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>QR LOGIN</title>
+    <style>
+        video {
+            width: 100% !important;
+            height: auto !important
+        }
+
+        #reload {
+            margin-top: 5px;
+            margin-bottom: 10px;
+            padding: 5px;
+            background-color: #0336FF;
+            color: #f3f4f5;
+            border-radius: 3px;
+            width: 150px;
+            cursor: pointer
+        }
+
+        a {
+            text-decoration: none;
+            color: #0336FF
+        }
+
+        .progress {
+            padding: 10px;
+            margin-top: 5px
+        }
+
+        #camera {
+            position: relative;
+            width: auto;
+            height: 100%
+        }
+
+        #camera:after,
+        #camera:before,
+        #camera>:first-child:after,
+        #camera>:first-child:before {
+            position: absolute;
+            width: 80px;
+            height: 80px;
+            border-color: red;
+            border-style: solid;
+            content: ' '
+        }
+
+        #camera:before {
+            top: 0;
+            left: 0;
+            border-width: 5px 0 0 5px
+        }
+
+        #camera:after {
+            top: 0;
+            right: 0;
+            border-width: 5px 5px 0 0
+        }
+
+        #camera>:first-child:before {
+            bottom: 0;
+            right: 0;
+            border-width: 0 5px 5px 0
+        }
+
+        #camera>:first-child:after {
+            bottom: 0;
+            left: 0;
+            border-width: 0 0 5px 5px
+        }
+
+        #camera-inside {
+            padding: 10px;
+            margin-bottom: -5px
+        }
+
+        #hasil {
+            font-size: 20px;
+            font-weight: 600px;
+            background-color: #76ff03;
+            color: #202020
+        }
+    </style>
+    <script type="text/javascript" src="llqrcode.js"></script>
+    <script type="text/javascript" src="webqr.js"></script>
 </head>
+
 <body>
-  <center>
-    <div id="main">
-      <div id="mainbody">
-        <div class="progress">
-          QR Login <span id="nama_hotspot"></span>
-          <div id="hasil"></div>
-        </div>
-        <div id="camera">
-            <div id="camera-inside"></div>
+    <center>
+        <div id="main">
+            <div id="mainbody">
+                <div class="progress">
+                    QR Login <span id="nama_hotspot"></span>
+                    <div id="hasil"></div>
+                </div>
+                <div id="camera">
+                    <div id="camera-inside"></div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-    <br>
-    <div id="reload" onclick="location.reload();">Refresh Camera</div>
-    <p><small>arahkan ke voucher yang ada QR Code</small></p>
-    <br>
-  </center>
-<canvas style="display:none;" id="qr-canvas" width="800" height="600"></canvas>
-<script type="text/javascript">load();</script>
+        <br>
+        <div id="reload" onclick="location.reload();">Refresh Camera</div>
+        <p><small>arahkan ke voucher yang ada QR Code</small></p>
+        <p><small>Point camera to QRCode</small></p>
+        <br>
+    </center>
+    <canvas style="display:none;" id="qr-canvas" width="800" height="600"></canvas>
+    <script type="text/javascript">load();</script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
