webdev-exam-2025-1-devik/account.html

277 lines
No EOL
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Личный кабинет - WorldLang</title>
<link rel="icon" href="https://deev.space/media/favicon.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/account.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">
<i class="bi bi-translate"></i> WorldLang
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">На главную</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="account.html">Личный кабинет</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="notificationArea"></div>
<div class="container my-5">
<h1 class="mb-2">Добро пожаловать в личный кабинет</h1>
<p class="text-muted mb-5">Здесь вы можете управлять своими заявками</p>
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Ваши заявки</h5>
<span id="ordersCount" class="badge bg-primary">0 заявок</span>
</div>
<div class="card-body">
<div id="emptyState" class="text-center py-5" style="display: none;">
<i class="bi bi-inbox fs-1 text-muted"></i>
<h4 class="mt-3">У вас пока нет заявок</h4>
<p class="text-muted">Оформите заявку на курс или репетитора на главной странице</p>
<a href="index.html" class="btn btn-primary">Выбрать курс</a>
</div>
<div id="ordersTable" style="display: none;">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>Название</th>
<th>Дата</th>
<th>Стоимость</th>
<th>Действия</th>
</tr>
</thead>
<tbody id="ordersList"></tbody>
</table>
</div>
<nav>
<ul id="ordersPagination" class="pagination justify-content-center"></ul>
</nav>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-white py-4 mt-auto">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<span><i class="bi bi-translate me-2"></i>WorldLang</span>
</div>
<div class="col-md-6 text-md-end">
<span class="text-secondary">egor@deev.space</span>
</div>
</div>
</div>
</footer>
<div class="modal fade" id="orderDetailModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Подробности заявки</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body" id="orderDetailContent"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="editOrderModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Редактирование заявки</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="editOrderForm">
<input type="hidden" id="editOrderId">
<input type="hidden" id="editCourseId">
<input type="hidden" id="editTutorId">
<div id="editCourseFields" style="display: none;">
<div class="mb-3">
<label class="form-label">Название курса</label>
<input type="text" id="editCourseName" class="form-control" readonly>
</div>
<div class="mb-3">
<label class="form-label">Преподаватель</label>
<input type="text" id="editCourseTeacher" class="form-control" readonly>
</div>
<div class="mb-3">
<label class="form-label">Дата начала</label>
<select id="editCourseStartDate" class="form-select" required></select>
</div>
<div class="mb-3">
<label class="form-label">Время начала</label>
<select id="editCourseStartTime" class="form-select" required></select>
</div>
<div class="mb-3">
<label class="form-label">Продолжительность курса</label>
<input type="text" id="editCourseDuration" class="form-control" readonly>
</div>
<div class="mb-3">
<label class="form-label">Дата окончания курса</label>
<input type="text" id="editCourseEndDate" class="form-control" readonly>
</div>
<div class="mb-3">
<label class="form-label">Количество студентов</label>
<input type="number" id="editStudentsNumber" class="form-control" min="1" max="20" required>
</div>
<div class="mb-3">
<label class="form-label">Автоматические опции</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="editEarlyRegistration" disabled>
<label class="form-check-label" for="editEarlyRegistration">
Ранняя регистрация (-10%)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="editGroupEnrollment" disabled>
<label class="form-check-label" for="editGroupEnrollment">
Групповая скидка (-15%)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="editIntensiveCourse" disabled>
<label class="form-check-label" for="editIntensiveCourse">
Интенсивный курс (+20%)
</label>
</div>
</div>
<div class="mb-3">
<label class="form-label">Дополнительные опции</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="editSupplementary">
<label class="form-check-label" for="editSupplementary">
Дополнительные учебные материалы (+2000₽/студ.)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="editPersonalized">
<label class="form-check-label" for="editPersonalized">
Индивидуальные занятия (+1500₽/нед.)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="editExcursions">
<label class="form-check-label" for="editExcursions">
Культурные экскурсии (+25%)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="editAssessment">
<label class="form-check-label" for="editAssessment">
Оценка уровня владения языком (+300₽)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="editInteractive">
<label class="form-check-label" for="editInteractive">
Доступ к интерактивной онлайн-платформе (+50%)
</label>
</div>
</div>
</div>
<div id="editTutorFields" style="display: none;">
<div class="mb-3">
<label class="form-label">Репетитор</label>
<input type="text" id="editTutorName" class="form-control" readonly>
</div>
</div>
<div class="mb-3">
<label class="form-label">Ваше имя</label>
<input type="text" id="editStudentName" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Телефон</label>
<input type="tel" id="editStudentPhone" class="form-control" pattern="[+]?[0-9]{10,15}" required>
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" id="editStudentEmail" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Сообщение</label>
<textarea id="editStudentMessage" class="form-control" rows="3"></textarea>
</div>
<div class="alert alert-info">
<h5>Итоговая стоимость: <span id="editTotalPrice">0</span></h5>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
<button type="button" id="saveOrderChanges" class="btn btn-warning">Сохранить</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="deleteOrderModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Удаление</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Вы уверены, что хотите удалить заявку?</p>
<p class="text-muted">Это действие нельзя отменить.</p>
<input type="hidden" id="deleteOrderId">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Нет</button>
<button type="button" id="confirmDelete" class="btn btn-danger">Да, удалить</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/api.js"></script>
<script src="js/utils.js"></script>
<script src="js/account.js"></script>
</body>
</html>