diff --git a/index.html b/index.html
index cceb61769a109b65b3f8009c83e8fe5b3a268ded..b6e9821e594d732ae5a28ee2fa55e4b976c2071e 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>