feat: update homepage

2026-04-21 21:54:24 +07:00 · 2026-04-21 21:54:24 +07:00 · 84fef329e6
parent 0b9c9638b1
commit 84fef329e6
61 changed files with 756 additions and 99 deletions
--- a/.claude/skills/frontend-design
+++ b/.claude/skills/frontend-design
@ -0,0 +1 @@
+/home/usulpro/.agents/skills/frontend-design
--- a/.claude/skills/web-design-guidelines
+++ b/.claude/skills/web-design-guidelines
@ -0,0 +1 @@
+../../.agents/skills/web-design-guidelines
--- a/.gitignore
+++ b/.gitignore
@ -1,10 +1,13 @@
 node_modules/
-output/
+output/css/
 .env
 !.claude/settings.local.json

-# Generated output HTML (template + data → output)
+# Generated output HTML (template + data -> output)
 tasks/*/docs/*.output.html

-# Editor temp files (diffs, transient data)
+# Editor temp files (diffs, screenshots, transient data)
 tasks/*/temp/
+
+# PDFs are committed (available for download)
+# output/pdf/ is NOT gitignored
--- a/.goose/skills/web-design-guidelines
+++ b/.goose/skills/web-design-guidelines
@ -0,0 +1 @@
+../../.agents/skills/web-design-guidelines
--- a/.kiro/skills/web-design-guidelines
+++ b/.kiro/skills/web-design-guidelines
@ -0,0 +1 @@
+../../.agents/skills/web-design-guidelines
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -139,6 +139,8 @@ cat tasks/{type}/temp/{docId}.diff.json           # see what changed

 **Preview:** `http://localhost:3300/tasks/index.html`

+The `frontend-design` skill is installed but applies **only to `tasks/index.html`** and other UI/navigation pages. Worksheet documents (`*.template.html`) are print/PDF layouts, not web pages — web design principles do not apply to them.
+
 ## Script Principles (Orchestrator Pattern)

 Claude Code is the central orchestrator. Scripts are tools for Claude, not autonomous actors.
--- a/assets/items/freighters/pod16.png
+++ b/assets/items/freighters/pod16.png
--- a/bs-config.cjs
+++ b/bs-config.cjs
@ -8,10 +8,12 @@ module.exports = {
  },
  files: [
    "tasks/index.html",
+    "tasks/*/index.html",
    "tasks/*/docs/*.template.html",
    "tasks/*/docs/*.output.html",
    "tasks/*/editor.html",
-    "assets/**/*"
+    "assets/**/*",
+    "public/**/*"
  ],
  port: 3300,
  open: false,
--- a/output/index.html
+++ b/output/index.html
@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Math Tasks — Документы</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: 'Nunito', sans-serif;
+      background: #f5f3ff;
+      color: #1e1b4b;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 60px 24px;
+    }
+    h1 {
+      font-size: 2rem;
+      font-weight: 700;
+      margin-bottom: 8px;
+    }
+    .subtitle {
+      color: #6366f1;
+      font-size: 1.05rem;
+      margin-bottom: 48px;
+    }
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 16px;
+      width: 100%;
+      max-width: 720px;
+    }
+    .card {
+      display: block;
+      background: white;
+      border: 1px solid #e0e7ff;
+      border-radius: 12px;
+      padding: 20px 24px;
+      text-decoration: none;
+      color: #1e1b4b;
+      transition: box-shadow 0.15s, border-color 0.15s;
+    }
+    .card:hover {
+      border-color: #a5b4fc;
+      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
+    }
+    .card-title {
+      font-weight: 600;
+      font-size: 1.1rem;
+      margin-bottom: 4px;
+    }
+    .card-path {
+      font-size: 0.82rem;
+      color: #6366f1;
+      opacity: 0.7;
+    }
+  </style>
+</head>
+<body>
+  <h1>Math Tasks</h1>
+  <p class="subtitle">Документы для предпросмотра</p>
+  <div class="cards">
+    <a class="card" href="html/space-demo.html">
+      <div class="card-title">Space Demo</div>
+      <div class="card-path">html/space-demo.html</div>
+    </a>
+    <a class="card" href="html/space-worksheet.html">
+      <div class="card-title">Space Worksheet</div>
+      <div class="card-path">html/space-worksheet.html</div>
+    </a>
+    <a class="card" href="html/space-worksheet2.html">
+      <div class="card-title">Space Worksheet 2</div>
+      <div class="card-path">html/space-worksheet2.html</div>
+    </a>
+    <a class="card" href="html/space-worksheet3.html">
+      <div class="card-title">Space Worksheet 3 (9 pages)</div>
+      <div class="card-path">html/space-worksheet3.html</div>
+    </a>
+    <a class="card" href="html/test.html">
+      <div class="card-title">Test</div>
+      <div class="card-path">html/test.html</div>
+    </a>
+    <a class="card" href="html/collecting-asteroids-1.html">
+      <div class="card-title">Собери Астероиды</div>
+      <div class="card-path">html/collecting-asteroids-1.html</div>
+    </a>
+    <a class="card" href="html/collecting-asteroids-2.html">
+      <div class="card-title">Собери Астероиды v2</div>
+      <div class="card-path">html/collecting-asteroids-2.html</div>
+    </a>
+    <a class="card" href="html/collecting-asteroids-3.html">
+      <div class="card-title">Собери Астероиды v3</div>
+      <div class="card-path">html/collecting-asteroids-3.html</div>
+    </a>
+    <a class="card" href="html/space-route-1.html">
+      <div class="card-title">Проложи Маршрут</div>
+      <div class="card-path">html/space-route-1.html</div>
+    </a>
+    <a class="card" href="html/space-route-editor.html" style="border-color: #6366f1; background: #f5f3ff;">
+      <div class="card-title">Editor: Проложи Маршрут</div>
+      <div class="card-path">Resize, rotate, flip, move objects + route HL</div>
+    </a>
+    <a class="card" href="html/editor.html?file=collecting-asteroids-3.html" style="border-color: #6366f1; background: #f5f3ff;">
+      <div class="card-title">Editor: Собери Астероиды v3</div>
+      <div class="card-path">Drag & drop asteroid positions</div>
+    </a>
+    <a class="card" href="html/editor.html?file=collecting-asteroids-1.html" style="border-color: #6366f1; background: #f5f3ff;">
+      <div class="card-title">Editor: Собери Астероиды</div>
+      <div class="card-path">Drag & drop asteroid positions</div>
+    </a>
+  </div>
+</body>
+</html>
--- a/output/pdf/collecting-asteroids-1.pdf
+++ b/output/pdf/collecting-asteroids-1.pdf
--- a/output/pdf/collecting-asteroids-1.template.pdf
+++ b/output/pdf/collecting-asteroids-1.template.pdf
--- a/output/pdf/collecting-asteroids-2.pdf
+++ b/output/pdf/collecting-asteroids-2.pdf
--- a/output/pdf/collecting-asteroids-2.template.pdf
+++ b/output/pdf/collecting-asteroids-2.template.pdf
--- a/output/pdf/collecting-asteroids-3.pdf
+++ b/output/pdf/collecting-asteroids-3.pdf
--- a/output/pdf/collecting-asteroids-3.template.pdf
+++ b/output/pdf/collecting-asteroids-3.template.pdf
--- a/output/pdf/space-demo.pdf
+++ b/output/pdf/space-demo.pdf
--- a/output/pdf/space-exploration-1.template.pdf
+++ b/output/pdf/space-exploration-1.template.pdf
--- a/output/pdf/space-route-1.pdf
+++ b/output/pdf/space-route-1.pdf
--- a/output/pdf/space-route-1.template.pdf
+++ b/output/pdf/space-route-1.template.pdf
--- a/output/pdf/space-worksheet.pdf
+++ b/output/pdf/space-worksheet.pdf
--- a/output/pdf/space-worksheet2.pdf
+++ b/output/pdf/space-worksheet2.pdf
--- a/output/pdf/space-worksheet2.template.pdf
+++ b/output/pdf/space-worksheet2.template.pdf
--- a/output/pdf/space-worksheet3.pdf
+++ b/output/pdf/space-worksheet3.pdf
--- a/output/pdf/space-worksheet3.template.pdf
+++ b/output/pdf/space-worksheet3.template.pdf
--- a/public/decor/asteroid1.png
+++ b/public/decor/asteroid1.png
--- a/public/decor/asteroid2.png
+++ b/public/decor/asteroid2.png
--- a/public/decor/asteroid3.png
+++ b/public/decor/asteroid3.png
--- a/public/decor/asteroid4.png
+++ b/public/decor/asteroid4.png
--- a/public/decor/asteroid5.png
+++ b/public/decor/asteroid5.png
--- a/public/decor/freighters/freighter1.png
+++ b/public/decor/freighters/freighter1.png
--- a/public/decor/freighters/freighter3.png
+++ b/public/decor/freighters/freighter3.png
--- a/public/decor/freighters/freighter5.png
+++ b/public/decor/freighters/freighter5.png
--- a/public/decor/freighters/freighter7.png
+++ b/public/decor/freighters/freighter7.png
--- a/public/decor/freighters/freighter9.png
+++ b/public/decor/freighters/freighter9.png
--- a/public/decor/freighters/pod11.png
+++ b/public/decor/freighters/pod11.png
--- a/public/decor/freighters/pod2.png
+++ b/public/decor/freighters/pod2.png
--- a/public/decor/freighters/pod6.png
+++ b/public/decor/freighters/pod6.png
--- a/public/decor/planet-footer1.jpeg
+++ b/public/decor/planet-footer1.jpeg
--- a/public/decor/planet-footer2.jpeg
+++ b/public/decor/planet-footer2.jpeg
--- a/public/decor/planet-footer3.jpeg
+++ b/public/decor/planet-footer3.jpeg
--- a/public/decor/planet.jpeg
+++ b/public/decor/planet.jpeg
--- a/public/decor/planet2.jpeg
+++ b/public/decor/planet2.jpeg
--- a/public/decor/ship-header.png
+++ b/public/decor/ship-header.png
--- a/public/decor/ship.jpeg
+++ b/public/decor/ship.jpeg
--- a/public/previews/categories/collecting-asteroids.png
+++ b/public/previews/categories/collecting-asteroids.png
--- a/public/previews/categories/space-exploration.jpeg
+++ b/public/previews/categories/space-exploration.jpeg
--- a/public/previews/categories/space-exploration.png
+++ b/public/previews/categories/space-exploration.png
--- a/public/previews/categories/space-route.jpeg
+++ b/public/previews/categories/space-route.jpeg
--- a/public/previews/categories/space-route.png
+++ b/public/previews/categories/space-route.png
--- a/public/previews/docs/collecting-asteroids-1.png
+++ b/public/previews/docs/collecting-asteroids-1.png
--- a/public/previews/docs/collecting-asteroids-2.png
+++ b/public/previews/docs/collecting-asteroids-2.png
--- a/public/previews/docs/collecting-asteroids-3.png
+++ b/public/previews/docs/collecting-asteroids-3.png
--- a/public/previews/docs/space-exploration-1.png
+++ b/public/previews/docs/space-exploration-1.png
--- a/public/previews/docs/space-route-1.png
+++ b/public/previews/docs/space-route-1.png
--- a/public/previews/docs/space-worksheet2.png
+++ b/public/previews/docs/space-worksheet2.png
--- a/public/previews/docs/space-worksheet3.png
+++ b/public/previews/docs/space-worksheet3.png
--- a/skills-lock.json
+++ b/skills-lock.json
@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "skills": {
+    "web-design-guidelines": {
+      "source": "vercel-labs/agent-skills",
+      "sourceType": "github",
+      "computedHash": "f3bc47f890f42a44db1007ab390709ec368e4b8c089baee6b0007182236ac474"
+    }
+  }
+}
--- a/tasks/collecting-asteroids/index.html
+++ b/tasks/collecting-asteroids/index.html
@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Collect the Asteroids &mdash; Space Math Adventures</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg-start: #eef0ff; --bg-mid: #fef3e2; --bg-end: #e8faf3;
+      --text-deep: #2d1b69; --text-body: #3d2d6b;
+      --accent-violet: #7c3aed; --accent-orange: #f97316; --accent-teal: #0d9488; --accent-pink: #ec4899;
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: 'Nunito', sans-serif;
+      background: linear-gradient(170deg, var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
+      color: var(--text-body); min-height: 100vh; overflow-x: hidden;
+      display: flex; flex-direction: column;
+    }
+    .page-content { flex: 1; }
+    .container { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 0 24px; }
+    .back-link {
+      display: inline-flex; align-items: center; gap: 6px;
+      color: var(--accent-violet); text-decoration: none; font-size: 0.9rem; font-weight: 700;
+      padding-top: 40px; transition: color 0.15s;
+    }
+    .back-link:hover { color: var(--accent-pink); }
+    .page-header { display: flex; align-items: center; gap: 24px; padding: 20px 0 12px; }
+    .page-header img {
+      width: 110px; filter: drop-shadow(0 4px 12px rgba(124,58,237,0.2));
+      animation: headerBob 3s ease-in-out infinite;
+    }
+    @keyframes headerBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
+    .page-header h1 {
+      font-family: 'Fredoka', sans-serif; font-size: 2rem; font-weight: 700;
+      background: linear-gradient(135deg, var(--accent-orange), var(--accent-pink));
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    }
+    .header-desc {
+      color: var(--text-body); font-size: 0.95rem; line-height: 1.6; font-weight: 600;
+      padding-bottom: 28px; border-bottom: 2px solid rgba(249,115,22,0.12); margin-bottom: 28px;
+    }
+    .docs { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; }
+
+    .doc-card {
+      display: flex;
+      background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,248,240,0.8));
+      border: 2px solid transparent; border-radius: 20px;
+      overflow: hidden; position: relative;
+      transition: transform 0.2s, box-shadow 0.2s;
+      backdrop-filter: blur(8px);
+    }
+    .doc-card::before {
+      content: ''; position: absolute; inset: -2px; border-radius: 22px;
+      background: linear-gradient(135deg, var(--accent-orange), var(--accent-teal));
+      z-index: -1; opacity: 0.25; transition: opacity 0.2s;
+    }
+    .doc-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(249,115,22,0.14); }
+    .doc-card:hover::before { opacity: 0.5; }
+
+    .doc-preview {
+      width: 170px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center;
+      padding: 12px; background: linear-gradient(135deg, rgba(249,115,22,0.06), rgba(13,148,136,0.04));
+    }
+    .doc-preview img { width: 100%; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
+    .doc-info { padding: 20px 24px; flex: 1; }
+    .doc-info h3 {
+      font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 600;
+      color: var(--text-deep); margin-bottom: 6px;
+    }
+    .doc-details { font-size: 0.83rem; color: var(--text-body); line-height: 1.6; margin-bottom: 14px; }
+    .tag {
+      display: inline-block; padding: 2px 10px; border-radius: 12px;
+      font-size: 0.75rem; font-weight: 700; margin-right: 4px; margin-bottom: 4px;
+    }
+    .tag-pages { background: rgba(124,58,237,0.1); color: var(--accent-violet); border: 1px solid rgba(124,58,237,0.2); }
+    .tag-diff { background: rgba(249,115,22,0.1); color: #c2410c; border: 1px solid rgba(249,115,22,0.2); }
+    .doc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+    .doc-actions a, .doc-actions button {
+      font-size: 0.72rem; font-weight: 700; text-decoration: none;
+      padding: 4px 12px; border-radius: 8px; transition: all 0.15s;
+      display: inline-flex; align-items: center; gap: 4px;
+    }
+    .btn-preview {
+      color: var(--accent-violet); border: 2px solid rgba(124,58,237,0.25);
+      background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(124,58,237,0.02));
+    }
+    .btn-preview:hover { background: rgba(124,58,237,0.12); border-color: var(--accent-violet); }
+    .btn-pdf {
+      color: var(--accent-teal); border: 1.5px solid rgba(13,148,136,0.3);
+      background: linear-gradient(135deg, rgba(13,148,136,0.06), rgba(13,148,136,0.02));
+    }
+    .btn-pdf:hover { background: rgba(13,148,136,0.15); border-color: var(--accent-teal); }
+    .btn-pdf svg { width: 12px; height: 12px; }
+    .btn-edit {
+      color: var(--accent-orange); border: 1.5px solid rgba(249,115,22,0.3);
+      background: linear-gradient(135deg, rgba(249,115,22,0.06), rgba(249,115,22,0.02));
+      display: none;
+    }
+    .btn-edit:hover { background: rgba(249,115,22,0.15); border-color: var(--accent-orange); }
+    body.editor-mode .btn-edit { display: inline-flex; }
+
+    /* Footer */
+    .site-footer { position: relative; }
+    .planet-footer {
+      height: 140px; overflow: hidden;
+    }
+    .planet-footer img {
+      width: 100%; height: 100%; object-fit: cover;
+      mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
+      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
+    }
+    .footer-bar {
+      position: absolute; bottom: 8px; left: 0; right: 0;
+      text-align: center; z-index: 2;
+    }
+    .editor-toggle {
+      cursor: pointer; user-select: none;
+      color: rgba(255,255,255,0.4); font-size: 0.72rem; font-weight: 600;
+      display: inline-flex; align-items: center; gap: 6px;
+      transition: color 0.2s;
+    }
+    .editor-toggle:hover { color: rgba(255,255,255,0.7); }
+    .editor-toggle input { accent-color: var(--accent-orange); }
+
+    @media (max-width: 640px) {
+      .doc-card { flex-direction: column; }
+      .doc-preview { width: 100%; max-height: 160px; }
+      .page-header img { width: 70px; }
+      .page-header h1 { font-size: 1.5rem; }
+    }
+  </style>
+</head>
+<body>
+
+<div class="page-content">
+  <div class="container">
+    <a class="back-link" href="/tasks/index.html">&larr; All Categories</a>
+
+    <div class="page-header">
+      <img src="/public/previews/categories/collecting-asteroids.png" alt="">
+      <h1>Collect the Asteroids</h1>
+    </div>
+    <p class="header-desc">Match asteroid weights to cargo ship capacities. Each page has 3 ships and ~12 asteroids scattered across space. Draw lines connecting asteroids to ships so their values add up to the ship's capacity.</p>
+
+    <div class="docs">
+
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/collecting-asteroids-1.png" alt="Preview"></div>
+        <div class="doc-info">
+          <h3>Collecting Asteroids 1</h3>
+          <div class="doc-details">
+            <span class="tag tag-pages">9 pages</span>
+            <span class="tag tag-diff">Beginner &rarr; Medium</span><br>
+            Ship capacities: 4&ndash;16 &bull; Asteroid values: 1&ndash;6
+          </div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/collecting-asteroids/docs/collecting-asteroids-1.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/collecting-asteroids-1.template.pdf" download><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>PDF</a>
+            <a class="btn-edit" href="/tasks/collecting-asteroids/editor.html?file=collecting-asteroids-1">Editor</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/collecting-asteroids-2.png" alt="Preview"></div>
+        <div class="doc-info">
+          <h3>Collecting Asteroids 2</h3>
+          <div class="doc-details">
+            <span class="tag tag-pages">9 pages</span>
+            <span class="tag tag-diff">Medium &rarr; Hard</span><br>
+            Ship capacities: 10&ndash;20 &bull; Asteroid values: 2&ndash;8
+          </div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/collecting-asteroids/docs/collecting-asteroids-2.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/collecting-asteroids-2.template.pdf" download><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>PDF</a>
+            <a class="btn-edit" href="/tasks/collecting-asteroids/editor.html?file=collecting-asteroids-2">Editor</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/collecting-asteroids-3.png" alt="Preview"></div>
+        <div class="doc-info">
+          <h3>Collecting Asteroids 3</h3>
+          <div class="doc-details">
+            <span class="tag tag-pages">9 pages</span>
+            <span class="tag tag-diff">Easy &rarr; Hard</span><br>
+            Ship capacities: 5&ndash;34 &bull; Asteroid values: 1&ndash;13
+          </div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/collecting-asteroids/docs/collecting-asteroids-3.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/collecting-asteroids-3.template.pdf" download><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>PDF</a>
+            <a class="btn-edit" href="/tasks/collecting-asteroids/editor.html?file=collecting-asteroids-3">Editor</a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<div class="site-footer">
+  <div class="planet-footer">
+    <img src="/public/decor/planet-footer2.jpeg" alt="">
+  </div>
+  <div class="footer-bar">
+    <label class="editor-toggle">
+      <input type="checkbox" onchange="document.body.classList.toggle('editor-mode', this.checked)">
+      Unlock editor (local dev only)
+    </label>
+  </div>
+</div>
+
+</body>
+</html>
--- a/tasks/index.html
+++ b/tasks/index.html
@ -1,127 +1,239 @@
 <!DOCTYPE html>
-<html lang="ru">
+<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Math Tasks — Документы</title>
+  <title>Space Math Adventures</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
  <style>
+    :root {
+      --bg-start: #eef0ff; --bg-mid: #fef3e2; --bg-end: #e8faf3;
+      --text-deep: #2d1b69; --text-body: #3d2d6b;
+      --accent-violet: #7c3aed; --accent-orange: #f97316;
+      --accent-teal: #0d9488; --accent-pink: #ec4899;
+    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Nunito', sans-serif;
-      background: #f5f3ff;
-      color: #1e1b4b;
-      min-height: 100vh;
+      background: linear-gradient(170deg, var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
+      color: var(--text-body); min-height: 100vh; overflow-x: hidden;
+      display: flex; flex-direction: column;
+    }
+    .page-content { flex: 1; }
+
+    /* Floating asteroids — z-index above cards */
+    .floating-asteroid { position: fixed; z-index: 100; pointer-events: none; }
+    .floating-asteroid img { width: 100%; height: 100%; object-fit: contain; }
+    .fa-1 { width: 80px; top: 12%; left: 5%; animation: fSpin1 18s linear infinite, fDrift1 12s ease-in-out infinite; }
+    .fa-2 { width: 55px; top: 35%; right: 4%; animation: fSpin2 22s linear infinite, fDrift2 10s ease-in-out infinite; }
+    .fa-3 { width: 100px; top: 55%; left: 8%; animation: fSpin1 25s linear infinite reverse, fDrift4 16s ease-in-out infinite; }
+    .fa-4 { width: 45px; top: 75%; right: 10%; animation: fSpin2 15s linear infinite, fDrift5 11s ease-in-out infinite; }
+    .fa-5 { width: 65px; top: 5%; right: 15%; animation: fSpin1 20s linear infinite, fDrift2 11s ease-in-out infinite; }
+    @keyframes fSpin1 { to { transform: rotate(360deg); } }
+    @keyframes fSpin2 { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
+    @keyframes fDrift1 { 0%,100%{translate:0 0} 25%{translate:15px -20px} 50%{translate:-10px -35px} 75%{translate:20px -15px} }
+    @keyframes fDrift2 { 0%,100%{translate:0 0} 33%{translate:-20px 15px} 66%{translate:12px -18px} }
+    @keyframes fDrift4 { 0%,100%{translate:0 0} 20%{translate:30px 15px} 40%{translate:-15px 40px} 60%{translate:25px -10px} 80%{translate:-20px 25px} }
+    @keyframes fDrift5 { 0%,100%{translate:0 0} 25%{translate:-25px -30px} 50%{translate:20px 15px} 75%{translate:-10px -20px} }
+
+    .container { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 0 24px; }
+
+    /* Hero */
+    .hero { text-align: center; padding: 60px 0 20px; }
+    .hero-ship {
+      width: 220px; margin: 0 auto 20px; display: block;
+      filter: drop-shadow(0 8px 24px rgba(124,58,237,0.25));
+      animation: heroFloat 4s ease-in-out infinite;
+    }
+    @keyframes heroFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
+    .hero h1 {
+      font-family: 'Fredoka', sans-serif; font-size: 3rem; font-weight: 700;
+      background: linear-gradient(135deg, var(--accent-violet) 0%, var(--accent-pink) 35%, var(--accent-orange) 70%, var(--accent-teal) 100%);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+      margin-bottom: 10px; letter-spacing: -0.5px;
+    }
+    .hero p { font-size: 1.1rem; color: var(--text-body); max-width: 460px; margin: 0 auto; line-height: 1.6; font-weight: 600; }
+
+    /* Categories */
+    .categories { display: flex; flex-direction: column; gap: 24px; padding: 40px 0 60px; }
+    .cat-card {
+      display: flex;
+      background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,248,240,0.8));
+      border: 2px solid transparent; border-radius: 24px; overflow: hidden;
+      text-decoration: none; color: inherit;
+      transition: transform 0.25s, box-shadow 0.25s;
+      backdrop-filter: blur(8px); position: relative;
+    }
+    .cat-card::before {
+      content: ''; position: absolute; inset: -2px; border-radius: 26px;
+      background: linear-gradient(135deg, var(--accent-violet), var(--accent-orange), var(--accent-teal));
+      z-index: -1; opacity: 0.4; transition: opacity 0.25s;
+    }
+    .cat-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 16px 48px rgba(124,58,237,0.18), 0 4px 16px rgba(249,115,22,0.1); }
+    .cat-card:hover::before { opacity: 0.7; }
+    .cat-image {
+      width: 260px; min-height: 200px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center; padding: 20px;
+      background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(14,165,233,0.06));
+    }
+    .cat-image img {
+      max-width: 100%; max-height: 170px; object-fit: contain;
+      filter: drop-shadow(0 6px 16px rgba(0,0,0,0.15));
+      transition: transform 0.3s;
+    }
+    .cat-card:hover .cat-image img { transform: scale(1.08) rotate(-2deg); }
+    .cat-info { padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; flex: 1; }
+    .cat-info h2 { font-family: 'Fredoka', sans-serif; font-size: 1.55rem; font-weight: 600; color: var(--text-deep); margin-bottom: 8px; }
+    .cat-info .cat-desc { font-size: 0.92rem; color: var(--text-body); line-height: 1.55; margin-bottom: 16px; }
+    .cat-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; }
+    .cat-meta .tag-violet { background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(124,58,237,0.06)); color: var(--accent-violet); padding: 4px 14px; border-radius: 20px; border: 1px solid rgba(124,58,237,0.2); font-weight: 700; }
+    .cat-meta .tag-orange { background: linear-gradient(135deg, rgba(249,115,22,0.12), rgba(249,115,22,0.06)); color: #c2410c; padding: 4px 14px; border-radius: 20px; border: 1px solid rgba(249,115,22,0.2); font-weight: 700; }
+    .cat-meta .tag-teal { background: linear-gradient(135deg, rgba(13,148,136,0.12), rgba(13,148,136,0.06)); color: var(--accent-teal); padding: 4px 14px; border-radius: 20px; border: 1px solid rgba(13,148,136,0.2); font-weight: 700; }
+
+    /* Ship parade footer — flush to bottom */
+    .site-footer {
+      position: relative; z-index: 1;
+      background: linear-gradient(to bottom, transparent, rgba(124,58,237,0.04));
+    }
+    .ship-parade {
+      height: 260px;
+      overflow: hidden;
+    }
+    .ship-parade-track {
      display: flex;
-      flex-direction: column;
      align-items: center;
-      padding: 60px 24px;
+      gap: 80px;
+      height: 100%;
+      animation: shipScroll 160s linear infinite;
+      width: max-content;
    }
-    h1 { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
-    .subtitle { color: #6366f1; font-size: 1.05rem; margin-bottom: 48px; }
-    h2 {
-      font-size: 1.3rem; font-weight: 700;
-      margin: 32px 0 12px; width: 100%; max-width: 720px;
-      border-bottom: 2px solid #e0e7ff; padding-bottom: 6px;
+    .ship-parade-track img {
+      object-fit: contain;
+      filter: drop-shadow(0 6px 16px rgba(0,0,0,0.12));
+      flex-shrink: 0;
    }
-    .cards {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-      gap: 16px;
-      width: 100%; max-width: 720px;
+    .ship-parade-track img.freighter { height: 240px; }
+    .ship-parade-track img.pod { height: 80px; animation: podBob 3s ease-in-out infinite; }
+    .ship-parade-track img.pod-d1 { animation-delay: 0s; }
+    .ship-parade-track img.pod-d2 { animation-delay: -1s; }
+    .ship-parade-track img.pod-d3 { animation-delay: -2s; }
+    @keyframes shipScroll {
+      from { transform: translateX(0); }
+      to { transform: translateX(-50%); }
    }
-    .card {
-      background: white;
-      border: 1px solid #e0e7ff;
-      border-radius: 12px;
-      padding: 20px 24px;
-      color: #1e1b4b;
+    @keyframes podBob {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-14px); }
    }
-    .card-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 8px; }
-    .card-links { display: flex; gap: 12px; }
-    .card-links a {
-      font-size: 0.88rem; font-weight: 600;
-      text-decoration: none; color: #6366f1;
-      padding: 4px 12px; border-radius: 6px;
-      border: 1px solid #e0e7ff;
-      transition: background 0.15s, border-color 0.15s;
+    .footer-bar {
+      text-align: center; padding: 8px 0;
    }
-    .card-links a:hover {
-      background: #f5f3ff; border-color: #a5b4fc;
+    .footer-text {
+      font-family: 'Fredoka', sans-serif; font-size: 0.85rem;
+      color: var(--accent-violet); opacity: 0.5; font-weight: 500;
    }
-    .card-links a.edit {
-      color: #059669; border-color: #d1fae5;
-    }
-    .card-links a.edit:hover {
-      background: #ecfdf5; border-color: #6ee7b7;
+
+    @media (max-width: 640px) {
+      .cat-card { flex-direction: column; }
+      .cat-image { width: 100%; min-height: 140px; }
+      .hero h1 { font-size: 2.2rem; }
+      .hero-ship { width: 160px; }
+      .ship-parade { height: 100px; }
+      .ship-parade-track img.freighter { height: 80px; }
+      .ship-parade-track img.pod { height: 45px; }
    }
  </style>
 </head>
 <body>
-  <h1>Math Tasks</h1>
-  <p class="subtitle">Документы для предпросмотра</p>

-  <!-- Space Exploration -->
-  <h2>Исследуй Планету</h2>
-  <div class="cards">
-    <div class="card">
-      <div class="card-title">Space Exploration 1 (3 pages)</div>
-      <div class="card-links">
-        <a href="/tasks/space-exploration/docs/space-exploration-1.template.html">View</a>
-      </div>
+<!-- Floating asteroids -->
+<div class="floating-asteroid fa-1"><img src="/public/decor/asteroid1.png" alt=""></div>
+<div class="floating-asteroid fa-2"><img src="/public/decor/asteroid2.png" alt=""></div>
+<div class="floating-asteroid fa-3"><img src="/public/decor/asteroid3.png" alt=""></div>
+<div class="floating-asteroid fa-4"><img src="/public/decor/asteroid4.png" alt=""></div>
+<div class="floating-asteroid fa-5"><img src="/public/decor/asteroid5.png" alt=""></div>
+
+<div class="page-content">
+  <div class="container">
+    <div class="hero">
+      <img class="hero-ship" src="/public/decor/ship-header.png" alt="">
+      <h1>Space Math Adventures</h1>
+      <p>Printable math worksheets for kids. Explore planets, collect asteroids, navigate space routes!</p>
    </div>
-    <div class="card">
-      <div class="card-title">Space Worksheet 2 (3 pages)</div>
-      <div class="card-links">
-        <a href="/tasks/space-exploration/docs/space-worksheet2.template.html">View</a>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-title">Space Worksheet 3 (9 pages)</div>
-      <div class="card-links">
-        <a href="/tasks/space-exploration/docs/space-worksheet3.template.html">View</a>
-      </div>
+
+    <div class="categories">
+      <a class="cat-card" href="/tasks/space-exploration/">
+        <div class="cat-image">
+          <img src="/public/previews/categories/space-exploration.png" alt="Space Exploration">
+        </div>
+        <div class="cat-info">
+          <h2>Explore the Planet</h2>
+          <p class="cat-desc">Solve math problems to collect space resources! Addition, subtraction, multiplication &mdash; all wrapped in a cosmic adventure with unique alien flora icons.</p>
+          <div class="cat-meta">
+            <span class="tag-violet">3 worksheets</span>
+            <span class="tag-orange">Addition &amp; Multiplication</span>
+          </div>
+        </div>
+      </a>
+
+      <a class="cat-card" href="/tasks/collecting-asteroids/">
+        <div class="cat-image">
+          <img src="/public/previews/categories/collecting-asteroids.png" alt="Collecting Asteroids">
+        </div>
+        <div class="cat-info">
+          <h2>Collect the Asteroids</h2>
+          <p class="cat-desc">Match asteroid weights to cargo ship capacities! A puzzle-style worksheet where kids practice addition by filling cargo bays with the right combination of asteroids.</p>
+          <div class="cat-meta">
+            <span class="tag-violet">3 worksheets</span>
+            <span class="tag-teal">Addition &amp; Matching</span>
+          </div>
+        </div>
+      </a>
+
+      <a class="cat-card" href="/tasks/space-route/">
+        <div class="cat-image">
+          <img src="/public/previews/categories/space-route.png" alt="Space Route">
+        </div>
+        <div class="cat-info">
+          <h2>Plot the Route</h2>
+          <p class="cat-desc">Navigate through a hex grid of space nodes! Follow mathematical patterns between connected nodes to find the enemy pirate&rsquo;s path through the cosmos.</p>
+          <div class="cat-meta">
+            <span class="tag-violet">1 worksheet</span>
+            <span class="tag-orange">Number Patterns</span>
+          </div>
+        </div>
+      </a>
    </div>
  </div>
+</div>

-  <!-- Collecting Asteroids -->
-  <h2>Собери Астероиды</h2>
-  <div class="cards">
-    <div class="card">
-      <div class="card-title">Collecting Asteroids 1</div>
-      <div class="card-links">
-        <a href="/tasks/collecting-asteroids/docs/collecting-asteroids-1.template.html">View</a>
-        <a class="edit" href="/tasks/collecting-asteroids/editor.html?file=collecting-asteroids-1">Edit</a>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-title">Collecting Asteroids 2</div>
-      <div class="card-links">
-        <a href="/tasks/collecting-asteroids/docs/collecting-asteroids-2.template.html">View</a>
-        <a class="edit" href="/tasks/collecting-asteroids/editor.html?file=collecting-asteroids-2">Edit</a>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-title">Collecting Asteroids 3</div>
-      <div class="card-links">
-        <a href="/tasks/collecting-asteroids/docs/collecting-asteroids-3.template.html">View</a>
-        <a class="edit" href="/tasks/collecting-asteroids/editor.html?file=collecting-asteroids-3">Edit</a>
-      </div>
+<div class="site-footer">
+  <div class="ship-parade">
+    <div class="ship-parade-track">
+      <img class="freighter" src="/public/decor/freighters/freighter1.png" alt="">
+      <img class="pod pod-d1" src="/public/decor/freighters/pod2.png" alt="">
+      <img class="freighter" src="/public/decor/freighters/freighter5.png" alt="">
+      <img class="pod pod-d2" src="/public/decor/freighters/pod6.png" alt="">
+      <img class="freighter" src="/public/decor/freighters/freighter3.png" alt="">
+      <img class="pod pod-d3" src="/public/decor/freighters/pod11.png" alt="">
+      <img class="freighter" src="/public/decor/freighters/freighter7.png" alt="">
+      <img class="freighter" src="/public/decor/freighters/freighter9.png" alt="">
+      <!-- Duplicate for seamless loop -->
+      <img class="freighter" src="/public/decor/freighters/freighter1.png" alt="">
+      <img class="pod pod-d1" src="/public/decor/freighters/pod2.png" alt="">
+      <img class="freighter" src="/public/decor/freighters/freighter5.png" alt="">
+      <img class="pod pod-d2" src="/public/decor/freighters/pod6.png" alt="">
+      <img class="freighter" src="/public/decor/freighters/freighter3.png" alt="">
+      <img class="pod pod-d3" src="/public/decor/freighters/pod11.png" alt="">
+      <img class="freighter" src="/public/decor/freighters/freighter7.png" alt="">
+      <img class="freighter" src="/public/decor/freighters/freighter9.png" alt="">
    </div>
  </div>
-
-  <!-- Space Route -->
-  <h2>Проложи Маршрут</h2>
-  <div class="cards">
-    <div class="card">
-      <div class="card-title">Space Route 1</div>
-      <div class="card-links">
-        <a href="/tasks/space-route/docs/space-route-1.template.html">View</a>
-        <a class="edit" href="/tasks/space-route/editor.html?file=space-route-1">Edit</a>
-      </div>
-    </div>
+  <div class="footer-bar">
+    <span class="footer-text">Space Math Adventures &bull; Print &amp; Play</span>
  </div>
+</div>

 </body>
 </html>
--- a/tasks/space-exploration/index.html
+++ b/tasks/space-exploration/index.html
@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Explore the Planet &mdash; Space Math Adventures</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
+  <style>
+    :root { --bg-start:#eef0ff;--bg-mid:#fef3e2;--bg-end:#e8faf3;--text-deep:#2d1b69;--text-body:#3d2d6b;--accent-violet:#7c3aed;--accent-orange:#f97316;--accent-teal:#0d9488;--accent-pink:#ec4899; }
+    * { margin:0;padding:0;box-sizing:border-box; }
+    body { font-family:'Nunito',sans-serif;background:linear-gradient(170deg,var(--bg-start) 0%,var(--bg-mid) 50%,var(--bg-end) 100%);color:var(--text-body);min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column; }
+    .page-content { flex:1; }
+    .container { position:relative;z-index:1;max-width:920px;margin:0 auto;padding:0 24px; }
+    .back-link { display:inline-flex;align-items:center;gap:6px;color:var(--accent-violet);text-decoration:none;font-size:0.9rem;font-weight:700;padding-top:40px;transition:color 0.15s; }
+    .back-link:hover { color:var(--accent-pink); }
+    .page-header { display:flex;align-items:center;gap:24px;padding:20px 0 12px; }
+    .page-header img { width:100px;filter:drop-shadow(0 4px 12px rgba(124,58,237,0.2));animation:bob 3s ease-in-out infinite; }
+    @keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
+    .page-header h1 { font-family:'Fredoka',sans-serif;font-size:2rem;font-weight:700;background:linear-gradient(135deg,var(--accent-violet),var(--accent-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
+    .header-desc { color:var(--text-body);font-size:0.95rem;line-height:1.6;font-weight:600;padding-bottom:28px;border-bottom:2px solid rgba(124,58,237,0.1);margin-bottom:28px; }
+    .docs { display:flex;flex-direction:column;gap:20px;padding-bottom:40px; }
+    .doc-card { display:flex;background:linear-gradient(135deg,rgba(255,255,255,0.85),rgba(255,248,240,0.8));border:2px solid transparent;border-radius:20px;overflow:hidden;position:relative;transition:transform 0.2s,box-shadow 0.2s;backdrop-filter:blur(8px); }
+    .doc-card::before { content:'';position:absolute;inset:-2px;border-radius:22px;background:linear-gradient(135deg,var(--accent-violet),var(--accent-orange));z-index:-1;opacity:0.25;transition:opacity 0.2s; }
+    .doc-card:hover { transform:translateY(-3px);box-shadow:0 12px 36px rgba(124,58,237,0.14); }
+    .doc-card:hover::before { opacity:0.5; }
+    .doc-preview { width:170px;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;padding:12px;background:linear-gradient(135deg,rgba(124,58,237,0.06),rgba(14,165,233,0.04)); }
+    .doc-preview img { width:100%;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,0.1); }
+    .doc-info { padding:20px 24px;flex:1; }
+    .doc-info h3 { font-family:'Fredoka',sans-serif;font-size:1.2rem;font-weight:600;color:var(--text-deep);margin-bottom:6px; }
+    .doc-details { font-size:0.83rem;color:var(--text-body);line-height:1.6;margin-bottom:14px; }
+    .tag { display:inline-block;padding:2px 10px;border-radius:12px;font-size:0.75rem;font-weight:700;margin-right:4px;margin-bottom:4px; }
+    .tag-pages { background:rgba(124,58,237,0.1);color:var(--accent-violet);border:1px solid rgba(124,58,237,0.2); }
+    .tag-type { background:rgba(249,115,22,0.1);color:#c2410c;border:1px solid rgba(249,115,22,0.2); }
+    .doc-actions { display:flex;gap:8px;flex-wrap:wrap;align-items:center; }
+    .doc-actions a { font-size:0.72rem;font-weight:700;text-decoration:none;padding:4px 12px;border-radius:8px;transition:all 0.15s;display:inline-flex;align-items:center;gap:4px; }
+    .btn-preview { color:var(--accent-violet);border:2px solid rgba(124,58,237,0.25);background:linear-gradient(135deg,rgba(124,58,237,0.06),rgba(124,58,237,0.02)); }
+    .btn-preview:hover { background:rgba(124,58,237,0.12);border-color:var(--accent-violet); }
+    .btn-pdf { color:var(--accent-teal);border:1.5px solid rgba(13,148,136,0.3);background:linear-gradient(135deg,rgba(13,148,136,0.06),rgba(13,148,136,0.02)); }
+    .btn-pdf:hover { background:rgba(13,148,136,0.15);border-color:var(--accent-teal); }
+    .btn-pdf svg { width:12px;height:12px; }
+    .site-footer { position:relative; }
+    .planet-footer { height:140px;overflow:hidden; }
+    .planet-footer img { width:100%;height:100%;object-fit:cover;mask-image:linear-gradient(to bottom,transparent 0%,black 50%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 50%); }
+    .footer-bar { position:absolute;bottom:8px;left:0;right:0;text-align:center;z-index:2; }
+    .editor-toggle { cursor:pointer;user-select:none;color:rgba(255,255,255,0.4);font-size:0.72rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:color 0.2s; }
+    .editor-toggle:hover { color:rgba(255,255,255,0.7); }
+    .editor-toggle input { accent-color:var(--accent-violet); }
+    @media (max-width:640px) { .doc-card{flex-direction:column} .doc-preview{width:100%;max-height:160px} .page-header img{width:60px} .page-header h1{font-size:1.5rem} }
+  </style>
+</head>
+<body>
+<div class="page-content">
+  <div class="container">
+    <a class="back-link" href="/tasks/index.html">&larr; All Categories</a>
+    <div class="page-header">
+      <img src="/public/previews/categories/space-exploration.png" alt="">
+      <h1>Explore the Planet</h1>
+    </div>
+    <p class="header-desc">Solve math problems to collect space resources. Each worksheet has 20 problems per page with unique alien flora icons. Problems include addition, subtraction, and multiplication.</p>
+    <div class="docs">
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/space-exploration-1.png" alt=""></div>
+        <div class="doc-info">
+          <h3>Space Exploration 1</h3>
+          <div class="doc-details"><span class="tag tag-pages">3 pages</span><span class="tag tag-type">pack1 icons</span><br>Page 1: A + B &plusmn; C &bull; Page 2: 5 &times; N &plusmn; C &bull; Page 3: A &times; B &plusmn; C</div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/space-exploration/docs/space-exploration-1.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/space-exploration-1.template.pdf" download><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>PDF</a>
+          </div>
+        </div>
+      </div>
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/space-worksheet2.png" alt=""></div>
+        <div class="doc-info">
+          <h3>Space Worksheet 2</h3>
+          <div class="doc-details"><span class="tag tag-pages">3 pages</span><span class="tag tag-type">pack2 icons</span><br>Page 1: A + B + C (0&ndash;40) &bull; Page 2: fives &amp; 5&times;N &bull; Page 3: A&times;B + C&times;D</div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/space-exploration/docs/space-worksheet2.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/space-worksheet2.template.pdf" download><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>PDF</a>
+          </div>
+        </div>
+      </div>
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/space-worksheet3.png" alt=""></div>
+        <div class="doc-info">
+          <h3>Space Worksheet 3</h3>
+          <div class="doc-details"><span class="tag tag-pages">9 pages</span><span class="tag tag-type">pack1 + pack2</span><br>Combined patterns &bull; Pages 1&ndash;3 &amp; 7&ndash;9: basic ops &bull; Pages 4&ndash;6: compound</div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/space-exploration/docs/space-worksheet3.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/space-worksheet3.template.pdf" download><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>PDF</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="site-footer">
+  <div class="planet-footer"><img src="/public/decor/planet-footer1.jpeg" alt=""></div>
+  <div class="footer-bar"><label class="editor-toggle"><input type="checkbox" onchange="document.body.classList.toggle('editor-mode', this.checked)"> Unlock editor (local dev only)</label></div>
+</div>
+</body>
+</html>
--- a/tasks/space-route/index.html
+++ b/tasks/space-route/index.html
@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Plot the Route &mdash; Space Math Adventures</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
+  <style>
+    :root { --bg-start:#eef0ff;--bg-mid:#fef3e2;--bg-end:#e8faf3;--text-deep:#2d1b69;--text-body:#3d2d6b;--accent-violet:#7c3aed;--accent-orange:#f97316;--accent-teal:#0d9488;--accent-pink:#ec4899; }
+    * { margin:0;padding:0;box-sizing:border-box; }
+    body { font-family:'Nunito',sans-serif;background:linear-gradient(170deg,var(--bg-start) 0%,var(--bg-mid) 50%,var(--bg-end) 100%);color:var(--text-body);min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column; }
+    .page-content { flex:1; }
+    .container { position:relative;z-index:1;max-width:920px;margin:0 auto;padding:0 24px; }
+    .back-link { display:inline-flex;align-items:center;gap:6px;color:var(--accent-violet);text-decoration:none;font-size:0.9rem;font-weight:700;padding-top:40px;transition:color 0.15s; }
+    .back-link:hover { color:var(--accent-pink); }
+    .page-header { display:flex;align-items:center;gap:24px;padding:20px 0 12px; }
+    .page-header img { width:110px;filter:drop-shadow(0 4px 12px rgba(13,148,136,0.25));animation:bob 3s ease-in-out infinite; }
+    @keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
+    .page-header h1 { font-family:'Fredoka',sans-serif;font-size:2rem;font-weight:700;background:linear-gradient(135deg,var(--accent-teal),var(--accent-violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
+    .header-desc { color:var(--text-body);font-size:0.95rem;line-height:1.6;font-weight:600;padding-bottom:28px;border-bottom:2px solid rgba(13,148,136,0.12);margin-bottom:28px; }
+    .docs { display:flex;flex-direction:column;gap:20px;padding-bottom:40px; }
+    .doc-card { display:flex;background:linear-gradient(135deg,rgba(255,255,255,0.85),rgba(255,248,240,0.8));border:2px solid transparent;border-radius:20px;overflow:hidden;position:relative;transition:transform 0.2s,box-shadow 0.2s;backdrop-filter:blur(8px); }
+    .doc-card::before { content:'';position:absolute;inset:-2px;border-radius:22px;background:linear-gradient(135deg,var(--accent-teal),var(--accent-violet));z-index:-1;opacity:0.25;transition:opacity 0.2s; }
+    .doc-card:hover { transform:translateY(-3px);box-shadow:0 12px 36px rgba(13,148,136,0.14); }
+    .doc-card:hover::before { opacity:0.5; }
+    .doc-preview { width:170px;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;padding:12px;background:linear-gradient(135deg,rgba(13,148,136,0.06),rgba(124,58,237,0.04)); }
+    .doc-preview img { width:100%;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,0.1); }
+    .doc-info { padding:20px 24px;flex:1; }
+    .doc-info h3 { font-family:'Fredoka',sans-serif;font-size:1.2rem;font-weight:600;color:var(--text-deep);margin-bottom:6px; }
+    .doc-details { font-size:0.83rem;color:var(--text-body);line-height:1.6;margin-bottom:14px; }
+    .tag { display:inline-block;padding:2px 10px;border-radius:12px;font-size:0.75rem;font-weight:700;margin-right:4px;margin-bottom:4px; }
+    .tag-pages { background:rgba(124,58,237,0.1);color:var(--accent-violet);border:1px solid rgba(124,58,237,0.2); }
+    .tag-diff { background:rgba(13,148,136,0.1);color:var(--accent-teal);border:1px solid rgba(13,148,136,0.2); }
+    .doc-actions { display:flex;gap:8px;flex-wrap:wrap;align-items:center; }
+    .doc-actions a { font-size:0.72rem;font-weight:700;text-decoration:none;padding:4px 12px;border-radius:8px;transition:all 0.15s;display:inline-flex;align-items:center;gap:4px; }
+    .btn-preview { color:var(--accent-violet);border:2px solid rgba(124,58,237,0.25);background:linear-gradient(135deg,rgba(124,58,237,0.06),rgba(124,58,237,0.02)); }
+    .btn-preview:hover { background:rgba(124,58,237,0.12);border-color:var(--accent-violet); }
+    .btn-pdf { color:var(--accent-teal);border:1.5px solid rgba(13,148,136,0.3);background:linear-gradient(135deg,rgba(13,148,136,0.06),rgba(13,148,136,0.02)); }
+    .btn-pdf:hover { background:rgba(13,148,136,0.15);border-color:var(--accent-teal); }
+    .btn-pdf svg { width:12px;height:12px; }
+    .btn-edit { color:var(--accent-orange);border:1.5px solid rgba(249,115,22,0.3);background:linear-gradient(135deg,rgba(249,115,22,0.06),rgba(249,115,22,0.02));display:none; }
+    .btn-edit:hover { background:rgba(249,115,22,0.15);border-color:var(--accent-orange); }
+    body.editor-mode .btn-edit { display:inline-flex; }
+    .site-footer { position:relative; }
+    .planet-footer { height:140px;overflow:hidden; }
+    .planet-footer img { width:100%;height:100%;object-fit:cover;mask-image:linear-gradient(to bottom,transparent 0%,black 50%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 50%); }
+    .footer-bar { position:absolute;bottom:8px;left:0;right:0;text-align:center;z-index:2; }
+    .editor-toggle { cursor:pointer;user-select:none;color:rgba(255,255,255,0.4);font-size:0.72rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:color 0.2s; }
+    .editor-toggle:hover { color:rgba(255,255,255,0.7); }
+    .editor-toggle input { accent-color:var(--accent-teal); }
+    @media (max-width:640px) { .doc-card{flex-direction:column} .doc-preview{width:100%;max-height:160px} .page-header img{width:70px} .page-header h1{font-size:1.5rem} }
+  </style>
+</head>
+<body>
+<div class="page-content">
+  <div class="container">
+    <a class="back-link" href="/tasks/index.html">&larr; All Categories</a>
+    <div class="page-header">
+      <img src="/public/previews/categories/space-route.png" alt="">
+      <h1>Plot the Route</h1>
+    </div>
+    <p class="header-desc">Navigate through a hex grid of space nodes. The enemy pirate ship follows a hidden path &mdash; trace it by applying the mathematical operations shown on the route card.</p>
+    <div class="docs">
+      <div class="doc-card">
+        <div class="doc-preview"><img src="/public/previews/docs/space-route-1.png" alt=""></div>
+        <div class="doc-info">
+          <h3>Space Route 1</h3>
+          <div class="doc-details"><span class="tag tag-pages">9 pages</span><span class="tag tag-diff">Progressive difficulty</span><br>Node values: 3&ndash;13 &bull; Neighbor spread: 1&ndash;5<br>Route: 7&ndash;9 steps &bull; Asteroids, crystals, freighters</div>
+          <div class="doc-actions">
+            <a class="btn-preview" href="/tasks/space-route/docs/space-route-1.template.html">Preview</a>
+            <a class="btn-pdf" href="/output/pdf/space-route-1.template.pdf" download><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>PDF</a>
+            <a class="btn-edit" href="/tasks/space-route/editor.html?file=space-route-1">Editor</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="site-footer">
+  <div class="planet-footer"><img src="/public/decor/planet-footer3.jpeg" alt=""></div>
+  <div class="footer-bar"><label class="editor-toggle"><input type="checkbox" onchange="document.body.classList.toggle('editor-mode', this.checked)"> Unlock editor (local dev only)</label></div>
+</div>
+</body>
+</html>
				`@ -0,0 +1 @@`
				`/home/usulpro/.agents/skills/frontend-design`