QR code Generator
:root {
--primary-color: #0066cc;
--secondary-color: #0052a3;
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #17a2b8;
--light-color: #f8f9fa;
--dark-color: #343a40;
--border-radius: 8px;
--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: white;
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
h1 {
color: var(--primary-color);
margin-bottom: 1.5rem;
text-align: center;
font-size: 2.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
}
h1::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: var(--primary-color);
margin: 10px auto;
border-radius: 2px;
}
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--dark-color);
font-size: 1.1rem;
}
input {
width: 100%;
padding: 0.75rem;
border: 2px solid #ddd;
border-radius: var(--border-radius);
font-size: 1rem;
margin-bottom: 1rem;
transition: var(--transition);
}
input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
}
.button-container {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
}
.qr-button {
flex: 1;
position: relative;
padding: 0.75rem 1.5rem;
border: none;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
overflow: hidden;
color: #fff;
background: linear-gradient(45deg,
rgba(0,0,0,0.1) 25%, transparent 25%,
transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1)),
linear-gradient(45deg,
rgba(0,0,0,0.1) 25%, transparent 25%,
transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1));
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
animation: qrPattern 2s linear infinite;
background-color: var(--primary-color);
border-radius: var(--border-radius);
}
@keyframes qrPattern {
0% { background-position: 0 0, 2px 2px; }
100% { background-position: 4px 4px, 6px 6px; }
}
.qr-button:hover {
animation-duration: 1s;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.qr-button:active {
transform: translateY(0);
}
.qr-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
animation: none;
}
.qr-button span {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.qr-button::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 3px solid currentColor;
top: 5px;
left: 5px;
opacity: 0.3;
}
.qr-button::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 3px solid currentColor;
bottom: 5px;
right: 5px;
opacity: 0.3;
}
.qr-button.download-btn {
background-color: var(--success-color);
}
.qr-button.download-btn:disabled {
background-color: #cccccc;
}
.qr-container {
margin-top: 2rem;
text-align: center;
}
.qr-wrapper {
display: inline-block;
padding: 1.5rem;
border: 2px solid var(--primary-color);
border-radius: var(--border-radius);
background: white;
position: relative;
margin-top: 1rem;
box-shadow: var(--box-shadow);
transition: var(--transition);
}
.qr-wrapper:hover {
transform: scale(1.02);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.qr-wrapper::before {
content: 'QR CODE';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 0 15px;
color: var(--primary-color);
font-weight: bold;
font-size: 0.9rem;
letter-spacing: 2px;
}
.error {
color: var(--danger-color);
margin-top: 0.5rem;
display: none;
font-size: 0.9rem;
padding: 0.5rem;
border-radius: var(--border-radius);
background-color: rgba(220, 53, 69, 0.1);
}
.title {
color: var(--dark-color);
margin-top: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
}
.loading {
display: none;
color: var(--info-color);
margin-top: 0.5rem;
font-style: italic;
}
.loading::after {
content: '...';
animation: dots 1.5s infinite;
}
@keyframes dots {
0%, 20% { content: '.'; }
40% { content: '..'; }
60%, 100% { content: '...'; }
}
.toast {
position: fixed;
bottom: 2rem;
right: 2rem;
padding: 1rem 2rem;
background: var(--success-color);
color: white;
border-radius: var(--border-radius);
opacity: 0;
transition: var(--transition);
transform: translateY(100%);
z-index: 1000;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 600px) {
.button-container {
flex-direction: column;
}
.container {
padding: 1rem;
}
h1 {
font-size: 2rem;
}
}
Enter URL:
Please enter a valid URL
Fetching page title
Generate QR Code
Download QR Code
QR Code downloaded successfully!
let pageTitle = '';
async function fetchPageTitle(url) {
const loading = document.getElementById('loading');
const titleDiv = document.getElementById('pageTitle');
loading.style.display = 'block';
titleDiv.textContent = '';
try {
const response = await fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(url)}`);
const data = await response.json();
const html = data.contents;
const doc = new DOMParser().parseFromString(html, 'text/html');
pageTitle = doc.title || new URL(url).hostname;
titleDiv.textContent = `Page Title: ${pageTitle}`;
} catch (error) {
pageTitle = new URL(url).hostname;
titleDiv.textContent = `Page Title: ${pageTitle}`;
} finally {
loading.style.display = 'none';
}
}
function generateQR() {
const url = document.getElementById('url').value;
const error = document.getElementById('error');
const qrcodeDiv = document.getElementById('qrcode');
const downloadBtn = document.getElementById('downloadBtn');
qrcodeDiv.innerHTML = '';
const wrapper = qrcodeDiv.querySelector('.qr-wrapper');
downloadBtn.disabled = true;
try {
new URL(url);
error.style.display = 'none';
fetchPageTitle(url);
new QRCode(wrapper, {
text: url,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
downloadBtn.disabled = false;
} catch (e) {
error.style.display = 'block';
}
}
function downloadQR() {
const canvas = document.querySelector('#qrcode canvas');
if (!canvas) return;
const url = document.getElementById('url').value;
const filename = `qr-${pageTitle || new URL(url).hostname}.png`;
const link = document.createElement('a');
link.download = filename;
link.href = canvas.toDataURL('image/png');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
const toast = document.getElementById('toast');
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}