| <!DOCTYPE html> |
| <html data-visible-section="home"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| <meta name="viewport" content="width=850" /> |
| <title>Speedometer 3.0</title> |
| <link rel="stylesheet" href="resources/main.css" /> |
| <link rel="icon" href="resources/favicon.png" /> |
| <script src="resources/main.mjs" type="module"></script> |
| </head> |
| <body> |
| <main> |
| <section id="home"> |
| <a href="#home" class="logo"> |
| <img srcset="resources/logo@2x.png 2x" src="resources/logo.png" alt="Speedometer" /> |
| <div class="version">3.0</div> |
| </a> |
| <div class="content"> |
| <p>Speedometer is a browser benchmark that measures the responsiveness of Web applications. It uses demo web applications to simulate user actions such as adding to-do items.</p> |
| <p id="screen-size-warning"> |
| <strong> |
| Your browser window is too small. For most accurate results, please make the view port size at least <span id="min-screen-width">850px</span> by <span id="min-screen-height">650px</span>.<br /> |
| It's currently <span id="screen-size"></span>. |
| </strong> |
| </p> |
| </div> |
| <div class="buttons"> |
| <div class="button-row"> |
| <button class="start-tests-button">Start Test</button> |
| </div> |
| <div class="button-row"> |
| <a href="about.html">About Speedometer</a> |
| <a href="instructions.html">Test Instructions</a> |
| </div> |
| </div> |
| </section> |
| |
| <section id="running"> |
| <a href="#home" class="logo"> |
| <img srcset="resources/logo@2x.png 2x" src="resources/logo.png" alt="Speedometer" /> |
| <div class="version">3.0</div> |
| </a> |
| <div id="testContainer"></div> |
| <div id="progress"> |
| <progress aria-label="Progress" id="progress-completed"></progress> |
| </div> |
| <div id="info"> |
| <div id="info-label"></div> |
| <div id="info-progress"></div> |
| </div> |
| </section> |
| |
| <section id="summary" data-title="Results Summary"> |
| <a href="#home" class="logo"> |
| <img srcset="resources/logo@2x.png 2x" src="resources/logo.png" alt="Speedometer" /> |
| <div class="version">3.0</div> |
| </a> |
| <h1>Score</h1> |
| <div class="gauge"> |
| <div class="window"><div class="needle"></div></div> |
| </div> |
| <hr /> |
| <div id="result-number"></div> |
| <div id="confidence-number"></div> |
| <div class="buttons"> |
| <div class="button-row"> |
| <a class="button" href="#details" id="show-details" title="Show detailed results data.">Details</a> |
| </div> |
| </div> |
| </section> |
| |
| <section id="details" data-title="Results Details"> |
| <a href="#home" class="logo"> |
| <img srcset="resources/logo@2x.png 2x" src="resources/logo.png" alt="Speedometer" /> |
| <div class="version">3.0</div> |
| </a> |
| <div class="section-grid"> |
| <h1 class="section-header">Detailed Results</h1> |
| <div class="section-content all-metric-results"> |
| <div class="aggregated-metric-result"> |
| <h2>Geomean</h2> |
| <div id="geomean-chart"></div> |
| <h2>Tests</h2> |
| <div id="tests-chart"></div> |
| </div> |
| <br /> |
| <h2>Detailed Metrics</h2> |
| <div id="metrics-results"></div> |
| </div> |
| <div class="buttons section-footer"> |
| <div class="button-row"> |
| <a class="button" href="#summary" title="Go back to the simplified summary view.">Summary</a> |
| </div> |
| <div class="button-row export-buttons"> |
| <button id="copy-full-json" title="Copy full result metrics as json string.">Copy JSON</button> |
| <a class="button" id="download-full-json" title="Download full result metrics as json string.">Download JSON</a> |
| <a class="button" id="download-classic-json" title="Download backwards-compatible result metrics as json string.">Download Classic JSON</a> |
| <a class="button" id="download-csv" title="Download all result metrics as CSV string.">Download CSV</a> |
| <button id="copy-csv" title="Copy all result metrics as CSV string.">Copy CSV</button> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
| </body> |
| </html> |
