183 lines
8.3 KiB
HTML
183 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Fill the Cargo Bay — Space Math Adventures</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-start: #eef0ff; --bg-mid: #fef3e2; --bg-end: #e8faf3;
|
|
--text-deep: #2d1b69; --text-body: #3d2d6b;
|
|
--accent-violet: #7c3aed; --accent-orange: #f97316; --accent-teal: #0d9488; --accent-pink: #ec4899;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Nunito', sans-serif;
|
|
background: linear-gradient(170deg, var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);
|
|
color: var(--text-body); min-height: 100vh; overflow-x: hidden;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.page-content { flex: 1; }
|
|
.container { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 0 24px; }
|
|
.back-link {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
color: var(--accent-violet); text-decoration: none; font-size: 0.9rem; font-weight: 700;
|
|
padding-top: 40px; transition: color 0.15s;
|
|
}
|
|
.back-link:hover { color: var(--accent-pink); }
|
|
.page-header { display: flex; align-items: center; gap: 24px; padding: 20px 0 12px; }
|
|
.page-header img {
|
|
width: 110px; filter: drop-shadow(0 4px 12px rgba(124,58,237,0.2));
|
|
animation: headerBob 3s ease-in-out infinite;
|
|
}
|
|
@keyframes headerBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
|
|
.page-header h1 {
|
|
font-family: 'Fredoka', sans-serif; font-size: 2rem; font-weight: 700;
|
|
background: linear-gradient(135deg, var(--accent-violet), var(--accent-teal));
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
|
}
|
|
.header-desc {
|
|
color: var(--text-body); font-size: 0.95rem; line-height: 1.6; font-weight: 600;
|
|
padding-bottom: 28px; border-bottom: 2px solid rgba(124,58,237,0.12); margin-bottom: 28px;
|
|
}
|
|
.docs { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; }
|
|
|
|
.doc-card {
|
|
display: flex;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,248,240,0.8));
|
|
border: 2px solid transparent; border-radius: 20px;
|
|
overflow: hidden; position: relative;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.doc-card::before {
|
|
content: ''; position: absolute; inset: -2px; border-radius: 22px;
|
|
background: linear-gradient(135deg, var(--accent-violet), var(--accent-teal));
|
|
z-index: -1; opacity: 0.25; transition: opacity 0.2s;
|
|
}
|
|
.doc-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(124,58,237,0.14); }
|
|
.doc-card:hover::before { opacity: 0.5; }
|
|
|
|
.doc-preview {
|
|
width: 170px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center;
|
|
padding: 12px; background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(13,148,136,0.04));
|
|
}
|
|
.doc-preview img { width: 100%; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
|
|
.doc-info { padding: 20px 24px; flex: 1; }
|
|
.doc-info h3 {
|
|
font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 600;
|
|
color: var(--text-deep); margin-bottom: 6px;
|
|
}
|
|
.doc-details { font-size: 0.83rem; color: var(--text-body); line-height: 1.6; margin-bottom: 14px; }
|
|
.tag {
|
|
display: inline-block; padding: 2px 10px; border-radius: 12px;
|
|
font-size: 0.75rem; font-weight: 700; margin-right: 4px; margin-bottom: 4px;
|
|
}
|
|
.tag-pages { background: rgba(124,58,237,0.1); color: var(--accent-violet); border: 1px solid rgba(124,58,237,0.2); }
|
|
.tag-diff { background: rgba(13,148,136,0.1); color: var(--accent-teal); border: 1px solid rgba(13,148,136,0.2); }
|
|
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|
.doc-actions a {
|
|
font-size: 0.72rem; font-weight: 700; text-decoration: none;
|
|
padding: 4px 12px; border-radius: 8px; transition: all 0.15s;
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
}
|
|
.btn-preview {
|
|
color: var(--accent-violet); border: 2px solid rgba(124,58,237,0.25);
|
|
background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(124,58,237,0.02));
|
|
}
|
|
.btn-preview:hover { background: rgba(124,58,237,0.12); border-color: var(--accent-violet); }
|
|
.btn-pdf {
|
|
color: var(--accent-teal); border: 1.5px solid rgba(13,148,136,0.3);
|
|
background: linear-gradient(135deg, rgba(13,148,136,0.06), rgba(13,148,136,0.02));
|
|
}
|
|
.btn-pdf:hover { background: rgba(13,148,136,0.15); border-color: var(--accent-teal); }
|
|
.btn-pdf svg { width: 12px; height: 12px; }
|
|
.btn-edit {
|
|
color: var(--accent-orange); border: 1.5px solid rgba(249,115,22,0.3);
|
|
background: linear-gradient(135deg, rgba(249,115,22,0.06), rgba(249,115,22,0.02));
|
|
display: none;
|
|
}
|
|
.btn-edit:hover { background: rgba(249,115,22,0.15); border-color: var(--accent-orange); }
|
|
body.editor-mode .btn-edit { display: inline-flex; }
|
|
|
|
/* Footer */
|
|
.site-footer { position: relative; }
|
|
.planet-footer { height: 140px; overflow: hidden; }
|
|
.planet-footer img {
|
|
width: 100%; height: 100%; object-fit: cover;
|
|
mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
|
|
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
|
|
}
|
|
.footer-bar {
|
|
position: absolute; bottom: 8px; left: 0; right: 0;
|
|
text-align: center; z-index: 2;
|
|
}
|
|
.editor-toggle {
|
|
cursor: pointer; user-select: none;
|
|
color: rgba(255,255,255,0.4); font-size: 0.72rem; font-weight: 600;
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
transition: color 0.2s;
|
|
}
|
|
.editor-toggle:hover { color: rgba(255,255,255,0.7); }
|
|
.editor-toggle input { accent-color: var(--accent-violet); }
|
|
|
|
@media (max-width: 640px) {
|
|
.doc-card { flex-direction: column; }
|
|
.doc-preview { width: 100%; max-height: 160px; }
|
|
.page-header img { width: 70px; }
|
|
.page-header h1 { font-size: 1.5rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page-content">
|
|
<div class="container">
|
|
<a class="back-link" href="/tasks/index.html">← All Categories</a>
|
|
|
|
<div class="page-header">
|
|
<img src="/assets/icons/pack4-cargobay/cargo-bay1.png" alt="">
|
|
<h1>Fill the Cargo Bay</h1>
|
|
</div>
|
|
<p class="header-desc">Split an asteroid to fill the remaining space in a cargo bay! Each card shows a ship with cargo already inside, and an asteroid that's too big to fit whole. The child splits the asteroid so one piece fills the bay to exactly 10. Practices addition crossing the tens boundary.</p>
|
|
|
|
<div class="docs">
|
|
|
|
<div class="doc-card">
|
|
<div class="doc-preview"><img src="/tasks/cargo-filling/temp/cargo-filling-1-page-1.png" alt="Preview"></div>
|
|
<div class="doc-info">
|
|
<h3>Cargo Filling 1</h3>
|
|
<div class="doc-details">
|
|
<span class="tag tag-pages">3 pages</span>
|
|
<span class="tag tag-diff">Easy → Hard</span><br>
|
|
6 cards per page • Split asteroid to fill cargo bay to 10 • Addition through 10
|
|
</div>
|
|
<div class="doc-actions">
|
|
<a class="btn-preview" href="/tasks/cargo-filling/docs/cargo-filling-1.output.html">Preview</a>
|
|
<a class="btn-pdf" href="/output/pdf/cargo-filling-1.pdf" download><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>PDF</a>
|
|
<a class="btn-edit" href="/tasks/cargo-filling/editor.html?file=cargo-filling-1">Editor</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="site-footer">
|
|
<div class="planet-footer">
|
|
<img src="/assets/footers/planet3.jpeg" alt="">
|
|
</div>
|
|
<div class="footer-bar">
|
|
<label class="editor-toggle">
|
|
<input type="checkbox" onchange="document.body.classList.toggle('editor-mode', this.checked)">
|
|
Unlock editor (local dev only)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|