342 lines
30 KiB
HTML
342 lines
30 KiB
HTML
<!DOCTYPE html><html class="dark" lang="ru"><head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><meta content="web_dashboard" name="shell-type"><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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"><style>@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config={darkMode:"class",theme:{extend:{"colors":{"error":"#ffb4ab","on-primary-container":"#0d0096","secondary":"#4cd7f6","primary-fixed":"#e1e0ff","primary":"#c0c1ff","on-background":"#dce2f7","surface-container-lowest":"#070e1d","outline-variant":"#464554","surface-container-high":"#232a3a","surface-container-low":"#141b2b","on-secondary-fixed":"#001f26","on-secondary-fixed-variant":"#004e5c","surface-container-highest":"#2e3545","tertiary":"#4edea3","on-surface":"#dce2f7","on-secondary":"#003640","surface-container":"#191f2f","surface-dim":"#0c1322","on-error":"#690005","secondary-fixed-dim":"#4cd7f6","secondary-container":"#03b5d3","inverse-on-surface":"#293040","on-primary-fixed-variant":"#2f2ebe","surface-bright":"#323949","on-tertiary":"#003824","tertiary-fixed-dim":"#4edea3","on-tertiary-container":"#000703","surface":"#0c1322","inverse-surface":"#dce2f7","surface-tint":"#c0c1ff","on-surface-variant":"#c7c4d7","on-error-container":"#ffdad6","secondary-fixed":"#acedff","on-primary":"#1000a9","primary-fixed-dim":"#c0c1ff","on-tertiary-fixed-variant":"#005236","surface-variant":"#2e3545","on-secondary-container":"#00424e","inverse-primary":"#494bd6","error-container":"#93000a","tertiary-container":"#00885d","outline":"#908fa0","tertiary-fixed":"#6ffbbe","primary-container":"#8083ff","on-tertiary-fixed":"#002113","on-primary-fixed":"#07006c","background":"#0c1322"},"borderRadius":{"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"},"spacing":{"space-md":"1rem","gutter":"1.5rem","space-xl":"2rem","margin-sm":"1rem","space-lg":"1.5rem","space-xs":"0.25rem","gutter-sm":"1rem","margin":"2rem","space-sm":"0.5rem"},"fontFamily":{"label-sm":["Inter"],"body-lg":["Inter"],"label-lg":["Inter"],"body-sm":["Inter"],"headline-sm":["Inter"],"body-md":["Inter"],"display-lg-mobile":["Inter"],"headline-lg":["Inter"],"display-lg":["Inter"],"label-md":["Inter"],"headline-md":["Inter"]},"fontSize":{"label-sm":["11px",{"lineHeight":"14px","letterSpacing":"0.04em","fontWeight":"600"}],"body-lg":["16px",{"lineHeight":"26px","fontWeight":"400"}],"label-lg":["14px",{"lineHeight":"20px","fontWeight":"500"}],"body-sm":["12px",{"lineHeight":"18px","fontWeight":"400"}],"headline-sm":["18px",{"lineHeight":"26px","fontWeight":"600"}],"body-md":["14px",{"lineHeight":"22px","fontWeight":"400"}],"display-lg-mobile":["30px",{"lineHeight":"38px","letterSpacing":"-0.02em","fontWeight":"700"}],"headline-lg":["28px",{"lineHeight":"36px","letterSpacing":"-0.015em","fontWeight":"600"}],"display-lg":["40px",{"lineHeight":"48px","letterSpacing":"-0.02em","fontWeight":"700"}],"label-md":["12px",{"lineHeight":"16px","fontWeight":"500"}],"headline-md":["22px",{"lineHeight":"30px","letterSpacing":"-0.01em","fontWeight":"600"}]}}}}</script></head><body class="bg-background font-body-md text-body-md text-on-surface antialiased"><aside class="fixed left-0 top-0 h-full w-72 bg-surface-container-lowest z-50 flex flex-col justify-between shadow-[0_1px_8px_rgba(0,0,0,0.4)]"><div class="flex flex-col"><div class="h-16 px-space-lg flex items-center gap-space-sm bg-surface-container-low"><div class="w-9 h-9 rounded-lg bg-primary-container flex items-center justify-center text-on-primary-container font-headline-sm text-headline-sm"><span class="material-symbols-outlined text-[20px]">terminal</span></div><div class="flex flex-col"><span class="font-label-lg text-label-lg text-on-surface leading-tight">Администрирование</span><span class="font-label-sm text-label-sm text-on-surface-variant tracking-wider">DJANGO ЕГЭ LMS</span></div></div><div class="px-space-md py-space-sm"><div class="flex items-center justify-between px-space-sm py-space-xs rounded-lg bg-surface-container"><div class="flex items-center gap-space-sm"><span class="material-symbols-outlined text-[16px] text-tertiary">database</span><span class="font-label-sm text-label-sm text-on-surface-variant">Окружение: Prod</span></div><span class="font-label-sm text-label-sm text-tertiary bg-surface-container-high px-space-xs py-0.5 rounded">v5.1</span></div></div><nav class="flex flex-col px-space-sm gap-y-space-xs" data-active-classes="bg-surface-container-high text-primary font-label-lg"><div class="pt-space-sm pb-space-xs px-space-sm font-label-sm text-label-sm text-outline uppercase tracking-wider">Обучение (LMS)</div><a class="flex items-center justify-between px-space-md py-space-sm rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-all group" data-path="tasks-list" href="#"><div class="flex items-center gap-space-sm"><span class="material-symbols-outlined text-[18px] group-hover:text-primary transition-colors">assignment</span><span class="font-label-md text-label-md">Задания</span></div><span class="font-label-sm text-label-sm bg-surface-container-highest px-space-xs py-0.5 rounded text-on-surface-variant">482</span></a><a aria-current="page" class="flex items-center justify-between px-space-md py-space-sm rounded-lg transition-all group bg-surface-container-high text-primary font-label-lg" data-path="student-answers" href="#"><div class="flex items-center gap-space-sm"><span class="material-symbols-outlined text-[18px] group-hover:text-secondary transition-colors">rate_review</span><span class="font-label-md text-label-md">Ответы учеников</span></div><span class="font-label-sm text-label-sm bg-secondary-container text-on-secondary px-space-xs py-0.5 rounded font-bold">+19</span></a><a class="flex items-center justify-between px-space-md py-space-sm rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-all group" data-path="subjects-catalog" href="#"><div class="flex items-center gap-space-sm"><span class="material-symbols-outlined text-[18px] group-hover:text-tertiary transition-colors">menu_book</span><span class="font-label-md text-label-md">Предметы</span></div><span class="font-label-sm text-label-sm bg-surface-container-highest px-space-xs py-0.5 rounded text-on-surface-variant">8</span></a><div class="pt-space-md pb-space-xs px-space-sm font-label-sm text-label-sm text-outline uppercase tracking-wider">Пользователи</div><a class="flex items-center justify-between px-space-md py-space-sm rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-all group" data-path="users-management" href="#"><div class="flex items-center gap-space-sm"><span class="material-symbols-outlined text-[18px] group-hover:text-primary transition-colors">group</span><span class="font-label-md text-label-md">Пользователи</span></div><span class="font-label-sm text-label-sm bg-surface-container-highest px-space-xs py-0.5 rounded text-on-surface-variant">1,420</span></a></nav></div><div class="p-space-md bg-surface-container-lowest flex flex-col gap-space-sm"><div class="flex items-center justify-between px-space-sm py-space-xs text-outline-variant hover:text-on-surface transition-colors cursor-pointer"><div class="flex items-center gap-space-xs"><span class="material-symbols-outlined text-[16px]">code</span><span class="font-body-sm text-body-sm">Django 5.1.2</span></div><span class="material-symbols-outlined text-[16px]">keyboard_double_arrow_left</span></div></div></aside><div class="pl-72"><header class="fixed top-0 left-72 right-0 h-16 bg-surface/85 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.3)] z-40 px-gutter flex items-center justify-between"><div class="flex items-center gap-space-md"><button class="p-space-xs text-on-surface-variant hover:text-on-surface rounded-lg hover:bg-surface-container-high transition-colors" type="button"><span class="material-symbols-outlined text-[22px]">menu</span></button><div class="flex items-center gap-space-xs"><span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">Django Admin</span><span class="text-outline-variant font-label-sm">/</span><span class="font-label-md text-label-md text-on-surface">ЕГЭ LMS Панель управления</span></div></div><div class="flex items-center gap-space-md"><a class="flex items-center gap-space-xs px-space-sm py-space-xs rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-all" href="#"><span class="material-symbols-outlined text-[18px] text-secondary">open_in_new</span><span class="font-label-md text-label-md">Смотреть сайт LMS</span></a><button class="p-space-xs text-on-surface-variant hover:text-on-surface rounded-lg hover:bg-surface-container transition-colors" title="Переключить вид" type="button"><span class="material-symbols-outlined text-[20px]">view_quilt</span></button><div class="h-6 w-px bg-surface-container-highest"></div><div class="flex items-center gap-space-sm pl-space-xs"><div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center"><span class="material-symbols-outlined text-on-primary text-[18px]">person</span></div><div class="flex flex-col"><span class="font-label-md text-label-md text-on-surface font-semibold">Dimong</span><span class="font-label-sm text-label-sm text-tertiary">Superuser</span></div></div><a class="flex items-center gap-space-xs px-space-sm py-space-xs text-on-surface-variant hover:text-error hover:bg-surface-container rounded-lg transition-colors ml-space-xs" data-path="login" href="#" title="Выйти"><span class="material-symbols-outlined text-[20px]">logout</span><span class="font-label-md text-label-md hidden md:inline">Выйти</span></a></div></header><main class="w-full pt-16 px-gutter py-space-lg bg-background min-h-screen"><div class="flex flex-col w-full">
|
|
<!-- Breadcrumb Navigation -->
|
|
<nav aria-label="Хлебные крошки" class="flex items-center gap-space-xs text-on-surface-variant font-label-sm text-label-sm mb-space-md">
|
|
<a class="hover:text-primary transition-colors flex items-center gap-1" href="#">
|
|
<span class="material-symbols-outlined text-[15px]">home</span>
|
|
<span class="">Начало</span>
|
|
</a>
|
|
<span class="text-outline-variant">/</span>
|
|
<a class="hover:text-primary transition-colors" href="#">Обучение (LMS)</a>
|
|
<span class="text-outline-variant">/</span>
|
|
<span class="text-on-surface font-semibold">Ответы учеников</span>
|
|
</nav>
|
|
<!-- Page Header & Metrics Row -->
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-space-md pb-space-lg">
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center gap-space-sm">
|
|
<h1 class="font-headline-lg text-headline-lg text-on-surface tracking-tight">Ответы учеников</h1>
|
|
<span class="bg-secondary-container/20 text-secondary border-none px-2 py-0.5 rounded-full font-label-sm text-label-sm">
|
|
Очередь Django LMS
|
|
</span>
|
|
</div>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">
|
|
Проверка практических решений, выставление первичных баллов ЕГЭ и развёрнутая обратная связь
|
|
</p>
|
|
</div>
|
|
<!-- Quick Action / Summary Chips -->
|
|
<div class="flex items-center gap-space-sm self-start lg:self-auto">
|
|
<div class="flex items-center gap-2 bg-surface-container px-space-md py-space-xs rounded-xl shadow-sm">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-secondary animate-pulse"></span>
|
|
<span class="font-label-md text-label-md text-on-surface">Требуют внимания:</span>
|
|
<span class="font-label-md text-label-md text-secondary font-bold">1</span>
|
|
</div>
|
|
<button class="flex items-center gap-1 bg-surface-container-high hover:bg-surface-bright text-on-surface px-space-md py-space-xs rounded-xl transition-colors font-label-md text-label-md" type="button">
|
|
<span class="material-symbols-outlined text-[18px]">sync</span>
|
|
<span class="">Обновить</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Search & Filter Controls Toolbar -->
|
|
<div class="bg-surface-container-low p-space-md rounded-xl shadow-md mb-space-xl flex flex-col md:flex-row gap-space-md items-stretch md:items-center justify-between">
|
|
<!-- Search Input -->
|
|
<div class="relative flex-1">
|
|
<span class="material-symbols-outlined absolute left-3.5 top-1/2 -translate-y-1/2 text-outline text-[18px] pointer-events-none">search</span>
|
|
<input class="w-full bg-surface-container-lowest text-on-surface placeholder-outline font-body-md text-body-md pl-10 pr-4 py-2 rounded-lg outline-none focus:ring-2 focus:ring-primary/40 transition-all shadow-inner" id="search-input" placeholder="Поиск по имени ученика, email или названию задания..." type="text">
|
|
</div>
|
|
<!-- Filter & Sort Selectors -->
|
|
<div class="flex items-center gap-space-sm flex-wrap">
|
|
<!-- Subject Filter -->
|
|
<div class="relative">
|
|
<select class="appearance-none bg-surface-container-lowest text-on-surface font-label-md text-label-md pl-3 pr-8 py-2 rounded-lg outline-none cursor-pointer hover:bg-surface-container focus:ring-2 focus:ring-primary/40 transition-all">
|
|
<option value="all">Все предметы</option>
|
|
<option selected="" value="inf">Информатика (КЕГЭ)</option>
|
|
<option value="math">Профильная математика</option>
|
|
<option value="phys">Физика</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-2.5 top-1/2 -translate-y-1/2 text-outline-variant text-[16px] pointer-events-none">expand_more</span>
|
|
</div>
|
|
<!-- Sorting Filter -->
|
|
<div class="relative">
|
|
<select class="appearance-none bg-surface-container-lowest text-on-surface font-label-md text-label-md pl-3 pr-8 py-2 rounded-lg outline-none cursor-pointer hover:bg-surface-container focus:ring-2 focus:ring-primary/40 transition-all">
|
|
<option selected="" value="urgent">Сначала требующие проверки</option>
|
|
<option value="newest">Сначала свежие ответы</option>
|
|
<option value="score_desc">По убыванию баллов</option>
|
|
<option value="score_asc">По возрастанию баллов</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-2.5 top-1/2 -translate-y-1/2 text-outline-variant text-[16px] pointer-events-none">expand_more</span>
|
|
</div>
|
|
<!-- Extended Filters Button -->
|
|
<button class="flex items-center gap-1.5 bg-surface-container-highest hover:bg-surface-bright text-on-surface font-label-md text-label-md px-3 py-2 rounded-lg transition-colors" type="button">
|
|
<span class="material-symbols-outlined text-[18px]">tune</span>
|
|
<span class="">Фильтры</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- SECTION 1: Ожидает проверки -->
|
|
<section aria-labelledby="heading-pending" class="flex flex-col gap-space-md mb-space-xl">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-space-sm">
|
|
<div class="w-3 h-3 rounded-full bg-secondary shadow-[0_0_10px_rgba(76,215,246,0.5)]"></div>
|
|
<h2 class="font-headline-sm text-headline-sm text-on-surface" id="heading-pending">Ожидает проверки</h2>
|
|
<span class="bg-secondary/15 text-secondary font-label-sm text-label-sm px-2.5 py-0.5 rounded-full font-semibold">
|
|
1 работа ждет
|
|
</span>
|
|
</div>
|
|
<span class="font-label-sm text-label-sm text-outline">Приоритет: Высокий</span>
|
|
</div>
|
|
<!-- Card: Dimong (Pending Review) -->
|
|
<div class="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-200 rounded-xl p-space-lg shadow-md flex flex-col lg:flex-row lg:items-center justify-between gap-space-lg">
|
|
<!-- High-visibility indicator pill -->
|
|
<div class="absolute left-0 top-3 bottom-3 w-1 bg-secondary rounded-r-full"></div>
|
|
<!-- Left Info Block -->
|
|
<div class="flex flex-col gap-space-sm pl-2">
|
|
<div class="flex items-center gap-space-sm flex-wrap">
|
|
<span class="bg-surface-container-highest text-primary font-label-sm text-label-sm px-2 py-0.5 rounded">
|
|
Информатика КЕГЭ 2026
|
|
</span>
|
|
<span class="bg-surface-container-highest text-outline font-label-sm text-label-sm px-2 py-0.5 rounded">
|
|
Вариант #09-V
|
|
</span>
|
|
<span class="flex items-center gap-1 text-secondary font-label-sm text-label-sm bg-secondary/10 px-2 py-0.5 rounded">
|
|
<span class="material-symbols-outlined text-[14px]">hourglass_top</span>
|
|
Ожидает ревью преподавателя
|
|
</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface tracking-tight group-hover:text-primary transition-colors">
|
|
Входной контроль по информатике
|
|
</h3>
|
|
<!-- Student Meta Data Grid -->
|
|
<div class="flex flex-wrap items-center gap-x-space-lg gap-y-space-xs text-on-surface-variant font-body-sm text-body-sm">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[17px] text-primary">account_circle</span>
|
|
<span class="text-on-surface font-semibold">Dimong</span>
|
|
<span class="text-outline text-label-sm font-label-sm">(dimong4fox@yandex.ru)</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[17px] text-secondary">schedule</span>
|
|
<span class="">Отправлено: <strong class="text-on-surface font-normal">20 Сен 2026, 18:01</strong></span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[17px] text-outline">timer</span>
|
|
<span class="">Время выполнения: <strong class="text-on-surface font-normal">142 мин. из 235</strong></span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[17px] text-outline">task_alt</span>
|
|
<span class="">Авто-тесты: <span class="text-tertiary font-semibold">21/27 решено</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Action Block -->
|
|
<div class="flex items-center gap-space-sm lg:flex-col lg:items-end shrink-0 pl-2 lg:pl-0">
|
|
<button class="flex items-center justify-center gap-2 bg-primary-container hover:bg-primary text-on-primary font-label-lg text-label-lg px-space-lg py-2.5 rounded-lg shadow-lg hover:shadow-primary/20 transition-all active:scale-95" onclick="openReviewModal('Dimong', 'Входной контроль по информатике')" type="button">
|
|
<span class="">Проверить работу</span>
|
|
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
|
</button>
|
|
<span class="font-label-sm text-label-sm text-outline-variant">Дедлайн проверки: сегодня 23:59</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- SECTION 2: Проверено -->
|
|
<section aria-labelledby="heading-completed" class="flex flex-col gap-space-md mb-space-xl">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-space-sm">
|
|
<div class="w-3 h-3 rounded-full bg-tertiary"></div>
|
|
<h2 class="font-headline-sm text-headline-sm text-on-surface" id="heading-completed">Проверено</h2>
|
|
<span class="bg-tertiary-container/30 text-tertiary font-label-sm text-label-sm px-2.5 py-0.5 rounded-full font-semibold">
|
|
2 работы
|
|
</span>
|
|
</div>
|
|
<span class="font-label-sm text-label-sm text-outline">Архив проверок за 48 часов</span>
|
|
</div>
|
|
<div class="flex flex-col gap-space-sm">
|
|
<!-- Checked Card 1: Igor -->
|
|
<div class="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-200 rounded-xl p-space-lg shadow-sm flex flex-col lg:flex-row lg:items-center justify-between gap-space-md">
|
|
<div class="absolute left-0 top-3 bottom-3 w-1 bg-tertiary rounded-r-full"></div>
|
|
<div class="flex flex-col gap-space-xs pl-2">
|
|
<div class="flex items-center gap-space-sm flex-wrap">
|
|
<span class="bg-surface-container-highest text-outline font-label-sm text-label-sm px-2 py-0.5 rounded">
|
|
Информатика КЕГЭ 2026
|
|
</span>
|
|
<span class="flex items-center gap-1 text-tertiary font-label-sm text-label-sm bg-tertiary/10 px-2 py-0.5 rounded font-semibold">
|
|
<span class="material-symbols-outlined text-[14px]">check_circle</span>
|
|
Проверено методистом
|
|
</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface">
|
|
Входной контроль по информатике
|
|
</h3>
|
|
<div class="flex flex-wrap items-center gap-x-space-lg gap-y-space-xs text-on-surface-variant font-body-sm text-body-sm">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[17px] text-primary">person</span>
|
|
<span class="text-on-surface font-semibold">Игорь</span>
|
|
<span class="text-outline text-label-sm font-label-sm">(@pipin)</span>
|
|
</div>
|
|
<!-- Score Pill -->
|
|
<div class="flex items-center gap-1 px-2 py-0.5 rounded-md bg-tertiary/15 text-tertiary font-label-md text-label-md font-semibold">
|
|
<span class="material-symbols-outlined text-[15px]">verified</span>
|
|
<span class="">Оценка: 3 / 27 баллов</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[17px] text-outline">calendar_today</span>
|
|
<span class="">20 Сен 2026, 17:29</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 text-outline">
|
|
<span class="material-symbols-outlined text-[17px]">rate_review</span>
|
|
<span class="">Проверил: Dimong</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Action Button -->
|
|
<div class="flex items-center shrink-0 pl-2 lg:pl-0">
|
|
<button class="flex items-center gap-1.5 bg-surface-container-highest hover:bg-surface-bright text-on-surface font-label-md text-label-md px-space-md py-2 rounded-lg transition-colors" onclick="viewAnswerDetails('Игорь', 'Входной контроль по информатике', '3/27')" type="button">
|
|
<span class="">Посмотреть / Изменить</span>
|
|
<span class="material-symbols-outlined text-[16px] text-outline-variant">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Checked Card 2: Mikhail -->
|
|
<div class="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-200 rounded-xl p-space-lg shadow-sm flex flex-col lg:flex-row lg:items-center justify-between gap-space-md">
|
|
<div class="absolute left-0 top-3 bottom-3 w-1 bg-tertiary rounded-r-full"></div>
|
|
<div class="flex flex-col gap-space-xs pl-2">
|
|
<div class="flex items-center gap-space-sm flex-wrap">
|
|
<span class="bg-surface-container-highest text-outline font-label-sm text-label-sm px-2 py-0.5 rounded">
|
|
Информатика КЕГЭ 2026
|
|
</span>
|
|
<span class="flex items-center gap-1 text-tertiary font-label-sm text-label-sm bg-tertiary/10 px-2 py-0.5 rounded font-semibold">
|
|
<span class="material-symbols-outlined text-[14px]">check_circle</span>
|
|
Проверено методистом
|
|
</span>
|
|
</div>
|
|
<h3 class="font-headline-sm text-headline-sm text-on-surface">
|
|
Задание №1. Анализ информационных моделей (графы и таблицы)
|
|
</h3>
|
|
<div class="flex flex-wrap items-center gap-x-space-lg gap-y-space-xs text-on-surface-variant font-body-sm text-body-sm">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[17px] text-primary">person</span>
|
|
<span class="text-on-surface font-semibold">Михаил</span>
|
|
<span class="text-outline text-label-sm font-label-sm">(@shtrmx)</span>
|
|
</div>
|
|
<!-- Score Pill -->
|
|
<div class="flex items-center gap-1 px-2 py-0.5 rounded-md bg-tertiary/15 text-tertiary font-label-md text-label-md font-semibold">
|
|
<span class="material-symbols-outlined text-[15px]">verified</span>
|
|
<span class="">Оценка: 25 / 27 баллов</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="material-symbols-outlined text-[17px] text-outline">calendar_today</span>
|
|
<span class="">19 Сен 2026, 21:10</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 text-outline">
|
|
<span class="material-symbols-outlined text-[17px]">rate_review</span>
|
|
<span class="">Проверил: Dimong</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Action Button -->
|
|
<div class="flex items-center shrink-0 pl-2 lg:pl-0">
|
|
<button class="flex items-center gap-1.5 bg-surface-container-highest hover:bg-surface-bright text-on-surface font-label-md text-label-md px-space-md py-2 rounded-lg transition-colors" onclick="viewAnswerDetails('Михаил', 'Задание №1. Анализ информационных моделей', '25/27')" type="button">
|
|
<span class="">Посмотреть / Изменить</span>
|
|
<span class="material-symbols-outlined text-[16px] text-outline-variant">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Bottom Summary & Django Pagination Footer -->
|
|
<div class="bg-surface-container-lowest p-space-md rounded-xl shadow-md flex flex-col sm:flex-row items-center justify-between gap-space-sm text-on-surface-variant font-body-sm text-body-sm">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[18px] text-primary">inventory_2</span>
|
|
<span class="">
|
|
Всего <strong class="text-on-surface">3</strong> ответа учеников (<span class="text-secondary font-semibold">1</span> на проверке, <span class="text-tertiary font-semibold">2</span> проверено)
|
|
</span>
|
|
</div>
|
|
<!-- Pager / Django List Display Stats -->
|
|
<div class="flex items-center gap-1">
|
|
<button class="p-1 rounded text-outline-variant cursor-not-allowed opacity-50" disabled="" type="button">
|
|
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
|
|
</button>
|
|
<span class="px-2 py-0.5 rounded bg-surface-container-high font-label-sm text-label-sm text-on-surface">1 из 1</span>
|
|
<button class="p-1 rounded text-outline-variant cursor-not-allowed opacity-50" disabled="" type="button">
|
|
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Interactive Quick View / Grading Drawer (Hidden by default) -->
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center p-space-md bg-surface-dim/80 backdrop-blur-md hidden transition-opacity" id="review-modal">
|
|
<div class="bg-surface-container-high border-none rounded-xl max-w-xl w-full p-space-lg shadow-2xl flex flex-col gap-space-md">
|
|
<div class="flex items-center justify-between pb-space-sm">
|
|
<div class="flex flex-col">
|
|
<span class="font-label-sm text-label-sm text-secondary uppercase tracking-wider">Django Grading Console</span>
|
|
<h4 class="font-headline-sm text-headline-sm text-on-surface" id="modal-student-title">Проверка работы</h4>
|
|
</div>
|
|
<button class="text-outline-variant hover:text-on-surface p-1 rounded-lg" onclick="closeReviewModal()" type="button">
|
|
<span class="material-symbols-outlined text-[20px]">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-col gap-space-sm bg-surface-container-lowest p-space-md rounded-lg">
|
|
<div class="flex justify-between text-body-sm font-body-sm">
|
|
<span class="text-outline">Ученик:</span>
|
|
<span class="text-on-surface font-semibold" id="modal-student-name">Dimong</span>
|
|
</div>
|
|
<div class="flex justify-between text-body-sm font-body-sm">
|
|
<span class="text-outline">Задание:</span>
|
|
<span class="text-on-surface font-semibold" id="modal-task-name">Входной контроль</span>
|
|
</div>
|
|
<div class="flex justify-between text-body-sm font-body-sm">
|
|
<span class="text-outline">Первичный балл (из 27):</span>
|
|
<input class="w-16 bg-surface-container text-right font-label-md text-label-md px-2 py-1 rounded text-primary focus:outline-none" max="27" min="0" type="number" value="21">
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label class="font-label-sm text-label-sm text-on-surface-variant" for="review-comment">Комментарий преподавателя для ученика:</label>
|
|
<textarea class="w-full bg-surface-container-lowest text-on-surface placeholder-outline font-body-md text-body-md p-space-sm rounded-lg outline-none focus:ring-2 focus:ring-primary/40" id="review-comment" placeholder="Укажите замечания по задачам развернутой части (24-27)..." rows="3"></textarea>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-space-sm pt-space-xs">
|
|
<button class="px-space-md py-2 rounded-lg font-label-md text-label-md text-on-surface-variant hover:bg-surface-container-highest transition-colors" onclick="closeReviewModal()" type="button">
|
|
Отмена
|
|
</button>
|
|
<button class="flex items-center gap-1.5 bg-primary-container hover:bg-primary text-on-primary font-label-md text-label-md px-space-md py-2 rounded-lg transition-colors" onclick="saveGrading()" type="button">
|
|
<span class="material-symbols-outlined text-[18px]">check</span>
|
|
<span class="">Сохранить оценку</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function openReviewModal(student, task) {
|
|
document.getElementById('modal-student-name').textContent = student;
|
|
document.getElementById('modal-task-name').textContent = task;
|
|
document.getElementById('modal-student-title').textContent = 'Проверка: ' + student;
|
|
document.getElementById('review-modal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeReviewModal() {
|
|
document.getElementById('review-modal').classList.add('hidden');
|
|
}
|
|
|
|
function saveGrading() {
|
|
const modal = document.getElementById('review-modal');
|
|
modal.classList.add('hidden');
|
|
alert('Оценка успешно сохранена в базе данных LMS!');
|
|
}
|
|
|
|
function viewAnswerDetails(student, task, score) {
|
|
alert('Режим просмотра: ' + student + '\nЗадание: ' + task + '\nТекущий результат: ' + score);
|
|
}
|
|
|
|
// Client-side quick filter
|
|
const searchInput = document.getElementById('search-input');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', function(e) {
|
|
const query = e.target.value.toLowerCase();
|
|
const cards = document.querySelectorAll('section div.group');
|
|
cards.forEach(card => {
|
|
const text = card.innerText.toLowerCase();
|
|
card.style.display = text.includes(query) ? '' : 'none';
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
</div></main></div>
|
|
|
|
</body></html> |