|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Battlefield Simulator</title> |
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> |
|
<link rel="stylesheet" href="style.css"> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<header> |
|
<h1>Battlefield Simulator</h1> |
|
<div class="timer"> |
|
<span id="day-counter">Day 1 - 00:00 hours</span> |
|
<button id="pause-button">Pause</button> |
|
</div> |
|
</header> |
|
<main> |
|
<div id="map"></div> |
|
<div class="info-panel"> |
|
<div class="panel-section"> |
|
<h2>Unit Information</h2> |
|
<div id="unit-info"> |
|
<p class="no-unit-selected">Click on a unit to see details</p> |
|
</div> |
|
</div> |
|
<div class="panel-section"> |
|
<h2>Battle Statistics</h2> |
|
<div id="battle-stats"> |
|
<div class="stat-row"> |
|
<div class="stat-label">Active Units:</div> |
|
<div class="stat-value"><span id="blue-active">15</span> 🔵 vs <span id="red-active">15</span> 🔴</div> |
|
</div> |
|
<div class="stat-row"> |
|
<div class="stat-label">Casualties:</div> |
|
<div class="stat-value"><span id="blue-casualties">0</span> 🔵 | <span id="red-casualties">0</span> 🔴</div> |
|
</div> |
|
<div class="stat-row"> |
|
<div class="stat-label">Reinforcements:</div> |
|
<div class="stat-value"><span id="blue-reinforcements">0</span> 🔵 | <span id="red-reinforcements">0</span> 🔴</div> |
|
</div> |
|
<div class="stat-row"> |
|
<div class="stat-label">Active Battles:</div> |
|
<div class="stat-value"><span id="active-battles">0</span></div> |
|
</div> |
|
<div class="stat-row"> |
|
<div class="stat-label">Territory Control:</div> |
|
<div class="stat-value"> |
|
<div class="control-bar"> |
|
<div id="blue-control" class="blue-control" style="width: 50%"></div> |
|
<div id="red-control" class="red-control" style="width: 50%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
<footer> |
|
<div class="legend"> |
|
<div class="legend-item"> |
|
<div class="circle blue"></div> |
|
<span>Blue Forces</span> |
|
</div> |
|
<div class="legend-item"> |
|
<div class="circle red"></div> |
|
<span>Red Forces</span> |
|
</div> |
|
</div> |
|
</footer> |
|
</div> |
|
|
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> |
|
<script src="script.js"></script> |
|
</body> |
|
</html> |
