Merge branch 'master' of git.flexites.org:Students/ITRadio

client/.prettierrc.cjs

@@ -1,3 +1,11 @@
 module.exports = {
+  printWidth: 120,
+  tabWidth: 2,
+  tabs: false,
+  semi: true,
   singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  arrowParens: 'always',
+  endOfLine: 'auto',
 };

client/.stylelintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-clean-order"],
+  "rules": {
+    "selector-class-pattern": null,
+    "scss/load-partial-extension": "always"
+  }
+}

client/README.md

@@ -3,6 +3,7 @@
 A Al project
 
 ## Install the dependencies
+
 ```bash
 yarn
 # or
@@ -10,24 +11,25 @@ npm install
 ```
 
 ### Start the app in development mode (hot-code reloading, error reporting, etc.)
+
 ```bash
 quasar dev
 ```
 
-
 ### Lint the files
+
 ```bash
 yarn lint
 # or
 npm run lint
 ```
 
-
-
 ### Build the app for production
+
 ```bash
 quasar build
 ```
 
 ### Customize the configuration
+
 See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js).

client/babel.config.cjs

@@ -5,9 +5,7 @@ module.exports = (api) => {
     presets: [
       [
         '@quasar/babel-preset-app',
-        api.caller((caller) => caller && caller.target === 'node')
-          ? { targets: { node: 'current' } }
-          : {},
+        api.caller((caller) => caller && caller.target === 'node') ? { targets: { node: 'current' } } : {},
       ],
     ],
   };

client/jsconfig.json

@@ -2,38 +2,16 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "src/*": [
-        "src/*"
-      ],
-      "app/*": [
-        "*"
-      ],
-      "components/*": [
-        "src/components/*"
-      ],
-      "layouts/*": [
-        "src/layouts/*"
-      ],
-      "pages/*": [
-        "src/pages/*"
-      ],
-      "assets/*": [
-        "src/assets/*"
-      ],
-      "boot/*": [
-        "src/boot/*"
-      ],
-      "stores/*": [
-        "src/stores/*"
-      ],
-      "vue$": [
-        "node_modules/vue/dist/vue.runtime.esm-bundler.js"
-      ]
+      "src/*": ["src/*"],
+      "app/*": ["*"],
+      "components/*": ["src/components/*"],
+      "layouts/*": ["src/layouts/*"],
+      "pages/*": ["src/pages/*"],
+      "assets/*": ["src/assets/*"],
+      "boot/*": ["src/boot/*"],
+      "stores/*": ["src/stores/*"],
+      "vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
     }
   },
-  "exclude": [
-    "dist",
-    ".quasar",
-    "node_modules"
-  ]
+  "exclude": ["dist", ".quasar", "node_modules"]
 }

client/package.json

@@ -7,7 +7,9 @@
   "private": true,
   "scripts": {
     "lint": "eslint --ext .js,.vue ./",
-    "lint:fix": "eslint --ext .js,.vue --fix ./",
+    "lint:fix": "eslint --ext .js,.vue, --fix ./",
+    "lint:css": "stylelint '**/*.scss'",
+    "lint:css:fix": "npm run lint:css -- --fix",
     "test": "echo \"No test specified\" && exit 0",
     "serve": "npx cross-env NODE_ENV=development quasar dev",
     "serve:ssr": "quasar dev -m ssr",
@@ -64,6 +66,10 @@
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.3.2",
     "sass-loader": "^13.3.2",
+    "stylelint": "^16.7.0",
+    "stylelint-config-clean-order": "^6.1.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
     "vue-loader": "^17.3.0"
   },
   "browserslist": [

client/quasar.config.js

@@ -80,9 +80,7 @@ module.exports = configure(function (ctx) {
       // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
 
       chainWebpack(chain) {
-        chain
-          .plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
+        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
         //   chain.plugin('normal-module-replacement').use(
         // new webpack.NormalModuleReplacementPlugin(/settings$/, function(resource) {
         //     resource.request = resource.request.replace(/settings$/, `settings/${process.env.NODE_ENV}`);
@@ -193,9 +191,7 @@ module.exports = configure(function (ctx) {
       // Tell browser when a file from the server should expire from cache (in ms)
 
       chainWebpackWebserver(chain) {
-        chain
-          .plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js'] }]);
+        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
       },
 
       middlewares: [
@@ -213,9 +209,7 @@ module.exports = configure(function (ctx) {
       // if using workbox in InjectManifest mode
 
       chainWebpackCustomSW(chain) {
-        chain
-          .plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js'] }]);
+        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
       },
 
       manifest: {
@@ -290,15 +284,11 @@ module.exports = configure(function (ctx) {
       // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
 
       chainWebpackMain(chain) {
-        chain
-          .plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js'] }]);
+        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
       },
 
       chainWebpackPreload(chain) {
-        chain
-          .plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js'] }]);
+        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
       },
     },
   };

client/src/App.vue

@@ -23,15 +23,7 @@ import Player from '@/components/player.vue';
 import ChangingUser from '@/components/modal/сhanging-user.vue';
 
 export default {
-  async preFetch({
-    store,
-    currentRoute,
-    previousRoute,
-    redirect,
-    ssrContext,
-    urlPath,
-    publicPath,
-  }) {},
+  async preFetch({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {},
   components: {
     ChangingUser,
     Player,

client/src/assets/css/common.scss

@@ -1,80 +1,90 @@
 *,
 *::before,
 *::after {
-    box-sizing: border-box;
-    outline: none !important;
-}
-h1{
-    margin: 0;
-    position: relative;
-    z-index: 2;
-}
-.text{
-    @mixin p;
-}
-.h1 {
-    @mixin h1;
+  box-sizing: border-box;
+  outline: none !important;
 }
 
-.h2, h2 {
-    @mixin h2;
+h1 {
+  position: relative;
+  z-index: 2;
+  margin: 0;
+}
+
+.text {
+  @mixin p;
+}
+
+.h1 {
+  @mixin h1;
+}
+
+.h2,
+h2 {
+  @mixin h2;
 }
 
 .h3 {
-    @mixin h3;
+  @mixin h3;
 }
 
 .h4 {
-    @mixin h4;
+  @mixin h4;
 }
 
 .p {
-    @mixin p;
+  @mixin p;
 }
 
 .title {
-    @mixin p;
-    color: transparent;
-    background-clip: text;
-    background-image: var(--linear-gradient);
-    font-size: 34px;
-    &.m--white{
-        color: var(--color-white);
-    }
+  @mixin p;
+
+  font-size: 34px;
+  color: transparent;
+  background-image: var(--linear-gradient);
+  background-clip: text;
+
+  &.m--white {
+    color: var(--color-white);
+  }
 }
 
 .ul {
-    @mixin ul;
+  @mixin ul;
 }
 
 .ol {
-    @mixin ol;
+  @mixin ol;
 }
 
 .hr {
-    @mixin hr;
+  @mixin hr;
 }
 
 .a,
 a {
-    @mixin a;
-    /*@mixin a--color $color-base;*/
+  @mixin a;
+
+  /* @mixin a--color $color-base; */
 }
 
-html{
-    scrollbar-color: var(--color-black) var(--bg-opacity);
-    scrollbar-gutter: stable;
-    scrollbar-width: thin;
+html {
+  scrollbar-color: var(--color-black) var(--bg-opacity);
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
 }
-body{
-    font-size: var(--base-fz);
-    line-height: var(--base-lh);
-    background: var(--color-black);
-    font-family: var(--font-family-base);
-    color: var(--color-white);
-    padding: 0 !important;
+
+body {
+  padding: 0 !important;
+
+  font-family: var(--font-family-base);
+  font-size: var(--base-fz);
+  line-height: var(--base-lh);
+  color: var(--color-white);
+
+  background: var(--color-black);
 }
 
 .button {
-    @mixin button;
+  @mixin button;
 }

client/src/assets/css/index.scss

@@ -1,31 +1,29 @@
-@import "./mixins/responsive.scss";
-@import "./setting.scss";
-@import "./lib/reset.css";
+@import './mixins/responsive.scss';
+@import './setting.scss';
+@import './lib/reset.css';
 @import './lib/fonts.css';
-@import "./mixins/form.scss";
-@import "./mixins/text.scss";
-@import "./common.scss";
-@import "./module/app.scss";
-@import "./module/app-header.scss";
-@import "./module/app-footer.scss";
-@import "./module/app-breadcrumbs.scss";
-@import "./module/modal.scss";
-@import "./module/fiald.scss";
-@import "./module/pagination.scss";
-@import "./module/home.scss";
-@import "./module/team.scss";
-@import "./module/rubric.scss";
-@import "./module/blog.scss";
-@import "./module/authentication.scss";
-@import "./module/tabs.scss";
-@import "./module/about.scss";
-@import "./module/playlists.scss";
-@import "./module/playlist.scss";
-@import "./module/contacts.scss";
-@import "./module/support.scss";
-@import "./module/player.scss";
-@import "./module/loader.scss";
-@import "./module/profile.scss";
-@import "./module/song.scss";
-
-
+@import './mixins/form.scss';
+@import './mixins/text.scss';
+@import './common.scss';
+@import './module/app.scss';
+@import './module/app-header.scss';
+@import './module/app-footer.scss';
+@import './module/app-breadcrumbs.scss';
+@import './module/modal.scss';
+@import './module/fiald.scss';
+@import './module/pagination.scss';
+@import './module/home.scss';
+@import './module/team.scss';
+@import './module/rubric.scss';
+@import './module/blog.scss';
+@import './module/authentication.scss';
+@import './module/tabs.scss';
+@import './module/about.scss';
+@import './module/playlists.scss';
+@import './module/playlist.scss';
+@import './module/contacts.scss';
+@import './module/support.scss';
+@import './module/player.scss';
+@import './module/loader.scss';
+@import './module/profile.scss';
+@import './module/song.scss';

client/src/assets/css/lib/fonts.css

@@ -1,71 +1,70 @@
 @font-face {
-    font-family: 'Manrope';
-    /* src: url('assets/fonts/Manrope-ExtraLight.woff') format('woff'),
+  font-family: 'Manrope';
+  /* src: url('assets/fonts/Manrope-ExtraLight.woff') format('woff'),
         url('assets/fonts/Manrope-ExtraLight.woff2') format('woff2'),
         url('assets/fonts/Manrope-ExtraLight.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-ExtraLight.ttf') format('truetype');
-    font-weight: 200;
-    font-style: normal;
-    font-display: swap;
+  src: url('assets/fonts/Manrope-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
 }
 @font-face {
-    font-family: 'Manrope';
-    /*src: url('assets/fonts/Manrope-Light.woff') format('woff'),
+  font-family: 'Manrope';
+  /*src: url('assets/fonts/Manrope-Light.woff') format('woff'),
         url('assets/fonts/Manrope-Light.woff2') format('woff2'),
         url('assets/fonts/Manrope-Light.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-Light.ttf') format('truetype');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
+  src: url('assets/fonts/Manrope-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
 }
 @font-face {
-    font-family: 'Manrope';
-    /*src: url('assets/fonts/Manrope-Regular.ttf.woff') format('woff'),
+  font-family: 'Manrope';
+  /*src: url('assets/fonts/Manrope-Regular.ttf.woff') format('woff'),
         url('assets/fonts/Manrope-Regular.ttf.woff2') format('woff2'),
         url('assets/fonts/Manrope-Regular.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-Regular.ttf') format('truetype');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
+  src: url('assets/fonts/Manrope-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
 }
 @font-face {
-    font-family: 'Manrope';
-    /*src: url('assets/fonts/Manrope-Medium.woff') format('woff'),
+  font-family: 'Manrope';
+  /*src: url('assets/fonts/Manrope-Medium.woff') format('woff'),
         url('assets/fonts/Manrope-Medium.woff2') format('woff2'),
         url('assets/fonts/Manrope-Medium.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-Medium.ttf') format('truetype');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
+  src: url('assets/fonts/Manrope-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
 }
 @font-face {
-    font-family: 'Manrope';
-    /*src: url('assets/fonts/Manrope-SemiBold.woff') format('woff'),
+  font-family: 'Manrope';
+  /*src: url('assets/fonts/Manrope-SemiBold.woff') format('woff'),
         url('assets/fonts/Manrope-SemiBold.woff2') format('woff2'),
         url('assets/fonts/Manrope-SemiBold.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-SemiBold.ttf') format('truetype');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
+  src: url('assets/fonts/Manrope-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
 }
 @font-face {
-    font-family: 'Manrope';
-    /*src: url('assets/fonts/Manrope-Bold.woff') format('woff'),
+  font-family: 'Manrope';
+  /*src: url('assets/fonts/Manrope-Bold.woff') format('woff'),
         url('assets/fonts/Manrope-Bold.woff2') format('woff2'),
         url('assets/fonts/Manrope-Bold.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-Bold.ttf') format('truetype');
-    font-weight: 700;
-    font-style: normal;
-    font-display: swap;
+  src: url('assets/fonts/Manrope-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
 }
 @font-face {
-    font-family: 'Manrope';
-    /*src: url('assets/fonts/Manrope-ExtraBold.woff') format('woff'),
+  font-family: 'Manrope';
+  /*src: url('assets/fonts/Manrope-ExtraBold.woff') format('woff'),
         url('assets/fonts/Manrope-ExtraBold.woff2') format('woff2'),
         url('assets/fonts/Manrope-ExtraBold.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-ExtraBold.ttf') format('truetype');
-    font-weight: 800;
-    font-style: normal;
-    font-display: swap;
+  src: url('assets/fonts/Manrope-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
 }
-

client/src/assets/css/lib/reset.css

@@ -1,57 +1,140 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font: inherit;
-    font-size: 100%;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
 }
 
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 
 body {
-    line-height: 1;
+  line-height: 1;
 }
 
-ol, ul {
-    list-style: none;
+ol,
+ul {
+  list-style: none;
 }
 
-blockquote, q {
-    quotes: none;
+blockquote,
+q {
+  quotes: none;
 }
 
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: none;
 }
 
 table {
-    border-collapse: collapse;
-    border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
-input, textarea, select {
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
 }
 
-img{
-    width: 100%;
-    max-width: 100%;
+img {
+  width: 100%;
+  max-width: 100%;
 }

client/src/assets/css/mixins/form.scss

@@ -1,53 +1,66 @@
 @define-mixin input {
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 1rem 1.2rem;
+
+  color: var(--color-white);
+
   background: transparent;
   border: 1px solid var(--color-white);
   border-radius: 40px;
-  padding: 1rem 1.2rem;
-  width: 100%;
-  color: var(--color-white);
-  margin-bottom: 10px;
 }
-@define-mixin button {
-  font-family: var(--font-family-base);
 
-  color: var(--color-white);
-  min-width: 220px;
+@define-mixin button {
+  cursor: pointer;
+
+  position: relative;
+  z-index: 2;
+
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+
   box-sizing: border-box;
-  vertical-align: middle;
+  min-width: 220px;
+  min-height: 3rem;
+
+  font-family: var(--font-family-base);
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1rem;
+  color: var(--color-white);
   text-align: center;
   text-decoration: none;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1rem;
-  border-radius: 100px;
-  cursor: pointer;
-  border: 1px solid var(--color-white);
-  min-height: 3rem;
-  transition: border 0.5s ease, background 0.5s ease, color 0.5s ease;
-  background: transparent;
-  position: relative;
-  z-index: 2;
+  vertical-align: middle;
 
+  background: transparent;
+  border: 1px solid var(--color-white);
+  border-radius: 100px;
+
+  transition:
+    border 0.5s ease,
+    background 0.5s ease,
+    color 0.5s ease;
 
   &:hover {
-    cursor: url("./assets/img/icon/cursor.svg"), auto;
+    cursor: url('./assets/img/icon/cursor.svg'), auto;
     color: var(--color-black);
     background: var(--color-white);
   }
-  &-violet{
-    border-color: var(--color-primary);
+
+  &-violet {
     color: var(--color-primary);
+    border-color: var(--color-primary);
+
     &:hover {
-     border-color: transparent;
+      border-color: transparent;
     }
   }
+
   &.is-active,
   &:active {
-    cursor: url("./assets/img/icon/cursor.svg"), auto;
+    cursor: url('./assets/img/icon/cursor.svg'), auto;
     color: var(--color-black);
     background: var(--color-white-darker);
   }
@@ -67,9 +80,10 @@
   &.m--blur {
     min-width: 0;
     padding: 1rem 1.5rem;
+
     background: var(--bg-opacity);
-    border: none;
     backdrop-filter: blur(5px);
+    border: none;
 
     &:hover {
       background: var(--color-white);
@@ -84,25 +98,30 @@
 
   &.m--arrow {
     &::after {
-      margin-left: 10px;
       content: '';
+
       width: 20px;
       height: 20px;
+      margin-left: 10px;
+
       background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
       background-size: cover;
-      transition: background 0.3s ease, width 0.3s ease;
+
+      transition:
+        background 0.3s ease,
+        width 0.3s ease;
     }
 
     &:hover::after {
-      background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
       width: 45px;
       height: 20px;
+      background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
     }
 
     &.m--active,
     &:active {
-      background:transparent;
       color: var(--color-white);
+      background: transparent;
     }
   }
 
@@ -124,7 +143,9 @@
         content: '';
         background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
         background-size: cover;
-        transition: background 0.3s ease, width 0.3s ease;
+        transition:
+          background 0.3s ease,
+          width 0.3s ease;
       }
 
       &:hover::after {
@@ -132,58 +153,65 @@
       }
     }
   }
-  &.m--text-link{
-    border: none;
-    pad: 0;
+
+  &.m--text-link {
+    @mixin a;
+
     min-width: 0;
     min-height: 0;
     padding: 0;
-    &:hover{
+
+    border: none;
+
+    pad: 0;
+
+    &:hover {
       background: transparent;
     }
-    @mixin a;
   }
+
   &.m--circle {
-    width: 56px;
-    height: 56px;
-    min-width: 0;
-    border-color: var(--color-white-opacity);
     overflow: hidden;
 
-    &:before {
-      background: var(--linear-gradient);
+    width: 56px;
+    min-width: 0;
+    height: 56px;
+
+    border-color: var(--color-white-opacity);
+
+    &::before {
       content: '';
+
       position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
+      inset: 0;
+
       opacity: 0;
-      transition: opacity .3s ease;
+      background: var(--linear-gradient);
+
+      transition: opacity 0.3s ease;
     }
 
-    &:after {
+    &::after {
       content: '';
+
       position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
+      inset: 0;
+      transform: rotate(-45deg);
+
       width: 18px;
       height: 18px;
-      margin: auto auto;
+      margin: auto;
+
       background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#404145FF) no-repeat 100%;
-      transform: rotate(-45deg);
     }
 
-    &:hover:before {
+    &:hover::before {
+      cursor: url('./assets/img/icon/cursor.svg'), auto;
       opacity: 1;
-      cursor: url("./assets/img/icon/cursor.svg"), auto;
     }
 
-    &:hover:after {
+    &:hover::after {
       background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
     }
-
   }
 }

client/src/assets/css/mixins/responsive.scss

@@ -1,41 +1,35 @@
-@define-mixin responsive-xl{
-    @media (max-width: $document-width-xl) {
-        @mixin-content;
-
-    }
+@define-mixin responsive-xl {
+  @media (max-width: $document-width-xl) {
+    @mixin-content;
+  }
 }
 
 @define-mixin responsive-l {
-    @media (max-width: $document-width-l) {
-        @mixin-content;
-    }
+  @media (max-width: $document-width-l) {
+    @mixin-content;
+  }
 }
 
-
 @define-mixin responsive-m {
-    @media (max-width: $document-width-m) {
-        @mixin-content;
-    }
+  @media (max-width: $document-width-m) {
+    @mixin-content;
+  }
 }
 
-
 @define-mixin responsive-s {
-    @media (max-width: $document-width-s) {
-        @mixin-content;
-    }
+  @media (max-width: $document-width-s) {
+    @mixin-content;
+  }
 }
 
-
 @define-mixin responsive-xs {
-    @media (max-width: $document-width-xs) {
-        @mixin-content;
-    }
+  @media (max-width: $document-width-xs) {
+    @mixin-content;
+  }
 }
 
-
-    @define-mixin responsive-xxs {
-    @media (max-width: $document-width-xxs) {
-        @mixin-content;
-    }
+@define-mixin responsive-xxs {
+  @media (max-width: $document-width-xxs) {
+    @mixin-content;
+  }
 }
-

client/src/assets/css/mixins/text.scss

@@ -1,145 +1,161 @@
 @define-mixin __p {
-    position: relative;
-    z-index: 2;
-    &:first-child {
-        margin-top: 0;
-    }
+  position: relative;
+  z-index: 2;
 
-    &:last-child {
-        margin-bottom: 0;
-    }
+  &:first-child {
+    margin-top: 0;
+  }
 
-    &.m--mb-1 {
-        margin-bottom: 1rem;
-    }
+  &:last-child {
+    margin-bottom: 0;
+  }
 
-    &.m--mb-2 {
-        margin-bottom: 2rem;
-    }
+  &.m--mb-1 {
+    margin-bottom: 1rem;
+  }
 
-    &.m--mb-3 {
-        margin-bottom: 3rem;
-    }
+  &.m--mb-2 {
+    margin-bottom: 2rem;
+  }
 
-    &.m--mb-4 {
-        margin-bottom: 4rem;
-    }
+  &.m--mb-3 {
+    margin-bottom: 3rem;
+  }
 
-    &.m--mb-5 {
-        margin-bottom: 5rem;
-    }
+  &.m--mb-4 {
+    margin-bottom: 4rem;
+  }
+
+  &.m--mb-5 {
+    margin-bottom: 5rem;
+  }
 }
 
 @define-mixin h1 {
-    @mixin __p;
+  @mixin __p;
 
-    /*margin-top: 32px;*/
-    margin-bottom: 1.5rem;
-    font-size: 100px;
-    line-height: 1.2;
-    font-weight: 500;
-    color: var(--color-white);
-    padding-bottom: 6px;
-    @mixin responsive-l {
-        font-size: 84px;
-    }
-    @mixin responsive-m {
-        font-size: 48px;
-    }
-    @mixin responsive-s {
-        font-size: 36px;
-    }
+  @mixin responsive-l {
+    font-size: 84px;
+  }
+
+  @mixin responsive-m {
+    font-size: 48px;
+  }
+
+  @mixin responsive-s {
+    font-size: 36px;
+  }
+
+  /* margin-top: 32px; */
+  margin-bottom: 1.5rem;
+  padding-bottom: 6px;
+
+  font-size: 100px;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--color-white);
 }
 
 @define-mixin h2 {
-    @mixin __p;
+  @mixin __p;
 
-    margin: 2.5rem 0;
-    font-size: 3.375rem;
-    line-height: 1.3;
-    font-weight: 500;
-    color: transparent;
-    padding-bottom: 6px;
-    background-clip: text;
-    background-image: var(--linear-gradient);
-    text-transform: uppercase;
-    @mixin responsive-l {
-        font-size:40px;
-        line-height: 1.1;
-    }
-    @mixin responsive-m {
-        font-size:32px;
-    }
-    /*@mixin responsive-s {
+  @mixin responsive-l {
+    font-size: 40px;
+    line-height: 1.1;
+  }
+
+  @mixin responsive-m {
+    font-size: 32px;
+  }
+
+  margin: 2.5rem 0;
+  padding-bottom: 6px;
+
+  font-size: 3.375rem;
+  font-weight: 500;
+  line-height: 1.3;
+  color: transparent;
+  text-transform: uppercase;
+
+  background-image: var(--linear-gradient);
+  background-clip: text;
+
+  /* @mixin responsive-s {
         font-size: 36px;
-    }*/
-    &.m--white {
-        color: var(--color-white);
-        margin: 1.5rem 0;
-    }
+    } */
+  &.m--white {
+    margin: 1.5rem 0;
+    color: var(--color-white);
+  }
 
-    &.m--border {
-        &:after {
-            margin-top: 10px;
-            content: '';
-            display: block;
-            background: url("./assets/img/icon/borderLine.svg");
-            max-width: 260px;
-            width: 100%;
-            height: 10px;
-        }
-    }
+  &.m--border {
+    &::after {
+      content: '';
 
-    a {
-        text-decoration: none;
-        font-weight: 500;
-        color: var(--color-white);
-        transition: color 0.5s ease;
+      display: block;
 
-        &:hover {
-            color: var(--color-white);
-        }
+      width: 100%;
+      max-width: 260px;
+      height: 10px;
+      margin-top: 10px;
+
+      background: url('./assets/img/icon/borderLine.svg');
     }
+  }
+
+  a {
+    font-weight: 500;
+    color: var(--color-white);
+    text-decoration: none;
+    transition: color 0.5s ease;
+
+    &:hover {
+      color: var(--color-white);
+    }
+  }
 }
 
 @define-mixin h3 {
-    @mixin __p;
+  @mixin __p;
 
-    margin-top: 24px;
-    margin-bottom: 16px;
-    font-weight: 700;
-    font-size: 20px;
-    line-height: 1.2;
+  margin-top: 24px;
+  margin-bottom: 16px;
+
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.2;
 }
 
 @define-mixin h4 {
-    @mixin __p;
+  @mixin __p;
 
-    margin-top: 16px;
-    margin-bottom: 8px;
-    font-weight: 500;
-    font-size: 18px;
-    line-height: 1.2;
+  margin-top: 16px;
+  margin-bottom: 8px;
+
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.2;
 }
 
 @define-mixin p {
-    @mixin __p;
-    margin-top: 8px;
-    margin-bottom: 8px;
+  @mixin __p;
+
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
 
 @define-mixin ul {
-    @mixin p;
+  @mixin p;
 
-    list-style: none;
-    padding: 0;
+  padding: 0;
+  list-style: none;
 
-    li {
-        padding-left: 15px;
-        position: relative;
-        margin-bottom: 16px;
+  li {
+    position: relative;
+    margin-bottom: 16px;
+    padding-left: 15px;
 
-        /* &:before {
+    /* &:before {
              content: '';
              position: absolute;
              left: 0;
@@ -150,187 +166,206 @@
              background-position: center;
              background-image: svg-load('assets/img/icons/vector.svg', fill=$color-red);
              background-repeat: no-repeat;
-         }*/
-        &:before {
-            content: '';
-            position: absolute;
-            left: 0;
-            width: 5px;
-            height: 5px;
-            top: 7px;
-            background: var(--color-white);
-            border-radius: 50%;
-        }
+         } */
+    &::before {
+      content: '';
 
-        &:last-child {
-            margin-bottom: 0;
-        }
+      position: absolute;
+      top: 7px;
+      left: 0;
+
+      width: 5px;
+      height: 5px;
+
+      background: var(--color-white);
+      border-radius: 50%;
     }
 
-    &.m--dots {
-        li {
-            padding-left: 1rem;
-
-            &:before {
-                content: '•';
-                top: 0;
-                height: auto;
-                width: auto;
-                background: none;
-            }
-        }
+    &:last-child {
+      margin-bottom: 0;
     }
+  }
+
+  &.m--dots {
+    li {
+      padding-left: 1rem;
+
+      &::before {
+        content: '•';
+
+        top: 0;
+
+        width: auto;
+        height: auto;
+
+        background: none;
+      }
+    }
+  }
 }
 
 @define-mixin ol {
-    @mixin p;
+  @mixin p;
 
-    list-style: none;
-    counter-reset: item;
-    li {
-        counter-increment: item;
-        margin-bottom: 16px;
-        vertical-align: middle;
+  counter-reset: item;
+  list-style: none;
 
-        &:before {
-            content: counter(item);
-            padding-left: 12px;
-            font-weight: 500;
-            font-size: 18px;
-            line-height: 24px;
-            color: var(--color-white);
-        }
+  li {
+    counter-increment: item;
+    margin-bottom: 16px;
+    vertical-align: middle;
+
+    &::before {
+      content: counter(item);
+
+      padding-left: 12px;
+
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 24px;
+      color: var(--color-white);
     }
+  }
 }
 
 @define-mixin hr {
-    @mixin p;
+  @mixin p;
 }
 
 @define-mixin a {
+  position: relative;
+  z-index: 2;
+
+  font-weight: 500;
+  color: var(--color-white);
+  text-decoration: none;
+
+  transition: all 0.5s ease;
+
+  &:hover {
+    cursor: url('./assets/img/icon/cursor.svg'), auto;
+
+    color: transparent;
     text-decoration: none;
-    font-weight: 500;
-    transition: all 0.5s ease;
-    color: var(--color-white);
-    position: relative;
-    z-index: 2;
+
+    background-image: var(--linear-gradient);
+    background-clip: text;
+  }
+
+  &.m--link {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid transparent;
+
+    &::after {
+      content: '';
+
+      width: 20px;
+      height: 20px;
+      margin-left: 10px;
+
+      background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
+      background-size: cover;
+
+      transition:
+        background 0.3s ease,
+        width 0.3s ease;
+    }
+
     &:hover {
-        color: transparent;
-        -webkit-background-clip: text;
-        background-image: var(--linear-gradient);
-        cursor: url("./assets/img/icon/cursor.svg"), auto;
-        text-decoration: none;
+      color: var(--color-white);
+      border-bottom: 1px solid var(--color-white);
     }
 
-    &.m--link {
-        display: flex;
-        align-items: center;
-        border-bottom: 1px solid transparent;
-
-        &::after {
-            margin-left: 10px;
-            content: '';
-            width: 20px;
-            height: 20px;
-            background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
-            background-size: cover;
-            transition: background 0.3s ease, width 0.3s ease;
-        }
-
-        &:hover {
-            color: var(--color-white);
-            border-bottom: 1px solid var(--color-white);
-        }
-
-        &:hover::after {
-            width: 40px;
-        }
+    &:hover::after {
+      width: 40px;
     }
+  }
 
-    &.m--underline {
-        text-decoration: underline;
-    }
+  &.m--underline {
+    text-decoration: underline;
+  }
 }
 
 @define-mixin a--color $color {
-    color: $color;
-    border-color: rgba($color, 0.5);
+  color: $color;
+  border-color: rgba($color, 0.5);
 }
 
 @define-mixin table {
-    /* dummy */
+  /* dummy */
 }
 
 @define-mixin base {
-    font: $font-size-base/$line-height-base $font-family-base;
-    color: $color-base;
+  font: $font-size-base/$line-height-base $font-family-base;
+  color: $color-base;
 }
 
 @define-mixin format {
-    h1:not(.nostyle) {
-        @mixin h1;
-    }
+  h1:not(.nostyle) {
+    @mixin h1;
+  }
 
-    h2:not(.nostyle) {
-        @mixin h2;
-    }
+  h2:not(.nostyle) {
+    @mixin h2;
+  }
 
-    h3:not(.nostyle) {
-        @mixin h3;
-    }
+  h3:not(.nostyle) {
+    @mixin h3;
+  }
 
-    h4:not(.nostyle) {
-        @mixin h4;
-    }
+  h4:not(.nostyle) {
+    @mixin h4;
+  }
 
-    p:not(.nostyle) {
-        @mixin p;
-    }
+  p:not(.nostyle) {
+    @mixin p;
+  }
 
-    ul:not(.nostyle) {
-        @mixin ul;
-    }
+  ul:not(.nostyle) {
+    @mixin ul;
+  }
 
-    ol:not(.nostyle) {
-        @mixin ol;
-    }
+  ol:not(.nostyle) {
+    @mixin ol;
+  }
 
-    hr:not(.nostyle) {
-        @mixin hr;
-    }
+  hr:not(.nostyle) {
+    @mixin hr;
+  }
 
-    a:not(.nostyle) {
-        @mixin a;
-    }
+  a:not(.nostyle) {
+    @mixin a;
+  }
 
-    table:not(.nostyle) {
-        @mixin table;
-    }
+  table:not(.nostyle) {
+    @mixin table;
+  }
 
-    b:not(.nostyle),
-    strong:not(.nostyle) {
-        font-weight: bold;
-    }
+  b:not(.nostyle),
+  strong:not(.nostyle) {
+    font-weight: bold;
+  }
 
-    i:not(.nostyle),
-    em:not(.nostyle) {
-        font-style: italic;
-    }
+  i:not(.nostyle),
+  em:not(.nostyle) {
+    font-style: italic;
+  }
 
-    u:not(.nostyle),
-    ins:not(.nostyle) {
-        text-decoration: underline;
-    }
+  u:not(.nostyle),
+  ins:not(.nostyle) {
+    text-decoration: underline;
+  }
 
-    strike:not(.nostyle),
-    del:not(.nostyle) {
-        text-decoration: line-through;
-    }
+  strike:not(.nostyle),
+  del:not(.nostyle) {
+    text-decoration: line-through;
+  }
 }
 
 @define-mixin text {
-    @mixin format;
+  @mixin format;
 
-    font: $font-size-text/$line-height-text $font-family-text;
-    color: $color-text;
+  font: $font-size-text/$line-height-text $font-family-text;
+  color: $color-text;
 }

client/src/assets/css/module/about.scss

@@ -1,117 +1,120 @@
 .about {
-    &__header {
-        margin-bottom: var(--space-between-sections);
+  &__header {
+    margin-bottom: var(--space-between-sections);
 
-        &-top {
-            display: flex;
-            gap: 20px;
-            margin-bottom: var(--space-between-block);
-        }
-
-        &-left {
-            width: calc(42% - 10px);
-        }
-
-        &-right {
-            flex: 1 1 auto;
-            background: url("./assets/img/bg/about-banner.svg") no-repeat 50% 60%;
-            position: relative;
-            z-index: 2;
-        }
-
-        &-description {
-            font-size: 1.5rem;
-        }
-
-        &-bottom {
-            width: calc(58% - 10px);
-            margin-left: auto;
-            text-align: end;
-        }
+    &-top {
+      display: flex;
+      gap: 20px;
+      margin-bottom: var(--space-between-block);
     }
 
-    &__description {
-        margin-bottom: var(--space-between-block);
-
-        &-info {
-            display: flex;
-            gap: var(--space-between-block);
-        }
-
-        &-item {
-            flex: 1 1 auto;
-
-            &.m--left {
-                width: calc(70% - 40px);
-            }
-        }
+    &-left {
+      width: calc(42% - 10px);
     }
 
-    &__video {
-        position: relative;
-        z-index: 2;
-        width: 100%;
-        margin-bottom: var(--space-between-sections);
+    &-right {
+      position: relative;
+      z-index: 2;
+      flex: 1 1 auto;
+      background: url('./assets/img/bg/about-banner.svg') no-repeat 50% 60%;
     }
 
-    &__gallery {
-        display: flex;
-        gap: 20px;
-        margin-bottom: var(--space-between-sections);
-
-        &-item {
-            width: calc(100% / 3 - 20px / 3);
-            min-height: 725px;
-            position: relative;
-            z-index: 2;
-            background-size: cover;
-            background-repeat: no-repeat;
-
-            &.m--gallery-item-one {
-                background-image: url("./assets/img/bg/gallery-item-one.svg");
-            }
-
-            &.m--gallery-item-two {
-                background-image: url("./assets/img/bg/gallery-item-two.svg");
-
-            }
-
-            &.m--gallery-item-three {
-                background-image: url("./assets/img/bg/gallery-item-three.svg");
-            }
-        }
+    &-description {
+      font-size: 1.5rem;
     }
 
-    &__history {
-        margin-bottom: var(--space-between-sections);
-
-        &-header {
-            display: flex;
-            align-items: flex-end;
-            margin-bottom: var(--space-between-block);
-        }
-
-        &-title {
-            flex: 1 1 auto;
-            margin: 0;
-        }
-
-        &-date {
-            width: 220px;
-        }
-
-        &-list {
-
-        }
-
-        &-item {
-            display: flex;
-            align-items: center;
-            padding-bottom: 1.5rem;
-            margin-bottom: 1.5rem;
-            position: relative;
-            z-index: 2;
-            border-bottom: 1px solid var(--color-white-opacity);
-        }
+    &-bottom {
+      width: calc(58% - 10px);
+      margin-left: auto;
+      text-align: end;
     }
+  }
+
+  &__description {
+    margin-bottom: var(--space-between-block);
+
+    &-info {
+      display: flex;
+      gap: var(--space-between-block);
+    }
+
+    &-item {
+      flex: 1 1 auto;
+
+      &.m--left {
+        width: calc(70% - 40px);
+      }
+    }
+  }
+
+  &__video {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    margin-bottom: var(--space-between-sections);
+  }
+
+  &__gallery {
+    display: flex;
+    gap: 20px;
+    margin-bottom: var(--space-between-sections);
+
+    &-item {
+      position: relative;
+      z-index: 2;
+
+      width: calc(100% / 3 - 20px / 3);
+      min-height: 725px;
+
+      background-repeat: no-repeat;
+      background-size: cover;
+
+      &.m--gallery-item-one {
+        background-image: url('./assets/img/bg/gallery-item-one.svg');
+      }
+
+      &.m--gallery-item-two {
+        background-image: url('./assets/img/bg/gallery-item-two.svg');
+      }
+
+      &.m--gallery-item-three {
+        background-image: url('./assets/img/bg/gallery-item-three.svg');
+      }
+    }
+  }
+
+  &__history {
+    margin-bottom: var(--space-between-sections);
+
+    &-header {
+      display: flex;
+      align-items: flex-end;
+      margin-bottom: var(--space-between-block);
+    }
+
+    &-title {
+      flex: 1 1 auto;
+      margin: 0;
+    }
+
+    &-date {
+      width: 220px;
+    }
+
+    &-list {
+    }
+
+    &-item {
+      position: relative;
+      z-index: 2;
+
+      display: flex;
+      align-items: center;
+
+      margin-bottom: 1.5rem;
+      padding-bottom: 1.5rem;
+
+      border-bottom: 1px solid var(--color-white-opacity);
+    }
+  }
 }

client/src/assets/css/module/app-breadcrumbs.scss

@@ -1,18 +1,22 @@
-.breadcrumbs{
+.breadcrumbs {
   display: flex;
   margin-top: 80px;
   margin-bottom: var(--space-between-block);
-  &__item{
+
+  &__item {
     display: flex;
     align-items: center;
-    &:last-child:after{
+
+    &::after {
+      content: '/';
+      margin: 0 10px;
+    }
+
+    &:last-child::after {
       display: none;
     }
-    &:after{
-      margin: 0 10px;
-      content: '/';
-    }
-    &-link{
+
+    &-link {
       font-size: 0.875rem;
     }
   }

client/src/assets/css/module/app-footer.scss

@@ -1,81 +1,87 @@
 .footer {
-    padding-bottom: var(--space-between-block);
-    width: 100%;
+  width: 100%;
+  padding-bottom: var(--space-between-block);
 
-    &__top {
-        padding-bottom: 80px;
-        margin-bottom: 80px;
-        border-bottom: 1px solid var(--color-white-opacity);
+  &__top {
+    margin-bottom: 80px;
+    padding-bottom: 80px;
+    border-bottom: 1px solid var(--color-white-opacity);
+  }
+
+  &__question {
+    @mixin responsive-xs {
+      flex-direction: column;
+      align-items: flex-start;
     }
 
-    &__question {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 10px;
-        @mixin responsive-xs {
-            align-items: flex-start;
-            flex-direction: column;
-        }
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: space-between;
 
-        &-button {
-            margin-left: auto;
-        }
+    &-button {
+      margin-left: auto;
+    }
+  }
+
+  &__bottom {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  &__menu {
+    @mixin responsive-m {
+      grid-row-gap: 10px;
+      grid-template-columns: min-content min-content min-content;
+      grid-template-rows: min-content;
+
+      width: 100%;
+      margin-bottom: var(--space-between-block);
     }
 
-    &__bottom {
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
+    @mixin responsive-s {
+      display: flex;
+      flex-wrap: wrap;
     }
 
-    &__menu {
-        display: grid;
-        grid-template-columns: var(--space-between-sections) var(--space-between-sections);
-        grid-template-rows: fit-content fit-content;
-        grid-column-gap: var(--space-between-sections);
-        grid-row-gap: var(--space-between-block);
-        @mixin responsive-m {
-            width: 100%;
-            grid-row-gap: 10px;
-            grid-template-rows: min-content;
-            grid-template-columns: min-content min-content min-content;
-            margin-bottom: var(--space-between-block);
-        }
-        @mixin responsive-s {
-            display: flex;
-            flex-wrap: wrap;
-        }
-        &-item {
-            @mixin responsive-s {
-                width: 100%;
-            }
-        }
+    display: grid;
+    grid-gap: var(--space-between-block) var(--space-between-sections);
+    grid-template-columns: var(--space-between-sections) var(--space-between-sections);
+    grid-template-rows: fit-content fit-content;
 
-        &-link {
-            font-size: 1.2rem;
-        }
+    &-item {
+      @mixin responsive-s {
+        width: 100%;
+      }
     }
 
-    &__social {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--space-between-block);
-        @mixin responsive-m {
-            margin-bottom: var(--space-between-block);
-            grid-row-gap: 10px;
-        }
+    &-link {
+      font-size: 1.2rem;
+    }
+  }
+
+  &__social {
+    @mixin responsive-m {
+      grid-row-gap: 10px;
+      margin-bottom: var(--space-between-block);
     }
 
-    &__connection {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        justify-content: space-between;
-        gap: 1rem;
-        @mixin responsive-m {
-            width: 100%;
-            align-items: flex-start;
-        }
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-between-block);
+  }
+
+  &__connection {
+    @mixin responsive-m {
+      align-items: flex-start;
+      width: 100%;
     }
+
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
 }

client/src/assets/css/module/app-header.scss

@@ -1,186 +1,204 @@
 .header {
-    position: sticky;
-    top: -30px;
-    z-index: 11;
-    width: 100%;
-    backdrop-filter: blur(100px);
+  @mixin responsive-l {
+    top: 0;
+  }
+
+  position: sticky;
+  z-index: 11;
+  top: -30px;
+
+  width: 100%;
+
+  backdrop-filter: blur(100px);
+
+  &__wrapper {
     @mixin responsive-l {
-        top: 0;
+      padding: 10px 20px;
     }
 
-    &__wrapper {
-        padding: 40px 20px 10px;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        @mixin responsive-l {
-            padding: 10px 20px;
-        }
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 40px 20px 10px;
+  }
+
+  &__logo {
+    position: relative;
+    width: 220px;
+    height: 43px;
+    margin-right: auto;
+
+    &.m--menu {
+      @mixin responsive-l {
+        display: block;
+      }
+
+      display: none;
+      margin-bottom: var(--space-between-block);
     }
 
-    &__logo {
-        position: relative;
-        width: 220px;
-        height: 43px;
-        margin-right: auto;
+    &:hover {
+      cursor: url('./assets/img/icon/cursor.svg'), auto;
+    }
+  }
 
-        &.m--menu {
-            display: none;
-            margin-bottom: var(--space-between-block);
-            @mixin responsive-l {
-                display: block;
-            }
+  &__menu {
+    @mixin responsive-xl {
+      gap: 20px;
+    }
+
+    @mixin responsive-l {
+      position: fixed;
+      z-index: 10;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+
+      flex-direction: column;
+      align-items: start;
+
+      width: 320px;
+      min-height: calc(100vh + 30px);
+      padding: 40px 20px 0;
+
+      background: var(--color-black);
+
+      &.m--active {
+        transform: translateX(0);
+      }
+    }
+
+    display: flex;
+    align-items: center;
+    transition: transform 0.3s ease;
+
+    &-item {
+      @mixin responsive-xl {
+        margin: 0 10px;
+
+        &.m--tools {
+          margin: 0 5px 0 10px;
         }
+      }
+
+      @mixin responsive-l {
+      }
+
+      margin: 0 25px;
+
+      &.m--tools {
+        margin: 0 10px 0 25px;
+      }
+    }
+
+    &-link {
+      text-transform: uppercase;
+
+      &.is-subactive {
+        color: transparent;
+        background-image: var(--linear-gradient);
+        background-clip: text;
+      }
+    }
+
+    &-icon {
+      cursor: url('./assets/img/icon/cursor.svg'), auto;
+
+      width: 24px;
+      height: 24px;
+
+      background: none;
+      border: none;
+
+      transition: all 0.3s ease;
+
+      &.m--profile {
+        background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-primary) no-repeat 100%;
 
         &:hover {
-            cursor: url("./assets/img/icon/cursor.svg"), auto;
+          background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-white) no-repeat 100%;
         }
+      }
+
+      &.m--exit {
+        background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-primary) no-repeat 100%;
+
+        &:hover {
+          background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-white) no-repeat 100%;
+        }
+      }
+    }
+  }
+
+  &__btn {
+    @mixin responsive-l {
+      margin-top: auto;
+      margin-bottom: 60px;
+    }
+  }
+
+  &__burger {
+    @mixin responsive-l {
+      display: block;
     }
 
-    &__menu {
-        display: flex;
-        align-items: center;
-        transition: transform .3s ease;
-        @mixin responsive-xl {
-            gap: 20px;
-        }
-        @mixin responsive-l {
-            position: fixed;
-            flex-direction: column;
-            align-items: start;
-            top: 0;
-            left: 0;
-            width: 320px;
-            bottom: 0;
-            min-height: calc(100vh + 30px);
-            transform: translateX(-100%);
-            background: var(--color-black);
-            padding: 40px 20px 0;
-            z-index: 10;
-            &.m--active {
-                transform: translateX(0);
-            }
-        }
+    position: relative;
+    display: none;
+    width: 38px;
+    height: 24px;
 
+    &::after,
+    &::before,
+    span {
+      content: '';
 
-        &-item {
-            margin: 0 25px;
+      position: absolute;
 
-            &.m--tools {
-                margin: 0 10px 0 25px;
-            }
+      width: 100%;
+      height: 4px;
 
-            @mixin responsive-xl {
-                margin: 0 10px;
-                &.m--tools {
-                    margin: 0 5px 0 10px;
-                }
-            }
-            @mixin responsive-l {
+      background: var(--color-white);
+      border-radius: 20px;
 
-            }
-        }
-
-        &-link {
-            text-transform: uppercase;
-
-            &.is-subactive {
-                color: transparent;
-                -webkit-background-clip: text;
-                background-image: var(--linear-gradient);
-            }
-        }
-
-        &-icon {
-            background: none;
-            border: none;
-            width: 24px;
-            height: 24px;
-            cursor: url("./assets/img/icon/cursor.svg"), auto;
-            transition: all .3s ease;
-
-            &.m--profile {
-                background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-primary) no-repeat 100%;
-
-                &:hover {
-                    background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-white) no-repeat 100%;
-                }
-            }
-
-            &.m--exit {
-                background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-primary) no-repeat 100%;
-
-                &:hover {
-                    background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-white) no-repeat 100%;
-                }
-            }
-        }
+      transition: all 0.3s ease;
     }
 
-    &__btn {
-        @mixin responsive-l {
-            margin-top: auto;
-            margin-bottom: 60px;
-        }
+    &::before {
+      top: 0;
     }
 
-    &__burger {
-        width: 38px;
-        height: 24px;
-        position: relative;
+    &::after {
+      bottom: 0;
+    }
+
+    &:hover {
+      cursor: url('./assets/img/icon/cursor.svg'), auto;
+    }
+
+    &.m--menu {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+    }
+
+    &.m--active {
+      &::after {
+        bottom: 10px;
+        transform: rotate(45deg);
+      }
+
+      &::before {
+        top: 10px;
+        transform: rotate(-45deg);
+      }
+      span {
         display: none;
-
-        &:hover {
-            cursor: url("./assets/img/icon/cursor.svg"), auto;
-        }
-
-        &.m--menu {
-            position: absolute;
-            right: 15px;
-            top: 15px;
-        }
-
-        &.m--active {
-            span {
-                display: none;
-            }
-
-            &:after {
-                transform: rotate(45deg);
-                bottom: 10px;
-            }
-
-            &:before {
-                transform: rotate(-45deg);
-                top: 10px;
-            }
-        }
-
-        @mixin responsive-l {
-            display: block;
-        }
-
-        &:after, &:before, span {
-            content: '';
-            position: absolute;
-            width: 100%;
-            height: 4px;
-            background: var(--color-white);
-            border-radius: 20px;
-            transition: all 0.3s ease;
-        }
-
-        &:before {
-            top: 0;
-        }
-
-        span {
-            top: 10px;
-        }
-
-        &:after {
-            bottom: 0;
-        }
+      }
     }
 
+    span {
+      top: 10px;
+    }
+  }
 }

client/src/assets/css/module/app.scss

@@ -1,39 +1,43 @@
-.app{
-    display: flex;
-    flex-direction: column;
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding-bottom: 100px;
+
+  &::after {
+    content: '';
+
+    position: fixed;
+    z-index: 1;
+    inset: 0;
+
+    background: url('./assets/img/bg/bg.svg');
+  }
+
+  &__block {
+    flex: 1 1 auto;
+  }
+
+  &__overlay {
+    position: fixed;
+    z-index: 5;
+    inset: 0;
+
     min-height: 100vh;
-    padding-bottom: 100px;
-    &:after{
-        content: '';
-        position: fixed;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        background: url("./assets/img/bg/bg.svg");
-        z-index: 1;
+
+    background: var(--color-black-cc);
+  }
+
+  &__content {
+    @mixin responsive-l {
+      padding: 0 20px;
     }
-    &__block{
-        flex: 1 1 auto;
-    }
-    &__overlay{
-        position: fixed;
-        z-index: 5;
-        min-height: 100vh;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: var(--color-black-cc);
-    }
-    &__content{
-        max-width: var(--container);
-        margin: 0 auto;
-        padding: 0 50px;
-        @mixin responsive-l {
-            padding: 0 20px;
-        }
-        .m--indentation{
-        }
+
+    max-width: var(--container);
+    margin: 0 auto;
+    padding: 0 50px;
+
+    .m--indentation {
     }
+  }
 }

client/src/assets/css/module/blog.scss

@@ -3,77 +3,94 @@
 
   &__header {
     display: flex;
-    justify-content: space-between;
-    align-items: start;
     flex-wrap: wrap;
-    margin-bottom: var(--space-between-block);
     row-gap: var(--space-between-block);
-    &-title{
+    align-items: start;
+    justify-content: space-between;
+
+    margin-bottom: var(--space-between-block);
+
+    &-title {
       margin-bottom: 0;
     }
-    &-btn{
-      margin-left: auto;
+
+    &-btn {
       @mixin responsive-xxs {
         width: 100%;
       }
+
+      margin-left: auto;
     }
   }
 
   &__content {
-    display: flex;
-    gap: 80px;
     @mixin responsive-m {
       flex-direction: column;
     }
+
+    display: flex;
+    gap: 80px;
   }
 
   &__cover {
-    width: 100%;
-    max-height: 640px;
-    background: url("./assets/img/bg/blog.svg") no-repeat center;
-    position: relative;
-    z-index: 2;
-    background-size: cover;
     @mixin responsive-m {
       height: calc(var(--base-content-size) / 2);
       max-height: none;
     }
+
+    position: relative;
+    z-index: 2;
+
+    width: 100%;
+    max-height: 640px;
+
+    background: url('./assets/img/bg/blog.svg') no-repeat center;
+    background-size: cover;
   }
 
   &__list {
-
   }
 
   &__item {
-    border-bottom: 1px solid var(--color-white-opacity);
-    color: var(--color-white-opacity);
-    padding: 2rem 0;
     position: relative;
     z-index: 2;
-    transition: all .3s ease;
 
-    &:after, &:before {
-      position: absolute;
+    padding: 2rem 0;
+
+    color: var(--color-white-opacity);
+
+    border-bottom: 1px solid var(--color-white-opacity);
+
+    transition: all 0.3s ease;
+
+    &::after,
+    &::before {
       content: '';
-      left: 0;
+
+      position: absolute;
       right: 0;
-      background: var(--color-white-opacity);
-      height: 1px;
+      left: 0;
+
       display: none;
-      transition: background .3s ease;
+
+      height: 1px;
+
+      background: var(--color-white-opacity);
+
+      transition: background 0.3s ease;
     }
 
-    &:before {
+    &::before {
       top: -1px;
     }
 
-    &:after {
-      display: block;
+    &::after {
       bottom: -1px;
+      display: block;
     }
 
     &:first-child {
-      &:before {
+      &::before {
         display: block;
       }
     }
@@ -81,33 +98,34 @@
     &:hover {
       color: var(--color-white);
 
-      &:after, &:before {
+      &::after,
+      &::before {
         display: block;
         background: var(--linear-gradient);
       }
     }
 
     &:hover &-btn {
-      &:before {
+      &::before {
         opacity: 1;
       }
 
-      &:after {
+      &::after {
         background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
       }
     }
 
     &-header {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
       gap: 1rem;
+      align-items: center;
+      justify-content: space-between;
     }
 
     &-title {
-      font-size: 2rem;
       width: calc(100% - 56px - 1rem);
       margin-bottom: 2rem;
+      font-size: 2rem;
     }
   }
 

client/src/assets/css/module/contacts.scss

@@ -1,65 +1,84 @@
-.contacts{
-    &__content{
-        display: flex;
-        gap: var(--space-between-block);
-        margin-bottom: var(--space-between-sections);
-    }
-    &__info{
-        &:before {
-            content: '';
-            display: block;
-            height: 50px;
-            position: relative;
-            z-index: 2;
-            width: 50px;
-            background: url("./assets/img/icon/one-circle.svg") no-repeat center;
-            margin-bottom: 20px;
-        }
-    }
-    &__item{
-        display: flex;
-        flex-direction: column;
+.contacts {
+  &__content {
+    display: flex;
+    gap: var(--space-between-block);
+    margin-bottom: var(--space-between-sections);
+  }
 
-        &:not(&:last-child){
-            margin-bottom: 20px;
-        }
+  &__info {
+    &::before {
+      content: '';
+
+      position: relative;
+      z-index: 2;
+
+      display: block;
+
+      width: 50px;
+      height: 50px;
+      margin-bottom: 20px;
+
+      background: url('./assets/img/icon/one-circle.svg') no-repeat center;
     }
-    &__social{
-        display: flex;
-        gap: 10px;
-        &.m--telegram, &.m--vk{
-            width: 25px;
-            height: 25px;
-        }
-        &.m--telegram{
-            background: url("./assets/img/icon/telegram.svg") no-repeat;
-        }
-        &.m--vk{
-            background: url("./assets/img/icon/vk.svg") no-repeat;
-        }
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+
+    &:not(&:last-child) {
+      margin-bottom: 20px;
     }
-    &__map{
-        position: relative;
-        z-index: 2;
-        flex: 1 1 auto;
-        &-frame{
-            height: 100%;
-        }
+  }
+
+  &__social {
+    display: flex;
+    gap: 10px;
+
+    &.m--telegram,
+    &.m--vk {
+      width: 25px;
+      height: 25px;
     }
-    &__form{
-        position: relative;
-        z-index: 2;
-        max-width: 360px;
-        width: 100%;
-        &:before {
-            content: '';
-            display: block;
-            height: 50px;
-            position: relative;
-            z-index: 2;
-            width: 100px;
-            background: url("./assets/img/icon/two-circle.svg") no-repeat center;
-            margin-bottom: 20px;
-        }
+
+    &.m--telegram {
+      background: url('./assets/img/icon/telegram.svg') no-repeat;
     }
+
+    &.m--vk {
+      background: url('./assets/img/icon/vk.svg') no-repeat;
+    }
+  }
+
+  &__map {
+    position: relative;
+    z-index: 2;
+    flex: 1 1 auto;
+
+    &-frame {
+      height: 100%;
+    }
+  }
+
+  &__form {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    max-width: 360px;
+
+    &::before {
+      content: '';
+
+      position: relative;
+      z-index: 2;
+
+      display: block;
+
+      width: 100px;
+      height: 50px;
+      margin-bottom: 20px;
+
+      background: url('./assets/img/icon/two-circle.svg') no-repeat center;
+    }
+  }
 }

client/src/assets/css/module/fiald.scss

@@ -1,16 +1,18 @@
 .field {
   position: relative;
+
   display: flex;
   flex-direction: column;
-  padding-bottom: 28px;
+
   margin-bottom: 8px;
+  padding-bottom: 28px;
   padding-bottom: 0;
+
   &&.m--100 {
     width: 100%;
     margin-right: 0;
   }
 
-
   &__inner {
     display: flex;
     flex-direction: column;
@@ -18,7 +20,6 @@
     height: 100%;
   }
 
-
   &__label {
     display: none;
   }
@@ -26,92 +27,121 @@
   .input {
     @mixin input;
   }
-  &__input{
+
+  &__input {
     &.m--search {
       position: relative;
-      &:before{
+
+      &::before {
         content: '';
-        width: 24px;
-        height: 24px;
+
+        position: absolute;
         top: 16px;
         left: 16px;
-        position: absolute;
+
+        width: 24px;
+        height: 24px;
+
         background: svg-load('./assets/img/icon/search-icon.svg') no-repeat 100%;
       }
-      .input{
+
+      .input {
         padding: 1rem 1.2rem 1rem 3rem;
         border: 1px solid var(--color-primary);
       }
     }
-    &.m--hidden{
+
+    &.m--hidden {
       display: none;
     }
   }
+
   &__checkbox {
-    &-label{
-      padding-left: 50px;
+    &-label {
       display: flex;
+      padding-left: 50px;
       font-size: 1rem;
       color: var(--color-white-opacity);
+
       &:hover {
-        cursor: url("./assets/img/icon/cursor.svg"), auto;
+        cursor: url('./assets/img/icon/cursor.svg'), auto;
       }
-      &:before{
-        content: "";
+
+      &::before {
         cursor: pointer;
+        content: '';
+        user-select: none;
+        user-select: none;
+        user-select: none;
+        user-select: none;
+        user-select: none;
+
         position: absolute;
         left: 0;
-        text-indent: -9999px;
+
+        display: block;
+
         width: 40px;
         height: 24px;
+
+        text-indent: -9999px;
+
         background: var(--color-white-opacity);
-        display: block;
         border-radius: 100px;
-        transition: all .3s ease;
+
+        transition: all 0.3s ease;
+
         -webkit-tap-highlight-color: transparent;
         -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
       }
-      &:after{
-        content: "";
+
+      &::after {
+        content: '';
+
         position: absolute;
         top: 3px;
         left: 3px;
+
         width: 18px;
         height: 18px;
+
         background: #fff;
         border-radius: 90px;
-        transition: all .3s ease;
+
+        transition: all 0.3s ease;
       }
     }
-    &-input{
+
+    &-input {
       display: none;
     }
-    &-input:checked + &-label{
-      &:before{
+
+    &-input:checked + &-label {
+      &::before {
         background: var(--color-primary);
       }
-      &:after{
+
+      &::after {
         left: 37px;
         transform: translateX(-100%);
       }
     }
   }
-  textarea{
-    border-radius: 30px !important;
+
+  textarea {
     resize: none;
-    min-height: 80px;
     scrollbar-color: var(--color-black) var(--color-white-opacity);
-    scrollbar-gutter: stable;
     scrollbar-width: thin;
+    scrollbar-gutter: stable;
     scroll-margin-right: 20px;
+
+    min-height: 80px;
+
+    border-radius: 30px !important;
   }
-  &__comment{
-    font-size: 1rem;
+
+  &__comment {
     margin-bottom: 1rem;
+    font-size: 1rem;
   }
 }

client/src/assets/css/module/home.scss

@@ -1,276 +1,335 @@
 .home {
-    overflow-x: hidden;
-    &__meaning {
-        min-height: var(--base-content-size);
-        display: flex;
+  overflow-x: hidden;
+
+  &__meaning {
+    position: relative;
+    z-index: 2;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    min-height: var(--base-content-size);
+
+    &::after,
+    &::before {
+      content: '';
+
+      position: absolute;
+      z-index: 1;
+
+      background: url('./assets/img/icon/ellipseGradient.svg') no-repeat 50% 60%;
+      background-size: 100%;
+    }
+
+    &::after {
+      right: 50vh;
+      bottom: 10vh;
+
+      width: 300px;
+      height: 300px;
+
+      animation: moving-circle-2 9s infinite linear;
+
+      @keyframes moving-circle-2 {
+        0% {
+          transform: rotate(360deg) translateX(100%) translateY(100%) scale(1.5);
+        }
+
+        100% {
+          transform: rotate(0deg) translateX(100%) translateY(100%) scale(1.5);
+        }
+      }
+    }
+
+    &::before {
+      bottom: 10vh;
+      left: 10vh;
+
+      width: 250px;
+      height: 250px;
+
+      animation: moving-circle-3 8s infinite linear;
+
+      @keyframes moving-circle-3 {
+        0% {
+          transform: rotate(360deg) translateX(-100%) translateY(150%) scale(1.5);
+        }
+
+        100% {
+          transform: rotate(0deg) translateX(-100%) translateY(200%) scale(1.5);
+        }
+      }
+    }
+  }
+
+  &__subtitle {
+    @mixin responsive-l {
+      padding: 0 20px;
+    }
+
+    max-width: 600px;
+    margin: 0 auto;
+    text-align: center;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      z-index: -1;
+      top: 0;
+
+      width: 400px;
+      height: 400px;
+
+      background: url('./assets/img/icon/ellipseGradient.svg') no-repeat 50% 60%;
+      background-size: 100%;
+
+      animation: moving-circle 10s infinite linear;
+
+      @keyframes moving-circle {
+        0% {
+          transform: rotate(0) translateX(-400px) translateY(-100px) scale(1.5);
+        }
+
+        50% {
+          transform: rotate(180deg) translateX(-200px) translateY(-200px) scale(1);
+        }
+
+        100% {
+          transform: rotate(360deg) translateX(-400px) translateY(-100px) scale(1.5);
+        }
+      }
+    }
+
+    span {
+      font-weight: 700;
+    }
+  }
+
+  &__title {
+    @mixin h1;
+
+    padding: 0 20px;
+
+    text-align: center;
+
+    background-image: linear-gradient(
+      91.17deg,
+      var(--color-white) -4.01%,
+      var(--color-white) 36.14%,
+      var(--color-white) 77.44%,
+      var(--color-white) 106.11%
+    );
+    background-clip: text;
+    background-clip: text;
+
+    span {
+      color: var(--color-black);
+      background-clip: text;
+
+      -webkit-text-stroke: 3px transparent;
+    }
+  }
+
+  &__banner {
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    scale: 0.8;
+
+    width: 1920px;
+    max-height: var(--base-content-size);
+    margin-left: calc((100vw + -1 * 1920px) / 2);
+
+    background: url('./assets/img/bg/home-banner.png') no-repeat center;
+    background-size: contain;
+  }
+
+  &__description {
+    @mixin responsive-m {
+      gap: var(--space-between-block);
+    }
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    margin-top: calc(var(--space-between-sections) / 2);
+    margin-bottom: var(--space-between-sections);
+  }
+
+  &__info {
+    @mixin responsive-m {
+      width: 100%;
+    }
+
+    width: 60%;
+
+    &--item {
+      @mixin responsive-s {
         flex-direction: column;
-        align-items: center;
-        justify-content: center;
+        gap: 10px;
+      }
+
+      display: flex;
+      justify-content: space-between;
+
+      color: transparent;
+
+      background-image: var(--linear-gradient);
+      background-clip: text;
+
+      &.m--circle {
+        align-items: end;
+
+        &::before {
+          @mixin responsive-s {
+            width: 80px;
+            height: 80px;
+            margin-right: auto;
+            background-size: contain;
+          }
+
+          content: '';
+
+          display: block;
+
+          width: 130px;
+          height: 130px;
+
+          background: url('./assets/img/icon/circleGradient.svg') no-repeat center;
+        }
+      }
+
+      span {
+        @mixin responsive-m {
+          width: 75%;
+        }
+
+        @mixin responsive-s {
+          width: 100%;
+        }
+
+        width: 57%;
+        font-weight: 400;
+        color: var(--color-white);
+      }
+    }
+  }
+
+  &__content {
+    @mixin responsive-m {
+      display: flex;
+      flex-wrap: wrap;
+      gap: calc(var(--space-between-block) / 2);
+      align-items: flex-start;
+
+      max-width: none;
+    }
+
+    max-width: 360px;
+
+    &--item {
+      @mixin responsive-m {
+        width: calc((100% - var(--space-between-block)) / 3);
+      }
+
+      @mixin responsive-s {
+        width: 100%;
+      }
+
+      position: relative;
+      z-index: 2;
+
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      font-size: 16px;
+
+      &::before {
+        content: '';
+
         position: relative;
         z-index: 2;
-        &:after, &:before {
-            content: '';
-            position: absolute;
-            background: url("./assets/img/icon/ellipseGradient.svg") no-repeat 50% 60%;
-            background-size: 100%;
-            z-index: 1;
-        }
 
-        &:after {
-            right: 50vh;
-            bottom: 10vh;
-            width: 300px;
-            height: 300px;
-            animation: moving-circle-2 9s infinite linear;
-            @keyframes moving-circle-2 {
-                0%{
-                    -webkit-transform: rotate(360deg) translatex(100%) translatey(100%) scale(1.5);
-                }
-                100%{
-                    -webkit-transform: rotate(0deg) translatex(100%) translatey(100%) scale(1.5);
-                }
-            }
-        }
+        height: 50px;
+        margin-bottom: 10px;
+      }
 
-        &:before {
-            width: 250px;
-            height: 250px;
-            left: 10vh;
-            bottom: 10vh;
-            animation: moving-circle-3 8s infinite linear;
-            @keyframes moving-circle-3 {
-                0%{
-                    -webkit-transform: rotate(360deg) translatex(-100%) translatey(150%) scale(1.5);
-                }
-                100%{
-                    -webkit-transform:rotate(0deg) translatex(-100%) translatey(200%) scale(1.5);
-                }
-            }
-        }
-    }
+      &:not(&:last-child) {
+        margin-bottom: var(--space-between-block);
+      }
 
-    &__subtitle {
-        text-align: center;
-        max-width: 600px;
-        margin: 0 auto;
+      &.m--one-circle::before {
+        width: 50px;
+        background: url('./assets/img/icon/one-circle.svg') no-repeat center;
+      }
 
-        @mixin responsive-l {
-            padding: 0 20px;
-        }
-        span {
-            font-weight: 700;
-        }
-        &:after{
-            content: '';
-            position: absolute;
-            top: 0;
-            width: 400px;
-            height: 400px;
-            background: url("./assets/img/icon/ellipseGradient.svg") no-repeat 50% 60%;
-            background-size: 100%;
-            animation: moving-circle 10s infinite linear;
-            z-index: -1;
-            @keyframes moving-circle {
-                0%{
-                    -webkit-transform: rotate(0) translatex(-400px) translatey(-100px) scale(1.5);
-                }
-                50%{
-                    -webkit-transform: rotate(180deg) translatex(-200px) translatey(-200px) scale(1);
-                }
-                100%{
-                    -webkit-transform: rotate(360deg) translatex(-400px) translatey(-100px) scale(1.5);
-                }
-            }
-        }
+      &.m--two-circle::before {
+        width: 100px;
+        background: url('./assets/img/icon/two-circle.svg') no-repeat center;
+      }
 
-    }
+      &.m--three-circle::before {
+        width: 150px;
+        background: url('./assets/img/icon/three-circle.svg') no-repeat center;
+      }
 
-    &__title {
-        @mixin h1;
-        -webkit-background-clip: text;
-        text-align: center;
+      span {
+        color: transparent;
+        background-image: var(--linear-gradient);
         background-clip: text;
-        background-image: linear-gradient(91.17deg, var(--color-white) -4.01%, var(--color-white) 36.14%, var(--color-white) 77.44%, var(--color-white) 106.11%);
-        padding: 0 20px;
-        span {
-            color: var(--color-black);
-            -webkit-background-clip: text;
-            -webkit-text-stroke: 3px transparent;
-        }
+      }
     }
-    &__banner {
-        position: absolute;
-        z-index: 0;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: url("./assets/img/bg/home-banner.png") no-repeat center;
-        width: 1920px;
-        max-height: var(--base-content-size);
-        background-size: contain;
-        scale: 0.8;
-        margin-left: calc((100vw + -1 * 1920px) / 2);
+  }
+
+  &__social {
+    position: relative;
+    z-index: 2;
+
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+
+    height: var(--base-content-size);
+    max-height: 900px;
+    margin-bottom: var(--space-between-sections);
+    padding: 3rem 2.5rem;
+
+    background: url('./assets/img/bg/bg-social.svg') no-repeat center;
+    background-size: cover;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(179.74deg, rgb(0 0 0 / 0%) 0.23%, rgb(0 0 0 / 66%) 99.77%);
     }
 
-    &__description {
-        margin-top: calc(var(--space-between-sections) / 2);
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
-            margin-bottom: var(--space-between-sections);
-        @mixin responsive-m {
-            gap: var(--space-between-block);
-        }
+    &--tools {
+      display: flex;
+      flex-wrap: wrap;
+      row-gap: var(--space-between-block);
+      align-items: flex-end;
+      justify-content: space-between;
     }
 
-    &__info {
-        width: 60%;
-        @mixin responsive-m {
-            width: 100%;
-        }
-        &--item {
-            display: flex;
-            justify-content: space-between;
-            color: transparent;
-            background-clip: text;
-            background-image: var(--linear-gradient);
-            @mixin responsive-s {
-                flex-direction: column;
-                gap: 10px;
-            }
-            &.m--circle {
-                align-items: end;
+    &--description {
+      @mixin responsive-xs {
+        max-width: 100%;
+      }
 
-                &:before {
-                    content: '';
-                    display: block;
-                    width: 130px;
-                    height: 130px;
-                    background: url("./assets/img/icon/circleGradient.svg") no-repeat center;
-                    @mixin responsive-s {
-                        margin-right: auto;
-                        width: 80px;
-                        height: 80px;
-                        background-size: contain;
-                    }
-                }
-            }
-
-            span {
-                font-weight: 400;
-                color: var(--color-white);
-                width: 57%;
-                @mixin responsive-m {
-                    width: 75%;
-                }
-                @mixin responsive-s {
-                    width: 100%;
-                }
-            }
-        }
+      max-width: 45%;
     }
 
-    &__content {
-        max-width: 360px;
-        @mixin responsive-m {
-            display: flex;
-            align-items: flex-start;
-            flex-wrap: wrap;
-            gap: calc(var(--space-between-block) / 2);
-            max-width: none;
-        }
-        &--item {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            font-size: 16px;
-            position: relative;
-            z-index: 2;
-            &:not(&:last-child){
-                margin-bottom: var(--space-between-block);
-            }
-            @mixin responsive-m {
-               width: calc((100% - var(--space-between-block)) / 3);
-            }
-            @mixin responsive-s {
-                width: 100%;
-            }
-            &:before {
-                content: '';
-                height: 50px;
-                margin-bottom: 10px;
-                position: relative;
-                z-index: 2;
-            }
-
-            &.m--one-circle:before {
-                width: 50px;
-                background: url("./assets/img/icon/one-circle.svg") no-repeat center;
-            }
-
-            &.m--two-circle:before {
-                width: 100px;
-                background: url("./assets/img/icon/two-circle.svg") no-repeat center;
-            }
-
-            &.m--three-circle:before {
-                width: 150px;
-                background: url("./assets/img/icon/three-circle.svg") no-repeat center;
-            }
-
-            span {
-                color: transparent;
-                background-clip: text;
-                background-image: var(--linear-gradient);
-            }
-        }
+    &--btns {
+      display: grid;
+      grid-gap: 8px;
+      grid-template-columns: min-content min-content;
+      grid-template-rows: min-content min-content;
     }
-
-    &__social {
-        height: var(--base-content-size);
-        max-height: 900px;
-        background: url("./assets/img/bg/bg-social.svg") no-repeat center;
-        padding: 3rem 2.5rem;
-        display: flex;
-        align-items: flex-end;
-        justify-content: center;
-        position: relative;
-        z-index: 2;
-        margin-bottom: var(--space-between-sections);
-        background-size: cover;
-        &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: linear-gradient(179.74deg, rgba(0, 0, 0, 0) 0.23%, rgba(0, 0, 0, 0.66) 99.77%);
-        }
-
-        &--tools {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-end;
-            flex-wrap: wrap;
-            row-gap: var(--space-between-block);
-        }
-
-        &--description {
-            max-width: 45%;
-            @mixin responsive-xs {
-                max-width: 100%;
-            }
-        }
-
-        &--btns {
-            display: grid;
-            grid-template-columns: min-content min-content;
-            grid-template-rows: min-content min-content;
-            grid-column-gap: 8px;
-            grid-row-gap: 8px;
-        }
-    }
-
+  }
 }

client/src/assets/css/module/loader.scss

@@ -1,63 +1,83 @@
 .loader {
-    display: flex;
-    align-items: center;
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: transparent;
-    background-clip: text;
-    background-image: var(--linear-gradient);
-    margin: 0.75rem 0;
-    gap: 1rem;
+  position: relative;
+  z-index: 2;
+
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+
+  margin: 0.75rem 0;
+
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: transparent;
+
+  background-image: var(--linear-gradient);
+  background-clip: text;
+
+  .spinner {
     position: relative;
-    z-index: 2;
-    .spinner {
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        position: relative;
-        animation: rotate 1s linear infinite;
 
-        &:before, &:after {
-            content: "";
-            box-sizing: border-box;
-            position: absolute;
-            inset: 0px;
-            border-radius: 50%;
-            border: 5px solid var(--color-primary);
-            animation: prixClipFix 5s linear infinite;
-        }
+    width: 48px;
+    height: 48px;
 
-        &:after {
-            border-color: var(--color-white);
-            animation: prixClipFix 5s linear infinite, rotate 0.5s linear infinite reverse;
-            inset: 6px;
-        }
+    border-radius: 50%;
+
+    animation: rotate 1s linear infinite;
+
+    &::before,
+    &::after {
+      content: '';
+
+      position: absolute;
+      inset: 0;
+
+      box-sizing: border-box;
+
+      border: 5px solid var(--color-primary);
+      border-radius: 50%;
+
+      animation: prixClipFix 5s linear infinite;
     }
+
+    &::after {
+      inset: 6px;
+      border-color: var(--color-white);
+      animation:
+        prixClipFix 5s linear infinite,
+        rotate 0.5s linear infinite reverse;
+    }
+  }
 }
 
 @keyframes rotate {
-    0% {
-        transform: rotate(0deg)
-    }
-    100% {
-        transform: rotate(360deg)
-    }
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes prixClipFix {
-    0% {
-        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
-    }
-    25% {
-        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
-    }
-    50% {
-        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
-    }
-    75% {
-        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
-    }
-    100% {
-        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
-    }
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
 }

client/src/assets/css/module/modal.scss

@@ -1,38 +1,45 @@
 .modal {
   &__container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     .vfm__overlay {
       background: var(--bg-wrapper-modal);
     }
 
-    &.m--right{
-      justify-content: flex-end;
+    &.m--right {
       align-items: stretch;
+      justify-content: flex-end;
     }
   }
-  &__container.m--right &__block{
-    margin: 0;
+
+  &__container.m--right &__block {
     max-height: none;
+    margin: 0;
   }
+
   &__block {
     position: relative;
+
     display: flex;
     flex-direction: column;
-    margin: 0 1.5rem;
-    padding: 2.5rem;
-    background: var(--color-black);
+
+    min-width: 360px;
+    max-width: 90vw;
     min-height: 96px;
     max-height: 90vh;
-    max-width: 90vw;
-    min-width: 360px;
-    &.m--half{
-      max-width: 950px;
+    margin: 0 1.5rem;
+    padding: 2.5rem;
+
+    background: var(--color-black);
+
+    &.m--half {
       width: 50%;
+      max-width: 950px;
     }
+
     &.m--long {
       width: 100%;
       max-width: 950px;
@@ -48,41 +55,56 @@
       max-width: 420px;
     }
   }
-  &__content{
+
+  &__content {
     min-width: 360px;
   }
-  &__title{
-    font-size: 2rem;
+
+  &__title {
     margin-bottom: 2.5rem;
+    font-size: 2rem;
   }
-  &__close{
-    width: 30px;
-    height: 30px;
+
+  &__close {
     position: absolute;
     top: 5px;
     right: 5px;
-    background: transparent;
-    border: none;
+
+    width: 30px;
     min-width: 0;
+    height: 30px;
     min-height: 0;
     padding: 0;
-    &:after,&:before{
+
+    background: transparent;
+    border: none;
+
+    &::after,
+    &::before {
       content: '';
+
       position: absolute;
-      background: var(--color-white);
-      left: 5px;
       right: 5px;
+      left: 5px;
+
       height: 2px;
+
+      background: var(--color-white);
       border-radius: 20px;
-      transition: all .3s ease;
+
+      transition: all 0.3s ease;
     }
-    &:after{
+
+    &::after {
       transform: rotate(45deg);
     }
-    &:before{
+
+    &::before {
       transform: rotate(-45deg);
     }
-    &:hover:after, &:hover:before{
+
+    &:hover::after,
+    &:hover::before {
       background: var(--color-black);
     }
   }

client/src/assets/css/module/pagination.scss

@@ -3,52 +3,58 @@
   justify-content: center;
   margin-top: var(--space-between-block);
   margin-bottom: var(--space-between-sections);
+
   &__list {
     display: flex;
   }
 
   &__item {
     margin: 0 5px;
-
   }
 
   &__link {
     padding: 0 5px;
-    &.m--current{
+
+    &.m--current {
       color: transparent;
-      -webkit-background-clip: text;
       background-image: var(--linear-gradient);
+      background-clip: text;
     }
   }
 
   &__btn {
-    min-height: 25px;
-    min-width: 25px;
     position: relative;
+    min-width: 25px;
+    min-height: 25px;
     border-radius: 50%;
-    &:after {
+
+    &::after {
       content: '';
+
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset: 0;
+
       margin: 5px;
     }
-    &:hover{
+
+    &:hover {
       background: var(--color-white);
     }
-    &.m--prev:after {
-      background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
+
+    &.m--prev::after {
       transform: rotate(180deg);
+      background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
     }
-    &.m--prev:hover:after{
+
+    &.m--prev:hover::after {
       background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
     }
-    &.m--next:after {
+
+    &.m--next::after {
       background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
     }
-    &.m--next:hover:after{
+
+    &.m--next:hover::after {
       background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
     }
   }

client/src/assets/css/module/player.scss

@@ -1,13 +1,17 @@
 .player {
   position: fixed;
+  z-index: 3;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
-  backdrop-filter: blur(100px);
-  z-index: 3;
-  padding: 10px var(--space-between-block);
+
   display: flex;
   gap: var(--space-between-block);
+
+  padding: 10px var(--space-between-block);
+
+  backdrop-filter: blur(100px);
+
   //display: none;
   &__cover {
     width: 80px;
@@ -20,20 +24,24 @@
   }
 
   &__top {
-    margin-bottom: 10px;
     display: flex;
     align-items: center;
+    margin-bottom: 10px;
   }
 
   &__executor {
-    font-size: 1rem;
     display: flex;
     flex-direction: column;
-    margin-left: 20px;
     gap: 0.25rem;
+
+    margin-left: 20px;
+
+    font-size: 1rem;
+
     span {
       color: var(--color-white-opacity);
     }
+
     &.m--skeleton {
       min-width: 135px;
     }
@@ -42,179 +50,204 @@
   &__favorites {
     width: 27px;
     height: 27px;
-    background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF)
-      no-repeat 100%;
     margin-left: var(--space-between-block);
+    background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF) no-repeat 100%;
+
     &.m--skeleton {
       background: none;
     }
+
     &:hover {
       cursor: url('./assets/img/icon/cursor.svg'), auto;
     }
+
     &.m--active {
-      background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF)
-        no-repeat 100%;
+      background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) no-repeat 100%;
     }
   }
 
   &__bottom {
     display: flex;
-    align-items: center;
     gap: 20px;
+    align-items: center;
   }
 
   &__time {
-    font-size: 1rem;
-    color: var(--color-white-opacity);
-    font-weight: 500;
     position: relative;
+
     min-width: 105px;
+
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--color-white-opacity);
+
     &.m--ether {
       padding-right: 10px;
 
-      &:after {
+      &::after {
         content: '';
-        animation: blink 1s infinite;
+
         position: absolute;
-        border-radius: 50%;
-        left: 40px;
         top: 0;
+        left: 40px;
+
         width: 5px;
         height: 5px;
+
         background: var(--color-emmit);
+        border-radius: 50%;
+
+        animation: blink 1s infinite;
       }
     }
   }
+
   &__tools {
     display: flex;
     gap: var(--space-between-block);
     align-items: center;
     margin-left: auto;
+
     &.m--skeleton {
       min-width: 200px;
     }
   }
+
   &__volume {
-    display: flex;
-    align-items: center;
     position: relative;
+    display: flex;
     gap: 10px;
+    align-items: center;
+
     &-on {
       width: 24px;
       height: 24px;
-      background: svg-load('./assets/img/icon/volume.svg', fill=#FFFF) no-repeat
-        100%;
+      background: svg-load('./assets/img/icon/volume.svg', fill=#FFFF) no-repeat 100%;
+
       &:hover {
         cursor: url('./assets/img/icon/cursor.svg'), auto;
       }
     }
+
     &-off {
       width: 24px;
       height: 24px;
-      background: svg-load('./assets/img/icon/volume-off.svg', fill=#FFFF)
-        no-repeat 100%;
+      background: svg-load('./assets/img/icon/volume-off.svg', fill=#FFFF) no-repeat 100%;
+
       &:hover {
         cursor: url('./assets/img/icon/cursor.svg'), auto;
       }
     }
+
     input {
       position: relative;
-      appearance: none;
+
+      overflow: hidden;
+      display: block;
+
       width: calc(100% - 34px);
       height: 5px;
-      border-radius: 10px;
-      display: block;
-      background: var(--color-white-opacity);
-      overflow: hidden;
       margin: 0;
 
-      &:hover {
-        cursor: url('./assets/img/icon/cursor.svg'), auto;
-      }
+      appearance: none;
+      background: var(--color-white-opacity);
+      border-radius: 10px;
 
       &::-webkit-slider-thumb,
       &::-webkit-slider-thumb {
-        -webkit-appearance: none;
         width: 1px;
         height: 5px;
+        appearance: none;
         box-shadow: -100vmax 0 0 100vmax var(--color-white);
       }
+
+      &:hover {
+        cursor: url('./assets/img/icon/cursor.svg'), auto;
+      }
     }
   }
+
   &__progress {
-    flex: 1 1 auto;
     position: relative;
+    flex: 1 1 auto;
 
     input {
       position: relative;
-      appearance: none;
+
+      overflow: hidden;
+      display: block;
+
       width: 100%;
       height: 5px;
-      border-radius: 10px;
-      display: block;
-      background: var(--color-white-opacity);
-      margin-bottom: 20px;
-      overflow: hidden;
       margin: 0;
+      margin-bottom: 20px;
 
-      &:hover {
-        cursor: url('./assets/img/icon/cursor.svg'), auto;
-      }
+      appearance: none;
+      background: var(--color-white-opacity);
+      border-radius: 10px;
 
       &::-webkit-slider-thumb,
       &::-webkit-slider-thumb {
-        -webkit-appearance: none;
         width: 1px;
         height: 5px;
+        appearance: none;
         box-shadow: -100vmax 0 0 100vmax var(--color-primary);
       }
+
+      &:hover {
+        cursor: url('./assets/img/icon/cursor.svg'), auto;
+      }
     }
   }
 
   &__btn {
-    min-height: 0;
-    min-width: 0;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    border: none;
-    background: var(--color-primary);
     position: relative;
 
+    width: 50px;
+    min-width: 0;
+    height: 50px;
+    min-height: 0;
+
+    background: var(--color-primary);
+    border: none;
+    border-radius: 50%;
+
     &.m--play {
-      &:after {
+      &::after {
         content: '';
+
         position: absolute;
+
         width: 18px;
         height: 18px;
         margin: auto;
-        background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat
-          100%;
+
+        background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat 100%;
         background-size: contain;
       }
 
-      &:hover:after {
-        background: svg-load('./assets/img/icon/play.svg', fill=$color-primary)
-          no-repeat 100%;
+      &:hover::after {
+        background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) no-repeat 100%;
         background-size: contain;
       }
     }
 
     &.m--pause {
-      &:after {
+      &::after {
         content: '';
+
         position: absolute;
+
         width: 18px;
         height: 18px;
         margin: auto;
-        background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF)
-          no-repeat 100%;
+
+        background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) no-repeat 100%;
         background-size: contain;
       }
 
-      &:hover:after {
-        background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary)
-          no-repeat 100%;
+      &:hover::after {
+        background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) no-repeat 100%;
         background-size: contain;
       }
     }
@@ -229,6 +262,7 @@
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0;
   }

client/src/assets/css/module/playlist.scss

@@ -1,136 +1,176 @@
 .playlist {
+  position: relative;
+  z-index: 2;
+
+  &__header {
+    display: flex;
+    gap: calc(var(--space-between-block) / 2);
+    align-items: center;
+    margin-bottom: var(--space-between-block);
+  }
+
+  &__title {
+    margin: 0;
+    padding: 0;
+    font-size: 32px;
+
+    &.m--margin {
+      margin-bottom: 1rem;
+    }
+  }
+
+  &__back {
+    cursor: url('./assets/img/icon/cursor.svg'), auto;
+
+    width: 30px;
+    height: 30px;
+
+    background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-white) no-repeat 100%;
+
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-primary) no-repeat 100%;
+    }
+  }
+
+  &__edit {
+    cursor: url('./assets/img/icon/cursor.svg'), auto;
+
+    width: 30px;
+    height: 30px;
+
+    background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-white) no-repeat 100%;
+
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-primary) no-repeat 100%;
+    }
+  }
+
+  &-roster {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--space-between-block) / 2);
+    width: 100%;
+  }
+
+  &-edit {
     position: relative;
     z-index: 2;
-    &__header{
-        display: flex;
-        align-items: center;
-        gap: calc(var(--space-between-block) / 2);
-        margin-bottom: var(--space-between-block);
-    }
-    &__title{
-        font-size: 32px;
-        margin: 0;
-        padding: 0;
-        &.m--margin{
-            margin-bottom: 1rem;
-        }
-    }
-    &__back{
-        width: 30px;
-        height: 30px;
-        background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-white) no-repeat 100%;
-        cursor: url("./assets/img/icon/cursor.svg"), auto;
-        transition: all .3s ease;
-        &:hover{
-            background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-primary) no-repeat 100%;
-        }
-    }
-    &__edit{
-        width: 30px;
-        height: 30px;
-        background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-white) no-repeat 100%;
-        cursor: url("./assets/img/icon/cursor.svg"), auto;
-        transition: all .3s ease;
-        &:hover{
-            background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-primary) no-repeat 100%;
-        }
-    }
-    &-roster {
-        display: flex;
-        flex-wrap: wrap;
-        gap: calc(var(--space-between-block) / 2);
-        width: 100%;
-    }
-    &-edit{
-        position: relative;
-        z-index: 2;
-        &__search{
-            margin-bottom: var(--space-between-block);
-        }
-        &__search{
-            min-width: 320px;
-            width: 40%;
-        }
-        &__list{
-            display: flex;
-            gap: var(--space-between-block);
-        }
-        &__item{
-            width: calc(50% - var(--space-between-block) / 2) ;
-        }
-        &__title{
-            color: transparent;
-            font-size: 2rem;
-            background-clip: text;
-            background-image: var(--linear-gradient);
-            margin-bottom: 1rem;
-        }
-        &__upload{
-            cursor: url("./assets/img/icon/cursor.svg"), auto;
-            border: none;
-            padding: 0;
-            background-clip: text;
-            color: transparent;
-            background-image: var(--linear-gradient-highlight);
-            margin: 0 0 var(--space-between-block);
-            transition: all .3s ease;
-            display: flex;
-            gap: 10px;
-            &:before{
-                content: '';
-                width: 20px;
-                height: 20px;
-                background: svg-load('./assets/img/icon/paper-clip.svg', fill=$color-primary) no-repeat 100%;
-            }
-            &:hover{
-                color: var(--color-white);
-            }
-        }
+
+    &__search {
+      margin-bottom: var(--space-between-block);
     }
 
-    &-item {
-        z-index: 2;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        min-width: 220px;
-        cursor: url("./assets/img/icon/cursor.svg"), auto;
-
-        &__cover {
-            background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white) no-repeat 100%;
-            border-radius: 10px;
-            margin-bottom: 10px;
-            transition: all .3s ease;
-            min-height: 220px;
-            &:hover{
-                background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white-opacity) no-repeat 100%;
-                border-radius: 10px;
-                margin-bottom: 10px;
-            }
-        }
-
-        &.m--create &__cover {
-            position: relative;
-            background: var(--bg-opacity);
-            &:after {
-                content: '';
-                width: 63px;
-                height: 63px;
-                background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white-opacity) no-repeat 100%;
-                transition: all .3s ease;
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                margin: auto;
-            }
-            &:hover{
-                background: var(--color-primary);
-                &:after{
-                    background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white) no-repeat 100%;
-                }
-            }
-        }
+    &__search {
+      width: 40%;
+      min-width: 320px;
     }
+
+    &__list {
+      display: flex;
+      gap: var(--space-between-block);
+    }
+
+    &__item {
+      width: calc(50% - var(--space-between-block) / 2);
+    }
+
+    &__title {
+      margin-bottom: 1rem;
+
+      font-size: 2rem;
+      color: transparent;
+
+      background-image: var(--linear-gradient);
+      background-clip: text;
+    }
+
+    &__upload {
+      cursor: url('./assets/img/icon/cursor.svg'), auto;
+
+      display: flex;
+      gap: 10px;
+
+      margin: 0 0 var(--space-between-block);
+      padding: 0;
+
+      color: transparent;
+
+      background-image: var(--linear-gradient-highlight);
+      background-clip: text;
+      border: none;
+
+      transition: all 0.3s ease;
+
+      &::before {
+        content: '';
+        width: 20px;
+        height: 20px;
+        background: svg-load('./assets/img/icon/paper-clip.svg', fill=$color-primary) no-repeat 100%;
+      }
+
+      &:hover {
+        color: var(--color-white);
+      }
+    }
+  }
+
+  &-item {
+    cursor: url('./assets/img/icon/cursor.svg'), auto;
+
+    position: relative;
+    z-index: 2;
+
+    display: flex;
+    flex-direction: column;
+
+    min-width: 220px;
+
+    &__cover {
+      min-height: 220px;
+      margin-bottom: 10px;
+
+      background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white) no-repeat 100%;
+      border-radius: 10px;
+
+      transition: all 0.3s ease;
+
+      &:hover {
+        margin-bottom: 10px;
+        background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white-opacity) no-repeat 100%;
+        border-radius: 10px;
+      }
+    }
+
+    &.m--create &__cover {
+      position: relative;
+      background: var(--bg-opacity);
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        inset: 0;
+
+        width: 63px;
+        height: 63px;
+        margin: auto;
+
+        background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white-opacity) no-repeat 100%;
+
+        transition: all 0.3s ease;
+      }
+
+      &:hover {
+        background: var(--color-primary);
+
+        &::after {
+          background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white) no-repeat 100%;
+        }
+      }
+    }
+  }
 }

client/src/assets/css/module/playlists.scss

@@ -1,38 +1,44 @@
 .playlists {
   &__content {
-
   }
 
   &__list {
-
   }
 
   &__item {
-    display: flex;
     position: relative;
-    padding-bottom: 1rem;
-    align-items: center;
-    gap: 20px;
-    padding-top: 1rem;
 
-    &:after{
+    display: flex;
+    gap: 20px;
+    align-items: center;
+
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+
+    &::after {
+      content: '';
+
       position: absolute;
       bottom: 0;
-      content: '';
+
       width: 100%;
       height: 1px;
+
       background: var(--linear-gradient);
     }
   }
-  &__time{
+
+  &__time {
     width: 100px;
     margin: 0;
   }
-  &__param{
-    margin: 0;
+
+  &__param {
     width: 25%;
-    &.m--long{
-        flex: 1 1 auto;
+    margin: 0;
+
+    &.m--long {
+      flex: 1 1 auto;
     }
   }
 }

client/src/assets/css/module/profile.scss

@@ -1,10 +1,11 @@
 .profile {
-    &__title {
-        margin-bottom: 0.5rem;
-        padding: 0;
-        font-size: 1.5rem;
-    }
-    &__tabs{
-        margin-top: var(--space-between-block);
-    }
+  &__title {
+    margin-bottom: 0.5rem;
+    padding: 0;
+    font-size: 1.5rem;
+  }
+
+  &__tabs {
+    margin-top: var(--space-between-block);
+  }
 }

client/src/assets/css/module/rubric.scss

@@ -1,110 +1,142 @@
 .rubric {
   &-block {
     margin-bottom: var(--space-between-sections);
+
     &__header {
       display: flex;
-      justify-content: space-between;
-      align-items: start;
       flex-wrap: wrap;
+      align-items: start;
+      justify-content: space-between;
+
       &-title{
         margin-bottom: 0;
       }
     }
 
     &__description{
-      max-width: 60%;
-      margin-bottom: 2.5rem;
       @mixin responsive-xxs {
         max-width: none;
       }
+
+      max-width: 60%;
+      margin-bottom: 2.5rem;
+
       &.m--50{
-        margin-bottom: 0;
-        max-width: 50%;
         width: 100%;
+        max-width: 50%;
+        margin-bottom: 0;
       }
     }
+
     &__link{
       @mixin responsive-xxs {
         order: 1;
-        margin: var(--space-between-block) 0;
         width: 100%;
+        margin: var(--space-between-block) 0;
       }
     }
+
     &__list{
       position: relative;
       padding-bottom: 10px;
-      &:before{
+
+      &::before{
+        content: '';
+
+        position: absolute;
         top: 0;
         bottom: 0;
+
         width: 100%;
-        position: absolute;
-        content: '';
+
         background: url("./assets/img/bg/rubric-list.svg") no-repeat;
         background-position: 25%;
         background-size: 35%;
       }
     }
+
     &__item{
+      position: relative;
+      z-index: 2;
+
       display: flex;
       align-items: center;
-      position: relative;
+
       padding: 20px 0;
-      z-index: 2;
+
       &:hover{
         cursor: url("./assets/img/icon/cursor.svg"), auto;
       }
-      &:after{
+
+      &::after{
+        content: '';
+
         position: absolute;
         bottom: 0;
-        content: '';
-        background: #000;
+
         width: 100%;
         height: 1px;
+
+        background: #000;
         background: var(--linear-gradient);
       }
     }
+
     &__title{
-      transition: all .3s ease;
       margin-right: auto;
+      padding-right: 10px;
+
       color: var(--color-white);
       text-wrap: nowrap;
-      padding-right: 10px;
+
+      transition: all .3s ease;
     }
+
     &__btn{
-      transition: all .35s ease, visibility .0s ease;
-      visibility: hidden;
-      text-wrap: nowrap;
-      min-width: 0;
       width: 0;
+      min-width: 0;
+
+      text-wrap: nowrap;
+
+      visibility: hidden;
+
+      transition: all .35s ease, visibility .0s ease;
     }
+
     &__item:hover &__btn{
-      visibility: visible;
-      min-width: 240px;
       width: 240px;
+      min-width: 240px;
       margin-left: 20px;
+      visibility: visible;
     }
+
     &__item:hover &__title{
       color: transparent;
-      background-clip: text;
       background-image: var(--linear-gradient);
+      background-clip: text;
     }
   }
+
   &-modal{
     &__header{
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
       margin-bottom: 1rem;
     }
+
     &__title{
       margin-bottom: 0;
     }
+
     &__close{
       position: relative;
     }
+
     &__cover{
       margin-bottom: 1.5rem;
     }
+
     &__description{
       margin-bottom: 1.5rem;
     }

client/src/assets/css/module/song.scss

@@ -4,26 +4,34 @@
         flex-wrap: wrap;
         gap: 0 var(--space-between-block);
     }
+
     .m--column &-item{
         width: 100%;
     }
+
     &-item {
-        width: calc(50% - var(--space-between-block) / 2);
-        position: relative;
-        display: flex;
-        align-items: center;
-        z-index: 2;
-        border-left: 3px solid transparent;
-        padding: 10px;
-        transition: border .5s ease, background .5s ease;
-        background: transparent;
         @mixin responsive-m {
             width: 100%;
         }
+
+        position: relative;
+        z-index: 2;
+
+        display: flex;
+        align-items: center;
+
+        width: calc(50% - var(--space-between-block) / 2);
+        padding: 10px;
+
+        background: transparent;
+        border-left: 3px solid transparent;
+
+        transition: border .5s ease, background .5s ease;
+
         &.m--select &__selected {
-            margin-right: 20px;
             width: 35px;
             height: 33px;
+            margin-right: 20px;
 
             &.m--stop {
                 path {
@@ -33,8 +41,8 @@
         }
 
         &__selected {
-            width: 0;
             overflow: hidden;
+            width: 0;
             transition: all .2s ease;
 
             path:nth-child(n) {
@@ -53,110 +61,133 @@
 
         &:hover {
             cursor: url("./assets/img/icon/cursor.svg"), auto;
+            background: linear-gradient(90deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 0%) 100%);
             border-color: var(--color-primary);
-            background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
         }
 
         &__btn {
-            min-height: 0;
-            min-width: 0;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            border: none;
-            background: var(--color-primary);
             position: relative;
 
+            width: 50px;
+            min-width: 0;
+            height: 50px;
+            min-height: 0;
+
+            background: var(--color-primary);
+            border: none;
+            border-radius: 50%;
+
             &.m--small {
-                background: transparent;
                 width: 25px;
                 height: 25px;
+                background: transparent;
             }
 
             &.m--favorites {
-                &:after {
+                &::after {
                     content: '';
+
                     position: absolute;
+
                     width: 25px;
                     height: 25px;
                     margin: auto;
+
                     background: svg-load('./assets/img/icon/favorites.svg', fill=$color-primary) no-repeat 100%;
                     background-size: contain;
+
                     transition: all .3s ease;
                 }
 
-                &:hover:after {
+                &:hover::after {
                     background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) no-repeat 100%;
                     background-size: contain;
                 }
             }
 
             &.m--add {
-                &:after {
+                &::after {
                     content: '';
+
                     position: absolute;
+
                     width: 25px;
                     height: 25px;
                     margin: auto;
+
                     background: svg-load('./assets/img/icon/add-icon.svg', fill=$color-primary) no-repeat 100%;
                     background-size: contain;
+
                     transition: all .3s ease;
                 }
 
-                &:hover:after {
+                &:hover::after {
                     background: svg-load('./assets/img/icon/add-icon.svg', fill=#FFF) no-repeat 100%;
                     background-size: contain;
                 }
             }
+
             &.m--already{
-                &:after {
+                &::after {
                     content: '';
+
                     position: absolute;
+
                     width: 25px;
                     height: 25px;
                     margin: auto;
+
                     background: svg-load('./assets/img/icon/icon-trash.svg', stroke=$color-primary) no-repeat 100%;
                     background-size: contain;
+
                     transition: all .3s ease;
                 }
 
-                &:hover:after {
+                &:hover::after {
                     background: svg-load('./assets/img/icon/icon-trash.svg', stroke=#FFF) no-repeat 100%;
                     background-size: contain;
                 }
             }
 
             &.m--play {
-                &:after {
+                &::after {
                     content: '';
+
                     position: absolute;
+
                     width: 18px;
                     height: 18px;
                     margin: auto;
+
                     background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat 100%;
                     background-size: contain;
+
                     transition: all .3s ease;
                 }
 
-                &:hover:after {
+                &:hover::after {
                     background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) no-repeat 100%;
                     background-size: contain;
                 }
             }
 
             &.m--pause {
-                &:after {
+                &::after {
                     content: '';
+
                     position: absolute;
+
                     width: 18px;
                     height: 18px;
                     margin: auto;
+
                     background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) no-repeat 100%;
                     background-size: contain;
+
                     transition: all .3s ease;
                 }
 
-                &:hover:after {
+                &:hover::after {
                     background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) no-repeat 100%;
                     background-size: contain;
                 }
@@ -166,21 +197,23 @@
         &__info {
             display: flex;
             flex-direction: column;
-            font-size: 1rem;
-            color: var(--color-white-opacity);
-            line-height: 21px;
+
             margin-left: 20px;
 
+            font-size: 1rem;
+            line-height: 21px;
+            color: var(--color-white-opacity);
+
             span {
                 color: var(--color-white);
             }
         }
 
         &__tools {
-            margin-left: auto;
             display: flex;
-            align-items: center;
             gap: 20px;
+            align-items: center;
+            margin-left: auto;
         }
     }
 }
@@ -189,9 +222,11 @@
     0% {
         transform: translateY(0);
     }
+
     50% {
         transform: translateY(50%);
     }
+
     100% {
         transform: translateY(0);
     }

client/src/assets/css/module/support.scss

@@ -1,38 +1,46 @@
 .support{
     &-block{
         margin-bottom: var(--space-between-sections);
+
         &__item {
-            width: calc(100% / 3);
+            position: relative;
+            z-index: 2;
+
             display: flex;
             flex-direction: column;
             align-items: flex-start;
-            font-size: 16px;
+
+            width: calc(100% / 3);
             margin-bottom: 2.5rem;
-            position: relative;
-            z-index: 2;
-            &:before {
+
+            font-size: 16px;
+
+            &::before {
                 content: '';
-                height: 50px;
-                margin-bottom: 10px;
+
                 position: relative;
                 z-index: 2;
+
+                height: 50px;
+                margin-bottom: 10px;
             }
 
-            &.m--one-circle:before {
+            &.m--one-circle::before {
                 width: 50px;
                 background: url("./assets/img/icon/one-circle.svg") no-repeat center;
             }
 
-            &.m--two-circle:before {
+            &.m--two-circle::before {
                 width: 100px;
                 background: url("./assets/img/icon/two-circle.svg") no-repeat center;
             }
 
-            &.m--three-circle:before {
+            &.m--three-circle::before {
                 width: 150px;
                 background: url("./assets/img/icon/three-circle.svg") no-repeat center;
             }
         }
+
         &__list{
             display: flex;
             gap: var(--space-between-block);

client/src/assets/css/module/tabs.scss

@@ -2,50 +2,61 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: var(--space-between-block);
+
   &.m--btns{
-    gap: 10px;
     @mixin responsive-xs {
       .button{
         width: 100%;
       }
     }
 
+    gap: 10px;
+
   }
+
   &__item {
-    border: none;
-    background: none;
+    position: relative;
+
+    display: flex;
+
+    margin-right: 10px;
+    padding: 0;
+
+    font-size: 2rem;
     color: var(--color-white);
     text-transform: uppercase;
-    font-size: 2rem;
-    margin-right: 10px;
-    position: relative;
-    display: flex;
-    padding: 0;
+
+    background: none;
+    border: none;
+
     transition: all 0.5s ease;
 
-    &:after {
+    &::after {
       content: '';
+
       display: block;
+
+      width: 3px;
+      height: 100%;
+      margin-left: 10px;
+
       background: var(--color-white);
       border-radius: 20px;
-      height: 100%;
-      width: 3px;
-      margin-left: 10px;
     }
 
     &:last-child {
       margin: 0;
 
-      &:after {
+      &::after {
         display: none;
       }
     }
 
     &.is-active, &:hover {
-      color: transparent;
-      -webkit-background-clip: text;
-      background-image: var(--linear-gradient);
       cursor: url("./assets/img/icon/cursor.svg"), auto;
+      color: transparent;
+      background-image: var(--linear-gradient);
+      background-clip: text;
     }
   }
 }

client/src/assets/css/module/team.scss

@@ -1,31 +1,36 @@
 .team {
-    margin-left: auto;
-    max-width: calc(100vw - ((100vw - var(--container)) / 2));
-    margin-bottom: var(--space-between-sections);
-    position: relative;
-    z-index: 2;
     @mixin responsive-xl {
         padding: 0 0 0 20px;
     }
 
+    position: relative;
+    z-index: 2;
+
+    max-width: calc(100vw - ((100vw - var(--container)) / 2));
+    margin-bottom: var(--space-between-sections);
+    margin-left: auto;
+
     &__header {
-        display: flex;
-        max-width: var(--container);
-        margin-right: auto;
-        padding: 0 50px 0;
-        margin-bottom: var(--space-between-block);
         @mixin responsive-xl {
-            padding: 0 40px 0 0;
             column-gap: var(--space-between-block);
+            padding: 0 40px 0 0;
         }
+
         @mixin responsive-s {
             flex-wrap: wrap;
         }
+
+        display: flex;
+
+        max-width: var(--container);
+        margin-right: auto;
+        margin-bottom: var(--space-between-block);
+        padding: 0 50px;
     }
 
     &__title {
-        margin-bottom: 0;
         margin-right: auto;
+        margin-bottom: 0;
         text-wrap: nowrap;
     }
 
@@ -44,79 +49,93 @@
     }
 
     &__tools {
-        margin-top: 65px;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        max-width: var(--container);
-        margin-right: auto;
-        row-gap: 1.5rem;
-        padding: 0 50px 0;
         @mixin responsive-xl {
             padding: 0 80px 0 35px;
         }
+
         @mixin responsive-l {
             padding: 0 40px 0 0;
         }
+
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: 1.5rem;
+        align-items: center;
+        justify-content: space-between;
+
+        max-width: var(--container);
+        margin-top: 65px;
+        margin-right: auto;
+        padding: 0 50px;
+
         .m--link{
             @mixin responsive-s {
-                width: 100%;
                 display: flex;
                 justify-content: flex-end;
+                width: 100%;
             }
         }
     }
 
     &__progress {
-        width: 100%;
-        height: 4px;
-        position: relative;
-        max-width: 460px;
-        background: var(--color-white-opacity);
-        border-radius: 20px;
-        overflow: hidden;
         @mixin responsive-s {
             max-width: none;
         }
+
+        position: relative;
+
+        overflow: hidden;
+
+        width: 100%;
+        max-width: 460px;
+        height: 4px;
+
+        background: var(--color-white-opacity);
+        border-radius: 20px;
+
         span {
-            background: var(--color-white);
             position: absolute;
-            left: 0;
             top: 0;
+            left: 0;
+            transform-origin: left top;
+
             width: 100%;
             height: 100%;
-            transform-origin: left top;
+
+            background: var(--color-white);
         }
     }
 
     &__cover {
-        margin-bottom: 0.5rem;
-        height: 450px;
         overflow: hidden;
+        height: 450px;
+        margin-bottom: 0.5rem;
     }
 
     &__name {
-        font-weight: 500;
-        font-size: 1.5rem;
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
 
+        font-size: 1.5rem;
+        font-weight: 500;
+
         span {
-            font-weight: 400;
             font-size: 1.125rem;
+            font-weight: 400;
         }
     }
 
     &__description {
-        max-width: 820px;
         @mixin responsive-xl {
             max-width: calc(100% - var(--space-between-block));
         }
+
         @mixin responsive-s {
-            max-width: none;
             width: 100%;
+            max-width: none;
         }
+
+        max-width: 820px;
     }
 }

client/src/assets/css/setting.scss

@@ -5,8 +5,9 @@ $document-width-s: 730px;
 $document-width-xs: 640px;
 $document-width-xxs: 480px;
 $color-primary: #5e5bfc;
-$color-white: #ffffff;
+$color-white: #fff;
 $color-white-opacity: #bbb9ca;
+
 :root {
   --color-black: #232323;
   --color-white: $color-white;
@@ -14,24 +15,14 @@ $color-white-opacity: #bbb9ca;
   --color-white-opacity: $color-white-opacity;
   --bg-wrapper-modal: #000000e5;
   --color-primary: $color-primary;
-  --color-black-cc: #000000cc;
+  --color-black-cc: #000c;
   --color-emmit: #e81717;
   --bg-opacity: #74767d;
   --base-fz: 18px;
   --base-lh: 1.3;
   --font-family-base: 'Manrope', 'Tahoma', sans-serif;
-  --linear-gradient-highlight: linear-gradient(
-    259.3deg,
-    #5e5bfc 0.44%,
-    #871df0 97.88%
-  );
-  --linear-gradient: linear-gradient(
-    91.17deg,
-    #c6f1f7 -4.01%,
-    #f983e9 36.14%,
-    #b877ff 77.44%,
-    #c2e9cd 106.11%
-  );
+  --linear-gradient-highlight: linear-gradient(259.3deg, #5e5bfc 0.44%, #871df0 97.88%);
+  --linear-gradient: linear-gradient(91.17deg, #c6f1f7 -4.01%, #f983e9 36.14%, #b877ff 77.44%, #c2e9cd 106.11%);
   --container: $document-width-xl;
   --space-between-block: calc(var(--base-fz) * 2.25);
   --space-between-sections: calc(var(--base-fz) * 7);
@@ -40,13 +31,16 @@ $color-white-opacity: #bbb9ca;
   @media (max-width: $document-width-xl) {
     --container: $document-width-l;
   }
+
   @media (max-width: $document-width-l) {
     --container: $document-width-m;
   }
+
   @media (max-width: $document-width-m) {
     --container: $document-width-s;
     --space-between-sections: calc(var(--base-fz) * 2.7);
   }
+
   @media (max-width: $document-width-s) {
     --container: $document-width-xs;
   }

client/src/assets/img/favicon/fav-1.svg

@@ -0,0 +1,13 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6499 10.4707L36.2205 21.7959C37.8587 22.8014 37.9651 24.941 36.4308 26.07L19.8603 37.1358C17.9201 38.5687 15 37.326 15 35.0679V12.6794C15 10.53 17.6776 9.25767 19.6499 10.4707Z" fill="url(#paint0_linear_764_558)" stroke="url(#paint1_linear_764_558)" stroke-width="7.67085" stroke-miterlimit="10" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_764_558" x1="16.5052" y1="11.6349" x2="37.4699" y2="31.8231" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E00FE"/>
+<stop offset="1" stop-color="#6800FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_764_558" x1="16.5052" y1="11.6349" x2="37.4699" y2="31.8231" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E00FE"/>
+<stop offset="1" stop-color="#6800FF"/>
+</linearGradient>
+</defs>
+</svg>

client/src/assets/img/favicon/fav-2.svg

@@ -0,0 +1,13 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8909 7.29266L23.1931 14.3337C24.2116 14.9589 24.2778 16.289 23.3239 16.991L13.0217 23.8708C11.8155 24.7616 10 23.989 10 22.5851V8.66585C10 7.32952 11.6647 6.53848 12.8909 7.29266Z" fill="url(#paint0_linear_764_557)" stroke="url(#paint1_linear_764_557)" stroke-width="4.76909" stroke-miterlimit="10" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_764_557" x1="10.9358" y1="8.01644" x2="23.9699" y2="20.5678" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E00FE"/>
+<stop offset="1" stop-color="#6800FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_764_557" x1="10.9358" y1="8.01644" x2="23.9699" y2="20.5678" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E00FE"/>
+<stop offset="1" stop-color="#6800FF"/>
+</linearGradient>
+</defs>
+</svg>

client/src/assets/img/favicon/fav.svg

@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.44547 3.4592L11.5966 6.97972C12.1058 7.29229 12.1389 7.95738 11.6619 8.30836L6.51086 11.7482C5.90775 12.1937 5 11.8074 5 11.1054V4.14579C5 3.47763 5.83236 3.08211 6.44547 3.4592Z" fill="url(#paint0_linear_764_556)" stroke="url(#paint1_linear_764_556)" stroke-width="2.38454" stroke-miterlimit="10" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_764_556" x1="5.46789" y1="3.82109" x2="11.9849" y2="10.0968" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E00FE"/>
+<stop offset="1" stop-color="#6800FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_764_556" x1="5.46789" y1="3.82109" x2="11.9849" y2="10.0968" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E00FE"/>
+<stop offset="1" stop-color="#6800FF"/>
+</linearGradient>
+</defs>
+</svg>

client/src/components/app-breadcrumbs.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="app__breadcrumbs breadcrumbs">
-    <router-link
-      v-for="(item, key) in breadcrumbs"
-      :key="key"
-      v-slot="{ href, navigate }"
-      :to="item.route"
-      custom
-    >
+    <router-link v-for="(item, key) in breadcrumbs" :key="key" v-slot="{ href, navigate }" :to="item.route" custom>
       <div v-if="item.name" class="breadcrumbs__item">
         <a :href="href" class="breadcrumbs__item-link" @click="navigate">
           {{ item.name }}

client/src/components/app-footer.vue

@@ -4,33 +4,20 @@
       <h2 class="h2 m--white">Напишите нам</h2>
       <div class="footer__question">
         <div class="text">Остались вопросы? Мы с радостью вам ответим!</div>
-        <button class="button m--white m--arrow footer__question-button">
-          Написать
-        </button>
+        <button class="button m--white m--arrow footer__question-button">Написать</button>
       </div>
     </div>
     <div class="footer__bottom">
       <ul class="footer__menu">
-        <li
-          v-for="(item, key) in menu"
-          :key="key"
-          :class="['footer__menu-item', item.class]"
-        >
-          <router-link
-            :to="{ name: item.name, params: item.params }"
-            class="footer__menu-link"
-          >
+        <li v-for="(item, key) in menu" :key="key" :class="['footer__menu-item', item.class]">
+          <router-link :to="{ name: item.name, params: item.params }" class="footer__menu-link">
             {{ item.title }}
           </router-link>
         </li>
       </ul>
       <div class="footer__connection">
         <ul class="footer__social">
-          <li
-            v-for="(item, key) in socialMenu"
-            :key="key"
-            :class="['footer__menu-item', item.class]"
-          >
+          <li v-for="(item, key) in socialMenu" :key="key" :class="['footer__menu-item', item.class]">
             <router-link :to="item.link" class="footer__menu-link">
               {{ item.title }}
             </router-link>
@@ -38,14 +25,10 @@
         </ul>
         <ul class="footer__connection">
           <li class="footer__menu-item">
-            <router-link to="#" class="m--underline">
-              it@radio.org
-            </router-link>
+            <router-link to="#" class="m--underline"> it@radio.org </router-link>
           </li>
           <li class="footer__menu-item">
-            <router-link to="#" class="m--underline">
-              +7 (900) 000-01-12
-            </router-link>
+            <router-link to="#" class="m--underline"> +7 (900) 000-01-12 </router-link>
           </li>
         </ul>
       </div>

client/src/components/app-header.vue

@@ -11,16 +11,8 @@
         <li class="header__logo m--menu" @click="next('home')">
           <img src="@/assets/img/icon/logo.svg" alt="logo" />
         </li>
-        <li
-          v-for="(item, key) in menu"
-          :key="key"
-          :class="['header__menu-item', item.class]"
-        >
-          <router-link
-            v-if="!item.action"
-            :to="{ name: item.name, params: item.params }"
-            class="header__menu-link"
-          >
+        <li v-for="(item, key) in menu" :key="key" :class="['header__menu-item', item.class]">
+          <router-link v-if="!item.action" :to="{ name: item.name, params: item.params }" class="header__menu-link">
             {{ item.title }}
           </router-link>
           <button
@@ -31,12 +23,7 @@
           >
             {{ item.title }}
           </button>
-          <button
-            v-else
-            class="header__menu-icon"
-            :class="[item.icon]"
-            @click="handlerClick(item.action)"
-          ></button>
+          <button v-else class="header__menu-icon" :class="[item.icon]" @click="handlerClick(item.action)"></button>
         </li>
       </ul>
       <div class="header__burger" @click="handlerShowMenu">

client/src/components/blog.vue

@@ -36,15 +36,13 @@ export default {
         },
         {
           id: 2,
-          title:
-            'Искусственный интеллект меняет мир технологий: возможности и вызовы',
+          title: 'Искусственный интеллект меняет мир технологий: возможности и вызовы',
           time: '2',
           data: '21 октября',
         },
         {
           id: 3,
-          title:
-            'Как кибербезопасность становится ключевым фактором успеха в IT',
+          title: 'Как кибербезопасность становится ключевым фактором успеха в IT',
           time: '2',
           data: '21 октября',
         },

client/src/components/modal/authentication.vue

@@ -161,10 +161,7 @@ export default {
             node.setErrors([err.detail], err.error);
           });
       } else {
-        if (
-          this.formRegistration.password ===
-          this.formRegistration.repeatPassword
-        ) {
+        if (this.formRegistration.password === this.formRegistration.repeatPassword) {
           app
             .createUser(this.formRegistration)
             .then((res) => {

client/src/components/modal/rubric-modal.vue

@@ -19,10 +19,7 @@
         <div class="title m--white rubric-modal__title">
           {{ rubrik.name }}
         </div>
-        <button
-          class="button modal__close rubric-modal__close"
-          @click="$emit('hideModal')"
-        ></button>
+        <button class="button modal__close rubric-modal__close" @click="$emit('hideModal')"></button>
       </div>
       <div class="rubric-modal__cover">
         <img :src="`${selfUrl}${rubrik.img}`" alt="" />
@@ -30,9 +27,7 @@
       <div class="rubric-modal__description">
         {{ rubrik.description }}
       </div>
-      <button class="button m--fit-content m--white m--arrow" v-if="user?.id">
-        Написать
-      </button>
+      <button class="button m--fit-content m--white m--arrow" v-if="user?.id">Написать</button>
     </template>
   </vue-final-modal>
 </template>

client/src/components/pagination.vue

@@ -97,28 +97,16 @@ export default {
           if (count <= 4) {
             items.push({ text: item, value: item });
           } else {
-            if (
-              item === 1 &&
-              this.currentPage !== item &&
-              this.currentPage - 1 !== 1 &&
-              this.currentPage - 2 !== 1
-            ) {
+            if (item === 1 && this.currentPage !== item && this.currentPage - 1 !== 1 && this.currentPage - 2 !== 1) {
               items.push({ text: '1', value: 1 });
               items.push({ text: '...', value: null });
-            } else if (
-              item === count &&
-              this.currentPage + 1 !== count &&
-              this.currentPage + 2 !== count
-            ) {
+            } else if (item === count && this.currentPage + 1 !== count && this.currentPage + 2 !== count) {
               items.push({ text: '...', value: null });
               items.push({ text: count, value: count });
             } else {
               let deltaPrev = count - this.currentPage <= 3 ? 3 : 2;
               let deltaAfter = this.currentPage <= 3 ? 4 - this.currentPage : 2;
-              if (
-                item > this.currentPage - deltaPrev &&
-                item < this.currentPage + deltaAfter
-              ) {
+              if (item > this.currentPage - deltaPrev && item < this.currentPage + deltaAfter) {
                 console.log(item);
                 items.push({ text: item, value: item });
               }

client/src/components/player.vue

@@ -2,26 +2,17 @@
   <div class="player">
     <div class="player__cover">
       <q-skeleton v-if="loaderPlay" height="100%" />
-      <img v-else :src="currentPlay.art" alt="player" />
+      <template v-else>
+        <img v-if="currentPlay.art" :src="currentPlay.art" alt="player" />
+        <img v-else :src="require('@/assets/img/mock/template-artist.png')" alt="player" />
+      </template>
     </div>
     <div class="player__content">
       <div class="player__top">
-        <q-skeleton
-          v-if="loaderPlay"
-          type="circle"
-          class="player__btn m--skeleton"
-        />
+        <q-skeleton v-if="loaderPlay" type="circle" class="player__btn m--skeleton" />
         <template v-else>
-          <button
-            v-if="currentPlay.isPlay"
-            @click="handlerPause"
-            class="button player__btn m--pause"
-          ></button>
-          <button
-            v-else
-            @click="handlerPlay"
-            class="button player__btn m--play"
-          ></button>
+          <button v-if="currentPlay.isPlay" @click="handlerPause" class="button player__btn m--pause"></button>
+          <button v-else @click="handlerPlay" class="button player__btn m--play"></button>
         </template>
         <div class="player__executor">
           <q-skeleton v-if="loaderPlay" class="player__executor m--skeleton" />
@@ -37,12 +28,7 @@
         </div>
         <div @click="handleAuthRequired">
           <q-skeleton v-if="loaderPlay" class="player__favorites m--skeleton" />
-          <div
-            v-else
-            class="player__favorites"
-            :class="[isFavorites && 'm--active']"
-            @click="handlerFavorites"
-          ></div>
+          <div v-else class="player__favorites" :class="[isFavorites && 'm--active']" @click="handlerFavorites"></div>
         </div>
         <div class="player__tools">
           <q-skeleton v-if="loaderPlay" class="player__tools m--skeleton" />
@@ -60,26 +46,14 @@
             <span
               ref="volumeIcon"
               @click="toggleVolume"
-              :class="
-                songVolume == 0 ? 'player__volume-off' : 'player__volume-on'
-              "
-            />
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.01"
-              v-model="songVolume"
-              @input="changeVolume"
+              :class="songVolume == 0 ? 'player__volume-off' : 'player__volume-on'"
             />
+            <input type="range" min="0" max="1" step="0.01" v-model="songVolume" @input="changeVolume" />
           </div>
         </div>
       </div>
       <div class="player__bottom">
-        <div
-          class="player__time"
-          :class="!loaderPlay && !isUserMusic && 'm--ether'"
-        >
+        <div class="player__time" :class="!loaderPlay && !isUserMusic && 'm--ether'">
           <q-skeleton v-if="loaderPlay" />
           <template v-else-if="isUserMusic">
             {{ getTime(playerInfo.currentTime) }} /
@@ -89,12 +63,7 @@
         </div>
         <div class="player__progress">
           <q-skeleton v-if="loaderPlay" height="5px" />
-          <input
-            v-else
-            :disabled="!isUserMusic"
-            type="range"
-            v-model="playerInfo.progress"
-          />
+          <input v-else :disabled="!isUserMusic" type="range" v-model="playerInfo.progress" />
         </div>
       </div>
     </div>
@@ -189,9 +158,7 @@ export default {
         ...this.userSongList[this.currentPlay.currentIndex || 0],
         live: false,
       });
-      this.getAudio(
-        this.userSongList[this.currentPlay.currentIndex || 0]?.azura_id,
-      );
+      this.getAudio(this.userSongList[this.currentPlay.currentIndex || 0]?.azura_id);
       if (this.player.target) {
         this.player.target.addEventListener('timeupdate', this.updateProgress);
       }
@@ -238,16 +205,12 @@ export default {
         });
     },
     handleConnection(e) {
-      // console.log('getPlaying', e);
       const jsonData = JSON.parse(e.data);
-      // console.log('jsonData', jsonData);
       const data =
         // Второй ответ
         jsonData?.pub?.data ||
         // Первый ответ
         jsonData?.connect?.subs?.['station:it-radio']?.publications?.[0]?.data;
-      // console.log('getPlaying', data);
-      // console.log(data);
 
       if (!data) return;
       if (this.currentPlay.live) {
@@ -255,12 +218,9 @@ export default {
         const dataUrl = data.np.station.listen_url;
         // Объект с данными музыки
         const dataSong = data.np.now_playing.song;
-        // console.log(dataSong);
         const playerUrl = this.player.target.src;
         if (dataUrl !== playerUrl) {
-          // console.log('data.np.station.listen_url', dataUrl);
           this.$store.dispatch('changePlayer', dataUrl);
-          // console.log(this.player);
           this.actionCurrentPlay(dataSong);
         }
         if (dataSong.id !== this.currentPlay.id) {
@@ -269,7 +229,7 @@ export default {
       }
     },
     actionCurrentPlay(song) {
-      // console.log('actionCurrentPlay', data);
+      console.log('actionCurrentPlay', song);
       const currentPlay = {
         ...this.currentPlay, // Инфа про текущий трек
         ...song,
@@ -278,23 +238,18 @@ export default {
         live: true,
         currentIndex: null,
       };
-      // console.log('params in getPlaying ', params);
       // delete params.unique_id;
       this.$store.dispatch('setCurrentPlay', currentPlay);
     },
     updateProgress(e) {
       this.playerInfo = {
         ...this.playerInfo,
-        progress:
-          (this.player.target.currentTime / this.player.target.duration) * 100,
+        progress: (this.player.target.currentTime / this.player.target.duration) * 100,
         currentTime: this.player.target.currentTime,
       };
       if (this.player.target.currentTime === this.player.target.duration) {
         let currentIndex = this.currentPlay.currentIndex + 1;
-        if (
-          !this.userSongList[currentIndex]?.azura_id ||
-          currentIndex === null
-        ) {
+        if (!this.userSongList[currentIndex]?.azura_id || currentIndex === null) {
           currentIndex = 0;
         }
         this.$store.dispatch('setCurrentPlay', {
@@ -334,9 +289,7 @@ export default {
       if (this.user?.id) {
         const params = {
           ...this.currentPlay,
-          azura_id: Number(this.currentPlay.id)
-            ? this.currentPlay.azura_id
-            : this.currentPlay.id,
+          azura_id: Number(this.currentPlay.id) ? this.currentPlay.azura_id : this.currentPlay.id,
         };
         if (!this.isFavorites) {
           delete params.id;
@@ -396,8 +349,7 @@ export default {
         this.player.target.addEventListener('timeupdate', this.updateProgress);
 
         blob.arrayBuffer().then((buffer) => {
-          var audioContext = new (window.AudioContext ||
-            window.webkitAudioContext)();
+          var audioContext = new (window.AudioContext || window.webkitAudioContext)();
           audioContext.decodeAudioData(buffer, (decodedData) => {
             this.playerInfo.duration = decodedData.duration;
           });

client/src/components/rubric-block.vue

@@ -2,18 +2,13 @@
   <div class="rubric-block">
     <div class="rubric-block__header">
       <h2 class="h2 rubric-block__header-title">Рубрики</h2>
-      <button
-        class="button m--arrow rubric-block__link"
-        v-if="$route.name !== 'rubric'"
-        @click="next('rubric')"
-      >
+      <button class="button m--arrow rubric-block__link" v-if="$route.name !== 'rubric'" @click="next('rubric')">
         Смотреть все
       </button>
       <div class="p rubric-block__description">
-        IT-радио - это уникальная платформа для обмена опытом, знаниями и
-        обсуждения актуальных вопросов, связанных с разработкой программного
-        обеспечения, искусственного интеллекта, интернета вещей и других
-        направлений IT-индустрии
+        IT-радио - это уникальная платформа для обмена опытом, знаниями и обсуждения актуальных вопросов, связанных с
+        разработкой программного обеспечения, искусственного интеллекта, интернета вещей и других направлений
+        IT-индустрии
       </div>
     </div>
     <template v-if="showLoader">
@@ -23,27 +18,14 @@
       </div>
     </template>
     <div v-else class="rubric-block__list">
-      <div
-        class="rubric-block__item"
-        v-for="rubrik in rubriks"
-        :key="`rubrik_${rubrik.id}`"
-      >
+      <div class="rubric-block__item" v-for="rubrik in rubriks" :key="`rubrik_${rubrik.id}`">
         <div class="title rubric-block__title">{{ rubrik.name }}</div>
         <div class="p rubric-block__description m--50">{{ rubrik.title }}</div>
-        <button
-          class="button m--arrow rubric-block__btn"
-          @click="showModalRubric(rubrik.id)"
-        >
-          Узнать больше
-        </button>
+        <button class="button m--arrow rubric-block__btn" @click="showModalRubric(rubrik.id)">Узнать больше</button>
       </div>
     </div>
   </div>
-  <RubricModal
-    :showModal="isShowModalRubric"
-    @hideModal="hiddenModalRubric"
-    :selectRubric="ModalTemplate"
-  />
+  <RubricModal :showModal="isShowModalRubric" @hideModal="hiddenModalRubric" :selectRubric="ModalTemplate" />
 </template>
 
 <script>

client/src/components/song-item.vue

@@ -1,67 +1,32 @@
 <template>
-  <div
-    class="song-item"
-    :class="[selectSong && 'm--select']"
-    @click="handlerSelectSong"
-  >
+  <div class="song-item" :class="[selectSong && 'm--select']" @click="handlerSelectSong">
     <div class="song-item__selected" :class="[!isPlay && 'm--stop']">
-      <svg
-        width="33"
-        height="28"
-        viewBox="0 0 33 28"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      <svg width="33" height="28" viewBox="0 0 33 28" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           class=""
           d="M0 15C0 13.6193 1.11929 12.5 2.5 12.5C3.88071 12.5 5 13.6193 5 15V27.5H0V15Z"
           fill="#7138F4"
         />
-        <path
-          d="M7 9C7 7.61929 8.11929 6.5 9.5 6.5C10.8807 6.5 12 7.61929 12 9V27.5H7V9Z"
-          fill="#7138F4"
-        />
-        <path
-          d="M14 12C14 10.6193 15.1193 9.5 16.5 9.5C17.8807 9.5 19 10.6193 19 12V27.5H14V12Z"
-          fill="#7138F4"
-        />
-        <path
-          d="M21 3C21 1.61929 22.1193 0.5 23.5 0.5C24.8807 0.5 26 1.61929 26 3V27.5H21V3Z"
-          fill="#7138F4"
-        />
-        <path
-          d="M28 20C28 18.6193 29.1193 17.5 30.5 17.5C31.8807 17.5 33 18.6193 33 20V27.5H28V20Z"
-          fill="#7138F4"
-        />
+        <path d="M7 9C7 7.61929 8.11929 6.5 9.5 6.5C10.8807 6.5 12 7.61929 12 9V27.5H7V9Z" fill="#7138F4" />
+        <path d="M14 12C14 10.6193 15.1193 9.5 16.5 9.5C17.8807 9.5 19 10.6193 19 12V27.5H14V12Z" fill="#7138F4" />
+        <path d="M21 3C21 1.61929 22.1193 0.5 23.5 0.5C24.8807 0.5 26 1.61929 26 3V27.5H21V3Z" fill="#7138F4" />
+        <path d="M28 20C28 18.6193 29.1193 17.5 30.5 17.5C31.8807 17.5 33 18.6193 33 20V27.5H28V20Z" fill="#7138F4" />
       </svg>
     </div>
     <div>
-      <button
-        v-if="isPlay"
-        @click.stop="handlerPause"
-        class="button song-item__btn m--pause"
-      ></button>
-      <button
-        v-else
-        @click.stop="handlerPlay"
-        class="button song-item__btn m--play"
-      ></button>
+      <button v-if="isPlay" @click.stop="handlerPause" class="button song-item__btn m--pause"></button>
+      <button v-else @click.stop="handlerPlay" class="button song-item__btn m--play"></button>
     </div>
     <div class="song-item__info">
       <span>{{ song.title }}</span>
       {{ song.artist }}
     </div>
     <div class="song-item__tools">
-      <button
-        class="button song-item__btn m--small m--favorites"
-        @click.stop="removeSong"
-      ></button>
+      <button class="button song-item__btn m--small m--favorites" @click.stop="removeSong"></button>
       <button
         class="button song-item__btn m--small m--add"
         :class="songAlreadyAddPlaylist && 'm--already'"
-        @click.stop="
-          songAlreadyAddPlaylist ? removeToPlaylist() : addPlaylist()
-        "
+        @click.stop="songAlreadyAddPlaylist ? removeToPlaylist() : addPlaylist()"
       ></button>
     </div>
   </div>

client/src/components/song-list.vue

@@ -4,9 +4,7 @@
       v-for="song in songList"
       :key="song"
       :song="song"
-      :playSong="
-        song.azura_id === currentPlay.azura_id ? currentPlay.isPlay : false
-      "
+      :playSong="song.azura_id === currentPlay.azura_id ? currentPlay.isPlay : false"
       :selectSong="song.azura_id === currentPlay.azura_id"
       :songAlreadyAddPlaylist="songAlreadyAdd"
       @selectSong="handlerSelectSong"
@@ -46,9 +44,7 @@ export default {
   methods: {
     handlerSelectSong(params) {
       const data = { ...this.currentPlay, ...params, isLoader: true };
-      data.currentIndex = this.songList.findIndex(
-        (el) => el.azura_id === params.azura_id,
-      );
+      data.currentIndex = this.songList.findIndex((el) => el.azura_id === params.azura_id);
       this.$store.dispatch('setCurrentPlay', data);
       console.log('handlerSelectSong');
     },

client/src/components/support-block.vue

@@ -4,19 +4,17 @@
     <div class="support-block__list">
       <div class="support-block__item m--one-circle">
         <div class="title">Донат</div>
-        Мы будем рады, если вы поддержите нас любой суммой! Все средства пойдут
-        на дальнейшее развитие проекта
+        Мы будем рады, если вы поддержите нас любой суммой! Все средства пойдут на дальнейшее развитие проекта
       </div>
       <div class="support-block__item m--two-circle">
         <div class="title">Дело</div>
-        Если вы фотографируете, монтируете, пишете, корректируете, занимаетесь
-        продвижением или делаете еще что-нибудь классное и думаете, что можете
-        быть нам полезны на волонтерских началах — свяжитесь с нами через форму
+        Если вы фотографируете, монтируете, пишете, корректируете, занимаетесь продвижением или делаете еще что-нибудь
+        классное и думаете, что можете быть нам полезны на волонтерских началах — свяжитесь с нами через форму
       </div>
       <div class="support-block__item m--three-circle">
         <div class="title">Развитие</div>
-        Расскажите о нашем проекте в соцсетях! Можно поделиться любым нашим
-        постом, видео в ютубе или рассказать о нас в своей аудитории
+        Расскажите о нашем проекте в соцсетях! Можно поделиться любым нашим постом, видео в ютубе или рассказать о нас в
+        своей аудитории
       </div>
     </div>
   </div>

client/src/components/team.vue

@@ -3,9 +3,8 @@
     <div class="team__header">
       <h2 class="h2 team__title">Наша команда</h2>
       <div class="team__description">
-        На IT волне команда профессионалов неутомимо трудится, чтобы дарить
-        слушателям самые свежие и актуальные новости из мира технологий,
-        отвечать на их вопросы и обсуждать горячие темы на IT радио.
+        На IT волне команда профессионалов неутомимо трудится, чтобы дарить слушателям самые свежие и актуальные новости
+        из мира технологий, отвечать на их вопросы и обсуждать горячие темы на IT радио.
       </div>
     </div>
     <template v-if="showLoader">
@@ -43,11 +42,7 @@
       }"
       class="team__slider"
     >
-      <SwiperSlide
-        class="team__item"
-        v-for="employee in team"
-        :key="employee.id"
-      >
+      <SwiperSlide class="team__item" v-for="employee in team" :key="employee.id">
         <div class="team__cover">
           <img :src="`${selfUrl + employee.img_person}`" alt="user" />
         </div>
@@ -61,9 +56,7 @@
       <div class="team__progress" ref="progressBar">
         <span></span>
       </div>
-      <router-link :to="{ name: 'about' }" class="m--link">
-        Больше о нас
-      </router-link>
+      <router-link :to="{ name: 'about' }" class="m--link"> Больше о нас </router-link>
     </div>
   </div>
 </template>

client/src/index.template.html

@@ -9,17 +9,12 @@
       content="user-scalable=yes, initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
     />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/ico" href="favicon.ico" />
-    <link
-      rel="icon"
-      type="image/svg"
-      sizes="16x16"
-      href="icons/favicon-16x16.svg"
-    />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="manifest" href="/site.webmanifest" />
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-    <meta name="msapplication-TileColor" content="#00a300" />
-    <meta name="theme-color" content="#119b58" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
   </head>
   <body>
     <!-- DO NOT touch the following DIV -->

client/src/router/index.js

@@ -1,11 +1,6 @@
 import { route } from 'quasar/wrappers';
 import store from '@/store';
-import {
-  createRouter,
-  createMemoryHistory,
-  createWebHistory,
-  createWebHashHistory,
-} from 'vue-router';
+import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
 import routes from './routes';
 
 /*
@@ -43,13 +38,11 @@ export default route(function (/* { store, ssrContext } */) {
     // Leave this as is and make changes in quasar.conf.js instead!
     // quasar.conf.js -> build -> vueRouterMode
     // quasar.conf.js -> build -> publicPath
-    history: createHistory(
-      process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE,
-    ),
+    history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
   });
 
   Router.beforeEach((to, from, next) => {
-    console.log(process.env.SERVER);
+    // console.log(process.env.SERVER);
     //уточнить зачем нужен process.env.SERVER
     if (to.meta.isAuth && !process.env.SERVER) {
       if (store.state.user) {

client/src/services/app.js

@@ -1,12 +1,9 @@
 import { urlPath as settings } from '@/settings';
 import { REST, RESTError } from './rest';
 
-// запросы на сервер Django
 // console.log(settings);
 
 export default class extends REST {
-  // export default class Django extends REST {
-
   static get settings() {
     return settings;
   }
@@ -233,10 +230,7 @@ export default class extends REST {
         return data;
       })
       .catch((error) => {
-        throw new RESTError(
-          error,
-          'Ошибка при получении информации о текущем треке',
-        );
+        throw new RESTError(error, 'Ошибка при получении информации о текущем треке');
       });
   }
 

client/src/services/audio.js

@@ -21,9 +21,7 @@ export default class extends REST {
       }),
     });
     // console.log('sseUriParams', sseUriParams.toString());
-    this.connection = new EventSource(
-      sseBaseUri + '?' + sseUriParams.toString(),
-    );
+    this.connection = new EventSource(sseBaseUri + '?' + sseUriParams.toString());
     // window.connection = this.connection;
     // this.connection.onopen = (e) => console.log('connected', e);
   }

client/src/services/rest.js

@@ -8,8 +8,7 @@ class RESTError extends Error {
     let detail =
       error.response &&
       error.response.data &&
-      (error.response.data.detail ||
-        (error.response.data.error && error.response.data.error.detail));
+      (error.response.data.detail || (error.response.data.error && error.response.data.error.detail));
     let header = (message || error.message) + (detail ? ': ' + detail : '');
     super(header);
 
@@ -39,23 +38,8 @@ class REST {
   static get settings() {
     throw new Error('settings must be overridden');
   }
-  static _get(
-    url,
-    params = {},
-    extraParams,
-    use_cache = false,
-    isBlob = false,
-  ) {
-    return this._request(
-      'get',
-      url,
-      params,
-      {},
-      {},
-      extraParams,
-      use_cache,
-      isBlob,
-    );
+  static _get(url, params = {}, extraParams, use_cache = false, isBlob = false) {
+    return this._request('get', url, params, {}, {}, extraParams, use_cache, isBlob);
   }
   static _post(url, params, data) {
     return this._request('post', url, params, data);

client/src/store/store-flag.d.ts

@@ -1,9 +1,9 @@
 /* eslint-disable */
 // THIS FEATURE-FLAG FILE IS AUTOGENERATED,
 //  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
+import 'quasar/dist/types/feature-flag';
 
-declare module "quasar/dist/types/feature-flag" {
+declare module 'quasar/dist/types/feature-flag' {
   interface QuasarFeatureFlags {
     store: true;
   }

client/src/utils/ajax.js

@@ -24,10 +24,7 @@ export default class {
       delete params.extraData;
     }
     if (params.extraParams) {
-      params.params = this.__append_extra_params(
-        params.params,
-        params.extraParams,
-      );
+      params.params = this.__append_extra_params(params.params, params.extraParams);
       delete params.extraParams;
     }
     /*

client/src/views/Page404.vue

@@ -5,23 +5,16 @@
         <div class="page404__block">
           <div class="page404__info">
             <div class="page404__info-title">404</div>
-            <div class="page404__info-subtitle">
-              Мы не можем найти то, что вы ищете
-            </div>
+            <div class="page404__info-subtitle">Мы не можем найти то, что вы ищете</div>
             <div class="page404__info-content">
-              Возможно, запрашиваемая вами страница была перенесена или удалена.
-              Также возможно, что вы допустили небольшую опечатку при вводе
-              адреса — такое случается даже с нами, поэтому еще раз внимательно
-              проверьте.
+              Возможно, запрашиваемая вами страница была перенесена или удалена. Также возможно, что вы допустили
+              небольшую опечатку при вводе адреса — такое случается даже с нами, поэтому еще раз внимательно проверьте.
             </div>
             <div class="page404__info-bottom">
-              Переходите на главную страницу, там вы сможете найти много
-              полезной информации!
+              Переходите на главную страницу, там вы сможете найти много полезной информации!
             </div>
             <div class="page404__info-button">
-              <button class="button button-blue" @click="next()">
-                На главную
-              </button>
+              <button class="button button-blue" @click="next()">На главную</button>
             </div>
           </div>
         </div>

client/src/views/Page500.vue

@@ -6,17 +6,12 @@
           <div class="page500__info">
             <div class="page500__info-title">Упс!</div>
             <div class="page500__info-subtitle">Что то пошло не так!</div>
-            <div class="page500__info-content">
-              Мы уже знаем об этом и делаем все возможное!
-            </div>
+            <div class="page500__info-content">Мы уже знаем об этом и делаем все возможное!</div>
             <div class="page500__info-bottom">
-              Переходите на главную страницу, там вы сможете найти много
-              полезной информации!
+              Переходите на главную страницу, там вы сможете найти много полезной информации!
             </div>
             <div class="page500__info-button">
-              <button class="button button-blue" @click="next()">
-                На главную
-              </button>
+              <button class="button button-blue" @click="next()">На главную</button>
             </div>
           </div>
         </div>

client/src/views/about.vue

@@ -13,26 +13,22 @@
           <div class="about__header-left">
             <h1 class="h2">О нас</h1>
             <div class="text about__header-description">
-              IT-радио — это не просто обычная радиостанция, мы ваши партнеры в
-              творчестве и современных технологиях.
+              IT-радио — это не просто обычная радиостанция, мы ваши партнеры в творчестве и современных технологиях.
             </div>
           </div>
           <div class="about__header-right"></div>
         </div>
         <div class="text about__header-bottom">
-          Наша миссия — воплотить ваши мечты в реальность, шаг за шагом.
-          Благодаря разнообразной команде ведущих, журналистов, разработчиков и
-          новаторов, мы постоянно расширяем границы возможного в цифровом мире.
+          Наша миссия — воплотить ваши мечты в реальность, шаг за шагом. Благодаря разнообразной команде ведущих,
+          журналистов, разработчиков и новаторов, мы постоянно расширяем границы возможного в цифровом мире.
         </div>
       </div>
       <div class="about__description">
         <h2 class="h2">Мы здесь, чтобы открыть глаза на мир IT</h2>
         <div class="about__description-info">
           <div class="text about__description-item m--left">
-            IT-радио — это уникальный проект, который объединяет в себе самых
-            ярких представителей IT-индустрии, а также экспертов из различных
-            областей, чтобы поделиться своими знаниями и опытом с широкой
-            аудиторией.
+            IT-радио — это уникальный проект, который объединяет в себе самых ярких представителей IT-индустрии, а также
+            экспертов из различных областей, чтобы поделиться своими знаниями и опытом с широкой аудиторией.
           </div>
           <div class="text about__description-item">
             Мы — команда, которая верит в силу теплой улыбки и дружеской беседы.
@@ -45,14 +41,13 @@
       <div class="about__description">
         <div class="about__description-info">
           <div class="text about__description-item m--left">
-            Основанное с целью переосмыслить радио через призму современного и
-            инновационного подхода, мы стали больше, чем просто радиостанцией,
-            мы сообщество родственных душ, которые разделяют страсть к
-            артистизму, развитию и инновациям.
+            Основанное с целью переосмыслить радио через призму современного и инновационного подхода, мы стали больше,
+            чем просто радиостанцией, мы сообщество родственных душ, которые разделяют страсть к артистизму, развитию и
+            инновациям.
           </div>
           <div class="text about__description-item">
-            Каждое шоу на IT-радио включает в себя актуальные темы, новости,
-            обзоры, интервью с экспертами и многое другое.
+            Каждое шоу на IT-радио включает в себя актуальные темы, новости, обзоры, интервью с экспертами и многое
+            другое.
           </div>
         </div>
       </div>
@@ -71,27 +66,19 @@
         </div>
         <div class="about__history-list">
           <div class="about__history-item">
-            <div class="title m--white about__history-title">
-              Событие кратко 1
-            </div>
+            <div class="title m--white about__history-title">Событие кратко 1</div>
             <div class="about__history-date">Ноябрь 2023</div>
           </div>
           <div class="about__history-item">
-            <div class="title m--white about__history-title">
-              Событие кратко 2
-            </div>
+            <div class="title m--white about__history-title">Событие кратко 2</div>
             <div class="about__history-date">Ноябрь 2023</div>
           </div>
           <div class="about__history-item">
-            <div class="title m--white about__history-title">
-              Событие кратко 3
-            </div>
+            <div class="title m--white about__history-title">Событие кратко 3</div>
             <div class="about__history-date">Ноябрь 2023</div>
           </div>
           <div class="about__history-item">
-            <div class="title m--white about__history-title">
-              Событие кратко 4
-            </div>
+            <div class="title m--white about__history-title">Событие кратко 4</div>
             <div class="about__history-date">Ноябрь 2023</div>
           </div>
         </div>

client/src/views/contacts.vue

@@ -10,30 +10,20 @@
     <div class="contacts__content">
       <div v-if="contacts" class="contacts__info">
         <div v-for="(item, index) in contactsField" :key="index">
-          <div
-            v-if="item.title !== dictionaryFields.socials"
-            class="text contacts__item"
-          >
+          <div v-if="item.title !== dictionaryFields.socials" class="text contacts__item">
             <span class="title">{{ item.title }}</span>
             {{ item.data }}
           </div>
           <div v-else class="contacts__socials">
             <span class="title">{{ item.title }}</span>
-            <div
-              v-for="(href, social) in item.data"
-              :key="social"
-              class="contacts__social"
-            >
+            <div v-for="(href, social) in item.data" :key="social" class="contacts__social">
               <a :href="href" :class="['contacts__social', social]"></a>
             </div>
           </div>
         </div>
       </div>
       <div class="contacts__map">
-        <!-- <div
-          class="contacts__map-frame"
-          style="position: relative; overflow: hidden"
-        >
+        <div class="contacts__map-frame" style="position: relative; overflow: hidden">
           <a
             href="https://yandex.ru/maps/56/chelyabinsk/?utm_medium=mapframe&utm_source=maps"
             style="color: #eee; font-size: 12px; position: absolute; top: 0px"
@@ -46,8 +36,7 @@
             allowfullscreen="true"
             style="position: relative"
           ></iframe>
-        </div> -->
-        <YandexMap apiKey="e73ed16e-35ea-483b-afb4-9daac388591a" />
+        </div>
       </div>
       <FormKit
         v-model="formData"
@@ -76,12 +65,11 @@
 <script>
 import AppBreadcrumbs from '@/components/app-breadcrumbs.vue';
 import SupportBlock from '@/components/support-block.vue';
-import YandexMap from '@/components/ymap.vue';
 import { app } from '@/services';
 
 export default {
   name: 'contacts',
-  components: { SupportBlock, AppBreadcrumbs, YandexMap },
+  components: { SupportBlock, AppBreadcrumbs },
   data() {
     return {
       formData: {},

client/src/views/home.vue

@@ -5,8 +5,7 @@
         <p class="text home__subtitle">
           Мы цифровое <span>онлайн радио.</span><br />
           Помогаем разобраться в том, что такое <span>IT.</span><br />
-          Находимся в <span>Челябинске</span>, но вещаем на весь <span>Мир</span
-          ><br />
+          Находимся в <span>Челябинске</span>, но вещаем на весь <span>Мир</span><br />
         </p>
         <h1 class="home__title" ref="targetTitle">
           IT-Радио —
@@ -30,31 +29,27 @@
             <div class="text home__info--item">
               IT-RADIO. 2023
               <span>
-                Сегодня IT-сфера развивается настолько быстро, что следить за
-                всеми новинками и изменениями в ней становится все сложнее.<br /><br />
-                Но есть способ всегда быть в курсе последних новостей и событий
-                — это IT-радио.
+                Сегодня IT-сфера развивается настолько быстро, что следить за всеми новинками и изменениями в ней
+                становится все сложнее.<br /><br />
+                Но есть способ всегда быть в курсе последних новостей и событий — это IT-радио.
               </span>
             </div>
-            <h2 class="h2 m--border">
-              Открывая новые горизонты в мире технологий
-            </h2>
+            <h2 class="h2 m--border">Открывая новые горизонты в мире технологий</h2>
             <div class="text home__info--item m--circle">
               <span>
-                IT-радио — это уникальный проект, который объединяет в себе
-                самых ярких представителей IT-индустрии, а также экспертов из
-                различных областей, чтобы поделиться своими знаниями и опытом с
-                широкой аудиторией.<br /><br />
-                Каждое шоу на IT-радио включает в себя актуальные темы, новости,
-                обзоры, интервью с экспертами и многое другое.
+                IT-радио — это уникальный проект, который объединяет в себе самых ярких представителей IT-индустрии, а
+                также экспертов из различных областей, чтобы поделиться своими знаниями и опытом с широкой
+                аудиторией.<br /><br />
+                Каждое шоу на IT-радио включает в себя актуальные темы, новости, обзоры, интервью с экспертами и многое
+                другое.
               </span>
             </div>
           </div>
           <div class="home__content">
             <div class="home__content--item m--one-circle">
               <span class="title">Музыка</span>
-              Нам важно создать комфортную атмосферу, которая поможет
-              сосредоточиться на задачах и улучшит продуктивность.
+              Нам важно создать комфортную атмосферу, которая поможет сосредоточиться на задачах и улучшит
+              продуктивность.
             </div>
             <div class="home__content--item m--two-circle">
               <span class="title">Подкасты</span>
@@ -76,9 +71,8 @@
           <div class="home__social--description">
             <h2 class="h2 m--white">Соц сети</h2>
             <div class="text">
-              Следите за обновлениями и новыми постами на IT Radio, чтобы быть в
-              курсе последних новостей и событий в мире IT, а также следить за
-              анонсами и обновлениями!
+              Следите за обновлениями и новыми постами на IT Radio, чтобы быть в курсе последних новостей и событий в
+              мире IT, а также следить за анонсами и обновлениями!
             </div>
           </div>
           <div class="home__social--btns">
@@ -125,8 +119,7 @@ export default {
       });
       gsap.to(this.$refs.targetTitle, {
         color: 'transparent',
-        backgroundImage:
-          'linear-gradient(91.17deg, #C6F1F7 -4.01%, #F983E9 36.14%, #B877FF 77.44%, #C2E9CD 106.11%)',
+        backgroundImage: 'linear-gradient(91.17deg, #C6F1F7 -4.01%, #F983E9 36.14%, #B877FF 77.44%, #C2E9CD 106.11%)',
         scrollTrigger: {
           trigger: this.$refs.targetWrapper,
           scrub: true,

client/src/views/playlist-edit.vue

@@ -15,18 +15,9 @@
     <h1 class="h2 playlist__title m--margin">
       {{ $route.name === 'playlist-create' ? 'Новый плейлист' : playlist.name }}
     </h1>
-    <button class="playlist-edit__upload" @click="handlerUploadCover">
-      Добавить обложку
-    </button>
+    <button class="playlist-edit__upload" @click="handlerUploadCover">Добавить обложку</button>
     <div class="field__input m--hidden">
-      <input
-        id="cover"
-        ref="coverInput"
-        accept=".jpg,.png,.svg"
-        class="input"
-        type="file"
-        name="logo"
-      />
+      <input id="cover" ref="coverInput" accept=".jpg,.png,.svg" class="input" type="file" name="logo" />
     </div>
     <FormKit
       v-model="playlist.name"
@@ -96,9 +87,7 @@ export default {
   computed: {
     songsFiltered() {
       return this.songs.filter((song) => {
-        const alreadyAdd = this.playlist.song.find(
-          (item) => item.azura_id === song.azura_id,
-        );
+        const alreadyAdd = this.playlist.song.find((item) => item.azura_id === song.azura_id);
         return !alreadyAdd;
       });
     },

client/src/views/playlist.vue

@@ -10,12 +10,7 @@
       <div class="playlist__header">
         <div class="playlist__back" @click="handlerBack"></div>
         <div class="h2 playlist__title">{{ playlist.name }}</div>
-        <div
-          class="playlist__edit"
-          @click="
-            next({ name: 'playlist-edit', params: { id: this.playlist.id } })
-          "
-        ></div>
+        <div class="playlist__edit" @click="next({ name: 'playlist-edit', params: { id: this.playlist.id } })"></div>
       </div>
       <SongList :songList="playlist.song" :songAlreadyAdd="true" />
     </template>

client/src/views/profile.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="app__content profile">
-    <template
-      v-if="
-        $route.name !== 'playlist-edit' && $route.name !== 'playlist-create'
-      "
-    >
+    <template v-if="$route.name !== 'playlist-edit' && $route.name !== 'playlist-create'">
       <AppBreadcrumbs
         :breadcrumbs="[
           { name: 'Главная', route: { name: 'home' } },
@@ -12,9 +8,7 @@
         ]"
       />
       <h1 class="h2 profile__title">{{ user.email }}</h1>
-      <button class="button m--text-link" @click="showRecovery">
-        Редактировать профиль
-      </button>
+      <button class="button m--text-link" @click="showRecovery">Редактировать профиль</button>
       <div class="profile__tabs tabs m--btns">
         <button
           v-for="item in tabsItems"
@@ -35,11 +29,7 @@
             Загрузка данных
           </div>
         </template>
-        <SongList
-          v-else
-          :songList="userFavorite.songs"
-          @removeSong="removeFavorites"
-        />
+        <SongList v-else :songList="userFavorite.songs" @removeSong="removeFavorites" />
       </template>
       <template v-if="currentTabsItem === 'playlists'">
         <template v-if="showLoaderPlaylist">
@@ -48,11 +38,7 @@
             Загрузка данных
           </div>
         </template>
-        <PlaylistRoster
-          v-else
-          :list="userFavorite.playlist"
-          @createPlaylist="createPlayList"
-        />
+        <PlaylistRoster v-else :list="userFavorite.playlist" @createPlaylist="createPlayList" />
       </template>
     </template>
     <routerView v-else />
@@ -106,10 +92,7 @@ export default {
           console.log('1');
           this.currentTabsItem = to?.hash.replace('#', '') || 'music';
         }
-        if (
-          (to?.hash !== from?.hash && to?.name === from?.name) ||
-          (!from?.name && !from?.hash)
-        ) {
+        if ((to?.hash !== from?.hash && to?.name === from?.name) || (!from?.name && !from?.hash)) {
           console.log('2');
           if (to.hash) {
             this.currentTabsItem = to?.hash.replace('#', '') || 'music';