examples/browser/counter.html

<!doctype html>
<html>
    <head>
        <title>Browser Counter Example</title>
        <!-- Foundation CSS framework -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.3/css/foundation.min.css" />
        <!-- Font Awesome icons -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" />

        <!-- defer to not block rendering -->
        <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
        <script src="../../packages/browser-bundle/dist/wot-bundle.min.js" defer></script>
        <!-- https://cdn.jsdelivr.net/npm/@node-wot/browser-bundle@latest/dist/wot-bundle.min.js -->
        <script src="counter.js" defer></script>

        <script>
            // Set the default CSS theme and icon library globally
            // JSONEditor.defaults.theme = 'foundation5';
            JSONEditor.defaults.iconlib = "fontawesome4";
        </script>
        <style>
            @keyframes blink {
                50% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
            .blink {
                animation: blink 0.5s step-start 0s 1;
            }

            .hidden {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="topbar" class="row">
            <div class="medium-12 columns">
                <h1>Counter Client Example in the Browser</h1>
                <input
                    readonly="readonly"
                    id="td_addr"
                    type="url"
                    value="http://plugfest.thingweb.io:8083/counter"
                /><!-- http://localhost:8080/counter -->
            </div>
        </div>
        <div id="interactions" class="row" style="display: none">
            <div class="medium-4 columns">
                <figure>
                    <figcaption><h4>Properties</h4></figcaption>
                    <dl id="properties" class="side-nav"></dl>
                </figure>
            </div>
            <div class="medium-4 columns">
                <figure>
                    <figcaption><h4>Actions</h4></figcaption>
                    <ul id="actions" class="side-nav"></ul>
                </figure>
            </div>
            <div class="medium-4 columns">
                <figure>
                    <figcaption><h4>Events</h4></figcaption>
                    <ul id="events" class="side-nav"></ul>
                    <div id="event-display" class="hidden">
                        <p>Event count: <span id="event-count"></span></p>
                        <p>Last payload: <span id="event-payload"></span></p>
                    </div>
                </figure>
            </div>
        </div>
    </body>
</html>