feat: страница-путеводитель /sitemap для новых учеников
Интерактивная карта всех модулей платформы: - 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
@@ -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>
|
||||||
@@ -48,6 +48,7 @@
|
|||||||
<nav class="sb-nav">
|
<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>
|
<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('/dashboard', 'home', 'Дашборд')}
|
||||||
|
${L('/sitemap', 'map', 'Путеводитель')}
|
||||||
${L('/board', 'layout-dashboard', 'Доска', { id: 'btn-board', hidden: true })}
|
${L('/board', 'layout-dashboard', 'Доска', { id: 'btn-board', hidden: true })}
|
||||||
${L('/classes', 'graduation-cap', 'Классы', { id: 'btn-classes', hidden: !isTch })}
|
${L('/classes', 'graduation-cap', 'Классы', { id: 'btn-classes', hidden: !isTch })}
|
||||||
${L('/library', 'book-open', 'Библиотека')}
|
${L('/library', 'book-open', 'Библиотека')}
|
||||||
|
|||||||
Reference in New Issue
Block a user