<!--//  EmoteApp.html////  Created by Brad Hefta-Gaub on 7 Jan 2018//  Copyright 2018 High Fidelity, Inc.////  Distributed under the Apache License, Version 2.0.//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html--><html>    <head>        <title>Emote App</title>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700"" rel="stylesheet">        <style>            body {                margin: 0;                width: 100%;                font-family: 'Raleway', sans-serif;                color: white;                background: linear-gradient(#2b2b2b, #0f212e);            }             .top-bar {                height: 90px;                background: linear-gradient(#2b2b2b, #1e1e1e);                font-weight: bold;                padding-left: 30px;                padding-right: 30px;                display: flex;                align-items: center;                position: fixed;                width: 480px;                top: 0;                z-index: 1;            }             .content {                margin-top: 90px;                padding: 10px 30px;            }             input[type=button] {                font-family: 'Raleway';                font-weight: bold;                font-size: 20px;                text-transform: uppercase;                vertical-align: top;                height: 90px;                min-width: 190px;                padding: 0px 10px;                margin-right: 6px;                border-radius: 5px;                border: none;                color: #fff;                background-color: #000;                background: linear-gradient(#343434 20%, #000 100%);                cursor: pointer;            }             input[type=button].white {                color: #121212;                background-color: #afafaf;                background: linear-gradient(#fff 20%, #afafaf 100%);            }             input[type=button]:enabled:hover {                background: linear-gradient(#000, #000);                border: none;            }            input[type=button].white:enabled:hover {                background: linear-gradient(#fff, #fff);                border: none;            }             input[type=button]:active {                background: linear-gradient(#343434, #343434);            }            input[type=button].white:active {                background: linear-gradient(#afafaf, #afafaf);            }             input[type=button]:disabled {                color: #252525;                background: linear-gradient(#575757 20%, #252525 100%);            }             input[type=button][pressed=pressed] {                color: #00b4ef;            }         </style>    </head>    <body>        <div class="top-bar">            <h4>Emote App</h4>        </div>        <div class="content">            <p>Choose an emote:<p>            <p><input type="button" class="emote-button white" value="Crying">               <input type="button" class="emote-button white" value="Surprised"></p>            <p><input type="button" class="emote-button white" value="Dancing">               <input type="button" class="emote-button white" value="Cheering"></p>            <p><input type="button" class="emote-button white" value="Waving">               <input type="button" class="emote-button white" value="Fall"></p>            <p><input type="button" class="emote-button white" value="Pointing">               <input type="button" class="emote-button white" value="Clapping"></p>            <p><input type="button" class="emote-button white" value="Sit">               <input type="button" class="emote-button white" value="Love"></p>        </div>         <script>            function main() {                // Send an event to emote.js when the page loads and is ready to get things rolling                console.log("document ready");                var readyEvent = {                    "type": "ready",                };                // The event bridge handles event represented as a string the best. So here we first create a Javascript object, then convert to stirng                EventBridge.emitWebEvent(JSON.stringify(readyEvent));                 // Send an event when user click on each of the emote buttons                document.querySelectorAll(".emote-button").forEach((btn)=>{                    btn.addEventListener("click", (e)=>{                        console.log(e.target.value + " button click");                        var clickEvent = {                            "type": "click",                            "data": e.target.value                        };                        EventBridge.emitWebEvent(JSON.stringify(clickEvent));                    });                });            }             document.addEventListener("DOMContentLoaded", main);        </script>    </body></html>