Merge branch 'main' of http://student.git.athene.tech/alyona.panina/Internet_prog

2023-12-05 14:59:43 +04:00 · 2023-12-05 14:59:43 +04:00 · 885aafef38
commit 885aafef38
parent 00a753c86d c72dc0a07c
50 changed files with 5246 additions and 0 deletions
--- a/лаба/Лекция
+++ b/лаба/Лекция
@ -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/лаба/Лекция
+++ b/лаба/Лекция
@ -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/лаба/Лекция
+++ b/лаба/Лекция
@ -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/лаба/Лекция
+++ b/лаба/Лекция
@ -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>Luxury</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/лаба/Лекция
+++ b/лаба/Лекция
@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}
--- a/лаба/Лекция
+++ b/лаба/Лекция
--- a/лаба/Лекция
+++ b/лаба/Лекция
@ -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/лаба/Лекция
+++ b/лаба/Лекция
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-check" viewBox="0 0 16 16">
+  <path d="M7.293 1.5a1 1 0 0 1 1.414 0L11 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l2.354 2.353a.5.5 0 0 1-.708.708L8 2.207l-5 5V13.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 2 13.5V8.207l-.646.647a.5.5 0 1 1-.708-.708L7.293 1.5Z"/>
+  <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.707l.547.547 1.17-1.951a.5.5 0 1 1 .858.514Z"/>
+</svg>
--- a/лаба/Лекция
+++ b/лаба/Лекция
--- a/лаба/Лекция
+++ b/лаба/Лекция
@ -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/4/src/assets/banner1.png
+++ b/4/src/assets/banner1.png
--- a/4/src/assets/banner2.png
+++ b/4/src/assets/banner2.png
--- a/4/src/assets/banner3.png
+++ b/4/src/assets/banner3.png
--- a/4/src/assets/logo.png
+++ b/4/src/assets/logo.png
--- a/лаба/Лекция
+++ b/лаба/Лекция
--- a/4/src/assets/банер.png
+++ b/4/src/assets/банер.png
--- a/4/src/assets/банер1.jpg
+++ b/4/src/assets/банер1.jpg
--- a/4/src/assets/банер11.png
+++ b/4/src/assets/банер11.png
--- a/4/src/assets/банер2.jpeg
+++ b/4/src/assets/банер2.jpeg
--- a/4/src/assets/инст.png
+++ b/4/src/assets/инст.png
--- a/4/src/assets/люкс.jpg
+++ b/4/src/assets/люкс.jpg
--- a/4/src/assets/отз.png
+++ b/4/src/assets/отз.png
--- a/4/src/assets/отзыв.png
+++ b/4/src/assets/отзыв.png
--- a/4/src/assets/президентский.jpg
+++ b/4/src/assets/президентский.jpg
--- a/4/src/assets/рестик.jpg
+++ b/4/src/assets/рестик.jpg
--- a/4/src/assets/спа.jpg
+++ b/4/src/assets/спа.jpg
--- a/4/src/assets/спорт.jpg
+++ b/4/src/assets/спорт.jpg
--- a/4/src/assets/ст.jpg
+++ b/4/src/assets/ст.jpg
--- a/4/src/components/CardOfRoom.jsx
+++ b/4/src/components/CardOfRoom.jsx
@ -0,0 +1,25 @@
+import { Card } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import './index.css';
+
+const CardOfRoom = ({ name, price, image }) => {
+return (
+<div className="col-md-3 col-6 mb-sm-0 align-self-end ">
+<Card>
+<Link to="/PageAdmin" className='justify-content-center' > <img src={image} className="card-img-top" alt="..." /></Link>
+<div className="card-body">
+ <p className="card-title mt-0 mb-0">{name}</p>
+<p className="card-text ">{price}</p>
+</div>
+</Card>
+</div>
+);
+};
+
+export default CardOfRoom;
+CardOfRoom.propTypes = {
+  name: PropTypes.string,
+  price: PropTypes.string,
+  image: PropTypes.string,
+  };
--- a/4/src/components/CardOfSpa.jsx
+++ b/4/src/components/CardOfSpa.jsx
@ -0,0 +1,24 @@
+import { Card } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+const CardOfRoom = ({ name, info, image }) => {
+return (
+<div className="col-md-3 col-6 mb-sm-0 align-self-end ">
+<Card>
+<Link to="/PageAdmin" > <img src={image} className="card-img-top" alt="..." /></Link>
+<div className="card-body">
+ <p className="card-title mt-0 mb-0">{name}</p>
+<p className="card-text ">{info}</p>
+</div>
+</Card>
+</div>
+);
+};
+
+export default CardOfRoom;
+CardOfRoom.propTypes = {
+  name: PropTypes.string,
+  info: PropTypes.string,
+  image: PropTypes.string,
+  };
--- a/4/src/components/Comment.jsx
+++ b/4/src/components/Comment.jsx
@ -0,0 +1,16 @@
+// import { Table } from 'react-bootstrap';
+import otz from '../assets/отзыв.png';
+import otz1 from '../assets/отз.png';
+import './index.css';
+
+const Comment = () => {
+    return (
+            <div className="col-md-3 col-6 mb-sm-0 align-self-end ">
+ <h4><i > Инкогнито: </i></h4>
+<img src={otz} style={{ width: '200%', height: '700%', paddingTop: '20px' }} alt="logo" />
+<h4><i>Kto-to: </i></h4>
+<img src={otz1} style={{ width: '400%', height: '700%', paddingTop: '20px' }} alt="logo" />
+            </div>
+    );
+};
+export default Comment;
--- a/4/src/components/banner/Banner.css
+++ b/4/src/components/banner/Banner.css
@ -0,0 +1,30 @@
+#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;
+}
+@media (max-width: 390px) {
+    .banner {
+        height: 180 px;
+    }
+}
--- a/4/src/components/banner/Banner.jsx
+++ b/4/src/components/banner/Banner.jsx
@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import banner1 from '../../assets/банер.png';
+import banner2 from '../../assets/банер11.png';
+import './Banner.css';
+
+const Banner = () => {
+    const [currentBanner, setCurrentBanner] = useState(0);
+    const banners = [banner1, banner2];
+
+    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/4/src/components/footer/Footer.css
+++ b/4/src/components/footer/Footer.css
@ -0,0 +1,5 @@
+.my-footer {
+    background-color: pink;
+    height: 32px;
+    color: rgb(0, 0, 0)101;
+}
--- a/4/src/components/footer/Footer.jsx
+++ b/4/src/components/footer/Footer.jsx
@ -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">
+            Ульяновск, {year}
+        </footer>
+    );
+};
+
+export default Footer;
--- a/4/src/components/index.css
+++ b/4/src/components/index.css
@ -0,0 +1,131 @@
+h1 {
+    font-size: 1.5em;
+}
+
+h2 {
+    font-size: 1.25em;
+}
+
+h3 {
+    font-size: 1.1em;
+}
+
+.card-text {
+    margin-top: 0;
+    padding: auto;
+    text-align: center;
+    font-weight: bold;
+
+}
+
+.btn-card {
+
+    
+    background: rgb(233, 120, 184);
+    width: 85%;
+    padding: 40px;
+    
+}
+
+
+
+  .card {
+    background: rgb(238, 138, 248) !important;
+    transition: 0.3s;
+    /* margin-bottom: 30px; */
+     
+    padding-top: 30px;  
+    width: 250px; /* увеличение ширины карточки */
+    height: 300px; /* увеличение высоты карточки */
+}
+.card-title {
+    margin-top: 0;
+    padding: auto;
+    text-align: center !important;
+    font-weight: bold !important;
+
+}
+
+.btn-mw {
+    width: 100%;
+}
+
+@media (max-width:768px) {
+    .col-bott {
+        margin-top: 10px;
+
+    }
+
+    .banner-text {
+        font-size: 24px;
+    }
+}
+@media (max-width : 376px) {
+    footer {
+        height: 80px;
+
+
+    }
+}
+@media (max-width: 768px) {
+    header nav {
+        height: 90px;
+    }
+
+    @media (max-width : 390px) {
+        .card {
+            height: 100px;
+            width: 170px;
+    
+        }
+    }
+    @media (max-width : 390px) {
+        .card-body {
+            
+            background: rgb(238, 138, 248) !important;
+    
+        }
+    }
+    @media (max-width : 390px) {
+        footer {
+            height: 80px;
+    
+    
+        }
+    }
+
+    .panel-col {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+     
+    }
+
+}
+@media (max-width: 766px) {
+    .banner-main {
+        width: 30vw;
+    }
+}
+
+@media (max-width: 368px) {
+    .panel-col {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .banner-main {
+        width: auto;
+    }
+}
+@media (min-width: 768px) {
+    .btn-mw {
+        width: 30%;
+    }
+}
+
+@media (min-width: 1200px) {
+    .btn-mw {
+        width: 20%;
+    }
+}
--- a/4/src/components/navigation/Navigation.css
+++ b/4/src/components/navigation/Navigation.css
@ -0,0 +1,13 @@
+.my-navbar {
+    background-color: pink;
+}
+
+.my-navbar .link a:hover {
+    text-decoration: underline !important;
+
+}
+
+.my-navbar .logo {
+    width: 26px;
+    height: 26px;
+}
--- a/4/src/components/navigation/Navigation.jsx
+++ b/4/src/components/navigation/Navigation.jsx
@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import { Container, Nav, Navbar } from 'react-bootstrap';
+// import { Cart2 } from 'react-bootstrap-icons';
+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='' data-bs-theme='black' className='my-navbar'>
+                <Container fluid>
+                    <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
+                        {/* <Cart2 className='d-inline-block align-top me-1 logo' /> */}
+                        Luxury
+                    </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;
--- a/лаба/Лекция
+++ b/лаба/Лекция
@ -0,0 +1,37 @@
+h1 {
+    font-size: 1.5em;
+    color: black;
+}
+
+h2 {
+    font-size: 1.25em;
+    color: black;
+}
+
+h3 {
+    font-size: 1.1em;
+    color: black;
+}
+
+h4 {
+    font-size: 2.1em;
+    color: black;
+    text-align: center;
+    line-height: 1.5em;
+}
+
+.btn-mw {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    .btn-mw {
+        width: 30%;
+    }
+}
+
+@media (min-width: 1200px) {
+    .btn-mw {
+        width: 20%;
+    }
+}
--- a/лаба/Лекция
+++ b/лаба/Лекция
@ -0,0 +1,73 @@
+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 Page6 from './pages/Page6.jsx';
+import Page7 from './pages/Page7.jsx';
+import PageEdit from './pages/PageEdit.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: '/page6',
+    element: <Page6 />,
+    title: 'Номера',
+  },
+  {
+    path: '/page7',
+    element: <Page7 />,
+    title: '',
+  },
+  {
+    path: '/page-edit',
+    element: <PageEdit />,
+  },
+];
+
+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/4/src/pages/ErrorPage.jsx
+++ b/4/src/pages/ErrorPage.jsx
@ -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;
--- a/4/src/pages/Page1.jsx
+++ b/4/src/pages/Page1.jsx
@ -0,0 +1,12 @@
+import Banner from '../components/banner/Banner.jsx';
+
+const Page1 = () => {
+    return (
+        <>
+            <Banner />
+
+        </>
+    );
+};
+
+export default Page1;
--- a/4/src/pages/Page2.jsx
+++ b/4/src/pages/Page2.jsx
@ -0,0 +1,23 @@
+// import { Table } from 'react-bootstrap';
+ import Spa from '../assets/спа.jpg';
+ import Restoran from '../assets/рестик.jpg';
+ import CardOfSpa from '../components/CardOfSpa.jsx';
+
+const Page2 = () => {
+    return (
+        <>
+          <div className="container">
+
+<h4 style={{ marginTop: '20px' }}> <i> Инфракструктура</i></h4>
+     </div>
+     <div className="row justify-content-evenly ">
+  <CardOfSpa name='Спа' info='Бесплатно для жителей отеля' image={Spa} />
+  <CardOfSpa name='Ресторан' info='Демократичные цены' image={Restoran} />
+
+  </div>
+
+        </>
+    );
+};
+
+export default Page2;
--- a/4/src/pages/Page3.jsx
+++ b/4/src/pages/Page3.jsx
@ -0,0 +1,49 @@
+import { InputGroup, FormControl, Button } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const Page3 = () => {
+return (
+  <div className="container">
+  <div className="row">
+    <div className="col">
+      <i>ФИО</i>
+          </div>
+          <div className="form-group">
+          <InputGroup size="sm" className="mb-3">
+            <InputGroup.Text id="inputGroup-sizing-sm">name</InputGroup.Text>
+            <FormControl aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />
+          </InputGroup>
+
+            <div className="row">
+            <div className="col">
+              <i >Введите эл.адрес</i>
+              <div className="form-group">
+              <InputGroup className="mb-3">
+                <FormControl type="text" placeholder="Password" />
+              </InputGroup>
+            </div>
+          </div>
+          </div>
+          <div className="row">
+            <div className="col">
+              <i>Пароль</i>
+              <div className="form-group">
+              <InputGroup className="mb-3">
+                <FormControl type="text" placeholder="Password" />
+              </InputGroup>
+              </div>
+            </div>
+            </div>
+            </div>
+            <div className='text-center'>
+                    <Button className='w-50' variant='primary' type='submit'>
+                    <Link to="/page7" className="btn btn-catalog btn-primary rounded-0 mt-1 border">Отправить</Link>
+                    </Button>
+                </div>
+
+      </div>
+      </div>
+    );
+};
+
+export default Page3;
--- a/4/src/pages/Page4.jsx
+++ b/4/src/pages/Page4.jsx
@ -0,0 +1,28 @@
+import { Button, ButtonGroup, Table } from 'react-bootstrap';
+
+const Page4 = () => {
+    return (
+        <>
+            <ButtonGroup>
+                <Button variant="success">Добавить номер</Button>
+            </ButtonGroup>
+            <Table className="mt-2" striped>
+                <thead>
+                    <tr>
+                        <th scope="col">№</th>
+                        <th scope="col" className="w-25">Вид номера</th>
+                        <th scope="col" className="w-25">Цена</th>
+                        <th scope="col" className="w-25">Размер скидки</th>
+                        <th scope="col" className="w-25">Итоговая стоимость</th>
+                        <th scope="col"></th>
+                        <th scope="col"></th>
+                        <th scope="col"></th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </Table>
+        </>
+    );
+};
+
+export default Page4;
--- a/4/src/pages/Page5.jsx
+++ b/4/src/pages/Page5.jsx
@ -0,0 +1,42 @@
+// import { Table } from 'react-bootstrap';
+
+ import inst from '../assets/инст.png';
+
+const Page5 = () => {
+    return (
+        <>
+           <div className="container">
+      <div className="row">
+        <div className="col-sm">
+          <i> Все отзывы об объектах в нашем комплексе доступны
+                в открытом виде. Мы будем рады каждому отзыву,
+                потому что  это позволяет стать нам лучше!</i>
+             <i> Пишите нам обязательно!</i>
+             </div>
+            <h3 style={{ marginTop: '20px' }}> <i> Недавние отзывы:</i></h3>
+            <h1> <i > Kto-to </i></h1>
+            <i > Отличный отель! Царит атмосфера экслюзивности. Мне очень понравилось! </i>
+            <div className="row">
+        <div className="col-sm">
+        <h1><i > Инкогнито </i></h1>
+            <i > Лучший спа-отель. Один из лучших отелей в городе.
+               Хорошие номера, отличный завтрак. Территория большая </i>
+               </div>
+               </div>
+               <div className="row">
+
+          <h3 style={{ marginTop: '20px' }}><i>Пишите нам в:</i> </h3>
+          </div>
+          <div className="row">
+          <div className="col" style={{ paddingTop: 40 }}>
+          <img src={inst} style={{ width: '40%', height: 'auto' }} alt="logo" />
+          </div>
+          </div>
+          </div>
+          </div>
+
+        </>
+    );
+};
+
+export default Page5;
--- a/4/src/pages/Page6.jsx
+++ b/4/src/pages/Page6.jsx
@ -0,0 +1,22 @@
+// import { Table } from 'react-bootstrap';
+import Luxury from '../assets/люкс.jpg';
+ import Standard from '../assets/ст.jpg';
+ import CardOfRoom from '../components/CardOfRoom.jsx';
+
+const Page6 = () => {
+    return (
+        <>
+           <div className="container">
+
+        <h4 style={{ marginTop: '20px' }}> <i> Номера в нашем отеле</i></h4>
+             </div>
+             <div className="row justify-content-evenly ">
+          <CardOfRoom name='Стандарт' price='3000' image={Standard} />
+          <CardOfRoom name='Люкс' price='5000' image={Luxury} />
+
+          </div>
+        </>
+    );
+};
+
+export default Page6;
--- a/4/src/pages/Page7.jsx
+++ b/4/src/pages/Page7.jsx
@ -0,0 +1,28 @@
+// import { Table } from 'react-bootstrap';
+import Banner from '../components/banner/Banner.jsx';
+
+const Page7 = () => {
+    return (
+        <>
+          <div className="container">
+      <div className="row">
+        <div className="col-sm">
+          <i> Ваш логин : Alena</i>
+             </div>
+
+          <div className="row">
+          <h3 style={{ marginTop: '20px' }}> <i> Вы забронировали Люкс на 28.12.23 </i></h3>
+          </div>
+          <div className="row">
+          <div className="col">
+          <Banner />
+          </div>
+          </div>
+          </div>
+          </div>
+
+        </>
+    );
+};
+
+export default Page7;
--- a/4/src/pages/PageEdit.jsx
+++ b/4/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.00" min="1000.00" step="0.50" 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/лаба/Лекция
+++ b/лаба/Лекция
@ -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,
+  },
+});