Этот блок кода в Squarespace не работает ⇐ CSS

[Anonymous]

По сути, моя идея состоит в том, чтобы создать генератор, который генерирует qr-код, изображение и текст за один раз. Проблемы начались только тогда, когда я захотел добавить к нему больше настроек, таких как цвет текста и фона, границы и даже позиционирование. Я не смог получить никакой помощи от ИИ, поэтому, если кто-то заинтересован в помощи, я буду очень признателен. Спасибо.
Вот какой результат, но qr-код не появляется





Custom QR Code Generator





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;
}




Generate Your Custom QR Code



Enter Your Business Link:


Upload Your Business Logo:

File name will appear here after upload.

Add Text (Optional):


Select Text Color:


Select Background Color:


QR Code and Logo Placement:

QR Code on Top, Logo Below
Logo on Top, QR Code Below


QR Code Border:

None
Thin
Medium
Thick


Logo Border:

None
Thin
Medium
Thick


Select Font Family:

Jost
Arial
Verdana


Generate QR Code


Preview on Plastic Stand

















// 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
}
}






Подробнее здесь: https://stackoverflow.com/questions/786 ... oesnt-work