laba 4
This commit is contained in:
parent
725bc1aac6
commit
9c4908c899
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',
|
||||||
|
'max-len' : 'off',
|
||||||
|
'linebreak-style': '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
|
||||||
|
```
|
||||||
15
lab4/index.html
Normal file
15
lab4/index.html
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<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>ceramic.studio</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/alone.jpg
Normal file
BIN
lab4/src/assets/alone.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
lab4/src/assets/cup.jpg
Normal file
BIN
lab4/src/assets/cup.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
lab4/src/assets/cup1.jpg
Normal file
BIN
lab4/src/assets/cup1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
lab4/src/assets/cup2.jpg
Normal file
BIN
lab4/src/assets/cup2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
lab4/src/assets/cuporig.jpg
Normal file
BIN
lab4/src/assets/cuporig.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
lab4/src/assets/groups.jpg
Normal file
BIN
lab4/src/assets/groups.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
lab4/src/assets/image 3.jpg
Normal file
BIN
lab4/src/assets/image 3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
BIN
lab4/src/assets/image 4.jpg
Normal file
BIN
lab4/src/assets/image 4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
lab4/src/assets/image 5.jpg
Normal file
BIN
lab4/src/assets/image 5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
BIN
lab4/src/assets/plate.jpg
Normal file
BIN
lab4/src/assets/plate.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
lab4/src/assets/plate1.jpg
Normal file
BIN
lab4/src/assets/plate1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
lab4/src/assets/plate2.jpg
Normal file
BIN
lab4/src/assets/plate2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
lab4/src/assets/tarel.jpg
Normal file
BIN
lab4/src/assets/tarel.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
77
lab4/src/components/navigation/Navigation.css
Normal file
77
lab4/src/components/navigation/Navigation.css
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
/*
|
||||||
|
body{
|
||||||
|
background: #f4ecd9;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 5rem;
|
||||||
|
}
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
img.imageround {
|
||||||
|
margin: 1rem;
|
||||||
|
border-radius: 10%;
|
||||||
|
}
|
||||||
|
.mybutton {
|
||||||
|
background-color: #E0A762;
|
||||||
|
border: 2px solid #E0A762;
|
||||||
|
border-radius: 25px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.card{
|
||||||
|
padding: 2em;
|
||||||
|
background-color:rgba(234, 166, 63, 0.58);
|
||||||
|
border-radius: 10%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
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 screen and (min-width: 600px) {
|
||||||
|
input[type="text"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="password"],
|
||||||
|
textarea {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-text {
|
||||||
|
margin-top: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin-top: 90px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form div {
|
||||||
|
margin-bottom: 75px;
|
||||||
|
}
|
||||||
|
button[type="submit"] {
|
||||||
|
background-color: #E0A762;
|
||||||
|
border: 2px solid #E0A762;
|
||||||
|
margin-top: 25px;
|
||||||
|
border-radius: 25px;
|
||||||
|
}
|
||||||
|
.AdButton {
|
||||||
|
margin-top: 25px;
|
||||||
|
background-color: #E0A762;
|
||||||
|
border: 2px solid #E0A762;
|
||||||
|
border-radius: 25px;
|
||||||
|
color: #000000;
|
||||||
|
} */
|
||||||
|
|
||||||
76
lab4/src/components/navigation/Navigation.jsx
Normal file
76
lab4/src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
// import { Link } from 'react-router-dom';
|
||||||
|
// import { Navbar, Nav, Container } from 'react-bootstrap';
|
||||||
|
// import './Navigation.css';
|
||||||
|
|
||||||
|
// const Navigation = () => {
|
||||||
|
// return (
|
||||||
|
// <Navbar>
|
||||||
|
// <Container>
|
||||||
|
// <Navbar.Brand as={Link} to="/">
|
||||||
|
// ceramic.studio
|
||||||
|
// </Navbar.Brand>
|
||||||
|
// <Navbar.Toggle aria-controls="basic-navbar-nav" />
|
||||||
|
// <Navbar.Collapse id="basic-navbar-nav">
|
||||||
|
// <Nav className="me-auto">
|
||||||
|
// <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>
|
||||||
|
// </Navbar.Collapse>
|
||||||
|
// </Container>
|
||||||
|
// </Navbar>
|
||||||
|
// );
|
||||||
|
// };
|
||||||
|
|
||||||
|
// export default Navigation;
|
||||||
|
|
||||||
|
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' data-bs-theme='light' className='my-navbar'>
|
||||||
|
<Container fluid>
|
||||||
|
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'} className='mx-5'>
|
||||||
|
ceramic.studio
|
||||||
|
</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>
|
||||||
|
</Navbar.Collapse>
|
||||||
|
</Container>
|
||||||
|
</Navbar >
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Navigation.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
106
lab4/src/index.css
Normal file
106
lab4/src/index.css
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
/* 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%;
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* главная и картинки с закруглениями */
|
||||||
|
body{
|
||||||
|
background: #f4ecd9;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 5rem;
|
||||||
|
}
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
img.imageround {
|
||||||
|
margin: 1rem;
|
||||||
|
border-radius: 10%;
|
||||||
|
}
|
||||||
|
/* кнопка 2стр */
|
||||||
|
.mybutton {
|
||||||
|
background-color: #E0A762;
|
||||||
|
border: 2px solid #E0A762;
|
||||||
|
border-radius: 25px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
/* mk */
|
||||||
|
.card{
|
||||||
|
padding: 2em;
|
||||||
|
background-color:rgba(234, 166, 63, 0.58);
|
||||||
|
border-radius: 10%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
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 screen and (min-width: 600px) {
|
||||||
|
input[type="text"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="password"],
|
||||||
|
textarea {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-text {
|
||||||
|
margin-top: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin-top: 90px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form div {
|
||||||
|
margin-bottom: 75px;
|
||||||
|
}
|
||||||
|
button[type="submit"] {
|
||||||
|
background-color: #E0A762;
|
||||||
|
border: 2px solid #E0A762;
|
||||||
|
margin-top: 25px;
|
||||||
|
border-radius: 25px;
|
||||||
|
}
|
||||||
|
.AdButton {
|
||||||
|
margin-top: 25px;
|
||||||
|
background-color: #E0A762;
|
||||||
|
border: 2px solid #E0A762;
|
||||||
|
border-radius: 25px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
65
lab4/src/main.jsx
Normal file
65
lab4/src/main.jsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
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 Page4Edit from './pages/Page4Edit.jsx';
|
||||||
|
import PageAdmin from './pages/PageAdmin.jsx';
|
||||||
|
import PageEdit from './pages/PageEdit.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: '/page4-edit',
|
||||||
|
element: <Page4Edit />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/page-admin',
|
||||||
|
element: <PageAdmin />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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
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;
|
||||||
18
lab4/src/pages/Page1.jsx
Normal file
18
lab4/src/pages/Page1.jsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import tarel from '../assets/tarel.jpg';
|
||||||
|
import cup from '../assets/cuporig.jpg';
|
||||||
|
|
||||||
|
const Page1 = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="title text-center my-5">
|
||||||
|
<h1 style={{ fontSize: '2rem' }}>СТУДИЯ КЕРАМИКИ</h1>
|
||||||
|
<p className="lead text-muted">научим делать керамические изделия</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<img className="imageround" src={tarel} alt="tarel" />
|
||||||
|
<img className="imageround" src={cup} alt="cup" />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Page1;
|
||||||
38
lab4/src/pages/Page2.jsx
Normal file
38
lab4/src/pages/Page2.jsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { Container, Button } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
import image3 from '../assets/image 3.jpg';
|
||||||
|
import image4 from '../assets/image 4.jpg';
|
||||||
|
import image5 from '../assets/image 5.jpg';
|
||||||
|
|
||||||
|
const Page2 = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Container className="text-center my-5">
|
||||||
|
<h1>СТУДИЯ КЕРАМИКИ</h1>
|
||||||
|
<p>
|
||||||
|
Добро пожаловать в нашу студию керамики! Мы предлагаем уникальный опыт создания керамических изделий
|
||||||
|
руками с помощью наших опытных инструкторов. Мы проводим мастер-классы для всех возрастов и уровней опыта, от начинающих до продвинутых художников.
|
||||||
|
Мы создали специальную атмосферу, чтобы каждый участник мог наслаждаться творческим процессом
|
||||||
|
и получить максимальное удовольствие от создания своего уникального керамического изделия.
|
||||||
|
</p>
|
||||||
|
</Container>
|
||||||
|
<Container className="text-center my-5">
|
||||||
|
<img className="imageround" src={image3} alt="image3" />
|
||||||
|
<img className="imageround" src={image4} alt="image4" />
|
||||||
|
<img className="imageround" src={image5} alt="image5" />
|
||||||
|
</Container>
|
||||||
|
<Container className="text-center my-5">
|
||||||
|
<Link to="/page3">
|
||||||
|
<Button variant="primary" className="mybutton">
|
||||||
|
мастер-класс
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page2;
|
||||||
70
lab4/src/pages/Page3.jsx
Normal file
70
lab4/src/pages/Page3.jsx
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import alone from '../assets/alone.jpg';
|
||||||
|
import groups from '../assets/groups.jpg';
|
||||||
|
|
||||||
|
const Header = () => (
|
||||||
|
<div className="container text-center my-5">
|
||||||
|
<h1>МАСТЕР КЛАССЫ</h1>
|
||||||
|
<p>
|
||||||
|
Добро пожаловать в нашу студию керамики! Мы предлагаем уникальный опыт создания
|
||||||
|
керамических изделий руками с помощью наших опытных инструкторов. Мы проводим
|
||||||
|
мастер-классы для всех возрастов и уровней опыта, от начинающих до продвинутых
|
||||||
|
художников. Мы создали специальную атмосферу, чтобы каждый участник мог наслаждаться
|
||||||
|
творческим процессом и получить максимальное удовольствие от создания своего
|
||||||
|
уникального керамического изделия.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const Card = ({
|
||||||
|
// eslint-disable-next-line react/prop-types
|
||||||
|
image, title, price, description,
|
||||||
|
}) => (
|
||||||
|
<div className="col">
|
||||||
|
<div className="card">
|
||||||
|
<img src={image} className="imageround" alt="KITTI" />
|
||||||
|
<div className="card-body">
|
||||||
|
<h5 className="card-title">{title}</h5>
|
||||||
|
<h6 className="card-title">{price} рублей</h6>
|
||||||
|
<p className="card-text">{description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const Cards = () => (
|
||||||
|
<div className="container my-5">
|
||||||
|
<div className="row row-cols-1 row-cols-md-2 row-cols-lg-2 g-5">
|
||||||
|
<Card
|
||||||
|
image={alone}
|
||||||
|
title="Ручная лепка"
|
||||||
|
price="2600"
|
||||||
|
description="- На этом МК можно создать кружку / миску / стакан на выбор - МК проходит по выходным в группе - Продолжительность 2,5 часа - Опыт в лепке не нужен - Готовность работ - через 4 недели после МК - До 8 человек в группе"
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
image={groups}
|
||||||
|
title="Корпоративы"
|
||||||
|
price="от 3200"
|
||||||
|
description="- На этом МК каждый сможет создать кружку / миску на выбор - МК проходит по будням - Продолжительность 2,5 часа - Опыт в лепке не нужен - Готовность работ - через 4 недели после МК - Сумма расчитывается от количества человек"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const RegisterButton = () => (
|
||||||
|
<div className="container text-center my-5 mx-auto">
|
||||||
|
<Link to="/page4" className="btn mybutton">
|
||||||
|
Записаться
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const Page3 = () => (
|
||||||
|
<div>
|
||||||
|
<Header />
|
||||||
|
<Cards />
|
||||||
|
<RegisterButton />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Page3;
|
||||||
40
lab4/src/pages/Page4.jsx
Normal file
40
lab4/src/pages/Page4.jsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
|
|
||||||
|
const Page4 = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="form-text">
|
||||||
|
<h1>Регистрация</h1>
|
||||||
|
<h5>Заполни форму регистрации, чтобы записаться на мастер класс и мы с тобой свяжемся!<br />
|
||||||
|
В сообщении укажи вариант мастер класса.</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form method="post">
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="name">Фамилия Имя</label>
|
||||||
|
<input type="text" name="name" id="name" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="email">Электронный адрес</label>
|
||||||
|
<input type="email" name="email" id="email" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="sms">Сообщение</label>
|
||||||
|
<textarea name="message" id="sms"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit">Отправить данные</button>
|
||||||
|
<Link to="/page-admin" className="btn mybutton1">
|
||||||
|
Админ
|
||||||
|
</Link>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page4;
|
||||||
29
lab4/src/pages/Page4Edit.jsx
Normal file
29
lab4/src/pages/Page4Edit.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { Button, ButtonGroup, Table } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Page4 = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ButtonGroup>
|
||||||
|
<Button as={Link} to="/page-edit" 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>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</Table>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page4;
|
||||||
57
lab4/src/pages/PageAdmin.jsx
Normal file
57
lab4/src/pages/PageAdmin.jsx
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import { Container, Button, Table } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const PageAdmin = () => {
|
||||||
|
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="/page4-edit" variant="primary" className="mybutton">
|
||||||
|
Редактирование
|
||||||
|
</Button>
|
||||||
|
</Container>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default PageAdmin;
|
||||||
53
lab4/src/pages/PageEdit.jsx
Normal file
53
lab4/src/pages/PageEdit.jsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Button, Form } 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 (
|
||||||
|
<>
|
||||||
|
<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="AdButton btn-mw me-md-3" as={Link} to="/page4" variant="primary">Назад</Button>
|
||||||
|
<Button className="AdButton btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageEdit;
|
||||||
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,
|
||||||
|
},
|
||||||
|
});
|
||||||
BIN
lab4/Отчет 4 лаба.docx
Normal file
BIN
lab4/Отчет 4 лаба.docx
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user