Update settings for unfold admin and remove footer
This commit is contained in:
@@ -0,0 +1,472 @@
|
||||
<!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"/>
|
||||
<title>Изменить Ответ ученика — Django LMS Admin</title>
|
||||
<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&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" 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?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"canvas-base": "#0B0F17",
|
||||
"background": "#11131b",
|
||||
"surface-container-lowest": "#0b0d14",
|
||||
"surface-container-low": "#141721",
|
||||
"surface-container": "#191b23",
|
||||
"surface-container-high": "#23252f",
|
||||
"surface-container-highest": "#2b2e3a",
|
||||
"surface-border": "#2e313c",
|
||||
"primary": "#3b82f6",
|
||||
"primary-container": "#2563eb",
|
||||
"primary-hover": "#1d4ed8",
|
||||
"status-emerald": "#10b981",
|
||||
"status-amber": "#f59e0b",
|
||||
"status-rose": "#f43f5e",
|
||||
"on-surface": "#e2e8f0",
|
||||
"on-surface-variant": "#94a3b8",
|
||||
"text-faint": "#64748b",
|
||||
"outline": "#475569",
|
||||
"outline-variant": "#2e313c"
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["Plus Jakarta Sans", "sans-serif"],
|
||||
heading: ["Space Grotesk", "sans-serif"],
|
||||
mono: ["JetBrains Mono", "monospace"]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background font-sans text-[14px] text-on-surface antialiased selection:bg-primary/20 selection:text-white">
|
||||
<!-- Left Sidebar (Technical Obsidian) -->
|
||||
<aside class="fixed left-0 top-0 h-full w-72 bg-surface-container-lowest border-r border-surface-border z-50 flex flex-col justify-between">
|
||||
<div class="flex flex-col">
|
||||
<!-- Workspace Brand -->
|
||||
<div class="h-16 px-5 flex items-center gap-3 border-b border-surface-border bg-surface-container-lowest">
|
||||
<div class="w-9 h-9 rounded bg-primary-container flex items-center justify-center text-white shadow-sm">
|
||||
<span class="material-symbols-outlined text-[20px]">terminal</span>
|
||||
</div>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<span class="font-heading font-semibold text-[14px] text-on-surface tracking-tight leading-tight truncate">Администрирование</span>
|
||||
<span class="font-mono text-[11px] text-text-faint tracking-wider uppercase truncate">Django ЕГЭ LMS</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Environment Indicator -->
|
||||
<div class="px-4 py-3 border-b border-surface-border/60">
|
||||
<div class="flex items-center justify-between px-3 py-1.5 rounded bg-surface-container-low border border-surface-border/60">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span class="w-2 h-2 rounded-full bg-status-emerald animate-pulse"></span>
|
||||
<span class="font-mono text-[11px] text-on-surface-variant truncate">Окружение: Prod</span>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] text-primary px-1.5 py-0.5 rounded bg-surface-container-high border border-primary/20">v5.1.2</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Navigation: ONLY Обучение (LMS) and Пользователи -->
|
||||
<nav class="flex flex-col px-3 py-3 gap-y-1">
|
||||
<div class="pt-2 pb-1.5 px-3 font-mono text-[10px] text-text-faint uppercase tracking-wider font-semibold">Обучение (LMS)</div>
|
||||
<a class="flex items-center justify-between px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-high hover:text-white transition-colors group" href="#">
|
||||
<div class="flex items-center gap-2.5 min-w-0">
|
||||
<span class="material-symbols-outlined text-[18px] text-text-faint group-hover:text-primary transition-colors">assignment</span>
|
||||
<span class="font-heading text-[13px] font-medium truncate">Задания</span>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] bg-surface-container-high text-text-faint px-1.5 py-0.5 rounded border border-surface-border/40">482</span>
|
||||
</a>
|
||||
<a aria-current="page" class="flex items-center justify-between px-3 py-2 rounded bg-surface-container-high text-white border border-primary/30 shadow-sm" href="#">
|
||||
<div class="flex items-center gap-2.5 min-w-0">
|
||||
<span class="material-symbols-outlined text-[18px] text-primary">rate_review</span>
|
||||
<span class="font-heading text-[13px] font-medium truncate">Ответы учеников</span>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] bg-primary-container text-white px-1.5 py-0.5 rounded font-semibold">+19</span>
|
||||
</a>
|
||||
<a class="flex items-center justify-between px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-high hover:text-white transition-colors group" href="#">
|
||||
<div class="flex items-center gap-2.5 min-w-0">
|
||||
<span class="material-symbols-outlined text-[18px] text-text-faint group-hover:text-primary transition-colors">menu_book</span>
|
||||
<span class="font-heading text-[13px] font-medium truncate">Предметы</span>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] bg-surface-container-high text-text-faint px-1.5 py-0.5 rounded border border-surface-border/40">8</span>
|
||||
</a>
|
||||
<div class="pt-4 pb-1.5 px-3 font-mono text-[10px] text-text-faint uppercase tracking-wider font-semibold">Пользователи</div>
|
||||
<a class="flex items-center justify-between px-3 py-2 rounded text-on-surface-variant hover:bg-surface-container-high hover:text-white transition-colors group" href="#">
|
||||
<div class="flex items-center gap-2.5 min-w-0">
|
||||
<span class="material-symbols-outlined text-[18px] text-text-faint group-hover:text-primary transition-colors">group</span>
|
||||
<span class="font-heading text-[13px] font-medium truncate">Пользователи</span>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] bg-surface-container-high text-text-faint px-1.5 py-0.5 rounded border border-surface-border/40">1,420</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Sidebar Bottom Meta -->
|
||||
<div class="p-3 border-t border-surface-border bg-surface-container-lowest">
|
||||
<div class="flex items-center justify-between px-3 py-2 text-text-faint hover:text-on-surface transition-colors cursor-pointer rounded hover:bg-surface-container-low">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[16px]">code</span>
|
||||
<span class="font-mono text-[12px]">Django 5.1.2</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-[16px]">keyboard_double_arrow_left</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Container -->
|
||||
<div class="pl-72">
|
||||
<!-- Top Header (No text collisions or overlaps) -->
|
||||
<header class="fixed top-0 left-72 right-0 h-16 bg-surface-container-lowest/95 backdrop-blur-md border-b border-surface-border z-40 px-6 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4 min-w-0">
|
||||
<button class="p-1.5 text-text-faint hover:text-white rounded hover:bg-surface-container-high transition-colors" type="button">
|
||||
<span class="material-symbols-outlined text-[20px]">menu</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-2 font-mono text-[12px] truncate">
|
||||
<span class="text-text-faint uppercase tracking-wider">Django Admin</span>
|
||||
<span class="text-surface-border">/</span>
|
||||
<span class="text-on-surface font-heading font-medium tracking-normal truncate">ЕГЭ LMS Панель управления</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 flex-shrink-0">
|
||||
<a class="flex items-center gap-1.5 px-3 py-1.5 rounded border border-surface-border bg-surface-container-low text-on-surface-variant hover:text-white hover:bg-surface-container-high transition-all text-[13px] font-heading" href="#">
|
||||
<span class="material-symbols-outlined text-[16px] text-primary">open_in_new</span>
|
||||
<span>Смотреть сайт LMS</span>
|
||||
</a>
|
||||
<div class="h-5 w-px bg-surface-border"></div>
|
||||
<div class="flex items-center gap-2.5 pl-1">
|
||||
<div class="w-8 h-8 rounded bg-surface-container-high border border-surface-border flex items-center justify-center text-primary font-mono text-[13px]">
|
||||
<span class="material-symbols-outlined text-[18px]">person</span>
|
||||
</div>
|
||||
<div class="flex flex-col text-left">
|
||||
<span class="font-heading text-[13px] text-white font-medium leading-none">Dimong</span>
|
||||
<span class="font-mono text-[10px] text-status-emerald leading-tight mt-0.5">Superuser</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="flex items-center gap-1 px-2.5 py-1.5 text-text-faint hover:text-status-rose hover:bg-status-rose/10 rounded transition-colors" href="#" title="Выйти">
|
||||
<span class="material-symbols-outlined text-[18px]">logout</span>
|
||||
<span class="font-heading text-[12px] hidden md:inline">Выйти</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<main class="w-full pt-16 px-8 py-6 bg-background min-h-screen">
|
||||
<div class="max-w-6xl mx-auto flex flex-col gap-6">
|
||||
<!-- Top Navigation & Heading Context -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- Clean Breadcrumbs without overlap -->
|
||||
<nav class="flex items-center gap-2 font-mono text-[12px] text-text-faint flex-wrap">
|
||||
<a class="hover:text-primary transition-colors flex items-center gap-1" href="#">
|
||||
<span class="material-symbols-outlined text-[14px]">home</span>
|
||||
<span>Начало</span>
|
||||
</a>
|
||||
<span class="text-surface-border">/</span>
|
||||
<a class="hover:text-primary transition-colors" href="#">Обучение (LMS)</a>
|
||||
<span class="text-surface-border">/</span>
|
||||
<a class="hover:text-primary transition-colors" href="#">Ответы учеников</a>
|
||||
<span class="text-surface-border">/</span>
|
||||
<span class="text-on-surface truncate max-w-sm">Ответ pipin (Входной контроль)</span>
|
||||
</nav>
|
||||
<!-- Headline & Actions Toolbar -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-1">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<div class="w-10 h-10 rounded border border-surface-border bg-surface-container flex items-center justify-center text-primary flex-shrink-0">
|
||||
<span class="material-symbols-outlined text-[22px]">fact_check</span>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-mono text-[11px] text-primary uppercase tracking-wider font-semibold">Ответ ученика</span>
|
||||
<span class="text-surface-border">•</span>
|
||||
<span class="font-mono text-[12px] text-text-faint">ID: <span class="text-white font-medium">#48291</span></span>
|
||||
</div>
|
||||
<h1 class="font-heading text-[22px] text-white font-bold tracking-tight truncate mt-0.5">
|
||||
pipin — Входной контроль по информатике
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 flex-shrink-0">
|
||||
<a class="inline-flex items-center gap-1.5 px-3 py-2 rounded border border-surface-border bg-surface-container-low hover:bg-surface-container text-on-surface font-heading text-[13px] font-medium transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[16px] text-text-faint">history</span>
|
||||
<span>История изменений</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Verification & Grading Form -->
|
||||
<form class="flex flex-col gap-6 pb-28">
|
||||
<!-- Section 1: Main Submission Metadata -->
|
||||
<div class="bg-surface-container-low border border-surface-border rounded-lg p-6 flex flex-col gap-6 shadow-sm">
|
||||
<div class="flex items-center justify-between pb-4 border-b border-surface-border">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary text-[20px]">tune</span>
|
||||
<h2 class="font-heading font-semibold text-[16px] text-white tracking-tight">Параметры проверки и оценка</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-2.5 py-1 rounded bg-surface-container border border-surface-border">
|
||||
<span class="w-2 h-2 rounded-full bg-status-amber"></span>
|
||||
<span class="font-mono text-[11px] text-on-surface tracking-wide">Требует верификации</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Subject / Student Select Fields -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
<!-- Field: Задание -->
|
||||
<div class="lg:col-span-7 flex flex-col gap-1.5">
|
||||
<label class="font-heading font-medium text-[13px] text-on-surface flex items-center gap-1">
|
||||
<span>Задание</span>
|
||||
<span class="text-status-rose font-bold">*</span>
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<select class="w-full bg-surface-container-lowest border border-surface-border text-on-surface font-sans text-[13px] rounded px-3 py-2 appearance-none focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary transition-colors">
|
||||
<option selected="">Входной контроль по информатике (Информатика)</option>
|
||||
<option>Пробный ЕГЭ 2025 #1 (Информатика)</option>
|
||||
<option>Тематический блок: Рекурсивные алгоритмы</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2.5 text-text-faint pointer-events-none text-[18px]">expand_more</span>
|
||||
</div>
|
||||
<div class="flex items-center border border-surface-border bg-surface-container rounded p-0.5 flex-shrink-0">
|
||||
<button class="p-1 rounded text-text-faint hover:text-primary hover:bg-surface-container-high transition-colors" title="Изменить" type="button">
|
||||
<span class="material-symbols-outlined text-[16px]">edit</span>
|
||||
</button>
|
||||
<button class="p-1 rounded text-text-faint hover:text-primary hover:bg-surface-container-high transition-colors" title="Добавить" type="button">
|
||||
<span class="material-symbols-outlined text-[16px]">add</span>
|
||||
</button>
|
||||
<button class="p-1 rounded text-text-faint hover:text-primary hover:bg-surface-container-high transition-colors" title="Просмотр" type="button">
|
||||
<span class="material-symbols-outlined text-[16px]">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] text-text-faint">Курс: ЕГЭ Информатика 2025 • Дедлайн: 15 мая 2024</span>
|
||||
</div>
|
||||
<!-- Field: Ученик -->
|
||||
<div class="lg:col-span-5 flex flex-col gap-1.5">
|
||||
<label class="font-heading font-medium text-[13px] text-on-surface flex items-center gap-1">
|
||||
<span>Ученик</span>
|
||||
<span class="text-status-rose font-bold">*</span>
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<select class="w-full bg-surface-container-lowest border border-surface-border text-on-surface font-sans text-[13px] rounded px-3 py-2 appearance-none focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary transition-colors">
|
||||
<option selected="">pipin (Игорь Попов)</option>
|
||||
<option>alexeik (Алексей Кузнецов)</option>
|
||||
<option>mariya_s (Мария Смирнова)</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2.5 text-text-faint pointer-events-none text-[18px]">expand_more</span>
|
||||
</div>
|
||||
<div class="flex items-center border border-surface-border bg-surface-container rounded p-0.5 flex-shrink-0">
|
||||
<button class="p-1 rounded text-text-faint hover:text-primary hover:bg-surface-container-high transition-colors" title="Изменить" type="button">
|
||||
<span class="material-symbols-outlined text-[16px]">edit</span>
|
||||
</button>
|
||||
<button class="p-1 rounded text-text-faint hover:text-primary hover:bg-surface-container-high transition-colors" title="Добавить" type="button">
|
||||
<span class="material-symbols-outlined text-[16px]">add</span>
|
||||
</button>
|
||||
<button class="p-1 rounded text-text-faint hover:text-primary hover:bg-surface-container-high transition-colors" title="Профиль" type="button">
|
||||
<span class="material-symbols-outlined text-[16px]">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] text-text-faint">Группа: 11-Б Профиль • TG: @pipin_dev</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Score & Progress Bar Panel -->
|
||||
<div class="p-4 rounded border border-surface-border bg-surface-container grid grid-cols-1 md:grid-cols-12 gap-5 items-center">
|
||||
<div class="md:col-span-4 flex flex-col gap-1.5">
|
||||
<span class="font-heading text-[12px] uppercase text-text-faint font-semibold tracking-wider">Итоговая оценка</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative w-32">
|
||||
<input class="w-full bg-surface-container-lowest border border-surface-border text-white font-mono text-[18px] font-semibold rounded px-3 py-1.5 text-center focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" type="text" value="3/27"/>
|
||||
</div>
|
||||
<span class="font-mono text-[12px] text-text-faint">первичных баллов</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:col-span-8 flex flex-col gap-2">
|
||||
<div class="flex justify-between items-center font-mono text-[12px]">
|
||||
<span class="text-text-faint">Выполнение: <strong class="text-white font-semibold">11.1%</strong></span>
|
||||
<span class="text-status-rose font-medium">Ниже порога (Мин: 40%)</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-surface-container-lowest border border-surface-border/50 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-status-rose rounded-full transition-all" style="width: 11.1%"></div>
|
||||
</div>
|
||||
<div class="flex justify-between font-mono text-[11px] text-text-faint">
|
||||
<span>0 б</span>
|
||||
<span>Порог: 11 б</span>
|
||||
<span>Максимум: 27 б</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Teacher Feedback -->
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="font-heading font-medium text-[13px] text-on-surface flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-[16px] text-primary">chat_bubble_outline</span>
|
||||
<span>Комментарий проверяющего к работе</span>
|
||||
</label>
|
||||
<span class="font-mono text-[11px] text-text-faint">Поддерживается Markdown</span>
|
||||
</div>
|
||||
<textarea class="w-full bg-surface-container-lowest border border-surface-border text-on-surface font-sans text-[13px] rounded p-3 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary placeholder:text-text-faint resize-y min-h-[90px]" rows="3">Неплохое начало, но обрати внимание на 2-ю задачу: при построении дерева путей не был учтен запрет на повторное посещение вершины B. Рекомендую повторить раздел «Анализ информационных моделей».</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section 2: Stacked Flat Table (Impeccable: No Nested Cards) -->
|
||||
<div class="bg-surface-container-low border border-surface-border rounded-lg overflow-hidden shadow-sm">
|
||||
<!-- Table Header Bar -->
|
||||
<div class="px-6 py-4 border-b border-surface-border flex items-center justify-between bg-surface-container">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="material-symbols-outlined text-primary text-[20px]">view_list</span>
|
||||
<h2 class="font-heading font-semibold text-[15px] text-white tracking-tight">Ответы на задачи (Inline)</h2>
|
||||
<span class="font-mono text-[11px] px-2 py-0.5 rounded bg-surface-container-high border border-surface-border text-text-faint">2 объекта</span>
|
||||
</div>
|
||||
<button class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded border border-surface-border bg-surface-container-high hover:bg-surface-container-highest text-primary font-heading text-[12px] font-medium transition-colors" type="button">
|
||||
<span class="material-symbols-outlined text-[16px]">add</span>
|
||||
<span>Добавить ответ на задачу</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Flat Task Item 1 (Accepted / Emerald) -->
|
||||
<div class="p-6 border-b border-surface-border flex flex-col gap-4 hover:bg-surface-container/30 transition-colors">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-mono text-[12px] font-bold px-2 py-0.5 rounded bg-status-emerald/15 text-status-emerald border border-status-emerald/30">#01</span>
|
||||
<span class="font-heading font-semibold text-[14px] text-white">Задача 1: Поиск оптимального маршрута по таблице весов</span>
|
||||
<a class="inline-flex items-center gap-1 font-mono text-[11px] text-primary hover:underline ml-2" href="#">
|
||||
<span>Условие</span>
|
||||
<span class="material-symbols-outlined text-[13px]">open_in_new</span>
|
||||
</a>
|
||||
</div>
|
||||
<label class="flex items-center gap-1.5 cursor-pointer text-text-faint hover:text-status-rose transition-colors text-[12px] font-mono">
|
||||
<input class="w-3.5 h-3.5 rounded border-surface-border bg-surface-container-lowest text-status-rose focus:ring-0" type="checkbox"/>
|
||||
<span>Удалить</span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Task 1 Fields Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
|
||||
<!-- Sub: Ответ ученика -->
|
||||
<div class="md:col-span-4 flex flex-col gap-1">
|
||||
<span class="font-mono text-[10px] uppercase text-text-faint font-semibold tracking-wider">Ответ ученика</span>
|
||||
<div class="flex items-center justify-between px-3 py-2 rounded bg-surface-container-lowest border border-status-emerald/40 font-mono text-[14px] font-semibold text-status-emerald">
|
||||
<span>21</span>
|
||||
<span class="material-symbols-outlined text-[18px]">check_circle</span>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] text-text-faint">Эталонный ответ: 21</span>
|
||||
</div>
|
||||
<!-- Sub: Статус проверки -->
|
||||
<div class="md:col-span-4 flex flex-col gap-1">
|
||||
<span class="font-mono text-[10px] uppercase text-text-faint font-semibold tracking-wider">Статус проверки</span>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-surface-container-lowest border border-surface-border text-status-emerald font-heading text-[13px] font-semibold rounded px-3 py-2 appearance-none focus:border-primary focus:outline-none">
|
||||
<option selected="" value="yes">Да (Зачтено)</option>
|
||||
<option value="no">Нет (Ошибка)</option>
|
||||
<option value="partial">Частично</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2.5 text-status-emerald pointer-events-none text-[18px]">check</span>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] text-text-faint">Автопроверка совпала</span>
|
||||
</div>
|
||||
<!-- Sub: Баллы -->
|
||||
<div class="md:col-span-4 flex flex-col gap-1">
|
||||
<span class="font-mono text-[10px] uppercase text-text-faint font-semibold tracking-wider">Баллы за номер</span>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-lowest border border-surface-border text-white font-mono text-[14px] font-semibold rounded px-3 py-2 focus:border-primary focus:outline-none" max="1" min="0" type="number" value="1"/>
|
||||
<span class="absolute right-3 top-2.5 text-text-faint font-mono text-[11px]">макс: 1</span>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] text-text-faint">100% за задание</span>
|
||||
</div>
|
||||
<!-- Sub: Комментарий к задаче -->
|
||||
<div class="md:col-span-12 flex flex-col gap-1 pt-1">
|
||||
<span class="font-mono text-[10px] uppercase text-text-faint font-semibold tracking-wider">Пояснение проверяющего к задаче 1</span>
|
||||
<input class="w-full bg-surface-container-lowest border border-surface-border text-on-surface font-sans text-[13px] rounded px-3 py-1.5 focus:border-primary focus:outline-none placeholder:text-text-faint" placeholder="Пояснение эксперта к данному номеру..." type="text" value="Верный алгоритмический расчет кратчайшего пути."/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Flat Task Item 2 (Incorrect / Rose) -->
|
||||
<div class="p-6 flex flex-col gap-4 hover:bg-surface-container/30 transition-colors">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-mono text-[12px] font-bold px-2 py-0.5 rounded bg-status-rose/15 text-status-rose border border-status-rose/30">#02</span>
|
||||
<span class="font-heading font-semibold text-[14px] text-white">Задача 2: Построение таблицы истинности логической функции</span>
|
||||
<a class="inline-flex items-center gap-1 font-mono text-[11px] text-primary hover:underline ml-2" href="#">
|
||||
<span>Условие</span>
|
||||
<span class="material-symbols-outlined text-[13px]">open_in_new</span>
|
||||
</a>
|
||||
</div>
|
||||
<label class="flex items-center gap-1.5 cursor-pointer text-text-faint hover:text-status-rose transition-colors text-[12px] font-mono">
|
||||
<input class="w-3.5 h-3.5 rounded border-surface-border bg-surface-container-lowest text-status-rose focus:ring-0" type="checkbox"/>
|
||||
<span>Удалить</span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Task 2 Fields Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
|
||||
<!-- Sub: Ответ ученика -->
|
||||
<div class="md:col-span-4 flex flex-col gap-1">
|
||||
<span class="font-mono text-[10px] uppercase text-text-faint font-semibold tracking-wider">Ответ ученика</span>
|
||||
<div class="flex items-center justify-between px-3 py-2 rounded bg-surface-container-lowest border border-status-rose/40 font-mono text-[14px] font-semibold text-status-rose">
|
||||
<span>34 (yxzw)</span>
|
||||
<span class="material-symbols-outlined text-[18px]">cancel</span>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] text-text-faint">Эталон: <strong class="text-white">wzyx</strong></span>
|
||||
</div>
|
||||
<!-- Sub: Статус проверки -->
|
||||
<div class="md:col-span-4 flex flex-col gap-1">
|
||||
<span class="font-mono text-[10px] uppercase text-text-faint font-semibold tracking-wider">Статус проверки</span>
|
||||
<div class="relative">
|
||||
<select class="w-full bg-surface-container-lowest border border-surface-border text-status-rose font-heading text-[13px] font-semibold rounded px-3 py-2 appearance-none focus:border-primary focus:outline-none">
|
||||
<option value="yes">Да (Зачтено)</option>
|
||||
<option selected="" value="no">Нет (Неверно)</option>
|
||||
<option value="partial">Частично</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2.5 text-status-rose pointer-events-none text-[18px]">close</span>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] text-status-rose">Ошибочный ответ</span>
|
||||
</div>
|
||||
<!-- Sub: Баллы -->
|
||||
<div class="md:col-span-4 flex flex-col gap-1">
|
||||
<span class="font-mono text-[10px] uppercase text-text-faint font-semibold tracking-wider">Баллы за номер</span>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-lowest border border-surface-border text-status-rose font-mono text-[14px] font-semibold rounded px-3 py-2 focus:border-primary focus:outline-none" max="1" min="0" type="number" value="0"/>
|
||||
<span class="absolute right-3 top-2.5 text-text-faint font-mono text-[11px]">макс: 1</span>
|
||||
</div>
|
||||
<span class="font-mono text-[11px] text-text-faint">0 первичных баллов</span>
|
||||
</div>
|
||||
<!-- Sub: Комментарий к задаче -->
|
||||
<div class="md:col-span-12 flex flex-col gap-1 pt-1">
|
||||
<span class="font-mono text-[10px] uppercase text-text-faint font-semibold tracking-wider">Пояснение проверяющего к задаче 2</span>
|
||||
<input class="w-full bg-surface-container-lowest border border-surface-border text-on-surface font-sans text-[13px] rounded px-3 py-1.5 focus:border-primary focus:outline-none placeholder:text-text-faint" placeholder="Пояснение эксперта к данному номеру..." type="text" value="Перепутаны переменные w и z в третьей строке истинности."/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Sticky Action Bar (Strict Cobalt & Slate) -->
|
||||
<div class="fixed bottom-0 left-72 right-0 bg-surface-container-lowest/95 backdrop-blur-md border-t border-surface-border px-8 py-3.5 z-30 flex flex-wrap items-center justify-between gap-4">
|
||||
<!-- Left Action -->
|
||||
<div>
|
||||
<button class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded border border-status-rose/30 bg-status-rose/10 text-status-rose hover:bg-status-rose hover:text-white transition-colors font-heading text-[13px] font-medium" type="button">
|
||||
<span class="material-symbols-outlined text-[17px]">delete</span>
|
||||
<span>Удалить Ответ ученика</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Right Actions -->
|
||||
<div class="flex items-center gap-2.5 flex-wrap">
|
||||
<button class="px-4 py-2 rounded border border-surface-border bg-surface-container hover:bg-surface-container-high text-on-surface font-heading text-[13px] font-medium transition-colors" type="button">
|
||||
Сохранить и добавить другой объект
|
||||
</button>
|
||||
<button class="px-4 py-2 rounded border border-surface-border bg-surface-container hover:bg-surface-container-high text-on-surface font-heading text-[13px] font-medium transition-colors" type="button">
|
||||
Сохранить и продолжить редактирование
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 rounded bg-primary-container hover:bg-primary-hover text-white font-heading text-[13px] font-semibold tracking-wide transition-colors shadow-sm" type="submit">
|
||||
<span class="material-symbols-outlined text-[17px]">save</span>
|
||||
<span>Сохранить</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 383 KiB |
Reference in New Issue
Block a user