mirror-speedometer/index.html

<!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 next">next</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="leakedIframes"></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" class="valid">
                <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 id="invalid-score-text">
                    One or more subtests produced no duration.<br />
                    Please check your <a href="./instructions.html" target="_blank">browser settings</a> and re-run the benchmark.<br />
                </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="non-standard-params">
                            <h2>Non-standard Parameters</h2>
                            <p>
                                Speedometer ran with non-standard parameters.<br />
                                The results are likely not comparable to default runs.
                            </p>
                            <table id="non-standard-params-table">
                                <thead>
                                    <tr>
                                        <th>Param</th>
                                        <th>Value</th>
                                        <th>Default</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="aggregated-metric-result">
                            <h2>Aggregate Metric</h2>
                            <div id="geomean-chart"></div>
                            <h2>Test Metrics Overview</h2>
                            <div id="tests-chart"></div>
                        </div>
                        <br />
                        <h2>Test Metrics Details</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>