Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
baeb13067f |
55
.gitignore
vendored
55
.gitignore
vendored
@@ -1,54 +1 @@
|
|||||||
# ---> VisualStudioCode
|
node_modules
|
||||||
.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
|
|
||||||
|
|||||||
54
Account.html
Normal file
54
Account.html
Normal file
@@ -0,0 +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"/>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
60
Basket.html
Normal file
60
Basket.html
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<!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"/>
|
||||||
|
</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="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 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>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
54
Favorites.html
Normal file
54
Favorites.html
Normal file
@@ -0,0 +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"/>
|
||||||
|
</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="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>
|
||||||
|
<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>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
65
Order.html
Normal file
65
Order.html
Normal 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"/>
|
||||||
|
</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="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>
|
||||||
|
<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>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
387
css/style.css
Normal file
387
css/style.css
Normal file
@@ -0,0 +1,387 @@
|
|||||||
|
/*Общие стили*/
|
||||||
|
body {
|
||||||
|
background-color: #edf7f6;
|
||||||
|
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
span{
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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{
|
||||||
|
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;
|
||||||
|
right: 20px;
|
||||||
|
background-color: greenyellow;
|
||||||
|
text-align: center;
|
||||||
|
border: 2px solid black;
|
||||||
|
border-radius: 10px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
14
db.json
14
db.json
@@ -1,14 +0,0 @@
|
|||||||
{
|
|
||||||
"products": [
|
|
||||||
{
|
|
||||||
"id": "1a54",
|
|
||||||
"name": "новый товар",
|
|
||||||
"price": 102
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "f4f8",
|
|
||||||
"name": " товарчик",
|
|
||||||
"price": 111
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
BIN
images/bananas.jpg
Normal file
BIN
images/bananas.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
images/chery.jpg
Normal file
BIN
images/chery.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 280 KiB |
BIN
images/child.jpg
Normal file
BIN
images/child.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 337 KiB |
BIN
images/fork.jpg
Normal file
BIN
images/fork.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
images/glasses.jpg
Normal file
BIN
images/glasses.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
BIN
images/gmail.png
Normal file
BIN
images/gmail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 781 B |
BIN
images/iron.jpg
Normal file
BIN
images/iron.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
images/knife.jpg
Normal file
BIN
images/knife.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
images/logo.jpg
Normal file
BIN
images/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
images/masha.jpg
Normal file
BIN
images/masha.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
images/phone.png
Normal file
BIN
images/phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 595 B |
BIN
images/screwdriver.jpg
Normal file
BIN
images/screwdriver.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
images/skateboard.jpg
Normal file
BIN
images/skateboard.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
images/spoon.jpg
Normal file
BIN
images/spoon.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
images/telegram.png
Normal file
BIN
images/telegram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
images/vanadiy.jpg
Normal file
BIN
images/vanadiy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
images/vk.png
Normal file
BIN
images/vk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 715 B |
BIN
images/бананы.jpg
Normal file
BIN
images/бананы.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
51
newSite.html
51
newSite.html
@@ -4,12 +4,53 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||||
<title>Интернет-магазин</title>
|
<title>Интернет-магазин</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main class="container">
|
<header>
|
||||||
<h2 class="text-center my-3">Рекомендуемые товары:</h2>
|
<img src="images/logo.jpg" alt="'Название магазина'">
|
||||||
<div id="root"></div>
|
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
|
||||||
</main>
|
<navbar>
|
||||||
<script type="module" src="/src/index.jsx"></script>
|
<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>
|
||||||
|
<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>
|
||||||
|
<p><img src="images/бананы.jpg"></p>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
6281
package-lock.json
generated
6281
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
36
package.json
36
package.json
@@ -1,36 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "ip",
|
|
||||||
"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"
|
|
||||||
},
|
|
||||||
"author": "",
|
|
||||||
"license": "ISC",
|
|
||||||
"description": "",
|
|
||||||
"dependencies": {
|
|
||||||
"bootstrap": "5.3.3",
|
|
||||||
"bootstrap-icons": "1.11.3",
|
|
||||||
"react": "^19.1.0",
|
|
||||||
"react-dom": "^19.1.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@vitejs/plugin-react": "^4.4.1",
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
39
src/App.jsx
39
src/App.jsx
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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 };
|
|
||||||
}
|
|
||||||
@@ -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 />)
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
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: {
|
|
||||||
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
Отчет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.
BIN
Отчет5.docx
BIN
Отчет5.docx
Binary file not shown.
Reference in New Issue
Block a user