-
|
Before Width: | Height: | Size: 376 KiB |
|
Before Width: | Height: | Size: 600 KiB |
|
Before Width: | Height: | Size: 623 KiB |
@@ -1,448 +0,0 @@
|
||||
<!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>Изменить Пользователь Dimong (Ученик) | Администрирование Django</title>
|
||||
<!-- Tailwind CSS CDN with forms and container queries plugins -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#f5f3ff',
|
||||
100: '#ede9fe',
|
||||
500: '#8b5cf6',
|
||||
600: '#7c3aed',
|
||||
700: '#6d28d9',
|
||||
},
|
||||
surface: {
|
||||
main: '#0b0f19',
|
||||
sidebar: '#0e1424',
|
||||
card: '#131c2e',
|
||||
cardHeader: '#172237',
|
||||
input: '#0d1524',
|
||||
border: '#1e293b',
|
||||
borderLight: '#2a374f',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Custom Styles for Form Elements and Scrollbar -->
|
||||
<style data-purpose="custom-scrollbars">
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0e1424;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #25334c;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3b4d70;
|
||||
}
|
||||
</style>
|
||||
<style data-purpose="ui-components">
|
||||
.custom-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
}
|
||||
.custom-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.switch-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #27354a;
|
||||
transition: .3s;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.switch-slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: .3s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
input:checked + .switch-slider {
|
||||
background-color: #10b981;
|
||||
}
|
||||
input:checked + .switch-slider:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-full bg-[#0b0f19] text-slate-200 antialiased font-sans flex overflow-hidden selection:bg-purple-600 selection:text-white">
|
||||
<!-- BEGIN: Sidebar -->
|
||||
<aside class="w-72 bg-[#0e1424] border-r border-[#1a253a] flex flex-col flex-shrink-0 z-30 select-none" data-purpose="admin-sidebar">
|
||||
<!-- Sidebar Header / Django Branding -->
|
||||
<div class="px-5 py-4 border-b border-[#1a253a] flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-9 h-9 rounded-lg bg-gradient-to-tr from-purple-700 to-indigo-600 flex items-center justify-center shadow-lg shadow-purple-900/30 text-white">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" 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"></path>
|
||||
<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-bold text-sm leading-snug tracking-wide text-white">Администрирование Django</h1>
|
||||
<span class="inline-flex items-center mt-0.5 px-2 py-0.5 rounded text-[10px] font-medium bg-purple-950 text-purple-300 border border-purple-800/60">
|
||||
Окружение: Prod v5.1
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="p-1.5 rounded-md text-slate-400 hover:text-white hover:bg-slate-800 transition" title="Свернуть меню" type="button">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M11 19l-7-7 7-7m8 14l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Navigation Groups -->
|
||||
<nav class="flex-1 overflow-y-auto px-3.5 py-5 space-y-6">
|
||||
<!-- Section: LMS -->
|
||||
<div>
|
||||
<div class="px-2 mb-2.5 text-xs font-bold tracking-wider text-slate-400 uppercase">
|
||||
Обучение (LMS)
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<a class="flex items-center justify-between px-3 py-2 text-sm font-medium text-slate-300 rounded-lg hover:bg-[#162137] hover:text-white transition group" href="#">
|
||||
<span class="flex items-center">
|
||||
<svg class="w-4 h-4 mr-2.5 text-slate-500 group-hover:text-purple-400 transition" fill="none" stroke="currentColor" stroke-width="2" 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"></path>
|
||||
</svg>
|
||||
Задания
|
||||
</span>
|
||||
</a>
|
||||
<a class="flex items-center justify-between px-3 py-2 text-sm font-medium text-slate-300 rounded-lg hover:bg-[#162137] hover:text-white transition group" href="#">
|
||||
<span class="flex items-center">
|
||||
<svg class="w-4 h-4 mr-2.5 text-slate-500 group-hover:text-purple-400 transition" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
Ответы учеников
|
||||
</span>
|
||||
</a>
|
||||
<a class="flex items-center justify-between px-3 py-2 text-sm font-medium text-slate-300 rounded-lg hover:bg-[#162137] hover:text-white transition group" href="#">
|
||||
<span class="flex items-center">
|
||||
<svg class="w-4 h-4 mr-2.5 text-slate-500 group-hover:text-purple-400 transition" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
Предметы
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section: Users (Groups block completely omitted per strict requirements) -->
|
||||
<div>
|
||||
<div class="px-2 mb-2.5 text-xs font-bold tracking-wider text-slate-400 uppercase">
|
||||
Пользователи
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<a class="flex items-center justify-between px-3 py-2 text-sm font-semibold text-purple-300 bg-purple-950/40 rounded-lg border border-purple-800/40 transition" href="#">
|
||||
<span class="flex items-center">
|
||||
<svg class="w-4 h-4 mr-2.5 text-purple-400" fill="none" stroke="currentColor" stroke-width="2" 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"></path>
|
||||
</svg>
|
||||
Пользователи
|
||||
</span>
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- END: Sidebar -->
|
||||
<!-- BEGIN: Main Area -->
|
||||
<div class="flex-1 flex flex-col h-full overflow-hidden bg-[#0b0f19]">
|
||||
<!-- BEGIN: Top Navbar -->
|
||||
<header class="h-14 bg-[#0e1424] border-b border-[#1a253a] px-6 flex items-center justify-between flex-shrink-0 z-20" data-purpose="top-navigation">
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="flex items-center space-x-2 text-xs font-medium text-slate-400">
|
||||
<a class="hover:text-purple-300 transition flex items-center" href="#">
|
||||
<svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
Начало
|
||||
</a>
|
||||
<span class="text-slate-600">/</span>
|
||||
<a class="hover:text-purple-300 transition" href="#">Пользователи</a>
|
||||
<span class="text-slate-600">/</span>
|
||||
<a class="hover:text-purple-300 transition" href="#">Пользователи</a>
|
||||
<span class="text-slate-600">/</span>
|
||||
<span class="text-slate-200 font-semibold">Dimong (Ученик)</span>
|
||||
</nav>
|
||||
<!-- Right Header Actions -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Site Link -->
|
||||
<a class="hidden sm:inline-flex items-center text-xs font-medium text-slate-300 hover:text-purple-300 transition" href="#">
|
||||
<svg class="w-3.5 h-3.5 mr-1 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
Смотреть сайт LMS
|
||||
</a>
|
||||
<div class="h-4 w-px bg-slate-700/60 hidden sm:block"></div>
|
||||
<!-- History Button -->
|
||||
<button class="inline-flex items-center px-2.5 py-1 text-xs font-medium text-slate-300 bg-[#162137] hover:bg-[#1e2c49] border border-slate-700/50 rounded-md transition shadow-sm" type="button">
|
||||
<svg class="w-3.5 h-3.5 mr-1.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" 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"></path>
|
||||
</svg>
|
||||
История
|
||||
</button>
|
||||
<!-- User Profile Pill -->
|
||||
<div class="flex items-center space-x-2.5 pl-2 border-l border-slate-700/50">
|
||||
<div class="w-7 h-7 rounded-full bg-purple-600 flex items-center justify-center font-bold text-xs text-white uppercase ring-2 ring-purple-500/30">
|
||||
D
|
||||
</div>
|
||||
<div class="text-xs">
|
||||
<span class="font-medium text-slate-200">Dimong</span>
|
||||
<span class="text-[10px] text-purple-400 block -mt-0.5">Superuser</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Logout Button -->
|
||||
<button class="p-1.5 text-slate-400 hover:text-red-400 hover:bg-[#162137] rounded-md transition" title="Выйти" type="button">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" 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"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- END: Top Navbar -->
|
||||
<!-- BEGIN: Scrollable Content Form -->
|
||||
<main class="flex-1 overflow-y-auto pb-28 px-6 lg:px-10 py-6" data-purpose="form-main-content">
|
||||
<!-- Page Title -->
|
||||
<div class="mb-6">
|
||||
<h2 class="text-xl font-bold tracking-tight text-white flex items-center gap-2">
|
||||
<span>Изменить Пользователь Dimong (Ученик)</span>
|
||||
<span class="text-xs font-mono font-normal px-2 py-0.5 bg-slate-800 border border-slate-700 text-slate-400 rounded">ID: 1042</span>
|
||||
</h2>
|
||||
</div>
|
||||
<form class="space-y-6 max-w-6xl">
|
||||
<!-- BEGIN: Credentials Card -->
|
||||
<div class="bg-[#131c2e] border border-[#1e293b] rounded-xl shadow-lg p-5">
|
||||
<!-- Username Field -->
|
||||
<div class="mb-5">
|
||||
<label class="block text-sm font-semibold text-slate-200 mb-1.5">
|
||||
Имя пользователя <span class="text-rose-500 font-bold">*</span>
|
||||
</label>
|
||||
<input class="w-full max-w-2xl bg-[#0d1524] border border-[#233149] focus:border-purple-500 focus:ring-1 focus:ring-purple-500 rounded-lg px-3.5 py-2 text-sm text-slate-100 placeholder-slate-500 shadow-inner outline-none transition" required="" type="text" value="Dimong"/>
|
||||
<p class="mt-1.5 text-xs text-slate-400">
|
||||
Обязательное поле. Не более 150 символов. Только буквы, цифры и символы @/./+/-/_.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Password Status Block -->
|
||||
<div class="pt-2 border-t border-[#1a253a]">
|
||||
<label class="block text-sm font-semibold text-slate-200 mb-1.5">Пароль:</label>
|
||||
<div class="bg-[#0b101c] border border-[#1e2b42] rounded-lg p-3 text-xs font-mono text-slate-300 break-all leading-relaxed shadow-inner">
|
||||
<span class="text-purple-400 font-semibold">алгоритм:</span> pbkdf2_sha256
|
||||
<span class="text-purple-400 font-semibold ml-2">итерации:</span> 870000
|
||||
<span class="text-purple-400 font-semibold ml-2">соль:</span> M6Dksm********************
|
||||
<span class="text-purple-400 font-semibold ml-2">хэш:</span> xM3+5a7Gk9bL0rQ3Vz0A...
|
||||
</div>
|
||||
<p class="mt-1.5 text-xs text-slate-400 flex items-center">
|
||||
Мы не храним сырые пароли, поэтому не существует способа посмотреть пароль пользователя.
|
||||
<a class="text-purple-400 hover:text-purple-300 ml-1.5 underline decoration-purple-500/50 underline-offset-2 transition" href="#">
|
||||
Ссылка для изменения пароля.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Credentials Card -->
|
||||
<!-- BEGIN: Personal Information Section -->
|
||||
<div class="border border-[#1e293b] rounded-xl bg-[#131c2e] overflow-hidden shadow-lg">
|
||||
<div class="bg-[#172237] px-5 py-3 border-b border-[#1e293b]">
|
||||
<h3 class="text-sm font-bold uppercase tracking-wider text-slate-200">Персональная информация</h3>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<!-- First Name Field -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-slate-200 mb-1.5">Имя</label>
|
||||
<input class="w-full max-w-2xl bg-[#0d1524] border border-[#233149] focus:border-purple-500 focus:ring-1 focus:ring-purple-500 rounded-lg px-3.5 py-2 text-sm text-slate-100 placeholder-slate-500 shadow-inner outline-none transition" placeholder="Не указано" type="text"/>
|
||||
</div>
|
||||
<!-- Last Name Field -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-slate-200 mb-1.5">Фамилия</label>
|
||||
<input class="w-full max-w-2xl bg-[#0d1524] border border-[#233149] focus:border-purple-500 focus:ring-1 focus:ring-purple-500 rounded-lg px-3.5 py-2 text-sm text-slate-100 placeholder-slate-500 shadow-inner outline-none transition" placeholder="Не указано" type="text"/>
|
||||
</div>
|
||||
<!-- Email Field -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-slate-200 mb-1.5">Адрес электронной почты</label>
|
||||
<input class="w-full max-w-2xl bg-[#0d1524] border border-[#233149] focus:border-purple-500 focus:ring-1 focus:ring-purple-500 rounded-lg px-3.5 py-2 text-sm text-slate-100 shadow-inner outline-none transition" type="email" value="dimong4fox@yandex.ru"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Personal Information Section -->
|
||||
<!-- BEGIN: Permissions Section -->
|
||||
<div class="border border-[#1e293b] rounded-xl bg-[#131c2e] overflow-hidden shadow-lg">
|
||||
<div class="bg-[#172237] px-5 py-3 border-b border-[#1e293b]">
|
||||
<h3 class="text-sm font-bold uppercase tracking-wider text-slate-200">Права доступа</h3>
|
||||
</div>
|
||||
<div class="p-5 space-y-5">
|
||||
<!-- Switch: Active -->
|
||||
<div class="flex items-start space-x-3.5">
|
||||
<label class="custom-switch mt-0.5">
|
||||
<input checked="" type="checkbox"/>
|
||||
<span class="switch-slider"></span>
|
||||
</label>
|
||||
<div>
|
||||
<span class="text-sm font-semibold text-slate-100">Активный</span>
|
||||
<p class="text-xs text-slate-400 mt-0.5">
|
||||
Отметьте, если пользователь должен считаться активным. Уберите эту отметку вместо удаления учётной записи.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Switch: Staff Status -->
|
||||
<div class="flex items-start space-x-3.5">
|
||||
<label class="custom-switch mt-0.5">
|
||||
<input checked="" type="checkbox"/>
|
||||
<span class="switch-slider"></span>
|
||||
</label>
|
||||
<div>
|
||||
<span class="text-sm font-semibold text-slate-100">Статус персонала</span>
|
||||
<p class="text-xs text-slate-400 mt-0.5">
|
||||
Отметьте, если пользователь может входить в административную часть сайта.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Switch: Superuser Status -->
|
||||
<div class="flex items-start space-x-3.5">
|
||||
<label class="custom-switch mt-0.5">
|
||||
<input checked="" type="checkbox"/>
|
||||
<span class="switch-slider"></span>
|
||||
</label>
|
||||
<div>
|
||||
<span class="text-sm font-semibold text-slate-100">Статус суперпользователя</span>
|
||||
<p class="text-xs text-slate-400 mt-0.5">
|
||||
Указывает, что пользователь имеет все права без явного их назначения.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dual Listbox: Django Groups Widget -->
|
||||
<div class="pt-4 border-t border-[#1a253a]">
|
||||
<label class="block text-sm font-semibold text-slate-200 mb-3">Группы</label>
|
||||
<div class="flex flex-col md:flex-row items-stretch md:items-center gap-3">
|
||||
<!-- Available Groups Box -->
|
||||
<div class="flex-1 bg-[#0d1524] border border-[#223047] rounded-lg overflow-hidden flex flex-col h-72">
|
||||
<div class="bg-[#141d2e] px-3 py-2 border-b border-[#223047] text-xs font-semibold text-slate-300 flex justify-between items-center">
|
||||
<span>Доступные группы</span>
|
||||
<span class="text-[10px] text-slate-400 bg-slate-800 px-1.5 py-0.5 rounded">3</span>
|
||||
</div>
|
||||
<!-- Filter Search -->
|
||||
<div class="p-2 border-b border-[#1b2639]">
|
||||
<div class="relative">
|
||||
<input class="w-full bg-[#131c2e] border border-[#283853] text-xs text-slate-200 rounded py-1.5 pl-7 pr-2 focus:ring-1 focus:ring-purple-500 outline-none" placeholder="Фильтр" type="text"/>
|
||||
<svg class="w-3.5 h-3.5 text-slate-400 absolute left-2 top-2" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Options list -->
|
||||
<div class="flex-1 overflow-y-auto p-1.5 space-y-1 text-xs">
|
||||
<div class="px-2.5 py-1.5 rounded text-slate-300 hover:bg-[#1c2940] hover:text-white cursor-pointer select-none">
|
||||
Преподаватели математики
|
||||
</div>
|
||||
<div class="px-2.5 py-1.5 rounded text-slate-300 hover:bg-[#1c2940] hover:text-white cursor-pointer select-none">
|
||||
Кураторы курса
|
||||
</div>
|
||||
<div class="px-2.5 py-1.5 rounded text-slate-300 hover:bg-[#1c2940] hover:text-white cursor-pointer select-none">
|
||||
Методический отдел
|
||||
</div>
|
||||
</div>
|
||||
<!-- Select All footer -->
|
||||
<button class="border-t border-[#1b2639] py-2 text-xs font-medium text-purple-400 hover:text-purple-300 hover:bg-[#141f32] transition" type="button">
|
||||
Выбрать все
|
||||
</button>
|
||||
</div>
|
||||
<!-- Transfer Buttons -->
|
||||
<div class="flex md:flex-col justify-center items-center gap-2 py-1">
|
||||
<button class="p-2 rounded-lg bg-[#19243a] hover:bg-purple-600 text-slate-300 hover:text-white border border-[#273854] transition shadow-sm" title="Добавить выбранное" type="button">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="p-2 rounded-lg bg-[#19243a] hover:bg-purple-600 text-slate-300 hover:text-white border border-[#273854] transition shadow-sm" title="Убрать выбранное" type="button">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M10 19l-7-7m0 0l7-7m-7 7h18" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Chosen Groups Box -->
|
||||
<div class="flex-1 bg-[#0d1524] border border-[#223047] rounded-lg overflow-hidden flex flex-col h-72">
|
||||
<div class="bg-[#141d2e] px-3 py-2 border-b border-[#223047] text-xs font-semibold text-slate-300 flex justify-between items-center">
|
||||
<span>Выбранные группы</span>
|
||||
<button class="text-slate-400 hover:text-white" title="Создать группу" type="button">+</button>
|
||||
</div>
|
||||
<!-- Filter Search -->
|
||||
<div class="p-2 border-b border-[#1b2639]">
|
||||
<div class="relative">
|
||||
<input class="w-full bg-[#131c2e] border border-[#283853] text-xs text-slate-200 rounded py-1.5 pl-7 pr-2 focus:ring-1 focus:ring-purple-500 outline-none" placeholder="Фильтр" type="text"/>
|
||||
<svg class="w-3.5 h-3.5 text-slate-400 absolute left-2 top-2" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Options list empty / status -->
|
||||
<div class="flex-1 overflow-y-auto p-4 flex flex-col items-center justify-center text-center">
|
||||
<p class="text-xs text-slate-500 italic">
|
||||
0 выбранных объектов не видны (click to clear)
|
||||
</p>
|
||||
</div>
|
||||
<!-- Remove All footer -->
|
||||
<button class="border-t border-[#1b2639] py-2 text-xs font-medium text-rose-400 hover:text-rose-300 hover:bg-[#141f32] transition" type="button">
|
||||
Удалить все
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2.5 text-xs text-slate-400">
|
||||
Группы, к которым принадлежит данный пользователь. Пользователь получит все права, указанные в каждой из его/её групп. Удерживайте “Control“ (или “Command“ на Mac), чтобы выбрать несколько значений.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Permissions Section -->
|
||||
</form>
|
||||
</main>
|
||||
<!-- END: Scrollable Content Form -->
|
||||
<!-- BEGIN: Fixed Bottom Action Bar -->
|
||||
<footer class="fixed bottom-0 right-0 left-72 bg-[#0e1424]/95 backdrop-blur-md border-t border-[#1a253a] px-6 py-3 flex items-center justify-between z-30 shadow-2xl" data-purpose="django-submit-row">
|
||||
<!-- Delete Object Button (Danger zone) -->
|
||||
<div>
|
||||
<button class="px-4 py-2 text-xs font-semibold text-rose-300 hover:text-rose-100 bg-rose-950/40 hover:bg-rose-900/60 border border-rose-800/60 rounded-lg shadow-sm transition focus:ring-2 focus:ring-rose-500/40 focus:outline-none" type="button">
|
||||
Удалить Пользователь
|
||||
</button>
|
||||
</div>
|
||||
<!-- Submit Action Buttons -->
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<button class="px-3.5 py-2 text-xs font-medium text-slate-300 bg-[#162137] hover:bg-[#1e2c49] border border-slate-700/60 rounded-lg transition shadow-sm focus:outline-none" type="button">
|
||||
Сохранить и добавить другой объект
|
||||
</button>
|
||||
<button class="px-3.5 py-2 text-xs font-medium text-slate-300 bg-[#162137] hover:bg-[#1e2c49] border border-slate-700/60 rounded-lg transition shadow-sm focus:outline-none" type="button">
|
||||
Сохранить и продолжить редактирование
|
||||
</button>
|
||||
<button class="px-5 py-2 text-xs font-semibold text-white bg-purple-600 hover:bg-purple-500 active:bg-purple-700 rounded-lg shadow-md shadow-purple-900/40 border border-purple-500 transition focus:outline-none focus:ring-2 focus:ring-purple-400" type="submit">
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- END: Fixed Bottom Action Bar -->
|
||||
</div>
|
||||
<!-- END: Main Area -->
|
||||
</body></html>
|
||||
|
Before Width: | Height: | Size: 289 KiB |
@@ -1,464 +0,0 @@
|
||||
<!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>Изменить Пользователь Dimong (Ученик) | Администрирование Django</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"/>
|
||||
<!-- Tailwind CSS CDN with forms and container queries plugins -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['"Plus Jakarta Sans"', 'sans-serif'],
|
||||
heading: ['"Space Grotesk"', 'sans-serif'],
|
||||
mono: ['"JetBrains Mono"', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
obsidian: {
|
||||
base: '#0b0f17',
|
||||
surface: '#11131b',
|
||||
raised: '#191b23',
|
||||
card: '#161922',
|
||||
header: '#1d202b',
|
||||
input: '#12141c',
|
||||
border: '#2a2d39',
|
||||
borderSubtle: '#1f222d',
|
||||
},
|
||||
cobalt: {
|
||||
DEFAULT: '#2563eb',
|
||||
hover: '#1d4ed8',
|
||||
light: '#3b82f6',
|
||||
subtle: 'rgba(37, 99, 235, 0.12)',
|
||||
border: 'rgba(59, 130, 246, 0.35)',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style data-purpose="custom-scrollbars">
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #11131b;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2a2d39;
|
||||
border-radius: 2px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3b4052;
|
||||
}
|
||||
</style>
|
||||
<style data-purpose="ui-components">
|
||||
.custom-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
}
|
||||
.custom-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.switch-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #232733;
|
||||
border: 1px solid #2e313c;
|
||||
transition: .2s ease;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.switch-slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: #94a3b8;
|
||||
transition: .2s ease;
|
||||
border-radius: 50%;
|
||||
}
|
||||
input:checked + .switch-slider {
|
||||
background-color: #2563eb;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
input:checked + .switch-slider:before {
|
||||
transform: translateX(18px);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="h-full bg-[#0b0f17] text-slate-200 antialiased font-sans flex overflow-hidden selection:bg-blue-600 selection:text-white">
|
||||
<!-- BEGIN: Sidebar -->
|
||||
<aside class="w-72 bg-[#11131b] border-r border-[#2a2d39] flex flex-col flex-shrink-0 z-30 select-none" data-purpose="admin-sidebar">
|
||||
<!-- Sidebar Header / Django Branding -->
|
||||
<div class="px-5 py-4 border-b border-[#2a2d39] flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-8 h-8 rounded bg-[#2563eb] text-white flex items-center justify-center border border-blue-400/40">
|
||||
<svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" stroke-width="2" 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"></path>
|
||||
<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-heading font-semibold text-sm leading-snug tracking-tight text-white">Администрирование Django</h1>
|
||||
<span class="inline-flex items-center font-mono mt-0.5 px-2 py-0.5 rounded text-[10px] font-medium bg-[#191b23] text-blue-300 border border-blue-900/60">
|
||||
Окружение: Prod v5.1
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="p-1.5 rounded text-slate-400 hover:text-white hover:bg-[#191b23] border border-transparent hover:border-[#2a2d39] transition" title="Свернуть меню" type="button">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M11 19l-7-7 7-7m8 14l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Navigation Groups -->
|
||||
<nav class="flex-1 overflow-y-auto px-3.5 py-5 space-y-6">
|
||||
<!-- Section: LMS -->
|
||||
<div>
|
||||
<div class="px-2 mb-2 font-mono text-[11px] font-semibold tracking-wider text-slate-400 uppercase">
|
||||
Обучение (LMS)
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<a class="flex items-center justify-between px-3 py-2 text-sm font-medium text-slate-300 rounded hover:bg-[#191b23] hover:text-white transition" href="#">
|
||||
<span class="flex items-center">
|
||||
<svg class="w-4 h-4 mr-2.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" 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"></path>
|
||||
</svg>
|
||||
Задания
|
||||
</span>
|
||||
</a>
|
||||
<a class="flex items-center justify-between px-3 py-2 text-sm font-medium text-slate-300 rounded hover:bg-[#191b23] hover:text-white transition" href="#">
|
||||
<span class="flex items-center">
|
||||
<svg class="w-4 h-4 mr-2.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
Ответы учеников
|
||||
</span>
|
||||
</a>
|
||||
<a class="flex items-center justify-between px-3 py-2 text-sm font-medium text-slate-300 rounded hover:bg-[#191b23] hover:text-white transition" href="#">
|
||||
<span class="flex items-center">
|
||||
<svg class="w-4 h-4 mr-2.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
Предметы
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section: Users -->
|
||||
<div>
|
||||
<div class="px-2 mb-2 font-mono text-[11px] font-semibold tracking-wider text-slate-400 uppercase">
|
||||
Пользователи
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<a class="flex items-center justify-between px-3 py-2 text-sm font-medium text-blue-200 bg-[#191b23] rounded border border-blue-500/40" href="#">
|
||||
<span class="flex items-center">
|
||||
<svg class="w-4 h-4 mr-2.5 text-blue-400" fill="none" stroke="currentColor" stroke-width="2" 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"></path>
|
||||
</svg>
|
||||
Пользователи
|
||||
</span>
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-400"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- END: Sidebar -->
|
||||
<!-- BEGIN: Main Area -->
|
||||
<div class="flex-1 flex flex-col h-full overflow-hidden bg-[#0b0f17]">
|
||||
<!-- BEGIN: Top Navbar -->
|
||||
<header class="h-14 bg-[#11131b] border-b border-[#2a2d39] px-6 flex items-center justify-between flex-shrink-0 z-20" data-purpose="top-navigation">
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="flex items-center space-x-2 text-xs font-medium text-slate-300 font-sans">
|
||||
<a class="hover:text-blue-400 text-slate-300 transition flex items-center" href="#">
|
||||
<svg class="w-3.5 h-3.5 mr-1 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
Начало
|
||||
</a>
|
||||
<span class="text-slate-500">/</span>
|
||||
<a class="hover:text-blue-400 text-slate-300 transition" href="#">Пользователи</a>
|
||||
<span class="text-slate-500">/</span>
|
||||
<a class="hover:text-blue-400 text-slate-300 transition" href="#">Пользователи</a>
|
||||
<span class="text-slate-500">/</span>
|
||||
<span class="text-white font-semibold">Dimong (Ученик)</span>
|
||||
</nav>
|
||||
<!-- Right Header Actions -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Site Link -->
|
||||
<a class="hidden sm:inline-flex items-center text-xs font-medium text-slate-300 hover:text-blue-400 transition" href="#">
|
||||
<svg class="w-3.5 h-3.5 mr-1 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
Смотреть сайт LMS
|
||||
</a>
|
||||
<div class="h-4 w-px bg-[#2a2d39] hidden sm:block"></div>
|
||||
<!-- History Button -->
|
||||
<button class="inline-flex items-center px-2.5 py-1 text-xs font-medium text-slate-200 bg-[#191b23] hover:bg-[#23252f] border border-[#2a2d39] rounded transition" type="button">
|
||||
<svg class="w-3.5 h-3.5 mr-1.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" 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"></path>
|
||||
</svg>
|
||||
История
|
||||
</button>
|
||||
<!-- User Profile Pill -->
|
||||
<div class="flex items-center space-x-2 pl-2 border-l border-[#2a2d39]">
|
||||
<div class="w-7 h-7 rounded bg-[#2563eb] flex items-center justify-center font-bold text-xs text-white uppercase border border-blue-400/40">
|
||||
D
|
||||
</div>
|
||||
<div class="text-xs leading-tight">
|
||||
<span class="font-medium text-white block">Dimong</span>
|
||||
<span class="text-[10px] font-mono text-blue-400 block">Superuser</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Logout Button -->
|
||||
<button class="p-1.5 text-slate-400 hover:text-red-400 hover:bg-[#191b23] rounded transition" title="Выйти" type="button">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" 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"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- END: Top Navbar -->
|
||||
<!-- BEGIN: Scrollable Content Form -->
|
||||
<main class="flex-1 overflow-y-auto pb-28 px-6 lg:px-10 py-6" data-purpose="form-main-content">
|
||||
<!-- Page Title -->
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<h2 class="text-xl font-heading font-bold tracking-tight text-white flex items-center gap-3">
|
||||
<span>Изменить Пользователь Dimong (Ученик)</span>
|
||||
<span class="text-xs font-mono font-normal px-2.5 py-0.5 bg-[#191b23] border border-[#2a2d39] text-blue-300 rounded">ID: 1042</span>
|
||||
</h2>
|
||||
</div>
|
||||
<form class="space-y-6 max-w-6xl">
|
||||
<!-- BEGIN: Credentials Section -->
|
||||
<div class="bg-[#11131b] border border-[#2a2d39] rounded">
|
||||
<div class="bg-[#191b23] px-5 py-3 border-b border-[#2a2d39]">
|
||||
<h3 class="text-xs font-heading font-bold uppercase tracking-wider text-slate-200">Учетные данные</h3>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<!-- Username Field -->
|
||||
<div class="mb-5">
|
||||
<label class="block text-sm font-medium text-slate-200 mb-1.5 font-sans">
|
||||
Имя пользователя <span class="text-red-400 font-bold">*</span>
|
||||
</label>
|
||||
<input class="w-full max-w-2xl bg-[#191b23] border border-[#2a2d39] focus:border-blue-500 focus:ring-1 focus:ring-blue-500 rounded px-3.5 py-2 text-sm text-white placeholder-slate-400 outline-none transition" required="" type="text" value="Dimong"/>
|
||||
<p class="mt-1.5 text-xs text-slate-300">
|
||||
Обязательное поле. Не более 150 символов. Только буквы, цифры и символы @/./+/-/_.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Password Status Block -->
|
||||
<div class="pt-4 border-t border-[#2a2d39]">
|
||||
<label class="block text-sm font-medium text-slate-200 mb-1.5 font-sans">Пароль:</label>
|
||||
<div class="bg-[#191b23] border border-[#2a2d39] rounded p-3 text-xs font-mono text-slate-200 break-all leading-relaxed">
|
||||
<span class="text-blue-400 font-semibold">алгоритм:</span> pbkdf2_sha256
|
||||
<span class="text-blue-400 font-semibold ml-3">итерации:</span> 870000
|
||||
<span class="text-blue-400 font-semibold ml-3">соль:</span> M6Dksm********************
|
||||
<span class="text-blue-400 font-semibold ml-3">хэш:</span> xM3+5a7Gk9bL0rQ3Vz0A...
|
||||
</div>
|
||||
<p class="mt-1.5 text-xs text-slate-300 flex items-center flex-wrap gap-1">
|
||||
<span>Мы не храним сырые пароли, поэтому не существует способа посмотреть пароль пользователя.</span>
|
||||
<a class="text-blue-400 hover:text-blue-300 underline decoration-blue-500/60 underline-offset-2 transition" href="#">
|
||||
Ссылка для изменения пароля.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Credentials Section -->
|
||||
<!-- BEGIN: Personal Information Section -->
|
||||
<div class="bg-[#11131b] border border-[#2a2d39] rounded">
|
||||
<div class="bg-[#191b23] px-5 py-3 border-b border-[#2a2d39]">
|
||||
<h3 class="text-xs font-heading font-bold uppercase tracking-wider text-slate-200">Персональная информация</h3>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<!-- First Name Field -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-200 mb-1.5 font-sans">Имя</label>
|
||||
<input class="w-full max-w-2xl bg-[#191b23] border border-[#2a2d39] focus:border-blue-500 focus:ring-1 focus:ring-blue-500 rounded px-3.5 py-2 text-sm text-white placeholder-slate-400 outline-none transition" placeholder="Не указано" type="text"/>
|
||||
</div>
|
||||
<!-- Last Name Field -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-200 mb-1.5 font-sans">Фамилия</label>
|
||||
<input class="w-full max-w-2xl bg-[#191b23] border border-[#2a2d39] focus:border-blue-500 focus:ring-1 focus:ring-blue-500 rounded px-3.5 py-2 text-sm text-white placeholder-slate-400 outline-none transition" placeholder="Не указано" type="text"/>
|
||||
</div>
|
||||
<!-- Email Field -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-200 mb-1.5 font-sans">Адрес электронной почты</label>
|
||||
<input class="w-full max-w-2xl bg-[#191b23] border border-[#2a2d39] focus:border-blue-500 focus:ring-1 focus:ring-blue-500 rounded px-3.5 py-2 text-sm text-white outline-none transition" type="email" value="dimong4fox@yandex.ru"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Personal Information Section -->
|
||||
<!-- BEGIN: Permissions Section -->
|
||||
<div class="bg-[#11131b] border border-[#2a2d39] rounded">
|
||||
<div class="bg-[#191b23] px-5 py-3 border-b border-[#2a2d39]">
|
||||
<h3 class="text-xs font-heading font-bold uppercase tracking-wider text-slate-200">Права доступа</h3>
|
||||
</div>
|
||||
<div class="p-5 space-y-5">
|
||||
<!-- Switch: Active -->
|
||||
<div class="flex items-start space-x-3.5">
|
||||
<label class="custom-switch mt-0.5">
|
||||
<input checked="" type="checkbox"/>
|
||||
<span class="switch-slider"></span>
|
||||
</label>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-slate-100 font-sans">Активный</span>
|
||||
<p class="text-xs text-slate-300 mt-0.5">
|
||||
Отметьте, если пользователь должен считаться активным. Уберите эту отметку вместо удаления учётной записи.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Switch: Staff Status -->
|
||||
<div class="flex items-start space-x-3.5">
|
||||
<label class="custom-switch mt-0.5">
|
||||
<input checked="" type="checkbox"/>
|
||||
<span class="switch-slider"></span>
|
||||
</label>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-slate-100 font-sans">Статус персонала</span>
|
||||
<p class="text-xs text-slate-300 mt-0.5">
|
||||
Отметьте, если пользователь может входить в административную часть сайта.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Switch: Superuser Status -->
|
||||
<div class="flex items-start space-x-3.5">
|
||||
<label class="custom-switch mt-0.5">
|
||||
<input checked="" type="checkbox"/>
|
||||
<span class="switch-slider"></span>
|
||||
</label>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-slate-100 font-sans">Статус суперпользователя</span>
|
||||
<p class="text-xs text-slate-300 mt-0.5">
|
||||
Указывает, что пользователь имеет все права без явного их назначения.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dual Listbox: Django Groups Widget -->
|
||||
<div class="pt-4 border-t border-[#2a2d39]">
|
||||
<label class="block text-sm font-medium text-slate-200 mb-3 font-sans">Группы</label>
|
||||
<div class="flex flex-col md:flex-row items-stretch md:items-center gap-3">
|
||||
<!-- Available Groups Box -->
|
||||
<div class="flex-1 bg-[#191b23] border border-[#2a2d39] rounded flex flex-col h-72">
|
||||
<div class="bg-[#1d202b] px-3 py-2 border-b border-[#2a2d39] text-xs font-medium text-slate-200 flex justify-between items-center">
|
||||
<span>Доступные группы</span>
|
||||
<span class="text-[10px] font-mono text-slate-300 bg-[#11131b] border border-[#2a2d39] px-1.5 py-0.5 rounded">3</span>
|
||||
</div>
|
||||
<!-- Filter Search -->
|
||||
<div class="p-2 border-b border-[#2a2d39] bg-[#11131b]">
|
||||
<div class="relative">
|
||||
<input class="w-full bg-[#191b23] border border-[#2a2d39] text-xs text-slate-100 rounded py-1.5 pl-7 pr-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none placeholder-slate-400" placeholder="Фильтр" type="text"/>
|
||||
<svg class="w-3.5 h-3.5 text-slate-400 absolute left-2 top-2" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Options list -->
|
||||
<div class="flex-1 overflow-y-auto p-1.5 space-y-1 text-xs">
|
||||
<div class="px-2.5 py-1.5 rounded text-slate-200 hover:bg-[#23252f] hover:text-white cursor-pointer select-none">
|
||||
Преподаватели математики
|
||||
</div>
|
||||
<div class="px-2.5 py-1.5 rounded text-slate-200 hover:bg-[#23252f] hover:text-white cursor-pointer select-none">
|
||||
Кураторы курса
|
||||
</div>
|
||||
<div class="px-2.5 py-1.5 rounded text-slate-200 hover:bg-[#23252f] hover:text-white cursor-pointer select-none">
|
||||
Методический отдел
|
||||
</div>
|
||||
</div>
|
||||
<!-- Select All footer -->
|
||||
<button class="border-t border-[#2a2d39] py-2 text-xs font-medium text-blue-400 hover:text-blue-300 hover:bg-[#1d202b] transition" type="button">
|
||||
Выбрать все
|
||||
</button>
|
||||
</div>
|
||||
<!-- Transfer Buttons -->
|
||||
<div class="flex md:flex-col justify-center items-center gap-2 py-1">
|
||||
<button class="p-2 rounded bg-[#191b23] hover:bg-[#2563eb] text-slate-300 hover:text-white border border-[#2a2d39] hover:border-blue-400 transition" title="Добавить выбранное" type="button">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="p-2 rounded bg-[#191b23] hover:bg-[#2563eb] text-slate-300 hover:text-white border border-[#2a2d39] hover:border-blue-400 transition" title="Убрать выбранное" type="button">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M10 19l-7-7m0 0l7-7m-7 7h18" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Chosen Groups Box -->
|
||||
<div class="flex-1 bg-[#191b23] border border-[#2a2d39] rounded flex flex-col h-72">
|
||||
<div class="bg-[#1d202b] px-3 py-2 border-b border-[#2a2d39] text-xs font-medium text-slate-200 flex justify-between items-center">
|
||||
<span>Выбранные группы</span>
|
||||
<button class="text-slate-400 hover:text-white font-mono" title="Создать группу" type="button">+</button>
|
||||
</div>
|
||||
<!-- Filter Search -->
|
||||
<div class="p-2 border-b border-[#2a2d39] bg-[#11131b]">
|
||||
<div class="relative">
|
||||
<input class="w-full bg-[#191b23] border border-[#2a2d39] text-xs text-slate-100 rounded py-1.5 pl-7 pr-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none placeholder-slate-400" placeholder="Фильтр" type="text"/>
|
||||
<svg class="w-3.5 h-3.5 text-slate-400 absolute left-2 top-2" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24">
|
||||
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Options list empty / status -->
|
||||
<div class="flex-1 overflow-y-auto p-4 flex flex-col items-center justify-center text-center">
|
||||
<p class="text-xs text-slate-400 font-mono">
|
||||
0 выбранных объектов (click to clear)
|
||||
</p>
|
||||
</div>
|
||||
<!-- Remove All footer -->
|
||||
<button class="border-t border-[#2a2d39] py-2 text-xs font-medium text-red-400 hover:text-red-300 hover:bg-[#1d202b] transition" type="button">
|
||||
Удалить все
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2.5 text-xs text-slate-300">
|
||||
Группы, к которым принадлежит данный пользователь. Пользователь получит все права, указанные в каждой из его/её групп. Удерживайте “Control“ (или “Command“ на Mac), чтобы выбрать несколько значений.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Permissions Section -->
|
||||
</form>
|
||||
</main>
|
||||
<!-- END: Scrollable Content Form -->
|
||||
<!-- BEGIN: Fixed Bottom Action Bar -->
|
||||
<footer class="fixed bottom-0 right-0 left-72 bg-[#11131b] border-t border-[#2a2d39] px-6 py-3 flex items-center justify-between z-30 shadow-none" data-purpose="django-submit-row">
|
||||
<!-- Delete Object Button (Danger zone) -->
|
||||
<div>
|
||||
<button class="px-4 py-2 text-xs font-medium text-red-300 hover:text-white bg-[#ef4444]/15 hover:bg-[#ef4444]/25 border border-red-500/40 rounded transition focus:ring-1 focus:ring-red-500 focus:outline-none" type="button">
|
||||
Удалить Пользователь
|
||||
</button>
|
||||
</div>
|
||||
<!-- Submit Action Buttons -->
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<button class="px-3.5 py-2 text-xs font-medium text-slate-200 bg-[#191b23] hover:bg-[#23252f] border border-[#2a2d39] rounded transition focus:outline-none" type="button">
|
||||
Сохранить и добавить другой объект
|
||||
</button>
|
||||
<button class="px-3.5 py-2 text-xs font-medium text-slate-200 bg-[#191b23] hover:bg-[#23252f] border border-[#2a2d39] rounded transition focus:outline-none" type="button">
|
||||
Сохранить и продолжить редактирование
|
||||
</button>
|
||||
<button class="px-5 py-2 text-xs font-semibold text-white bg-[#2563eb] hover:bg-[#1d4ed8] active:bg-[#1e40af] rounded border border-blue-400/50 transition focus:outline-none focus:ring-1 focus:ring-blue-400" type="submit">
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- END: Fixed Bottom Action Bar -->
|
||||
</div>
|
||||
<!-- END: Main Area -->
|
||||
</body></html>
|
||||
|
Before Width: | Height: | Size: 254 KiB |
@@ -1,472 +0,0 @@
|
||||
<!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>
|
||||
|
Before Width: | Height: | Size: 383 KiB |
@@ -1,352 +0,0 @@
|
||||
<!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&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&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>
|
||||
|
Before Width: | Height: | Size: 193 KiB |
@@ -1,229 +0,0 @@
|
||||
---
|
||||
name: Obsidian Scholar
|
||||
colors:
|
||||
surface: '#0c1322'
|
||||
surface-dim: '#0c1322'
|
||||
surface-bright: '#323949'
|
||||
surface-container-lowest: '#070e1d'
|
||||
surface-container-low: '#141b2b'
|
||||
surface-container: '#191f2f'
|
||||
surface-container-high: '#232a3a'
|
||||
surface-container-highest: '#2e3545'
|
||||
on-surface: '#dce2f7'
|
||||
on-surface-variant: '#c7c4d7'
|
||||
inverse-surface: '#dce2f7'
|
||||
inverse-on-surface: '#293040'
|
||||
outline: '#908fa0'
|
||||
outline-variant: '#464554'
|
||||
surface-tint: '#c0c1ff'
|
||||
primary: '#c0c1ff'
|
||||
on-primary: '#1000a9'
|
||||
primary-container: '#8083ff'
|
||||
on-primary-container: '#0d0096'
|
||||
inverse-primary: '#494bd6'
|
||||
secondary: '#4cd7f6'
|
||||
on-secondary: '#003640'
|
||||
secondary-container: '#03b5d3'
|
||||
on-secondary-container: '#00424e'
|
||||
tertiary: '#4edea3'
|
||||
on-tertiary: '#003824'
|
||||
tertiary-container: '#00885d'
|
||||
on-tertiary-container: '#000703'
|
||||
error: '#ffb4ab'
|
||||
on-error: '#690005'
|
||||
error-container: '#93000a'
|
||||
on-error-container: '#ffdad6'
|
||||
primary-fixed: '#e1e0ff'
|
||||
primary-fixed-dim: '#c0c1ff'
|
||||
on-primary-fixed: '#07006c'
|
||||
on-primary-fixed-variant: '#2f2ebe'
|
||||
secondary-fixed: '#acedff'
|
||||
secondary-fixed-dim: '#4cd7f6'
|
||||
on-secondary-fixed: '#001f26'
|
||||
on-secondary-fixed-variant: '#004e5c'
|
||||
tertiary-fixed: '#6ffbbe'
|
||||
tertiary-fixed-dim: '#4edea3'
|
||||
on-tertiary-fixed: '#002113'
|
||||
on-tertiary-fixed-variant: '#005236'
|
||||
background: '#0c1322'
|
||||
on-background: '#dce2f7'
|
||||
surface-variant: '#2e3545'
|
||||
typography:
|
||||
display-lg:
|
||||
fontFamily: Inter
|
||||
fontSize: 40px
|
||||
fontWeight: '700'
|
||||
lineHeight: 48px
|
||||
letterSpacing: -0.02em
|
||||
display-lg-mobile:
|
||||
fontFamily: Inter
|
||||
fontSize: 30px
|
||||
fontWeight: '700'
|
||||
lineHeight: 38px
|
||||
letterSpacing: -0.02em
|
||||
headline-lg:
|
||||
fontFamily: Inter
|
||||
fontSize: 28px
|
||||
fontWeight: '600'
|
||||
lineHeight: 36px
|
||||
letterSpacing: -0.015em
|
||||
headline-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 22px
|
||||
fontWeight: '600'
|
||||
lineHeight: 30px
|
||||
letterSpacing: -0.01em
|
||||
headline-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 18px
|
||||
fontWeight: '600'
|
||||
lineHeight: 26px
|
||||
body-lg:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: 26px
|
||||
body-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: '400'
|
||||
lineHeight: 22px
|
||||
body-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 12px
|
||||
fontWeight: '400'
|
||||
lineHeight: 18px
|
||||
label-lg:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: '500'
|
||||
lineHeight: 20px
|
||||
label-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 12px
|
||||
fontWeight: '500'
|
||||
lineHeight: 16px
|
||||
label-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 11px
|
||||
fontWeight: '600'
|
||||
lineHeight: 14px
|
||||
letterSpacing: 0.04em
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
gutter: 1.5rem
|
||||
gutter-sm: 1rem
|
||||
margin: 2rem
|
||||
margin-sm: 1rem
|
||||
space-xs: 0.25rem
|
||||
space-sm: 0.5rem
|
||||
space-md: 1rem
|
||||
space-lg: 1.5rem
|
||||
space-xl: 2rem
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
The design system is crafted for high-focus, continuous digital learning environments. The brand personality is intellectually rigorous, calm, and technically refined. It targets lifelong learners, software engineers, researchers, and university cohorts who spend sustained hours inside complex course structures, code terminals, and instructional video workflows.
|
||||
|
||||
The visual style unites modern high-contrast ergonomics with subtle depth:
|
||||
- **Obsidian Dark Architecture:** Minimal cognitive fatigue through deep slate backgrounds that eliminate glare during late-night study sessions.
|
||||
- **Electric Precision:** High-chroma indigo, violet, and cybernetic cyan used strictly as functional beacons for completion states, active curricula, and milestones.
|
||||
- **Editorial Cleanliness:** Utilitarian UI structure inspired by contemporary developer environments and elite knowledge bases, balancing data density with breathable information hierarchies.
|
||||
|
||||
## Colors
|
||||
|
||||
The palette is engineered specifically for contrast compliance and reduced ocular fatigue in dark environments.
|
||||
|
||||
### Role Assignments
|
||||
- **Canvas Base (`#0B0F19`):** Deep obsidian abyss used exclusively for root canvas backdrops.
|
||||
- **Surface Elevation 1 (`#111827`):** Slate surface for primary panels, module drawers, and main container cards.
|
||||
- **Surface Elevation 2 (`#1F2937`):** Elevated utility surfaces, hover interactions, dropdown menus, and active rows.
|
||||
- **Borders & Dividers (`#374151`):** Structural delineation ensuring distinct separation without harsh luminance.
|
||||
- **Primary Indigo (`#6366F1` / `#4F46E5`):** Key interactive focal points, primary action triggers, and primary progress indicators.
|
||||
- **Secondary Cyan (`#06B6D4`):** Live session indicators, active telemetry, code highlights, and granular metric progress.
|
||||
- **Tertiary Emerald (`#10B981`):** Module completion badges, passing test scores, and positive system feedback.
|
||||
- **Text Primary (`#F9FAFB`):** 98% brightness neutral for instant legibility in body copy and core headings.
|
||||
- **Text Muted (`#9CA3AF`):** Subtext, metadata tags, syllabus timestamps, and secondary captions.
|
||||
|
||||
## Typography
|
||||
|
||||
Typography relies entirely on **Inter** to ensure maximum typographic neutrality, precision, and tall x-height clarity. Numerical tracking is balanced with tabular figures (`tnum`) across gradebooks, timestamps, and progress percentages.
|
||||
|
||||
### Hierarchical Usage
|
||||
- **Display & Headings:** Tighter negative tracking (`-0.02em` to `-0.01em`) provides crisp, structural presence for course titles and dashboard metrics.
|
||||
- **Body:** Standard tracking with relaxed leading (`1.6` multiplier) prevents visual crowding across technical documentation, code explanations, and reading units.
|
||||
- **Labels & Microcopy:** Positive letter-spacing applied exclusively to all-caps indicators (`label-sm`), such as prerequisites, module categories, and dynamic status tokens.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The layout is built on an adaptive 12-column fluid grid tailored for dashboard analytics, video-to-notes split screens, and modular curriculum sidebars.
|
||||
|
||||
### Grid & Breakpoints
|
||||
- **Desktop (≥1280px):** 12 columns, 24px (`1.5rem`) gutters, 32px (`2rem`) margins. Allows fixed 280px navigation rail with flexible multi-pane learning panels.
|
||||
- **Tablet (768px - 1279px):** 8 columns, 16px (`1rem`) gutters, 24px (`1.5rem`) margins. Navigation shifts to a collapsible off-canvas drawer; video and curriculum switch to stacked flex layout.
|
||||
- **Mobile (<768px):** 4 columns, 16px (`1rem`) gutters, 16px (`1rem`) margins. Full width card stacking with sticky bottom progress controls.
|
||||
|
||||
### Density Rhythm
|
||||
A strict 4px/8px incremental rhythm governs all component interiors:
|
||||
- Compact data tables and code modules use `space-xs` (4px) and `space-sm` (8px).
|
||||
- General forms and card paddings apply `space-md` (16px) and `space-lg` (24px).
|
||||
- Section breaks between independent curriculum blocks use `space-xl` (32px).
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
Visual hierarchy does not rely on intense blur dropshadows, which generate mud on dark backgrounds. Instead, depth is achieved through **tonal layering**, **specular edge highlights**, and **micro-glow accents**.
|
||||
|
||||
### Elevation Stack
|
||||
- **Level 0 (Canvas Base):** Solid `#0B0F19`. No borders or elevation.
|
||||
- **Level 1 (Card & Module Layer):** Solid `#111827` framed by a 1px continuous border of `#374151`.
|
||||
- **Level 2 (Dropdowns, Overlays, Active Panels):** Solid `#1F2937` with a 1px border of `rgba(99, 102, 241, 0.25)` and a subtle ambient shadow: `0 10px 25px -5px rgba(0, 0, 0, 0.60), 0 8px 10px -6px rgba(0, 0, 0, 0.50)`.
|
||||
- **Level 3 (Modals & Command Palettes):** Layered above `#0B0F19` with a 60% opacity backdrop blur (`backdrop-filter: blur(12px)`), framed with a prominent border of `#4B5563`.
|
||||
|
||||
### Interactive Illumination
|
||||
Interactive elements receive a subtle, directional glow upon focus and hover:
|
||||
- Interactive cards elevate on hover using an electric border transition from `#374151` to `rgba(99, 102, 241, 0.5)` alongside an ambient indigo bloom: `box-shadow: 0 0 20px -5px rgba(99, 102, 241, 0.15)`.
|
||||
|
||||
## Shapes
|
||||
|
||||
The design system implements balanced geometric softening. Core cards utilize `rounded-xl` (1.5rem / 24px) to balance technical precision with high-end digital polish.
|
||||
|
||||
### Shape Hierarchy
|
||||
- **Standard Controls (Inputs, Buttons, Badges):** 8px (`0.5rem`) radius for sharp, dependable affordance.
|
||||
- **Cards & Data Modules:** 16px to 24px (`1rem` to `1.5rem` / `rounded-xl`) radius to enclose complex information chunks gracefully.
|
||||
- **System Badges & Avatar Containers:** Fully pill-shaped (`9999px`) for quick-scan biometric and enrollment tags.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
- **Primary:** Background `#6366F1`, text `#FFFFFF`, font `label-lg`. On hover: `#4F46E5` with subtle box-shadow bloom `0 0 16px rgba(99, 102, 241, 0.35)`.
|
||||
- **Secondary / Ghost:** Background `transparent`, border 1px solid `#374151`, text `#F9FAFB`. On hover: background `#1F2937`, border `#4B5563`.
|
||||
- **Destructive:** Background `rgba(239, 68, 68, 0.1)`, border 1px solid `rgba(239, 68, 68, 0.3)`, text `#EF4444`.
|
||||
|
||||
### Cards & Lesson Units
|
||||
- **Container:** Background `#111827`, border 1px solid `#374151`, border-radius `1.5rem` (`rounded-xl`), interior padding `space-lg` (24px).
|
||||
- **Interactive State:** Hover produces a smooth 150ms transition shifting border to `rgba(99, 102, 241, 0.45)` and translates Y by -2px.
|
||||
|
||||
### Progress Trackers & Metric Bars
|
||||
- **Track Base:** Height 6px to 8px, background `#1F2937`, border-radius 9999px.
|
||||
- **Indicator Fill:** High-contrast gradient or solid `#06B6D4` (Cyan) for in-flight tasks; `#10B981` (Emerald) when reached 100%. Optional electric shimmer effect during active background asset compilation.
|
||||
|
||||
### Badges & Status Chips
|
||||
- **In Progress:** Background `rgba(6, 182, 212, 0.1)`, border 1px solid `rgba(6, 182, 212, 0.3)`, text `#06B6D4`.
|
||||
- **Completed:** Background `rgba(16, 185, 129, 0.1)`, border 1px solid `rgba(16, 185, 129, 0.3)`, text `#10B981`.
|
||||
- **Prerequisite / Locked:** Background `rgba(55, 65, 81, 0.5)`, border 1px solid `#374151`, text `#9CA3AF`.
|
||||
|
||||
### Input Fields & Search Bars
|
||||
- **Default:** Background `#0B0F19`, border 1px solid `#374151`, text `#F9FAFB`, placeholder `#6B7280`, radius 8px, padding 10px 14px.
|
||||
- **Focus:** Border shifts to `#6366F1`, outline 2px solid `rgba(99, 102, 241, 0.2)`.
|
||||
|
||||
### Lists & Syllabus Trees
|
||||
- **Row Architecture:** Flex layout with bottom divider `#1F2937`.
|
||||
- **Active Lesson Item:** Background `rgba(99, 102, 241, 0.08)`, border-left 3px solid `#6366F1`, text `#F9FAFB` with font `label-lg`.
|
||||
- **Checkboxes:** 18px square, background `#0B0F19`, border 1.5px solid `#4B5563`, radius 4px. Checked state transitions to solid `#6366F1` background with white checkmark icon.
|
||||
@@ -1,264 +0,0 @@
|
||||
---
|
||||
name: Technical Obsidian
|
||||
colors:
|
||||
surface: '#11131b'
|
||||
surface-dim: '#11131b'
|
||||
surface-bright: '#373942'
|
||||
surface-container-lowest: '#0c0e16'
|
||||
surface-container-low: '#191b23'
|
||||
surface-container: '#1d1f27'
|
||||
surface-container-high: '#282a32'
|
||||
surface-container-highest: '#32343d'
|
||||
on-surface: '#e1e2ed'
|
||||
on-surface-variant: '#c3c6d7'
|
||||
inverse-surface: '#e1e2ed'
|
||||
inverse-on-surface: '#2e3039'
|
||||
outline: '#8d90a0'
|
||||
outline-variant: '#434655'
|
||||
surface-tint: '#b4c5ff'
|
||||
primary: '#b4c5ff'
|
||||
on-primary: '#002a78'
|
||||
primary-container: '#2563eb'
|
||||
on-primary-container: '#eeefff'
|
||||
inverse-primary: '#0053db'
|
||||
secondary: '#6bd8cb'
|
||||
on-secondary: '#003732'
|
||||
secondary-container: '#29a195'
|
||||
on-secondary-container: '#00302b'
|
||||
tertiary: '#ffb596'
|
||||
on-tertiary: '#581e00'
|
||||
tertiary-container: '#bc4800'
|
||||
on-tertiary-container: '#ffede6'
|
||||
error: '#ffb4ab'
|
||||
on-error: '#690005'
|
||||
error-container: '#93000a'
|
||||
on-error-container: '#ffdad6'
|
||||
primary-fixed: '#dbe1ff'
|
||||
primary-fixed-dim: '#b4c5ff'
|
||||
on-primary-fixed: '#00174b'
|
||||
on-primary-fixed-variant: '#003ea8'
|
||||
secondary-fixed: '#89f5e7'
|
||||
secondary-fixed-dim: '#6bd8cb'
|
||||
on-secondary-fixed: '#00201d'
|
||||
on-secondary-fixed-variant: '#005049'
|
||||
tertiary-fixed: '#ffdbcd'
|
||||
tertiary-fixed-dim: '#ffb596'
|
||||
on-tertiary-fixed: '#360f00'
|
||||
on-tertiary-fixed-variant: '#7d2d00'
|
||||
background: '#11131b'
|
||||
on-background: '#e1e2ed'
|
||||
surface-variant: '#32343d'
|
||||
canvas-base: '#0B0F17'
|
||||
surface-subtle: '#111827'
|
||||
surface-panel: '#182234'
|
||||
surface-raised: '#1E293B'
|
||||
border-hairline: '#1E293B'
|
||||
border-active: '#334155'
|
||||
text-primary: '#F1F5F9'
|
||||
text-secondary: '#94A3B8'
|
||||
text-faint: '#64748B'
|
||||
accent-blue-vibrant: '#3B82F6'
|
||||
status-emerald: '#10B981'
|
||||
status-amber: '#F59E0B'
|
||||
status-rose: '#F43F5E'
|
||||
typography:
|
||||
display-hero:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 44px
|
||||
fontWeight: '600'
|
||||
lineHeight: 52px
|
||||
letterSpacing: -0.03em
|
||||
display-hero-mobile:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 32px
|
||||
fontWeight: '600'
|
||||
lineHeight: 40px
|
||||
letterSpacing: -0.02em
|
||||
headline-lg:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 26px
|
||||
fontWeight: '600'
|
||||
lineHeight: 34px
|
||||
letterSpacing: -0.02em
|
||||
headline-md:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 20px
|
||||
fontWeight: '600'
|
||||
lineHeight: 28px
|
||||
letterSpacing: -0.01em
|
||||
headline-sm:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 16px
|
||||
fontWeight: '600'
|
||||
lineHeight: 24px
|
||||
letterSpacing: 0em
|
||||
body-lead:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: 26px
|
||||
body-default:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 14px
|
||||
fontWeight: '400'
|
||||
lineHeight: 22px
|
||||
body-compact:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 13px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
label-ui:
|
||||
fontFamily: Plus Jakarta Sans
|
||||
fontSize: 13px
|
||||
fontWeight: '500'
|
||||
lineHeight: 18px
|
||||
code-base:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 13px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
meta-tag:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 11px
|
||||
fontWeight: '500'
|
||||
lineHeight: 16px
|
||||
letterSpacing: 0.04em
|
||||
eyebrow-caps:
|
||||
fontFamily: JetBrains Mono
|
||||
fontSize: 10px
|
||||
fontWeight: '600'
|
||||
lineHeight: 14px
|
||||
letterSpacing: 0.15em
|
||||
rounded:
|
||||
sm: 0.125rem
|
||||
DEFAULT: 0.25rem
|
||||
md: 0.375rem
|
||||
lg: 0.5rem
|
||||
xl: 0.75rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
gutter: 1rem
|
||||
gutter-desktop: 1.5rem
|
||||
margin: 1rem
|
||||
margin-tablet: 1.5rem
|
||||
margin-desktop: 2rem
|
||||
space-xs: 0.25rem
|
||||
space-sm: 0.5rem
|
||||
space-md: 1rem
|
||||
space-lg: 1.5rem
|
||||
space-xl: 2rem
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
This design system is engineered for high-density, analytical technical environments, LMS interfaces, and administrative data planes. Built with rigorous restraint, it treats software as precision tooling rather than decorative theater.
|
||||
|
||||
### Core Tenets
|
||||
- **Elimination of Synthetic Clichés:** Strictly prohibits AI-aesthetic markers: purple-to-blue gradients, electric violet glow rings, floating glassmorphism panes, and arbitrary card-in-card enclosures.
|
||||
- **Deep Slate & Tinted Minerals:** Built on graphite and tinted midnight slate tones (`#0B0F17`, `#111827`, `#1E293B`). Pure absolute black (`#000000`) is banned to eliminate excessive contrast fatigue, while glare is avoided entirely.
|
||||
- **Instrumental Density:** UI surfaces echo high-end developer terminals, database explorers, and editorial command decks. Content hierarchy is achieved through alignment, typographic weight, and hairlines rather than heavy drop shadows or rounded padding bubbles.
|
||||
- **Audience:** Built for software engineers, operations researchers, curriculum architects, and technical administrators who spend uninterrupted hours parsing code, data structures, and systemic logs.
|
||||
|
||||
## Colors
|
||||
|
||||
The color palette is built on deep slate neutrals, high-contrast text, and single-purpose semantic accents.
|
||||
|
||||
### Neutral Ramp (Slate & Midnight)
|
||||
- **Canvas Base (`#0B0F17`):** The root page ground. Non-reflective, deeply mineral, preventing glare.
|
||||
- **Surface Subtle (`#111827`):** Inset table wells, terminal panes, and row-level backgrounds.
|
||||
- **Surface Panel (`#182234`):** Primary operational tiles, sidebars, and command panels.
|
||||
- **Surface Raised (`#1E293B`):** Interactive utility rows, dropdown menus, context controls.
|
||||
- **Border Hairline (`#1E293B`):** Structural 1px division rules.
|
||||
- **Border Active (`#334155`):** Focused states, active headers, table bounding edges.
|
||||
|
||||
### Brand & Functional Roles
|
||||
- **Technical Cobalt (`#2563EB` / `#3B82F6`):** Primary interactive CTA elements, selected row indicators, and focused inputs. Always exceeds WCAG AAA/AA 4.5:1 against slate backgrounds.
|
||||
- **Verdigris Secondary (`#0D9488`):** Deep secondary state anchor used for telemetry metadata, secondary filters, and operational counters.
|
||||
- **Functional Semantics:**
|
||||
- `status-emerald` (`#10B981`): Verified, passed tests, successfully compiled.
|
||||
- `status-amber` (`#F59E0B`): Pending manual review, non-blocking warning, build running.
|
||||
- `status-rose` (`#F43F5E`): Overdue items, syntax error, failed pipeline, critical blocker.
|
||||
|
||||
Color is functional: no colored glow shadows or gradient fills are allowed.
|
||||
|
||||
## Typography
|
||||
|
||||
Typography pairs geometric clarity with utilitarian monospace precision, eliminating generic UI type defaults.
|
||||
|
||||
### Type Pairings
|
||||
- **Space Grotesk (Display & Section Headers):** Delivers clean technical architecture to titles, modal headers, and summary statistics. Negative tracking (`-0.03em` to `-0.01em`) provides structured anchor points.
|
||||
- **Plus Jakarta Sans (UI Chrome & Prose Content):** Optimally balanced geometric humanist sans for high-readability body copy, syllabus manifests, notes, and form controls.
|
||||
- **JetBrains Mono (System Telemetry & Data):** Reserved for technical data: model hashes, execution runtimes, commit refs, student IDs, status tokens, and numerical tables.
|
||||
|
||||
### Rules of Application
|
||||
1. **Numeric Tabular Alignment:** All tabular views, grade listings, and metric counts must enforce `font-variant-numeric: tabular-nums`.
|
||||
2. **Eyebrow Caps:** Monospace labels sized at 10px or 11px must be written in uppercase with tracked letterforms (`letter-spacing: 0.15em`). Never apply this to full sentences.
|
||||
3. **Leading Allowance:** Body text on dark slate surfaces must maintain loose leading (minimum 1.55 multiplier) to maintain legibility during sustained reading.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The layout is built on a 12-column grid designed for data-heavy administrative surfaces, documentation sidebars, split-screen code runners, and dashboard tables.
|
||||
|
||||
### Grid & Density Structure
|
||||
- **No Container Nesting:** Avoid wrapping elements in redundant containers (e.g. cards inside cards). Group items using flat 1px hairlines, tabular rows, or alternating background tints.
|
||||
- **Horizontal & Vertical Rhythm:**
|
||||
- `space-xs` (4px) and `space-sm` (8px): Dense data tables, status chip margins, input field inner padding.
|
||||
- `space-md` (16px): Standard gap between data rows, breadcrumbs, and toolbars.
|
||||
- `space-lg` (24px): Boundary padding for major dashboard panels.
|
||||
- `space-xl` (32px): Major vertical section separation.
|
||||
|
||||
### Screen Adaptations
|
||||
- **Desktop (≥1280px):** 12 columns, 24px gutters, max layout container width 1440px. Fixed 240px or 280px sidebar navigation with flexible content space.
|
||||
- **Tablet (768px - 1279px):** 8 columns, 16px gutters, 24px margins. Navigation shifts to a compact icon strip or off-canvas drawer.
|
||||
- **Mobile (<768px):** 4 columns, 16px gutters, 16px margins. Full-width panel stacking with direct access to primary action bars.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
Depth is defined through surface value shifts, hairline borders, and strict planar elevation rather than soft diffused blurs or neon cast lights.
|
||||
|
||||
### Principles of Depth
|
||||
- **Zero Cast Shadow on Flat Canvas:** Elements sitting on the root canvas avoid heavy drop shadows. They delineate via a 1px hairline border (`#1E293B`) or a value shift (`#111827`).
|
||||
- **No Electric or Colored Glow:** Ambient shadows must never use primary blue or accent tints. Glow effects are excluded entirely.
|
||||
- **Structural Elevation Tiers:**
|
||||
- **Tier 0 (Root Page Base):** `#0B0F17`.
|
||||
- **Tier 1 (Surface Panel):** `#182234` with 1px border `#1E293B`. Used for dashboard widgets, code viewers, and content groups.
|
||||
- **Tier 2 (Popovers, Dropdowns, Command Menus):** `#1E293B` with 1px border `#334155` and a tight neutral shadow: `box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.5)`.
|
||||
- **Tier 3 (Modals & Focus Dialogs):** `#111827` surface with a crisp 1px `#334155` border, suspended over a `#0B0F17` backdrop at 80% opacity (`backdrop-filter: blur(4px)`).
|
||||
|
||||
## Shapes
|
||||
|
||||
The design system uses a strict, compact corner radius (`roundedness: 1`). Large circular radii and pill-shaped container cards are replaced with sharp, engineered corners that maximize usable content space.
|
||||
|
||||
### Radius Architecture
|
||||
- **Buttons, Inputs, Controls:** `4px` (`0.25rem`) for a clean, instrument-like feel.
|
||||
- **Panels, Modals, Bounded Frames:** `8px` (`0.5rem`) maximum. Sharp boundary containment without soft bulbous edges.
|
||||
- **Code Snippets, Badges, Inline Code:** `3px` or `4px` for tight wrapping around monospace glyphs.
|
||||
- **Avatar & Biometric Status:** Standard circle (`9999px`) allowed exclusively for user portraits and binary live-status indicators.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
- **Primary:** Solid `#2563EB`, text `#FFFFFF`, font `label-ui` (weight 500), border 1px solid `#3B82F6`, border-radius 4px, height 36px (dense: 32px), padding 0 14px. On hover: `#1D4ED8`. No colored drop-shadow glow.
|
||||
- **Secondary / Ghost:** Background `transparent`, border 1px solid `#334155`, text `#F1F5F9`. On hover: background `#1E293B`, border `#475569`.
|
||||
- **Destructive:** Background `transparent`, border 1px solid `#F43F5E`, text `#F43F5E`. On hover: background `rgba(244, 63, 94, 0.1)`.
|
||||
- **Focused State:** 2px offset ring in `#3B82F6` (offset background `#0B0F17`).
|
||||
|
||||
### Input Fields & Controls
|
||||
- **Text Inputs:** Background `#0B0F17`, border 1px solid `#334155`, text `#F1F5F9`, placeholder `#64748B`, radius 4px, padding 8px 12px, font `body-default`. On focus: border `#3B82F6`, outline none.
|
||||
- **Checkboxes & Radios:** 16px square/circle, background `#0B0F17`, border 1px solid `#475569`, radius 3px. Checked: background `#2563EB`, border `#2563EB` with white checkmark icon.
|
||||
|
||||
### Data Tables & List Views
|
||||
- **Header:** Background `#111827`, border-bottom 1px solid `#334155`, text `#94A3B8`, font `eyebrow-caps`, padding 8px 12px.
|
||||
- **Rows:** Background `#182234`, border-bottom 1px solid `#1E293B`, text `#F1F5F9`, font `body-compact`.
|
||||
- **Hover/Selected State:** Hover background `#1E293B`. Selected row adds a left accent line: `border-left: 2px solid #2563EB`.
|
||||
|
||||
### Status Badges & Chips
|
||||
- **Structure:** Height 22px, padding 2px 8px, border-radius 4px, font `meta-tag`.
|
||||
- **Passed / Verified:** Background `rgba(16, 185, 129, 0.1)`, border 1px solid `rgba(16, 185, 129, 0.3)`, text `#10B981`.
|
||||
- **Pending / In Review:** Background `rgba(245, 158, 11, 0.1)`, border 1px solid `rgba(245, 158, 11, 0.3)`, text `#F59E0B`.
|
||||
- **Failed / Action Required:** Background `rgba(244, 63, 94, 0.1)`, border 1px solid `rgba(244, 63, 94, 0.3)`, text `#F43F5E`.
|
||||
- **Neutral / Draft:** Background `rgba(148, 163, 184, 0.1)`, border 1px solid `#334155`, text `#94A3B8`.
|
||||
|
||||
### Panels & Containers (Bento Grids)
|
||||
- **Container Structure:** Flat `#182234` surface, framed by 1px solid `#1E293B`. No nested sub-cards. Sub-sections within a panel are divided with clean 1px hairline horizontal or vertical dividers (`#1E293B`).
|
||||
- **Headers:** Separated by a 1px line, title in `headline-sm` with optional monospace index notation (`01`, `02`).
|
||||