<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.min.js"></script>
        <style>
            html, body {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #header {
				width: 100%;
                text-align: center;
			}
			.area {
                position: absolute;
                margin-top: 10px;
                line-height: 1px;
				width: 300px;
				margin: 0 auto;
				left: 50%;
				transform: translateX(-50%);
            }
            .block {
                width: 12%;
                background-color: #ac806d;
                z-index: 0;
                display: inline-block;
                padding: 0;
                font-size: 20px;
                text-align: center;
            }
            .block:hover {
                cursor: pointer;
            }
            .uneven {
                background-color: #e8e2a4;
            }
            .move {
                border:  1px solid #b34545;
                background-color: #e09494;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="header"><h1>Chess</h1></div>
		<div id="playarea" class="area">
{{ html|safe }}
        </div>
		<script type="text/javascript" src="{{ STATIC_URL }}js/chess/Empty.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}js/chess/King.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}js/chess/Queen.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}js/chess/Rook.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}js/chess/Knight.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}js/chess/Bishop.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}js/chess/Pawn.js"></script>
        <script type="text/javascript" src="{{ STATIC_URL }}js/chess.js"></script>
    </body>
</html>
