popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRTC Presence Monitor</title>
    <meta name="viewport" content="initial-scale=1">
    <link rel="stylesheet" href="include/bootstrap.min.css">
    <script src="include/jquery-3.2.1.min.js"></script>
    <script src="include/bootstrap.min.js"></script>
    <script src="popup.js"></script>

    <style>
        .main {
            min-width: 300px;
            buffer: 10px;
            margin: 10px;
        }

        * {
            font-size: 12px;
            line-height: 1.3;
        }

        textarea {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="container-fluid main">
    <div class="row">
        <button type="button" class="btn btn-danger busy hidden" id="busyBtn">Busy</button>
        <button type="button" class="btn btn-primary busy" id="notBusyBtn">Not busy</button>
        <span style="float: right"><a href="#" id="settingsToggle">⚙️</a></span>
        <div id="settings" style="display:none" class="well">
            <input id="embrava" type="checkbox">
            <label for="embrava">Embrava BlyncLight</label><br>

            <h4>Webhook settings</h4>
            <ul class="nav nav-tabs">
                <li class="active">
                    <a class="nav-link active" href="#onSettings" data-toggle="tab">On</a>
                </li>
                <li>
                    <a class="nav-link" href="#offSettings" data-toggle="tab">Off</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active well" id="onSettings">
                    <form id="onSettingsForm" class="settingsForm">

                        <div class="form-group">
                            <label>Call a URL for status change to on</label><br>
                            <label for="onUrl">On URL</label>
                            <textarea id="onUrl" name="onUrl" type="text" wrap="soft"></textarea><br>
                            <label for="onHeaders">Headers</label>
                            <textarea id="onHeaders" name="onHeaders" type="text" wrap="soft"></textarea><br>
                            <input id="onGetSwitch" type="checkbox" class="getSwitch">
                            <label for="onGetSwitch">Use a GET</label><br>
                            <label for="onPostBody" class="onPostBody">POST Body</label>
                            <textarea id="onPostBody" class="form-control onPostBody" name="onPostBody"
                                      rows="3"></textarea><br>
                        </div>
                    </form>
                </div>

                <div class="tab-pane well" id="offSettings">
                    <form id="offSettingsForm" class="settingsForm">
                        <div class="form-group">

                            <label>Call a URL for status change to off</label><br>
                            <label for="offUrl">Off URL</label>
                            <textarea id="offUrl" type="text" name="offUrl" wrap="soft"></textarea><br>
                            <label for="offHeaders">Headers</label>
                            <textarea id="offHeaders" name="offHeaders" type="text" wrap="soft"></textarea><br>
                            <input id="offGetSwitch" type="checkbox" class="getSwitch">
                            <label for="offGetSwitch">Use a GET</label><br>
                            <label for="offPostBody" class="offPostBody">POST Body</label>
                            <textarea id="offPostBody" class="form-control offPostBody" name="offPostBody"
                                      rows="3"></textarea><br>
                        </div>
                    </form>
                </div>
            </div>
            <button id="saveButton" class="btn btn-primary">Save</button>
        </div>
    </div>
    <div class="row">
        <h4>WebRTC Presence Status</h4>
        <div id="data"></div>
    </div>
    </div>
</body>
</html>