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