Lab4
This commit is contained in:
parent
fab58b2e30
commit
e4de913a50
24
Lab4/.eslintrc.cjs
Normal file
24
Lab4/.eslintrc.cjs
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
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',
|
||||||
|
},
|
||||||
|
}
|
||||||
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>Elitist</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
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
24
Lab4/src/App.jsx
Normal file
24
Lab4/src/App.jsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Container } from 'react-bootstrap';
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import './App.css';
|
||||||
|
import Footer from './components/footer/Footer.jsx';
|
||||||
|
import Navigation from './components/navigation/Navigation.jsx';
|
||||||
|
|
||||||
|
const App = ({ routes }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navigation routes={routes}></Navigation>
|
||||||
|
<Container className='p-2' as="main" fluid>
|
||||||
|
<Outlet />
|
||||||
|
</Container>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
App.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
Lab4/src/assets/4j.png
Normal file
BIN
Lab4/src/assets/4j.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
Lab4/src/assets/gl.PNG
Normal file
BIN
Lab4/src/assets/gl.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 840 KiB |
BIN
Lab4/src/assets/kafka.jpg
Normal file
BIN
Lab4/src/assets/kafka.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
Lab4/src/assets/leot.jpg
Normal file
BIN
Lab4/src/assets/leot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
Lab4/src/assets/pandp.jpg
Normal file
BIN
Lab4/src/assets/pandp.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
Lab4/src/assets/stranger.jpg
Normal file
BIN
Lab4/src/assets/stranger.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
55
Lab4/src/components/CardBook/CardBook.css
Normal file
55
Lab4/src/components/CardBook/CardBook.css
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
.card-book {
|
||||||
|
padding: 15px;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
flex: 0 0 calc(20% - 20px); /* Уменьшение размера книг на 20% */
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-text {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title,
|
||||||
|
.card-author {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-book-margin {
|
||||||
|
margin-right: 10px; /* Устанавливает отступ справа между карточками */
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 340px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Медиа-запросы для изменения ширины изображения на различных экранах */
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.card-img {
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.card-img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Медиа-запросы для изменения ширины текста на различных экранах */
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.card-title,
|
||||||
|
.card-author {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.card-title,
|
||||||
|
.card-author {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
17
Lab4/src/components/CardBook/CardBook.jsx
Normal file
17
Lab4/src/components/CardBook/CardBook.jsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
/* eslint-disable linebreak-style */
|
||||||
|
/* eslint-disable import/no-useless-path-segments */
|
||||||
|
// import React from 'react';
|
||||||
|
|
||||||
|
import '../CardBook/CardBook.css';
|
||||||
|
|
||||||
|
const CardBook = () => {
|
||||||
|
return (
|
||||||
|
<div className="card-book">
|
||||||
|
<img src="/src/assets/pandp.jpg" alt="Book" className="img-fluid" />
|
||||||
|
<h3>Гордость и Предубеждение</h3>
|
||||||
|
<h3>Д. Остен</h3>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CardBook;
|
||||||
10
Lab4/src/components/footer/Footer.css
Normal file
10
Lab4/src/components/footer/Footer.css
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
.my-footer {
|
||||||
|
width: 100%;
|
||||||
|
font-family: Santa Catarina;
|
||||||
|
background-color: #382F1E;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
11
Lab4/src/components/footer/Footer.jsx
Normal file
11
Lab4/src/components/footer/Footer.jsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import './Footer.css';
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<footer className="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||||
|
Жирнова Алена ПИбд-21
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
12
Lab4/src/components/navigation/Navigation.css
Normal file
12
Lab4/src/components/navigation/Navigation.css
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
.my-navbar {
|
||||||
|
background-color: #382F1E !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-navbar .link a:hover {
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml-auto.link {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
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, NavbarBrand,
|
||||||
|
} from 'react-bootstrap';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
import './Navigation.css';
|
||||||
|
|
||||||
|
const Navigation = ({ routes }) => {
|
||||||
|
const location = useLocation();
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||||
|
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<Navbar expand='md' bg='dark' data-bs-theme='dark' className='my-navbar'>
|
||||||
|
<Container fluid>
|
||||||
|
<Navbar.Toggle aria-controls='main-navbr' />
|
||||||
|
<NavbarBrand as={Link} to='/' className='ml-auto link'>
|
||||||
|
Elitist
|
||||||
|
</NavbarBrand>
|
||||||
|
<Navbar.Collapse id='main-navbar'>
|
||||||
|
<Nav className='ml-auto link' activeKey={location.pathname}>
|
||||||
|
{pages.map((page) => (
|
||||||
|
<Nav.Link
|
||||||
|
as={Link}
|
||||||
|
key={page.path}
|
||||||
|
eventKey={page.path}
|
||||||
|
to={page.path ?? '/'}
|
||||||
|
>
|
||||||
|
{page.title}
|
||||||
|
</Nav.Link>
|
||||||
|
))}
|
||||||
|
</Nav>
|
||||||
|
</Navbar.Collapse>
|
||||||
|
</Container>
|
||||||
|
</Navbar>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Navigation.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
28
Lab4/src/index.css
Normal file
28
Lab4/src/index.css
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: Santa Catarina;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Santa Catarina;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-family: Santa Catarina;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.btn-mw {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
background-color: #403928;
|
||||||
|
color: black;
|
||||||
|
font-family: Santa Catarina;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
14
Lab4/src/jsconfig.json
Normal file
14
Lab4/src/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/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
90
Lab4/src/main.jsx
Normal file
90
Lab4/src/main.jsx
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
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 PageEdit from './pages/PageEdit.jsx';
|
||||||
|
import Page5 from './pages/Page5.jsx';
|
||||||
|
import Catalog from './pages/Catalog.jsx';
|
||||||
|
import Registration from './pages/Registration.jsx';
|
||||||
|
// eslint-disable-next-line camelcase
|
||||||
|
import LK_page from './pages/LK_page.jsx';
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
index: true,
|
||||||
|
path: '/',
|
||||||
|
element: <Page1 />,
|
||||||
|
title: 'Главная страница',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/page2',
|
||||||
|
element: <Page2 />,
|
||||||
|
title: 'Жанры',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/page5',
|
||||||
|
element: <Page5 />,
|
||||||
|
title: 'Бестселлеры',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Catalog',
|
||||||
|
element: <Catalog />,
|
||||||
|
title: 'Каталог',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/page3',
|
||||||
|
element: <Page3 />,
|
||||||
|
title: 'Войти',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/page4',
|
||||||
|
element: <Page4 />,
|
||||||
|
title: 'Админ',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/page-edit',
|
||||||
|
element: <PageEdit />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Registration',
|
||||||
|
element: <Registration />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/LK_page',
|
||||||
|
element: <LK_page />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = createBrowserRouter([
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
element: <App routes={routes} />,
|
||||||
|
children: routes,
|
||||||
|
errorElement: <ErrorPage />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
element: <App routes={routes} />,
|
||||||
|
children: routes,
|
||||||
|
errorElement: <Registration />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
element: <App routes={routes} />,
|
||||||
|
children: routes,
|
||||||
|
errorElement: <LK_page />,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<RouterProvider router={router} />
|
||||||
|
</React.StrictMode>,
|
||||||
|
);
|
||||||
36
Lab4/src/pages/Catalog.jsx
Normal file
36
Lab4/src/pages/Catalog.jsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
/* eslint-disable linebreak-style */
|
||||||
|
/* eslint-disable import/no-unresolved */
|
||||||
|
/* eslint-disable linebreak-style */
|
||||||
|
/* eslint-disable import/extensions */
|
||||||
|
/* eslint-disable linebreak-style */
|
||||||
|
/* eslint-disable quotes */
|
||||||
|
/* eslint-disable linebreak-style */
|
||||||
|
/* eslint-disable no-unused-vars */
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import CardBook from "../components/CardBook/CardBook";
|
||||||
|
|
||||||
|
const Catalog = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<main className="main-page flex-fill d-flex justify-content-center" id="catalog-page">
|
||||||
|
<div className="content-film d-flex flex-column justify-content-around" id="content">
|
||||||
|
<div className="categories-row d-flex flex-column flex-md-row justify-content-around mt-5">
|
||||||
|
<CardBook />
|
||||||
|
<CardBook />
|
||||||
|
<CardBook />
|
||||||
|
<CardBook />
|
||||||
|
</div>
|
||||||
|
<div className="categories-row d-flex flex-column flex-md-row justify-content-around mt-5">
|
||||||
|
<CardBook />
|
||||||
|
<CardBook />
|
||||||
|
<CardBook />
|
||||||
|
<CardBook />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Catalog;
|
||||||
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;
|
||||||
39
Lab4/src/pages/LK_page.jsx
Normal file
39
Lab4/src/pages/LK_page.jsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
/* eslint-disable linebreak-style */
|
||||||
|
/* eslint-disable camelcase */
|
||||||
|
/* eslint-disable linebreak-style */
|
||||||
|
// eslint-disable linebreak-style /
|
||||||
|
// eslint-disable camelcase /
|
||||||
|
// eslint-disable linebreak-style /
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
function LK_page() {
|
||||||
|
return (
|
||||||
|
<article className="container-fluid p-2">
|
||||||
|
<div className="row justify-content-center align-items-center h-75">
|
||||||
|
<h1 className="text-center">Личный кабинет</h1>
|
||||||
|
<form className="col-md-6 m-0">
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="lastname" className="form-label">Фамилия</label>
|
||||||
|
<input type="text" className="form-control" id="lastname" placeholder="Введите вашу фамилию" />
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="firstname" className="form-label">Имя</label>
|
||||||
|
<input type="text" className="form-control" id="firstname" placeholder="Введите ваше имя" />
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="status" className="form-label">Статус</label>
|
||||||
|
<select className="form-control" id="status">
|
||||||
|
<option>Студент</option>
|
||||||
|
<option>Школьник</option>
|
||||||
|
<option>Работающий</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button className="btn btn-primary text-center d-flex justify-content-center" style={{ backgroundColor: 'black', color: 'white' }}>Сохранить</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LK_page;
|
||||||
38
Lab4/src/pages/Page1.css
Normal file
38
Lab4/src/pages/Page1.css
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
.img-fluid {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 48px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 248px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 62px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 30px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
32
Lab4/src/pages/Page1.jsx
Normal file
32
Lab4/src/pages/Page1.jsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
// import React from 'react';
|
||||||
|
import styles from './Page1.css';
|
||||||
|
|
||||||
|
const Page1 = () => {
|
||||||
|
return (
|
||||||
|
<article className="container-fluid mt-4">
|
||||||
|
<div className="row justify-content-center align-items-center">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<img
|
||||||
|
src="src/assets/gl.PNG"
|
||||||
|
className="img-fluid"
|
||||||
|
style={{ maxWidth: '600px', maxHeight: '625px' }}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={`col-md-6 text-center ${styles.Page1}`}>
|
||||||
|
<div className="row align-items-center">
|
||||||
|
<div className="col-12">
|
||||||
|
<h1 className={`${styles.h1} ${styles.Page1}`}>Elitist</h1>
|
||||||
|
<h2 className={`${styles.h2} ${styles.Page1}`}>
|
||||||
|
Моя родина там, где моя библиотека
|
||||||
|
</h2>
|
||||||
|
<h3 className={`${styles.h3} ${styles.Page1}`}>Эразм Роттердамский</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page1;
|
||||||
47
Lab4/src/pages/Page2.jsx
Normal file
47
Lab4/src/pages/Page2.jsx
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
const Page2 = () => {
|
||||||
|
return (
|
||||||
|
<article className="container-fluid py-5" style={{ paddingLeft: 0 }}>
|
||||||
|
<div className="row justify-content-center align-items-center">
|
||||||
|
<div className="col-md-6 text-center">
|
||||||
|
<h1 style={{ marginTop: '5px' }}>ЖАНРЫ</h1>
|
||||||
|
<ul style={{ listStyleType: 'none', padding: 0 }}>
|
||||||
|
<li><a href="./magicheskiy-realizm.html"><h3 style={{ marginTop: '15px' }}>I Магический реализм</h3></a></li>
|
||||||
|
<li><a href="./filosofskaya-proza.html"><h3 style={{ marginTop: '15px' }}>II Философская проза</h3></a></li>
|
||||||
|
<li><a href="./metafizicheskaya-poeziya.html"><h3 style={{ marginTop: '15px' }}>III Метафизическая поэзия</h3></a></li>
|
||||||
|
<li><a href="./psihologicheskiy-roman.html"><h3 style={{ marginTop: '15px' }}>IV Психологический роман</h3></a></li>
|
||||||
|
<li><a href="./filosofskiy-roman.html"><h3 style={{ marginTop: '15px' }}>V Философский роман</h3></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-6 text-center">
|
||||||
|
<ul style={{ listStyleType: 'none', padding: 0 }}>
|
||||||
|
<li><a href="./epicheskaya-poesy.html"><h3 style={{ marginTop: '15px' }}>VI Эпическая поэзия</h3></a></li>
|
||||||
|
<li><a href="./socz-real.html"><h3 style={{ marginTop: '15px' }}>VII Социальный реализм</h3></a></li>
|
||||||
|
<li><a href="./fant-roman.html"><h3 style={{ marginTop: '15px' }}>VIII Фантастический роман</h3></a></li>
|
||||||
|
<li><a href="./avt-dram.html"><h3 style={{ marginTop: '15px' }}>IX Авторская драматургия</h3></a></li>
|
||||||
|
<li><a href="./Eksp-proza.html"><h3 style={{ marginTop: '15px' }}>X Авторская драматургия</h3></a></li>
|
||||||
|
</ul>
|
||||||
|
<div className="row justify-content-center">
|
||||||
|
<div className="col-md-3 mb-4 text-center">
|
||||||
|
<img
|
||||||
|
src="src/assets/4j.png"
|
||||||
|
alt="4j"
|
||||||
|
className="img-fluid"
|
||||||
|
style={{ width: '150px', margin: '10px', marginTop: '80px' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-3 mb-4 text-center">
|
||||||
|
<img
|
||||||
|
src="src/assets/4j.png"
|
||||||
|
alt="4j"
|
||||||
|
className="img-fluid"
|
||||||
|
style={{ width: '150px', margin: '10px', marginTop: '80px' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page2;
|
||||||
47
Lab4/src/pages/Page3.jsx
Normal file
47
Lab4/src/pages/Page3.jsx
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Button, Form } from 'react-bootstrap';
|
||||||
|
// eslint-disable-next-line import/newline-after-import
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
const Page3 = () => {
|
||||||
|
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">
|
||||||
|
<div className="col-md-6 m-0 text-center">
|
||||||
|
<Form noValidate validated={validated} onSubmit={handleSubmit}>
|
||||||
|
<h1>Вход</h1>
|
||||||
|
<Form.Group controlId="login">
|
||||||
|
<Form.Label style={{ fontSize: '20px' }}>Логин</Form.Label>
|
||||||
|
<Form.Control type="text" name="login" required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group controlId="password">
|
||||||
|
<Form.Label style={{ fontSize: '20px' }}>Пароль</Form.Label>
|
||||||
|
<Form.Control type="password" name="password" required />
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<p className="mb-2 text-white">
|
||||||
|
Нет аккаунта?
|
||||||
|
<Link to="/registration" style={{ color: 'black' }}>
|
||||||
|
Зарегистрироваться
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
<Link to="/LK_page">
|
||||||
|
<Button className="btn btn-custom w-50 mx-auto" type="submit" style={{ backgroundColor: 'black' }}>
|
||||||
|
Войти
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Page3;
|
||||||
31
Lab4/src/pages/Page4.jsx
Normal file
31
Lab4/src/pages/Page4.jsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { Button, ButtonGroup, Table } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const Page4 = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ButtonGroup>
|
||||||
|
<Button id="items-add" variant="dark">Добавить товар (диалог)</Button>
|
||||||
|
|
||||||
|
</ButtonGroup>
|
||||||
|
|
||||||
|
<Table className="mt-2" striped responsive>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">№</th>
|
||||||
|
<th scope="col" className="w-15">Название</th>
|
||||||
|
<th scope="col" className="w-15">Автор</th>
|
||||||
|
<th scope="col" className="w-15">Жанр</th>
|
||||||
|
<th scope="col" className="w-15">Год выпуска</th>
|
||||||
|
<th scope="col" className="w-15">Описание</th>
|
||||||
|
<th scope="col" className="w-15">Количество</th>
|
||||||
|
<th scope="col" className="w-15">Дата</th>
|
||||||
|
<th colSpan="2"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</Table>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page4;
|
||||||
50
Lab4/src/pages/Page5.jsx
Normal file
50
Lab4/src/pages/Page5.jsx
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
/* eslint-disable linebreak-style */
|
||||||
|
/* eslint-disable quotes */
|
||||||
|
|
||||||
|
const Page5 = () => {
|
||||||
|
return (
|
||||||
|
<article className="container py-5">
|
||||||
|
<h3 className="col-md-3 mb-4 text-center mx-auto">Бестселлеры</h3>
|
||||||
|
<div className="row justify-content-center">
|
||||||
|
<div className="col-md-3 mb-4 text-center">
|
||||||
|
<img
|
||||||
|
src="src/assets/kafka.jpg"
|
||||||
|
alt=""
|
||||||
|
className="img-fluid"
|
||||||
|
style={{ maxWidth: "260px", maxHeight: "372px" }}
|
||||||
|
/>
|
||||||
|
<h3 className="h7 mt-3">Ф.Кафка “Превращение”</h3>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-3 mb-4 text-center">
|
||||||
|
<img
|
||||||
|
src="src/assets/pandp.jpg"
|
||||||
|
alt=""
|
||||||
|
className="img-fluid"
|
||||||
|
style={{ maxWidth: "260px", maxHeight: "372px" }}
|
||||||
|
/>
|
||||||
|
<h3 className="h7 mt-3">Д.Остен “Гордость и предубеждение”</h3>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-3 mb-4 text-center">
|
||||||
|
<img
|
||||||
|
src="src/assets/leot.jpg"
|
||||||
|
alt=""
|
||||||
|
className="img-fluid"
|
||||||
|
style={{ maxWidth: "260px", maxHeight: "372px" }}
|
||||||
|
/>
|
||||||
|
<h3 className="h7 mt-3">Л.Толстой “Смерть Ивана Ильича”</h3>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-3 mb-4 text-center">
|
||||||
|
<img
|
||||||
|
src="src/assets/stranger.jpg"
|
||||||
|
alt=""
|
||||||
|
className="img-fluid"
|
||||||
|
style={{ maxWidth: "260px", maxHeight: "372px" }}
|
||||||
|
/>
|
||||||
|
<h3 className="h7 mt-3">А.Камю “Посторонний”</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page5;
|
||||||
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" controlId="item">
|
||||||
|
<Form.Label htmlFor="item" className="form-label">Товары</Form.Label>
|
||||||
|
<Form.Select name='selected' required>
|
||||||
|
</Form.Select>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="price">
|
||||||
|
<Form.Label>Цена</Form.Label>
|
||||||
|
<Form.Control type="number" name="price"
|
||||||
|
value="0.00" min="1000.00" step="0.50" required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="count">
|
||||||
|
<Form.Label>Количество</Form.Label>
|
||||||
|
<Form.Control type="number" name="count"
|
||||||
|
value="0" min="1" step="1" required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="file">
|
||||||
|
<Form.Label>Изображение</Form.Label>
|
||||||
|
<Form.Control type="file" name="image" accept="image/*" />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="d-flex flex-md-row flex-column justify-content-center">
|
||||||
|
<Button className="btn-mw me-md-3 mb-md-0 mb-2" as={Link} to="/page4" variant="secondary">Назад</Button>
|
||||||
|
<Button className="btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageEdit;
|
||||||
44
Lab4/src/pages/Registration.jsx
Normal file
44
Lab4/src/pages/Registration.jsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
/* eslint-disable linebreak-style */
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Button, Form } from 'react-bootstrap';
|
||||||
|
// import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Registration = () => {
|
||||||
|
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">
|
||||||
|
<div className="col-md-6 m-0 text-center">
|
||||||
|
<div className="registration-container">
|
||||||
|
<h1 style={{ textAlign: 'center' }}>ВХОД</h1>
|
||||||
|
<Form noValidate validated={validated} onSubmit={handleSubmit}>
|
||||||
|
<Form.Group controlId="login">
|
||||||
|
<Form.Label style={{ fontSize: '20px' }}>Логин</Form.Label>
|
||||||
|
<Form.Control type="text" name="login" required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group controlId="password">
|
||||||
|
<Form.Label style={{ fontSize: '20px' }}>Пароль</Form.Label>
|
||||||
|
<Form.Control type="password" name="password" required />
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-2" controlId="email">
|
||||||
|
<Form.Label style={{ fontSize: '20px' }}>E-mail</Form.Label>
|
||||||
|
<Form.Control type="email" name="email" placeholder="name@example.ru" required />
|
||||||
|
</Form.Group>
|
||||||
|
<Button className="btn btn-custom w-50 mx-auto" type="submit" style={{ backgroundColor: 'black' }}>
|
||||||
|
Зарегистрироваться
|
||||||
|
</Button>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Registration;
|
||||||
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…
x
Reference in New Issue
Block a user