Inject precise css styling and fonts into Unfold admin

This commit is contained in:
Dmitry Belan
2026-09-21 10:59:42 +03:00
parent 94a72309c9
commit 94678c2f10
19 changed files with 3448 additions and 0 deletions
+352
View File
@@ -0,0 +1,352 @@
<!DOCTYPE html>
<html class="dark h-full" lang="ru"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>ЕГЭ LMS — Мои задания</title>
<!-- Google Fonts: Space Grotesk, Plus Jakarta Sans, JetBrains Mono -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;family=Plus+Jakarta+Sans:wght@400;500;600;700&amp;family=Space+Grotesk:wght@500;600;700&amp;display=swap" rel="stylesheet"/>
<!-- Tailwind CSS v3 with forms and container-queries -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
obsidian: {
base: '#11131b',
deep: '#0c0e16',
card: '#191b23',
border: '#2e313c',
borderLight: '#3b3f4d',
},
accent: {
blue: '#2563eb',
blueHover: '#1d4ed8',
blueSubtle: 'rgba(37, 99, 235, 0.12)',
blueBorder: '#3b82f6',
},
status: {
emerald: '#10b981',
emeraldBg: 'rgba(16, 185, 129, 0.12)',
amber: '#f59e0b',
amberBg: 'rgba(245, 158, 11, 0.12)',
rose: '#ef4444',
roseBg: 'rgba(239, 68, 68, 0.12)',
},
txt: {
primary: '#f1f5f9',
secondary: '#cbd5e1',
muted: '#94a3b8',
faint: '#64748b'
}
},
fontFamily: {
sans: ['"Space Grotesk"', 'sans-serif'],
body: ['"Plus Jakarta Sans"', 'sans-serif'],
mono: ['"JetBrains Mono"', 'monospace'],
}
}
}
}
</script>
<style>
body {
background-color: #11131b;
color: #f1f5f9;
font-family: "Plus Jakarta Sans", sans-serif;
}
h1, h2, h3, nav button, .font-heading {
font-family: "Space Grotesk", sans-serif;
}
.font-technical {
font-family: "JetBrains Mono", monospace;
}
</style>
</head>
<body class="min-h-full flex flex-col antialiased selection:bg-accent-blue selection:text-white bg-obsidian-base text-txt-primary">
<!-- BEGIN: MainHeader -->
<header class="sticky top-0 z-50 w-full border-b border-obsidian-border bg-obsidian-deep/95 backdrop-blur-md" data-purpose="site-navigation-header">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<!-- Brand Identity Logo & Name -->
<div class="flex items-center space-x-3">
<div class="w-8 h-8 rounded bg-accent-blue flex items-center justify-center text-white">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 14l9-5-9-5-9 5 9 5z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</div>
<span class="text-lg font-bold tracking-tight text-white flex items-center gap-1.5 font-heading">
ЕГЭ <span class="text-accent-blue font-bold tracking-tight">LMS</span>
</span>
</div>
<!-- User Navigation & Controls -->
<div class="flex items-center space-x-3 sm:space-x-6">
<!-- Admin Panel Link -->
<a class="text-xs sm:text-sm font-medium text-txt-muted hover:text-white transition-colors duration-150 flex items-center gap-1.5 py-1 px-2 rounded hover:bg-obsidian-card font-heading" data-purpose="admin-link" href="#admin">
<svg class="w-4 h-4 text-txt-muted" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
<span class="hidden sm:inline">Админ-панель</span>
</a>
<!-- User Profile Pill -->
<div class="flex items-center space-x-2 pl-3 border-l border-obsidian-border" data-purpose="user-greeting">
<div class="w-6 h-6 rounded bg-obsidian-border text-txt-secondary flex items-center justify-center font-bold text-xs font-mono">
D
</div>
<span class="text-xs sm:text-sm text-txt-muted">
Привет, <strong class="text-txt-primary font-semibold font-heading">Dimong</strong>
</span>
</div>
<!-- Logout Action Button -->
<a class="text-xs sm:text-sm font-medium text-rose-400 hover:text-rose-300 transition-colors duration-150 flex items-center gap-1 py-1 px-2 rounded hover:bg-rose-950/20 font-heading" data-purpose="logout-link" href="#logout">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
<span class="hidden sm:inline">Выйти</span>
</a>
</div>
</div>
</header>
<!-- END: MainHeader -->
<!-- BEGIN: MainContent -->
<main class="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-10" data-purpose="tasks-container">
<!-- Header Section with Title and Description -->
<div class="mb-7" data-purpose="page-title-block">
<h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight font-heading">Мои задания</h1>
<p class="mt-1.5 text-sm text-txt-secondary max-w-2xl font-body">Список всех доступных заданий для выполнения.</p>
</div>
<!-- Filter Tabs (Technical, flat, zero fluff) -->
<div class="border-b border-obsidian-border mb-8 overflow-x-auto pb-px" data-purpose="task-filter-tabs">
<nav aria-label="Tabs" class="flex space-x-2 sm:space-x-3 min-w-max">
<button class="border-b-2 border-accent-blue text-white pb-3 pt-1 px-2.5 text-xs sm:text-sm font-medium flex items-center gap-2 font-heading" type="button">
<span>Все задания</span>
<span class="bg-obsidian-card text-txt-secondary font-mono text-[11px] px-2 py-0.5 rounded border border-obsidian-border">3</span>
</button>
<button class="border-b-2 border-transparent text-txt-muted hover:text-white pb-3 pt-1 px-2.5 text-xs sm:text-sm font-medium flex items-center gap-2 transition-colors font-heading" type="button">
<span>Ожидают решения</span>
<span class="bg-obsidian-card text-txt-muted font-mono text-[11px] px-2 py-0.5 rounded border border-obsidian-border">1</span>
</button>
<button class="border-b-2 border-transparent text-txt-muted hover:text-white pb-3 pt-1 px-2.5 text-xs sm:text-sm font-medium flex items-center gap-2 transition-colors font-heading" type="button">
<span>Ожидает проверки</span>
<span class="bg-amber-950/40 text-amber-300 font-mono text-[11px] px-2 py-0.5 rounded border border-amber-800/40">1</span>
</button>
<button class="border-b-2 border-transparent text-txt-muted hover:text-white pb-3 pt-1 px-2.5 text-xs sm:text-sm font-medium flex items-center gap-2 transition-colors font-heading" type="button">
<span>Проверено</span>
<span class="bg-emerald-950/40 text-emerald-300 font-mono text-[11px] px-2 py-0.5 rounded border border-emerald-800/40">1</span>
</button>
</nav>
</div>
<!-- Task Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5" data-purpose="task-cards-grid">
<!-- CARD 1: Awaiting review -->
<article class="bg-obsidian-card rounded border border-obsidian-border hover:border-obsidian-borderLight p-6 flex flex-col justify-between transition-colors duration-150" data-purpose="task-card-awaiting-review">
<div>
<!-- Header Badges -->
<div class="flex items-center justify-between gap-2 mb-4">
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-mono uppercase tracking-wider bg-obsidian-base text-txt-secondary border border-obsidian-border">
Информатика
</span>
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-xs font-mono font-medium bg-amber-950/40 text-amber-300 border border-amber-800/50">
<span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
Ожидает проверки
</span>
</div>
<!-- Assignment Title -->
<h2 class="text-lg font-bold text-white tracking-tight leading-snug mb-3 font-heading">
Входной контроль по информатике
</h2>
<!-- Link to Materials -->
<div class="mb-5">
<a class="inline-flex items-center gap-2 text-xs font-mono text-txt-secondary hover:text-white bg-obsidian-base hover:bg-obsidian-border/50 px-2.5 py-1.5 rounded border border-obsidian-border max-w-full transition-colors truncate" href="https://disk.yandex.ru/d/QaJUQF1xQluUnQ" rel="noopener noreferrer" target="_blank">
<svg class="w-3.5 h-3.5 shrink-0 text-txt-muted" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
<span class="truncate">disk.yandex.ru/d/QaJUQF1xQluUnQ</span>
</a>
</div>
<!-- Task Metadata -->
<div class="space-y-2.5 text-xs text-txt-muted pt-3 border-t border-obsidian-border mb-6">
<div class="flex items-center justify-between">
<span class="flex items-center gap-1.5 text-txt-muted">
<svg class="w-3.5 h-3.5 text-txt-faint" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
Добавлено:
</span>
<span class="font-mono text-txt-secondary">19 Сен 2026</span>
</div>
<div class="flex items-center justify-between">
<span class="flex items-center gap-1.5 text-txt-muted">
<svg class="w-3.5 h-3.5 text-rose-400" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
Дедлайн:
</span>
<span class="font-mono font-medium text-rose-400">20 Сен 2026, 17:00</span>
</div>
<div class="flex items-center justify-between">
<span class="flex items-center gap-1.5 text-txt-muted">
<svg class="w-3.5 h-3.5 text-txt-faint" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
Время на решение:
</span>
<span class="font-mono text-txt-secondary">235 мин.</span>
</div>
</div>
</div>
<!-- Action Button -->
<a class="w-full inline-flex items-center justify-center text-center font-heading font-medium text-xs sm:text-sm bg-obsidian-border hover:bg-obsidian-borderLight active:bg-obsidian-border text-txt-primary py-2.5 px-4 rounded transition-colors duration-150" href="#view-solution">
Смотреть ответ
</a>
</article>
<!-- CARD 2: Active / Needs Solution -->
<article class="bg-obsidian-card rounded border border-obsidian-border hover:border-obsidian-borderLight p-6 flex flex-col justify-between transition-colors duration-150 relative" data-purpose="task-card-active">
<div>
<!-- Header Badges -->
<div class="flex items-center justify-between gap-2 mb-4">
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-mono uppercase tracking-wider bg-obsidian-base text-txt-secondary border border-obsidian-border">
Информатика
</span>
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-xs font-mono font-medium bg-rose-950/40 text-rose-400 border border-rose-800/50">
<span class="w-1.5 h-1.5 rounded-full bg-rose-400"></span>
Требует сдачи
</span>
</div>
<!-- Assignment Title -->
<h2 class="text-lg font-bold text-white tracking-tight leading-snug mb-3 font-heading">
Задание №2. Таблицы истинности и логические функции
</h2>
<!-- Link to Materials -->
<div class="mb-5">
<a class="inline-flex items-center gap-2 text-xs font-mono text-txt-secondary hover:text-white bg-obsidian-base hover:bg-obsidian-border/50 px-2.5 py-1.5 rounded border border-obsidian-border max-w-full transition-colors truncate" href="https://disk.yandex.ru" rel="noopener noreferrer" target="_blank">
<svg class="w-3.5 h-3.5 shrink-0 text-txt-muted" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
<span class="truncate">yadi.sk/d/assignment_logic_02.pdf</span>
</a>
</div>
<!-- Task Metadata -->
<div class="space-y-2.5 text-xs text-txt-muted pt-3 border-t border-obsidian-border mb-6">
<div class="flex items-center justify-between">
<span class="flex items-center gap-1.5 text-txt-muted">
<svg class="w-3.5 h-3.5 text-txt-faint" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
Добавлено:
</span>
<span class="font-mono text-txt-secondary">21 Сен 2026</span>
</div>
<div class="flex items-center justify-between">
<span class="flex items-center gap-1.5 text-txt-muted">
<svg class="w-3.5 h-3.5 text-amber-400" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
Дедлайн:
</span>
<span class="font-mono font-medium text-amber-300">24 Сен 2026, 23:59</span>
</div>
<div class="flex items-center justify-between">
<span class="flex items-center gap-1.5 text-txt-muted">
<svg class="w-3.5 h-3.5 text-txt-faint" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
Время на решение:
</span>
<span class="font-mono text-txt-secondary">120 мин.</span>
</div>
</div>
</div>
<!-- Action Button (Solid Cobalt Blue, No gradients) -->
<a class="w-full inline-flex items-center justify-center text-center font-heading font-medium text-xs sm:text-sm bg-accent-blue hover:bg-accent-blueHover active:bg-blue-800 text-white py-2.5 px-4 rounded transition-colors duration-150 shadow-sm" href="#start-solving">
Приступить к решению
</a>
</article>
<!-- CARD 3: Reviewed & Completed -->
<article class="bg-obsidian-card rounded border border-obsidian-border hover:border-obsidian-borderLight p-6 flex flex-col justify-between transition-colors duration-150" data-purpose="task-card-graded">
<div>
<!-- Header Badges -->
<div class="flex items-center justify-between gap-2 mb-4">
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-mono uppercase tracking-wider bg-obsidian-base text-txt-secondary border border-obsidian-border">
Информатика
</span>
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-xs font-mono font-medium bg-emerald-950/40 text-emerald-300 border border-emerald-800/50">
<svg class="w-3 h-3 text-emerald-400" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
Принято (94/100)
</span>
</div>
<!-- Assignment Title -->
<h2 class="text-lg font-bold text-white tracking-tight leading-snug mb-3 font-heading">
Задание №1. Анализ информационных моделей и графов
</h2>
<!-- Link to Materials -->
<div class="mb-5">
<a class="inline-flex items-center gap-2 text-xs font-mono text-txt-secondary hover:text-white bg-obsidian-base hover:bg-obsidian-border/50 px-2.5 py-1.5 rounded border border-obsidian-border max-w-full transition-colors truncate" href="https://disk.yandex.ru" rel="noopener noreferrer" target="_blank">
<svg class="w-3.5 h-3.5 shrink-0 text-txt-muted" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
<span class="truncate">Решение_Dimong_v1.pdf</span>
</a>
</div>
<!-- Task Metadata -->
<div class="space-y-2.5 text-xs text-txt-muted pt-3 border-t border-obsidian-border mb-6">
<div class="flex items-center justify-between">
<span class="flex items-center gap-1.5 text-txt-muted">
<svg class="w-3.5 h-3.5 text-emerald-500" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
Сдано:
</span>
<span class="font-mono text-txt-secondary">18 Сен 2026, 16:42</span>
</div>
<div class="flex items-center justify-between">
<span class="flex items-center gap-1.5 text-txt-muted">
<svg class="w-3.5 h-3.5 text-txt-faint" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
Проверка:
</span>
<span class="text-txt-secondary">Преподаватель</span>
</div>
<div class="flex items-center justify-between">
<span class="flex items-center gap-1.5 text-emerald-400">
<svg class="w-3.5 h-3.5 text-emerald-400 shrink-0" fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
Рецензия:
</span>
<span class="text-xs text-txt-secondary">Замечания и правки</span>
</div>
</div>
</div>
<!-- Action Button -->
<a class="w-full inline-flex items-center justify-center text-center font-heading font-medium text-xs sm:text-sm bg-obsidian-border hover:bg-obsidian-borderLight active:bg-obsidian-border text-txt-primary py-2.5 px-4 rounded transition-colors duration-150" href="#view-review">
Посмотреть рецензию
</a>
</article>
</div>
</main>
<!-- END: MainContent -->
<!-- BEGIN: MinimalFooter -->
<footer class="mt-auto border-t border-obsidian-border py-5 text-xs text-txt-muted bg-obsidian-deep/50" data-purpose="site-footer">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-3">
<div class="flex items-center gap-2">
<span class="font-mono text-txt-muted text-[11px]">© 2026 ЕГЭ LMS. Все права защищены.</span>
</div>
<div class="flex items-center space-x-6">
<span class="inline-flex items-center gap-1.5 text-[11px] font-mono text-txt-secondary">
<span class="w-1.5 h-1.5 rounded-full bg-status-emerald"></span>
Системы работают штатно
</span>
</div>
</div>
</footer>
<!-- END: MinimalFooter -->
</body></html>