180 lines
8.3 KiB
HTML
180 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>Crystal Battery — 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; }
|
|
|
|
.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/themes/sonic/heroes/sonic-shadow-push/sonic-push-01.png" alt="">
|
|
<h1>Crystal Battery</h1>
|
|
</div>
|
|
<p class="header-desc">Sonic and Shadow take turns charging a crystal battery! Each row shows one hero filling cells with crystals. The child figures out how many crystals the other hero needs to complete all 10 cells. Practices making 10 (complements of 10).</p>
|
|
|
|
<div class="docs">
|
|
|
|
<div class="doc-card">
|
|
<div class="doc-preview"><img src="/tasks/crystal-battery/temp/crystal-battery-1-page-1.png" alt="Preview"></div>
|
|
<div class="doc-info">
|
|
<h3>Crystal Battery 1</h3>
|
|
<div class="doc-details">
|
|
<span class="tag tag-pages">3 pages</span>
|
|
<span class="tag tag-diff">Easy → Hard</span><br>
|
|
7 sections per page • Complements of 10 • Sonic & Shadow theme
|
|
</div>
|
|
<div class="doc-actions">
|
|
<a class="btn-preview" href="/tasks/crystal-battery/docs/crystal-battery-1.output.html">Preview</a>
|
|
<a class="btn-pdf" href="/output/pdf/crystal-battery-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/crystal-battery/editor.html?file=crystal-battery-1">Editor</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="site-footer">
|
|
<div class="planet-footer">
|
|
<img src="/assets/themes/nms/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>
|