333/civ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add initial styles for dark theme and layout structure in styles.css

Browse source
This commit is contained in:
33333-33333 2026-05-12 13:03:47 +09:00
commit 7b5fdad378
3 changed files with 1864 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

91
index.html Normal file
View file

@ -0,0 +1,91 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Emergent Civilization Simulation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="app">
<aside class="sidebar" aria-label="Simulation controls">
<div class="brand">
<h1>Civil Emergence Lab</h1>
<p>Local rules, genealogical cultures, settlement pressure, migration, and collapse.</p>
</div>
<section class="panel controls">
<div class="row">
<button id="toggleRun" class="primary" type="button">Pause</button>
<button id="stepOnce" type="button">Step</button>
<button id="resetWorld" type="button">Reset</button>
</div>
<div class="row">
<button id="saveWorld" type="button">Save</button>
<button id="loadWorld" type="button">Load</button>
<button id="clearSave" type="button">Clear</button>
</div>
<label>
Speed
<input id="speed" type="range" min="1" max="12" value="5">
</label>
<label>
Initial groups
<input id="agentCount" type="range" min="500" max="20000" step="500" value="5000">
</label>
<label>
World scale
<select id="worldSize">
<option value="128">128 x 128</option>
<option value="160" selected>160 x 160</option>
<option value="220">220 x 220</option>
<option value="280">280 x 280</option>
</select>
</label>
<label>
View
<select id="viewMode">
<option value="terrain">Terrain</option>
<option value="resources">Resources</option>
<option value="ethnicity">Ethnicity</option>
<option value="pheromone">Trade trails</option>
<option value="pressure">Population pressure</option>
<option value="cities">Cities</option>
</select>
</label>
</section>
<section class="panel stats" aria-live="polite">
<dl>
<div><dt>Year</dt><dd id="year">0</dd></div>
<div><dt>Total population</dt><dd id="population">0</dd></div>
<div><dt>Active groups</dt><dd id="activeGroups">0</dd></div>
<div><dt>Urban population</dt><dd id="urbanPopulation">0</dd></div>
<div><dt>Ethnicities</dt><dd id="ethnicities">0</dd></div>
<div><dt>Cities</dt><dd id="cities">0</dd></div>
<div><dt>Trade routes</dt><dd id="routes">0</dd></div>
<div><dt>Collapse deaths</dt><dd id="deaths">0</dd></div>
<div><dt>Frame cost</dt><dd id="frameCost">0ms</dd></div>
</dl>
</section>
<section class="panel ledger">
<h2>Dominant lineages</h2>
<ol id="ethnicityList"></ol>
</section>
</aside>
<section class="sim">
<canvas id="world" width="960" height="960" aria-label="Civilization simulation canvas"></canvas>
<div class="legend" id="legend"></div>
<div class="tooltip" id="tooltip" hidden></div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>