maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: страница-путеводитель /sitemap для новых учеников

Browse Source 
Интерактивная карта всех модулей платформы:
- Hero с анимированными blob-элементами и gradient-заголовком
- Sticky filter bar (Учёба / Практика / Игры / Личное)
- Маршрут новичка (Дашборд → Теория → Задания)
- 16 карточек модулей с accent-цветами по категориям
- Staggered entrance через IntersectionObserver
- Тёмная тема, мобильная адаптация
- Ссылка в sidebar.js

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-04-14 08:31:07 +03:00
parent c5ae7c2c36
commit bc2e3909bb
2 changed files with 757 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/sitemap.html
+756
View File
@@ -0,0 +1,756 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Путеводитель — LearnSpace</title>
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/css/ls.css" />
<script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
<style>
/* ── Dark theme overrides ── */
body {
background: #0b0920;
background-image: radial-gradient(circle, rgba(155,93,229,0.07) 1px, transparent 1px);
background-size: 24px 24px;
color: #fff;
}
.app-layout > .sidebar {
background: rgba(11,9,32,0.97) !important;
border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.app-layout > .sidebar .sb-logo,
.app-layout > .sidebar .sb-lbl { color: rgba(255,255,255,0.9) !important; }
.app-layout > .sidebar .sb-link { color: rgba(255,255,255,0.45) !important; }
.app-layout > .sidebar .sb-link:hover { background: rgba(155,93,229,0.1) !important; color: #fff !important; }
.app-layout > .sidebar .sb-link.active { background: rgba(155,93,229,0.16) !important; color: #9B5DE5 !important; }
.app-layout > .sidebar .sb-avatar { background: linear-gradient(135deg,#9B5DE5,#06D6E0) !important; }
.app-layout > .sidebar .sb-user-name { color: rgba(255,255,255,0.9) !important; }
.app-layout > .sidebar .sb-logout { color: rgba(255,255,255,0.35) !important; }
.app-layout > .sidebar .sb-divider { border-color: rgba(255,255,255,0.07) !important; }
.sb-content { background: transparent !important; }
/* ── Hero ── */
.sm-hero {
position: relative;
min-height: 52vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: 80px 32px 60px;
overflow: hidden;
}
.sm-hero::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(155,93,229,0.18) 0%, transparent 70%);
pointer-events: none;
}
.sm-blob {
position: absolute; border-radius: 50%;
pointer-events: none; animation: blobFloat 9s ease-in-out infinite;
}
.sm-blob-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(155,93,229,0.22), transparent 65%); top: -220px; right: -150px; animation-delay: 0s; }
.sm-blob-2 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(6,214,224,0.14), transparent 65%); bottom: -160px; left: 5%; animation-delay: -3.5s; }
.sm-blob-3 { width: 260px; height: 260px; background: radial-gradient(circle, rgba(241,91,181,0.12), transparent 65%); top: 30%; left: -90px; animation-delay: -6s; }
@keyframes blobFloat {
0%,100% { transform: translate(0,0) scale(1); }
33% { transform: translate(18px,-28px) scale(1.04); }
66% { transform: translate(-12px,18px) scale(0.97); }
}
.sm-hero-content { position: relative; z-index: 1; max-width: 680px; }
.sm-hero-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(155,93,229,0.14);
border: 1px solid rgba(155,93,229,0.35);
color: #c084fc;
font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 5px 14px; border-radius: 99px;
margin-bottom: 24px;
animation: fadeUp 0.5s ease both;
}
.sm-hero-title {
font-family: 'Unbounded', sans-serif;
font-size: clamp(1.7rem, 4vw, 2.8rem);
font-weight: 800; line-height: 1.22;
color: #fff; margin-bottom: 18px;
animation: fadeUp 0.5s 0.1s ease both;
}
.sm-hero-title span {
background: linear-gradient(135deg, #06D6E0, #9B5DE5, #F15BB5);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.sm-hero-sub {
font-size: 1.05rem; color: rgba(255,255,255,0.52);
line-height: 1.65; margin-bottom: 32px;
animation: fadeUp 0.5s 0.2s ease both;
}
.sm-hero-chips {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
animation: fadeUp 0.5s 0.3s ease both;
}
.sm-hero-chip {
display: flex; align-items: center; gap: 7px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.6);
font-size: 0.78rem; font-weight: 600;
padding: 7px 16px; border-radius: 99px;
}
.sm-hero-chip svg { width: 14px; height: 14px; }
.sm-scroll-hint {
position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 6px;
color: rgba(255,255,255,0.25); font-size: 0.68rem; letter-spacing: 0.08em;
cursor: pointer; transition: color 0.2s;
animation: fadeUp 0.5s 0.5s ease both;
}
.sm-scroll-hint:hover { color: rgba(255,255,255,0.5); }
.sm-scroll-line {
width: 1.5px; height: 36px;
background: linear-gradient(to bottom, rgba(155,93,229,0.6), transparent);
animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
0%,100% { opacity: 0.4; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(0.7); }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Filter bar ── */
.sm-filter-bar {
position: sticky; top: 0; z-index: 80;
background: rgba(11,9,32,0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 12px 40px;
}
.sm-filter-inner {
display: flex; align-items: center; gap: 8px;
max-width: 1200px; margin: 0 auto;
overflow-x: auto; scrollbar-width: none;
}
.sm-filter-inner::-webkit-scrollbar { display: none; }
.sm-filter-label {
font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; color: rgba(255,255,255,0.25);
white-space: nowrap; margin-right: 4px; flex-shrink: 0;
}
.sm-filter {
display: flex; align-items: center; gap: 7px;
background: rgba(255,255,255,0.04);
border: 1.5px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.5);
font-family: 'Manrope', sans-serif;
font-size: 0.8rem; font-weight: 600;
padding: 6px 16px; border-radius: 99px;
cursor: pointer; white-space: nowrap;
transition: all 0.18s; flex-shrink: 0;
}
.sm-filter:hover {
border-color: rgba(255,255,255,0.2);
color: rgba(255,255,255,0.8);
}
.sm-filter.active {
background: rgba(155,93,229,0.15);
border-color: rgba(155,93,229,0.4);
color: #c084fc;
box-shadow: 0 0 14px rgba(155,93,229,0.2);
}
.sm-filter[data-cat="study"].active { background: rgba(155,93,229,0.12); border-color: rgba(155,93,229,0.45); color: #c084fc; box-shadow: 0 0 14px rgba(155,93,229,0.2); }
.sm-filter[data-cat="practice"].active { background: rgba(6,214,224,0.1); border-color: rgba(6,214,224,0.4); color: #06D6E0; box-shadow: 0 0 14px rgba(6,214,224,0.15); }
.sm-filter[data-cat="games"].active { background: rgba(241,91,181,0.1); border-color: rgba(241,91,181,0.4); color: #F15BB5; box-shadow: 0 0 14px rgba(241,91,181,0.15); }
.sm-filter[data-cat="personal"].active { background: rgba(255,179,71,0.1); border-color: rgba(255,179,71,0.4); color: #FFB347; box-shadow: 0 0 14px rgba(255,179,71,0.15); }
.sm-filter-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* ── Main content ── */
.sm-main { max-width: 1200px; margin: 0 auto; padding: 48px 40px 80px; }
/* ── Category section ── */
.sm-category { margin-bottom: 56px; }
.sm-category.hidden { display: none; }
.sm-cat-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 24px;
}
.sm-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sm-cat-title {
font-family: 'Unbounded', sans-serif;
font-size: 0.88rem; font-weight: 800;
color: rgba(255,255,255,0.9);
text-transform: uppercase; letter-spacing: 0.06em;
}
.sm-cat-count {
font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
padding: 2px 10px; border-radius: 99px;
}
/* ── Cards grid ── */
.sm-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 16px;
}
/* ── Card ── */
.sm-card {
position: relative;
display: flex; flex-direction: column;
background: rgba(255,255,255,0.03);
border: 1.5px solid rgba(255,255,255,0.07);
border-radius: 20px;
padding: 24px 22px 20px;
text-decoration: none; color: inherit;
transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s, background 0.22s;
overflow: hidden;
opacity: 0; transform: translateY(18px);
}
.sm-card.visible {
animation: cardIn 0.42s ease forwards;
}
@keyframes cardIn {
to { opacity: 1; transform: translateY(0); }
}
.sm-card::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(var(--card-rgb),0.06), transparent 60%);
opacity: 0; transition: opacity 0.22s; border-radius: inherit;
pointer-events: none;
}
.sm-card:hover {
transform: translateY(-4px);
border-color: rgba(var(--card-rgb), 0.45);
box-shadow: 0 8px 32px rgba(var(--card-rgb), 0.14), 0 2px 8px rgba(0,0,0,0.3);
}
.sm-card:hover::before { opacity: 1; }
/* card accent colors via CSS var */
.sm-card[data-cat="study"] { --card-rgb: 155,93,229; }
.sm-card[data-cat="practice"] { --card-rgb: 6,214,224; }
.sm-card[data-cat="games"] { --card-rgb: 241,91,181; }
.sm-card[data-cat="personal"] { --card-rgb: 255,179,71; }
/* badge "Начни здесь" */
.sm-card-start {
position: absolute; top: 16px; right: 16px;
display: inline-flex; align-items: center; gap: 5px;
background: rgba(6,214,100,0.12);
border: 1px solid rgba(6,214,100,0.3);
color: #06D664; font-size: 0.64rem; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 3px 10px; border-radius: 99px;
animation: startPulse 2s ease-in-out infinite;
}
.sm-card-start::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: #06D664;
}
@keyframes startPulse {
0%,100% { opacity: 1; }
50% { opacity: 0.6; }
}
.sm-card-step {
position: absolute; top: 16px; right: 16px;
width: 26px; height: 26px; border-radius: 50%;
background: rgba(var(--card-rgb), 0.15);
border: 1.5px solid rgba(var(--card-rgb), 0.35);
color: rgb(var(--card-rgb));
font-family: 'Unbounded', sans-serif;
font-size: 0.7rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
.sm-card-icon {
width: 52px; height: 52px; border-radius: 14px;
background: rgba(var(--card-rgb), 0.12);
border: 1px solid rgba(var(--card-rgb), 0.2);
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px; flex-shrink: 0;
transition: transform 0.22s, box-shadow 0.22s;
}
.sm-card:hover .sm-card-icon {
transform: scale(1.08);
box-shadow: 0 0 18px rgba(var(--card-rgb), 0.25);
}
.sm-card-icon svg {
width: 24px; height: 24px;
color: rgb(var(--card-rgb));
stroke: rgb(var(--card-rgb));
}
.sm-card-title {
font-family: 'Unbounded', sans-serif;
font-size: 0.88rem; font-weight: 800;
color: #fff; margin-bottom: 8px;
}
.sm-card-desc {
font-size: 0.8rem; color: rgba(255,255,255,0.45);
line-height: 1.6; flex: 1;
}
.sm-card-footer {
display: flex; align-items: center; justify-content: space-between;
margin-top: 18px; padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.sm-card-tag {
font-size: 0.64rem; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(var(--card-rgb), 0.7);
}
.sm-card-arrow svg {
width: 16px; height: 16px;
color: rgba(255,255,255,0.25);
transition: transform 0.18s, color 0.18s;
}
.sm-card:hover .sm-card-arrow svg {
transform: translateX(4px);
color: rgb(var(--card-rgb));
}
/* ── Start path banner ── */
.sm-start-path {
max-width: 1200px; margin: 0 auto 48px; padding: 0 40px;
}
.sm-path-inner {
background: linear-gradient(135deg, rgba(155,93,229,0.1), rgba(6,214,224,0.06));
border: 1.5px solid rgba(155,93,229,0.25);
border-radius: 20px;
padding: 24px 28px;
display: flex; align-items: center; gap: 20px;
}
.sm-path-icon {
width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
background: rgba(155,93,229,0.15);
display: flex; align-items: center; justify-content: center;
}
.sm-path-icon svg { width: 22px; height: 22px; color: #9B5DE5; stroke: #9B5DE5; }
.sm-path-body { flex: 1; }
.sm-path-title {
font-family: 'Unbounded', sans-serif;
font-size: 0.82rem; font-weight: 800; color: #fff; margin-bottom: 4px;
}
.sm-path-sub { font-size: 0.78rem; color: rgba(255,255,255,0.45); }
.sm-path-steps {
display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.sm-path-step {
display: flex; align-items: center; gap: 6px;
font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.5);
text-decoration: none; transition: color 0.18s;
}
.sm-path-step:hover { color: #fff; }
.sm-path-step-num {
width: 22px; height: 22px; border-radius: 50%;
background: rgba(155,93,229,0.2); border: 1px solid rgba(155,93,229,0.4);
color: #9B5DE5; font-family: 'Unbounded', sans-serif;
font-size: 0.62rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
.sm-path-sep { color: rgba(255,255,255,0.15); font-size: 0.7rem; }
/* ── Footer ── */
.sm-footer {
text-align: center; padding: 0 40px 60px;
font-size: 0.82rem; color: rgba(255,255,255,0.3);
}
.sm-footer a { color: #9B5DE5; text-decoration: none; }
.sm-footer a:hover { text-decoration: underline; }
/* ── Mobile ── */
@media (max-width: 768px) {
.sm-hero { padding: 60px 20px 48px; min-height: 44vh; }
.sm-blob-1, .sm-blob-2, .sm-blob-3 { opacity: 0.5; }
.sm-filter-bar { padding: 10px 16px; }
.sm-main { padding: 32px 16px 60px; }
.sm-grid { grid-template-columns: 1fr; }
.sm-start-path { padding: 0 16px; }
.sm-path-inner { flex-direction: column; gap: 14px; }
.sm-path-steps { flex-wrap: wrap; }
.sm-footer { padding: 0 16px 40px; }
}
@media (max-width: 480px) {
.sm-hero-title { font-size: 1.5rem; }
.sm-hero-chips { gap: 6px; }
.sm-hero-chip { font-size: 0.72rem; padding: 5px 12px; }
}
</style>
</head>
<body>
<div class="app-layout">
<aside class="sidebar" id="app-sidebar"></aside>
<div class="notif-drop" id="notif-drop"></div>
<div class="sb-content">
<!-- HERO -->
<section class="sm-hero" id="sm-hero">
<div class="sm-blob sm-blob-1"></div>
<div class="sm-blob sm-blob-2"></div>
<div class="sm-blob sm-blob-3"></div>
<div class="sm-hero-content">
<div class="sm-hero-badge">
<i data-lucide="map" style="width:13px;height:13px"></i>
Путеводитель
</div>
<h1 class="sm-hero-title">
Добро пожаловать в<br><span>LearnSpace</span>
</h1>
<p class="sm-hero-sub">
Твоя платформа для учёбы, практики и открытий.<br>
Выбери модуль — и начни исследовать.
</p>
<div class="sm-hero-chips">
<span class="sm-hero-chip"><i data-lucide="layout-grid"></i> 15 модулей</span>
<span class="sm-hero-chip"><i data-lucide="atom"></i> 30+ симуляций</span>
<span class="sm-hero-chip"><i data-lucide="zap"></i> XP и уровни</span>
<span class="sm-hero-chip"><i data-lucide="users"></i> Классы</span>
</div>
</div>
<div class="sm-scroll-hint" onclick="document.getElementById('sm-filter-bar').scrollIntoView({behavior:'smooth'})">
<div class="sm-scroll-line"></div>
<span>Прокрути вниз</span>
</div>
</section>
<!-- FILTER BAR -->
<div class="sm-filter-bar" id="sm-filter-bar">
<div class="sm-filter-inner">
<span class="sm-filter-label">Разделы:</span>
<button class="sm-filter active" data-cat="all">Все</button>
<button class="sm-filter" data-cat="study">
<span class="sm-filter-dot" style="background:#9B5DE5"></span>Учёба
</button>
<button class="sm-filter" data-cat="practice">
<span class="sm-filter-dot" style="background:#06D6E0"></span>Практика
</button>
<button class="sm-filter" data-cat="games">
<span class="sm-filter-dot" style="background:#F15BB5"></span>Игры
</button>
<button class="sm-filter" data-cat="personal">
<span class="sm-filter-dot" style="background:#FFB347"></span>Личное
</button>
</div>
</div>
<!-- START PATH BANNER -->
<div class="sm-start-path" id="sm-start-path">
<div class="sm-path-inner">
<div class="sm-path-icon"><i data-lucide="rocket"></i></div>
<div class="sm-path-body">
<div class="sm-path-title">Маршрут новичка</div>
<div class="sm-path-sub">Рекомендуем начать с этих трёх шагов</div>
</div>
<div class="sm-path-steps">
<a href="/dashboard" class="sm-path-step">
<span class="sm-path-step-num">1</span> Дашборд
</a>
<span class="sm-path-sep">→</span>
<a href="/theory" class="sm-path-step">
<span class="sm-path-step-num">2</span> Теория
</a>
<span class="sm-path-sep">→</span>
<a href="/homework" class="sm-path-step">
<span class="sm-path-step-num">3</span> Задания
</a>
</div>
</div>
</div>
<!-- MODULES -->
<div class="sm-main">
<!-- УЧЁБА -->
<section class="sm-category" data-cat="study" id="cat-study">
<div class="sm-cat-header">
<span class="sm-cat-dot" style="background:#9B5DE5"></span>
<h2 class="sm-cat-title">Учёба</h2>
<span class="sm-cat-count">6 модулей</span>
</div>
<div class="sm-grid">
<a href="/dashboard" class="sm-card" data-cat="study">
<div class="sm-card-start">Начни здесь</div>
<div class="sm-card-icon"><i data-lucide="home"></i></div>
<div class="sm-card-title">Дашборд</div>
<p class="sm-card-desc">Твой центр управления: текущие задания, личный прогресс, XP, уровни и стрики</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Главная</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
<a href="/theory" class="sm-card" data-cat="study">
<div class="sm-card-step">2</div>
<div class="sm-card-icon"><i data-lucide="brain"></i></div>
<div class="sm-card-title">Теория</div>
<p class="sm-card-desc">Уроки с текстом, формулами, медиа и мини-тестами. Читай, изучай, проверяй себя</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Уроки</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
<a href="/homework" class="sm-card" data-cat="study">
<div class="sm-card-step">3</div>
<div class="sm-card-icon"><i data-lucide="clipboard-check"></i></div>
<div class="sm-card-title">Задания</div>
<p class="sm-card-desc">Домашние работы и тесты с дедлайнами. Следи за сроками и сдавай вовремя</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Домашка</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
<a href="/library" class="sm-card" data-cat="study">
<div class="sm-card-icon"><i data-lucide="book-open"></i></div>
<div class="sm-card-title">Библиотека</div>
<p class="sm-card-desc">Файлы и материалы от учителя: конспекты, презентации, документы по предметам</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Файлы</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
<a href="/flashcards" class="sm-card" data-cat="study">
<div class="sm-card-icon"><i data-lucide="copy"></i></div>
<div class="sm-card-title">Карточки</div>
<p class="sm-card-desc">Умные флэшкарты с интервальным повторением. Запоминай термины и факты эффективно</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Повторение</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
<a href="/knowledge-map" class="sm-card" data-cat="study">
<div class="sm-card-icon"><i data-lucide="share-2"></i></div>
<div class="sm-card-title">Карта знаний</div>
<p class="sm-card-desc">Интерактивный граф связей между темами. Увидь картину целиком и найди пробелы</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Граф</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
</div>
</section>
<!-- ПРАКТИКА -->
<section class="sm-category" data-cat="practice" id="cat-practice">
<div class="sm-cat-header">
<span class="sm-cat-dot" style="background:#06D6E0"></span>
<h2 class="sm-cat-title">Практика</h2>
<span class="sm-cat-count">4 модуля</span>
</div>
<div class="sm-grid">
<a href="/lab" class="sm-card" data-cat="practice">
<div class="sm-card-icon"><i data-lucide="atom"></i></div>
<div class="sm-card-title">Лаборатория</div>
<p class="sm-card-desc">30+ интерактивных симуляций по физике, химии и биологии. Ставь опыты прямо в браузере</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Симуляции</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
<a href="/biochem" class="sm-card" data-cat="practice">
<div class="sm-card-icon"><i data-lucide="flask-conical"></i></div>
<div class="sm-card-title">Биохимия</div>
<p class="sm-card-desc">Молекулы, реакции, метаболические пути и задачи-челленджи. Интерактивная химия жизни</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Химия</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
<a href="/classroom" class="sm-card" data-cat="practice">
<div class="sm-card-icon"><i data-lucide="presentation"></i></div>
<div class="sm-card-title">Онлайн-урок</div>
<p class="sm-card-desc">Живой урок с учителем: интерактивная доска, чат, видеосвязь и совместная работа</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Live</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
<a href="/board" class="sm-card" data-cat="practice">
<div class="sm-card-icon"><i data-lucide="layout-dashboard"></i></div>
<div class="sm-card-title">Доска</div>
<p class="sm-card-desc">Свободная интерактивная доска для рисования, заметок, схем и формул в любое время</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Рисование</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
</div>
</section>
<!-- ИГРЫ -->
<section class="sm-category" data-cat="games" id="cat-games">
<div class="sm-cat-header">
<span class="sm-cat-dot" style="background:#F15BB5"></span>
<h2 class="sm-cat-title">Игры</h2>
<span class="sm-cat-count">4 модуля</span>
</div>
<div class="sm-grid">
<a href="/hangman" class="sm-card" data-cat="games">
<div class="sm-card-icon"><i data-lucide="gamepad-2"></i></div>
<div class="sm-card-title">Виселица</div>
<p class="sm-card-desc">Угадывай учебные термины и понятия. Весёлый способ проверить знания по предмету</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Слова</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
<a href="/crossword" class="sm-card" data-cat="games">
<div class="sm-card-icon"><i data-lucide="grid-3x3"></i></div>
<div class="sm-card-title">Кроссворд</div>
<p class="sm-card-desc">Решай кроссворды по темам школьной программы — биология, химия, физика и другие</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Кроссворд</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
<a href="/red-book" class="sm-card" data-cat="games">
<div class="sm-card-icon"><i data-lucide="leaf"></i></div>
<div class="sm-card-title">Красная книга</div>
<p class="sm-card-desc">Каталог редких видов, биомы, пищевые сети, экосистемы и эко-игры. Изучай природу</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Экология</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
<a href="/collection" class="sm-card" data-cat="games">
<div class="sm-card-icon"><i data-lucide="layers"></i></div>
<div class="sm-card-title">Коллекция</div>
<p class="sm-card-desc">Собирай предметы, открывай новые виды и пополняй свою личную коллекцию знаний</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Сбор</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
</div>
</section>
<!-- ЛИЧНОЕ -->
<section class="sm-category" data-cat="personal" id="cat-personal">
<div class="sm-cat-header">
<span class="sm-cat-dot" style="background:#FFB347"></span>
<h2 class="sm-cat-title">Личное</h2>
<span class="sm-cat-count">2 модуля</span>
</div>
<div class="sm-grid">
<a href="/pet" class="sm-card" data-cat="personal">
<div class="sm-card-icon"><i data-lucide="heart"></i></div>
<div class="sm-card-title">Питомец</div>
<p class="sm-card-desc">Виртуальный питомец, который растёт вместе с тобой. Учись — он становится сильнее</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Питомец</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
<a href="/profile" class="sm-card" data-cat="personal">
<div class="sm-card-icon"><i data-lucide="user"></i></div>
<div class="sm-card-title">Профиль</div>
<p class="sm-card-desc">Аватар, достижения, история прогресса, рамки, настройки аккаунта и персонализация</p>
<div class="sm-card-footer">
<span class="sm-card-tag">Аккаунт</span>
<span class="sm-card-arrow"><i data-lucide="arrow-right"></i></span>
</div>
</a>
</div>
</section>
</div><!-- .sm-main -->
<div class="sm-footer">
Не знаешь, с чего начать? Перейди на <a href="/dashboard">Дашборд</a> — там уже ждут твои задания.
</div>
</div><!-- .sb-content -->
</div><!-- .app-layout -->
<script src="/js/api.js"></script>
<script src="/js/sidebar.js"></script>
<script src="/js/notifications.js"></script>
<script src="/js/search.js"></script>
<script src="/js/mobile.js"></script>
<script>
LS.initPage();
lucide.createIcons();
/* ── Filter ── */
const filters = document.querySelectorAll('.sm-filter');
const cats = document.querySelectorAll('.sm-category');
const banner = document.getElementById('sm-start-path');
filters.forEach(btn => {
btn.addEventListener('click', () => {
filters.forEach(f => f.classList.remove('active'));
btn.classList.add('active');
const cat = btn.dataset.cat;
cats.forEach(sec => {
if (cat === 'all' || sec.dataset.cat === cat) {
sec.classList.remove('hidden');
} else {
sec.classList.add('hidden');
}
});
// hide start path banner when filtering
banner.style.display = cat === 'all' ? '' : 'none';
});
});
/* ── Staggered entrance via IntersectionObserver ── */
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const card = entry.target;
const cards = Array.from(card.closest('.sm-grid')?.children || []);
const idx = cards.indexOf(card);
card.style.animationDelay = (idx * 55) + 'ms';
card.classList.add('visible');
observer.unobserve(card);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.sm-card').forEach(card => observer.observe(card));
</script>
</body>
</html>
js/sidebar.js
+1
View File
@@ -48,6 +48,7 @@
<nav class="sb-nav">
<button class="sb-link" onclick="typeof lsSearchOpen!=='undefined'&&lsSearchOpen()" title="Ctrl+K"><i data-lucide="search" class="sb-icon"></i><span class="sb-lbl">Поиск</span></button>
${L('/dashboard', 'home', 'Дашборд')}
${L('/sitemap', 'map', 'Путеводитель')}
${L('/board', 'layout-dashboard', 'Доска', { id: 'btn-board', hidden: true })}
${L('/classes', 'graduation-cap', 'Классы', { id: 'btn-classes', hidden: !isTch })}
${L('/library', 'book-open', 'Библиотека')}