ALINA_KURBANOVA/Internet_programming
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

4 лаба

Browse Source
This commit is contained in:
ALINA_KURBANOVA 2024-01-13 19:54:24 +04:00
parent 25ed1db0b8
commit e78e15d59b
43 changed files with 5346 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Лекция 4/.eslintrc.cjs Normal file
View 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
Лекция 4/.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

29
Лекция 4/README.md Normal file
View File

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

15
Лекция 4/index.html Normal file
View 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>Онлайн-библиотека «Солнышко»</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
Лекция 4/jsconfig.json Normal file
View File

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

4344
Лекция 4/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
Лекция 4/package.json Normal file
View File

@ -0,0 +1,32 @@
{
"name": "lec4",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.18.0",
"bootstrap": "^5.3.2",
"react-bootstrap": "^2.9.1",
"react-bootstrap-icons": "^1.10.3",
"prop-types": "^15.8.1"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"vite": "^4.4.5"
}
}

3
Лекция 4/public/favicon.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 463 B

0
Лекция 4/src/App.css Normal file
View File

24
Лекция 4/src/App.jsx Normal file
View 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
Лекция 4/src/assets/books.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
Лекция 4/src/assets/image_foradmin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
Лекция 4/src/assets/image_index.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 772 KiB

BIN
Лекция 4/src/assets/news/image_news1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

BIN
Лекция 4/src/assets/news/image_news2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 211 KiB

BIN
Лекция 4/src/assets/news/image_news3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

BIN
Лекция 4/src/assets/news/image_news4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

BIN
Лекция 4/src/assets/news/image_news5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 236 KiB

BIN
Лекция 4/src/assets/news/image_news6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 KiB

BIN
Лекция 4/src/assets/png/icon_left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
Лекция 4/src/assets/png/icon_right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
Лекция 4/src/assets/pop/image_popular1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 KiB

BIN
Лекция 4/src/assets/pop/image_popular2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 293 KiB

BIN
Лекция 4/src/assets/pop/image_popular3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 KiB

BIN
Лекция 4/src/assets/pop/image_popular4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

BIN
Лекция 4/src/assets/pop/image_popular5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 KiB

BIN
Лекция 4/src/assets/pop/image_popular6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 236 KiB

9
Лекция 4/src/components/footer/Footer.css Normal file
View File

@ -0,0 +1,9 @@
.my-footer {
position: fixed;
bottom: 0;
width: 100%;
background-color:#fdd017 ;
text-align: left;
padding-left: 5%;
font-size: 20px;
}

12
Лекция 4/src/components/footer/Footer.jsx Normal file
View File

@ -0,0 +1,12 @@
import './Footer.css';
const Footer = () => {
return (
<div className="footer">
Контактный телефон:+79084840299<br/>
Электронная почта:alinochka_kurbanova2004@mail.ru
</div>
);
};
export default Footer;

21
Лекция 4/src/components/navigation/Navigation.css Normal file
View File

@ -0,0 +1,21 @@
.my-navbar {
font-family:Arial;
font-size:18px;
background-color:#fdd017;
margin-bottom: 2%;
}
.navbar-brand {
display: flex;
align-items: end;
}
.navbar {
display: flex;
justify-content: space-between;
}
.navbar-collapse {
flex-grow: 0;
}
header nav a:hover {
text-decoration: underline;
}

39
Лекция 4/src/components/navigation/Navigation.jsx Normal file
View File

@ -0,0 +1,39 @@
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();
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
return (
<header>
<Navbar expand='md' className='my-navbar'>
<Container fluid>
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
Онлайн-библиотека «Солнышко»
</Navbar.Brand>
<Navbar.Toggle aria-controls='main-navbar' />
<Navbar.Collapse id='main-navbar'>
<Nav className='me-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;

269
Лекция 4/src/index.css Normal file
View File

@ -0,0 +1,269 @@
.p-2 {
padding: .0rem !important;
}
header nav a:hover {
text-decoration: underline;
}
.navbar-brand {
font-family:Arial;
font-size:28px;
font-weight:bolder;
margin-left:5%;
margin-right:10%;
}
.bg-body-tertiary{
margin-bottom: 3%;
background-color: #fdd017;
}
.j{
padding-bottom: 10%;
font-size: 26px;
}
.body{
display: flex;
flex-direction: column;
margin-left: 70px;;
}
.conta{
padding-bottom:5%;
width: 50%;
margin: 0 auto;
padding-top:3%;
}
.reg{
padding-bottom: 5%;
}
.column {
float: left;
width: 50%;
padding: 30px;
margin: 20px;
}
.column-2{
padding-top:200px;
padding-right:30px;
}
.mb-3{
margin:auto;
width:50%;
font-size: 20px;
}
.btn{
margin: auto;
font-size:18px;
}
.string{
font-size: 24px;
}
.im{
margin-left:10px;
margin-bottom:30px;
height:10px;
width: 10px;
}
.text{
font-size: 18px;
}
.nav-item{
padding-right:15px;
}
.card-img-top{
width:100% ;
height:59% ;
}
.load{
padding-top: 5%;
}
.card{
width:240px;
height:450px;
width: 15rem;
align-items: center;
}
.b2{
text-align: center;
padding-bottom: 20px;
}
li {
list-style-type: none;
/* Убираем маркеры */
}
.add{
text-align: center;
padding-bottom: 15%;
}
.col{
text-align:center;
}
.nav-link{
font-style:bold;
color:black;
}
.nav-link:active{
text-decoration: underline;
}
.carousel-inner{
padding-left:10%;
padding-bottom: 10%;
}
.container-fluid{
display: flex;
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
background-color:#fdd017 ;
text-align: left;
padding-left: 5%;
font-size: 20px;
}
.b{
margin-bottom:5px;
}
.p{
padding-top: 3%;
padding-bottom:5%;
text-align: center;
}
.sec {
display: grid;
place-items: center;
padding-left: 5%;
padding-bottom: 20%;
}
.book{
padding-bottom: 5%;
margin-left: auto;
margin-right: auto;
}
.col-md-6 {
margin-top: 30px;
}
.col-lg-4 {
margin-top: 30px;
}
.col-xxl-3 {
margin-top: 30px;
}
.container {
display: flex;
padding-bottom: 10%;
}
.centered-text{
font-size:20px;
}
.text-column {
flex: 1;
padding-top:2%;
}
.image-column {
flex: 1;
padding: 20px;
}
.form-text{
padding-top:5%;
padding-bottom:5%;
font-size:18px;
}
.image-column img {
max-width: 100%;
}
/*добавка*/
header nav {
background-color: #3c3c3c;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.1em;
}
#image-preview {
width: 200px;
}
/*конец добавки*/
@media(max-width:980px){
.sec{
padding-left:10%;
}
}
@media(max-width:760px){
.footer{
font-size: 18px;
}
.gx-5{
padding-left: 25%;
}
.container{
padding-bottom: 30%;
}
.form-text{
font-size: 14px;
}
.container {
flex-direction: column;
}
.text-column,
.image-column {
flex: 1;
padding: 20px;
}
}
@media(max-width:500px){
.navbar-brand{
font-size:18px;
}
.j{
font-size: 18px;
}
.mb-3{
font-size: 18px;
}
.btn{
font-size:16px;
}
.gx-5{
padding-left:15%;
}
}
@media (min-width: 768px) {
header nav {
height: 64px;
}
}
@media(max-width:400px){
.centered-text{
font-size: 14px; ;
}
.gx-5{
padding-right:20%;
}
.footer{
font-size: 16px;
}
.string{
font-size: 20px;
}
}

72
Лекция 4/src/main.jsx Normal file
View File

@ -0,0 +1,72 @@
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 PageAdd from './pages/PageAdd.jsx';
import Page5En from './pages/Page5En.jsx';
import PageEdit from './pages/PageEdit.jsx';
import Page6Re from './pages/Page6Re.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: '/Page5En',
element: <Page5En />,
title: 'Войти',
},
{
path: '/PageAdd',
element: <PageAdd />,
title: 'Администрация',
},
{
path: '/page-edit',
element: <PageEdit />,
},
{
path: '/page6Re',
element: <Page6Re />,
},
];
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
Лекция 4/src/pages/ErrorPage.jsx Normal file
View File

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

18
Лекция 4/src/pages/Page1.jsx Normal file
View File

@ -0,0 +1,18 @@
import cardOne from '../assets/image_index.png';
const Page1 = () => {
return (
<>
<div className="container">
<div className="image-column">
<img src={cardOne} alt="index" />
</div>
<div className="text-column">
<p className="centered-text"> Онлайн-библиотека «Солнышко»- крупнейшая в России электронная библиотека научных публикаций, обладающая богатыми возможностями поиска и анализа научной информации. Библиотека интегрирована с Российским индексом научного цитирования (РИНЦ) - созданным по заказу Минобрнауки РФ бесплатным общедоступным инструментом измерения публикационной активности ученых и организаций. «Солнышко» и РИНЦ разработаны и поддерживаются компанией «Научная электронная библиотека».</p>
</div>
</div>
</>
);
};
export default Page1;

106
Лекция 4/src/pages/Page2.jsx Normal file
View File

@ -0,0 +1,106 @@
import cardOne from '../assets/pop/image_popular1.png';
import cardTwo from '../assets/pop/image_popular2.png';
import cardThree from '../assets/pop/image_popular3.png';
import cardFour from '../assets/pop/image_popular4.png';
import cardFive from '../assets/pop/image_popular5.png';
import cardSix from '../assets/pop/image_popular6.png';
const Page2 = () => {
return (
<>
<div className="sec">
<div className="row gx-5">
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={cardOne} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Джоан Роулинг</h5>
<p className="card-text">Гарри Поттер и филофский камень</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={cardTwo} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Русская народная сказка</h5>
<p className="card-text">Курочка Ряба</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={cardThree} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Р.Киплинг</h5>
<p className="card-text">Маугли</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={cardFour} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Астрид Линдгрен</h5>
<p className="card-text">Малыш и Карлсон</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={cardFive} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Астрид Линдгрен</h5>
<p className="card-text">Малыш и Карлсон</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={cardSix} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Астрид Линдгрен</h5>
<p className="card-text">Малыш и Карлсон</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={cardFour} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Русская народная сказка</h5>
<p className="card-text">Царевна-лягушка</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={cardSix} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Д.Дефо</h5>
<p className="card-text">Робинзон Крузо</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
</div></div>
</>
);
};
export default Page2;

105
Лекция 4/src/pages/Page3.jsx Normal file
View File

@ -0,0 +1,105 @@
import CardOne from '../assets/news/image_news1.png';
import CardTwo from '../assets/news/image_news2.png';
import CardThree from '../assets/news/image_news3.png';
import CardFour from '../assets/news/image_news4.png';
import CardFive from '../assets/news/image_news5.png';
import CardSix from '../assets/news/image_news6.png';
const Page3 = () => {
return (
<div className="sec">
<div className="row gx-5">
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={CardOne} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Элинор Портер</h5>
<p className="card-text">Поллианна</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={CardTwo} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Кристер Фуглесанг</h5>
<p className="card-text">Подводный мир</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={CardThree} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Себастьян Перез</h5>
<p className="card-text">Шерлок Кот.Атака на Самураев</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={CardFour} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Л.Лагин</h5>
<p className="card-text">Старик Хоттабыч</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={CardThree} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Себастьян Перез</h5>
<p className="card-text">Шерлок Кот. Атака на Самураев</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={CardFive} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Кейт Дикамилло</h5>
<p className="card-text">Удивительное путешествие кролика Эдварда</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={CardOne} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Элинор Портер</h5>
<p className="card-text">Поллианна</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4 col-xxl-3">
<div className="card">
<img src={CardSix} className="card-img-top" alt="..." />
<div className="card-body">
<h5 className="card-title">Марцин Щегельский</h5>
<p className="card-text">Театр невидимых детей</p>
<button type="button" className="btn btn-outline-primary">Описание</button>
<button type="button" className="btn btn-outline-primary">Читать</button>
</div>
</div>
</div>
</div>
</div>
);
};
export default Page3;

21
Лекция 4/src/pages/Page4.jsx Normal file
View File

@ -0,0 +1,21 @@
const Page4 = () => {
return (
<div className="col">
<nav className="nav flex-column">
<div className="j">
<a className="nav-link" aria-current="page" href="#">стихи</a>
<a className="nav-link" href="#">рассказы</a>
<a className="nav-link" href="#">повести</a>
<a className="nav-link" href="#">романы</a>
<a className="nav-link" href="#">сказки</a>
<a className="nav-link" href="#">загадки</a>
<a className="nav-link" href="#">комиксы</a>
<a className="nav-link" href="#">про животных</a>
<a className="nav-link" href="#">детские журналы</a>
</div>
</nav>
</div>
);
};
export default Page4;

26
Лекция 4/src/pages/Page5En.jsx Normal file
View File

@ -0,0 +1,26 @@
import { Link } from 'react-router-dom';
const Page5En = () => {
return (
<div className="conta">
<form>
<div className="mb-3">
<label htmlFor="NameInput" className="form-label">Имя пользователя</label>
<input type="Name" className="form-control" id="NameInput" />
</div>
<div className="mb-3">
<label htmlFor="PasswordInput" className="form-label">Пароль</label>
<input type="Password" className="form-control" id="PasswordInput" />
</div>
<div className="p">
<div className="b">
<button type="button" className="btn btn-outline-dark" href="index.html">Вход</button>
</div>
<p className="string">У вас еще нет аккаунта?<br/> <Link to="/Page6Re">Зарегистрироваться</Link></p>
</div>
</form>
</div>
);
};
export default Page5En;

28
Лекция 4/src/pages/Page6Re.jsx Normal file
View File

@ -0,0 +1,28 @@
const Page6Re = () => {
return (
<div className="conta">
<form>
<div className="mb-3">
<label htmlFor="NameInput" className="form-label">Имя пользователя</label>
<input type="Name" className="form-control" id="NameInput" />
</div>
<div className="mb-3">
<label htmlFor="LoginInput" className="form-label">Логин</label>
<input type="Login" className="form-control" id="LoginInput" aria-describedby="loginHelp" />
<div id="loginHelp" className="form-text"> Ваш логин должен начинаться с буквы и состоять не менее чем из 6 символов и не более чем из 20 символов
</div>
</div>
<div className="mb-3">
<label htmlFor="PasswordInput" className="form-label">Пароль</label>
<input type="Password" className="form-control" id="PasswordInput" aria-describedby="passwordHelp" />
<div id="passwordHelp" className="form-text"> Ваш пароль должен состоять из 8-20 символов, содержать латинские буквы и цифры.
</div>
<div className="reg">
<button type="button" className="btn btn-outline-dark">Зарегистрироваться</button>
</div>
</div></form>
</div>
);
};
export default Page6Re;

26
Лекция 4/src/pages/PageAdd.jsx Normal file
View File

@ -0,0 +1,26 @@
import { Button, ButtonGroup, Table } from 'react-bootstrap';
const PageAdd = () => {
return (
<>
<ButtonGroup>
<Button id="items-add" variant="info">Добавить книгу</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"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody></tbody>
</Table>
</>
);
};
export default PageAdd;

53
Лекция 4/src/pages/PageEdit.jsx Normal file
View 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;

13
Лекция 4/vite.config.js Normal file
View File

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