Create polished app layout and styling
This commit is contained in:
163
index.html
Normal file
163
index.html
Normal file
@@ -0,0 +1,163 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Conway's Game of Life</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A polished, static, vanilla JavaScript implementation of Conway's Game of Life."
|
||||
/>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="app-header">
|
||||
<div>
|
||||
<h1>Conway’s Game of Life</h1>
|
||||
<p class="subtitle">Vanilla JS • Canvas • Static-site ready</p>
|
||||
</div>
|
||||
<button id="theme-toggle" class="ghost" type="button" aria-label="Toggle dark mode">
|
||||
🌙 Dark mode
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<main class="app-layout">
|
||||
<section class="panel controls-panel" aria-labelledby="controls-heading">
|
||||
<h2 id="controls-heading">Controls</h2>
|
||||
<div class="row wrap">
|
||||
<button id="play-pause-btn" type="button" aria-keyshortcuts="Space">▶ Play</button>
|
||||
<button id="step-btn" type="button" aria-keyshortcuts="S">Step</button>
|
||||
<button id="clear-btn" type="button" aria-keyshortcuts="C">Clear</button>
|
||||
<button id="randomize-btn" type="button" aria-keyshortcuts="R">Randomize</button>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="speed-range">Speed: <span id="speed-value">10</span> gen/s</label>
|
||||
<input id="speed-range" type="range" min="1" max="30" step="1" value="10" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="cell-size-range">Cell size: <span id="cell-size-value">12</span> px</label>
|
||||
<input id="cell-size-range" type="range" min="6" max="24" step="1" value="12" />
|
||||
</div>
|
||||
|
||||
<div class="row wrap toggles">
|
||||
<label class="toggle">
|
||||
<input id="wrap-toggle" type="checkbox" />
|
||||
<span>Toroidal wrapping</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input id="gridline-toggle" type="checkbox" checked />
|
||||
<span>Show gridlines</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel canvas-panel" aria-labelledby="board-heading">
|
||||
<div class="canvas-header">
|
||||
<h2 id="board-heading">Board</h2>
|
||||
<p id="tool-status" class="muted">Draw mode: click and drag to paint cells.</p>
|
||||
</div>
|
||||
<div id="canvas-container" class="canvas-container">
|
||||
<canvas id="life-canvas" aria-label="Game of Life board" role="img"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="panel side-panel">
|
||||
<section aria-labelledby="status-heading">
|
||||
<h2 id="status-heading">Status</h2>
|
||||
<dl class="status-grid">
|
||||
<div>
|
||||
<dt>Generation</dt>
|
||||
<dd id="generation-count">0</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Live Cells</dt>
|
||||
<dd id="live-count">0</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Board Size</dt>
|
||||
<dd id="board-size">0 × 0</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Boundary</dt>
|
||||
<dd id="boundary-mode">Fixed</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="patterns-heading">
|
||||
<h2 id="patterns-heading">Patterns</h2>
|
||||
<div class="field">
|
||||
<label for="pattern-select">Preset pattern</label>
|
||||
<select id="pattern-select"></select>
|
||||
</div>
|
||||
<div class="row wrap">
|
||||
<button id="stamp-btn" type="button">Stamp Selected</button>
|
||||
<button id="cancel-stamp-btn" class="ghost" type="button">Cancel Stamp</button>
|
||||
</div>
|
||||
<p class="muted">
|
||||
Choose a pattern, click <strong>Stamp Selected</strong>, then click the board to place
|
||||
it.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="io-heading">
|
||||
<h2 id="io-heading">Import / Export</h2>
|
||||
<div class="field">
|
||||
<label for="io-format">Format</label>
|
||||
<select id="io-format">
|
||||
<option value="json">JSON</option>
|
||||
<option value="compact">Compact text</option>
|
||||
</select>
|
||||
</div>
|
||||
<textarea
|
||||
id="state-text"
|
||||
rows="7"
|
||||
placeholder="Exported board state appears here..."
|
||||
aria-label="Board state text"
|
||||
></textarea>
|
||||
<div class="row wrap">
|
||||
<button id="export-btn" type="button">Export</button>
|
||||
<button id="import-btn" type="button">Import</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="help-heading">
|
||||
<h2 id="help-heading">Help</h2>
|
||||
<details id="help-panel">
|
||||
<summary>Controls and shortcuts</summary>
|
||||
<p><strong>Mouse:</strong> Click and drag on the board to draw or erase cells.</p>
|
||||
<p><strong>Pattern:</strong> Select a preset and stamp it on the board.</p>
|
||||
<p>
|
||||
<strong>Shortcuts:</strong> Space (Play/Pause), S (Step), C (Clear), R (Randomize), G
|
||||
(Grid), W (Wrap), + / - (Zoom), ? (Toggle help).
|
||||
</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>Rules</summary>
|
||||
<ol>
|
||||
<li>Any live cell with 2 or 3 live neighbors survives.</li>
|
||||
<li>Any dead cell with exactly 3 live neighbors becomes alive.</li>
|
||||
<li>All other live cells die; all other dead cells stay dead.</li>
|
||||
</ol>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="about-heading">
|
||||
<h2 id="about-heading">About</h2>
|
||||
<p>
|
||||
Conway’s Game of Life is a cellular automaton devised by John Horton Conway. Complex,
|
||||
emergent behavior appears from simple local rules.
|
||||
</p>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<footer class="app-footer">
|
||||
<small>Built with HTML5 Canvas, vanilla JavaScript, and CSS.</small>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="./js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user