64 lines
2.7 KiB
HTML
64 lines
2.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Castle of the Winds Clone</title>
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="game-container" class="window">
|
||
|
|
<div class="title-bar">
|
||
|
|
<div class="title-bar-text">Castle of the Winds Clone</div>
|
||
|
|
<div class="title-bar-controls">
|
||
|
|
<button aria-label="Minimize"></button>
|
||
|
|
<button aria-label="Maximize"></button>
|
||
|
|
<button aria-label="Close"></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="window-body">
|
||
|
|
<div id="main-layout">
|
||
|
|
<div id="viewport-container" class="inset-border">
|
||
|
|
<canvas id="game-canvas" width="640" height="480"></canvas>
|
||
|
|
</div>
|
||
|
|
<div id="sidebar">
|
||
|
|
<div id="stats-panel" class="group-box">
|
||
|
|
<div class="group-box-label">Stats</div>
|
||
|
|
<div id="stats-content">
|
||
|
|
<div>Floor: <span id="stat-floor">1</span></div>
|
||
|
|
<div>Gold: <span id="stat-gold">0</span></div>
|
||
|
|
<div>Level: <span id="stat-level">1</span></div>
|
||
|
|
<div>XP: <span id="stat-xp">0</span>/<span id="stat-max-xp">10</span></div>
|
||
|
|
<br>
|
||
|
|
<div>STR: <span id="stat-str">10</span></div>
|
||
|
|
<div>AC: <span id="stat-ac">0</span></div>
|
||
|
|
<div>INT: <span id="stat-int">10</span></div>
|
||
|
|
<div>DEX: <span id="stat-dex">10</span></div>
|
||
|
|
<div>CON: <span id="stat-con">10</span></div>
|
||
|
|
<br>
|
||
|
|
<div>HP: <span id="stat-hp">10</span>/<span id="stat-max-hp">10</span></div>
|
||
|
|
<div>Mana: <span id="stat-mana">10</span>/<span id="stat-max-mana">10</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="inventory-panel" class="group-box">
|
||
|
|
<div class="group-box-label">Inventory</div>
|
||
|
|
<ul id="inventory-list">
|
||
|
|
<!-- Items will go here -->
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="message-log" class="inset-border">
|
||
|
|
<div>Welcome to the Castle of the Winds Clone!</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="status-bar">
|
||
|
|
<p class="status-bar-field">Ready</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="module" src="src/main.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|