documentation, limit for serials length, fixes

static/styles/main.css

@@ -358,6 +358,25 @@ header img {
   margin: 30px 0 35px 44px;
 }
 
+.download-file {
+  display: flex;
+  margin: 15px 15px 15px 44px;
+  padding: 10px;
+  border-radius: 7px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  justify-content: left;
+  align-items: center;
+  gap: 10px;
+  width: 450px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.download-file:hover {
+  background: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
 @keyframes loader_5191 {
   from {
     opacity: 0;
@@ -382,7 +401,7 @@ header img {
 }
 
 .square {
-  background: #8086F9;
+  background: #8086f9;
   width: 10px;
   height: 10px;
   position: absolute;
@@ -489,7 +508,6 @@ header img {
   animation: loader_5191 675ms ease-in-out 600ms infinite;
 }
 
-
 .content .organisation {
   width: 250px;
   display: inline-block;
@@ -547,7 +565,8 @@ header img {
 }
 
 @keyframes moveText {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateX(5%);
   }
   50% {
@@ -806,7 +825,7 @@ header img {
 .add-user-form h1 {
   margin: 0;
   font-size: 30px;
-  color: rgba(0, 0, 0, 0.70);
+  color: rgba(0, 0, 0, 0.7);
   margin-bottom: 10px;
 }
 
@@ -1131,7 +1150,7 @@ tr:nth-child(even) {
   padding: 5px 16px;
   border-radius: 50%;
   font-size: 20px;
-  background: #FFFFFF69;
+  background: #ffffff69;
 }
 
 #info-icon.right {
@@ -1803,7 +1822,7 @@ input[type="datetime-local"] {
   top: 0;
   left: -20px;
   border-radius: 15px;
-  background-color: #FFFFFF99;
+  background-color: #ffffff99;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -2112,7 +2131,7 @@ input[type="datetime-local"] {
 }
 
 .radio-input:checked + .radio-label {
-  background: rgba(0, 0, 0, 0.10);
+  background: rgba(0, 0, 0, 0.1);
 }
 
 .stream-map {
@@ -2202,13 +2221,13 @@ input[type="datetime-local"] {
 }
 
 .stream-cameras {
-  background: #F5F5FA;
+  background: #f5f5fa;
   position: absolute;
   bottom: 0;
   right: 0;
   width: calc(100% - 345px - 2px);
   z-index: 3;
-  transition: all 0.3s ease-in-out
+  transition: all 0.3s ease-in-out;
 }
 
 .stream-cameras button {
@@ -2223,7 +2242,7 @@ input[type="datetime-local"] {
   filter: brightness(0.9);
 }
 .cameras {
-  background: #F5F5FA;
+  background: #f5f5fa;
   position: absolute;
   top: 0;
   right: 0;
@@ -2265,7 +2284,6 @@ input[type="datetime-local"] {
   display: block;
 }
 
-
 .stream-video-container video {
   height: auto;
   box-sizing: border-box;
@@ -2343,7 +2361,6 @@ input[type="datetime-local"] {
   height: 25%;
   padding: 0;
   border: 1px solid white;
-  
 }
 
 .report-video-container {
@@ -2376,7 +2393,6 @@ input[type="datetime-local"] {
   border-right: 2px solid rgba(245, 245, 250, 1);
 }
 
-
 .edit-container {
   position: fixed;
   width: 100%;
@@ -2496,7 +2512,7 @@ input[type="datetime-local"] {
   font-size: 16px;
   font-weight: 600;
   margin: 0;
-  color: rgba(0, 0, 0, 0.90);
+  color: rgba(0, 0, 0, 0.9);
 }
 
 #prevMonth {
@@ -2507,7 +2523,8 @@ input[type="datetime-local"] {
   background-image: url(../img/right.svg);
 }
 
-#prevMonth, #nextMonth {
+#prevMonth,
+#nextMonth {
   background-color: transparent;
   border: none;
   height: 18px;
@@ -2520,7 +2537,7 @@ input[type="datetime-local"] {
   justify-content: space-around;
   padding: 15px 0;
   font-size: 14px;
-  color: #7E818C;
+  color: #7e818c;
 }
 
 .dates {
@@ -2542,11 +2559,11 @@ input[type="datetime-local"] {
 }
 
 .date:hover {
-  background-color: #8086F939;
+  background-color: #8086f939;
 }
 
 .date.selected {
-  background-color: #8086F9;
+  background-color: #8086f9;
   color: white;
 }
 
@@ -2603,8 +2620,8 @@ input[type="time"]::-webkit-calendar-picker-indicator {
 .video-time input[type="time"] {
   padding: 6px;
   border-radius: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.10);
+  border: 1px solid rgba(0, 0, 0, 0.1);
-  background: #FFF;
+  background: #fff;
   font-size: 16px;
   outline: none;
   cursor: text;
@@ -2613,13 +2630,13 @@ input[type="time"]::-webkit-calendar-picker-indicator {
 
 input[type="time"]:hover,
 input[type="time"]:focus {
-  border: 1px solid rgba(0, 0, 0, 0.30);
+  border: 1px solid rgba(0, 0, 0, 0.3);
 }
 
 #adminTable {
   border-collapse: collapse;
   overflow: hidden;
-  box-shadow: 0 0 0 2px #F5F5FA;
+  box-shadow: 0 0 0 2px #f5f5fa;
   border-radius: 20px;
   background-color: white;
   -moz-border-radius: 20px;
@@ -2628,7 +2645,7 @@ input[type="time"]:focus {
 
 #adminTable th {
   background-color: white !important;
-  color: rgba(0, 0, 0, 0.80);
+  color: rgba(0, 0, 0, 0.8);
   font-size: 24px;
   font-weight: 600;
   padding: 18px 18px 12px 28px;
@@ -2636,7 +2653,7 @@ input[type="time"]:focus {
 }
 
 #adminTable td {
-  color: rgba(0, 0, 0, 0.60);
+  color: rgba(0, 0, 0, 0.6);
   font-size: 18px;
   padding: 14px 18px 14px 28px;
   border-bottom: 0;
@@ -2644,11 +2661,11 @@ input[type="time"]:focus {
 
 .name .user-id {
   padding: 0 11px;
-  color: rgba(0, 0, 0, 0.60);
+  color: rgba(0, 0, 0, 0.6);
   font-size: 15px !important;
   font-weight: 500;
   border-radius: 20px;
-  border: 1px solid rgba(0, 0, 0, 0.10);
+  border: 1px solid rgba(0, 0, 0, 0.1);
   background: rgba(0, 0, 0, 0.05);
   margin-left: 15px;
   height: 30px !important;

static/templates/admin/user.html

@@ -270,6 +270,22 @@
               }
           });
       });
+      document.addEventListener('DOMContentLoaded', function () {
+            var checkboxLabels = document.querySelectorAll('.checkbox-label');
+
+            checkboxLabels.forEach(function (label) {
+                var labelText = label.textContent.trim();
+
+                if (labelText.length > 10) {
+                    var checkmarkDiv = document.createElement('div');
+                    checkmarkDiv.className = 'checkmark';
+
+                    label.textContent = '';
+                    label.appendChild(checkmarkDiv);
+                    label.appendChild(document.createTextNode(labelText.slice(0, 9) + '...'));
+                }
+            });
+        });
   
     </script>
 

static/templates/devices/device.html

@@ -609,6 +609,9 @@
     xhr.onload = function() {
       if (xhr.status === 200) {
         showMessage("Данные успешно обновлены", true);
+      } else if (xhr.status === 400) {
+        showMessage("Устройство выключено", false);
+        console.error("Ошибка:", xhr.status);
       } else {
         showMessage("Не удалось обновить данные", false);
                     console.error("Ошибка:", xhr.status);

static/templates/devices/index.html

@@ -226,6 +226,23 @@
           });
       });
 
+      document.addEventListener('DOMContentLoaded', function () {
+            var checkboxLabels = document.querySelectorAll('.checkbox-label');
+
+            checkboxLabels.forEach(function (label) {
+                var labelText = label.textContent.trim();
+
+                if (labelText.length > 10) {
+                    var checkmarkDiv = document.createElement('div');
+                    checkmarkDiv.className = 'checkmark';
+
+                    label.textContent = '';
+                    label.appendChild(checkmarkDiv);
+                    label.appendChild(document.createTextNode(labelText.slice(0, 9) + '...'));
+                }
+            });
+        });
+  
     </script>
 
   

static/templates/devices/system.html

@@ -1212,6 +1212,9 @@ const requestBody = {
   $("body").css("overflow", "auto");
   showMessage("Данные успешно обновлены", true);
   console.log('PUT запрос выполнен успешно');
+} else if (response.status === 400) {
+  showMessage("Устройство выключено.", false);
+  console.error('Устройство выключено');
 } else {
   showMessage("Не удалось обновить данные", false);
   console.error('Ошибка при выполнении PUT запроса');
@@ -1273,6 +1276,9 @@ const requestBody = {
   $("body").css("overflow", "auto");
   showMessage("Данные успешно обновлены", true);
   console.log('PUT запрос выполнен успешно');
+} else if (response.status === 400) {
+  showMessage("Устройство выключено.", false);
+  console.error('Устройство выключено');
 } else {
   showMessage("Не удалось обновить данные", false);
   console.error('Ошибка при выполнении PUT запроса');
@@ -1334,6 +1340,9 @@ const requestBody = {
   $("body").css("overflow", "auto");
   showMessage("Данные успешно обновлены", true);
   console.log('PUT запрос выполнен успешно');
+} else if (response.status === 400) {
+  showMessage("Устройство выключено.", false);
+  console.error('Устройство выключено');
 } else {
   showMessage("Не удалось обновить данные", false);
   console.error('Ошибка при выполнении PUT запроса');
@@ -1404,6 +1413,9 @@ const requestBody = {
   $("body").css("overflow", "auto");
   showMessage("Данные успешно обновлены", true);
   console.log('PUT запрос выполнен успешно');
+} else if (response.status === 400) {
+  showMessage("Устройство выключено.", false);
+  console.error('Устройство выключено');
 } else {
   showMessage("Не удалось обновить данные", false);
   console.error('Ошибка при выполнении PUT запроса');
@@ -1463,6 +1475,9 @@ const requestBody = {
   $("body").css("overflow", "auto");
   showMessage("Данные успешно обновлены", true);
   console.log('PUT запрос выполнен успешно');
+} else if (response.status === 400) {
+  showMessage("Устройство выключено.", false);
+  console.error('Устройство выключено');
 } else {
   showMessage("Не удалось обновить данные", false);
   console.error('Ошибка при выполнении PUT запроса');
@@ -1518,6 +1533,9 @@ if (response.ok) {
   $("body").css("overflow", "auto");
   showMessage("Данные успешно обновлены", true);
   console.log('PUT запрос выполнен успешно');
+} else if (response.status === 400) {
+  showMessage("Устройство выключено.", false);
+  console.error('Устройство выключено');
 } else {
   showMessage("Не удалось обновить данные", false);
   console.error('Ошибка при выполнении PUT запроса');
@@ -1567,6 +1585,9 @@ if (response.ok) {
   $("body").css("overflow", "auto");
   showMessage("Данные успешно обновлены", true);
   console.log('PUT запрос выполнен успешно');
+} else if (response.status === 400) {
+  showMessage("Устройство выключено.", false);
+  console.error('Устройство выключено');
 } else {
   showMessage("Не удалось обновить данные", false);
   console.error('Ошибка при выполнении PUT запроса');

static/templates/documentation.html

@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Настройки</title>
+    <link rel="stylesheet" href="../styles/main.css" />
+</head>
+<body>
+
+    <header>
+        <img src="../img/argus.png">
+        <h1>Аргус</h1>
+        <h2><span>/</span> {{Organisation}}</h2>
+    </header>
+
+    <section class="account-info">
+      <div id="account-main">
+          <img id="person" src="../img/person.svg">
+          <span>{{User}}</span>
+          <img id="down" src="../img/down.svg">
+          <img id="up" src="../img/up.svg">
+      </div>
+      <a href="/logout"><div id="account-additional" class="additional">Выйти</div></a>
+  </section>
+
+    
+
+
+    <section class="navigation">
+        <a href="/">
+            <div><img src="../img/chart.svg">Главная</div>
+        </a>
+        <a href="/devices">
+            <div><img src="../img/cloud.svg">Устройства</div>
+        </a>
+        <a href="/reports">
+            <div><img src="../img/bubble.svg">Отчёты</div>
+        </a>
+        <a href="/live">
+            <div><img src="../img/waves.svg">Трансляция</div>
+        </a>
+        <a href="/videos">
+            <div><img src="../img/play.svg">Записи</div>
+        </a>
+        <a href="https://forms.yandex.ru/cloud/6515ecda3e9d08f17262c332/" target="_blank">
+          <div><img src="../img/bug.svg">Собщить об ошибке</div>
+      </a>
+        {{#if isAdmin}}
+        <a class="admin-panel" href="/admin">
+            <div><img src="../img/keyboard.svg">Админка</div>
+        </a>
+        {{/if}}
+        <a class="settings" href="/settings">
+            <div class="selected"><img src="../img/gear.svg">Настройки</div>
+        </a>
+    </section>
+
+    <section class="main">
+      {{#if ifDBError}}
+      <section class="dberror">
+        <div class="erorr-container">
+          <img src="../img/warning.svg"> <br>
+          <h1>Ошибка </h1> <br>
+          <span>Не удалось получить данные из БД</span>
+          <button type="button" onclick="location.reload();">Повторить попытку</button>
+        </div>
+      </section>
+      {{/if}}
+      <section style="display: none;" class="dberror" id="deleteConfirmation" >
+        <div class="erorr-container">
+          <div id="loader" class="loader">
+            <div class="square" id="sq1"></div>
+            <div class="square" id="sq2"></div>
+            <div class="square" id="sq3"></div>
+            <div class="square" id="sq4"></div>
+            <div class="square" id="sq5"></div>
+            <div class="square" id="sq6"></div>
+            <div class="square" id="sq7"></div>
+            <div class="square" id="sq8"></div>
+            <div class="square" id="sq9"></div>
+          </div>
+          <svg id="success-mark" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="108" height="108" fill="none" viewBox="0 0 108 108">
+            <g clip-path="url(#a)">
+              <path fill="#8086F9" fill-opacity=".85" d="M54 107.947c29.541 0 54-24.5 54-53.973C108 24.447 83.488 0 53.947 0 24.459 0 0 24.447 0 53.974c0 29.474 24.512 53.973 54 53.973Zm0-8.995c-24.988 0-44.947-20.002-44.947-44.978 0-24.976 19.906-44.978 44.894-44.978S99 28.998 99 53.974c0 24.976-20.012 44.978-45 44.978Zm-5.824-19.844c1.747 0 3.23-.846 4.289-2.487l24.194-38.046c.582-1.058 1.27-2.222 1.27-3.386 0-2.382-2.117-3.916-4.341-3.916-1.323 0-2.647.847-3.653 2.381l-21.97 35.241-10.43-13.493c-1.27-1.693-2.435-2.116-3.917-2.116-2.277 0-4.077 1.852-4.077 4.18 0 1.164.477 2.276 1.218 3.28l12.917 15.875c1.324 1.747 2.753 2.487 4.5 2.487Z"/>
+            </g>
+            <defs>
+              <clipPath id="a">
+                <path fill="#fff" d="M0 0h108v108H0z"/>
+              </clipPath>
+            </defs>
+          </svg>
+          
+                <h1>Перезагрузка сервера</h1> <br>
+                <span id="status">Пожалуйста, подождите</span>
+                <button id="closeButton" style="display: none;" onclick="hideMessage()">Закрыть</button>
+        </div>
+    </section>
+  
+        <nav>
+            <a href="/settings">Настройки</a>
+            <a class="selected" href="/documentation">Документация</a>
+        </nav>
+        <section class="bg">
+            <section class="content">
+
+                <section class="for-table">
+
+                  <section class="whole-width" style="padding-bottom: 33px;">
+
+                    <h1 style="padding-bottom: 10px;">Скачать документацию</h1>
+
+                    <div class="download-file" onclick="downloadFile('user_manual')">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                      <g clip-path="url(#clip0_49_1939)">
+                      <path d="M12 23.9883C18.5647 23.9883 24 18.5439 24 11.9941C24 5.43264 18.5529 0 11.9882 0C5.43529 0 0 5.43264 0 11.9941C0 18.5439 5.44705 23.9883 12 23.9883ZM12 21.9892C6.44705 21.9892 2.01176 17.5444 2.01176 11.9941C2.01176 6.44391 6.43529 1.99903 11.9882 1.99903C17.5411 1.99903 22 6.44391 22 11.9941C22 17.5444 17.5529 21.9892 12 21.9892ZM9.19999 18.3204H15.3412C16.6471 18.3204 17.2941 17.6502 17.2941 16.3333V11.2768H12.6353C11.8235 11.2768 11.4353 10.9006 11.4353 10.0892V5.35033H9.19999C7.90587 5.35033 7.24704 6.02059 7.24704 7.33759V16.3333C7.24704 17.662 7.90587 18.3204 9.19999 18.3204ZM12.7294 10.3244H17.2235C17.1882 10.0657 16.9999 9.80698 16.6941 9.50124L13.2118 5.95004C12.9177 5.6443 12.647 5.45616 12.3882 5.42088V9.98337C12.3882 10.2068 12.5059 10.3244 12.7294 10.3244Z" fill="#8086F9"/>
+                      </g>
+                      <defs>
+                      <clipPath id="clip0_49_1939">
+                      <rect width="24" height="24" fill="white"/>
+                      </clipPath>
+                      </defs>
+                      </svg>
+                      Скачать Руководство по эксплуатации
+                    </div>
+                    <div class="download-file" onclick="downloadFile('life_cycle')">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                      <g clip-path="url(#clip0_49_1939)">
+                      <path d="M12 23.9883C18.5647 23.9883 24 18.5439 24 11.9941C24 5.43264 18.5529 0 11.9882 0C5.43529 0 0 5.43264 0 11.9941C0 18.5439 5.44705 23.9883 12 23.9883ZM12 21.9892C6.44705 21.9892 2.01176 17.5444 2.01176 11.9941C2.01176 6.44391 6.43529 1.99903 11.9882 1.99903C17.5411 1.99903 22 6.44391 22 11.9941C22 17.5444 17.5529 21.9892 12 21.9892ZM9.19999 18.3204H15.3412C16.6471 18.3204 17.2941 17.6502 17.2941 16.3333V11.2768H12.6353C11.8235 11.2768 11.4353 10.9006 11.4353 10.0892V5.35033H9.19999C7.90587 5.35033 7.24704 6.02059 7.24704 7.33759V16.3333C7.24704 17.662 7.90587 18.3204 9.19999 18.3204ZM12.7294 10.3244H17.2235C17.1882 10.0657 16.9999 9.80698 16.6941 9.50124L13.2118 5.95004C12.9177 5.6443 12.647 5.45616 12.3882 5.42088V9.98337C12.3882 10.2068 12.5059 10.3244 12.7294 10.3244Z" fill="#8086F9"/>
+                      </g>
+                      <defs>
+                      <clipPath id="clip0_49_1939">
+                      <rect width="24" height="24" fill="white"/>
+                      </clipPath>
+                      </defs>
+                      </svg>
+                      Скачать Жизненный цикл
+                    </div>
+                    <div class="download-file" onclick="downloadFile('installation')">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                      <g clip-path="url(#clip0_49_1939)">
+                      <path d="M12 23.9883C18.5647 23.9883 24 18.5439 24 11.9941C24 5.43264 18.5529 0 11.9882 0C5.43529 0 0 5.43264 0 11.9941C0 18.5439 5.44705 23.9883 12 23.9883ZM12 21.9892C6.44705 21.9892 2.01176 17.5444 2.01176 11.9941C2.01176 6.44391 6.43529 1.99903 11.9882 1.99903C17.5411 1.99903 22 6.44391 22 11.9941C22 17.5444 17.5529 21.9892 12 21.9892ZM9.19999 18.3204H15.3412C16.6471 18.3204 17.2941 17.6502 17.2941 16.3333V11.2768H12.6353C11.8235 11.2768 11.4353 10.9006 11.4353 10.0892V5.35033H9.19999C7.90587 5.35033 7.24704 6.02059 7.24704 7.33759V16.3333C7.24704 17.662 7.90587 18.3204 9.19999 18.3204ZM12.7294 10.3244H17.2235C17.1882 10.0657 16.9999 9.80698 16.6941 9.50124L13.2118 5.95004C12.9177 5.6443 12.647 5.45616 12.3882 5.42088V9.98337C12.3882 10.2068 12.5059 10.3244 12.7294 10.3244Z" fill="#8086F9"/>
+                      </g>
+                      <defs>
+                      <clipPath id="clip0_49_1939">
+                      <rect width="24" height="24" fill="white"/>
+                      </clipPath>
+                      </defs>
+                      </svg>
+                      Скачать Инструкцию по установке экземпляра ПО
+                    </div>
+                    <div class="download-file" onclick="downloadFile('functional')">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                      <g clip-path="url(#clip0_49_1939)">
+                      <path d="M12 23.9883C18.5647 23.9883 24 18.5439 24 11.9941C24 5.43264 18.5529 0 11.9882 0C5.43529 0 0 5.43264 0 11.9941C0 18.5439 5.44705 23.9883 12 23.9883ZM12 21.9892C6.44705 21.9892 2.01176 17.5444 2.01176 11.9941C2.01176 6.44391 6.43529 1.99903 11.9882 1.99903C17.5411 1.99903 22 6.44391 22 11.9941C22 17.5444 17.5529 21.9892 12 21.9892ZM9.19999 18.3204H15.3412C16.6471 18.3204 17.2941 17.6502 17.2941 16.3333V11.2768H12.6353C11.8235 11.2768 11.4353 10.9006 11.4353 10.0892V5.35033H9.19999C7.90587 5.35033 7.24704 6.02059 7.24704 7.33759V16.3333C7.24704 17.662 7.90587 18.3204 9.19999 18.3204ZM12.7294 10.3244H17.2235C17.1882 10.0657 16.9999 9.80698 16.6941 9.50124L13.2118 5.95004C12.9177 5.6443 12.647 5.45616 12.3882 5.42088V9.98337C12.3882 10.2068 12.5059 10.3244 12.7294 10.3244Z" fill="#8086F9"/>
+                      </g>
+                      <defs>
+                      <clipPath id="clip0_49_1939">
+                      <rect width="24" height="24" fill="white"/>
+                      </clipPath>
+                      </defs>
+                      </svg>
+                      Скачать Функциональные характеристики
+                    </div>
+
+                    <script>
+                      function downloadFile(file) {
+                          var fileUrl = '/download/' + file + ".pdf";
+                          
+                          var a = document.createElement('a');
+                          a.href = fileUrl;
+                          
+                          a.download = file;
+                          
+                          document.body.appendChild(a);
+                          a.click();
+                          
+                          document.body.removeChild(a);
+                      }
+                  </script>
+
+                  </section>
+
+                </section>
+
+            </section>
+        </section>
+    </section>
+
+
+
+    <script src="../scripts/jquery.min.js"></script>
+
+    <script>
+    
+
+    function performRestart() {
+      const deleteConfirmation = document.getElementById("deleteConfirmation");
+        const loader = document.getElementById("loader");
+        const status = document.getElementById("status");
+        const closeButton = document.getElementById("closeButton");
+        const mark = document.getElementById("success-mark");
+
+        loader.style.display = "block";
+        closeButton.style.display = "none";
+        deleteConfirmation.style.display = "flex";
+        mark.style.display = "none";
+
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", "/videos/restart", true);
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    showMessage("Перезагрузка успешна", true);
+                } else if (xhr.status === 500) {
+                    showMessage("При перезагрузке произошла ошибка", false);
+                } else {
+                    showMessage("Не удалось выполнить перезагрузку", false);
+                }
+            }
+        };
+        xhr.send();
+    }
+
+    function hideMessage() {
+        const deleteConfirmation = document.getElementById("deleteConfirmation");
+        deleteConfirmation.style.display = "none";
+    }
+
+    function showMessage(messageText, isSuccess) {
+        const loader = document.getElementById("loader");
+        const status = document.getElementById("status");
+        const closeButton = document.getElementById("closeButton");
+        const mark = document.getElementById("success-mark");
+
+        loader.style.display = "none";
+        status.textContent = messageText;
+        if (isSuccess) {
+            mark.style.display = "block";
+            status.style.color = "green"; 
+        } else {
+            status.style.color = "red"; 
+        }
+        closeButton.style.display = "block";
+    }
+
+
+
+    </script>
+    <script>
+        // Скрытие/Показ дополнительных меню аккаунта
+        const accountMain = document.getElementById('account-main');
+        const accountAdditional = document.getElementById('account-additional');
+        const accountUp = document.getElementById('up');
+        const accountDown = document.getElementById('down');
+        accountAdditional.style.display = 'none';
+        accountUp.style.display = 'none';
+        
+        accountMain.addEventListener('click', () => {
+          if (accountAdditional.style.display === 'none') {
+            accountAdditional.style.display = 'flex';
+            accountUp.style.display = 'unset';
+            accountDown.style.display = 'none';
+          } else {
+            accountAdditional.style.display = 'none';
+            accountUp.style.display = 'none';
+            accountDown.style.display = 'unset';
+          }
+        });
+      </script>
+      
+    
+</body>
+</html>

static/templates/live.html

@@ -208,6 +208,23 @@
           });
       });
 
+      document.addEventListener('DOMContentLoaded', function () {
+            var radioLabels = document.querySelectorAll('.radio-label');
+
+            radioLabels.forEach(function (label) {
+                var labelText = label.querySelector('.text').textContent.trim();
+
+                if (labelText.length > 10) {
+                    var textSpan = document.createElement('span');
+                    textSpan.className = 'text';
+                    
+                    textSpan.textContent = labelText.slice(0, 9) + '...';
+
+                    label.querySelector('.text').replaceWith(textSpan);
+                }
+            });
+        });
+
   </script>
 
     <script>

static/templates/reports/index.html

@@ -217,6 +217,23 @@
           });
       });
 
+      document.addEventListener('DOMContentLoaded', function () {
+            var checkboxLabels = document.querySelectorAll('.checkbox-label');
+
+            checkboxLabels.forEach(function (label) {
+                var labelText = label.textContent.trim();
+
+                if (labelText.length > 10) {
+                    var checkmarkDiv = document.createElement('div');
+                    checkmarkDiv.className = 'checkmark';
+
+                    label.textContent = '';
+                    label.appendChild(checkmarkDiv);
+                    label.appendChild(document.createTextNode(labelText.slice(0, 9) + '...'));
+                }
+            });
+        });
+      
         </script>
 
         <script>

static/templates/settings.html

@@ -99,7 +99,8 @@
     </section>
   
         <nav>
-            <a class="selected" href="/devices">Настройки</a>
+            <a class="selected" href="/settings">Настройки</a>
+            <a href="/documentation">Документация</a>
         </nav>
         <section class="bg">
             <section class="content">

static/templates/videos/export.html

@@ -271,6 +271,20 @@
           });
       });
 
+
+      document.addEventListener('DOMContentLoaded', function () {
+            var radioLabels = document.querySelectorAll('.radio-label');
+
+            radioLabels.forEach(function (label) {
+              var labelText = label.textContent.trim();
+
+                if (labelText.length > 10) {
+                    label.textContent = '';
+                    label.appendChild(document.createTextNode(labelText.slice(0, 9) + '...'));
+                }
+            });
+        });
+      
         </script>
 
     <script>

static/templates/videos/playback.html

@@ -249,6 +249,19 @@
           });
       });
 
+      document.addEventListener('DOMContentLoaded', function () {
+            var radioLabels = document.querySelectorAll('.radio-label');
+
+            radioLabels.forEach(function (label) {
+              var labelText = label.textContent.trim();
+
+                if (labelText.length > 10) {
+                    label.textContent = '';
+                    label.appendChild(document.createTextNode(labelText.slice(0, 9) + '...'));
+                }
+            });
+        });
+      
         </script>
 
     <script>