<!-- Created with wasm-pack :) -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="apple-touch-icon" sizes="57x57" href="assets/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="assets/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="assets/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="assets/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="assets/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="167x167" href="assets/apple-touch-icon-167x167.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon-180x180.png">
    <link rel="apple-touch-icon" sizes="1024x1024" href="assets/apple-touch-icon-1024x1024.png">
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="assets/apple-touch-startup-image-320x460.png">
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="assets/apple-touch-startup-image-640x920.png">
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="assets/apple-touch-startup-image-640x1096.png">
    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="assets/apple-touch-startup-image-750x1294.png">
    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="assets/apple-touch-startup-image-1182x2208.png">
    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="assets/apple-touch-startup-image-1242x2148.png">
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="assets/apple-touch-startup-image-748x1024.png">
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="assets/apple-touch-startup-image-1496x2048.png">
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="assets/apple-touch-startup-image-768x1004.png">
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="assets/apple-touch-startup-image-1536x2008.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="228x228" href="assets/coast-228x228.png">
    <link rel="manifest" href="assets/manifest.json">
    <link rel="shortcut icon" href="assets/favicon.ico">
    <link rel="yandex-tableau-widget" href="assets/yandex-browser-manifest.json">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title">
    <meta name="application-name">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="msapplication-TileColor" content="#fff">
    <meta name="msapplication-TileImage" content="assets/mstile-144x144.png">
    <meta name="msapplication-config" content="assets/browserconfig.xml">
    <meta name="theme-color" content="#fff">
    <title>RustBoyAdvance</title>
    <style>
        body {
            background-color: #2c2946;
            font-family: Source Code, Roboto, Monospace;
            margin: 0;
            color: azure;
        }
        header {
            padding: 1em;
            padding-top: 6em;
            background-color: #13121d;
            background-image: url("icon.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 400px;
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
            box-shadow: 0.1px 2px 4px rgba(0, 0, 0, 0.7);
        }
        header h1 {
            color: azure;
            padding: .1em;
            font-size: medium;
        }
        #menu {
            padding: .1em;
        }
        #menu ul {
            list-style: none;
        }
        #menu li {
            margin: 0.2em;
        }
        #playarea {
            justify-content: center;
            margin: auto;
            display: flexbox;
        }
        #playarea.hover {
            border: rgba(9, 250, 0, 0.671);
            border-style: dashed;
            border-width: 0.1em;
        }

        #game-options {
            display: block;
        }
        #game-options > * {
            width: 100%;
            margin: 0.2em;
        }
        #screen {
            display: block;
            max-width: 960px;
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            background-color: black;
            image-rendering: optimizeSpeed;
            image-rendering: -moz-crisp-edges;
            image-rendering: -webkit-crisp-edges;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            box-shadow: 0.1px 2px 4px rgba(0, 0, 0, 0.7);
            padding: 0.2em;
        }

        #screen.hover {
            border: rgba(9, 250, 0, 0.671);
            border-style: dashed;
            border-width: 0.1em;
        }
    </style>
</head>

<body>
    <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
    <header>
        <div id="logo">
            <h1>RustBoyAdvance</h1>
        </div>
    </header>
    <section id="menu">
        <ul>
            <li class="fileInput">
                <label> BIOS </label>
                <input type="file" id="bios-file-input" />
            </li>
            <li><button id="reloadBios" class="hidden">Reload Bios</button></li>
            <li class="fileInput">
                <label> ROM </label>
                <input type="file" id="rom-file-input" />
            </li>
            <li><button id="startEmulator">Start</button></li>
            <li><button id="fps-test">FPS Test</button></li>
            <li>
                <label>Skip Bios</label>
                <input type="checkbox" id="skipBios">
            </li>
            <pre> You can also drag rom files directly into the screen </pre>
        </ul>
    </section>
    <section id="playarea">
        <pre> Built with WASM</pre>
        <canvas id="screen" width="240px" , height="160px"></canvas>
        <section id="game-options">
            <span id="fps">FPS</span>
            <label>
                <label>Max FPS</label>
                <input type="checkbox" id="maxFps">
            </label>
        </section>
    </section>
    <footer></footer>
    <script src="./bootstrap.js"></script>
</body>

</html>