<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CD Case Generator</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
<h2>Customize Your CD Case</h2>
<!-- QR Code Input -->
<label>Enter URL for QR Code:</label>
<input type="text" id="qrText" placeholder="Enter URL">
<!-- Barcode Input -->
<label>Enter Barcode Info:</label>
<input type="text" id="barcodeText" placeholder="Enter Barcode Data">
<!-- Record Label Input -->
<label>Enter Record Label Name:</label>
<input type="text" id="recordLabel" placeholder="Enter Label Name">
<button onclick="generateCDCase()">Generate CD Case</button>
<div id="cdCase">
<div id="qrCode"></div>
<div id="barcode"></div>
<div id="recordLabelDisplay"></div>
</div>
<script>
function generateCDCase() {
let qrText = document.getElementById("qrText").value;
let barcodeText = document.getElementById("barcodeText").value;
let recordLabel = document.getElementById("recordLabel").value;
document.getElementById("qrCode").innerHTML = "";
new QRCode(document.getElementById("qrCode"), qrText);
document.getElementById("barcode").innerText = "Barcode: " + barcodeText;
document.getElementById("recordLabelDisplay").innerText = "Record Label: " + recordLabel;
}
</script>
</body>
</html>