StroevVladimir/PIbd-22.-Stroev-V.M.-Internet-Programm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Лаб5-начало

Browse Source
This commit is contained in:
DyCTaTOR 2023-12-14 21:42:39 +04:00
parent 2f62623c2e
commit 3c0cee9c79
35 changed files with 5077 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Lab5/.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
Lab5/.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
Lab5/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
```

BIN
Lab5/Statement4/Statement4.docx Normal file
View File

Binary file not shown.

BIN
Lab5/images/BackGr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

BIN
Lab5/images/New1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 KiB

BIN
Lab5/images/New2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 KiB

BIN
Lab5/images/New3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 KiB

BIN
Lab5/images/New4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 199 KiB

BIN
Lab5/images/logo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

15
Lab5/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="/images/logo2.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UlSTU</title>
</head>
<body background = "./images/BackGr.png">
<div id="root" class="h-100 d-flex flex-column"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

14
Lab5/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
Lab5/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
Lab5/package.json Normal file
View File

@ -0,0 +1,32 @@
{
"name": "ulstu",
"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"
}
}

0
Lab5/src/App.css Normal file
View File

24
Lab5/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
Lab5/src/assets/banner1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 640 KiB

BIN
Lab5/src/assets/banner2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 812 KiB

BIN
Lab5/src/assets/banner3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 767 KiB

BIN
Lab5/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

5
Lab5/src/components/footer/Footer.css Normal file
View File

@ -0,0 +1,5 @@
.my-footer {
background-color: #454545;
height: 32px;
color: #fff;
}

13
Lab5/src/components/footer/Footer.jsx Normal file
View File

@ -0,0 +1,13 @@
import './Footer.css';
const Footer = () => {
// const year = new Date().getFullYear();
return (
<footer className="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Адреса: ул. Северный Венец, 32; ул. Андрея Блаженного, 3
</footer>
);
};
export default Footer;

15
Lab5/src/components/navigation/Navigation.css Normal file
View File

@ -0,0 +1,15 @@
.my-navbar {
background-color: #3c3c3c !important;
}
.my-navbar .link a:hover {
text-decoration: underline !important;
}
.my-navbar .logo {
width: 52px;
height: 36px;
}
.headStyleNavBar{
background-color: #454545;
}

41
Lab5/src/components/navigation/Navigation.jsx Normal file
View File

@ -0,0 +1,41 @@
import PropTypes from 'prop-types';
import {
Image, 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' bg='dark' data-bs-theme='dark' className='my-navbar'>
<Container fluid>
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
<Image src="./images/logo2.png" className='d-inline-block align-top me-1 logo' />
</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;

118
Lab5/src/index.css Normal file
View File

@ -0,0 +1,118 @@
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.1em;
}
.btn-mw {
width: 100%;
}
@media (min-width: 768px) {
.btn-mw {
width: 30%;
}
}
@media (min-width: 1200px) {
.btn-mw {
width: 20%;
}
}
.body{
display: flex;
flex-direction: column;
min-height: 100hv;
}
.stsp{
font-size: 30px;
color: #333333;
text-align: center;
margin-top: 70;
}
.mainSt{
color: #060647;
font-size: 50px;
}
.rectPage2{
color: #FFFFFF;
width: 1470px;
height: 900px;
border : 2px solid #000000;
background-color: #FFFFFF;
opacity: 0.8;
}
.rectPage4{
margin-left: auto;
margin-right: auto;
color: #FFFFFF;
width: 550px;
height: 300px;
border: 2px solid #000000;
background-color: #7c7474;
opacity: 0.8;
}
.rectPage5{
margin-left: auto;
margin-right: auto;
margin-top : auto;
margin-bottom : auto;
width: 600px;
height: 500px;
border: 2px solid #000000;
background-color: #FFFFFF;
opacity: 0.7;
}
.rectNews{
width:310px;
height:200px;
border : 4px solid #2582A3;
border-radius: 21px;
margin-left: 180;
margin-top: 9px;
margin-bottom:25px;
}
.stylePage2{
float : center;
margin-right: 7;
color: #063638;
font-size: 18px
}
.styleParagraph{
border-top: 2px solid #000000;
}
.styleBlack{
color : #000000;
}
.stylePage2LargeSymbol{
float : left;
margin-right: 7;
color: #118D94;
font-size: 50px;
line-height: 52px
}
.rectNewsTextBox{
width : 310px;
min-height : 50px;
border: 2px solid #000000;
background-color: #FFFFFF;
opacity: 0.7;
border-radius: 10% / 40%;
margin-top : 5px;
}
.rectNewsText{
color: #000000;
font-size: 15px;
}
.rectNew{
border-radius: 21px;
border: 3px #2582A3 solid;
}

66
Lab5/src/main.jsx Normal file
View File

@ -0,0 +1,66 @@
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 Admin from './pages/Admin.jsx';
import Reduse from './pages/Reduse.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: '/admin',
element: <Admin />,
},
{
path: '/reduse',
element: <Reduse />,
},
];
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>,
);

52
Lab5/src/pages/Admin.jsx Normal file
View File

@ -0,0 +1,52 @@
import { Button, Container, Table } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const Admin = () => {
return (
<Container className="p-2 text-center">
<span className="mainSt">
<b>Новости</b>
</span>
<div className="tbb1 p-3 table-responsive-md mt-4 row justify-content-start">
<Table className="col-lg2 w-50 mx-auto">
<thead>
<tr>
<th className="w-25">Дата добавления</th>
<th className="w-50">Название</th>
<th className="w-25"></th>
<th className="w-75"></th>
</tr>
</thead>
<tbody>
<tr>
<td>13.10.23</td>
<td>УлГТУ вошёл в топ-250 лучших вузов</td>
<td><Button as = {Link} to="/reduse">Редактировать</Button></td>
<td>Удалить</td>
</tr>
<tr>
<td>13.10.23</td>
<td>“Мосты в будущее” будут видны из УлГТУ</td>
<td><Button as = {Link} to="/reduse">Редактировать</Button></td>
<td>Удалить</td>
</tr>
<tr>
<td>27.10.23</td>
<td>Поправки в системе работы приёмной комиссии</td>
<td><Button as = {Link} to="/reduse">Редактировать</Button></td>
<td>Удалить</td>
</tr>
<tr>
<td>27.10.23</td>
<td>Студенты возвращаются к учёбе после зимней сессии позже, чем раньше</td>
<td><Button as = {Link} to="/reduse">Редактировать</Button></td>
<td>Удалить</td>
</tr>
</tbody>
</Table>
</div>
</Container>
);
};
export default Admin;

19
Lab5/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;

68
Lab5/src/pages/Page1.jsx Normal file
View File

@ -0,0 +1,68 @@
import { Link } from 'react-router-dom';
import {
Container, Button, Row, Col, Image,
} from 'react-bootstrap';
const Page1 = () => {
return (
<>
<Container className="col text-center">
<span className="mainSt">
<b>Новости</b>
</span>
<div className="text-center">
<Button as={Link} to="/admin" variant="primary" className="btn btn-primary w-auto" type="button">
Добавить новость
</Button>
</div>
<Row>
<Col className="mb-4">
<div className="rectNews d-flex flex-column">
<Image src="./images/New1.png" alt="New1" width="100%" />
<div className="rectNewsTextBox">
<span className="rectNewsText">
<b>УлГТУ вошёл в топ-250 лучших вузов</b>
</span>
</div>
</div>
</Col>
<Col className="mb-4">
<div className="rectNews d-flex flex-column position-relative">
<Image src="./images/New2.png" alt="New2" width="100%" />
<div className="rectNewsTextBox">
<span className="rectNewsText">
<b>“Мосты в будущее” будут видны из УлГТУ</b>
</span>
</div>
</div>
</Col>
</Row>
<Row>
<Col className="mb-4">
<div className="rectNews d-flex flex-column position-relative">
<Image src="./images/New3.png" alt="New3" width="100%" />
<div className="rectNewsTextBox">
<span className="rectNewsText">
<b>Поправки в системе работы приёмной комиссии</b>
</span>
</div>
</div>
</Col>
<Col className="mb-4">
<div className="rectNews d-flex flex-column position-relative">
<Image src="./images/New4.png" alt="New4" width="100%" />
<div className="rectNewsTextBox">
<span className="rectNewsText">
<b>Студенты возвращаются к учёбе после
зимней сессии позже, чем раньше</b>
</span>
</div>
</div>
</Col>
</Row>
</Container>
</>
);
};
export default Page1;

44
Lab5/src/pages/Page2.jsx Normal file
View File

@ -0,0 +1,44 @@
const Page2 = () => {
return (
<>
<main className="container-fluid d-flex p-2">
<div className="rectPage2">
<span className="mainSt text-center">
<b>История</b>
</span>
<p>
<span className="stylePage2LargeSymbol">
И
</span>
<span className="stylePage2">
стория Ульяновского государственного технического университета началась в 1957 году,
когда согласно постановлению Совета министров РСФСР от 6 сентября 1957 года и приказу
Министерства высшего образования СССР от 18 сентября 1957 года в городе Ульяновске
был организован вечерний политехнический институт на базе вечернего факультета
Куйбышевского индустриального института.
</span>
</p>
<div className="styleParagraph">
<span className="stylePage2">
Было организовано пять кафедр: «Марксизм-ленинизм», «Высшая математика и
теоретическая механика», «Начертательная геометрия и черчение»,
«Физика и химия», «Иностранные языки».
</span>
</div>
<div className="styleParagraph">
<span className="stylePage2">
Первым ректором вечернего политехнического института стал кандидат технических наук,
доцент Иван Шабанов, его заместителем – кандидат технических наук, профессор, доктор
технических наук Леонид Худобин. Штатное расписание института было составлено
на 48 человек, с учетом профессорско-преподавательского состава, из
которого только четыре человека имели ученую
степень и звание. Не было ни одного профессора, ни одного доктора наук.
</span>
</div>
</div>
</main>
</>
);
};
export default Page2;

49
Lab5/src/pages/Page3.jsx Normal file
View File

@ -0,0 +1,49 @@
const Page3 = () => {
return (
<main className="container p-2 text-center">
<label className="mainSt d-flex justify-content-center" htmlFor="direction">
Направление
</label>
<input className="justify-content-md-center w-50"
type="search"
id="direction"
name="direction"
required />
<div className="tbb1 p-3 table-responsive-md mt-4 row justify-content-start">
<table className="table col-lg2 w-50 mx-auto">
<thead>
<tr>
<th className="w-25">Код</th>
<th className="w-50">Направление</th>
<th className="w-25">Кафедра</th>
<th className="w-75">Предметы(ЕГЭ) по выбору</th>
</tr>
</thead>
<tbody>
<tr>
<td>01.03.04</td>
<td>Мат. Моделирование</td>
<td>Прикладная математика</td>
<td>Иностранный язык, информатика, физика, химия</td>
</tr>
<tr>
<td>09.03.04</td>
<td>Программная инженерия</td>
<td>Информационные системы</td>
<td>Информатика, физика</td>
</tr>
<tr>
<td>02.03.01</td>
<td>Информационные системы и технологии</td>
<td>Измерительно-вычислительные комплексы</td>
<td>Информатика, физика</td>
</tr>
</tbody>
</table>
</div>
</main>
);
};
export default Page3;

27
Lab5/src/pages/Page4.jsx Normal file
View File

@ -0,0 +1,27 @@
const Page4 = () => {
return (
<main className="container-fluid text-center">
<span className="mainSt">
<b>Личный кабинет</b>
</span>
<div className="rectpage4 d-flex row justify-content-center">
<form className="col-md-4 m-0 w-auto" action="./page4.html" method="get">
<div className="mb-2">
<label className="form-label" htmlFor="login"><b>Логин</b></label>
<input id="login" name="login" className="form-control"
placeholder="dyctator" type="text" required />
</div>
<div className="mb-2">
<label className="form-label" htmlFor="password"><b>Пароль</b></label>
<input id="password" name="password" className="form-control" type="password" required />
</div>
<div className="text-center">
<button className="btn btn-primary w-auto" type="button">Войти</button>
</div>
</form>
</div>
</main>
);
};
export default Page4;

13
Lab5/src/pages/Page5.jsx Normal file
View File

@ -0,0 +1,13 @@
function Page5() {
return (
<main className="rectPage5 stsp container-fluid row justify-content-center">
<span className="mainSt">Контакты</span>
<span>
<p><i>Номер приёмной комиссии:</i></p>+7 925 876 67 43
<p><i>Номер ректората:</i></p>+7 925 876 67 43
<p><i>Электронная почта приёмной комиссии:</i></p>priemnkomulstu@mail.ru
</span>
</main>
);
}
export default Page5;

28
Lab5/src/pages/Reduse.jsx Normal file
View File

@ -0,0 +1,28 @@
import { Container, Form, Button } from 'react-bootstrap';
const Reduse = () => {
return (
<Container className="p-2 text-center">
<span className="mainSt">
<b>Новости</b>
</span>
<div className="rectpage4 d-flex row justify-content-center">
<Form className="col-md-4 m-0 w-auto" action="./page4.html" method="get">
<Form.Group className="mb-2">
<Form.Label><b>Название новости</b></Form.Label>
<Form.Control id="name" name="name" placeholder="Например" type="text" required />
</Form.Group>
<Form.Group className="mb-2">
<Form.Label><b>Изображение</b></Form.Label>
<Form.Control id="image" name="image" type="file" required />
</Form.Group>
<div className="text-center">
<Button className="btn btn-primary w-auto" type="button">Добавить новость</Button>
</div>
</Form>
</div>
</Container>
);
};
export default Reduse;

13
Lab5/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,
},
});