This commit is contained in:
Anna 2024-01-12 16:21:31 +04:00
parent e5b2394194
commit 536e89eedf
34 changed files with 5213 additions and 0 deletions

21
Lab4/lab4/.eslintrc.cjs Normal file
View File

@ -0,0 +1,21 @@
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
Lab4/lab4/.eslintrc.json Normal file
View 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
Lab4/lab4/.gitignore vendored Normal file
View 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
Lab4/lab4/README.md Normal file
View 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

17
Lab4/lab4/index.html Normal file
View File

@ -0,0 +1,17 @@
<!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>Tokki</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./src/assets/styles/style.css">
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
</head>
<body class="d-flex flex-column h-100" style="min-height: 100vh;">
<div id="root" class="d-flex flex-column h-100" style="flex: 1 0 auto"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

4183
Lab4/lab4/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

33
Lab4/lab4/package.json Normal file
View File

@ -0,0 +1,33 @@
{
"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": {
"@fortawesome/fontawesome-free": "^6.5.1",
"@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"
}
}

7
Lab4/lab4/src/App.jsx Normal file
View File

@ -0,0 +1,7 @@
import Navigation from "./components/navigation/Navigation";
function App() {
return <Navigation />;
}
export default App;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

View File

@ -0,0 +1,122 @@
header nav {
background-color: #ffeaf7;
}
@media (min-width: 768px) {
header nav {
height: 110px;
}
}
header nav a:hover {
text-decoration: underline;
}
.navbar-brand img {
margin-left: 235px;
}
@media (max-width: 576px) {
.navbar-brand img {
margin-left: 25px;
}
}
@media (min-width: 577px) and (max-width: 992px) {
.navbar-brand img {
margin-left: 25px
}
}
@media (min-width: 993px) and (max-width: 1200px) {
.navbar-brand img {
margin-left: 150px;
}
}
@media (min-width: 1201px) {
.navbar-brand img {
margin-left: 235px;
}
}
.navbar-banner img {
margin-left: 10px;
width: 50%;
object-fit: cover;
object-position: bottom;
}
.product {
margin-bottom: 30px;
padding-right: 5px;
padding-left: 5px;
height: 100%;
}
.image_al {
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.image_al img {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 7px;
}
.info-price {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.add-to-cart {
border: none;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
background-color: #767479;
color: #ffffff;
}
.btn-warning {
height: 35px;
width: 176px;
border-radius: 8px;
margin-right: 10px;
margin-top: 10px;
}
.btn {
height: 35px;
width: 176px;
border-radius: 8px;
margin-right: 10px;
margin-top: 10px;
background-color: #767479;
color: #ffffff !important;
}
.btn:hover {
background-color: #bababa !important;
}
footer {
background-color: #ffeaf7;
}
#image-preview {
max-width: 100%;
max-height: 200px;
width: auto;
height: auto;
}

View File

@ -0,0 +1,18 @@
import { Outlet } from "react-router-dom";
import Header from "./components/Header";
import Footer from "./components/Footer";
function Layout() {
return (
<>
<Header />
<main>
{/* <Outlet /> - место, куда мы подставляем страницы */}
<Outlet />
</main>
<Footer />
</>
);
}
export default Layout;

View File

@ -0,0 +1,9 @@
function Footer() {
return (
<footer className="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Все права защищены © 2023-2024
</footer>
);
}
export default Footer;

View File

@ -0,0 +1,35 @@
import { Link } from "react-router-dom";
import Logo from "../../../assets/Images/Tokki.png";
function Header() {
return (
<header>
<nav className="navbar navbar-expand-md">
<div className="container-fluid">
<Link className="navbar-brand" to="/">
<img src={Logo} alt="logo" width="90" />
</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="navbar-collapse collapse justify-content-start" id="navbarNav">
<div className="navbar-nav">
<Link className="nav-link" to="/">Каталог</Link>
<Link className="nav-link" to="/company">О компании</Link>
<Link className="nav-link" to="/delivery">Доставка</Link>
</div>
</div>
<div className="navbar-collapse collapse justify-content-end" id="navbarNav">
<div className="navbar-nav">
<Link className="nav-link" to="/login">Войти</Link>
<Link className="nav-link" style={{paddingRight: 90}} to="/basket">Корзина</Link>
</div>
</div>
</div>
</nav>
</header>
);
}
export default Header;

View File

@ -0,0 +1,40 @@
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Layout from '../layout/Layout';
import Admin from "../screens/Admin/Admin";
import Basket from "../screens/Basket/Basket";
import Home from '../screens/Home/Home';
import Registration from "../screens/Registration/Registration";
import Company from './../screens/Company/Company';
import Delivery from './../screens/Delivery/Delivery';
import Login from './../screens/Login/Login';
import MakingAnOrder from './../screens/MakingAnOrder/MakingAnOrder';
import PageEdit from './../screens/PageEdit/PageEdit';
import PersonalAccount from './../screens/PersonalAccount/PersonalAccount';
import RecoveryPassword from './../screens/RecoveryPassword/RecoveryPassword';
// Привязываем компоненты-страницы к путям
function Navigation() {
return (
<BrowserRouter>
<Routes>
{/* Весь сайт оборачиваем в шаблон <Layout /> */}
<Route path="/" element={<Layout />}>
<Route path="/" element={<Home />} />
<Route path="/admin" element={<Admin />} />
<Route path="/basket" element={<Basket />} />
<Route path="/company" element={<Company />} />
<Route path="/delivery" element={<Delivery />} />
<Route path="/makingAnOrder" element={<MakingAnOrder />} />
<Route path="/pageEdit" element={<PageEdit />} />
<Route path="/personalAccount" element={<PersonalAccount />} />
<Route path="/recoveryPassword" element={<RecoveryPassword />} />
<Route path="/login" element={<Login />} />
<Route path="/registration" element={<Registration />} />
</Route>
</Routes>
</BrowserRouter>
);
}
export default Navigation;

View File

@ -0,0 +1,17 @@
import { Link } from "react-router-dom";
import AdminTable from "./components/AdminTable";
function Admin() {
return (
<div className="container-fluid text-center p-2">
<h1 className="text-center font-weight-bold">Панель администратора</h1>
<div className="btn-group" role="group">
<Link className="btn" to="/pageEdit">Добавить товар</Link>
</div>
<AdminTable />
</div>
);
}
export default Admin;

View File

@ -0,0 +1,29 @@
import AdminTableRow from "./AdminTableRow";
function AdminTable() {
return (
<div className="w-100">
<h2 className="text-center font-weight-bold" style={{paddingTop: "19px"}}>Таблица данных</h2>
<table id="items-table" className="table table-striped">
<thead>
<tr>
<th scope="col"></th>
<th scope="col" className="w-25">Товар</th>
<th scope="col" className="w-25">Цена</th>
<th scope="col" className="w-25">Количество</th>
<th scope="col" className="w-25">Сумма</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<AdminTableRow />
<AdminTableRow />
<AdminTableRow />
</tbody>
</table>
</div>
);
}
export default AdminTable;

View File

@ -0,0 +1,25 @@
import { Link } from "react-router-dom";
function AdminTableRow() {
return (
<tr id="line-5">
<td>1</td>
<td>Stray Kids</td>
<td>1000.00</td>
<td>10</td>
<td>10000.00</td>
<td>
<Link to="/pageEdit">
<i className="fa-solid fa-paw text-dark"></i>
</Link>
</td>
<td>
<Link to="#">
<i className="fa-solid fa-circle-xmark text-dark"></i>
</Link>
</td>
</tr>
);
}
export default AdminTableRow;

View File

@ -0,0 +1,32 @@
import { Link } from 'react-router-dom';
import BasketItem from "./components/BasketItem";
function Basket() {
return (
<div className="container">
<div className="d-flex justify-content-center align-items-center">
<h1 className="text font-weight-bold">Корзина</h1>
</div>
<div className="row">
<div className="col-10">
<BasketItem />
<BasketItem />
<BasketItem />
</div>
</div>
<div className="d-flex justify-content-start align-items-center">
<div className="text-dark font-weight-bold" style={{ fontSize: "24px" }}>
К оплате: </div>
<div className="text-end" style={{ color: "#767479", fontSize: "24px" }}>
</div>
</div>
<Link className="btn btn" style={{ marginLeft: "25px", marginBottom: "10px" }} to="/makingAnOrder">Оплата</Link>
</div>
);
}
export default Basket;

View File

@ -0,0 +1,44 @@
import { Link } from "react-router-dom";
import Image from "../../../../assets/Images/album.jpg";
function BasketItem() {
return (
<div className="card rounded-3 mb-4">
<div className="card-body p-4">
<div className="row d-flex justify-content-between align-items-center">
<div className="col-md-2 col-lg-2 col-xl-2">
<img src={Image} className="img-fluid rounded-3" alt="Koreans" />
</div>
<div className="col-md-3 col-lg-3 col-xl-3">
<p className="lead fw-normal mb-2">Название альбома</p>
<p><span className="text-muted">Описание</span></p>
</div>
<div className="col-md-3 col-lg-3 col-xl-2 d-flex">
<button className="btn-link px-2"
// onClick="this.parentNode.querySelector('input[type=number]').stepDown()"
>
<i className="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" defaultValue="2" type="number"
className="form-control form-control-sm text-center" />
<button className="btn-link px-2"
// onClick="this.parentNode.querySelector('input[type=number]').stepUp()"
>
<i className="fas fa-plus"></i>
</button>
</div>
<div className="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 className="mb-0">Цена </h5>
</div>
<div className="col-md-1 col-lg-1 col-xl-1 text-end">
<Link to="#" className="text-black"><i className="far fa-circle-xmark"></i></Link>
</div>
</div>
</div>
</div>
);
}
export default BasketItem;

View File

@ -0,0 +1,46 @@
function Company() {
return (
<>
<div className="d-flex justify-content-center align-items-center">
<h1 className="text font-weight-bold">О компании</h1>
</div>
<div className="container">
<div className="row">
<h2 className="font-weight-bold" style={{ fontSize: "35px", marginLeft: "10px", marginTop: "10px" }}>Наши
преимущества:</h2>
<ul>
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> привозим
официально и напрямую из Южной Кореи</li>
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}>
качественная упаковка и обслуживание</li>
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> быстрая
отправка</li>
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> быстрая
доставка (в среднем 8 дней по России)</li>
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> удобная
оплата через сайт</li>
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> большой
ассортимент в наличии в Ульяновске</li>
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> никаких
доплат из-за веса, количества, выбора версии и т.д.</li>
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> после
оплаты заказа на эл. почту Вам приходит чек, подтверждающий Вашу покупку</li>
<li className="font-weight-bold" style={{ fontSize: "20px", marginLeft: "10px", marginTop: "10px" }}> работаем
почти 8 лет</li>
</ul>
<p></p>
<p></p>
<p></p>
<p style={{ fontSize: "25px", marginLeft: "10px", marginTop: "10px" }}>За время работы
магазина, мы уже продали более 60 000 альбомов.</p>
<p style={{ fontSize: "25px", marginLeft: "10px", marginTop: "10px" }}>Также у нас есть
физический магазин в Ульяновске, где весь товар можно увидеть в живую!</p>
<p style={{ fontSize: "25px", marginLeft: "10px", marginTop: "10px" }}>Адрес магазина:
Ульяновск, ул. Северный Венец 32. Время работы: каждый день с 13:00 до 21:00</p>
</div>
</div>
</>
);
}
export default Company;

View File

@ -0,0 +1,20 @@
function Delivery() {
return (
<>
<div className="d-flex justify-content-center align-items-center">
<h1 className="text font-weight-bold">Доставка</h1>
</div>
<div className="container">
<div className="row">
<h2 className="font-weight-bold" style={{ fontSize: "35px", marginLeft: "10px", marginTop: "10px" }}>Вы можете получить заказ:</h2>
<h2 className="font-weight-bold" style={{ fontSize: "35px", marginLeft: "10px", marginTop: "10px" }}>Самовывозом</h2>
<p style={{ fontSize: "25px", marginLeft: "10px", marginTop: "10px" }}>Вы&nbsp;всегда сможете забрать заказ самостоятельно в&nbsp;Ульяновске в&nbsp;нашем магазине по&nbsp;адресу Северный Венец&nbsp;32. Время работы 13-21. Когда заказ будет собран и&nbsp;завезен в&nbsp;магазин, Вам на&nbsp;эл. почту придет письмо со&nbsp;статусом заказа &laquo;готов к&nbsp;выдаче&raquo; (проверяйте папку спам), после этого его можно забирать.</p>
<h2 className="font-weight-bold" style={{ fontSize: "35px", marginLeft: "10px", marginTop: "10px" }}>Доставкой Почты России</h2>
<p style={{ fontSize: "25px", marginLeft: "10px", marginTop: "10px" }}>Почта России - пересылка заказа осуществляется до вашего почтового отделения, получение бандероли в отделении Почты России по извещению. Срок доставки зависит от отдаленности вашего региона от Ульяновска. Примерные сроки доставки по РФ около 7-11 дней</p>
</div>
</div>
</>
);
}
export default Delivery;

View File

@ -0,0 +1,22 @@
import Image from "../../../assets/Images/btc.png";
import Card from "./components/Card";
function Home() {
return (
<>
<div className="d-flex justify-content-center align-items-center">
<h1 className="text font-weight-bold">Каталог</h1>
</div>
<div className="container">
<div className="row" id="catalog">
<img className="mx-auto pb-5" src={Image} alt="banner" width="300" />
<Card />
<Card />
<Card />
</div>
</div>
</>
);
}
export default Home;

View File

@ -0,0 +1,22 @@
import CardImage from "../../../../assets/Images/album.jpg";
function Card() {
return (
<div className="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div className="product d-flex flex-column h-100">
<div className="image_al">
<img src={CardImage} alt="Product Image" className="img-fluid" />
</div>
<div className="info">
<h3 className="card-title mb-2">Stray Kids</h3>
<div className="info-price">
<span className="price"><strong>1000$</strong></span>
<button className="add-to-cart"><i className="fas fa-basket-shopping"></i></button>
</div>
</div>
</div>
</div>
);
}
export default Card;

View File

@ -0,0 +1,54 @@
import { Link } from "react-router-dom";
function Login() {
return (
<section className="h-100 mt-2">
<div className="mask d-flex align-items-center h-100 gradient-custom-3">
<div className="container h-100">
<div className="row d-flex justify-content-center align-items-center h-100">
<div className="col-12 col-md-9 col-lg-7 col-xl-6">
<div className="card" style={{ borderRadius: "15px", borderColor: "#767479" }}>
<div className="card-body p-5">
<h2 className="text-uppercase text-center mb-5">Войти</h2>
<form>
<div className="form-outline mb-4">
<input type="email" id="form3Example3cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example3cg">Ваш адрес электронной почты</label>
</div>
<div className="form-outline mb-4">
<input type="password" id="form3Example4cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example4cg">Пароль</label>
</div>
<div className="form-check d-flex justify-content-center mb-2">
<input className="form-check-input me-2" type="checkbox" defaultValue="" id="form2Example3cg" />
<label className="form-check-label me-2" htmlFor="form2Example3g">Запомнить меня</label>
</div>
<p className="text-center text-muted mb-0">Забыли пароль? <Link to="/recoveryPassword"
className="fw-bold text-body"><u>Восстановление пароля</u></Link></p>
<div className="d-flex justify-content-center">
<Link className="btn btn-block text-body mb-0" to="/personalAccount">Вход</Link>
</div>
<p className="text-center text-muted mb-0">У вас нет аккаунта? <Link to="/registration"
className="fw-bold text-body"><u>Регистрация</u></Link></p>
<p className="text-center"><Link className="fw-bold text-body" to="/admin">Администратор</Link></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
export default Login;

View File

@ -0,0 +1,131 @@
function MakingAnOrder() {
return (
<section className="h-100">
<div className="mask d-flex align-items-center h-100 gradient-custom-3">
<div className="container h-100">
<div className="row d-flex justify-content-center align-items-center h-100">
<div className="col-12 col-md-9 col-lg-7 col-xl-6">
<div className="card" style={{ borderRadius: "15px", borderColor: "#767479" }}>
<div className="card-body p-5">
<h2 className="text-uppercase text-center mb-5">Оформление заказа</h2>
<form>
<div className="form-outline mb-4">
<input type="text" id="form3Example1cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example1cg">Ваше имя</label>
</div>
<div className="form-outline mb-4">
<input type="tel" id="form3Example5cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example5cg">Электронная почта</label>
</div>
<label className="form-check-label" htmlFor="creditCard">Вариант получения</label>
<div className="form-check mb-4">
<input className="form-check-input" type="radio" name="deliveryMethod" id="selfPickup"
defaultValue="selfPickup" />
<label className="form-check-label" htmlFor="selfPickup">Самовывоз</label>
</div>
<div className="form-check mb-4">
<input className="form-check-input" type="radio" name="deliveryMethod" id="delivery" defaultValue="delivery" />
<label className="form-check-label" htmlFor="delivery">Доставка</label>
</div>
<div className="form-outline mb-4" id="deliveryAddress" style={{ display: "none" }}>
<input type="text" id="form3ExampleAddress" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3ExampleAddress">Ваш адрес доставки</label>
<div id="deliveryTimeOptions">
<select className="form-select" id="timeSlotSelect" name="timeSlot">
<option defaultValue="10:00-10:30">10:00-10:30</option>
<option defaultValue="10:30-11:00">10:30-11:00</option>
<option defaultValue="11:00-11:30">11:00-11:30</option>
<option defaultValue="11:30-12:00">11:30-12:00</option>
<option defaultValue="12:00-12:30">12:00-12:30</option>
<option defaultValue="12:30-13:00">12:30-13:00</option>
<option defaultValue="13:00-13:30">13:00-13:30</option>
<option defaultValue="13:30-14:00">13:30-14:00</option>
<option defaultValue="14:00-14:30">14:00-14:30</option>
<option defaultValue="14:30-15:00">14:30-15:00</option>
<option defaultValue="15:00-15:30">15:00-15:30</option>
<option defaultValue="15:30-16:00">15:30-16:00</option>
<option defaultValue="16:00-16:30">16:00-16:30</option>
<option defaultValue="16:30-17:00">16:30-17:00</option>
<option defaultValue="17:00-17:30">17:00-17:30</option>
<option defaultValue="17:30-18:00">17:30-18:00</option>
<option defaultValue="18:00-18:30">18:00-18:30</option>
<option defaultValue="18:30-19:00">18:30-19:00</option>
<option defaultValue="19:00-19:30">19:00-19:30</option>
<option defaultValue="19:30-20:00">19:30-20:00</option>
<option defaultValue="20:00-20:30">20:00-20:30</option>
<option defaultValue="20:30-21:00">20:30-21:00</option>
<option defaultValue="21:00-21:30">21:00-21:30</option>
<option defaultValue="21:30-22:00">21:30-22:00</option>
<option defaultValue="22:00-22:30">22:00-22:30</option>
<option defaultValue="22:30-23:00">22:30-23:00</option>
</select>
<label htmlFor="timeSlotSelect">Выберите время доставки:</label>
</div>
</div>
<label className="form-check-label" htmlFor="creditCard">Вариант оплаты</label>
<div className="form-check mb-4">
<input className="form-check-input" type="radio" name="paymentMethod" id="cash" defaultValue="cash" />
<label className="form-check-label" htmlFor="cash">Наличные</label>
</div>
<div className="form-check mb-4">
<input className="form-check-input" type="radio" name="paymentMethod" id="creditCard"
defaultValue="creditCard" />
<label className="form-check-label" htmlFor="creditCard">Оплата картой</label>
</div>
<div className="form-outline mb-4" id="creditCardDetails" style={{ display: "none" }}>
<div className="row mb-4">
<div className="col">
<div className="form-outline">
<input type="text" id="formNameOnCard" className="form-control" />
<label className="form-label" htmlFor="formNameOnCard">Имя держателя карты</label>
</div>
</div>
<div className="col">
<div className="form-outline">
<input type="text" id="formCardNumber" className="form-control" />
<label className="form-label" htmlFor="formCardNumber">Номер карты</label>
</div>
</div>
</div>
<div className="row mb-4">
<div className="col-3">
<div className="form-outline">
<input type="text" id="formExpiration" className="form-control" />
<label className="form-label" htmlFor="formExpiration">Срок действия</label>
</div>
</div>
<div className="col-3">
<div className="form-outline">
<input type="text" id="formCVV" className="form-control" />
<label className="form-label" htmlFor="formCVV">CVV</label>
</div>
</div>
</div>
</div>
<div className="d-flex justify-content-center">
<button className="btn btn" type="button" id="saveButton">Оформить</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
export default MakingAnOrder;

View File

@ -0,0 +1,40 @@
import { Link } from "react-router-dom";
function PageEdit() {
return (
<>
<h1 className="text-center font-weight-bold">Добавление товара</h1>
<div className="text-center">
<img id="image-preview" src="https://via.placeholder.com/200" className="rounded rounded-end"
alt="placeholder" />
</div>
<form id="items-form" className="needs-validation" noValidate>
<div className="mb-2">
<label htmlFor="item" className="form-label">Товары</label>
<select id="item" className="form-select" name="selected" required>
</select>
</div>
<div className="mb-2">
<label className="form-label" htmlFor="price">Цена</label>
<input id="price" name="price" className="form-control" type="number" defaultValue="0.00" min="1000.00" step="0.50"
required />
</div>
<div className="mb-2">
<label className="form-label" htmlFor="count">Количество</label>
<input id="count" name="count" className="form-control" type="number" defaultValue="0" min="1" step="1" required />
</div>
<div className="mb-2">
<label className="form-label" htmlFor="image">Изображение</label>
<input id="image" type="file" name="image" className="form-control" accept="image/*" />
</div>
<div className="container-fluid text-center p-2">
<Link to="/admin" className="btn">Назад</Link>
<button type="submit" className="btn">Сохранить</button>
</div>
</form>
</>
);
}
export default PageEdit;

View File

@ -0,0 +1,61 @@
import { Link } from "react-router-dom";
function PersonalAccount() {
return (
<section className="h-100">
<div className="mask d-flex align-items-center h-100 gradient-custom-3">
<div className="container h-100">
<div className="row d-flex justify-content-center align-items-center h-100">
<div className="col-12 col-md-9 col-lg-7 col-xl-6">
<div className="card" style={{ borderRadius: "15px", borderColor: "#767479" }}>
<div className="card-body p-5">
<h2 className="text-uppercase text-center mb-5">Личный кабинет</h2>
<form>
<div className="form-outline mb-4">
<input type="text" id="form3Example1cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example1cg">Ваше имя</label>
</div>
<div className="form-outline mb-4">
<input type="text" id="form3Example1cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example1cg">Ваша фамилия</label>
</div>
<div className="form-outline mb-4">
<input type="email" id="form3Example3cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example3cg">Ваш адрес электронной почты</label>
</div>
<div className="form-outline mb-4">
<input type="date" id="form3Example4cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example4cg">Дата рождения</label>
</div>
<div className="form-outline mb-2">
<input type="tel" id="form3Example5cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example5cg">Номер телефона</label>
</div>
<div className="d-flex justify-content-center">
<button className="btn btn" type="button" id="saveButton">Сохранить</button>
</div>
<div className="d-flex justify-content-center">
<Link className="btn btn" type="button" to="/">Выйти</Link>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
export default PersonalAccount;

View File

@ -0,0 +1,44 @@
import { Link } from "react-router-dom";
function RecoveryPassword() {
return (
<section className="h-100">
<div className="mask d-flex align-items-center h-100 gradient-custom-3">
<div className="container h-100">
<div className="row d-flex justify-content-center align-items-center h-100">
<div className="col-12 col-md-9 col-lg-7 col-xl-6">
<div className="card" style={{ borderRadius: "15px", borderColor: "#767479" }}>
<div className="card-body p-5">
<h2 className="text-uppercase text-center mb-5">Восстановление пароля</h2>
<h4 className="text-black text-center mb-5">Введите свой адрес электронной почты, и мы вышлем вам
электронное письмо с инструкциями по сбросу вашего пароля</h4>
<form>
<div className="form-outline mb-4">
<input type="email" id="form3Example3cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example3cg">Ваш адрес электронной почты</label>
</div>
<div className="d-flex justify-content-center">
<button type="button" className="btn btn-block text-body mb-0">Сбросить пароль</button>
</div>
<p className="text-center text-muted mb-0"><Link to="/login"
className="fw-bold text-body"><u>Войти</u></Link></p>
<p className="text-center text-muted mb-0"><Link to="/registration"
className="fw-bold text-body"><u>Регистрация</u></Link></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
export default RecoveryPassword;

View File

@ -0,0 +1,62 @@
import { Link } from "react-router-dom";
function Registration() {
return (
<section className="h-100">
<div className="mask d-flex align-items-center h-100 gradient-custom-3">
<div className="container h-100">
<div className="row d-flex justify-content-center align-items-center h-100">
<div className="col-12 col-md-9 col-lg-7 col-xl-6">
<div className="card" style={{ borderRadius: "15px", borderColor: "#767479" }}>
<div className="card-body p-5">
<h2 className="text-uppercase text-center mb-5">Создать учетную запись</h2>
<form>
<div className="form-outline mb-4">
<input type="text" id="form3Example1cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example1cg">Ваше имя</label>
</div>
<div className="form-outline mb-4">
<input type="email" id="form3Example3cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example3cg">Ваш адрес электронной почты</label>
</div>
<div className="form-outline mb-4">
<input type="password" id="form3Example4cg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example4cg">Пароль</label>
</div>
<div className="form-outline mb-4">
<input type="password" id="form3Example4cdg" className="form-control form-control-lg" />
<label className="form-label" htmlFor="form3Example4cdg">Повторите свой пароль</label>
</div>
<div className="form-check d-flex justify-content-center mb-5">
<input className="form-check-input me-2" type="checkbox" defaultValue="" id="form2Example3cg" />
<label className="form-check-label" htmlFor="form2Example3g">
Я согласен со всеми утверждениями в <Link to="#" className="text-body"><u>Условиях
обслуживания</u></Link>
</label>
</div>
<div className="d-flex justify-content-center">
<button type="button" className="btn btn-block text-body mb-0">Регистрация</button>
</div>
<p className="text-center text-muted mb-0">У вас уже есть учетная запись? <Link
to="/login" className="fw-bold text-body"><u>Войдите здесь</u></Link></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
export default Registration;

9
Lab4/lab4/src/main.jsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);

17
Lab4/lab4/vite.config.js Normal file
View File

@ -0,0 +1,17 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
});

Binary file not shown.