usulpro/math-tasks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

coloring

Browse Source
This commit is contained in:
usulpro
2026-05-30 22:14:21 +07:00
parent 96f1e89327
commit 58a4b638ee
10 changed files with 411 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tasks/space-coloring/docs/space-coloring-1.md
+32
View File
@@ -0,0 +1,32 @@
# Space Coloring 1
**Theme:** nms
**Type:** space-coloring
**Pages:** 3
## Concept
Full-page line-art coloring worksheets. Each page is one A4 portrait scene from the No Man's Sky universe: a spaceship surrounded by asteroids, planets, and floating space artifacts. Minimal header (title) and minimal footer (planet strip + scene legend).
## Pages
### Page 1 — Last Stand at Veridian Belt
**Image:** `assets/themes/nms/coloring-pages/coloring1.png`
**Legend:** "Last Stand at Veridian Belt — a heavy gunship fires its twin cannons at incoming asteroids before they smash into the planet below."
**Footer asset:** `assets/themes/nms/footers/planet3.jpeg`
### Page 2 — Ore Hunter's Catch
**Image:** `assets/themes/nms/coloring-pages/coloring2.png`
**Legend:** "Ore Hunter's Catch — a rugged mining dropship reaches out with its grappling claw to crack open a giant asteroid rich with crystal ore."
**Footer asset:** `assets/themes/nms/footers/planet6.jpeg`
### Page 3 — The Whispering Cluster
**Image:** `assets/themes/nms/coloring-pages/coloring3.png`
**Legend:** "The Whispering Cluster — a sleek explorer sweeps its scanner across a spire-shaped asteroid field hiding the ruins of an ancient alien satellite."
**Footer asset:** `assets/themes/nms/footers/planet8.jpeg`
## Notes
- All images are 864x1184 (ratio ~0.73), fit A4 portrait cleanly inside a 190mm × ~260mm area.
- No `data.json` layer — the template is the final output.
- Header uses Fredoka font for a friendly title.
tasks/space-coloring/docs/space-coloring-1.template.html
+96
View File
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<title>Space Coloring &mdash; Adventures of the Asteroid Belt</title>
<script>
tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito','sans-serif'], fredoka: ['Fredoka','sans-serif'] } } } }
</script>
<style>
@page { size: A4; margin: 0; }
.footer-mask {
mask-image: linear-gradient(to bottom, transparent 0%, black 70%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 70%);
}
.legend-pill {
background: rgba(255,255,255,0.92);
backdrop-filter: blur(2px);
box-shadow: 0 2px 8px rgba(49,46,129,0.18);
border-radius: 9999px;
padding: 2mm 6mm;
}
.title-stroke { letter-spacing: -0.5px; }
</style>
</head>
<body class="bg-gray-200 font-nunito">
<!-- PAGE 1 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white flex flex-col" style="break-after: page;">
<header class="h-[16mm] flex items-center justify-between px-[10mm] shrink-0 border-b border-indigo-100">
<span class="text-[0.7rem] font-bold text-indigo-300 tracking-[0.25em] uppercase">No Man's Coloring</span>
<h1 class="font-fredoka font-semibold text-[1.35rem] text-indigo-950 title-stroke">Space Coloring &mdash; Asteroid Belt Adventures</h1>
<span class="text-[0.75rem] font-bold text-indigo-400">01 / 03</span>
</header>
<main class="flex-1 min-h-0 flex items-center justify-center px-[8mm] py-[3mm]">
<img src="/assets/themes/nms/coloring-pages/coloring1.png" alt="Last Stand at Veridian Belt" class="max-w-full max-h-full object-contain">
</main>
<footer class="h-[32mm] relative shrink-0">
<img src="/assets/themes/nms/footers/planet3.jpeg" class="absolute inset-0 w-full h-full object-cover object-center footer-mask" alt="">
<div class="relative z-10 h-full flex items-end justify-center pb-[5mm] px-[12mm]">
<p class="legend-pill text-center text-[0.82rem] italic font-semibold text-indigo-950 max-w-[175mm] leading-snug">
<span class="font-fredoka not-italic font-semibold text-indigo-700">Last Stand at Veridian Belt &mdash;</span>
a heavy gunship fires its twin cannons at incoming asteroids before they smash into the planet below.
</p>
</div>
</footer>
</div>
<!-- PAGE 2 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white flex flex-col" style="break-after: page;">
<header class="h-[16mm] flex items-center justify-between px-[10mm] shrink-0 border-b border-indigo-100">
<span class="text-[0.7rem] font-bold text-indigo-300 tracking-[0.25em] uppercase">No Man's Coloring</span>
<h1 class="font-fredoka font-semibold text-[1.35rem] text-indigo-950 title-stroke">Space Coloring &mdash; Asteroid Belt Adventures</h1>
<span class="text-[0.75rem] font-bold text-indigo-400">02 / 03</span>
</header>
<main class="flex-1 min-h-0 flex items-center justify-center px-[8mm] py-[3mm]">
<img src="/assets/themes/nms/coloring-pages/coloring2.png" alt="Ore Hunter's Catch" class="max-w-full max-h-full object-contain">
</main>
<footer class="h-[32mm] relative shrink-0">
<img src="/assets/themes/nms/footers/planet6.jpeg" class="absolute inset-0 w-full h-full object-cover object-center footer-mask" alt="">
<div class="relative z-10 h-full flex items-end justify-center pb-[5mm] px-[12mm]">
<p class="legend-pill text-center text-[0.82rem] italic font-semibold text-indigo-950 max-w-[175mm] leading-snug">
<span class="font-fredoka not-italic font-semibold text-indigo-700">Ore Hunter's Catch &mdash;</span>
a rugged mining dropship reaches out with its grappling claw to crack open a giant asteroid rich with crystal ore.
</p>
</div>
</footer>
</div>
<!-- PAGE 3 -->
<div class="w-[210mm] h-[297mm] relative overflow-hidden mx-auto bg-white flex flex-col">
<header class="h-[16mm] flex items-center justify-between px-[10mm] shrink-0 border-b border-indigo-100">
<span class="text-[0.7rem] font-bold text-indigo-300 tracking-[0.25em] uppercase">No Man's Coloring</span>
<h1 class="font-fredoka font-semibold text-[1.35rem] text-indigo-950 title-stroke">Space Coloring &mdash; Asteroid Belt Adventures</h1>
<span class="text-[0.75rem] font-bold text-indigo-400">03 / 03</span>
</header>
<main class="flex-1 min-h-0 flex items-center justify-center px-[8mm] py-[3mm]">
<img src="/assets/themes/nms/coloring-pages/coloring3.png" alt="The Whispering Cluster" class="max-w-full max-h-full object-contain">
</main>
<footer class="h-[32mm] relative shrink-0">
<img src="/assets/themes/nms/footers/planet8.jpeg" class="absolute inset-0 w-full h-full object-cover object-center footer-mask" alt="">
<div class="relative z-10 h-full flex items-end justify-center pb-[5mm] px-[12mm]">
<p class="legend-pill text-center text-[0.82rem] italic font-semibold text-indigo-950 max-w-[175mm] leading-snug">
<span class="font-fredoka not-italic font-semibold text-indigo-700">The Whispering Cluster &mdash;</span>
a sleek explorer sweeps its scanner across a spire-shaped asteroid field hiding the ruins of an ancient alien satellite.
</p>
</div>
</footer>
</div>
</body>
</html>