🌐 Open KidHub · 🎨 Open the studio directly
A colorful browser activity hub with an expanded Art Studio for drawing, storytelling, and creative exploration. Open one HTML file, choose Art Studio, and start making something imaginative. The application is self-contained HTML, CSS, and JavaScript; there is no build step or application server.
On this page: 🚀 Quick start · 🆕 Latest release · ♿ Comfort settings · 🎨 Library design tokens · 💾 Privacy & storage · Build and verification · 🤝 Contributing & support · 🗓️ Changelog
Every core activity now has an Adventure trail with three tailored missions, Explore/Stretch/Invent guidance, a coach tip, saved checkmarks, a discovery journal, and a text download. Checkmarks are self-reported and do not alter game scores.
| Area | New content and controls |
|---|---|
| 🎨 Art Studio | Imagination mixer combining six characters, six places, and six problems; save an idea to your journal. |
| ⭐ Catch the Stars | Party, Ocean, and Garden targets; 15/90-second rounds; relaxed mode with no heart loss from missed targets. |
| 📚 Story Garden | Three original four-page books with comprehension questions: The Listening Bridge, The Patient Seed, and The Missing Beat. |
| 🎹 Music Lab | Eight-beat rhythm builder, rests, 60–160 BPM control, one-shot playback, and stop. |
| 🚀 Math Mission | Whole-number division, division hints, mixed-operation inclusion, and adjustable word-problem practice. |
| 🧠 Memory Match | Four card collections, 10/12-pair boards, background timer suspension, and restart-safe flip/peek timers. |
| 🤖 Code Logic | Ten routes, level selection, safe controls during playback, and coordinate practice. Existing five-level badge progress is preserved. |
| 🪐 Space Explorer | Planet-order practice questions with immediate explanations and comparison missions. |
| 🦴 Dino Dig | Observation, careful excavation, and museum-label practice with a field journal. |
| 🧩 Shapes Puzzle | Strategy questions, planning tips, and replay-comparison missions. |
| 🐮 Farm Friends | Extra animal-call practice and farm-story challenges. |
| 🖍️ Coloring Book | A 16-square pattern quilt with custom colors and SVG export. |
| 🔤 Word Spelling | 50 illustrated words, short/long filters, and missing-letter practice. |
| 🕒 Telling Time | Adjustable elapsed-time practice and daily-routine missions. |
| 🎵 Music Maker | 16 steps across five rows; existing eight-step songs migrate without losing notes. |
| 📖 Storybook Creator | Up to 24 pages, 800 characters per page, and an imagination mixer. |
| 🧰 80 toolbox tools | Separate journals and category-specific experiments for math, words, science, time/money, arts, games, wellbeing, and helpers. |
| 🕹️ 13 current arcade games | Tailored practice goals, strategy notes, a session timer, last-20-session history, and JSON export. |
| 🎛️ Three companion apps | The same practice companion, with goals suited to KidsBeat, Qamo Mathcore, and Stix Stax Stonz. |
Open an activity and expand Adventure trail. In an arcade game or companion app, use 🧭 Practice. The practice panel does not pause gameplay; use the game's own pause control first. Session times measure elapsed wall-clock time between Start and Finish.
Progress is browser-local: kidHubAdventuresV1 for trails and kidHubPractice:<activity> for game/companion practice. Export journals before clearing site data. These records are separate from the existing Toolbox backup export.
Sources: src/zzz-adventures.html adds the guided activities; activity-kit.js powers the shared game companion; tools/practice_kits.py attaches it idempotently during python build.py. Core activity banks remain in studio.html. node test-adventures.cjs verifies the new coverage against a local server on port 8765; set BASE_URL for another origin.
Open 🧰 Toolbox from the hub (or press T, or link straight to a tool with #tool=<id>, e.g. studio.html#tool=piano).
| Category | Tools |
|---|---|
| ➗ Math | Addition, Subtraction, Multiplication and Division quizzes, Times Table Viewer, Number Line Jumper, Even or Odd, Skip Counter, Fraction Pizza, Place Value |
| 🔤 Words | Rhyme Finder, Syllable Clapper, Word Scramble, Alphabet Explorer, Sight Word Cards, Word Mirror, Story Starter, Compound Builder, Opposites Quiz, Vowel Counter |
| 🔬 Science | Planet Facts, Animal Habitats, Solid/Liquid/Gas, My Body, Plant Grower, Weather Wardrobe, Magnet Sorter, Moon Phases, Sink or Float, Five Senses |
| ⏰ Time & Money | Clock Reader, Stopwatch, Countdown, What Day Was It, Coin Counter, Change Maker, Age Calculator, Days Until, Seasons, Piggy Bank Goal |
| 🎨 Art & Music | Color Mixer, Palette Generator, Pattern Maker, Metronome, Mini Piano, Drum Pads, Emoji Mosaic, Spiral Art, Shape Namer, Rhythm Echo |
| 🎲 Games | Dice, Coin Flip, Choice Spinner, Rock Paper Scissors, Number Guess, Color Echo, Tic-Tac-Toe, Whack-a-Mole, Reaction Timer, Guess the Word |
| 💚 Feel Good | Breathing Bubble, Feelings Check-in, Gratitude Jar, Kindness Ideas, Stretch Break, Water Tracker, Bedtime Routine, Calm Sounds, Brave Words, Chore Chart |
| 🧭 Helpers | Length, Temperature and Weight converters, Team Picker, Name Picker, Tally Counter, To-Do List, Secret Code, Morse Code, Binary Numbers |
10 activities are now fully playable. They used to show "Loading activity…": Code Logic (robot programming, 5 levels), Space Explorer, Dino Dig, Shapes Puzzle (sliding 8-puzzle), Farm Friends, Coloring Book, Word Spelling, Telling Time, Music Maker (8-step sequencer) and Storybook Creator.
10 new badges: 🧰 Tool Tinkerer · 🧭 Tool Explorer · 🛠️ Master Maker · 👑 Toolbox Legend · 🔥 Brain Blaze · 🤖 Robot Coder · 🧩 Puzzle Pro · 🦴 Fossil Finder · ✍️ Storybook Author · 🧘 Calm Champion.
The full lists of the 80 features and 80 improvements are in the app under Toolbox → ✨ What's new. Toolbox progress is stored locally under kidHubPlus. You can export and import it from Toolbox settings.
Tests: node test.cjs (Art Studio) and node test-plus.cjs (all 80 tools, 10 activities, badges, mobile overflow). Both need Playwright with Microsoft Edge.
- 🌟 NEW game: PopStorm: Glow Guardians (
games/popstorm.html, first in the Arcade). It's an original arcade roguelite for ages 8+: pop grumpy Gloomies, collect gems, and draft power-ups.- Content: 8 heroes, 8 powers with 8 evolutions, 10 buddy items, 13 Gloomie types, and 3 bosses across 4 worlds.
- Keep-playing hooks: 5 pets, gift boxes, 5 random events, 31 trophies, daily quests, a daily challenge, Boss Rush, endless mode, a coin shop, Glow Rank, and streaks.
- Built as one 3,000+ line HTML file with synthesized audio, keyboard, touch, and gamepad support, and an automated full playtest (
node test-popstorm.cjs).
- 🕹️ Arcade: 13 full-screen games in
games/. Each game keeps only the game, plus one ⬅️ KidHub link and a ⛶ Fullscreen button (python tools/import_games.pyregenerates them). - 🎹 KidsBeat instruments: 24 mastered instruments (drums, world percussion, piano, guitar, brass, flute, synths, fun sounds) power the whole Music Lab.
- 🧑🏫 Beat Coach: auto-fix groove, 7 smart genre grooves, fills, remix, undo, live drum recording (keys 1–6), accents, humanize, auto-bass, kit and mix, a 16-step melody lane that stays in key, "Make it cohesive" melody tuning, auto-tune, a 2–4 octave keyboard (octaves 0–7), and a star rating with tips.
- 🖌️ Paint Pro: 48 Paint-style tools and a full color editor. 🧰 Toolbox: 80 tools. 🌄 Parallax worlds on the hub.
- ☁️ Cloud widget (bottom-left): parent-configured webhook messages (Discord, Slack, ntfy or generic JSON over https), reminders, voice typing, SOS, offline outbox, quiet hours and a PIN lock. Nothing is sent until a grown-up adds a webhook.
- 🎨 8 themes (Sunny, Space, Ocean, Candy, Forest, Sunset, Midnight, Arctic). Dark themes gently dim the page.
- 🗣️ Friendly voice: natural female or cartoon-style read-aloud with a picker in Settings.
- ✨ 40 improvements: deep links and Back button, offline service worker with an update prompt, installable app, accessibility and performance polish (full list in Settings → What's new).
Develop: npm install, npm run build, then npm test (12 Playwright suites, Edge). Edit src/*.html modules; build.py injects them into studio.html and the dashboard.
| # | Feature | What you can do |
|---|---|---|
| 1 | 🎨 Custom color | Choose any RGB color with the native color picker. |
| 2 | 🌈 Curated palettes | Switch between Bright, Pastel, Earth, and Ocean collections. |
| 3 | 🫧 Opacity | Adjust drawing opacity from 10% to 100%, with a live readout. |
| 4 | 🖌️ Brush tips | Choose round or square stroke caps. |
| 5 | ➖ Stroke patterns | Draw solid, dashed, or dotted strokes. |
| 6 | 🌈 Rainbow ink | Cycle through hues as you move the brush. |
| 7 | 🟪 Filled shapes | Fill boxes, ellipses, and triangles with the current ink. |
| 8 | 🔺 Triangle tool | Drag to create triangles, including mirrored triangles. |
| 9 | 🔤 Text placement | Enter up to 100 characters, then click the canvas to place them. |
| 10 | 📚 Letter styles | Choose friendly sans, storybook serif, or robot monospace. |
| 11 | 🔎 Eyedropper | Sample a canvas pixel to set your drawing color. |
| 12 | 🐬 Sticker library | Explore 32 stickers across Space, Nature, Animals, and Food. |
| 13 | 📄 Custom paper | Replace the canvas with any chosen paper color. Undo is available. |
| 14 | 🏞️ Scene starters | Start with rolling hills, an underwater scene, or three comic panels. |
| 15 | 🖼️ Image import | Fit a local PNG, JPEG, or WebP onto the canvas; files are limited to 10 MB. |
| 16 | 🔄 Canvas transforms | Flip the entire artwork horizontally or rotate it 180°. |
Brush, eraser, stamps, lines, rectangles, ellipses, mirror drawing, brush sizes, background presets, creative prompts, undo/redo, a small local gallery, and full-size PNG download remain available. The canvas is 900 × 560 pixels. Undo retains up to 16 snapshots. Paper and scene starters replace the current picture; imports overlay a fitted image. Export important work before closing the page.
- Download or clone this repository.
- Open
index.htmlfor the full dashboard, orstudio.htmlfor the direct KidHub activity hub. - Choose 🎨 Art Studio from the activity hub.
- Pick a tool and drag on the canvas. Text and stickers are placed with a click.
- Use ↓ PNG to save your full-resolution artwork.
For a stable browser storage origin, serve the directory locally:
python -m http.server 8000Then visit http://localhost:8000. No package installation is required to use the app. Google Fonts are requested when online; system fonts are available as fallbacks.
- 🌊 Ocean postcard: choose the underwater starter, Ocean palette, animal stickers, and a text greeting.
- 🌻 Garden explorer: choose rolling hills, Nature stickers, pastel colors, and dotted paths.
- 📖 Three-panel story: choose comic panels; draw a beginning, middle, and ending; add serif captions.
- 🤖 Robot blueprint: use square tips, dashed lines, triangles, and monospace labels.
- 🪞 Symmetry challenge: turn on the existing mirror switch and build a butterfly with filled shapes.
- 🖼️ Picture remix: import a local image, add stickers and a caption, then download the result.
The inherited hub includes entry points for Catch the Stars, Story Garden, Music Lab, Math Mission, Memory Match, Code Logic, Space Explorer, Dino Dig, Shapes Puzzle, Farm Friends, Coloring Book, Word Spelling, Telling Time, Music Maker, and Storybook Creator. The automated suites cover core activity flows, journals, migrations, and the current game manifest; coverage is described below.
KidHub follows the device's own accessibility settings, no setup needed:
- 🐢 Reduce motion (OS setting or ⚙️ switch): animations and transitions stop, and smooth scrolling turns off.
- 🔲 Increase contrast (OS setting or ⚙️ High contrast): thicker, darker card borders.
- 🖥️ Windows High Contrast / forced colors: cards, pills and buttons keep visible outlines, keyboard focus uses the system highlight color, and decorative seasonal effects step aside.
- 🖨️ Printing: printed pages leave out the floating cloud and back-to-top buttons, toasts and sky effects, use a plain white background, and keep each card on one page.
- 🌙 Dark mode (OS setting): the standalone Library (
resources.html) turns dark when no theme is picked; the dashboard's Dark, Cyberpunk and Emerald themes recolor the Library panel too.
The Library (resources.html and the dashboard's Applications panel) is styled by portal.css, and every color, size and timing comes from a --p-* custom property. Themes only swap tokens, so new rules should use them instead of literal values.
| Group | Tokens | Used for |
|---|---|---|
| Color | --p-ink --p-bg --p-soft --p-accent --p-link --p-line --p-field --p-muted --p-focus --p-warn |
Text, surfaces, buttons, borders, focus ring, invalid fields |
| Page chrome | --p-page --p-head-bg --p-head-line --p-head-link |
Standalone page background and the sticky header (set on body.portal-page) |
| Shape | --p-r --p-r-lg --p-shadow --p-shadow-lg |
Corner radii; resting and lifted shadows |
| Spacing & type | --p-gap --p-gap-lg --p-fs-h1 --p-fs-h2 --p-fs-icon |
Gaps, heading and card-icon sizes |
| Motion | --p-dur --p-ease |
Card lifts, jump glow, sections opening |
Theme overrides live at the bottom of portal.css: seasonal (halloween, thanksgiving, christmas), dashboard (dark, cyberpunk, emerald) and OS dark mode (prefers-color-scheme: dark when no data-theme is set). Keep white button text at WCAG AA contrast on any new --p-accent.
Comfort settings live in portal.css too: form controls and the text caret follow --p-accent; counts, totals and table cells use tabular digits; prefers-contrast: more thickens borders and darkens --p-line/--p-field/--p-muted; and forced-colors: active (Windows High Contrast) keeps cards, tabs and buttons outlined, with the current tab and focus ring in the system Highlight color.
- 🏠 Profile, progress, and gallery state use browser local storage under
kidHubV3. - 🖼️ Imported images are decoded in the browser; the new import feature does not upload them.
- 📦 The existing gallery keeps three reduced-size JPEG previews, not editable full-resolution projects.
- 🧹 Clearing browser data can remove saved progress. Different browser profiles and origins have separate storage.
- 🌐 Google Fonts requests contact an external service. This is not a completely network-free page.
- 💬 Cloud messaging asks for the email address to send to and remembers it on that device (FormSubmit; the first message to a new address needs a one-time Activate click in that inbox). Grown-ups can also set per-contact emails or an HTTPS webhook in ⚙️. Sends leave the device; delivery is not guaranteed.
- 👪 Existing parent controls are convenience controls, not authenticated access protection.
See PRIVACY.md for details.
| File | Purpose |
|---|---|
index.html |
Multi-app dashboard with the enhanced KidHub app embedded |
studio.html |
Direct standalone KidHub activity hub and Art Studio |
test.cjs |
Playwright regression checks for the expanded Art Studio |
src/*.html |
Studio feature and polish modules, injected into studio.html in alphabetical order by build.py |
build.py |
Build step: syncs standalone/embedded Studio, practice kits, the catalog and the offline version |
resources.html / portal.css |
Applications & Resources library page and its styles (--p-* color, radius and motion tokens) |
games/ |
Shipped arcade games and the games.json registry |
tools/ |
Build helpers and run-tests.cjs, the browser test runner (see tools/README.md) |
test-*.cjs |
Browser test suites run by tools/run-tests.cjs |
studio-desktop.png / studio-mobile.png |
Screenshots captured during browser verification |
CHANGELOG.md |
Release scope and behavior changes |
CONTRIBUTING.md |
Development and validation expectations |
PRIVACY.md |
Storage, external resources, and data handling |
SECURITY.md |
Security reporting and scope |
Open Applications or Resources in the dashboard, or open resources.html directly.
- 114 launchable entries: four applications, 16 core activities, 80 toolbox tools, and 14 current arcade games (including N8 SHIFT and NeuroPulse). Counts follow the shipped manifest.
- Search, categories, favorites, recent launches, and direct activity/tool links.
- A 12-activity session planner with notes, reorder controls, text export, and a separately scoped JSON backup. Imports validate their format and confirm replacement; failed storage is reported.
- Six printable worksheet types, activity guides, troubleshooting, privacy notes, and developer documentation.
- Keyboard focus survives favorite changes and planner reordering/removal. Desktop, 390px, and 768px resource layouts are covered by browser tests.
- Dashboard and resource-page visits now install offline support directly. Cached pages work offline; a page not previously saved shows recovery guidance. Updates ask before refreshing unsaved work.
Run these from the repository root with Python, Node.js, the existing development dependencies, and Microsoft Edge available:
npm run build
npm test
npm run test:resources
npm run test:activities
npm run test:releaseThe test runner starts and closes its own loopback server on a free port. BASE_URL can select an existing preview. Tests use isolated browser contexts; email/webhook cases are intercepted and never send real messages. Screenshots are generated in the repository.
Normal builds use only this checkout. They synchronize standalone/embedded Studio, practice kits, the catalog, and a content-based offline version. Rebuilding unchanged sources produces identical output. npm run import:games is a separate optional operation requiring the original sibling N8DEV/standalone-sites sources; it refreshes shipped games before building.
The 22 browser suites cover art, toolbox, music, games, messaging layout, activity progress/migration, dashboard routing, resources and offline reliability. Core-module accessibility checks exclude contrast; resource-page checks include it. Synthetic delivery tests verify request handling, not actual email receipt. Native touch hardware, assistive-technology behavior and every game strategy remain outside automated coverage.
The regression script uses Node.js, Playwright, and installed Microsoft Edge:
npm install --no-save playwright
node test.cjsIt checks inline JavaScript syntax, drawing, all 16 new feature groups, undo/redo, image import, PNG download, transform reversibility, and layout at 1440px and 390px widths. It fails on page JavaScript errors. Screenshots are written in the project directory. Touch hardware, all browsers, assistive technology, and every inherited activity are outside this test's coverage.
The canvas is a raster image rather than a layered editor. Text and stickers become pixels after placement. Emoji appearance varies by operating system. Opacity is applied per stroke segment and can build up at overlaps. Browser storage may be unavailable or full. Downloading PNG is the recommended durable backup. No software license was added because redistribution rights for the inherited source have not been established.
Read CONTRIBUTING.md. Reports should include browser version, screen size, reproducible steps, and expected versus actual behavior. Avoid including children's personal information or private artwork in public reports.
The public repository publishes from main at / with HTTPS enforced. .nojekyll keeps the site a direct static deployment. The canonical URL, social preview metadata, sitemap, and robots file identify the public entry points. The full dashboard preserves the additional embedded apps from the upstream update; studio.html avoids loading those extra apps when you only need KidHub.
Art Studio history now stores bounded pixel snapshots instead of PNG-encoding the canvas before every stroke. Undo/redo restores synchronously, avoiding asynchronous image-load races. Decorative studio animation pauses in hidden tabs and respects the operating system's reduced-motion preference. Mobile controls stay within the available width; desktop controls scroll beside the canvas.
The Pages deployment and the Art Studio are verified separately. The companion drawing/export, beat controls, practice panels, routing, and mobile frame layout have focused browser coverage; this is not an exhaustive audit of every inherited app.