So basically my idea is to make a generator, that generates a qr code, an image and some text all in one go. The problems only started when I wanted to add more customization to it such as, text & background color, borders and even positioning. I couldn't get any help from AI so if anyone is interested in helping it is much appreciated. Thanks.
As shown on the outcome post-generation, the qr doesn't appear and there is barely even space for the text. Any help or answers will be much valued.
Here is the code:
As shown on the outcome post-generation, the qr doesn't appear and there is barely even space for the text. Any help or answers will be much valued.
Here is the code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom QR Code Generator</title>
<!-- Include Bootstrap CSS for styling -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Include Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Jost', sans-serif;
background-color: #f8f9fa;
padding: 20px;
}
.form-container {
max-width: 800px;
margin: 0 auto;
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.preview-container {
margin-top: 30px;
text-align: center;
}
.plastic-stand {
background-color: #f0f0f0;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px; /* Limit size of plastic stand */
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
position: relative; /* For text positioning */
}
.qr-code-preview {
max-width: 200px; /* Limit size of QR code */
max-height: 200px;
display: block;
margin-bottom: 10px;
border: 1px solid #ccc; /* Default border */
}
.logo-preview {
max-width: 150px;
max-height: 150px;
display: block;
margin-top: 10px;
border: 1px solid #ccc; /* Default border */
}
.text-container {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.text-preview {
font-size: 14px;
font-weight: bold;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="form-container">
<h2 class="text-center mb-4">Generate Your Custom QR Code</h2>
<form id="qr-form">
<div class="form-group">
<label for="business-link">Enter Your Business Link:</label>
<input type="url" class="form-control" id="business-link" placeholder="https://example.com" required>
</div>
<div class="form-group">
<label for="logo-upload">Upload Your Business Logo:</label>
<input type="file" class="form-control-file" id="logo-upload" accept=".png, .jpg, .jpeg" required>
<small id="file-name-help" class="form-text text-muted">File name will appear here after upload.</small>
</div>
<div class="form-group">
<label for="text-input">Add Text (Optional):</label>
<input type="text" class="form-control" id="text-input" placeholder="Your text">
</div>
<div class="form-group">
<label for="text-color">Select Text Color:</label>
<input type="color" class="form-control" id="text-color" value="#000000">
</div>
<div class="form-group">
<label for="background-color">Select Background Color:</label>
<input type="color" class="form-control" id="background-color" value="#ffffff">
</div>
<div class="form-group">
<label for="qr-logo-placement">QR Code and Logo Placement:</label>
<select class="form-control" id="qr-logo-placement">
<option value="top">QR Code on Top, Logo Below</option>
<option value="bottom">Logo on Top, QR Code Below</option>
</select>
</div>
<div class="form-group">
<label for="qr-border">QR Code Border:</label>
<select class="form-control" id="qr-border">
<option value="none">None</option>
<option value="thin">Thin</option>
<option value="medium">Medium</option>
<option value="thick">Thick</option>
</select>
</div>
<div class="form-group">
<label for="logo-border">Logo Border:</label>
<select class="form-control" id="logo-border">
<option value="none">None</option>
<option value="thin">Thin</option>
<option value="medium">Medium</option>
<option value="thick">Thick</option>
</select>
</div>
<div class="form-group">
<label for="font-family">Select Font Family:</label>
<select class="form-control" id="font-family">
<option value="Jost, sans-serif">Jost</option>
<option value="Arial, sans-serif">Arial</option>
<option value="Verdana, sans-serif">Verdana</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block mt-4">Generate QR Code</button>
</form>
<div class="preview-container mt-5" id="preview-container" style="display: none;">
<h3 class="text-center mb-3">Preview on Plastic Stand</h3>
<div id="plastic-stand-preview" class="plastic-stand">
<div id="qr-code-container"></div>
<div id="logo-container"></div>
<div id="text-container" class="text-container">
<span id="text-preview" class="text-preview"></span>
</div>
</div>
</div>
</div>
<!-- Include jQuery for easier DOM manipulation -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- Include Bootstrap JS for form validation and styling -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Include QR Code API JavaScript SDK -->
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator-sdk/lib/browser/qrcode.min.js"></script>
<script>
// Handle form submission
$('#qr-form').submit(function(event) {
event.preventDefault();
var businessLink = $('#business-link').val().trim();
var logoFile = $('#logo-upload')[0].files[0];
var qrLogoPlacement = $('#qr-logo-placement').val();
var text = $('#text-input').val().trim();
var textColor = $('#text-color').val();
var backgroundColor = $('#background-color').val();
var qrBorder = $('#qr-border').val();
var logoBorder = $('#logo-border').val();
var fontFamily = $('#font-family').val();
// Validate input
if (businessLink === '' || !isValidURL(businessLink)) {
alert('Please enter a valid business link (URL).');
return;
}
if (!logoFile) {
alert('Please upload a logo file.');
return;
}
// Display uploaded file name
$('#file-name-help').text('Uploaded file: ' + logoFile.name);
// Display preview container
$('#preview-container').show();
// Generate QR code
generateQRCode(businessLink, qrBorder);
// Display logo preview
displayLogoPreview(logoFile, logoBorder);
// Display text preview
displayTextPreview(text, textColor, fontFamily);
// Set background color and border styles
setPlasticStandStyles(backgroundColor, qrLogoPlacement);
});
// Function to generate QR code
function generateQRCode(businessLink, qrBorder) {
var qrCode = new QRCode(document.getElementById('qr-code-container'), {
width: 200,
height: 200,
correctLevel: QRCode.CorrectLevel.H
});
qrCode.makeCode(businessLink);
// Adjust QR code border
var qrImage = document.getElementById('qr-code-container').getElementsByTagName('img')[0];
qrImage.style.border = getBorderStyle(qrBorder);
}
// Function to display logo preview
function displayLogoPreview(logoFile, logoBorder) {
var logoPreview = document.createElement('img');
logoPreview.src = URL.createObjectURL(logoFile);
logoPreview.className = 'logo-preview';
var logoContainer = document.getElementById('logo-container');
// Clear previous content
logoContainer.innerHTML = '';
logoContainer.appendChild(logoPreview);
// Resize logo if necessary
resizeImage(logoPreview, 150);
// Adjust logo border
logoPreview.style.border = getBorderStyle(logoBorder);
}
// Function to display text preview
function displayTextPreview(text, textColor, fontFamily) {
var textContainer = document.getElementById('text-container');
var textPreview = document.getElementById('text-preview');
if (text) {
textContainer.style.display = 'block';
textPreview.textContent = text;
textPreview.style.color = textColor;
textPreview.style.fontFamily = fontFamily;
} else {
textContainer.style.display = 'none';
}
}
// Function to set plastic stand styles
function setPlasticStandStyles(backgroundColor, qrLogoPlacement) {
var plasticStand = document.getElementById('plastic-stand-preview');
plasticStand.style.backgroundColor = backgroundColor;
// Adjust placement based on selection
if (qrLogoPlacement === 'bottom') {
plasticStand.style.flexDirection = 'column-reverse';
} else {
plasticStand.style.flexDirection = 'column';
}
}
// Function to validate URL
function isValidURL(url) {
var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
return !!pattern.test(url);
}
// Function to resize image proportionally
function resizeImage(image, maxSize) {
var ratio = 1;
if (image.width > maxSize || image.height > maxSize) {
if (image.width > image.height) {
ratio = maxSize / image.width;
} else {
ratio = maxSize / image.height;
}
image.width = image.width * ratio;
image.height = image.height * ratio;
}
}
// Function to get border style based on selection
function getBorderStyle(borderOption) {
switch (borderOption) {
case 'thin':
return '1px solid #000'; // Thin border
case 'medium':
return '2px solid #000'; // Medium border
case 'thick':
return '4px solid #000'; // Thick border
default:
return 'none'; // No border
}
}
</script>
</body>
</html>