wasm-test/index.html.template

67 lines
2.0 KiB
Plaintext
Raw Normal View History

2024-11-15 12:29:27 +01:00
<!DOCTYPE html>
<html>
<head>
2024-11-15 20:58:15 +01:00
<title>Penger Party</title>
2024-11-15 12:29:27 +01:00
<script src="load.js"></script>
<style>
#demo-canvas:hover {
cursor: none
}
.penger-img {
width: 64px;
image-rendering: pixelated;
}
2024-11-18 15:59:28 +01:00
.players-img {
margin-right: 10px;
}
2024-11-15 20:58:15 +01:00
h1 {
text-align: center;
font-size: 1.5em;
margin: 0px;
}
2024-11-15 12:47:56 +01:00
@media screen and (min-width: calc(800px + calc(64px * 4))) {
2024-11-15 20:58:15 +01:00
#css-bullshit {
2024-11-15 12:29:27 +01:00
content: "";
display: table;
clear: both;
}
#left {
float: left;
width: 50%;
}
#right {
float: right;
2024-11-15 12:47:56 +01:00
width: calc(100% - 800px - 25px);
position: absolute;
right: 0px;
2024-11-15 12:29:27 +01:00
}
}
</style>
</head>
<body>
2024-11-15 20:58:15 +01:00
<h1>Penger Party</h1>
<div id="css-bullshit">
<div id="left">
<canvas id="demo-canvas"></canvas>
<h3>Instructions:</h3>
<p>Press q, d or arrow key to move</p>
<p>Press shift key to slow down</p>
<p>Press space key to jump</p>
<p>Penger is afraid of your stinky hand</p>
</div>
<div id="right">
2024-11-18 15:59:28 +01:00
<h3>Multiplayer:</h3>
<p>
play with the pseudo name:
<input id="pseudo" placeholder="Penger Lover" />
<button id="play">Play</button>
</p>
<p>Players:</p>
<ul id="players"></ul>
2024-11-15 20:58:15 +01:00
<h3>Choose your penger:</h3>
</div>
2024-11-15 12:29:27 +01:00
</div>
2024-11-15 20:58:15 +01:00
<h3>Made by a Penger Entousiast</h3>
2024-11-15 12:29:27 +01:00
</body>
</html>