4 лаба
This commit is contained in:
parent
d34341ad15
commit
0668cfb301
Binary file not shown.
26
lab4/.eslintrc.cjs
Normal file
26
lab4/.eslintrc.cjs
Normal file
@ -0,0 +1,26 @@
|
||||
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',
|
||||
'max-len': 'off',
|
||||
},
|
||||
}
|
||||
24
lab4/.gitignore
vendored
Normal file
24
lab4/.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?
|
||||
29
lab4/README.md
Normal file
29
lab4/README.md
Normal 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
|
||||
```
|
||||
14
lab4/index.html
Normal file
14
lab4/index.html
Normal file
@ -0,0 +1,14 @@
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Bouquets</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
lab4/jsconfig.json
Normal file
14
lab4/jsconfig.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"target": "ES2020",
|
||||
"jsx": "react",
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"**/node_modules/*"
|
||||
]
|
||||
}
|
||||
4344
lab4/package-lock.json
generated
Normal file
4344
lab4/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
lab4/package.json
Normal file
32
lab4/package.json
Normal 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
lab4/public/favicon.svg
Normal file
3
lab4/public/favicon.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 463 B |
0
lab4/src/App.css
Normal file
0
lab4/src/App.css
Normal file
22
lab4/src/App.jsx
Normal file
22
lab4/src/App.jsx
Normal 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-2' as="main" fluid>
|
||||
<Outlet />
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
App.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default App;
|
||||
BIN
lab4/src/assets/bouquet.png
Normal file
BIN
lab4/src/assets/bouquet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
lab4/src/assets/daisies.png
Normal file
BIN
lab4/src/assets/daisies.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
BIN
lab4/src/assets/daisy.png
Normal file
BIN
lab4/src/assets/daisy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
lab4/src/assets/gypsophila.png
Normal file
BIN
lab4/src/assets/gypsophila.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
BIN
lab4/src/assets/lilies.jpg
Normal file
BIN
lab4/src/assets/lilies.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
lab4/src/assets/pioni.jpg
Normal file
BIN
lab4/src/assets/pioni.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
lab4/src/assets/roses.png
Normal file
BIN
lab4/src/assets/roses.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
9
lab4/src/components/navigation/Navigation.css
Normal file
9
lab4/src/components/navigation/Navigation.css
Normal file
@ -0,0 +1,9 @@
|
||||
.my-navbar {
|
||||
background-color: #4B5146 !important;
|
||||
backdrop-filter: blur(10px);
|
||||
color: #FAF8F1;
|
||||
}
|
||||
|
||||
.my-navbar .link a:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
46
lab4/src/components/navigation/Navigation.jsx
Normal file
46
lab4/src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,46 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container, Nav, Navbar } from 'react-bootstrap';
|
||||
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();
|
||||
|
||||
return (
|
||||
<header>
|
||||
<div className='NavigationClass'>
|
||||
<Navbar expand='md' bg='dark' data-bs-theme='dark' className='my-navbar'>
|
||||
<Container fluid>
|
||||
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
|
||||
Bouquets
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls='main-navbar' />
|
||||
<Navbar.Collapse id='main-navbar'>
|
||||
<Nav className='me-auto link' activeKey={location.pathname}>
|
||||
<Nav.Link as={Link} to="/Page2">
|
||||
Букеты
|
||||
</Nav.Link>
|
||||
<Nav.Link as={Link} to="/Page3">
|
||||
Прайс
|
||||
</Nav.Link>
|
||||
<Nav.Link as={Link} to="/Page4">
|
||||
Отзывы
|
||||
</Nav.Link>
|
||||
<Nav.Link as={Link} to="/Page5">
|
||||
Связаться с нами
|
||||
</Nav.Link>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar >
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
272
lab4/src/index.css
Normal file
272
lab4/src/index.css
Normal file
@ -0,0 +1,272 @@
|
||||
body{
|
||||
background: #FAF8F1;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
p{
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
padding-top: 3%;
|
||||
}
|
||||
|
||||
|
||||
.root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
/* padding: 2rem; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.img_bouquet{
|
||||
height: 450px;
|
||||
width: 350px;
|
||||
margin-top: 70px;
|
||||
margin-bottom: 50px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.objects{
|
||||
height: 400px;
|
||||
width: 350px;
|
||||
margin-top: 70px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
img{
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.img_options{
|
||||
height: 350px;
|
||||
width: 350px;
|
||||
margin-top: 60px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
h1{
|
||||
text-align: center;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
h2{
|
||||
text-align: left;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
@media(max-width: 750px){
|
||||
.img_options{
|
||||
margin-left: 0;
|
||||
}
|
||||
.card{
|
||||
margin: 0 auto;
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container-fluid img{
|
||||
margin-top: 30px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
price table, th, td {
|
||||
width: auto;
|
||||
padding: 1em;
|
||||
margin-top: 30px;
|
||||
margin: auto;
|
||||
border: 3px solid;
|
||||
border-color: #4B5146;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
width: auto;
|
||||
padding: 1em;
|
||||
margin-top: 30px;
|
||||
margin: 20px;
|
||||
border: 3px solid;
|
||||
border-color: #4B5146;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550){
|
||||
table{
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 450px){
|
||||
img{
|
||||
height: 400px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.img_options{
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
table{
|
||||
font-size: 0.rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 330px){
|
||||
img{
|
||||
height: 250px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
table{
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
tr:hover {background-color: #EEDFCC;}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
border-radius: 25px;
|
||||
padding: 10px;
|
||||
border: 1px solid #f4ecd9;
|
||||
width: 100%;
|
||||
margin: 0 auto; /* Центрирует элемент горизонтально */
|
||||
}
|
||||
@media (min-width: 750px) {
|
||||
/* Для экранов шириной 750px и больше */
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
width: 100%; /* Уменьшенная ширина на больших экранах */
|
||||
margin: 0 auto; /* Центрирует элемент горизонтально */
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
padding: 2em;
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
border: 3px solid;
|
||||
border-color: #4B5146;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-text {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form div {
|
||||
margin-bottom: 75px;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
background-color: #EEDFCC;
|
||||
border: 2px solid #4B5146;
|
||||
margin-top: 45px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.btn{
|
||||
background-color: #EEDFCC;
|
||||
border: 2px solid #4B5146;
|
||||
margin-top: 45px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
add {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
add .container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.container-fluid h1 {
|
||||
font-size: 50px;
|
||||
text-align: left;
|
||||
padding-left: 5%;
|
||||
padding-top: 7%;
|
||||
}
|
||||
|
||||
.container-fluid h3{
|
||||
font-size: 100px;
|
||||
text-align: left;
|
||||
padding-left: 5%;
|
||||
font-size: 20px;
|
||||
padding-top: 3%;
|
||||
}
|
||||
|
||||
.container-fluid h2{
|
||||
text-align: left;
|
||||
padding-left: 5%;
|
||||
padding-top: 3%;
|
||||
}
|
||||
|
||||
.card{
|
||||
padding: 0.5em;
|
||||
background-color: #EEDFCC;
|
||||
border-radius: 25px;
|
||||
align-items: center;
|
||||
margin-top: 70px;
|
||||
font-size: 25px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
#image-preview{
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-weight: lighter;
|
||||
text-align: center;
|
||||
font-size: 1.8vw;
|
||||
}
|
||||
|
||||
.caption_2 {
|
||||
font-weight: lighter;
|
||||
text-align: center;
|
||||
font-size: 1.8vw;
|
||||
color: #5d5d5d;
|
||||
}
|
||||
|
||||
.caption_3 {
|
||||
font-weight: lighter;
|
||||
text-align: center;
|
||||
font-size: 1.8vw;
|
||||
background-color: #f4ecd9;
|
||||
}
|
||||
|
||||
a.btn.mybutton{
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
margin-top: 10px;
|
||||
border-radius: 50%!important;
|
||||
}
|
||||
75
lab4/src/main.jsx
Normal file
75
lab4/src/main.jsx
Normal file
@ -0,0 +1,75 @@
|
||||
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 Page7 from './pages/Page7.jsx';
|
||||
import Page8 from './pages/Page8.jsx';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
index: true,
|
||||
path: '/',
|
||||
element: <Page1 />,
|
||||
title: 'Главная страница',
|
||||
},
|
||||
{
|
||||
path: '/page2',
|
||||
element: <Page2 />,
|
||||
title: 'Букеты',
|
||||
},
|
||||
{
|
||||
path: '/page3',
|
||||
element: <Page3 />,
|
||||
title: 'Прайс',
|
||||
},
|
||||
{
|
||||
path: '/page4',
|
||||
element: <Page4 />,
|
||||
title: 'Отзывы',
|
||||
},
|
||||
{
|
||||
path: '/page5',
|
||||
element: <Page5 />,
|
||||
title: 'Связаться с нами',
|
||||
},
|
||||
{
|
||||
path: '/page6',
|
||||
element: <Page6 />,
|
||||
title: 'Просмотр заявок',
|
||||
},
|
||||
{
|
||||
path: '/page7',
|
||||
element: <Page7 />,
|
||||
title: 'Редактирование',
|
||||
},
|
||||
{
|
||||
path: '/page8',
|
||||
element: <Page8 />,
|
||||
title: 'Добавить товар',
|
||||
},
|
||||
];
|
||||
|
||||
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
lab4/src/pages/ErrorPage.jsx
Normal file
19
lab4/src/pages/ErrorPage.jsx
Normal 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;
|
||||
22
lab4/src/pages/Page1.jsx
Normal file
22
lab4/src/pages/Page1.jsx
Normal file
@ -0,0 +1,22 @@
|
||||
// import { Link } from 'react-router-dom';
|
||||
import bouquet from '../assets/bouquet.png';
|
||||
|
||||
const Page1 = () => {
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<img className="img_bouquet" src = {bouquet} alt="bouquet" align="right" />
|
||||
<h1>
|
||||
Букеты для самых близких
|
||||
</h1>
|
||||
<h3>
|
||||
На нашем сайте вы можете собрать букет самостоятельно.
|
||||
</h3>
|
||||
<h2>
|
||||
Телефон: +79000000001<br />
|
||||
Эл. почта: bouquets@gmail.com
|
||||
</h2>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page1;
|
||||
37
lab4/src/pages/Page2.jsx
Normal file
37
lab4/src/pages/Page2.jsx
Normal file
@ -0,0 +1,37 @@
|
||||
import daisies from '../assets/daisies.png';
|
||||
import roses from '../assets/roses.png';
|
||||
import gypsophila from '../assets/gypsophila.png';
|
||||
|
||||
const Page2 = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>
|
||||
Варианты собранных букетов:
|
||||
</h1>
|
||||
<div className="container text-center">
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<img className="img_options" src = {daisies} alt="daisies" />
|
||||
<p>
|
||||
Букет из кустовых ромашек<br />15 веточек в красивом оформлении<br />Цена: 2900 руб.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col">
|
||||
<img className="img_options" src = {roses} alt="roses" />
|
||||
<p>
|
||||
Букет из кустовых роз<br />Диаметр 40 см. Цвет роз можно поменять<br />Цена: 7500 руб.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col">
|
||||
<img className="img_options" src = {gypsophila} alt="gypsophila" />
|
||||
<p>
|
||||
Букет из гипсофилов<br />Диаметр 30-35 см. Цвет гипсофилов можно поменять<br />Цена: 5000 руб.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page2;
|
||||
49
lab4/src/pages/Page3.jsx
Normal file
49
lab4/src/pages/Page3.jsx
Normal file
@ -0,0 +1,49 @@
|
||||
// import { Table } from 'react-bootstrap';
|
||||
|
||||
const Page3 = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>
|
||||
Цены на цветы (поштучно) при составлении букетов самостоятельно:
|
||||
</h1>
|
||||
<table>
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: '#EEDFCC' }}>
|
||||
<th scope="col" height="100">Цветок</th>
|
||||
<th scope="col">Цвет</th>
|
||||
<th scope="col">Цена, руб.</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" height="70">Роза</th>
|
||||
<td>Красный</td>
|
||||
<td>200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" height="70">Роза</th>
|
||||
<td>Белый</td>
|
||||
<td>150</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" height="70">Тюльпан</th>
|
||||
<td>Белый</td>
|
||||
<td>170</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" height="70">Тюльпан</th>
|
||||
<td>Жёлтый</td>
|
||||
<td>150</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" height="70">Лилия</th>
|
||||
<td>Розовый</td>
|
||||
<td>170</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page3;
|
||||
30
lab4/src/pages/Page4.jsx
Normal file
30
lab4/src/pages/Page4.jsx
Normal file
@ -0,0 +1,30 @@
|
||||
const Page4 = () => {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<h5 className="card-title">Отзывы о нашем сайте:</h5>
|
||||
<p className="card-text">
|
||||
Очень довольна покупкой цветов на этом сайте! Букет был свежим и красивым, доставка произошла вовремя. Отличное качество и отличный сервис!
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Очень довольна покупкой цветов на этом сайте! Букет был свежим и красивым, доставка произошла вовремя. Отличное качество и отличный сервис!
|
||||
</li>
|
||||
<li>
|
||||
Заказывала цветы для своей сестры на День рождения! Цветы были свежими и продолжали радовать долгое время. Очень рекомендую этот сайт!
|
||||
</li>
|
||||
<li>
|
||||
Очень удобный сайт для заказа цветов! Легко найти нужный букет, выбрать доставку и оплатить. Цветы пришли свежими и красивыми. Большое спасибо за отличный сервис!
|
||||
</li>
|
||||
<li>
|
||||
Никогда не видела такого разнообразия цветов на одном сайте! Было трудно выбрать, но остановилась на прекрасном букете роз. Качество и цена - просто отличные!
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page4;
|
||||
50
lab4/src/pages/Page5.jsx
Normal file
50
lab4/src/pages/Page5.jsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { useState } from 'react';
|
||||
import { Button, Form } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Page5 = () => {
|
||||
const [validated, setValidated] = useState(false);
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
const form = event.currentTarget;
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
setValidated(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="row justify-content-center">
|
||||
<Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-2" controlId="lastname">
|
||||
<Form.Label>Фамилия</Form.Label>
|
||||
<Form.Control type="text" name="lastname" required />
|
||||
<Form.Control.Feedback>Фамилия заполнена</Form.Control.Feedback>
|
||||
<Form.Control.Feedback type="invalid">Фамилия не заполнена</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="firstname">
|
||||
<Form.Label>Имя</Form.Label>
|
||||
<Form.Control type="text" name="firstname" required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="email">
|
||||
<Form.Label>E-mail</Form.Label>
|
||||
<Form.Control type="email" name="email" placeholder="name@example.ru" required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="date">
|
||||
<Form.Label>Дата</Form.Label>
|
||||
<Form.Control type="date" name="date" required />
|
||||
</Form.Group>
|
||||
<div className="text-center">
|
||||
<Button className="w-50" variant="primary" type="submit">Отправить</Button>
|
||||
</div>
|
||||
<Link to="/page6">
|
||||
Вход для админа
|
||||
</Link>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page5;
|
||||
57
lab4/src/pages/Page6.jsx
Normal file
57
lab4/src/pages/Page6.jsx
Normal file
@ -0,0 +1,57 @@
|
||||
import { Container, Button, Table } from 'react-bootstrap';
|
||||
|
||||
const Page6 = () => {
|
||||
return (
|
||||
<>
|
||||
<Container className="text-center my-5">
|
||||
<h1>Просмотр заявок</h1>
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" width="200" height="100">
|
||||
ФИО
|
||||
</th>
|
||||
<th scope="col" width="200">
|
||||
Электронный адрес
|
||||
</th>
|
||||
<th scope="col" width="200">
|
||||
Сообщение
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" height="70">Чубыкина Полина Павловна</th>
|
||||
<td>chubykina@mail.ru</td>
|
||||
<td>Любимой дочке</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" height="70"></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" height="70"></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" height="70"></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" height="70"></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
<Button href="/page7" variant="primary" className="mybutton">
|
||||
Редактирование
|
||||
</Button>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Page6;
|
||||
26
lab4/src/pages/Page7.jsx
Normal file
26
lab4/src/pages/Page7.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { Button, ButtonGroup, Table } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Page7 = () => {
|
||||
return (
|
||||
<>
|
||||
<ButtonGroup>
|
||||
<Button as={Link} to="/page8" variant="success">Добавить товар</Button>
|
||||
</ButtonGroup>
|
||||
<Table className="mt-2" 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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</Table>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page7;
|
||||
53
lab4/src/pages/Page8.jsx
Normal file
53
lab4/src/pages/Page8.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
import { useState } from 'react';
|
||||
import { Button, Form } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Page8 = () => {
|
||||
const [validated, setValidated] = useState(false);
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
const form = event.currentTarget;
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
setValidated(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<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">
|
||||
<Form.Label htmlFor="item" className="form-label">Товары</Form.Label>
|
||||
<Form.Select id="item" name='selected' required>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2">
|
||||
<Form.Label htmlFor="price">Цена</Form.Label>
|
||||
<Form.Control id="price" type="number" name="price"
|
||||
defaultValue="0.00" min="1000.00" step="0.50" required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2">
|
||||
<Form.Label htmlFor="count">Количество</Form.Label>
|
||||
<Form.Control id="count" type="number" name="count"
|
||||
defaultValue="0" min="1" step="1" required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2">
|
||||
<Form.Label htmlFor="image">Изображение</Form.Label>
|
||||
<Form.Control id="image" 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" as={Link} to="/page7" variant="secondary">Назад</Button>
|
||||
<Button className="btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page8;
|
||||
13
lab4/vite.config.js
Normal file
13
lab4/vite.config.js
Normal 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,
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user