cognitive-face-api-nodejs/index.html at master · TeamSpark-Learning/cognitive-face-api-nodejs · 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Smart Azure Lock Operator (aka S.A.L.O.)</title>
        <link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
                    <div class="alert alert-secondary" role="alert">
                        <h1>Camera feed</h1>
                    </div>

                    <video id="videoPreview"
                           style="border-color: #ccc; border-width: 1px; border-style: solid; width: 640px; height: 400px; padding: 10px 0;">
                    </video>
                </div>

                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
                <div class="alert alert-info" role="alert">
                    <h1>Current captured image</h1>
                </div>
                    <img id="imgPreview"
                         style="border-color: #ccc; border-width: 1px; border-style: solid; max-width: 640px; max-height: 400px; padding: 10px 0;"/>
                </div>

            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center py-2">
                    <div>
                        <button id="btnCapture" class="btn btn-primary">Capture image</button>
                        <button id="btnSetMaster" class="btn btn-info">Set image as master</button>
                        <button id="btnTryUnlock" class="btn btn-success">Try to unlock</button>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
                    <div class="alert alert-warning" role="alert">
                        <h1>Status</h1>
                    </div>
                    <div>
                        <div id="msgProgress" class="d-none">
                            <img src="./assets/thinking.jpg" />
                        </div>
                        <div id="msgSuccess" class="d-none">
                            <img src="./assets/success.jpg" />
                        </div>
                        <div id="msgFailure" class="d-none">
                            <img src="./assets/fail.jpg" />
                        </div>
                    </div>

                    <div class="text-lg-left">
                        <ul id="msgLog"></ul>
                    </div>

                </div>

            </div>

        </div>


        <script src="app.js"></script>

    </body>
</html>