Ready Lab 4 with report

2023-11-24 12:31:16 +04:00 · 2023-11-24 12:31:16 +04:00 · dd726f8436
commit dd726f8436
parent 7bb8031144
56 changed files with 5753 additions and 0 deletions
--- a/Lab4/.eslintrc.cjs
+++ b/Lab4/.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/Lab4/.gitignore
+++ b/Lab4/.gitignore
@ -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?
--- a/Lab4/README.md
+++ b/Lab4/README.md
@ -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
+```
--- a/Lab4/index.html
+++ b/Lab4/index.html
@ -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>
--- a/Lab4/jsconfig.json
+++ b/Lab4/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/Lab4/package-lock.json
+++ b/Lab4/package-lock.json
--- a/Lab4/package.json
+++ b/Lab4/package.json
@ -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"
+  }
+}
--- a/Lab4/public/favicon.svg
+++ b/Lab4/public/favicon.svg
@ -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>
--- a/Lab4/src/App.css
+++ b/Lab4/src/App.css
--- a/Lab4/src/App.jsx
+++ b/Lab4/src/App.jsx
@ -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;
--- a/Lab4/src/assets/Image1.png
+++ b/Lab4/src/assets/Image1.png
--- a/Lab4/src/assets/Image10.jpg
+++ b/Lab4/src/assets/Image10.jpg
--- a/Lab4/src/assets/Image11.jpg
+++ b/Lab4/src/assets/Image11.jpg
--- a/Lab4/src/assets/Image12.png
+++ b/Lab4/src/assets/Image12.png
--- a/Lab4/src/assets/Image13.jpg
+++ b/Lab4/src/assets/Image13.jpg
--- a/Lab4/src/assets/Image2.png
+++ b/Lab4/src/assets/Image2.png
--- a/Lab4/src/assets/Image3.png
+++ b/Lab4/src/assets/Image3.png
--- a/Lab4/src/assets/Image4.png
+++ b/Lab4/src/assets/Image4.png
--- a/Lab4/src/assets/Image5.png
+++ b/Lab4/src/assets/Image5.png
--- a/Lab4/src/assets/Image6.jpg
+++ b/Lab4/src/assets/Image6.jpg
--- a/Lab4/src/assets/Image7.jpg
+++ b/Lab4/src/assets/Image7.jpg
--- a/Lab4/src/assets/Image8.png
+++ b/Lab4/src/assets/Image8.png
--- a/Lab4/src/assets/Image9.jpg
+++ b/Lab4/src/assets/Image9.jpg
--- a/Lab4/src/assets/banner1.png
+++ b/Lab4/src/assets/banner1.png
--- a/Lab4/src/assets/banner2.png
+++ b/Lab4/src/assets/banner2.png
--- a/Lab4/src/assets/banner3.png
+++ b/Lab4/src/assets/banner3.png
--- a/Lab4/src/assets/logo.png
+++ b/Lab4/src/assets/logo.png
--- a/Lab4/src/components/banner/Banner.css
+++ b/Lab4/src/components/banner/Banner.css
@ -0,0 +1,25 @@
+#banner {
+    margin: 2px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+#banner img {
+    border: 1px solid #3c3c3f;
+    border-radius: 5px;
+}
+
+#banner img.banner-show {
+    width: 100%;
+    opacity: 1;
+    transition: opacity 1s, visibility 0s;
+}
+
+#banner img.banner-hide {
+    height: 0;
+    width: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 1s, visibility 0s 1s;
+}
--- a/Lab4/src/components/banner/Banner.jsx
+++ b/Lab4/src/components/banner/Banner.jsx
@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import banner1 from '../../assets/Image3.png';
+import banner2 from '../../assets/Image4.png';
+import banner3 from '../../assets/Image5.png';
+import './Banner.css';
+
+const Banner = () => {
+    const [currentBanner, setCurrentBanner] = useState(0);
+    const banners = [banner1, banner2, banner3];
+
+    const getBannerClass = (index) => {
+        return currentBanner === index ? 'banner-show' : 'banner-hide';
+    };
+
+    useEffect(() => {
+        const bannerInterval = setInterval(
+            () => {
+                console.info('Banner changed');
+                let current = currentBanner + 1;
+                if (current === banners.length) {
+                    current = 0;
+                }
+                setCurrentBanner(current);
+            },
+            5000,
+        );
+        return () => clearInterval(bannerInterval);
+    });
+
+    return (
+        <div id="banner" >
+            {
+                banners.map((banner, index) =>
+                    <img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
+            }
+        </div >
+    );
+};
+
+export default Banner;
--- a/Lab4/src/components/footer/Footer.css
+++ b/Lab4/src/components/footer/Footer.css
@ -0,0 +1,7 @@
+.my-footer {
+    background-color: #636363;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    height: 64px;
+    color: #fff;
+}
--- a/Lab4/src/components/footer/Footer.jsx
+++ b/Lab4/src/components/footer/Footer.jsx
@ -0,0 +1,15 @@
+import './Footer.css';
+
+const Footer = () => {
+    const year = new Date().getFullYear();
+
+    return (
+        <footer className="my-footer mt-auto fixed bottom-0 w-100">
+            <div className="copywriter p-2">
+                &copy; {year} UlRent Белянин Никита ПИбд-21 | Все права защищены ;)
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
--- a/Lab4/src/components/navigation/Navigation.css
+++ b/Lab4/src/components/navigation/Navigation.css
@ -0,0 +1,77 @@
+.navbar{
+    background-color: #85DADA !important;
+}
+
+.my-navbar {
+    background-color: #85DADA !important;
+}
+
+.my-navbar .link a:hover {
+    text-decoration: underline !important;
+}
+
+.my-navbar .logo {
+    width: 20px;
+    height: 20px;
+}
+
+.logo{
+    width: 100px;
+    height: 80px;
+}
+
+.main-navbar{
+    font-size: 24px;
+    justify-content: end;
+}
+
+.Name{
+    color: #ffffff;
+    font-size: 24px;
+    text-decoration: none;
+}
+
+
+@media (max-width: 600px) { 
+    .logo{
+        width: 80px;
+        height: 60px;
+    }
+    .Name{
+        font-size: 22px;
+    }
+ }
+
+
+ @media (max-width: 360px){
+    .Name{
+        font-size: 20px;
+    }
+
+    .logo{
+        width: 60px;
+        height: 50px;
+    }
+}
+
+@media (max-width: 300px){
+    .logo{
+        width: 50px;
+        height: 50px;
+    }
+}
+
+@media (max-width: 270px){
+    .Name{
+        font-size: 14px;
+    }
+
+    .logo{
+        width: 50px;
+        height: 40px;
+    }
+
+    .copywriter{
+        font-size: 14px;
+    }
+}
--- a/Lab4/src/components/navigation/Navigation.jsx
+++ b/Lab4/src/components/navigation/Navigation.jsx
@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import {
+ Container, Nav, Navbar, NavbarCollapse, NavbarToggle,
+} from 'react-bootstrap';
+import { Link, useLocation } from 'react-router-dom';
+import Logo from '../../assets/Image1.png';
+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='navbar navbar-expand-md navbar-dark'>
+                <Container fluid>
+                    <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
+                            <img src={Logo} className="logo me-5" alt="логотип" />
+                    </Navbar.Brand>
+                    <Navbar as={Link} to={indexPageLink?.path ?? '/'}>
+                        <div className="Name"> UlRent </div>
+                    </Navbar>
+                    <NavbarToggle aria-controls='main-navbar' />
+                    <NavbarCollapse className="justify-content-end me-5" id='main-navbar '>
+                        <Nav className='main-navbar' activeKey={location.pathname}>
+                            {
+                                pages.map((page) =>
+                                    <Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
+                                        {page.title}
+                                    </Nav.Link>)
+                            }
+                        </Nav>
+                    </NavbarCollapse>
+                </Container>
+            </Navbar >
+        </header>
+    );
+};
+
+Navigation.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Navigation;
--- a/Lab4/src/index.css
+++ b/Lab4/src/index.css
@ -0,0 +1,27 @@
+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%;
+    }
+}
--- a/Lab4/src/main.jsx
+++ b/Lab4/src/main.jsx
@ -0,0 +1,80 @@
+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 PageMain from './pages/PageMain.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 PageEdit from './pages/PageEdit.jsx';
+import LogIn from './pages/LogIn.jsx';
+import SignIn from './pages/SignIn.jsx';
+import PageMyBulletin from './pages/PageMyBulletin.jsx';
+
+const routes = [
+  {
+    index: true,
+    path: '/',
+    element: <PageMain />,
+  },
+  {
+    path: '/page1',
+    element: <Page1 />,
+    title: 'Обзор',
+  },
+  {
+    path: '/page2',
+    element: <Page2 />,
+    title: 'О нас',
+  },
+  {
+    path: '/page3',
+    element: <Page3 />,
+    title: 'Администрация',
+  },
+  {
+    path: '/page4',
+    element: <Page4 />,
+    title: 'Контакты',
+  },
+  {
+    path: '/page5',
+    element: <Page5 />,
+  },
+  {
+    path: '/page-edit',
+    element: <PageEdit />,
+  },
+  {
+    path: '/logIn',
+    element: <LogIn />,
+  },
+  {
+    path: '/signIn',
+    element: <SignIn />,
+  },
+  {
+    path: '/pageMyBulletin',
+    element: <PageMyBulletin />,
+  },
+];
+
+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/Lab4/src/pages/ErrorPage.css
+++ b/Lab4/src/pages/ErrorPage.css
@ -0,0 +1,5 @@
+.back{
+    text-align: center;
+    font-size: 18px;
+    color: red;
+}
--- a/Lab4/src/pages/ErrorPage.jsx
+++ b/Lab4/src/pages/ErrorPage.jsx
@ -0,0 +1,20 @@
+import { Alert, Button, Container } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+import './ErrorPage.css';
+
+const ErrorPage = () => {
+    const navigate = useNavigate();
+
+    return (
+        <Container fluid className="p-2 row justify-content-center mt-5">
+            <Container className='col-md-6 mt-5'>
+                <Alert variant="danger text-center">
+                    Страница не найдена
+                </Alert>
+                <Button className="back w-100 mt-2" variant="" onClick={() => navigate(-1)}>Назад</Button>
+            </Container>
+        </Container>
+    );
+};
+
+export default ErrorPage;
--- a/Lab4/src/pages/LogIn.css
+++ b/Lab4/src/pages/LogIn.css
@ -0,0 +1,21 @@
+.TitleLogin{
+    text-align: center; 
+    color: white; 
+    font-size: 42px;
+}
+
+.btnLog{
+    color: red;
+}
+
+@media (max-width: 550px) { 
+    .imgg1{
+        display: none;
+    }
+}
+
+@media (max-width: 500px) { 
+    .col-7{
+        width: 100%;
+    }
+}
--- a/Lab4/src/pages/LogIn.jsx
+++ b/Lab4/src/pages/LogIn.jsx
@ -0,0 +1,60 @@
+import { Link } from 'react-router-dom';
+import { useState } from 'react';
+import {
+ Container, Button, Form, Row,
+} from 'react-bootstrap';
+import Image12 from '../assets/Image12.png';
+import './LogIn.css';
+
+const LogIn = () => {
+    const [validated, setValidated] = useState(false);
+        const handleSubmit = (event) => {
+            const form = event.currentTarget;
+                if (form.checkValidity() === false) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            setValidated(true);
+        };
+        return (
+            <Container fluid className='container-fluid wrapper'>
+                <div className="TitleLogin">
+                <p>Войти в профиль</p>
+                </div>
+
+                <Row>
+                    <div className='col-7'>
+                    <div className="row justify-content-center">
+                    <Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
+                        <Form.Group className="mb-2" controlId="lastname">
+                            <Form.Label>Ваш логин </Form.Label>
+                            <Form.Control type="text" placeholder="Электронная почта" name="lastname" required />
+                            <Form.Control.Feedback>Логин заполнен</Form.Control.Feedback>
+                            <Form.Control.Feedback type="invalid">Логин не заполнен</Form.Control.Feedback>
+                        </Form.Group>
+                        <Form.Group className="mb-2" controlId="password">
+                            <Form.Label>Пароль</Form.Label>
+                            <Form.Control type="password" placeholder="от 6 до 16 символов" name="password" required />
+                        </Form.Group>
+
+                        <div className="d-grid gap-2 pt-5 mx-auto w-100">
+                            <Button className="w-50 btnLog btn btn-light mx-auto" variant="primary" type="submit">
+                            <Link to="/page1" className='textlink'> Войти </Link>
+                            </Button>
+                        </div>
+                    </Form>
+                    </div>
+                    </div>
+
+                    <div className="col">
+                        <div className="col-md-10 offset">
+                        <img className="imgg1 w-100 h-100" src={Image12} alt="banner" />
+                        </div>
+                    </div>
+                </Row>
+
+            </Container>
+        );
+};
+
+export default LogIn;
--- a/Lab4/src/pages/Page1.css
+++ b/Lab4/src/pages/Page1.css
@ -0,0 +1,37 @@
+body{
+    background-color: #85DADA;
+}
+
+.card-title{
+    color: black; 
+    text-decoration: none;
+}
+
+.textlinkBut{
+    color: white;
+    text-decoration: none;
+}
+
+.textlinkButMy{
+    color: white;
+    text-decoration: none;
+}
+
+.card{
+    width: 18rem;
+}
+
+.btn1{
+    background-color: #0d6efd;
+}
+
+.btn2{
+    color: red;
+    width: 30rem;
+}
+
+@media (max-width: 325px) {
+    .card{
+        width: 100%;
+    }
+}
--- a/Lab4/src/pages/Page1.jsx
+++ b/Lab4/src/pages/Page1.jsx
@ -0,0 +1,79 @@
+import { Link } from 'react-router-dom';
+import { Container, Button } from 'react-bootstrap';
+import Image9 from '../assets/Image9.jpg';
+import Image8 from '../assets/Image8.png';
+import Image13 from '../assets/Image13.jpg';
+import './Page1.css';
+
+const Page1 = () => {
+    return (
+        <>
+            <Container fluid className='container-fluid flex-shrink-0 p-0'>
+                <article>
+                <Button type="button" className="btn1 btn-info me-5 ms-5 mb-5" >
+                <Link to='/pageMyBulletin' className='textlinkButMy mt-4'> Мои объявление </Link>
+                </Button>
+                    <div className="container mb-5 wrapper">
+                        <div className="row">
+                            <div className="col pb-4">
+                                <div className="card mx-auto">
+                                    <Link to="/page5" className='textlink'>
+                                        <img className="card-img-top w-100 h-100" src={Image9} alt="banner" />
+                                    </Link>
+                                        <div className="card-body">
+                                            <h5 className="card-title"> Студия 1 </h5>
+                                            <p className="card-text">Центр города ул. Зелёная, д43, кв.77 Красивый вид на площадь города, рядом расположены ТЦ и парк </p>
+                                            <Button type="button" className="btn1 btn-primary">
+                                                <Link to='/page5' className='textlinkBut mt-4'> 4 249₽ </Link>
+                                            </Button>
+                                        </div>
+                                </div>
+                            </div>
+                            <div className="col pb-4">
+                                <div className="card mx-auto">
+                                <Link to="/page5" className='textlink'>
+                                    <img className="card-img-top w-100 h-100" src={Image8} alt="banner" />
+                                </Link>
+                                    <div className="card-body">
+                                        <h5 className="card-title">Студия 2</h5>
+                                        <p className="card-text">Север города ул. Победы, д. 87 кв.182 Удобная развязка, рядом находится деловой центр и аквапарк </p>
+                                        <Button type="button" className="btn1 btn-primary" > 2 799 ₽ </Button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col pb-4">
+                                <div className="card mx-auto">
+                                <img className="card-img-top w-100 h-100" src={Image13} alt="banner" />
+                                    <div className="card-body">
+                                        <h5 className="card-title">Таунхауз</h5>
+                                        <p className="card-text">Южная часть города ул. Южная д.87 Возможно проживание двумя семьями, на территории парковка</p>
+                                        <Button type="button" className="btn1 btn-primary" > 3 069₽ </Button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col pb-4">
+                                <div className="card mx-auto">
+                                    <img className="card-img-top w-100 h-100" src={Image13} alt="banner" />
+                                    <div className="card-body">
+                                        <h5 className="card-title">Пентхауз</h5>
+                                        <p className="card-text">Центр города ул. Ёжиков д.23, кв.100 Современная, удобная квартира на крыше дома, с двумя этажами</p>
+                                        <Button type="button" className="btn1 btn-primary" > 5 199₽ </Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col mx-auto">
+                        <div className="flex-column col-md-8 mx-auto mb-5">
+                        <Button type="button" className="btn2 btn-light w-100" > <Link to="/page3" className='textlink'> Добавить объявление </Link>
+                        </Button>
+                        </div>
+                    </div>
+                </article>
+            </Container>
+        </>
+    );
+};
+
+export default Page1;
--- a/Lab4/src/pages/Page2.css
+++ b/Lab4/src/pages/Page2.css
@ -0,0 +1,27 @@
+body{
+    background-color: #85DADA;
+}
+
+.card-title{
+    color: black; 
+    text-decoration: none;
+}
+
+.card{
+    width: 18rem;
+}
+
+.btn1{
+    background-color: #0d6efd;
+}
+
+.btn2{
+    color: red;
+    width: 30rem;
+}
+
+@media (max-width: 325px) {
+    .card{
+        width: 100%;
+    }
+}
--- a/Lab4/src/pages/Page2.jsx
+++ b/Lab4/src/pages/Page2.jsx
@ -0,0 +1,49 @@
+import { Container } from 'react-bootstrap';
+import './Page2.css';
+
+const Page2 = () => {
+    return (
+        <>
+            <Container fluid className='container-fluid wrapper flex-shrink-0 p-0'>
+            <div className="container">
+            <div className="textus">
+                <p> <u> О портале</u></p>
+            </div>
+
+            <div className="textus">
+                <p>Позвольте нам сэкономить ваше время и деньги</p>
+            </div>
+
+            <div className="textus">
+                <p>Нужна квартира в Ульяновске? Не хотите перепачивать? Именно на нашем
+                    сайте UlRent мы поможем вам найти необходимое жильё. На нашем портале
+                    аренды недвижимости. Место, в котором можно снять квартиру посуточно
+                    или на долгий срок с максимальной экономией. Почему портал назван
+                    независимым? Потому что мы не связаны ни с одним агенством недвижимости
+                    Ульяновска, И предлагаем только честные цены на квартиры от реальных
+                    собственников. Почему портав назван выгодным и экономным?
+                    Статистика показывает, что клиенты, работащие с посредниками переплатили
+                    бы на 20%-30%
+                </p>
+            </div>
+
+            <div className="textus">
+                <p>Для собственников</p>
+            </div>
+
+            <div className="textus">
+                <p>Если вы являетесь собственником уютной, удобной и комфортной квартиры,
+                    то вы можете разместить своё личное объявление об аренде вашего жилья.
+                    Посуточно или на определённый продолжительный срок - выбор за вами.
+                    Для вас в качестве арендодателя представляется возможность
+                    определять цену и размещать свои контактные данные
+                </p>
+            </div>
+
+        </div>
+            </Container>
+        </>
+    );
+};
+
+export default Page2;
--- a/Lab4/src/pages/Page3.jsx
+++ b/Lab4/src/pages/Page3.jsx
@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+
+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">
+            <Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
+            <div className="text-center mb-5">
+                    <img id="image-preview" src="https://via.placeholder.com/200" alt="placeholder"></img>
+            </div>
+            <Form.Group className="mb-2">
+                    <Form.Select name='selected' defaultValue={0}>
+                        <option value=""> Квартира </option>
+                        <option value="1">Студия</option>
+                        <option value="2">Апартаменты</option>
+                        <option value="3">Таунхауз</option>
+                        <option value="4">Пентхауз</option>
+                    </Form.Select>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="lastname">
+                    <Form.Label>Фамилия и имя</Form.Label>
+                    <Form.Control type="text" name="lastname" required />
+                    <Form.Control.Feedback>Данные заполнены</Form.Control.Feedback>
+                    <Form.Control.Feedback type="invalid">Данные не заполнены</Form.Control.Feedback>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="email">
+                    <Form.Label>E-mail</Form.Label>
+                    <Form.Control type="email" name="email" placeholder="name@example.ru" required />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="password">
+                    <Form.Label>Пароль</Form.Label>
+                    <Form.Control type="password" name="password" required />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="price">
+                    <Form.Label>Цена</Form.Label>
+                    <Form.Control type="number" name="price" min="1000.00" step="0.50" required />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="image">
+                    <Form.Label>Изображение</Form.Label>
+                    <Form.Control name="image" type="file" accept="image/*" />
+                </Form.Group>
+                <div className="text-center mb-4 mt-4">
+                    <Button className="w-50 btn1 btn-primary" variant="primary" type="submit">Отправить</Button>
+                </div>
+            </Form>
+        </div>
+    );
+};
+
+export default Page3;
--- a/Lab4/src/pages/Page4.css
+++ b/Lab4/src/pages/Page4.css
@ -0,0 +1,32 @@
+.textus{
+    color: white; 
+    font-size: 36px
+}
+
+.ifram{
+    height: 600px;
+}
+
+@media (max-width: 900px) { 
+    .ifram{
+        height: 500px;
+    }
+}
+
+@media (max-width: 750px) { 
+    .ifram{
+        height: 400px;
+    }
+}
+
+@media (max-width: 500px) { 
+    .ifram{
+        height: 300px;
+    }
+}
+
+@media (max-width: 400px) { 
+    .ifram{
+        height: auto;
+    }
+}
--- a/Lab4/src/pages/Page4.jsx
+++ b/Lab4/src/pages/Page4.jsx
@ -0,0 +1,46 @@
+import { Container } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import Image9 from '../assets/Image9.jpg';
+import './Page4.css';
+
+const Page4 = () => {
+    return (
+        <>
+            <Container fluid className="container-fluid wrapper mt-4">
+                <div className="container">
+
+                <Link to="/page3">
+                    <img className="img223 w-100" src={Image9} alt="banner" />
+                </Link>
+
+                <div className="textus mt-2">
+                    <p> Контактные данные </p>
+                </div>
+
+                <div className="textus">
+                    <p> +7(909)-985-87-54</p>
+                    <p> +7(909)-657-82-94</p>
+                    <p> +7(909)-247-47-11</p>
+                </div>
+
+                <div className="textus">
+                    <p> <i> E-mail </i> </p>
+                </div>
+
+                <div className="textus">
+                    <p> Ulrent@mail.ru</p>
+                    <p> Ulrent73@yandex.</p>
+                    <p> RussianRent@mail.ru</p>
+                </div>
+
+                <div className="div d-flex justify-content-center">
+                <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A0643c92cbdf3809080e5dfb2804b473ea00af31cfabe6fee08676c59d8675f01&amp;source=constructor" className="ifram w-75 mb-4"></iframe>
+                </div>
+
+        </div>
+        </Container>
+        </>
+    );
+};
+
+export default Page4;
--- a/Lab4/src/pages/Page5.css
+++ b/Lab4/src/pages/Page5.css
@ -0,0 +1,68 @@
+.slide1{
+    color:aqua
+}
+
+.Slide {
+    background-color: white;
+}
+
+.textus1{
+   font-size: 28px;
+   color: white;
+}
+
+@media(max-width: 1200px) {
+    .textus1{
+        font-size: 24px;
+     }
+}
+
+@media(max-width: 1100px) {
+    .textus1{
+        font-size: 20px;
+     }
+}
+
+@media(max-width: 1000px) {
+    .textus1{
+        font-size: 16px;
+     }
+}
+
+@media(max-width: 900px) {
+    .textus1{
+        font-size: 14px;
+     }
+}
+
+@media(max-width: 500px) {
+    .textus1{
+        font-size: 32px;
+    }
+
+    .card-img-top1{
+        display: none;
+    }
+}
+
+@media(max-width: 412px) {
+    .textus1{
+        font-size: 32px;
+    }
+
+    .card-img-top1{
+        display: table;
+    }
+}
+
+@media(max-width: 360px) {
+    .textus1{
+        font-size: 28px;
+    }
+}
+
+@media(max-width: 270px) {
+    .textus1{
+        font-size: 18px;
+    }
+}
--- a/Lab4/src/pages/Page5.jsx
+++ b/Lab4/src/pages/Page5.jsx
@ -0,0 +1,63 @@
+import { Container } from 'react-bootstrap';
+import Carousel from 'react-bootstrap/Carousel';
+import Image6 from '../assets/Image6.jpg';
+import Image7 from '../assets/Image7.jpg';
+import Image9 from '../assets/Image9.jpg';
+import './Page5.css';
+
+const Page5 = () => {
+    return (
+        <>
+            <Container fluid></Container>
+            <article>
+            <div className="row mb-5 mx-auto">
+                <div className="col pt-4 ps-4 pe-4">
+
+                <img className="card-img-top1" src={Image7} alt="banner" />
+
+                </div>
+
+                <div className="col ps-4 pe-4">
+                    <div className="textus1 mx-auto">
+                        <p> Цена: 4500 рублей </p>
+                        <p> Описание </p>
+                        <p> Уютная квартира в центре города с красивым видом на Волгу, современный
+                            ремонт, удобная парковка.Квартира оснащена бытовой техникой: стиралка,
+                            телевизор, холодильник, плита. Есть WI-FI роутер 4 спальных места
+                            (двуспальная кровать и два раскладывающихся дивана).
+                            Расчётный час - 12 часов дня.</p>
+                        <p> Адрес: Улица Ёжиков, д.45, кв-7 </p>
+                        <p> Номер телефона: +7(900)-785-84-56 </p>
+                    </div>
+                </div>
+
+            </div>
+
+            <div className="row margo mt-5 mb-3 mx-auto">
+            <Carousel data-bs-theme="dark">
+                <Carousel.Item>
+                    <img className="d-block w-100" src={Image7} alt="First slide"/>
+                <Carousel.Caption>
+                    <div className='slide1'> <h5>First slide label</h5> </div>
+                </Carousel.Caption>
+                </Carousel.Item>
+                <Carousel.Item>
+                    <img className="d-block w-100" src={Image9} alt="Second slide"/>
+                <Carousel.Caption>
+                    <div className='slide1'> <h5>Second slide label</h5> </div>
+                </Carousel.Caption>
+                </Carousel.Item>
+                <Carousel.Item>
+                    <img className="d-block w-100" src={Image6} alt="Third slide"/>
+                <Carousel.Caption>
+                    <div className='slide1'> <h5>Third slide label</h5> </div>
+                </Carousel.Caption>
+                </Carousel.Item>
+            </Carousel>
+            </div>
+            </article>
+        </>
+    );
+};
+
+export default Page5;
--- a/Lab4/src/pages/PageEdit.jsx
+++ b/Lab4/src/pages/PageEdit.jsx
@ -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;
--- a/Lab4/src/pages/PageMain.css
+++ b/Lab4/src/pages/PageMain.css
@ -0,0 +1,68 @@
+body{
+    background-color: #85DADA;
+}
+
+.btn{
+    background-color: white;
+}
+
+img {
+    height: auto;
+    /* max-width: 100%; */
+    }
+
+.textlink{
+    color: red;
+}
+
+/* .col-8{
+    width: 200px;
+} */
+
+.img22{
+    height: 600px;
+    border-radius: 0px 120px;
+}
+
+@media(max-width: 600px) {
+    .img22{
+        width: 100px;
+        height:180px;
+    }
+
+    .img22{
+        width: 160px;
+        height: 210px;
+    }
+}
+
+@media (max-width: 450px){
+    .col1{
+        display: none;
+    }
+    .textlink{
+        font-size: 16px;
+    }
+    .col-8{
+        width: 100%;
+    }
+    .img22{
+        display: table; /*Отмена display: none*/
+    }
+}
+
+@media (max-width: 400px){
+    .col-8{
+        width: 100%;
+        justify-self: center;
+    }
+    .textlink{
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 270px){
+    .img22{
+        display: table; /*Отмена display: none*/
+    }
+}
--- a/Lab4/src/pages/PageMain.jsx
+++ b/Lab4/src/pages/PageMain.jsx
@ -0,0 +1,58 @@
+import { Link } from 'react-router-dom';
+import { Container, Row, Button } from 'react-bootstrap';
+import Banner from '../components/banner/Banner.jsx';
+import Image1 from '../assets/Image2.png';
+import './PageMain.css';
+
+const Page1 = () => {
+    const image = [Image1];
+    return (
+        <>
+            <Container fluid className='container-fluid p-4 wrapper flex-shrink-0 p-0'>
+                <Row>
+                    <div className="col-8 pe-5 ps-5">
+
+                    <div className="row">
+                    <div className="col col1">
+                        <Banner />
+                    </div>
+
+                    <div className="col col1">
+                        <Banner />
+                        <div className="pt-5"> </div>
+                    </div>
+
+                    <div className="col col1">
+                        <Banner />
+                    </div>
+
+                    </div>
+
+                    <div className="flex-column w-100 mx-auto">
+                        <div className="pb-4 pe-4">
+                            <Button type="button" className="btn btn-default btn-lg w-100 pt-3 pb-3">
+                                <Link to="LogIn" className='textlink'>Войти</Link>
+                            </Button>
+                        </div>
+
+                        <div className="pb-4 pe-4">
+                            <Button type="button" className="btn btn-default btn-lg w-100 pt-3 pb-3">
+                            <Link to="SignIn" className='textlink'>Регистрация</Link>
+                            </Button>
+                        </div>
+                    </div>
+                    </div>
+
+                    <div className="col">
+                        <div className='ms-3' >
+                            <img className="img22 w-100 h-100" src={image} alt="banner" />
+                        </div >
+                    </div>
+
+                </Row>
+            </Container>
+        </>
+    );
+};
+
+export default Page1;
--- a/Lab4/src/pages/PageMyBulletin.css
+++ b/Lab4/src/pages/PageMyBulletin.css
@ -0,0 +1,5 @@
+.TitleMyBulletin{
+    color: white;
+    font-size: 32px;
+    text-align: center;
+}
--- a/Lab4/src/pages/PageMyBulletin.jsx
+++ b/Lab4/src/pages/PageMyBulletin.jsx
@ -0,0 +1,76 @@
+import { Link } from 'react-router-dom';
+import { Container, Button } from 'react-bootstrap';
+import Image9 from '../assets/Image9.jpg';
+import Image8 from '../assets/Image8.png';
+import Image13 from '../assets/Image13.jpg';
+import './PageMyBulletin.css';
+
+const pageMyBulletin = () => {
+    return (
+        <>
+            <Container fluid className='container-fluid flex-shrink-0 p-0'>
+                <div className="TitleMyBulletin">
+                <p>Мои объявления</p>
+                </div>
+                <article>
+                    <div className="container mb-5 wrapper">
+                        <div className="row">
+                            <div className="col pb-4">
+                                <div className="card mx-auto">
+                                    <Link to="/page3" className='textlink'>
+                                        <img className="card-img-top w-100 h-100" src={Image9} alt="banner" />
+                                    </Link>
+                                        <div className="card-body">
+                                            <h5 className="card-title"> Студия 1 </h5>
+                                            <p className="card-text">Центр города ул. Зелёная, д43, кв.77 Красивый вид на площадь города, рядом расположены ТЦ и парк атракционов</p>
+                                            <Button type="button" className="btn1 btn-primary" > 4 249₽ </Button>
+                                        </div>
+                                </div>
+                            </div>
+                            <div className="col pb-4">
+                                <div className="card mx-auto">
+                                <Link to="/page3" className='textlink'>
+                                    <img className="card-img-top w-100 h-100" src={Image8} alt="banner" />
+                                </Link>
+                                    <div className="card-body">
+                                        <h5 className="card-title">Студия 2</h5>
+                                        <p className="card-text">Север города ул. Победы, д. 87 кв.182 Удобная развязка, рядом находится деловой центр и аквапарк </p>
+                                        <Button type="button" className="btn1 btn-primary" > 2 799 ₽ </Button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col pb-4">
+                                <div className="card mx-auto">
+                                <img className="card-img-top w-100 h-100" src={Image13} alt="banner" />
+                                    <div className="card-body">
+                                        <h5 className="card-title">Таунхауз</h5>
+                                        <p className="card-text">Южная часть города ул. Южная д.87 Возможно проживание двумя семьями, на территории располагается парковка</p>
+                                        <Button type="button" className="btn1 btn-primary" > 3 069₽ </Button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col pb-4">
+                                <div className="card mx-auto">
+                                    <img className="card-img-top w-100 h-100" src={Image13} alt="banner" />
+                                    <div className="card-body">
+                                        <h5 className="card-title">Пентхауз</h5>
+                                        <p className="card-text">Центр города ул. Ёжиков д.23, кв.100 Современная, удобная квартира на крыше дома, с двумя этажами</p>
+                                        <Button type="button" className="btn1 btn-primary" > 5 199₽ </Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col mx-auto">
+                        <div className="flex-column col-md-8 mx-auto mb-5">
+                        <Button type="button" className="btn2 btn-light w-100" > Добавить объявление </Button>
+                        </div>
+                    </div>
+                </article>
+            </Container>
+        </>
+    );
+};
+
+export default pageMyBulletin;
--- a/Lab4/src/pages/SignIn.css
+++ b/Lab4/src/pages/SignIn.css
@ -0,0 +1,16 @@
+.imgSign {
+    display: block;
+    height: auto;
+    width: 100%;
+    height: auto;
+}
+
+@media (max-width: 500px) { 
+    .imgSign{
+        display: none;
+    }
+
+    .col-7{
+        width: 100%;
+    }
+}
--- a/Lab4/src/pages/SignIn.jsx
+++ b/Lab4/src/pages/SignIn.jsx
@ -0,0 +1,70 @@
+import { Link } from 'react-router-dom';
+import { useState } from 'react';
+import {
+ Container, Button, Form, Row,
+} from 'react-bootstrap';
+import Image5 from '../assets/Image5.png';
+import './SignIn.css';
+
+const SignIn = () => {
+    const [validated, setValidated] = useState(false);
+        const handleSubmit = (event) => {
+            const form = event.currentTarget;
+                if (form.checkValidity() === false) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            setValidated(true);
+        };
+        return (
+            <Container fluid className='container-fluid wrapper mb-5'>
+                <div className="TitleLogin mb-4">
+                <p> Регистрация </p>
+                </div>
+
+                <Row>
+                    <div className='col-7'>
+                    <div className="row justify-content-center">
+                    <Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
+                        <Form.Group className="mb-2" controlId="group1">
+                            <Form.Label> Как пользователям к вам обращаться </Form.Label>
+                            <Form.Control type="text" placeholder="Ваше имя" name="lastname" required />
+                            <Form.Control.Feedback>Данные заполнены</Form.Control.Feedback>
+                            <Form.Control.Feedback type="invalid">Данные не заполнены</Form.Control.Feedback>
+                        </Form.Group>
+                        <Form.Group className="mb-2" controlId="group2">
+                            <Form.Label>Ваш логин </Form.Label>
+                            <Form.Control type="text" placeholder="Электронная почта" name="login" required />
+                            <Form.Control.Feedback>Логин заполнен</Form.Control.Feedback>
+                            <Form.Control.Feedback type="invalid">Логин не заполнен</Form.Control.Feedback>
+                        </Form.Group>
+                        <Form.Group className="mb-2" controlId="group3">
+                            <Form.Label>Только мобильный телефон </Form.Label>
+                            <Form.Control type="text" placeholder="Номер телефона" name="numberphone" required />
+                        </Form.Group>
+                        <Form.Group className="mb-2" controlId="password">
+                            <Form.Label>Пароль</Form.Label>
+                            <Form.Control type="password" placeholder="от 6 до 16 символов" name="password" required />
+                        </Form.Group>
+
+                        <div className="d-grid gap-2 pt-5 mx-auto w-100">
+                            <Button className="w-50 btnLog btn btn-light mx-auto" variant="primary" type="submit">
+                            <Link to="/page1" className='textlink'> Войти </Link>
+                            </Button>
+                        </div>
+                    </Form>
+                    </div>
+                    </div>
+
+                    <div className="col">
+                        <div className="col-md-10 offset">
+                        <img className="imgSign" src={Image5} alt="banner" />
+                        </div>
+                    </div>
+                </Row>
+
+            </Container>
+        );
+};
+
+export default SignIn;
--- a/Lab4/vite.config.js
+++ b/Lab4/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,
+  },
+});