Hugging Face's logo

Spaces:
ministerchief
/
Record_Generator
Sleeping

App Files Community
Record_Generator
File size: 2,757 Bytes
3f44b33
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// ===============================
// Select Form Elements
// ===============================
const dataInput = document.querySelector("input[name='data']");
const fillColorInput = document.querySelector("input[name='fill_color']");
const backColorInput = document.querySelector("input[name='back_color']");
const sizeSelect = document.querySelector("select[name='size']");
const logoInput = document.querySelector("input[name='logo']");
const form = document.querySelector("form");

// ===============================
// Create QR Preview Container
// ===============================
const previewContainer = document.createElement("div");
previewContainer.style.marginTop = "20px";
previewContainer.style.textAlign = "center";

const previewTitle = document.createElement("h3");
previewTitle.innerText = "Live QR Preview";
previewTitle.style.marginBottom = "10px";

const previewImg = document.createElement("img");
previewImg.style.maxWidth = "200px";
previewImg.style.border = "1px solid #ddd";
previewImg.style.padding = "10px";
previewImg.style.borderRadius = "10px";

previewContainer.appendChild(previewTitle);
previewContainer.appendChild(previewImg);
form.appendChild(previewContainer);

// ===============================
// Generate Live QR Preview
// ===============================
function generatePreview() {
    const data = dataInput.value.trim();
    const fillColor = fillColorInput.value;
    const backColor = backColorInput.value;
    const size = parseInt(sizeSelect.value);

    if (data === "") {
        previewImg.src = "";
        return;
    }

    const qrSize = size * 25;

    previewImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=${qrSize}x${qrSize}&data=${encodeURIComponent(data)}&color=${fillColor.replace('#', '')}&bgcolor=${backColor.replace('#', '')}`;
}

// ===============================
// Event Listeners for Live Update
// ===============================
dataInput.addEventListener("input", generatePreview);
fillColorInput.addEventListener("input", generatePreview);
backColorInput.addEventListener("input", generatePreview);
sizeSelect.addEventListener("change", generatePreview);

// ===============================
// Logo Upload Handling
// ===============================
// (Logo will be embedded in backend only)
logoInput.addEventListener("change", function () {
    generatePreview(); // Keep QR preview intact
});

// ===============================
// Simple Form Validation
// ===============================
form.addEventListener("submit", function (e) {
    if (dataInput.value.trim() === "") {
        e.preventDefault();
        alert("Please enter Asset ID or text!");
        dataInput.focus();
    }
});