QRCodeService/index.html at master · chuliam/QRCodeService · 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <title>QR Code</title>
</head>

<body>
<div class="jumbotron">
    <div class="container">
        <h1>Hello, QR Code!</h1>
        <p>Please enter the content you want to display in the QR code</p>
        <p>
        <div class="input-group input-group-lg">
            <span class="input-group-addon" id="sizing-addon1">Content</span>
            <input type="text" class="form-control" id="userInputQrContent"
                   placeholder="Please enter the content you want to display" aria-describedby="sizing-addon1">
        </div>
        </p>
        <p><a class="btn btn-primary btn-lg" href="javascript:void(0)" onclick="GetQRCode()" role="button">Just try
            it!</a>
            <a class="btn btn-success btn-lg" href="javascript:void(0)" onclick="SysClear()" role="button">Clear</a></p>
        <p>
        <div class="alert alert-danger" role="alert" id="sysShow" style="display: none;">
            <strong>Warning!</strong><span id="sysMsg" style="color: red;font-weight: bold;"></span>
        </div>
        </p>
        <div class="panel panel-default" id="codePanel" style="display: none;">
            <div class="panel-heading">Your QR Code Info</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-4">
                        <img id="qrCodeSrc" class="media-object" src="" alt="QR code show">
                    </div>

                    <div class="col-md-8">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="qrContent" class="col-sm-2 control-label">Content</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" id="qrContent" rows="3"
                                              style="font-weight: bold;resize:none" readonly="readonly"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="qrExpDate" class="col-sm-2 control-label">Exp.Date</label>
                                <div class="col-sm-10">
                                    <input type="text" id="qrExpDate" class="form-control" readonly="readonly">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="qrResourceUrl" class="col-sm-2 control-label">Resource.URL</label>
                                <div class="col-sm-10">
                                    <input type="text" id="qrResourceUrl" class="form-control" readonly="readonly">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="qrNote" class="col-sm-2 control-label">Note</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" id="qrNote" rows="3"
                                              style="font-weight: bold;resize:none" readonly="readonly">The resources of the QR code will be destroyed after the validity period, and you will not be able to access the resource through the resource url</textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    function GetQRCode() {
        $("#codePanel").css('display', 'none');
        if ($("#userInputQrContent").val() == "") {
            $("#sysMsg").text("Please input your data");
            $("#sysShow").css('display', 'block');
            return;
        }
        $.ajax({
            type: "Get",
            url: "/GetQR",
            data: {
                msg: $("#userInputQrContent").val()
            },
            dataType: "json",
            success: function (data) {
                if (data.code != 200) {
                    $("#codePanel").css('display', 'none');
                    $("#sysMsg").text(data.msg);
                } else {
                    $("#codePanel").css('display', 'block');
                    $("#sysShow").css('display', 'none');
                    $("#qrContent").val(data.data.content);
                    $("#qrExpDate").val(data.data.expDate);
                    $("#qrResourceUrl").val(data.data.url);
                    $("#qrCodeSrc").attr('src', data.data.url);
                }
            }
        });
    }

    function SysClear() {
        $("#userInputQrContent").val("");
        $("#sysShow").css('display', 'none');
        $("#sysMsg").text("");
        $("#codePanel").css('display', 'none');
    }
</script>

</html>