This commit is contained in:
2026-05-08 15:23:29 +03:00
parent 951f4c5c60
commit f828068dd7
5 changed files with 1229 additions and 127 deletions
+749
View File
@@ -0,0 +1,749 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Админ-панель - Управление вопросами викторины</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f5f5f5;
padding: 20px;
}
.admin-container {
max-width: 1400px;
margin: 0 auto;
}
/* Header */
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 15px;
margin-bottom: 30px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.header h1 {
font-size: 28px;
}
.header-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: all 0.3s ease;
}
.btn-primary {
background: #4CAF50;
color: white;
}
.btn-primary:hover {
background: #45a049;
transform: translateY(-2px);
}
.btn-danger {
background: #f44336;
color: white;
}
.btn-danger:hover {
background: #da190b;
transform: translateY(-2px);
}
.btn-warning {
background: #ff9800;
color: white;
}
.btn-warning:hover {
background: #e68900;
transform: translateY(-2px);
}
.btn-info {
background: #2196F3;
color: white;
}
.btn-info:hover {
background: #0b7dda;
transform: translateY(-2px);
}
.btn-secondary {
background: #9e9e9e;
color: white;
}
.btn-secondary:hover {
background: #757575;
transform: translateY(-2px);
}
/* Stats */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
text-align: center;
}
.stat-number {
font-size: 36px;
font-weight: bold;
color: #667eea;
}
.stat-label {
color: #666;
margin-top: 5px;
}
/* Search and filter */
.search-bar {
background: white;
padding: 20px;
border-radius: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.search-input {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}
.search-input:focus {
outline: none;
border-color: #667eea;
}
/* Questions list */
.questions-list {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.question-item {
border-bottom: 1px solid #e0e0e0;
padding: 20px;
transition: background 0.3s;
}
.question-item:hover {
background: #f9f9f9;
}
.question-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 10px;
flex-wrap: wrap;
gap: 10px;
}
.question-number {
font-weight: bold;
color: #667eea;
font-size: 18px;
}
.question-actions {
display: flex;
gap: 10px;
}
.question-text {
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
color: #333;
}
.question-options {
margin: 10px 0;
padding-left: 20px;
}
.option {
font-size: 14px;
color: #666;
margin: 5px 0;
}
.option.correct {
color: #4CAF50;
font-weight: bold;
}
.question-explanation {
font-size: 13px;
color: #999;
font-style: italic;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #e0e0e0;
}
/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal.active {
display: flex;
}
.modal-content {
background: white;
padding: 30px;
border-radius: 20px;
max-width: 600px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.modal-header h2 {
color: #333;
}
.close-modal {
font-size: 28px;
cursor: pointer;
color: #999;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 10px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
.options-group {
margin-bottom: 15px;
padding: 10px;
background: #f9f9f9;
border-radius: 8px;
}
.option-input {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.option-input input {
flex: 1;
}
.form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
}
/* Alert */
.alert {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
border-radius: 10px;
color: white;
font-weight: bold;
z-index: 1100;
animation: slideIn 0.3s ease;
}
.alert-success {
background: #4CAF50;
}
.alert-error {
background: #f44336;
}
.alert-info {
background: #2196F3;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Empty state */
.empty-state {
text-align: center;
padding: 60px;
color: #999;
}
/* Responsive */
@media (max-width: 768px) {
.header {
flex-direction: column;
text-align: center;
}
.question-header {
flex-direction: column;
}
.question-actions {
width: 100%;
justify-content: flex-end;
}
}
</style>
</head>
<body>
<div class="admin-container">
<div class="header">
<h1>📝 Админ-панель управления вопросами</h1>
<div class="header-buttons">
<button class="btn btn-primary" onclick="openAddModal()"> Добавить вопрос</button>
<button class="btn btn-info" onclick="exportQuestions()">📤 Экспорт</button>
<button class="btn btn-warning" onclick="importQuestions()">📥 Импорт</button>
<button class="btn btn-danger" onclick="resetQuestions()">🔄 Сбросить</button>
<a href="/" class="btn btn-secondary" target="_blank">🎮 Перейти в викторину</a>
</div>
</div>
<div class="stats">
<div class="stat-card">
<div class="stat-number" id="totalQuestions">0</div>
<div class="stat-label">Всего вопросов</div>
</div>
<div class="stat-card">
<div class="stat-number" id="activeGames">0</div>
<div class="stat-label">Активных игр</div>
</div>
</div>
<div class="search-bar">
<input type="text" class="search-input" id="searchInput" placeholder="🔍 Поиск вопросов...">
</div>
<div class="questions-list" id="questionsList">
<div class="empty-state">Загрузка вопросов...</div>
</div>
</div>
<!-- Модальное окно добавления/редактирования -->
<div id="modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="modalTitle">Добавить вопрос</h2>
<span class="close-modal" onclick="closeModal()">&times;</span>
</div>
<form id="questionForm">
<div class="form-group">
<label>Вопрос *</label>
<textarea id="questionText" required placeholder="Введите текст вопроса..."></textarea>
</div>
<div class="form-group">
<label>Варианты ответов *</label>
<div id="optionsContainer">
<div class="options-group">
<div class="option-input">
<input type="text" class="option-input-0" placeholder="Вариант 1" required>
</div>
<div class="option-input">
<input type="text" class="option-input-1" placeholder="Вариант 2" required>
</div>
<div class="option-input">
<input type="text" class="option-input-2" placeholder="Вариант 3" required>
</div>
<div class="option-input">
<input type="text" class="option-input-3" placeholder="Вариант 4" required>
</div>
</div>
</div>
</div>
<div class="form-group">
<label>Правильный ответ *</label>
<select id="correctAnswer" required>
<option value="0">Вариант 1</option>
<option value="1">Вариант 2</option>
<option value="2">Вариант 3</option>
<option value="3">Вариант 4</option>
</select>
</div>
<div class="form-group">
<label>Пояснение</label>
<textarea id="explanation" placeholder="Пояснение к правильному ответу..."></textarea>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" onclick="closeModal()">Отмена</button>
<button type="submit" class="btn btn-primary">Сохранить</button>
</div>
</form>
</div>
</div>
<script>
let questions = [];
let editingIndex = null;
// Загрузка вопросов
async function loadQuestions() {
try {
const response = await fetch('/api/questions');
questions = await response.json();
document.getElementById('totalQuestions').textContent = questions.length;
renderQuestions();
} catch (error) {
console.error('Ошибка:', error);
showAlert('Ошибка загрузки вопросов', 'error');
}
}
// Отображение вопросов
function renderQuestions() {
const container = document.getElementById('questionsList');
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
const filtered = questions.filter(q =>
q.text.toLowerCase().includes(searchTerm) ||
q.options.some(opt => opt.toLowerCase().includes(searchTerm))
);
if (filtered.length === 0) {
container.innerHTML = '<div class="empty-state">📭 Вопросы не найдены</div>';
return;
}
container.innerHTML = filtered.map((q, idx) => {
const originalIndex = questions.findIndex(orig => orig === q);
return `
<div class="question-item">
<div class="question-header">
<span class="question-number">Вопрос #${originalIndex + 1}</span>
<div class="question-actions">
<button class="btn btn-info" onclick="editQuestion(${originalIndex})" style="padding: 5px 15px;">✏️ Редактировать</button>
<button class="btn btn-danger" onclick="deleteQuestion(${originalIndex})" style="padding: 5px 15px;">🗑️ Удалить</button>
</div>
</div>
<div class="question-text">${escapeHtml(q.text)}</div>
<div class="question-options">
${q.options.map((opt, optIdx) => `
<div class="option ${optIdx === q.correct ? 'correct' : ''}">
${String.fromCharCode(65+optIdx)}. ${escapeHtml(opt)} ${optIdx === q.correct ? '✓' : ''}
</div>
`).join('')}
</div>
${q.explanation ? `<div class="question-explanation">💡 ${escapeHtml(q.explanation)}</div>` : ''}
</div>
`;
}).join('');
}
// Экранирование HTML
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// Открыть модальное окно для добавления
function openAddModal() {
editingIndex = null;
document.getElementById('modalTitle').textContent = '➕ Добавить вопрос';
document.getElementById('questionForm').reset();
document.getElementById('correctAnswer').value = '0';
document.getElementById('modal').classList.add('active');
}
// Редактирование вопроса
function editQuestion(index) {
editingIndex = index;
const q = questions[index];
document.getElementById('modalTitle').textContent = '✏️ Редактировать вопрос';
document.getElementById('questionText').value = q.text;
document.getElementById('correctAnswer').value = q.correct;
document.getElementById('explanation').value = q.explanation || '';
// Заполняем варианты ответов
q.options.forEach((opt, i) => {
const input = document.querySelector(`.option-input-${i}`);
if (input) input.value = opt;
});
document.getElementById('modal').classList.add('active');
}
// Сохранение вопроса
document.getElementById('questionForm').addEventListener('submit', async (e) => {
e.preventDefault();
const options = [];
for (let i = 0; i < 4; i++) {
const input = document.querySelector(`.option-input-${i}`);
if (!input.value.trim()) {
showAlert('Заполните все варианты ответов', 'error');
return;
}
options.push(input.value.trim());
}
const questionData = {
text: document.getElementById('questionText').value.trim(),
options: options,
correct: parseInt(document.getElementById('correctAnswer').value),
explanation: document.getElementById('explanation').value.trim()
};
if (!questionData.text) {
showAlert('Введите текст вопроса', 'error');
return;
}
try {
let response;
if (editingIndex !== null) {
response = await fetch(`/api/questions/${editingIndex}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(questionData)
});
} else {
response = await fetch('/api/questions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(questionData)
});
}
const result = await response.json();
if (result.success) {
showAlert(result.message, 'success');
closeModal();
loadQuestions();
} else {
showAlert(result.message, 'error');
}
} catch (error) {
showAlert('Ошибка сохранения', 'error');
}
});
// Удаление вопроса
async function deleteQuestion(index) {
if (confirm('Вы уверены, что хотите удалить этот вопрос?')) {
try {
const response = await fetch(`/api/questions/${index}`, {
method: 'DELETE'
});
const result = await response.json();
if (result.success) {
showAlert(result.message, 'success');
loadQuestions();
} else {
showAlert(result.message, 'error');
}
} catch (error) {
showAlert('Ошибка удаления', 'error');
}
}
}
// Сброс вопросов
async function resetQuestions() {
if (confirm('Сбросить все вопросы к стандартному пулу? Все добавленные вопросы будут удалены!')) {
try {
const response = await fetch('/api/questions/reset', {
method: 'POST'
});
const result = await response.json();
if (result.success) {
showAlert(result.message, 'success');
loadQuestions();
}
} catch (error) {
showAlert('Ошибка сброса', 'error');
}
}
}
// Экспорт вопросов
async function exportQuestions() {
try {
const response = await fetch('/api/questions/export');
const data = await response.json();
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `questions_export_${new Date().toISOString().slice(0,19)}.json`;
a.click();
URL.revokeObjectURL(url);
showAlert('Вопросы экспортированы', 'success');
} catch (error) {
showAlert('Ошибка экспорта', 'error');
}
}
// Импорт вопросов
async function importQuestions() {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json';
input.onchange = async (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = async (event) => {
try {
const questions = JSON.parse(event.target.result);
const response = await fetch('/api/questions/import', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(questions)
});
const result = await response.json();
if (result.success) {
showAlert(result.message, 'success');
loadQuestions();
} else {
showAlert(result.message, 'error');
}
} catch (error) {
showAlert('Ошибка парсинга файла', 'error');
}
};
reader.readAsText(file);
};
input.click();
}
// Показать уведомление
function showAlert(message, type) {
const alert = document.createElement('div');
alert.className = `alert alert-${type}`;
alert.textContent = message;
document.body.appendChild(alert);
setTimeout(() => alert.remove(), 3000);
}
// Закрыть модальное окно
function closeModal() {
document.getElementById('modal').classList.remove('active');
editingIndex = null;
}
// Поиск
document.getElementById('searchInput').addEventListener('input', () => {
renderQuestions();
});
// Закрытие модального окна по клику вне его
document.getElementById('modal').addEventListener('click', (e) => {
if (e.target === document.getElementById('modal')) {
closeModal();
}
});
// Загрузка активных игр
async function loadActiveGames() {
// Можно добавить эндпоинт для подсчёта активных игр
document.getElementById('activeGames').textContent = Object.keys(activeGames || {}).length;
}
// Инициализация
loadQuestions();
setInterval(loadActiveGames, 5000);
</script>
</body>
</html>