qr-code-styling/simple-test.html at master · linkbreakers-com/qr-code-styling · 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
<!DOCTYPE html>
<html>
<head>
    <title>Simple Test</title>
</head>
<body>
    <h1>Test 1: Default corners</h1>
    <div id="qr1" style="border: 2px solid red;"></div>

    <h1>Test 2: Leaf corners</h1>
    <div id="qr2" style="border: 2px solid blue;"></div>

    <h1>Test 3: Teardrop corners</h1>
    <div id="qr3" style="border: 2px solid green;"></div>

    <script src="./lib/qr-code-styling.js"></script>
    <script>
        console.log('QRCodeStyling:', typeof QRCodeStyling);

        // Test 1: Default
        try {
            const qr1 = new QRCodeStyling({
                width: 200,
                height: 200,
                data: "TEST1"
            });
            qr1.append(document.getElementById("qr1"));
            console.log('QR1 created');
        } catch(e) {
            console.error('QR1 error:', e);
        }

        // Test 2: Leaf
        try {
            const qr2 = new QRCodeStyling({
                width: 200,
                height: 200,
                data: "TEST2",
                cornerSquareOptions: {
                    type: "leaf",
                    color: "#FF0000"
                }
            });
            qr2.append(document.getElementById("qr2"));
            console.log('QR2 created');
        } catch(e) {
            console.error('QR2 error:', e);
        }

        // Test 3: Teardrop
        try {
            const qr3 = new QRCodeStyling({
                width: 200,
                height: 200,
                data: "TEST3",
                cornerDotOptions: {
                    type: "teardrop",
                    color: "#0000FF"
                }
            });
            qr3.append(document.getElementById("qr3"));
            console.log('QR3 created');
        } catch(e) {
            console.error('QR3 error:', e);
        }

        setTimeout(() => {
            const svgs = document.querySelectorAll('svg');
            console.log('Total SVG elements:', svgs.length);
        }, 500);
    </script>
</body>
</html>