Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
baeb13067f |
55
.gitignore
vendored
55
.gitignore
vendored
@@ -1,54 +1 @@
|
||||
# ---> VisualStudioCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
|
||||
# Зависимости Node.js
|
||||
/node_modules/
|
||||
|
||||
# Результаты сборки Vite
|
||||
/dist/
|
||||
|
||||
# Логи
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
pnpm-debug.log*
|
||||
*.log
|
||||
|
||||
# Файлы окружения
|
||||
.env
|
||||
.env.*.local
|
||||
|
||||
# Кеши
|
||||
/.cache/
|
||||
.vite/
|
||||
|
||||
# IDE и редакторы
|
||||
.vscode/
|
||||
.idea/
|
||||
/*.sublime-workspace
|
||||
/*.sublime-project
|
||||
|
||||
# Системные файлы
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Отчеты об покрытии тестами
|
||||
/coverage/
|
||||
|
||||
# Порты и артефакты
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Прочее
|
||||
/.DS_Store
|
||||
node_modules
|
||||
|
||||
212
Account.html
212
Account.html
@@ -1,178 +1,54 @@
|
||||
<!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>
|
||||
<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"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="images/logo.jpg" alt="'Название магазина'">
|
||||
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
|
||||
<navbar>
|
||||
<div class="dropdown">
|
||||
<span>Навигация ▾</span>
|
||||
<ul class="links">
|
||||
<li><a href="Basket.html">Корзина</a></li>
|
||||
<li><a href="Order.html">Заказы</a></li>
|
||||
<li><a href="Favorites.html">Избранное</a></li>
|
||||
<li><a href="Account.html">Личный кабинет</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</navbar>
|
||||
</header>
|
||||
<div class="account-container">
|
||||
<div class="account">
|
||||
<img src="images/бананы.jpg">
|
||||
<h3>Имя Фамилия</h3>
|
||||
<p>Описание</p>
|
||||
</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>
|
||||
<footer>
|
||||
<div class="contacts">
|
||||
<p>Помощь:</p>
|
||||
<div class="contact-item">
|
||||
<img src="images/phone.png" alt="Phone">
|
||||
<p>8 (800)-555-35-35</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/vk.png" alt="VK">
|
||||
<p>vk.com</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/telegram.png" alt="Telegram">
|
||||
<p>tg.me</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/gmail.png" alt="Gmail">
|
||||
<p>ozon-zon-zon@mail.joke</p>
|
||||
</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>
|
||||
100
Basket.html
100
Basket.html
@@ -5,76 +5,56 @@
|
||||
<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>
|
||||
<header>
|
||||
<img src="images/logo.jpg" alt="'Название магазина'">
|
||||
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
|
||||
<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>
|
||||
<span>Навигация ▾</span>
|
||||
<ul class="links">
|
||||
<li><a href="Basket.html">Корзина</a></li>
|
||||
<li><a href="Order.html">Заказы</a></li>
|
||||
<li><a href="Favorites.html">Избранное</a></li>
|
||||
<li><a href="Account.html">Личный кабинет</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 class="basket">
|
||||
<h1>Корзина</h1>
|
||||
<ol>
|
||||
<li><img src="images/glasses.jpg">Очки<p>349 руб.</p></li>
|
||||
<li><img src="images/chery.jpg">Chery Tiggo 7 Pro Max 64gb 128mp<p>5 руб.</p></li>
|
||||
<li><img src="images/vanadiy.jpg">Ванадий<p>2099 руб.</p></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="buy">
|
||||
<a href="https://xn----7sbon6aucai8a.xn--p1ai/wa-data/public/shop/products/98/27/2798/images/6060/6060.970.jpg" target="_blank">
|
||||
Оплатить
|
||||
</a>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="contacts">
|
||||
<p>Помощь:</p>
|
||||
<div class="contact-item">
|
||||
<img src="images/phone.png" alt="Phone">
|
||||
<p>8 (800)-555-35-35</p>
|
||||
</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 class="contact-item">
|
||||
<img src="images/vk.png" alt="VK">
|
||||
<p>vk.com</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/telegram.png" alt="Telegram">
|
||||
<p>tg.me</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/gmail.png" alt="Gmail">
|
||||
<p>ozon-zon-zon@mail.joke</p>
|
||||
</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>
|
||||
|
||||
@@ -5,75 +5,50 @@
|
||||
<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>
|
||||
<header>
|
||||
<img src="images/logo.jpg" alt="'Название магазина'">
|
||||
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
|
||||
<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>
|
||||
<span>Навигация ▾</span>
|
||||
<ul class="links">
|
||||
<li><a href="Basket.html">Корзина</a></li>
|
||||
<li><a href="Order.html">Заказы</a></li>
|
||||
<li><a href="Favorites.html">Избранное</a></li>
|
||||
<li><a href="Account.html">Личный кабинет</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 class="favourites">
|
||||
<h2>Избранное</h2>
|
||||
<ol>
|
||||
<li><img src ="images/masha.jpg">Женщина<p>бесценна</p></li>
|
||||
<li><img src ="images/screwdriver.jpg">Отвертка<p>219 руб</p></li>
|
||||
</ol>
|
||||
</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>
|
||||
<footer>
|
||||
<div class="contacts">
|
||||
<p>Помощь:</p>
|
||||
<div class="contact-item">
|
||||
<img src="images/phone.png" alt="Phone">
|
||||
<p>8 (800)-555-35-35</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/vk.png" alt="VK">
|
||||
<p>vk.com</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/telegram.png" alt="Telegram">
|
||||
<p>tg.me</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/gmail.png" alt="Gmail">
|
||||
<p>ozon-zon-zon@mail.joke</p>
|
||||
</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>
|
||||
124
Order.html
124
Order.html
@@ -5,97 +5,61 @@
|
||||
<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>
|
||||
<header>
|
||||
<img src="images/logo.jpg" alt="'Название магазина'">
|
||||
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
|
||||
<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>
|
||||
<span>Навигация ▾</span>
|
||||
<ul class="links">
|
||||
<li><a href="Basket.html">Корзина</a></li>
|
||||
<li><a href="Order.html">Заказы</a></li>
|
||||
<li><a href="Favorites.html">Избранное</a></li>
|
||||
<li><a href="Account.html">Личный кабинет</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 class="orders"><h1>Заказы</h1></div>
|
||||
<div class="typeOfOrder">
|
||||
<div class="inProcess">
|
||||
<h2>В процессе</h2>
|
||||
<ol>
|
||||
<li><img src="images/spoon.jpg">Ложка</li>
|
||||
<li><img src="images/fork.jpg">Вилка</li>
|
||||
<li><img src="images/knife.jpg">Нож</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="done">
|
||||
<h2>Завершённые</h2>
|
||||
<ol>
|
||||
<li><img src="images/iron.jpg">Утюг</li>
|
||||
<li><img src="images/bananas.jpg">Бананы</li>
|
||||
</ol>
|
||||
</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>
|
||||
<footer>
|
||||
<div class="contacts">
|
||||
<p>Помощь:</p>
|
||||
<div class="contact-item">
|
||||
<img src="images/phone.png" alt="Phone">
|
||||
<p>8 (800)-555-35-35</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/vk.png" alt="VK">
|
||||
<p>vk.com</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/telegram.png" alt="Telegram">
|
||||
<p>tg.me</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/gmail.png" alt="Gmail">
|
||||
<p>ozon-zon-zon@mail.joke</p>
|
||||
</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>
|
||||
375
css/style.css
375
css/style.css
@@ -1,52 +1,173 @@
|
||||
/* Общие стили */
|
||||
/*Общие стили*/
|
||||
body {
|
||||
background-color: #edf7f6;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
}
|
||||
|
||||
/* Заголовки */
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Изображения */
|
||||
img {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
margin-right: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Ссылки */
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Навигация */
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/*header*/
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
header img {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
header h1 a{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/*навигация*/
|
||||
navbar {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
right: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* Контент */
|
||||
.goods img {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
span{
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
/* Заказы */
|
||||
.inProcess h2 {
|
||||
.dropdown > span {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: 2px solid black;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
/*background: #edf7f6;*/
|
||||
background: white;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.dropdown:hover .links{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding-right: 30px;
|
||||
padding-top: 50px;
|
||||
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: -115px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: none;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.links li {
|
||||
list-style: none;
|
||||
color: black;
|
||||
width: 140px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*Основной контент*/
|
||||
.goods {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 70px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.goods p {
|
||||
text-align: center;
|
||||
width: 270px;
|
||||
height: 285px;
|
||||
border: 2px solid black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.goods img {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*Заказы*/
|
||||
.typeOfOrder {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.typeOfOrder h2{
|
||||
border: 2px solid black;
|
||||
border-radius: 5px;
|
||||
width: 180px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.inProcess h2{
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.done h2 {
|
||||
.done h2{
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
/* Кнопка оплаты */
|
||||
/*Корзина и Избранное*/
|
||||
.basket,
|
||||
.favourites {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.basket h1,
|
||||
.orders h1 {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
border: 2px solid black;
|
||||
border-radius: 10px;
|
||||
width: 400px;
|
||||
display: flex;
|
||||
font-size: large;
|
||||
margin-bottom: 15px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.basket p,
|
||||
.favourites p {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 10px;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*Кнопка опалты в корзине*/
|
||||
.buy {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
@@ -55,36 +176,212 @@ navbar {
|
||||
text-align: center;
|
||||
border: 2px solid black;
|
||||
border-radius: 10px;
|
||||
width: 110px;
|
||||
height: 35px;
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.buy a {
|
||||
font-size: xx-large;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.buy:hover {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
|
||||
/* Личный кабинет */
|
||||
/*Личный кабинет*/
|
||||
.account-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.account {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
/*margin: 50px auto;*/
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
border: 2px solid black;
|
||||
border-radius: 15px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.account img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
border-radius: 20px;
|
||||
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);
|
||||
.account h3 {
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
/* Адаптивность */
|
||||
@media only screen and (min-width: 400px) {
|
||||
/*Footer*/
|
||||
footer {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.contacts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-item p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.contact-item img {
|
||||
width: 24px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Адаптивная верстка */
|
||||
@media only screen and (min-width: 961px) {
|
||||
.goods {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.basket,
|
||||
.favourites {
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 401px) and (max-width: 960px) {
|
||||
.goods {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.typeOfOrder{
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.typeOfOrder h2 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 50%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.basket,
|
||||
.favourites {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.basket p,
|
||||
.favourites p {
|
||||
position: relative;
|
||||
display: block;
|
||||
bottom: -5px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.buy {
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.buy {
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
navbar {
|
||||
position: static;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dropdown:hover .links {
|
||||
top: 180px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.goods p {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.goods img {
|
||||
width: 97%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
width: auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.typeOfOrder{
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.typeOfOrder h2 {
|
||||
margin-left: 5;
|
||||
}
|
||||
|
||||
.basket,
|
||||
.favourites {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.basket p,
|
||||
.favourites p {
|
||||
position: relative;
|
||||
display: block;
|
||||
bottom: -5px;
|
||||
}
|
||||
|
||||
.buy {
|
||||
width: 110px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.buy a {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.account {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contacts {
|
||||
gap: 2px;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
143
newSite.html
143
newSite.html
@@ -1,99 +1,56 @@
|
||||
<!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>
|
||||
<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"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="images/logo.jpg" alt="'Название магазина'">
|
||||
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
|
||||
<navbar>
|
||||
<div class="dropdown">
|
||||
<span><b>Навигация ▾</b></span>
|
||||
<ul class="links">
|
||||
<li><a href="Basket.html">Корзина</a></li>
|
||||
<li><a href="Order.html">Заказы</a></li>
|
||||
<li><a href="Favorites.html">Избранное</a></li>
|
||||
<li><a href="Account.html">Личный кабинет</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</navbar>
|
||||
</header>
|
||||
<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>
|
||||
<h2>Рекомендуемые товары:</h2>
|
||||
<div class="goods">
|
||||
<p><img src="images/iron.jpg">Утюг</p>
|
||||
<p><img src="images/child.jpg">Ребёнок</p>
|
||||
<p><img src="images/screwdriver.jpg">Отвертка</p>
|
||||
<p><img src="images/skateboard.jpg">Скейтборд</p>
|
||||
<p><img src="images/bananas.jpg">Бананы</p>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="contacts">
|
||||
<p>Помощь:</p>
|
||||
<div class="contact-item">
|
||||
<img src="images/phone.png" alt="Phone">
|
||||
<p>8 (800)-555-35-35</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/vk.png" alt="VK">
|
||||
<p>vk.com</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/telegram.png" alt="Telegram">
|
||||
<p>tg.me</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<img src="images/gmail.png" alt="Gmail">
|
||||
<p>ozon-zon-zon@mail.joke</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 class="text-center my-3">Рекомендуемые товары:</h2>
|
||||
<div class="row row-cols-1 row-cols-md-3 g-4" id="productsList">
|
||||
<!-- Здесь будут карточки товаров (рендерит JS) -->
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<p><img src="images/бананы.jpg"></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
5025
package-lock.json
generated
5025
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
30
package.json
30
package.json
@@ -1,30 +0,0 @@
|
||||
{
|
||||
"name": "ip",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"build": "vite build",
|
||||
"server": "http-server -p 3000 ./dist/",
|
||||
"prod": "npm-run-all build server",
|
||||
"lint": "eslint …"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"bootstrap":"5.3.3",
|
||||
"bootstrap-icons": "1.11.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"http-server": "14.1.1",
|
||||
"vite": "6.2.0",
|
||||
"npm-run-all": "4.1.5",
|
||||
"eslint": "8.56.0",
|
||||
"eslint-config-airbnb-base": "15.0.0",
|
||||
"eslint-config-prettier": "10.0.2",
|
||||
"eslint-plugin-import": "2.31.0",
|
||||
"eslint-plugin-prettier": "5.2.3",
|
||||
"eslint-plugin-html": "8.1.2"
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { resolve } from 'path';
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, "newSite.html"),
|
||||
basketPage: resolve(__dirname, "Basket.html"),
|
||||
favouritesPage: resolve(__dirname, "Favorites.html"),
|
||||
orderPage: resolve(__dirname, "Order.html"),
|
||||
accountPage: resolve(__dirname, "Account.html"),
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
BIN
Отчет2.docx
BIN
Отчет2.docx
Binary file not shown.
BIN
Отчет3.docx
BIN
Отчет3.docx
Binary file not shown.
BIN
Отчет4.docx
BIN
Отчет4.docx
Binary file not shown.
Reference in New Issue
Block a user