SkateSpots/public/sticker-qr.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SkateSpots Sticker QR Code</title>
  <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: #111;
      color: white;
      font-family: 'Impact', 'Arial Black', sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    h1 {
      color: #ccff00;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .sticker-container {
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: center;
    }
    .sticker {
      background: black;
      padding: 40px;
      border-radius: 20px;
      border: 4px solid #333;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    .sticker.square {
      width: 400px;
    }
    .sticker.horizontal {
      width: 600px;
      flex-direction: row;
      padding: 30px 40px;
    }
    .logo-text {
      font-size: 48px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      background: linear-gradient(135deg, #ff0040, #ccff00);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 0 30px rgba(204, 255, 0, 0.5);
    }
    .horizontal .logo-text {
      font-size: 36px;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
    }
    #qrcode, #qrcode2 {
      background: white;
      padding: 15px;
      border-radius: 10px;
    }
    .url-text {
      font-family: 'Courier New', monospace;
      font-size: 18px;
      color: #ff0040;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .horizontal .url-text {
      font-size: 14px;
    }
    .tagline {
      font-size: 14px;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.2em;
    }
    .download-section {
      margin-top: 40px;
      text-align: center;
    }
    .download-btn {
      background: linear-gradient(135deg, #ff0040, #ff6600);
      color: white;
      border: none;
      padding: 15px 30px;
      font-size: 16px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border-radius: 8px;
      cursor: pointer;
      margin: 10px;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .download-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(255, 0, 64, 0.5);
    }
    .instructions {
      margin-top: 40px;
      padding: 20px;
      background: #1a1a1a;
      border-radius: 10px;
      max-width: 600px;
      text-align: left;
    }
    .instructions h3 {
      color: #ccff00;
      margin-bottom: 10px;
    }
    .instructions ul {
      color: #aaa;
      padding-left: 20px;
    }
    .instructions li {
      margin: 8px 0;
    }
    .size-info {
      font-size: 12px;
      color: #666;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>🛹 SkateSpots Sticker Generator</h1>
  
  <div class="sticker-container">
    <!-- Square Sticker -->
    <div>
      <h2 style="color: #888; margin-bottom: 15px; text-align: center;">Square Sticker (4" x 4")</h2>
      <div class="sticker square" id="sticker-square">
        <div class="logo-text">SkateSpots</div>
        <div id="qrcode"></div>
        <div class="url-text">skate-spots.org</div>
        <div class="tagline">Find spots. Share spots. Skate spots.</div>
      </div>
      <p class="size-info">Recommended print size: 4" x 4" (10cm x 10cm)</p>
    </div>

    <!-- Horizontal Sticker -->
    <div>
      <h2 style="color: #888; margin-bottom: 15px; text-align: center;">Horizontal Sticker (6" x 2")</h2>
      <div class="sticker horizontal" id="sticker-horizontal">
        <div class="logo-text">SkateSpots</div>
        <div id="qrcode2"></div>
        <div style="display: flex; flex-direction: column; gap: 5px; align-items: center;">
          <div class="url-text">skate-spots.org</div>
          <div class="tagline">Decentralized skate map</div>
        </div>
      </div>
      <p class="size-info">Recommended print size: 6" x 2" (15cm x 5cm)</p>
    </div>
  </div>

  <div class="download-section">
    <p style="color: #888; margin-bottom: 15px;">Right-click the QR code and "Save image as..." or take a screenshot</p>
    <button class="download-btn" onclick="downloadQR()">Download QR Code Only (PNG)</button>
    <button class="download-btn" onclick="downloadSVG()">Download QR Code (SVG)</button>
  </div>

  <div class="instructions">
    <h3>🖨️ Printing Instructions</h3>
    <ul>
      <li><strong>Material:</strong> Use vinyl or weatherproof sticker paper for durability</li>
      <li><strong>Size:</strong> Square sticker works great at 3-4 inches, horizontal at 5-6 inches wide</li>
      <li><strong>Resolution:</strong> QR code is 300x300px - scale up for larger prints</li>
      <li><strong>Colors:</strong> Black background (#000), Lime (#CCFF00), Pink (#FF0040)</li>
      <li><strong>Die-cut:</strong> Round corners (20px radius at 4" size) look professional</li>
      <li><strong>Test:</strong> Always test scan the QR code after printing!</li>
    </ul>
  </div>

  <script>
    const url = 'https://skate-spots.org/';
    
    // Generate square QR code
    QRCode.toCanvas(document.createElement('canvas'), url, {
      width: 200,
      margin: 0,
      color: {
        dark: '#000000',
        light: '#ffffff'
      }
    }, function(error, canvas) {
      if (error) console.error(error);
      document.getElementById('qrcode').appendChild(canvas);
    });

    // Generate horizontal QR code (smaller)
    QRCode.toCanvas(document.createElement('canvas'), url, {
      width: 120,
      margin: 0,
      color: {
        dark: '#000000',
        light: '#ffffff'
      }
    }, function(error, canvas) {
      if (error) console.error(error);
      document.getElementById('qrcode2').appendChild(canvas);
    });

    function downloadQR() {
      QRCode.toDataURL(url, {
        width: 1000,
        margin: 2,
        color: {
          dark: '#000000',
          light: '#ffffff'
        }
      }, function(error, dataUrl) {
        if (error) console.error(error);
        const link = document.createElement('a');
        link.download = 'skatespots-qr-code.png';
        link.href = dataUrl;
        link.click();
      });
    }

    function downloadSVG() {
      QRCode.toString(url, {
        type: 'svg',
        width: 1000,
        margin: 2,
        color: {
          dark: '#000000',
          light: '#ffffff'
        }
      }, function(error, svg) {
        if (error) console.error(error);
        const blob = new Blob([svg], { type: 'image/svg+xml' });
        const link = document.createElement('a');
        link.download = 'skatespots-qr-code.svg';
        link.href = URL.createObjectURL(blob);
        link.click();
      });
    }
  </script>
</body>
</html>