2025-11-30 01:33:30 +00:00
|
|
|
<!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">
|
2026-01-01 03:42:46 +00:00
|
|
|
<div id="viewport-container">
|
|
|
|
|
<canvas id="game-canvas"></canvas>
|
2025-11-30 01:33:30 +00:00
|
|
|
</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>
|
2026-01-01 03:42:46 +00:00
|
|
|
<div id="stat-status" style="color: #00ff00; font-weight: bold; height: 1.2em;"></div>
|
2025-11-30 01:33:30 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="inventory-panel" class="group-box">
|
|
|
|
|
<div class="group-box-label">Inventory</div>
|
2025-12-27 00:00:28 +00:00
|
|
|
<div id="inventory-link-container" style="text-align: center; padding: 5px;">
|
|
|
|
|
<a href="#" id="inventory-link" style="color: var(--win-blue); font-weight: bold;">[ View Inventory ]</a>
|
|
|
|
|
</div>
|
2025-11-30 01:33:30 +00:00
|
|
|
</div>
|
2025-12-25 01:29:57 +00:00
|
|
|
<div id="spells-panel" class="group-box">
|
|
|
|
|
<div class="group-box-label">Spells</div>
|
|
|
|
|
<ul id="spells-list">
|
|
|
|
|
<!-- Spells will go here -->
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2025-11-30 01:33:30 +00:00
|
|
|
</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>
|
