Zakaria
106 lines
5.3 KiB
HTML
106 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Life Lab: Conway's Game of Life</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<nav class="topbar" aria-label="Life Lab navigation">
|
|
<div class="brand">
|
|
<div class="mark" aria-hidden="true">L</div>
|
|
<div>
|
|
<strong>Life Lab</strong>
|
|
<span>Conway's Game of Life for curious families</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-pill"><i class="dot" aria-hidden="true"></i><span id="runStatus">Paused - ready to experiment</span></div>
|
|
</nav>
|
|
|
|
<section class="hero" aria-labelledby="title">
|
|
<div class="intro">
|
|
<div>
|
|
<div class="eyebrow">Family science-project showcase</div>
|
|
<h1 id="title">A tiny universe where patterns wake up.</h1>
|
|
<p class="lede">Click or drag cells to build a creature, press play, and watch simple rules turn into crawlers, fireworks, traffic jams, and quiet little islands.</p>
|
|
</div>
|
|
<ul class="rules" aria-label="Game of Life rules">
|
|
<li><b>2-3</b><span><strong>Living cells stay alive</strong> when they have two or three neighbors nearby.</span></li>
|
|
<li><b>3</b><span><strong>Empty spots are born</strong> when exactly three neighbors gather around them.</span></li>
|
|
<li><b>0-1</b><span><strong>Lonely cells fade</strong>; crowded cells fade too. Balance makes the best patterns.</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<section class="lab-card" aria-label="Interactive Game of Life board">
|
|
<div class="board-shell">
|
|
<div class="board-header">
|
|
<p class="board-title">LIVE CELL GRID - TAP, CLICK, OR DRAG TO DRAW</p>
|
|
<button class="button primary" id="randomBtn" type="button">Seed a tiny universe</button>
|
|
</div>
|
|
<div class="canvas-wrap">
|
|
<canvas id="lifeCanvas" width="960" height="720" aria-label="Conway's Game of Life cell board"></canvas>
|
|
</div>
|
|
<p class="caption">Tip: pause the universe, drag across the grid to draw a shape, then press play. The board wraps around at the edges like a donut-shaped planet.</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="dashboard" aria-label="Simulation controls and learning prompts">
|
|
<div class="panel">
|
|
<h2>Mission control</h2>
|
|
<p class="caption">Designed for fast experimenting: change one thing, run it, then compare what happens.</p>
|
|
<div class="control-grid">
|
|
<button class="button primary" id="playBtn" type="button">Play</button>
|
|
<button class="button" id="stepBtn" type="button">Step once</button>
|
|
<button class="button" id="clearBtn" type="button">Clear board</button>
|
|
<button class="button" id="sparkBtn" type="button">Make fireworks</button>
|
|
</div>
|
|
|
|
<div class="slider-row">
|
|
<label for="speed"><span>Universe speed</span><strong><span id="speedLabel">8</span>/12</strong></label>
|
|
<input id="speed" type="range" min="1" max="12" value="8">
|
|
</div>
|
|
|
|
<div class="theme-row" aria-label="Cell color themes">
|
|
<button class="theme" type="button" data-theme="sprout" aria-pressed="true">
|
|
<span class="swatches"><i class="swatch-sprout-a"></i><i class="swatch-sprout-b"></i></span>
|
|
<strong>Sprout</strong><span>science green</span>
|
|
</button>
|
|
<button class="theme" type="button" data-theme="nebula" aria-pressed="false">
|
|
<span class="swatches"><i class="swatch-nebula-a"></i><i class="swatch-nebula-b"></i></span>
|
|
<strong>Nebula</strong><span>arcade space</span>
|
|
</button>
|
|
<button class="theme" type="button" data-theme="sunny" aria-pressed="false">
|
|
<span class="swatches"><i class="swatch-sunny-a"></i><i class="swatch-sunny-b"></i></span>
|
|
<strong>Sunny</strong><span>friendly sparks</span>
|
|
</button>
|
|
</div>
|
|
|
|
<p class="explain" id="lessonText">Start with random cells, then watch for shapes that travel, blink, or disappear. Ask: did the universe get calmer or wilder?</p>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="stats-grid" aria-label="Live simulation statistics">
|
|
<div class="stat"><span>Generation</span><strong id="generation">0</strong></div>
|
|
<div class="stat"><span>Population</span><strong id="population">0</strong></div>
|
|
<div class="stat"><span>Births</span><strong id="births">0</strong></div>
|
|
<div class="stat"><span>Fades</span><strong id="deaths">0</strong></div>
|
|
</div>
|
|
<section class="prompt-card">
|
|
<h2>Try this together</h2>
|
|
<ul class="prompt-list">
|
|
<li><strong>Prediction round:</strong> draw ten cells and guess if the population will grow or shrink after five steps.</li>
|
|
<li><strong>Pattern hunt:</strong> look for blinkers, tiny spaceships, and stable islands that refuse to move.</li>
|
|
<li><strong>Color lab:</strong> switch themes and ask which one makes movement easiest to spot from across the room.</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|