Working member cards and assignment groups, some formatting

This commit is contained in:
2025-11-27 23:20:08 -05:00
parent 7cf882959b
commit 441ae31eb6
4 changed files with 451 additions and 237 deletions

View File

@@ -1,42 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<title>War Dashboard</title>
<link rel="stylesheet" href="/static/styles.css">
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<div class="container">
<!-- Top bar: Title + Refresh Interval -->
<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">
<input type="number" id="refresh-interval" value="10" min="1" />
</div>
</div>
<!-- Faction row -->
<div class="faction-row">
<!-- Friendly Faction -->
<div class="faction-card">
<h2>Friendly Faction</h2>
<input type="number" id="friendly-id" placeholder="Faction ID">
<button id="friendly-populate-btn">Populate Friendly</button>
<button id="friendly-status-btn">Start Refresh</button>
<div id="friendly-container" class="members-container"></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>
<!-- Enemy Faction -->
<div class="faction-card">
<h2>Enemy Faction</h2>
<input type="number" id="enemy-id" placeholder="Faction ID">
<button id="enemy-populate-btn">Populate Enemy</button>
<button id="enemy-status-btn">Start Refresh</button>
<div id="enemy-container" class="members-container"></div>
</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>