| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 | <!doctype html><html lang="en"><head>    <meta charset="utf-8">    <title><%= htmlWebpackPlugin.options.title %></title>    <meta name="description" content="A showcase for OpenSheetMusicDisplay.">    <meta name="author" content="OpenSheetMusicDisplay contributors">    <!-- Demo js file is included automatically by webpack druing build -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js" type="text/javascript"></script>        <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.css" media="all" rel="stylesheet"/>    <link rel="icon" href="./favicon.ico?" type="image/x-icon"/></head><body><br><h1 class="ui centered header">    <img src="./favicon.ico?" class="ui image">    <%= htmlWebpackPlugin.options.title %></h1><div class="ui three column grid container">    <div class="column">        <h3 class="ui header">Select a sample:</h3>        <select class="ui selection dropdown" style="width:100px"  id="select"></select>    </div>    <div class="column">        <h3 class="ui header">Render backend:</h3>        <select class="ui dropdown" id="backend-select" value="svg">            <option value="svg">SVG</option>            <option value="canvas">Canvas</option>>        </select>    </div>    <div class="column">        <h3 class="ui header">Cursor controls:</h3>        <div class="ui buttons">            <div class="ui animated fade button" id="show-cursor-btn">                <div class="visible content">Show</div>                <div class="hidden content">                    <i class="eye icon"></i>                </div>            </div>            <div class="ui animated fade button" id="hide-cursor-btn">                <div class="visible content">Hide</div>                <div class="hidden content">                    <i class="eye slash icon"></i>                </div>            </div>            <div class="ui animated fade button" id="next-cursor-btn">                <div class="visible content">Next</div>                <div class="hidden content">                    <i class="arrow right icon"></i>                </div>            </div>            <div class="ui animated fade button" id="reset-cursor-btn">                <div class="visible content">Reset</div>                <div class="hidden content">                    <i class="undo icon"></i>                </div>            </div>        </div>    </div>             <div class="column">        <h3 class="ui header">Zoom controls:</h3>        <div class="ui buttons">                <div class="ui button" id="zoom-in-btn">                    <i class="search plus icon"></i>                </div>                <div class="ui button" id="zoom-out-btn">                    <i class="search minus icon"></i>                </div>        </div>    </div>    <div class="column">        <h3 class="ui header">Zoom factor:</h3>        <h4 class="ui header" id="zoom-str">???</h4>    </div>    <div class="column">            <h3 class="ui header">Current width:</h3>                            <h4 class="ui header" id="size-str">???</h4>    </div></div><table cellspacing="0" style="max-width:700px;">    <tr id="error-tr">        <td></td>        <td id="error-td"></td>    </tr></table></body></html>
 |