pirate/index.html
2025-02-06 14:56:52 +01:00

56 lines
3.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no" /> -->
<link rel="stylesheet" href="./css/main.css">
</head>
<body style="overflow:hidden; background: black; margin: 0; position: relative;">
<div id="main">
Pirate!!!
<div id="map"></div>
</div>
<div id="bottomHud" style="position: fixed; bottom: 5px; left: 0px; left: 5px; z-index: 1000;">
<div style="position: absolute; top: 0px; left: 95px; background: #ffffff87; width: 140px; height: 140px; border-radius: 100px;">
<img style="width: 140px; position: absolute;" src="/img/kompassRing.png">
<img id="kompoassnadel" style="width: 140px; position: absolute;" src="/img/kompassPfeilGold.png">
</div>
<table style="margin-bottom: 5px; padding: 5px; border-radius: 5px; border: 3px solid #0000002e; background: rgb(26 26 26 / 49%); border-bottom-right-radius: 0px;">
<tr>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_head"></td>
</tr>
<tr>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_chest"></td>
</tr>
<tr>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_legs"></td>
</tr>
<tr>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_boots"></td>
</tr>
</table>
<table style="position: absolute; bottom:0px; left:72px; margin-bottom: 5px; padding: 5px; border-radius: 5px; border: 3px solid #0000002e; border-left: 0px; background: rgb(26 26 26 / 49%); border-bottom-left-radius: 0px; border-top-left-radius: 0px;">
<tr>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_weapon"><span style="position: absolute; top:8px; left: 8px; font-family: monospace; font-size: 1.2em; font-weight: bold; color: gray;">Space</span></td>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_tool"></td>
<td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_item"></td>
</tr>
</table>
<div style="position: absolute; background-color: red; width: 100px; height: 13px; left: 90px; bottom: 95px;"></div>
<div class="hpBar" style="position: absolute; background-color: green; width: 80px; height: 13px; left: 90px; bottom: 95px;"></div>
<div style="position: absolute; width: 99px; border:1px solid black; height: 12px; left: 90px; bottom: 95px;"></div>
</div>
<!-- jQuery and co -->
<script src="./js/jquery.min.js"></script>
<script src="./js/socket.io-2.2.0.js"></script>
<script src="./js/main.js"></script>
</body>
</html>