221 lines
9.7 KiB
HTML
221 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Школьный журнал — статистика</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||
</head>
|
||
<body>
|
||
<div id="login-screen">
|
||
<div class="login-card">
|
||
<h1 class="login-title">Школьный журнал</h1>
|
||
<p class="login-subtitle">Войдите в свою учётную запись</p>
|
||
<form id="login-form" autocomplete="off">
|
||
<div class="input-group">
|
||
<div class="input-underline">
|
||
<i class="fas fa-user input-icon"></i>
|
||
<input type="text" id="login" placeholder="Логин" required autocomplete="off">
|
||
</div>
|
||
</div>
|
||
<div class="input-group">
|
||
<div class="input-underline">
|
||
<i class="fas fa-lock input-icon"></i>
|
||
<input type="password" id="password" placeholder="Пароль" required autocomplete="off">
|
||
<button type="button" class="password-toggle" onclick="togglePasswordVisibility()" tabindex="-1">
|
||
<i class="fas fa-eye"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="login-btn">
|
||
<span>Войти</span>
|
||
<i class="fas fa-arrow-right"></i>
|
||
</button>
|
||
<div id="login-error" class="login-error" style="display:none"></div>
|
||
<div id="login-attempts" class="login-attempts"></div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="app" style="display:none">
|
||
<header>
|
||
<h1>📊 Школьный журнал</h1>
|
||
<div class="header-right">
|
||
<span id="currentUser" class="user-info"></span>
|
||
<button id="logoutBtn" class="btn-logout" onclick="logout()">Выйти</button>
|
||
<span id="status" class="status">Нет данных</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="upload-section">
|
||
<form id="uploadForm">
|
||
<label class="drop-zone" id="dropZone">
|
||
<input type="file" id="fileInput" accept=".pdf,.zip" hidden>
|
||
<span class="drop-text">Перетащите PDF или ZIP сюда или кликните для выбора</span>
|
||
<span class="drop-hint">(журнал класса)</span>
|
||
</label>
|
||
<button type="submit" id="uploadBtn" disabled>Загрузить</button>
|
||
<button type="button" id="clearBtn" class="btn-danger">Очистить данные</button>
|
||
<div id="uploadStatus"></div>
|
||
<div id="uploadProgress" class="upload-progress hidden">
|
||
<div class="progress-bar"><div class="progress-fill"></div></div>
|
||
<span class="progress-text"></span>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<section class="global-filters">
|
||
<input type="text" id="gfStudent" placeholder="Ученик..." list="dlStudents">
|
||
<input type="text" id="gfSubject" placeholder="Предмет..." list="dlSubjects">
|
||
<input type="text" id="gfTeacher" placeholder="Учитель..." list="dlTeachers">
|
||
<input type="text" id="gfClass" placeholder="Класс..." list="dlClasses">
|
||
<input type="text" id="gfParallel" placeholder="Параллель..." list="dlParallels">
|
||
<datalist id="dlParallels"></datalist>
|
||
<input type="date" id="gfDateFrom" title="Дата с">
|
||
<input type="date" id="gfDateTo" title="Дата по">
|
||
<button id="gfApply">Применить</button>
|
||
<button id="gfReset" class="btn-danger">Сбросить</button>
|
||
<datalist id="dlStudents"></datalist>
|
||
<datalist id="dlSubjects"></datalist>
|
||
<datalist id="dlTeachers"></datalist>
|
||
</section>
|
||
|
||
<section class="tabs">
|
||
<button class="tab active" data-tab="dashboard">Дашборд</button>
|
||
<button class="tab" data-tab="subjects">Предметы</button>
|
||
<button class="tab" data-tab="teachers">Учителя</button>
|
||
<button class="tab" data-tab="classes">Классы</button>
|
||
<button class="tab" data-tab="daily">Подневно</button>
|
||
<button class="tab" data-tab="pivot">Сводка</button>
|
||
<button class="tab" data-tab="control">Контроль</button>
|
||
</section>
|
||
|
||
<section id="dashboard" class="tab-content active">
|
||
<div class="summary-cards" id="summaryCards"></div>
|
||
<div class="alerts" id="alerts"></div>
|
||
</section>
|
||
|
||
<section id="subjects" class="tab-content">
|
||
<h2>Статистика по предметам</h2>
|
||
<div class="table-wrapper">
|
||
<table id="subjectsTable">
|
||
<thead><tr><th>Предмет</th><th>Всего</th><th>5</th><th>4</th><th>3</th><th>2</th><th>Н</th><th>Б</th><th>У</th><th>Ср. балл</th><th>Учеников</th></tr></thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="teachers" class="tab-content">
|
||
<h2>Статистика по учителям</h2>
|
||
<div class="table-wrapper">
|
||
<table id="teachersTable">
|
||
<thead><tr><th>Учитель</th><th>Предмет</th><th>Всего</th><th>5</th><th>4</th><th>3</th><th>2</th><th>Н</th><th>Б</th><th>У</th><th>Учеников</th></tr></thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="classes" class="tab-content">
|
||
<h2>Статистика по классам</h2>
|
||
<div class="table-wrapper">
|
||
<table id="classesTable">
|
||
<thead><tr><th>Класс</th><th>Учеников</th><th>Всего</th><th>5</th><th>4</th><th>3</th><th>2</th><th>Н</th><th>Б</th><th>У</th></tr></thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="daily" class="tab-content">
|
||
<h2>Подневные оценки</h2>
|
||
<div class="table-wrapper">
|
||
<table id="dailyTable">
|
||
<thead><tr><th>Дата</th><th>Ученик</th><th>Класс</th><th>Предмет</th><th>Учитель</th><th>Оценка</th></tr></thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="pagination" id="dailyPagination"></div>
|
||
</section>
|
||
|
||
<section id="pivot" class="tab-content">
|
||
<h2>Сводка по периодам</h2>
|
||
<div class="period-selector">
|
||
<button class="per-btn active" data-per="month">Месяц</button>
|
||
<button class="per-btn" data-per="week">Неделя</button>
|
||
<button class="per-btn" data-per="quarter">Четверть</button>
|
||
<span class="per-info" id="pivotInfo"></span>
|
||
</div>
|
||
<div class="pivot-scroll">
|
||
<table id="pivotTable">
|
||
<thead></thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="control" class="tab-content">
|
||
<h2>Контроль</h2>
|
||
<div class="control-tabs">
|
||
<button class="ctrl-tab active" data-ctrl="homework">📋 Домашние задания</button>
|
||
<button class="ctrl-tab" data-ctrl="grades">📊 Контроль оценок</button>
|
||
<button class="ctrl-tab" data-ctrl="dvoiki">🎯 Двойки</button>
|
||
</div>
|
||
<div class="control-filters" id="ctrlFiltersHW">
|
||
<label><input type="checkbox" id="ctrlNoTopic"> Без темы</label>
|
||
<label><input type="checkbox" id="ctrlNoHomework"> Без ДЗ</label>
|
||
</div>
|
||
<div class="control-filters" id="ctrlFiltersGrades" style="display:none">
|
||
<label>Мин. числовых оценок: <input type="number" id="ctrlMinGrades" value="3" min="0" max="100" style="width:60px"></label>
|
||
</div>
|
||
<div class="control-filters" id="ctrlFiltersDvoiki" style="display:none">
|
||
<div class="dvoiki-pills" id="dvoikiPills"></div>
|
||
</div>
|
||
<div class="table-wrapper" id="ctrlTableWrap">
|
||
<table id="controlTable">
|
||
<thead><tr><th>Дата</th><th>Предмет</th><th>Учитель</th><th>Тема</th><th>ДЗ</th><th>Всего</th><th>Числ.</th><th>Симв.</th><th>Оценки</th></tr></thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="dvoiki-cards" id="dvoikiCards" style="display:none"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<div class="modal-overlay" id="clearModal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h3>Очистить данные</h3>
|
||
<button class="modal-close" id="modalClose">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="modal-option" data-action="class">
|
||
<strong>Определённый класс</strong>
|
||
<input type="text" id="clearClass" placeholder="Например: 5Е" list="dlClasses">
|
||
<datalist id="dlClasses"></datalist>
|
||
<button id="clearClassBtn" class="btn-danger">Удалить класс</button>
|
||
<span id="clearClassMsg"></span>
|
||
</div>
|
||
<hr>
|
||
<div class="modal-option" data-action="parallel">
|
||
<strong>Целую параллель</strong>
|
||
<input type="text" id="clearParallel" placeholder="Например: 5">
|
||
<button id="clearParallelBtn" class="btn-danger">Удалить параллель</button>
|
||
<span id="clearParallelMsg"></span>
|
||
</div>
|
||
<hr>
|
||
<div class="modal-option danger-zone" data-action="all">
|
||
<strong>Всю базу данных</strong>
|
||
<p>Удаляет все классы, учеников, оценки без возможности восстановления.</p>
|
||
<button id="clearAllBtn" class="btn-danger">Удалить всё</button>
|
||
<span id="clearAllMsg"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="auth.js"></script>
|
||
<script src="app.js"></script>
|
||
</div>
|
||
</body>
|
||
</html>
|