lab5

2024-01-10 21:39:02 +04:00 · 2024-01-10 21:39:02 +04:00 · 934ca2763c
commit 934ca2763c
parent 026dc0b29d
174 changed files with 10982 additions and 0 deletions
--- a/лаб5/.eslintrc.cjs
+++ b/лаб5/.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/лаб5/.gitignore
+++ b/лаб5/.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/лаб5/README.md
+++ b/лаб5/README.md
@ -0,0 +1,47 @@
+### Окружение:
+- [nodejs 20 LTS latest](https://nodejs.org/en/download/);
+- [VSCode](https://code.visualstudio.com/download);
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) плагин для VSCode;
+- [CSS Class Intellisense](https://marketplace.visualstudio.com/items?itemName=Tarrow.css-class-intellisense) плагин для автодополнения CSS-классов в HTML;
+- для отладки необходимы бразузеры Chrome или Edge.
+
+Настройки плагина CSS Class Intellisense находятся в файле ./vscode/cssconfig.json
+
+### Команды
+
+#### Создание пустого проекта:
+
+```commandline
+npm create vite@latest ./ -- --template react 
+```
+
+#### Установка зависимостей:
+
+```commandline
+npm install
+```
+
+#### Запуск проекта в режиме разработки (development):
+
+```commandline
+npm run dev
+```
+
+#### Запуск проекта в продуктовом режиме (production):
+
+```commandline
+npm run prod
+```
+
+### Полезные ссылки
+
+1. Updating Objects in State - https://react.dev/learn/updating-objects-in-state
+2. Sharing State Between Components - https://react.dev/learn/sharing-state-between-components
+3. React Hot Toast - https://react-hot-toast.com
+4. Axios - https://axios-http.com
+5. Axios & Error handling like a boss - https://dev.to/mperon/axios-error-handling-like-a-boss-333d
+6. Separation of Concerns in React –How to Use Container and Presentational Components - https://www.freecodecamp.org/news/separation-of-concerns-react-container-and-presentational-components/
+7. Separation of concerns in React and React Native - https://dev.to/sathishskdev/separation-of-concerns-in-react-and-react-native-45b7
+8. React Bootstrap - https://react-bootstrap.netlify.app
+9. React Bootstrap Icons - https://github.com/ismamz/react-bootstrap-icons
+10. JSON Server - https://www.npmjs.com/package/json-server
--- a/лаб5/data.json
+++ b/лаб5/data.json
--- a/лаб5/fonts/Syne-Bold.woff
+++ b/лаб5/fonts/Syne-Bold.woff
--- a/лаб5/fonts/Ubuntu-Bold.woff
+++ b/лаб5/fonts/Ubuntu-Bold.woff
--- a/лаб5/fonts/Ubuntu-BoldItalic.woff
+++ b/лаб5/fonts/Ubuntu-BoldItalic.woff
--- a/лаб5/fonts/Ubuntu-Italic.woff
+++ b/лаб5/fonts/Ubuntu-Italic.woff
--- a/лаб5/fonts/Ubuntu-Light.woff
+++ b/лаб5/fonts/Ubuntu-Light.woff
--- a/лаб5/fonts/Ubuntu-LightItalic.woff
+++ b/лаб5/fonts/Ubuntu-LightItalic.woff
--- a/лаб5/fonts/Ubuntu-Medium.woff
+++ b/лаб5/fonts/Ubuntu-Medium.woff
--- a/лаб5/fonts/Ubuntu-MediumItalic.woff
+++ b/лаб5/fonts/Ubuntu-MediumItalic.woff
--- a/лаб5/fonts/Ubuntu-Regular.woff
+++ b/лаб5/fonts/Ubuntu-Regular.woff
--- a/лаб5/icon/bed.svg
+++ b/лаб5/icon/bed.svg
@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10V5.71429C0 5.39286 0.0641667 5.10119 0.1925 4.83929C0.320833 4.57738 0.49 4.34524 0.7 4.14286V2.14286C0.7 1.54762 0.904167 1.04167 1.3125 0.625C1.72083 0.208333 2.21667 0 2.8 0H5.6C5.86833 0 6.11917 0.0507142 6.3525 0.152143C6.58583 0.253571 6.80167 0.393333 7 0.571429C7.19833 0.392857 7.41417 0.253095 7.6475 0.152143C7.88083 0.0511904 8.13167 0.00047619 8.4 0H11.2C11.7833 0 12.2792 0.208333 12.6875 0.625C13.0958 1.04167 13.3 1.54762 13.3 2.14286V4.14286C13.51 4.34524 13.6792 4.57738 13.8075 4.83929C13.9358 5.10119 14 5.39286 14 5.71429V10H12.6V8.57143H1.4V10H0ZM7.7 3.57143H11.9V2.14286C11.9 1.94048 11.8328 1.77071 11.6984 1.63357C11.564 1.49643 11.3979 1.4281 11.2 1.42857H8.4C8.20167 1.42857 8.0353 1.49714 7.9009 1.63429C7.7665 1.77143 7.69953 1.94095 7.7 2.14286V3.57143ZM2.1 3.57143H6.3V2.14286C6.3 1.94048 6.2328 1.77071 6.0984 1.63357C5.964 1.49643 5.79787 1.4281 5.6 1.42857H2.8C2.60167 1.42857 2.4353 1.49714 2.3009 1.63429C2.1665 1.77143 2.09953 1.94095 2.1 2.14286V3.57143ZM1.4 7.14286H12.6V5.71429C12.6 5.5119 12.5328 5.34214 12.3984 5.205C12.264 5.06786 12.0979 4.99952 11.9 5H2.1C1.90167 5 1.7353 5.06857 1.6009 5.20571C1.4665 5.34286 1.39953 5.51238 1.4 5.71429V7.14286Z" fill="black"/>
+</svg>
--- a/лаб5/icon/dush.svg
+++ b/лаб5/icon/dush.svg
@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 5.5V2C2.5 1.73478 2.60536 1.48043 2.79289 1.29289C2.98043 1.10536 3.23478 1 3.5 1H5V2.125M1.5 10L2 9.25M9.5 10L9 9.25M1.5 5.5H9.5C9.63261 5.5 9.75979 5.55268 9.85355 5.64645C9.94732 5.74021 10 5.86739 10 6V7.5C10 8.03043 9.78929 8.53914 9.41421 8.91421C9.03914 9.28929 8.53043 9.5 8 9.5H3C2.46957 9.5 1.96086 9.28929 1.58579 8.91421C1.21071 8.53914 1 8.03043 1 7.5V6C1 5.86739 1.05268 5.74021 1.14645 5.64645C1.24021 5.55268 1.36739 5.5 1.5 5.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/лаб5/icon/facebook.svg
+++ b/лаб5/icon/facebook.svg
@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 10.0251C20 4.49123 15.52 0 10 0C4.48 0 0 4.49123 0 10.0251C0 14.8772 3.44 18.9173 8 19.8496V13.0326H6V10.0251H8V7.5188C8 5.58396 9.57 4.01003 11.5 4.01003H14V7.01754H12C11.45 7.01754 11 7.46867 11 8.02005V10.0251H14V13.0326H11V20C16.05 19.4987 20 15.2281 20 10.0251Z" fill="white" fill-opacity="0.5"/>
+</svg>
--- a/лаб5/icon/favicon.ico
+++ b/лаб5/icon/favicon.ico
--- a/лаб5/icon/filtr.svg
+++ b/лаб5/icon/filtr.svg
@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.87473 0.736037L7.7242 9.35976M7.7242 9.35976L9.31952 7.81918M7.7242 9.35976L6.18362 7.76444M3.92749 2.23556L2.38691 0.640246M2.38691 0.640246L0.79159 2.18083M2.38691 0.640246L2.23638 9.26397" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/лаб5/icon/fire.svg
+++ b/лаб5/icon/fire.svg
@ -0,0 +1,3 @@
+<svg width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.3683 10.5917C16.0712 10.2042 15.7096 9.86833 15.3737 9.5325C14.5083 8.7575 13.5267 8.20208 12.7 7.38833C10.7754 5.5025 10.3492 2.38958 11.5762 0C10.3492 0.297083 9.27708 0.96875 8.36 1.705C5.01458 4.39167 3.69708 9.13208 5.27291 13.2008C5.32458 13.33 5.37625 13.4592 5.37625 13.6271C5.37625 13.9113 5.1825 14.1696 4.92417 14.2729C4.62708 14.4021 4.31708 14.3246 4.07167 14.1179C3.99792 14.0569 3.93653 13.9824 3.89083 13.8983C2.43125 12.0513 2.19875 9.40333 3.18041 7.285C1.02333 9.04167 -0.152085 12.0125 0.0158316 14.8154C0.0933316 15.4613 0.170832 16.1071 0.390415 16.7529C0.571248 17.5279 0.919998 18.3029 1.3075 18.9875C2.7025 21.2221 5.11792 22.8238 7.71417 23.1467C10.4783 23.4954 13.4363 22.9917 15.5546 21.08C17.9183 18.9358 18.745 15.5 17.5308 12.555L17.3629 12.2192C17.0917 11.625 16.3683 10.5917 16.3683 10.5917ZM12.2867 18.7292C11.925 19.0392 11.3308 19.375 10.8658 19.5042C9.41916 20.0208 7.9725 19.2975 7.12 18.445C8.65708 18.0833 9.57417 16.9467 9.84542 15.7971C10.065 14.7638 9.65166 13.9113 9.48375 12.9167C9.32875 11.9608 9.35458 11.1471 9.70333 10.2558C9.94875 10.7467 10.2071 11.2375 10.5171 11.625C11.5117 12.9167 13.0746 13.485 13.4104 15.2417C13.4621 15.4225 13.4879 15.6033 13.4879 15.7971C13.5267 16.8563 13.0617 18.0188 12.2867 18.7292Z" fill="#4C73FF"/>
+</svg>
--- a/лаб5/icon/geo.svg
+++ b/лаб5/icon/geo.svg
@ -0,0 +1,4 @@
+<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 9.4704C3.36375 9.4704 3.22751 9.42338 3.11631 9.32923C2.71353 8.98836 1.93691 8.26718 1.26082 7.26777C0.883187 6.70964 0.585746 6.13601 0.376705 5.56279C0.126697 4.87745 0 4.18339 0 3.5C0 3.02761 0.0926098 2.56917 0.275161 2.13764C0.45145 1.72089 0.703819 1.34655 1.02518 1.02518C1.34655 0.703819 1.72089 0.45145 2.13764 0.275161C2.56927 0.0926098 3.0276 0 3.5 0C3.9724 0 4.43083 0.0926098 4.86236 0.275161C5.27911 0.45145 5.65345 0.703819 5.97482 1.02518C6.29618 1.34655 6.54855 1.72089 6.72484 2.13764C6.90739 2.56927 7 3.02761 7 3.5C7 4.18339 6.8733 4.87745 6.6233 5.56279C6.41425 6.13601 6.11681 6.70964 5.73918 7.26777C5.06309 8.26718 4.28647 8.98825 3.88369 9.32923C3.77249 9.42328 3.63625 9.4704 3.5 9.4704ZM3.5 0.356478C3.07555 0.356478 2.66394 0.439541 2.27645 0.603406C1.90211 0.761727 1.56596 0.988428 1.27714 1.27714C0.988428 1.56586 0.761726 1.90211 0.603405 2.27645C0.43954 2.66394 0.356478 3.07555 0.356478 3.5C0.356478 4.1417 0.475989 4.7946 0.711622 5.44072C0.910704 5.98652 1.1948 6.53407 1.5561 7.06818C2.20828 8.03227 2.95789 8.72818 3.34661 9.05725C3.43552 9.13251 3.56458 9.13251 3.6535 9.05725C4.04232 8.72818 4.79182 8.03227 5.444 7.06818C5.8053 6.53418 6.0894 5.98662 6.28848 5.44072C6.52411 4.7946 6.64362 4.1417 6.64362 3.5C6.64362 3.07555 6.56056 2.66394 6.3967 2.27645C6.23838 1.90211 6.01167 1.56596 5.72296 1.27714C5.43425 0.988428 5.09799 0.761727 4.72365 0.603406C4.33616 0.439541 3.92455 0.356478 3.5001 0.356478H3.5Z" fill="black"/>
+<path d="M3.5 5C3.0993 5 2.72263 4.84394 2.43935 4.56065C2.15606 4.27737 2 3.90063 2 3.5C2 3.09937 2.15606 2.72263 2.43935 2.43935C2.72263 2.15606 3.09937 2 3.5 2C3.90063 2 4.27737 2.15606 4.56065 2.43935C4.84394 2.72263 5 3.09937 5 3.5C5 3.90063 4.84394 4.27737 4.56065 4.56065C4.27737 4.84394 3.90063 5 3.5 5ZM3.5 2.23169C3.16125 2.23169 2.84272 2.36359 2.60315 2.60315C2.36359 2.84272 2.23169 3.16118 2.23169 3.5C2.23169 3.83882 2.36359 4.15728 2.60315 4.39685C2.84272 4.63641 3.16118 4.76831 3.5 4.76831C3.83882 4.76831 4.15728 4.63641 4.39685 4.39685C4.63641 4.15728 4.76831 3.83882 4.76831 3.5C4.76831 3.16118 4.63641 2.84272 4.39685 2.60315C4.15728 2.36359 3.83882 2.23169 3.5 2.23169Z" fill="black"/>
+</svg>
--- a/лаб5/icon/google.png
+++ b/лаб5/icon/google.png
--- a/лаб5/icon/inst.svg
+++ b/лаб5/icon/inst.svg
@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4766 0.00116884C11.1698 -0.00149129 11.863 0.00547589 12.5561 0.0220682L12.7403 0.0287179C12.9531 0.0363177 13.1631 0.0458173 13.4167 0.0572169C14.4275 0.104715 15.1171 0.26431 15.7222 0.498952C16.3492 0.740244 16.8774 1.06703 17.4056 1.59521C17.8885 2.06982 18.2622 2.64393 18.5008 3.27761C18.7355 3.88274 18.8951 4.57336 18.9426 5.58413C18.954 5.83682 18.9635 6.04771 18.9711 6.26051L18.9768 6.4448C18.9937 7.13751 19.0009 7.83042 18.9986 8.52333L18.9996 9.23201V10.4765C19.0019 11.1697 18.9946 11.8629 18.9777 12.5559L18.972 12.7402C18.9644 12.953 18.9549 13.163 18.9435 13.4166C18.896 14.4274 18.7345 15.1171 18.5008 15.7222C18.263 16.3565 17.8892 16.9311 17.4056 17.4055C16.9305 17.8884 16.3562 18.2622 15.7222 18.5008C15.1171 18.7355 14.4275 18.8951 13.4167 18.9426C13.1631 18.954 12.9531 18.9635 12.7403 18.9711L12.5561 18.9768C11.863 18.9937 11.1698 19.0009 10.4766 18.9986L9.76795 18.9996H8.52446C7.83124 19.0019 7.13803 18.9946 6.44502 18.9777L6.26073 18.972C6.03522 18.9639 5.80976 18.9543 5.58436 18.9435C4.57361 18.896 3.88395 18.7345 3.27788 18.5008C2.64396 18.2627 2.06977 17.8889 1.59552 17.4055C1.11203 16.9308 0.737923 16.3563 0.499273 15.7222C0.264635 15.1171 0.105043 14.4274 0.0575451 13.4166C0.0469655 13.1912 0.0374659 12.9657 0.0290466 12.7402L0.024297 12.5559C0.0067833 11.8629 -0.00113381 11.1697 0.000548123 10.4765V8.52333C-0.00210316 7.83042 0.00486389 7.13751 0.0214471 6.4448L0.0280968 6.26051C0.0356964 6.04771 0.0451958 5.83682 0.0565953 5.58413C0.104093 4.57241 0.263685 3.88369 0.498322 3.27761C0.737114 2.64362 1.11196 2.06967 1.59647 1.59616C2.07039 1.1124 2.64423 0.737938 3.27788 0.498952C3.88395 0.26431 4.57266 0.104715 5.58436 0.0572169L6.26073 0.0287179L6.44502 0.0239682C7.13771 0.00646299 7.8306 -0.00145426 8.52351 0.000218937L10.4766 0.00116884ZM9.50006 4.75101C8.87072 4.74211 8.24589 4.85838 7.66188 5.09306C7.07787 5.32774 6.54633 5.67616 6.09814 6.11806C5.64995 6.55996 5.29406 7.08654 5.05114 7.66718C4.80823 8.24783 4.68313 8.87096 4.68313 9.50037C4.68313 10.1298 4.80823 10.7529 5.05114 11.3336C5.29406 11.9142 5.64995 12.4408 6.09814 12.8827C6.54633 13.3246 7.07787 13.673 7.66188 13.9077C8.24589 14.1424 8.87072 14.2586 9.50006 14.2497C10.7598 14.2497 11.9679 13.7493 12.8586 12.8585C13.7494 11.9678 14.2498 10.7596 14.2498 9.4999C14.2498 8.24016 13.7494 7.03202 12.8586 6.14125C11.9679 5.25048 10.7598 4.75101 9.50006 4.75101ZM9.50006 6.65094C9.87862 6.64397 10.2548 6.7125 10.6066 6.85253C10.9583 6.99257 11.2787 7.2013 11.5489 7.46653C11.8191 7.73177 12.0337 8.04819 12.1803 8.39731C12.3268 8.74643 12.4024 9.12125 12.4024 9.49989C12.4025 9.87852 12.3271 10.2534 12.1807 10.6025C12.0342 10.9517 11.8197 11.2682 11.5496 11.5335C11.2795 11.7989 10.9592 12.0077 10.6074 12.1478C10.2557 12.288 9.87958 12.3566 9.50101 12.3498C8.74518 12.3498 8.02031 12.0495 7.48586 11.5151C6.95141 10.9806 6.65116 10.2557 6.65116 9.4999C6.65116 8.74405 6.95141 8.01917 7.48586 7.48471C8.02031 6.95025 8.74518 6.64999 9.50101 6.64999L9.50006 6.65094ZM14.4873 3.32606C14.1808 3.33832 13.891 3.46869 13.6785 3.68987C13.466 3.91104 13.3474 4.20585 13.3474 4.51257C13.3474 4.81928 13.466 5.11409 13.6785 5.33526C13.891 5.55644 14.1808 5.68681 14.4873 5.69908C14.8022 5.69908 15.1043 5.57397 15.327 5.35128C15.5496 5.12858 15.6747 4.82655 15.6747 4.51162C15.6747 4.19668 15.5496 3.89465 15.327 3.67195C15.1043 3.44926 14.8022 3.32416 14.4873 3.32416V3.32606Z" fill="white" fill-opacity="0.5"/>
+</svg>
--- a/лаб5/icon/parkovka.svg
+++ b/лаб5/icon/parkovka.svg
@ -0,0 +1,3 @@
+<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.15385 0.366667C6.15385 0.269421 6.19437 0.176158 6.2665 0.107394C6.33863 0.0386309 6.43646 0 6.53846 0L9.61539 0C9.71739 0 9.81522 0.0386309 9.88735 0.107394C9.95948 0.176158 10 0.269421 10 0.366667V4.03333C10 4.13058 9.95948 4.22384 9.88735 4.29261C9.81522 4.36137 9.71739 4.4 9.61539 4.4H8.46154V10.6333C8.46154 10.7306 8.42102 10.8238 8.34889 10.8926C8.27676 10.9614 8.17893 11 8.07692 11C7.97492 11 7.87709 10.9614 7.80496 10.8926C7.73283 10.8238 7.69231 10.7306 7.69231 10.6333V4.4H6.53846C6.43646 4.4 6.33863 4.36137 6.2665 4.29261C6.19437 4.22384 6.15385 4.13058 6.15385 4.03333V0.366667ZM2.55308 1.46667H5.38461V2.2H2.55308C2.36609 2.19996 2.18549 2.26485 2.04504 2.38255C1.9046 2.50024 1.81393 2.66267 1.79 2.83947L1.57846 4.4H5.45C5.52957 4.61456 5.67699 4.80031 5.87193 4.93165C6.06687 5.06299 6.29975 5.13345 6.53846 5.13333H1.15385C1.05184 5.13333 0.954011 5.17196 0.881882 5.24073C0.809753 5.30949 0.769231 5.40275 0.769231 5.5V7.7C0.769231 7.79725 0.809753 7.89051 0.881882 7.95927C0.954011 8.02804 1.05184 8.06667 1.15385 8.06667H6.92308V8.8H2.30769V9.71667C2.30769 9.86254 2.24691 10.0024 2.13872 10.1056C2.03052 10.2087 1.88378 10.2667 1.73077 10.2667C1.57776 10.2667 1.43102 10.2087 1.32282 10.1056C1.21463 10.0024 1.15385 9.86254 1.15385 9.71667V8.8C0.847827 8.8 0.554342 8.68411 0.337954 8.47782C0.121566 8.27153 1.26001e-08 7.99174 1.26001e-08 7.7V5.5C-3.59409e-05 5.268 0.0768716 5.04193 0.219727 4.85411C0.362582 4.66629 0.564071 4.52634 0.795385 4.45427L0.803077 4.4H0.384615C0.282609 4.4 0.184781 4.36137 0.112651 4.29261C0.0405219 4.22384 1.26001e-08 4.13058 1.26001e-08 4.03333C1.26001e-08 3.93609 0.0405219 3.84282 0.112651 3.77406C0.184781 3.7053 0.282609 3.66667 0.384615 3.66667H0.902308L1.02692 2.7456C1.07481 2.39188 1.25625 2.06692 1.5373 1.83152C1.81834 1.59611 2.17974 1.46641 2.55385 1.46667H2.55308ZM6.73 6.05073C6.79769 6.05073 6.86231 6.06173 6.92308 6.08227V7.11773C6.83613 7.14739 6.74297 7.15667 6.65147 7.14477C6.55997 7.13287 6.47282 7.10015 6.39738 7.04938C6.32194 6.9986 6.26042 6.93126 6.21804 6.85305C6.17565 6.77483 6.15363 6.68804 6.15385 6.6C6.15385 6.2964 6.41154 6.05073 6.73 6.05073ZM3.07692 6.6C3.07692 6.67213 3.06202 6.74356 3.03307 6.8102C3.00411 6.87684 2.96167 6.93739 2.90817 6.98839C2.85467 7.03939 2.79116 7.07985 2.72125 7.10746C2.65135 7.13506 2.57643 7.14927 2.50077 7.14927C2.42511 7.14927 2.35019 7.13506 2.28028 7.10746C2.21038 7.07985 2.14687 7.03939 2.09337 6.98839C2.03987 6.93739 1.99743 6.87684 1.96847 6.8102C1.93952 6.74356 1.92462 6.67213 1.92462 6.6C1.92462 6.45433 1.98532 6.31462 2.09337 6.21161C2.20142 6.1086 2.34796 6.05073 2.50077 6.05073C2.65357 6.05073 2.80012 6.1086 2.90817 6.21161C3.01622 6.31462 3.07692 6.45433 3.07692 6.6Z" fill="black"/>
+</svg>
--- a/лаб5/icon/search.svg
+++ b/лаб5/icon/search.svg
@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 16L11.7143 11.7143M7.42857 13.8571C6.58436 13.8571 5.74841 13.6909 4.96846 13.3678C4.18851 13.0447 3.47983 12.5712 2.88289 11.9743C2.28594 11.3773 1.81241 10.6686 1.48935 9.88868C1.16628 9.10873 1 8.27278 1 7.42857C1 6.58436 1.16628 5.74841 1.48935 4.96846C1.81241 4.18851 2.28594 3.47983 2.88289 2.88288C3.47983 2.28594 4.18851 1.81241 4.96846 1.48935C5.74841 1.16628 6.58436 1 7.42857 1C9.13353 1 10.7687 1.67729 11.9743 2.88288C13.1798 4.08848 13.8571 5.72361 13.8571 7.42857C13.8571 9.13353 13.1798 10.7687 11.9743 11.9743C10.7687 13.1798 9.13353 13.8571 7.42857 13.8571Z" stroke="black" stroke-opacity="0.3" stroke-width="2"/>
+</svg>
--- a/лаб5/icon/star.svg
+++ b/лаб5/icon/star.svg
@ -0,0 +1,3 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M1.72125 9L2.4525 5.67237L0 3.43421L3.24 3.13816L4.5 0L5.76 3.13816L9 3.43421L6.5475 5.67237L7.27875 9L4.5 7.23553L1.72125 9Z" fill="#4C73FF"/>
+</svg>
--- a/лаб5/icon/vk.svg
+++ b/лаб5/icon/vk.svg
@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0C4.47708 0 0 4.47708 0 10C0 15.5229 4.47708 20 10 20C15.5229 20 20 15.5229 20 10C20 4.47708 15.5229 0 10 0ZM13.8458 11.2823C13.8458 11.2823 14.7302 12.1552 14.9479 12.5604C14.9542 12.5688 14.9573 12.5771 14.9594 12.5812C15.0479 12.7302 15.0688 12.8458 15.025 12.9323C14.9521 13.076 14.7021 13.1469 14.6167 13.1531H13.0542C12.9458 13.1531 12.7188 13.125 12.4437 12.9354C12.2323 12.7875 12.024 12.5448 11.8208 12.3083C11.5177 11.9562 11.2552 11.6521 10.9906 11.6521C10.957 11.652 10.9236 11.6573 10.8917 11.6677C10.6917 11.7323 10.4354 12.0177 10.4354 12.7781C10.4354 13.0156 10.2479 13.1521 10.1156 13.1521H9.4C9.15625 13.1521 7.88646 13.0667 6.76146 11.8802C5.38437 10.4271 4.14479 7.5125 4.13437 7.48542C4.05625 7.29687 4.21771 7.19583 4.39375 7.19583H5.97187C6.18229 7.19583 6.25104 7.32396 6.29896 7.4375C6.35521 7.56979 6.56146 8.09583 6.9 8.6875C7.44896 9.65208 7.78542 10.0437 8.05521 10.0437C8.1058 10.0432 8.15548 10.0303 8.2 10.0062C8.55208 9.81042 8.48646 8.55521 8.47083 8.29479C8.47083 8.24583 8.46979 7.73333 8.28958 7.4875C8.16042 7.30937 7.94062 7.24167 7.80729 7.21667C7.86126 7.1422 7.93236 7.08182 8.01458 7.04062C8.25625 6.91979 8.69167 6.90208 9.12396 6.90208H9.36458C9.83333 6.90833 9.95417 6.93854 10.124 6.98125C10.4677 7.06354 10.475 7.28542 10.4448 8.04479C10.4354 8.26042 10.426 8.50417 10.426 8.79167C10.426 8.85417 10.4229 8.92083 10.4229 8.99167C10.4125 9.37812 10.4 9.81667 10.6729 9.99687C10.7085 10.0192 10.7497 10.0311 10.7917 10.0312C10.8865 10.0312 11.1719 10.0312 11.9448 8.70521C12.1832 8.27839 12.3903 7.83487 12.5646 7.37812C12.5802 7.35104 12.626 7.26771 12.6802 7.23542C12.7202 7.21504 12.7645 7.20467 12.8094 7.20521H14.6646C14.8667 7.20521 15.0052 7.23542 15.0312 7.31354C15.0771 7.4375 15.0229 7.81562 14.176 8.9625L13.7979 9.46146C13.0302 10.4677 13.0302 10.5188 13.8458 11.2823Z" fill="white" fill-opacity="0.5"/>
+</svg>
--- a/лаб5/icon/whiteicon.png
+++ b/лаб5/icon/whiteicon.png
--- a/лаб5/icon/иконка2.png
+++ b/лаб5/icon/иконка2.png
--- a/лаб5/icon/лого.png
+++ b/лаб5/icon/лого.png
--- a/лаб5/img/1.png
+++ b/лаб5/img/1.png
--- a/лаб5/img/11.png
+++ b/лаб5/img/11.png
--- a/лаб5/img/12.png
+++ b/лаб5/img/12.png
--- a/лаб5/img/13.png
+++ b/лаб5/img/13.png
--- a/лаб5/img/14.png
+++ b/лаб5/img/14.png
--- a/лаб5/img/15.png
+++ b/лаб5/img/15.png
--- a/лаб5/img/16.png
+++ b/лаб5/img/16.png
--- a/лаб5/img/17.png
+++ b/лаб5/img/17.png
--- a/лаб5/img/18.png
+++ b/лаб5/img/18.png
--- a/лаб5/img/19.png
+++ b/лаб5/img/19.png
--- a/лаб5/img/2.png
+++ b/лаб5/img/2.png
--- a/лаб5/img/20.png
+++ b/лаб5/img/20.png
--- a/лаб5/img/21.png
+++ b/лаб5/img/21.png
--- a/лаб5/img/back.png
+++ b/лаб5/img/back.png
--- a/лаб5/img/backjpg.jpg
+++ b/лаб5/img/backjpg.jpg
--- a/лаб5/img/card1.png
+++ b/лаб5/img/card1.png
--- a/лаб5/img/card2.png
+++ b/лаб5/img/card2.png
--- a/лаб5/img/card3.png
+++ b/лаб5/img/card3.png
--- a/лаб5/img/card4.png
+++ b/лаб5/img/card4.png
--- a/лаб5/img/card5.png
+++ b/лаб5/img/card5.png
--- a/лаб5/img/card6.png
+++ b/лаб5/img/card6.png
--- a/лаб5/img/fon.png
+++ b/лаб5/img/fon.png
--- a/лаб5/img/help1.png
+++ b/лаб5/img/help1.png
--- a/лаб5/img/help2.png
+++ b/лаб5/img/help2.png
--- a/лаб5/img/help3.png
+++ b/лаб5/img/help3.png
--- a/лаб5/img/kov.svg
+++ b/лаб5/img/kov.svg
@ -0,0 +1,3 @@
+<svg width="30" height="20" viewBox="0 0 30 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.58591 7.27273C7.88256 7.27273 9.15008 7.64595 10.2282 8.34519C11.3063 9.04444 12.1466 10.0383 12.6428 11.2011C13.139 12.3639 13.2688 13.6434 13.0159 14.8778C12.7629 16.1123 12.1385 17.2462 11.2217 18.1361C10.3048 19.0261 9.13664 19.6322 7.86491 19.8777C6.59319 20.1233 5.275 19.9972 4.07706 19.5156C2.87912 19.0339 1.85522 18.2183 1.13485 17.1718C0.414469 16.1253 0.02997 14.895 0.02997 13.6364L0 12.7273C0 9.35179 1.38143 6.11456 3.84038 3.72773C6.29934 1.3409 9.6344 0 13.1119 0V3.63636C11.8814 3.63315 10.6625 3.86674 9.52566 4.32363C8.38879 4.78052 7.35651 5.45164 6.48851 6.29818C6.15115 6.62503 5.83994 6.97635 5.55757 7.34909C5.89286 7.29818 6.23564 7.27091 6.58404 7.27091L6.58591 7.27273ZM23.4441 7.27273C24.7407 7.27273 26.0082 7.64595 27.0863 8.34519C28.1645 9.04444 29.0048 10.0383 29.501 11.2011C29.9972 12.3639 30.127 13.6434 29.874 14.8778C29.6211 16.1123 28.9967 17.2462 28.0798 18.1361C27.1629 19.0261 25.9948 19.6322 24.7231 19.8777C23.4513 20.1233 22.1331 19.9972 20.9352 19.5156C19.7373 19.0339 18.7134 18.2183 17.993 17.1718C17.2726 16.1253 16.8881 14.895 16.8881 13.6364L16.8581 12.7273C16.8581 9.35179 18.2396 6.11456 20.6985 3.72773C23.1575 1.3409 26.4925 0 29.97 0V3.63636C28.7396 3.63315 27.5207 3.86674 26.3838 4.32363C25.2469 4.78052 24.2147 5.45164 23.3467 6.29818C23.0093 6.62503 22.6981 6.97635 22.4157 7.34909C22.751 7.29818 23.0938 7.27273 23.4441 7.27273Z" fill="#4C73FF"/>
+</svg>
--- a/лаб5/img/kov2.svg
+++ b/лаб5/img/kov2.svg
@ -0,0 +1,3 @@
+<svg width="30" height="20" viewBox="0 0 30 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.4141 12.7273C22.1174 12.7273 20.8499 12.3541 19.7718 11.6548C18.6937 10.9556 17.8534 9.9617 17.3572 8.7989C16.861 7.63609 16.7311 6.35658 16.9841 5.12215C17.2371 3.88773 17.8615 2.75384 18.7783 1.86387C19.6952 0.973899 20.8634 0.367821 22.1351 0.122278C23.4068 -0.123264 24.725 0.00275726 25.9229 0.484406C27.1209 0.966054 28.1448 1.7817 28.8652 2.82819C29.5855 3.87469 29.97 5.10503 29.97 6.36364L30 7.27273C30 8.9441 29.6608 10.5991 29.0019 12.1432C28.343 13.6874 27.3772 15.0904 26.1596 16.2723C24.9421 17.4541 23.4966 18.3916 21.9058 19.0312C20.315 19.6708 18.61 20 16.8881 20V16.3636C18.1186 16.3668 19.3375 16.1333 20.4743 15.6764C21.6112 15.2195 22.6435 14.5484 23.5115 13.7018C23.8488 13.375 24.1601 13.0237 24.4424 12.6509C24.1023 12.7028 23.7584 12.7289 23.4141 12.7291V12.7273ZM6.55595 12.7273C5.2593 12.7273 3.99178 12.3541 2.91366 11.6548C1.83554 10.9556 0.995248 9.9617 0.499044 8.7989C0.00284064 7.63609 -0.126989 6.35658 0.125974 5.12215C0.378936 3.88773 1.00333 2.75384 1.92019 1.86387C2.83706 0.973899 4.00522 0.367821 5.27695 0.122278C6.54867 -0.123264 7.86685 0.00275726 9.0648 0.484406C10.2627 0.966054 11.2866 1.7817 12.007 2.82819C12.7274 3.87469 13.1119 5.10503 13.1119 6.36364L13.1419 7.27273C13.1419 10.6482 11.7604 13.8854 9.30148 16.2723C6.84252 18.6591 3.50746 20 0.029973 20V16.3636C1.26043 16.3668 2.47933 16.1333 3.6162 15.6764C4.75307 15.2195 5.78535 14.5484 6.65335 13.7018C6.99071 13.375 7.30192 13.0237 7.58429 12.6509C7.24411 12.7028 6.9003 12.7289 6.55595 12.7291V12.7273Z" fill="#4C73FF"/>
+</svg>
--- a/лаб5/img/ph1.png
+++ b/лаб5/img/ph1.png
--- a/лаб5/img/ph2.png
+++ b/лаб5/img/ph2.png
--- a/лаб5/img/ph3.png
+++ b/лаб5/img/ph3.png
--- a/лаб5/img/ph4.png
+++ b/лаб5/img/ph4.png
--- a/лаб5/img/ph5.png
+++ b/лаб5/img/ph5.png
--- a/лаб5/img/photo1.png
+++ b/лаб5/img/photo1.png
--- a/лаб5/img/reg-fone.png
+++ b/лаб5/img/reg-fone.png
--- a/лаб5/index.html
+++ b/лаб5/index.html
@ -0,0 +1,15 @@
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/icon/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HI-Town</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/лаб5/jsconfig.json
+++ b/лаб5/jsconfig.json
@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "sourceMap": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}
--- a/лаб5/json-server.json
+++ b/лаб5/json-server.json
@ -0,0 +1,5 @@
+{
+    "static": "./node_modules/json-server/public",
+    "port": 8081,
+    "watch": "true"
+}
--- a/лаб5/package-lock.json
+++ b/лаб5/package-lock.json
--- a/лаб5/package.json
+++ b/лаб5/package.json
@ -0,0 +1,39 @@
+{
+  "name": "lec4",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "rest": "json-server data.json",
+    "vite": "vite",
+    "dev": "npm-run-all --parallel rest vite",
+    "prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
+  },
+  "dependencies": {
+    "axios": "^1.6.1",
+    "bootstrap": "^5.3.2",
+    "fast-levenshtein": "^3.0.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.9.1",
+    "react-bootstrap-icons": "^1.10.3",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-router-dom": "^6.18.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "json-server": "^0.17.4",
+    "npm-run-all": "^4.1.5",
+    "vite": "^4.4.5"
+  }
+}
--- a/лаб5/public/favicon.svg
+++ b/лаб5/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/лаб5/src/App.jsx
+++ b/лаб5/src/App.jsx
@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+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/лаб5/src/assets/200.png
+++ b/лаб5/src/assets/200.png
--- a/лаб5/src/assets/Image1.png
+++ b/лаб5/src/assets/Image1.png
--- a/лаб5/src/assets/Image10.jpg
+++ b/лаб5/src/assets/Image10.jpg
--- a/лаб5/src/assets/Image11.jpg
+++ b/лаб5/src/assets/Image11.jpg
--- a/лаб5/src/assets/Image12.png
+++ b/лаб5/src/assets/Image12.png
--- a/лаб5/src/assets/Image13.jpg
+++ b/лаб5/src/assets/Image13.jpg
--- a/лаб5/src/assets/Image2.png
+++ b/лаб5/src/assets/Image2.png
--- a/лаб5/src/assets/Image3.png
+++ b/лаб5/src/assets/Image3.png
--- a/лаб5/src/assets/Image4.png
+++ b/лаб5/src/assets/Image4.png
--- a/лаб5/src/assets/Image5.png
+++ b/лаб5/src/assets/Image5.png
--- a/лаб5/src/assets/Image6.jpg
+++ b/лаб5/src/assets/Image6.jpg
--- a/лаб5/src/assets/Image7.jpg
+++ b/лаб5/src/assets/Image7.jpg
--- a/лаб5/src/assets/Image8.png
+++ b/лаб5/src/assets/Image8.png
--- a/лаб5/src/assets/Image9.jpg
+++ b/лаб5/src/assets/Image9.jpg
--- a/лаб5/src/assets/banner1.png
+++ b/лаб5/src/assets/banner1.png
--- a/лаб5/src/assets/banner2.png
+++ b/лаб5/src/assets/banner2.png
--- a/лаб5/src/assets/banner3.png
+++ b/лаб5/src/assets/banner3.png
--- a/лаб5/src/assets/card1.png
+++ b/лаб5/src/assets/card1.png
--- a/лаб5/src/assets/logo.png
+++ b/лаб5/src/assets/logo.png
--- a/лаб5/src/assets/лого.png
+++ b/лаб5/src/assets/лого.png
--- a/лаб5/src/components/api/ApiClient.js
+++ b/лаб5/src/components/api/ApiClient.js
@ -0,0 +1,40 @@
+import axios from 'axios';
+import toast from 'react-hot-toast';
+
+export class HttpError extends Error {
+    constructor(message = '') {
+        super(message);
+        this.name = 'HttpError';
+        Object.setPrototypeOf(this, new.target.prototype);
+        toast.error(message, { id: 'HttpError' });
+    }
+}
+
+function responseHandler(response) {
+    if (response.status === 200 || response.status === 201) {
+        const data = response?.data;
+        if (!data) {
+            throw new HttpError('API Error. No data!');
+        }
+        return data;
+    }
+    throw new HttpError(`API Error! Invalid status code ${response.status}!`);
+}
+
+function responseErrorHandler(error) {
+    if (error === null) {
+        throw new Error('Unrecoverable error!! Error is null!');
+    }
+    toast.error(error.message, { id: 'AxiosError' });
+    return Promise.reject(error.message);
+}
+
+export const ApiClient = axios.create({
+    baseURL: 'http://localhost:8081/',
+    timeout: '3000',
+    headers: {
+        Accept: 'application/json',
+    },
+});
+
+ApiClient.interceptors.response.use(responseHandler, responseErrorHandler);
--- a/лаб5/src/components/api/ApiService.js
+++ b/лаб5/src/components/api/ApiService.js
@ -0,0 +1,29 @@
+import { ApiClient } from './ApiClient';
+
+class ApiService {
+    constructor(url) {
+        this.url = url;
+    }
+
+    async getAll(expand) {
+        return ApiClient.get(`${this.url}${expand || ''}`);
+    }
+
+    async get(id, expand) {
+        return ApiClient.get(`${this.url}/${id}${expand || ''}`);
+    }
+
+    async create(body) {
+        return ApiClient.post(this.url, body);
+    }
+
+    async update(id, body) {
+        return ApiClient.put(`${this.url}/${id}`, body);
+    }
+
+    async delete(id) {
+        return ApiClient.delete(`${this.url}/${id}`);
+    }
+}
+
+export default ApiService;
--- a/лаб5/src/components/footer/Footer.css
+++ b/лаб5/src/components/footer/Footer.css
@ -0,0 +1,71 @@
+:root{
+    --color1: rgba(76, 115, 255, 1);
+    --color2: rgba(13, 12, 30, 1);
+    --color3: rgba(255, 255, 255, 1);
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('../fonts/Ubuntu-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('fonts/Ubuntu-Bold.woff') format('woff');
+    font-weight: normal;
+    font-style: bold;
+}
+
+@font-face {
+    font-family: 'Ubuntu';
+    src: url('../fonts/Ubuntu-Medium.woff') format('woff');
+    font-weight: normal;
+    font-style: medium;
+}
+
+@font-face {
+    font-family: 'Syne';
+    src: url('../fonts/Syne-Bold.woff') format('woff');
+    font-weight: normal;
+    font-style: bold;
+}
+.list{
+    color: rgba(255, 255, 255);
+    font-family: Ubuntu;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    opacity: 0.5;
+}
+.bosslist{
+    color: #FFF;
+    font-family: Ubuntu;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 123%; /* 19.68px */
+    letter-spacing: 0.56px;
+}
+.active{
+    color: rgba(255, 255, 255);
+    font-weight: bold;
+    opacity: 1;
+}
+footer{
+    background: #000;
+    padding-top: 65px;
+    padding-bottom: 0;
+}
+.list:hover{
+    opacity: 1;
+}
+.textlist{
+    white-space: nowrap;
+}
+.container {
+    position: relative;
+    text-align: center;
+}
--- a/лаб5/src/components/footer/Footer.jsx
+++ b/лаб5/src/components/footer/Footer.jsx
@ -0,0 +1,69 @@
+import './Footer.css';
+
+const Footer = () => {
+    const year = new Date().getFullYear();
+
+    return (
+        <footer className="text-center text-lg-start text-white">
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-3 mb-3">
+                        <img src="icon/иконка2.png" alt="Логотип" className="start" />
+                    </div>
+                    <div className="col-lg-3 col-md-6 mb-4 mb-md-0">
+                        <h5 className="bosslist">Быстрое меню</h5>
+                        <ul className="textlist list-unstyled mb-0">
+                            <li>
+                                <a href="#" className="list active">Главная</a>
+                            </li>
+                            <li>
+                                <a href="#" className="list">Популярные</a>
+                            </li>
+                            <li>
+                                <a href="#" className="list">Аренда</a>
+                            </li>
+                            <li>
+                                <a href="#" className="list">Купить</a>
+                            </li>
+                            <li>
+                                <a href="#" className="list">О нас</a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div className="col-md-4 col-lg-3 col-xl-1 mb-md-0 mb-4 offset-lg-3">
+                        <h5 className="bosslist">Контакты</h5>
+                        <ul className="textlist list-unstyled mb-0">
+                            <li>
+                                <a href="#" id="listperenos" className="list">Ульяновск,<br /> Московское шоссе,<br /> д. 3</a>
+                            </li>
+                            <li>
+                                <a href="#" className="list">+7 (986) 737-71-39</a>
+                            </li>
+                            <li>
+                                <a href="#" className="list">artifaction@mail.ru</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div className="licensia text-center p-5">
+                <section className="d-flex justify-content-center p-1 m-3">
+                    <div>
+                        <a href="#" className="btn btn-link btn-floating btn-lg text-dark m-1">
+                            <img src="icon/facebook.svg" alt="Логотип" className="start" />
+                        </a>
+                        <a href="#" className="btn btn-link btn-floating btn-lg text-dark m-1">
+                            <img src="icon/vk.svg" alt="Логотип" className="start" />
+                        </a>
+                        <a href="#" className="btn btn-link btn-floating btn-lg text-dark m-1">
+                            <img src="icon/inst.svg" alt="Логотип" className="start" />
+                        </a>
+                    </div>
+                </section>
+                <p className="list"> © 2004-{year} Construction company HI-TOWN</p>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
--- a/лаб5/src/components/input/Check.jsx
+++ b/лаб5/src/components/input/Check.jsx
@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const Checkbox = ({
+    name, label, checked, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
+            <Form.Check type="checkbox">
+                <Form.Check.Input
+                    type="checkbox"
+                    name={name || ''}
+                    checked={checked || false}
+                    onChange={onChange}
+                    {...rest}
+                />
+                <Form.Check.Label>{label}</Form.Check.Label>
+            </Form.Check>
+        </Form.Group>
+    );
+};
+
+Checkbox.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    checked: PropTypes.bool,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Checkbox;
--- a/лаб5/src/components/input/Input.jsx
+++ b/лаб5/src/components/input/Input.jsx
@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const Input = ({
+    name, label, value, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
+            <Form.Label>{label}</Form.Label>
+            <Form.Control name={name || ''} value={value || ''} onChange={onChange} {...rest} />
+        </Form.Group>
+    );
+};
+
+Input.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Input;
--- a/лаб5/src/components/input/Radio.jsx
+++ b/лаб5/src/components/input/Radio.jsx
@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const RadioButton = ({
+    name, label, checked, onChange, className, value, group, ...rest
+}) => {
+    return (
+        <Form.Group className={`mb-2 ${className || ''}`} controlId={`${group}-${name}`}>
+            <Form.Check type="radio">
+                <Form.Check.Input
+                    type="radio"
+                    name={group || ''}
+                    value={value || ''}
+                    checked={checked || false}
+                    onChange={onChange}
+                    {...rest}
+                />
+                <Form.Check.Label>{label}</Form.Check.Label>
+            </Form.Check>
+        </Form.Group>
+    );
+};
+
+RadioButton.propTypes = {
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    checked: PropTypes.bool,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    group: PropTypes.string.isRequired,
+};
+
+export default RadioButton;
--- a/лаб5/src/components/input/Select.jsx
+++ b/лаб5/src/components/input/Select.jsx
@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const Select = ({
+    values, name, label, value, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
+            <Form.Label className='form-label'>{label}</Form.Label>
+            <Form.Select name={name || ''} value={value || ''} onChange={onChange} {...rest}>
+                <option value=''>Выберите значение</option>
+                {
+                    values.map((type) => <option key={type.id} value={type.id}>{type.name}</option>)
+                }
+            </Form.Select>
+        </Form.Group>
+    );
+};
+
+Select.propTypes = {
+    values: PropTypes.array,
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Select;
--- a/лаб5/src/components/lines/card/ArendaCard.jsx
+++ b/лаб5/src/components/lines/card/ArendaCard.jsx
@ -0,0 +1,100 @@
+import PropTypes from 'prop-types';
+import { useLocation } from 'react-router-dom';
+import levenshtein from 'fast-levenshtein';
+import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
+import useLinesFormModal from '../hooks/LinesFormModalHook';
+import useLines from '../hooks/LinesHook';
+import LinesTable from './CardsGroups.jsx';
+import LinesTableRow from './ArendaCardsRender.jsx';
+
+const useQuery = () => {
+    return new URLSearchParams(useLocation().search);
+};
+
+const Lines = ({
+ popularChecked, unpopularChecked, showerChecked, parkChecked,
+}) => {
+    const query = useQuery();
+    const searchText = query.get('search')?.toLowerCase() || '';
+    const { lines, handleLinesChange } = useLines();
+
+    const filteredLines = lines.filter((line) => {
+        const lineNameLower = line.geolocation.name?.toLowerCase();
+        const distance = levenshtein.get(lineNameLower, searchText);
+
+        if (searchText && popularChecked && unpopularChecked && showerChecked && parkChecked) {
+            return (
+                line.propertyStatus === 'Аренда' && distance <= 7
+            );
+        }
+
+        if (!searchText && popularChecked && unpopularChecked && showerChecked && parkChecked) {
+            return (
+                line.propertyStatus === 'Аренда'
+            );
+        }
+
+        if (!searchText && popularChecked && unpopularChecked) {
+            return (
+                line.propertyStatus === 'Аренда'
+            );
+        }
+
+        let shouldShowLine = line.propertyStatus === 'Аренда';
+
+        if (popularChecked) {
+            shouldShowLine = shouldShowLine && line.popular === 'true';
+        }
+
+        if (unpopularChecked) {
+            shouldShowLine = shouldShowLine && line.popular !== 'true';
+        }
+
+        if (showerChecked) {
+            shouldShowLine = shouldShowLine && line.shower1 === 'true';
+        }
+
+        if (parkChecked) {
+            shouldShowLine = shouldShowLine && line.park >= 1;
+        }
+
+        if (searchText) {
+            shouldShowLine = shouldShowLine && distance <= 7;
+        }
+
+        return shouldShowLine;
+    });
+
+    const {
+        showDeleteModal,
+    } = useLinesDeleteModal(handleLinesChange);
+
+    const {
+        showFormModal,
+    } = useLinesFormModal(handleLinesChange);
+
+    return (
+        <>
+            <LinesTable>
+                {
+                    filteredLines.map((line, index) => (
+                        <LinesTableRow key={line.id}
+                            index={index} line={line}
+                            onDelete={() => showDeleteModal(line.id)}
+                            onEdit={() => showFormModal(line.id)}
+                        />
+                    ))
+                }
+            </LinesTable>
+        </>
+    );
+};
+
+Lines.propTypes = {
+    popularChecked: PropTypes.bool.isRequired,
+    unpopularChecked: PropTypes.bool.isRequired,
+    showerChecked: PropTypes.bool.isRequired,
+    parkChecked: PropTypes.bool.isRequired,
+};
+
+export default Lines;
--- a/лаб5/src/components/lines/card/ArendaCardsRender.jsx
+++ b/лаб5/src/components/lines/card/ArendaCardsRender.jsx
@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+// eslint-disable-next-line object-curly-newline
+import { Droplet, XCircle } from 'react-bootstrap-icons';
+import { Link } from 'react-router-dom';
+
+const LinesTableRow = ({ line }) => {
+    const isShower1 = line.shower1 === 'true';
+    return (
+        <div className="card cardsecret mb-3 mx-auto border-0">
+            <div className="row g-0 justify-content-center">
+                <div className="col-md-4 pict">
+                    <img src={line.image} className="img-fluid rounded-start" alt="..." />
+                </div>
+                <div className="col-md-4 content-card">
+                    <div className="card-body">
+                        <h5 className="card-title">{line.nick}</h5>
+                        <p className="card-text text-start">{line.description}</p>
+                        <div className="mt-0">
+                            {isShower1 ? <Droplet /> : <XCircle />}
+                            <small className="text-muted-name p-1">Душ</small>
+                            <img className="img-plus" src="icon/parkovka.svg" alt=""/>
+                            <small className="text-muted-name">Парковка: {line.park}</small>
+                        </div>
+                        <div className="mt-0">
+                            <img className="img-plus" src="icon/fire.svg" alt="" />
+                            <small className="text-muted-name">Оптимальный вариант</small>
+                        </div>
+                        <div>
+                            <p className="card-text price">{parseFloat(line.price).toFixed(2)} ₽  за сутки</p>
+                        </div>
+                        <Button className="btn btn-buy col-12" as={Link} to={`/details/${line.id}`}>Бронировать</Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+LinesTableRow.propTypes = {
+    index: PropTypes.number.isRequired,
+    line: PropTypes.object.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    onEdit: PropTypes.func.isRequired,
+};
+
+export default LinesTableRow;
--- a/Show More
+++ b/Show More