formatting
This commit is contained in:
@@ -1,78 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Flocking Boids - WASM</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<canvas id="canvas"></canvas>
|
||||
<aside id="controls" aria-expanded="true">
|
||||
<div id="controlsHeader">
|
||||
<h2 id="controlsTitle">Flocking Controls</h2>
|
||||
<button id="controlsToggle" type="button" aria-controls="controlsBody" aria-expanded="true" aria-label="Collapse controls">›</button>
|
||||
<canvas id="canvas"></canvas>
|
||||
<aside id="controls" aria-expanded="true">
|
||||
<div id="controlsHeader">
|
||||
<h2 id="controlsTitle">Flocking Controls</h2>
|
||||
<button
|
||||
id="controlsToggle"
|
||||
type="button"
|
||||
aria-controls="controlsBody"
|
||||
aria-expanded="true"
|
||||
aria-label="Collapse controls"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
<div id="controlsBody">
|
||||
<div class="control-group">
|
||||
<label for="alignSlider">Alignment</label>
|
||||
<input
|
||||
type="range"
|
||||
id="alignSlider"
|
||||
min="0"
|
||||
max="5"
|
||||
step="0.1"
|
||||
value="1.0"
|
||||
/>
|
||||
<div class="value-display">
|
||||
<span class="stat-label">Weight:</span>
|
||||
<strong id="alignValue">1.00</strong>
|
||||
</div>
|
||||
<div id="controlsBody">
|
||||
<div class="control-group">
|
||||
<label for="alignSlider">Alignment</label>
|
||||
<input type="range" id="alignSlider" min="0" max="5" step="0.1" value="1.0">
|
||||
<div class="value-display">
|
||||
<span class="stat-label">Weight:</span>
|
||||
<strong id="alignValue">1.00</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="cohesionSlider">Cohesion</label>
|
||||
<input type="range" id="cohesionSlider" min="0" max="5" step="0.1" value="0.9">
|
||||
<div class="value-display">
|
||||
<span class="stat-label">Weight:</span>
|
||||
<strong id="cohesionValue">0.90</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="separationSlider">Separation</label>
|
||||
<input type="range" id="separationSlider" min="0" max="5" step="0.1" value="1.4">
|
||||
<div class="value-display">
|
||||
<span class="stat-label">Weight:</span>
|
||||
<strong id="separationValue">1.40</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="addBtn">Boid Count (Step: 10)</label>
|
||||
<div class="button-group">
|
||||
<button id="removeBtn" type="button">−10 Remove</button>
|
||||
<button id="addBtn" type="button">+10 Add</button>
|
||||
</div>
|
||||
<div class="value-display">
|
||||
<span class="stat-label">Total:</span>
|
||||
<strong id="boidCount">250</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Canvas:</span>
|
||||
<span class="stat-value" id="canvasSize">0x0</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">FPS:</span>
|
||||
<span class="stat-value" id="fps">60</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label for="cohesionSlider">Cohesion</label>
|
||||
<input
|
||||
type="range"
|
||||
id="cohesionSlider"
|
||||
min="0"
|
||||
max="5"
|
||||
step="0.1"
|
||||
value="0.9"
|
||||
/>
|
||||
<div class="value-display">
|
||||
<span class="stat-label">Weight:</span>
|
||||
<strong id="cohesionValue">0.90</strong>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="separationSlider">Separation</label>
|
||||
<input
|
||||
type="range"
|
||||
id="separationSlider"
|
||||
min="0"
|
||||
max="5"
|
||||
step="0.1"
|
||||
value="1.4"
|
||||
/>
|
||||
<div class="value-display">
|
||||
<span class="stat-label">Weight:</span>
|
||||
<strong id="separationValue">1.40</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="addBtn">Boid Count (Step: 10)</label>
|
||||
<div class="button-group">
|
||||
<button id="removeBtn" type="button">−10 Remove</button>
|
||||
<button id="addBtn" type="button">+10 Add</button>
|
||||
</div>
|
||||
<div class="value-display">
|
||||
<span class="stat-label">Total:</span>
|
||||
<strong id="boidCount">250</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Canvas:</span>
|
||||
<span class="stat-value" id="canvasSize">0x0</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">FPS:</span>
|
||||
<span class="stat-value" id="fps">60</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<script type="module" src="script.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user