feat: promotion
This commit is contained in:
parent
df04cb1d09
commit
15077adf47
|
|
@ -0,0 +1,708 @@
|
|||
---
|
||||
name: worksheet-layout
|
||||
description: >
|
||||
Unified layout system for printable A4 math worksheets. Use this skill when
|
||||
creating or editing template.html files, building editors (tune or main),
|
||||
writing generate.mjs scripts, or working with data.json for any task type.
|
||||
Covers: page structure, coordinate system, units, element hierarchy, grouping,
|
||||
z-index layering, data.json delta format, merge operations, editor helpers API,
|
||||
and mandatory e2e testing protocols. Does NOT apply to existing task types
|
||||
(space-exploration, collecting-asteroids, asteroid-splitting, space-route) —
|
||||
only to newly created task types.
|
||||
---
|
||||
|
||||
# Worksheet Layout System
|
||||
|
||||
Unified rules for structuring, positioning, and editing elements in printable A4 math worksheets. This skill is the single source of truth for layout decisions in new task types.
|
||||
|
||||
## When to Use
|
||||
|
||||
- Creating a new task type (`tasks/{type}/`)
|
||||
- Writing or editing `*.template.html` files for new task types
|
||||
- Building tune-editor or main-editor for a new task type
|
||||
- Writing `generate.mjs` for a new task type
|
||||
- Performing a merge operation on any task type using this system
|
||||
- Reviewing or debugging layout/editor issues in new task types
|
||||
|
||||
## Does NOT Apply To
|
||||
|
||||
Legacy task types created before this system: `space-exploration`, `collecting-asteroids`, `asteroid-splitting`, `space-route`. Those keep their existing patterns.
|
||||
|
||||
---
|
||||
|
||||
## 1. Units
|
||||
|
||||
| What | Unit | Notes |
|
||||
|------|------|-------|
|
||||
| All layout dimensions | `mm` | widths, heights, positions, margins, gaps, paddings |
|
||||
| Font sizes | `rem` | Only exception. Never mm for fonts |
|
||||
| Borders, shadows | `px` | Thin decorative lines only (1-2px) |
|
||||
|
||||
**Banned in layout context:** `%`, `em`, `vw`, `vh`, `calc()` with mixed units.
|
||||
|
||||
**Why mm:** These are print documents (A4 = 210×297mm). Millimeters map 1:1 to physical output. No ambiguity, no container-relative surprises, no calc() fragility.
|
||||
|
||||
**Conversion reference:** At 96 DPI, 1mm ≈ 3.78px. Editor helpers handle mm↔px conversion via `mmToPx` ratio from EditorCore.
|
||||
|
||||
---
|
||||
|
||||
## 2. Page Structure
|
||||
|
||||
Every page follows a fixed three-layer structure:
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ Page (210×297mm) │
|
||||
│ ┌─────────────────────────┐ │
|
||||
│ │ Header │ │ ← hero image, title, subtitle
|
||||
│ ├─────────────────────────┤ │
|
||||
│ │ │ │
|
||||
│ │ Content Area │ │ ← fills remaining space
|
||||
│ │ ┌───────┐ ┌───────┐ │ │
|
||||
│ │ │Section│ │Section│ │ │ ← sections arranged by layout
|
||||
│ │ └───────┘ └───────┘ │ │
|
||||
│ │ ┌───────┐ ┌───────┐ │ │
|
||||
│ │ │Section│ │Section│ │ │
|
||||
│ │ └───────┘ └───────┘ │ │
|
||||
│ │ │ │
|
||||
│ ├─────────────────────────┤ │
|
||||
│ │ Footer │ │ ← decorative (planet, wave, etc.)
|
||||
│ └─────────────────────────┘ │
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
### HTML pattern
|
||||
|
||||
```html
|
||||
<div class="page w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white"
|
||||
style="break-after: page;">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="page-header" style="height: 45mm;">
|
||||
<!-- hero image, title, subtitle -->
|
||||
</div>
|
||||
|
||||
<!-- Content Area — sections live here -->
|
||||
<div class="page-content"
|
||||
style="position: absolute; top: 45mm; bottom: 30mm; left: 8mm; right: 8mm;">
|
||||
<!-- Section layout (grid, flex, stack) defined per task type -->
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="page-footer absolute bottom-0 left-0 right-0" style="height: 30mm;">
|
||||
<!-- decorative footer image -->
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Header and footer heights** are set per task type in the template. Content area fills the remaining space using absolute positioning with `top` and `bottom`.
|
||||
|
||||
**Section layout** is decided per task type and coded directly in the template. Common patterns:
|
||||
- **Vertical stack:** `display: flex; flex-direction: column; gap: 4mm;`
|
||||
- **2-column grid:** `display: grid; grid-template-columns: 1fr 1fr; gap: 3mm;`
|
||||
- **2×3 grid:** `display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 2mm;`
|
||||
- **Dense table:** `display: grid; grid-template-columns: repeat(4, 1fr); gap: 1mm;`
|
||||
|
||||
No abstraction layer for layouts — each task type sets this directly in CSS. The formalization is in shared vocabulary and understanding, not in code.
|
||||
|
||||
---
|
||||
|
||||
## 3. Section (Base Unit)
|
||||
|
||||
A **section** is the atomic container for one task/problem. All coordinates inside a section are relative to the section's top-left corner.
|
||||
|
||||
```html
|
||||
<div class="section" style="position: relative; overflow: hidden;">
|
||||
<!-- All child elements positioned relative to this container -->
|
||||
</div>
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Section has `position: relative` — it is the coordinate origin for children
|
||||
- Section has `overflow: hidden` — nothing bleeds out
|
||||
- Section dimensions come from the layout (grid/flex) — not set explicitly
|
||||
- All child positions are in mm, relative to section's top-left (0,0)
|
||||
|
||||
---
|
||||
|
||||
## 4. Element Hierarchy Inside a Section
|
||||
|
||||
```
|
||||
Section (position: relative, overflow: hidden)
|
||||
├── Group (position: absolute, left/top in mm)
|
||||
│ ├── Element (position: absolute, left/top in mm from group)
|
||||
│ └── Element
|
||||
├── Element (position: absolute, left/top in mm from section)
|
||||
└── Group
|
||||
└── Element
|
||||
```
|
||||
|
||||
### Groups
|
||||
|
||||
A **group** bundles related elements that move together. Group position is relative to section. Element positions inside a group are relative to the group.
|
||||
|
||||
```html
|
||||
<div class="section" style="position: relative; overflow: hidden;">
|
||||
|
||||
<!-- Group: ship assembly -->
|
||||
<div data-edit="ship-group" data-edit-props="dx,dy"
|
||||
style="position: absolute; left: 50mm; top: 10mm;">
|
||||
|
||||
<img src="ship.png" style="width: 40mm; height: 20mm;">
|
||||
|
||||
<div data-edit="badge" data-edit-props="dx,dy,scale"
|
||||
style="position: absolute; left: 15mm; top: 8mm;">
|
||||
<span>10</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standalone element -->
|
||||
<img data-edit="asteroid" data-edit-props="dx,dy,scale,rotate"
|
||||
style="position: absolute; left: 5mm; top: 12mm; width: 14mm; height: 14mm;"
|
||||
src="asteroid.png">
|
||||
</div>
|
||||
```
|
||||
|
||||
### When to use a Group vs standalone Element
|
||||
|
||||
- **Group** when elements are conceptually one object (ship + badge + cargo = ship-group)
|
||||
- **Standalone** when the element is independent (a floating asteroid, an input field)
|
||||
- Moving a group moves all children. Moving a child moves only within the group
|
||||
- Never nest groups deeper than 2 levels (section → group → element). If you need deeper nesting, flatten
|
||||
|
||||
### Z-Index Inside Section
|
||||
|
||||
Use z-index values 1-10 within a section. Assign in semantic order:
|
||||
|
||||
```
|
||||
z-1: background decorations
|
||||
z-2: main objects (ships, large images)
|
||||
z-3: secondary objects (smaller elements on top of main)
|
||||
z-4: connectors (arrows, lines, SVG paths)
|
||||
z-5: interactive elements (input fields, answer boxes)
|
||||
z-6: overlays (badges, labels, indicators)
|
||||
```
|
||||
|
||||
Set z-index on the group/element level, not on inner wrappers. Keep it flat — if you need z-index within a group, the group's own stacking context handles it.
|
||||
|
||||
---
|
||||
|
||||
## 5. data-edit Attributes
|
||||
|
||||
Mark editable elements in the template HTML:
|
||||
|
||||
```html
|
||||
<div data-edit="element-id" data-edit-props="dx,dy,scale,rotate">
|
||||
```
|
||||
|
||||
| Attribute | Purpose |
|
||||
|-----------|---------|
|
||||
| `data-edit` | Unique ID within the section. Used as key in data.json |
|
||||
| `data-edit-props` | Comma-separated list of allowed delta properties |
|
||||
|
||||
**Naming convention:** kebab-case. Examples: `ship-group`, `space-asteroid`, `badge-label`, `inner-cargo`.
|
||||
|
||||
**Allowed props:**
|
||||
|
||||
| Prop | Type | Unit | Meaning |
|
||||
|------|------|------|---------|
|
||||
| `dx` | number | mm | Horizontal offset from base position |
|
||||
| `dy` | number | mm | Vertical offset from base position |
|
||||
| `scale` | number | multiplier | Size multiplier (1.0 = original) |
|
||||
| `rotate` | number | degrees | Rotation angle |
|
||||
|
||||
Additional props can be added ad-hoc per task type (e.g., `opacity`, `color`). Base props are always dx, dy, scale, rotate.
|
||||
|
||||
---
|
||||
|
||||
## 6. data.json Format
|
||||
|
||||
Stores **deltas only** for elements marked with `data-edit`. Created by the main editor.
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"page": 1,
|
||||
"sections": [
|
||||
{
|
||||
"index": 0,
|
||||
"elements": {
|
||||
"ship-group": { "dx": 3.5, "dy": -1.0 },
|
||||
"badge": { "scale": 1.2 },
|
||||
"space-asteroid": { "dx": -2, "dy": 1, "rotate": 15 }
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"elements": {
|
||||
"space-asteroid": { "scale": 1.3 }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- Only elements with actual changes appear (sparse, not exhaustive)
|
||||
- Zero-deltas are omitted (`dx: 0` → don't include)
|
||||
- Scale default is 1.0 — only include if ≠ 1.0
|
||||
- Rotate default is 0 — only include if ≠ 0
|
||||
- Element IDs match `data-edit` values in template HTML
|
||||
- Section index is 0-based within the page
|
||||
|
||||
---
|
||||
|
||||
## 7. generate.mjs — Applying Deltas
|
||||
|
||||
Each task type has its own `scripts/generate.mjs`. The delta application logic is standardized:
|
||||
|
||||
```javascript
|
||||
// Pseudocode for applying deltas to a section element
|
||||
function applyDelta(element, delta) {
|
||||
const style = parseInlineStyle(element);
|
||||
|
||||
if (delta.dx != null || delta.dy != null) {
|
||||
const baseLeft = parseFloat(style.left); // mm
|
||||
const baseTop = parseFloat(style.top); // mm
|
||||
style.left = `${baseLeft + (delta.dx || 0)}mm`;
|
||||
style.top = `${baseTop + (delta.dy || 0)}mm`;
|
||||
}
|
||||
|
||||
if (delta.scale != null) {
|
||||
addTransform(style, `scale(${delta.scale})`);
|
||||
}
|
||||
|
||||
if (delta.rotate != null) {
|
||||
addTransform(style, `rotate(${delta.rotate}deg)`);
|
||||
}
|
||||
|
||||
element.setAttribute('style', serializeStyle(style));
|
||||
}
|
||||
```
|
||||
|
||||
**Key principles:**
|
||||
- dx/dy are ADDITIVE to base position (base 50mm + dx 3.5 = 53.5mm)
|
||||
- scale is ABSOLUTE (scale 1.3 means 1.3×, not base × 1.3)
|
||||
- rotate is ABSOLUTE (rotate 15 means 15°, not base + 15°)
|
||||
- Find elements by `[data-edit="id"]` selector, scoped to section index
|
||||
- Never chain scripts. generate.mjs reads template + data.json, writes output.html
|
||||
|
||||
### Shared helper for generate scripts
|
||||
|
||||
Task-type generate.mjs scripts should use a shared helper for delta application. This helper lives at `src/scripts/apply-deltas.mjs`:
|
||||
|
||||
```javascript
|
||||
// src/scripts/apply-deltas.mjs
|
||||
// Shared logic for applying data.json deltas to template HTML
|
||||
//
|
||||
// Usage in generate.mjs:
|
||||
// import { applyDeltas } from '../../src/scripts/apply-deltas.mjs';
|
||||
// const outputHtml = applyDeltas(templateHtml, dataJson);
|
||||
|
||||
export function applyDeltas(html, data) {
|
||||
// Parse HTML with JSDOM or cheerio
|
||||
// For each page in data.pages:
|
||||
// Find page container (nth .page element)
|
||||
// For each section in page.sections:
|
||||
// Find section container (nth .section within page)
|
||||
// For each [elementId, delta] in section.elements:
|
||||
// Find element by [data-edit="elementId"]
|
||||
// Apply delta props to inline style
|
||||
// Return modified HTML string
|
||||
}
|
||||
```
|
||||
|
||||
This helper is created once and reused by all new task types. Task-specific generate.mjs handles any custom logic (problem generation, SVG creation, etc.) and calls `applyDeltas()` for the standard positioning step.
|
||||
|
||||
---
|
||||
|
||||
## 8. Two Editors
|
||||
|
||||
### 8.1 Tune Editor (Stage 1 — Layout Calibration)
|
||||
|
||||
**Purpose:** Adjust the base layout of ONE section. Changes propagate to all sections.
|
||||
|
||||
**When to use:** Early stage, before per-section fine-tuning. Setting up the initial element positions, sizes, and grouping within a section.
|
||||
|
||||
**Flow:**
|
||||
```
|
||||
Tune Editor UI
|
||||
→ User adjusts element positions in a single section
|
||||
→ Save → POST /api/save-tune → writes tune-data.json
|
||||
→ Claude reads tune-data.json
|
||||
→ Claude reviews changes, decides what to apply
|
||||
→ Claude edits template.html directly (applies to all sections)
|
||||
→ Claude deletes tune-data.json
|
||||
```
|
||||
|
||||
**tune-data.json** is NOT automatically applied. It is a proposal for Claude. Claude is the arbiter — it reads the data, validates it makes sense, and manually updates the template. No script chaining.
|
||||
|
||||
**tune-data.json format:**
|
||||
```json
|
||||
{
|
||||
"section": {
|
||||
"elements": {
|
||||
"ship-group": { "left": 52.5, "top": 8.0 },
|
||||
"badge": { "left": 16.0, "top": 9.5, "scale": 1.1 },
|
||||
"space-asteroid": { "left": 4.0, "top": 14.0, "rotate": 10 }
|
||||
}
|
||||
},
|
||||
"hierarchy": {
|
||||
"ship-group": {
|
||||
"editable": true,
|
||||
"children": {
|
||||
"badge": { "editable": true },
|
||||
"inner-asteroid": { "editable": true }
|
||||
}
|
||||
},
|
||||
"space-asteroid": { "editable": true },
|
||||
"arrows-svg": { "editable": false },
|
||||
"formula": { "editable": false }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Note:** `hierarchy.*.editable` marks which elements will be available in the main editor. Tune editor sets this; Claude writes the corresponding `data-edit` attributes into the template.
|
||||
|
||||
**Sidebar panel:** The tune editor has a sidebar showing the element hierarchy tree, auto-built from DOM by scanning elements with `data-edit` attributes within the section. Each element shows:
|
||||
- Name (from `data-edit` value)
|
||||
- Nesting level (indentation)
|
||||
- Checkbox: editable in main editor (yes/no)
|
||||
- Current position summary (left, top in mm)
|
||||
|
||||
### 8.2 Main Editor (Stage 2 — Per-Section Fine-Tuning)
|
||||
|
||||
**Purpose:** Make per-section, per-page adjustments. Only elements marked as editable (via `data-edit` + `data-edit-props`) can be modified.
|
||||
|
||||
**Flow:**
|
||||
```
|
||||
Main Editor UI
|
||||
→ User selects a section, clicks an editable element
|
||||
→ Drag / keyboard adjustments
|
||||
→ Save → POST /api/save-edits → writes data.json
|
||||
→ Server runs generate.mjs → output.html + screenshots
|
||||
```
|
||||
|
||||
**This is the standard editor described in the project CLAUDE.md.** It saves to data.json, and generate.mjs applies deltas to produce output.html.
|
||||
|
||||
### Editor Helpers
|
||||
|
||||
Common functionality lives in shared modules alongside `editor-core.js`:
|
||||
|
||||
**`src/editor/editor-elements.js`** — Element interaction for BOTH editors:
|
||||
```javascript
|
||||
// Register an editable element
|
||||
EditorElements.register(el, {
|
||||
props: ['dx', 'dy', 'scale', 'rotate'], // allowed operations
|
||||
mmToPx: ratio, // from EditorCore
|
||||
onSelect: (el, info) => {}, // callback
|
||||
onChange: (el, prop, value) => {} // callback
|
||||
});
|
||||
|
||||
// Built-in behaviors (automatic after register):
|
||||
// • Click → thin rounded outline (selection highlight)
|
||||
// • Drag → updates left/top, converts px movement to mm
|
||||
// • Arrow keys → ±0.5mm nudge (dx/dy)
|
||||
// • +/- keys → ±0.05 scale
|
||||
// • [/] keys → ±5° rotate
|
||||
// • Orange circle indicator on changed elements
|
||||
// • Tracks original state for change detection + reset
|
||||
|
||||
// Serialize all changes (for save)
|
||||
EditorElements.serialize({ changesOnly: true })
|
||||
// → { elements: { "ship-group": { dx: 3.5, dy: -1 }, ... } }
|
||||
|
||||
// Reset element to original state
|
||||
EditorElements.reset(el)
|
||||
|
||||
// Reset all elements on current page
|
||||
EditorElements.resetAll()
|
||||
```
|
||||
|
||||
**`src/editor/editor-tune.js`** — Tune-editor specific (sidebar, hierarchy):
|
||||
```javascript
|
||||
// Build hierarchy tree from DOM
|
||||
EditorTune.buildTree(sectionEl)
|
||||
// Scans [data-edit] elements, returns nested structure
|
||||
|
||||
// Render sidebar panel
|
||||
EditorTune.renderSidebar(treeData, containerEl)
|
||||
// Shows hierarchy with checkboxes, position info
|
||||
|
||||
// Serialize for tune-data.json
|
||||
EditorTune.serialize()
|
||||
// → { section: { elements: {...} }, hierarchy: {...} }
|
||||
```
|
||||
|
||||
**These helpers are implemented once and imported by all new editors.** Task-specific editors only need to define which elements exist and any custom behavior.
|
||||
|
||||
---
|
||||
|
||||
## 9. Merge Operation
|
||||
|
||||
**What:** Bake current data.json deltas into the template, reset data.json, start fresh.
|
||||
|
||||
**Who:** Claude only. Never automated.
|
||||
|
||||
**When:** User wants to lock in editor adjustments and start a new round of editing (or make further AI-driven changes to the template).
|
||||
|
||||
**Steps:**
|
||||
|
||||
```
|
||||
1. Verify output.html exists and is up-to-date
|
||||
→ Run generate.mjs if needed
|
||||
|
||||
2. Copy output.html → template.html (overwrite)
|
||||
→ This bakes all deltas into the base template
|
||||
|
||||
3. Delete data.json (or write empty {})
|
||||
→ Fresh start for the editor
|
||||
|
||||
4. Verify: run generate.mjs again
|
||||
→ output.html should be identical to template.html (no deltas to apply)
|
||||
→ Compare file sizes or diff to confirm
|
||||
|
||||
5. Update .md if new patterns were established
|
||||
|
||||
6. Test: open main editor, verify elements show at their new base positions
|
||||
→ No orange indicators (no deltas)
|
||||
→ Drag/scale/rotate creates new deltas from the merged baseline
|
||||
```
|
||||
|
||||
**After merge, deltas are absolute, not multiplicative:**
|
||||
- Pre-merge: template has `scale(1.0)`, data.json has `scale: 1.5` → output: `scale(1.5)`
|
||||
- Post-merge: template has `scale(1.5)`, data.json empty
|
||||
- New edit: data.json `scale: 1.2` → output: `scale(1.2)` (replaces, not multiplies)
|
||||
|
||||
---
|
||||
|
||||
## 10. Template HTML Conventions
|
||||
|
||||
### Page container
|
||||
```html
|
||||
<div class="page w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white"
|
||||
style="break-after: page;">
|
||||
```
|
||||
|
||||
### Section container
|
||||
```html
|
||||
<div class="section" style="position: relative; overflow: hidden;">
|
||||
```
|
||||
|
||||
### Editable element
|
||||
```html
|
||||
<img data-edit="asteroid" data-edit-props="dx,dy,scale,rotate"
|
||||
style="position: absolute; left: 25mm; top: 40mm; width: 14mm; height: 14mm;"
|
||||
src="...">
|
||||
```
|
||||
|
||||
### Editable group
|
||||
```html
|
||||
<div data-edit="ship-group" data-edit-props="dx,dy"
|
||||
style="position: absolute; left: 50mm; top: 10mm;">
|
||||
<img style="width: 40mm; height: 20mm;" src="ship.png">
|
||||
<div data-edit="badge" data-edit-props="dx,dy,scale"
|
||||
style="position: absolute; left: 15mm; top: 8mm;">
|
||||
<span style="font-size: 0.6rem;">10</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### What NOT to do
|
||||
|
||||
```html
|
||||
<!-- WRONG: percentage positioning -->
|
||||
<div style="left: 40%; top: 50%;">
|
||||
|
||||
<!-- WRONG: calc with mixed units -->
|
||||
<div style="left: calc(52% - 2mm);">
|
||||
|
||||
<!-- WRONG: negative margins for layout -->
|
||||
<div style="margin-top: -5mm;">
|
||||
|
||||
<!-- WRONG: pixel dimensions for layout -->
|
||||
<div style="width: 500px;">
|
||||
|
||||
<!-- WRONG: element bleeding out of section -->
|
||||
<div style="left: -10mm;"> <!-- goes outside section boundary -->
|
||||
|
||||
<!-- WRONG: deep nesting (>2 levels) -->
|
||||
<div data-edit="a">
|
||||
<div data-edit="b">
|
||||
<div data-edit="c"> <!-- too deep, flatten -->
|
||||
```
|
||||
|
||||
### Inline styles vs Tailwind
|
||||
|
||||
For positions and dimensions of editable elements: **always inline `style=""`**. This is what editors read/write and generate.mjs modifies.
|
||||
|
||||
Tailwind classes are fine for:
|
||||
- Page container (`w-[210mm] h-[297mm]`)
|
||||
- Non-editable decorative elements
|
||||
- Typography, colors, borders
|
||||
- Flex/grid layout of the section grid
|
||||
|
||||
**Rule of thumb:** If generate.mjs or an editor might touch it → inline style. If it's static structure → Tailwind is fine.
|
||||
|
||||
---
|
||||
|
||||
## 11. Mandatory Editor Testing Protocol
|
||||
|
||||
**BLOCKING REQUIREMENT.** Before presenting any editor (tune or main) to the user, Claude MUST complete ALL of the following steps using Chrome DevTools MCP. If any step fails, fix and re-test. Never skip.
|
||||
|
||||
### 11.1 Tune Editor Testing
|
||||
|
||||
```
|
||||
Step 1: LOAD
|
||||
→ navigate_page to tune editor URL
|
||||
→ take_screenshot → verify section renders, sidebar shows hierarchy tree
|
||||
→ verify element count in sidebar matches data-edit elements in DOM
|
||||
|
||||
Step 2: SIDEBAR VALIDATION
|
||||
→ verify hierarchy nesting matches DOM structure
|
||||
→ verify editable checkboxes reflect data-edit-props presence
|
||||
→ verify position values shown match inline styles in HTML
|
||||
|
||||
Step 3: SELECT
|
||||
→ click on an editable element
|
||||
→ take_screenshot → verify thin rounded selection outline appears
|
||||
→ verify sidebar highlights the selected element
|
||||
→ verify status bar shows element ID and current position
|
||||
|
||||
Step 4: MOVE
|
||||
→ press Arrow key 4 times (should move 2mm total)
|
||||
→ take_screenshot → verify element visually moved
|
||||
→ verify sidebar position values updated
|
||||
|
||||
Step 5: SCALE
|
||||
→ press + key 3 times (should scale by 0.15 total)
|
||||
→ take_screenshot → verify element visually scaled
|
||||
→ verify status shows new scale value
|
||||
|
||||
Step 6: ROTATE
|
||||
→ press ] key 2 times (should rotate 10° total)
|
||||
→ take_screenshot → verify element visually rotated
|
||||
|
||||
Step 7: SAVE
|
||||
→ click Save button
|
||||
→ wait for save completion (toast "Saved!")
|
||||
→ take_screenshot → verify no page reload occurred
|
||||
→ read tune-data.json → verify it contains the changes made in steps 4-6
|
||||
→ verify element positions in tune-data.json match what was shown in sidebar
|
||||
|
||||
Step 8: VERIFY TUNE-DATA CONTENT
|
||||
→ read tune-data.json with Read tool
|
||||
→ verify hierarchy section is present with correct nesting
|
||||
→ verify editable flags match checkbox states
|
||||
→ verify position values are in mm (not px, not %)
|
||||
```
|
||||
|
||||
### 11.2 Main Editor Testing
|
||||
|
||||
```
|
||||
Step 1: LOAD
|
||||
→ navigate_page to main editor URL (?file=docId)
|
||||
→ take_screenshot → verify all pages load with sections visible
|
||||
→ verify only data-edit elements have hover/click affordance
|
||||
|
||||
Step 2: SELECT
|
||||
→ click on an editable element in section 0
|
||||
→ take_screenshot → verify selection highlight (thin rounded outline)
|
||||
→ verify status bar shows element ID, section index, page number
|
||||
|
||||
Step 3: DRAG
|
||||
→ mouse drag the element ~5mm to the right
|
||||
→ take_screenshot → verify element moved
|
||||
→ verify orange changed indicator appears on the element
|
||||
|
||||
Step 4: KEYBOARD
|
||||
→ select another element
|
||||
→ press Arrow-Right 4× (2mm), press + 2× (scale +0.1), press ] 1× (rotate 5°)
|
||||
→ take_screenshot → verify all three modifications visible
|
||||
→ verify orange indicators on both modified elements
|
||||
|
||||
Step 5: SAVE
|
||||
→ click Save button
|
||||
→ wait for toast "Saved!" and no page reload
|
||||
→ take_screenshot after save
|
||||
|
||||
Step 6: VERIFY DATA.JSON
|
||||
→ read data.json with Read tool
|
||||
→ verify it contains entries for ONLY the two modified elements
|
||||
→ verify section indices are correct
|
||||
→ verify dx/dy values are in mm (reasonable magnitude, not px)
|
||||
→ verify scale and rotate values match what was applied
|
||||
|
||||
Step 7: VERIFY GENERATE
|
||||
→ run generate.mjs via Bash
|
||||
→ read output.html — verify data-edit elements have modified inline styles
|
||||
→ compare: base position + delta = output position (arithmetic check)
|
||||
|
||||
Step 8: RELOAD PERSISTENCE
|
||||
→ navigate_page to same editor URL (fresh load)
|
||||
→ take_screenshot → verify saved state is restored
|
||||
→ verify orange indicators still show on previously modified elements
|
||||
→ verify element positions match the saved state, not the original template
|
||||
|
||||
Step 9: VISUAL COMPARISON
|
||||
→ take_screenshot of editor view (specific section)
|
||||
→ read output page screenshot from temp/ (generated by postGenerate)
|
||||
→ compare: element positions in editor must match output screenshots
|
||||
→ if mismatch → editor or generate.mjs has a bug, fix before proceeding
|
||||
```
|
||||
|
||||
### 11.3 Post-Merge Testing
|
||||
|
||||
```
|
||||
Step 1: Verify output.html ≈ template.html (after merge, no deltas)
|
||||
Step 2: Open main editor → no orange indicators visible
|
||||
Step 3: Make a small edit → save → verify new data.json has only the new change
|
||||
Step 4: Run generate.mjs → verify only the new change appears in output
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 12. Checklist: Creating a New Task Type
|
||||
|
||||
Use this checklist when setting up a new task type that follows the worksheet-layout system.
|
||||
|
||||
```
|
||||
□ Create tasks/{type}/ folder structure
|
||||
□ Create tasks/{type}/CLAUDE.md with type-specific rules
|
||||
□ Define section layout in template (grid/flex/stack)
|
||||
□ All layout dimensions in mm, fonts in rem
|
||||
□ All editable elements have data-edit + data-edit-props
|
||||
□ No % positioning, no calc() with mixed units, no negative margins
|
||||
□ Sections have position: relative + overflow: hidden
|
||||
□ Groups max 2 levels deep (section → group → element)
|
||||
□ Z-index 1-6 within sections, semantically ordered
|
||||
□ Create generate.mjs using shared applyDeltas() helper
|
||||
□ Create tune-editor.html with sidebar hierarchy panel
|
||||
□ Create editor.html (main editor) for per-section adjustments
|
||||
□ Run tune editor e2e test (Section 11.1) — all steps pass
|
||||
□ Run main editor e2e test (Section 11.2) — all steps pass
|
||||
□ Add card to tasks/{type}/index.html
|
||||
□ Add card to tasks/index.html
|
||||
□ Verify all navigation links in browser (Chrome DevTools)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 13. File Reference
|
||||
|
||||
```
|
||||
src/editor/
|
||||
editor-core.js — Shared editor framework (existing)
|
||||
editor-elements.js — Element interaction helpers (NEW — this system)
|
||||
editor-tune.js — Tune editor sidebar + hierarchy (NEW — this system)
|
||||
|
||||
src/scripts/
|
||||
apply-deltas.mjs — Shared delta application logic (NEW — this system)
|
||||
generate-pdf.mjs — PDF generation (existing)
|
||||
post-generate.mjs — Post-generate screenshots (existing)
|
||||
```
|
||||
|
||||
Helper files (`editor-elements.js`, `editor-tune.js`, `apply-deltas.mjs`) are created when implementing the first task type that uses this system. Their API is defined in this skill; implementation follows from the first real use case.
|
||||
Binary file not shown.
|
|
@ -0,0 +1,191 @@
|
|||
# Product Requirements Document (PRD)
|
||||
|
||||
## Product Name Options
|
||||
|
||||
### Primary Recommendation: **FunSheet Studio**
|
||||
|
||||
**Rationale:** "Fun" captures the playful, engaging nature; "Sheet" directly signals worksheets/printables; "Studio" conveys the creation/customization engine behind it. Works internationally, easy to pronounce, memorable for parents.
|
||||
|
||||
### Alternative Names:
|
||||
|
||||
| Name | Pros | Cons |
|
||||
|------|------|------|
|
||||
| **FunSheet Studio** | Clear, memorable, signals fun+worksheets+creation | "Sheet" might feel narrow |
|
||||
| **PlayTask** | Short, energetic, universal | Generic, hard to trademark |
|
||||
| **SkillSpark** | Emphasizes skill-building + excitement | Doesn't signal worksheets |
|
||||
| **QuestSheet** | Adventure + worksheet, gamification feel | Slightly niche |
|
||||
| **PrintQuest** | Print + adventure, clear format signal | Sounds like a printer brand |
|
||||
| **LevelUp Sheets** | Gaming metaphor, progression, clear format | Two words + "sheets" |
|
||||
| **BrightPage** | Positive, visual, clear format | Generic |
|
||||
| **FunDrill** | Fun + drill (practice), honest | "Drill" has negative connotation |
|
||||
| **ThemeTask** | Directly signals themed tasks | Feels corporate |
|
||||
| **KidForge** | Kids + creation/forge, strong brand | Doesn't signal educational |
|
||||
|
||||
### Name Selection Criteria:
|
||||
- Works in English globally (localization-friendly)
|
||||
- Easy to spell and remember for parents
|
||||
- Signals: fun + educational + printable
|
||||
- Available as .com domain (to verify)
|
||||
- Not trademarked in EdTech space (to verify)
|
||||
|
||||
---
|
||||
|
||||
## Vision Statement
|
||||
|
||||
**FunSheet Studio makes learning irresistible** by wrapping targeted skill-building exercises in beautiful, themed worksheets that match each child's passions — from space adventures to favorite cartoon characters.
|
||||
|
||||
## Problem Statement
|
||||
|
||||
Parents of children aged 6-10 face a frustrating gap in educational materials:
|
||||
|
||||
1. **Generic worksheets are boring** — rows of plain math problems fail to engage children, turning practice into a chore
|
||||
2. **Beautiful materials lack pedagogical depth** — colorful activity books often sacrifice educational precision for visual appeal
|
||||
3. **No personalization** — existing worksheets are one-size-fits-all, ignoring that a child who loves Sonic will engage differently than one who loves Frozen
|
||||
4. **Skill targeting is imprecise** — parents know their child struggles with "addition through 10" but can't find materials that specifically drill that skill with appropriate difficulty
|
||||
5. **Custom materials are expensive and slow** — hiring a tutor or designer to create personalized worksheets is impractical for most families
|
||||
|
||||
## Solution
|
||||
|
||||
An AI-powered worksheet generation platform that combines:
|
||||
|
||||
- **Themed visual design** — professional-quality illustrations matching children's interests (space, popular characters, animals, fairy tales)
|
||||
- **Precision skill targeting** — each worksheet type focuses on a specific cognitive/mathematical skill with calibrated difficulty
|
||||
- **Rapid personalization** — AI + custom tooling enables creating individualized worksheets in minutes, not days
|
||||
- **Print-ready quality** — A4 PDF output optimized for home/school printing
|
||||
|
||||
## Core Principles
|
||||
|
||||
### 1. Engagement First
|
||||
Children must *want* to do the worksheet. Visual themes aren't decoration — they're the primary motivation mechanism. A child who loves space will eagerly solve asteroid-splitting problems. The same math wrapped in plain text becomes a chore.
|
||||
|
||||
### 2. Precision Over Volume
|
||||
We don't create "500 math worksheets." We create specific task types that target specific skills:
|
||||
- "Split a number into two unequal parts" (number decomposition)
|
||||
- "Fill the cargo bay to exactly 10" (addition through 10, tens crossing)
|
||||
- "Navigate the route" (pattern recognition, constrained pathfinding)
|
||||
- "Count by 5s to reach the station" (skip counting)
|
||||
|
||||
Each task type is pedagogically designed, not randomly generated.
|
||||
|
||||
### 3. Personalization is the Product
|
||||
The free tier demonstrates quality. The paid tier delivers *your child's* worksheet — their favorite characters, their specific skill gaps, their difficulty level. This isn't a template with a name field. It's a ground-up generation of unique educational content.
|
||||
|
||||
### 4. Quality Without Compromise
|
||||
Every worksheet looks like it belongs in a premium children's book. Professional illustrations, thoughtful layouts, consistent visual language. Parents should feel proud putting these on the fridge.
|
||||
|
||||
### 5. AI-Augmented, Human-Controlled
|
||||
AI accelerates creation — generating images, computing problem sets, verifying solvability. But every worksheet passes through human review for pedagogical soundness, visual quality, and age-appropriateness. AI is the engine; human judgment is the steering wheel.
|
||||
|
||||
---
|
||||
|
||||
## Target Audience
|
||||
|
||||
### Primary: Parents of children aged 6-10
|
||||
|
||||
**Demographics:**
|
||||
- Parents aged 28-42
|
||||
- Middle to upper-middle income (can afford printing, values education investment)
|
||||
- Digitally literate (comfortable downloading PDFs, printing at home)
|
||||
- Global market with initial focus on Russian-speaking + English-speaking audiences
|
||||
|
||||
**Psychographics:**
|
||||
- Actively involved in their child's education
|
||||
- Frustrated with boring, generic worksheets
|
||||
- Willing to spend time finding the right materials
|
||||
- Values quality and design (notices the difference between beautiful and mediocre)
|
||||
- Seeks targeted practice for specific skills their child needs to develop
|
||||
|
||||
### Secondary: Teachers & Tutors
|
||||
|
||||
- Elementary school teachers (grades 1-3)
|
||||
- Private tutors specializing in early math
|
||||
- Homeschooling parents
|
||||
- After-school program coordinators
|
||||
|
||||
### Ideal Customer Profile (ICP)
|
||||
|
||||
**"Anna, 34, Moscow"**
|
||||
- Mother of a 7-year-old boy who loves Paw Patrol
|
||||
- Her son struggles with number decomposition (splitting numbers into parts)
|
||||
- She's tried generic worksheets from the internet — her son loses interest after 2 minutes
|
||||
- She's bought workbooks from the store — too easy or too hard, never just right
|
||||
- She would happily pay $5-15 for a set of beautifully designed worksheets specifically targeting her son's weak spot, themed with his favorite characters
|
||||
- She shares good educational finds in her parent WhatsApp/Telegram groups
|
||||
|
||||
**"Maria, 31, Austin TX"**
|
||||
- Mother of an 8-year-old girl who loves Frozen
|
||||
- Homeschooling, needs structured but engaging materials
|
||||
- Downloads free printables from Pinterest regularly but finds most are low-quality or poorly designed
|
||||
- Would pay for a subscription to high-quality, themed, skill-targeted worksheets
|
||||
- Active on homeschooling Facebook groups and Instagram
|
||||
|
||||
---
|
||||
|
||||
## Product Tiers
|
||||
|
||||
### Free Tier: "Ready-Made Collection"
|
||||
- Pre-generated worksheet sets across all available themes and skill types
|
||||
- Full-quality PDF downloads, no watermarks
|
||||
- New worksheets added regularly
|
||||
- Purpose: demonstrate quality, build trust, grow audience
|
||||
|
||||
### Paid Tier: "Custom Workshop" ($5-15 per worksheet set)
|
||||
- Custom theme selection (child's favorite characters/worlds)
|
||||
- Specific skill targeting based on parent's description of child's needs
|
||||
- Difficulty calibration (easier/harder than standard)
|
||||
- Multiple pages with progressive difficulty
|
||||
- Delivered as print-ready A4 PDF within 24-48 hours
|
||||
|
||||
### Future Tier: "Subscription" ($9-19/month)
|
||||
- Monthly delivery of new worksheet sets
|
||||
- Theme rotation based on child's evolving interests
|
||||
- Progress-aware difficulty adjustment
|
||||
- Priority custom requests
|
||||
|
||||
---
|
||||
|
||||
## Current State (MVP)
|
||||
|
||||
### What exists:
|
||||
- 5 task types (Space Exploration, Collecting Asteroids, Asteroid Splitting, Cargo Filling, Space Route)
|
||||
- 11 worksheets, 26+ pages total
|
||||
- Full generation pipeline (HTML → PDF)
|
||||
- Visual editor system for fine-tuning
|
||||
- 340+ icon/illustration assets
|
||||
- Space theme fully developed
|
||||
- Russian language worksheets
|
||||
|
||||
### What's needed for launch:
|
||||
- [ ] Landing page / website
|
||||
- [ ] Additional themes beyond space (Sonic, Frozen, Paw Patrol)
|
||||
- [ ] English language worksheet versions
|
||||
- [ ] Telegram channel for Russian audience
|
||||
- [ ] Instagram/Pinterest presence
|
||||
- [ ] Payment processing for custom orders
|
||||
- [ ] Order intake workflow (form/chat)
|
||||
- [ ] SEO-optimized content
|
||||
|
||||
---
|
||||
|
||||
## Success Metrics (First 6 Months)
|
||||
|
||||
| Metric | Target |
|
||||
|--------|--------|
|
||||
| Free downloads | 1,000+ total |
|
||||
| Email/Telegram subscribers | 200+ |
|
||||
| Paid custom orders | 20+ |
|
||||
| Customer satisfaction | 4.5+/5 rating |
|
||||
| Organic traffic | 500+ monthly visitors |
|
||||
| Social media followers | 300+ |
|
||||
|
||||
---
|
||||
|
||||
## Risk Assessment
|
||||
|
||||
| Risk | Impact | Mitigation |
|
||||
|------|--------|------------|
|
||||
| IP/licensing for character themes | High | Use original themed art inspired by genres, not copyrighted characters directly |
|
||||
| Parents don't trust AI-generated education | Medium | Emphasize human review, show pedagogical methodology |
|
||||
| Low willingness to pay | Medium | Free tier builds trust; custom tier solves real pain |
|
||||
| SEO competition for "printable worksheets" | High | Focus on long-tail: "themed math worksheets for 7 year olds" |
|
||||
| Scaling custom orders | Medium | Improve tooling to reduce per-order creation time |
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
# Brand Identity Guide
|
||||
|
||||
## Brand Name: FunSheet Studio
|
||||
|
||||
*(Final name to be confirmed after domain/trademark verification)*
|
||||
|
||||
## Tagline Options
|
||||
|
||||
1. **"Learning they can't put down"** — emphasizes engagement
|
||||
2. **"Worksheets your kids actually want to do"** — direct, relatable pain point
|
||||
3. **"Beautiful practice, real skills"** — balances aesthetics and substance
|
||||
4. **"Themed learning, targeted skills"** — factual, clear
|
||||
5. **"Where their favorite worlds meet real learning"** — bridges interests and education
|
||||
|
||||
**Recommended:** "Worksheets your kids actually want to do"
|
||||
— speaks directly to the parent's frustration, immediately differentiates from boring alternatives.
|
||||
|
||||
## Brand Voice
|
||||
|
||||
### Tone:
|
||||
- **Warm but not cutesy** — we're talking to parents, not children
|
||||
- **Confident but not preachy** — we know our materials are good, no need to oversell
|
||||
- **Practical** — focus on outcomes: "your child will practice X skill"
|
||||
- **Design-conscious** — our visuals speak for themselves; let screenshots do the selling
|
||||
|
||||
### Language:
|
||||
- Simple, direct sentences
|
||||
- Avoid jargon: say "number splitting" not "additive decomposition"
|
||||
- Reference real parent scenarios: "When your child needs extra practice with..."
|
||||
- Always name the specific skill, not just "math practice"
|
||||
|
||||
### What we DON'T say:
|
||||
- "Revolutionary" / "Disrupting education" — we're worksheets, not a startup pitch
|
||||
- "AI-powered" as a headline feature — parents care about results, not technology
|
||||
- "For all ages" — we're specific: ages 6-10, and that's a strength
|
||||
|
||||
## Visual Identity
|
||||
|
||||
**To be designed from scratch.** The current index page was a quick prototype and should NOT influence brand direction.
|
||||
|
||||
### Design Brief (for future brand design session):
|
||||
- Color palette, typography, and logo to be created using modern design tools
|
||||
- Must feel premium but approachable — parents trust it, kids enjoy it
|
||||
- Must work across: website, social media, PDF worksheets, print materials
|
||||
- Logo must work in single color (for printing) and full color (for web)
|
||||
- Consider the multi-theme nature of the product — brand identity should be theme-neutral (not tied to any single visual world like space)
|
||||
|
||||
## Brand Differentiators (Messaging Hierarchy)
|
||||
|
||||
### Lead with:
|
||||
1. **"Themed to their passions"** — worksheets featuring worlds kids actually care about
|
||||
2. **"Skills, not just problems"** — each worksheet targets a specific learning skill
|
||||
|
||||
### Support with:
|
||||
3. **"Beautiful enough to frame"** — professional design quality
|
||||
4. **"Made for YOUR child"** — personalization capability
|
||||
|
||||
### Mention when relevant:
|
||||
5. **Technology stack** — AI generation, rapid turnaround (for press/partners, not parents)
|
||||
6. **Pedagogical approach** — skill targeting methodology (for teachers/tutors)
|
||||
|
||||
## Content Pillars (for Social Media / Blog)
|
||||
|
||||
1. **Showcase** — beautiful worksheet previews, before/after of themed versions
|
||||
2. **Skill Spotlight** — short educational posts explaining WHY specific skills matter ("Why 'addition through 10' is a milestone")
|
||||
3. **Parent Stories** — testimonials, use cases, "my child actually asked to do more"
|
||||
4. **Behind the Scenes** — how worksheets are made (without over-emphasizing AI)
|
||||
5. **Free Downloads** — regular free worksheet releases driving traffic and trust
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
# Content Plan: First 30 Days
|
||||
|
||||
## Content Calendar Framework
|
||||
|
||||
### Posting Schedule
|
||||
|
||||
| Platform | Frequency | Best Time (Moscow) | Content Type |
|
||||
|----------|-----------|-------------------|--------------|
|
||||
| Telegram | 3x/week | 10:00, 19:00 | Free worksheets, tips, behind-the-scenes |
|
||||
| Pinterest | Daily | Auto-schedule | Worksheet pins, skill tip pins |
|
||||
| Instagram | 3x/week | 12:00, 20:00 | Carousels, reels, stories |
|
||||
|
||||
---
|
||||
|
||||
## Week 1: Launch Week
|
||||
|
||||
### Day 1 — Grand Opening
|
||||
- **Telegram:** Channel intro post. Who we are, what we do, first free worksheet set
|
||||
- **Pinterest:** Upload 10 worksheet page pins across skill boards
|
||||
- **Instagram:** Carousel "5 signs your child needs better worksheets"
|
||||
|
||||
### Day 2
|
||||
- **Telegram:** Free download — Space Exploration set (3 pages)
|
||||
- **Pinterest:** 5 more pins with educational keywords
|
||||
|
||||
### Day 3
|
||||
- **Instagram:** Reel — "Plain worksheet vs our worksheet" side-by-side comparison
|
||||
- **Pinterest:** 5 skill-tip pins ("What is number decomposition and why it matters")
|
||||
|
||||
### Day 5
|
||||
- **Telegram:** Skill Spotlight — "Why 'addition through 10' is the most important 1st grade skill"
|
||||
- **Instagram:** Story poll: "What theme would your child love?"
|
||||
|
||||
### Day 7
|
||||
- **Telegram:** Free download — Collecting Asteroids set
|
||||
- **Pinterest:** Upload all Collecting Asteroids pages as pins
|
||||
- **Instagram:** Carousel showcasing Collecting Asteroids with explanation
|
||||
|
||||
---
|
||||
|
||||
## Week 2: Build Routine
|
||||
|
||||
### Day 8
|
||||
- **Telegram:** "How to use our worksheets effectively" — 3 tips for parents
|
||||
- **Instagram:** Behind-the-scenes: how a worksheet is designed
|
||||
|
||||
### Day 10
|
||||
- **Telegram:** Free download — Asteroid Splitting set
|
||||
- **Pinterest:** 5 new pins
|
||||
- **Instagram:** Reel — child solving a fun worksheet (animated mockup)
|
||||
|
||||
### Day 12
|
||||
- **Telegram:** Skill Spotlight — "Number decomposition: the foundation of mental math"
|
||||
- **Instagram:** Carousel: "3 math skills your 7-year-old should practice"
|
||||
|
||||
### Day 14
|
||||
- **Telegram:** Free download — Cargo Filling set
|
||||
- **Pinterest:** Upload new pins
|
||||
- **Instagram:** "What theme should we create next?" — engagement post
|
||||
|
||||
---
|
||||
|
||||
## Week 3: Expand & Engage
|
||||
|
||||
### Day 15
|
||||
- **Telegram:** Announce custom worksheet service (soft launch)
|
||||
- **Instagram:** Carousel: how personalization works
|
||||
|
||||
### Day 17
|
||||
- **Telegram:** Free download — Space Route set
|
||||
- **Pinterest:** Batch pin upload
|
||||
|
||||
### Day 19
|
||||
- **Instagram:** Testimonial (from beta tester or friend's child)
|
||||
- **Telegram:** "What skill does your child struggle with?" — engagement question
|
||||
|
||||
### Day 21
|
||||
- **Telegram:** Announce new theme (e.g., underwater adventure)
|
||||
- **Instagram + Pinterest:** Preview pins of new theme
|
||||
|
||||
---
|
||||
|
||||
## Week 4: Convert & Grow
|
||||
|
||||
### Day 22
|
||||
- **Telegram:** "Custom worksheet spotlight" — show a personalized example
|
||||
- **Instagram:** Reel showing the personalization process
|
||||
|
||||
### Day 24
|
||||
- **Telegram:** Free download — new theme sample
|
||||
- **Pinterest:** New theme pins
|
||||
|
||||
### Day 26
|
||||
- **Instagram:** "Meet the maker" — personal story post
|
||||
- **Telegram:** Behind-the-scenes: the technology behind quick custom creation
|
||||
|
||||
### Day 28-30
|
||||
- **Telegram:** Week 4 recap + announce upcoming content
|
||||
- **Instagram:** Month-1 milestone post
|
||||
- **Pinterest:** Audit pin performance, double down on top performers
|
||||
|
||||
---
|
||||
|
||||
## Content Templates
|
||||
|
||||
### Telegram Post Template (Free Download)
|
||||
```
|
||||
🆕 Новый набор заданий: [Название]
|
||||
|
||||
[Краткое описание — какой навык отрабатывается]
|
||||
|
||||
📝 Что внутри:
|
||||
• [N] страниц с заданиями
|
||||
• Тема: [тема]
|
||||
• Возраст: [возраст]
|
||||
• Навык: [навык]
|
||||
|
||||
⬇️ Скачать бесплатно: [ссылка]
|
||||
|
||||
Понравилось? Поделитесь с другими родителями! 💜
|
||||
```
|
||||
|
||||
### Pinterest Pin Description Template
|
||||
```
|
||||
Free printable [skill name] worksheet for [age] year olds.
|
||||
[Theme] themed math practice — engaging, beautiful, print-ready.
|
||||
Perfect for: [specific use case].
|
||||
Download free at [URL].
|
||||
|
||||
#printableworksheets #mathforkids #[theme] #[skill] #homeschool #education #grade1 #grade2
|
||||
```
|
||||
|
||||
### Instagram Carousel Template
|
||||
```
|
||||
Slide 1: Hook — "Your child hates math practice? Maybe it's not the math."
|
||||
Slide 2: The problem — boring worksheets
|
||||
Slide 3: Our approach — themed, skill-targeted
|
||||
Slide 4-5: Worksheet examples (screenshots)
|
||||
Slide 6: Free download CTA
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Hashtag Strategy
|
||||
|
||||
### English:
|
||||
#printableworksheets #mathworksheets #homeschoolmath #educationalprintables #mathforkids #grade1math #grade2math #funlearning #mathpractice #elementarymath #homeschoolresources #printandlearn
|
||||
|
||||
### Russian:
|
||||
#рабочиелисты #математикадлядетей #математика1класс #математика2класс #распечатайизанимайся #домашнееобучение #развивашки #подготовкакшколе #занятиясдетьми #прописи
|
||||
|
||||
### Theme-specific (rotate):
|
||||
#spacetheme #underwaterworld #dinosaurtheme #fairytaletheme
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
# Elevator Pitches & Key Messages
|
||||
|
||||
## One-Liner (5 seconds)
|
||||
**"Beautiful, themed printable worksheets that target the exact skill your child needs to practice."**
|
||||
|
||||
## Elevator Pitch (30 seconds)
|
||||
Most educational worksheets are either boring or beautiful but shallow. FunSheet Studio is different — we create print-ready worksheets wrapped in themes kids love (space, animals, fairy tales), where each worksheet targets a specific learning skill like number decomposition or addition through 10. Parents can download free sets or order custom worksheets tailored to their child's interests and exact skill level. Made possible by AI-powered generation that delivers professional quality in hours, not weeks.
|
||||
|
||||
## Parent-Facing Pitch (for social media / landing page)
|
||||
|
||||
**Your child hates math worksheets? Maybe it's not the math.**
|
||||
|
||||
Imagine a worksheet where your 7-year-old splits asteroids to learn number decomposition. Where filling a spaceship's cargo bay teaches addition through 10. Where the math is real, but the experience feels like a game.
|
||||
|
||||
**FunSheet Studio** creates printable worksheets that:
|
||||
✓ Match your child's interests (space, animals, fairy tales, and more)
|
||||
✓ Target specific skills, not random problems
|
||||
✓ Look beautiful enough to hang on the fridge
|
||||
✓ Adapt to your child's exact level
|
||||
|
||||
**Free downloads available. Custom worksheets on request.**
|
||||
|
||||
## Teacher-Facing Pitch
|
||||
|
||||
**Differentiated math practice that students actually enjoy.**
|
||||
|
||||
Each FunSheet Studio worksheet targets a single mathematical skill at a calibrated difficulty level. Visual themes increase engagement without sacrificing rigor. Available in multiple difficulty levels for easy differentiation.
|
||||
|
||||
Ideal for:
|
||||
- Supplementary practice stations
|
||||
- Homework that students willingly complete
|
||||
- Targeted intervention for specific skill gaps
|
||||
- Reward activities that are still educational
|
||||
|
||||
## For Press / Partnerships
|
||||
|
||||
**FunSheet Studio** combines AI-powered content generation with pedagogical precision to produce themed, printable math worksheets for children aged 6-10. Each worksheet targets a specific cognitive skill (number decomposition, tens crossing, pattern recognition) wrapped in visual themes that match children's interests. The platform offers free ready-made sets and a custom generation service for personalized learning materials. Founded in 2024, the project leverages advanced AI tooling to deliver professional-quality, individualized educational content at a fraction of traditional development time and cost.
|
||||
|
||||
## Key Differentiators (for any audience)
|
||||
|
||||
1. **Not generic** — each worksheet targets ONE specific skill
|
||||
2. **Not boring** — professional themed illustrations that children love
|
||||
3. **Not one-size-fits-all** — adjustable difficulty, customizable themes
|
||||
4. **Not expensive** — free tier available, custom sets affordable
|
||||
5. **Not slow** — AI-powered pipeline delivers in hours
|
||||
|
||||
## FAQ Snippets
|
||||
|
||||
**Q: How is this different from free worksheets on the internet?**
|
||||
A: Most free worksheets are either plain text with random math problems, or colorful but educationally shallow. We combine professional design with targeted skill practice — each worksheet focuses on a specific learning milestone.
|
||||
|
||||
**Q: Do you use my child's favorite characters?**
|
||||
A: We create original themed worlds inspired by genres kids love — space adventures, rescue animals, ice kingdoms, underwater exploration, and more. These capture the same excitement as popular brands while being completely original.
|
||||
|
||||
**Q: How do custom worksheets work?**
|
||||
A: Tell us your child's age, interests, and the skill they need to practice. We create a personalized worksheet set (3-5 pages) with progressive difficulty, delivered as a print-ready PDF within 24-48 hours.
|
||||
|
||||
**Q: What age range are these for?**
|
||||
A: Primarily ages 6-10 (grades 1-4). Difficulty levels within each worksheet type cover this full range — from beginners to advanced learners.
|
||||
|
||||
**Q: Is the math pedagogically sound?**
|
||||
A: Yes. Every worksheet type is designed around specific cognitive skills identified in early mathematics education research. We focus on deliberate practice of critical skills, not random drill.
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
# Intellectual Property & Licensing Risk Assessment
|
||||
|
||||
## The Problem
|
||||
|
||||
Using popular character brands (Sonic, Frozen, Paw Patrol) as worksheet themes carries significant IP/licensing risk. This document outlines the risks and the recommended approach.
|
||||
|
||||
## Risk Levels by Approach
|
||||
|
||||
### ❌ HIGH RISK: Direct Character Use
|
||||
- Using official character images, names, or logos
|
||||
- Creating worksheets titled "Paw Patrol Math" or "Frozen Addition"
|
||||
- This WILL result in takedown notices and potential legal action
|
||||
- **Never do this.**
|
||||
|
||||
### ⚠️ MEDIUM RISK: Fan Art / Inspired Characters
|
||||
- Creating original illustrations "inspired by" popular characters
|
||||
- Using similar color schemes, settings, or aesthetics without named characters
|
||||
- Risk depends on how closely the art resembles the original
|
||||
- **Grey area — potentially defensible but risky at scale.**
|
||||
|
||||
### ✅ LOW RISK: Genre-Based Themes (RECOMMENDED)
|
||||
- Creating original themed worlds that capture the same appeal:
|
||||
- Instead of "Paw Patrol" → **"Puppy Rescue Squad"** — original rescue puppy characters
|
||||
- Instead of "Frozen" → **"Ice Kingdom Adventure"** — original ice princess and snow creatures
|
||||
- Instead of "Sonic" → **"Speed Runner"** — original fast animal character in colorful worlds
|
||||
- Instead of "No Man's Sky" → **"Star Explorer"** — original space exploration theme (already done!)
|
||||
- Children are attracted to the GENRE (space, puppies, ice magic, speed) not the specific brand
|
||||
- This approach is legally safe and creatively unlimited
|
||||
|
||||
## Recommended Strategy
|
||||
|
||||
### 1. Build Original Theme Library
|
||||
Create a library of original visual themes based on popular genres:
|
||||
|
||||
| Genre | Theme Name | Visual Elements | Appeal |
|
||||
|-------|-----------|----------------|--------|
|
||||
| Space | Star Explorer | Spaceships, asteroids, planets | ✅ Already built |
|
||||
| Rescue Animals | Puppy Rescue Squad | Cute puppies in rescue gear | Dogs + heroism |
|
||||
| Ice Magic | Frost Kingdom | Ice castles, snow creatures, crystals | Magic + winter |
|
||||
| Speed/Racing | Turbo Run | Fast animals, racing tracks, power-ups | Speed + competition |
|
||||
| Underwater | Deep Sea Discovery | Submarines, sea creatures, treasure | Ocean exploration |
|
||||
| Dinosaurs | Dino Lab | Friendly dinosaurs, volcanoes, fossils | Prehistoric wonder |
|
||||
| Fairy Tale | Enchanted Forest | Dragons, wizards, magical creatures | Classic fantasy |
|
||||
| Construction | Build It! | Vehicles, buildings, tools | Building + creating |
|
||||
|
||||
### 2. Marketing Language
|
||||
- **DO say:** "Space-themed worksheets" / "Worksheets for kids who love puppies and rescue adventures"
|
||||
- **DON'T say:** "Paw Patrol worksheets" / "Frozen math activities"
|
||||
- **DO say:** "Themed to match your child's interests"
|
||||
- **DON'T say:** "Your child's favorite characters"
|
||||
|
||||
### 3. Custom Orders
|
||||
When parents request "my child loves Paw Patrol," create a "rescue puppies" theme that captures the genre appeal without infringing IP. Most parents care about the *type* of content (cute dogs doing heroic things), not the specific brand.
|
||||
|
||||
### 4. Platform Compliance
|
||||
- Pinterest, Instagram, Teachers Pay Teachers all enforce IP policies
|
||||
- Using brand names in descriptions/tags can result in content removal
|
||||
- Original themed content has no platform restrictions
|
||||
|
||||
## Exception: Public Domain & Creative Commons
|
||||
|
||||
Some themes are IP-free:
|
||||
- Classic fairy tales (Cinderella, Snow White — the original stories, not Disney versions)
|
||||
- Dinosaurs, space, ocean, nature — no IP owner
|
||||
- Generic fantasy (dragons, unicorns, wizards)
|
||||
- Historical themes (pirates, knights, explorers)
|
||||
|
||||
These can be used freely without any restrictions.
|
||||
|
||||
## Action Items
|
||||
|
||||
- [ ] Develop 3-4 original theme visual libraries (beyond space)
|
||||
- [ ] Create theme naming guide for consistent branding
|
||||
- [ ] Draft parent-facing FAQ about themes ("We create original themed worlds inspired by genres your children love")
|
||||
- [ ] Never use trademarked character names in file names, metadata, or marketing materials
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
# Early-Stage Launch Strategy
|
||||
|
||||
## Current State Assessment
|
||||
|
||||
| Asset | Status |
|
||||
|-------|--------|
|
||||
| Product (worksheets) | ✅ 5 task types, 26+ pages, production quality |
|
||||
| Generation pipeline | ✅ Fully functional |
|
||||
| Website / landing page | ❌ None |
|
||||
| Social media presence | ❌ None |
|
||||
| Audience | ❌ Zero |
|
||||
| Telegram channel | ❌ None |
|
||||
| Email list | ❌ None |
|
||||
| Payment processing | ❌ None |
|
||||
| SEO / organic traffic | ❌ None |
|
||||
|
||||
## Phase 1: Foundation (Weeks 1-4)
|
||||
|
||||
### Goal: Establish online presence and seed content
|
||||
|
||||
#### 1.1 Landing Page
|
||||
- Simple one-page site showcasing worksheet samples
|
||||
- Clear value proposition above the fold
|
||||
- Free download section (email gate optional — consider ungated for initial traction)
|
||||
- "Custom worksheets" contact form
|
||||
- Mobile-friendly, fast-loading
|
||||
- **Tech:** Can be a polished `index.html` hosted on GitHub Pages, Netlify, or Vercel
|
||||
|
||||
#### 1.2 Telegram Channel (Russian Market)
|
||||
- Channel name aligned with brand
|
||||
- Initial content: 5-7 posts with free worksheet previews
|
||||
- Pin message explaining the project and what's available
|
||||
- Post schedule: 2-3x/week
|
||||
|
||||
#### 1.3 Pinterest Account
|
||||
- Create pins for EVERY worksheet page (screenshot → pin)
|
||||
- Pinterest is the #1 discovery platform for printable worksheets
|
||||
- Board structure: one board per theme, one per skill type
|
||||
- Pin descriptions: SEO-optimized with keywords parents search
|
||||
- **Critical:** Pinterest is a long-term traffic engine — pins surface for months/years
|
||||
|
||||
#### 1.4 Instagram Account
|
||||
- Showcase worksheet designs (carousels work well)
|
||||
- Behind-the-scenes content (how personalization works)
|
||||
- Reels: short clips of "boring vs our worksheet" comparisons
|
||||
- Target hashtags: #printableworksheets #mathforkids #homeschool #educationalmaterials
|
||||
|
||||
### Deliverables:
|
||||
- [ ] Landing page live
|
||||
- [ ] Telegram channel with 5+ posts
|
||||
- [ ] Pinterest account with 20+ pins
|
||||
- [ ] Instagram account with 5+ posts
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Content & Community (Weeks 5-12)
|
||||
|
||||
### Goal: Build initial audience through value-first content
|
||||
|
||||
#### 2.1 Free Content Strategy
|
||||
- Release 1-2 new free worksheet sets per week
|
||||
- Alternate between themes and skill types
|
||||
- Each release = social media post + pin + Telegram post
|
||||
- Create a "Weekly Free Worksheet" ritual
|
||||
|
||||
#### 2.2 SEO Content
|
||||
- Blog posts targeting long-tail keywords:
|
||||
- "Printable addition through 10 worksheets"
|
||||
- "Themed math worksheets for 7 year olds"
|
||||
- "Paw Patrol math activities printable"
|
||||
- "Рабочие листы по математике для 1 класса скачать"
|
||||
- Each post includes free downloadable worksheet + educational context
|
||||
|
||||
#### 2.3 Community Seeding
|
||||
- Join parent groups on Facebook/VK/Telegram
|
||||
- Share free worksheets genuinely (not spammy)
|
||||
- Answer questions about math learning for young children
|
||||
- Build reputation as helpful, not salesy
|
||||
|
||||
#### 2.4 Theme Expansion
|
||||
- Add 2-3 new visual themes beyond space
|
||||
- Each new theme = content event (social media announcement, free samples)
|
||||
|
||||
### Deliverables:
|
||||
- [ ] 8-12 new free worksheet sets published
|
||||
- [ ] 5+ SEO blog posts
|
||||
- [ ] Active in 3-5 parent communities
|
||||
- [ ] 2-3 new themes launched
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: Monetization (Weeks 13-20)
|
||||
|
||||
### Goal: Validate paid offering with first customers
|
||||
|
||||
#### 3.1 Custom Order Pipeline
|
||||
- Simple order form: child's age, interests, skill to practice, difficulty preference
|
||||
- Communication via Telegram/email
|
||||
- Turnaround: 24-48 hours
|
||||
- Pricing: $5-10 per worksheet set (3-5 pages)
|
||||
- Payment: direct transfer, PayPal, or Stripe link
|
||||
|
||||
#### 3.2 First Customers
|
||||
- Offer custom worksheets to engaged community members (at discount or free)
|
||||
- Collect testimonials and feedback
|
||||
- Refine the ordering process based on real interactions
|
||||
|
||||
#### 3.3 Referral Mechanism
|
||||
- "Share with a friend, both get a free custom set"
|
||||
- Parents sharing in their WhatsApp/Telegram groups is the primary growth engine
|
||||
|
||||
### Deliverables:
|
||||
- [ ] Order form live
|
||||
- [ ] 10+ custom orders completed
|
||||
- [ ] 5+ testimonials collected
|
||||
- [ ] Referral program active
|
||||
|
||||
---
|
||||
|
||||
## Key Metrics to Track
|
||||
|
||||
| Metric | Tool |
|
||||
|--------|------|
|
||||
| Website visitors | Google Analytics / Plausible |
|
||||
| PDF downloads | Download counter on site |
|
||||
| Telegram subscribers | Telegram stats |
|
||||
| Pinterest impressions/saves | Pinterest Analytics |
|
||||
| Instagram followers/engagement | Instagram Insights |
|
||||
| Custom order inquiries | Form submissions |
|
||||
| Conversion rate (visitor → download) | Analytics |
|
||||
| Conversion rate (free user → paid) | Manual tracking |
|
||||
|
||||
---
|
||||
|
||||
## Budget Estimate (Phase 1-2)
|
||||
|
||||
| Item | Cost |
|
||||
|------|------|
|
||||
| Domain name | $10-15/year |
|
||||
| Hosting (GitHub Pages/Netlify) | Free |
|
||||
| Canva Pro (social graphics) | $13/month |
|
||||
| Pinterest ads (optional, Phase 2) | $50-100/month |
|
||||
| AI image generation (Banatie) | Existing subscription |
|
||||
| Total Phase 1-2 | ~$50-150 |
|
||||
|
||||
---
|
||||
|
||||
## What NOT to Do (Early Stage)
|
||||
|
||||
- ❌ Don't build a complex web app — a landing page + PDFs is enough
|
||||
- ❌ Don't spend on Facebook/Instagram ads before organic content works
|
||||
- ❌ Don't create 10 themes at once — depth over breadth
|
||||
- ❌ Don't worry about subscriptions yet — validate single purchases first
|
||||
- ❌ Don't over-automate the custom order process — manual is fine for first 50 orders
|
||||
- ❌ Don't use copyrighted character names/images — create original themed art
|
||||
|
|
@ -0,0 +1,294 @@
|
|||
# Market Research Report
|
||||
|
||||
## Executive Summary
|
||||
|
||||
The market for AI-generated educational worksheets is **$1.25B (2025)**, projected to reach **$4.91B by 2033** (CAGR 18.69%). Homeschooling is booming (4M children in US, 5.4% of all students, growing 4.9%/year). The personalized learning market is **$6.99B** and growing at 18.87% CAGR.
|
||||
|
||||
**Key finding: No competitor combines AI generation + beautiful themed illustrations + skill-targeted pedagogy + print-ready design.** This is a genuine market gap.
|
||||
|
||||
---
|
||||
|
||||
## 1. Market Size & Demand
|
||||
|
||||
| Market Segment | 2024-2025 Value | Projected (2033-2034) | CAGR |
|
||||
|----------------|----------------|----------------------|------|
|
||||
| AI-Generated Worksheet Market | $1.25B | $4.91B | 18.69% |
|
||||
| K-12 EdTech Market | $295.6B | $908.1B | 13.3% |
|
||||
| Personalized Learning | $6.99B | $33.1B | 18.87% |
|
||||
| AI in Personalized Learning | $6.5B | $208.2B | 41.4% |
|
||||
| Homeschooling Materials | $3.5B | $7.2B | 8.5% |
|
||||
|
||||
### Homeschooling Boom (Key Driver)
|
||||
- **4 million children** homeschooled in the US (2024)
|
||||
- **5.4%** of US children (up from 2.8% pre-pandemic)
|
||||
- Growth rate **4.9%/year** — nearly 3x pre-pandemic levels
|
||||
|
||||
### Parent Spending
|
||||
- Educational apps/subscriptions: **$20-$150/year** per child
|
||||
- Back-to-school spending: **$685/household** average
|
||||
- Tutoring: **$400/month** ($4,800/year) average
|
||||
- "Math worksheets" — estimated **100K-1M monthly searches** globally
|
||||
|
||||
---
|
||||
|
||||
## 2. Competitor Landscape
|
||||
|
||||
### Major Platforms
|
||||
|
||||
| Platform | Model | Pricing | Weaknesses |
|
||||
|----------|-------|---------|------------|
|
||||
| **Education.com** | Freemium (3 free/month) | $10-16/mo | Auto-renewal complaints, thin content grades 3-5 |
|
||||
| **Teachers Pay Teachers** | Marketplace | $1-10/resource | Quality inconsistent, account closures, trust issues after IXL acquisition |
|
||||
| **Twinkl** | Subscription | ~$11+/mo | UK-focused, overwhelming volume |
|
||||
| **IXL** | Subscription | $10-20/mo | **1.5/5 stars**, anxiety-inducing scoring, no lessons |
|
||||
| **K5 Learning** | Free + paid | Free worksheets, $25/mo program | Plain design |
|
||||
| **Math-Drills.com** | Free (ad-supported) | Free | Black-and-white, no themes, no personalization |
|
||||
|
||||
### Russian Market
|
||||
|
||||
| Platform | Notes |
|
||||
|----------|-------|
|
||||
| **Childdevelop.info** | Large free library, has worksheet generator |
|
||||
| **Wunderkiddy.com** | 6,700+ worksheets ages 1-7 |
|
||||
| **Infourok.ru** | 699,000+ materials, marketplace model |
|
||||
| **Razumeykin.ru** | Subscription, exam prep |
|
||||
|
||||
**Russian market insight:** Most content is free or very cheap (~500 rub/year ≈ $5). Revenue potential is significantly lower than English-speaking markets.
|
||||
|
||||
### AI-Powered Worksheet Generators (Closest Competitors)
|
||||
|
||||
| Tool | What They Do | Critical Limitation |
|
||||
|------|-------------|-------------------|
|
||||
| **Math4Fun.io** | AI math worksheets "personalized to interests" | Plain text output, no illustrations |
|
||||
| **Worksheep** | AI math, UK curriculum-aligned | Text-based, no themes |
|
||||
| **MagicSchool.ai** | 60+ teacher AI tools | Generic, teacher-focused |
|
||||
| **Worksheets.AI** | Custom differentiated worksheets | Plain formatting |
|
||||
| **NoteGPT** | Any-topic worksheet generator | No design quality |
|
||||
|
||||
**Critical gap: ALL AI generators produce plain text worksheets.** None offer themed illustrations, beautiful layouts, or game-like visual experience. This is our unique territory.
|
||||
|
||||
---
|
||||
|
||||
## 3. Competitor Pain Points (Our Opportunities)
|
||||
|
||||
### What Users Complain About
|
||||
|
||||
**Education.com:**
|
||||
- Unauthorized billing and auto-renewal traps
|
||||
- Content too basic for upper elementary
|
||||
- Technical display issues
|
||||
|
||||
**Teachers Pay Teachers:**
|
||||
- Account closures without notice, withheld earnings
|
||||
- ASCD research: most materials are "mediocre" or "probably not worth using"
|
||||
- Quality control is nonexistent — anyone can sell anything
|
||||
|
||||
**IXL:**
|
||||
- **1.5/5 stars** on Common Sense Media
|
||||
- Anxiety-inducing scoring system that penalizes wrong answers heavily
|
||||
- No teaching — only drilling
|
||||
- Children develop math anxiety from the platform
|
||||
|
||||
**Free worksheet sites:**
|
||||
- Ugly, plain black-and-white design
|
||||
- Generic problems not targeting specific skills
|
||||
- No difficulty calibration
|
||||
- No engagement mechanism — children refuse to do them
|
||||
|
||||
### What Users Love (Across Platforms)
|
||||
- Beautiful design that children enjoy looking at
|
||||
- Themed content matching interests
|
||||
- Progressive difficulty
|
||||
- Print-ready formatting
|
||||
- Specific skill targeting (when available)
|
||||
|
||||
---
|
||||
|
||||
## 4. Validation: Do Our Features Matter?
|
||||
|
||||
### Personalization
|
||||
- Customized content makes learning **50% more engaging** (NIH study)
|
||||
- Personalized learning: **+8 points in math, +9 in reading** (RAND study, 11,000 students)
|
||||
- **12% attendance increase, 15% dropout decrease** in personalized programs
|
||||
- Parents increasingly want "power to customize how and where kids learn"
|
||||
|
||||
**Verdict: Strong demand signal. Personalization is validated.**
|
||||
|
||||
### Design Quality (Colors, Themes)
|
||||
- Colorful materials **increase engagement and memory retention**
|
||||
- Children have **positive reactions to bright colors**, negative to gray/dull
|
||||
- BUT excessive colorfulness can distract ages 5-8
|
||||
- Our approach (beautiful but strategically designed, not overloaded) is **ideal per research**
|
||||
|
||||
**Verdict: Design matters, but balance is key. Our approach is research-aligned.**
|
||||
|
||||
### Themed Content
|
||||
- Character-themed materials drive significantly higher engagement
|
||||
- Parents actively search for themed printables on Pinterest/Etsy
|
||||
- Teachers report themed approaches "draw attention to learning time"
|
||||
- **No competitor currently offers themed + AI-generated + skill-targeted + beautiful design**
|
||||
|
||||
**Verdict: Themes are a real differentiator. The combination is unique.**
|
||||
|
||||
### Skill Targeting
|
||||
- Parents know their child struggles with specific skills but can't find focused materials
|
||||
- Generic "2nd grade math" worksheets waste time on already-mastered skills
|
||||
- Tutors charge $400/month partly because they can target specific weaknesses
|
||||
|
||||
**Verdict: Specific skill targeting is underserved and highly valued.**
|
||||
|
||||
---
|
||||
|
||||
## 5. Distribution Channel Analysis
|
||||
|
||||
### Ranked by Potential for Our Product
|
||||
|
||||
| Channel | Potential | Why | Priority |
|
||||
|---------|----------|-----|----------|
|
||||
| **Pinterest** | ★★★★★ | #1 platform for printable discovery. 5x more traffic than other social. Pins are permanent. Education is top niche. | Immediate |
|
||||
| **Google SEO** | ★★★★★ | Highest volume. Long-tail keywords ("space themed addition worksheets grade 1"). Free traffic. | Immediate |
|
||||
| **Etsy** | ★★★★☆ | Proven marketplace for digital printables. Average digital seller: $2,400/mo. Near-zero cost to start. | Immediate |
|
||||
| **Telegram** (RU) | ★★★★☆ | 8+ parent-focused channels. Low-cost access. Less competition. | Immediate (RU market) |
|
||||
| **Instagram Reels** | ★★★☆☆ | 35% of Instagram usage. But engagement declining -24% YoY. Visual format fits our product. | Phase 2 |
|
||||
| **Facebook Groups** | ★★★☆☆ | Homeschool and grade-level parent communities. Organic reach declining. | Phase 2 |
|
||||
| **TPT** | ★★☆☆☆ | 233K+ sellers, $253M paid in 2024. But trust issues, crowded, 30% commission. | Optional |
|
||||
|
||||
### Pinterest Deep Dive
|
||||
- Users are in "discovery + save" mode (high intent)
|
||||
- Printable worksheets are a top-performing niche
|
||||
- One blogger grew from 74K to **300K monthly views in 12 weeks**
|
||||
- Each worksheet = a permanent pin driving traffic for years
|
||||
- **This should be priority #1 for traffic generation**
|
||||
|
||||
### Etsy Opportunity
|
||||
- Digital products have **near-100% margins** (no inventory, no shipping)
|
||||
- Beginners: $100-$1,000/month
|
||||
- Established sellers: $4,000-$10,000/month
|
||||
- Top earners: $400K/year
|
||||
- Our product quality would stand out significantly vs typical Etsy printables
|
||||
|
||||
---
|
||||
|
||||
## 6. Pricing Strategy Validation
|
||||
|
||||
### Market Reference Points
|
||||
|
||||
| Product | Price Point |
|
||||
|---------|------------|
|
||||
| Education.com subscription | $10-16/month |
|
||||
| IXL (1 subject) | $10/month or $79/year |
|
||||
| TPT worksheet packs | $1-5 per pack |
|
||||
| Etsy printable worksheets | $2-8 per pack |
|
||||
| Parent app subscriptions | $20-150/year |
|
||||
| Russian market subscriptions | ~$5/year |
|
||||
|
||||
### Recommended Pricing (Validated)
|
||||
|
||||
| Tier | Price | Justification |
|
||||
|------|-------|---------------|
|
||||
| **Free** | $0 | 3-5 pre-made themed worksheets. Lead gen, quality showcase. |
|
||||
| **Themed pack** (Etsy/direct) | $3-5 per pack (5-10 pages) | Aligns with Etsy/TPT benchmarks. Impulse-buy range. |
|
||||
| **Custom generation** | $15-25 per personalized pack | **No competitor offers this.** Premium positioning. Child's specific interests + skill level. |
|
||||
| **Subscription** (future) | $7-12/month | Between Education.com ($10) and IXL ($10-20). Only when 30+ worksheets exist. |
|
||||
|
||||
**Key insight:** The custom generation tier ($15-25) is our unique offering. No one else can do this. It's also significantly cheaper than tutoring ($400/month) while addressing a similar need (targeted skill practice).
|
||||
|
||||
---
|
||||
|
||||
## 7. Risk Assessment (Research-Backed)
|
||||
|
||||
### IP/Licensing Risk — HIGH ⚠️
|
||||
- Using Sonic, Frozen, Paw Patrol characters = **copyright infringement**, even for "educational" purposes
|
||||
- Rights holders (Sega, Disney, Spin Master) actively enforce
|
||||
- Even "educational purpose" rarely qualifies for fair use if commercial
|
||||
- **Mitigation:** Original themed characters inspired by genres. Current space theme is perfect — it's original IP. See [ip-risk-assessment.md](ip-risk-assessment.md).
|
||||
|
||||
### AI Trust — MEDIUM ⚠️
|
||||
- **70% of parents oppose AI using student data**
|
||||
- "Parent trust decreases as AI exposure increases" — unusual pattern
|
||||
- AI hallucinations/accuracy concerns for education
|
||||
- **Mitigation:** Position as "AI-assisted, human-curated." Make AI invisible. Parents buy results, not technology. Never lead with "AI" in marketing.
|
||||
|
||||
### EdTech Failure Patterns — MEDIUM ⚠️
|
||||
- Common failures: building tech not solving problems, slow monetization (5-10 years), misalignment with curriculum
|
||||
- **Mitigation:** Start direct-to-parent (not schools). Sell individual worksheets (fast monetization). Validate with real parents before scaling.
|
||||
|
||||
### Market Competition — LOW ✅
|
||||
- No competitor has our specific combination
|
||||
- Space is crowded with free content, but free ≠ beautiful, targeted, or personalized
|
||||
- **Our moat:** The AI+design pipeline that produces custom themed worksheets in hours
|
||||
|
||||
---
|
||||
|
||||
## 8. Audience Access Points
|
||||
|
||||
### Where to Find Our Parents
|
||||
|
||||
**English-speaking:**
|
||||
- Pinterest boards for worksheets (900+ pins, massive engagement)
|
||||
- Homeschool Facebook groups (thousands of active communities)
|
||||
- Instagram educational content (#mathforkids, #homeschoolmath)
|
||||
- Google long-tail searches
|
||||
- Etsy browsing ("printable worksheets for kids")
|
||||
|
||||
**Russian-speaking:**
|
||||
- Telegram parent channels: @melfm (Mel media), math olympiad channels, Uzorova author channels
|
||||
- **90+ EdTech Telegram channels** catalogued by vc.ru
|
||||
- VK parent groups
|
||||
- Infourok.ru, Childdevelop.info — discovery platforms
|
||||
|
||||
### Access Strategy
|
||||
1. **Pinterest:** Create pins for EVERY worksheet page. Optimize descriptions. Pin daily. This is the traffic engine.
|
||||
2. **Etsy:** List packs. Get initial reviews. Let marketplace traffic find us.
|
||||
3. **Telegram:** Start a channel. Post free worksheets. Engage in parent channel comments.
|
||||
4. **SEO:** Each worksheet = a landing page with long-tail keywords.
|
||||
5. **Instagram:** Visual showcases, before/after comparisons, Reels.
|
||||
|
||||
---
|
||||
|
||||
## 9. Signals & Opportunities
|
||||
|
||||
### Gold Nuggets Found
|
||||
|
||||
1. **IXL has 1.5/5 stars** — parents actively hate the dominant math platform. They're searching for alternatives. We offer the opposite: engaging, no-anxiety, game-like.
|
||||
|
||||
2. **TPT quality crisis** — ASCD called most materials "mediocre." Trust is eroding. Our consistent high quality is a real differentiator.
|
||||
|
||||
3. **Etsy digital printables = $400K/year** for top sellers with near-100% margins. Our product quality far exceeds typical Etsy printables.
|
||||
|
||||
4. **Pinterest is an untapped goldmine** for printable worksheets. 300K monthly views achievable in 12 weeks with consistent pinning.
|
||||
|
||||
5. **"Personalized to child's interests" search intent exists** — Math4Fun.io is trying to capture it but delivers plain text. We deliver the actual experience parents imagine.
|
||||
|
||||
6. **Homeschooling 4.9%/year growth** — a permanently expanding market that needs constant new content.
|
||||
|
||||
7. **Custom worksheets at $15-25 have NO competition** — tutors charge $400/month, TPT sells $3 generic packs. We're in the premium-but-affordable sweet spot.
|
||||
|
||||
---
|
||||
|
||||
## 10. Strategic Recommendations
|
||||
|
||||
### Immediate (Weeks 1-4)
|
||||
1. ✅ List on Etsy (2-3 packs, $3-5 each) — test demand, collect reviews
|
||||
2. ✅ Create Pinterest account, pin all existing worksheets (20-30 pins)
|
||||
3. ✅ Launch Telegram channel (Russian market, easier initial traction)
|
||||
4. ✅ Create simple landing page with free downloads
|
||||
|
||||
### Short-Term (Months 2-3)
|
||||
5. Add 2-3 original themes (ocean, dinosaurs, fairy tale) — expand appeal
|
||||
6. Create English versions of existing worksheets
|
||||
7. Start SEO blog (1-2 posts/week targeting long-tail keywords)
|
||||
8. Offer custom worksheet service ($15-25/pack)
|
||||
|
||||
### Medium-Term (Months 4-6)
|
||||
9. Scale to 30+ worksheets, consider subscription model ($7-12/month)
|
||||
10. Explore partnerships with homeschool bloggers/influencers
|
||||
11. A/B test pricing on Etsy
|
||||
12. Build email list for direct sales
|
||||
|
||||
### What NOT to Do
|
||||
- ❌ Don't use licensed characters (legal risk)
|
||||
- ❌ Don't lead with "AI" in marketing (parents distrust it)
|
||||
- ❌ Don't sell to schools first (slow, bureaucratic)
|
||||
- ❌ Don't compete on price with free content
|
||||
- ❌ Don't build subscription before having 30+ worksheets
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
# Pedagogical Framework
|
||||
|
||||
## Philosophy
|
||||
|
||||
FunSheet Studio worksheets are not random math exercises. Each worksheet type targets a specific cognitive skill identified by educators as a critical milestone in early mathematical development. We don't create volume — we create precision.
|
||||
|
||||
## Skill Taxonomy
|
||||
|
||||
### Foundation Skills (Ages 6-7)
|
||||
|
||||
| Skill | Why It Matters | Our Task Type |
|
||||
|-------|---------------|---------------|
|
||||
| Number Decomposition | Understanding that numbers are made of parts is the foundation of all arithmetic | Asteroid Splitting |
|
||||
| Addition through 10 | Crossing the tens boundary is the #1 bottleneck in 1st grade math | Cargo Filling |
|
||||
| Skip Counting (2s, 5s, 10s) | Foundation for multiplication; develops number sense | *Planned* |
|
||||
| Number Bonds to 10 | Automatic recall of pairs that make 10 speeds all future computation | Cargo Filling |
|
||||
|
||||
### Developing Skills (Ages 7-8)
|
||||
|
||||
| Skill | Why It Matters | Our Task Type |
|
||||
|-------|---------------|---------------|
|
||||
| Multi-addend Sums | Combining 3+ numbers builds working memory and strategy | Collecting Asteroids |
|
||||
| Constraint Satisfaction | Matching values to targets develops logical thinking | Collecting Asteroids |
|
||||
| Multiplication Introduction | Understanding multiplication as repeated addition | Space Exploration |
|
||||
| Mental Math Strategies | Developing efficient computation shortcuts | Space Exploration |
|
||||
|
||||
### Advanced Skills (Ages 8-10)
|
||||
|
||||
| Skill | Why It Matters | Our Task Type |
|
||||
|-------|---------------|---------------|
|
||||
| Pattern Recognition | Seeing and extending patterns is core mathematical thinking | Space Route |
|
||||
| Pathfinding with Constraints | Logical deduction + spatial reasoning combined | Space Route |
|
||||
| Multi-step Operations | Chaining operations builds procedural fluency | Space Exploration |
|
||||
| Estimation & Verification | Checking answers develops mathematical maturity | *Planned* |
|
||||
|
||||
## Difficulty Calibration System
|
||||
|
||||
Each worksheet type supports 3-5 difficulty levels:
|
||||
|
||||
### Level Indicators:
|
||||
- ⭐ (Beginner) — Guided, with hints, small numbers
|
||||
- ⭐⭐ (Developing) — Some hints, medium numbers
|
||||
- ⭐⭐⭐ (Confident) — No hints, larger numbers, more items
|
||||
- ⭐⭐⭐⭐ (Advanced) — Complex constraints, multi-step
|
||||
- ⭐⭐⭐⭐⭐ (Challenge) — For gifted students or older children wanting extra practice
|
||||
|
||||
### Difficulty Parameters (per task type):
|
||||
- **Number range** — what values appear
|
||||
- **Hint density** — how many pre-filled answers
|
||||
- **Items per page** — cognitive load management
|
||||
- **Constraint complexity** — how many rules to follow simultaneously
|
||||
|
||||
## Design Principles for Learning
|
||||
|
||||
### 1. Scaffolded Introduction
|
||||
Each worksheet set starts with the easiest variant. Page 1 always has hints. Difficulty increases gradually across pages. The child builds confidence before facing challenge.
|
||||
|
||||
### 2. Visual Anchoring
|
||||
Every mathematical concept is paired with a concrete visual metaphor:
|
||||
- Splitting numbers = splitting an asteroid into two pieces
|
||||
- Adding to 10 = filling a cargo bay to capacity
|
||||
- Finding sums = collecting asteroids to match a ship's weight limit
|
||||
|
||||
These aren't decorations — they're cognitive scaffolds that help children internalize abstract concepts.
|
||||
|
||||
### 3. Just-Right Challenge
|
||||
Following Vygotsky's Zone of Proximal Development: tasks should be challenging enough to require effort but achievable enough to prevent frustration. Our difficulty calibration system ensures each child works at their optimal level.
|
||||
|
||||
### 4. Intrinsic Motivation Through Theme
|
||||
When a child sees a worksheet about their favorite topic, motivation shifts from extrinsic ("mom told me to") to intrinsic ("I want to help the spaceship"). This is the core mechanism of our approach.
|
||||
|
||||
### 5. Deliberate Practice > Drill
|
||||
Each worksheet targets ONE skill with VARIED approaches. This is deliberate practice — focused, purposeful, with immediate feedback potential. This is far more effective than 100 random problems.
|
||||
|
||||
## Assessment Integration
|
||||
|
||||
Worksheets can serve as informal assessment tools:
|
||||
- **Diagnostic:** Give a child the ⭐⭐⭐ version. If they complete it easily, they don't need this skill. If they struggle, drop to ⭐⭐.
|
||||
- **Progress Monitoring:** Same skill type, increasing difficulty over weeks. Track which level the child is comfortable at.
|
||||
- **Targeted Remediation:** Parent/teacher identifies specific weak skill → we provide the exact worksheet for it.
|
||||
|
||||
## Planned Skill Expansions
|
||||
|
||||
| Skill | Theme Concept | Priority |
|
||||
|-------|--------------|----------|
|
||||
| Skip Counting (2s, 5s, 10s) | "Fuel Station Stops" — counting fuel pods along route | High |
|
||||
| Place Value (tens & ones) | "Crystal Mining" — separating big and small crystals | High |
|
||||
| Subtraction with Regrouping | "Cargo Unloading" — removing items from a full bay | Medium |
|
||||
| Time Telling | "Mission Clock" — reading analog clocks for mission timing | Medium |
|
||||
| Geometry (shapes) | "Space Station Building" — assembling stations from shapes | Low |
|
||||
| Fractions (basic) | "Pizza Planet" — dividing food into equal parts | Low |
|
||||
| Word Problems | "Mission Briefing" — reading a scenario and solving | Medium |
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
# Target Audience & ICP Analysis
|
||||
|
||||
## Market Segments
|
||||
|
||||
### Segment 1: Engaged Parents (Primary)
|
||||
|
||||
**Who:** Parents actively involved in their child's education, supplementing school with home practice.
|
||||
|
||||
**Age of parent:** 28-42
|
||||
**Age of child:** 6-10 (grades 1-4)
|
||||
**Income:** Middle to upper-middle
|
||||
**Education:** Higher education (degree+)
|
||||
|
||||
**Behaviors:**
|
||||
- Searches Google/Pinterest/Яндекс for "printable worksheets" at least monthly
|
||||
- Downloads free educational materials regularly
|
||||
- Shares good finds in parent chats (WhatsApp, Telegram)
|
||||
- Has tried multiple worksheet sources and is dissatisfied
|
||||
- Prints materials at home or at work
|
||||
|
||||
**Pain Points:**
|
||||
- Worksheets are either ugly/boring OR pretty but educationally shallow
|
||||
- Can't find materials targeting specific skills their child needs
|
||||
- One-size-fits-all difficulty — too easy or too hard
|
||||
- Child loses interest after 1-2 minutes with plain worksheets
|
||||
- Buying workbooks is expensive and most pages are irrelevant to current needs
|
||||
|
||||
**Willingness to Pay:**
|
||||
- Free: Will download and use enthusiastically
|
||||
- $3-5: Impulse buy for a themed set matching child's interest
|
||||
- $5-15: Considered purchase for personalized skill-targeting set
|
||||
- $15-25: For a comprehensive themed learning pack (10+ pages, progressive difficulty)
|
||||
|
||||
### Segment 2: Homeschooling Parents
|
||||
|
||||
**Who:** Parents fully responsible for their child's curriculum.
|
||||
|
||||
**Behaviors:**
|
||||
- Actively searches for structured learning materials
|
||||
- Part of homeschooling communities (Facebook groups, forums, co-ops)
|
||||
- Willing to invest significantly in quality materials
|
||||
- Values curriculum alignment and skill progression
|
||||
|
||||
**Pain Points:**
|
||||
- Needs materials that cover specific curriculum standards
|
||||
- Fatigue from constantly sourcing materials
|
||||
- Wants consistency in visual style and difficulty progression
|
||||
- Hard to find materials that are both engaging AND rigorous
|
||||
|
||||
**Willingness to Pay:** Higher than average — $10-25 per set, subscription-friendly
|
||||
|
||||
### Segment 3: Elementary Teachers & Tutors
|
||||
|
||||
**Who:** Professionals who need supplementary materials for their students.
|
||||
|
||||
**Behaviors:**
|
||||
- Browses Teachers Pay Teachers, Twinkl, similar platforms
|
||||
- Values print-ready, consistent formatting
|
||||
- Often serves multiple students with different needs
|
||||
- Shares effective resources with colleagues
|
||||
|
||||
**Pain Points:**
|
||||
- Differentiating instruction for varied skill levels
|
||||
- Finding materials that students actually enjoy
|
||||
- Time spent creating custom worksheets from scratch
|
||||
|
||||
**Willingness to Pay:** $5-15 per set, institutional budget may allow more
|
||||
|
||||
### Segment 4: Grandparents & Extended Family
|
||||
|
||||
**Who:** Grandparents who want to engage productively during visits/babysitting.
|
||||
|
||||
**Behaviors:**
|
||||
- Less tech-savvy but can follow simple download instructions
|
||||
- Seeks meaningful activities to do with grandchildren
|
||||
- Values tangible (printed) activities over screen time
|
||||
|
||||
**Pain Points:**
|
||||
- Doesn't know what's age-appropriate
|
||||
- Wants something ready-made and easy to use
|
||||
- Needs clear instructions
|
||||
|
||||
**Willingness to Pay:** Gift purchases — willing to pay premium for "complete package"
|
||||
|
||||
---
|
||||
|
||||
## Ideal Customer Profiles (ICPs)
|
||||
|
||||
### ICP 1: "Targeted Practice Parent" (Highest Value)
|
||||
|
||||
> **"My child struggles with a specific skill and I need focused practice materials that don't bore them."**
|
||||
|
||||
- Has identified a specific learning gap (e.g., "addition through 10")
|
||||
- Wants the exact right difficulty level
|
||||
- Will pay for personalization
|
||||
- Conversion trigger: seeing a worksheet that targets exactly their child's weak spot
|
||||
|
||||
**How to reach:** SEO for specific skill keywords, parent forums, teacher recommendations
|
||||
|
||||
### ICP 2: "Design-Conscious Parent" (Best Viral Potential)
|
||||
|
||||
> **"I want educational materials that look beautiful, not like a photocopy from the 1990s."**
|
||||
|
||||
- Aesthetics matter — notices design quality immediately
|
||||
- Will share beautiful materials on social media
|
||||
- Downloads based on visual appeal first, educational value second
|
||||
- Conversion trigger: seeing the visual quality difference vs competitors
|
||||
|
||||
**How to reach:** Pinterest, Instagram, visual-first platforms
|
||||
|
||||
### ICP 3: "Interest-Driven Parent" (Best for Themes)
|
||||
|
||||
> **"My child only engages when their favorite characters are involved."**
|
||||
|
||||
- Knows their child's current obsession (Sonic, Frozen, dinosaurs, etc.)
|
||||
- Has tried generic worksheets and failed to maintain engagement
|
||||
- Values the themed approach over everything else
|
||||
- Conversion trigger: seeing a worksheet with their child's favorite theme
|
||||
|
||||
**How to reach:** Theme-specific search terms, fan parent communities
|
||||
|
||||
### ICP 4: "Structured Homeschooler" (Best for Retention)
|
||||
|
||||
> **"I need consistent, progressive materials that build skills over time."**
|
||||
|
||||
- Follows a curriculum plan
|
||||
- Values skill progression and difficulty calibration
|
||||
- Likely to become a repeat customer / subscriber
|
||||
- Conversion trigger: seeing the progressive difficulty system
|
||||
|
||||
**How to reach:** Homeschooling communities, Facebook groups, curriculum forums
|
||||
|
||||
---
|
||||
|
||||
## Geographic Priorities
|
||||
|
||||
### Tier 1: Russian-speaking market
|
||||
- **Why first:** Content already exists in Russian, founder speaks Russian, smaller competition
|
||||
- **Channels:** Telegram, VK, Яндекс, Instagram
|
||||
- **Language:** Russian worksheets + Russian marketing
|
||||
|
||||
### Tier 2: English-speaking market (US, UK, Australia, Canada)
|
||||
- **Why second:** Largest market, highest willingness to pay, Pinterest/SEO driven
|
||||
- **Channels:** Pinterest, Instagram, Google, Facebook groups
|
||||
- **Language:** English worksheets + English marketing
|
||||
|
||||
### Tier 3: Other languages
|
||||
- **Future expansion:** Spanish, German, French
|
||||
- **Approach:** Localize proven worksheet types, partner with local educators
|
||||
|
||||
---
|
||||
|
||||
## Audience Size Estimates
|
||||
|
||||
| Segment | Global (English) | Russian-speaking |
|
||||
|---------|-------------------|-----------------|
|
||||
| Parents with kids 6-10 | ~150M households | ~15M households |
|
||||
| Actively searching for worksheets | ~10-15M/year | ~2-3M/year |
|
||||
| Willing to pay for premium | ~1-2M | ~200-400K |
|
||||
| Our realistic addressable (Year 1) | ~5,000-10,000 | ~1,000-3,000 |
|
||||
|
||||
*Estimates based on search volume data for "printable worksheets" and related terms. Actual reach depends on marketing execution.*
|
||||
|
|
@ -6,23 +6,786 @@
|
|||
{
|
||||
"index": 0,
|
||||
"asteroidScale": 0.85,
|
||||
"innerAst": {
|
||||
"left": 60
|
||||
},
|
||||
"badge": {
|
||||
"left": 36,
|
||||
"top": 33
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"asteroidScale": 0.95,
|
||||
"ship": {
|
||||
"right": -20.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 57,
|
||||
"top": 70
|
||||
"left": 54,
|
||||
"top": 61
|
||||
},
|
||||
"badge": {
|
||||
"left": 23
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"ship": {
|
||||
"right": -24.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 47,
|
||||
"top": 61
|
||||
},
|
||||
"badge": {
|
||||
"left": 22,
|
||||
"top": 41
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"ship": {
|
||||
"right": -14.5,
|
||||
"top": -9
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 54,
|
||||
"top": 67
|
||||
},
|
||||
"badge": {
|
||||
"left": 29,
|
||||
"top": 49
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"asteroidScale": 1.2,
|
||||
"ship": {
|
||||
"right": -18.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 44,
|
||||
"top": 51
|
||||
},
|
||||
"badge": {
|
||||
"left": 27
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"ship": {
|
||||
"right": -20.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 53,
|
||||
"top": 67
|
||||
},
|
||||
"badge": {
|
||||
"left": 24
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"page": 2,
|
||||
"cards": [
|
||||
{
|
||||
"index": 0,
|
||||
"asteroidScale": 1.95,
|
||||
"ship": {
|
||||
"right": -22.5,
|
||||
"top": -3
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 49,
|
||||
"top": 42
|
||||
},
|
||||
"badge": {
|
||||
"left": 25,
|
||||
"top": 33
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"ship": {
|
||||
"right": -26.5,
|
||||
"right": -22.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 39,
|
||||
"top": 44
|
||||
},
|
||||
"badge": {
|
||||
"left": 27
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"asteroidScale": 2,
|
||||
"ship": {
|
||||
"right": -20.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 52,
|
||||
"top": 60
|
||||
},
|
||||
"badge": {
|
||||
"left": 23,
|
||||
"top": 37
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"ship": {
|
||||
"right": -20.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 55,
|
||||
"top": 62
|
||||
},
|
||||
"badge": {
|
||||
"left": 27,
|
||||
"top": 38
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"ship": {
|
||||
"right": -20.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 40,
|
||||
"left": 46,
|
||||
"top": 51
|
||||
},
|
||||
"badge": {
|
||||
"left": 26,
|
||||
"top": 42
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"ship": {
|
||||
"right": -22.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 53,
|
||||
"top": 56
|
||||
},
|
||||
"badge": {
|
||||
"left": 22
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"page": 3,
|
||||
"cards": [
|
||||
{
|
||||
"index": 0,
|
||||
"ship": {
|
||||
"right": -14.5,
|
||||
"top": -9
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 54,
|
||||
"top": 61
|
||||
},
|
||||
"badge": {
|
||||
"left": 28,
|
||||
"top": 48
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"ship": {
|
||||
"right": -22.5,
|
||||
"top": -9
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 51,
|
||||
"top": 58
|
||||
},
|
||||
"badge": {
|
||||
"left": 22,
|
||||
"top": 42
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"ship": {
|
||||
"right": -18.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 45,
|
||||
"top": 49
|
||||
},
|
||||
"badge": {
|
||||
"left": 26,
|
||||
"top": 44
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"ship": {
|
||||
"right": -20.5,
|
||||
"top": -3
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 39,
|
||||
"top": 34
|
||||
},
|
||||
"badge": {
|
||||
"left": 23,
|
||||
"top": 36
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"ship": {
|
||||
"right": -16.5,
|
||||
"top": -3
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 59,
|
||||
"top": 68
|
||||
},
|
||||
"badge": {
|
||||
"left": 25,
|
||||
"top": 31
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"innerAst": {
|
||||
"left": 61,
|
||||
"top": 75
|
||||
},
|
||||
"badge": {
|
||||
"left": 35,
|
||||
"top": 32
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"page": 4,
|
||||
"cards": [
|
||||
{
|
||||
"index": 0,
|
||||
"ship": {
|
||||
"right": -18.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 47,
|
||||
"top": 49
|
||||
},
|
||||
"badge": {
|
||||
"left": 27,
|
||||
"top": 36
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"ship": {
|
||||
"right": -20.5,
|
||||
"top": -3
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 64,
|
||||
"top": 43
|
||||
},
|
||||
"badge": {
|
||||
"left": 23,
|
||||
"top": 35
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"ship": {
|
||||
"right": -24.5
|
||||
},
|
||||
"badge": {
|
||||
"left": 26
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"innerAst": {
|
||||
"left": 62,
|
||||
"top": 72
|
||||
},
|
||||
"badge": {
|
||||
"left": 35,
|
||||
"top": 32
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"asteroidScale": 2,
|
||||
"ship": {
|
||||
"right": -20.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"top": 60
|
||||
},
|
||||
"badge": {
|
||||
"left": 23
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"ship": {
|
||||
"right": -26.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 48,
|
||||
"top": 56
|
||||
},
|
||||
"badge": {
|
||||
"left": 22,
|
||||
"top": 40
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"page": 5,
|
||||
"cards": [
|
||||
{
|
||||
"index": 0,
|
||||
"asteroidScale": 1.25,
|
||||
"ship": {
|
||||
"right": -22.5,
|
||||
"top": -3
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 53,
|
||||
"top": 51
|
||||
},
|
||||
"badge": {
|
||||
"left": 45,
|
||||
"top": 78
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"ship": {
|
||||
"right": -18.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 59,
|
||||
"top": 67
|
||||
},
|
||||
"badge": {
|
||||
"left": 27,
|
||||
"top": 35
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"ship": {
|
||||
"right": -18.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 54,
|
||||
"top": 55
|
||||
},
|
||||
"badge": {
|
||||
"left": 51,
|
||||
"top": 20
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"ship": {
|
||||
"right": -18.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 56,
|
||||
"top": 55
|
||||
},
|
||||
"badge": {
|
||||
"left": 18,
|
||||
"top": 49
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"ship": {
|
||||
"right": -22.5,
|
||||
"top": -3
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 44,
|
||||
"top": 38
|
||||
},
|
||||
"badge": {
|
||||
"left": 24,
|
||||
"top": 34
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"ship": {
|
||||
"right": -18.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 61,
|
||||
"top": 49
|
||||
},
|
||||
"badge": {
|
||||
"left": 27,
|
||||
"top": 36
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"page": 6,
|
||||
"cards": [
|
||||
{
|
||||
"index": 0,
|
||||
"ship": {
|
||||
"right": -22.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 52,
|
||||
"top": 56
|
||||
},
|
||||
"badge": {
|
||||
"left": 23
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"innerAst": {
|
||||
"left": 73,
|
||||
"top": 66
|
||||
},
|
||||
"badge": {
|
||||
"left": 36,
|
||||
"top": 33
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"ship": {
|
||||
"right": -18.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 66,
|
||||
"top": 43
|
||||
},
|
||||
"badge": {
|
||||
"left": 24,
|
||||
"top": 36
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"ship": {
|
||||
"right": -20.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 48,
|
||||
"top": 53
|
||||
},
|
||||
"badge": {
|
||||
"left": 27,
|
||||
"top": 40
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"ship": {
|
||||
"right": -18.5
|
||||
},
|
||||
"innerAst": {
|
||||
"top": 61
|
||||
},
|
||||
"badge": {
|
||||
"left": 27,
|
||||
"top": 36
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"ship": {
|
||||
"right": -18.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 53,
|
||||
"top": 61
|
||||
},
|
||||
"badge": {
|
||||
"left": 32,
|
||||
"top": 43
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"page": 7,
|
||||
"cards": [
|
||||
{
|
||||
"index": 0,
|
||||
"asteroidScale": 1.35,
|
||||
"ship": {
|
||||
"right": -24.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 55,
|
||||
"top": 55
|
||||
},
|
||||
"badge": {
|
||||
"left": 24
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"ship": {
|
||||
"right": -14.5,
|
||||
"top": -9
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 56
|
||||
},
|
||||
"badge": {
|
||||
"left": 34,
|
||||
"top": 48
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"asteroidScale": 2,
|
||||
"ship": {
|
||||
"right": -18.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 54,
|
||||
"top": 39
|
||||
},
|
||||
"badge": {
|
||||
"left": 27,
|
||||
"top": 34
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"ship": {
|
||||
"right": -22.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 54,
|
||||
"top": 41
|
||||
},
|
||||
"badge": {
|
||||
"left": 27
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"asteroidScale": 1.9,
|
||||
"ship": {
|
||||
"right": -20.5,
|
||||
"top": -7
|
||||
},
|
||||
"badge": {
|
||||
"left": 23,
|
||||
"top": 37
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"ship": {
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 60
|
||||
},
|
||||
"badge": {
|
||||
"left": 35,
|
||||
"top": 31
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"page": 8,
|
||||
"cards": [
|
||||
{
|
||||
"index": 0,
|
||||
"ship": {
|
||||
"right": -22.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 42,
|
||||
"top": 44
|
||||
},
|
||||
"badge": {
|
||||
"left": 27
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"ship": {
|
||||
"right": -18.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 48,
|
||||
"top": 50
|
||||
},
|
||||
"badge": {
|
||||
"left": 27,
|
||||
"top": 38
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"ship": {
|
||||
"right": -20.5,
|
||||
"top": -9
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 55,
|
||||
"top": 57
|
||||
},
|
||||
"badge": {
|
||||
"left": 23,
|
||||
"top": 40
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"ship": {
|
||||
"right": -18.5,
|
||||
"top": -9
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 49,
|
||||
"top": 39
|
||||
},
|
||||
"badge": {
|
||||
"left": 26,
|
||||
"top": 33
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"ship": {
|
||||
"right": -18.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 62,
|
||||
"top": 58
|
||||
},
|
||||
"badge": {
|
||||
"left": 26,
|
||||
"top": 45
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"page": 9,
|
||||
"cards": [
|
||||
{
|
||||
"index": 0,
|
||||
"ship": {
|
||||
"right": -20.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"top": 64
|
||||
},
|
||||
"badge": {
|
||||
"left": 24,
|
||||
"top": 37
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 1,
|
||||
"ship": {
|
||||
"right": -20.5,
|
||||
"top": -9
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 49,
|
||||
"top": 50
|
||||
},
|
||||
"badge": {
|
||||
"left": 28,
|
||||
"top": 48
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 2,
|
||||
"ship": {
|
||||
"right": -24.5,
|
||||
"top": -9
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 39,
|
||||
"top": 62
|
||||
},
|
||||
"badge": {
|
||||
"left": 22,
|
||||
"top": 46
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 3,
|
||||
"asteroidScale": 1.95,
|
||||
"ship": {
|
||||
"right": -14.5,
|
||||
"top": -9
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 59,
|
||||
"top": 59
|
||||
},
|
||||
"badge": {
|
||||
"left": 38,
|
||||
"top": 44
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 4,
|
||||
"asteroidScale": 1.85,
|
||||
"ship": {
|
||||
"right": -20.5,
|
||||
"top": -7
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 60,
|
||||
"top": 58
|
||||
},
|
||||
"badge": {
|
||||
"left": 23
|
||||
}
|
||||
},
|
||||
{
|
||||
"index": 5,
|
||||
"ship": {
|
||||
"right": -18.5
|
||||
},
|
||||
"innerAst": {
|
||||
"left": 59,
|
||||
"top": 52
|
||||
},
|
||||
"badge": {
|
||||
"left": 28,
|
||||
"top": 35
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<title>Заполни Трюм</title>
|
||||
<script>
|
||||
tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
|
||||
|
|
@ -223,6 +223,13 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
/* Handwritten answers for example card */
|
||||
.answer {
|
||||
font-family: 'Caveat', cursive;
|
||||
font-weight: 700;
|
||||
color: #4338ca;
|
||||
}
|
||||
|
||||
.brace-group .brace-content {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
|
@ -277,32 +284,32 @@
|
|||
<div class="card-visual">
|
||||
<div class="space-asteroid">
|
||||
<img src="/assets/icons/pack3-asteroids/asteroid1.png" alt="">
|
||||
<span class="num">3</span>
|
||||
<span class="num">5</span>
|
||||
</div>
|
||||
<div class="cargo-ship">
|
||||
<img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="ship-img" alt="">
|
||||
<div class="badge-10"><span>10</span></div>
|
||||
<div class="inner-ast">
|
||||
<img src="/assets/items/asteroid-shapes/asteroid1.png" alt="">
|
||||
<span class="num">8</span>
|
||||
<span class="num">6</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55">
|
||||
<path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
|
||||
<path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/>
|
||||
</svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid1.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
<div class="arrow-input-box"><span class="answer" style="font-size:1.1rem">4</span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid1.png" alt=""><div class="shape-blank"><span class="answer" style="font-size:1.3rem">1</span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula">
|
||||
<div class="formula-label">запиши формулу для пилота</div>
|
||||
<div class="formula-label" style="color:#4338ca">пример</div>
|
||||
<div class="formula-row">
|
||||
<span>8</span><span>+</span><span>3</span><span>=</span>
|
||||
<span>6</span><span>+</span><span>5</span><span>=</span>
|
||||
<div class="brace-group">
|
||||
<span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span>
|
||||
<span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"><span class="answer" style="font-size:1.1rem">4</span></span><span>)</span></span>
|
||||
<svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
|
||||
<span class="brace-val">10</span>
|
||||
</div>
|
||||
<span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span>
|
||||
<span>+</span><span class="blank"><span class="answer" style="font-size:1.1rem">1</span></span><span>=</span><span class="blank"><span class="answer" style="font-size:1.1rem">11</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
|
@ -312,7 +319,7 @@
|
|||
<div class="card-visual">
|
||||
<div class="space-asteroid">
|
||||
<img src="/assets/icons/pack3-asteroids/asteroid2.png" alt="">
|
||||
<span class="num">4</span>
|
||||
<span class="num">9</span>
|
||||
</div>
|
||||
<div class="cargo-ship">
|
||||
<img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt="">
|
||||
|
|
@ -331,7 +338,7 @@
|
|||
<div class="card-formula">
|
||||
<div class="formula-label">запиши формулу для пилота</div>
|
||||
<div class="formula-row">
|
||||
<span>9</span><span>+</span><span>4</span><span>=</span>
|
||||
<span>9</span><span>+</span><span>9</span><span>=</span>
|
||||
<div class="brace-group">
|
||||
<span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span>
|
||||
<svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
|
||||
|
|
@ -347,14 +354,14 @@
|
|||
<div class="card-visual">
|
||||
<div class="space-asteroid">
|
||||
<img src="/assets/icons/pack3-asteroids/asteroid3.png" alt="">
|
||||
<span class="num">5</span>
|
||||
<span class="num">7</span>
|
||||
</div>
|
||||
<div class="cargo-ship">
|
||||
<img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt="">
|
||||
<div class="badge-10"><span>10</span></div>
|
||||
<div class="inner-ast">
|
||||
<img src="/assets/items/asteroid-shapes/asteroid3.png" alt="">
|
||||
<span class="num">8</span>
|
||||
<span class="num">7</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55">
|
||||
|
|
@ -366,9 +373,9 @@
|
|||
<div class="card-formula">
|
||||
<div class="formula-label">запиши формулу для пилота</div>
|
||||
<div class="formula-row">
|
||||
<span>8</span><span>+</span><span>5</span><span>=</span>
|
||||
<span>7</span><span>+</span><span>7</span><span>=</span>
|
||||
<div class="brace-group">
|
||||
<span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span>
|
||||
<span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span>
|
||||
<svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
|
||||
<span class="brace-val">10</span>
|
||||
</div>
|
||||
|
|
@ -389,7 +396,7 @@
|
|||
<div class="badge-10"><span>10</span></div>
|
||||
<div class="inner-ast">
|
||||
<img src="/assets/items/asteroid-shapes/asteroid4.png" alt="">
|
||||
<span class="num">9</span>
|
||||
<span class="num">6</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55">
|
||||
|
|
@ -401,9 +408,9 @@
|
|||
<div class="card-formula">
|
||||
<div class="formula-label">запиши формулу для пилота</div>
|
||||
<div class="formula-row">
|
||||
<span>9</span><span>+</span><span>6</span><span>=</span>
|
||||
<span>6</span><span>+</span><span>6</span><span>=</span>
|
||||
<div class="brace-group">
|
||||
<span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span>
|
||||
<span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span>
|
||||
<svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
|
||||
<span class="brace-val">10</span>
|
||||
</div>
|
||||
|
|
@ -417,7 +424,7 @@
|
|||
<div class="card-visual">
|
||||
<div class="space-asteroid">
|
||||
<img src="/assets/icons/pack3-asteroids/asteroid5.png" alt="">
|
||||
<span class="num">7</span>
|
||||
<span class="num">3</span>
|
||||
</div>
|
||||
<div class="cargo-ship">
|
||||
<img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt="">
|
||||
|
|
@ -436,7 +443,7 @@
|
|||
<div class="card-formula">
|
||||
<div class="formula-label">запиши формулу для пилота</div>
|
||||
<div class="formula-row">
|
||||
<span>8</span><span>+</span><span>7</span><span>=</span>
|
||||
<span>8</span><span>+</span><span>3</span><span>=</span>
|
||||
<div class="brace-group">
|
||||
<span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span>
|
||||
<svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
|
||||
|
|
@ -459,7 +466,7 @@
|
|||
<div class="badge-10"><span>10</span></div>
|
||||
<div class="inner-ast">
|
||||
<img src="/assets/items/asteroid-shapes/asteroid6.png" alt="">
|
||||
<span class="num">9</span>
|
||||
<span class="num">7</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55">
|
||||
|
|
@ -471,9 +478,9 @@
|
|||
<div class="card-formula">
|
||||
<div class="formula-label">запиши формулу для пилота</div>
|
||||
<div class="formula-row">
|
||||
<span>9</span><span>+</span><span>8</span><span>=</span>
|
||||
<span>7</span><span>+</span><span>8</span><span>=</span>
|
||||
<div class="brace-group">
|
||||
<span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span>
|
||||
<span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span>
|
||||
<svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg>
|
||||
<span class="brace-val">10</span>
|
||||
</div>
|
||||
|
|
@ -505,34 +512,34 @@
|
|||
<!-- Card 1: A=7, B=4 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid7.png" alt=""><span class="num">4</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid7.png" alt=""><span class="num">7</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid7.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid7.png" alt=""><span class="num">9</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid7.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>4</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card 2: A=6, B=5 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid8.png" alt=""><span class="num">5</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid8.png" alt=""><span class="num">6</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid8.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid8.png" alt=""><span class="num">8</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid8.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>6</span><span>+</span><span>5</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card 3: A=7, B=6 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid9.png" alt=""><span class="num">6</span></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid9.png" alt=""><span class="num">4</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid9.png" alt=""><span class="num">7</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid9.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>4</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card 4: A=5, B=7 -->
|
||||
|
|
@ -549,23 +556,23 @@
|
|||
<!-- Card 5: A=6, B=8 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid11.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid11.png" alt=""><span class="num">6</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid11.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid11.png" alt=""><span class="num">9</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid11.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>6</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card 6: A=7, B=9 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid12.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid12.png" alt=""><span class="num">7</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid12.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid12.png" alt=""><span class="num">3</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid12.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>3</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>3</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
|
@ -591,34 +598,34 @@
|
|||
<!-- Card 1: A=4, B=7 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid13.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid13.png" alt=""><span class="num">4</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid13.png" alt=""><span class="num">4</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid13.png" alt=""><span class="num">8</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid13.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>4</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>4</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>4</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card 2: A=3, B=8 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid14.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid14.png" alt=""><span class="num">3</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid14.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid14.png" alt=""><span class="num">6</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid14.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>3</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>3</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>6</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card 3: A=4, B=8 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid15.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid15.png" alt=""><span class="num">4</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid15.png" alt=""><span class="num">2</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid15.png" alt=""><span class="num">9</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid15.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>4</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>4</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>2</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card 4: A=3, B=9 -->
|
||||
|
|
@ -635,23 +642,23 @@
|
|||
<!-- Card 5: A=4, B=9 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid1.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid1.png" alt=""><span class="num">4</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid1.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid1.png" alt=""><span class="num">5</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid1.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>4</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>4</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>5</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card 6: A=2, B=9 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid2.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid2.png" alt=""><span class="num">2</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid2.png" alt=""><span class="num">6</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid2.png" alt=""><span class="num">9</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid2.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>2</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>2</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
|
@ -678,67 +685,67 @@
|
|||
<!-- Card: A=9, B=2 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid3.png" alt=""><span class="num">2</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid3.png" alt=""><span class="num">9</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid3.png" alt=""><span class="num">4</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid3.png" alt=""><span class="num">8</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid3.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>2</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>4</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=8, B=4 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid4.png" alt=""><span class="num">4</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid4.png" alt=""><span class="num">8</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid4.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid4.png" alt=""><span class="num">2</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid4.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>4</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>2</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>2</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=9, B=3 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid5.png" alt=""><span class="num">3</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid5.png" alt=""><span class="num">9</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid5.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid5.png" alt=""><span class="num">5</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid5.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>3</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>5</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=8, B=6 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid6.png" alt=""><span class="num">6</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid6.png" alt=""><span class="num">8</span></div></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid6.png" alt=""><span class="num">7</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid6.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=9, B=5 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid7.png" alt=""><span class="num">5</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid7.png" alt=""><span class="num">9</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid7.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid7.png" alt=""><span class="num">4</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid7.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>5</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>4</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>4</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=8, B=8 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid8.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid8.png" alt=""><span class="num">8</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid8.png" alt=""><span class="num">5</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid8.png" alt=""><span class="num">9</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid8.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>5</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
|
@ -764,67 +771,67 @@
|
|||
<!-- Card: A=7, B=5 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid9.png" alt=""><span class="num">5</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid9.png" alt=""><span class="num">7</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid9.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid9.png" alt=""><span class="num">8</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid9.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>5</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=6, B=6 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid10.png" alt=""><span class="num">6</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid10.png" alt=""><span class="num">6</span></div></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid10.png" alt=""><span class="num">5</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid10.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>6</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>5</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=5, B=6 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid11.png" alt=""><span class="num">6</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid11.png" alt=""><span class="num">5</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid11.png" alt=""><span class="num">4</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid11.png" alt=""><span class="num">9</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid11.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>5</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>4</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=6, B=7 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid12.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid12.png" alt=""><span class="num">6</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid12.png" alt=""><span class="num">5</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid12.png" alt=""><span class="num">7</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid12.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>6</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>5</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=7, B=7 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid13.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid13.png" alt=""><span class="num">7</span></div></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid13.png" alt=""><span class="num">8</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid13.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=5, B=8 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid14.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid14.png" alt=""><span class="num">5</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid14.png" alt=""><span class="num">2</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid14.png" alt=""><span class="num">9</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid14.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>5</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>2</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
|
@ -850,67 +857,67 @@
|
|||
<!-- Card: A=9, B=7 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid15.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid15.png" alt=""><span class="num">9</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid15.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid15.png" alt=""><span class="num">7</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid15.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=8, B=9 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid16.png" alt=""><span class="num">9</span></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid16.png" alt=""><span class="num">5</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid16.png" alt=""><span class="num">8</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid16.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>5</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=9, B=9 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid1.png" alt=""><span class="num">9</span></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid1.png" alt=""><span class="num">6</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid1.png" alt=""><span class="num">9</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid1.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=7, B=8 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid2.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid2.png" alt=""><span class="num">7</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid2.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid2.png" alt=""><span class="num">5</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid2.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>5</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=6, B=9 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid3.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid3.png" alt=""><span class="num">6</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid3.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid3.png" alt=""><span class="num">4</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid3.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>6</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>4</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>4</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=5, B=9 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid4.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid4.png" alt=""><span class="num">5</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid4.png" alt=""><span class="num">5</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid4.png" alt=""><span class="num">7</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid4.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>5</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>5</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
|
@ -936,67 +943,67 @@
|
|||
<!-- Card: A=9, B=2 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid5.png" alt=""><span class="num">2</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid5.png" alt=""><span class="num">9</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid5.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid5.png" alt=""><span class="num">6</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid5.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>2</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>6</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=8, B=3 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid6.png" alt=""><span class="num">3</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid6.png" alt=""><span class="num">8</span></div></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid6.png" alt=""><span class="num">9</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid6.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>3</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>3</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=9, B=4 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid7.png" alt=""><span class="num">4</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid7.png" alt=""><span class="num">9</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid7.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid7.png" alt=""><span class="num">7</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid7.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>4</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=8, B=5 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid8.png" alt=""><span class="num">5</span></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid8.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid8.png" alt=""><span class="num">8</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid8.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>5</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=9, B=6 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid9.png" alt=""><span class="num">6</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid9.png" alt=""><span class="num">9</span></div></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid9.png" alt=""><span class="num">6</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid9.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>6</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=8, B=7 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid10.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid10.png" alt=""><span class="num">8</span></div></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid10.png" alt=""><span class="num">9</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid10.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
|
@ -1022,67 +1029,67 @@
|
|||
<!-- Card: A=7, B=4 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid11.png" alt=""><span class="num">4</span></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid11.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay8.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid11.png" alt=""><span class="num">7</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid11.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>4</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=6, B=5 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid12.png" alt=""><span class="num">5</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid12.png" alt=""><span class="num">6</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid12.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid12.png" alt=""><span class="num">4</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid12.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>6</span><span>+</span><span>5</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>4</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>4</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=5, B=7 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid13.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid13.png" alt=""><span class="num">5</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid13.png" alt=""><span class="num">5</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid13.png" alt=""><span class="num">9</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid13.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>5</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>5</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>5</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=7, B=6 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid14.png" alt=""><span class="num">6</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid14.png" alt=""><span class="num">7</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid14.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay4.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid14.png" alt=""><span class="num">8</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid14.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=6, B=8 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid15.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid15.png" alt=""><span class="num">6</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid15.png" alt=""><span class="num">4</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay1.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid15.png" alt=""><span class="num">7</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid15.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>6</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>4</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=7, B=9 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid16.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid16.png" alt=""><span class="num">7</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid16.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid16.png" alt=""><span class="num">9</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid16.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>9</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>9</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
|
@ -1109,66 +1116,66 @@
|
|||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid1.png" alt=""><span class="num">7</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid1.png" alt=""><span class="num">4</span></div></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay6.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid1.png" alt=""><span class="num">6</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid1.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>4</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>4</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>6</span><span>+</span><span>7</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=3, B=8 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid3.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid3.png" alt=""><span class="num">3</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid3.png" alt=""><span class="num">6</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay9.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid3.png" alt=""><span class="num">8</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid3.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>3</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>3</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=4, B=9 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid5.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid5.png" alt=""><span class="num">4</span></div></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay3.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid5.png" alt=""><span class="num">7</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid5.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>4</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>4</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=3, B=9 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid7.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid7.png" alt=""><span class="num">3</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid7.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay7.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid7.png" alt=""><span class="num">6</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid7.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>3</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>3</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>6</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>6</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=2, B=9 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid9.png" alt=""><span class="num">9</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid9.png" alt=""><span class="num">2</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid9.png" alt=""><span class="num">3</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay5.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid9.png" alt=""><span class="num">8</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid9.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>2</span><span>+</span><span>9</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>2</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>8</span><span>+</span><span>3</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>8</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Card: A=4, B=8 -->
|
||||
<div class="task-card"><div class="card-inner">
|
||||
<div class="card-visual">
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid11.png" alt=""><span class="num">8</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid11.png" alt=""><span class="num">4</span></div></div>
|
||||
<div class="space-asteroid"><img src="/assets/icons/pack3-asteroids/asteroid11.png" alt=""><span class="num">6</span></div>
|
||||
<div class="cargo-ship"><img src="/assets/icons/pack4-cargobay/cargo-bay2.png" class="ship-img" alt=""><div class="badge-10"><span>10</span></div><div class="inner-ast"><img src="/assets/items/asteroid-shapes/asteroid11.png" alt=""><span class="num">7</span></div></div>
|
||||
<svg class="arrows-svg" viewBox="0 0 100 55"><path d="M7,30 Q30,45 52,25" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/><path d="M7,30 Q24,57 61,47" fill="none" stroke="#6366f1" stroke-width="0.5" marker-end="url(#ah)"/></svg>
|
||||
<div class="arrow-input-box"><span> </span></div><div class="remnant-shape"><div class="shape-container"><img src="/assets/items/asteroid-shapes/asteroid11.png" alt=""><div class="shape-blank"><span> </span></div></div><span class="shape-question">?</span></div>
|
||||
</div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>4</span><span>+</span><span>8</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>4</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
<div class="card-formula"><div class="formula-label">запиши формулу для пилота</div><div class="formula-row"><span>7</span><span>+</span><span>6</span><span>=</span><div class="brace-group"><span class="brace-content"><span>(</span><span>7</span><span>+</span><span class="blank"> </span><span>)</span></span><svg class="brace-svg" viewBox="0 0 100 14" preserveAspectRatio="none"><path d="M2,1 Q2,6 22,6 Q44,6 50,13 Q56,6 78,6 Q98,6 98,1" fill="none" stroke="#6366f1" stroke-width="2"/></svg><span class="brace-val">10</span></div><span>+</span><span class="blank"> </span><span>=</span><span class="blank"> </span></div></div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -374,6 +374,14 @@
|
|||
setInnerAstValues(card, iv);
|
||||
}
|
||||
|
||||
if (cd.badge && card.badge) {
|
||||
var bv = {
|
||||
left: cd.badge.left != null ? cd.badge.left : DEFAULTS.badge.left,
|
||||
top: cd.badge.top != null ? cd.badge.top : DEFAULTS.badge.top
|
||||
};
|
||||
setBadgeValues(card, bv);
|
||||
}
|
||||
|
||||
// Update originals to saved state
|
||||
originals.set(cardKey(card), getCardState(card));
|
||||
card.el.classList.remove('editor-changed');
|
||||
|
|
@ -432,6 +440,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Badge
|
||||
if (card.badge) {
|
||||
var badgeChanged = false;
|
||||
var badgeData = {};
|
||||
if (Math.abs(cur.badge.left - DEFAULTS.badge.left) > 0.01) { badgeData.left = +cur.badge.left.toFixed(1); badgeChanged = true; }
|
||||
if (Math.abs(cur.badge.top - DEFAULTS.badge.top) > 0.01) { badgeData.top = +cur.badge.top.toFixed(1); badgeChanged = true; }
|
||||
if (badgeChanged) {
|
||||
if (!changesOnly || Math.abs(cur.badge.left - orig.badge.left) > 0.01 || Math.abs(cur.badge.top - orig.badge.top) > 0.01) {
|
||||
cardData.badge = badgeData;
|
||||
hasChange = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (changesOnly && !hasChange) return;
|
||||
if (!changesOnly && !hasChange) return;
|
||||
|
||||
|
|
@ -450,6 +472,7 @@
|
|||
setAsteroidScale(card, orig.asteroidScale);
|
||||
setShipValues(card, orig.ship);
|
||||
if (card.innerAst) setInnerAstValues(card, orig.innerAst);
|
||||
if (card.badge) setBadgeValues(card, orig.badge);
|
||||
card.el.classList.remove('editor-changed');
|
||||
});
|
||||
if (selected && selected.card.pageNum === pageNum) updateInfo();
|
||||
|
|
@ -526,15 +549,34 @@
|
|||
setInnerAstValues(card, iv); markChanged(card); updateInfo(); e.preventDefault(); break;
|
||||
case '0':
|
||||
setInnerAstValues(card, Object.assign({}, DEFAULTS.innerAst));
|
||||
// Also reset transform to just translate (remove scale if any)
|
||||
card.innerAst.style.transform = 'translate(-50%, -50%)';
|
||||
markChanged(card); updateInfo(); e.preventDefault(); break;
|
||||
}
|
||||
} else if (mode === MODE_BADGE) {
|
||||
var bv = getBadgeValues(card);
|
||||
var bStep = e.shiftKey ? 0.5 : 1;
|
||||
switch (e.key) {
|
||||
case 'ArrowLeft':
|
||||
bv.left = +(bv.left - bStep).toFixed(1);
|
||||
setBadgeValues(card, bv); markChanged(card); updateInfo(); e.preventDefault(); break;
|
||||
case 'ArrowRight':
|
||||
bv.left = +(bv.left + bStep).toFixed(1);
|
||||
setBadgeValues(card, bv); markChanged(card); updateInfo(); e.preventDefault(); break;
|
||||
case 'ArrowUp':
|
||||
bv.top = +(bv.top - bStep).toFixed(1);
|
||||
setBadgeValues(card, bv); markChanged(card); updateInfo(); e.preventDefault(); break;
|
||||
case 'ArrowDown':
|
||||
bv.top = +(bv.top + bStep).toFixed(1);
|
||||
setBadgeValues(card, bv); markChanged(card); updateInfo(); e.preventDefault(); break;
|
||||
case '0':
|
||||
setBadgeValues(card, Object.assign({}, DEFAULTS.badge));
|
||||
markChanged(card); updateInfo(); e.preventDefault(); break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
if (selected && !e.target.closest('.space-asteroid') && !e.target.closest('.cargo-ship') && !e.target.closest('.inner-ast')) {
|
||||
if (selected && !e.target.closest('.space-asteroid') && !e.target.closest('.cargo-ship') && !e.target.closest('.inner-ast') && !e.target.closest('.badge-10')) {
|
||||
deselectAll();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -123,6 +123,7 @@ function applyCards(pageHtml, cards) {
|
|||
const scale = cardData.asteroidScale;
|
||||
const ship = cardData.ship;
|
||||
const innerAst = cardData.innerAst;
|
||||
const badge = cardData.badge;
|
||||
|
||||
// Apply asteroidScale to .space-asteroid img
|
||||
if (scale != null && scale !== 1) {
|
||||
|
|
@ -161,6 +162,19 @@ function applyCards(pageHtml, cards) {
|
|||
);
|
||||
}
|
||||
|
||||
// Apply badge position
|
||||
if (badge) {
|
||||
const badgeLeft = badge.left != null ? badge.left : 40;
|
||||
const badgeTop = badge.top != null ? badge.top : 39;
|
||||
const badgeStyle = 'left: ' + badgeLeft + '%; top: ' + badgeTop + '%';
|
||||
cardHtml = cardHtml.replace(
|
||||
/(<div class="badge-10")([\s>])/,
|
||||
function(full, tag, after) {
|
||||
return tag + ' style="' + badgeStyle + '"' + after;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Apply innerAst position (and compose with asteroidScale if present)
|
||||
if (innerAst || (scale != null && scale !== 1)) {
|
||||
const innerLeft = innerAst && innerAst.left != null ? innerAst.left : 58;
|
||||
|
|
|
|||
Loading…
Reference in New Issue