commit f255073b97a897b613c59dff03b37944948a91bc Author: Aman Date: Wed Jul 8 19:45:25 2026 +0000 Create polished app layout and styling diff --git a/index.html b/index.html new file mode 100644 index 0000000..c2363be --- /dev/null +++ b/index.html @@ -0,0 +1,163 @@ + + + + + + Conway's Game of Life + + + + +
+
+

Conway’s Game of Life

+

Vanilla JS • Canvas • Static-site ready

+
+ +
+ +
+
+

Controls

+
+ + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+
+

Board

+

Draw mode: click and drag to paint cells.

+
+
+ +
+
+ + +
+ + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..4b2fa16 --- /dev/null +++ b/style.css @@ -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; + } +}