diff --git a/index.html b/index.html new file mode 100644 index 0000000..bcfaaec --- /dev/null +++ b/index.html @@ -0,0 +1,243 @@ + + + + + + FREE QR Code Generator - BKPK VIDEO + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+
+
+
+

100% FREE QR Code Generator

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+

Generated QR Code

+
+ +
+
+
+ +
+

Frequently Asked Questions

+
+
+ +
+

A QR Code Generator is a tool that creates QR (Quick Response) codes, which are two-dimensional barcodes that can store data such as URLs, text, contact information, and more. This generator allows you to customize the color, size, and format of your QR codes.

+
+
+
+ +
+

To use the QR Code Generator, enter the text or URL you want to encode in the provided input box, select the desired color and size, and click "Generate QR Code." The generated QR code will be displayed on the screen, and you can save it in different formats.

+
+
+
+ +
+

Yes, you can customize the color of the QR code using our tool. Simply select your preferred color using the color picker provided in the "Choose QR Code Color" section.

+
+
+
+ +
+

Our QR Code Generator allows you to generate QR codes in various sizes, ranging from 1000x1000 pixels to 16000x16000 pixels. Select the desired size from the dropdown menu before generating your QR code.

+
+
+
+ +
+

You can save the generated QR code in three formats: JPG, PNG, and WebP. Each format offers different benefits, such as transparency for PNG and smaller file sizes for WebP.

+
+
+
+ +
+

After generating the QR code, click on the respective button (JPG, PNG, or WebP) under the "Save as" section. The QR code will be saved in your chosen format.

+
+
+
+ +
+

Yes, our QR Code Generator is completely free to use. You can create and download as many QR codes as you need without any cost.

+
+
+
+ +
+

No, you do not need to register or create an account to use our QR Code Generator. It is available for everyone to use without any registration.

+
+
+
+ +
+

Yes, you can use the QR codes generated by our tool for both personal and commercial purposes without any restrictions.

+
+
+
+ +
+

No, there is no limit to the number of QR codes you can generate using our tool. You can create as many QR codes as you need.

+
+
+
+
+ + + + + + + + + + + + diff --git a/logo.svg b/logo.svg new file mode 100644 index 0000000..486915b --- /dev/null +++ b/logo.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..9cb88e9 --- /dev/null +++ b/scripts.js @@ -0,0 +1,132 @@ +$(document).ready(function() { + const beepSound = new Audio('https://www.bkpkvideo.com/wp-content/uploads/2024/06/beep.wav'); // Add your beep sound URL + + // Initialize Pickr with custom styles +const pickr = Pickr.create({ + el: '#qrColor', + theme: 'classic', // You can keep the classic theme + default: '#7c3aed', + components: { + preview: true, + opacity: true, + hue: true, + interaction: { + hex: true, + rgba: true, + hsla: true, + hsva: true, + cmyk: true, + input: true, + save: true + } + } +}); + +pickr.on('save', (color) => { + const hexColor = color.toHEXA().toString(); + localStorage.setItem('qrColor', hexColor); + pickr.hide(); +}); + +// Load user preferences +if (localStorage.getItem('qrColor')) { + pickr.setColor(localStorage.getItem('qrColor')); +} + +// QR code generation +$('#qrForm').on('submit', function(event) { + event.preventDefault(); + let qrText = $('#qrText').val(); + let qrColor = pickr.getColor().toHEXA().toString(); + let qrSize = parseInt($('#qrSize').val()); + + if (qrText) { + $('#qrCode').empty(); + + let qrCode = new QRCode(document.getElementById("qrCode"), { + text: qrText, + width: qrSize, + height: qrSize, + colorDark: qrColor, + colorLight: "rgba(0,0,0,0)", // Ensure transparency for PNG + correctLevel: QRCode.CorrectLevel.H + }); + + // Add animation and border + $('#qrCode canvas').css('border', `5px solid ${qrColor}`); + $('#qrCode').addClass('qr-code-animate'); + $('#saveButtonWrapper').fadeIn(); + + setTimeout(() => { + let qrCanvas = $('#qrCode canvas')[0]; + let qrDataUrl = qrCanvas.toDataURL("image/png", 1.0); // Ensuring HD quality + $('#downloadLink').attr('href', qrDataUrl); + }, 500); + + // Play beep sound on successful QR code generation + beepSound.play(); + } + }); + + // Download QR code in various formats + function downloadQRCode(format) { + let qrCanvas = $('#qrCode canvas')[0]; + if (!qrCanvas) { + alert('Please generate a QR code first.'); + return; + } + + if (format === 'png') { + qrCanvas.toBlob(function(blob) { + saveAs(blob, 'qrcode.png'); + }, 'image/png'); + } else { + let extraSpace = 100; + let canvasWithExtraSpace = document.createElement('canvas'); + canvasWithExtraSpace.width = qrCanvas.width + extraSpace * 2; + canvasWithExtraSpace.height = qrCanvas.height + extraSpace * 2; + let context = canvasWithExtraSpace.getContext('2d'); + context.fillStyle = '#ffffff'; + context.fillRect(0, 0, canvasWithExtraSpace.width, canvasWithExtraSpace.height); + context.drawImage(qrCanvas, extraSpace, extraSpace); + + let mimeType; + switch (format) { + case 'jpg': + mimeType = 'image/jpeg'; + break; + case 'webp': + mimeType = 'image/webp'; + break; + default: + alert('Unsupported format'); + return; + } + + canvasWithExtraSpace.toBlob(function(blob) { + saveAs(blob, `qrcode.${format}`); + }, mimeType); + } + } + + $('#downloadJPG').on('click', function() { + downloadQRCode('jpg'); + }); + + $('#downloadPNG').on('click', function() { + downloadQRCode('png'); + }); + + $('#downloadWebP').on('click', function() { + downloadQRCode('webp'); + }); + + function showSnackbar() { + let snackbar = document.getElementById("snackbar"); + snackbar.className = "show"; + setTimeout(function() { + snackbar.className = snackbar.className.replace("show", ""); + }, 3000); + } +}); + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..387dbaa --- /dev/null +++ b/styles.css @@ -0,0 +1,251 @@ +/* General Styles */ +body { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + background-color: #f3f4f6; + color: #333; +} + +/* Header */ +header { + background-color: #7c3aed; + color: white; + padding: 10px 0; +} + +header .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} + +header .logo { + display: flex; + align-items: center; +} + +header .logo img { + height: 50px; + margin-right: 15px; +} + +header nav { + display: flex; + flex-wrap: wrap; +} + +header nav ul { + display: flex; + list-style: none; + flex-wrap: wrap; +} + +header nav ul li { + position: relative; +} + +header nav ul li a { + color: white; + padding: 10px 20px; + display: block; + text-decoration: none; +} + +header nav ul li a:hover { + background-color: #7c3aed; +} + +header nav ul li ul { + display: none; + position: absolute; + top: 100%; + left: 0; + background-color: #7c3aed; + list-style: none; + padding: 0; + margin: 0; + border-radius: 0 0 5px 5px; + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); +} + +header nav ul li:hover ul { + display: block; +} + +header nav ul li ul li a { + padding: 10px 20px; +} + +header nav ul li ul li a:hover { + background-color: #1c2a8e; +} + +/* Main Container */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 1rem; +} + +.bg-white { + background-color: #fff; +} + +/* QR Code Generator */ +#qrForm { + border: 1px solid #e2e8f0; + border-radius: 0.5rem; + padding: 1rem; + background-color: #fff; +} + +#qrForm .form-group { + margin-bottom: 1rem; +} + +#qrForm label { + display: block; + margin-bottom: 0.5rem; + font-weight: bold; +} + +#qrForm textarea, #qrForm input, #qrForm select { + width: 100%; + padding: 0.5rem; + border: 1px solid #e2e8f0; + border-radius: 0.25rem; +} + +#qrCode { + display: flex; + justify-content: center; + align-items: center; + margin-top: 1rem; + max-width: 100%; + overflow: hidden; +} + +#qrCode canvas { + width: 100%; + max-width: 300px; /* Limit the maximum width */ + height: auto; + border: 5px solid transparent; + box-sizing: border-box; +} + +#saveButtonWrapper { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 1rem; + flex-wrap: wrap; +} + +.save-as-buttons { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + margin-top: 10px; +} + +.save-as-buttons button { + width: 120px; +} + +.animated-dropdown select { + display: block; + width: 100%; + padding: 8px; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + transition: all 0.3s ease; +} + +.animated-dropdown select:hover { + transform: translateY(-2px); + box-shadow: 0 4px 10px rgba(0,0,0,0.2); +} + +@media (max-width: 768px) { + #qrCode canvas { + max-width: 100%; + height: auto; + } +} + + +/* Footer */ +footer { + background-color: #7456f1; + color: #fff; + text-align: center; + padding: 1rem 0; +} + +footer p { + margin: 0; +} + +@media (max-width: 768px) { + header .container { + flex-direction: column; + align-items: flex-start; + } + + header nav ul { + flex-direction: column; + width: 100%; + } + + header nav ul li { + width: 100%; + } + + header nav ul li a { + text-align: center; + } + + #qrCode canvas { + width: 100%; + max-width: 100%; + height: auto; + } +} + +/* Custom styles for Pickr */ +.pcr-app { + border-radius: 12px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); +} + +.pcr-button { + border-radius: 50%; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +.pcr-button:hover { + transform: scale(1.1); +} + +.pcr-interaction .pcr-type { + margin-right: 10px; +} + +.pcr-interaction .pcr-last { + display: none; +} + +.pcr-app .pcr-save { + background-color: #7c3aed; + border-radius: 8px; + color: white; + padding: 10px; + transition: background-color 0.3s ease; +} + +.pcr-app .pcr-save:hover { + background-color: #5b1faa; +}