星火纪元 个人成长追踪 v1.0
- Flask + SQLite 自托管，单用户无 PIN - 仪表盘：学科进度环轮播、健康双线图、任务接龙、书架墙、浮动打卡 - 后台：孩子信息、学科/单元课表、健康历史录入、数据管理(重置/新学期) - 徽章由进度实时派生；主题由后台设置
This commit is contained in:
@@ -0,0 +1,437 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ child.name }} 的成长仪表盘{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
<div class="hero">
|
||||
<div class="hero-left">
|
||||
<h1>👦 {{ child.name }} 的成长仪表盘</h1>
|
||||
<div class="badgebar" id="badgeBar" data-interval="5">
|
||||
{% if got_badges %}
|
||||
{% for b in got_badges %}
|
||||
<div class="badge-slide" style="display:{% if loop.first %}flex{% else %}none{% endif %}" data-key="{{ b.key }}" onclick="openBadge('{{ b.key }}')">
|
||||
<span class="badge-icon">{{ b.icon }}</span>
|
||||
<span class="badge-name">{{ b.name }}</span>
|
||||
<span class="badge-state">已获得</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="badge-slide badge-empty" style="display:flex">
|
||||
<span class="badge-icon">🏅</span>
|
||||
<span class="badge-name">还没有徽章，今天就去解锁一个吧</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<button type="button" class="mini" onclick="openBadges()">🏅 全部徽章</button>
|
||||
</div>
|
||||
<div class="hero-right">
|
||||
<div class="nowbox">
|
||||
<div class="now-date" id="nowDate">—</div>
|
||||
<div class="now-week" id="nowWeek">—</div>
|
||||
<div class="now-time" id="nowTime">--:--:--</div>
|
||||
</div>
|
||||
<div class="termcal">
|
||||
<div class="termcal-title">📅 学期日历</div>
|
||||
<div class="termcal-range">{{ term_start_str }} ~ {{ term_end_str }}</div>
|
||||
<div class="termcal-scroll">{{ term_calendar_svg(active_counts, term_start, term_end) | safe }}</div>
|
||||
<div class="termcal-legend">
|
||||
<span><i class="lg tc-act3"></i>多项</span>
|
||||
<span><i class="lg tc-act1"></i>有打卡</span>
|
||||
<span><i class="lg tc-week"></i>周末</span>
|
||||
<span><i class="lg tc-none"></i>未打卡</span>
|
||||
<span><i class="lg tc-today"></i>今天</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-ring">
|
||||
{{ ring_svg(yprog, '#3b82f6', 130, '学年总进度') | safe }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-2">
|
||||
<section class="card">
|
||||
<h2>🎡 各学科进度一览</h2>
|
||||
<div class="ring-wrap">
|
||||
<div class="ringcar" id="ringCar" data-interval="{{ ring_sec }}">
|
||||
{% for grp in ring_slides %}
|
||||
<div class="ring-slide" style="display:{% if loop.first %}flex{% else %}none{% endif %}">
|
||||
{% for s in grp %}
|
||||
<div class="mini-ring" title="{{ s.name }}（{{ s.progress }}%）">
|
||||
<div class="mini-name">{{ s.icon }} {{ s.name }}</div>
|
||||
{{ mini_ring_svg(s.progress, s.color) | safe }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button type="button" class="ring-next" aria-label="下一屏" onclick="ringCar.next()">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h2>💗 健康综合</h2>
|
||||
<div class="hstats">
|
||||
<div class="hstat">
|
||||
<div class="hs-label">当前身高</div>
|
||||
<div class="hs-val" style="color:#10b981">{{ cur_h if cur_h is not none else '—' }}<em>cm</em></div>
|
||||
<div class="hs-std">标准 {{ std_h }} cm
|
||||
{%- if cur_h is not none %}
|
||||
<span class="hs-diff {{ 'up' if cur_h >= std_h else 'down' }}">
|
||||
{{ '+' if cur_h >= std_h else '' }}{{ (cur_h - std_h) | round(1) }}
|
||||
</span>
|
||||
{%- endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="hstat">
|
||||
<div class="hs-label">当前体重</div>
|
||||
<div class="hs-val" style="color:#f59e0b">{{ cur_w if cur_w is not none else '—' }}<em>kg</em></div>
|
||||
<div class="hs-std">标准 {{ std_w }} kg
|
||||
{%- if cur_w is not none %}
|
||||
<span class="hs-diff {{ 'up' if cur_w >= std_w else 'down' }}">
|
||||
{{ '+' if cur_w >= std_w else '' }}{{ (cur_w - std_w) | round(1) }}
|
||||
</span>
|
||||
{%- endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-foot">
|
||||
<button type="button" class="mini" onclick="openHealth()">📈 图表详情</button>
|
||||
<p class="sub tiny">按 {{ age }} 岁{{ '男孩' if (child.gender or 'M') == 'M' else '女孩' }}的生长参考中位数估算，仅供参考。</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="grid-2">
|
||||
<section class="card">
|
||||
<h2>📚 学科进度</h2>
|
||||
<p class="sub">按任务顺序显示：完成 3 个 · 进行中 1 个 · 待完成 3 个。点一下就完成，下一个自动接上。</p>
|
||||
<div class="carousel" id="subjCarousel" data-interval="{{ carousel_sec }}">
|
||||
{% for grp in slides %}
|
||||
<div class="slide" style="display:{% if loop.first %}block{% else %}none{% endif %}">
|
||||
{% for s in grp %}
|
||||
<div class="subject" style="border-left:6px solid {{ s.color }}">
|
||||
<div class="subject-head">
|
||||
<span class="subject-icon">{{ s.icon }}</span>
|
||||
<span class="subject-name">{{ s.name }}</span>
|
||||
<span class="subject-pct">{{ s.done }}/{{ s.total }} · {{ s.progress }}%</span>
|
||||
<button type="button" class="mini detail-btn" onclick="openDetail({{ s.id }})">详情</button>
|
||||
</div>
|
||||
{{ bar_svg(s.progress, s.color) | safe }}
|
||||
<ul class="tasklist">
|
||||
{% for u in s.window %}
|
||||
<li class="task task-{{ u.status }}">
|
||||
<form method="post" action="{{ url_for('unit_toggle', uid=u.id) }}" class="unit-form">
|
||||
<button type="submit" class="task-btn">
|
||||
<span class="task-ico">{% if u.status == 2 %}✅{% elif u.status == 1 %}🔵{% else %}⚪{% endif %}</span>
|
||||
<span class="task-title">{{ u.title }}</span>
|
||||
</button>
|
||||
</form>
|
||||
{% if u.status == 1 %}<span class="task-flag">进行中</span>{% endif %}
|
||||
{% if u.target_date %}<span class="unit-date">🎯{{ u.target_date }}</span>{% endif %}
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="muted">这个学科还没录入任务，去后台加一条吧</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="subject-detail" id="detail-{{ s.id }}" style="display:none">
|
||||
<h3 style="margin:0 0 10px">{{ s.icon }} {{ s.name }} · {{ s.progress }}%（{{ s.done }}/{{ s.total }}）</h3>
|
||||
<ul class="units">
|
||||
{% for u in s.units %}
|
||||
<li class="unit unit-{{ u.status }}">
|
||||
<form method="post" action="{{ url_for('unit_toggle', uid=u.id) }}" class="unit-form">
|
||||
<button type="submit" class="unit-btn">
|
||||
{% if u.status == 2 %}✅{% elif u.status == 1 %}🔵{% else %}⚪{% endif %}
|
||||
{{ u.title }}
|
||||
</button>
|
||||
</form>
|
||||
{% if u.target_date %}<span class="unit-date">🎯{{ u.target_date }}</span>{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="carousel-nav">
|
||||
<button type="button" class="mini" onclick="carouselPrev()">‹ 上一个</button>
|
||||
<span id="carouselInfo" class="muted"></span>
|
||||
<button type="button" class="mini" onclick="carouselNext()">下一个 ›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h2>📖 我的书架墙
|
||||
<button type="button" class="mini detail-btn" onclick="openShelf()">详情</button>
|
||||
</h2>
|
||||
<p class="sub">共读完 {{ shelf|length }} 本 · 上排最近读完，下排随机回顾</p>
|
||||
{% if shelf %}
|
||||
<div class="shelf-mini">
|
||||
<div class="shelf-row-label">🆕 最近读完</div>
|
||||
<div class="shelf shelf-3">
|
||||
{% for b in shelf_recent %}{% include "_book_cover.html" %}{% endfor %}
|
||||
</div>
|
||||
{% if shelf_random %}
|
||||
<div class="shelf-row-label">🎲 随机回顾</div>
|
||||
<div class="shelf shelf-3">
|
||||
{% for b in shelf_random %}{% include "_book_cover.html" %}{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="shelf-empty">书架还是空的，读完第一本书就会出现在这里 📚</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 浮动快捷打卡 -->
|
||||
<div class="dock">
|
||||
{% for c in checkins %}
|
||||
<button type="button" class="dock-btn {{ 'on' if c.done }}"
|
||||
data-kind="{{ c.key }}" data-name="{{ c.name }}" data-done="{{ c.done_name }}"
|
||||
title="{{ c.name }}">
|
||||
<span class="dock-ico">{{ c.icon }}</span>
|
||||
<span class="dock-txt">{{ c.done_name if c.done else c.name }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- 单元详情弹窗 -->
|
||||
<div class="modal-mask" id="modalMask" onclick="if(event.target===this)closeDetail()">
|
||||
<div class="modal" role="dialog" aria-modal="true">
|
||||
<div class="modal-head">
|
||||
<span>任务详情</span>
|
||||
<button type="button" class="mini" onclick="closeDetail()">✕ 关闭</button>
|
||||
</div>
|
||||
<div class="modal-body" id="modalBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 书架详情弹窗（搜索 / 分类 / 排序都在这里） -->
|
||||
<div class="modal-mask" id="shelfMask" onclick="if(event.target===this)closeShelf()">
|
||||
<div class="modal modal-wide" role="dialog" aria-modal="true">
|
||||
<div class="modal-head">
|
||||
<span>📚 书架详情</span>
|
||||
<button type="button" class="mini" onclick="closeShelf()">✕ 关闭</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="shelf-tools">
|
||||
<input id="shelfSearch" class="shelf-search" type="search" placeholder="🔍 搜书名 / 作者 / 分类…" autocomplete="off">
|
||||
<select id="shelfSort" class="shelf-sort" title="排序">
|
||||
<option value="recent">最近读完</option>
|
||||
<option value="rating">评分最高</option>
|
||||
<option value="title">按书名</option>
|
||||
</select>
|
||||
<button type="button" id="shelfReset" class="mini">重置</button>
|
||||
</div>
|
||||
<div class="chips" id="shelfCats">
|
||||
<button type="button" class="chip active" data-cat="__all__">全部<span class="chip-n">{{ shelf|length }}</span></button>
|
||||
{% for c in shelf_cats %}
|
||||
<button type="button" class="chip" data-cat="{{ c.name }}">{{ c.name }}<span class="chip-n">{{ c.count }}</span></button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p class="sub" id="shelfCount" data-total="{{ shelf|length }}">已读完 {{ shelf|length }} 本</p>
|
||||
<div class="shelf" id="shelfWall">
|
||||
{% for b in shelf %}{% include "_book_cover.html" %}{% endfor %}
|
||||
</div>
|
||||
<p class="shelf-empty" id="shelfEmpty" hidden>🙈 没有匹配的书，换个词或分类试试</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 徽章详情弹窗 -->
|
||||
<div class="modal-mask" id="badgeMask" onclick="if(event.target===this)closeBadges()">
|
||||
<div class="modal" role="dialog" aria-modal="true">
|
||||
<div class="modal-head">
|
||||
<span>🏅 我的徽章</span>
|
||||
<button type="button" class="mini" onclick="closeBadges()">✕ 关闭</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="sub">徽章会随任务、读书、运动的进展自动更新。</p>
|
||||
<div class="badge-grid" id="badgeList"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 健康图表详情弹窗 -->
|
||||
<div class="modal-mask" id="healthMask" onclick="if(event.target===this)closeHealth()">
|
||||
<div class="modal modal-wide" role="dialog" aria-modal="true">
|
||||
<div class="modal-head">
|
||||
<span>💗 健康图表（近 2 年）</span>
|
||||
<button type="button" class="mini" onclick="closeHealth()">✕ 关闭</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="sub">
|
||||
<i class="lgline" style="background:#10b981"></i>身高(cm)
|
||||
<i class="lgline" style="background:#f59e0b"></i>体重(kg)
|
||||
</p>
|
||||
<div class="healthbox healthbox-detail">{{ health_chart_svg(hpoints) | safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ---------- 当前日期时间（每秒刷新） ---------- */
|
||||
(function () {
|
||||
var WD = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
function pad(n) { return n < 10 ? '0' + n : '' + n; }
|
||||
function tick() {
|
||||
var d = new Date();
|
||||
var de = document.getElementById('nowDate');
|
||||
var we = document.getElementById('nowWeek');
|
||||
var te = document.getElementById('nowTime');
|
||||
if (de) de.textContent = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日';
|
||||
if (we) we.textContent = WD[d.getDay()];
|
||||
if (te) te.textContent = pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
|
||||
}
|
||||
tick();
|
||||
setInterval(tick, 1000);
|
||||
})();
|
||||
|
||||
/* ---------- 通用轮播 ---------- */
|
||||
function makeCarousel(rootId, slideSel, infoId, display, unit) {
|
||||
var root = document.getElementById(rootId);
|
||||
if (!root) return { next: function () {}, prev: function () {} };
|
||||
var slides = Array.prototype.slice.call(root.querySelectorAll(slideSel));
|
||||
var iv = (parseInt(root.dataset.interval, 10) || 8) * 1000;
|
||||
var idx = 0, timer = null;
|
||||
var info = infoId ? document.getElementById(infoId) : null;
|
||||
function show(i) {
|
||||
if (!slides.length) return;
|
||||
idx = (i + slides.length) % slides.length;
|
||||
slides.forEach(function (el, k) { el.style.display = (k === idx) ? display : 'none'; });
|
||||
if (info) info.textContent = (idx + 1) + ' / ' + slides.length + (unit || '');
|
||||
clearTimeout(timer);
|
||||
if (slides.length > 1) timer = setTimeout(function () { show(idx + 1); }, iv);
|
||||
}
|
||||
show(0);
|
||||
return { next: function () { show(idx + 1); }, prev: function () { show(idx - 1); } };
|
||||
}
|
||||
|
||||
var subjCar = makeCarousel('subjCarousel', '.slide', 'carouselInfo', 'block', ' 科');
|
||||
var ringCar = makeCarousel('ringCar', '.ring-slide', null, 'flex', '');
|
||||
makeCarousel('badgeBar', '.badge-slide', null, 'flex', '');
|
||||
function carouselNext() { subjCar.next(); }
|
||||
function carouselPrev() { subjCar.prev(); }
|
||||
|
||||
/* ---------- 弹窗 ---------- */
|
||||
function openDetail(id) {
|
||||
var src = document.getElementById('detail-' + id);
|
||||
document.getElementById('modalBody').innerHTML = src ? src.innerHTML : '';
|
||||
document.getElementById('modalMask').classList.add('show');
|
||||
}
|
||||
function closeDetail() { document.getElementById('modalMask').classList.remove('show'); }
|
||||
function openShelf() { document.getElementById('shelfMask').classList.add('show'); }
|
||||
function closeShelf() { document.getElementById('shelfMask').classList.remove('show'); }
|
||||
|
||||
/* ---------- 徽章详情 ---------- */
|
||||
var BADGES = {{ badges | tojson }};
|
||||
function badgeCell(b) {
|
||||
var cls = 'badge-cell' + (b.got ? '' : ' locked');
|
||||
return '<div class="' + cls + '" data-key="' + b.key + '">' +
|
||||
'<div class="bc-icon">' + b.icon + '</div>' +
|
||||
'<div class="bc-name">' + b.name + '</div>' +
|
||||
'<div class="bc-desc">' + (b.desc || '') + '</div>' +
|
||||
'<div class="bc-state">' +
|
||||
(b.got ? ('✅ 已获得' + (b.got_at ? ' · ' + b.got_at : '')) : '🔒 未解锁') +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
}
|
||||
function renderBadges() {
|
||||
document.getElementById('badgeList').innerHTML = BADGES.map(badgeCell).join('');
|
||||
}
|
||||
function openBadges() { renderBadges(); document.getElementById('badgeMask').classList.add('show'); }
|
||||
function openBadge(key) {
|
||||
renderBadges();
|
||||
document.getElementById('badgeMask').classList.add('show');
|
||||
var el = document.querySelector('#badgeList [data-key="' + key + '"]');
|
||||
if (el) el.scrollIntoView({ block: 'center' });
|
||||
}
|
||||
function closeBadges() { document.getElementById('badgeMask').classList.remove('show'); }
|
||||
function openHealth() { document.getElementById('healthMask').classList.add('show'); }
|
||||
function closeHealth() { document.getElementById('healthMask').classList.remove('show'); }
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') { closeDetail(); closeShelf(); closeBadges(); closeHealth(); }
|
||||
});
|
||||
|
||||
/* ---------- 浮动打卡 ---------- */
|
||||
document.querySelectorAll('.dock-btn').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
btn.disabled = true;
|
||||
fetch('/checkin/' + btn.dataset.kind, {
|
||||
method: 'POST', headers: { 'X-Ajax': '1' }
|
||||
}).then(function (r) { return r.json(); }).then(function (j) {
|
||||
var txt = btn.querySelector('.dock-txt');
|
||||
btn.classList.toggle('on', !!j.done);
|
||||
if (txt) txt.textContent = j.done ? btn.dataset.done : btn.dataset.name;
|
||||
if (j.done) {
|
||||
btn.classList.add('pop');
|
||||
setTimeout(function () { btn.classList.remove('pop'); }, 400);
|
||||
}
|
||||
}).catch(function () {}).then(function () { btn.disabled = false; });
|
||||
});
|
||||
});
|
||||
|
||||
/* ---------- 书架详情：搜索 + 分类 + 排序 ---------- */
|
||||
(function () {
|
||||
var wall = document.getElementById('shelfWall');
|
||||
if (!wall) return;
|
||||
var items = Array.prototype.slice.call(wall.querySelectorAll('.book-cover'));
|
||||
var search = document.getElementById('shelfSearch');
|
||||
var sortSel = document.getElementById('shelfSort');
|
||||
var countEl = document.getElementById('shelfCount');
|
||||
var emptyEl = document.getElementById('shelfEmpty');
|
||||
var resetBtn = document.getElementById('shelfReset');
|
||||
var chips = Array.prototype.slice.call(document.querySelectorAll('#shelfCats .chip'));
|
||||
var total = items.length;
|
||||
var curCat = '__all__';
|
||||
var baseText = countEl.textContent;
|
||||
|
||||
function cmp(a, b) {
|
||||
var mode = sortSel.value;
|
||||
if (mode === 'rating') {
|
||||
var d = (+b.dataset.rating) - (+a.dataset.rating);
|
||||
if (d) return d;
|
||||
return a.dataset.title.localeCompare(b.dataset.title, 'zh');
|
||||
}
|
||||
if (mode === 'title') return a.dataset.title.localeCompare(b.dataset.title, 'zh');
|
||||
return (b.dataset.finish || '').localeCompare(a.dataset.finish || '');
|
||||
}
|
||||
|
||||
function apply() {
|
||||
var q = (search.value || '').trim().toLowerCase();
|
||||
var shown = 0;
|
||||
items.forEach(function (el) {
|
||||
var okCat = (curCat === '__all__') || (el.dataset.cat === curCat);
|
||||
var okQ = !q || el.dataset.s.indexOf(q) >= 0;
|
||||
var ok = okCat && okQ;
|
||||
el.hidden = !ok;
|
||||
if (ok) shown++;
|
||||
});
|
||||
items.slice().sort(cmp).forEach(function (el) { wall.appendChild(el); });
|
||||
var filtering = q || curCat !== '__all__';
|
||||
countEl.textContent = filtering ? ('筛选出 ' + shown + ' 本 / 共 ' + total + ' 本') : baseText;
|
||||
emptyEl.hidden = shown > 0;
|
||||
}
|
||||
|
||||
chips.forEach(function (c) {
|
||||
c.onclick = function () {
|
||||
curCat = c.dataset.cat;
|
||||
chips.forEach(function (x) { x.classList.toggle('active', x === c); });
|
||||
apply();
|
||||
};
|
||||
});
|
||||
search.addEventListener('input', apply);
|
||||
sortSel.addEventListener('change', apply);
|
||||
resetBtn.onclick = function () {
|
||||
search.value = '';
|
||||
curCat = '__all__';
|
||||
sortSel.value = 'recent';
|
||||
chips.forEach(function (x) { x.classList.toggle('active', x.dataset.cat === '__all__'); });
|
||||
apply();
|
||||
};
|
||||
apply();
|
||||
})();
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user