Hugging Face's logo

Spaces:
ministerchief
/
qr-generator
Sleeping

App Files Community
qr-generator
File size: 3,307 Bytes
e858903
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// ===============================
// THREE.JS 3D BACKGROUND
// ===============================

const canvas = document.querySelector("#bg");

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
});

renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.z = 30;

// Create particles
const particlesGeometry = new THREE.BufferGeometry();
const particlesCount = 5000;

const posArray = new Float32Array(particlesCount * 3);

for (let i = 0; i < particlesCount * 3; i++) {
    posArray[i] = (Math.random() - 0.5) * 200;
}

particlesGeometry.setAttribute(
    "position",
    new THREE.BufferAttribute(posArray, 3)
);

const particlesMaterial = new THREE.PointsMaterial({
    size: 0.5,
    color: 0x4e73df
});

const particlesMesh = new THREE.Points(
    particlesGeometry,
    particlesMaterial
);

scene.add(particlesMesh);

// Animation loop
function animate() {
    requestAnimationFrame(animate);

    particlesMesh.rotation.y += 0.0007;
    particlesMesh.rotation.x += 0.0003;

    renderer.render(scene, camera);
}

animate();

// Resize
window.addEventListener("resize", () => {

    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

});


// ===============================
// QR PREVIEW CODE
// ===============================

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");

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

const previewImg = document.createElement("img");
previewImg.style.maxWidth = "200px";

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

// Generate preview
function generatePreview() {

    const data = dataInput.value.trim();
    const fillColor = fillColorInput.value;
    const backColor = backColorInput.value;
    const size = sizeSelect.value;

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

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

// Events
dataInput.addEventListener("input", generatePreview);
fillColorInput.addEventListener("input", generatePreview);
backColorInput.addEventListener("input", generatePreview);
sizeSelect.addEventListener("change", generatePreview);

// Form validation
form.addEventListener("submit", function (e) {

    if (dataInput.value.trim() === "") {
        e.preventDefault();
        alert("Please enter Asset ID!");
    }

});