gh-christianlouis-leagueledger/app/templates/scan_qr.html

{% extends "base.html" %}
{% block content %}
<div class="max-w-lg mx-auto space-y-6">
  <div class="bg-white rounded-lg shadow-md p-6 text-center">
    <h1 class="text-2xl font-garamond font-bold text-irish-green mb-3">Scan QR Code</h1>
    <p class="text-gray-600 mb-6">Position the QR code from your quiz master in the camera view</p>
    
    <!-- QR Scanner Container -->
    <div class="relative bg-black rounded-lg overflow-hidden" style="height: 300px;">
      <div id="qr-reader" class="w-full h-full"></div>
      <div id="scanner-overlay" class="absolute inset-0 flex items-center justify-center">
        <div class="text-white">
          <i class="fas fa-camera text-4xl mb-2 opacity-70"></i>
          <p>Camera loading...</p>
        </div>
      </div>
    </div>
    
    <div class="mt-4 text-sm text-gray-500">
      Make sure the QR code is well-lit and clearly visible
    </div>
    
    <!-- Manual Entry Fallback -->
    <div class="mt-8 border-t pt-6">
      <h3 class="font-bold mb-3">Or enter code manually</h3>
      <form action="/redeem/manual" method="post" class="flex">
        <input type="text" name="code" placeholder="Enter code here" required
            class="flex-grow border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green">
        <button type="submit" class="bg-irish-green text-white px-4 py-2 rounded-r-md">Submit</button>
      </form>
    </div>
  </div>
  
  <!-- How It Works -->
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-xl font-semibold font-garamond text-irish-green mb-4">How It Works</h3>
    <div class="space-y-4">
      <div class="flex items-start">
        <div class="bg-cream-white p-2 rounded-full mr-3 mt-1">
          <span class="w-6 h-6 flex items-center justify-center text-irish-green font-bold">1</span>
        </div>
        <div>
          <p class="font-medium">Scan QR Code</p>
          <p class="text-gray-600 text-sm">Scan the QR code provided by your quiz master.</p>
        </div>
      </div>
      
      <div class="flex items-start">
        <div class="bg-cream-white p-2 rounded-full mr-3 mt-1">
          <span class="w-6 h-6 flex items-center justify-center text-irish-green font-bold">2</span>
        </div>
        <div>
          <p class="font-medium">Select Your Team</p>
          <p class="text-gray-600 text-sm">Choose which team should receive these points.</p>
        </div>
      </div>
      
      <div class="flex items-start">
        <div class="bg-cream-white p-2 rounded-full mr-3 mt-1">
          <span class="w-6 h-6 flex items-center justify-center text-irish-green font-bold">3</span>
        </div>
        <div>
          <p class="font-medium">Climb the Leaderboard</p>
          <p class="text-gray-600 text-sm">Watch your team rise in the rankings!</p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Back Link -->
  <div class="text-center">
    <a href="/dashboard" class="text-irish-green hover:underline">
      <i class="fas fa-arrow-left mr-1"></i> Back to Dashboard
    </a>
  </div>
</div>

<!-- HTML5 QR Code Scanner Library -->
<script src="https://unpkg.com/html5-qrcode"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const html5QrCode = new Html5Qrcode("qr-reader");
    const qrOverlay = document.getElementById('scanner-overlay');
    
    // Config
    const config = { fps: 10, qrbox: 250 };
    
    // Success function
    function onScanSuccess(decodedText, decodedResult) {
      // Stop scanning
      html5QrCode.stop();
      
      // Show loading message
      qrOverlay.innerHTML = '<div class="text-white text-center"><i class="fas fa-circle-notch fa-spin text-3xl mb-3"></i><p>Code detected!</p><p>Redirecting...</p></div>';
      qrOverlay.style.backgroundColor = 'rgba(0, 104, 55, 0.8)';  // Irish green with opacity
      
      // Redirect to redeem page
      window.location.href = '/redeem/' + decodedText;
    }

    // Start scanner
    html5QrCode.start(
      { facingMode: "environment" },
      config,
      onScanSuccess,
      (errorMessage) => {
        // Handle error if needed
        console.log(errorMessage);
      })
      .then(() => {
        // Scanner started successfully
        qrOverlay.style.display = 'none';
      })
      .catch((err) => {
        // Update overlay with error message
        qrOverlay.innerHTML = `
          <div class="text-white text-center">
            <i class="fas fa-exclamation-triangle text-4xl mb-3"></i>
            <p>Camera access denied or not available</p>
            <p class="text-sm mt-2">Please use manual entry below</p>
          </div>
        `;
        qrOverlay.style.backgroundColor = 'rgba(178, 34, 34, 0.8)';  // Guinness red with opacity
      });
  });
</script>
{% endblock %}