TC
/
WebStick


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Generator</title>
	<link rel="icon" type="image/png" href="/favicon.png" />
	<!-- QR Code -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<!-- css -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.2/tocas.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.2/tocas.min.js"></script>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
		
		@media screen and (min-width: 768px) {
			#title{
				padding-top: 15em;
				border-right: 1px solid #dedede;
				padding-right: 5em;
			}
			
			#title .ui.header{
				width: 300px;
			}
			
			#qrgrid{
				padding-left: 5em;
			}
		}

		#qr-code {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			height: 300px; /* Match the QR code height */
			width: 300px; /* Match the QR code width */
		}
    </style>
</head>
<body>
	<div class="ts-app-center">
		<div class="ts-content">
			<div >
				<div class="ts-input is-circular" style="margin-bottom: 1em;">
					<input type="text" id="text-input" placeholder="Enter text for QR code" onkeypress="handleKeyPress(event)">
				</div>
				<button class="ts-button is-fluid" id="generate-btn" onclick="generateQRCode()">Generate QR Code</button>
				<div class="ts-divider has-top-spaced-large has-bottom-spaced-large"></div>
				<div id="qr-code"></div>
			</div>
		</div>
	</div>
    <script>
		function initQrCode(){
			var qrcode = new QRCode(document.getElementById('qr-code'), {
                text: "https://imuslab.com",
                width: 300,
                height: 300
            });
		}
		initQrCode();
        function generateQRCode() {
            var textInput = document.getElementById('text-input').value;
            var qrCodeDiv = document.getElementById('qr-code');

            if (textInput.trim() === "") {
                alert("Please enter text for the QR code.");
                return;
            }

            qrCodeDiv.innerHTML = ""; // Clear previous QR code

            var qrcode = new QRCode(qrCodeDiv, {
                text: textInput,
                width: 300,
                height: 300
            });
			
			$(qrCodeDiv).transition('fade down', function(){
				$(qrCodeDiv).transition('fade down');
			});
        }
		
		 function handleKeyPress(event) {
            // Check if the pressed key is Enter (key code 13)
            if (event.key === 'Enter') {
                generateQRCode();
            }
        }
		
    </script>
</body>
</html>