minitools/bulkr.html at main · mnsft/minitools · 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!-- v2.3 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bulkr</title>
    <link href="https://minisoft.it/icons/fix.png" rel="shortcut icon" type="image/x-icon" />
    <link href="https://minisoft.it/icons/fix.png" rel="apple-touch-icon" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#006E81',
                        'primary-dark': '#006E81',
                        secondary: '#814000',
                    }
                }
            }
        }
    </script>
</head>

<body class="bg-gray-100 flex flex-col min-h-screen">
    <header class="bg-white border-b border-gray-200">
        <div class="container mx-auto px-4 py-6 max-w-4xl">
            <h1 class="text-3xl font-bold text-center text-gray-800">Bulkr</h1>
            <p class="text-gray-600 text-center mt-1">Bulk QR-Code Generator</p>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8 max-w-4xl flex-grow">
        <!-- Instructions Section -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">Instructions</h2>
            <div class="bg-slate-50 border-l-4 border-primary p-4 rounded-r">
                <ol class="list-decimal pl-5 space-y-1">
                    <li>Set the desired QR code size and margin using the input fields.</li>
                    <li>Enter a prefix (optional) to prepend to each QR code value.</li>
                    <li>Paste the values for which you want to generate QR codes, one per line.</li>
                    <li>Click "Download QR-Codes" to generate and download all QR codes as a PDF.</li>
                </ol>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6">
            <form id="qr-form" class="space-y-4">
                <div class="flex flex-col sm:flex-row gap-4">
                    <div class="flex-1">
                        <label for="codeSize" class="block text-sm font-medium text-gray-700 mb-2">Code size (pixels)</label>
                        <input type="number" class="w-full p-3 border border-gray-300 rounded-lg"
                               min="40" value="100" id="codeSize" />
                    </div>
                    <div class="flex-1">
                        <label for="codeMargin" class="block text-sm font-medium text-gray-700 mb-2">Code margin (pixels)</label>
                        <input type="number" class="w-full p-3 border border-gray-300 rounded-lg"
                               min="0" value="2" id="codeMargin" />
                    </div>
                </div>

                <div>
                    <label for="prefixTxt" class="block text-sm font-medium text-gray-700 mb-2">Code prefix</label>
                    <input type="text" class="w-full p-3 border border-gray-300 rounded-lg"
                           id="prefixTxt" />
                </div>

                <div>
                    <label for="inTxt" class="block text-sm font-medium text-gray-700 mb-2">Code values</label>
                    <textarea id="inTxt" class="w-full h-40 p-3 border border-gray-300 rounded-lg resize-y"
                              placeholder="Enter each text on a new line:"></textarea>
                </div>

                <button type="button" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition duration-200"
                        onclick="generateQRcodes()">Download QR-Codes</button>
            </form>
        </div>
    </main>

    <footer class="bg-white border-t border-gray-200 mt-auto">
        <div class="container mx-auto px-4 py-6 max-w-4xl">
            <p class="text-gray-600 text-center">&copy; <a href="https://minisoft.it/" class="text-primary hover:text-primary-dark">Minisoft</a> — All rights reserved</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/gh/papnkukn/qrcode-svg@e48892136b1655fa557d45b521120f482afafd3d/dist/qrcode.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/yWorks/svg2pdf.js@7737880184e16e59e4c01037ff6ff5bbba07287b/dist/svg2pdf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/yWorks/jsPDF@e2a73c5b076e79ea09e3c5ac7c6d0644940e4b2e/dist/jspdf.min.js"></script>
    <script>
        function generateQRcodes() {
            const prefix = document.getElementById("prefixTxt").value;
            const width = document.getElementById("codeSize").value;
            const height = width;
            const codeMargin = document.getElementById("codeMargin").value;

            const allText = document.getElementById("inTxt").value;
            const codes = allText.match(/[^\n\r]+/g);
            if (!codes || codes.length === 0) return;

            const pdf = new jsPDF({
                unit: 'pt',
                orientation: 'p',
                format: [width, height],
                lineHeight: 1.2
            });

            pdf.deletePage(1);
            const svgEl = document.createElement('svg');

            for (const code of codes) {
                qrcode = new QRCode({
                    content: prefix + code,
                    padding: codeMargin,
                    width: width,
                    height: height,
                    color: "black",
                    background: "none",
                    ecl: "L"
                });

                pdf.addPage();
                svgEl.innerHTML = qrcode.svg();
                svg2pdf(svgEl, pdf, {
                    xOffset: 0,
                    yOffset: 0,
                    scale: 1
                });
            }

            pdf.save('qrcodes');
        }
    </script>
</body>

</html>