Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
616c03e397 | ||
| d1b2cea66c | |||
| 311491d554 | |||
| 5fa65ad591 |
178
Account.html
178
Account.html
@@ -1,178 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
|
||||||
<title>Интернет-магазин: ЛК</title>
|
|
||||||
<link rel="stylesheet" href="css/style.css" />
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
||||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header">
|
|
||||||
<div class="d-block mt-3 ms-3">
|
|
||||||
<img src="images/logo.jpg" alt="Название магазина" class="me-3" style="width: 200px; height: auto;">
|
|
||||||
<a href="newSite.html" class="text-decoration-none text-dark m-1">
|
|
||||||
<h1 class="display-4 h3 mt-3"><b>Название магазина</b></h1>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<navbar>
|
|
||||||
<div class="dropdown">
|
|
||||||
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown"
|
|
||||||
data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
Навигация
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center"
|
|
||||||
href="Account.html">Личный кабинет<i class="bi bi-person-circle ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center"
|
|
||||||
href="Basket.html">Корзина<i class="bi bi-cart4 ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center"
|
|
||||||
href="Order.html">Заказы<i class="bi bi-receipt ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center"
|
|
||||||
href="Favorites.html">Избранное<i class="bi bi-heart-fill ms-2"></i></a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</navbar>
|
|
||||||
</header>
|
|
||||||
<div class="container mt-5">
|
|
||||||
<div class="card text-center mx-auto" style="max-width: 400px; max-height: 400px;">
|
|
||||||
<img src="images/бананы.jpg" class="card-img-top" alt="Профиль"
|
|
||||||
style="width: 100%; height: 300px; object-fit: cover;">
|
|
||||||
<div class="card-body">
|
|
||||||
<h3 class="card-title">Имя Фамилия</h3>
|
|
||||||
<p class="card-text">Описание</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<footer class="container mt-5">
|
|
||||||
<div class="bg-light p-4">
|
|
||||||
<h5>Помощь:</h5>
|
|
||||||
<div class="d-flex flex-wrap">
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<i class="bi bi-telephone-fill me-2"></i>
|
|
||||||
<a href="#" class="text-decoration-none text-dark">8 (800)-555-35-35</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<img src="images/vk.png" alt="VK" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="https://vk.com/howmakesite_nn?from=search" target="_blank"
|
|
||||||
class="text-decoration-none text-dark">vk.com</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<img src="images/telegram.png" alt="Telegram" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="#" class="text-decoration-none text-dark">tg.me</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center mb-3">
|
|
||||||
<img src="images/gmail.png" alt="Gmail" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="mailto:ozon-zon-zon@mail.joke"
|
|
||||||
class="text-decoration-none text-dark">ozon-zon-zon@mail.joke</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
||||||
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
|
||||||
crossorigin="anonymous"></script>
|
|
||||||
<script type="module">
|
|
||||||
let profile = {
|
|
||||||
firstName: "Иван",
|
|
||||||
lastName: "Иванов",
|
|
||||||
image: "images/бананы.jpg"
|
|
||||||
};
|
|
||||||
|
|
||||||
function renderProfile() {
|
|
||||||
const card = document.querySelector('.container .card');
|
|
||||||
card.innerHTML = `
|
|
||||||
<img src="${profile.image || 'images/бананы.jpg'}" class="card-img-top" alt="Профиль" style="width: 100%; height: 300px; object-fit: cover;">
|
|
||||||
<div class="card-body">
|
|
||||||
<h3 class="card-title">${profile.firstName} ${profile.lastName}</h3>
|
|
||||||
<button class="btn btn-primary" id="editProfileBtn"><i class="bi bi-pencil"></i> Редактировать профиль</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
card.querySelector('#editProfileBtn').onclick = showEditModal;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showEditModal() {
|
|
||||||
let modalDiv = document.getElementById('profileModal');
|
|
||||||
if (!modalDiv) {
|
|
||||||
modalDiv = document.createElement('div');
|
|
||||||
modalDiv.className = 'modal fade';
|
|
||||||
modalDiv.id = 'profileModal';
|
|
||||||
modalDiv.tabIndex = -1;
|
|
||||||
modalDiv.innerHTML = `
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<div class="modal-content" id="profileModalContent"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
document.body.appendChild(modalDiv);
|
|
||||||
}
|
|
||||||
const modalContent = modalDiv.querySelector('#profileModalContent');
|
|
||||||
modalContent.innerHTML = `
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title">Редактировать профиль</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
||||||
</div>
|
|
||||||
<form id="profileForm">
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">Имя</label>
|
|
||||||
<input type="text" class="form-control" name="firstName" value="${profile.firstName}" required pattern="^[А-Яа-яЁё]+$" title="Только русские буквы!">
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">Фамилия</label>
|
|
||||||
<input type="text" class="form-control" name="lastName" value="${profile.lastName}" required pattern="^[А-Яа-яЁё]+$" title="Только русские буквы!">
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">Фото профиля</label>
|
|
||||||
<input type="file" class="form-control" name="image" accept="image/*">
|
|
||||||
<img id="profilePreviewImage" src="${profile.image || ''}" style="max-width:100%;margin-top:10px;${profile.image ? '' : 'display:none;'}"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="submit" class="btn btn-success">Сохранить</button>
|
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
const modal = new bootstrap.Modal(modalDiv);
|
|
||||||
modal.show();
|
|
||||||
|
|
||||||
// Предпросмотр картинки
|
|
||||||
const fileInput = modalContent.querySelector('input[type="file"]');
|
|
||||||
|
|
||||||
document.getElementById('profileForm').onsubmit = function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const formData = new FormData(e.target);
|
|
||||||
const firstName = formData.get('firstName');
|
|
||||||
const lastName = formData.get('lastName');
|
|
||||||
// Валидация кириллицы
|
|
||||||
if (!/^[А-Яа-яЁё]+$/.test(firstName) || !/^[А-Яа-яЁё]+$/.test(lastName)) {
|
|
||||||
alert('Имя и фамилия должны быть только на русском!');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
profile.firstName = firstName;
|
|
||||||
profile.lastName = lastName;
|
|
||||||
if (fileInput.files.length) {
|
|
||||||
const file = fileInput.files[0];
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = function (event) {
|
|
||||||
profile.image = event.target.result; // base64
|
|
||||||
modal.hide();
|
|
||||||
renderProfile();
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
} else {
|
|
||||||
profile.image = fileInput.src || "images/бананы.jpg";
|
|
||||||
modal.hide();
|
|
||||||
renderProfile();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
renderProfile();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
80
Basket.html
80
Basket.html
@@ -1,80 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
|
||||||
<title>Интернет-магазин: Корзина</title>
|
|
||||||
<link rel="stylesheet" href="css/style.css"/>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header">
|
|
||||||
<div class="d-block mt-3 ms-3">
|
|
||||||
<img src="images/logo.jpg" alt="Название магазина" class="me-3" style="width: 200px; height: auto;">
|
|
||||||
<a href="newSite.html" class="text-decoration-none text-dark m-1"><h1 class="display-4 h3 mt-3"><b>Название магазина</b></h1></a>
|
|
||||||
</div>
|
|
||||||
<navbar>
|
|
||||||
<div class="dropdown">
|
|
||||||
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
Навигация
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Account.html">Личный кабинет<i class="bi bi-person-circle ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Basket.html">Корзина<i class="bi bi-cart4 ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Order.html">Заказы<i class="bi bi-receipt ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Favorites.html">Избранное<i class="bi bi-heart-fill ms-2"></i></a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</navbar>
|
|
||||||
</header>
|
|
||||||
<main class="container d-flex justify-content-center align-items-center" style="min-height: 60vh;">
|
|
||||||
<div class="card p-4 shadow" style="min-width: 60vw;">
|
|
||||||
<h2 class="text-center">Корзина</h2>
|
|
||||||
<ul class="list-group list-group-flush">
|
|
||||||
<li class="list-group-item d-flex align-items-center">
|
|
||||||
<img src="images/glasses.jpg" alt="Очки" style="width: 100px; height: 100px;" class="me-3">
|
|
||||||
Очки <span class="ms-auto">349 руб.</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex align-items-center">
|
|
||||||
<img src="images/chery.jpg" alt="Chery Tiggo" style="width: 100px; height: 100px;" class="me-3">
|
|
||||||
Chery Tiggo 7 Pro Max <span class="ms-auto">5 руб.</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex align-items-center">
|
|
||||||
<img src="images/vanadiy.jpg" alt="Ванадий" style="width: 100px; height: 100px;" class="me-3">
|
|
||||||
Ванадий <span class="ms-auto">2099 руб.</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="text-center mt-3">
|
|
||||||
<a href="https://xn----7sbon6aucai8a.xn--p1ai/wa-data/public/shop/products/98/27/2798/images/6060/6060.970.jpg" target="_blank" class="btn btn-success w-100">
|
|
||||||
Оплатить
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<footer class="container mt-5">
|
|
||||||
<div class="bg-light p-4">
|
|
||||||
<h5>Помощь:</h5>
|
|
||||||
<div class="d-flex flex-wrap">
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<i class="bi bi-telephone-fill me-2"></i>
|
|
||||||
<a href="#" class="text-decoration-none text-dark">8 (800)-555-35-35</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<img src="images/vk.png" alt="VK" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="https://vk.com/howmakesite_nn?from=search" target="_blank" class="text-decoration-none text-dark">vk.com</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<img src="images/telegram.png" alt="Telegram" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="#" class="text-decoration-none text-dark">tg.me</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center mb-3">
|
|
||||||
<img src="images/gmail.png" alt="Gmail" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="mailto:ozon-zon-zon@mail.joke" class="text-decoration-none text-dark">ozon-zon-zon@mail.joke</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
|
||||||
<title>Интернет-магазин: Избранное</title>
|
|
||||||
<link rel="stylesheet" href="css/style.css"/>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header">
|
|
||||||
<div class="d-block mt-3 ms-3">
|
|
||||||
<img src="images/logo.jpg" alt="Название магазина" class="me-3" style="width: 200px; height: auto;">
|
|
||||||
<a href="newSite.html" class="text-decoration-none text-dark m-1"><h1 class="display-4 h3 mt-3"><b>Название магазина</b></h1></a>
|
|
||||||
</div>
|
|
||||||
<navbar>
|
|
||||||
<div class="dropdown">
|
|
||||||
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
Навигация
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Account.html">Личный кабинет<i class="bi bi-person-circle ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Basket.html">Корзина<i class="bi bi-cart4 ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Order.html">Заказы<i class="bi bi-receipt ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Favorites.html">Избранное<i class="bi bi-heart-fill ms-2"></i></a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</navbar>
|
|
||||||
</header>
|
|
||||||
<div class="container mt-4">
|
|
||||||
<h2 class="mb-4">Избранное</h2>
|
|
||||||
<div class="row row-cols-1 row-cols-md-2 g-4">
|
|
||||||
<div class="col">
|
|
||||||
<div class="card mx-auto" style="width: 70%;">
|
|
||||||
<img src="images/masha.jpg" class="card-img-top" alt="Женщина" style="width: 100%; height: 300px; object-fit: cover;">
|
|
||||||
<div class="card-body text-center">
|
|
||||||
<h5 class="card-title">Женщина</h5>
|
|
||||||
<p class="card-text">бесценна</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card mx-auto" style="width: 70%;">
|
|
||||||
<img src="images/screwdriver.jpg" class="card-img-top" alt="Отвертка" style="width: 100%; height: 300px; object-fit: cover;">
|
|
||||||
<div class="card-body text-center">
|
|
||||||
<h5 class="card-title">Отвертка</h5>
|
|
||||||
<p class="card-text">219 руб</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<footer class="container mt-5">
|
|
||||||
<div class="bg-light p-4">
|
|
||||||
<h5>Помощь:</h5>
|
|
||||||
<div class="d-flex flex-wrap">
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<i class="bi bi-telephone-fill me-2"></i>
|
|
||||||
<a href="#" class="text-decoration-none text-dark">8 (800)-555-35-35</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<img src="images/vk.png" alt="VK" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="https://vk.com/howmakesite_nn?from=search" target="_blank" class="text-decoration-none text-dark">vk.com</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<img src="images/telegram.png" alt="Telegram" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="#" class="text-decoration-none text-dark">tg.me</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center mb-3">
|
|
||||||
<img src="images/gmail.png" alt="Gmail" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="mailto:ozon-zon-zon@mail.joke" class="text-decoration-none text-dark">ozon-zon-zon@mail.joke</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
101
Order.html
101
Order.html
@@ -1,101 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
|
||||||
<title>Интернет-магазин: Заказы</title>
|
|
||||||
<link rel="stylesheet" href="css/style.css"/>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header">
|
|
||||||
<div class="d-block mt-3 ms-3">
|
|
||||||
<img src="images/logo.jpg" alt="Название магазина" class="me-3" style="width: 200px; height: auto;">
|
|
||||||
<a href="newSite.html" class="text-decoration-none text-dark m-1"><h1 class="display-4 h3 mt-3"><b>Название магазина</b></h1></a>
|
|
||||||
</div>
|
|
||||||
<navbar>
|
|
||||||
<div class="dropdown">
|
|
||||||
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
Навигация
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Account.html">Личный кабинет<i class="bi bi-person-circle ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Basket.html">Корзина<i class="bi bi-cart4 ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Order.html">Заказы<i class="bi bi-receipt ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Favorites.html">Избранное<i class="bi bi-heart-fill ms-2"></i></a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</navbar>
|
|
||||||
</header>
|
|
||||||
<div class="container mt-4">
|
|
||||||
<h1 class="text-center">Заказы</h1>
|
|
||||||
<div class="row">
|
|
||||||
<!-- Заказы в процессе -->
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<div class="card-header bg-warning text-dark">
|
|
||||||
<h2 class="h5 m-0">В процессе</h2>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<ul class="list-group list-group-flush">
|
|
||||||
<li class="list-group-item d-flex align-items-center mb-2">
|
|
||||||
<img src="images/spoon.jpg" class="me-2" style="min-width: 90px;"> Ложка
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex align-items-center mb-2">
|
|
||||||
<img src="images/fork.jpg" class="me-2" style="min-width: 90px;"> Вилка
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex align-items-center">
|
|
||||||
<img src="images/knife.jpg" class="me-2" style="min-width: 90px;"> Нож
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Завершённые заказы -->
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="card shadow-sm">
|
|
||||||
<div class="card-header bg-success text-white">
|
|
||||||
<h2 class="h5 m-0">Завершённые</h2>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<ul class="list-group list-group-flush">
|
|
||||||
<li class="list-group-item d-flex align-items-center mb-2">
|
|
||||||
<img src="images/iron.jpg" class="me-2" style="min-width: 90px;"> Утюг
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex align-items-center mb-2">
|
|
||||||
<img src="images/bananas.jpg" class="me-2" style="min-width: 90px;"> Бананы
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<footer class="container mt-5">
|
|
||||||
<div class="bg-light p-4">
|
|
||||||
<h5>Помощь:</h5>
|
|
||||||
<div class="d-flex flex-wrap">
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<i class="bi bi-telephone-fill me-2"></i>
|
|
||||||
<a href="#" class="text-decoration-none text-dark">8 (800)-555-35-35</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<img src="images/vk.png" alt="VK" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="https://vk.com/howmakesite_nn?from=search" target="_blank" class="text-decoration-none text-dark">vk.com</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<img src="images/telegram.png" alt="Telegram" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="#" class="text-decoration-none text-dark">tg.me</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center mb-3">
|
|
||||||
<img src="images/gmail.png" alt="Gmail" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="mailto:ozon-zon-zon@mail.joke" class="text-decoration-none text-dark">ozon-zon-zon@mail.joke</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
/* Общие стили */
|
|
||||||
body {
|
|
||||||
background-color: #edf7f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Заголовки */
|
|
||||||
h2 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Изображения */
|
|
||||||
img {
|
|
||||||
width: 180px;
|
|
||||||
height: 150px;
|
|
||||||
margin-right: 10px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ссылки */
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: black;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Навигация */
|
|
||||||
navbar {
|
|
||||||
position: fixed;
|
|
||||||
top: 40px;
|
|
||||||
right: 20px;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Контент */
|
|
||||||
.goods img {
|
|
||||||
width: 250px;
|
|
||||||
height: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Заказы */
|
|
||||||
.inProcess h2 {
|
|
||||||
background-color: yellow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.done h2 {
|
|
||||||
background-color: green;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Кнопка оплаты */
|
|
||||||
.buy {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
right: 20px;
|
|
||||||
background-color: greenyellow;
|
|
||||||
text-align: center;
|
|
||||||
border: 2px solid black;
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 110px;
|
|
||||||
height: 35px;
|
|
||||||
transition: background-color 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buy:hover {
|
|
||||||
background-color: lightgreen;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Личный кабинет */
|
|
||||||
.account img {
|
|
||||||
border: 3px solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recomended .card {
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recomended .card:hover {
|
|
||||||
transform: translateY(-5px) scale(1.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Адаптивность */
|
|
||||||
@media only screen and (min-width: 400px) {
|
|
||||||
body {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buy {
|
|
||||||
width: 200px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB |
BIN
images/chery.jpg
BIN
images/chery.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 280 KiB |
BIN
images/child.jpg
BIN
images/child.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 337 KiB |
BIN
images/fork.jpg
BIN
images/fork.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 193 KiB |
BIN
images/gmail.png
BIN
images/gmail.png
Binary file not shown.
|
Before Width: | Height: | Size: 781 B |
BIN
images/iron.jpg
BIN
images/iron.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
BIN
images/knife.jpg
BIN
images/knife.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
BIN
images/logo.jpg
BIN
images/logo.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
BIN
images/masha.jpg
BIN
images/masha.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 169 KiB |
BIN
images/phone.png
BIN
images/phone.png
Binary file not shown.
|
Before Width: | Height: | Size: 595 B |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
BIN
images/spoon.jpg
BIN
images/spoon.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
BIN
images/vk.png
BIN
images/vk.png
Binary file not shown.
|
Before Width: | Height: | Size: 715 B |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
@@ -1,52 +0,0 @@
|
|||||||
// js/controller.js
|
|
||||||
|
|
||||||
import Model from './model.js';
|
|
||||||
import View from './view.js';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
async init() {
|
|
||||||
this.products = await Model.getProducts();
|
|
||||||
this.categories = await Model.getCategories();
|
|
||||||
this.brands = await Model.getBrands();
|
|
||||||
|
|
||||||
View.renderProductList(this.products, this.handleEdit.bind(this), this.handleDelete.bind(this));
|
|
||||||
|
|
||||||
// Кнопка "Добавить товар"
|
|
||||||
document.getElementById('addProductBtn').onclick = () => {
|
|
||||||
View.showProductModal(
|
|
||||||
{ categories: this.categories, brands: this.brands },
|
|
||||||
this.handleAdd.bind(this)
|
|
||||||
);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
async handleAdd(productData, modal) {
|
|
||||||
await Model.addProduct(productData);
|
|
||||||
modal.hide();
|
|
||||||
await this.refresh();
|
|
||||||
},
|
|
||||||
|
|
||||||
async handleEdit(productId) {
|
|
||||||
const product = await Model.getProductById(productId);
|
|
||||||
View.showProductModal(
|
|
||||||
{ product, categories: this.categories, brands: this.brands },
|
|
||||||
async (formData, modal) => {
|
|
||||||
await Model.updateProduct(productId, formData);
|
|
||||||
modal.hide();
|
|
||||||
await this.refresh();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
async handleDelete(productId) {
|
|
||||||
if (confirm('Удалить товар?')) {
|
|
||||||
await Model.deleteProduct(productId);
|
|
||||||
await this.refresh();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async refresh() {
|
|
||||||
this.products = await Model.getProducts();
|
|
||||||
View.renderProductList(this.products, this.handleEdit.bind(this), this.handleDelete.bind(this));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
46
js/model.js
46
js/model.js
@@ -1,46 +0,0 @@
|
|||||||
// js/model.js
|
|
||||||
|
|
||||||
const API_URL = 'http://localhost:5000';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
// --- PRODUCTS ---
|
|
||||||
async getProducts() {
|
|
||||||
const res = await fetch(`${API_URL}/products?_expand=category&_expand=brand`);
|
|
||||||
return res.json();
|
|
||||||
},
|
|
||||||
async getProductById(id) {
|
|
||||||
const res = await fetch(`${API_URL}/products/${id}`);
|
|
||||||
return res.json();
|
|
||||||
},
|
|
||||||
async addProduct(product) {
|
|
||||||
const res = await fetch(`${API_URL}/products`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify(product)
|
|
||||||
});
|
|
||||||
return res.json();
|
|
||||||
},
|
|
||||||
async updateProduct(id, product) {
|
|
||||||
const res = await fetch(`${API_URL}/products/${id}`, {
|
|
||||||
method: 'PUT',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify(product)
|
|
||||||
});
|
|
||||||
return res.json();
|
|
||||||
},
|
|
||||||
async deleteProduct(id) {
|
|
||||||
await fetch(`${API_URL}/products/${id}`, { method: 'DELETE' });
|
|
||||||
},
|
|
||||||
|
|
||||||
// --- CATEGORIES ---
|
|
||||||
async getCategories() {
|
|
||||||
const res = await fetch(`${API_URL}/categories`);
|
|
||||||
return res.json();
|
|
||||||
},
|
|
||||||
|
|
||||||
// --- BRANDS ---
|
|
||||||
async getBrands() {
|
|
||||||
const res = await fetch(`${API_URL}/brands`);
|
|
||||||
return res.json();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
124
js/view.js
124
js/view.js
@@ -1,124 +0,0 @@
|
|||||||
// js/view.js
|
|
||||||
|
|
||||||
export default {
|
|
||||||
renderProductList(products, onEdit, onDelete) {
|
|
||||||
const list = document.getElementById('productsList');
|
|
||||||
list.innerHTML = '';
|
|
||||||
products.forEach(product => {
|
|
||||||
const col = document.createElement('div');
|
|
||||||
col.className = 'col';
|
|
||||||
// Если image не начинается с "data:" — выводим как есть (старые товары), иначе как base64
|
|
||||||
const imgSrc = product.image?.startsWith('data:') ? product.image : (product.image || 'images/no-image.png');
|
|
||||||
col.innerHTML = `
|
|
||||||
<div class="card h-100">
|
|
||||||
<img src="${imgSrc}" class="card-img-top" alt="${product.name}" style="width: 100%; height: 300px; object-fit: cover;">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">${product.name}</h5>
|
|
||||||
<p class="card-text">${product.price} руб</p>
|
|
||||||
<p class="card-text">
|
|
||||||
<small class="text-muted">Категория: ${product.category?.name || '-'}</small><br>
|
|
||||||
<small class="text-muted">Бренд: ${product.brand?.name || '-'}</small>
|
|
||||||
</p>
|
|
||||||
<button class="btn btn-primary btn-sm me-2 edit-btn"><i class="bi bi-pencil"></i> Редактировать</button>
|
|
||||||
<button class="btn btn-danger btn-sm delete-btn"><i class="bi bi-trash"></i> Удалить</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
// Навесить обработчики
|
|
||||||
col.querySelector('.edit-btn').onclick = () => onEdit(product.id);
|
|
||||||
col.querySelector('.delete-btn').onclick = () => onDelete(product.id);
|
|
||||||
list.appendChild(col);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
showProductModal({ product = {}, categories = [], brands = [] }, onSubmit) {
|
|
||||||
const modalContent = document.getElementById('productModalContent');
|
|
||||||
modalContent.innerHTML = `
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title">${product.id ? 'Редактировать' : 'Добавить'} товар</h5>
|
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
||||||
</div>
|
|
||||||
<form id="productForm">
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">Название товара</label>
|
|
||||||
<input type="text" class="form-control" name="name" value="${product.name || ''}" required>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">Цена (руб)</label>
|
|
||||||
<input type="number" class="form-control" name="price" value="${product.price || ''}" required>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">Изображение</label>
|
|
||||||
<input type="file" class="form-control" name="image" accept="image/*" ${product.id ? "" : "required"}>
|
|
||||||
<img id="previewImage" src="${product.image || ''}" style="max-width:100%;margin-top:10px;${product.image ? '' : 'display:none;'}"/>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">Категория</label>
|
|
||||||
<select class="form-select" name="categoryId" required>
|
|
||||||
<option value="">Выберите категорию</option>
|
|
||||||
${categories.map(cat => `
|
|
||||||
<option value="${cat.id}" ${product.categoryId == cat.id ? 'selected' : ''}>${cat.name}</option>
|
|
||||||
`).join('')}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label">Бренд</label>
|
|
||||||
<select class="form-select" name="brandId" required>
|
|
||||||
<option value="">Выберите бренд</option>
|
|
||||||
${brands.map(br => `
|
|
||||||
<option value="${br.id}" ${product.brandId == br.id ? 'selected' : ''}>${br.name}</option>
|
|
||||||
`).join('')}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="submit" class="btn btn-success">${product.id ? 'Сохранить' : 'Добавить'}</button>
|
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Показываем модалку через Bootstrap JS
|
|
||||||
const modal = new bootstrap.Modal(document.getElementById('productModal'));
|
|
||||||
modal.show();
|
|
||||||
|
|
||||||
// Предпросмотр выбранной картинки
|
|
||||||
const fileInput = modalContent.querySelector('input[type="file"]');
|
|
||||||
const preview = modalContent.querySelector('#previewImage');
|
|
||||||
fileInput.onchange = () => {
|
|
||||||
const file = fileInput.files[0];
|
|
||||||
if (file) {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = e => {
|
|
||||||
preview.src = e.target.result;
|
|
||||||
preview.style.display = '';
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Обработка формы (с поддержкой base64-картинки)
|
|
||||||
document.getElementById('productForm').onsubmit = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const formData = new FormData(e.target);
|
|
||||||
const obj = Object.fromEntries(formData.entries());
|
|
||||||
obj.price = +obj.price;
|
|
||||||
obj.categoryId = +obj.categoryId;
|
|
||||||
obj.brandId = +obj.brandId;
|
|
||||||
|
|
||||||
if (fileInput.files.length) {
|
|
||||||
const file = fileInput.files[0];
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = function(event) {
|
|
||||||
obj.image = event.target.result; // base64
|
|
||||||
onSubmit(obj, modal);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
} else {
|
|
||||||
obj.image = product.image || '';
|
|
||||||
onSubmit(obj, modal);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
96
newSite.html
96
newSite.html
@@ -1,99 +1,15 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||||
<title>Интернет-магазин</title>
|
<title>Интернет-магазин</title>
|
||||||
<link rel="stylesheet" href="css/style.css" />
|
</head>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
<body>
|
||||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header">
|
|
||||||
<div class="d-block mt-3 ms-3">
|
|
||||||
<img src="images/logo.jpg" alt="Название магазина" class="me-3" style="width: 200px; height: auto;">
|
|
||||||
<a href="newSite.html" class="text-decoration-none text-dark m-1">
|
|
||||||
<h1 class="display-4 h3 mt-3"><b>Название магазина</b></h1>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<navbar>
|
|
||||||
<div class="dropdown">
|
|
||||||
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown"
|
|
||||||
data-bs-toggle="dropdown" aria-expanded="false">
|
|
||||||
Навигация
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center"
|
|
||||||
href="Account.html">Личный кабинет<i class="bi bi-person-circle ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center"
|
|
||||||
href="Basket.html">Корзина<i class="bi bi-cart4 ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center"
|
|
||||||
href="Order.html">Заказы<i class="bi bi-receipt ms-2"></i></a></li>
|
|
||||||
<li><a class="dropdown-item d-flex justify-content-between align-items-center"
|
|
||||||
href="Favorites.html">Избранное<i class="bi bi-heart-fill ms-2"></i></a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</navbar>
|
|
||||||
</header>
|
|
||||||
<main class="container">
|
<main class="container">
|
||||||
<div class="d-flex justify-content-end my-4">
|
|
||||||
<button class="btn btn-success" id="addProductBtn">
|
|
||||||
<i class="bi bi-plus-circle"></i> Добавить товар
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- Модальное окно для формы добавления/редактирования -->
|
|
||||||
<div class="modal fade" id="productModal" tabindex="-1">
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<div class="modal-content" id="productModalContent">
|
|
||||||
<!-- JS сам отрисует тут форму через View.showProductForm() -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-center my-3">Рекомендуемые товары:</h2>
|
<h2 class="text-center my-3">Рекомендуемые товары:</h2>
|
||||||
<div class="row row-cols-1 row-cols-md-3 g-4" id="productsList">
|
<div id="root"></div>
|
||||||
<!-- Здесь будут карточки товаров (рендерит JS) -->
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
<footer class="container mt-5">
|
<script type="module" src="/src/index.jsx"></script>
|
||||||
<div class="bg-light p-4">
|
</body>
|
||||||
<h5>Помощь:</h5>
|
|
||||||
<div class="d-flex flex-wrap">
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<i class="bi bi-telephone-fill me-2"></i>
|
|
||||||
<a href="#" class="text-decoration-none text-dark">8 (800)-555-35-35</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<img src="images/vk.png" alt="VK" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="https://vk.com/howmakesite_nn?from=search" target="_blank"
|
|
||||||
class="text-decoration-none text-dark">vk.com</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center me-4 mb-3">
|
|
||||||
<img src="images/telegram.png" alt="Telegram" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="#" class="text-decoration-none text-dark">tg.me</a>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex align-items-center mb-3">
|
|
||||||
<img src="images/gmail.png" alt="Gmail" class="me-2" style="width: 24px; height: 24px;">
|
|
||||||
<a href="mailto:ozon-zon-zon@mail.joke"
|
|
||||||
class="text-decoration-none text-dark">ozon-zon-zon@mail.joke</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-center mt-4">
|
|
||||||
<img src="images/бананы.jpg" alt="Бананы" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
||||||
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
|
||||||
crossorigin="anonymous"></script>
|
|
||||||
<script type="module">
|
|
||||||
import Controller from './js/controller.js';
|
|
||||||
Controller.init();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
1258
package-lock.json
generated
1258
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@@ -3,28 +3,34 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"dev": "npm-run-all --parallel start json-server",
|
||||||
"start": "vite",
|
"start": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"server": "http-server -p 3000 ./dist/",
|
"server": "http-server -p 3000 ./dist/",
|
||||||
"prod": "npm-run-all build server",
|
"prod": "npm-run-all build server",
|
||||||
"lint": "eslint …"
|
"lint": "eslint …",
|
||||||
|
"json-server": "json-server --watch db.json --port 5000"
|
||||||
},
|
},
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"description": "",
|
"description": "",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap":"5.3.3",
|
"bootstrap": "5.3.3",
|
||||||
"bootstrap-icons": "1.11.3"
|
"bootstrap-icons": "1.11.3",
|
||||||
|
"react": "^19.1.0",
|
||||||
|
"react-dom": "^19.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"http-server": "14.1.1",
|
"@vitejs/plugin-react": "^4.4.1",
|
||||||
"vite": "6.2.0",
|
|
||||||
"npm-run-all": "4.1.5",
|
|
||||||
"eslint": "8.56.0",
|
"eslint": "8.56.0",
|
||||||
"eslint-config-airbnb-base": "15.0.0",
|
"eslint-config-airbnb-base": "15.0.0",
|
||||||
"eslint-config-prettier": "10.0.2",
|
"eslint-config-prettier": "10.0.2",
|
||||||
|
"eslint-plugin-html": "8.1.2",
|
||||||
"eslint-plugin-import": "2.31.0",
|
"eslint-plugin-import": "2.31.0",
|
||||||
"eslint-plugin-prettier": "5.2.3",
|
"eslint-plugin-prettier": "5.2.3",
|
||||||
"eslint-plugin-html": "8.1.2"
|
"http-server": "14.1.1",
|
||||||
|
"json-server": "^1.0.0-beta.3",
|
||||||
|
"npm-run-all": "4.1.5",
|
||||||
|
"vite": "6.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
39
src/App.jsx
Normal file
39
src/App.jsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import useProducts from './hooks/useProducts';
|
||||||
|
import ProductList from './components/ProductList';
|
||||||
|
import ProductForm from './components/ProductForm';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const { products, add, update, remove } = useProducts();
|
||||||
|
const [editing, setEditing] = useState(null);
|
||||||
|
const [showForm, setShowForm] = useState(false);
|
||||||
|
|
||||||
|
const [sortOrder, setSortOrder] = useState('asc');
|
||||||
|
|
||||||
|
const handleAdd = () => { setEditing(null); setShowForm(true); };
|
||||||
|
const handleEdit = prod => { setEditing(prod); setShowForm(true); };
|
||||||
|
const handleDelete = id => remove(id);
|
||||||
|
const handleSave = prod => {
|
||||||
|
editing ? update({ ...prod, id: editing.id }) : add(prod);
|
||||||
|
setShowForm(false);
|
||||||
|
};
|
||||||
|
const handleCancel = () => setShowForm(false);
|
||||||
|
|
||||||
|
const sortedProducts = [...products].sort((a, b) =>
|
||||||
|
sortOrder === 'asc'
|
||||||
|
? a.price - b.price
|
||||||
|
: b.price - a.price
|
||||||
|
);
|
||||||
|
|
||||||
|
const toggleSortOrder = () => setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container my-4">
|
||||||
|
{/* <h1 className="mb-4">Каталог товаров</h1> */}
|
||||||
|
<button className="btn btn-success mb-3" onClick={handleAdd}>Добавить товар</button>
|
||||||
|
<button className="btn btn-outline-primary mb-3 ms-3" onClick={toggleSortOrder}> Сортировать по цене {sortOrder === 'asc' ? '▲' : '▼'}</button>
|
||||||
|
{showForm && <ProductForm initial={editing} onSave={handleSave} onCancel={handleCancel} mode={editing ? 'edit' : 'add'} />}
|
||||||
|
<ProductList products={sortedProducts} onEdit={handleEdit} onDelete={handleDelete} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
16
src/components/ProductCard.jsx
Normal file
16
src/components/ProductCard.jsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export default function ProductCard({ product, onEdit, onDelete }) {
|
||||||
|
return (
|
||||||
|
<div className="col">
|
||||||
|
<div className="card h-100">
|
||||||
|
<div className="card-body">
|
||||||
|
<h5 className="card-title">{product.name}</h5>
|
||||||
|
<p className="card-text">Цена: {product.price} ₽</p>
|
||||||
|
<button className="btn btn-sm btn-outline-primary me-2" onClick={() => onEdit(product)}>Изменить</button>
|
||||||
|
<button className="btn btn-sm btn-outline-danger" onClick={() => onDelete(product.id)}>Удалить</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
35
src/components/ProductForm.jsx
Normal file
35
src/components/ProductForm.jsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
export default function ProductForm({ initial, onSave, onCancel, mode }) {
|
||||||
|
const [form, setForm] = useState({ name: '', price: '' });
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (initial) setForm({ name: initial.name, price: initial.price });
|
||||||
|
}, [initial]);
|
||||||
|
|
||||||
|
const handleChange = e => setForm({ ...form, [e.target.name]: e.target.value });
|
||||||
|
|
||||||
|
const handleSubmit = e => {
|
||||||
|
e.preventDefault();
|
||||||
|
onSave({ ...initial, name: form.name, price: Number(form.price) });
|
||||||
|
setForm({ name: '', price: '' });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="card p-3 mb-4">
|
||||||
|
<h4 className="mb-3">
|
||||||
|
{mode === 'edit' ? 'Редактирование товара' : 'Добавление товара'}
|
||||||
|
</h4>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label">Название</label>
|
||||||
|
<input name="name" value={form.name} onChange={handleChange} required className="form-control" />
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label">Цена</label>
|
||||||
|
<input name="price" value={form.price} onChange={handleChange} type="number" required className="form-control" />
|
||||||
|
</div>
|
||||||
|
<button type="submit" className="btn btn-primary mb-2" style={{ width: 'auto' }}>Сохранить</button>
|
||||||
|
<button type="button" className="btn btn-secondary" style={{ width: 'auto' }} onClick={onCancel}>Отмена</button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
12
src/components/ProductList.jsx
Normal file
12
src/components/ProductList.jsx
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ProductCard from './ProductCard';
|
||||||
|
|
||||||
|
export default function ProductList({ products, onEdit, onDelete }) {
|
||||||
|
return (
|
||||||
|
<div className="row row-cols-1 row-cols-md-3 g-4">
|
||||||
|
{products.map(prod => (
|
||||||
|
<ProductCard key={prod.id} product={prod} onEdit={onEdit} onDelete={onDelete} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
33
src/hooks/useProducts.jsx
Normal file
33
src/hooks/useProducts.jsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
export default function useProducts() {
|
||||||
|
const [products, setProducts] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch('http://localhost:5000/products')
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(setProducts);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const add = async prod => {
|
||||||
|
const res = await fetch('http://localhost:5000/products', {
|
||||||
|
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(prod)
|
||||||
|
});
|
||||||
|
const newProd = await res.json();
|
||||||
|
setProducts([...products, newProd]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const update = async prod => {
|
||||||
|
await fetch(`http://localhost:5000/products/${prod.id}`, {
|
||||||
|
method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(prod)
|
||||||
|
});
|
||||||
|
setProducts(products.map(p => p.id === prod.id ? prod : p));
|
||||||
|
};
|
||||||
|
|
||||||
|
const remove = async id => {
|
||||||
|
await fetch(`http://localhost:5000/products/${id}`, { method: 'DELETE' });
|
||||||
|
setProducts(products.filter(p => p.id !== id));
|
||||||
|
};
|
||||||
|
|
||||||
|
return { products, add, update, remove };
|
||||||
|
}
|
||||||
7
src/index.jsx
Normal file
7
src/index.jsx
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import App from './App'
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css' // опционально
|
||||||
|
|
||||||
|
const container = document.getElementById('root')
|
||||||
|
createRoot(container).render(<App />)
|
||||||
@@ -1,8 +1,12 @@
|
|||||||
import { resolve } from 'path';
|
import { resolve } from 'path';
|
||||||
import { defineConfig } from "vite";
|
import { defineConfig } from "vite";
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
root: '.',
|
||||||
|
plugins: [react()],
|
||||||
build: {
|
build: {
|
||||||
|
outDir: 'dist',
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
input: {
|
input: {
|
||||||
main: resolve(__dirname, "newSite.html"),
|
main: resolve(__dirname, "newSite.html"),
|
||||||
@@ -13,4 +17,12 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
server: {
|
||||||
|
open: '/newSite.html',
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': resolve(__dirname, 'src'),
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
BIN
Отчет3.docx
BIN
Отчет3.docx
Binary file not shown.
BIN
Отчет4.docx
BIN
Отчет4.docx
Binary file not shown.
BIN
Отчет5.docx
Normal file
BIN
Отчет5.docx
Normal file
Binary file not shown.
Reference in New Issue
Block a user