| 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>
 
 
  |