---
layout: default
title: QR Code Generator
---
<style>
.page-wrap { width: min(980px, 92%); margin: 0 auto; }
.page-title { margin: 0; font-size: clamp(1.5rem,2.7vw,2.2rem); }
.container { width: 100%; max-width: 760px; background: var(--card); border-radius: 16px; padding: 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border: 1px solid var(--border); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.auth-overlay { position: fixed; inset: 0; background: rgba(16, 28, 42, 0.78); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1000; }
.auth-card { width: min(460px, 100%); background: #fff; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 16px 38px rgba(0,0,0,.2); padding: 22px; }
.page-locked { filter: blur(2px); pointer-events: none; user-select: none; }
</style>
<div id="appShell" class="page-locked">
  <header>
    <div class="page-wrap">
      <h1 class="page-title">SwimTayka English Channel Swimmer Portal</h1>
      <nav aria-label="Main menu">
        <a href="index.html">Home</a>
        <a href="booking.html">Dover Training Boat Booking</a>
        <a class="active" href="qr_code_logo_generator.html">QR Generator</a>
        <a href="https://www.cognitoforms.com/SwimTayka1" target="_blank" rel="noopener noreferrer">Portal</a>
      </nav>
    </div>
  </header>

  <main class="page-wrap">
  <section class="container">
    <h1>QR Code Generator</h1>
    <p>Enter a website, message, email address or any text. You can also upload a logo to place in the centre of the QR code.</p>

    <label for="qrText">Text or URL</label>
    <input id="qrText" type="text" value="https://swimtayka.org" placeholder="Enter text or website URL" />

    <div class="grid">
      <div>
        <label for="qrSize">QR size in pixels</label>
        <input id="qrSize" type="number" value="600" min="200" max="2000" step="50" />
      </div>

      <div>
        <label for="logoSize">Logo size %</label>
        <input id="logoSize" type="number" value="22" min="5" max="35" step="1" />
      </div>
    </div>

    <div class="grid">
      <div>
        <label for="darkColour">QR colour</label>
        <input id="darkColour" type="color" value="#000000" />
      </div>

      <div>
        <label for="lightColour">Background colour</label>
        <input id="lightColour" type="color" value="#ffffff" />
      </div>
    </div>

    <label for="logoUpload">Logo image</label>
    <input id="logoUpload" type="file" accept="image/*" />

    <div class="buttons">
      <button onclick="generateQRCode()">Generate QR Code</button>
      <button class="secondary" onclick="downloadQRCode()">Download PNG</button>
      <button class="secondary" onclick="clearLogo()">Remove Logo</button>
    </div>

    <div class="preview-wrap">
      <canvas id="qrCanvas"></canvas>
    </div>

    <p class="note">Tip: keep the logo fairly small. If the logo covers too much of the code, some phones may struggle to scan it.</p>
  </section>
  </main>
  </div>
<script>
    function loadQRCodeLibrary() {
      return new Promise((resolve, reject) => {
        const qrApi = window.QRCode || window.qrcode;
        if (qrApi && typeof qrApi.toCanvas === 'function') {
          resolve(qrApi);
          return;
        }

        const cdnUrls = [
          'https://cdnjs.cloudflare.com/ajax/libs/qrcode/1.5.3/qrcode.min.js',
          'https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js',
          'https://unpkg.com/qrcode@1.5.3/build/qrcode.min.js'
        ];

        let index = 0;

        function tryNextCdn() {
          if (index >= cdnUrls.length) {
            reject(new Error('QRCode library failed to load from all CDN sources'));
            return;
          }

          const script = document.createElement('script');
          script.src = cdnUrls[index];
          script.async = true;

          script.onload = () => {
            const loadedApi = window.QRCode || window.qrcode;
            if (loadedApi && typeof loadedApi.toCanvas === 'function') {
              resolve(loadedApi);
            } else {
              index += 1;
              tryNextCdn();
            }
          };

          script.onerror = () => {
            index += 1;
            tryNextCdn();
          };

          document.head.appendChild(script);
        }

        tryNextCdn();
      });
    }

    let qrLibraryReady = false;
    let qrApi = null;
    let useApiFallback = false;

    const qrCanvas = document.getElementById('qrCanvas');
    const qrText = document.getElementById('qrText');
    const qrSize = document.getElementById('qrSize');
    const logoSize = document.getElementById('logoSize');
    const logoUpload = document.getElementById('logoUpload');
    const darkColour = document.getElementById('darkColour');
    const lightColour = document.getElementById('lightColour');


    window.APP_CONFIG = window.APP_CONFIG || {
      SUPABASE_URL: '',
      SUPABASE_ANON_KEY: ''
    };

    const authOverlay = document.getElementById('authOverlay');
    const appShell = document.getElementById('appShell');
    const authEmail = document.getElementById('authEmail');
    const authCode = document.getElementById('authCode');
    const sendCodeBtn = document.getElementById('sendCodeBtn');
    const verifyCodeBtn = document.getElementById('verifyCodeBtn');
    const authStatus = document.getElementById('authStatus');

    const { SUPABASE_URL, SUPABASE_ANON_KEY } = window.APP_CONFIG;
    const supabaseClient = SUPABASE_URL && SUPABASE_ANON_KEY && window.supabase
      ? window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
      : null;

    function setAuthStatus(message, isError) {
      authStatus.textContent = message;
      authStatus.style.color = isError ? '#b00020' : '#0a4fb4';
    }

    function unlockPage() {
      authOverlay.style.display = 'none';
      appShell.classList.remove('page-locked');
    }

    async function checkAllowedUser(email) {
      const normalizedEmail = (email || '').trim().toLowerCase();

      if (!normalizedEmail) return false;

      const { data, error } = await supabaseClient
        .from('allowed_users')
        .select('email, active')
        .eq('email', normalizedEmail)
        .eq('active', true)
        .maybeSingle();

      if (error) {
        throw new Error('Unable to verify access rights. Please try again.');
      }

      return Boolean(data);
    }

    async function requireAuth() {
      if (!supabaseClient) {
        setAuthStatus('Login is not configured yet. Add Supabase URL and anon key in window.APP_CONFIG.', true);
        return false;
      }

      const { data } = await supabaseClient.auth.getSession();
      if (!data.session) return false;

      const sessionEmail = (data.session.user?.email || '').toLowerCase();

      try {
        const isAllowed = await checkAllowedUser(sessionEmail);
        if (!isAllowed) {
          await supabaseClient.auth.signOut();
          setAuthStatus('Your email is not approved for QR generator access. Contact SwimTayka admin.', true);
          return false;
        }
      } catch (error) {
        setAuthStatus(error.message || 'Unable to verify access rights.', true);
        return false;
      }

      unlockPage();
      return true;
    }

    sendCodeBtn.addEventListener('click', async function () {
      const email = authEmail.value.trim().toLowerCase();
      if (!email) {
        setAuthStatus('Please enter your email address.', true);
        return;
      }

      try {
        setAuthStatus('Sending your login code...');
        const { error } = await supabaseClient.auth.signInWithOtp({
          email,
          options: { shouldCreateUser: true }
        });

        if (error) throw error;
        setAuthStatus('A 6-digit code has been sent to your email address.');
      } catch (error) {
        setAuthStatus(error.message || 'Unable to send code. Please try again.', true);
      }
    });

    verifyCodeBtn.addEventListener('click', async function () {
      const email = authEmail.value.trim().toLowerCase();
      const token = authCode.value.trim();
      if (!email || token.length !== 6) {
        setAuthStatus('Enter your email and the 6-digit code.', true);
        return;
      }

      try {
        setAuthStatus('Verifying code...');
        const { error } = await supabaseClient.auth.verifyOtp({
          email,
          token,
          type: 'email'
        });

        if (error) throw error;

        const isAllowed = await checkAllowedUser(email);
        if (!isAllowed) {
          await supabaseClient.auth.signOut();
          setAuthStatus('Your email is not approved for QR generator access. Contact SwimTayka admin.', true);
          return;
        }

        setAuthStatus('Login successful. Access granted.');
        unlockPage();
      } catch (error) {
        setAuthStatus(error.message || 'Code verification failed. Please try again.', true);
      }
    });

    let logoImage = null;


    const QR_TEXT_COOKIE = 'swimtayka_qr_text';
    const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 365;

    function saveQrTextToCookie(value) {
      document.cookie = `${QR_TEXT_COOKIE}=${encodeURIComponent(value)}; max-age=${COOKIE_MAX_AGE_SECONDS}; path=/; SameSite=Lax`;
    }

    function getCookieValue(name) {
      const cookieName = `${name}=`;
      const decodedCookie = decodeURIComponent(document.cookie);
      const cookieParts = decodedCookie.split(';');

      for (let i = 0; i < cookieParts.length; i += 1) {
        const part = cookieParts[i].trim();
        if (part.indexOf(cookieName) === 0) {
          return part.substring(cookieName.length);
        }
      }

      return '';
    }

    function loadSavedQrText() {
      const savedText = getCookieValue(QR_TEXT_COOKIE);
      if (savedText) {
        qrText.value = savedText;
      }
    }

    const DEFAULT_LOGO_URL = 'https://portal.swimtayka.org/images/ST_RGB_BLUE.jpg';

    function setDefaultLogo() {
      const image = new Image();
      image.crossOrigin = 'anonymous';
      image.onload = function () {
        logoImage = image;
        if (authOverlay.style.display === 'none') {
          generateQRCode();
        }
      };
      image.onerror = function () {
        console.warn('Default logo failed to load from', DEFAULT_LOGO_URL);
      };
      image.src = DEFAULT_LOGO_URL;
    }

    logoUpload.addEventListener('change', function (event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = function (e) {
        logoImage = new Image();
        logoImage.onload = generateQRCode;
        logoImage.src = e.target.result;
      };
      reader.readAsDataURL(file);
    });

    qrText.addEventListener('input', function () {
      saveQrTextToCookie(qrText.value.trim());
    });

    [qrText, qrSize, logoSize, darkColour, lightColour].forEach(input => {
      input.addEventListener('input', generateQRCode);
    });

    async function generateQRCode() {
      if (!qrLibraryReady) {
        try {
          qrApi = await loadQRCodeLibrary();
          qrLibraryReady = true;
        } catch (error) {
          console.info('Using API fallback for QR generation:', error.message);
          useApiFallback = true;
        }
      }
      const text = qrText.value.trim();
      const size = parseInt(qrSize.value, 10) || 600;
      const logoPercent = Math.min(Math.max(parseInt(logoSize.value, 10) || 22, 5), 35);

      if (!text) {
        alert('Please enter some text or a URL.');
        return;
      }

      saveQrTextToCookie(text);

      qrCanvas.width = size;
      qrCanvas.height = size;

      try {
        if (useApiFallback) {
          await drawQRCodeViaApi(text, size);
        } else {
          await qrApi.toCanvas(qrCanvas, text, {
            width: size,
            margin: 2,
            errorCorrectionLevel: 'H',
            color: {
              dark: darkColour.value,
              light: lightColour.value
            }
          });
        }
      } catch (error) {
        console.error(error.message);
        alert('QR code generation failed. Please check your internet connection and try again.');
        return;
      }

      if (logoImage) {
        drawLogo(size, logoPercent);
      }
    }


    async function drawQRCodeViaApi(text, size) {
      const darkHex = darkColour.value.replace('#', '');
      const lightHex = lightColour.value.replace('#', '');
      const encodedText = encodeURIComponent(text);

      const providers = [
        `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&ecc=H&margin=2&color=${darkHex}&bgcolor=${lightHex}&data=${encodedText}`,
        `https://quickchart.io/qr?size=${size}&ecLevel=H&margin=2&dark=${darkHex}&light=${lightHex}&text=${encodedText}`
      ];

      let lastError = null;

      for (const source of providers) {
        try {
          await drawImageToCanvas(source, size);
          return;
        } catch (error) {
          lastError = error;
        }
      }

      throw lastError || new Error('All fallback QR image providers failed to load');
    }

    function drawImageToCanvas(source, size) {
      return new Promise((resolve, reject) => {
        const image = new Image();
        image.crossOrigin = 'anonymous';

        image.onload = () => {
          const ctx = qrCanvas.getContext('2d');
          ctx.clearRect(0, 0, size, size);
          ctx.drawImage(image, 0, 0, size, size);
          resolve();
        };

        image.onerror = () => reject(new Error(`Failed to load fallback QR image from ${source}`));
        image.src = source;
      });
    }

    function drawLogo(size, logoPercent) {
      const ctx = qrCanvas.getContext('2d');
      const logoBoxSize = size * (logoPercent / 100);
      const padding = logoBoxSize * 0.15;
      const totalBoxSize = logoBoxSize + padding * 2;
      const x = (size - totalBoxSize) / 2;
      const y = (size - totalBoxSize) / 2;

      ctx.save();
      roundedRect(ctx, x, y, totalBoxSize, totalBoxSize, totalBoxSize * 0.12);
      ctx.fillStyle = lightColour.value;
      ctx.fill();
      ctx.restore();

      const imageRatio = logoImage.width / logoImage.height;
      let drawWidth = logoBoxSize;
      let drawHeight = logoBoxSize;

      if (imageRatio > 1) {
        drawHeight = logoBoxSize / imageRatio;
      } else {
        drawWidth = logoBoxSize * imageRatio;
      }

      const drawX = (size - drawWidth) / 2;
      const drawY = (size - drawHeight) / 2;

      ctx.drawImage(logoImage, drawX, drawY, drawWidth, drawHeight);
    }

    function roundedRect(ctx, x, y, width, height, radius) {
      ctx.beginPath();
      ctx.moveTo(x + radius, y);
      ctx.lineTo(x + width - radius, y);
      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
      ctx.lineTo(x + width, y + height - radius);
      ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
      ctx.lineTo(x + radius, y + height);
      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
      ctx.lineTo(x, y + radius);
      ctx.quadraticCurveTo(x, y, x + radius, y);
      ctx.closePath();
    }

    function downloadQRCode() {
      const link = document.createElement('a');
      link.download = 'qr-code-with-logo.png';
      link.href = qrCanvas.toDataURL('image/png');
      link.click();
    }

    function clearLogo() {
      logoUpload.value = '';
      setDefaultLogo();
    }

    loadSavedQrText();
    setDefaultLogo();
    requireAuth().then(function (isAuthed) {
      if (isAuthed) {
        generateQRCode();
      }
    });
  </script>