diff --git a/src/main/resources/static/css/qrstyle.css b/src/main/resources/static/css/qrstyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..3889336f056126ea01d0f5611a8f30bc411a47c1
--- /dev/null
+++ b/src/main/resources/static/css/qrstyle.css
@@ -0,0 +1,63 @@
+/*style sheet for QR code - R Nute*/
+body {
+ display: flex;
+ justify-content: center;
+ margin: 0;
+ padding: 0;
+ height: 100vh;
+ box-sizing: border-box;
+ text-align: center;
+ background: rgb(84 33 128 / 66%);
+}
+.container {
+ width: 100%;
+ max-width: 500px;
+ margin: 5px;
+}
+.container h1 {
+ color: rgb(84 33 128);
+}
+.section {
+ background-color: rgb(84 33 128);
+ padding: 50px 30px;
+ border: 2px solid #b2b2b2;
+ border-radius: 0.5em;
+ box-shadow: 0 20px 25px rgba(0, 0, 0, 30);
+}
+#qr-code-reader {
+ padding: 20px !important;
+ border: 2px solid #b2b2b2 !important;
+ border-radius: 10px;
+}
+#qr-code-reader img[alt="Information icon"] {
+ display: none;
+}
+#qr-code-reader img[alt="QR Code Scan"] {
+ width: 100px !important;
+ height: 100px !important;
+}
+button {
+ padding: 15px 25px;
+ border: 2px solid #b2b2b2;
+ outline: none;
+ border-radius: 0.5em;
+ color: grey;
+ font-size: 25px;
+ cursor: default;
+ margin-top: 20px;
+ margin-bottom: 15px;
+ background-color: rgb(84 33 128);
+ transition: 0.5s background-color;
+}
+button:hover {
+ background-color: rgb(84 33 128);
+}
+#html-qrcode-scan-type-change {
+ text-decoration: none !important;
+ color: #1d9bf0;
+}
+stickers {
+ width: 100% !important;
+ border: 2px solid #b2b2b2 !important;
+ border-radius: 0.5em;
+}
diff --git a/src/main/resources/static/qr-scanner.html b/src/main/resources/static/qr-scanner.html
new file mode 100644
index 0000000000000000000000000000000000000000..85416f328cdee0b0dfd8b7cc3aa51187a959b06c
--- /dev/null
+++ b/src/main/resources/static/qr-scanner.html
@@ -0,0 +1,23 @@
+<!--setup html page for QR codes - R Nute-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewpoint" content="width-device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="qrstyle.css">
+ <title>QR Code</title>
+ <script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
+ <script src="scripts/qr-script.js" class="domReady" type="text/javascript"></script>
+</head>
+
+<body>
+ <div class="container">
+ <h1>Scan location QR code</h1>
+ <div class="section">
+ <div id="qr-code-reader">
+ </div>
+ </div>
+ </div>
+
+</body>
+</html>
diff --git a/src/main/resources/static/scripts/qr-script.js b/src/main/resources/static/scripts/qr-script.js
new file mode 100644
index 0000000000000000000000000000000000000000..5e30f4861648a31cbeb36f67d610cf16a92bd003
--- /dev/null
+++ b/src/main/resources/static/scripts/qr-script.js
@@ -0,0 +1,25 @@
+//qr-script file - R Nute
+import {Html5QrcodeScanner} from "html5-qrcode";
+import {Html5Qrcode} from "html5-qrcode";
+function domReady(fn){
+ if (
+ document.readyState === "complete" ||
+ document.readyState === "interactive"
+ ){
+ setTimeout(fn, 1000);
+ } else {
+ document.addEventListener("DOMContentLoaded", fn);
+ }
+}
+domReady(function (){
+ //if QR code found
+ function onQRSuccess(decodeText, decodeResult){
+ alert("You have collected: " + decodeText, decodeResult);
+ }
+let htmlscanner = new Html5QrcodeScanner(
+ "qr-code-reader",
+ { fps: 10, qrbos: 250}
+)
+ htmlscanner.render(onQRSuccess);
+});
+