<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Tạo Mã QR Code</h1>
<div class="input-section">
<input type="text" id="qrText" placeholder="Nhập nội dung (URL, văn bản,...)">
<button id="generateBtn">Tạo Mã QR</button>
</div>
<div class="qr-output-section">
<div id="qrcode"></div>
<button id="downloadBtn" style="display: none;" disabled>Tải Hình Ảnh QR về</button>
</div>
<p class="instruction">* Nhập nội dung bạn muốn mã hóa vào ô trên và nhấn "Tạo Mã QR".</p>
</div>
<script src="https://unpkg.com/easyqrcodejs@4.4.1/dist/easy.qrcode.min.js"></script>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f7f6;
margin: 0;
}
.container {
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 450px;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 25px;
font-size: 1.8em;
}
.input-section {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
#qrText {
flex-grow: 1;
padding: 10px 15px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 1em;
}
#qrText:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}
#generateBtn {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s, transform 0.1s;
}
#generateBtn:hover {
background-color: #45a049;
}
#generateBtn:active {
transform: scale(0.98);
}
.qr-output-section {
padding: 20px;
border: 1px dashed #ccc;
border-radius: 5px;
margin-top: 20px;
min-height: 150px; /* Đảm bảo có không gian hiển thị */
}
#qrcode {
display: flex;
justify-content: center;
align-items: center;
margin: 15px 0;
}
#qrcode > canvas {
border: 5px solid white; /* Thêm đường viền trắng cho mã QR */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#downloadBtn {
background-color: #008CBA;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
margin-top: 20px;
transition: background-color 0.3s;
width: 100%;
}
#downloadBtn:hover {
background-color: #007bb5;
}
#downloadBtn:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.instruction {
margin-top: 20px;
font-size: 0.9em;
color: #666;
}
// Khai báo biến
const qrText = document.getElementById('qrText');
const generateBtn = document.getElementById('generateBtn');
const downloadBtn = document.getElementById('downloadBtn');
const qrcodeDiv = document.getElementById('qrcode');
let qrCode = null; // Biến để lưu trữ đối tượng QRCode mới
// --- Hàm tạo mã QR ---
function generateQRCode() {
const text = qrText.value.trim();
// 1. Kiểm tra nội dung
if (text === "") {
alert("Vui lòng nhập nội dung để tạo mã QR.");
// Ẩn nút tải xuống và xóa mã QR cũ nếu có
qrcodeDiv.innerHTML = '';
downloadBtn.style.display = 'none';
downloadBtn.disabled = true;
return;
}
// 2. Xóa mã QR cũ trước khi tạo mới (rất quan trọng)
qrcodeDiv.innerHTML = '';
// 3. Khởi tạo đối tượng QRCode mới với EasyQRCodeJS
qrCode = new QRCode(qrcodeDiv, {
text: text,
width: 250, // Kích thước lớn hơn một chút cho chất lượng tốt hơn
height: 250,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
// Cấu hình nâng cao
dotScale: 1, // Kích thước các chấm
quietZone: 15, // Vùng trắng bao quanh
// render: 'canvas' (Mặc định là canvas, tốt cho việc tải xuống)
});
// 4. Hiển thị nút tải xuống và kích hoạt nó
downloadBtn.style.display = 'block';
downloadBtn.disabled = false;
}
// --- Hàm tải hình ảnh QR ---
async function downloadQRCode() {
// Thư viện EasyQRCodeJS có hàm download tích hợp
if (qrCode) {
// Sử dụng phương thức download của thư viện để tải về dưới dạng PNG
qrCode.download({
name: "qrcode_" + Date.now(),
ext: "png"
});
} else {
alert("Không tìm thấy mã QR để tải xuống.");
}
}
// --- Gán sự kiện ---
generateBtn.addEventListener('click', generateQRCode);
downloadBtn.addEventListener('click', downloadQRCode);
// Bắt sự kiện nhấn Enter trong ô nhập liệu
qrText.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
generateQRCode();
}
});
// Khởi tạo ban đầu: Ẩn nút tải xuống
window.onload = function() {
downloadBtn.style.display = 'none';
};