7 Commits
main ... lab_3

Author SHA1 Message Date
qkrlnt
25469177e9 переделал отчет 2025-05-28 16:57:47 +04:00
4249a0253e revert 9c80373c59
revert lab_4
2025-05-20 20:05:44 +04:00
qkrlnt
9c80373c59 lab_4 2025-05-20 16:04:25 +04:00
qkrlnt
49fe7787f3 lab_3_done 2025-05-20 15:13:16 +04:00
qkrlnt
65407801d3 lab_3 2025-05-20 14:58:51 +04:00
qkrlnt
0f37299eab lab_2_done 2025-05-20 14:03:18 +04:00
qkrlnt
f09fa6e113 lab_1_done 2025-05-20 13:21:40 +04:00
31 changed files with 5731 additions and 0 deletions

54
.gitignore vendored Normal file
View File

@@ -0,0 +1,54 @@
# ---> 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

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;
}
}

BIN
images/bananas.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
images/chery.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 280 KiB

BIN
images/child.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 337 KiB

BIN
images/fork.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/glasses.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

BIN
images/gmail.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 781 B

BIN
images/iron.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
images/knife.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/logo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
images/masha.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

BIN
images/phone.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 595 B

BIN
images/screwdriver.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
images/skateboard.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

BIN
images/spoon.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
images/telegram.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
images/vanadiy.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
images/vk.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 715 B

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

191
newSite.html Normal file
View File

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

5025
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

30
package.json Normal file
View File

@@ -0,0 +1,30 @@
{
"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"
}
}

16
vite.config.js Normal file
View File

@@ -0,0 +1,16 @@
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
Отчет1.docx Normal file

Binary file not shown.

BIN
Отчет2.docx Normal file

Binary file not shown.

BIN
Отчет3.docx Normal file

Binary file not shown.