QR Code Menu Generator

`); } } function downloadSVG(fileName, restaurantName, customText) { const canvas = document.getElementById('qrCanvas'); const qrSize = canvas.width; const padding = 40; const nameHeight = restaurantName ? 40 : 0; const customHeight = customText ? 30 : 0; const totalHeight = qrSize + (padding * 2) + nameHeight + customHeight; const totalWidth = qrSize + (padding * 2); // Get QR code data URL const qrDataUrl = canvas.toDataURL('image/png'); // Create SVG content let yOffset = padding; let svgContent = ` '; // Download SVG const blob = new Blob([svgContent], { type: 'image/svg+xml' }); const link = document.createElement('a'); link.download = fileName; link.href = URL.createObjectURL(blob); document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(link.href); } // Add some interactive animations document.querySelectorAll('.feature-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-8px) scale(1.02)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; }); }); // Add form validation document.getElementById('menuUrl').addEventListener('input', function() { const url = this.value; const isValid = /^https?:\/\/.+\..+/.test(url); if (url && !isValid) { this.style.borderColor = '#e53e3e'; } else { this.style.borderColor = '#e2e8f0'; } }); // Prevent zoom on focus for iOS document.querySelectorAll('input, select, textarea').forEach(element => { element.addEventListener('focus', function() { if (this.style.fontSize !== '16px') { this.style.fontSize = '16px'; } }); }); // Enhanced touch feedback const touchElements = document.querySelectorAll('.generate-btn, .reset-btn, .download-btn, .cta-btn'); touchElements.forEach(element => { element.addEventListener('touchstart', function() { this.style.transform = 'scale(0.98)'; }); element.addEventListener('touchend', function() { this.style.transform = ''; }); element.addEventListener('touchcancel', function() { this.style.transform = ''; }); });