fix
BIN
semestr_1/Lab. 1/Lab_1 SHOP.fig
Normal file
24
semestr_1/Lab. 2/Project/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
82
semestr_1/Lab. 2/Project/admin.html
Normal file
@ -0,0 +1,82 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/bootstrap.min.css">
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4">
|
||||
<div class="container">
|
||||
<strong class="d-block fw-bold fs-4 mb-4">Админка</strong>
|
||||
|
||||
<form>
|
||||
<strong class="d-block fw-bold fs-5 mb-2">Добавить товар</strong>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Название товара</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="form-label">Характеристики (через точку с запятой)</label>
|
||||
<textarea class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04"
|
||||
aria-label="Upload">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Сохранить</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
36
semestr_1/Lab. 2/Project/auth.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
|
||||
<style>
|
||||
.form-max-width {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.width-max-content {
|
||||
width: max-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="d-flex align-items-center justify-content-center flex-column h-100 form-max-width mx-auto container">
|
||||
<h1 class="fw-bold">Авторизация</h1>
|
||||
<form action="#" class="d-flex flex-column gap-2 mt-3 w-100">
|
||||
<input class="form-control w-100" type="text" placeholder="Ваш логин" />
|
||||
<input class="form-control w-100" type="password" placeholder="Ваш пароль" />
|
||||
<button class="btn btn-primary width-max-content mx-auto px-4">Войти</button>
|
||||
</form>
|
||||
<p class="m-0 mt-4">Нажмите для <a class="text-decoration-none" href="register.html">регистрации</a></p>
|
||||
</body>
|
||||
|
||||
</html>
|
127
semestr_1/Lab. 2/Project/cart.html
Normal file
@ -0,0 +1,127 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/bootstrap.min.css">
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
|
||||
<style>
|
||||
.cart-item-image {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.items-list {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.height-fit-content {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.empty-cart-img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4 container">
|
||||
<!-- EMPTY CART -->
|
||||
<!-- <div class="d-flex align-items-center justify-content-center flex-column h-100 container">
|
||||
<img class="d-block empty-cart-img" src="/img/empty-cart.svg" alt="Иконка пустой корзины">
|
||||
<strong class="mt-5 fw-bold fs-2">Корзина пуста</strong>
|
||||
</div> -->
|
||||
|
||||
<!-- FULL CART -->
|
||||
<div class="grid">
|
||||
<div class="g-col-12 g-col-sm-7 g-col-lg-6">
|
||||
<strong class="d-block fw-bold fs-4 mb-4">Корзина</strong>
|
||||
<ul class="d-flex flex-column list-unstyled mb-0 items-list">
|
||||
<li class="d-flex flex-column rounded-5 bg-white p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="d-block cart-item-image" src="/img/1.png" alt="Фото товара">
|
||||
<div class="d-flex flex-column ms-4">
|
||||
<strong class="fw-normal">Apple BYZ S8521</strong>
|
||||
<span class="text-secondary">2 927 Руб.</span>
|
||||
</div>
|
||||
<button class="align-self-start ms-auto btn-close"></button>
|
||||
</div>
|
||||
<p class="ms-auto fw-bold m-0">2 927 Руб.</p>
|
||||
</li>
|
||||
|
||||
<li class="d-flex flex-column rounded-5 bg-white p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="d-block cart-item-image" src="/img/1.png" alt="Фото товара">
|
||||
<div class="d-flex flex-column ms-4">
|
||||
<strong class="fw-normal">Apple BYZ S8521</strong>
|
||||
<span class="text-secondary">2 927 Руб.</span>
|
||||
</div>
|
||||
<button class="align-self-start ms-auto btn-close"></button>
|
||||
</div>
|
||||
<p class="ms-auto fw-bold m-0">2 927 Руб.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="g-col-12 g-col-sm-5 g-col-md-4 g-start-md-9 rounded-5 bg-white height-fit-content">
|
||||
<div class="d-flex justify-content-between p-3 pb-0 mb-2">
|
||||
<span class="fw-bold">Итого</span>
|
||||
<span class="fw-bold">2 197 Руб.</span>
|
||||
</div>
|
||||
<button class="w-100 bg-black fw-bold text-white btn rounded-top-0 rounded-bottom-5 p-3">Оформить заказ</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
116
semestr_1/Lab. 2/Project/conditions.html
Normal file
@ -0,0 +1,116 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4">
|
||||
<div class="container">
|
||||
<strong class="d-block fw-bold fs-3 mb-4">Условия сервиса</strong>
|
||||
|
||||
<p class="p-3 bg-white rounded-4 mb-3 fw-bold">"But I must explain to you how all this mistaken idea of denouncing
|
||||
pleasure and praising pain was born and I will give
|
||||
you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
|
||||
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure,
|
||||
but
|
||||
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely
|
||||
painful. Nor
|
||||
again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
|
||||
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
|
||||
example,
|
||||
which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has
|
||||
any right
|
||||
to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a
|
||||
pain
|
||||
that produces no resultant pleasure?"</p>
|
||||
|
||||
<p class="p-3 bg-white rounded-4 mb-3 fw-bold">"But I must explain to you how all this mistaken idea of denouncing
|
||||
pleasure and
|
||||
praising pain was born and I will give
|
||||
you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
|
||||
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure,
|
||||
but
|
||||
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely
|
||||
painful. Nor
|
||||
again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
|
||||
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
|
||||
example,
|
||||
which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has
|
||||
any
|
||||
right
|
||||
to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a
|
||||
pain
|
||||
that produces no resultant pleasure?"</p>
|
||||
|
||||
<p class="p-3 bg-white rounded-4 mb-3 fw-bold">"But I must explain to you how all this mistaken idea of denouncing
|
||||
pleasure and
|
||||
praising pain was born and I will give
|
||||
you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
|
||||
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure,
|
||||
but
|
||||
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely
|
||||
painful. Nor
|
||||
again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
|
||||
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
|
||||
example,
|
||||
which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has
|
||||
any
|
||||
right
|
||||
to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a
|
||||
pain
|
||||
that produces no resultant pleasure?"</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
125
semestr_1/Lab. 2/Project/favourites.html
Normal file
@ -0,0 +1,125 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/bootstrap.min.css">
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4">
|
||||
<div class="container">
|
||||
<strong class="d-block fw-bold fs-4 mb-4">Избранные товары</strong>
|
||||
|
||||
<section class="category">
|
||||
<ul class="grid g-4 gy-4 list-unstyled mb-0">
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
132
semestr_1/Lab. 2/Project/index.html
Normal file
@ -0,0 +1,132 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
|
||||
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous" defer></script>
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4">
|
||||
<div class="container">
|
||||
<section class="category">
|
||||
<strong class="d-block fw-bold fs-4 mb-3">Телефоны</strong>
|
||||
<ul class="grid g-4 gy-4 list-unstyled mb-0">
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="mt-4">
|
||||
<strong class="d-block fw-bold fs-4 mb-3">Телефоны</strong>
|
||||
<ul class="grid g-4 gy-4 list-unstyled mb-0">
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<a href="item.html" class="d-flex flex-column bg-white rounded-5 p-3 text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
101
semestr_1/Lab. 2/Project/item.html
Normal 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" />
|
||||
<title>Vite App</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4 container">
|
||||
<div class="rounded-4 bg-white px-4 py-3">
|
||||
<div class="grid">
|
||||
<div class="d-flex justify-content-center g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<img src="/img/big-picture-item.png" alt="">
|
||||
</div>
|
||||
<div class="d-flex justify-content-center g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<img src="/img/big-picture-item.png" alt="">
|
||||
</div>
|
||||
<div class="d-flex justify-content-center g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<img src="/img/big-picture-item.png" alt="">
|
||||
</div>
|
||||
<div class="d-flex justify-content-center g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<img src="/img/big-picture-item.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between mt-4">
|
||||
<p class="fw-semibold fs-3 mb-0">BOROFONE BH32</p>
|
||||
<span class="fs-3 text-danger">2 927 Руб.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid mt-3">
|
||||
<div class="g-col-12 g-col-md-8 bg-light rounded-3 pb-3">
|
||||
<p class="bg-white rounded-3 mb-3 fw-semibold fs-4 px-3 py-2">Описание и характеристики</p>
|
||||
<p class="px-3 m-0">Активное шумоподавление: Нет</p>
|
||||
<p class="px-3 m-0">Активное шумоподавление: Нет</p>
|
||||
<p class="px-3 m-0">Активное шумоподавление: Нет</p>
|
||||
<p class="px-3 m-0">Активное шумоподавление: Нет</p>
|
||||
<p class="px-3 m-0">Активное шумоподавление: Нет</p>
|
||||
<p class="px-3 m-0">Активное шумоподавление: Нет</p>
|
||||
</div>
|
||||
|
||||
<div class="g-col-12 g-col-md-4">
|
||||
<!-- скрыть на уровне админа первые две кнопки -->
|
||||
<button class="btn btn-dark rounded-3 w-100">Добавить в избранное</button>
|
||||
<button class="btn btn-dark rounded-3 w-100 mt-3">Добавить в корзину</button>
|
||||
<button class="btn btn-danger rounded-3 w-100 mt-3">Удалить товар</button>
|
||||
<a href="red.html" class="btn btn-warning rounded-3 w-100 mt-3">Редактировать товар</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
581
semestr_1/Lab. 2/Project/package-lock.json
generated
Normal file
@ -0,0 +1,581 @@
|
||||
{
|
||||
"name": "lab--2",
|
||||
"version": "0.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "lab--2",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-arm": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
|
||||
"integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-arm64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
|
||||
"integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/android-x64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
|
||||
"integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-arm64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
|
||||
"integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-x64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
|
||||
"integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/freebsd-arm64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
|
||||
"integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/freebsd-x64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
|
||||
"integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-arm": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
|
||||
"integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-arm64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
|
||||
"integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-ia32": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
|
||||
"integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-loong64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
|
||||
"integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-mips64el": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
|
||||
"integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
|
||||
"cpu": [
|
||||
"mips64el"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-ppc64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
|
||||
"integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-riscv64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
|
||||
"integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-s390x": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
|
||||
"integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/linux-x64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
|
||||
"integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/netbsd-x64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
|
||||
"integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"netbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openbsd-x64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
|
||||
"integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"openbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/sunos-x64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
|
||||
"integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"sunos"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-arm64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
|
||||
"integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-ia32": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
|
||||
"integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/win32-x64": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
|
||||
"integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.8",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
|
||||
"integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/twbs"
|
||||
},
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/bootstrap"
|
||||
}
|
||||
],
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.11.8"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
|
||||
"integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"esbuild": "bin/esbuild"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@esbuild/android-arm": "0.18.20",
|
||||
"@esbuild/android-arm64": "0.18.20",
|
||||
"@esbuild/android-x64": "0.18.20",
|
||||
"@esbuild/darwin-arm64": "0.18.20",
|
||||
"@esbuild/darwin-x64": "0.18.20",
|
||||
"@esbuild/freebsd-arm64": "0.18.20",
|
||||
"@esbuild/freebsd-x64": "0.18.20",
|
||||
"@esbuild/linux-arm": "0.18.20",
|
||||
"@esbuild/linux-arm64": "0.18.20",
|
||||
"@esbuild/linux-ia32": "0.18.20",
|
||||
"@esbuild/linux-loong64": "0.18.20",
|
||||
"@esbuild/linux-mips64el": "0.18.20",
|
||||
"@esbuild/linux-ppc64": "0.18.20",
|
||||
"@esbuild/linux-riscv64": "0.18.20",
|
||||
"@esbuild/linux-s390x": "0.18.20",
|
||||
"@esbuild/linux-x64": "0.18.20",
|
||||
"@esbuild/netbsd-x64": "0.18.20",
|
||||
"@esbuild/openbsd-x64": "0.18.20",
|
||||
"@esbuild/sunos-x64": "0.18.20",
|
||||
"@esbuild/win32-arm64": "0.18.20",
|
||||
"@esbuild/win32-ia32": "0.18.20",
|
||||
"@esbuild/win32-x64": "0.18.20"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.6",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
|
||||
"integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
|
||||
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.30",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
|
||||
"integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/postcss"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.6",
|
||||
"picocolors": "^1.0.0",
|
||||
"source-map-js": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "3.29.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.2.tgz",
|
||||
"integrity": "sha512-CJouHoZ27v6siztc21eEQGo0kIcE5D1gVPA571ez0mMYb25LGYGKnVNXpEj5MGlepmDWGXNjDB5q7uNiPHC11A==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.18.0",
|
||||
"npm": ">=8.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
|
||||
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "4.4.9",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
|
||||
"integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.18.10",
|
||||
"postcss": "^8.4.27",
|
||||
"rollup": "^3.27.1"
|
||||
},
|
||||
"bin": {
|
||||
"vite": "bin/vite.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.18.0 || >=16.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/vitejs/vite?sponsor=1"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/node": ">= 14",
|
||||
"less": "*",
|
||||
"lightningcss": "^1.21.0",
|
||||
"sass": "*",
|
||||
"stylus": "*",
|
||||
"sugarss": "*",
|
||||
"terser": "^5.4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/node": {
|
||||
"optional": true
|
||||
},
|
||||
"less": {
|
||||
"optional": true
|
||||
},
|
||||
"lightningcss": {
|
||||
"optional": true
|
||||
},
|
||||
"sass": {
|
||||
"optional": true
|
||||
},
|
||||
"stylus": {
|
||||
"optional": true
|
||||
},
|
||||
"sugarss": {
|
||||
"optional": true
|
||||
},
|
||||
"terser": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
17
semestr_1/Lab. 2/Project/package.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "lab--2",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^4.4.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.3.2"
|
||||
}
|
||||
}
|
BIN
semestr_1/Lab. 2/Project/public/img/1.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
semestr_1/Lab. 2/Project/public/img/big-picture-item.png
Normal file
After Width: | Height: | Size: 32 KiB |
33
semestr_1/Lab. 2/Project/public/img/empty-cart.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg width="410" height="315" viewBox="0 0 410 315" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1_293)">
|
||||
<path d="M29.2111 290.191C37.9311 306.42 56.4381 313.388 56.4381 313.388C56.4381 313.388 60.8071 294.041 52.0871 277.811C43.3671 261.581 24.8602 254.614 24.8602 254.614C24.8602 254.614 20.4911 273.961 29.2111 290.191Z" fill="#FFA542"/>
|
||||
<path d="M35.2047 284.851C50.9479 294.357 57.0111 313.238 57.0111 313.238C57.0111 313.238 37.5496 316.707 21.8064 307.201C6.0632 297.695 0 278.814 0 278.814C0 278.814 19.4616 275.345 35.2047 284.851Z" fill="#FFCE7F"/>
|
||||
<path d="M390.976 13.5813H292.749V14.9896H390.976V13.5813Z" fill="#F2F2F2"/>
|
||||
<path d="M320.814 0.90686H319.41V13.9335H320.814V0.90686Z" fill="#F2F2F2"/>
|
||||
<path d="M363.612 0.90686H362.209V13.9335H363.612V0.90686Z" fill="#F2F2F2"/>
|
||||
<path d="M421.847 183.28H323.62V184.688H421.847V183.28Z" fill="#F2F2F2"/>
|
||||
<path d="M351.685 170.606H350.282V183.632H351.685V170.606Z" fill="#F2F2F2"/>
|
||||
<path d="M394.484 170.606H393.08V183.632H394.484V170.606Z" fill="#F2F2F2"/>
|
||||
<path d="M254.028 282.759H87.8945V281.56H252.832V223.383H101.861L94.5269 208.049L95.6046 207.53L102.613 222.184H254.028V282.759Z" fill="#2F2E41"/>
|
||||
<path d="M110.006 312.147C116.937 312.147 122.555 306.508 122.555 299.552C122.555 292.596 116.937 286.957 110.006 286.957C103.075 286.957 97.4561 292.596 97.4561 299.552C97.4561 306.508 103.075 312.147 110.006 312.147Z" fill="#101010"/>
|
||||
<path d="M233.709 312.147C240.64 312.147 246.259 306.508 246.259 299.552C246.259 292.596 240.64 286.957 233.709 286.957C226.778 286.957 221.16 292.596 221.16 299.552C221.16 306.508 226.778 312.147 233.709 312.147Z" fill="#101010"/>
|
||||
<path d="M379.524 39.8585C383.815 39.8585 387.293 36.3678 387.293 32.0617C387.293 27.7557 383.815 24.2649 379.524 24.2649C375.234 24.2649 371.755 27.7557 371.755 32.0617C371.755 36.3678 375.234 39.8585 379.524 39.8585Z" fill="#FFA542"/>
|
||||
<path d="M271.796 203.591H85.0618L44.6569 71.0458H313.407L313.163 71.8256L271.796 203.591ZM85.946 202.392H270.92L311.778 72.2453H46.2723L85.946 202.392Z" fill="#2F2E41"/>
|
||||
<path d="M257.22 196.694H93.2043L57.7151 79.1422H293.768L293.553 79.8344L257.22 196.694Z" fill="#F2F2F2"/>
|
||||
<path d="M316.756 59.2044L315.6 58.8966L323.487 29.0627H369.365V30.2626H324.407L316.756 59.2044Z" fill="#2F2E41"/>
|
||||
<path d="M299.978 111.229H57.7139V112.429H299.978V111.229Z" fill="#2F2E41"/>
|
||||
<path d="M286.104 155.421H71.1853V156.621H286.104V155.421Z" fill="#2F2E41"/>
|
||||
<path d="M179.626 71.6456H178.431V202.992H179.626V71.6456Z" fill="#2F2E41"/>
|
||||
<path d="M233.138 71.6078L224.558 202.951L225.751 203.029L234.33 71.6863L233.138 71.6078Z" fill="#2F2E41"/>
|
||||
<path d="M124.944 71.6063L123.752 71.6843L132.281 203.031L133.474 202.953L124.944 71.6063Z" fill="#2F2E41"/>
|
||||
<path d="M389.763 312.48H0V315H389.763V312.48Z" fill="#090909"/>
|
||||
<path d="M140.498 36.8181H42.2715V38.2264H140.498V36.8181Z" fill="#F2F2F2"/>
|
||||
<path d="M70.3361 24.1437H68.9329V37.1703H70.3361V24.1437Z" fill="#F2F2F2"/>
|
||||
<path d="M113.135 24.1437H111.732V37.1703H113.135V24.1437Z" fill="#F2F2F2"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_293">
|
||||
<rect width="409.879" height="315" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
After Width: | Height: | Size: 3.1 KiB |
8
semestr_1/Lab. 2/Project/public/img/icon-cart.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1_243" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
|
||||
<rect y="0.317139" width="24" height="24.1856" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1_243)">
|
||||
<path d="M7 22.4872C6.45 22.4872 5.97917 22.2899 5.5875 21.8952C5.19583 21.5005 5 21.026 5 20.4717C5 19.9175 5.19583 19.443 5.5875 19.0483C5.97917 18.6536 6.45 18.4563 7 18.4563C7.55 18.4563 8.02083 18.6536 8.4125 19.0483C8.80417 19.443 9 19.9175 9 20.4717C9 21.026 8.80417 21.5005 8.4125 21.8952C8.02083 22.2899 7.55 22.4872 7 22.4872ZM17 22.4872C16.45 22.4872 15.9792 22.2899 15.5875 21.8952C15.1958 21.5005 15 21.026 15 20.4717C15 19.9175 15.1958 19.443 15.5875 19.0483C15.9792 18.6536 16.45 18.4563 17 18.4563C17.55 18.4563 18.0208 18.6536 18.4125 19.0483C18.8042 19.443 19 19.9175 19 20.4717C19 21.026 18.8042 21.5005 18.4125 21.8952C18.0208 22.2899 17.55 22.4872 17 22.4872ZM6.15 6.36346L8.55 11.4021H15.55L18.3 6.36346H6.15ZM5.2 4.34799H19.95C20.3333 4.34799 20.625 4.52014 20.825 4.86445C21.025 5.20876 21.0333 5.55727 20.85 5.90998L17.3 12.3595C17.1167 12.6954 16.8708 12.9557 16.5625 13.1405C16.2542 13.3252 15.9167 13.4176 15.55 13.4176H8.1L7 15.4331H19V17.4485H7C6.25 17.4485 5.68333 17.1168 5.3 16.4534C4.91667 15.79 4.9 15.1307 5.25 14.4757L6.6 12.0068L3 4.34799H1V2.33252H4.25L5.2 4.34799Z" fill="#1C1B1F"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.4 KiB |
8
semestr_1/Lab. 2/Project/public/img/icon-heart.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1_240" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
|
||||
<rect y="0.324829" width="24" height="24.1856" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1_240)">
|
||||
<path d="M12 21.4873L10.55 20.1772C8.86667 18.6488 7.475 17.3304 6.375 16.2219C5.275 15.1134 4.4 14.1182 3.75 13.2365C3.1 12.3547 2.64583 11.5443 2.3875 10.8053C2.12917 10.0663 2 9.31049 2 8.5379C2 6.95911 2.525 5.64066 3.575 4.58254C4.625 3.52442 5.93333 2.99536 7.5 2.99536C8.36667 2.99536 9.19167 3.18011 9.975 3.54962C10.7583 3.91912 11.4333 4.43978 12 5.1116C12.5667 4.43978 13.2417 3.91912 14.025 3.54962C14.8083 3.18011 15.6333 2.99536 16.5 2.99536C18.0667 2.99536 19.375 3.52442 20.425 4.58254C21.475 5.64066 22 6.95911 22 8.5379C22 9.31049 21.8708 10.0663 21.6125 10.8053C21.3542 11.5443 20.9 12.3547 20.25 13.2365C19.6 14.1182 18.725 15.1134 17.625 16.2219C16.525 17.3304 15.1333 18.6488 13.45 20.1772L12 21.4873ZM12 18.7664C13.6 17.322 14.9167 16.0833 15.95 15.0504C16.9833 14.0175 17.8 13.1189 18.4 12.3547C19 11.5905 19.4167 10.9103 19.65 10.314C19.8833 9.71779 20 9.12574 20 8.5379C20 7.53016 19.6667 6.69039 19 6.01856C18.3333 5.34674 17.5 5.01083 16.5 5.01083C15.7167 5.01083 14.9917 5.23337 14.325 5.67845C13.6583 6.12354 13.2 6.69039 12.95 7.379H11.05C10.8 6.69039 10.3417 6.12354 9.675 5.67845C9.00833 5.23337 8.28333 5.01083 7.5 5.01083C6.5 5.01083 5.66667 5.34674 5 6.01856C4.33333 6.69039 4 7.53016 4 8.5379C4 9.12574 4.11667 9.71779 4.35 10.314C4.58333 10.9103 5 11.5905 5.6 12.3547C6.2 13.1189 7.01667 14.0175 8.05 15.0504C9.08333 16.0833 10.4 17.322 12 18.7664Z" fill="#1C1B1F"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.7 KiB |
6
semestr_1/Lab. 2/Project/public/styles/bootstrap.min.css
vendored
Normal file
6
semestr_1/Lab. 2/Project/public/styles/grid.css
Normal file
22
semestr_1/Lab. 2/Project/public/styles/index.css
Normal file
@ -0,0 +1,22 @@
|
||||
body {
|
||||
min-height: 100%;
|
||||
min-width: 320px;
|
||||
background-color: #eaeaea !important;
|
||||
font-family: "Montserrat", sans-serif !important;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1110px;
|
||||
}
|
||||
|
||||
.price-color {
|
||||
color: #FFA542;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
80
semestr_1/Lab. 2/Project/red.html
Normal file
@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/bootstrap.min.css">
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4">
|
||||
<div class="container">
|
||||
<strong class="d-block fw-bold fs-4 mb-4">Редактировать товар</strong>
|
||||
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Название товара</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="form-label">Характеристики (через точку с запятой)</label>
|
||||
<textarea class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04"
|
||||
aria-label="Upload">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Обновить</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
36
semestr_1/Lab. 2/Project/register.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
|
||||
<style>
|
||||
.form-max-width {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.width-max-content {
|
||||
width: max-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="d-flex align-items-center justify-content-center flex-column h-100 form-max-width mx-auto container">
|
||||
<h1 class="fw-bold">Регистрация</h1>
|
||||
<form action="#" class="d-flex flex-column gap-2 mt-3 w-100">
|
||||
<input class="form-control w-100" type="text" placeholder="Ваш логин" />
|
||||
<input class="form-control w-100" type="password" placeholder="Ваш пароль" />
|
||||
<button class="btn btn-primary width-max-content mx-auto px-4">Зарегестрироваться</button>
|
||||
</form>
|
||||
<p class="m-0 mt-4">Нажмите для <a href="auth.html" class="text-decoration-none">авторизации</a></p>
|
||||
</body>
|
||||
|
||||
</html>
|
20
semestr_1/Lab. 3/Project/.eslintrc.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": "airbnb-base",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 12,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"quotes": "off",
|
||||
"indent": "off",
|
||||
"no-console": "off",
|
||||
"no-use-before-define": "off",
|
||||
"no-alert": "off",
|
||||
"no-restricted-globals": "off",
|
||||
"quote-props": "off"
|
||||
}
|
||||
}
|
24
semestr_1/Lab. 3/Project/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
80
semestr_1/Lab. 3/Project/admin.html
Normal file
@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4">
|
||||
<div class="container">
|
||||
<strong class="d-block fw-bold fs-4 mb-4">Админка</strong>
|
||||
|
||||
<form>
|
||||
<strong class="d-block fw-bold fs-5 mb-2">Добавить товар</strong>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Название товара</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="form-label">Характеристики (через точку с запятой)</label>
|
||||
<textarea class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04"
|
||||
aria-label="Upload">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Сохранить</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
34
semestr_1/Lab. 3/Project/auth.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
<style>
|
||||
.form-max-width {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.width-max-content {
|
||||
width: max-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="d-flex align-items-center justify-content-center flex-column h-100 form-max-width mx-auto container">
|
||||
<h1 class="fw-bold">Авторизация</h1>
|
||||
<form action="#" class="d-flex flex-column gap-2 mt-3 w-100">
|
||||
<input class="form-control w-100" type="text" placeholder="Ваш логин" />
|
||||
<input class="form-control w-100" type="password" placeholder="Ваш пароль" />
|
||||
<button class="btn btn-primary width-max-content mx-auto px-4">Войти</button>
|
||||
</form>
|
||||
<p class="m-0 mt-4">Нажмите для <a class="text-decoration-none" href="register.html">регистрации</a></p>
|
||||
</body>
|
||||
|
||||
</html>
|
125
semestr_1/Lab. 3/Project/cart.html
Normal file
@ -0,0 +1,125 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
<style>
|
||||
.cart-item-image {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.items-list {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.height-fit-content {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.empty-cart-img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4 container">
|
||||
<!-- EMPTY CART -->
|
||||
<!-- <div class="d-flex align-items-center justify-content-center flex-column h-100 container">
|
||||
<img class="d-block empty-cart-img" src="/img/empty-cart.svg" alt="Иконка пустой корзины">
|
||||
<strong class="mt-5 fw-bold fs-2">Корзина пуста</strong>
|
||||
</div> -->
|
||||
|
||||
<!-- FULL CART -->
|
||||
<div class="grid">
|
||||
<div class="g-col-12 g-col-sm-7 g-col-lg-6">
|
||||
<strong class="d-block fw-bold fs-4 mb-4">Корзина</strong>
|
||||
<ul class="d-flex flex-column list-unstyled mb-0 items-list">
|
||||
<li class="d-flex flex-column rounded-5 bg-white p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="d-block cart-item-image" src="/img/1.png" alt="Фото товара">
|
||||
<div class="d-flex flex-column ms-4">
|
||||
<strong class="fw-normal">Apple BYZ S8521</strong>
|
||||
<span class="text-secondary">2 927 Руб.</span>
|
||||
</div>
|
||||
<button class="align-self-start ms-auto btn-close"></button>
|
||||
</div>
|
||||
<p class="ms-auto fw-bold m-0">2 927 Руб.</p>
|
||||
</li>
|
||||
|
||||
<li class="d-flex flex-column rounded-5 bg-white p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="d-block cart-item-image" src="/img/1.png" alt="Фото товара">
|
||||
<div class="d-flex flex-column ms-4">
|
||||
<strong class="fw-normal">Apple BYZ S8521</strong>
|
||||
<span class="text-secondary">2 927 Руб.</span>
|
||||
</div>
|
||||
<button class="align-self-start ms-auto btn-close"></button>
|
||||
</div>
|
||||
<p class="ms-auto fw-bold m-0">2 927 Руб.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="g-col-12 g-col-sm-5 g-col-md-4 g-start-md-9 rounded-5 bg-white height-fit-content">
|
||||
<div class="d-flex justify-content-between p-3 pb-0 mb-2">
|
||||
<span class="fw-bold">Итого</span>
|
||||
<span class="fw-bold">2 197 Руб.</span>
|
||||
</div>
|
||||
<button class="w-100 bg-black fw-bold text-white btn rounded-top-0 rounded-bottom-5 p-3">Оформить заказ</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
115
semestr_1/Lab. 3/Project/conditions.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4">
|
||||
<div class="container">
|
||||
<strong class="d-block fw-bold fs-3 mb-4">Условия сервиса</strong>
|
||||
|
||||
<p class="p-3 bg-white rounded-4 mb-3 fw-bold">"But I must explain to you how all this mistaken idea of denouncing
|
||||
pleasure and praising pain was born and I will give
|
||||
you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
|
||||
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure,
|
||||
but
|
||||
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely
|
||||
painful. Nor
|
||||
again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
|
||||
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
|
||||
example,
|
||||
which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has
|
||||
any right
|
||||
to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a
|
||||
pain
|
||||
that produces no resultant pleasure?"</p>
|
||||
|
||||
<p class="p-3 bg-white rounded-4 mb-3 fw-bold">"But I must explain to you how all this mistaken idea of denouncing
|
||||
pleasure and
|
||||
praising pain was born and I will give
|
||||
you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
|
||||
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure,
|
||||
but
|
||||
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely
|
||||
painful. Nor
|
||||
again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
|
||||
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
|
||||
example,
|
||||
which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has
|
||||
any
|
||||
right
|
||||
to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a
|
||||
pain
|
||||
that produces no resultant pleasure?"</p>
|
||||
|
||||
<p class="p-3 bg-white rounded-4 mb-3 fw-bold">"But I must explain to you how all this mistaken idea of denouncing
|
||||
pleasure and
|
||||
praising pain was born and I will give
|
||||
you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
|
||||
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure,
|
||||
but
|
||||
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely
|
||||
painful. Nor
|
||||
again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
|
||||
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
|
||||
example,
|
||||
which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has
|
||||
any
|
||||
right
|
||||
to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a
|
||||
pain
|
||||
that produces no resultant pleasure?"</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
123
semestr_1/Lab. 3/Project/favourites.html
Normal file
@ -0,0 +1,123 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4">
|
||||
<div class="container">
|
||||
<strong class="d-block fw-bold fs-4 mb-4">Избранные товары</strong>
|
||||
|
||||
<section class="category">
|
||||
<ul class="grid g-4 gy-4 list-unstyled mb-0">
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
144
semestr_1/Lab. 3/Project/index.html
Normal file
@ -0,0 +1,144 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4">
|
||||
<div class="container">
|
||||
<section class="category">
|
||||
<strong class="d-block fw-bold fs-4 mb-3">Телефоны</strong>
|
||||
<ul class="grid g-4 gy-4 list-unstyled mb-0">
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="mt-4">
|
||||
<strong class="d-block fw-bold fs-4 mb-3">Телефоны</strong>
|
||||
<ul class="grid g-4 gy-4 list-unstyled mb-0">
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li class="d-flex flex-column g-col-12 g-col-sm-6 g-col-md-4 bg-white rounded-5 p-3">
|
||||
<button class="align-self-end btn p-0"><img src="/img/icon-heart.svg" alt="Добавить в Любимое"></button>
|
||||
<a href="item.html" class="d-flex flex-column text-decoration-none">
|
||||
<img src="/img/1.png" alt="Фото товара" class="d-block align-self-center">
|
||||
<strong class="mt-5 fw-semibold fs-6 text-dark">Apple BYZ S852I</strong>
|
||||
<strong class="fw-semibold fs-6 price-color">12 Rub.</strong>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
99
semestr_1/Lab. 3/Project/item.html
Normal file
@ -0,0 +1,99 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4 container">
|
||||
<div class="rounded-4 bg-white px-4 py-3">
|
||||
<div class="grid">
|
||||
<div class="d-flex justify-content-center g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<img src="/img/big-picture-item.png" alt="">
|
||||
</div>
|
||||
<div class="d-flex justify-content-center g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<img src="/img/big-picture-item.png" alt="">
|
||||
</div>
|
||||
<div class="d-flex justify-content-center g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<img src="/img/big-picture-item.png" alt="">
|
||||
</div>
|
||||
<div class="d-flex justify-content-center g-col-12 g-col-sm-6 g-col-md-4">
|
||||
<img src="/img/big-picture-item.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between mt-4">
|
||||
<p class="fw-semibold fs-3 mb-0">BOROFONE BH32</p>
|
||||
<span class="fs-3 text-danger">2 927 Руб.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid mt-3">
|
||||
<div class="g-col-12 g-col-md-8 bg-light rounded-3 pb-3">
|
||||
<p class="bg-white rounded-3 mb-3 fw-semibold fs-4 px-3 py-2">Описание и характеристики</p>
|
||||
<p class="px-3 m-0">Активное шумоподавление: Нет</p>
|
||||
<p class="px-3 m-0">Активное шумоподавление: Нет</p>
|
||||
<p class="px-3 m-0">Активное шумоподавление: Нет</p>
|
||||
<p class="px-3 m-0">Активное шумоподавление: Нет</p>
|
||||
<p class="px-3 m-0">Активное шумоподавление: Нет</p>
|
||||
<p class="px-3 m-0">Активное шумоподавление: Нет</p>
|
||||
</div>
|
||||
|
||||
<div class="g-col-12 g-col-md-4">
|
||||
<!-- скрыть на уровне админа первые две кнопки -->
|
||||
<button class="btn btn-dark rounded-3 w-100">Добавить в избранное</button>
|
||||
<button class="btn btn-dark rounded-3 w-100 mt-3">Добавить в корзину</button>
|
||||
<button class="btn btn-danger rounded-3 w-100 mt-3">Удалить товар</button>
|
||||
<a href="red.html" class="btn btn-warning rounded-3 w-100 mt-3">Редактировать товар</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
4282
semestr_1/Lab. 3/Project/package-lock.json
generated
Normal file
25
semestr_1/Lab. 3/Project/package.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "lab--2",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint",
|
||||
"server": "json-server -w server/db.json",
|
||||
"app": "npm-run-all --parallel dev server"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.52.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"vite": "^4.4.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.6.0",
|
||||
"bootstrap": "^5.3.2",
|
||||
"json-server": "^0.17.4",
|
||||
"npm-run-all": "^4.1.5"
|
||||
}
|
||||
}
|
133
semestr_1/Lab. 3/Project/page.html
Normal file
@ -0,0 +1,133 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script type="module" src="/scripts/admin.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4">
|
||||
<div class="container">
|
||||
<strong class="d-block fw-bold fs-4 mb-4">Админка</strong>
|
||||
|
||||
<button type="button" class="btn btn-primary mb-2" data-bs-toggle="modal"
|
||||
data-bs-target="#modal" data-type="add">Добавить объект</button>
|
||||
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">ID</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Category</th>
|
||||
<th scope="col">Price</th>
|
||||
<th scope="col">Rating</th>
|
||||
<th scope="col">Info</th>
|
||||
<th scope="col">Photo</th>
|
||||
<th scope="col">Edit</th>
|
||||
<th scope="col">Delete</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="parent">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="modal-title">Создать объект</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="modal-form">
|
||||
<div class="mb-3 d-flex align-items-center justify-content-center">
|
||||
<img src="/img/placeholder.png" alt="" id="object-preview-photo">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message-text" class="col-form-label">Name:</label>
|
||||
<input class="form-control" id="object-name" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message-text" class="col-form-label">Category:</label>
|
||||
<select class="form-select" id="object-category" aria-label="Default select example">
|
||||
<option selected disabled>Выберите категорию</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message-text" class="col-form-label">Price:</label>
|
||||
<input class="form-control" id="object-price" type="number" min="0" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message-text" class="col-form-label">Rating:</label>
|
||||
<input class="form-control" id="object-rating" type="number" min="0" max="5" step="0.1" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message-text" class="col-form-label">Info:</label>
|
||||
<textarea class="form-control" id="object-info"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message-text" class="col-form-label">Photo:</label>
|
||||
<input type="file" class="form-control" id="object-photo" accept="image/*">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||
<button type="button" class="btn btn-primary" id="submit-button">Создать</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
BIN
semestr_1/Lab. 3/Project/public/fonts/montserrat-700.woff2
Normal file
BIN
semestr_1/Lab. 3/Project/public/fonts/montserrat-regular.woff2
Normal file
BIN
semestr_1/Lab. 3/Project/public/img/1.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
semestr_1/Lab. 3/Project/public/img/big-picture-item.png
Normal file
After Width: | Height: | Size: 32 KiB |
33
semestr_1/Lab. 3/Project/public/img/empty-cart.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg width="410" height="315" viewBox="0 0 410 315" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1_293)">
|
||||
<path d="M29.2111 290.191C37.9311 306.42 56.4381 313.388 56.4381 313.388C56.4381 313.388 60.8071 294.041 52.0871 277.811C43.3671 261.581 24.8602 254.614 24.8602 254.614C24.8602 254.614 20.4911 273.961 29.2111 290.191Z" fill="#FFA542"/>
|
||||
<path d="M35.2047 284.851C50.9479 294.357 57.0111 313.238 57.0111 313.238C57.0111 313.238 37.5496 316.707 21.8064 307.201C6.0632 297.695 0 278.814 0 278.814C0 278.814 19.4616 275.345 35.2047 284.851Z" fill="#FFCE7F"/>
|
||||
<path d="M390.976 13.5813H292.749V14.9896H390.976V13.5813Z" fill="#F2F2F2"/>
|
||||
<path d="M320.814 0.90686H319.41V13.9335H320.814V0.90686Z" fill="#F2F2F2"/>
|
||||
<path d="M363.612 0.90686H362.209V13.9335H363.612V0.90686Z" fill="#F2F2F2"/>
|
||||
<path d="M421.847 183.28H323.62V184.688H421.847V183.28Z" fill="#F2F2F2"/>
|
||||
<path d="M351.685 170.606H350.282V183.632H351.685V170.606Z" fill="#F2F2F2"/>
|
||||
<path d="M394.484 170.606H393.08V183.632H394.484V170.606Z" fill="#F2F2F2"/>
|
||||
<path d="M254.028 282.759H87.8945V281.56H252.832V223.383H101.861L94.5269 208.049L95.6046 207.53L102.613 222.184H254.028V282.759Z" fill="#2F2E41"/>
|
||||
<path d="M110.006 312.147C116.937 312.147 122.555 306.508 122.555 299.552C122.555 292.596 116.937 286.957 110.006 286.957C103.075 286.957 97.4561 292.596 97.4561 299.552C97.4561 306.508 103.075 312.147 110.006 312.147Z" fill="#101010"/>
|
||||
<path d="M233.709 312.147C240.64 312.147 246.259 306.508 246.259 299.552C246.259 292.596 240.64 286.957 233.709 286.957C226.778 286.957 221.16 292.596 221.16 299.552C221.16 306.508 226.778 312.147 233.709 312.147Z" fill="#101010"/>
|
||||
<path d="M379.524 39.8585C383.815 39.8585 387.293 36.3678 387.293 32.0617C387.293 27.7557 383.815 24.2649 379.524 24.2649C375.234 24.2649 371.755 27.7557 371.755 32.0617C371.755 36.3678 375.234 39.8585 379.524 39.8585Z" fill="#FFA542"/>
|
||||
<path d="M271.796 203.591H85.0618L44.6569 71.0458H313.407L313.163 71.8256L271.796 203.591ZM85.946 202.392H270.92L311.778 72.2453H46.2723L85.946 202.392Z" fill="#2F2E41"/>
|
||||
<path d="M257.22 196.694H93.2043L57.7151 79.1422H293.768L293.553 79.8344L257.22 196.694Z" fill="#F2F2F2"/>
|
||||
<path d="M316.756 59.2044L315.6 58.8966L323.487 29.0627H369.365V30.2626H324.407L316.756 59.2044Z" fill="#2F2E41"/>
|
||||
<path d="M299.978 111.229H57.7139V112.429H299.978V111.229Z" fill="#2F2E41"/>
|
||||
<path d="M286.104 155.421H71.1853V156.621H286.104V155.421Z" fill="#2F2E41"/>
|
||||
<path d="M179.626 71.6456H178.431V202.992H179.626V71.6456Z" fill="#2F2E41"/>
|
||||
<path d="M233.138 71.6078L224.558 202.951L225.751 203.029L234.33 71.6863L233.138 71.6078Z" fill="#2F2E41"/>
|
||||
<path d="M124.944 71.6063L123.752 71.6843L132.281 203.031L133.474 202.953L124.944 71.6063Z" fill="#2F2E41"/>
|
||||
<path d="M389.763 312.48H0V315H389.763V312.48Z" fill="#090909"/>
|
||||
<path d="M140.498 36.8181H42.2715V38.2264H140.498V36.8181Z" fill="#F2F2F2"/>
|
||||
<path d="M70.3361 24.1437H68.9329V37.1703H70.3361V24.1437Z" fill="#F2F2F2"/>
|
||||
<path d="M113.135 24.1437H111.732V37.1703H113.135V24.1437Z" fill="#F2F2F2"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_293">
|
||||
<rect width="409.879" height="315" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
After Width: | Height: | Size: 3.1 KiB |
8
semestr_1/Lab. 3/Project/public/img/icon-cart.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1_243" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
|
||||
<rect y="0.317139" width="24" height="24.1856" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1_243)">
|
||||
<path d="M7 22.4872C6.45 22.4872 5.97917 22.2899 5.5875 21.8952C5.19583 21.5005 5 21.026 5 20.4717C5 19.9175 5.19583 19.443 5.5875 19.0483C5.97917 18.6536 6.45 18.4563 7 18.4563C7.55 18.4563 8.02083 18.6536 8.4125 19.0483C8.80417 19.443 9 19.9175 9 20.4717C9 21.026 8.80417 21.5005 8.4125 21.8952C8.02083 22.2899 7.55 22.4872 7 22.4872ZM17 22.4872C16.45 22.4872 15.9792 22.2899 15.5875 21.8952C15.1958 21.5005 15 21.026 15 20.4717C15 19.9175 15.1958 19.443 15.5875 19.0483C15.9792 18.6536 16.45 18.4563 17 18.4563C17.55 18.4563 18.0208 18.6536 18.4125 19.0483C18.8042 19.443 19 19.9175 19 20.4717C19 21.026 18.8042 21.5005 18.4125 21.8952C18.0208 22.2899 17.55 22.4872 17 22.4872ZM6.15 6.36346L8.55 11.4021H15.55L18.3 6.36346H6.15ZM5.2 4.34799H19.95C20.3333 4.34799 20.625 4.52014 20.825 4.86445C21.025 5.20876 21.0333 5.55727 20.85 5.90998L17.3 12.3595C17.1167 12.6954 16.8708 12.9557 16.5625 13.1405C16.2542 13.3252 15.9167 13.4176 15.55 13.4176H8.1L7 15.4331H19V17.4485H7C6.25 17.4485 5.68333 17.1168 5.3 16.4534C4.91667 15.79 4.9 15.1307 5.25 14.4757L6.6 12.0068L3 4.34799H1V2.33252H4.25L5.2 4.34799Z" fill="#1C1B1F"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.4 KiB |
8
semestr_1/Lab. 3/Project/public/img/icon-heart.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1_240" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
|
||||
<rect y="0.324829" width="24" height="24.1856" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1_240)">
|
||||
<path d="M12 21.4873L10.55 20.1772C8.86667 18.6488 7.475 17.3304 6.375 16.2219C5.275 15.1134 4.4 14.1182 3.75 13.2365C3.1 12.3547 2.64583 11.5443 2.3875 10.8053C2.12917 10.0663 2 9.31049 2 8.5379C2 6.95911 2.525 5.64066 3.575 4.58254C4.625 3.52442 5.93333 2.99536 7.5 2.99536C8.36667 2.99536 9.19167 3.18011 9.975 3.54962C10.7583 3.91912 11.4333 4.43978 12 5.1116C12.5667 4.43978 13.2417 3.91912 14.025 3.54962C14.8083 3.18011 15.6333 2.99536 16.5 2.99536C18.0667 2.99536 19.375 3.52442 20.425 4.58254C21.475 5.64066 22 6.95911 22 8.5379C22 9.31049 21.8708 10.0663 21.6125 10.8053C21.3542 11.5443 20.9 12.3547 20.25 13.2365C19.6 14.1182 18.725 15.1134 17.625 16.2219C16.525 17.3304 15.1333 18.6488 13.45 20.1772L12 21.4873ZM12 18.7664C13.6 17.322 14.9167 16.0833 15.95 15.0504C16.9833 14.0175 17.8 13.1189 18.4 12.3547C19 11.5905 19.4167 10.9103 19.65 10.314C19.8833 9.71779 20 9.12574 20 8.5379C20 7.53016 19.6667 6.69039 19 6.01856C18.3333 5.34674 17.5 5.01083 16.5 5.01083C15.7167 5.01083 14.9917 5.23337 14.325 5.67845C13.6583 6.12354 13.2 6.69039 12.95 7.379H11.05C10.8 6.69039 10.3417 6.12354 9.675 5.67845C9.00833 5.23337 8.28333 5.01083 7.5 5.01083C6.5 5.01083 5.66667 5.34674 5 6.01856C4.33333 6.69039 4 7.53016 4 8.5379C4 9.12574 4.11667 9.71779 4.35 10.314C4.58333 10.9103 5 11.5905 5.6 12.3547C6.2 13.1189 7.01667 14.0175 8.05 15.0504C9.08333 16.0833 10.4 17.322 12 18.7664Z" fill="#1C1B1F"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.7 KiB |
BIN
semestr_1/Lab. 3/Project/public/img/placeholder.png
Normal file
After Width: | Height: | Size: 474 B |
186
semestr_1/Lab. 3/Project/public/scripts/admin.js
Normal file
@ -0,0 +1,186 @@
|
||||
import { createObject } from "./api/createObject.js";
|
||||
import { delObject } from "./api/delObject.js";
|
||||
import { fetchAllCategories } from "./api/fetchAllCategoeies.js";
|
||||
import { fetchAllProducts } from "./api/fetchAllProducts.js";
|
||||
import { updateObject } from "./api/updateObject.js";
|
||||
import { configurateObject } from "./helpers/configurateObject.js";
|
||||
import { convertInfoToArray } from "./helpers/convertInfoToArray.js";
|
||||
import { convertInfoToString } from "./helpers/convertInfoToString.js";
|
||||
import { validateModalForm } from "./helpers/formValidate.js";
|
||||
import { getBase64Image } from "./helpers/getBase64Image.js";
|
||||
import { getHTMLCategorySelectOption } from "./helpers/getHTMLCategorySelectOption.js";
|
||||
import { getHTMLRow } from "./helpers/getHTMLRow.js";
|
||||
import { resetForm } from "./helpers/resetForm.js";
|
||||
import { form, modal, parent } from "./variables.js";
|
||||
|
||||
//? ПЕРЕМЕННЫЕ
|
||||
|
||||
let products;
|
||||
let categories;
|
||||
|
||||
//? СТАРТ ВСЕГО-ВСЕГО
|
||||
|
||||
async function start() {
|
||||
getAllCategories();
|
||||
drawAllProducts();
|
||||
}
|
||||
|
||||
if (parent) start();
|
||||
|
||||
//? ПОЛУЧЕНИЕ ВСЕХ ОБЪЕКТОВ
|
||||
|
||||
async function drawAllProducts() {
|
||||
try {
|
||||
const data = await fetchAllProducts();
|
||||
|
||||
for (const object of data) {
|
||||
const formatedInfo = convertInfoToString(object.info);
|
||||
const category = categories.find(category => category.id === object.categoryId);
|
||||
parent.innerHTML += getHTMLRow({ ...object, info: formatedInfo.replace(/\n/g, '<br>') }, category.name);
|
||||
}
|
||||
|
||||
products = data;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
async function getAllCategories() {
|
||||
try {
|
||||
const data = await fetchAllCategories();
|
||||
|
||||
for (const object of data) {
|
||||
form.fieldCategorySelect.innerHTML += getHTMLCategorySelectOption(object.name, object.id);
|
||||
}
|
||||
|
||||
categories = data;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
//? УДАЛЕНИЕ ОБЪЕКТА
|
||||
|
||||
async function deleteObject(e) {
|
||||
try {
|
||||
if (!confirm("Вы правда хотите удалить этот объект?")) return;
|
||||
|
||||
const row = e.parentElement.parentElement;
|
||||
const id = row.dataset.id;
|
||||
await delObject(id);
|
||||
row.remove();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
window.deleteObject = deleteObject;
|
||||
|
||||
//? СОЗДАНИЕ ОБЪЕКТА
|
||||
|
||||
let isEditModal = true;
|
||||
|
||||
const modalObject = new bootstrap.Modal(modal.root);
|
||||
|
||||
if (modal.root && modal.submitButton) {
|
||||
form.fieldPhoto.addEventListener('change', (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
form.fieldPhotoPreview.src = reader.result;
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
//? РЕДАКТИРОВАНИЕ
|
||||
|
||||
//? Открытие модалки
|
||||
if (modal.root && modal.submitButton) {
|
||||
modal.root.addEventListener('show.bs.modal', event => {
|
||||
if (event.relatedTarget.dataset.type === "add") {
|
||||
isEditModal = false;
|
||||
modal.title.innerHTML = "Создать объект";
|
||||
modal.submitButton.innerHTML = "Создать";
|
||||
return;
|
||||
} else {
|
||||
modal.title.innerHTML = "Обновить объект";
|
||||
modal.submitButton.innerHTML = "Обновить";
|
||||
isEditModal = true;
|
||||
}
|
||||
|
||||
const button = event.relatedTarget;
|
||||
const id = +button.getAttribute('data-bs-whatever');
|
||||
const product = products.find(product => product.id === id);
|
||||
|
||||
form.fieldName.value = product.name;
|
||||
form.fieldPrice.value = product.price;
|
||||
form.fieldRating.value = product.rating;
|
||||
form.fieldPhotoPreview.src = product.photo;
|
||||
form.fieldPhotoPreview.alt = product.name;
|
||||
form.fieldCategorySelect.value = product.categoryId;
|
||||
form.fieldInfo.value = convertInfoToString(product.info);
|
||||
|
||||
modal.submitButton.dataset.id = id;
|
||||
});
|
||||
|
||||
|
||||
//? Обновление и создание объекта
|
||||
|
||||
// Обработчик события для кнопки submit
|
||||
modal.submitButton.addEventListener('click', async function (e) {
|
||||
try {
|
||||
if (!validateModalForm(isEditModal)) {
|
||||
alert("Ошибка в форме: не все поля заполнены");
|
||||
return;
|
||||
}
|
||||
|
||||
const info = form.fieldInfo.value;
|
||||
const id = isEditModal ? +modal.submitButton.dataset.id : null;
|
||||
const objectPhotoInputFiles = form.fieldPhoto.files;
|
||||
|
||||
const infoArray = info.split("\n");
|
||||
const formattedInfo = convertInfoToArray(infoArray);
|
||||
|
||||
const object = configurateObject(id, form.fieldName.value, +form.fieldCategorySelect.value,
|
||||
+form.fieldPrice.value, +form.fieldRating.value, formattedInfo);
|
||||
|
||||
if (objectPhotoInputFiles.length > 0) {
|
||||
const file = objectPhotoInputFiles[0];
|
||||
const base64Image = await getBase64Image(file);
|
||||
object.photo = base64Image;
|
||||
} else {
|
||||
object.photo = products.find(product => product.id === id).photo;
|
||||
}
|
||||
|
||||
const objectJSON = JSON.stringify(object);
|
||||
|
||||
if (isEditModal) await updateObjectFunc(id, objectJSON);
|
||||
else await addObject(objectJSON);
|
||||
|
||||
modalObject.hide();
|
||||
resetForm();
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
async function updateObjectFunc(id, objectJSON) {
|
||||
const row = document.querySelector(`tr[data-id="${id}"]`);
|
||||
const object = await updateObject(id, objectJSON);
|
||||
const objectCategory = categories.find(category => category.id === object.categoryId);
|
||||
row.innerHTML = getHTMLRow({ ...object, info: convertInfoToString(object.info) }, objectCategory.name);
|
||||
products = products.map(product => (product.id === id ? object : product));
|
||||
}
|
||||
|
||||
async function addObject(objectJSON) {
|
||||
const object = await createObject(objectJSON);
|
||||
const objectCategory = categories.find(category => category.id === object.categoryId);
|
||||
parent.innerHTML += getHTMLRow({ ...object, info: convertInfoToString(object.info) }, objectCategory.name);
|
||||
products.push(object);
|
||||
}
|
13
semestr_1/Lab. 3/Project/public/scripts/api/createObject.js
Normal file
@ -0,0 +1,13 @@
|
||||
import { serverPath } from "../variables.js";
|
||||
|
||||
export async function createObject(objectJSON) {
|
||||
const response = await fetch(`${serverPath}/products`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: objectJSON,
|
||||
});
|
||||
|
||||
return response.json();
|
||||
}
|
5
semestr_1/Lab. 3/Project/public/scripts/api/delObject.js
Normal file
@ -0,0 +1,5 @@
|
||||
import { serverPath } from "../variables.js";
|
||||
|
||||
export async function delObject(id) {
|
||||
await fetch(`${serverPath}/products/${id}`, { method: 'DELETE' });
|
||||
}
|
@ -0,0 +1,6 @@
|
||||
import { serverPath } from "../variables.js";
|
||||
|
||||
export async function fetchAllCategories() {
|
||||
const response = await fetch(`${serverPath}/categories`);
|
||||
return response.json();
|
||||
}
|
@ -0,0 +1,6 @@
|
||||
import { serverPath } from "../variables.js";
|
||||
|
||||
export async function fetchAllProducts() {
|
||||
const response = await fetch(`${serverPath}/products`);
|
||||
return response.json();
|
||||
}
|
13
semestr_1/Lab. 3/Project/public/scripts/api/updateObject.js
Normal file
@ -0,0 +1,13 @@
|
||||
import { serverPath } from "../variables.js";
|
||||
|
||||
export async function updateObject(id, objectJSON) {
|
||||
const response = await fetch(`${serverPath}/products/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: objectJSON,
|
||||
});
|
||||
|
||||
return response.json();
|
||||
}
|
@ -0,0 +1,6 @@
|
||||
export function configurateObject(id, name, categoryId, price, rating, formattedInfo, photo = '') {
|
||||
const obj = { name, categoryId, price, rating, info: formattedInfo, photo };
|
||||
|
||||
if (id !== null) obj["id"] = id;
|
||||
return obj;
|
||||
};
|
@ -0,0 +1,10 @@
|
||||
export function convertInfoToArray(infoArray) {
|
||||
const formattedInfo = [];
|
||||
|
||||
for (const infoString of infoArray) {
|
||||
const t = infoString.split(": ");
|
||||
formattedInfo.push({ name: t[0], value: t[1] });
|
||||
}
|
||||
|
||||
return formattedInfo;
|
||||
}
|
@ -0,0 +1,8 @@
|
||||
export function convertInfoToString(infoArray) {
|
||||
let info = "";
|
||||
for (const infoObject of infoArray) {
|
||||
info += `${infoObject.name}: ${infoObject.value}\n`;
|
||||
}
|
||||
|
||||
return info.slice(0, -1);
|
||||
}
|
@ -0,0 +1,18 @@
|
||||
import { form } from "../variables.js";
|
||||
import { convertInfoToArray } from "./convertInfoToArray.js";
|
||||
|
||||
export function validateModalForm(isEditMode) {
|
||||
form.root.querySelectorAll('input').forEach(input => {
|
||||
if (!input.checkValidity()) return false;
|
||||
});
|
||||
|
||||
const infoArray = form.fieldInfo.value.split("\n");
|
||||
const formattedInfo = convertInfoToArray(infoArray);
|
||||
|
||||
if (!formattedInfo.length) return false;
|
||||
|
||||
if (isEditMode) return true;
|
||||
|
||||
if (form.fieldPhoto && form.fieldPhoto.files.length === 0) return false;
|
||||
return true;
|
||||
}
|
@ -0,0 +1,9 @@
|
||||
export function getBase64Image(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = error => reject(error);
|
||||
});
|
||||
}
|
@ -0,0 +1,3 @@
|
||||
export function getHTMLCategorySelectOption(text, value) {
|
||||
return `<option value="${value}">${text} (id: ${value})</option>`
|
||||
}
|
@ -0,0 +1,15 @@
|
||||
export function getHTMLRow(object, categoryName) {
|
||||
return `
|
||||
<tr data-id="${object.id}">
|
||||
<td>${object.id}</td>
|
||||
<td>${object.name}</td>
|
||||
<td>${categoryName}</td>
|
||||
<td>${object.price}</td>
|
||||
<td>${object.rating}</td>
|
||||
<td>${object.info}</td>
|
||||
<td><img src="${object.photo}" alt="${object.name}" /></td>
|
||||
<td><button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modal" data-type="edit" data-bs-whatever="${object.id}">Edit</button></td>
|
||||
<td><button type="button" class="btn btn-danger" id="delete-btn" onclick="deleteObject(this)">Delete</button></td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
11
semestr_1/Lab. 3/Project/public/scripts/helpers/resetForm.js
Normal file
@ -0,0 +1,11 @@
|
||||
import { form } from "../variables.js";
|
||||
|
||||
export function resetForm() {
|
||||
console.log(form.root);
|
||||
form.root.reset();
|
||||
|
||||
const previewImage = form.fieldPhotoPreview;
|
||||
if (previewImage) {
|
||||
previewImage.src = '/img/placeholder.png';
|
||||
}
|
||||
}
|
20
semestr_1/Lab. 3/Project/public/scripts/variables.js
Normal file
@ -0,0 +1,20 @@
|
||||
export const form = {
|
||||
root: document.querySelector("#modal-form"),
|
||||
fieldName: document.querySelector("#object-name"),
|
||||
fieldPrice: document.querySelector("#object-price"),
|
||||
fieldRating: document.querySelector("#object-rating"),
|
||||
fieldInfo: document.querySelector("#object-info"),
|
||||
fieldPhotoPreview: document.querySelector("#object-preview-photo"),
|
||||
fieldPhoto: document.querySelector("#object-photo"),
|
||||
fieldCategorySelect: document.querySelector("#object-category")
|
||||
};
|
||||
|
||||
export const modal = {
|
||||
root: document.querySelector("#modal"),
|
||||
submitButton: document.querySelector("#submit-button"),
|
||||
title: document.querySelector("#modal-title")
|
||||
};
|
||||
|
||||
export const serverPath = "http://localhost:3000";
|
||||
|
||||
export const parent = document.querySelector('#parent');
|
6
semestr_1/Lab. 3/Project/public/styles/bootstrap.min.css
vendored
Normal file
15
semestr_1/Lab. 3/Project/public/styles/fonts.css
Normal file
@ -0,0 +1,15 @@
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/montserrat-regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/montserrat-700.woff2') format('woff2');
|
||||
}
|
6
semestr_1/Lab. 3/Project/public/styles/grid.css
Normal file
24
semestr_1/Lab. 3/Project/public/styles/index.css
Normal file
@ -0,0 +1,24 @@
|
||||
@import "fonts.css";
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
min-width: 320px;
|
||||
background-color: #eaeaea !important;
|
||||
font-family: "Montserrat", sans-serif !important;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1110px;
|
||||
}
|
||||
|
||||
.price-color {
|
||||
color: #FFA542;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
78
semestr_1/Lab. 3/Project/red.html
Normal file
@ -0,0 +1,78 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header>
|
||||
<div class="container py-4">
|
||||
<nav class="navbar navbar-expand-sm p-0">
|
||||
<a href="index.html" class="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form class="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input class="form-control" type="search" placeholder="Поиск товара..." aria-label="Search">
|
||||
</form>
|
||||
<li class="nav-item">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="cart.html"><img src="/img/icon-cart.svg" alt="Корзина"></a>
|
||||
<a href="favourites.html"><img src="/img/icon-heart.svg" alt="Избранное"></a>
|
||||
<a href="register.html" class="btn btn-sm btn-danger">Выйти</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mt-2 mb-4">
|
||||
<div class="container">
|
||||
<strong class="d-block fw-bold fs-4 mb-4">Редактировать товар</strong>
|
||||
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Название товара</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="form-label">Характеристики (через точку с запятой)</label>
|
||||
<textarea class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04"
|
||||
aria-label="Upload">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Обновить</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<div class="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<a href="index.html" class="fs-4 text-decoration-none text-black fw-bold">QPICK</a>
|
||||
|
||||
<ul class="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><a class="text-black text-decoration-none" href="index.html">Каталог</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="cart.html">Корзина</a></li>
|
||||
<li><a class="text-black text-decoration-none" href="favourites.html">Любимое</a></li>
|
||||
</ul>
|
||||
|
||||
<a class="text-black ms-sm-auto text-decoration-none" href="conditions.html">Условия сервиса</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
28
semestr_1/Lab. 3/Project/register.html
Normal file
@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" class="h-100">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<link href="/styles/grid.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="d-flex align-items-center justify-content-center flex-column h-100 form-max-width mx-auto container">
|
||||
<h1 class="fw-bold">Регистрация</h1>
|
||||
<form action="#" class="d-flex flex-column gap-2 mt-3 w-100">
|
||||
<input class="form-control w-100" type="text" placeholder="Ваш логин" />
|
||||
<input class="form-control w-100" type="password" placeholder="Ваш пароль" />
|
||||
<button class="btn btn-primary width-max-content mx-auto px-4">Зарегестрироваться</button>
|
||||
</form>
|
||||
<p class="m-0 mt-4">Нажмите для <a href="auth.html" class="text-decoration-none">авторизации</a></p>
|
||||
</body>
|
||||
|
||||
</html>
|
186
semestr_1/Lab. 3/Project/server/db.json
Normal file
@ -0,0 +1,186 @@
|
||||
{
|
||||
"products": [
|
||||
{
|
||||
"id": 2,
|
||||
"categoryId": 1,
|
||||
"name": "Товар 2",
|
||||
"photo": "cGF5bG9hZA==",
|
||||
"info": [
|
||||
{
|
||||
"name": "Характеристика 3",
|
||||
"value": "Значение 3"
|
||||
},
|
||||
{
|
||||
"name": "Характеристика 4",
|
||||
"value": "Значение 4"
|
||||
}
|
||||
],
|
||||
"price": 29.99,
|
||||
"rating": 4.2
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"categoryId": 2,
|
||||
"name": "Товар 3",
|
||||
"photo": "bGFyZ2UgYnl0ZXM=",
|
||||
"info": [
|
||||
{
|
||||
"name": "Характеристика 5",
|
||||
"value": "Значение 5"
|
||||
},
|
||||
{
|
||||
"name": "Характеристика 6",
|
||||
"value": "Значение 6"
|
||||
}
|
||||
],
|
||||
"price": 24.99,
|
||||
"rating": 4.7
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"categoryId": 2,
|
||||
"name": "Товар 4",
|
||||
"photo": "YmFzZTY0IGVuY29kaW5n",
|
||||
"info": [
|
||||
{
|
||||
"name": "Характеристика 7",
|
||||
"value": "Значение 7"
|
||||
},
|
||||
{
|
||||
"name": "Характеристика 8",
|
||||
"value": "Значение 8"
|
||||
}
|
||||
],
|
||||
"price": 14.99,
|
||||
"rating": 3.8
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Товар 5",
|
||||
"categoryId": 4,
|
||||
"photo": "c2VjdXJpdHkgaW1hZ2U=",
|
||||
"info": [
|
||||
{
|
||||
"name": "Характеристика 9",
|
||||
"value": "Значение 9"
|
||||
},
|
||||
{
|
||||
"name": "Характеристика 10",
|
||||
"value": "Значение 10"
|
||||
}
|
||||
],
|
||||
"price": 34.99,
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"categoryId": 5,
|
||||
"name": "nn2",
|
||||
"price": "22",
|
||||
"rating": "2",
|
||||
"info": [
|
||||
{
|
||||
"name": "info",
|
||||
"value": "value"
|
||||
}
|
||||
],
|
||||
"photo": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2FydCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMCAxLjVBLjUuNSAwIDAgMSAuNSAxSDJhLjUuNSAwIDAgMSAuNDg1LjM3OUwyLjg5IDNIMTQuNWEuNS41IDAgMCAxIC40OTEuNTkybC0xLjUgOEEuNS41IDAgMCAxIDEzIDEySDRhLjUuNSAwIDAgMS0uNDkxLS40MDhMMi4wMSAzLjYwNyAxLjYxIDJILjVhLjUuNSAwIDAgMS0uNS0uNXpNMy4xMDIgNGwxLjMxMyA3aDguMTdsMS4zMTMtN0gzLjEwMnpNNSAxMmEyIDIgMCAxIDAgMCA0IDIgMiAwIDAgMCAwLTR6bTcgMGEyIDIgMCAxIDAgMCA0IDIgMiAwIDAgMCAwLTR6bS03IDFhMSAxIDAgMSAxIDAgMiAxIDEgMCAwIDEgMC0yem03IDBhMSAxIDAgMSAxIDAgMiAxIDEgMCAwIDEgMC0yeiIvPgo8L3N2Zz4="
|
||||
},
|
||||
{
|
||||
"name": "asd",
|
||||
"categoryId": 1,
|
||||
"price": "22",
|
||||
"rating": "2",
|
||||
"info": [
|
||||
{
|
||||
"name": "info",
|
||||
"value": "value"
|
||||
}
|
||||
],
|
||||
"photo": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjVweCIgaGVpZ2h0PSIyNXB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iIzgzODM4MyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIycHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE5LjMgNS43MTAwMkMxOC44NDEgNS4yNDYwMSAxOC4yOTQzIDQuODc3OTcgMTcuNjkxNyA0LjYyNzMxQzE3LjA4OTEgNC4zNzY2NiAxNi40NDI2IDQuMjQ4NCAxNS43OSA0LjI1MDAyQzE1LjEzNzMgNC4yNDg0IDE0LjQ5MDkgNC4zNzY2NiAxMy44ODgzIDQuNjI3MzFDMTMuMjg1NyA0Ljg3Nzk3IDEyLjczOSA1LjI0NjAxIDEyLjI4IDUuNzEwMDJMMTIgNi4wMDAwMkwxMS43MiA1LjcyMDAxQzEwLjc5MTcgNC43OTE4MiA5LjUzMjczIDQuMjcwMzcgOC4yMiA0LjI3MDM3QzYuOTA3MjYgNC4yNzAzNyA1LjY0ODI5IDQuNzkxODIgNC43MiA1LjcyMDAxQzMuODAzODYgNi42NTQ2NiAzLjI5MDcxIDcuOTExMjUgMy4yOTA3MSA5LjIyMDAyQzMuMjkwNzEgMTAuNTI4OCAzLjgwMzg2IDExLjc4NTQgNC43MiAxMi43MkwxMS40OSAxOS41MUMxMS42MzA2IDE5LjY1MDUgMTEuODIxMiAxOS43Mjk0IDEyLjAyIDE5LjcyOTRDMTIuMjE4NyAxOS43Mjk0IDEyLjQwOTQgMTkuNjUwNSAxMi41NSAxOS41MUwxOS4zMiAxMi43MkMyMC4yMzY1IDExLjc4MjMgMjAuNzQ3OSAxMC41MjIxIDIwLjc0NDIgOS4yMTA5MkMyMC43NDA1IDcuODk5NzMgMjAuMjIxOCA2LjY0MjQ4IDE5LjMgNS43MTAwMloiLz4KPC9zdmc+",
|
||||
"id": 10
|
||||
},
|
||||
{
|
||||
"name": "my new object",
|
||||
"categoryId": 4,
|
||||
"price": 222,
|
||||
"rating": 2,
|
||||
"info": [
|
||||
{
|
||||
"name": "info",
|
||||
"value": "value"
|
||||
},
|
||||
{
|
||||
"name": "info2",
|
||||
"value": "value2"
|
||||
}
|
||||
],
|
||||
"photo": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktdHJhc2gzLWZpbGwiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTExIDEuNXYxaDMuNWEuNS41IDAgMCAxIDAgMWgtLjUzOGwtLjg1MyAxMC42NkEyIDIgMCAwIDEgMTEuMTE1IDE2aC02LjIzYTIgMiAwIDAgMS0xLjk5NC0xLjg0TDIuMDM4IDMuNUgxLjVhLjUuNSAwIDAgMSAwLTFINXYtMUExLjUgMS41IDAgMCAxIDYuNSAwaDNBMS41IDEuNSAwIDAgMSAxMSAxLjVabS01IDB2MWg0di0xYS41LjUgMCAwIDAtLjUtLjVoLTNhLjUuNSAwIDAgMC0uNS41Wk00LjUgNS4wMjlsLjUgOC41YS41LjUgMCAxIDAgLjk5OC0uMDZsLS41LTguNWEuNS41IDAgMSAwLS45OTguMDZabTYuNTMtLjUyOGEuNS41IDAgMCAwLS41MjguNDdsLS41IDguNWEuNS41IDAgMCAwIC45OTguMDU4bC41LTguNWEuNS41IDAgMCAwLS40Ny0uNTI4Wk04IDQuNWEuNS41IDAgMCAwLS41LjV2OC41YS41LjUgMCAwIDAgMSAwVjVhLjUuNSAwIDAgMC0uNS0uNVoiLz4KPC9zdmc+",
|
||||
"id": 11
|
||||
},
|
||||
{
|
||||
"name": "mmm",
|
||||
"categoryId": 2,
|
||||
"price": "222",
|
||||
"rating": "2",
|
||||
"info": [
|
||||
{
|
||||
"name": "info",
|
||||
"value": "value"
|
||||
}
|
||||
],
|
||||
"photo": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2FydCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMCAxLjVBLjUuNSAwIDAgMSAuNSAxSDJhLjUuNSAwIDAgMSAuNDg1LjM3OUwyLjg5IDNIMTQuNWEuNS41IDAgMCAxIC40OTEuNTkybC0xLjUgOEEuNS41IDAgMCAxIDEzIDEySDRhLjUuNSAwIDAgMS0uNDkxLS40MDhMMi4wMSAzLjYwNyAxLjYxIDJILjVhLjUuNSAwIDAgMS0uNS0uNXpNMy4xMDIgNGwxLjMxMyA3aDguMTdsMS4zMTMtN0gzLjEwMnpNNSAxMmEyIDIgMCAxIDAgMCA0IDIgMiAwIDAgMCAwLTR6bTcgMGEyIDIgMCAxIDAgMCA0IDIgMiAwIDAgMCAwLTR6bS03IDFhMSAxIDAgMSAxIDAgMiAxIDEgMCAwIDEgMC0yem03IDBhMSAxIDAgMSAxIDAgMiAxIDEgMCAwIDEgMC0yeiIvPgo8L3N2Zz4=",
|
||||
"id": 12
|
||||
},
|
||||
{
|
||||
"name": "ustal",
|
||||
"categoryId": 2,
|
||||
"price": 222,
|
||||
"rating": 2,
|
||||
"info": [
|
||||
{
|
||||
"name": "info",
|
||||
"value": "value"
|
||||
}
|
||||
],
|
||||
"photo": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjVweCIgaGVpZ2h0PSIyNXB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iIzgzODM4MyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIycHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE5LjMgNS43MTAwMkMxOC44NDEgNS4yNDYwMSAxOC4yOTQzIDQuODc3OTcgMTcuNjkxNyA0LjYyNzMxQzE3LjA4OTEgNC4zNzY2NiAxNi40NDI2IDQuMjQ4NCAxNS43OSA0LjI1MDAyQzE1LjEzNzMgNC4yNDg0IDE0LjQ5MDkgNC4zNzY2NiAxMy44ODgzIDQuNjI3MzFDMTMuMjg1NyA0Ljg3Nzk3IDEyLjczOSA1LjI0NjAxIDEyLjI4IDUuNzEwMDJMMTIgNi4wMDAwMkwxMS43MiA1LjcyMDAxQzEwLjc5MTcgNC43OTE4MiA5LjUzMjczIDQuMjcwMzcgOC4yMiA0LjI3MDM3QzYuOTA3MjYgNC4yNzAzNyA1LjY0ODI5IDQuNzkxODIgNC43MiA1LjcyMDAxQzMuODAzODYgNi42NTQ2NiAzLjI5MDcxIDcuOTExMjUgMy4yOTA3MSA5LjIyMDAyQzMuMjkwNzEgMTAuNTI4OCAzLjgwMzg2IDExLjc4NTQgNC43MiAxMi43MkwxMS40OSAxOS41MUMxMS42MzA2IDE5LjY1MDUgMTEuODIxMiAxOS43Mjk0IDEyLjAyIDE5LjcyOTRDMTIuMjE4NyAxOS43Mjk0IDEyLjQwOTQgMTkuNjUwNSAxMi41NSAxOS41MUwxOS4zMiAxMi43MkMyMC4yMzY1IDExLjc4MjMgMjAuNzQ3OSAxMC41MjIxIDIwLjc0NDIgOS4yMTA5MkMyMC43NDA1IDcuODk5NzMgMjAuMjIxOCA2LjY0MjQ4IDE5LjMgNS43MTAwMloiLz4KPC9zdmc+",
|
||||
"id": 13
|
||||
},
|
||||
{
|
||||
"name": "ppp",
|
||||
"categoryId": 5,
|
||||
"price": 222,
|
||||
"rating": 2,
|
||||
"info": [
|
||||
{
|
||||
"name": "info",
|
||||
"value": "value"
|
||||
}
|
||||
],
|
||||
"photo": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2FydCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMCAxLjVBLjUuNSAwIDAgMSAuNSAxSDJhLjUuNSAwIDAgMSAuNDg1LjM3OUwyLjg5IDNIMTQuNWEuNS41IDAgMCAxIC40OTEuNTkybC0xLjUgOEEuNS41IDAgMCAxIDEzIDEySDRhLjUuNSAwIDAgMS0uNDkxLS40MDhMMi4wMSAzLjYwNyAxLjYxIDJILjVhLjUuNSAwIDAgMS0uNS0uNXpNMy4xMDIgNGwxLjMxMyA3aDguMTdsMS4zMTMtN0gzLjEwMnpNNSAxMmEyIDIgMCAxIDAgMCA0IDIgMiAwIDAgMCAwLTR6bTcgMGEyIDIgMCAxIDAgMCA0IDIgMiAwIDAgMCAwLTR6bS03IDFhMSAxIDAgMSAxIDAgMiAxIDEgMCAwIDEgMC0yem03IDBhMSAxIDAgMSAxIDAgMiAxIDEgMCAwIDEgMC0yeiIvPgo8L3N2Zz4=",
|
||||
"id": 14
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Смартфоны"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Ноутбуки"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Планшеты"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Фото и видео"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Аксессуары"
|
||||
}
|
||||
]
|
||||
}
|
23
semestr_1/Lab. 4/Project/.eslintrc.cjs
Normal file
@ -0,0 +1,23 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
|
||||
'react/prop-types': 'off',
|
||||
},
|
||||
}
|
21
semestr_1/Lab. 4/Project/.eslintrc.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true,
|
||||
"node": true
|
||||
},
|
||||
"extends": "airbnb-base",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 12,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"quotes": "off",
|
||||
"indent": "off",
|
||||
"no-console": "off",
|
||||
"no-use-before-define": "off",
|
||||
"no-alert": "off",
|
||||
"no-restricted-globals": "off",
|
||||
"quote-props": "off"
|
||||
}
|
||||
}
|
24
semestr_1/Lab. 4/Project/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
8
semestr_1/Lab. 4/Project/README.md
Normal file
@ -0,0 +1,8 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
19
semestr_1/Lab. 4/Project/index.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Lab. 4</title>
|
||||
|
||||
<!-- <link href="/styles/grid.css" rel="stylesheet"> -->
|
||||
|
||||
<!-- <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> -->
|
||||
<!-- <link rel="stylesheet" href="/styles/index.css"> -->
|
||||
<!-- <script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
4173
semestr_1/Lab. 4/Project/package-lock.json
generated
Normal file
32
semestr_1/Lab. 4/Project/package.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "project",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"bootstrap": "^5.3.2",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"path": "^0.12.7",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.19.0",
|
||||
"url": "^0.11.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.37",
|
||||
"@types/react-dom": "^18.2.15",
|
||||
"@vitejs/plugin-react": "^4.2.0",
|
||||
"eslint": "^8.53.0",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.4",
|
||||
"vite": "^5.0.0"
|
||||
}
|
||||
}
|
172
semestr_1/Lab. 4/Project/server/db.json
Normal file
@ -0,0 +1,172 @@
|
||||
{
|
||||
"products": [
|
||||
{
|
||||
"id": 2,
|
||||
"categoryId": 1,
|
||||
"name": "Товар 2",
|
||||
"photo": "cGF5bG9hZA==",
|
||||
"info": [
|
||||
{
|
||||
"name": "Характеристика 3",
|
||||
"value": "Значение 3"
|
||||
},
|
||||
{
|
||||
"name": "Характеристика 4",
|
||||
"value": "Значение 4"
|
||||
}
|
||||
],
|
||||
"price": 29.99,
|
||||
"rating": 4.2
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"categoryId": 2,
|
||||
"name": "Товар 3",
|
||||
"photo": "bGFyZ2UgYnl0ZXM=",
|
||||
"info": [
|
||||
{
|
||||
"name": "Характеристика 5",
|
||||
"value": "Значение 5"
|
||||
},
|
||||
{
|
||||
"name": "Характеристика 6",
|
||||
"value": "Значение 6"
|
||||
}
|
||||
],
|
||||
"price": 24.99,
|
||||
"rating": 4.7
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"categoryId": 2,
|
||||
"name": "Товар 4",
|
||||
"photo": "YmFzZTY0IGVuY29kaW5n",
|
||||
"info": [
|
||||
{
|
||||
"name": "Характеристика 7",
|
||||
"value": "Значение 7"
|
||||
},
|
||||
{
|
||||
"name": "Характеристика 8",
|
||||
"value": "Значение 8"
|
||||
}
|
||||
],
|
||||
"price": 14.99,
|
||||
"rating": 3.8
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Товар 5",
|
||||
"categoryId": 4,
|
||||
"photo": "c2VjdXJpdHkgaW1hZ2U=",
|
||||
"info": [
|
||||
{
|
||||
"name": "Характеристика 9",
|
||||
"value": "Значение 9"
|
||||
},
|
||||
{
|
||||
"name": "Характеристика 10",
|
||||
"value": "Значение 10"
|
||||
}
|
||||
],
|
||||
"price": 34.99,
|
||||
"rating": 4
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"categoryId": 5,
|
||||
"name": "nn2",
|
||||
"price": "22",
|
||||
"rating": "2",
|
||||
"info": [
|
||||
{
|
||||
"name": "info",
|
||||
"value": "value"
|
||||
}
|
||||
],
|
||||
"photo": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2FydCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMCAxLjVBLjUuNSAwIDAgMSAuNSAxSDJhLjUuNSAwIDAgMSAuNDg1LjM3OUwyLjg5IDNIMTQuNWEuNS41IDAgMCAxIC40OTEuNTkybC0xLjUgOEEuNS41IDAgMCAxIDEzIDEySDRhLjUuNSAwIDAgMS0uNDkxLS40MDhMMi4wMSAzLjYwNyAxLjYxIDJILjVhLjUuNSAwIDAgMS0uNS0uNXpNMy4xMDIgNGwxLjMxMyA3aDguMTdsMS4zMTMtN0gzLjEwMnpNNSAxMmEyIDIgMCAxIDAgMCA0IDIgMiAwIDAgMCAwLTR6bTcgMGEyIDIgMCAxIDAgMCA0IDIgMiAwIDAgMCAwLTR6bS03IDFhMSAxIDAgMSAxIDAgMiAxIDEgMCAwIDEgMC0yem03IDBhMSAxIDAgMSAxIDAgMiAxIDEgMCAwIDEgMC0yeiIvPgo8L3N2Zz4="
|
||||
},
|
||||
{
|
||||
"name": "asd",
|
||||
"categoryId": 1,
|
||||
"price": "22",
|
||||
"rating": "2",
|
||||
"info": [
|
||||
{
|
||||
"name": "info",
|
||||
"value": "value"
|
||||
}
|
||||
],
|
||||
"photo": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjVweCIgaGVpZ2h0PSIyNXB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iIzgzODM4MyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIycHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE5LjMgNS43MTAwMkMxOC44NDEgNS4yNDYwMSAxOC4yOTQzIDQuODc3OTcgMTcuNjkxNyA0LjYyNzMxQzE3LjA4OTEgNC4zNzY2NiAxNi40NDI2IDQuMjQ4NCAxNS43OSA0LjI1MDAyQzE1LjEzNzMgNC4yNDg0IDE0LjQ5MDkgNC4zNzY2NiAxMy44ODgzIDQuNjI3MzFDMTMuMjg1NyA0Ljg3Nzk3IDEyLjczOSA1LjI0NjAxIDEyLjI4IDUuNzEwMDJMMTIgNi4wMDAwMkwxMS43MiA1LjcyMDAxQzEwLjc5MTcgNC43OTE4MiA5LjUzMjczIDQuMjcwMzcgOC4yMiA0LjI3MDM3QzYuOTA3MjYgNC4yNzAzNyA1LjY0ODI5IDQuNzkxODIgNC43MiA1LjcyMDAxQzMuODAzODYgNi42NTQ2NiAzLjI5MDcxIDcuOTExMjUgMy4yOTA3MSA5LjIyMDAyQzMuMjkwNzEgMTAuNTI4OCAzLjgwMzg2IDExLjc4NTQgNC43MiAxMi43MkwxMS40OSAxOS41MUMxMS42MzA2IDE5LjY1MDUgMTEuODIxMiAxOS43Mjk0IDEyLjAyIDE5LjcyOTRDMTIuMjE4NyAxOS43Mjk0IDEyLjQwOTQgMTkuNjUwNSAxMi41NSAxOS41MUwxOS4zMiAxMi43MkMyMC4yMzY1IDExLjc4MjMgMjAuNzQ3OSAxMC41MjIxIDIwLjc0NDIgOS4yMTA5MkMyMC43NDA1IDcuODk5NzMgMjAuMjIxOCA2LjY0MjQ4IDE5LjMgNS43MTAwMloiLz4KPC9zdmc+",
|
||||
"id": 10
|
||||
},
|
||||
{
|
||||
"name": "my new object",
|
||||
"categoryId": 4,
|
||||
"price": 222,
|
||||
"rating": 2,
|
||||
"info": [
|
||||
{
|
||||
"name": "info",
|
||||
"value": "value"
|
||||
},
|
||||
{
|
||||
"name": "info2",
|
||||
"value": "value2"
|
||||
}
|
||||
],
|
||||
"photo": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktdHJhc2gzLWZpbGwiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTExIDEuNXYxaDMuNWEuNS41IDAgMCAxIDAgMWgtLjUzOGwtLjg1MyAxMC42NkEyIDIgMCAwIDEgMTEuMTE1IDE2aC02LjIzYTIgMiAwIDAgMS0xLjk5NC0xLjg0TDIuMDM4IDMuNUgxLjVhLjUuNSAwIDAgMSAwLTFINXYtMUExLjUgMS41IDAgMCAxIDYuNSAwaDNBMS41IDEuNSAwIDAgMSAxMSAxLjVabS01IDB2MWg0di0xYS41LjUgMCAwIDAtLjUtLjVoLTNhLjUuNSAwIDAgMC0uNS41Wk00LjUgNS4wMjlsLjUgOC41YS41LjUgMCAxIDAgLjk5OC0uMDZsLS41LTguNWEuNS41IDAgMSAwLS45OTguMDZabTYuNTMtLjUyOGEuNS41IDAgMCAwLS41MjguNDdsLS41IDguNWEuNS41IDAgMCAwIC45OTguMDU4bC41LTguNWEuNS41IDAgMCAwLS40Ny0uNTI4Wk04IDQuNWEuNS41IDAgMCAwLS41LjV2OC41YS41LjUgMCAwIDAgMSAwVjVhLjUuNSAwIDAgMC0uNS0uNVoiLz4KPC9zdmc+",
|
||||
"id": 11
|
||||
},
|
||||
{
|
||||
"name": "mmm",
|
||||
"categoryId": 2,
|
||||
"price": "222",
|
||||
"rating": "2",
|
||||
"info": [
|
||||
{
|
||||
"name": "info",
|
||||
"value": "value"
|
||||
}
|
||||
],
|
||||
"photo": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2FydCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMCAxLjVBLjUuNSAwIDAgMSAuNSAxSDJhLjUuNSAwIDAgMSAuNDg1LjM3OUwyLjg5IDNIMTQuNWEuNS41IDAgMCAxIC40OTEuNTkybC0xLjUgOEEuNS41IDAgMCAxIDEzIDEySDRhLjUuNSAwIDAgMS0uNDkxLS40MDhMMi4wMSAzLjYwNyAxLjYxIDJILjVhLjUuNSAwIDAgMS0uNS0uNXpNMy4xMDIgNGwxLjMxMyA3aDguMTdsMS4zMTMtN0gzLjEwMnpNNSAxMmEyIDIgMCAxIDAgMCA0IDIgMiAwIDAgMCAwLTR6bTcgMGEyIDIgMCAxIDAgMCA0IDIgMiAwIDAgMCAwLTR6bS03IDFhMSAxIDAgMSAxIDAgMiAxIDEgMCAwIDEgMC0yem03IDBhMSAxIDAgMSAxIDAgMiAxIDEgMCAwIDEgMC0yeiIvPgo8L3N2Zz4=",
|
||||
"id": 12
|
||||
},
|
||||
{
|
||||
"name": "ustal",
|
||||
"categoryId": 2,
|
||||
"price": 222,
|
||||
"rating": 2,
|
||||
"info": [
|
||||
{
|
||||
"name": "info",
|
||||
"value": "value"
|
||||
}
|
||||
],
|
||||
"photo": "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjVweCIgaGVpZ2h0PSIyNXB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iIzgzODM4MyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIycHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE5LjMgNS43MTAwMkMxOC44NDEgNS4yNDYwMSAxOC4yOTQzIDQuODc3OTcgMTcuNjkxNyA0LjYyNzMxQzE3LjA4OTEgNC4zNzY2NiAxNi40NDI2IDQuMjQ4NCAxNS43OSA0LjI1MDAyQzE1LjEzNzMgNC4yNDg0IDE0LjQ5MDkgNC4zNzY2NiAxMy44ODgzIDQuNjI3MzFDMTMuMjg1NyA0Ljg3Nzk3IDEyLjczOSA1LjI0NjAxIDEyLjI4IDUuNzEwMDJMMTIgNi4wMDAwMkwxMS43MiA1LjcyMDAxQzEwLjc5MTcgNC43OTE4MiA5LjUzMjczIDQuMjcwMzcgOC4yMiA0LjI3MDM3QzYuOTA3MjYgNC4yNzAzNyA1LjY0ODI5IDQuNzkxODIgNC43MiA1LjcyMDAxQzMuODAzODYgNi42NTQ2NiAzLjI5MDcxIDcuOTExMjUgMy4yOTA3MSA5LjIyMDAyQzMuMjkwNzEgMTAuNTI4OCAzLjgwMzg2IDExLjc4NTQgNC43MiAxMi43MkwxMS40OSAxOS41MUMxMS42MzA2IDE5LjY1MDUgMTEuODIxMiAxOS43Mjk0IDEyLjAyIDE5LjcyOTRDMTIuMjE4NyAxOS43Mjk0IDEyLjQwOTQgMTkuNjUwNSAxMi41NSAxOS41MUwxOS4zMiAxMi43MkMyMC4yMzY1IDExLjc4MjMgMjAuNzQ3OSAxMC41MjIxIDIwLjc0NDIgOS4yMTA5MkMyMC43NDA1IDcuODk5NzMgMjAuMjIxOCA2LjY0MjQ4IDE5LjMgNS43MTAwMloiLz4KPC9zdmc+",
|
||||
"id": 13
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Смартфоны"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Ноутбуки"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Планшеты"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Фото и видео"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Аксессуары"
|
||||
}
|
||||
]
|
||||
}
|
11
semestr_1/Lab. 4/Project/src/App.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
import "bootstrap/dist/js/bootstrap.min.js";
|
||||
import "./assets/styles/index.css";
|
||||
import "./assets/styles/grid.css";
|
||||
import Navigation from "./components/navigation/Navigation";
|
||||
|
||||
function App() {
|
||||
return <Navigation />;
|
||||
}
|
||||
|
||||
export default App;
|
13
semestr_1/Lab. 4/Project/src/api/createObject.js
Normal file
@ -0,0 +1,13 @@
|
||||
import { serverPath } from "../enum/Variables";
|
||||
|
||||
export async function createObject(objectJSON) {
|
||||
const response = await fetch(`${serverPath}/products`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: objectJSON,
|
||||
});
|
||||
|
||||
return response.json();
|
||||
}
|
5
semestr_1/Lab. 4/Project/src/api/deleteObject.js
Normal file
@ -0,0 +1,5 @@
|
||||
import { serverPath } from "../enum/Variables";
|
||||
|
||||
export async function deleteObject(id) {
|
||||
await fetch(`${serverPath}/products/${id}`, { method: 'DELETE' });
|
||||
}
|
6
semestr_1/Lab. 4/Project/src/api/fetchAllCategoeies.js
Normal file
@ -0,0 +1,6 @@
|
||||
import { serverPath } from "../enum/Variables";
|
||||
|
||||
export async function fetchAllCategories() {
|
||||
const response = await fetch(`${serverPath}/categories`);
|
||||
return response.json();
|
||||
}
|
6
semestr_1/Lab. 4/Project/src/api/fetchAllProducts.js
Normal file
@ -0,0 +1,6 @@
|
||||
import { serverPath } from "../enum/Variables";
|
||||
|
||||
export async function fetchAllProducts() {
|
||||
const response = await fetch(`${serverPath}/products`);
|
||||
return response.json();
|
||||
}
|
13
semestr_1/Lab. 4/Project/src/api/updateObject.js
Normal file
@ -0,0 +1,13 @@
|
||||
import { serverPath } from "../enum/Variables";
|
||||
|
||||
export async function updateObject(object) {
|
||||
const response = await fetch(`${serverPath}/products/${object.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(object),
|
||||
});
|
||||
|
||||
return response.json();
|
||||
}
|
BIN
semestr_1/Lab. 4/Project/src/assets/fonts/montserrat-700.woff2
Normal file
BIN
semestr_1/Lab. 4/Project/src/assets/img/1.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
semestr_1/Lab. 4/Project/src/assets/img/big-picture-item.png
Normal file
After Width: | Height: | Size: 32 KiB |
33
semestr_1/Lab. 4/Project/src/assets/img/empty-cart.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg width="410" height="315" viewBox="0 0 410 315" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1_293)">
|
||||
<path d="M29.2111 290.191C37.9311 306.42 56.4381 313.388 56.4381 313.388C56.4381 313.388 60.8071 294.041 52.0871 277.811C43.3671 261.581 24.8602 254.614 24.8602 254.614C24.8602 254.614 20.4911 273.961 29.2111 290.191Z" fill="#FFA542"/>
|
||||
<path d="M35.2047 284.851C50.9479 294.357 57.0111 313.238 57.0111 313.238C57.0111 313.238 37.5496 316.707 21.8064 307.201C6.0632 297.695 0 278.814 0 278.814C0 278.814 19.4616 275.345 35.2047 284.851Z" fill="#FFCE7F"/>
|
||||
<path d="M390.976 13.5813H292.749V14.9896H390.976V13.5813Z" fill="#F2F2F2"/>
|
||||
<path d="M320.814 0.90686H319.41V13.9335H320.814V0.90686Z" fill="#F2F2F2"/>
|
||||
<path d="M363.612 0.90686H362.209V13.9335H363.612V0.90686Z" fill="#F2F2F2"/>
|
||||
<path d="M421.847 183.28H323.62V184.688H421.847V183.28Z" fill="#F2F2F2"/>
|
||||
<path d="M351.685 170.606H350.282V183.632H351.685V170.606Z" fill="#F2F2F2"/>
|
||||
<path d="M394.484 170.606H393.08V183.632H394.484V170.606Z" fill="#F2F2F2"/>
|
||||
<path d="M254.028 282.759H87.8945V281.56H252.832V223.383H101.861L94.5269 208.049L95.6046 207.53L102.613 222.184H254.028V282.759Z" fill="#2F2E41"/>
|
||||
<path d="M110.006 312.147C116.937 312.147 122.555 306.508 122.555 299.552C122.555 292.596 116.937 286.957 110.006 286.957C103.075 286.957 97.4561 292.596 97.4561 299.552C97.4561 306.508 103.075 312.147 110.006 312.147Z" fill="#101010"/>
|
||||
<path d="M233.709 312.147C240.64 312.147 246.259 306.508 246.259 299.552C246.259 292.596 240.64 286.957 233.709 286.957C226.778 286.957 221.16 292.596 221.16 299.552C221.16 306.508 226.778 312.147 233.709 312.147Z" fill="#101010"/>
|
||||
<path d="M379.524 39.8585C383.815 39.8585 387.293 36.3678 387.293 32.0617C387.293 27.7557 383.815 24.2649 379.524 24.2649C375.234 24.2649 371.755 27.7557 371.755 32.0617C371.755 36.3678 375.234 39.8585 379.524 39.8585Z" fill="#FFA542"/>
|
||||
<path d="M271.796 203.591H85.0618L44.6569 71.0458H313.407L313.163 71.8256L271.796 203.591ZM85.946 202.392H270.92L311.778 72.2453H46.2723L85.946 202.392Z" fill="#2F2E41"/>
|
||||
<path d="M257.22 196.694H93.2043L57.7151 79.1422H293.768L293.553 79.8344L257.22 196.694Z" fill="#F2F2F2"/>
|
||||
<path d="M316.756 59.2044L315.6 58.8966L323.487 29.0627H369.365V30.2626H324.407L316.756 59.2044Z" fill="#2F2E41"/>
|
||||
<path d="M299.978 111.229H57.7139V112.429H299.978V111.229Z" fill="#2F2E41"/>
|
||||
<path d="M286.104 155.421H71.1853V156.621H286.104V155.421Z" fill="#2F2E41"/>
|
||||
<path d="M179.626 71.6456H178.431V202.992H179.626V71.6456Z" fill="#2F2E41"/>
|
||||
<path d="M233.138 71.6078L224.558 202.951L225.751 203.029L234.33 71.6863L233.138 71.6078Z" fill="#2F2E41"/>
|
||||
<path d="M124.944 71.6063L123.752 71.6843L132.281 203.031L133.474 202.953L124.944 71.6063Z" fill="#2F2E41"/>
|
||||
<path d="M389.763 312.48H0V315H389.763V312.48Z" fill="#090909"/>
|
||||
<path d="M140.498 36.8181H42.2715V38.2264H140.498V36.8181Z" fill="#F2F2F2"/>
|
||||
<path d="M70.3361 24.1437H68.9329V37.1703H70.3361V24.1437Z" fill="#F2F2F2"/>
|
||||
<path d="M113.135 24.1437H111.732V37.1703H113.135V24.1437Z" fill="#F2F2F2"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_293">
|
||||
<rect width="409.879" height="315" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
After Width: | Height: | Size: 3.1 KiB |
8
semestr_1/Lab. 4/Project/src/assets/img/icon-cart.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1_243" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
|
||||
<rect y="0.317139" width="24" height="24.1856" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1_243)">
|
||||
<path d="M7 22.4872C6.45 22.4872 5.97917 22.2899 5.5875 21.8952C5.19583 21.5005 5 21.026 5 20.4717C5 19.9175 5.19583 19.443 5.5875 19.0483C5.97917 18.6536 6.45 18.4563 7 18.4563C7.55 18.4563 8.02083 18.6536 8.4125 19.0483C8.80417 19.443 9 19.9175 9 20.4717C9 21.026 8.80417 21.5005 8.4125 21.8952C8.02083 22.2899 7.55 22.4872 7 22.4872ZM17 22.4872C16.45 22.4872 15.9792 22.2899 15.5875 21.8952C15.1958 21.5005 15 21.026 15 20.4717C15 19.9175 15.1958 19.443 15.5875 19.0483C15.9792 18.6536 16.45 18.4563 17 18.4563C17.55 18.4563 18.0208 18.6536 18.4125 19.0483C18.8042 19.443 19 19.9175 19 20.4717C19 21.026 18.8042 21.5005 18.4125 21.8952C18.0208 22.2899 17.55 22.4872 17 22.4872ZM6.15 6.36346L8.55 11.4021H15.55L18.3 6.36346H6.15ZM5.2 4.34799H19.95C20.3333 4.34799 20.625 4.52014 20.825 4.86445C21.025 5.20876 21.0333 5.55727 20.85 5.90998L17.3 12.3595C17.1167 12.6954 16.8708 12.9557 16.5625 13.1405C16.2542 13.3252 15.9167 13.4176 15.55 13.4176H8.1L7 15.4331H19V17.4485H7C6.25 17.4485 5.68333 17.1168 5.3 16.4534C4.91667 15.79 4.9 15.1307 5.25 14.4757L6.6 12.0068L3 4.34799H1V2.33252H4.25L5.2 4.34799Z" fill="#1C1B1F"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.4 KiB |
8
semestr_1/Lab. 4/Project/src/assets/img/icon-heart.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1_240" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
|
||||
<rect y="0.324829" width="24" height="24.1856" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1_240)">
|
||||
<path d="M12 21.4873L10.55 20.1772C8.86667 18.6488 7.475 17.3304 6.375 16.2219C5.275 15.1134 4.4 14.1182 3.75 13.2365C3.1 12.3547 2.64583 11.5443 2.3875 10.8053C2.12917 10.0663 2 9.31049 2 8.5379C2 6.95911 2.525 5.64066 3.575 4.58254C4.625 3.52442 5.93333 2.99536 7.5 2.99536C8.36667 2.99536 9.19167 3.18011 9.975 3.54962C10.7583 3.91912 11.4333 4.43978 12 5.1116C12.5667 4.43978 13.2417 3.91912 14.025 3.54962C14.8083 3.18011 15.6333 2.99536 16.5 2.99536C18.0667 2.99536 19.375 3.52442 20.425 4.58254C21.475 5.64066 22 6.95911 22 8.5379C22 9.31049 21.8708 10.0663 21.6125 10.8053C21.3542 11.5443 20.9 12.3547 20.25 13.2365C19.6 14.1182 18.725 15.1134 17.625 16.2219C16.525 17.3304 15.1333 18.6488 13.45 20.1772L12 21.4873ZM12 18.7664C13.6 17.322 14.9167 16.0833 15.95 15.0504C16.9833 14.0175 17.8 13.1189 18.4 12.3547C19 11.5905 19.4167 10.9103 19.65 10.314C19.8833 9.71779 20 9.12574 20 8.5379C20 7.53016 19.6667 6.69039 19 6.01856C18.3333 5.34674 17.5 5.01083 16.5 5.01083C15.7167 5.01083 14.9917 5.23337 14.325 5.67845C13.6583 6.12354 13.2 6.69039 12.95 7.379H11.05C10.8 6.69039 10.3417 6.12354 9.675 5.67845C9.00833 5.23337 8.28333 5.01083 7.5 5.01083C6.5 5.01083 5.66667 5.34674 5 6.01856C4.33333 6.69039 4 7.53016 4 8.5379C4 9.12574 4.11667 9.71779 4.35 10.314C4.58333 10.9103 5 11.5905 5.6 12.3547C6.2 13.1189 7.01667 14.0175 8.05 15.0504C9.08333 16.0833 10.4 17.322 12 18.7664Z" fill="#1C1B1F"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.7 KiB |
BIN
semestr_1/Lab. 4/Project/src/assets/img/placeholder.png
Normal file
After Width: | Height: | Size: 474 B |
15
semestr_1/Lab. 4/Project/src/assets/styles/fonts.css
Normal file
@ -0,0 +1,15 @@
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/montserrat-regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/montserrat-700.woff2') format('woff2');
|
||||
}
|
6
semestr_1/Lab. 4/Project/src/assets/styles/grid.css
Normal file
31
semestr_1/Lab. 4/Project/src/assets/styles/index.css
Normal file
@ -0,0 +1,31 @@
|
||||
@import "fonts.css";
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-width: 320px;
|
||||
background-color: #eaeaea !important;
|
||||
font-family: "Montserrat", sans-serif !important;
|
||||
}
|
||||
|
||||
#root {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 1110px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.price-color {
|
||||
color: #FFA542;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
17
semestr_1/Lab. 4/Project/src/components/layout/Layout.jsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { Outlet } from "react-router-dom";
|
||||
import Footer from "./components/Footer";
|
||||
import Header from "./components/Header";
|
||||
|
||||
function Layout() {
|
||||
return (
|
||||
<div className="container">
|
||||
<Header />
|
||||
<main className="mt-2 mb-4">
|
||||
<Outlet />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Layout;
|
@ -0,0 +1,22 @@
|
||||
import PagePaths from '@/enum/PagePaths';
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<div className="d-flex flex-column flex-sm-row p-4 rounded-top-5 bg-white">
|
||||
<Link className="fs-4 text-decoration-none text-black fw-bold" to={PagePaths.HOME}>QPICK</Link>
|
||||
|
||||
<ul className="d-flex mt-2 mt-sm-0 ms-sm-5 flex-column list-unstyled">
|
||||
<li><Link className="text-black text-decoration-none" to={PagePaths.HOME}>Каталог</Link></li>
|
||||
<li><Link className="text-black text-decoration-none" to={PagePaths.CART}>Корзина</Link></li>
|
||||
<li><Link className="text-black text-decoration-none" to={PagePaths.FAVOURITES}>Избранное</Link></li>
|
||||
</ul>
|
||||
|
||||
<Link className="text-black ms-sm-auto text-decoration-none" to={PagePaths.CONDITIONS}>Условия сервиса</Link>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
@ -0,0 +1,35 @@
|
||||
import IconCart from "@/assets/img/icon-cart.svg";
|
||||
import IconHeart from "@/assets/img/icon-heart.svg";
|
||||
import PagePaths from "@/enum/PagePaths";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<header className="py-4">
|
||||
<nav className="navbar navbar-expand-sm p-0">
|
||||
<Link to={PagePaths.HOME} className="navbar-brand fs-4 text-decoration-none text-black fw-bold">QPick</Link>
|
||||
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul className="navbar-nav mb-2 ms-auto mt-2 mt-sm-0 mb-sm-0 d-flex align-items-center">
|
||||
<form className="d-flex me-sm-4 w-100 mb-2 mb-sm-0" role="search">
|
||||
<input className="form-control" type="search" placeholder="Поиск товара..." aria-label="Search" />
|
||||
</form>
|
||||
<li className="nav-item">
|
||||
<div className="d-flex align-items-center gap-3">
|
||||
<Link to={PagePaths.CART}><img src={IconCart} alt="Корзина" /></Link>
|
||||
<Link to={PagePaths.FAVOURITES}><img src={IconHeart} alt="Избранное" /></Link>
|
||||
<Link to={PagePaths.REGISTER} className="btn btn-sm btn-danger">Выйти</Link>
|
||||
<Link to={PagePaths.ADMIN} className="btn btn-sm btn-primary">Admin</Link>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
@ -0,0 +1,32 @@
|
||||
import PagePaths from '@/enum/PagePaths';
|
||||
import { BrowserRouter, Route, Routes } from 'react-router-dom';
|
||||
import Layout from '../layout/Layout';
|
||||
import Admin from '../screens/Admin/Admin';
|
||||
import { Login, Register } from '../screens/Auth/Auth';
|
||||
import Cart from '../screens/Cart/Cart';
|
||||
import Conditions from '../screens/Conditions/Conditions';
|
||||
import Favourites from '../screens/Favourites/Favourites';
|
||||
import Home from '../screens/Home/Home';
|
||||
import Item from '../screens/Item/Item';
|
||||
|
||||
function Navigation() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path={PagePaths.REGISTER} element={<Register />} />
|
||||
<Route path={PagePaths.LOGIN} element={<Login />} />
|
||||
|
||||
<Route path={PagePaths.HOME} element={<Layout />}>
|
||||
<Route index element={<Home />} />
|
||||
<Route path={PagePaths.ITEM} element={<Item />} />
|
||||
<Route path={PagePaths.CONDITIONS} element={<Conditions />} />
|
||||
<Route path={PagePaths.FAVOURITES} element={<Favourites />} />
|
||||
<Route path={PagePaths.CART} element={<Cart />} />
|
||||
<Route path={PagePaths.ADMIN} element={<Admin />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navigation;
|
@ -0,0 +1,12 @@
|
||||
import { useEffect } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
|
||||
export default function ScrollToTop() {
|
||||
const { pathname } = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo({top: 0, behavior: 'smooth'});
|
||||
}, [pathname]);
|
||||
|
||||
return null;
|
||||
}
|
@ -0,0 +1,24 @@
|
||||
import AdminModal from "./components/AdminModal";
|
||||
import AdminTable from "./components/AdminTable";
|
||||
|
||||
function Admin() {
|
||||
return (
|
||||
<>
|
||||
<strong className="d-block fw-bold fs-4 mb-4">Админка</strong>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary mb-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modal"
|
||||
data-type="add"
|
||||
>
|
||||
Добавить объект
|
||||
</button>
|
||||
|
||||
<AdminTable />
|
||||
<AdminModal />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Admin;
|
@ -0,0 +1,55 @@
|
||||
import PlaceholderImage from "@/assets/img/placeholder.png";
|
||||
|
||||
function AdminModal() {
|
||||
return (
|
||||
<div className="modal fade" id="modal" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div className="modal-dialog">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h1 className="modal-title fs-5" id="modal-title">Создать объект</h1>
|
||||
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<form id="modal-form">
|
||||
<div className="mb-3 d-flex align-items-center justify-content-center">
|
||||
<img src={PlaceholderImage} alt="" id="object-preview-photo" />
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="message-text" className="col-form-label">Name:</label>
|
||||
<input className="form-control" id="object-name" />
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="message-text" className="col-form-label">Category:</label>
|
||||
<select className="form-select" id="object-category" aria-label="Default select example">
|
||||
<option defaultValue disabled>Выберите категорию</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="message-text" className="col-form-label">Price:</label>
|
||||
<input className="form-control" id="object-price" type="number" min="0" />
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="message-text" className="col-form-label">Rating:</label>
|
||||
<input className="form-control" id="object-rating" type="number" min="0" max="5" step="0.1" />
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="message-text" className="col-form-label">Info:</label>
|
||||
<textarea className="form-control" id="object-info"></textarea>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="message-text" className="col-form-label">Photo:</label>
|
||||
<input type="file" className="form-control" id="object-photo" accept="image/*" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||
<button type="button" className="btn btn-primary" id="submit-button">Создать</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AdminModal;
|
@ -0,0 +1,47 @@
|
||||
import AdminTableRow from './AdminTableRow';
|
||||
|
||||
function AdminTable() {
|
||||
const object = {
|
||||
"id": 2,
|
||||
"categoryId": 1,
|
||||
"name": "Товар 2",
|
||||
"photo": "cGF5bG9hZA==",
|
||||
"info": [
|
||||
{
|
||||
"name": "Характеристика 3",
|
||||
"value": "Значение 3"
|
||||
},
|
||||
{
|
||||
"name": "Характеристика 4",
|
||||
"value": "Значение 4"
|
||||
}
|
||||
],
|
||||
"price": 29.99,
|
||||
"rating": 4.2
|
||||
};
|
||||
|
||||
const categoryName = "Телефоны";
|
||||
|
||||
return (
|
||||
<table className="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">ID</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Category</th>
|
||||
<th scope="col">Price</th>
|
||||
<th scope="col">Rating</th>
|
||||
<th scope="col">Info</th>
|
||||
<th scope="col">Photo</th>
|
||||
<th scope="col">Edit</th>
|
||||
<th scope="col">Delete</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<AdminTableRow object={object} categoryName={categoryName} key={object.id} />
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
export default AdminTable;
|