{% load static %}
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="{% static 'css/runner.css' %}">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
    <script src="{% static 'runner.js' %}"></script>
    <style>
    html {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: hidden;
	border: 0 none;
}

body {
	margin: 0;
	padding: 0;
	border: 0 none;
	overflow-x: hidden;
	overflow-y: hidden;
	width: 100%;
	height: 600px;
}</style>
<script>
        onkeydown = function(e)
        {
            var touche = e.keyCode;
            var touche_lettre = String.fromCharCode(touche);
            gauche = false;
            haut = false;
            bas = false;
            droite = false;
                
            if(touche == 37 || touche_lettre == "Q")    //Le déplacement à gauche
                gauche = true;
            if(touche == 38 || touche_lettre == "Z")
                haut = true;
            if(touche == 39 || touche_lettre == "D")    //Le déplacement à droite
                droite = true;
            if(touche == 40 || touche_lettre == "S")    //Le déplacement en bas
                bas = true;
    
            if(gauche || droite || haut || bas) // Bloquer le défilement
                e.preventDefault()
                return false;
        }
    </script>
</head>

<body id="t" class="offline">
    <div id="messageBox" class="sendmessage">
         <h1 style="text-align: center;font-family: 'Open Sans', sans-serif;">Press up arrow to start</h1>
         <div class="niokbutton" onclick="okbuttonsend()"></div>
    </div>
    <div id="main-frame-error" class="interstitial-wrapper">
        <div id="main-content">
            <div class="icon icon-offline" alt=""></div>
        </div>
        <div id="offline-resources">
                <img id="offline-resources-1x" src="{% static 'runner-assets/default_100_percent/100-offline-sprite.png' %}">
                <img id="offline-resources-2x" src="{% static 'runner-assets/default_200_percent/200-offline-sprite.png' %}">
            <template id="audio-resources">
                <audio id="offline-sound-press" src="data:audio/mpeg;base64,[encoded data, 6904 characters]"></audio>
                <audio id="offline-sound-hit" src="data:audio/mpeg;base64,[encoded data, 9616 characters]"></audio>
                <audio id="offline-sound-reached" src="data:audio/mpeg;base64,[encoded data, 12336 characters]"></audio>
            </template>
        </div>
    </div>
</body>

<script>
    document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 32) {
        var box = document.getElementById("messageBox");
        box.style.visibility="hidden";
    }
};
</script>
    
</html>