Add separate about.html and instructions.html

index.html

@@ -30,6 +30,7 @@
                     </div>
                     <div class="button-row">
                         <a href="#about">About Speedometer</a>
+                        <a href="#instructions">Test Instructions</a>
                     </div>
                 </div>
             </section>
@@ -176,6 +177,44 @@ <h1 class="section-header">About Speedometer 3</h1>
                     </div>
                 </div>
             </section>
+
+            <section id="instructions" data-title="Test Instructions">
+                <a href="#home" class="logo">
+                    <img srcset="resources/[email protected] 2x" src="resources/logo.png" alt="Speedometer" />
+                    <div class="version">3.0</div>
+                </a>
+                <div class="section-grid">
+                    <h1 class="section-header">Speedometer 3 Test Instructions</h1>
+                    <div class="section-content">
+                        <h2>General Instructions</h2>
+                        <ol>
+                            <li>Before running Speedometer:</li>
+                            <ul>
+                                <li>Close all other applications.</li>
+                                <li>Close other browser windows and tabs.</li>
+                                <li>Use a fresh browser profile and a single window.</li>
+                            </ul>
+                            <li>While running Speedometer:</li>
+                            <ul>
+                                <li>Keep the browser window in the foreground.</li>
+                                <li>Do not use any other applications while Speedometer runs.</li>
+                            </ul>
+                        </ol>
+
+                        <!-- TODO: fill in detailed instructions
+                        <h2>Detailed browser-specific instructions</h2>
+                        <h3>Chrome</h3>
+                        <h3>Edge</h3>
+                        <h3>Firefox</h3>
+                        <h3>Safari</h3>
+                    --></div>
+                    <div class="buttons section-footer">
+                        <div class="button-row">
+                            <a class="button" href="#home" title="Show main section.">Home</a>
+                        </div>
+                    </div>
+                </div>
+            </section>
         </main>
     </body>
 </html>

resources/main.css

@@ -532,7 +532,8 @@ section#details h1 {
     margin-bottom: 10px;
 }
 
-section#about h1 {
+section#about h1,
+section#instructions h1 {
     margin-top: 10px;
     margin-bottom: 0px;
     font-size: 25px;

resources/main.mjs

@@ -339,7 +339,8 @@ class MainBenchmarkClient {
                 return;
             }
         } else {
-            if (hash !== "" && hash !== "#home" && hash !== "#about") {
+            // Redirect invalid views to #home directly.
+            if (hash === "#running" || hash === "#summary" || hash === "#details") {
                 this._setLocationHash("#home");
                 return;
             }