diff --git a/index.html b/index.html
index 032f6d8..7ef6ef9 100644
--- a/index.html
+++ b/index.html
@@ -4,331 +4,1042 @@
   <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: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
+      font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
       color: var(--ink);
-      background: var(--white);
+      background: var(--gray-100);
     }
-    .container { max-width: 1140px; margin: 0 auto; padding: 24px; }
-    
+
     /* Авторизация */
     .login-section {
-      background: var(--ink);
+      background: linear-gradient(135deg, var(--blue-dark), var(--blue));
       color: var(--white);
-      padding: 80px 24px;
-      text-align: center;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
     .login-form {
       background: var(--white);
-      padding: 32px;
+      padding: 40px;
       border-radius: 16px;
+      width: 100%;
       max-width: 400px;
-      margin: 0 auto;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      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;
-      color: var(--ink);
-    }
-    .form-group {
-      margin-bottom: 16px;
-      text-align: left;
     }
+    .form-group { margin-bottom: 16px; }
     .form-group label {
       display: block;
-      margin-bottom: 8px;
+      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: 16px;
+      font-size: 15px;
+      transition: border-color 0.2s;
+    }
+    .form-group input:focus {
+      outline: none;
+      border-color: var(--blue);
     }
     .btn {
-      display: inline-block;
+      display: block;
+      width: 100%;
       background: var(--blue);
       color: var(--white);
-      padding: 14px 28px;
+      padding: 14px;
       border-radius: 8px;
       font-weight: 700;
-      text-decoration: none;
       border: none;
       cursor: pointer;
-      font-size: 16px;
-      width: 100%;
+      font-size: 15px;
+      margin-top: 8px;
     }
-    .btn:hover { background: #1a7ad9; }
-    
-    /* Панель управления (скрыта по умолчанию) */
+    .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-header {
+    .dashboard-layout {
+      display: flex;
+      min-height: 100vh;
+    }
+
+    /* Sidebar */
+    .sidebar {
+      width: var(--sidebar-width);
       background: var(--ink);
       color: var(--white);
-      padding: 24px;
-      margin-bottom: 32px;
-      border-radius: 16px;
+      padding: 24px 0;
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100vh;
+      overflow-y: auto;
     }
-    .dashboard-header h1 {
-      font-size: 28px;
+    .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;
-      margin-bottom: 8px;
     }
-    .dashboard-header p { color: #9aa3b2; }
-    
-    /* Навигация */
-    .nav-tabs {
+    .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;
-      gap: 8px;
-      margin-bottom: 32px;
-      flex-wrap: wrap;
-    }
-    .nav-tab {
-      padding: 12px 24px;
-      background: var(--gray-100);
-      border: none;
+      align-items: center;
+      gap: 12px;
+      padding: 12px;
       border-radius: 8px;
-      font-weight: 600;
       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;
     }
-    .nav-tab:hover { background: var(--blue-50); }
-    .nav-tab.active {
+    .sidebar-item:hover { background: rgba(255,255,255,0.1); color: var(--white); }
+    .sidebar-item.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);
+    .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;
-      border-radius: 16px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
+    .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; }
-    .tab-content h2 {
-      font-size: 24px;
+
+    .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;
-      color: var(--ink);
     }
-    .tab-content p {
+    .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);
-      line-height: 1.6;
+      padding: 8px 0;
     }
-    .card {
-      background: var(--gray-100);
-      padding: 24px;
+    .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: 640px) {
-      .login-section { padding: 48px 20px; }
-      .dashboard-header h1 { font-size: 22px; }
-      .nav-tabs { flex-direction: column; }
-      .nav-tab { width: 100%; }
+    @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="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 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="container">
-      <div class="dashboard-header">
-        <h1>Добро пожаловать!</h1>
-        <p id="userRole">Вы вошли как: Участник</p>
-      </div>
+    <div class="dashboard-layout">
       
-      <!-- Навигация -->
-      <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>
+      <!-- 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">
         
-        <!-- Вкладки админа (скрыты по умолчанию) -->
-        <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 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="card">
-          <h3>Предстоящие экзамены</h3>
-          <p>Экзамен по курсу "Основы дизайна" — 25 июня. Подготовьте портфолио.</p>
+
+        <!-- Расписание -->
+        <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">&lt;</button>
+                <button id="nextMonth">&gt;</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>
-      
-      <div class="tab-content" id="tab-courses">
-        <h2>Мои курсы</h2>
-        <div class="card">
-          <h3>Введение в программирование</h3>
-          <p>Прогресс: 65%. Осталось 4 урока. Преподаватель: Иван Петров.</p>
+
+        <!-- Мои курсы -->
+        <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="card">
-          <h3>Основы дизайна</h3>
-          <p>Прогресс: 30%. Осталось 8 уроков. Преподаватель: Мария Сидорова.</p>
+
+        <!-- Отчет -->
+        <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>
-      
-      <div class="tab-content" id="tab-reports">
-        <h2>Отчет</h2>
-        <div class="card">
-          <h3>Статистика обучения</h3>
-          <p>Посещаемость: 92%. Средний балл: 4.5. Активность: 12 часов в неделю.</p>
+
+        <!-- Сертификаты -->
+        <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="card">
-          <h3>Достижения</h3>
-          <p>Получено 2 сертификата. Вы в топ-10% лучших студентов.</p>
+
+        <!-- Создать обучение -->
+        <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>
-      
-      <div class="tab-content" id="tab-certificates">
-        <h2>Сертификаты</h2>
-        <div class="card">
-          <h3>Сертификат об окончании курса</h3>
-          <p>Курс "Основы маркетинга". Дата выдачи: 1 июня 2025. Скачать PDF.</p>
+
+        <!-- Настройки -->
+        <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>
-        <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>
+
+      </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('Неверный логин или пароль. Используйте admin/admin или user/user');
+        alert('Неверный логин или пароль');
       }
     });
-    
+
     function login(role) {
-      // Скрыть форму входа, показать дашборд
       document.getElementById('loginSection').style.display = 'none';
       document.getElementById('dashboard').style.display = 'block';
       
-      // Установить роль
-      document.getElementById('userRole').textContent = `Вы вошли как: ${role === 'admin' ? 'Администратор' : 'Участник'}`;
+      document.getElementById('sidebarRole').textContent = 
+        role === 'admin' ? 'Администратор' : 'Участник';
       
-      // Показать вкладки в зависимости от роли
-      const adminTabs = document.querySelectorAll('.admin-tab');
-      adminTabs.forEach(tab => {
-        tab.style.display = role === 'admin' ? 'block' : 'none';
+      document.querySelectorAll('.admin-only').forEach(el => {
+        el.classList.toggle('show', role === 'admin');
       });
+
+      // Если участник — скрыть дашборд, показать расписание
+      if (role === 'user') {
+        document.querySelector('[data-tab="schedule"]').click();
+      } else {
+        initCharts();
+      }
       
-      // Сохранить роль в localStorage
       localStorage.setItem('userRole', role);
+      initCalendar();
     }
-    
+
     // Переключение вкладок
-    document.querySelectorAll('.nav-tab').forEach(tab => {
-      tab.addEventListener('click', function() {
-        // Убрать активный класс у всех вкладок
-        document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
+    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');
       });
     });
-    
-    // Проверить, есть ли сохраненная роль (для автоматического входа)
-    const savedRole = localStorage.getItem('userRole');
-    if (savedRole) {
-      login(savedRole);
+
+    // Календарь
+    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>
\ No newline at end of file