web-tech/labs/lab-10/templates/orders.html
2025-11-20 15:46:57 +03:00

218 lines
No EOL
10 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">
<link rel="icon" href="https://deev.space/media/favicon.ico" type="image/x-icon">
<title>Мои заказы - ЭкоЛанч</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
<div class="container">
<a class="navbar-brand" href="../index.html">
<span class="brand-icon">🌿</span>
<span class="brand-eco">Эко</span><span class="brand-lunch">Ланч</span>
</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 justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="../index.html">Главная</a>
</li>
<li class="nav-item">
<a class="nav-link" href="menu.html">Собрать ланч</a>
</li>
<li class="nav-item">
<a class="nav-link" href="order.html">Оформить заказ</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="orders.html">Мои заказы</a>
</li>
<li class="nav-item">
<a class="nav-link" href="delivery.html">Доставка</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">О нас</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contacts">Контакты</a>
</li>
</ul>
</div>
</div>
</nav>
<main style="padding-top: 80px;">
<div class="container py-5">
<section>
<h2 class="text-center mb-4">Мои заказы</h2>
<div id="orders-list" class="orders-list"></div>
<div id="empty-orders" class="empty-orders-message hidden">
<p>У вас пока нет оформленных заказов. Перейдите на страницу <a href="menu.html">Собрать ланч</a>, чтобы создать первый заказ.</p>
</div>
</section>
</div>
</main>
<div id="view-modal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h3>Просмотр заказа</h3>
<span class="modal-close">&times;</span>
</div>
<div class="modal-body" id="view-modal-body">
<div class="modal-section">
<p class="modal-label">Дата оформления</p>
<p class="modal-value" id="view-date"></p>
</div>
<div class="modal-section">
<h4 class="modal-section-title">Доставка</h4>
<div class="modal-info-grid">
<div class="modal-info-item">
<span class="modal-label">Имя получателя</span>
<span class="modal-value" id="view-name"></span>
</div>
<div class="modal-info-item">
<span class="modal-label">Адрес доставки</span>
<span class="modal-value" id="view-address"></span>
</div>
<div class="modal-info-item">
<span class="modal-label">Время доставки</span>
<span class="modal-value" id="view-time"></span>
</div>
<div class="modal-info-item">
<span class="modal-label">Телефон</span>
<span class="modal-value" id="view-phone"></span>
</div>
<div class="modal-info-item">
<span class="modal-label">Email</span>
<span class="modal-value" id="view-email"></span>
</div>
</div>
</div>
<div class="modal-section" id="view-comment-section">
<h4 class="modal-section-title">Комментарий</h4>
<p class="modal-value" id="view-comment"></p>
</div>
<div class="modal-section">
<h4 class="modal-section-title">Состав заказа</h4>
<div class="modal-order-items" id="view-items"></div>
<div class="modal-total">
<span>Стоимость:</span>
<span id="view-total"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button class="modal-btn modal-btn-ok" id="view-modal-ok">OK</button>
</div>
</div>
</div>
<div id="edit-modal" class="modal hidden">
<div class="modal-content">
<div class="modal-header">
<h3>Редактирование заказа</h3>
<span class="modal-close">&times;</span>
</div>
<div class="modal-body">
<div class="modal-section">
<p class="modal-label">Дата оформления</p>
<p class="modal-value" id="edit-created-date"></p>
</div>
<form id="edit-form">
<div class="modal-section">
<h4 class="modal-section-title">Доставка</h4>
<label for="edit-name">Имя получателя</label>
<input type="text" id="edit-name" name="full_name" required>
<label for="edit-address">Адрес доставки</label>
<input type="text" id="edit-address" name="delivery_address" required>
<label for="edit-time">Время доставки</label>
<input type="time" id="edit-time" name="delivery_time" min="07:00" max="23:00" step="300">
<label for="edit-phone">Телефон</label>
<input type="tel" id="edit-phone" name="phone" required>
<label for="edit-email">Email</label>
<input type="email" id="edit-email" name="email" required>
</div>
<div class="modal-section">
<h4 class="modal-section-title">Комментарий</h4>
<textarea id="edit-comment" name="comment" rows="3"></textarea>
</div>
<div class="modal-section">
<h4 class="modal-section-title">Состав заказа</h4>
<div class="modal-order-items" id="edit-items"></div>
<div class="modal-total">
<span>Стоимость:</span>
<span id="edit-total"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="modal-btn modal-btn-cancel" id="edit-modal-cancel">Отмена</button>
<button class="modal-btn modal-btn-save" id="edit-modal-save">Сохранить</button>
</div>
</div>
</div>
<div id="delete-modal" class="modal hidden">
<div class="modal-content modal-content-small">
<div class="modal-header">
<h3>Удаление заказа</h3>
<span class="modal-close">&times;</span>
</div>
<div class="modal-body">
<p class="modal-delete-text">Вы уверены, что хотите удалить заказ?</p>
</div>
<div class="modal-footer">
<button class="modal-btn modal-btn-cancel" id="delete-modal-cancel">Отмена</button>
<button class="modal-btn modal-btn-delete" id="delete-modal-confirm">Да</button>
</div>
</div>
</div>
<div id="notification" class="notification hidden"></div>
<footer id="contacts" class="footer py-4">
<div class="container">
<div class="footer-content">
<div class="footer-title">Контактная информация</div>
<div class="footer-info">
<div class="footer-row">
<span>Телефон: <a href="tel:+79993737737">+7 (999) 373-77-37</a></span>
<span>Email: <a href="mailto:egor@deev.space">egor@deev.space</a></span>
</div>
<div class="footer-row">
<span>Адрес: г. Москва, ул. Михалковская, д. 7</span>
<span>Режим работы: Пн-Пт с 7:00 до 23:00</span>
</div>
<div class="footer-row footer-copyright">
© 2024 ЭкоЛанч. Все права защищены.
</div>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="../js/orders.js"></script>
</body>
</html>