MeanScanner/qrgenerator.html at master · TeamMeanMachine/MeanScanner · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>QR Generator | MeanScanner</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="An app prototype for the hour-tracking project.">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="./manifest.json">
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
      crossorigin="anonymous"
    />
    <link rel="icon" type="image/png" href="./img/logo.png" />

    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body style="padding: 25px;">
    <img id="logo" src="./img/logo.svg" width="50px" alt="" />
    <h1>MeanScanner QR Generator</h1>

    <label>First Name<br /><input class="form-control" type="text" id="first" required/></label
    ><br /><br />
    <label>Last Initial<br /><input class="form-control" type="text" id="last" required/></label
    ><br /><br />
    <button type="button" class="btn btn-danger" onclick="submitNormal();">Generate Normal</button>
    <button type="button" class="btn btn-danger" onclick="submitLogo();">Generate with Logo</button>
    <br /><br />
    <input id="output" disabled />

    <br />
    <hr />
    <br />
    <canvas id="canvas"></canvas>

    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
      crossorigin="anonymous"
    ></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
    <script src="/js/QRCodeLib.js"></script>
    <script defer>
      const submitLogo = () => {
        let qrcode = new QrCodeWithLogo({
          canvas: document.querySelector('#canvas'),
          content: `https://docs.google.com/forms/d/e/1FAIpQLSem6RS-lKZQlT2Ph9lpPOdEll1I7E6ky4dG0mq4o1DZ65WPWQ/formResponse?entry.394065435=${
            document.querySelector('#first').value
          }+${document.querySelector('#last').value}`,
          width: 300,
          logo: {
            src:
              'https://github.com/Aidunlin/MeanScout/blob/ebd252f58e61c8788ebf7188760f81f8266259df/logo512.png?raw=true',
            borderSize: 0.02,
            logoSize: 0.2,
            // borderSize: 0.02,
            // borderRadius: 1000,
            // logoSize: 0.2
          },
        });

        qrcode.toCanvas();

        document.querySelector(
          '#output'
        ).value = `https://docs.google.com/forms/d/e/1FAIpQLSem6RS-lKZQlT2Ph9lpPOdEll1I7E6ky4dG0mq4o1DZ65WPWQ/formResponse?entry.394065435=${
          document.querySelector('#first').value
        }+${document.querySelector('#last').value}`;
      };

      const submitNormal = () => {
        const qr = new QRious({
          element: document.querySelector('#canvas'),
          value: `https://docs.google.com/forms/d/e/1FAIpQLSem6RS-lKZQlT2Ph9lpPOdEll1I7E6ky4dG0mq4o1DZ65WPWQ/formResponse?entry.394065435=${
            document.querySelector('#first').value
          }+${document.querySelector('#last').value}`,
          size: 300,
        });

        document.querySelector(
          '#output'
        ).value = `https://docs.google.com/forms/d/e/1FAIpQLSem6RS-lKZQlT2Ph9lpPOdEll1I7E6ky4dG0mq4o1DZ65WPWQ/formResponse?entry.394065435=${
          document.querySelector('#first').value
        }+${document.querySelector('#last').value}`;
      };
    </script>
  </body>
</html>