Skip to content

Commit 6d9c7da

Browse files
HarishDevLabHarishDevLab
authored
index.html
1 parent 1af1e28 commit 6d9c7da

1 file changed

Lines changed: 190 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>QR Code Generator</title>
7+
<script src="https://cdn.jsdelivr.net/npm/qr-code-styling/lib/qr-code-styling.min.js"></script>
8+
<style>
9+
/* Improved CSS with better responsive design */
10+
body {
11+
font-family: Arial, sans-serif;
12+
text-align: center;
13+
margin: 20px;
14+
background-color: #f0f4f8;
15+
}
16+
.container {
17+
max-width: 600px;
18+
margin: 0 auto;
19+
padding: 20px;
20+
background-color: white;
21+
border-radius: 12px;
22+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23+
}
24+
input {
25+
width: 90%;
26+
max-width: 400px;
27+
padding: 12px;
28+
margin: 15px 0;
29+
font-size: 16px;
30+
border: 2px solid #2196F3;
31+
border-radius: 8px;
32+
transition: border-color 0.3s ease;
33+
}
34+
input:focus {
35+
outline: none;
36+
border-color: #006400;
37+
}
38+
button {
39+
padding: 12px 24px;
40+
font-size: 16px;
41+
cursor: pointer;
42+
background-color: #2196F3;
43+
color: white;
44+
border: none;
45+
border-radius: 8px;
46+
transition: all 0.3s ease;
47+
margin: 10px;
48+
}
49+
button:hover {
50+
background-color: #006400;
51+
transform: translateY(-2px);
52+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
53+
}
54+
button:active {
55+
transform: translateY(0);
56+
box-shadow: none;
57+
}
58+
#qrcode {
59+
margin: 20px auto;
60+
max-width: 300px;
61+
}
62+
#successMessage {
63+
color: #2ecc71;
64+
font-size: 16px;
65+
margin: 15px 0;
66+
display: none;
67+
}
68+
.loader {
69+
display: none;
70+
margin: 20px auto;
71+
border: 4px solid #f3f3f3;
72+
border-top: 4px solid #2196F3;
73+
border-radius: 50%;
74+
width: 30px;
75+
height: 30px;
76+
animation: spin 1s linear infinite;
77+
}
78+
@keyframes spin {
79+
0% { transform: rotate(0deg); }
80+
100% { transform: rotate(360deg); }
81+
}
82+
</style>
83+
</head>
84+
<body>
85+
<div class="container">
86+
<h2>QR Code Generator</h2>
87+
<input type="url" id="link" placeholder="https://example.com" required>
88+
<button onclick="generateQR()">Generate QR Code</button>
89+
<div class="loader" id="loader"></div>
90+
<p id="successMessage">QR Code Generated Successfully!</p>
91+
<div id="qrcode"></div>
92+
<button id="exportButton" onclick="exportQR()">Export as PNG</button>
93+
</div>
94+
95+
<script>
96+
let qrCode;
97+
98+
async function generateQR() {
99+
const linkInput = document.getElementById("link");
100+
const qrContainer = document.getElementById("qrcode");
101+
const successMessage = document.getElementById("successMessage");
102+
const exportButton = document.getElementById("exportButton");
103+
const loader = document.getElementById("loader");
104+
105+
// Validate URL
106+
try {
107+
new URL(linkInput.value);
108+
} catch {
109+
alert("Please enter a valid URL");
110+
return;
111+
}
112+
113+
// Show loading indicator
114+
loader.style.display = "block";
115+
qrContainer.innerHTML = "";
116+
successMessage.style.display = "none";
117+
exportButton.style.display = "none";
118+
119+
try {
120+
qrCode = new QRCodeStyling({
121+
width: 300,
122+
height: 300,
123+
type: "canvas",
124+
data: linkInput.value,
125+
dotsOptions: {
126+
color: "#2c3e50",
127+
type: "rounded"
128+
},
129+
backgroundOptions: {
130+
color: "#ffffff"
131+
},
132+
cornersSquareOptions: {
133+
color: "#2196F3",
134+
type: "extra-rounded"
135+
},
136+
cornersDotOptions: {
137+
color: "#2196F3",
138+
type: "dot"
139+
},
140+
imageOptions: {
141+
crossOrigin: "anonymous",
142+
margin: 8
143+
},
144+
qrOptions: {
145+
errorCorrectionLevel: "H"
146+
}
147+
});
148+
149+
await qrCode.append(qrContainer);
150+
successMessage.style.display = "block";
151+
exportButton.style.display = "inline-block";
152+
} catch (error) {
153+
console.error("QR Generation Error:", error);
154+
alert("Error generating QR code. Please try again.");
155+
} finally {
156+
loader.style.display = "none";
157+
}
158+
}
159+
160+
async function exportQR() {
161+
if (!qrCode) {
162+
alert("Please generate a QR code first");
163+
return;
164+
}
165+
166+
try {
167+
const blob = await qrCode.getRawData("png");
168+
if (blob) {
169+
const url = URL.createObjectURL(blob);
170+
const link = document.createElement("a");
171+
link.href = url;
172+
link.download = `qr-code-${Date.now()}.png`; // Fixed download filename
173+
document.body.appendChild(link);
174+
link.click();
175+
document.body.removeChild(link);
176+
URL.revokeObjectURL(url);
177+
}
178+
} catch (error) {
179+
console.error("Export Error:", error);
180+
alert("Error exporting QR code. Please try again.");
181+
}
182+
}
183+
184+
// Add enter key support
185+
document.getElementById("link").addEventListener("keypress", (e) => {
186+
if (e.key === "Enter") generateQR();
187+
});
188+
</script>
189+
</body>
190+
</html>

0 commit comments

Comments
 (0)