111 lines
6.3 KiB
HTML
111 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Темы модулей — Админ-панель</title>
|
|
<link rel="stylesheet" href="admin.css">
|
|
</head>
|
|
<body data-page="modules">
|
|
<div class="layout">
|
|
<div class="sidebar" id="sidebar"></div>
|
|
<div class="main">
|
|
<div class="page-head">
|
|
<h2>Темы модулей</h2>
|
|
<p class="page-sub">Ученик выбирает тему модуля при заполнении формы</p>
|
|
</div>
|
|
|
|
<div class="actions-row" style="margin-bottom:16px">
|
|
<button class="btn-primary" id="addModuleBtn" type="button">
|
|
<span style="font-size:1.2rem">+</span> Добавить модуль
|
|
</button>
|
|
<button class="btn-primary ghost" id="batchModuleBtn" type="button">
|
|
Пакетное добавление
|
|
</button>
|
|
<input type="text" id="moduleSearch" class="search-input" placeholder="Поиск по названию..." style="flex:1;min-width:200px;max-width:340px;padding:10px 14px;font-size:.9rem">
|
|
</div>
|
|
|
|
<div class="list" id="moduleList"><div class="empty">Загрузка…</div></div>
|
|
<div class="pager" id="pager"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="moduleModal">
|
|
<div class="edit-modal" style="max-width:480px">
|
|
<h3 id="moduleModalTitle">Создать модуль</h3>
|
|
<form id="moduleForm" class="settings-stack" style="gap:12px">
|
|
<input type="hidden" id="moduleId">
|
|
<div class="settings-field">
|
|
<label>Название <span style="color:#ef4444">*</span></label>
|
|
<input type="text" name="name" class="settings-input" required placeholder="Например: Основы Python" autocomplete="off">
|
|
</div>
|
|
<div class="settings-field">
|
|
<label>Количество занятий</label>
|
|
<input type="number" name="lessons_count" id="moduleLessons" class="settings-input" min="0" max="10000" step="1" value="0">
|
|
</div>
|
|
<div class="settings-field">
|
|
<label>Картинка модуля</label>
|
|
<div class="module-photo-controls">
|
|
<img id="modulePhotoPreview" class="module-photo-preview" alt="" style="display:none">
|
|
<div class="module-photo-actions">
|
|
<label class="btn-primary ghost module-photo-pick" for="modulePhotoFile">Выбрать файл</label>
|
|
<input type="file" id="modulePhotoFile" accept="image/*" style="display:none">
|
|
<button type="button" id="modulePhotoDeleteBtn" class="btn-link danger" style="display:none">Удалить</button>
|
|
</div>
|
|
<span id="modulePhotoNote" class="hint">jpg, png, gif, webp, avif, heic и др., до 10 МБ · или вставьте из буфера (Ctrl+V)</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-foot" style="justify-content:flex-end;gap:8px">
|
|
<button type="button" class="btn-primary ghost" id="moduleCancelBtn">Отмена</button>
|
|
<button type="submit" class="btn-primary" id="moduleSubmitBtn">Создать</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="batchModuleModal">
|
|
<div class="edit-modal" style="max-width:520px">
|
|
<h3>Пакетное добавление модулей</h3>
|
|
<form id="batchModuleForm" class="settings-stack" style="gap:12px">
|
|
<div class="settings-field">
|
|
<label>Модули — каждый с новой строки <span style="color:#ef4444">*</span></label>
|
|
<textarea id="batchModuleText" class="settings-input" style="min-height:160px;font-family:monospace" required
|
|
placeholder="Основы Python | 10 Введение в базы данных | 8 Разработка интерфейсов 12"></textarea>
|
|
<span class="hint">Название может состоять из нескольких слов. Количество занятий отделяйте символом <b>|</b>, <b>;</b>, <b>=</b> или табуляцией; если не указать разделитель — последнее число в строке считается количеством занятий. Количество занятий обязательно для каждой строки.</span>
|
|
</div>
|
|
<div class="card-foot" style="justify-content:flex-end;gap:8px">
|
|
<button type="button" class="btn-primary ghost" id="batchModuleCancelBtn">Отмена</button>
|
|
<button type="submit" class="btn-primary" id="batchModuleSubmitBtn">Добавить</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
<script src="vendor/lucide.min.js"></script>
|
|
<script src="admin.js"></script>
|
|
<script src="js/modules.js"></script>
|
|
<style>
|
|
.page-sub{color:var(--muted);font-size:.85rem;margin:0}
|
|
.module-item{display:flex;justify-content:space-between;align-items:center;gap:12px}
|
|
.module-info{min-width:0;display:flex;flex-direction:column;gap:4px}
|
|
.module-name{font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.module-thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0}
|
|
.module-meta{font-size:.78rem;color:var(--muted)}
|
|
.module-item.module-off .module-name{color:var(--muted)}
|
|
.module-badge{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;font-size:.7rem;font-weight:600;background:rgba(239,68,68,.12);color:#ef4444;vertical-align:middle}
|
|
.module-item .btn-link.danger{color:#ef4444}
|
|
.module-item .btn-link.danger:hover{border-color:#ef4444}
|
|
#batchModuleModal .hint{font-size:.78rem;color:var(--muted);line-height:1.5;display:block}
|
|
#batchModuleModal .hint b{color:var(--text)}
|
|
.module-photo-controls{display:flex;flex-direction:column;gap:10px;align-items:flex-start;width:100%}
|
|
.module-photo-preview{width:100%;max-height:180px;object-fit:contain;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
|
|
.module-photo-actions{display:flex;align-items:center;gap:8px}
|
|
.module-photo-pick{text-align:center;cursor:pointer;margin:0}
|
|
.module-photo-actions .btn-link.danger{color:#ef4444;border-color:rgba(239,68,68,.35)}
|
|
.module-photo-actions .btn-link.danger:hover{border-color:#ef4444}
|
|
#moduleModal .hint{font-size:.78rem;color:var(--muted);line-height:1.5;display:block}
|
|
@media (max-width:640px){.module-item{flex-direction:column;align-items:flex-start}}
|
|
</style>
|
|
</body>
|
|
</html> |