Третья+Четвертая лаба

2024-01-11 01:15:52 +04:00
parent 456585b984
commit e5cd6c17c8
59 changed files with 10292 additions and 1 deletions
--- a/lab3/data.json
+++ b/lab3/data.json
@@ -65,7 +65,7 @@
      "id": 6
    }
  ],
-  "genre": [
+  "genres": [
    {
      "id": 1,
      "name": "Ужасы"
--- a/lab3/images/bro.jpg
+++ b/lab3/images/bro.jpg
--- a/lab3/images/fire.jpg
+++ b/lab3/images/fire.jpg
--- a/lab3/images/harry.jpg
+++ b/lab3/images/harry.jpg
--- a/lab3/images/noimage.png
+++ b/lab3/images/noimage.png
--- a/lab3/images/nolan.jpg
+++ b/lab3/images/nolan.jpg
--- a/lab3/package-lock.json
+++ b/lab3/package-lock.json
--- a/lab3/package.json
+++ b/lab3/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "web",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "vite": "vite",
+    "serve": "http-server -p 3000 ./dist/",
+    "build": "vite build",
+    "rest": "json-server --watch data.json -p 8081",
+    "dev": "npm-run-all --parallel rest vite",
+    "prod": "npm-run-all build --parallel serve rest"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "bootstrap": "^5.2.1",
+    "bootstrap-datepicker": "^1.10.0",
+    "jquery": "^3.7.1"
+  },
+  "devDependencies": {
+    "eslint": "8.50.0",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-plugin-import": "2.28.1",
+    "http-server": "14.1.1",
+    "json-server": "0.17.4",
+    "npm-run-all": "4.1.5",
+    "vite": "4.4.9"
+  }
+}
--- a/lab3/search.html
+++ b/lab3/search.html
@@ -0,0 +1,101 @@
+<html lang="ru">
+    <head>
+        <meta charset="utf-8">
+        <title>Онлайн-кинотеатр</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
+        <link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
+        <link rel="stylesheet" href="style.css">
+        
+    </head>
+<body class ="d-flex flex-column h-100">
+    <div>
+    <header id="header" class="header row w-100 m-0 mb-3">
+        <div class="p-0">
+            <div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
+                <div class="col-0 col-lg bg-cyan mw-100 mh-100">
+
+                </div>
+                <div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
+                    <a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans m-0 py-2" href="index.html">Онлайн-кинотеатр</a>
+                </div>
+                <div class="d-flex flex-column col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan ">
+                    <div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
+                        <a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
+                    </div>
+                    <div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
+                        <a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
+                    </div>
+                </div>
+                <div class="input-group row text-break w-100 mt-3 p-0 mb-2">
+                    <div class="form-outline col text-break h-100 flex-grow-1">
+                      <input id="search-focus" type="search" id="form1" class="form-control ms-3 p-2 ms-lg-0" placeholder="Введите название фильма" /> 
+                    </div>
+                    <div class="dropdown col-1 col-lg-2 col-xl-3 w-auto mx-3 p-0 text-break h-100">
+                        <button class="btn btn-secondary dropdown-toggle h-100" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+                          <span class="d-none d-lg-inline">Выберите жанр</span>
+                        </button>
+                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+        
+                        </ul>
+                      </div>
+                    <button type="button" class="btn btn-primary col-1 col-sm-1 col-lg-3 col-xl-2 h-100 w-auto">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+                            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+                          </svg>
+                        <span class="d-none d-lg-inline">Поиск</span>
+                    </button>
+                  </div>
+            </div>
+            
+        </div>
+    </header>
+    <main class="container-fluid flex-shrink-0">
+        <div class="row m-2 my-5 ">
+            <div class="col d-flex align-items-center justify-content-center">
+                <a href="selected.html" class="col-xs-12 col-lg-3 w-auto h-auto"><img src="images/fire.jpg" class="img-fluid" alt=""></a>
+            </div>
+            <div class="d-flex flex-column col-xs-12 col-lg-6 col-xl-8 p-0 justify-content-center">
+                <div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 mx-4">
+                    <p class="text-white fs-5 fw-normal font-family-Bayon text-center">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь</p>
+                </div>
+                <div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
+                    <p class="text-center text-white fs-3 fw-normal font-family-Bayon">Приключения, катастрофа, драма, боевик</p>
+                </div>
+                <a href="selected.html" class="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3">
+                    Перейти
+                </a>
+                <a class="d-flex btn btn-primary justify-content-center p-5 fs-5 m-3">
+                    Добавить в избранное
+                </a>
+            </div>
+        </div>
+        <div class="row m-2 my-5">
+            <div class="col d-flex align-items-center justify-content-center">
+                <a href="selected.html" class="col-xs-12 col-lg-3 w-auto h-auto"><img src="images/fire.jpg" class="img-fluid" alt=""></a>
+            </div>
+            <div class="d-flex flex-column col-xs-12 col-lg-6 col-xl-8 p-0 justify-content-center">
+                <div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break mx-4">
+                    <p class="text-white fs-5 fw-normal font-family-Bayon text-center">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь</p>
+                </div>
+                <div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
+                    <p class="text-center text-white fs-3 fw-normal font-family-Bayon">Приключения, катастрофа, драма, боевик</p>
+                </div>
+                <a href="selected.html" class="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3">
+                    Перейти
+                </a>
+                <a class="d-flex btn btn-primary justify-content-center p-5 fs-5 m-3">
+                    Добавить в избранное
+                </a>
+            </div>
+        </div>
+    </main>
+    <footer class="footer mt-auto fixed bottom-0">
+        <div class= "bg-dark-blue d-flex text-center justify-content-center">
+            <p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p> 
+        </div>
+    </footer>
+    <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+</div>
+</body>
+</html>
--- a/lab3/selected.html
+++ b/lab3/selected.html
@@ -0,0 +1,64 @@
+<html lang="ru">
+    <head>
+        <meta charset="utf-8">
+        <title>Онлайн-кинотеатр</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
+        <link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
+        <link rel="stylesheet" href="style.css">
+        
+    </head>
+<body class ="d-flex flex-column h-100">
+    <header id="header" class="header row w-100 m-0 mb-3">
+        <div class="p-0">
+            <div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
+                <div class="col-0 col-lg bg-cyan mw-100 mh-100">
+                </div>
+                <div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
+                    <a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
+                </div>
+                <div class="d-flex flex-column col-xs-12 col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan">
+                    <div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
+                        <a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
+                    </div>
+                    <div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
+                        <a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main class="container-fluid flex-shrink-0">
+        <div class="ms-3">
+            <div class="row p-2 justify-content-center">
+                <img class="col-12 col-lg-6 img-fluid w-auto h-auto" src="images/fire.jpg" alt="" style="max-height: 590;">
+                <div class="col-12 col-lg-6 text-wrap px-2 d-flex justify-content-center mt-3">
+                    <p class="text-white fs-3 fw-normal font-family-Bayon text-lg-start text-center">Дата выхода: 2020<br/>Режиссер:<br/>Алексей Нужный<br/>В главных ролях:<br/>Константин Хабенский, Иван Янковский, Стася Милославская...<br/>Язык: Русский</p>
+                </div>
+                <div class="col-12 d-flex justify-content-center m-0 flex-column mt-5">
+                    <div class="d-flex justify-content-center">
+                        <h1 class="text-white fs-2 fw-normal font-family-Bayon">Огонь</h1>
+                    </div>
+                    <div class="d-flex text-wrap me-3">
+                        <p class="text-white fs-5 fw-normal font-family-Bayon text-lg-center mb-0 px-3 py-2" style="text-align: justify;">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь жителям близлежащей деревни. Константин Хабенский, Иван Янковский и Стася Милославская в зрелищном героическом блокбастере от режиссера Алексея Нужного и создателей кинохитов «Движение вверх», «Экипаж», «Легенда № 17».<br/>Наступает тяжелый сезон разрушительных лесных пожаров. Борьба с ними не на жизнь, а на смерть разворачивается возле маленького села Ольхово в Карелии. На вызов прибыла бригада из шести пожарных во главе с опытным инструктором Алексеем Павловичем Соколовым. У каждого члена группы своя история: кто-то уже потерял в огне самых близких, кого-то с беспокойством ждут дома. Есть среди них и новичок – самоуверенный красавец Роман Ильин. Он ухаживает за дочкой Соколова Катей, работающей на базе в диспетчерской. Вот только отношения с самим Алексеем Павловичем у Ильина не задались – и это мягко говоря. Конфликт нарастает перед лицом свирепого пожара, угрожающего деревенским жителям, которых приходится эвакуировать в экстремальных условиях.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="row justify-content-around">
+                <buttnon class="d-flex btn btn-primary justify-content-center col p-5 fs-4 m-3 align-items-center">
+                    Смотреть
+                </buttnon>
+                <buttnon class="d-flex btn btn-primary justify-content-center col p-5 fs-5 m-3 align-items-center">
+                    Добавить в избранное
+                </buttnon>
+            </div>
+        </div>
+    </main>
+    <footer class="footer mt-auto fixed bottom-0">
+        <div class= "bg-dark-blue d-flex text-center justify-content-center">
+            <p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p> 
+        </div>
+    </footer>
+    <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+</body>
+</html>
--- a/lab3/signup.html
+++ b/lab3/signup.html
@@ -0,0 +1,61 @@
+<html lang="ru">
+    <head>
+        <meta charset="utf-8">
+        <title>Онлайн-кинотеатр</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
+        <link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
+        <link rel="stylesheet" href="style.css">
+        
+    </head>
+<body class ="d-flex flex-column h-100">
+    <header id="header" class="header row w-100 m-0 mb-3">
+        <div class="p-0">
+            <div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
+                <div class="col-0 col-lg bg-cyan mw-100 mh-100">
+
+                </div>
+                <div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
+                    <a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
+                </div>
+                <div class="d-flex flex-column col-xs-12 col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan">
+                    <div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
+                        <a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
+                    </div>
+                    <div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
+                        <a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main class="container-fluid flex-shrink-0">
+        <section class="d-flex align-items-center justify-content-center">
+            <div class="container">
+                <div class="justify-content-center pt-2">
+                    <p class="text-center text-white fs-2 fw-normal font-family-Average Sans">Регистрация</p>
+                </div>
+            </div>
+        </section>
+        <form class="d-flex align-items-center justify-content-center">
+            <div class="container">
+                <div class="row justify-content-center mt-5 col">
+                    <div class="flex-column d-flex col p-2 align-items-center">
+                        <input type="text" class="form-control p-2 m-2" placeholder="Имя пользователя">
+                        <input type="text" class="form-control p-2 m-2" placeholder="Почта">
+                        <input type="text" class="form-control p-2 m-2" placeholder="Пароль">
+                        <input type="text" class="form-control p-2 m-2" placeholder="Повторите пароль">
+                        <button type="submit" class="btn btn-primary mt-5 text-break px-5 py-1 fs-2">Зарегистрироваться</button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </main>
+    <footer class="footer mt-auto fixed bottom-0">
+        <div class= "bg-dark-blue d-flex text-center justify-content-center">
+            <p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p> 
+        </div>
+    </footer>
+    <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+</body>
+</html>
--- a/lab3/style.css
+++ b/lab3/style.css
@@ -0,0 +1,16 @@
+body{
+    background-color:#194F75;
+    height: 100%;
+}
+.bg-cyan{
+    background-color: #71B8F7;
+}
+.bg-grey{
+    background-color: #D9D9D9;
+}
+.bg-dark-blue{
+    background-color: #2B82CF;
+}
+main{
+    flex: 1 1 auto;
+}
--- a/lab3/vite.config.js
+++ b/lab3/vite.config.js
@@ -0,0 +1,22 @@
+import { resolve } from "path";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { defineConfig } from "vite";
+
+export default defineConfig({
+    build: {
+        sourcemap: true,
+        emptyOutDir: true,
+        rollupOptions: {
+            input: {
+                main: resolve(__dirname, "index.html"),
+                selected: resolve(__dirname, "selected.html"),
+                favourite: resolve(__dirname, "favourite.html"),
+                admin: resolve(__dirname, "admin.html"),
+                signup: resolve(__dirname, "signup.html"),
+                login: resolve(__dirname, "login.html"),
+                search: resolve(__dirname, "search.html"),
+                add: resolve(__dirname, "add.html"),
+            },
+        },
+    },
+});
--- 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>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/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,19 @@
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+import './App.css';
+import Footer from './components/footer/Footer.jsx';
+import Header from './components/header/Header.jsx';
+
+const App = () => {
+  return (
+    <>
+      <Header></Header>
+      <Container className='p-0' as="main" fluid>
+        <Outlet />
+      </Container>
+      <Footer />
+    </>
+  );
+};
+
+export default App;
--- 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/images/bro.jpg
+++ b/lab4/src/assets/images/bro.jpg
--- a/lab4/src/assets/images/fire.jpg
+++ b/lab4/src/assets/images/fire.jpg
--- a/lab4/src/assets/images/harry.jpg
+++ b/lab4/src/assets/images/harry.jpg
--- a/lab4/src/assets/images/noimage.png
+++ b/lab4/src/assets/images/noimage.png
--- a/lab4/src/assets/images/nolan.jpg
+++ b/lab4/src/assets/images/nolan.jpg
--- 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/banner1.png';
+import banner2 from '../../assets/banner2.png';
+import banner3 from '../../assets/banner3.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/filmLogo/FilmLogo.jsx
+++ b/lab4/src/components/filmLogo/FilmLogo.jsx
@@ -0,0 +1,22 @@
+import { Col, Image } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+const FilmLogo = ({ logoName }) => {
+        const tempLogo = logoName ?? 'logo';
+        return (
+        <Col xs={12} sm={6} lg={3}
+        className="w-auto h-auto m-2"
+       >
+        <Link to="/selected">
+        <Image src={`src/assets/images/${tempLogo}.jpg`} fluid alt="" />
+        </Link>
+      </Col>
+        );
+};
+
+FilmLogo.propTypes = {
+        logoName: PropTypes.string,
+};
+
+export default FilmLogo;
--- a/lab4/src/components/filmRow/FilmRow.css
+++ b/lab4/src/components/filmRow/FilmRow.css
@@ -0,0 +1,4 @@
+.FilmLogoRow{
+        min-width: 300px;
+        min-height: 500px;
+}
--- a/lab4/src/components/filmRow/FilmRow.jsx
+++ b/lab4/src/components/filmRow/FilmRow.jsx
@@ -0,0 +1,38 @@
+import {
+    Row, Col, Button, Image,
+} from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const FilmRow = () => {
+        return (
+<Row className="m-2 my-5 ">
+        <Col xs={12} lg={3}>
+    <Link to="/selected" className="">
+      <Image src="src/assets/images/fire.jpg" fluid alt="" className="FilmLogoRow"/>
+    </Link>
+    </Col>
+  <Col xs={12} lg={6} xl={8} className="d-flex flex-column p-0 justify-content-center">
+    <div className="d-flex p-1 ps-0 justify-content-center mw-100 mh-100 mx-4">
+      <p className="text-white fs-5 fw-normal font-family-Bayon text-center">
+        Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей,
+        которые борются с неистовой огненной стихией, уничтожающей всё на своем
+        пути. Герои работают в эпицентре лесного пожара и приходят на помощь
+      </p>
+    </div>
+    <div className="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
+      <p className="text-center text-white fs-3 fw-normal font-family-Bayon">
+        Приключения, катастрофа, драма, боевик
+      </p>
+    </div>
+    <Button className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
+        Перейти
+      </Button>
+      <Button className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
+        Смотреть позже
+      </Button>
+  </Col>
+</Row>
+        );
+};
+
+export default FilmRow;
--- a/lab4/src/components/footer/Footer.css
+++ b/lab4/src/components/footer/Footer.css
@@ -0,0 +1,3 @@
+.bg-dark-blue{
+        background-color: #2B82CF;
+    }
--- a/lab4/src/components/footer/Footer.jsx
+++ b/lab4/src/components/footer/Footer.jsx
@@ -0,0 +1,13 @@
+import './Footer.css';
+
+const Footer = () => {
+    return (
+        <footer className="footer mt-auto fixed bottom-0 w-100">
+        <div className= "bg-dark-blue d-flex text-center justify-content-center">
+            <p className="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
+        </div>
+    </footer>
+    );
+};
+
+export default Footer;
--- a/lab4/src/components/genre/Genre.css
+++ b/lab4/src/components/genre/Genre.css
@@ -0,0 +1,3 @@
+.bg-grey{
+        background-color: #D9D9D9;
+    }
--- a/lab4/src/components/genre/Genre.jsx
+++ b/lab4/src/components/genre/Genre.jsx
@@ -0,0 +1,23 @@
+import { Col } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import './Genre.css';
+
+const Genre = ({ genreName }) => {
+        return (
+        <Col xs={12} sm={6} lg={3} xl={1} className="bg-grey rounded-3 text-center p-2 m-2">
+        <Link
+          className="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans"
+          to="/search"
+        >
+          {genreName}
+        </Link>
+        </Col>
+    );
+};
+
+Genre.propTypes = {
+        genreName: PropTypes.string,
+};
+
+export default Genre;
--- a/lab4/src/components/header/Header.css
+++ b/lab4/src/components/header/Header.css
@@ -0,0 +1,10 @@
+.bg-cyan{
+        background-color: #71B8F7;
+}
+.bg-grey{
+        background-color: #D9D9D9;
+}
+.bg-dark-blue{
+        background-color: #2B82CF;
+}
+
--- a/lab4/src/components/header/Header.jsx
+++ b/lab4/src/components/header/Header.jsx
@@ -0,0 +1,43 @@
+import { Link } from 'react-router-dom';
+import { Col, Row } from 'react-bootstrap';
+import './Header.css';
+
+const Header = () => {
+        return (
+        <header className="w-100 m-0 mb-3">
+        <div className="w-100">
+            <Row className="pt-lg-3 px-lg-5 p-0 justify-content-lg-between justify-content-center row w-100 m-0">
+                <Col lg={3} xl={2} className="col-0 bg-cyan gone">
+                </Col>
+              <Col xs className="d-flex p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center">
+                <Link to="/"
+                  className="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2"
+                  href="index.html"
+                >
+                  Онлайн-кинотеатр
+                </Link>
+              </Col>
+          <Col xs={12} sm={6} lg={3} xl={2} className="flex-column p-0 bg-cyan">
+            <div className="d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
+              <Link
+                className="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0"
+                to="/signup"
+              >
+                Регистрация
+              </Link>
+            </div>
+          <div className="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
+            <Link
+              className="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0"
+              to="/login"
+            >
+               Вход
+            </Link>
+          </div>
+        </Col>
+        </Row>
+        </div>
+        </header>
+        );
+};
+export default Header;
--- a/lab4/src/components/navigation/Navigation.css
+++ b/lab4/src/components/navigation/Navigation.css
@@ -0,0 +1,12 @@
+.my-navbar {
+    background-color: #3c3c3c !important;
+}
+
+.my-navbar .link a:hover {
+    text-decoration: underline !important;
+}
+
+.my-navbar .logo {
+    width: 26px;
+    height: 26px;
+}
--- a/lab4/src/components/navigation/Navigation.jsx
+++ b/lab4/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='dark' data-bs-theme='dark' className='my-navbar'>
+                <Container fluid>
+                    <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
+                        <Cart2 className='d-inline-block align-top me-1 logo' />
+                        My shop
+                    </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/lab4/src/components/searchbar/SearchBar.css
+++ b/lab4/src/components/searchbar/SearchBar.css
@@ -0,0 +1,15 @@
+.bg-grey{
+        background-color: #D9D9D9;
+}
+@media (max-width: 768px) {
+        #dropdown-basic-button{
+                font-size: 0;
+        }
+    }
+.sotnya{
+        min-height: 100px;
+
+}
+#dropdown-basic-button{
+        height: 100% !important ;
+}
--- a/lab4/src/components/searchbar/SearchBar.jsx
+++ b/lab4/src/components/searchbar/SearchBar.jsx
@@ -0,0 +1,38 @@
+import {
+ Form, Row, Col, Dropdown, DropdownButton,
+} from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import './SearchBar.css';
+
+const SearchBar = () => {
+        return (
+<Row className="text-break w-100 mt-3 p-0 mb-2 align-items-center justify-content-center">
+  <Col lg={3} className=" text-break h-100 flex-grow-1">
+    <Form.Control
+      id="search-focus"
+      as="textarea"
+      className="ms-3 p-0 ms-lg-4"
+      placeholder="Введите название фильма"
+    />
+  </Col>
+  <Col sm={1} lg={2} xl={3} className=" w-auto mx-3 p-auto text-break h-100 d-flex align-items-center">
+      <DropdownButton id="dropdown-basic-button" title="Выберите жанр" className=" h-100">
+        <Dropdown.Item href="#">Ужасы</Dropdown.Item>
+        <Dropdown.Item href="#">Триллер</Dropdown.Item>
+        <Dropdown.Item href="#">Комедия</Dropdown.Item>
+      </DropdownButton>
+  </Col>
+  <Col sm={1} lg={3} xl={2} className="align-items-center justify-content-center">
+  <Link
+    className=" "
+  >
+        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-search" viewBox="0 0 20 20">
+                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+        </svg>
+  </Link>
+  </Col>
+</Row>
+        );
+};
+
+export default SearchBar;
--- a/lab4/src/index.css
+++ b/lab4/src/index.css
@@ -0,0 +1,32 @@
+h1 {
+    font-size: 1.5em;
+}
+
+h2 {
+    font-size: 1.25em;
+}
+
+h3 {
+    font-size: 1.1em;
+}
+
+.btn-mw {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    .btn-mw {
+        width: 30%;
+    }
+}
+
+@media (min-width: 1200px) {
+    .btn-mw {
+        width: 20%;
+    }
+}
+body{
+        background-color:#194F75;
+        height: 100%;
+        width: 100%;
+    }
--- a/lab4/src/main.jsx
+++ b/lab4/src/main.jsx
@@ -0,0 +1,67 @@
+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 Signup from './pages/signup.jsx';
+import Login from './pages/Login.jsx';
+import Admin from './pages/Admin.jsx';
+import PageEdit from './pages/PageEdit.jsx';
+import Selected from './pages/Selected.jsx';
+import Search from './pages/Search.jsx';
+
+const routes = [
+  {
+    index: true,
+    path: '/',
+    element: <Page1 />,
+    title: 'Главная страница',
+  },
+  {
+    path: '/signup',
+    element: <Signup />,
+    title: 'Вторая страница',
+  },
+  {
+    path: '/login',
+    element: <Login />,
+    title: 'Третья страница',
+  },
+  {
+    path: '/admin',
+    element: <Admin />,
+    title: 'Четвертая страница',
+  },
+  {
+    path: '/add',
+    element: <PageEdit />,
+  },
+  {
+    path: '/selected',
+    element: <Selected />,
+    title: 'Страница выбора',
+  },
+  {
+    path: '/search',
+    element: <Search />,
+    title: 'Страница поиска',
+  },
+];
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App routes={routes} />,
+    children: routes,
+    errorElement: <ErrorPage />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+);
--- a/lab4/src/pages/Admin.jsx
+++ b/lab4/src/pages/Admin.jsx
@@ -0,0 +1,23 @@
+import { Button, Table } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const Admin = () => {
+    return (
+        <>
+            <Button as={Link} to="/add" variant="success">Добавить Фильм</Button>
+            <Table className="mt-2" striped>
+                <thead>
+                <tr>
+                <th scope="col">#</th>
+                <th scope="col">Название</th>
+                <th scope="col">Редактировать</th>
+                <th scope="col">Удалить</th>
+                </tr>
+                </thead>
+                <tbody></tbody>
+            </Table>
+        </>
+    );
+};
+
+export default Admin;
--- a/lab4/src/pages/ErrorPage.jsx
+++ b/lab4/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/lab4/src/pages/Login.jsx
+++ b/lab4/src/pages/Login.jsx
@@ -0,0 +1,34 @@
+import { Form, Button } from 'react-bootstrap';
+import { useState } from 'react';
+
+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 (
+        <Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
+                <Form.Group className="mb-2">
+                    <Form.Label className="form-label">Войдите</Form.Label>
+                    <Form.Control type="text" name="name"
+                        placeholder='Введите имя пользователя/email' required />
+                </Form.Group>
+                <Form.Group className="mb-2">
+                    <Form.Control type="text" name="password"
+                        placeholder='Введите пароль' required />
+                </Form.Group>
+                <Form.Group className="d-flex flex-md-row flex-column justify-content-center">
+                    <Button className="btn-mw me-md-3" type="submit" variant="primary">Войти</Button>
+                </Form.Group>
+            </Form>
+    );
+};
+
+export default Login;
--- a/lab4/src/pages/Page1.jsx
+++ b/lab4/src/pages/Page1.jsx
@@ -0,0 +1,65 @@
+import { Row, Container } from 'react-bootstrap';
+import FilmLogo from '../components/filmLogo/FilmLogo.jsx';
+import Genre from '../components/genre/Genre.jsx';
+
+const Page1 = () => {
+    return (
+        <Container fluid className="flex-shrink-0 p-0">
+  <section className="d-flex align-items-center justify-content-center">
+    <div>
+      <Row className="justify-content-center pt-2">
+        <p className="text-center text-white fs-2 fw-normal font-family-Average Sans">
+          Популярные сейчас
+        </p>
+      </Row>
+    </div>
+  </section>
+  <section className="d-flex justify-content-evenly ">
+    <Row className="row p-2 m-2 align-items-center justify-content-center">
+      <FilmLogo logoName={'fire'}>
+
+      </FilmLogo>
+      <FilmLogo logoName={'harry'}>
+
+      </FilmLogo>
+      <FilmLogo logoName={'fire'}>
+
+      </FilmLogo>
+      <FilmLogo logoName={'fire'}>
+
+      </FilmLogo>
+    </Row>
+  </section>
+  <section className="d-flex justify-content-center">
+    <Row className="m-3 justify-content-evenly w-100 text-break">
+      <Genre genreName={'Ужасы'}>
+
+      </Genre>
+      <Genre genreName={'Ужасы'}>
+
+      </Genre>
+      <Genre genreName={'Ужасы'}>
+
+      </Genre>
+      <Genre genreName={'Ужасы'}>
+
+      </Genre>
+      <Genre genreName={'Ужасы'}>
+
+      </Genre>
+      <Genre genreName={'Ужасы'}>
+
+      </Genre>
+      <Genre genreName={'Ужасы'}>
+
+      </Genre>
+      <Genre genreName={'Ужасы'}>
+
+      </Genre>
+    </Row>
+  </section>
+</Container>
+    );
+};
+
+export default Page1;
--- a/lab4/src/pages/PageEdit.jsx
+++ b/lab4/src/pages/PageEdit.jsx
@@ -0,0 +1,57 @@
+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=""
+                    alt="placeholder" />
+            </div>
+            <Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
+            <Form.Group className="mb-2" controlId="name">
+                    <Form.Label htmlFor="desc" className="form-label">Описание</Form.Label>
+                    <Form.Control as="textarea" name="name" rows={5}
+                        placeholder='Описание' required/>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="email">
+                <Form.Label htmlFor="actrs" className="form-label">Актеры</Form.Label>
+                    <Form.Control type="text" name="actrs"
+                        placeholder='Актеры' required />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="password">
+                <Form.Label htmlFor="genres" className="form-label">Жанры</Form.Label>
+                    <Form.Control type="text" name="genres"
+                        placeholder='Жанры' 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="mb-2" controlId="file">
+                    <Form.Label>Файл</Form.Label>
+                    <Form.Control type="file" name="file"/>
+                </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="/admin" 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/Search.jsx
+++ b/lab4/src/pages/Search.jsx
@@ -0,0 +1,14 @@
+import SearchBar from '../components/searchbar/SearchBar.jsx';
+import FilmRow from '../components/filmRow/FilmRow.jsx';
+
+const Search = () => {
+        return (
+                <div className="ms-4">
+                <SearchBar/>
+                <FilmRow/>
+                <FilmRow/>
+                </div>
+        );
+};
+
+export default Search;
--- a/lab4/src/pages/Selected.jsx
+++ b/lab4/src/pages/Selected.jsx
@@ -0,0 +1,80 @@
+import {
+         Row, Col, Image, Button,
+        } from 'react-bootstrap';
+import image from '../assets/images/fire.jpg';
+
+const Selected = () => {
+        return (
+                <div className=" w-100">
+    <Row className="p-2 justify-content-center mw-100">
+        <Col lg={6} md={12} className="align-items-center d-flex justify-content-center">
+      <Image
+        className=" w-auto h-auto ms-5"
+        src={image}
+        alt=""
+        fluid
+      />
+      </Col>
+      <Col lg={6} className="text-wrap px-2 d-flex justify-content-center mt-3">
+        <p className="text-white fs-3 fw-normal font-family-Bayon text-lg-start text-center">
+          Дата выхода: 2020
+          <br />
+          Режиссер:
+          <br />
+          Алексей Нужный
+          <br />В главных ролях:
+          <br />
+          Константин Хабенский, Иван Янковский, Стася Милославская...
+          <br />
+          Язык: Русский
+        </p>
+      </Col>
+      <Col sm={12} className="d-flex justify-content-center m-0 flex-column mt-5">
+        <div className="d-flex justify-content-center">
+          <h1 className="text-white fs-2 fw-normal font-family-Bayon">Огонь</h1>
+        </div>
+        <div className="d-flex text-wrap me-3">
+          <p
+            className="text-white fs-5 fw-normal font-family-Bayon text-lg-center mb-0 px-3 py-2"
+          >
+            Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей,
+            которые борются с неистовой огненной стихией, уничтожающей всё на
+            своем пути. Герои работают в эпицентре лесного пожара и приходят на
+            помощь жителям близлежащей деревни. Константин Хабенский, Иван
+            Янковский и Стася Милославская в зрелищном героическом блокбастере
+            от режиссера Алексея Нужного и создателей кинохитов «Движение
+            вверх», «Экипаж», «Легенда № 17».
+            <br />
+            Наступает тяжелый сезон разрушительных лесных пожаров. Борьба с ними
+            не на жизнь, а на смерть разворачивается возле маленького села
+            Ольхово в Карелии. На вызов прибыла бригада из шести пожарных во
+            главе с опытным инструктором Алексеем Павловичем Соколовым. У
+            каждого члена группы своя история: кто-то уже потерял в огне самых
+            близких, кого-то с беспокойством ждут дома. Есть среди них и новичок
+            – самоуверенный красавец Роман Ильин. Он ухаживает за дочкой
+            Соколова Катей, работающей на базе в диспетчерской. Вот только
+            отношения с самим Алексеем Павловичем у Ильина не задались – и это
+            мягко говоря. Конфликт нарастает перед лицом свирепого пожара,
+            угрожающего деревенским жителям, которых приходится эвакуировать в
+            экстремальных условиях.
+          </p>
+        </div>
+      </Col>
+    </Row>
+    <Row className="justify-content-center w-100">
+      <Col lg={3} md={6} xs={12} className="justify-content-center align-items-center d-flex">
+      <Button className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
+        Смотреть
+      </Button>
+      </Col>
+      <Col lg={3} md={6} xs={12} className="justify-content-center align-items-center d-flex">
+      <Button className="d-flex btn btn-primary justify-content-centerp-5 p-5 fs-5 m-3 align-items-center">
+        Добавить в избранное
+      </Button>
+      </Col>
+    </Row>
+  </div>
+        );
+};
+
+export default Selected;
--- a/lab4/src/pages/signup.jsx
+++ b/lab4/src/pages/signup.jsx
@@ -0,0 +1,42 @@
+import { Form, Button } from 'react-bootstrap';
+import { useState } from 'react';
+
+const Signup = () => {
+    const [validated, setValidated] = useState(false);
+
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        setValidated(true);
+    };
+    return (
+        <Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
+                <Form.Group className="mb-2">
+                    <Form.Label className="form-label">Зарегистрируйтесь</Form.Label>
+                    <Form.Control type="text" name="name"
+                        placeholder='Введите имя пользователя' required />
+                </Form.Group>
+                <Form.Group className="mb-2">
+                    <Form.Control type="text" name="email"
+                        placeholder='Введите email' required />
+                </Form.Group>
+                <Form.Group className="mb-2">
+                    <Form.Control type="text" name="password"
+                        placeholder='Введите пароль' required />
+                </Form.Group>
+                <Form.Group className="mb-2">
+                    <Form.Control type="text" name="repPassword"
+                        placeholder='Повторите пароль' required />
+                </Form.Group>
+                <Form.Group className="d-flex flex-md-row flex-column justify-content-center">
+                    <Button className="btn-mw me-md-3" type="submit" variant="primary">Зарегистрироваться</Button>
+                </Form.Group>
+            </Form>
+    );
+};
+
+export default Signup;
--- 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,
+  },
+});
--- a/отчет.docx
+++ b/отчет.docx