Update: more science and kid friendly
This commit is contained in:
Zakaria
+95
-50
@@ -1,60 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Conway's Game of Life</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<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>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Conway's Game of Life - for Sami </h1>
|
||||
<p>A cellular automaton simulation with WebHook</p>
|
||||
</header>
|
||||
|
||||
<div class="stats-panel">
|
||||
<div class="stat">
|
||||
<span class="stat-label">Generation:</span>
|
||||
<span id="generation">0</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">Population:</span>
|
||||
<span id="population">0</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">Births:</span>
|
||||
<span id="births">0</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">Deaths:</span>
|
||||
<span id="deaths">0</span>
|
||||
</div>
|
||||
<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 class="controls">
|
||||
<button id="startBtn">Start</button>
|
||||
<button id="pauseBtn">Pause</button>
|
||||
<button id="resetBtn">Reset</button>
|
||||
<button id="randomBtn">Random</button>
|
||||
<div class="speed-control">
|
||||
<label for="speed">Speed:</label>
|
||||
<input type="range" id="speed" min="1" max="20" value="10">
|
||||
</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 cells to build a creature, press play, and watch simple rules turn into crawlers, fireworks, traffic jams, and quiet little islands.</p>
|
||||
</div>
|
||||
|
||||
<div class="canvas-container">
|
||||
<canvas id="gameCanvas"></canvas>
|
||||
<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 OR CLICK 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, draw a few cells, then press play. The board wraps around at the edges like a donut-shaped planet.</p>
|
||||
</div>
|
||||
|
||||
<div class="presets">
|
||||
<button data-preset="glider">Glider</button>
|
||||
<button data-preset="spaceship">Spaceship</button>
|
||||
<button data-preset="pulsar">Pulsar</button>
|
||||
<button data-preset="gosper">Gosper Glider Gun</button>
|
||||
</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 sparkles</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user