<!DOCTYPE html>
<html>
<head>
<title>Penger Party</title>
<script src="load.js"></script>
<style>
#demo-canvas:hover {
cursor: none
}
.penger-img {
width: 64px;
image-rendering: pixelated;
}
.players-img {
margin-right: 10px;
}
h1 {
text-align: center;
font-size: 1.5em;
margin: 0px;
}
h3 {
margin-top: 7px;
}
.info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.info > * {
margin-right: 1rem;
}
#chat {
width: 69%;
}
@media screen and (min-width: calc(800px + calc(64px * 4))) {
#css-bullshit {
content: "";
display: table;
clear: both;
}
#left {
float: left;
width: 50%;
}
#right {
float: right;
width: calc(100% - 800px - 25px);
position: absolute;
right: 0px;
}
}
</style>
</head>
<body>
<h1>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>
<!-- penger images src -->
</div>
</div>
<h3>Made by a Penger Entousiast</h3>
</body>
</html>