lab4

2024-01-12 11:20:52 +04:00
42 changed files with 910 additions and 2 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -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',
+  },
+}
--- a/README.md
+++ b/README.md
@ -1,3 +1,8 @@
-# PIbd-22_Internet_programming
+# React + Vite

-Интернет-программирование
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+  <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>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,33 @@
+{
+  "name": "univercity",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "description": "internet-programming 2023",
+  "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"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,53 @@
+html {
+    width: 100%;
+}
+
+body {
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+    background-color: #e5e5e5;
+    font-family: Arial;
+    /* для закрепления подвала внизу страницы*/
+    display: flex;
+    flex-direction: column;
+}
+
+@media (max-width: 800px) {
+    body {
+        font-size: small;
+    }
+}
+
+.btn {
+    background-color: #012362;
+    border: 0px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+table {
+    font-size: 13pt;
+    border: 2px solid;
+    border-left: 10px solid;
+    border-right: 10px solid;
+}
+
+@media (max-width: 800px) {
+    table {
+        font-size: 10pt;
+    }
+}
+
+@media (max-width: 500px) {
+    table {
+        font-size: 8pt;
+    }
+}
+
+thead {
+    font-style: italic;
+}
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import Content from './components/content/Content';
+import './App.css';
+import Header from './components/header/Header.jsx'
+import Navigation from './components/navigation/Navigation.jsx'
+import Footer from './components/footer/Footer.jsx'
+
+const App = ({ routes }) => {
+  return (
+    <>
+      <Header />
+      <Navigation routes={routes}></Navigation>
+      <Content />
+      <Footer />
+    </>
+  )
+}
+
+App.propTypes = {
+  routes: PropTypes.array,
+};
+
+export default App;
--- a/src/assets/1september.jpg
+++ b/src/assets/1september.jpg
--- a/src/assets/Halloween.jpg
+++ b/src/assets/Halloween.jpg
--- a/src/assets/Students1.jpg
+++ b/src/assets/Students1.jpg
--- a/src/assets/Students2.jpg
+++ b/src/assets/Students2.jpg
--- a/src/assets/Students3.jpg
+++ b/src/assets/Students3.jpg
--- a/src/assets/University.jpg
+++ b/src/assets/University.jpg
--- a/src/assets/cat.png
+++ b/src/assets/cat.png
--- a/src/assets/cat2.png
+++ b/src/assets/cat2.png
--- a/src/assets/error.jpg
+++ b/src/assets/error.jpg
--- a/src/assets/error.png
+++ b/src/assets/error.png
--- a/src/assets/icpc.jpg
+++ b/src/assets/icpc.jpg
--- a/src/assets/letter.jpg
+++ b/src/assets/letter.jpg
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/robokross.jpg
+++ b/src/assets/robokross.jpg
--- a/src/components/content/Content.css
+++ b/src/components/content/Content.css
@ -0,0 +1,37 @@
+#content {
+    width: 80%;
+    margin: 1.5% 10% 1.5% 10%;
+    padding: 30px;
+    padding-left: 5%;
+    padding-right: 5%;
+    background-color: white;
+    color: #012362;
+    font-size: 13pt;
+    text-align: justify;
+    line-height: 2em;
+    /* для закрепления подвала внизу страницы*/
+	flex: 1 0 auto;
+}
+
+@media (max-width: 800px) {
+    #content {
+        width: 100%;
+        margin: 1.5% 0% 1.5% 0%;
+    }
+}
+
+/* центр для изображений*/
+#content img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#content a{
+    color: #06c;
+}
+
+#content a:hover{
+    color: #f07c41;
+    text-decoration: none;
+}
--- a/src/components/content/Content.jsx
+++ b/src/components/content/Content.jsx
@ -0,0 +1,12 @@
+import './Content.css'
+import { Outlet } from 'react-router-dom';
+
+const Content = () => {
+    return (
+    <div id="content">
+        <Outlet />
+    </div>
+    );
+};
+
+export default Content;
--- a/src/components/footer/Footer.css
+++ b/src/components/footer/Footer.css
@ -0,0 +1,24 @@
+#footer { 
+    width: 100%;
+    background-color: #012362;
+    text-align: center;
+    font-family: Arial;
+    font-size: 15px; /* в header'e 20px*/
+    color: white;
+    line-height: 1.5em;
+    padding: 14px 0px 14px 0px;
+    /* для закрепления подвала внизу страницы*/
+	flex: 0 0 auto;
+}
+
+#footer ul {
+	margin: 0px;
+} 
+
+#footer li {
+    display: inline-flex;
+}
+
+#footer li:not(:last-of-type) {
+	margin-right: 3%;
+}
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@ -0,0 +1,18 @@
+import './Footer.css';
+
+const Footer = () => {
+    const year = new Date().getFullYear();
+
+    return (
+        <div id="footer">
+            <ul>
+                <li>Адреса и контакты:</li>
+                <li>432027, г. Тольятти, ул. Ларина, д.32</li>
+                <li>+7 (8332) 43-06-55</li>
+            </ul>
+            dex_moth, {year}
+        </div>
+    );
+};
+
+export default Footer;
--- a/src/components/header/Header.css
+++ b/src/components/header/Header.css
@ -0,0 +1,29 @@
+#header { 
+    width: 100%;
+    background-color: #012362;
+    text-align: center;
+    font-family: Arial;
+    font-size: 20px;
+    color: white;
+    padding: 10px 0px 10px 0px;
+    /* для закрепления подвала внизу страницы*/
+	flex: 0 0 auto;
+}
+
+#header a {
+    text-decoration: none;
+    color: white;
+}
+
+#header a:hover {
+    text-shadow: 1px 1px 8px #06c;
+}
+
+#logo {
+    vertical-align: middle;
+    margin-right: 10px;
+}
+
+#logo:hover {
+    filter: drop-shadow(0px 2px 16px #06c);
+}
--- a/src/components/header/Header.jsx
+++ b/src/components/header/Header.jsx
@ -0,0 +1,14 @@
+import './Header.css'
+import universityLogo from '../../assets/logo.png';
+
+const Header = () => {
+    
+    return (
+        <div id="header">
+            <a href="/"><img id="logo" src={universityLogo} height="50px"/></a>
+            <a href="/">Тольяттинский государственный политехнический университет</a>
+        </div>
+    );
+};
+
+export default Header;
--- a/src/components/navigation/Navigation.css
+++ b/src/components/navigation/Navigation.css
@ -0,0 +1,53 @@
+.navbar {
+    width: 100%;
+    background-color: white;
+    color: #012362;
+    font-family: Arial;
+    text-align: center;
+}
+
+.navbar-brand, .nav-item  {
+    margin-left: 5em;
+}
+
+@media (min-width: 800px) {
+    .navbar-brand, .nav-item  {
+        margin-left: 2em;
+    }
+}
+
+@media (min-width: 1280px) {
+    .navbar-brand, .nav-item  {
+        margin-left: 6em;
+    }
+}
+@media (min-width: 1600px) {
+    .navbar-brand, .nav-item  {
+        margin-left: 8em;
+    }
+}
+@media (min-width: 1920px) {
+    .navbar-brand, .nav-item  {
+        margin-left: 12em;
+    }
+}
+@media (min-width: 2100px) {
+    .navbar-brand, .nav-item  {
+        margin-left: 17em;
+    }
+}
+
+.navbar-brand, .nav-link {
+    font-size: 14pt;
+    text-decoration: none;
+    color: #012362;
+}
+
+.navbar-brand:hover, .nav-link:hover {
+    color: #f07c41;
+    text-decoration: underline;
+}
+
+.navbar-brand:focus, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
+    color: #06c;
+}
--- a/src/components/navigation/Navigation.jsx
+++ b/src/components/navigation/Navigation.jsx
@ -0,0 +1,38 @@
+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 (
+        <Navbar expand="md" bg="purple">
+            <Container fluid>
+                <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/news'}>
+                    Новости
+                </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>
+    );
+};
+
+Navigation.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Navigation;
--- a/src/index.css
+++ b/src/index.css
--- a/src/main.jsx
+++ b/src/main.jsx
@ -0,0 +1,74 @@
+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 Abiturient from './pages/Abiturient.jsx';
+import AddNews from './pages/AddNews.jsx';
+import Admin from './pages/Admin.jsx';
+import Contacts from './pages/Contacts.jsx';
+import ErrorPage from './pages/ErrorPage.jsx';
+import Main from './pages/Main.jsx';
+import News from './pages/News.jsx';
+import Registration from './pages/Registration.jsx';
+import University from './pages/University.jsx';
+
+const routes = [
+  {
+    path: '/university',
+    element: <University />,
+    title: 'Об университете',
+  },
+  {
+    path: '/abiturient',
+    element: <Abiturient />,
+    title: 'Поступающему',
+  },
+  {
+    path: '/admin',
+    element: <Admin />,
+    title: 'Страница админа',
+  },
+  {
+    path: '/registration',
+    element: <Registration />,
+    title: 'Регистрация',
+  },
+  {
+    path: '/contacts',
+    element: <Contacts />,
+    title: 'Контакты',
+  },
+  {
+    path: '/news',
+    element: <News />,
+    title: '',
+  },
+  { 
+    path: '/add_news',
+    element: <AddNews />,
+    title: '',
+  },
+  {
+    index: true,
+    path: '/',
+    element: <Main />,
+    title: '',
+  }
+]
+
+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>,
+);
--- a/src/pages/Abiturient.jsx
+++ b/src/pages/Abiturient.jsx
@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { Form, Table, Container, Row, Col, InputGroup, Button } from 'react-bootstrap';
+
+const Abiturient = () => {
+
+    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">
+                <h3>Список направлений</h3>
+            </div>
+            <br/>
+            <Form id="directions" noValidate validated={validated} onSubmit={handleSubmit}>
+                <Container>
+                    <Row className="justify-content-md-center">
+                        <Col md={4} xl={2} className='mt-2'>
+                            <InputGroup>
+                                <InputGroup.Text>Код:</InputGroup.Text>
+                                <Form.Control id="code" placeholder="03.09.03"/>
+                            </InputGroup>
+                        </Col>
+                        <Col md={7} xl={5} className='mt-2'>
+                            <InputGroup>
+                                <InputGroup.Text>Направление:</InputGroup.Text>
+                                <Form.Control id="direction" placeholder="Программная инженерия"/>
+                            </InputGroup>
+                        </Col>
+                        <Col md={8} xl={5} className='mt-2'>
+                            <InputGroup>
+                                <InputGroup.Text>Предметы:</InputGroup.Text>
+                                <Form.Control id="subjects" placeholder="Информатика, физика"/>
+                            </InputGroup>
+                        </Col>
+                    </Row>
+                    <Row className='mt-3'>
+                        <Col>
+                            <Button variant="primary">Поиск</Button>
+                        </Col>
+                    </Row>
+                </Container>
+            </Form>
+            <Table className="mt-2" bordered hover>
+                <thead>
+                    <th scope="col">Код</th>
+                    <th scope="col">Наименование направления</th>
+                    <th scope="col">Требуемые баллы ЕГЭ</th>
+                </thead>
+                <tbody>
+                    <tr>
+                    <td>1</td>
+                    <td>Песочница</td>
+                    <td>50</td>
+                    </tr>
+                    <tr>
+                    <td>2</td>
+                    <td>Художка</td>
+                    <td>50</td>
+                    </tr>
+                    <tr>
+                    <td>3</td>
+                    <td>Программисты</td>
+                    <td>50</td>
+                    </tr>
+                </tbody>
+            </Table>
+        </>
+    );
+};
+
+export default Abiturient;
--- a/src/pages/AddNews.jsx
+++ b/src/pages/AddNews.jsx
@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { Form, Button, InputGroup, Container } from "react-bootstrap";
+
+const AddNews = () => {
+    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">
+                <h3>Добавить новость</h3>
+            </div>
+            <br/>
+            <div>
+                <Container className='col-9'>
+                    <Form id="add_news" noValidate validated={validated} onSubmit={handleSubmit}>
+                        <img id="image-preview" src="https://via.placeholder.com/200" className="rounded" alt="placeholder"/>
+                        <br/>
+                        <Form.Group controlId="name">
+                            <Form.Label>Заголовок:</Form.Label>
+                            <Form.Control type="text" name="name" placeholder="Заголовок" required />
+                        </Form.Group>
+                        <br/>
+                        <Form.Group controlId="email">
+                            <Form.Label>Дата:</Form.Label>
+                            <Form.Control type="date" name="email" placeholder="01.01.2024" required />
+                        </Form.Group>
+                        <br/>
+                        <Form.Group controlId="question">
+                            <Form.Label>Текст новости:</Form.Label>
+                            <Form.Control type="text" as="textarea" placeholder="2-3 предложения" name="question" rows={4} required />
+                        </Form.Group>
+                        <br/>
+                        <Form.Group controlId="theme">
+                            <Form.Label>Тэги:</Form.Label>
+                            <Form.Control type="text" name="theme" placeholder="праздник программирование" required />
+                        </Form.Group>
+                        <br/>
+                        <Form.Label>Изображение:</Form.Label>
+                        <InputGroup>
+                            <Form.Control id="image" type="file"/>
+                        </InputGroup>
+                        <br/>
+                        <div className="text-center">
+                            <Button variant="primary" type="submit">Отправить</Button>
+                        </div>
+                    </Form>
+                </Container>
+            </div>
+        </>
+    );
+};
+
+export default AddNews;
--- a/src/pages/Admin.jsx
+++ b/src/pages/Admin.jsx
@ -0,0 +1,39 @@
+import { Button, Form, Table } from "react-bootstrap";
+
+const Admin = () => {
+    return (
+        <>
+            <div className="text-center">
+                <h3>Кабинет администратора</h3>
+            </div>
+            <br/>
+            <Form>
+                <Button className="btn btn-primary;">Добавить новость</Button>
+            </Form>
+            <Table id="items-table" className="mt-4" hover bordered>
+                <thead>
+                <th scope = "col">№</th>
+                <th scope = "col" className ="w-10">Название</th>
+                <th scope = "col" className = "w-30">Дата</th>
+                <th scope = "col" className = "w-50">Описание</th>
+                <th scope = "col">Теги</th>
+                <th scope = "col"></th>
+                <th scope = "col"></th>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>1</td>
+                    <td>Песочница</td>
+                    <td>19.12.2023</td>
+                    <td>Описание</td>
+                    <td>Теги</td>
+                    <td></td>
+                    <td></td>
+                    </tr>
+                </tbody>
+            </Table>
+        </>
+    );
+};
+
+export default Admin;
--- a/src/pages/Contacts.jsx
+++ b/src/pages/Contacts.jsx
@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { Button, Container, Form, FormLabel, Row, Col } from "react-bootstrap";
+import imgLetter from "../assets/letter.jpg";
+
+const Contacts = () => {
+    const [validated, setValidated] = useState(false);
+
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        setValidated(true);
+    };
+
+    return (
+        <>
+            <Container >
+                <Row className="justify-content-md-center" sm={1} lg={2}>
+                    <Col>
+                        <div className="text-center">
+                            <h3>Обратная связь</h3>
+                            Вы можете задать нам любой вопрос, обратиться с предложением или сообщить о проблеме. Для этого заполните приведённую форму.
+                            <br/>
+                            Мы с радостью вам ответим!
+                            <br/><br/>
+                            <img src={imgLetter} height="220px" alt="Здание университета"/>
+                            <br/>
+                        </div>
+                    </Col>
+                    <Col>
+                        <Form id="contacts-form" noValidate validated={validated} onSubmit={handleSubmit}>
+                            <Form.Group controlId="name">
+                                <FormLabel>Имя:</FormLabel>
+                                <Form.Control type="text" name="name" required />
+                            </Form.Group>
+                            <br/>
+                            <Form.Group controlId="email">
+                                <FormLabel>Email:</FormLabel>
+                                <Form.Control type="email" name="email" required />
+                            </Form.Group>
+                            <br/>
+                            <Form.Group controlId="theme">
+                                <FormLabel>Тема:</FormLabel>
+                                <Form.Control type="text" name="theme" required />
+                            </Form.Group>
+                            <br/>
+                            <Form.Group controlId="question">
+                                <FormLabel>Ваш вопрос:</FormLabel>
+                                <Form.Control type="text" as="textarea" name="question" rows={4} required />
+                            </Form.Group>
+                            <br/>
+                            <div className="text-center">
+                                <Button variant="primary" type="submit">Отправить</Button>
+                            </div>
+                        </Form>
+                    </Col>
+                </Row>
+            </Container>
+        </>
+    );
+};
+
+export default Contacts;
--- a/src/pages/ErrorPage.jsx
+++ b/src/pages/ErrorPage.jsx
@ -0,0 +1,19 @@
+import imgError from '../assets/cat2.png'
+
+const ErrorPage = () => {
+    return (
+        <>
+                <br/><br/>
+                <div className="text-center">
+                <h2>Ой!</h2>
+                <h4>
+                    Мы не нашли эту страницу :(
+                </h4>
+                <br/>
+                <img src={imgError} height="80%"/>
+                </div>
+        </>
+    );
+};
+
+export default ErrorPage;
--- a/src/pages/Main.jsx
+++ b/src/pages/Main.jsx
@ -0,0 +1,36 @@
+import { Link } from 'react-router-dom';
+import { Carousel } from 'react-bootstrap';
+import Students1 from '../assets/Students1.jpg';
+import Students2 from '../assets/Students2.jpg';
+import Students3 from '../assets/Students3.jpg';
+
+const Main = () => {
+    return (
+        <>
+            <div className="text-center">
+                <h4>Добро пожаловать на сайт</h4>
+                <h3><b>Государственного политехнического университета</b>!</h3>
+            </div>
+            <div className="text-justify">
+                На нашем сайте вы можете просмотреть <a href="news">последние новости</a>, прочитать <a href="university">информацию о нас</a>, и многое другое....
+                <br/><br/>
+                <Carousel data-bs-theme="dark">
+                    <Carousel.Item interval={1800}>
+                        <img src={Students1} className="d-block w-80"/>
+
+                    </Carousel.Item>
+                    <Carousel.Item interval={1800}>
+                        <img src={Students2} className="d-block w-80"/>
+
+                    </Carousel.Item>
+                    <Carousel.Item interval={1800}>
+                        <img src={Students3} className="d-block w-80"/>
+
+                    </Carousel.Item>
+                </Carousel>
+            </div>
+        </>
+    );
+};
+
+export default Main;
--- a/src/pages/News.jsx
+++ b/src/pages/News.jsx
@ -0,0 +1,15 @@
+import { Button, Form } from "react-bootstrap";
+
+const News = () => {
+    return (
+        <>
+            <div className="text-center">
+                <h3>Новости</h3>
+            </div>
+            <div id="list-news"></div>
+            <br/>
+        </>
+    );
+};
+
+export default News;
--- a/src/pages/Registration.jsx
+++ b/src/pages/Registration.jsx
@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { Container, Form, Row, Col, Button } from "react-bootstrap";
+
+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="text-center">
+            <h3>Регистрация</h3>
+            Регистрация на нашем сайте позволит Вам стать его полноценным участником.
+            <br/>
+            Вы сможете просматривать расписание групп, свои оценки и учебный план.
+            В случае возникновения проблем с регистрацией, обратитесь к <a href="./contacts">администратору</a>.
+        </div>
+       <br/><br/>
+        <Form noValidate validated={validated} onSubmit={handleSubmit}>
+            <Container >
+                <Row xs={1} lg={3} className='mb-2'>
+                    <Col className='mb-2'>
+                        <Form.Group controlId='login'>
+                            <Form.Label>Логин: </Form.Label>
+                            <Form.Control type="text" name="login" required />
+                        </Form.Group>
+                    </Col>
+                    <Col className='mb-2'>
+                        <Form.Group controlId='FIO'>
+                            <Form.Label>ФИО: </Form.Label>
+                            <Form.Control type="text" name="FIO" required />
+                        </Form.Group>
+                    </Col>
+                    <Col className='mb-2'>
+                        <Form.Group controlId='birthDate'>
+                            <Form.Label>Дата рождения: </Form.Label>
+                            <Form.Control type="date" name="birthDate" required />
+                        </Form.Group>
+                    </Col>
+                </Row>
+                <Row xs={1} lg={3}>
+                    <Col className='mb-2'>
+                        <Form.Group controlId='email'>
+                            <Form.Label>Email: </Form.Label>
+                            <Form.Control type="text" name="email" required />
+                        </Form.Group>
+                    </Col>
+                    <Col className='mb-2'>
+                        <Form.Group controlId='password'>
+                            <Form.Label>Пароль: </Form.Label>
+                            <Form.Control type="pass" name="password" required />
+                        </Form.Group>
+                    </Col>
+                    <Col className='mb-2'>
+                        <Form.Group controlId='check-password'>
+                            <Form.Label>Проверка пароля: </Form.Label>
+                            <Form.Control type="pass" name="password" required />
+                        </Form.Group>
+                    </Col>
+                </Row>
+                <br/>
+                <Row className="justify-content-md-center" lg={3}>
+                <Form.Group controlId='status' className="d-md-flex flex-md-row" required>
+                    <Col>
+                        <Form.Check type="radio" name="status" label='Студент' inline/>
+                    </Col>
+                    <Col>
+                        <Form.Check type="radio" name="status" label='Преподаватель' inline/>
+                    </Col>
+                </Form.Group> 
+                </Row>
+                <br/>
+            </Container>
+            <div className="text-center">
+                <Button variant="primary" type="submit">Зарегистрироваться</Button>
+            </div>
+        </Form>
+        </>
+    );
+};
+
+export default Registration;
--- a/src/pages/University.jsx
+++ b/src/pages/University.jsx
@ -0,0 +1,25 @@
+import imgUniversity from "../assets/University.jpg";
+
+const University = () => {
+    return (
+        <>
+            <div className="text-center">
+            <h3>История ГПУ✨</h3>
+            </div>
+            <p>29 мая 2001 года решением правительства РФ был создан Государственный политехнический университет. Новый ВУЗ был образован на базе Тольяттинского политехнического института и Тольяттинского филиала Самарского государственного педагогического университета.</p>
+            <p>История Политехнического института начинается с вечернего отделения Куйбышевского индустриального института, созданного при Куйбышевгидросторе в 1951 году. Строительство ГЭС остро нуждалось в квалифицированных инженерах. Руководил факультетом Д.Е. Чуркин, а в 1953 году его сменил к.т.н. В.Н. Зубков.</p>
+            <p>1 сентября 1951 года начались занятия 150 студентов. Первое время преподаватели приезжали из Куйбышева, лекции читали многие инженеры-практики со стройки, и сам начальник КГС И.В. Комзин. На отделении было всего два штатных сотрудника: В.Н. Зубков и А.Э. Лившиц. В 1962 году число сотрудников возросло до 90 человек, 8 из них имели ученую степень кандидатов наук.</p>
+            <p>В 1956 году состоялся первый выпуск инженеров-гидростроителей и инженеров-электриков. Постепенно открывались новые специальности, в 1959 году получили дипломы первые инженеры-механики. В 1961 было открыто дневное обучение.</p>
+            <p>В 1961 году были открыты механический факультет (декан В.Н. Зубков) и химико-электротехнический (декан Б.Н. Рачинский). В 1964 году был создан химико-технологический факультет.  В 1966 году были выпущены первые инженеры-технологи химического производства. В 1966 году на трех факультетах обучались 2800 студентов.</p>
+            <p>В октябре 1966 года на базе филиала был образован Тольяттинский политехнический институт. Немалую роль в организации института сыграли потребности в кадрах строящегося ВАЗа, а также наличие материальной базы.</p>
+            <p>Первым ректором нового ВУЗа был назначен профессор, доктор технических наук видный ученый из Куйбышева Арон Наумович Резников. Он сумел привлечь новые квалифицированные кадры и  создал современный институт с высоким учебным и научным потенциалом. Были созданы 13 новых кафедр, в том числе единственная в стране кафедра промышленной пайки. Благодаря А.Н. Резникову через 10 лет в ТПИ работали 7 докторов наук и 151 кандидат наук. За это время почти в 2 раза возрос набор студентов, и в 10 раз возросли объемы научных работ. Наиболее успешными были 80-е гг., когда учёные ТПИ осваивали в год  около 3 млн. руб.</p>
+            <p>Ежегодно ученые института получали десятки свидетельств на изобретения, всего же со времени создания ТПИ было получено   1134 авторских свидетельства на изобретения.</p>
+            <p>ТГУ – современный инновационный вуз. В 2010 году  университет стал победителем конкурса  Правительства РФ на Премию качества за 2009 год, дважды – в 2004 и 2011 году ТГУ стал лауреатом конкурса «Европейское качество» в группе «100  лучших вузов России». В 2011 году ТГУ завоевал  по итогам конкурса  СНГ за достижения в области качества  оказания услуг приз «Признание делового совершенства». Ректор ТГУ М.М. Криштал в 2011 г. удостоен звания «Российский лидер качества», награждён дипломом и медалью,  такую высокую оценку деятельности дала «Всероссийская организация качества».</p>
+            <p>В 2014 году в составе ТГУ 11 институтов, включая институт военного обучения, 44 кафедры, институт дистанционного обучения.</p>
+            <br/>
+            <img src={imgUniversity} height="250px" alt="Здание университета"/>
+        </>
+    );
+};
+
+export default University;
--- a/vite.config.js
+++ b/vite.config.js
@ -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,
+  },
+});