Готовая лаба 4
This commit is contained in:
parent
1a58717dfc
commit
e928832056
25
laba4/.eslintrc.cjs
Normal file
25
laba4/.eslintrc.cjs
Normal 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
24
laba4/.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
laba4/README.md
Normal file
29
laba4/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
laba4/index.html
Normal file
15
laba4/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>Cake shop</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
14
laba4/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
laba4/package-lock.json
generated
Normal file
4344
laba4/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
laba4/package.json
Normal file
32
laba4/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
laba4/public/favicon.svg
Normal file
3
laba4/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
laba4/src/App.css
Normal file
0
laba4/src/App.css
Normal file
22
laba4/src/App.jsx
Normal file
22
laba4/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
laba4/src/assets/about_us.png
Normal file
BIN
laba4/src/assets/about_us.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
BIN
laba4/src/assets/cake.png
Normal file
BIN
laba4/src/assets/cake.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
laba4/src/assets/dad.png
Normal file
BIN
laba4/src/assets/dad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 372 KiB |
BIN
laba4/src/assets/ellipse.png
Normal file
BIN
laba4/src/assets/ellipse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
laba4/src/assets/mam.png
Normal file
BIN
laba4/src/assets/mam.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
BIN
laba4/src/assets/podruge.png
Normal file
BIN
laba4/src/assets/podruge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
62
laba4/src/components/navigation/Navigation.css
Normal file
62
laba4/src/components/navigation/Navigation.css
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');
|
||||||
|
.Container {
|
||||||
|
line-height: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-navbar {
|
||||||
|
background-color: #90604C !important;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
color: #FFF6EC;
|
||||||
|
max-width: 300vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-navbar .link a:hover {
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background-color: #90604C;
|
||||||
|
color: #FFF6EC;
|
||||||
|
font-size: 25px;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
margin-bottom: 6vh;
|
||||||
|
}
|
||||||
|
.navbar-brand {
|
||||||
|
font-family: 'Marck Script', cursive;
|
||||||
|
font-size: 10vw;
|
||||||
|
line-height: 90px;
|
||||||
|
|
||||||
|
}
|
||||||
|
a:link,
|
||||||
|
a:hover,
|
||||||
|
a:active,
|
||||||
|
a:visited {
|
||||||
|
color: #fff6ec;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.my-navbar,
|
||||||
|
.main-navbar{
|
||||||
|
max-height: 800px;
|
||||||
|
} */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
--------------
|
||||||
|
.my-navbar {
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-navbar .link a:hover {
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavigationClass{
|
||||||
|
justify-content: start;
|
||||||
|
} */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
43
laba4/src/components/navigation/Navigation.jsx
Normal file
43
laba4/src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
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 ?? '/'}>
|
||||||
|
Тяп-ляп
|
||||||
|
</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;
|
||||||
287
laba4/src/index.css
Normal file
287
laba4/src/index.css
Normal file
@ -0,0 +1,287 @@
|
|||||||
|
body{
|
||||||
|
background: #FFF6EC;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,h3,h4,p,img{background-color: #FFF6EC !important}
|
||||||
|
|
||||||
|
/* .container-fluid {
|
||||||
|
line-height: 70px;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
background-color: #90604C;
|
||||||
|
color: #FFF6EC;
|
||||||
|
font-size: 25px;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
margin-bottom: 6vh;
|
||||||
|
max-height: 170px;
|
||||||
|
}
|
||||||
|
.navbar-brand {
|
||||||
|
font-family: 'Marck Script', cursive;
|
||||||
|
font-size: 10vw;
|
||||||
|
|
||||||
|
} */
|
||||||
|
|
||||||
|
a:link,
|
||||||
|
a:hover,
|
||||||
|
a:active,
|
||||||
|
a:visited {
|
||||||
|
color: #fff6ec;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 7vw;
|
||||||
|
line-height: 1;
|
||||||
|
color: #3D160B !important;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 3vw;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.image2 {
|
||||||
|
flex: none;
|
||||||
|
border-radius: 40px;
|
||||||
|
margin: auto;
|
||||||
|
width: 30vw;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 4vw;
|
||||||
|
color: #3D160B !important;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
text-align: center;
|
||||||
|
color: #3D160B !important;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 5vw;
|
||||||
|
text-align: center;
|
||||||
|
color: #3D160B !important;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 2.4vw;
|
||||||
|
color: #3D160B !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=======*/
|
||||||
|
|
||||||
|
.row{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.main_pannel{
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.table{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st2{
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.image1 {
|
||||||
|
flex: none;
|
||||||
|
border-radius: 40px;
|
||||||
|
margin: auto;
|
||||||
|
width: 32vw;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.image-text {
|
||||||
|
margin: 3vw;
|
||||||
|
font-size: 4vw;
|
||||||
|
background-image: url('/src/assets/ellipse.png');
|
||||||
|
position: relative;
|
||||||
|
border-radius: 80px;
|
||||||
|
width: 30vw;
|
||||||
|
height: 30vw!important;
|
||||||
|
background-size: 30vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn,
|
||||||
|
button[type="submit"],
|
||||||
|
.btn-success{
|
||||||
|
background-color: #3D160B !important;
|
||||||
|
border: 3px solid #3D160B;
|
||||||
|
width: 20vw;
|
||||||
|
margin-top: 45px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-size: 3vw;
|
||||||
|
margin-left: 2vw;
|
||||||
|
padding-right: 8px !important;
|
||||||
|
}
|
||||||
|
.column2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin{
|
||||||
|
font-size: 3vw;
|
||||||
|
margin-left: 2vw;
|
||||||
|
padding-right: 8px !important;
|
||||||
|
margin-top: 40px;
|
||||||
|
border-radius: 25px;
|
||||||
|
width: 20vw;
|
||||||
|
height: 10vw;
|
||||||
|
}
|
||||||
|
.adminAut{
|
||||||
|
font-size: 2vw;
|
||||||
|
border-radius: 25px;
|
||||||
|
width: 10vw;
|
||||||
|
}
|
||||||
|
.AdminButton{
|
||||||
|
border-radius: 25px;
|
||||||
|
width: 20vw;
|
||||||
|
font-size: 1.5vw;
|
||||||
|
margin-left: 40vw;
|
||||||
|
}
|
||||||
|
.cakes{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
.btn{
|
||||||
|
width: 70vw;
|
||||||
|
font-size: 4vw;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 8vw;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 8vw;
|
||||||
|
|
||||||
|
}
|
||||||
|
.image1,
|
||||||
|
.image2 {
|
||||||
|
width: 60vw;
|
||||||
|
}
|
||||||
|
.image-text {
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vw!important;
|
||||||
|
background-size: 50vw;
|
||||||
|
font-size: 7vw;
|
||||||
|
}
|
||||||
|
.col-4{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.columnP1{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center
|
||||||
|
}
|
||||||
|
.columnP2{
|
||||||
|
width: 80%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.st2,
|
||||||
|
.column1 {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
font-size: 8vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 5vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
button[type="submit"] {
|
||||||
|
font-size: 4vw;
|
||||||
|
width: 30vw;
|
||||||
|
height: 20vw;
|
||||||
|
}
|
||||||
|
.admin{
|
||||||
|
font-size: 4vw;
|
||||||
|
width: 30vw;
|
||||||
|
height: 20vw;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 3vw;
|
||||||
|
margin-top: 23px;
|
||||||
|
}
|
||||||
|
.adminAut{
|
||||||
|
font-size: 6vw;
|
||||||
|
width: 25vw;
|
||||||
|
}
|
||||||
|
.AdminButton{
|
||||||
|
width: 30vw;
|
||||||
|
font-size: 3vw;
|
||||||
|
margin-left: 10vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="phone"],
|
||||||
|
input[type="password"],
|
||||||
|
textarea {
|
||||||
|
border-radius: 25px;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #f4ecd9;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
input[type="text"],
|
||||||
|
input[type="phone"],
|
||||||
|
input[type="password"],
|
||||||
|
textarea {
|
||||||
|
width: 50%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-text {
|
||||||
|
margin-top: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin-top: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form div {
|
||||||
|
margin-bottom: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
table, th, td {
|
||||||
|
font-size: 3vw;
|
||||||
|
width: auto;
|
||||||
|
padding: 20px;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin: auto;
|
||||||
|
border: 3px solid;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formAdd{
|
||||||
|
width: 80vw;
|
||||||
|
margin-left: 10vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
79
laba4/src/main.jsx
Normal file
79
laba4/src/main.jsx
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
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';
|
||||||
|
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: '/page5',
|
||||||
|
element: <Page5 />,
|
||||||
|
title: 'Прайс на декор',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/page6',
|
||||||
|
element: <Page6 />,
|
||||||
|
title: 'Готовые варианты',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/page7',
|
||||||
|
element: <Page7 />,
|
||||||
|
title: 'Редактирование товаров',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/page8',
|
||||||
|
element: <Page8 />,
|
||||||
|
title: 'Вход админа',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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
19
laba4/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;
|
||||||
23
laba4/src/pages/Page1.jsx
Normal file
23
laba4/src/pages/Page1.jsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import cake from '../assets/cake.png';
|
||||||
|
|
||||||
|
const Page1 = () => {
|
||||||
|
return (
|
||||||
|
<div className="h-100 d-flex flex-column">
|
||||||
|
<main className="container main_pannel">
|
||||||
|
<div className="container table">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-8 column1">
|
||||||
|
<h2>
|
||||||
|
У нас самые вкусные торты <br />(в узких кругах)
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="col-4 column2">
|
||||||
|
<img className="image1" src={cake} alt="cake" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Page1;
|
||||||
27
laba4/src/pages/Page2.jsx
Normal file
27
laba4/src/pages/Page2.jsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Page2 = () => {
|
||||||
|
return (
|
||||||
|
<main className="container main_pannel">
|
||||||
|
<div className="container table">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-6 columnP1">
|
||||||
|
<h3 className="image-text">
|
||||||
|
Торт <br />800 руб/кг
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="col-6 columnP2">
|
||||||
|
<h4>Декор оплачивается отдельно!</h4>
|
||||||
|
<Link to="/page5" className="btn">
|
||||||
|
Посмотреть прайс на декор
|
||||||
|
</Link>
|
||||||
|
<Link to="/page6" className="btn">
|
||||||
|
Готовые варианты тортов
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Page2;
|
||||||
28
laba4/src/pages/Page3.jsx
Normal file
28
laba4/src/pages/Page3.jsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import aboutUs from '../assets/about_us.png';
|
||||||
|
|
||||||
|
const Page3 = () => {
|
||||||
|
return (
|
||||||
|
<main className="container main_pannel">
|
||||||
|
<div className="container table">
|
||||||
|
<h1>О нас</h1>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-4 st1">
|
||||||
|
<img className="image2" src={aboutUs} alt="about_us" />
|
||||||
|
</div>
|
||||||
|
<div className="col-8 st2">
|
||||||
|
<p>
|
||||||
|
Добро пожаловать в кондитерскую "Тяп-ляп" -
|
||||||
|
место, где пекутся торты с любовью, юмором и другими начинками! <br />
|
||||||
|
<br />
|
||||||
|
У нас Вы можете заказать торты на любой случай или просто,
|
||||||
|
чтобы порадовать себя.
|
||||||
|
Каждый торт из кондитерской “Тяп-ляп” идеально подходит
|
||||||
|
для воскресных завтраков, понедельников без коллег и сред уныния!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Page3;
|
||||||
32
laba4/src/pages/Page4.jsx
Normal file
32
laba4/src/pages/Page4.jsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { Button } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Page4 = () => {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<div className="form-text">
|
||||||
|
<p>Заполните форму, чтобы оставить заявку. <br /> Мы Вам перезвоним!</p>
|
||||||
|
</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="phone">Номер телефона</label>
|
||||||
|
<input type="phone" name="phone" id="phone" required />
|
||||||
|
</div>
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="message">Оставьте комментарий</label>
|
||||||
|
<textarea name="message" id="message"></textarea>
|
||||||
|
</div>
|
||||||
|
<Button type="submit">Отправить данные</Button>
|
||||||
|
<Link to="/page8" className="btn">
|
||||||
|
Вход для админа
|
||||||
|
</Link>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page4;
|
||||||
41
laba4/src/pages/Page5.jsx
Normal file
41
laba4/src/pages/Page5.jsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
const Page5 = () => {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<div className="price">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col" style={{ height: '100px' }}>Декор</th>
|
||||||
|
<th scope="col">Количество</th>
|
||||||
|
<th scope="col">Цена/руб</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row" style={{ height: '70px' }}>Ягоды</th>
|
||||||
|
<td>100г</td>
|
||||||
|
<td>150</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row" style={{ height: '70px' }}>Леденцы</th>
|
||||||
|
<td>1шт</td>
|
||||||
|
<td>40</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row" style={{ height: '70px' }}>Шоколад</th>
|
||||||
|
<td>100г</td>
|
||||||
|
<td>90</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row" style={{ height: '70px' }}>Зефир</th>
|
||||||
|
<td>100г</td>
|
||||||
|
<td>50</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page5;
|
||||||
29
laba4/src/pages/Page6.jsx
Normal file
29
laba4/src/pages/Page6.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import mam from '../assets/mam.png';
|
||||||
|
import dad from '../assets/dad.png';
|
||||||
|
import podruge from '../assets/podruge.png';
|
||||||
|
|
||||||
|
const Page6 = () => {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<h1>Варианты готовых тортов:</h1>
|
||||||
|
<div className="container text-center">
|
||||||
|
<div className="row cakes">
|
||||||
|
<div className="col">
|
||||||
|
<img src={mam} className="img_options" alt="mam" width="400" />
|
||||||
|
<p>Маме<br />Цена: 1500 руб.</p>
|
||||||
|
</div>
|
||||||
|
<div className="col">
|
||||||
|
<img src={dad} className="img_options" alt="dad" width="400" />
|
||||||
|
<p>Папе<br />Цена: 1600 руб.</p>
|
||||||
|
</div>
|
||||||
|
<div className="col">
|
||||||
|
<img src={podruge} className="img_options" alt="podruge" width="400" />
|
||||||
|
<p>Подружке<br />Цена: 1200 руб.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page6;
|
||||||
56
laba4/src/pages/Page7.jsx
Normal file
56
laba4/src/pages/Page7.jsx
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Page7 = () => {
|
||||||
|
return (
|
||||||
|
<div className="container-fluid p-2">
|
||||||
|
<div className="btn-group" role="group">
|
||||||
|
<Link to="/page-edit" className="btn btn-success">
|
||||||
|
Добавить новый товар
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<table className="table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">Товар</th>
|
||||||
|
<th scope="col">Цена</th>
|
||||||
|
<th scope="col">Количество</th>
|
||||||
|
<th scope="col">Сумма</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
{/* <tbody>
|
||||||
|
{items.map(item => (
|
||||||
|
<tr key={item.id}>
|
||||||
|
<td>{item.id}</td>
|
||||||
|
<td>{item.name}</td>
|
||||||
|
<td>{item.price}</td>
|
||||||
|
<td>{item.count}</td>
|
||||||
|
<td>{item.sum}</td>
|
||||||
|
<td><button className="btn btn-primary"/
|
||||||
|
onClick={() => handleEditItem(item.id)}>Редактировать</button></td>
|
||||||
|
<td><button className="btn btn-danger" /
|
||||||
|
onClick={() => handleDeleteItem(item.id)}>Удалить</button></td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody> */}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page7;
|
||||||
26
laba4/src/pages/Page8.jsx
Normal file
26
laba4/src/pages/Page8.jsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Page8 = () => {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<div className="form-text">
|
||||||
|
<p>Вход для администратора</p>
|
||||||
|
</div>
|
||||||
|
<form>
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="login">Введите логин</label>
|
||||||
|
<input type="text" name="login" id="login" required autoComplete="username" />
|
||||||
|
</div>
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="passwordAdmin">Введите пароль</label>
|
||||||
|
<input type="password" name="passwordAdmin" id="passwordAdmin" required autoComplete="current-password" />
|
||||||
|
</div>
|
||||||
|
<Link to="/page7" className="btn adminAut">
|
||||||
|
Вход
|
||||||
|
</Link>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page8;
|
||||||
47
laba4/src/pages/PageEdit.jsx
Normal file
47
laba4/src/pages/PageEdit.jsx
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const PageEdit = () => {
|
||||||
|
const [selected, setSelected] = useState('');
|
||||||
|
const [price, setPrice] = useState(0.00);
|
||||||
|
const [count, setCount] = useState(0);
|
||||||
|
const [setImage] = useState(null);
|
||||||
|
|
||||||
|
const handleSubmit = (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
// Обработка данных формы
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="container-fluid p-2">
|
||||||
|
<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" className="needs-validation" noValidate onSubmit={handleSubmit}>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label htmlFor="item" className="form-label">Товары</label>
|
||||||
|
<select id="item" className="form-select" name="selected" required value={selected} onChange={(event) => setSelected(event.target.value)}>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label" htmlFor="price">Цена</label>
|
||||||
|
<input id="price" name="price" className="form-control" type="number" value={price} min="1000.00" step="0.50" required onChange={(event) => setPrice(event.target.value)} />
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label" htmlFor="count">Количество</label>
|
||||||
|
<input id="count" name="count" className="form-control" type="number" value={count} min="1" step="1" required onChange={(event) => setCount(event.target.value)} />
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label" htmlFor="image">Изображение</label>
|
||||||
|
<input id="image" type="file" name="image" className="form-control" accept="image/*" onChange={(event) => setImage(event.target.files[0])} />
|
||||||
|
</div>
|
||||||
|
<Link to="/page7" className="btn">
|
||||||
|
Назад
|
||||||
|
</Link>
|
||||||
|
<button type="submit" className="btn btn-primary">Сохранить</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageEdit;
|
||||||
13
laba4/vite.config.js
Normal file
13
laba4/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