334 lines
12 KiB
HTML
334 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>LMS Панель управления</title>
|
||
<style>
|
||
:root {
|
||
--ink: #0F1218;
|
||
--blue: #1E90FF;
|
||
--blue-50: #E6F2FF;
|
||
--white: #FFFFFF;
|
||
--gray-500: #5B6573;
|
||
--gray-100: #F2F4F7;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
|
||
color: var(--ink);
|
||
background: var(--white);
|
||
}
|
||
.container { max-width: 1140px; margin: 0 auto; padding: 24px; }
|
||
|
||
/* Авторизация */
|
||
.login-section {
|
||
background: var(--ink);
|
||
color: var(--white);
|
||
padding: 80px 24px;
|
||
text-align: center;
|
||
}
|
||
.login-form {
|
||
background: var(--white);
|
||
padding: 32px;
|
||
border-radius: 16px;
|
||
max-width: 400px;
|
||
margin: 0 auto;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||
}
|
||
.login-form h2 {
|
||
margin-bottom: 24px;
|
||
color: var(--ink);
|
||
}
|
||
.form-group {
|
||
margin-bottom: 16px;
|
||
text-align: left;
|
||
}
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: 600;
|
||
}
|
||
.form-group input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 2px solid var(--gray-100);
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
}
|
||
.btn {
|
||
display: inline-block;
|
||
background: var(--blue);
|
||
color: var(--white);
|
||
padding: 14px 28px;
|
||
border-radius: 8px;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
width: 100%;
|
||
}
|
||
.btn:hover { background: #1a7ad9; }
|
||
|
||
/* Панель управления (скрыта по умолчанию) */
|
||
.dashboard { display: none; }
|
||
.dashboard-header {
|
||
background: var(--ink);
|
||
color: var(--white);
|
||
padding: 24px;
|
||
margin-bottom: 32px;
|
||
border-radius: 16px;
|
||
}
|
||
.dashboard-header h1 {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
}
|
||
.dashboard-header p { color: #9aa3b2; }
|
||
|
||
/* Навигация */
|
||
.nav-tabs {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 32px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.nav-tab {
|
||
padding: 12px 24px;
|
||
background: var(--gray-100);
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
.nav-tab:hover { background: var(--blue-50); }
|
||
.nav-tab.active {
|
||
background: var(--blue);
|
||
color: var(--white);
|
||
}
|
||
.nav-tab.admin-tab {
|
||
background: #FF6B35;
|
||
color: var(--white);
|
||
}
|
||
.nav-tab.admin-tab:hover { background: #e55a2b; }
|
||
|
||
/* Секции контента */
|
||
.tab-content {
|
||
display: none;
|
||
background: var(--white);
|
||
padding: 32px;
|
||
border-radius: 16px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
}
|
||
.tab-content.active { display: block; }
|
||
.tab-content h2 {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
color: var(--ink);
|
||
}
|
||
.tab-content p {
|
||
color: var(--gray-500);
|
||
line-height: 1.6;
|
||
}
|
||
.card {
|
||
background: var(--gray-100);
|
||
padding: 24px;
|
||
border-radius: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* Мобильная адаптация */
|
||
@media (max-width: 640px) {
|
||
.login-section { padding: 48px 20px; }
|
||
.dashboard-header h1 { font-size: 22px; }
|
||
.nav-tabs { flex-direction: column; }
|
||
.nav-tab { width: 100%; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Секция авторизации -->
|
||
<section class="login-section" id="loginSection">
|
||
<div class="container">
|
||
<h1 style="font-size: 36px; font-weight: 800; margin-bottom: 16px;">LMS Панель управления</h1>
|
||
<p style="color: #9aa3b2; margin-bottom: 32px;">Войдите в систему управления обучением</p>
|
||
|
||
<div class="login-form">
|
||
<h2>Вход в систему</h2>
|
||
<form id="loginForm">
|
||
<div class="form-group">
|
||
<label for="username">Логин</label>
|
||
<input type="text" id="username" placeholder="Введите логин" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="password">Пароль</label>
|
||
<input type="password" id="password" placeholder="Введите пароль" required>
|
||
</div>
|
||
<button type="submit" class="btn">Войти</button>
|
||
</form>
|
||
<p style="margin-top: 16px; font-size: 14px; color: var(--gray-500);">
|
||
Для демонстрации: admin/admin или user/user
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Панель управления (скрыта) -->
|
||
<section class="dashboard" id="dashboard">
|
||
<div class="container">
|
||
<div class="dashboard-header">
|
||
<h1>Добро пожаловать!</h1>
|
||
<p id="userRole">Вы вошли как: Участник</p>
|
||
</div>
|
||
|
||
<!-- Навигация -->
|
||
<div class="nav-tabs" id="navTabs">
|
||
<!-- Вкладки участника -->
|
||
<button class="nav-tab active" data-tab="schedule">Расписание курсов</button>
|
||
<button class="nav-tab" data-tab="courses">Мои курсы</button>
|
||
<button class="nav-tab" data-tab="reports">Отчет</button>
|
||
<button class="nav-tab" data-tab="certificates">Сертификаты</button>
|
||
|
||
<!-- Вкладки админа (скрыты по умолчанию) -->
|
||
<button class="nav-tab admin-tab" data-tab="dashboard-admin" style="display: none;">Дашборд</button>
|
||
<button class="nav-tab admin-tab" data-tab="create-course" style="display: none;">Создать обучение</button>
|
||
</div>
|
||
|
||
<!-- Контент вкладок -->
|
||
<div class="tab-content active" id="tab-schedule">
|
||
<h2>Расписание курсов</h2>
|
||
<div class="card">
|
||
<h3>Активные курсы</h3>
|
||
<p>У вас 3 активных курса. Ближайшее занятие: "Введение в программирование" — завтра в 18:00.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Предстоящие экзамены</h3>
|
||
<p>Экзамен по курсу "Основы дизайна" — 25 июня. Подготовьте портфолио.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="tab-courses">
|
||
<h2>Мои курсы</h2>
|
||
<div class="card">
|
||
<h3>Введение в программирование</h3>
|
||
<p>Прогресс: 65%. Осталось 4 урока. Преподаватель: Иван Петров.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Основы дизайна</h3>
|
||
<p>Прогресс: 30%. Осталось 8 уроков. Преподаватель: Мария Сидорова.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="tab-reports">
|
||
<h2>Отчет</h2>
|
||
<div class="card">
|
||
<h3>Статистика обучения</h3>
|
||
<p>Посещаемость: 92%. Средний балл: 4.5. Активность: 12 часов в неделю.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Достижения</h3>
|
||
<p>Получено 2 сертификата. Вы в топ-10% лучших студентов.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="tab-certificates">
|
||
<h2>Сертификаты</h2>
|
||
<div class="card">
|
||
<h3>Сертификат об окончании курса</h3>
|
||
<p>Курс "Основы маркетинга". Дата выдачи: 1 июня 2025. Скачать PDF.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Сертификат достижений</h3>
|
||
<p>За активное участие в проектах. Дата выдачи: 15 мая 2025.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Секции админа -->
|
||
<div class="tab-content" id="tab-dashboard-admin">
|
||
<h2>Административный дашборд</h2>
|
||
<div class="card">
|
||
<h3>Общая статистика</h3>
|
||
<p>Всего студентов: 156. Активных курсов: 12. Завершений в этом месяце: 23.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Последние действия</h3>
|
||
<p>Новый студент зарегистрировался: Алексей Козлов. Курс "Python" завершил: 5 студентов.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content" id="tab-create-course">
|
||
<h2>Создать обучение</h2>
|
||
<div class="card">
|
||
<h3>Форма создания курса</h3>
|
||
<p>Заполните название, описание и загрузите материалы. Нажмите "Сохранить" для публикации.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Шаблоны курсов</h3>
|
||
<p>Выберите готовый шаблон: "Стандартный", "Интерактивный", "Экспресс-курс".</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
// Имитация авторизации
|
||
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const username = document.getElementById('username').value;
|
||
const password = document.getElementById('password').value;
|
||
|
||
// Простая проверка для демонстрации
|
||
if (username === 'admin' && password === 'admin') {
|
||
login('admin');
|
||
} else if (username === 'user' && password === 'user') {
|
||
login('user');
|
||
} else {
|
||
alert('Неверный логин или пароль. Используйте admin/admin или user/user');
|
||
}
|
||
});
|
||
|
||
function login(role) {
|
||
// Скрыть форму входа, показать дашборд
|
||
document.getElementById('loginSection').style.display = 'none';
|
||
document.getElementById('dashboard').style.display = 'block';
|
||
|
||
// Установить роль
|
||
document.getElementById('userRole').textContent = `Вы вошли как: ${role === 'admin' ? 'Администратор' : 'Участник'}`;
|
||
|
||
// Показать вкладки в зависимости от роли
|
||
const adminTabs = document.querySelectorAll('.admin-tab');
|
||
adminTabs.forEach(tab => {
|
||
tab.style.display = role === 'admin' ? 'block' : 'none';
|
||
});
|
||
|
||
// Сохранить роль в localStorage
|
||
localStorage.setItem('userRole', role);
|
||
}
|
||
|
||
// Переключение вкладок
|
||
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
// Убрать активный класс у всех вкладок
|
||
document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
|
||
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
||
|
||
// Добавить активный класс текущей вкладке
|
||
this.classList.add('active');
|
||
const tabId = 'tab-' + this.getAttribute('data-tab');
|
||
document.getElementById(tabId).classList.add('active');
|
||
});
|
||
});
|
||
|
||
// Проверить, есть ли сохраненная роль (для автоматического входа)
|
||
const savedRole = localStorage.getItem('userRole');
|
||
if (savedRole) {
|
||
login(savedRole);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |