maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
cf07fb901773732aad32f32e3be77334d53b766c
Learn_System/frontend/sitemap.html
T

713 lines
30 KiB
HTML
Raw Blame History

<!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>
.sb-content { background: var(--bg); }
/* ── Hero ── */
.sm-hero {
position: relative;
min-height: 48vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: 72px 32px 56px;
overflow: hidden;
background: linear-gradient(160deg, #f8f6ff 0%, #eef2ff 60%, #f0f9ff 100%);
border-bottom: 1px solid var(--border);
}
.sm-hero::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(15,23,42,0.045) 1px, transparent 1px);
background-size: 22px 22px;
pointer-events: none;
}
.sm-blob {
position: absolute; border-radius: 50%;
pointer-events: none; animation: blobFloat 9s ease-in-out infinite;
}
.sm-blob-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(155,93,229,0.12), transparent 65%); top: -180px; right: -120px; animation-delay: 0s; }
.sm-blob-2 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(6,214,224,0.09), transparent 65%); bottom: -140px; left: 5%; animation-delay: -3.5s; }
.sm-blob-3 { width: 220px; height: 220px; background: radial-gradient(circle, rgba(241,91,181,0.08), transparent 65%); top: 30%; left: -80px; 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.09);
border: 1px solid rgba(155,93,229,0.25);
color: #7c3aed;
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.6rem, 4vw, 2.6rem);
font-weight: 800; line-height: 1.22;
color: #0F172A; margin-bottom: 16px;
animation: fadeUp 0.5s 0.1s ease both;
}
.sm-hero-title span {
background: linear-gradient(135deg, #9B5DE5, #06D6E0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.sm-hero-sub {
font-size: 1rem; color: #5a6a8a;
line-height: 1.65; margin-bottom: 28px;
animation: fadeUp 0.5s 0.2s ease both;
}
.sm-hero-chips {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
animation: fadeUp 0.5s 0.3s ease both;
}
.sm-hero-chip {
display: flex; align-items: center; gap: 7px;
background: #fff;
border: 1.5px solid rgba(15,23,42,0.08);
color: #3D4F6B;
font-size: 0.78rem; font-weight: 600;
padding: 6px 14px; border-radius: 99px;
box-shadow: 0 1px 4px rgba(15,23,42,0.06);
}
.sm-hero-chip svg { width: 14px; height: 14px; }
.sm-scroll-hint {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 6px;
color: #8898AA; 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: #3D4F6B; }
.sm-scroll-line {
width: 1.5px; height: 32px;
background: linear-gradient(to bottom, rgba(155,93,229,0.5), transparent);
animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
0%,100% { opacity: 0.5; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(0.7); }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Filter bar ── */
.sm-filter-bar {
position: sticky; top: 0; z-index: 80;
background: rgba(238,242,255,0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
padding: 10px 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: #8898AA;
white-space: nowrap; margin-right: 4px; flex-shrink: 0;
}
.sm-filter {
display: flex; align-items: center; gap: 7px;
background: #fff;
border: 1.5px solid rgba(15,23,42,0.09);
color: #3D4F6B;
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;
box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
.sm-filter:hover { border-color: rgba(155,93,229,0.35); color: #0F172A; }
.sm-filter.active { background: #9B5DE5; border-color: #9B5DE5; color: #fff; box-shadow: 0 2px 10px rgba(155,93,229,0.3); }
.sm-filter[data-cat="study"].active { background: #9B5DE5; border-color: #9B5DE5; box-shadow: 0 2px 10px rgba(155,93,229,0.3); }
.sm-filter[data-cat="practice"].active { background: #0891b2; border-color: #0891b2; box-shadow: 0 2px 10px rgba(6,214,224,0.25); }
.sm-filter[data-cat="games"].active { background: #db2777; border-color: #db2777; box-shadow: 0 2px 10px rgba(241,91,181,0.25); }
.sm-filter[data-cat="personal"].active { background: #d97706; border-color: #d97706; box-shadow: 0 2px 10px rgba(255,179,71,0.25); }
.sm-filter-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* ── Main content ── */
.sm-main { max-width: 1200px; margin: 0 auto; padding: 44px 40px 80px; }
/* ── Category section ── */
.sm-category { margin-bottom: 52px; }
.sm-category.hidden { display: none; }
.sm-cat-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 20px;
}
.sm-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sm-cat-title {
font-family: 'Unbounded', sans-serif;
font-size: 0.82rem; font-weight: 800;
color: #0F172A;
text-transform: uppercase; letter-spacing: 0.06em;
}
.sm-cat-count {
font-size: 0.68rem; font-weight: 700; color: #8898AA;
background: rgba(15,23,42,0.05);
border: 1px solid rgba(15,23,42,0.08);
padding: 2px 10px; border-radius: 99px;
}
/* ── Cards grid ── */
.sm-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 14px;
}
/* ── Card ── */
.sm-card {
position: relative;
display: flex; flex-direction: column;
background: #fff;
border: 1.5px solid rgba(15,23,42,0.07);
border-radius: 20px;
padding: 22px 20px 18px;
text-decoration: none; color: inherit;
transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
overflow: hidden;
box-shadow: 0 2px 8px rgba(15,23,42,0.04);
opacity: 0; transform: translateY(16px);
}
.sm-card.visible { animation: cardIn 0.4s ease forwards; }
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }
.sm-card:hover {
transform: translateY(-3px);
border-color: rgba(var(--card-rgb), 0.35);
box-shadow: 0 8px 28px rgba(var(--card-rgb), 0.12), 0 2px 8px rgba(15,23,42,0.06);
}
.sm-card[data-cat="study"] { --card-rgb: 155,93,229; }
.sm-card[data-cat="practice"] { --card-rgb: 6,145,178; }
.sm-card[data-cat="games"] { --card-rgb: 219,39,119; }
.sm-card[data-cat="personal"] { --card-rgb: 217,119,6; }
.sm-card-start {
position: absolute; top: 14px; right: 14px;
display: inline-flex; align-items: center; gap: 5px;
background: rgba(5,150,105,0.1);
border: 1px solid rgba(5,150,105,0.3);
color: #059669; font-size: 0.62rem; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 3px 9px; border-radius: 99px;
animation: startPulse 2s ease-in-out infinite;
}
.sm-card-start::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: #059669;
}
@keyframes startPulse {
0%,100% { opacity: 1; }
50% { opacity: 0.6; }
}
.sm-card-step {
position: absolute; top: 14px; right: 14px;
width: 24px; height: 24px; border-radius: 50%;
background: rgba(var(--card-rgb), 0.1);
border: 1.5px solid rgba(var(--card-rgb), 0.3);
color: rgb(var(--card-rgb));
font-family: 'Unbounded', sans-serif;
font-size: 0.65rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
.sm-card-icon {
width: 48px; height: 48px; border-radius: 13px;
background: rgba(var(--card-rgb), 0.1);
border: 1px solid rgba(var(--card-rgb), 0.18);
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px; flex-shrink: 0;
transition: transform 0.22s, box-shadow 0.22s;
}
.sm-card:hover .sm-card-icon {
transform: scale(1.07);
box-shadow: 0 0 16px rgba(var(--card-rgb), 0.2);
}
.sm-card-icon svg { width: 22px; height: 22px; color: rgb(var(--card-rgb)); stroke: rgb(var(--card-rgb)); }
.sm-card-title {
font-family: 'Unbounded', sans-serif;
font-size: 0.84rem; font-weight: 800;
color: #0F172A; margin-bottom: 7px;
}
.sm-card-desc {
font-size: 0.79rem; color: #5a6a8a;
line-height: 1.6; flex: 1;
}
.sm-card-footer {
display: flex; align-items: center; justify-content: space-between;
margin-top: 16px; padding-top: 12px;
border-top: 1px solid rgba(15,23,42,0.06);
}
.sm-card-tag {
font-size: 0.62rem; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: rgb(var(--card-rgb));
}
.sm-card-arrow svg {
width: 15px; height: 15px;
color: #8898AA;
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 40px; padding: 0 40px; }
.sm-path-inner {
background: linear-gradient(135deg, rgba(155,93,229,0.06), rgba(6,214,224,0.04));
border: 1.5px solid rgba(155,93,229,0.18);
border-radius: 18px;
padding: 20px 24px;
display: flex; align-items: center; gap: 18px;
box-shadow: 0 2px 12px rgba(155,93,229,0.07);
}
.sm-path-icon {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
background: rgba(155,93,229,0.1);
display: flex; align-items: center; justify-content: center;
}
.sm-path-icon svg { width: 20px; height: 20px; color: #9B5DE5; stroke: #9B5DE5; }
.sm-path-body { flex: 1; }
.sm-path-title {
font-family: 'Unbounded', sans-serif;
font-size: 0.8rem; font-weight: 800; color: #0F172A; margin-bottom: 3px;
}
.sm-path-sub { font-size: 0.76rem; color: #5a6a8a; }
.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: #3D4F6B;
text-decoration: none; transition: color 0.18s;
}
.sm-path-step:hover { color: #9B5DE5; }
.sm-path-step-num {
width: 22px; height: 22px; border-radius: 50%;
background: rgba(155,93,229,0.12); border: 1.5px solid rgba(155,93,229,0.3);
color: #9B5DE5; font-family: 'Unbounded', sans-serif;
font-size: 0.6rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
.sm-path-sep { color: #8898AA; font-size: 0.7rem; }
/* ── Footer ── */
.sm-footer {
text-align: center; padding: 0 40px 60px;
font-size: 0.82rem; color: #8898AA;
}
.sm-footer a { color: #9B5DE5; text-decoration: none; }
.sm-footer a:hover { text-decoration: underline; }
/* ── Mobile ── */
@media (max-width: 768px) {
.sm-hero { padding: 56px 20px 44px; min-height: 40vh; }
.sm-filter-bar { padding: 10px 16px; }
.sm-main { padding: 28px 16px 56px; }
.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.45rem; }
.sm-hero-chips { gap: 6px; }
}
</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>
Reference in New Issue View Git Blame Copy Permalink