qkrlnt/PIbd-22_Ulybin_A.A._InternetProgramming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: qkrlnt:lab_5
Branches Tags
qkrlnt:main qkrlnt:lab2.1 qkrlnt:lab_6 qkrlnt:lab_4 qkrlnt:lab_5 qkrlnt:lab_3 qkrlnt:lab_2 qkrlnt:lab_1
..
compare: qkrlnt:lab_3
Branches Tags
qkrlnt:lab2.1 qkrlnt:lab_6 qkrlnt:lab_4 qkrlnt:lab_5 qkrlnt:lab_3 qkrlnt:lab_2 qkrlnt:main qkrlnt:lab_1

2 Commits
lab_5 ... lab_3

Author SHA1 Message Date
qkrlnt
25469177e9 переделал отчет 2025-05-28 16:57:47 +04:00
qkrlnt
4249a0253e revert 9c80373c59 
revert lab_4
 2025-05-20 20:05:44 +04:00
37 changed files with 608 additions and 1447 deletions
Expand all files Collapse all files

65
Account.html Normal file
View File

@@ -0,0 +1,65 @@
<!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>
</body>
</html>

80
Basket.html Normal file
View File

@@ -0,0 +1,80 @@
<!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>

79
Favorites.html Normal file
View File

@@ -0,0 +1,79 @@
<!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 Normal file
View File

@@ -0,0 +1,101 @@
<!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>

90
css/style.css Normal file
View File

@@ -0,0 +1,90 @@
/* Общие стили */
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;
}
}

14
db.json
View File

@@ -1,14 +0,0 @@
{
"products": [
{
"id": "1a54",
"name": "новый товар",
"price": 102
},
{
"id": "f4f8",
"name": " товарчик",
"price": 111
}
]
}

BIN
images/bananas.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
images/chery.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 KiB

BIN
images/child.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 337 KiB

BIN
images/fork.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/glasses.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

BIN
images/gmail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 781 B

BIN
images/iron.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
images/knife.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
images/masha.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 169 KiB

BIN
images/phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 595 B

BIN
images/screwdriver.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
images/skateboard.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
images/spoon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
images/telegram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
images/vanadiy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
images/vk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 715 B

BIN
images/бананы.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

184
newSite.html
View File

@@ -4,12 +4,188 @@
<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">
<div class="card mb-5 border-primary">
<div class="card-header bg-primary text-white">
<h3 class="mb-0">Добавить новый товар</h3>
</div>
<div class="card-body">
<form id="addProductForm" class="row g-3">
<div class="col-md-6">
<label for="productName" class="form-label">Название товара</label>
<input type="text" class="form-control" id="productName" required>
</div>
<div class="col-md-6">
<label for="productPrice" class="form-label">Цена (руб)</label>
<input type="number" class="form-control" step="10" id="productPrice" required>
</div>
<div class="col-12">
<label for="productImage" class="form-label">Изображение товара</label>
<input type="file" class="form-control" id="productImage" accept="image/*" required>
</div>
<div class="col-12 d-flex justify-content-end">
<button type="submit" class="btn btn-success">
<i class="bi bi-plus-circle"></i> Добавить товар
</button>
</div>
</form>
</div>
</div>
<h2 class="text-center my-3">Рекомендуемые товары:</h2>
<div id="root"></div>
</main>
<script type="module" src="/src/index.jsx"></script>
</body>
<div class="row row-cols-1 row-cols-md-3 g-4 recomended">
<div class="col">
<div class="card h-100">
<img src="images/iron.jpg" class="card-img-top" alt="Утюг" style="width: 100%; height: 300%; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">Утюг</h5>
<p class="card-text">2600 руб</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="images/child.jpg" class="card-img-top" alt="Ребёнок" style="width: 100%; height: 300%; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">Ребёнок</h5>
<p class="card-text">2600 без костей</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="images/screwdriver.jpg" class="card-img-top" alt="Отвертка" style="width: 100%; height: 300%; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">Отвертка</h5>
<p class="card-text">620 руб</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="images/skateboard.jpg" class="card-img-top" alt="Скейтборд" style="width: 100%; height: 300%; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">Скейтборд</h5>
<p class="card-text">4300 руб</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="images/bananas.jpg" class="card-img-top" alt="Бананы" style="width: 100%; height: 300%; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">Бананы</h5>
<p class="card-text">120 руб</p>
</div>
</div>
</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>
<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>
document.getElementById('addProductForm').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('productName').value;
const price = document.getElementById('productPrice').value;
const imageInput = document.getElementById('productImage');
// Проверка выбора файла
if (imageInput.files.length === 0) {
alert('Пожалуйста, выберите изображение!');
return;
}
var text = document.getElementById('productName').value;
if(!text.match(/^[А-Яа-яЁё]+(?: [А-Яа-яЁё]+)*$/)){
alert('Пожалуйста, введите корректное название на русском!');
return;
}
const file = imageInput.files[0];
// Проверка размера файла (до 5MB)
if (file.size > 5 * 1024 * 1024) {
alert('Файл слишком большой! Максимум 5MB.');
return;
}
// Создаем превью изображения
const reader = new FileReader();
reader.onload = function(e) {
const imageUrl = e.target.result;
// Создаем карточку товара
const productCard = `
<div class="col">
<div class="card h-100">
<img src="${imageUrl}" class="card-img-top" alt="${name}" style="width: 100%; height: 300%; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">${name}</h5>
<p class="card-text">${price} руб</p>
</div>
</div>
</div>
`;
document.querySelector('.row-cols-1').insertAdjacentHTML('afterbegin', productCard);
alert('Товар успешно добавлен!');
};
reader.readAsDataURL(file);
this.reset();
});
</script>
</body>
</html>

1258
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
package.json
View File

@@ -3,34 +3,28 @@
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "npm-run-all --parallel start json-server",
"start": "vite",
"build": "vite build",
"server": "http-server -p 3000 ./dist/",
"prod": "npm-run-all build server",
"lint": "eslint …",
"json-server": "json-server --watch db.json --port 5000"
"lint": "eslint …"
},
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"bootstrap": "5.3.3",
"bootstrap-icons": "1.11.3",
"react": "^19.1.0",
"react-dom": "^19.1.0"
"bootstrap":"5.3.3",
"bootstrap-icons": "1.11.3"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.4.1",
"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-html": "8.1.2",
"eslint-plugin-import": "2.31.0",
"eslint-plugin-prettier": "5.2.3",
"http-server": "14.1.1",
"json-server": "^1.0.0-beta.3",
"npm-run-all": "4.1.5",
"vite": "6.2.0"
"eslint-plugin-html": "8.1.2"
}
}

39
src/App.jsx
View File

@@ -1,39 +0,0 @@
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
View File

@@ -1,16 +0,0 @@
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
View File

@@ -1,35 +0,0 @@
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
View File

@@ -1,12 +0,0 @@
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
View File

@@ -1,33 +0,0 @@
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
View File

@@ -1,7 +0,0 @@
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 />)

22
vite.config.js
View File

@@ -1,28 +1,16 @@
import { resolve } from 'path';
import { defineConfig } from "vite";
import react from '@vitejs/plugin-react';
export default defineConfig({
root: '.',
plugins: [react()],
build: {
outDir: 'dist',
rollupOptions: {
input: {
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"),
},
},
},
},
server: {
open: '/newSite.html',
},
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
},
},
},
});

BIN
Отчет3.docx
View File

Binary file not shown.

BIN
Отчет4.docx
View File

Binary file not shown.

BIN
Отчет5.docx
View File

Binary file not shown.