BarcodeScan/index.html at main · wjo277/BarcodeScan · 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

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barcode Erfassung & Suche</title>
    <link rel="manifest" href="manifest.json">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        body { margin: 0; font-family: sans-serif; }
        video { width: 100vw; height: 40vh; object-fit: cover; }
        #map { height: 50vh; width: 100vw; }
        #controls { padding: 10px; }
        button, input { margin: 5px; padding: 10px; font-size: 16px; }
        #output { white-space: pre-line; }
        #feedback {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 50%;
            display: none;
            z-index: 1000;
        }
    </style>
    <script src="https://unpkg.com/@zxing/library@latest"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>
    <video id="video"></video>
    <div id="controls">
        <button onclick="startScan()">Scan starten</button>
        <button onclick="scanConfig()">Konfiguration</button>
        <input type="text" id="searchValue" placeholder="Suchbegriff">
        <button onclick="searchEntries()">Suche</button>
        <p id="output"></p>
    </div>
    <div id="map"></div>
    <div id="feedback"></div>
    <audio id="beep" src="https://actions.google.com/sounds/v1/alarms/beep_short.ogg" preload="auto"></audio>
    <script src="app.js"></script>
</body>
</html>