a.puchkina/PIbd-22_Puchkina_Internet_Programming
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

лаба 4 готова

Browse Source
This commit is contained in:
a.puchkina 2023-12-22 12:30:41 +04:00
parent 44ff5af2d8
commit d99255b1d8
43 changed files with 5396 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
laba4/.eslintrc.cjs Normal file
View File

@ -0,0 +1,25 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'airbnb-base',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 12, sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
'indent': 'off',
'no-console': 'off',
'arrow-body-style': 'off',
'implicit-arrow-linebreak': 'off',
//'linebreak-style': 'off',
},
}

24
laba4/.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?

29
laba4/README.md Normal file
View File

@ -0,0 +1,29 @@
#### Окружение:
- nodejs 18;
- VSCode;
- ESLint плагин для VSCode;
- для отладки необходимы бразузеры Chrome или Edge.
#### Создание пустого проекта:
```commandline
npm create vite@latest ./ -- --template react
```
#### Установка зависимостей:
```commandline
npm install
```
#### Запуск проекта:
```commandline
npm run dev
```
#### Сборка проекта:
```commandline
npm run build
```

13
laba4/index.html Normal file
View File

@ -0,0 +1,13 @@
<html lang="ru">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ANNA</title>
</head>
<body>
<div id="root" class="h-100 d-flex flex-column"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

14
laba4/jsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Node",
"target": "ES2020",
"jsx": "react",
"strictNullChecks": true,
"strictFunctionTypes": true
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}

4344
laba4/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
laba4/package.json Normal file
View File

@ -0,0 +1,32 @@
{
"name": "lec4",
"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": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.18.0",
"bootstrap": "^5.3.2",
"react-bootstrap": "^2.9.1",
"react-bootstrap-icons": "^1.10.3",
"prop-types": "^15.8.1"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"vite": "^4.4.5"
}
}

3
laba4/public/favicon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 463 B

0
laba4/src/App.css Normal file
View File

22
laba4/src/App.jsx Normal file
View File

@ -0,0 +1,22 @@
import PropTypes from 'prop-types';
import { Container } from 'react-bootstrap';
import { Outlet } from 'react-router-dom';
import './App.css';
import Navigation from './components/navigation/Navigation.jsx';
const App = ({ routes }) => {
return (
<>
<Navigation routes={routes}></Navigation>
<Container className='p-0' as="main" fluid>
<Outlet />
</Container>
</>
);
};
App.propTypes = {
routes: PropTypes.array,
};
export default App;

BIN
laba4/src/assets/Chairs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 286 KiB

BIN
laba4/src/assets/Sofas.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 367 KiB

BIN
laba4/src/assets/chair1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
laba4/src/assets/chair2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
laba4/src/assets/chair3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
laba4/src/assets/iconDelete.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 513 B

BIN
laba4/src/assets/shop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
laba4/src/assets/sofa1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
laba4/src/assets/sofa2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
laba4/src/assets/sofa3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
laba4/src/assets/table1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
laba4/src/assets/table2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
laba4/src/assets/table3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
laba4/src/assets/tables.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 296 KiB

24
laba4/src/components/navigation/Navigation.css Normal file
View File

@ -0,0 +1,24 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;500;600;700&display=swap");
.my-navbar {
background-color: white !important;
border-bottom: #533908 solid 2px;
font-family: "Montserrat Alternates", sans-serif;
font-size: 20px;
color: #533908;
padding: 0.5em;
}
.my-navbar .link a:hover {
text-decoration: underline !important;
}
.my-navbar .logo {
width: 1em;
height: 1em;
}
.my-navbar .navbar-brand{
font-size: 30px;
color: #533908;
}

43
laba4/src/components/navigation/Navigation.jsx Normal file
View File

@ -0,0 +1,43 @@
import PropTypes from 'prop-types';
import { Container, Nav, Navbar } from 'react-bootstrap';
import { Journal } from 'react-bootstrap-icons';
import { Link, useLocation } from 'react-router-dom';
import './Navigation.css';
const Navigation = ({ routes }) => {
const location = useLocation();
const indexPageLink = routes.filter((route) => route.index === false).shift();
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
return (
<header>
<Navbar expand='md' className='my-navbar'>
<Container fluid>
<Navbar.Brand as={Link} to='/page2'>
<Journal className='d-inline-block align-top me-1 logo' />
</Navbar.Brand>
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
ANNA
</Navbar.Brand>
<Navbar.Toggle aria-controls='main-navbar' />
<Navbar.Collapse id='main-navbar' className='justify-content-end'>
<Nav activeKey={location.pathname}>
{
pages.map((page) =>
<Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
{page.title}
</Nav.Link>)
}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar >
</header>
);
};
Navigation.propTypes = {
routes: PropTypes.array,
};
export default Navigation;

27
laba4/src/index.css Normal file
View File

@ -0,0 +1,27 @@
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.1em;
}
.btn-mw {
width: 100%;
}
@media (min-width: 768px) {
.btn-mw {
width: 30%;
}
}
@media (min-width: 1200px) {
.btn-mw {
width: 20%;
}
}

63
laba4/src/main.jsx Normal file
View File

@ -0,0 +1,63 @@
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import App from './App.jsx';
import './index.css';
import ErrorPage from './pages/ErrorPage.jsx';
import Page1 from './pages/Page1.jsx';
import Page2 from './pages/Page2.jsx';
import Page3 from './pages/Page3.jsx';
import Page4 from './pages/Page4.jsx';
import Page5 from './pages/Page5.jsx';
import Page6 from './pages/Page6.jsx';
import PageEdit from './pages/PageEdit.jsx';
const routes = [
{
index: true,
path: '/',
element: <Page1 />,
},
{
path: '/page2',
element: <Page2 />, // Страница каталога
},
{
path: '/page3',
element: <Page3 />,
title: 'Корзина',
},
{
path: '/page4',
element: <Page4 />,
title: 'Аккаунт',
},
{
path: '/page5',
element: <Page5 />, // Таблица с товарами
},
{
path: '/page6',
element: <Page6 />, // Страница товара
},
{
path: '/page-edit',
element: <PageEdit />, // Страница добавления товара
},
];
const router = createBrowserRouter([
{
path: '/',
element: <App routes={routes} />,
children: routes,
errorElement: <ErrorPage />,
},
]);
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>,
);

19
laba4/src/pages/ErrorPage.jsx Normal file
View File

@ -0,0 +1,19 @@
import { Alert, Button, Container } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';
const ErrorPage = () => {
const navigate = useNavigate();
return (
<Container fluid className="p-2 row justify-content-center">
<Container className='col-md-6'>
<Alert variant="danger">
Страница не найдена
</Alert>
<Button className="w-25 mt-2" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
</Container>
</Container>
);
};
export default ErrorPage;

131
laba4/src/pages/Page1.css Normal file
View File

@ -0,0 +1,131 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;500;600;700&display=swap");
.mainPage .container-fluid {
position: relative;
line-height: 1;
}
.mainPage .container-fluid img {
width: 100%;
}
.mainPage h1 {
position: absolute;
align-items: center;
top: 7%;
left: 40%;
text-align: center;
font-family: "Montserrat Alternates";
font-weight: 500;
color: white;
}
.mainPage p1 {
position: absolute;
top: 20%;
font-family: "Montserrat Alternates";
font-weight: 200;
left: 25%;
right: 5%;
color: white;
text-align: left;
}
.mainPage p2 {
position: absolute;
top: 30%;
font-family: "Montserrat Alternates";
font-weight: 100;
left: 25%;
right: 5%;
color: white;
text-align: left;
}
@media screen and (min-width: 1427px) {
.mainPage p1 {
font-size: 55px;
}
.mainPage p2 {
font-size: 45px;
}
.mainPage h1 {
font-size: 80px;
}
.mainPage .text-assortment {
font-size: 36px;
}
}
@media screen and (min-width: 1120px) and (max-width: 1426px) {
.mainPage p1 {
font-size: 45px;
}
.mainPage p2 {
font-size: 40px;
}
.mainPage h1 {
font-size: 70px;
}
.mainPage .text-assortment {
font-size: 36px;
}
}
@media screen and (min-width: 720px) and (max-width: 1119px) {
.mainPage p1 {
font-size: 30px;
}
.mainPage p2 {
font-size: 25px;
}
.mainPage h1 {
font-size: 50px;
}
.mainPage .text-assortment {
font-size: 36px;
}
}
@media screen and (min-width: 470px) and (max-width: 719px) {
.mainPage p1 {
font-size: 20px;
}
.mainPage p2 {
font-size: 15px;
}
.mainPage h1 {
font-size: 30px;
}
.mainPage .text-assortment {
font-size: 25px;
}
}
@media screen and (min-width: 100px) and (max-width: 469px) {
.mainPage p1 {
font-size: 15px;
}
.mainPage p2 {
font-size: 12px;
}
.mainPage h1 {
font-size: 20px;
}
.mainPage .text-assortment {
font-size: 18px;
}
}
.mainPage .text-assortment {
font-family: "Montserrat Alternates";
font-weight: 400;
color: #533908;
text-align: center;
right: 50%;
padding-top: 7%;
}
.mainPage .text-center {
font-family: "Montserrat Alternates";
font-weight: 400;
color: #533908;
font-size: 20px;
border: #533908 1px solid;
background-color: rgba(241, 235, 227, 0.822);
}

54
laba4/src/pages/Page1.jsx Normal file
View File

@ -0,0 +1,54 @@
// import { Link } from 'react-router-dom';
import {
Card, CardImgOverlay, Container, CardImg, CardTitle, Row, Col, Image,
} from 'react-bootstrap';
import ShopBackground from '../assets/shop.png';
import Sofas from '../assets/Sofas.png';
import Tables from '../assets/tables.png';
import Chairs from '../assets/Chairs.png';
import './Page1.css';
// import Banner from '../components/banner/Banner.jsx';
const Page1 = () => {
return (
<>
<div className="mainPage">
<Container fluid className='p-0'>
<Image src={ShopBackground} alt="logo" width="100%"/>
<h1>ANNA</h1>
<p1>Магазин дизайнерской мебели</p1>
<p2>Неповторимый стиль вашего дома</p2>
</Container>
<p className="text-assortment">Большой ассортимент</p>
<Row xs={1} md={3} className="mx-5">
<Col className="my-4">
<Card>
<CardImg src={Sofas} alt=""/>
<CardImgOverlay>
<CardTitle className="text-center">Диваны</CardTitle>
</CardImgOverlay>
</Card>
</Col>
<Col className="my-4">
<Card>
<CardImg src={Tables} alt=""/>
<CardImgOverlay>
<CardTitle className="text-center">Столы</CardTitle>
</CardImgOverlay>
</Card>
</Col>
<Col className="my-4">
<Card>
<CardImg src={Chairs} alt=""/>
<CardImgOverlay>
<CardTitle className="text-center">Стулья и кресла</CardTitle>
</CardImgOverlay>
</Card>
</Col>
</Row>
</div>
</>
);
};
export default Page1;

19
laba4/src/pages/Page2.css Normal file
View File

@ -0,0 +1,19 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;500;600;700&display=swap");
.catalogPage .text-center {
margin-bottom: 3%;
}
.catalogPage .text-catalog {
font-family: "Montserrat Alternates";
font-weight: 400;
font-size: 30px;
color: #533908;
text-align: center;
}
.catalogPage img {
padding: 15px;
width: 300px;
border-radius: 20px;
}

60
laba4/src/pages/Page2.jsx Normal file
View File

@ -0,0 +1,60 @@
import { Link } from 'react-router-dom';
import Table1 from '../assets/table1.png';
import Table2 from '../assets/table2.png';
import Table3 from '../assets/table3.png';
import Chair1 from '../assets/chair1.png';
import Chair2 from '../assets/chair2.png';
import Chair3 from '../assets/chair3.png';
import Sofa1 from '../assets/sofa1.png';
import Sofa2 from '../assets/sofa2.png';
import Sofa3 from '../assets/sofa3.png';
import './Page2.css';
import './Pages.css';
const Page2 = () => {
return (
<>
<div className="catalogPage">
<p className="title">КАТАЛОГ</p>
<div className="text-center">
<p className="text-catalog">Столы</p>
<Link to="/page6">
<img src={Table1} alt="..."/>
</Link>
<Link to="/page6"
><img src={Table2} alt="..." />
</Link>
<Link to="/page6"
><img src={Table3} alt="..."
/></Link>
</div>
<div className="text-center">
<p className="text-catalog">Стулья и кресла</p>
<Link to="/page6"
><img src={Chair1} alt="..."
/></Link>
<Link to="/page6"
><img src={Chair2} alt="..." />
</Link>
<Link to="/page6"
><img src={Chair3} alt="..."
/></Link>
</div>
<div className="text-center">
<p className="text-catalog">Диваны</p>
<Link to="/page6"
><img src={Sofa1} alt="..."
/></Link>
<Link to="/page6"
><img src={Sofa2} alt="..." />
</Link>
<Link to="/page6"
><img src={Sofa3} alt="..."
/></Link>
</div>
</div>
</>
);
};
export default Page2;

94
laba4/src/pages/Page3.css Normal file
View File

@ -0,0 +1,94 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;500;600;700&display=swap");
.cart{
font-family: "Montserrat Alternates";
}
.cart .container-products {
background-color: rgba(210, 202, 188, 0.64);
position: relative;
margin-bottom: 3%;
border-radius: 10px;
}
.container-products .title-product,
.container-products .price,
.container-products .articuL,
.container-products a {
margin-left: 30%;
position: absolute;
padding: 3%;
}
.container-products .title-product {
top: 0;
left: 0;
}
.container-products .price {
top: 0;
right: 0;
}
.container-products .title-product,
.container-products .price {
font-weight: 700;
}
.container-products .articul {
bottom: 0;
left: 0;
padding-bottom: 3%;
}
.container-products a {
width: 20%;
bottom: 0;
right: 0;
margin-bottom: 3%;
}
.cart .card{
background-color: rgba(191, 180, 161, 1);
margin-bottom: 30px;
}
.cart u {
padding-left: 4%;
text-align: left;
margin-left: 3%;
font-weight: 500;
padding-bottom: 10%;
}
.cart .btn{
font-weight: 100;
margin-top: 10%;
margin-bottom: 3%;
color: white;
background-color: #533908;
border: #533908 3px solid;
}
.cart .card-text{
font-weight: 500;
padding: 5px;
font-size: 18px;
text-align: center;
color:#533908;
}
.cart .card-title{
font-weight: 600;
font-size: 23px;
color:#533908;
padding: 8px;
margin-bottom: 5%;
text-align: center;
}
.cart .price-text{
font-weight: 300;
padding: 5px;
font-size: 18px;
text-align: center;
color:#533908;
}
.cart .price-count{
font-weight: 500;
padding: 5px;
text-align: center;
color:#533908;
}
.cart .imageOfProduct{
padding: 10px;
width: 30%;
border-radius: 20px;
}

50
laba4/src/pages/Page3.jsx Normal file
View File

@ -0,0 +1,50 @@
import {
Container, Row, Col, Image, Card, Button,
} from 'react-bootstrap';
import Chair3 from '../assets/chair3.png';
import Sofa3 from '../assets/sofa3.png';
import IconDelete from '../assets/iconDelete.png';
import './Pages.css';
import './Page3.css';
const Page3 = () => {
return (
<Container className='cart'>
<p className="title">КОРЗИНА</p>
<Row>
<Col sm={8}>
<Container className="container-products p-0">
<Image className='imageOfProduct' src={Sofa3} />
<p className="title-product">Диван 3</p>
<p className="articul">Артикул 2352788</p>
<p className="price">14 999 руб.</p>
<a className="navbar-brand p-0" href="#">
<Image src={IconDelete} alt="Удалить" width="25" />
</a>
</Container>
<Container className="container-products p-0">
<Image className='imageOfProduct' src={Chair3}/>
<div className="title-product">Кресло</div>
<div className="articul">Артикул 6488268</div>
<div className="price">7 999 руб.</div>
<a className="navbar-brand p-0" href="#">
<Image src={IconDelete} alt="Удалить" width="25" />
</a>
</Container>
</Col>
<Col sm={4}>
<Card>
<Card.Body>
<Card.Title>Ваша корзина</Card.Title>
<Card.Text className='price-text'>Общая цена</Card.Text>
<Card.Text className='price-count'>22 998 руб.</Card.Text>
<Button className='btn d-block mx-auto'>Перейти <br /> к оформлению</Button>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
};
export default Page3;

29
laba4/src/pages/Page4.css Normal file
View File

@ -0,0 +1,29 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;500;600;700&display=swap");
.accountPage .container {
padding: 20%;
padding-top: 8%;
}
.accountPage h1 {
font-family: "Montserrat Alternates", sans-serif;
font-size: 35px;
padding-bottom: 15px;
color:#533908;
}
.accountPage .form.text {
text-align: center;
font-family: "Montserrat Alternates", sans-serif;
}
.accountPage .form1 {
display: flex;
flex-direction: column;
margin: 3%;
}
.accountPage .my-3{
background-color: #d4c8ba;
border: 4px solid #d4c8ba;
color: #533908;
margin-top: 15px;
margin-bottom: 40px;
border-radius: 25px;
}

56
laba4/src/pages/Page4.jsx Normal file
View File

@ -0,0 +1,56 @@
import { Link } from 'react-router-dom';
import {
Container, Col, Row, Form, Button,
} from 'react-bootstrap';
import './Page4.css';
const Page4 = () => {
return (
<>
<div className="accountPage">
<Container>
<Row>
<Col className="mx-auto">
<Form.Text className='text-center'>
<h1>АВТОРИЗАЦИЯ</h1>
</Form.Text>
<Form method="post">
<Form.Group>
<Form.Label htmlFor="email">E-mail</Form.Label>
<Form.Control type="email" name="email" required />
</Form.Group>
<Form.Group>
<Form.Label htmlFor="password">Пароль</Form.Label>
<Form.Control type="password" name="password" required />
</Form.Group>
<Button className='my-3' type="submit" variant="secondary" as={Link} to="/page5">Войти</Button>
</Form>
</Col>
<Col className="mx-auto">
<Form.Text className='text-center'>
<h1>РЕГИСТРАЦИЯ</h1>
</Form.Text>
<Form method="post">
<Form.Group>
<Form.Label htmlFor="email">E-mail</Form.Label>
<Form.Control type="email" name="email" required />
</Form.Group>
<Form.Group>
<Form.Label htmlFor="password">Пароль</Form.Label>
<Form.Control type="password" name="password" required />
</Form.Group>
<Form.Group>
<Form.Label htmlFor="password">Повторите пароль</Form.Label>
<Form.Control type="password" name="password" required />
</Form.Group>
<Button className='my-3' type="submit" variant="outline-secondary">Зарегистрироваться</Button>
</Form>
</Col>
</Row>
</Container>
</div>
</>
);
};
export default Page4;

30
laba4/src/pages/Page5.jsx Normal file
View File

@ -0,0 +1,30 @@
import { Button, Table } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const Page5 = () => {
return (
<>
<div className="my-4 mx-4">
<Button as={Link} to="/page-edit" variant="secondary">Добавить товар</Button>
<Table striped variant="Light" className="mt-4">
<thead>
<th scope="col">№</th>
<th scope="col" className="w-10">Категория</th>
<th scope="col" className="w-30">Название</th>
<th scope="col" className="w-20">Цена</th>
<th scope="col" className="w-10">Количество</th>
<th scope="col" className="w-10">Цвет</th>
<th scope="col" className="w-30">Размеры</th>
<th scope="col" className="w-20">Общая цена</th>
<th scope="col"></th>
<th scope="col"></th>
</thead>
<tbody>
</tbody>
</Table>
</div>
</>
);
};
export default Page5;

50
laba4/src/pages/Page6.css Normal file
View File

@ -0,0 +1,50 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;500;600;700&display=swap");
.product{
font-family: "Montserrat Alternates";
}
.product .btn {
font-weight: 100;
margin-top: 10%;
margin-bottom: 3%;
color: white;
background-color: #533908;
border: #533908 3px solid;
}
.product .card-title{
font-weight: 600;
font-size: 23px;
color:#533908;
padding: 8px;
margin-bottom: 5%;
text-align: center;
}
.title-pageproduct {
font-size: 28px;
font-weight: 600;
color: #533908;
margin-top: 5%;
margin-left: 7%;
margin-bottom: 1.5%;
}
.product img {
width: 80%;
}
.product .card {
background-color: rgba(191, 180, 161, 1);
margin-right: 5%;
margin-left: 5%;
}
.product .parameter{
font-weight: 500;
padding: 5px;
font-size: 18px;
text-align: center;
color:#533908;
}
.product .info{
font-weight: 300;
padding: 5px;
text-align: center;
color:#533908;
}

41
laba4/src/pages/Page6.jsx Normal file
View File

@ -0,0 +1,41 @@
import {
Container, Row, Col, Card, Button,
} from 'react-bootstrap';
import Chair1 from '../assets/chair1.png';
import './Page6.css';
const Page6 = () => {
return (
<>
<Container className='product'>
<div className="title-pageproduct">Стул обеденный</div>
<Row className="row-cols-1 row-cols-md-2 row-col-lg-2 g-10">
<Col className="text-center">
<img className="rounded" src={Chair1} alt="..." />
</Col>
<Col>
<Card>
<Card.Body>
<Card.Title>Характеристики</Card.Title>
<Card.Text>
<div className="parameter">Цвет</div>
<div className="info">Темно-коричневый, темно-зеленый</div>
<div className="parameter">Размеры</div>
<div className="info">45 * 45 * 86 см</div>
<div className="parameter">Общая цена</div>
<div className="info">5 999 руб.</div>
<Button type="submit" variant='secondary' className="btn d-block mx-auto">
Добавить <br />
в корзину
</Button>
</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
</>
);
};
export default Page6;

70
laba4/src/pages/PageEdit.jsx Normal file
View File

@ -0,0 +1,70 @@
import { useState } from 'react';
import { Button, Form, Container } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const PageEdit = () => {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return (
<>
<Container className="col-md-5 my-5">
<div className="text-center">
<img id="image-preview" src="https://via.placeholder.com/200" className="rounded rounded-circle"
alt="placeholder" />
</div>
<Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Group className="mb-2" controlId="item">
<Form.Label htmlFor="item" className="form-label">Категория</Form.Label>
<Form.Select name='selected' required>
<option value="" selected>Выберите значение</option>
<option value="1">Стол</option>
<option value="2">Кресло</option>
<option value="3">Стул</option>
<option value="4">Диван</option>
</Form.Select>
</Form.Group>
<Form.Group className="mb-2" controlId="name">
<Form.Label>Название</Form.Label>
<Form.Control type="text" name="name"
maxlength="100" required />
</Form.Group>
<Form.Group className="mb-2" controlId="price">
<Form.Label>Цена</Form.Label>
<Form.Control type="number" name="price"
value="0.00" min="1000.00" step="0.50" required />
</Form.Group>
<Form.Group className="mb-2" controlId="count">
<Form.Label>Количество</Form.Label>
<Form.Control type="number" name="count"
value="0" min="1" step="1" required />
</Form.Group>
<Form.Group className="mb-2" controlId="color">
<Form.Label>Цвет</Form.Label>
<Form.Control type="color" name="color" style={{ width: '100%' }}
maxlength="100" required />
</Form.Group>
<Form.Group className="mb-2" controlId="file">
<Form.Label>Изображение</Form.Label>
<Form.Control type="file" name="image" accept="image/*" />
</Form.Group>
<Form.Group className="d-flex flex-md-row flex-column justify-content-center">
<Button className="btn-mw me-md-3 mb-md-0 mb-2 my-4" as={Link} to="/page5" variant="outline-secondary">Назад</Button>
<Button className="btn-mw me-md-3 mb-md-0 mb-2 my-4" type="submit" variant="secondary">Сохранить</Button>
</Form.Group>
</Form>
</Container>
</>
);
};
export default PageEdit;

17
laba4/src/pages/Pages.css Normal file
View File

@ -0,0 +1,17 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;500;600;700&display=swap");
.title {
font-family: "Montserrat Alternates";
font-weight: 400;
font-size: 40px;
color: #533908;
text-align: center;
padding: 10px;
margin-top: 3%;
margin-bottom: 3%;
width: fit-content;
margin-left: auto;
margin-right: auto;
border: 3px solid;
border-radius: 30%;
}

13
laba4/vite.config.js Normal file
View File

@ -0,0 +1,13 @@
/* eslint-disable import/no-extraneous-dependencies */
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
build: {
sourcemap: true,
chunkSizeWarningLimit: 1024,
emptyOutDir: true,
},
});