122 lines
4.2 KiB
HTML
122 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Emberfall — Dashboard</title>
|
|
<link rel="stylesheet" href="/css/main.css">
|
|
</head>
|
|
<body>
|
|
<div class="game-container">
|
|
<!-- Top bar -->
|
|
<header class="top-bar">
|
|
<div class="logo">Emberfall</div>
|
|
<div class="user-info">
|
|
<span id="player-name"></span>
|
|
<a href="/api/auth/logout" id="logout-btn">Logout</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main content -->
|
|
<main class="main-content">
|
|
<!-- Stats panel -->
|
|
<section class="panel stats-panel" id="stats-panel">
|
|
<h3>Your Hero</h3>
|
|
<div id="hero-loading" class="loading">Loading...</div>
|
|
<div id="hero-error" class="error" style="display:none;"></div>
|
|
<div id="hero-stats" style="display:none;">
|
|
<div class="stat-row">
|
|
<span class="label">Name:</span>
|
|
<span id="char-name"></span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="label">Class:</span>
|
|
<span id="char-class"></span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="label">Level:</span>
|
|
<span id="char-level"></span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="label">HP:</span>
|
|
<span id="char-hp"></span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="label">Energy:</span>
|
|
<span id="char-energy"></span>
|
|
</div>
|
|
<div class="energy-bar-container">
|
|
<div class="energy-bar" id="energy-bar"></div>
|
|
</div>
|
|
<div class="energy-timer" id="energy-timer"></div>
|
|
<div class="stat-row">
|
|
<span class="label">Gold:</span>
|
|
<span id="char-gold"></span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="label">XP:</span>
|
|
<span id="char-xp"></span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="label">STR:</span><span id="char-str"></span>
|
|
<span class="label">AGI:</span><span id="char-agi"></span>
|
|
<span class="label">INT:</span><span id="char-int"></span>
|
|
<span class="label">VIT:</span><span id="char-vit"></span>
|
|
</div>
|
|
<div class="stat-row derived">
|
|
<span>ATK: <span id="derived-atk"></span></span>
|
|
<span>DEF: <span id="derived-def"></span></span>
|
|
<span>SPD: <span id="derived-spd"></span></span>
|
|
<span>Crit: <span id="derived-crit"></span>%</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Action panel (tabs: Hunt / Inventory) -->
|
|
<section class="panel action-panel" id="action-panel">
|
|
<div class="tabs" role="tablist">
|
|
<button class="tab active" data-tab="hunt" role="tab" aria-selected="true">Hunt</button>
|
|
<button class="tab" data-tab="inventory" role="tab" aria-selected="false">Inventory</button>
|
|
</div>
|
|
<div id="hunt-tab">
|
|
<div id="zone-list" class="zone-list">
|
|
<p class="loading">Loading zones...</p>
|
|
</div>
|
|
</div>
|
|
<div id="inventory-tab" style="display:none;">
|
|
<div class="inventory-container">
|
|
<div class="equipment-panel">
|
|
<h4>Equipment</h4>
|
|
<div id="equipment-slots" class="equipment-slots"></div>
|
|
</div>
|
|
<div class="inventory-grid-panel">
|
|
<h4>Items</h4>
|
|
<div id="inventory-grid" class="inventory-grid">
|
|
<p class="loading">Loading...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Combat log panel -->
|
|
<section class="panel combat-panel" id="combat-panel">
|
|
<h3>Combat Log</h3>
|
|
<div id="combat-log-list" class="combat-log-list">
|
|
<p class="loading">Loading...</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Result panel -->
|
|
<section class="panel result-panel" id="result-panel" style="display:none;">
|
|
<h3 id="result-title"></h3>
|
|
<div id="result-body"></div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/js/auth.js"></script>
|
|
<script src="/js/game.js"></script>
|
|
</body>
|
|
</html>
|