1045 lines
34 KiB
HTML
1045 lines
34 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>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<style>
|
||
:root {
|
||
--ink: #0F1218;
|
||
--blue: #1E90FF;
|
||
--blue-dark: #1565C0;
|
||
--blue-50: #E6F2FF;
|
||
--white: #FFFFFF;
|
||
--gray-500: #5B6573;
|
||
--gray-100: #F2F4F7;
|
||
--sidebar-width: 260px;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
|
||
color: var(--ink);
|
||
background: var(--gray-100);
|
||
}
|
||
|
||
/* Авторизация */
|
||
.login-section {
|
||
background: linear-gradient(135deg, var(--blue-dark), var(--blue));
|
||
color: var(--white);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.login-form {
|
||
background: var(--white);
|
||
padding: 40px;
|
||
border-radius: 16px;
|
||
width: 100%;
|
||
max-width: 400px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||
}
|
||
.login-form h2 {
|
||
margin-bottom: 8px;
|
||
font-size: 24px;
|
||
}
|
||
.login-form .subtitle {
|
||
color: var(--gray-500);
|
||
margin-bottom: 24px;
|
||
}
|
||
.form-group { margin-bottom: 16px; }
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
.form-group input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 2px solid var(--gray-100);
|
||
border-radius: 8px;
|
||
font-size: 15px;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.form-group input:focus {
|
||
outline: none;
|
||
border-color: var(--blue);
|
||
}
|
||
.btn {
|
||
display: block;
|
||
width: 100%;
|
||
background: var(--blue);
|
||
color: var(--white);
|
||
padding: 14px;
|
||
border-radius: 8px;
|
||
font-weight: 700;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 15px;
|
||
margin-top: 8px;
|
||
}
|
||
.btn:hover { background: var(--blue-dark); }
|
||
.hint {
|
||
margin-top: 16px;
|
||
font-size: 13px;
|
||
color: var(--gray-500);
|
||
text-align: center;
|
||
}
|
||
|
||
/* Layout дашборда */
|
||
.dashboard { display: none; }
|
||
.dashboard-layout {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* Sidebar */
|
||
.sidebar {
|
||
width: var(--sidebar-width);
|
||
background: var(--ink);
|
||
color: var(--white);
|
||
padding: 24px 0;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
}
|
||
.sidebar-logo {
|
||
padding: 0 24px 24px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||
margin-bottom: 16px;
|
||
}
|
||
.sidebar-logo h2 {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
.sidebar-logo .role {
|
||
font-size: 12px;
|
||
color: var(--blue);
|
||
margin-top: 4px;
|
||
}
|
||
.sidebar-nav { padding: 0 12px; }
|
||
.sidebar-section {
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
color: rgba(255,255,255,0.4);
|
||
padding: 16px 12px 8px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.sidebar-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
font-size: 14px;
|
||
color: rgba(255,255,255,0.7);
|
||
border: none;
|
||
background: none;
|
||
width: 100%;
|
||
text-align: left;
|
||
}
|
||
.sidebar-item:hover { background: rgba(255,255,255,0.1); color: var(--white); }
|
||
.sidebar-item.active {
|
||
background: var(--blue);
|
||
color: var(--white);
|
||
}
|
||
.sidebar-item .icon { font-size: 18px; width: 24px; text-align: center; }
|
||
.sidebar-item.admin-only { display: none; }
|
||
.sidebar-item.admin-only.show { display: flex; }
|
||
|
||
/* Основной контент */
|
||
.main-content {
|
||
margin-left: var(--sidebar-width);
|
||
flex: 1;
|
||
padding: 32px;
|
||
}
|
||
.page-header {
|
||
margin-bottom: 32px;
|
||
}
|
||
.page-header h1 {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
}
|
||
.page-header p {
|
||
color: var(--gray-500);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* Карточки и секции */
|
||
.tab-content { display: none; }
|
||
.tab-content.active { display: block; }
|
||
|
||
.card {
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||
}
|
||
.card h3 {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
margin-bottom: 12px;
|
||
}
|
||
.stat-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.stat-card {
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||
}
|
||
.stat-card .label {
|
||
font-size: 13px;
|
||
color: var(--gray-500);
|
||
margin-bottom: 8px;
|
||
}
|
||
.stat-card .value {
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
color: var(--blue);
|
||
}
|
||
.stat-card .change {
|
||
font-size: 12px;
|
||
margin-top: 4px;
|
||
}
|
||
.stat-card .change.up { color: #22C55E; }
|
||
.stat-card .change.down { color: #EF4444; }
|
||
|
||
/* Графики */
|
||
.charts-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
.chart-card {
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||
}
|
||
.chart-card h3 {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
}
|
||
.chart-container {
|
||
position: relative;
|
||
height: 260px;
|
||
}
|
||
|
||
/* Календарь */
|
||
.calendar-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 24px;
|
||
}
|
||
.calendar-header h3 { font-size: 20px; }
|
||
.calendar-nav {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
.calendar-nav button {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 8px;
|
||
border: 2px solid var(--gray-100);
|
||
background: var(--white);
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.calendar-nav button:hover { border-color: var(--blue); }
|
||
.calendar-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
gap: 4px;
|
||
}
|
||
.calendar-day-name {
|
||
text-align: center;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--gray-500);
|
||
padding: 8px 0;
|
||
}
|
||
.calendar-day {
|
||
aspect-ratio: 1;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
position: relative;
|
||
}
|
||
.calendar-day:hover { background: var(--blue-50); }
|
||
.calendar-day.other-month { color: #ccc; }
|
||
.calendar-day.today {
|
||
background: var(--blue);
|
||
color: var(--white);
|
||
font-weight: 700;
|
||
}
|
||
.calendar-day.has-event::after {
|
||
content: '';
|
||
width: 6px;
|
||
height: 6px;
|
||
background: #FF6B35;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
bottom: 6px;
|
||
}
|
||
.calendar-day.has-event.today::after { background: var(--white); }
|
||
|
||
/* Список событий */
|
||
.events-list { margin-top: 24px; }
|
||
.event-item {
|
||
display: flex;
|
||
gap: 16px;
|
||
padding: 16px;
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
margin-bottom: 12px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||
align-items: center;
|
||
}
|
||
.event-date {
|
||
background: var(--blue-50);
|
||
color: var(--blue);
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
min-width: 60px;
|
||
}
|
||
.event-date .day { font-size: 20px; font-weight: 800; }
|
||
.event-date .month { font-size: 11px; text-transform: uppercase; }
|
||
.event-info h4 { font-size: 15px; font-weight: 600; }
|
||
.event-info p { font-size: 13px; color: var(--gray-500); }
|
||
|
||
/* Курсы */
|
||
.course-card {
|
||
display: flex;
|
||
gap: 20px;
|
||
padding: 20px;
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||
}
|
||
.course-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
background: var(--blue-50);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
}
|
||
.course-info { flex: 1; }
|
||
.course-info h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
|
||
.course-info p { font-size: 13px; color: var(--gray-500); }
|
||
.progress-bar {
|
||
height: 8px;
|
||
background: var(--gray-100);
|
||
border-radius: 4px;
|
||
margin-top: 12px;
|
||
overflow: hidden;
|
||
}
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: var(--blue);
|
||
border-radius: 4px;
|
||
transition: width 0.3s;
|
||
}
|
||
|
||
/* Сертификаты */
|
||
.cert-card {
|
||
display: flex;
|
||
gap: 16px;
|
||
padding: 20px;
|
||
background: var(--white);
|
||
border-radius: 12px;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||
align-items: center;
|
||
}
|
||
.cert-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: linear-gradient(135deg, #FFD700, #FFA500);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
}
|
||
.cert-info { flex: 1; }
|
||
.cert-info h3 { font-size: 15px; font-weight: 700; }
|
||
.cert-info p { font-size: 13px; color: var(--gray-500); }
|
||
.cert-download {
|
||
padding: 8px 16px;
|
||
background: var(--blue-50);
|
||
color: var(--blue);
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* Форма создания */
|
||
.form-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.form-full { grid-column: 1 / -1; }
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 2px solid var(--gray-100);
|
||
border-radius: 8px;
|
||
font-size: 15px;
|
||
font-family: inherit;
|
||
resize: vertical;
|
||
min-height: 100px;
|
||
}
|
||
.form-group select {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 2px solid var(--gray-100);
|
||
border-radius: 8px;
|
||
font-size: 15px;
|
||
background: var(--white);
|
||
}
|
||
|
||
/* Мобильная адаптация */
|
||
@media (max-width: 768px) {
|
||
.sidebar {
|
||
width: 100%;
|
||
height: auto;
|
||
position: relative;
|
||
padding: 16px 0;
|
||
}
|
||
.sidebar-nav {
|
||
display: flex;
|
||
overflow-x: auto;
|
||
padding: 0 12px;
|
||
gap: 4px;
|
||
}
|
||
.sidebar-section { display: none; }
|
||
.sidebar-item { white-space: nowrap; padding: 10px 16px; }
|
||
.main-content { margin-left: 0; padding: 16px; }
|
||
.charts-grid { grid-template-columns: 1fr; }
|
||
.form-row { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Авторизация -->
|
||
<section class="login-section" id="loginSection">
|
||
<div class="login-form">
|
||
<h2>LMS Панель</h2>
|
||
<p class="subtitle">Войдите в систему управления обучением</p>
|
||
<form id="loginForm">
|
||
<div class="form-group">
|
||
<label for="username">Логин</label>
|
||
<input type="text" id="username" placeholder="admin или user" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="password">Пароль</label>
|
||
<input type="password" id="password" placeholder="admin или user" required>
|
||
</div>
|
||
<button type="submit" class="btn">Войти</button>
|
||
</form>
|
||
<p class="hint">Демо: admin/admin (админ) или user/user (участник)</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Дашборд -->
|
||
<section class="dashboard" id="dashboard">
|
||
<div class="dashboard-layout">
|
||
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-logo">
|
||
<h2>LMS Панель</h2>
|
||
<div class="role" id="sidebarRole">Участник</div>
|
||
</div>
|
||
<nav class="sidebar-nav">
|
||
<div class="sidebar-section">Основное</div>
|
||
<button class="sidebar-item admin-only" data-tab="admin-dashboard">
|
||
<span class="icon">📊</span> Дашборд
|
||
</button>
|
||
<button class="sidebar-item active" data-tab="schedule">
|
||
<span class="icon">📅</span> Расписание
|
||
</button>
|
||
<button class="sidebar-item" data-tab="courses">
|
||
<span class="icon">📚</span> Мои курсы
|
||
</button>
|
||
<button class="sidebar-item" data-tab="reports">
|
||
<span class="icon">📈</span> Отчет
|
||
</button>
|
||
<button class="sidebar-item" data-tab="certificates">
|
||
<span class="icon">🏆</span> Сертификаты
|
||
</button>
|
||
|
||
<div class="sidebar-section admin-only">Управление</div>
|
||
<button class="sidebar-item admin-only" data-tab="create-course">
|
||
<span class="icon">➕</span> Создать обучение
|
||
</button>
|
||
<button class="sidebar-item admin-only" data-tab="settings">
|
||
<span class="icon">⚙️</span> Настройки
|
||
</button>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- Основной контент -->
|
||
<main class="main-content">
|
||
|
||
<!-- Админ дашборд -->
|
||
<div class="tab-content active" id="tab-admin-dashboard">
|
||
<div class="page-header">
|
||
<h1>Дашборд</h1>
|
||
<p>Общая статистика системы обучения</p>
|
||
</div>
|
||
|
||
<div class="stat-grid">
|
||
<div class="stat-card">
|
||
<div class="label">Всего студентов</div>
|
||
<div class="value">1,247</div>
|
||
<div class="change up">+12% за месяц</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="label">Активных курсов</div>
|
||
<div class="value">34</div>
|
||
<div class="change up">+5 новых</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="label">Завершений</div>
|
||
<div class="value">89</div>
|
||
<div class="change up">+23% к прошлому</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="label">Средний балл</div>
|
||
<div class="value">4.3</div>
|
||
<div class="change up">+0.2</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="charts-grid">
|
||
<div class="chart-card">
|
||
<h3>Студенты по месяцам</h3>
|
||
<div class="chart-container"><canvas id="chart1"></canvas></div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Записи на курсы</h3>
|
||
<div class="chart-container"><canvas id="chart2"></canvas></div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>По городам</h3>
|
||
<div class="chart-container"><canvas id="chart3"></canvas></div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>По направлениям</h3>
|
||
<div class="chart-container"><canvas id="chart4"></canvas></div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Посещаемость</h3>
|
||
<div class="chart-container"><canvas id="chart5"></canvas></div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Успешность курсов</h3>
|
||
<div class="chart-container"><canvas id="chart6"></canvas></div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Активность по дням</h3>
|
||
<div class="chart-container"><canvas id="chart7"></canvas></div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Рейтинг преподавателей</h3>
|
||
<div class="chart-container"><canvas id="chart8"></canvas></div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Время обучения</h3>
|
||
<div class="chart-container"><canvas id="chart9"></canvas></div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Выполнение домашних заданий</h3>
|
||
<div class="chart-container"><canvas id="chart10"></canvas></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Расписание -->
|
||
<div class="tab-content" id="tab-schedule">
|
||
<div class="page-header">
|
||
<h1>Расписание курсов</h1>
|
||
<p>Ближайшие занятия и события</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="calendar-header">
|
||
<h3 id="calendarMonth">Июнь 2026</h3>
|
||
<div class="calendar-nav">
|
||
<button id="prevMonth"><</button>
|
||
<button id="nextMonth">></button>
|
||
</div>
|
||
</div>
|
||
<div class="calendar-grid" id="calendarGrid"></div>
|
||
</div>
|
||
|
||
<div class="events-list" id="eventsList">
|
||
<h3 style="margin-bottom: 16px;">Ближайшие события</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Мои курсы -->
|
||
<div class="tab-content" id="tab-courses">
|
||
<div class="page-header">
|
||
<h1>Мои курсы</h1>
|
||
<p>Текущие и пройденные программы</p>
|
||
</div>
|
||
|
||
<div class="course-card">
|
||
<div class="course-icon">💻</div>
|
||
<div class="course-info">
|
||
<h3>Введение в программирование</h3>
|
||
<p>Преподаватель: Иван Петров • 12 занятий</p>
|
||
<div class="progress-bar"><div class="progress-fill" style="width: 65%"></div></div>
|
||
<p style="margin-top: 8px; font-size: 12px; color: var(--gray-500);">65% завершено</p>
|
||
</div>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-icon">🎨</div>
|
||
<div class="course-info">
|
||
<h3>Основы дизайна</h3>
|
||
<p>Преподаватель: Мария Сидорова • 8 занятий</p>
|
||
<div class="progress-bar"><div class="progress-fill" style="width: 30%"></div></div>
|
||
<p style="margin-top: 8px; font-size: 12px; color: var(--gray-500);">30% завершено</p>
|
||
</div>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-icon">📊</div>
|
||
<div class="course-info">
|
||
<h3>Анализ данных</h3>
|
||
<p>Преподаватель: Алексей Козлов • 10 занятий</p>
|
||
<div class="progress-bar"><div class="progress-fill" style="width: 10%"></div></div>
|
||
<p style="margin-top: 8px; font-size: 12px; color: var(--gray-500);">10% завершено</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Отчет -->
|
||
<div class="tab-content" id="tab-reports">
|
||
<div class="page-header">
|
||
<h1>Отчет</h1>
|
||
<p>Ваша статистика обучения</p>
|
||
</div>
|
||
<div class="stat-grid">
|
||
<div class="stat-card">
|
||
<div class="label">Посещаемость</div>
|
||
<div class="value">92%</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="label">Средний балл</div>
|
||
<div class="value">4.5</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="label">Часов в неделю</div>
|
||
<div class="value">12</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="label">Рейтинг</div>
|
||
<div class="value">Топ 10%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Сертификаты -->
|
||
<div class="tab-content" id="tab-certificates">
|
||
<div class="page-header">
|
||
<h1>Сертификаты</h1>
|
||
<p>Ваши документы об обучении</p>
|
||
</div>
|
||
<div class="cert-card">
|
||
<div class="cert-icon">🏆</div>
|
||
<div class="cert-info">
|
||
<h3>Основы маркетинга</h3>
|
||
<p>Выдан: 1 июня 2025</p>
|
||
</div>
|
||
<button class="cert-download">Скачать PDF</button>
|
||
</div>
|
||
<div class="cert-card">
|
||
<div class="cert-icon">🏆</div>
|
||
<div class="cert-info">
|
||
<h3>Проектная деятельность</h3>
|
||
<p>Выдан: 15 мая 2025</p>
|
||
</div>
|
||
<button class="cert-download">Скачать PDF</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Создать обучение -->
|
||
<div class="tab-content" id="tab-create-course">
|
||
<div class="page-header">
|
||
<h1>Создать обучение</h1>
|
||
<p>Добавьте новый курс в систему</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Название курса</label>
|
||
<input type="text" placeholder="Введите название">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Направление</label>
|
||
<select>
|
||
<option>Программирование</option>
|
||
<option>Дизайн</option>
|
||
<option>Маркетинг</option>
|
||
<option>Аналитика</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group form-full">
|
||
<label>Описание</label>
|
||
<textarea placeholder="Опишите курс..."></textarea>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Количество занятий</label>
|
||
<input type="number" placeholder="10">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Преподаватель</label>
|
||
<input type="text" placeholder="ФИО">
|
||
</div>
|
||
</div>
|
||
<button class="btn" style="width: auto; padding: 14px 32px;">Создать курс</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Настройки -->
|
||
<div class="tab-content" id="tab-settings">
|
||
<div class="page-header">
|
||
<h1>Настройки</h1>
|
||
<p>Параметры системы</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Общие настройки</h3>
|
||
<p style="color: var(--gray-500);">Настройки уведомлений, языка и отображения.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
</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('Неверный логин или пароль');
|
||
}
|
||
});
|
||
|
||
function login(role) {
|
||
document.getElementById('loginSection').style.display = 'none';
|
||
document.getElementById('dashboard').style.display = 'block';
|
||
|
||
document.getElementById('sidebarRole').textContent =
|
||
role === 'admin' ? 'Администратор' : 'Участник';
|
||
|
||
document.querySelectorAll('.admin-only').forEach(el => {
|
||
el.classList.toggle('show', role === 'admin');
|
||
});
|
||
|
||
// Если участник — скрыть дашборд, показать расписание
|
||
if (role === 'user') {
|
||
document.querySelector('[data-tab="schedule"]').click();
|
||
} else {
|
||
initCharts();
|
||
}
|
||
|
||
localStorage.setItem('userRole', role);
|
||
initCalendar();
|
||
}
|
||
|
||
// Переключение вкладок
|
||
document.querySelectorAll('.sidebar-item').forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
document.querySelectorAll('.sidebar-item').forEach(i => i.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');
|
||
});
|
||
});
|
||
|
||
// Календарь
|
||
let currentDate = new Date();
|
||
const events = [
|
||
{ date: new Date(2026, 5, 20), title: 'Программирование', time: '18:00', type: 'lesson' },
|
||
{ date: new Date(2026, 5, 22), title: 'Дизайн', time: '19:00', type: 'lesson' },
|
||
{ date: new Date(2026, 5, 25), title: 'Экзамен: Дизайн', time: '10:00', type: 'exam' },
|
||
{ date: new Date(2026, 5, 28), title: 'Анализ данных', time: '17:00', type: 'lesson' },
|
||
];
|
||
|
||
function initCalendar() {
|
||
const grid = document.getElementById('calendarGrid');
|
||
const monthLabel = document.getElementById('calendarMonth');
|
||
const eventsList = document.getElementById('eventsList');
|
||
|
||
const year = currentDate.getFullYear();
|
||
const month = currentDate.getMonth();
|
||
|
||
const monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
|
||
'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
|
||
monthLabel.textContent = `${monthNames[month]} ${year}`;
|
||
|
||
const firstDay = new Date(year, month, 1).getDay();
|
||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||
const today = new Date();
|
||
|
||
let html = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'].map(d =>
|
||
`<div class="calendar-day-name">${d}</div>`
|
||
).join('');
|
||
|
||
// Пустые дни
|
||
for (let i = 0; i < (firstDay === 0 ? 6 : firstDay - 1); i++) {
|
||
html += '<div class="calendar-day other-month"></div>';
|
||
}
|
||
|
||
// Дни месяца
|
||
for (let d = 1; d <= daysInMonth; d++) {
|
||
const date = new Date(year, month, d);
|
||
const isToday = date.toDateString() === today.toDateString();
|
||
const hasEvent = events.some(e => e.date.toDateString() === date.toDateString());
|
||
|
||
let classes = 'calendar-day';
|
||
if (isToday) classes += ' today';
|
||
if (hasEvent) classes += ' has-event';
|
||
|
||
html += `<div class="${classes}">${d}</div>`;
|
||
}
|
||
|
||
grid.innerHTML = html;
|
||
|
||
// Список событий
|
||
const monthEvents = events.filter(e => e.date.getMonth() === month && e.date.getFullYear() === year);
|
||
let eventsHtml = '<h3 style="margin-bottom: 16px;">Ближайшие события</h3>';
|
||
|
||
monthEvents.forEach(e => {
|
||
eventsHtml += `
|
||
<div class="event-item">
|
||
<div class="event-date">
|
||
<div class="day">${e.date.getDate()}</div>
|
||
<div class="month">${monthNames[e.date.getMonth()].slice(0, 3)}</div>
|
||
</div>
|
||
<div class="event-info">
|
||
<h4>${e.title}</h4>
|
||
<p>${e.time} • ${e.type === 'exam' ? 'Экзамен' : 'Занятие'}</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
eventsList.innerHTML = eventsHtml;
|
||
}
|
||
|
||
document.getElementById('prevMonth').addEventListener('click', () => {
|
||
currentDate.setMonth(currentDate.getMonth() - 1);
|
||
initCalendar();
|
||
});
|
||
document.getElementById('nextMonth').addEventListener('click', () => {
|
||
currentDate.setMonth(currentDate.getMonth() + 1);
|
||
initCalendar();
|
||
});
|
||
|
||
// Графики
|
||
function initCharts() {
|
||
const blue = '#1E90FF';
|
||
const blueLight = '#E6F2FF';
|
||
const orange = '#FF6B35';
|
||
const green = '#22C55E';
|
||
const purple = '#A855F7';
|
||
|
||
// 1. Студенты по месяцам
|
||
new Chart(document.getElementById('chart1'), {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн'],
|
||
datasets: [{
|
||
label: 'Студенты',
|
||
data: [820, 932, 901, 1034, 1120, 1247],
|
||
borderColor: blue,
|
||
backgroundColor: blueLight,
|
||
fill: true,
|
||
tension: 0.4
|
||
}]
|
||
},
|
||
options: { responsive: true, maintainAspectRatio: false }
|
||
});
|
||
|
||
// 2. Записи на курсы
|
||
new Chart(document.getElementById('chart2'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['Программирование', 'Дизайн', 'Маркетинг', 'Аналитика', 'Управление'],
|
||
datasets: [{
|
||
label: 'Записи',
|
||
data: [145, 98, 76, 112, 54],
|
||
backgroundColor: [blue, orange, green, purple, '#F59E0B']
|
||
}]
|
||
},
|
||
options: { responsive: true, maintainAspectRatio: false }
|
||
});
|
||
|
||
// 3. По городам
|
||
new Chart(document.getElementById('chart3'), {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['Алматы', 'Астана', 'Шымкент', ' Караганда', 'Другие'],
|
||
datasets: [{
|
||
data: [420, 380, 190, 120, 137],
|
||
backgroundColor: [blue, orange, green, purple, '#94A3B8']
|
||
}]
|
||
},
|
||
options: { responsive: true, maintainAspectRatio: false }
|
||
});
|
||
|
||
// 4. По направлениям
|
||
new Chart(document.getElementById('chart4'), {
|
||
type: 'pie',
|
||
data: {
|
||
labels: ['IT', 'Дизайн', 'Бизнес', 'Наука', 'Языки'],
|
||
datasets: [{
|
||
data: [35, 20, 25, 12, 8],
|
||
backgroundColor: [blue, orange, green, purple, '#F59E0B']
|
||
}]
|
||
},
|
||
options: { responsive: true, maintainAspectRatio: false }
|
||
});
|
||
|
||
// 5. Посещаемость
|
||
new Chart(document.getElementById('chart5'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
|
||
datasets: [{
|
||
label: 'Посещаемость %',
|
||
data: [92, 88, 95, 87, 91, 78],
|
||
backgroundColor: blue
|
||
}]
|
||
},
|
||
options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: false, min: 60 } } }
|
||
});
|
||
|
||
// 6. Успешность курсов
|
||
new Chart(document.getElementById('chart6'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['Программирование', 'Дизайн', 'Маркетинг', 'Аналитика'],
|
||
datasets: [
|
||
{ label: 'Успешно', data: [78, 82, 71, 85], backgroundColor: green },
|
||
{ label: 'Не завершили', data: [22, 18, 29, 15], backgroundColor: '#E5E7EB' }
|
||
]
|
||
},
|
||
options: { responsive: true, maintainAspectRatio: false, scales: { x: { stacked: true }, y: { stacked: true } } }
|
||
});
|
||
|
||
// 7. Активность по дням
|
||
new Chart(document.getElementById('chart7'), {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
|
||
datasets: [{
|
||
label: 'Пользователи',
|
||
data: [12, 5, 45, 120, 98, 145, 34],
|
||
borderColor: orange,
|
||
backgroundColor: 'rgba(255,107,53,0.1)',
|
||
fill: true,
|
||
tension: 0.4
|
||
}]
|
||
},
|
||
options: { responsive: true, maintainAspectRatio: false }
|
||
});
|
||
|
||
// 8. Рейтинг преподавателей
|
||
new Chart(document.getElementById('chart8'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['Иван П.', 'Мария С.', 'Алексей К.', 'Елена В.', 'Дмитрий О.'],
|
||
datasets: [{
|
||
label: 'Рейтинг',
|
||
data: [4.9, 4.8, 4.7, 4.6, 4.5],
|
||
backgroundColor: blue
|
||
}]
|
||
},
|
||
options: { responsive: true, maintainAspectRatio: false, indexAxis: 'y', scales: { x: { min: 4, max: 5 } } }
|
||
});
|
||
|
||
// 9. Время обучения
|
||
new Chart(document.getElementById('chart9'), {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['Нед 1', 'Нед 2', 'Нед 3', 'Нед 4'],
|
||
datasets: [{
|
||
label: 'Часы',
|
||
data: [8, 12, 10, 14],
|
||
borderColor: purple,
|
||
backgroundColor: 'rgba(168,85,247,0.1)',
|
||
fill: true,
|
||
tension: 0.4
|
||
}]
|
||
},
|
||
options: { responsive: true, maintainAspectRatio: false }
|
||
});
|
||
|
||
// 10. Домашние задания
|
||
new Chart(document.getElementById('chart10'), {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['Сдано вовремя', 'Сдано с опозданием', 'Не сдано'],
|
||
datasets: [{
|
||
data: [68, 22, 10],
|
||
backgroundColor: [green, '#F59E0B', '#EF4444']
|
||
}]
|
||
},
|
||
options: { responsive: true, maintainAspectRatio: false }
|
||
});
|
||
}
|
||
|
||
// Проверка сохраненной роли
|
||
const savedRole = localStorage.getItem('userRole');
|
||
if (savedRole) login(savedRole);
|
||
</script>
|
||
</body>
|
||
</html> |