From c92c94f367c9c58ed8636c4c4ee27299d867f9ac Mon Sep 17 00:00:00 2001
From: psy <psy@darmstadt.ccc.de>
Date: Mon, 8 Apr 2024 19:46:15 +0200
Subject: [PATCH] move style to head, add container div, remove css scaling,
set qr code size depending on window size
---
index.html | 52 +++++++++++++++++++++++++++++-----------------------
1 file changed, 29 insertions(+), 23 deletions(-)
diff --git a/index.html b/index.html
index cceb617..b6e9821 100644
--- a/index.html
+++ b/index.html
@@ -2,29 +2,28 @@
<html>
<head>
<title>QR</title>
- </head>
- <style>
- #qrcode {
- height: 100vh;
- }
+ <style>
+ #text {
+ width: 100%;
+ }
- #qrcode > * {
- padding: 1rem 5%;
- max-width:90%;
- max-height:90%;
- width: 90%;
- height: 90%;
- object-fit: contain;
- }
+ #qrcode > * {
+ padding: 1rem 5%;
+ object-fit: contain;
+ margin: 0 auto;
+ }
- footer {
- position: absolute;
- bottom: 0px;
- }
- </style>
+ footer {
+ position: absolute;
+ bottom: 0px;
+ }
+ </style>
+ </head>
<body>
- <input id="text" name="text" placeholder="QR code content" style="width: 100%;">
- <div id="qrcode"></div>
+ <div class="container">
+ <input id="text" name="text" placeholder="QR code content">
+ <div id="qrcode"></div>
+ </div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/qrcode.min.js"></script>
@@ -32,13 +31,18 @@
<script type="text/javascript">
var qrcode;
var elText;
+ var size = Math.min(window.innerWidth, window.innerHeight) - 100;
function generateQR() {
- url = elText.value;
+ text = elText.value;
if (!qrcode) {
- qrcode = new QRCode(document.getElementById("qrcode"), url);
+ qrcode = new QRCode(document.getElementById("qrcode"), {
+ text: text,
+ width: size,
+ height: size
+ });
} else {
qrcode.clear();
- qrcode.makeCode(url);
+ qrcode.makeCode(text);
}
}
@@ -54,6 +58,8 @@
elText.value = decodeURIComponent(location.hash.substring(1));
generateQR();
+
+ elText.focus();
});
</script>
--
GitLab