<html><head>    <link rel="stylesheet" type="text/css" href="style.css">    <script>        function loaded() {            var gridColor = { red: 0, green: 0, blue: 0 };            var gridColors = [                { red: 0, green: 0, blue: 0 },                { red: 255, green: 255, blue: 255 },                { red: 255, green: 0, blue: 0 },                { red: 0, green: 255, blue: 0},                { red: 0, green: 0, blue: 255 },            ];            var gridColorIndex = 0;             elPosY = document.getElementById("horiz-y");            elMinorSpacing = document.getElementById("minor-spacing");            elMajorSpacing = document.getElementById("major-spacing");            elSnapToGrid = document.getElementById("snap-to-grid");            elHorizontalGridVisible = document.getElementById("horiz-grid-visible");            elMoveToSelection = document.getElementById("move-to-selection");            elMoveToAvatar = document.getElementById("move-to-avatar");             if (window.EventBridge !== undefined) {                EventBridge.scriptEventReceived.connect(function(data) {                    data = JSON.parse(data);                     if (data.origin) {                        var origin = data.origin;                        elPosY.value = origin.y.toFixed(2);                    }                     if (data.minorGridWidth !== undefined) {                        elMinorSpacing.value = data.minorGridWidth;                    }                     if (data.majorGridEvery !== undefined) {                        elMajorSpacing.value = data.majorGridEvery;                    }                     if (data.gridColor) {                        gridColor = data.gridColor;                    }                     if (data.snapToGrid !== undefined) {                        elSnapToGrid.checked = data.snapToGrid == true;                    }                     if (data.visible !== undefined) {                        elHorizontalGridVisible.checked = data.visible == true;                    }                });                 function emitUpdate() {                    EventBridge.emitWebEvent(JSON.stringify({                        type: "update",                        origin: {                            y: elPosY.value,                        },                        minorGridWidth: elMinorSpacing.value,                        majorGridEvery: elMajorSpacing.value,                        gridColor: gridColor,                        colorIndex: gridColorIndex,                        snapToGrid: elSnapToGrid.checked,                        visible: elHorizontalGridVisible.checked,                    }));                }             }             elPosY.addEventListener("change", emitUpdate);            elMinorSpacing.addEventListener("change", emitUpdate);            elMajorSpacing.addEventListener("change", emitUpdate);            elSnapToGrid.addEventListener("change", emitUpdate);            elHorizontalGridVisible.addEventListener("change", emitUpdate);             elMoveToAvatar.addEventListener("click", function() {                EventBridge.emitWebEvent(JSON.stringify({                    type: "action",                    action: "moveToAvatar",                }));            });            elMoveToSelection.addEventListener("click", function() {                EventBridge.emitWebEvent(JSON.stringify({                    type: "action",                    action: "moveToSelection",                }));            });             var gridColorBox = document.getElementById('grid-color');             for (var i = 0; i < gridColors.length; i++) {                var colors = gridColors[i];                var box = document.createElement('div');                box.setAttribute('class', 'color-box');                box.style.background = 'rgb(' + colors.red + ', ' + colors.green + ', ' + colors.blue + ')';                document.getElementById("grid-colors").appendChild(box);                box.addEventListener("click", function(color, index) {                    return function() {                        gridColor = color;                        gridColorIndex = index;                        emitUpdate();                    }                }({ red: colors.red, green: colors.green, blue: colors.blue }, i));            }             EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));        }    </script></head><body onload='loaded();'>    <div class="grid-section">         <div class="property-section">            <label>Visible</label>            <span>                <input type='checkbox' id="horiz-grid-visible">            </span>        </div>         <div class="property-section">            <label>Snap to grid</label>            <span>                <input type='checkbox' id="snap-to-grid">            </span>        </div>         <div id="horizontal-position" class="property-section">            <label>Position (Y Axis)</label>            <span>                <input type='number' id="horiz-y" class="number" value="0.0" step="0.1"></input>            </span>        </div>         <div class="property-section">            <label>Minor Grid Size</label>            <span>                <input type='number' id="minor-spacing" min="0" step="0.01", ></input>            </span>        </div>         <div class="property-section">            <label>Major Grid Every</label>            <span>                <input type='number' id="major-spacing" min="2" step="1", ></input>            </span>        </div>         <div class="property-section">            <label>Grid Color</label>            <span id="grid-colors"></span>        </div>         <div class="property-section">            <span>                <input type="button" id="move-to-selection" value="Move to Selection">            </span>        </div>        <div class="property-section">            <span>                <input type="button" id="move-to-avatar" value="Move to Avatar">            </span>        </div>    </div></body></html>