149 lines
6.1 KiB
HTML
149 lines
6.1 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">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>📊 Школьный журнал</h1>
|
||
<span id="status" class="status">Нет данных</span>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="upload-section">
|
||
<form id="uploadForm">
|
||
<label class="drop-zone" id="dropZone">
|
||
<input type="file" id="fileInput" accept=".pdf" hidden>
|
||
<span class="drop-text">Перетащите PDF сюда или кликните для выбора</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>
|
||
</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="date" id="gfDateFrom" title="Дата с">
|
||
<input type="date" id="gfDateTo" title="Дата по">
|
||
<button id="gfApply">Применить</button>
|
||
<button id="gfReset" class="btn-reset">Сбросить</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>
|
||
</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>
|
||
</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="app.js"></script>
|
||
</body>
|
||
</html>
|