SkateSpots/public/public/sticker.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 - Print Ready</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: #888;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #fff;
      margin-bottom: 10px;
      font-size: 24px;
    }
    p.info {
      color: #ddd;
      margin-bottom: 30px;
      font-size: 14px;
    }
    .stickers {
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    /* Sticker Design */
    .sticker {
      background: #f5f2eb;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px;
    }
    .sticker.vertical {
      width: 400px;
      gap: 20px;
    }
    .sticker.horizontal {
      width: 600px;
      flex-direction: row;
      gap: 30px;
      padding: 25px 35px;
    }
    .sticker.square {
      width: 400px;
      gap: 15px;
      padding: 25px;
    }
    .logo {
      width: 280px;
      height: auto;
    }
    .horizontal .logo {
      width: 200px;
    }
    .square .logo {
      width: 240px;
    }
    #qr1, #qr2, #qr3 {
      background: white;
      padding: 10px;
    }
    .url {
      font-family: 'Arial Black', Arial, sans-serif;
      font-size: 18px;
      font-weight: 900;
      color: #000;
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .horizontal .url {
      font-size: 14px;
    }
    .square .url {
      font-size: 16px;
    }
    .horizontal .right-side {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    
    .label {
      background: #333;
      color: #fff;
      padding: 8px 15px;
      font-size: 12px;
      margin-bottom: 10px;
      text-transform: uppercase;
    }
    
    .instructions {
      margin-top: 40px;
      background: #333;
      color: #fff;
      padding: 25px;
      border-radius: 8px;
      max-width: 500px;
    }
    .instructions h3 {
      margin-bottom: 15px;
      color: #ccff00;
    }
    .instructions ul {
      padding-left: 20px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <h1>SkateSpots Sticker Designs</h1>
  <p class="info">Right-click → Save Image, or take a screenshot to print</p>
  
  <div class="stickers">
    <!-- Vertical Sticker -->
    <div>
      <div class="label">Vertical (Recommended)</div>
      <div class="sticker vertical" id="sticker-v">
        <img src="/images/logo-sticker.png" alt="SkateSpots Logo" class="logo">
        <div id="qr1"></div>
        <div class="url">skate-spots.org</div>
      </div>
    </div>

    <!-- Square Compact -->
    <div>
      <div class="label">Square Compact</div>
      <div class="sticker square" id="sticker-s">
        <img src="/images/logo-sticker.png" alt="SkateSpots Logo" class="logo">
        <div id="qr2"></div>
        <div class="url">skate-spots.org</div>
      </div>
    </div>

    <!-- Horizontal -->
    <div>
      <div class="label">Horizontal / Banner</div>
      <div class="sticker horizontal" id="sticker-h">
        <img src="/images/logo-sticker.png" alt="SkateSpots Logo" class="logo">
        <div class="right-side">
          <div id="qr3"></div>
          <div class="url">skate-spots.org</div>
        </div>
      </div>
    </div>
  </div>

  <div class="instructions">
    <h3>🖨️ How to Print</h3>
    <ul>
      <li>Right-click the sticker → "Save image" or screenshot it</li>
      <li>Print on vinyl sticker paper for weather resistance</li>
      <li>Recommended sizes: 3-4 inches for square, 5-6 inches for horizontal</li>
      <li>Test scan the QR code after printing!</li>
    </ul>
  </div>

  <script>
    const url = 'https://skate-spots.org/';
    const qrOptions = {
      margin: 0,
      color: { dark: '#000000', light: '#ffffff' }
    };
    
    // Vertical - large QR
    QRCode.toCanvas(document.createElement('canvas'), url, { ...qrOptions, width: 150 }, (err, canvas) => {
      if (!err) document.getElementById('qr1').appendChild(canvas);
    });
    
    // Square - medium QR
    QRCode.toCanvas(document.createElement('canvas'), url, { ...qrOptions, width: 120 }, (err, canvas) => {
      if (!err) document.getElementById('qr2').appendChild(canvas);
    });
    
    // Horizontal - smaller QR
    QRCode.toCanvas(document.createElement('canvas'), url, { ...qrOptions, width: 100 }, (err, canvas) => {
      if (!err) document.getElementById('qr3').appendChild(canvas);
    });
  </script>
</body>
</html>