125 lines
5.3 KiB
HTML
125 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
|
|
<title>愈心量表 — 愈心谷</title>
|
|
<style>
|
|
:root{--pri:#E54D42;--bg-start:#FFD1C7;--bg-end:#FFC8B5}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{
|
|
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
|
|
background:linear-gradient(180deg,var(--bg-start) 0%,var(--bg-end) 50%,#fff5f0 100%);
|
|
min-height:100vh;-webkit-font-smoothing:antialiased;
|
|
}
|
|
.header{padding:24px 20px 16px;text-align:center}
|
|
.logo img{height:36px;margin-bottom:4px}
|
|
.header .sub{font-size:13px;color:rgba(0,0,0,0.45);margin-top:4px}
|
|
|
|
.categories{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 12px;justify-content:center;max-width:600px;margin:0 auto}
|
|
.cat-btn{
|
|
padding:7px 16px;border-radius:20px;border:1px solid rgba(0,0,0,0.12);
|
|
background:#fff;font-size:13px;color:#555;cursor:pointer;
|
|
transition:all 0.2s;white-space:nowrap;
|
|
}
|
|
.cat-btn.active{background:var(--pri);color:#fff;border-color:var(--pri)}
|
|
|
|
.scales{max-width:600px;margin:0 auto;padding:0 20px 40px}
|
|
.scale-card{
|
|
display:flex;align-items:center;gap:12px;padding:16px;
|
|
background:#fff;border-radius:12px;margin-bottom:10px;
|
|
box-shadow:0 1px 6px rgba(0,0,0,0.05);cursor:pointer;
|
|
transition:transform 0.12s;text-decoration:none;color:inherit;
|
|
}
|
|
.scale-card:active{transform:scale(0.98)}
|
|
.scale-card .icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
|
|
.scale-card .icon.cat-综合{background:#FFECEC;color:var(--pri)}
|
|
.scale-card .icon.cat-人格{background:#E6F0FF;color:#4A90E2}
|
|
.scale-card .icon.cat-抑郁{background:#E6E0FF;color:#7C5CF2}
|
|
.scale-card .icon.cat-焦虑{background:#FFF0E6;color:#E8985A}
|
|
.scale-card .icon.cat-强迫{background:#E6FFE8;color:#5CB85C}
|
|
.scale-card .icon.cat-躁狂{background:#FFF8E6;color:#E8985A}
|
|
.scale-card .icon.cat-双相{background:#FFE6F0;color:#E0508C}
|
|
.scale-card .icon.cat-恐惧{background:#E6F5FF;color:#4A90E2}
|
|
.scale-card .icon.cat-智商{background:#F3E8FF;color:#8B5CF6}
|
|
.scale-card .icon.cat-情商{background:#FFF5EC;color:#C8923A}
|
|
.scale-card .icon.cat-其他{background:#F0F0F0;color:#888}
|
|
.scale-card .info{flex:1;min-width:0}
|
|
.scale-card .info .name{font-size:15px;font-weight:600;color:#333}
|
|
.scale-card .info .desc{font-size:12px;color:#999;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.scale-card .count{font-size:12px;color:#aaa;flex-shrink:0}
|
|
|
|
.loading{text-align:center;padding:60px 20px;color:#999}
|
|
.empty{text-align:center;padding:40px 20px;color:#ccc;font-size:14px}
|
|
.back{display:inline-block;padding:8px 16px;color:var(--pri);text-decoration:none;font-size:14px;margin:8px 0 0 20px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">
|
|
<a href="./" class="logo"><img src="logo.png" alt="愈心谷"></a>
|
|
<div class="sub">愈心谷数字解构 · 专业心理量表库</div>
|
|
</div>
|
|
|
|
<div class="categories" id="cats"></div>
|
|
|
|
<div id="content"></div>
|
|
|
|
<script>
|
|
const ICONS = {'心理测试综合':'📋','人格测试':'🎭','抑郁症测试':'🌧️','焦虑症测试':'😰','强迫症测试':'🔄','躁狂症测试':'🔥','双向情感障碍':'🌓','恐惧症测试':'😨','智商测试':'🧠','情商测试':'💝','其它测试':'📌'};
|
|
|
|
const CAT_KEYS = {'心理测试综合':'cat-综合','人格测试':'cat-人格','抑郁症测试':'cat-抑郁','焦虑症测试':'cat-焦虑','强迫症测试':'cat-强迫','躁狂症测试':'cat-躁狂','双向情感障碍':'cat-双相','恐惧症测试':'cat-恐惧','智商测试':'cat-智商','情商测试':'cat-情商','其它测试':'cat-其他'};
|
|
|
|
let scales = [], activeCat = '全部';
|
|
|
|
async function load() {
|
|
document.getElementById('content').innerHTML = '<div class="loading">加载中…</div>';
|
|
try {
|
|
const r = await fetch('api/scales');
|
|
scales = await r.json();
|
|
renderCats();
|
|
renderScales();
|
|
} catch(e) {
|
|
document.getElementById('content').innerHTML = '<div class="loading">加载失败，请刷新重试</div>';
|
|
}
|
|
}
|
|
|
|
function renderCats() {
|
|
const cats = [...new Set(scales.map(s=>s.category))];
|
|
const html = ['<button class="cat-btn active" onclick="filter(\'全部\')">全部</button>'];
|
|
cats.forEach(c => {
|
|
html.push(`<button class="cat-btn" onclick="filter('${c}')">${c}</button>`);
|
|
});
|
|
document.getElementById('cats').innerHTML = html.join('');
|
|
}
|
|
|
|
function filter(cat) {
|
|
activeCat = cat;
|
|
document.querySelectorAll('.cat-btn').forEach(b => b.classList.toggle('active', b.textContent === cat));
|
|
renderScales();
|
|
}
|
|
|
|
function renderScales() {
|
|
const filtered = activeCat === '全部' ? scales : scales.filter(s=>s.category===activeCat);
|
|
if (!filtered.length) {
|
|
document.getElementById('content').innerHTML = '<div class="empty">暂无数据</div>';
|
|
return;
|
|
}
|
|
const html = filtered.map(s => `
|
|
<a href="scale_test.html?slug=${s.slug}" class="scale-card">
|
|
<div class="icon ${CAT_KEYS[s.category]||'cat-其他'}">${ICONS[s.category]||'📌'}</div>
|
|
<div class="info">
|
|
<div class="name">${s.name}</div>
|
|
<div class="desc">${s.description||''}</div>
|
|
</div>
|
|
<div class="count">${s.question_count}题</div>
|
|
</a>
|
|
`).join('');
|
|
document.getElementById('content').innerHTML = `<div class="scales">${html}</div>`;
|
|
}
|
|
|
|
load();
|
|
</script>
|
|
</body>
|
|
</html>
|