Merge branch 'main' of https://git.disroot.org/layfer7/v20

2023-03-04 19:28:24 +03:00 · 2023-03-04 19:28:24 +03:00 · d591f85509
parent a4e56df3d8 08fd9531c1
commit d591f85509
21 changed files with 2703 additions and 1740 deletions
--- a/.gitignore
+++ b/.gitignore
@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+*.lock
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2
+}
--- a/index.html
+++ b/index.html
@ -1,19 +1,24 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
-    <link rel="stylesheet" href="./src/crsl/styles/owl.carousel.css">
-    <link rel="stylesheet" href="./src/crsl/styles/owl.theme.css">    
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="./src/crsl/styles/owl.carousel.css" />
+    <link rel="stylesheet" href="./src/crsl/styles/owl.theme.css" />
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>ШКОЛА</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script src="./src/crsl/owl.carousel.min.js"></script>
  </body>
-<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-<script src="./src/crsl/owl.carousel.min.js"></script>
 </html>
-
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,11 +6,13 @@
  "scripts": {
    "dev": "vite",
    "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\""
  },
  "dependencies": {
    "@iconify/vue": "^4.1.0",
    "bootstrap": "^5.3.0-alpha1",
+    "bvi": "^1.0.2",
    "md-editor-v3": "^2.8.1",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
@ -18,6 +20,7 @@
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
+    "prettier": "^2.8.4",
    "vite": "^4.1.0"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -2,27 +2,13 @@
 import Header from './components/header.vue';
 import Post from './components/post.vue';
 import markdownModal from './components/markdownModal.vue';
-import {store} from './main.js'
-
-async function fetchData() {
-  const res = await fetch('api');
-  if (res.ok){
-
-  }else{
-
-  }
-}
-
-
+import { store } from './main.js';
 </script>

 <template>
-  <Header/>
-  <markdownModal v-if="store.state.modalIsVisible" name="v"/>
+  <Header />
+  <markdownModal v-if="store.state.modalIsVisible" name="v" />
  <router-view></router-view>
-
 </template>

-<style scoped>
-
-</style>
+<style scoped></style>
--- a/src/assets/styles/dropdown.css
+++ b/src/assets/styles/dropdown.css
@ -1,41 +1,47 @@
 /* Dropdown Button */
 .dropbtn {
-    background-color: #04AA6D;
-    color: white;
-    padding: 16px;
-    font-size: 16px;
-    border: none;
-  }
-  
-  /* The container <div> - needed to position the dropdown content */
-  .dropdown {
-    position: relative;
-    display: inline-block;
-  }
-  
-  /* Dropdown Content (Hidden by Default) */
-  .dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #f1f1f1;
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
-  }
-  
-  /* Links inside the dropdown */
-  .dropdown-content a {
-    color: black;
-    padding: 12px 16px;
-    text-decoration: none;
-    display: block;
-  }
-  
-  /* Change color of dropdown links on hover */
-  .dropdown-content a:hover {background-color: #ddd;}
-  
-  /* Show the dropdown menu on hover */
-  .dropdown:hover .dropdown-content {display: block;}
-  
-  /* Change the background color of the dropdown button when the dropdown content is shown */
-  .dropdown:hover .dropbtn {background-color: #3e8e41;}
+  background-color: #04aa6d;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {
+  background-color: #ddd;
+}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+  background-color: #3e8e41;
+}
--- a/src/components/admin.vue
+++ b/src/components/admin.vue
@ -1,10 +1,5 @@
-<script setup>
-</script>
+<script setup></script>

-<template>
+<template></template>

-</template>
-
-<style scoped>
-
-</style>
+<style scoped></style>
--- a/src/components/crsl.vue
+++ b/src/components/crsl.vue
@ -1,28 +1,27 @@
 <script setup>
 import { onMounted } from 'vue';
-onMounted(()=>{
-  $(document).ready(function(){
-    const slider = $("#slider").owlCarousel({
-        items:4,
-        loop:true,
-        autoplay:true,
-        autoplayTimeout:100,
+onMounted(() => {
+  $(document).ready(function () {
+    const slider = $('#slider').owlCarousel({
+      items: 4,
+      loop: true,
+      autoplay: true,
+      autoplayTimeout: 100,
    });
  });
 });
 </script>
 <template>
-    <div class="owl-carousel owl-theme" id="slider">
-        <div class="slide"><img src="src\assets\tyan.jpeg" alt=""></div>
-        <div class="slide"><img src="src\assets\tyan.jpeg" alt=""></div>
-        <div class="slide"><img src="src\assets\tyan.jpeg" alt=""></div>
-        <div class="slide"><img src="src\assets\tyan.jpeg" alt=""></div>
-    </div>
-
+  <div class="owl-carousel owl-theme" id="slider">
+    <div class="slide"><img src="src\assets\tyan.jpeg" alt="" /></div>
+    <div class="slide"><img src="src\assets\tyan.jpeg" alt="" /></div>
+    <div class="slide"><img src="src\assets\tyan.jpeg" alt="" /></div>
+    <div class="slide"><img src="src\assets\tyan.jpeg" alt="" /></div>
+  </div>
 </template>
 <style scoped>
-.owl-carousel{
-    width: 100%;
-    height: 130px;
+.owl-carousel {
+  width: 100%;
+  height: 130px;
 }
-</style>
+</style>
--- a/src/components/header.vue
+++ b/src/components/header.vue
@ -1,25 +1,25 @@
 <script setup>
-import { ref, onMounted} from 'vue';
+import { ref, onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
 import Navbar from './navbar.vue';
 import { api } from '../main.js';
+import { Bvi } from 'bvi';
 defineProps({
  msg: String,
-})
+});

-
-
-const count = ref(0)
+const count = ref(0);
+const bvi = new Bvi();
+console.log(bvi);
 </script>

 <template>
  <header>
    <div class="headerTop">
+      <a href="#" class="bvi-open bvi-show">version for visually impaired</a>
      <div class="header__inner">
        <div class="header__inner__left">
-          <a class="topBtn">
-            
-          </a>
+          <a class="topBtn"> </a>
        </div>
        <div class="header__inner__right">
          <a href="socBtn"></a>
@ -27,57 +27,68 @@ const count = ref(0)
          <a href="socBtn"></a>
          <a href="socBtn"></a>
        </div>
-
      </div>
    </div>
    <div class="headerMain">
-        <img src="src\assets\logo.png" alt="logo">
-        <div class="title">
-          <strong>
-            Муниципальное<br/>общеобразовательное<br/>бюджетное учреждение<br/>средняя<br/>общеобразовательная школа<br/>№8<br/>имени А.Г. Ломакина
-          </strong>
-        </div>
-        <div class="contacts">  
-          <div class="geolocation c">
-            <Icon icon="ic:baseline-mode-of-travel" color="#c1170a" class="icon"/>
-            <div class="">347922, Ростовская область,<br/> г. Таганрог,<br/> пер. Некрасовский, 73</div>
-          </div>
-          <div class="phone c">
-            <Icon icon="ic:baseline-call" color="#c1170a" class="icon"/>
-            <div class="text">+7 (8634) 39-31-65</div>
-          </div>
-          <div class="mail c">
-            <Icon icon="ic:baseline-attach-email" color="#c1170a" class="icon" />
-            <div class="text">sch8@tagobr.ru</div>
+      <img src="src\assets\logo.png" alt="logo" />
+      <div class="title">
+        <strong>
+          Муниципальное<br />общеобразовательное<br />бюджетное учреждение<br />средняя<br />общеобразовательная
+          школа<br />№8<br />имени А.Г. Ломакина
+        </strong>
+      </div>
+      <div class="contacts">
+        <div class="geolocation c">
+          <Icon
+            icon="ic:baseline-mode-of-travel"
+            color="#c1170a"
+            class="icon"
+          />
+          <div class="">
+            347922, Ростовская область,<br />
+            г. Таганрог,<br />
+            пер. Некрасовский, 73
          </div>
        </div>
+        <div class="phone c">
+          <Icon icon="ic:baseline-call" color="#c1170a" class="icon" />
+          <div class="text">+7 (8634) 39-31-65</div>
+        </div>
+        <div class="mail c">
+          <Icon icon="ic:baseline-attach-email" color="#c1170a" class="icon" />
+          <div class="text">sch8@tagobr.ru</div>
+        </div>
+      </div>
    </div>
    <nav>
-      <Navbar/>
+      <Navbar />
    </nav>
  </header>
 </template>

 <style scoped>
-header{
-  display:flex;
+header {
+  display: flex;
  flex-direction: column;
 }
-.icon{width: 30px;height: 30px;}
+.icon {
+  width: 30px;
+  height: 30px;
+}
 .headerTop {
  width: 100%;
  height: 60px;
-  background-color: #0f5a35;;
+  background-color: #0f5a35;
 }
-.headerTop .header__inner{
+.headerTop .header__inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
 }
-.headerMain{
+.headerMain {
  width: 100%;
  min-height: 330px;
-  color:black;
+  color: black;
  background-color: white;
  width: 100%;
  height: 100%;
@ -86,29 +97,29 @@ header{
  align-items: center;
  justify-content: space-around;
 }
-.title{
+.title {
  color: #c1170a;
  font-size: 36px;
  line-height: 36px;
  text-align: center;
 }
-.logo{
+.logo {
  width: 140px;
  height: 140px;
 }
-.contacts{
+.contacts {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
 }
-.contacts .c{
+.contacts .c {
  display: flex;
  flex-direction: row;
  align-items: center;
 }

-nav{
+nav {
  width: 100%;
  min-height: 60px;
  background-color: #c1170a;
--- a/src/components/home.vue
+++ b/src/components/home.vue
@ -1,32 +1,40 @@
 <script setup>
 import { onMounted } from 'vue';
 import Crsl from './crsl.vue';
-
 </script>

 <template>
  <main>
-    <Crsl/>
+    <Crsl />
    <div class="describing">
-        <h1>
-            ДОБРО ПОЖАЛОВАТЬ НА НАШ САЙТ!
-        </h1>
-        <img src="src\assets\woman.jpg" alt="">
-        <div class="content">
-          <p>
-            Дорогие друзья! Я рада приветствовать всех гостей нашего сайта.
-          </p>
-          <p>
-            Школа 8 основана 18 августа 1954 года решением Исполнительного комитета Ленинского районного совет депутатов трудящихся города Таганрога, сегодня ей - 68 лет. Это возраст, когда мы можем с гордостью говорить о прошлом и строить планы для осуществления новых идей и открытий в будущем.
-          </p>
-          <p>
-            Сложившиеся еще с прошлого века традиции математического образования и патриотического воспитания не позволяют нам стоять на месте. Творческий, высокопрофессиональный коллектив педагогов в союзе с талантливыми учениками и неравнодушными родителями находится в постоянном поиске. Наша общая цель – развитие школы в контексте «культуры успеха». Мы уверены, что неуспешных людей нет. Главное – создать возможности, чтобы каждый участник образовательного процесса смог открыть в себе талант и почувствовать себя успешным.
-          </p>
-          <p>
-            На страницах нашего сайта вы сможете познакомиться с историей школы, узнать о ее традициях, изучить нормативные документы, регламентирующие основные вопросы образовательной деятельности, оперативно найти нужную и полезную информацию. Добро пожаловать на сайт «Школы Успеха»!
-          </p>
-
-        </div>
+      <h1>ДОБРО ПОЖАЛОВАТЬ НА НАШ САЙТ!</h1>
+      <img src="src\assets\woman.jpg" alt="" />
+      <div class="content">
+        <p>Дорогие друзья! Я рада приветствовать всех гостей нашего сайта.</p>
+        <p>
+          Школа 8 основана 18 августа 1954 года решением Исполнительного
+          комитета Ленинского районного совет депутатов трудящихся города
+          Таганрога, сегодня ей - 68 лет. Это возраст, когда мы можем с
+          гордостью говорить о прошлом и строить планы для осуществления новых
+          идей и открытий в будущем.
+        </p>
+        <p>
+          Сложившиеся еще с прошлого века традиции математического образования и
+          патриотического воспитания не позволяют нам стоять на месте.
+          Творческий, высокопрофессиональный коллектив педагогов в союзе с
+          талантливыми учениками и неравнодушными родителями находится в
+          постоянном поиске. Наша общая цель – развитие школы в контексте
+          «культуры успеха». Мы уверены, что неуспешных людей нет. Главное –
+          создать возможности, чтобы каждый участник образовательного процесса
+          смог открыть в себе талант и почувствовать себя успешным.
+        </p>
+        <p>
+          На страницах нашего сайта вы сможете познакомиться с историей школы,
+          узнать о ее традициях, изучить нормативные документы, регламентирующие
+          основные вопросы образовательной деятельности, оперативно найти нужную
+          и полезную информацию. Добро пожаловать на сайт «Школы Успеха»!
+        </p>
+      </div>
    </div>

    <div class="lastNews"></div>
@ -34,16 +42,16 @@ import Crsl from './crsl.vue';
 </template>

 <style scoped>
-main{
+main {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 100%;
-  min-height:calc(100vh - 450px);
+  min-height: calc(100vh - 450px);
 }
-p{
+p {
  font-size: 20px;
 }
 </style>
--- a/src/components/markdownModal.vue
+++ b/src/components/markdownModal.vue
@ -1,103 +1,120 @@
 <script setup>
-import { ref , onMounted, onUnmounted} from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import MdEditor from 'md-editor-v3';
 import { Icon } from '@iconify/vue';
 import 'md-editor-v3/lib/style.css';
-import {store} from '../main.js'
+import { store } from '../main.js';
 import { api } from '../main.js';
-defineProps(
-  {
-    name: String
-  }
-)
+defineProps({
+  name: String,
+});

 const text = ref('');
 let postName = ref('');
-const nameChange = (e) => postName = e.target.value
+const nameChange = (e) => (postName = e.target.value);
 let content = ref('');
-const contentChange = (text) => content = text;
+const contentChange = (text) => (content = text);

-const createLinker = async() => {
-  try{
-    await api.createLinker({title:postName,parent:store.state.parent},'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InRvb3IiLCJzdWIiOiJhZG1pbiIsImlhdCI6MTY3NzkyMDM3NiwiZXhwIjoxNjc4MDA2Nzc2fQ.onK9420loPa_6-K68Hfvifn4X04KuXP-dnCwLCvdD1c')
-    console.log(123)
-  }catch{
-    console.log(store.state.parent)
+const createLinker = async () => {
+  try {
+    await api.createLinker(
+      { title: postName, parent: store.state.parent },
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InRvb3IiLCJzdWIiOiJhZG1pbiIsImlhdCI6MTY3NzkyMDM3NiwiZXhwIjoxNjc4MDA2Nzc2fQ.onK9420loPa_6-K68Hfvifn4X04KuXP-dnCwLCvdD1c',
+    );
+    console.log(123);
+  } catch {
+    console.log(store.state.parent);
  }
-
 };

 const width = ref(600);
-    const height = ref(400);
-    const isResizing = ref(false);
-    const startX = ref(0);
-    const startY = ref(0);
+const height = ref(400);
+const isResizing = ref(false);
+const startX = ref(0);
+const startY = ref(0);

-const close = () =>{
-  store.commit("setInvisible")
-}
+const close = () => {
+  store.commit('setInvisible');
+};
 function startResize(e) {
-      isResizing.value = true;
-      startX.value = e.clientX;
-      startY.value = e.clientY;
-    }
+  isResizing.value = true;
+  startX.value = e.clientX;
+  startY.value = e.clientY;
+}

-    function stopResize() {
-      isResizing.value = false;
-    }
+function stopResize() {
+  isResizing.value = false;
+}

-    function resize(e) {
-      if (isResizing.value) {
-        const newWidth = width.value + (e.clientX - startX.value);
-        const newHeight = height.value + (e.clientY - startY.value);
-        width.value = newWidth > 100 ? newWidth : 100;
-        height.value = newHeight > 100 ? newHeight : 100;
-        startX.value = e.clientX;
-        startY.value = e.clientY;
-      }
-    }
-    onMounted(() => {
-      document.addEventListener('mousemove', resize);
-      document.addEventListener('mouseup', stopResize);
-    });
-
-    onUnmounted(() => {
-      document.removeEventListener('mousemove', resize);
-      document.removeEventListener('mouseup', stopResize);
-    });
+function resize(e) {
+  if (isResizing.value) {
+    const newWidth = width.value + (e.clientX - startX.value);
+    const newHeight = height.value + (e.clientY - startY.value);
+    width.value = newWidth > 100 ? newWidth : 100;
+    height.value = newHeight > 100 ? newHeight : 100;
+    startX.value = e.clientX;
+    startY.value = e.clientY;
+  }
+}
+onMounted(() => {
+  document.addEventListener('mousemove', resize);
+  document.addEventListener('mouseup', stopResize);
+});

+onUnmounted(() => {
+  document.removeEventListener('mousemove', resize);
+  document.removeEventListener('mouseup', stopResize);
+});
 </script>

 <template>
-  <div class="modalWindow" :style="{ width: width + 'px', height: height + 'px' }">
+  <div
+    class="modalWindow"
+    :style="{ width: width + 'px', height: height + 'px' }"
+  >
    <div class="modalTop">
      <div class="modalTopInfo">
        <h1>Создание елемента в {{ store.state.parent }}</h1>
        <button type="button" class="btn-close" aria-label="Close" @click="close"></button>
      </div>
-        <div class="input-group mb-3">
+      <div class="input-group mb-3">
        <span class="input-group-text" id="basic-addon1">Название</span>
-        <input type="text" class="form-control" placeholder="название елемента" aria-label="название" aria-describedby="basic-addon1" v-bind:value="postName" @change="nameChange">
+        <input
+          type="text"
+          class="form-control"
+          placeholder="название елемента"
+          aria-label="название"
+          aria-describedby="basic-addon1"
+          v-bind:value="postName"
+          @change="nameChange"
+        />
      </div>
    </div>
-    <div class="postName">
-     
+    <div class="postName"></div>
+    <md-editor
+      v-model="text"
+      language="en-US"
+      no-prettier="true"
+      @onChange="contentChange"
+      toolbarsExclude="['save','preview','htmlPreview','catalog','github']"
+    />
+    <button type="button" class="btn btn-outline-success" @click="createLinker">
+      Success
+    </button>
+    <div class="resize-handle" @mousedown="startResize">
+      <Icon icon="ic:outline-arrow-drop-down" />
    </div>
-    <md-editor v-model="text" language="en-US" no-prettier="true" @onChange="contentChange" toolbarsExclude = "['save','preview','htmlPreview','catalog','github']"/>
-    <button type="button" class="btn btn-outline-success" @click="createLinker">Success</button>
-    <div class="resize-handle" @mousedown="startResize"><Icon icon="ic:outline-arrow-drop-down" /></div>
  </div>
 </template>

-
 <style scoped>
-h1{
+h1 {
  font-size: 30px;
 }
-.modalWindow{
+.modalWindow {
  z-index: 1001;
  margin: auto;
-  position:absolute;
+  position: absolute;
  position: fixed;
  top: 25%;
  left: 25%;
@ -110,25 +127,25 @@ h1{
  background-color: white;
  border-radius: 5px;
 }
-.modalTop{
-  background-color:blueviolet;
+.modalTop {
+  background-color: blueviolet;
  display: flex;
  flex-direction: column;
  align-items: center;
-  justify-content:start;
+  justify-content: start;
  width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding: 5px;
 }
-.modalTopInfo{
+.modalTopInfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
 }
-.btn-outline-success{
+.btn-outline-success {
  margin: 10px 0px;
 }
 </style>
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@ -1,5 +1,5 @@
 <script setup>
-import { Icon } from '@iconify/vue'; 
+import { Icon } from '@iconify/vue';
 import markdownModal from './markdownModal.vue';
 import { store } from '../main.js';
 import { ref, onMounted } from 'vue';
@ -13,12 +13,9 @@ let linkers = ref()

 onMounted(async()=>{
  linkers = await api.getLinkers()
-  console.log(linkers)
 })
 </script>

-
-
 <template>
    <div class="dropdown">
        <button class="dropbtn">ГЛАВНАЯ</button>
@ -34,59 +31,67 @@ onMounted(async()=>{
 </template>

 <style scoped>
-  /* Dropdown Button */
+/* Dropdown Button */
 .dropbtn {
-    z-index: 1000;
-    background-color: #c1170a;
-    color: white;
-    padding: 16px;
-    font-size: 16px;
-    border: none;
-    min-width: 100%;
-    height: 100%;
-    font-weight: 700;
-  }
-  
-  /* The container <div> - needed to position the dropdown content */
-  .dropdown {
-    z-index: 1000;
-    position: relative;
-    display: inline-block;
-    min-width: 160px;
-  }
+  z-index: 1000;
+  background-color: #c1170a;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+  min-width: 100%;
+  height: 100%;
+  font-weight: 700;
+}

-  
-  /* Dropdown Content (Hidden by Default) */
-  .dropdown-content {
-    z-index: 1000;
-    display: none;
-    position: absolute;
-    background-color: #c1170a;
-    color: white;
-    min-width: 100%;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
-  }
-  
-  /* Links inside the dropdown */
-  .dropdown-content a,.add {
-    color: white;
-    z-index: 1000;
-    padding: 12px 16px;
-    text-decoration: none;
-    display: flex;
-    flex-direction: row;
-    justify-content: start;
-    align-items: center;
-  }
-  
-  /* Change color of dropdown links on hover */
-  .dropdown-content a:hover {background-color: #911000}
-  .dropdown-content .add:hover{background-color: #911000;}
-  
-  /* Show the dropdown menu on hover */
-  .dropdown:hover .dropdown-content {display: block;}
-  
-  /* Change the background color of the dropdown button when the dropdown content is shown */
-  .dropdown:hover .dropbtn {background-color: #911000;}
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  z-index: 1000;
+  position: relative;
+  display: inline-block;
+  min-width: 160px;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  z-index: 1000;
+  display: none;
+  position: absolute;
+  background-color: #c1170a;
+  color: white;
+  min-width: 100%;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a,
+.add {
+  color: white;
+  z-index: 1000;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {
+  background-color: #911000;
+}
+.dropdown-content .add:hover {
+  background-color: #911000;
+}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+  background-color: #911000;
+}
 </style>
--- a/src/components/post.vue
+++ b/src/components/post.vue
@ -5,78 +5,74 @@ import { Icon } from '@iconify/vue';
 <template>
  <main>
    <div class="sideBar">
-        <ul>
-            <li>
-                hgdhjfj
-            </li>
-            <li>
-                hgdhjfj
-            </li>
-            <li>
-                hgdhjfj
-            </li>
-        </ul>
+      <ul>
+        <li>hgdhjfj</li>
+        <li>hgdhjfj</li>
+        <li>hgdhjfj</li>
+      </ul>
    </div>
    <div class="info">
-        <div class="infoTitle">
-            Документы
-            <div class="redact"><Icon icon="ic:baseline-border-color" />Редактировать</div>
+      <div class="infoTitle">
+        Документы
+        <div class="redact">
+          <Icon icon="ic:baseline-border-color" />Редактировать
        </div>
+      </div>
    </div>
  </main>
 </template>

 <style scoped>
-main{
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding:20px;
-    min-height:calc(100vh - 450px);
+main {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 20px;
+  min-height: calc(100vh - 450px);
 }
-.info{
-    width: 80%;
-    min-height: calc(80vh - 450px);
-    background-color: #c7e3c7;
-    border-radius: 3px;
+.info {
+  width: 80%;
+  min-height: calc(80vh - 450px);
+  background-color: #c7e3c7;
+  border-radius: 3px;
 }
-.infoTitle{
-    background-color: #535954;
-    color: #fff;
-    padding: 8px 18px;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    line-height: 30px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+.infoTitle {
+  background-color: #535954;
+  color: #fff;
+  padding: 8px 18px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  line-height: 30px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
-.sideBar{
-    width: 15%;
-    display: flex;
-    flex-direction: column;
-    background-color: #0f5a35;
-    padding:0px 0px;
+.sideBar {
+  width: 15%;
+  display: flex;
+  flex-direction: column;
+  background-color: #0f5a35;
+  padding: 0px 0px;
 }
-ul{
-    text-decoration: none;
-    list-style: none;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 0;
+ul {
+  text-decoration: none;
+  list-style: none;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
 }
-li{
-    width: 100%;
-    min-height: 36px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding-left: 15px;
+li {
+  width: 100%;
+  min-height: 36px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 15px;
 }
-li:hover{
-    background-color: #ff0000;
+li:hover {
+  background-color: #ff0000;
 }
 </style>
--- a/src/crsl/owl.carousel.min.js
+++ b/src/crsl/owl.carousel.min.js
--- a/src/crsl/styles/owl.carousel.css
+++ b/src/crsl/styles/owl.carousel.css
@ -1 +1,179 @@
-.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
+.owl-carousel,
+.owl-carousel .owl-item {
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+}
+.owl-carousel {
+  display: none;
+  width: 100%;
+  z-index: 1;
+}
+.owl-carousel .owl-stage {
+  position: relative;
+  -ms-touch-action: pan-Y;
+  touch-action: manipulation;
+  -moz-backface-visibility: hidden;
+}
+.owl-carousel .owl-stage:after {
+  content: '.';
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+.owl-carousel .owl-stage-outer {
+  position: relative;
+  overflow: hidden;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+.owl-carousel .owl-item,
+.owl-carousel .owl-wrapper {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+}
+.owl-carousel .owl-item {
+  min-height: 1px;
+  float: left;
+  -webkit-backface-visibility: hidden;
+  -webkit-touch-callout: none;
+}
+.owl-carousel .owl-item img {
+  display: block;
+  width: 100%;
+}
+.owl-carousel .owl-dots.disabled,
+.owl-carousel .owl-nav.disabled {
+  display: none;
+}
+.no-js .owl-carousel,
+.owl-carousel.owl-loaded {
+  display: block;
+}
+.owl-carousel .owl-dot,
+.owl-carousel .owl-nav .owl-next,
+.owl-carousel .owl-nav .owl-prev {
+  cursor: pointer;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.owl-carousel .owl-nav button.owl-next,
+.owl-carousel .owl-nav button.owl-prev,
+.owl-carousel button.owl-dot {
+  background: 0 0;
+  color: inherit;
+  border: none;
+  padding: 0 !important;
+  font: inherit;
+}
+.owl-carousel.owl-loading {
+  opacity: 0;
+  display: block;
+}
+.owl-carousel.owl-hidden {
+  opacity: 0;
+}
+.owl-carousel.owl-refresh .owl-item {
+  visibility: hidden;
+}
+.owl-carousel.owl-drag .owl-item {
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.owl-carousel.owl-grab {
+  cursor: move;
+  cursor: grab;
+}
+.owl-carousel.owl-rtl {
+  direction: rtl;
+}
+.owl-carousel.owl-rtl .owl-item {
+  float: right;
+}
+.owl-carousel .animated {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+.owl-carousel .owl-animated-in {
+  z-index: 0;
+}
+.owl-carousel .owl-animated-out {
+  z-index: 1;
+}
+.owl-carousel .fadeOut {
+  animation-name: fadeOut;
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.owl-height {
+  transition: height 0.5s ease-in-out;
+}
+.owl-carousel .owl-item .owl-lazy {
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+.owl-carousel .owl-item .owl-lazy:not([src]),
+.owl-carousel .owl-item .owl-lazy[src^=''] {
+  max-height: 0;
+}
+.owl-carousel .owl-item img.owl-lazy {
+  transform-style: preserve-3d;
+}
+.owl-carousel .owl-video-wrapper {
+  position: relative;
+  height: 100%;
+  background: #000;
+}
+.owl-carousel .owl-video-play-icon {
+  position: absolute;
+  height: 80px;
+  width: 80px;
+  left: 50%;
+  top: 50%;
+  margin-left: -40px;
+  margin-top: -40px;
+  background: url(owl.video.play.png) no-repeat;
+  cursor: pointer;
+  z-index: 1;
+  -webkit-backface-visibility: hidden;
+  transition: transform 0.1s ease;
+}
+.owl-carousel .owl-video-play-icon:hover {
+  -ms-transform: scale(1.3, 1.3);
+  transform: scale(1.3, 1.3);
+}
+.owl-carousel .owl-video-playing .owl-video-play-icon,
+.owl-carousel .owl-video-playing .owl-video-tn {
+  display: none;
+}
+.owl-carousel .owl-video-tn {
+  opacity: 0;
+  height: 100%;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  transition: opacity 0.4s ease;
+}
+.owl-carousel .owl-video-frame {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+}
--- a/src/crsl/styles/owl.theme.css
+++ b/src/crsl/styles/owl.theme.css
@ -1 +1,48 @@
-.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
+.owl-theme .owl-dots,
+.owl-theme .owl-nav {
+  text-align: center;
+  -webkit-tap-highlight-color: transparent;
+}
+.owl-theme .owl-nav {
+  margin-top: 10px;
+}
+.owl-theme .owl-nav [class*='owl-'] {
+  color: #fff;
+  font-size: 14px;
+  margin: 5px;
+  padding: 4px 7px;
+  background: #d6d6d6;
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 3px;
+}
+.owl-theme .owl-nav [class*='owl-']:hover {
+  background: #869791;
+  color: #fff;
+  text-decoration: none;
+}
+.owl-theme .owl-nav .disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.owl-theme .owl-nav.disabled + .owl-dots {
+  margin-top: 10px;
+}
+.owl-theme .owl-dots .owl-dot {
+  display: inline-block;
+  zoom: 1;
+}
+.owl-theme .owl-dots .owl-dot span {
+  width: 10px;
+  height: 10px;
+  margin: 5px 7px;
+  background: #d6d6d6;
+  display: block;
+  -webkit-backface-visibility: visible;
+  transition: opacity 0.2s ease;
+  border-radius: 30px;
+}
+.owl-theme .owl-dots .owl-dot.active span,
+.owl-theme .owl-dots .owl-dot:hover span {
+  background: #869791;
+}
--- a/src/main.js
+++ b/src/main.js
@ -1,35 +1,35 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
 import * as VueRouter from 'vue-router';
 import { routes } from './routes';
 import { createStore } from 'vuex';
-import Api from './api/index.js' ;
+import Api from './api/index.js';

-export const api = new Api.Api('http://localhost:4000')
+export const api = new Api.Api('http://localhost:4000');

 export const store = createStore({
-    state () {
-      return {
-        modalIsVisible: false,
-        parent:'',
-      }
+  state() {
+    return {
+      modalIsVisible: false,
+      parent: '',
+    };
+  },
+  mutations: {
+    setVisible(state) {
+      state.modalIsVisible = true;
    },
-    mutations: {
-      setVisible (state) {
-        state.modalIsVisible = true;
-      },
-      setInvisible(state) {
-        state.modalIsVisible = false;
-      },
-      getParent(state,value) {
-        state.parent = value;
-      }
-    }
-  })
+    setInvisible(state) {
+      state.modalIsVisible = false;
+    },
+    getParent(state, value) {
+      state.parent = value;
+    },
+  },
+});

 const router = VueRouter.createRouter({
-    history: VueRouter.createWebHashHistory(),
-    routes,
-})
-createApp(App).use(router).mount('#app')
+  history: VueRouter.createWebHashHistory(),
+  routes,
+});
+createApp(App).use(router).mount('#app');
--- a/src/routes.js
+++ b/src/routes.js
@ -1,20 +1,20 @@
-import Post from './components/post.vue'
-import Home from './components/home.vue'
-import Markdown from './components/markdownModal.vue'
+import Post from './components/post.vue';
+import Home from './components/home.vue';
+import Markdown from './components/markdownModal.vue';
 export const routes = [
-    {
-        name: 'home',
-        path: '/',
-        component: Home
-    },
-    {
-        name: 'post',
-        path: encodeURI('/пост'),
-        component: Post
-    },
-    {
-        name: 'markdown',
-        path: '/create',
-        component: Markdown
-    },
-];
+  {
+    name: 'home',
+    path: '/',
+    component: Home,
+  },
+  {
+    name: 'post',
+    path: encodeURI('/пост'),
+    component: Post,
+  },
+  {
+    name: 'markdown',
+    path: '/create',
+    component: Markdown,
+  },
+];
--- a/src/style.css
+++ b/src/style.css
@ -14,10 +14,10 @@
  -webkit-text-size-adjust: 100%;
 }

-*{
+* {
  box-sizing: border-box;
 }
-body{
+body {
  margin: 0;
  background-color: #aad4aa;
  width: 100%;
--- a/vite.config.js
+++ b/vite.config.js
@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';

 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [vue()],
-})
+});