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>
|
||||||
296
style.css
Normal file
296
style.css
Normal file
@@ -0,0 +1,296 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #f2f4f8;
|
||||||
|
--panel: #ffffff;
|
||||||
|
--panel-muted: #f8fafc;
|
||||||
|
--text: #10203a;
|
||||||
|
--muted: #5d6b82;
|
||||||
|
--primary: #0f62fe;
|
||||||
|
--primary-hover: #054ada;
|
||||||
|
--border: #d7deea;
|
||||||
|
--canvas-bg: #ffffff;
|
||||||
|
--cell: #2c73ff;
|
||||||
|
--cell-glow: rgba(44, 115, 255, 0.3);
|
||||||
|
--danger: #d92d20;
|
||||||
|
--focus: #7aa3ff;
|
||||||
|
--shadow: 0 10px 30px rgba(16, 32, 58, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg: #0d1420;
|
||||||
|
--panel: #111c2d;
|
||||||
|
--panel-muted: #182538;
|
||||||
|
--text: #e6eefc;
|
||||||
|
--muted: #a8b6ce;
|
||||||
|
--primary: #6aa8ff;
|
||||||
|
--primary-hover: #82b7ff;
|
||||||
|
--border: #24354f;
|
||||||
|
--canvas-bg: #0b1220;
|
||||||
|
--cell: #7fb0ff;
|
||||||
|
--cell-glow: rgba(127, 176, 255, 0.35);
|
||||||
|
--danger: #ff6b6b;
|
||||||
|
--focus: #9fc0ff;
|
||||||
|
--shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: radial-gradient(circle at 20% 0%, #dbe8ff33 0%, transparent 35%), var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family:
|
||||||
|
Inter,
|
||||||
|
system-ui,
|
||||||
|
-apple-system,
|
||||||
|
"Segoe UI",
|
||||||
|
Roboto,
|
||||||
|
"Helvetica Neue",
|
||||||
|
Arial,
|
||||||
|
sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header,
|
||||||
|
.app-footer {
|
||||||
|
width: min(1280px, 94vw);
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header {
|
||||||
|
padding: 1.2rem 0 0.6rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(1.5rem, 2.2vw, 2rem);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin: 0.25rem 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-layout {
|
||||||
|
width: min(1280px, 94vw);
|
||||||
|
margin: 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 280px 1fr 320px;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: var(--panel);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel h2 {
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-panel {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-container {
|
||||||
|
background: var(--canvas-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#life-canvas {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
touch-action: none;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
image-rendering: crisp-edges;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
margin-top: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.35rem;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"],
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
textarea,
|
||||||
|
input {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.45rem 0.75rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 140ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: var(--primary-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.ghost {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text);
|
||||||
|
border-color: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.ghost:hover {
|
||||||
|
background: var(--panel-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea,
|
||||||
|
select,
|
||||||
|
input[type="range"] {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--panel-muted);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
padding: 0.6rem;
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.45rem;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggles {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 0.65rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-grid div {
|
||||||
|
background: var(--panel-muted);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.55rem 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-grid dt {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-grid dd {
|
||||||
|
margin: 0.15rem 0 0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.muted {
|
||||||
|
margin: 0.6rem 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.87rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
details {
|
||||||
|
background: var(--panel-muted);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.55rem 0.7rem;
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
padding-left: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-footer {
|
||||||
|
padding: 1rem 0 1.5rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus-visible,
|
||||||
|
select:focus-visible,
|
||||||
|
textarea:focus-visible,
|
||||||
|
input:focus-visible,
|
||||||
|
summary:focus-visible {
|
||||||
|
outline: 2px solid var(--focus);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1120px) {
|
||||||
|
.app-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-panel {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-panel {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-panel {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user