laba4

2024-01-15 01:15:00 +03:00 · 2024-01-15 01:15:00 +03:00 · 426e4cd2cc
commit 426e4cd2cc
parent 9c322b3166
34 changed files with 5308 additions and 0 deletions
--- a/laba4/.eslintrc.cjs
+++ b/laba4/.eslintrc.cjs
@ -0,0 +1,29 @@
+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",
+    quotes: "off",
+    "linebreak-style": "off",
+    "max-len": "off",
+    camelcase: "off",
+    "comma-dangle": "off",
+  },
+};
--- a/laba4/.gitignore
+++ b/laba4/.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/laba4/README.md
+++ b/laba4/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/laba4/index.html
+++ b/laba4/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>My shop</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/laba4/jsconfig.json
+++ b/laba4/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/laba4/package-lock.json
+++ b/laba4/package-lock.json
--- a/laba4/package.json
+++ b/laba4/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/laba4/public/favicon.svg
+++ b/laba4/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/laba4/src/App.css
+++ b/laba4/src/App.css
--- a/laba4/src/App.jsx
+++ b/laba4/src/App.jsx
@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+import { Container } from "react-bootstrap";
+import { Outlet } from "react-router-dom";
+import "./App.css";
+import Navigation from "./components/navigation/Navigation.jsx";
+
+const App = ({ routes }) => {
+  return (
+    <>
+      <Navigation routes={routes}></Navigation>
+      <Container className="p-2" as="main" fluid>
+        <Outlet />
+      </Container>
+    </>
+  );
+};
+
+App.propTypes = {
+  routes: PropTypes.array,
+};
+
+export default App;
--- a/laba4/src/assets/centerpicture.jpg
+++ b/laba4/src/assets/centerpicture.jpg
--- a/laba4/src/assets/circle1.png
+++ b/laba4/src/assets/circle1.png
--- a/laba4/src/assets/circle2.png
+++ b/laba4/src/assets/circle2.png
--- a/laba4/src/assets/eyelashes.jpg
+++ b/laba4/src/assets/eyelashes.jpg
--- a/laba4/src/assets/haircut.jpg
+++ b/laba4/src/assets/haircut.jpg
--- a/laba4/src/assets/nails.jpg
+++ b/laba4/src/assets/nails.jpg
--- a/laba4/src/assets/reviews_eyelushes.jpg
+++ b/laba4/src/assets/reviews_eyelushes.jpg
--- a/laba4/src/assets/reviews_haircut.jpg
+++ b/laba4/src/assets/reviews_haircut.jpg
--- a/laba4/src/assets/reviews_nails.jpg
+++ b/laba4/src/assets/reviews_nails.jpg
--- a/laba4/src/components/navigation/Navigation.css
+++ b/laba4/src/components/navigation/Navigation.css
@ -0,0 +1,14 @@
+.my-navbar {
+  background-color: #775860 !important;
+  font-size: 20px;
+  backdrop-filter: blur(30px);
+}
+
+.my-navbar .link a:hover {
+  text-decoration: underline !important;
+}
+
+.my-navbar-brand {
+  font-size: 25px;
+  text-align: center;
+}
--- a/laba4/src/components/navigation/Navigation.jsx
+++ b/laba4/src/components/navigation/Navigation.jsx
@ -0,0 +1,54 @@
+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();
+
+  return (
+    <header>
+      <div className="NavigationClass">
+        <Navbar
+          expand="md"
+          bg="dark"
+          data-bs-theme="dark"
+          className="my-navbar"
+        >
+          <Container fluid>
+            <Navbar.Brand as={Link} to={indexPageLink?.path ?? "/"}>
+              Тяжелый люкс
+            </Navbar.Brand>
+            <Navbar.Toggle aria-controls="main-navbar" />
+            <Navbar.Collapse id="main-navbar">
+              <Nav className="me-auto link" activeKey={location.pathname}>
+                <Nav.Link as={Link} to="/Page2">
+                  Услуги
+                </Nav.Link>
+                <Nav.Link as={Link} to="/Page3">
+                  О нас
+                </Nav.Link>
+                <Nav.Link as={Link} to="/Page6">
+                  Отзывы
+                </Nav.Link>
+                <Nav.Link as={Link} to="/Page4">
+                  Связаться с нами
+                </Nav.Link>
+                <Nav.Link as={Link} to="/PageEdit">
+                  Режим администратора
+                </Nav.Link>
+              </Nav>
+            </Navbar.Collapse>
+          </Container>
+        </Navbar>
+      </div>
+    </header>
+  );
+};
+
+Navigation.propTypes = {
+  routes: PropTypes.array,
+};
+
+export default Navigation;
--- a/laba4/src/index.css
+++ b/laba4/src/index.css
@ -0,0 +1,203 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  background: #d3b09d;
+  height: 100%;
+}
+.banner {
+  margin-top: 10px;
+  justify-content: center;
+  display: block;
+  text-align: center;
+  color: #775860;
+}
+.container-fluid h1 {
+  font-size: 60px;
+  text-align: center;
+  padding-top: 7%;
+  padding-left: 5%;
+}
+.btn-beauty {
+  background-color: #775860;
+  border: 2px solid #775860;
+  font-size: 30px;
+  border-radius: 15px;
+  color: white;
+}
+.about_text {
+  text-align: left;
+  color: #775860;
+  font-size: 40px;
+}
+h2 {
+  color: #775860;
+  font-size: 60px;
+}
+.card {
+  padding: 2em;
+  margin-bottom: 1rem;
+}
+@media (max-width: 650px) {
+  h2 {
+    font-size: 30px;
+    margin: 20px;
+  }
+  .about_text {
+    font-size: 25px;
+  }
+  .navbar-brand {
+    font-size: 15px;
+  }
+  img {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    max-width: 85%;
+  }
+  .img_options {
+    max-width: 250px;
+    display: flex;
+    align-items: center;
+  }
+  .col {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .container-fluid h1 {
+    font-size: 30px;
+  }
+  .btn-beauty {
+    max-width: 80%;
+  }
+  .card {
+    align-items: center;
+    justify-content: center;
+  }
+  .col p {
+    font-size: 20px;
+    text-align: center;
+  }
+  .rounded-img {
+    max-width: 80%;
+  }
+}
+p {
+  font-size: 25px;
+  text-align: center;
+}
+@media (min-width: 768px) {
+  /* Для экранов шириной 768px и больше */
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="datetime-local"],
+  textarea {
+    width: 50%; /* Уменьшенная ширина на больших экранах */
+    margin: 0 auto; /* Центрирует элемент горизонтально */
+  }
+}
+@media (max-width: 767px) {
+  /* Для экранов шириной 767px и меньше */
+  input[type="password"],
+  input[type="email"],
+  input[type="text"],
+  input[type="datetime-local"] {
+    max-width: 90%;
+  }
+  h2 {
+    margin: 20px;
+    font-size: 25px;
+  }
+}
+.form-text {
+  margin-top: 10px;
+  text-align: center;
+}
+
+form {
+  margin-top: 30px;
+  text-align: center;
+}
+
+form div {
+  margin-bottom: 30px;
+}
+button[type="submit"] {
+  background-color: #775860;
+  border: 2px solid #775860;
+  margin-top: 15px;
+  width: 150px;
+  height: 70px;
+  color: white;
+  font-size: 25px;
+  border-radius: 15px;
+}
+.form-text {
+  border-radius: 15px;
+}
+input[type="password"],
+input[type="email"],
+input[type="text"],
+input[type="datetime-local"],
+textarea {
+  border-radius: 15px;
+  padding: 10px;
+  border: 1px solid #775860;
+  width: 90%;
+  margin: 0 auto; /* Центрирует элемент горизонтально */
+}
+@media (min-width: 768px) {
+  /* Для экранов шириной 768px и больше */
+  input[type="password"],
+  input[type="email"],
+  input[type="text"],
+  input[type="datetime-local"],
+  textarea {
+    width: 50%; /* Уменьшенная ширина на больших экранах */
+    margin: 0 auto; /* Центрирует элемент горизонтально*/
+  }
+}
+table,
+th,
+td {
+  margin: auto;
+  margin-top: 60px;
+  border: 3px solid;
+  border-color: black;
+  text-align: center;
+  color: white;
+}
+@media (max-width: 836px) {
+  table,
+  th,
+  td {
+    margin: 20px;
+  }
+  button[type="submit"] {
+    width: 120px;
+    height: auto;
+  }
+}
+.img_options {
+  height: auto;
+  width: 350px;
+  margin-top: 20px;
+  border-radius: 25px;
+}
+@media (max-width: 400px) {
+  button[type="submit"] {
+    width: 140px;
+    height: auto;
+  }
+}
+add {
+  align-items: center;
+  text-align: center;
+}
+add .container {
+  width: 90%;
+}
--- a/laba4/src/main.jsx
+++ b/laba4/src/main.jsx
@ -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/laba4/src/pages/ErrorPage.jsx
+++ b/laba4/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/laba4/src/pages/Page1.jsx
+++ b/laba4/src/pages/Page1.jsx
@ -0,0 +1,25 @@
+import { Link } from "react-router-dom";
+import centerpicture from "../assets/centerpicture.jpg";
+
+const Page1 = () => {
+  return (
+    <div className="container-fluid">
+      <img
+        className="img_centerpicture"
+        src={centerpicture}
+        alt="beauty"
+        align="left"
+      />
+      <div className="banner">
+        <h1>Наши клиенты заслуживают самого лучшего!</h1>
+        <div className="container text-center my-5 mx-auto">
+          <Link to="/Page2" className="btn btn-beauty">
+            Посмотреть услуги
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Page1;
--- a/laba4/src/pages/Page2.jsx
+++ b/laba4/src/pages/Page2.jsx
@ -0,0 +1,88 @@
+import eyelashes from "../assets/eyelashes.jpg";
+import haircut from "../assets/haircut.jpg";
+import nails from "../assets/nails.jpg";
+
+const Page2 = () => {
+  return (
+    <div>
+      <div className="about text-center my-20 mx-auto">
+        <h2>
+          НАШИ <br />
+          УСЛУГИ
+        </h2>
+      </div>
+      <div className="container my-5">
+        <div className="row row-cols-1 row-cols-md-3 row-cols-lg-3 g-5">
+          <div className="col">
+            <div className="card">
+              <img
+                className="img_centerpicture"
+                src={eyelashes}
+                alt="beauty"
+                align="left"
+              />
+              <div className="card-body">
+                <h5 className="card-title">Оформление ресниц</h5>
+                <h6 className="card-title">от 1500 рублей</h6>
+                <p className="card-text">
+                  - Наращивание ресниц
+                  <br />
+                  - Снятие ресниц
+                  <br />
+                  - Коррекция ресниц
+                  <br />
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="col">
+            <div className="card">
+              <img
+                className="img_centerpicture"
+                src={haircut}
+                alt="beauty"
+                align="left"
+              />
+              <div className="card-body">
+                <h5 className="card-title">Услуги парикмахера</h5>
+                <h6 className="card-title">от 700 рублей</h6>
+                <p className="card-text">
+                  - Женская стрижка
+                  <br />
+                  - Наращивание волос
+                  <br />
+                  - Ботокс для волос
+                  <br />
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="col">
+            <div className="card">
+              <img
+                className="img_centerpicture"
+                src={nails}
+                alt="beauty"
+                align="left"
+              />
+              <div className="card-body">
+                <h5 className="card-title">Маникюр</h5>
+                <h6 className="card-title">от 1000 рублей</h6>
+                <p className="card-text">
+                  - Наращивание ногтей
+                  <br />
+                  - Покрытие гель-лаком
+                  <br />
+                  - Снятие покрытия
+                  <br />
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Page2;
--- a/laba4/src/pages/Page3.jsx
+++ b/laba4/src/pages/Page3.jsx
@ -0,0 +1,22 @@
+const Page3 = () => {
+  return (
+    <div className="container text-center my-10">
+      <h2>О НАС</h2>
+      <div className="about_text">
+        <ul>
+          <li>
+            Мы команда профессионалов, которая поможет воплотить в жизнь все
+            ваши смелые идеи
+          </li>
+          <li>Мы постоянно совершенствуемся и ищем подход к каждому клиенту</li>
+          <li>
+            Молодые сотрудники с многолетним опытом, которые ответственно
+            относятся к своему делу
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Page3;
--- a/laba4/src/pages/Page4.jsx
+++ b/laba4/src/pages/Page4.jsx
@ -0,0 +1,46 @@
+import reviews_eyelushes from "../assets/reviews_eyelushes.jpg";
+import reviews_haircut from "../assets/reviews_haircut.jpg";
+import reviews_nails from "../assets/reviews_nails.jpg";
+
+const Page4 = () => {
+  return (
+    <div>
+      <div className="about text-center my-20 mx-auto">
+        <h2>ОТЗЫВЫ</h2>
+      </div>
+      <div className="container text-center">
+        <div className="row">
+          <div className="col">
+            <img
+              className="img_options"
+              src={reviews_eyelushes}
+              alt="beauty"
+              align="left"
+            />
+            <p>В этом салоне работают настоящие профессионалы!!</p>
+          </div>
+          <div className="col">
+            <img
+              className="img_options"
+              src={reviews_haircut}
+              alt="beauty"
+              align="left"
+            />
+            <p>Спасибо мастеру Елене за качественную стрижку!</p>
+          </div>
+          <div className="col">
+            <img
+              className="img_options"
+              src={reviews_nails}
+              alt="beauty"
+              align="left"
+            />
+            <p>Очень красивые ногти и широкий выбор цветовой палитры :)</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Page4;
--- a/laba4/src/pages/Page5.jsx
+++ b/laba4/src/pages/Page5.jsx
@ -0,0 +1,58 @@
+import { useState } from "react";
+import { Button, Form } from "react-bootstrap";
+import { Link } from "react-router-dom";
+
+const Page5 = () => {
+  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}
+      >
+        <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="firstname">
+          <Form.Label>Имя</Form.Label>
+          <Form.Control type="text" name="firstname" required />
+        </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>
+        <div className="text-center">
+          <Button className="w-50" variant="primary" type="submit1">
+            Отправить
+          </Button>
+        </div>
+        <Link to="/page6">Вход для админа</Link>
+      </Form>
+    </div>
+  );
+};
+
+export default Page5;
--- a/laba4/src/pages/Page6.jsx
+++ b/laba4/src/pages/Page6.jsx
@ -0,0 +1,59 @@
+import { Container, Button, Table } from "react-bootstrap";
+
+const Page6 = () => {
+  return (
+    <>
+      <Container className="text-center my-5">
+        <h1>Просмотр заявок</h1>
+        <Table>
+          <thead>
+            <tr>
+              <th scope="col" width="200" height="100">
+                ФИО
+              </th>
+              <th scope="col" width="200">
+                Электронный адрес
+              </th>
+              <th scope="col" width="200">
+                Сообщение
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th scope="row" height="70">
+                Чубыкина Полина Павловна
+              </th>
+              <td>chubykina@mail.ru</td>
+              <td>Любимой дочке</td>
+            </tr>
+            <tr>
+              <th scope="row" height="70"></th>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr>
+              <th scope="row" height="70"></th>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr>
+              <th scope="row" height="70"></th>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr>
+              <th scope="row" height="70"></th>
+              <td></td>
+              <td></td>
+            </tr>
+          </tbody>
+        </Table>
+        <Button href="/page7" variant="primary" className="mybutton">
+          Редактирование
+        </Button>
+      </Container>
+    </>
+  );
+};
+export default Page6;
--- a/laba4/src/pages/Page7.jsx
+++ b/laba4/src/pages/Page7.jsx
@ -0,0 +1,36 @@
+import { Button, ButtonGroup, Table } from "react-bootstrap";
+import { Link } from "react-router-dom";
+
+const Page7 = () => {
+  return (
+    <>
+      <ButtonGroup>
+        <Button as={Link} to="/page-edit" 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>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </Table>
+    </>
+  );
+};
+
+export default Page7;
--- a/laba4/src/pages/PageEdit.jsx
+++ b/laba4/src/pages/PageEdit.jsx
@ -0,0 +1,86 @@
+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">
+          <Form.Label htmlFor="item" className="form-label">
+            Товары
+          </Form.Label>
+          <Form.Select id="item" name="selected" required></Form.Select>
+        </Form.Group>
+        <Form.Group className="mb-2">
+          <Form.Label htmlFor="price">Цена</Form.Label>
+          <Form.Control
+            id="price"
+            type="number"
+            name="price"
+            defaultValue="0.00"
+            min="1000.00"
+            step="0.50"
+            required
+          />
+        </Form.Group>
+        <Form.Group className="mb-2">
+          <Form.Label htmlFor="count">Количество</Form.Label>
+          <Form.Control
+            id="count"
+            type="number"
+            name="count"
+            defaultValue="0"
+            min="1"
+            step="1"
+            required
+          />
+        </Form.Group>
+        <Form.Group className="mb-2">
+          <Form.Label htmlFor="image">Изображение</Form.Label>
+          <Form.Control id="image" 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="/page7"
+            variant="secondary"
+          >
+            Назад
+          </Button>
+          <Button className="btn-mw me-md-3" type="submit1" variant="primary">
+            Сохранить
+          </Button>
+        </Form.Group>
+      </Form>
+    </>
+  );
+};
+
+export default PageEdit;
--- a/laba4/vite.config.js
+++ b/laba4/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,
+  },
+});
--- a/laba4/ИП_отчет4.pdf
+++ b/laba4/ИП_отчет4.pdf