WebSockets: display usage instructions when loading index.html from a local file

share/web_surfaces/index.html

@@ -12,6 +12,18 @@
         <div id="content">
             <h2 id="loading">Loading...</h2>
             <pre id="error" style="display:none"></pre>
+            <div id="local" style="display:none">
+                <h2>This page cannot be loaded from a local file</h2>
+                <p>Follow these steps instead:</p>
+                <ul>
+                    <li>Open Ardour</li>
+                    <li>Enable the WebSockets Server surface</li>
+                    <li>
+                        Click on the following link
+                        <a href="http://localhost:3818/">http://localhost:3818</a>
+                    </li>
+                </ul>
+            </div>
             <div id="index" style="display:none">
                 <h1>Available Web Surfaces</h1>
                 <div class="surface-list" id="builtin">
@@ -24,6 +36,12 @@
                 </div>
             </div>
         </div>
+        <script>
+            if (!location.hostname) {
+                document.getElementById('loading').style.display = 'none';
+                document.getElementById('local').style.display = 'inline';
+            }
+        </script>
         <script type="module" src="index/main.js"></script>
     </body>
 </html>