Add QR Code to poll pages

This way, people can easily just use their QR readers to reach the
voting page. The QR is constructed via Google Charts API and the URL is
based on the HOST header of the request.

frontend/html/poll.html

@@ -8,6 +8,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/static/css/main.css">
+    <link rel="stylesheet" href="/static/css/vote.css">
     <script type="text/javascript" src="/static/vendor/js/textfit.js" defer="true"></script>
     <script type="text/javascript">
         const textFitOptions = {
@@ -48,6 +49,7 @@
                     <a href="/{{ POLL_ID }}/r"><button type="button">Results</button></a>
                 </section>
             </form>
+            <aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
         </section>
     </main>
     <footer>

frontend/html/result.html

@@ -37,6 +37,7 @@
                 <a href="/{{ POLL_ID }}"><button type="button" id="submit-button">Vote</button></a>
             </section>
             <aside id="chart"></aside>
+            <aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
         </section>
     </main>
     <footer>

frontend/static/css/result.css

@@ -67,8 +67,19 @@ aside#chart {
     visibility: hidden;
 }
 
+aside#qrcode {
+    position: absolute;
+    top: 210px;
+    right: -210px;
+    width: 200px;
+    height: 200px;
+}
+
 @media screen and (max-width: 750px) {
     aside#chart {
         visibility: hidden !important;
     }
+    aside#qrcode {
+        visibility: hidden !important;
+    }
 }

frontend/static/css/vote.css

@@ -0,0 +1,7 @@
+aside#qrcode {
+    position: absolute;
+    top: 0px;
+    right: -210px;
+    width: 200px;
+    height: 200px;
+}

src/frontend.ts

@@ -143,7 +143,8 @@ export default function init(router: Router): void {
                 "POLL_OPTION_DIVS": pollOptionsDivs,
                 "POLL_VOTES_TOTAL": totalVotes,
                 "BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
-                "POLL_OPTION_VOTES": Buffer.from(JSON.stringify(Object.entries(poll.votes))).toString("base64")
+                "POLL_OPTION_VOTES": Buffer.from(JSON.stringify(Object.entries(poll.votes))).toString("base64"),
+                "QR_CODE": `https://chart.googleapis.com/chart?cht=qr&chs=190x190&chld=L|1&chl=${ encodeURIComponent(`${ req.protocol }://${ req.headers.host }/${ id }`) }`,
             });
         } catch (error) {
             console.log(error);
@@ -180,6 +181,7 @@ export default function init(router: Router): void {
                 "BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
                 "FORM_SUBMISSION_ERROR": xss(req.query.error + ""),
                 "FORM_SUBMISSION_ERROR_SHOWN_CLASS": req.query.error ? "error-visible" : "",
+                "QR_CODE": `https://chart.googleapis.com/chart?cht=qr&chs=190x190&chld=L|1&chl=${ encodeURIComponent(`${ req.protocol }://${ req.headers.host }/${ id }`) }`,
             });
         } catch (error) {
             console.log(error);