How do I fix this issue in sqaurespace code block?

Joined
Jul 2, 2024
Messages
1
Reaction score
0
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.
Screenshot 2024-07-02 122340.png


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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,818
Messages
2,569,727
Members
45,664
Latest member
Phil79581

Latest Threads

Top