113 lines
5.4 KiB
HTML
113 lines
5.4 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">
|
|
<div class="top-bar">
|
|
<h1>War Dashboard</h1>
|
|
<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 class="main-row">
|
|
<!-- LEFT: faction lists stacked vertically -->
|
|
<div class="left-col">
|
|
<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" aria-label="Friendly members"></div>
|
|
</div>
|
|
|
|
<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" aria-label="Enemy members"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT: 5 groups, each with friendly + enemy drop zones -->
|
|
<div class="right-col">
|
|
<div class="groups-grid">
|
|
<!-- Generate 5 groups -->
|
|
<div class="group" id="group-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>
|
|
|
|
<div class="group" id="group-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>
|
|
|
|
<div class="group" id="group-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>
|
|
|
|
<div class="group" id="group-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>
|
|
|
|
<div class="group" id="group-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> <!-- groups-grid -->
|
|
</div> <!-- right-col -->
|
|
</div> <!-- main-row -->
|
|
</div> <!-- container -->
|
|
|
|
<script src="/static/dashboard.js"></script>
|
|
</body>
|
|
</html>
|