<!DOCTYPE html>
<html>
<head>
<title>Penger Party</title>
<script src="load.js"></script>
<link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="/static/css/rainbow.css">
</head>
<body>
<h1 class="rainbow">Penger Party</h1>
<div id="css-bullshit">
<div id="left">
<canvas id="demo-canvas"></canvas>
<h3>Instructions:</h3>
<ul>
<li>Press q, d or arrow key to move</li>
<li>Press shift key to slow down</li>
<li>Press space key to jump</li>
<li>Penger is afraid of your stinky fingers</li>
<li>Choose your username to play online</li>
</ul>
</div>
<div id="right">
<h3>Multiplayer:</h3>
<div class="info">
<p>
Play online with the pseudo name :
<input id="pseudo" placeholder="Penger Lover" />
<button id="play">Play</button>
</p>
<p>Playing map : <span id="map-name">Offline Map</span></p>
<p>Next map in : <span id="map-time">-1</span></p>
<p>Coin collected : <span id="nb-coin">0</span></p>
</div>
<div class="info">
<div>
<h3>Players:</h3>
<ul id="players">Not connected</ul>
</div>
<div>
<h3>Today leaderboard:</h3>
<ul id="leader-today"></ul>
</div>
<div>
<h3>Total leaderboard:</h3>
<ul id="leader-total"></ul>
</div>
</div>
<h3>Choose your penger:</h3>
<div>
<!-- penger images src -->
</div>
</div>
</div>
<h3><a target="_blank" href="https://n3m0.fr/">Made by </a><a target="_blank" href="https://fruitpassion.fr/">a</a><a target="_blank" href="https://n3m0.fr/"> Penger Entousiast</a></h3>
</body>
</html>