<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">

    <title>MotionMark 1.0</title>

    <link rel="stylesheet" href="resources/runner/animometer.css">

    <script src="resources/strings.js" defer></script>
    <script src="resources/extensions.js" defer></script>
    <script src="resources/statistics.js" defer></script>

    <script src="resources/runner/tests.js" charset="utf-8" defer></script>
    <script src="resources/runner/animometer.js" defer></script>

    <script src="resources/runner/benchmark-runner.js" defer></script>

    <script>
        window.addEventListener("load", function() {
            // Start the fade in animation.
            document.body.classList.add("images-loaded");
        });
    </script>
</head>
<body class="showing-intro">
    <main>
        <section id="intro" class="selected">
            <svg class="logo"><use xlink:href="resources/runner/logo.svg#root"></svg>
            <div class="body">
                <p>MotionMark is a graphics benchmark that measures a browser’s capability to animate complex scenes at a target frame rate.</p>

                <p><a href="about.html">More details</a> about the benchmark are available. Bigger scores are better.</p>
                <p>For accurate results, please take your browser window full screen, or rotate your device to landscape orientation.</p>
                <p class="portrait-orientation-check"><b>Please rotate your device.</b></p>
                <button class="landscape-orientation-check" onclick="benchmarkController.startBenchmark()">Run Benchmark</button>
            </div>
        </section>

        <section id="test-container" class="frame-container"></section>

        <section id="results">
            <svg class="logo"><use xlink:href="resources/runner/logo.svg#root"></svg>
            <div class="body">
                <div class="score-container">
                    <div class="score"></div>
                    <div class="confidence"></div>
                    <div class="detail">
                        <span class="small">on a small screen (phone)</span>
                        <span class="medium">on a medium screen (laptop, tablet)</span>
                        <span class="large">on a large screen (desktop)</span>
                    </div>
                </div>
                <div class="table-container">
                    <div>
                        <table id="results-score"></table>
                        <table id="results-data"></table>
                    </div>
                    <table id="results-header"></table>
                </div>
                <button onclick="benchmarkController.startBenchmark()">Test Again</button>
            </div>
        </section>
    </main>
</body>
</html>
