move style to head, add container div, remove css scaling, set qr code size...

move style to head, add container div, remove css scaling, set qr code size depending on window size

move style to head, add container div, remove css scaling, set qr code size...
c92c94f3 · psy · 29aef668 · c92c94f3
Commit c92c94f3 authored 1 year ago by psy
--- a/index.html
+++ b/index.html
@@ -2,19 +2,15 @@
 <html>
 	<head>
 		<title>QR</title>
-	</head>
 		<style>
-		#qrcode {
-			height: 100vh;
+			#text {
+				width: 100%;
 			}

 			#qrcode > * {
 				padding: 1rem 5%;
-			max-width:90%;
-			max-height:90%;
-			width: 90%;
-			height: 90%;
 				object-fit: contain;
+				margin: 0 auto;
 			}

 			footer {
@@ -22,9 +18,12 @@
 				bottom: 0px;
 			}
 		</style>
+	</head>
 	<body>
-		<input id="text" name="text" placeholder="QR code content" style="width: 100%;">
+		<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>