<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QR Code Dashboard</title>
<style>
body { font-family: Arial, sans-serif; background: #202020; color: white; text-align: center; }
.container { width: 80%; margin: auto; padding: 20px; }
select, input, button { margin: 10px; padding: 10px; font-size: 16px; }
#qrcode { margin-top: 20px; }
</style>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
</head>
<body>
<div class="container">
<h1>QR Code Generator Dashboard</h1>
<label>Select QR Type:</label>
<select id="qrType" onchange="updateFields()">
<option value="url">URL</option>
<option value="text">Text</option>
<option value="email">Email</option>
<option value="whatsapp">Phone/WhatsApp</option>
</select><br>
<div id="inputFields">
<label id="mainLabel">Enter URL:</label><br>
<input type="text" id="mainInput" placeholder="https://example.com"><br>
<div id="msgBox" style="display:none;">
<label>Message:</label><br>
<input type="text" id="msgInput" placeholder="Hello World">
</div>
</div>
<button onclick="generateQR()">Generate QR</button>
<div id="qrcode"></div>
</div>
<script>
function updateFields() {
const type = document.getElementById("qrType").value;
const mainLabel = document.getElementById("mainLabel");
const msgBox = document.getElementById("msgBox");
if (type === "url") {
mainLabel.textContent = "Enter URL:";
msgBox.style.display = "none";
} else if (type === "text") {
mainLabel.textContent = "Enter Text:";
msgBox.style.display = "none";
} else if (type === "email") {
mainLabel.textContent = "Enter Email:";
msgBox.style.display = "none";
} else if (type === "whatsapp") {
mainLabel.textContent = "Enter Phone (Intl format):";
msgBox.style.display = "block";
}
}
function generateQR() {
const type = document.getElementById("qrType").value;
let data = document.getElementById("mainInput").value.trim();
if (type === "whatsapp") {
const msg = document.getElementById("msgInput").value.trim();
if (!data || !msg) {
alert("Please enter phone number and message.");
return;
}
data = `https://wa.me/${data}?text=${encodeURIComponent(msg)}`;
}
document.getElementById("qrcode").innerHTML = "";
new QRCode(document.getElementById("qrcode"), {
text: data,
width: 250,
height: 250,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}
</script>
</body>
</html>