fix-camera-apps-script-barcode-scanner/index.html at master · rameezscripts/fix-camera-apps-script-barcode-scanner · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Segoe UI', sans-serif; padding: 20px; background: #f5f5f5; }
    h2 { color: #1a73e8; margin-bottom: 15px; }
    .btn {
      background: #1a73e8; color: white; border: none; padding: 12px 24px;
      border-radius: 8px; font-size: 16px; cursor: pointer; margin: 10px 5px;
    }
    .btn:hover { background: #1557b0; }
    .btn-green { background: #34a853; }
    .btn-green:hover { background: #2d9249; }
    .info-box {
      background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px;
      margin: 15px 0; border-radius: 4px; font-size: 14px; color: #856404;
    }
    table { width: 100%; border-collapse: collapse; margin-top: 15px; background: white; }
    th, td { padding: 10px; border: 1px solid #ddd; text-align: left; font-size: 13px; }
    th { background: #1a73e8; color: white; }
  </style>
</head>
<body>

  <h2>Barcode Scanner</h2>

  <div class="info-box">
    Camera access Apps Script me directly nahi chalti (Google sandbox restriction).
    Neeche button dabao — alag page khulega jahan camera se barcode scan hoga.
  </div>

  <!-- IMPORTANT: Netlify URL yahan dalo deploy ke baad -->
  <button class="btn" onclick="window.open('YOUR_NETLIFY_URL_HERE', '_blank')">
    Open Barcode Scanner
  </button>

  <button class="btn btn-green" onclick="loadScans()">
    Refresh Scans
  </button>

  <table>
    <thead><tr><th>Time</th><th>Barcode</th><th>Source</th></tr></thead>
    <tbody id="scanTable">
      <tr><td colspan="3" style="text-align:center">
        Click Refresh to load scans
      </td></tr>
    </tbody>
  </table>

  <script>
    function loadScans() {
      google.script.run.withSuccessHandler(function(data) {
        const tbody = document.getElementById('scanTable');
        if (!data || !data.length) {
          tbody.innerHTML = '<tr><td colspan="3">No scans yet</td></tr>';
          return;
        }
        tbody.innerHTML = data.map(function(r) {
          return '<tr><td>' + new Date(r[0]).toLocaleString() +
            '</td><td>' + r[1] + '</td><td>' + r[2] + '</td></tr>';
        }).join('');
      }).getRecentScans();
    }
    loadScans();
  </script>
</body>
</html>