From 23ed2468e64b102f3d012f937650a220369ab30f Mon Sep 17 00:00:00 2001
From: vibe <vibe@hackerspace.pl>
Date: Fri, 3 Nov 2023 22:03:57 +0100
Subject: [PATCH 1/2] Add viewport meta tag for better mobile viewing

---
 templates/index.html | 267 ++++++++++++++++++++++---------------------
 1 file changed, 139 insertions(+), 128 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index df9df77..c622067 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,142 +1,153 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <title>Hackerspace Printing System For Printing</title>
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
-        <style type="text/css">
-html {
-  position: relative;
-  min-height: 100%;
-}
-body {
-  /* Margin bottom by footer height */
-  margin-bottom: 60px;
-}
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  /* Set the fixed height of the footer here */
-  height: 60px;
-  background-color: #f5f5f5;
-}
-        </style>
-    </head>
-    <body>
-        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                        <h4 class="modal-title">Are you sure you want to print this?</h4>
-                    </div>
-                    <div class="modal-body">
-                        <p>These labels cost money. Don't be an asshole, and only print stuff that is really needed.</p>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
-                        <button type="button" id="btnconfirm" class="btn btn-primary">Yes please</button>
-                    </div>    
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Hackerspace Printing System For Printing</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+    <style type="text/css">
+        html {
+            position: relative;
+            min-height: 100%;
+        }
+
+        body {
+            /* Margin bottom by footer height */
+            margin-bottom: 60px;
+        }
+
+        .footer {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            /* Set the fixed height of the footer here */
+            height: 60px;
+            background-color: #f5f5f5;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title">Are you sure you want to print this?</h4>
+                </div>
+                <div class="modal-body">
+                    <p>These labels cost money. Don't be an asshole, and only print stuff that is really needed.</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Nevermind</button>
+                    <button type="button" id="btnconfirm" class="btn btn-primary">Yes please</button>
                 </div>
             </div>
         </div>
-        <div class="container">
-            <div class="page-header">
-                <h1>Hackerspace Printing System For Printing Labels</h1>
-                <h4>System status: <span class="label label-default" id="systemstatus">unknown</span></h4>
+    </div>
+    <div class="container">
+        <div class="page-header">
+            <h1>Hackerspace Printing System For Printing Labels</h1>
+            <h4>System status: <span class="label label-default" id="systemstatus">unknown</span></h4>
+        </div>
+        <h3>Box 'o Stuff Label <small>For SAMLA boxes with common equipment</small></h3>
+        <div class="row">
+            <div class="col-md-2">
+                <h4>Preview</h4>
+                <img id="preview" src="/stuff/preview/70/?text=dupa"
+                    style="border-width: 1px; border-style: solid; height: 300px;" /><br />
             </div>
-            <h3>Box 'o Stuff Label <small>For SAMLA boxes with common equipment</small></h3>
-            <div class="row">
-                <div class="col-md-2">
-                    <h4>Preview</h4>
-                    <img id="preview" src="/stuff/preview/70/?text=dupa" style="border-width: 1px; border-style: solid; height: 300px;"/><br/>
+            <div class="col-md-3">
+                <h4>Settings</h4>
+                <div class="form-group">
+                    <label for="fontsize">Font Size</label>
+                    <input id="fontsize" value="60" style="width: 100px;" class="form-control" type="number" />
                 </div>
-                <div class="col-md-3">
-                    <h4>Settings</h4>
-                    <div class="form-group">
-                        <label for="fontsize">Font Size</label>
-                        <input id="fontsize" value="60" style="width: 100px;" class="form-control" type="number" />
-                    </div>
-                    <div class="form-group">
-                        <label for="labeltext">Label Text</label>
-                        <textarea id="labeltext" style="width: 200px;" class="form-control">Sample Text</textarea>
-                    </div>
-                    <div class="form-group">
-                        <label for="parsehtml">
-                            <input id="parsehtml" value="1" type="checkbox" />
-                            Parse HTML
-                        </label>
-                    </div>
-                    <button type="button" id="btnpreview" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Preview</button>
-                    <button type="button" id="btnprint" class="btn btn-warning btn-lg"><span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print!</button>
+                <div class="form-group">
+                    <label for="labeltext">Label Text</label>
+                    <textarea id="labeltext" style="width: 200px;" class="form-control">Sample Text</textarea>
                 </div>
-                <div class="col-md-7">
-                    <h4>API</h4>
-                    <pre>$ # To get a label preview
+                <div class="form-group">
+                    <label for="parsehtml">
+                        <input id="parsehtml" value="1" type="checkbox" />
+                        Parse HTML
+                    </label>
+                </div>
+                <button type="button" id="btnpreview" class="btn btn-default btn-lg"><span
+                        class="glyphicon glyphicon-picture" aria-hidden="true"></span> Preview</button>
+                <button type="button" id="btnprint" class="btn btn-warning btn-lg"><span
+                        class="glyphicon glyphicon-print" aria-hidden="true"></span> Print!</button>
+            </div>
+            <div class="col-md-7">
+                <h4>API</h4>
+                <pre>$ # To get a label preview
 $ curl http://label.waw.hackerspace.pl/stuff/preview/60/?text=foobar&amp;html=0 | feh -
 $ # To print the label
 $ curl -d "" http://label.waw.hackerspace.pl/stuff/print/60/?text=foobar&amp;html=0</pre>
-                </div>
             </div>
         </div>
-        <footer class="footer">
-            <div class="container">
-                <p class="text-muted" style="margin: 20px 0;">Cobbled together by <a href="https://q3k.org/">q3k</a>. Sauce on <a href="https://code.hackerspace.pl/q3k/labelmaker">code.hackerspace.pl/q3k/labelmaker</a></p>
-            </div>
-        </footer>
-        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.0/jquery.bootstrap-growl.min.js"></script>
-        <script>
-$(document).ready(function() {
-    var generatePreview = function() {
-        var html = $("#parsehtml").is(':checked') ? 1 : 0;
-        var fontsize = parseInt($("#fontsize").val());
-        var text = encodeURIComponent($("#labeltext").val());
-        $("#preview").attr("src", "/stuff/preview/" + fontsize + "/?html=" + html + "&text=" + text);
-    };
-    $("#btnpreview").click(generatePreview);
-    var asked = false;
-    var print = function() {
-        var html = $("#parsehtml").is(':checked') ? 1 : 0;
-        var fontsize = parseInt($("#fontsize").val());
-        var text = encodeURIComponent($("#labeltext").val());
-        $.post("/stuff/print/" + fontsize + "/?html=" + html + "&text=" + text, function(data) {
-            if (data == "ok") {
-                $.bootstrapGrowl('Printed succesfully!', {'type': 'success'});
-            } else {
-                $.bootstrapGrowl('An error ocurred: ' + data, {'type': 'warning'});
-            }
+    </div>
+    <footer class="footer">
+        <div class="container">
+            <p class="text-muted" style="margin: 20px 0;">Cobbled together by <a href="https://q3k.org/">q3k</a>. Sauce
+                on <a href="https://code.hackerspace.pl/q3k/labelmaker">code.hackerspace.pl/q3k/labelmaker</a></p>
+        </div>
+    </footer>
+    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.0/jquery.bootstrap-growl.min.js"></script>
+    <script>
+        $(document).ready(function () {
+            var generatePreview = function () {
+                var html = $("#parsehtml").is(':checked') ? 1 : 0;
+                var fontsize = parseInt($("#fontsize").val());
+                var text = encodeURIComponent($("#labeltext").val());
+                $("#preview").attr("src", "/stuff/preview/" + fontsize + "/?html=" + html + "&text=" + text);
+            };
+            $("#btnpreview").click(generatePreview);
+            var asked = false;
+            var print = function () {
+                var html = $("#parsehtml").is(':checked') ? 1 : 0;
+                var fontsize = parseInt($("#fontsize").val());
+                var text = encodeURIComponent($("#labeltext").val());
+                $.post("/stuff/print/" + fontsize + "/?html=" + html + "&text=" + text, function (data) {
+                    if (data == "ok") {
+                        $.bootstrapGrowl('Printed succesfully!', { 'type': 'success' });
+                    } else {
+                        $.bootstrapGrowl('An error ocurred: ' + data, { 'type': 'warning' });
+                    }
+                });
+            };
+            $("#btnprint").click(function () {
+                if (!asked) {
+                    $("#myModal").modal('show');
+                } else {
+                    print();
+                }
+            });
+            $("#btnconfirm").click(function () {
+                asked = true;
+                $("#myModal").modal('hide');
+                print();
+            });
+            generatePreview();
+            var updateStatus = function () {
+                $.getJSON("/health", function (data) {
+                    if (data.ok) {
+                        $("#systemstatus").attr("class", "label label-success");
+                        $("#systemstatus").html(data.details);
+                    } else {
+                        $("#systemstatus").attr("class", "label label-danger");
+                        $("#systemstatus").html(data.details);
+                    }
+                });
+            };
+            updateStatus();
+            setInterval(updateStatus, 1000);
         });
-    };
-    $("#btnprint").click(function() {
-        if (!asked) {
-            $("#myModal").modal('show');
-        } else {
-            print();
-        }
-    });
-    $("#btnconfirm").click(function() {
-        asked = true;
-        $("#myModal").modal('hide');
-        print();
-    });
-    generatePreview();
-    var updateStatus = function() {
-        $.getJSON("/health", function(data) {
-            if (data.ok) {
-                $("#systemstatus").attr("class", "label label-success");
-                $("#systemstatus").html(data.details);
-            } else {
-                $("#systemstatus").attr("class", "label label-danger");
-                $("#systemstatus").html(data.details);
-            }
-        });
-    };
-    updateStatus();
-    setInterval(updateStatus, 1000);
-});
-        </script>
-    </body>
-</html>
+    </script>
+</body>
+
+</html>
\ No newline at end of file

From 8f46c1b6d584a1bf31daf13c507766fc43f5489a Mon Sep 17 00:00:00 2001
From: vibe <vibe@hackerspace.pl>
Date: Fri, 3 Nov 2023 22:09:56 +0100
Subject: [PATCH 2/2] Add lang en to html tag for a11y

---
 templates/index.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index c622067..09c63aa 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
     <meta charset="utf-8">
@@ -56,8 +56,7 @@
         <div class="row">
             <div class="col-md-2">
                 <h4>Preview</h4>
-                <img id="preview" src="/stuff/preview/70/?text=dupa"
-                    style="border-width: 1px; border-style: solid; height: 300px;" /><br />
+                <img id="preview" src="/stuff/preview/70/?text=dupa" alt="Label preview" /><br />
             </div>
             <div class="col-md-3">
                 <h4>Settings</h4>
