admin/WhatIDo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(report): student report page with works/gallery/files sections

Browse Source
This commit is contained in:
dev
2026-09-18 17:50:50 +03:00
parent 12c612eccd
commit d434732f41
9 changed files with 1187 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server.js
+165 -109
View File
@@ -1911,6 +1911,10 @@ app.get('/s/:token', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'share.html'));
});
app.get('/r/:token', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'report.html'));
});
// --- Groups CRUD ---
app.get('/api/groups', apiLimiter, optionalAuth, async (req, res) => {
const rows = await cacheWrap('groups:list:' + scopeKey(req.user), PUBLIC_TTL_MS, async () => {
@@ -2522,10 +2526,17 @@ function renderStudentReport(data, opts) {
else if (IMG_EXT.has(ext)) { gallery.push({ type: 'image', src: 'files/' + f.saved }); galIdx.set('files/' + f.saved, gallery.length - 1); }
}
const avatar = showPhotos && photos.length ? photos[0].stored : null;
const statsChips = [];
if (showEntries) statsChips.push(`<div class="chip"><b>${entries.length}</b><span>занятий</span></div>`);
if (showPhotos) statsChips.push(`<div class="chip"><b>${photos.length}</b><span>фотографий</span></div>`);
if (showFiles) statsChips.push(`<div class="chip"><b>${files.length}</b><span>файлов</span></div>`);
const plural = (n, one, few, many) => {
const m10 = n % 10, m100 = n % 100;
if (m10 === 1 && m100 !== 11) return one;
if (m10 >= 2 && m10 <= 4 && (m100 < 12 || m100 > 14)) return few;
return many;
};
const counters = [];
if (showEntries) counters.push(`<div class="counter c1"><b>${entries.length}</b><span>${plural(entries.length, 'занятие', 'занятия', 'занятий')}</span></div>`);
if (showPhotos) counters.push(`<div class="counter c2"><b>${photos.length}</b><span>${plural(photos.length, 'фотография', 'фотографии', 'фотографий')}</span></div>`);
if (showFiles) counters.push(`<div class="counter c3"><b>${files.length}</b><span>${plural(files.length, 'работа', 'работы', 'работ')}</span></div>`);
counters.push(`<div class="counter c4"><b>${groups.length}</b><span>${plural(groups.length, 'группа', 'группы', 'групп')}</span></div>`);
const photoCards = showPhotos ? photos.map(p => {
let caption = '';
if (showCaptions && p.caption) caption = truncate(p.caption, 120);
@@ -2537,19 +2548,22 @@ function renderStudentReport(data, opts) {
${caption ? `<figcaption>${escapeHtml(caption)}</figcaption>` : ''}
</figure>`;
}).join('') : '';
const fileRows = showFiles ? files.map(f => {
const projectCards = showFiles ? files.map((f, i) => {
const ext = f.original.indexOf('.') >= 0 ? f.original.split('.').pop().toUpperCase().slice(0, 8) : 'FILE';
const meta = showDates ? `${fmtLongDate(f.createdAt)} · ${fmtBytes(f.size)}` : fmtBytes(f.size);
const fg = galIdx.get('files/' + f.saved);
const gattr = fg !== undefined ? ` class="gfile" data-g="${fg}"` : ' target="_blank" rel="noopener"';
const gattr = fg !== undefined ? ` data-g="${fg}"` : ' target="_blank" rel="noopener"';
return `
<li>
<a href="files/${escapeHtml(f.saved)}"${gattr}>
<span class="badge">${escapeHtml(ext)}</span>
<span class="fname">${escapeHtml(f.original)}</span>
<span class="fmeta">${escapeHtml(meta)}</span>
<article class="proj">
<a class="proj-link${fg !== undefined ? ' gfile' : ''}" href="files/${escapeHtml(f.saved)}"${gattr}>
<span class="pnum">${String(i + 1).padStart(2, '0')}</span>
<span class="pbody">
<span class="pname">${escapeHtml(f.original)}</span>
<span class="pmeta"><span class="badge">${escapeHtml(ext)}</span><span class="pdate">${escapeHtml(meta)}</span></span>
</span>
<span class="parrow">&#8599;</span>
</a>
</li>`;
</article>`;
}).join('') : '';
const photosByEntry = new Map();
for (const p of photos) {
@@ -2564,13 +2578,15 @@ function renderStudentReport(data, opts) {
const desc = e.description ? `<p class="ldesc">${escapeHtml(e.description)}</p>` : '';
const gr = e.group_name ? `<span class="lgroup">${escapeHtml(e.group_name)}</span>` : '';
const dt = showDates && e.created_at ? `<span class="ldate">${escapeHtml(fmtLongDate(e.created_at))}</span>` : '';
const head = dt + gr;
return `
<article class="lesson">
${head ? `<div class="lhead">${head}</div>` : ''}
${desc}
${thumbs ? `<div class="lthumbs">${thumbs}</div>` : ''}
${fls}
${dt ? `<div class="ldate">${escapeHtml(fmtLongDate(e.created_at))}</div>` : ''}
<div class="lmain">
${gr ? `<span class="lgroup">${escapeHtml(e.group_name)}</span>` : ''}
${desc}
${thumbs ? `<div class="lthumbs">${thumbs}</div>` : ''}
${fls}
</div>
</article>`;
}).join('') : '';
const groupLine = groups.length ? escapeHtml(groups.join(' · ')) : '';
@@ -2581,10 +2597,11 @@ function renderStudentReport(data, opts) {
metaBits.push(`Сформировано ${genLabel}`);
const heroAvatar = avatar ? `<div class="avatar"><img src="photos/${escapeHtml(avatar)}" alt="${escapeHtml(name)}"></div>` : '';
const navItems = [];
navItems.push('<a class="navlink" href="#overview">Обзор</a>');
if (showPhotos) navItems.push('<a class="navlink" href="#photos">Фотографии</a>');
if (showFiles) navItems.push('<a class="navlink" href="#files">Работы</a>');
if (showFiles) navItems.push('<a class="navlink" href="#works">Работы</a>');
if (showEntries) navItems.push('<a class="navlink" href="#lessons">Занятия</a>');
const nav = navItems.length >= 2 ? '<nav class="nav" id="topNav">' + navItems.join('') + '</nav>' : '';
const nav = navItems.join('');
return `<!DOCTYPE html>
<html lang="ru">
<head>
@@ -2592,129 +2609,160 @@ function renderStudentReport(data, opts) {
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${escapeHtml(name)} — портфолио</title>
<style>
:root{--cream:#FFF7EC;--ink:#2B2B33;--muted:#98919B;--yellow:#F7C90E;--teal:#14B8A6;--violet:#8B5CF6;--coral:#FF6B6B;--sky:#38BDF8;--line:#FFEAD2}
:root{--bg:#0c0c0c;--bg2:#141414;--ink:#ffffff;--muted:#8a8a8a;--line:#232323;--accent:#3290ff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--cream);color:var(--ink);line-height:1.55}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(520px 400px at 8% -2%,rgba(247,201,14,.18),transparent 62%),radial-gradient(620px 430px at 100% 3%,rgba(20,184,166,.15),transparent 58%)}
.wrap{max-width:960px;margin:0 auto;padding:28px 18px 58px}
body{font-family:Inter,"Inter Tight","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px}
.nav{position:sticky;top:12px;z-index:40;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;background:rgba(255,255,255,.92);border:1px solid #F1E2C6;border-radius:999px;padding:8px 14px;box-shadow:0 12px 26px -16px rgba(20,30,50,.35);margin-top:26px}
.nav .navlink{text-decoration:none;color:var(--ink);background:#fff;border:1px solid #F1E2C6;border-radius:999px;padding:8px 18px;font-size:.9rem;font-weight:600;transition:all .15s}
.nav .navlink:hover{transform:translateY(-1px)}
.nav .navlink.on{background:var(--yellow);color:#231f12;border-color:transparent;box-shadow:0 4px 12px -4px rgba(247,201,14,.5)}
.topnav{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:24px;background:rgba(12,12,12,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:18px 32px}
.topnav .brand{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topnav .brand::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);margin-right:10px}
.topnav .links{display:flex;gap:26px;flex-wrap:wrap;justify-content:flex-end}
.topnav .navlink{text-decoration:none;color:var(--muted);font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;position:relative;padding-bottom:4px;transition:color .15s}
.topnav .navlink:hover{color:var(--ink)}
.topnav .navlink.on{color:var(--ink)}
.topnav .navlink.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)}
.hero{overflow:hidden;border-radius:34px;padding:36px 34px;background:linear-gradient(135deg,#FFF6DB,#FFEDBF 52%,#FFE19A);box-shadow:0 24px 50px -24px rgba(247,201,14,.5);position:relative}
.hero .deco{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none}
.hero .deco.d1{width:150px;height:150px;right:-40px;top:-46px}
.hero .deco.d2{width:80px;height:80px;left:40%;bottom:-30px;background:rgba(20,184,166,.14)}
.hero .deco.d3{width:44px;height:44px;left:-14px;top:30%}
.avatar-col{position:relative;display:flex;gap:24px;align-items:center}
.avatar{flex:0 0 auto;width:104px;height:104px;border-radius:50%;overflow:hidden;border:5px solid #fff;background:#fff;box-shadow:0 10px 24px -6px rgba(0,0,0,.26);transform:rotate(-4deg)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.avatar.aemp{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#F7C90E,#FFB34A);font-size:2.4rem;transform:rotate(-4deg)}
.kicker{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#B07A00;margin-bottom:6px}
h1{font-size:clamp(1.65rem,4.4vw,2.35rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin-bottom:6px}
.meta{font-size:.95rem;color:#7A6A33;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.stats{display:flex;gap:12px;flex-wrap:wrap}
.chip{background:#fff;border:1px solid #F3DFC0;border-radius:18px;padding:10px 16px;display:flex;flex-direction:column;min-width:92px;box-shadow:0 8px 18px -12px rgba(20,30,50,.35)}
.chip b{font-size:1.5rem;line-height:1.05}
.chip span{font-size:.78rem;color:var(--muted)}
.stats .chip:nth-child(1) b{color:var(--coral)}
.stats .chip:nth-child(2) b{color:var(--teal)}
.stats .chip:nth-child(3) b{color:var(--violet)}
section{background:#fff;border:1px solid var(--line);border-radius:30px;padding:26px 26px 28px;margin-top:26px;box-shadow:0 16px 34px -22px rgba(20,30,50,.4)}
.p-sec{border-top:6px solid var(--teal)}
.f-sec{border-top:6px solid var(--violet)}
.l-sec{border-top:6px solid var(--coral)}
h2{font-size:1.25rem;font-weight:800;display:flex;align-items:center;gap:10px;margin-bottom:18px}
h2 .sico{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;flex:0 0 auto}
.p-sec h2 .sico{background:#E3FAF7}
.f-sec h2 .sico{background:#EFE9FF}
.l-sec h2 .sico{background:#FFE9EE}
.empty{color:var(--muted);border:2px dashed #F0DDBE;border-radius:20px;padding:24px 18px;text-align:center;font-size:.95rem}
.hero{padding:88px 0 72px;border-bottom:1px solid var(--line)}
.hero-head{display:flex;align-items:center;gap:28px}
.avatar{flex:0 0 auto;width:88px;height:88px;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.aemp{display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-size:2rem}
.kicker{font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px;margin-bottom:14px}
.kicker::before{content:"[";color:var(--accent);font-weight:700}
.kicker::after{content:"]";color:var(--accent);font-weight:700}
h1{font-size:clamp(2.6rem,6.5vw,4.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.02}
.meta{font-size:.92rem;color:var(--muted);margin-top:12px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.btn{display:inline-block;border-radius:999px;padding:13px 28px;font-size:.92rem;font-weight:600;letter-spacing:-.01em;text-decoration:none;transition:opacity .15s,background .15s,color .15s;border:1px solid transparent}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{opacity:.85}
.btn-line{border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:#3a3a3a;background:var(--bg2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.ph{background:#fff;border-radius:20px;overflow:hidden;cursor:zoom-in;border:3px solid #fff;box-shadow:0 10px 22px -14px rgba(20,30,50,.4);transition:transform .16s ease,box-shadow .16s ease}
.ph:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 18px 30px -16px rgba(20,30,50,.45)}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ph figcaption{background:rgba(255,247,236,.92);padding:9px 12px;font-size:.82rem;color:#6A6155;line-height:1.35}
.sec{padding:72px 0;border-bottom:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:36px}
.sec-head h2{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.sec-head .count{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.sec-head .count::before{content:"[";color:var(--accent)}
.sec-head .count::after{content:"]";color:var(--accent)}
.note{color:var(--muted);font-size:.95rem}
.filelist{list-style:none;display:flex;flex-direction:column;gap:9px}
.filelist li a{display:flex;align-items:center;gap:14px;background:#FDFAF4;border:1px solid #F1E2C6;border-radius:18px;padding:12px 16px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.filelist li a:hover{transform:translateX(4px);box-shadow:0 10px 20px -12px rgba(20,30,50,.35)}
.badge{flex:0 0 auto;min-width:52px;text-align:center;font-size:.68rem;font-weight:800;letter-spacing:.04em;padding:6px 9px;border-radius:10px;background:linear-gradient(135deg,#F7C90E,#FFB34A);color:#231f12}
.fname{flex:1;min-width:0;font-weight:700;word-break:break-word}
.fmeta{flex:0 0 auto;color:var(--muted);font-size:.8rem;white-space:nowrap}
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px}
.counter{padding:10px 26px;border-left:1px solid var(--line)}
.counter:first-child{border-left:none;padding-left:0}
.counter b{display:block;font-size:clamp(2.8rem,5.5vw,4.2rem);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent)}
.counter span{display:block;margin-top:12px;font-size:.85rem;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.ph{cursor:zoom-in}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:16px;border:1px solid var(--line);transition:transform .3s}
.ph:hover img{transform:scale(1.02)}
.ph figcaption{padding:10px 2px 0;font-size:.85rem;color:var(--muted)}
.projects{display:flex;flex-direction:column}
.proj{border-top:1px solid var(--line)}
.proj:last-child{border-bottom:1px solid var(--line)}
.proj-link{display:grid;grid-template-columns:80px 1fr auto auto;gap:22px;align-items:center;padding:26px 2px;text-decoration:none;color:var(--ink)}
.pnum{font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:#2b2b2b;font-variant-numeric:tabular-nums;transition:color .15s}
.pbody{min-width:0;display:flex;flex-direction:column;gap:6px}
.pname{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;word-break:break-word;transition:color .15s}
.pmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{flex:0 0 auto;font-size:.66rem;font-weight:600;letter-spacing:.08em;border:1px solid var(--line);border-radius:999px;padding:4px 12px;color:var(--muted)}
.pdate{color:var(--muted);font-size:.85rem;white-space:nowrap}
.parrow{color:var(--muted);font-size:1.05rem;transition:transform .15s,color .15s}
.proj-link:hover .pnum{color:var(--accent)}
.proj-link:hover .pname{color:var(--accent)}
.proj-link:hover .parrow{transform:translate(2px,-2px);color:var(--accent)}
.gfile{cursor:pointer}
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:stretch}
.lesson{background:#FFFCF6;border:1px solid #F3E4CA;border-left:6px solid var(--coral);border-radius:20px;padding:16px 20px}
.lhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.ldate{background:var(--coral);color:#fff;border-radius:999px;padding:3px 12px;font-size:.74rem;font-weight:700}
.lgroup{background:rgba(20,184,166,.14);color:#0C9488;font-weight:700;border-radius:999px;padding:3px 12px;font-size:.74rem}
.ldesc{white-space:pre-wrap;color:#3A3733;font-size:.95rem}
.lthumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.tph{width:80px;height:80px;object-fit:cover;border-radius:14px;cursor:zoom-in;border:2px solid #fff;box-shadow:0 6px 12px -8px rgba(20,30,50,.35)}
.lfiles{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.lfiles a{font-size:.8rem;color:#0C9488;background:rgba(20,184,166,.1);border-radius:999px;padding:5px 12px;text-decoration:none;word-break:break-word}
.lfiles a:hover{background:rgba(20,184,166,.18)}
.lessons{display:flex;flex-direction:column}
.lesson{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:28px 2px;border-top:1px solid var(--line)}
.lesson:last-child{border-bottom:1px solid var(--line)}
.ldate{color:var(--accent);font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums;padding-top:4px}
.lmain{min-width:0}
.lgroup{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.ldesc{white-space:pre-wrap;font-size:1rem;letter-spacing:-.01em;max-width:660px;color:#b5b5b5}
.lthumbs{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.tph{width:92px;height:92px;object-fit:cover;border-radius:14px;border:1px solid var(--line);cursor:zoom-in;transition:transform .2s}
.tph:hover{transform:scale(1.04)}
.lfiles{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.lfiles a{font-size:.88rem;color:#cfcfcf;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:8px 14px;word-break:break-word;transition:border-color .15s}
.lfiles a:hover{border-color:var(--accent);color:#fff}
footer{margin-top:44px;color:#B9B4BE;font-size:.82rem;text-align:center}
.lightbox{position:fixed;inset:0;background:rgba(22,20,40,.9);display:none;flex-direction:column;z-index:60;padding:16px 92px 48px;cursor:zoom-out;overflow:hidden}
.totop{position:fixed;right:22px;bottom:22px;z-index:45;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-size:1.1rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s,background .15s}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{background:var(--accent);border-color:var(--accent);color:#fff}
footer{padding:36px 0 30px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);display:none;flex-direction:column;z-index:60;padding:16px 92px 48px;cursor:zoom-out;overflow:hidden}
.lightbox.open{display:flex}
.lightbox .lb-media{display:flex;align-items:center;justify-content:center;flex:1;min-height:0}
.lightbox .lb-media img,.lightbox .lb-media video{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:14px}
.lightbox .lb-media video{background:#000;max-height:calc(100% - 16px)}
.lightbox .lb-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;border-radius:50%;border:none;background:rgba(247,201,14,.94);color:#231f12;font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -8px rgba(0,0,0,.5)}
.lightbox .lb-btn:hover{background:#F7C90E}
.lightbox .lb-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.lightbox .lb-btn:hover{background:var(--accent);border-color:var(--accent)}
.lightbox .lb-prev{left:20px}
.lightbox .lb-next{right:20px}
.lightbox .lb-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(22,20,40,.72);color:#fff;border-radius:999px;padding:6px 16px;font-size:.85rem;letter-spacing:.03em}
.lightbox .lb-close{position:absolute;top:16px;right:20px;z-index:6;width:44px;height:44px;border-radius:50%;border:none;background:rgba(22,20,40,.6);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.lightbox .lb-close:hover{background:rgba(247,201,14,.92);color:#231f12}
.lightbox .lb-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(20,20,20,.85);color:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 16px;font-size:.85rem;letter-spacing:.03em}
.lightbox .lb-close{position:absolute;top:16px;right:20px;z-index:6;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(20,20,20,.8);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.lightbox .lb-close:hover{background:var(--accent);border-color:var(--accent)}
@media print{.topnav{display:none}.cta-row{display:none}.totop{display:none}.wrap{max-width:none;padding:0}body{background:#fff;color:#111}.sec,.proj,.lesson{break-inside:avoid}}
@media (max-width:900px){.lesson{grid-template-columns:1fr;gap:8px;padding:24px 0}.proj-link{grid-template-columns:56px 1fr auto auto;gap:14px}.pdate{display:none}.hero-head{flex-direction:column;align-items:flex-start;gap:18px}.counters{grid-template-columns:repeat(2,1fr)}.counter{padding:14px 0 4px 16px}.counter:nth-child(odd){border-left:none;padding-left:0}.counter b{font-size:2.4rem}}
@media (max-width:560px){.topnav{padding:14px 18px}.topnav .links{gap:14px}.wrap{padding:0 18px}.hero{padding:44px 0 40px}.proj-link{grid-template-columns:44px 1fr auto;padding:18px 0}.pnum{font-size:1.2rem}.pname{font-size:1rem}.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.lightbox{padding:8px 6px 44px}.lb-prev{left:6px}.lb-next{right:6px}.lb-btn{width:44px;height:44px;font-size:1.4rem}.lb-close{width:38px;height:38px;top:10px;right:10px;font-size:1.15rem}}
@media print{body::before{display:none}.nav{display:none}.wrap{max-width:none;padding:0;-webkit-print-color-adjust:exact}body{background:#fff}.hero,section{box-shadow:none}section,.lesson,.ph{break-inside:avoid}}
@media (max-width:560px){.avatar-col{flex-direction:column;align-items:flex-start;gap:16px}.hero{padding:26px 22px}.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.stats{gap:8px}.fmeta{display:none}.chip{min-width:74px;padding:8px 12px}.lessons{grid-template-columns:1fr}.lightbox{padding:8px 6px 44px}.lb-prev{left:6px}.lb-next{right:6px}.lb-btn{width:44px;height:44px;font-size:1.4rem}.lb-close{width:38px;height:38px;top:10px;right:10px;font-size:1.15rem}}
</style>
</head>
<body>
<div class="wrap">
<header class="hero">
<span class="deco d1"></span>
<span class="deco d2"></span>
<span class="deco d3"></span>
<div class="avatar-col">
<nav class="topnav" id="topNav">
<a class="brand" href="#top">✦ ${escapeHtml(name)}</a>
<div class="links">${nav}</div>
</nav>
<div class="wrap" id="top">
<header class="hero" id="overview">
<div class="hero-head">
${heroAvatar || '<div class="avatar aemp"><span>🎨</span></div>'}
<div>
<p class="kicker">✦ Портфолио ученика</p>
<p class="kicker">Портфолио ученика</p>
<h1>${escapeHtml(name)}</h1>
<p class="meta">${metaBits.join(' · ')}</p>
<div class="stats">
${statsChips.join('')}
</div>
</div>
</div>
<div class="cta-row">
${showFiles ? '<a class="btn btn-solid" href="#works">Смотреть работы</a>' : ''}
${showEntries ? '<a class="btn btn-line" href="#lessons">Хронология занятий</a>' : ''}
</div>
</header>
${nav}
<section id="overview-stats" class="sec">
<div class="sec-head"><h2>Обзор</h2></div>
<div class="counters">
${counters.join('')}
</div>
</section>
${showPhotos ? `<section id="photos" class="p-sec">
<h2><span class="sico">🏞️</span>Фотографии</h2>
${photoCards ? `<div class="grid">${photoCards}</div>` : '<p class="empty">🎈 Фотографий пока нет</p>'}
${showPhotos ? `<section id="photos" class="sec">
<div class="sec-head"><h2>Фотографии</h2><span class="count">[${photos.length}]</span></div>
${photoCards ? `<div class="grid">${photoCards}</div>` : '<p class="note">Фотографий пока нет.</p>'}
</section>` : ''}
${showFiles ? `<section id="files" class="f-sec">
<h2><span class="sico">📁</span>Работы и файлы</h2>
${fileRows ? `<ul class="filelist">${fileRows}</ul>` : '<p class="empty">🎈 Файлов пока нет</p>'}
${showFiles ? `<section id="works" class="sec">
<div class="sec-head"><h2>Проекты и работы</h2><span class="count">[${files.length}]</span></div>
${projectCards ? `<div class="projects">${projectCards}</div>` : '<p class="note">Работ пока нет.</p>'}
</section>` : ''}
${showEntries ? `<section id="lessons" class="l-sec">
<h2><span class="sico">🎒</span>Журнал занятий</h2>
${lessonRows ? `<div class="lessons">${lessonRows}</div>` : '<p class="empty">🎈 Записей о занятиях пока нет</p>'}
${showEntries ? `<section id="lessons" class="sec">
<div class="sec-head"><h2>Журнал занятий</h2><span class="count">[${entries.length}]</span></div>
${lessonRows ? `<div class="lessons">${lessonRows}</div>` : '<p class="note">Записей о занятиях пока нет.</p>'}
</section>` : ''}
<footer>Сформировано ${genLabel} · WhatIDo</footer>
<footer>
<span>Сформировано ${genLabel}</span>
<span>WhatIDo · Портфолио</span>
</footer>
</div>
<div class="lightbox" id="lightbox">
<button type="button" class="lb-btn lb-prev" id="lbPrev" aria-label="Назад">&#10094;</button>
@@ -2782,6 +2830,14 @@ footer{margin-top:44px;color:#B9B4BE;font-size:.82rem;text-align:center}
}
if (links.length) window.addEventListener('scroll', spy, { passive: true });
spy();
var toTop = document.getElementById('toTop');
function toTopSpy() {
if (window.scrollY > 420) toTop.classList.add('show');
else toTop.classList.remove('show');
}
toTop.addEventListener('click', function () { window.scrollTo({ top: 0, behavior: 'smooth' }); });
window.addEventListener('scroll', toTopSpy, { passive: true });
toTopSpy();
})();
</script>
</body>
@@ -4561,7 +4617,7 @@ app.delete('/api/trash', requireAuth, requireAdmin, async (req, res) => {
const ERROR_HTML = fs.readFileSync(path.join(__dirname, 'public', 'error.html'), 'utf8');
function isApiRoute(req) {
return req.path.startsWith('/api/') || req.path.startsWith('/s/');
return req.path.startsWith('/api/') || req.path.startsWith('/s/') || req.path.startsWith('/r/');
}
function escapeHtml(str) {