136 lines
5.8 KiB
HTML
136 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>War Dashboard</title>
|
|
<link rel="stylesheet" href="/static/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
|
|
<!-- Top bar: Title + interval + Reset button -->
|
|
<div class="top-bar">
|
|
<h1>War Dashboard</h1>
|
|
|
|
<div class="top-controls">
|
|
<button id="reset-groups-btn" class="reset-btn">Reset Groups</button>
|
|
|
|
<div class="interval-box">
|
|
<label for="refresh-interval">Refresh Interval (seconds)</label>
|
|
<input type="number" id="refresh-interval" value="10" min="1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-row">
|
|
|
|
<!-- LEFT COLUMN -->
|
|
<div class="left-col">
|
|
|
|
<!-- FRIENDLY -->
|
|
<div class="faction-card small">
|
|
<h2>Friendly Faction</h2>
|
|
<div class="controls">
|
|
<input type="number" id="friendly-id" placeholder="Faction ID" />
|
|
<button id="friendly-populate-btn">Populate</button>
|
|
<button id="friendly-status-btn">Start Refresh</button>
|
|
</div>
|
|
|
|
<div id="friendly-container"
|
|
class="member-list friendly-zone"
|
|
aria-label="Friendly members"></div>
|
|
</div>
|
|
|
|
<!-- ENEMY -->
|
|
<div class="faction-card small">
|
|
<h2>Enemy Faction</h2>
|
|
<div class="controls">
|
|
<input type="number" id="enemy-id" placeholder="Faction ID" />
|
|
<button id="enemy-populate-btn">Populate</button>
|
|
<button id="enemy-status-btn">Start Refresh</button>
|
|
</div>
|
|
|
|
<div id="enemy-container"
|
|
class="member-list enemy-zone"
|
|
aria-label="Enemy members"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT COLUMN: BATTLE GROUPS -->
|
|
<div class="right-col">
|
|
<div class="groups-grid">
|
|
|
|
<!-- Group 1 -->
|
|
<div class="group" id="group-1" data-id="1">
|
|
<div class="group-title">Group 1</div>
|
|
<div class="group-zones">
|
|
<div class="drop-zone friendly-zone" data-zone="friendly" data-group="1" id="group-1-friendly">
|
|
<div class="zone-label">Friendly</div>
|
|
</div>
|
|
<div class="drop-zone enemy-zone" data-zone="enemy" data-group="1" id="group-1-enemy">
|
|
<div class="zone-label">Enemy</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Group 2 -->
|
|
<div class="group" id="group-2" data-id="2">
|
|
<div class="group-title">Group 2</div>
|
|
<div class="group-zones">
|
|
<div class="drop-zone friendly-zone" data-zone="friendly" data-group="2" id="group-2-friendly">
|
|
<div class="zone-label">Friendly</div>
|
|
</div>
|
|
<div class="drop-zone enemy-zone" data-zone="enemy" data-group="2" id="group-2-enemy">
|
|
<div class="zone-label">Enemy</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Group 3 -->
|
|
<div class="group" id="group-3" data-id="3">
|
|
<div class="group-title">Group 3</div>
|
|
<div class="group-zones">
|
|
<div class="drop-zone friendly-zone" data-zone="friendly" data-group="3" id="group-3-friendly">
|
|
<div class="zone-label">Friendly</div>
|
|
</div>
|
|
<div class="drop-zone enemy-zone" data-zone="enemy" data-group="3" id="group-3-enemy">
|
|
<div class="zone-label">Enemy</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Group 4 -->
|
|
<div class="group" id="group-4" data-id="4">
|
|
<div class="group-title">Group 4</div>
|
|
<div class="group-zones">
|
|
<div class="drop-zone friendly-zone" data-zone="friendly" data-group="4" id="group-4-friendly">
|
|
<div class="zone-label">Friendly</div>
|
|
</div>
|
|
<div class="drop-zone enemy-zone" data-zone="enemy" data-group="4" id="group-4-enemy">
|
|
<div class="zone-label">Enemy</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Group 5 -->
|
|
<div class="group" id="group-5" data-id="5">
|
|
<div class="group-title">Group 5</div>
|
|
<div class="group-zones">
|
|
<div class="drop-zone friendly-zone" data-zone="friendly" data-group="5" id="group-5-friendly">
|
|
<div class="zone-label">Friendly</div>
|
|
</div>
|
|
<div class="drop-zone enemy-zone" data-zone="enemy" data-group="5" id="group-5-enemy">
|
|
<div class="zone-label">Enemy</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/dashboard.js"></script>
|
|
</body>
|
|
</html>
|