add tools styles

frontend/js/burger.js

+document.addEventListener('DOMContentLoaded', () => {
+    const burgerMenu = document.querySelector('.burger');
+    const mobileMenu = document.querySelector('.mobile-menu');
+    const closeMenu = document.querySelector('.close-menu');
+    
+
+    if (burgerMenu && mobileMenu && closeMenu) {
+        burgerMenu.addEventListener('click', () => {
+            mobileMenu.classList.add('active');
+            document.body.style.overflowY = 'hidden';
+        });
+
+        closeMenu.addEventListener('click', () => {
+            mobileMenu.classList.remove('active');
+            document.body.style.overflowY = 'auto';
+        });
+
+    }
+});

frontend/js/search.js

+
+
+document.addEventListener("DOMContentLoaded", function () {
+    const advancedOptions = document.querySelector('.advancedOptions');
+    const toggleAssistantButton = document.querySelector('.toggleAssistant');
+
+    // Авто-открытие вкладок с классом 'changed'
+    const changedToggles = document.querySelectorAll('.toggle.changed');
+    if (changedToggles.length > 0) {
+        toggleAssistantButton.setAttribute('aria-expanded', true);
+        advancedOptions.style.display = 'block';
+
+        // Открываем все измененные вкладки
+        changedToggles.forEach(function (toggle) {
+            toggle.setAttribute('aria-expanded', true);
+        });
+    }
+
+    // Обработка клика для кнопки "Настройка поиска"
+    toggleAssistantButton.addEventListener('click', function () {
+        const isExpanded = this.getAttribute('aria-expanded') === 'true';
+        this.setAttribute('aria-expanded', !isExpanded);
+        advancedOptions.style.display = isExpanded ? 'none' : 'block';
+    });
+
+    // Для каждой кнопки, которая открывает выпадающее меню
+    document.querySelectorAll('.toggle').forEach(function (toggle) {
+        const current = toggle.querySelector('.current');
+        const dropdown = toggle.querySelector('ul');
+
+        // Обработка клика по текущему элементу
+        current.addEventListener('click', function () {
+            const expanded = toggle.getAttribute('aria-expanded') === 'true' || false;
+            toggle.setAttribute('aria-expanded', !expanded);
+        });
+
+        // Закрытие выпадающего меню, если клик вне его
+        document.addEventListener('click', function (e) {
+            if (!toggle.contains(e.target)) {
+                toggle.setAttribute('aria-expanded', 'false');
+            }
+        });
+    });
+});
+

frontend/js/toc.js

+document.addEventListener("DOMContentLoaded", function () {
+    // Получаем все заголовки с классом toggle
+    const toggleHeaders = document.querySelectorAll('.toggle');
+
+    toggleHeaders.forEach(function (header) {
+        header.addEventListener('click', function () {
+            // Получаем все ul с классом toc
+            const tocItems = document.querySelectorAll('.toc');
+
+            // Проверяем текущий класс заголовка
+            if (header.classList.contains('open')) {
+                // Если открытый, скрываем и меняем классы
+                tocItems.forEach(function (item) {
+                    item.style.display = 'none'; // Скрываем элемент
+                });
+                header.classList.remove('open');
+                header.classList.add('closed');
+            } else {
+                // Если закрытый, открываем и меняем классы
+                tocItems.forEach(function (item) {
+                    item.style.display = 'block'; // Показываем элемент
+                });
+                header.classList.remove('closed');
+                header.classList.add('open');
+            }
+        });
+    });
+});

frontend/main.js

@@ -4,9 +4,22 @@ import './styles/reset.css'
 import './styles/main.css'
 import './styles/tabs.css'
 import './styles/search.css'
+import './styles/pagetools.css'
+import './styles/usermenu.css'
+import './styles/toolsmenu.css'
+import './styles/burgermenu.css'
+import './styles/mobilemenu.css'
+import './styles/toc.css'
+import './styles/login.css'
+import './styles/toolbar.css'
+
+import './styles/admin.css'
 //import './styles/fontawesone.css'
 
+import './js/burger.js'
 import './js/speech.js'
+//import './js/search.js'
+//import './js/toc.js'
 
 
 

frontend/styles/burgermenu.css

+.mobile-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: white; /* Белый фон без прозрачности */
+    display: none; /* Скрыть по умолчанию */
+    z-index: 999; /* Поставить поверх остальных элементов */
+    padding: 8px 16px 16px;
+}
+
+
+.mobile-content{
+    display: flex;
+    flex-direction: column;
+    gap: 22px;
+}
+
+.mobile-menu {
+    display: none; /* Скрыть мобильное меню по умолчанию */
+    background-color: #f4f4f4;
+}
+
+.mobile-menu.active {
+    display: block; /* Показать меню, когда добавлен класс active */
+}
+
+
+.burger {
+    display: none; /* Скрыть бургер-меню по умолчанию */
+    cursor: pointer;
+}
+
+.close-menu {
+    position: absolute;
+    top: 35px; /* Смещение от верхней части */
+    left: 20px; /* Смещение от левой стороны */
+    cursor: pointer;
+}
+
+.mobilelogo{
+    margin-left: 50px;
+    margin-top: 22px;
+    display: flex;
+    gap: 12px;
+}
+
+.mobilelogo IMG{
+    width: 30px;
+    height: auto;
+}
+
+
+.logo-mob-title{
+    font-family: Vezitsa;
+    font-size: 1.5rem;
+}
+
+
+
+
+@media (max-width: 768px) {
+
+    .burger {
+        display: block; /* Показать бургер-меню на мобильных устройствах */
+    }
+
+    .local-nav{
+        display: none;
+    }
+
+}

frontend/styles/login.css

+/* Основной стиль для формы */
+#dw__login {
+    max-width: 400px; /* Ограничиваем ширину формы */
+    margin: 22px auto; /* Центрируем форму */
+    padding: 20px;
+    background-color: #f4f4f4; /* Светлый фон */
+    border-radius: 10px; /* Скругленные углы */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Небольшая тень */
+    font-family: Arial, sans-serif;
+}
+
+/* Легенда формы */
+#dw__login legend {
+    font-size: 1.5em;
+    color: #333;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+/* Общие стили для всех label и input */
+#dw__login label {
+    display: block;
+    margin-bottom: 10px;
+    color: #333;
+    font-size: 1em;
+}
+
+#dw__login label span {
+    font-size: 1em;
+    display: block;
+    margin-bottom: 5px;
+    color: #555; /* Цвет для текста меток */
+}
+
+/* Стили для текстовых полей */
+#dw__login input[type="text"],
+#dw__login input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    font-size: 1em;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    transition: border-color 0.3s;
+    box-sizing: border-box;
+}
+
+/* Стили для фокуса полей ввода */
+#dw__login input[type="text"]:focus,
+#dw__login input[type="password"]:focus {
+    border-color: #007bff; /* Подсветка рамки при фокусе */
+    outline: none;
+}
+
+/* Стили для чекбокса и его метки */
+#dw__login input[type="checkbox"] {
+    margin-right: 10px;
+    vertical-align: middle;
+}
+
+#dw__login label[for="remember__me"] {
+    display: inline-flex;
+    align-items: center;
+    margin-top: 10px;
+    font-size: 0.9em;
+}
+
+/* Стили для кнопки входа */
+#dw__login button[type="submit"] {
+    display: block;
+    width: 100%;
+    padding: 12px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    font-size: 1em;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+#dw__login button[type="submit"]:hover {
+    background-color: #0056b3; /* Темнее при наведении */
+}
+
+/* Ссылка на восстановление пароля */
+#dw__login p {
+    text-align: center;
+    margin-top: 15px;
+}
+
+#dw__login p a {
+    color: #007bff;
+    text-decoration: none;
+}
+
+#dw__login p a:hover {
+    text-decoration: underline;
+}

frontend/styles/main.css

@@ -18,6 +18,10 @@ body {
     line-height: 1.6;
 }
 
+fieldset{
+    border: none;
+}
+
 header {
     background: var(--widget-bg, #fff);
     color: #333333;
@@ -54,7 +58,7 @@ header a:hover {
 
 .container {
     margin: 0 auto;
-    width: 1440px;
+    width: 1200px;
 }
 
 
@@ -70,7 +74,7 @@ header a:hover {
 }
 
 .logo-img{
-    width: 80px;
+    width: 60px;
     cursor: pointer;
 }
 
@@ -92,6 +96,7 @@ header a:hover {
 main {
     display: flex;
     margin: 20px;
+    padding: 20px 0;
     flex: 1; /* Занимает всё доступное пространство между header и footer */
 }
 
@@ -151,7 +156,9 @@ a:hover {
     margin-top: 12px;
 }  
 
-
+.content p{
+    margin-bottom: 12px;
+}
 
 
 /* Футер */
@@ -190,4 +197,28 @@ footer p {
     header nav {
         float: none;
     }
+
+    .desk{
+        display: none;
+    }
+
+    .logo-title{
+        font-family: Vezitsa;
+        font-size: 1.7rem;
+        line-height: .9; 
+    }
+
+    .sectionedit1::before {
+        
+        width: 100%; /* Ширина SVG */
+        
+      }
+    
+    .sectionedit1::after {
+        width: 100%; /* Ширина SVG */
+      }
+      
+
+
+
 }

frontend/styles/mobilemenu.css

+.custom-select-menu {
+    
+    font-family: Arial, sans-serif;
+    padding: 10px;
+}
+
+.custom-select-menu .menu-group {
+    margin-bottom: 20px;
+}
+
+.custom-select-menu .group-label {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 8px;
+    display: block;
+    text-transform: uppercase;
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 5px;
+}
+
+.custom-select-menu ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.custom-select-menu ul li {
+    margin: 8px 0;
+}
+
+.custom-select-menu ul li a {
+    text-decoration: none;
+    font-size: 14px;
+    padding: 5px;
+    display: block;
+    border-radius: 3px;
+    transition: background-color 0.2s ease-in-out;
+}
+
+.custom-select-menu ul li a:hover {
+    background-color: #f0f0f0;
+    color: #005580;
+}
+
+.custom-select-menu ul li a:active {
+    background-color: #e0e0e0;
+}

frontend/styles/pagetools.css

+/* Основной контейнер навигации */
+
+
+#dokuwiki__pagetools {
+    position: fixed;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    width: 50px;
+    background-color: #333;
+    border-radius: 10px 0 0 10px;
+    transition: width 0.3s ease;
+    z-index: 1000;
+    overflow: hidden; /* Важно для обрезания контента */
+}
+
+/* При наведении мышью расширяем навигацию */
+#dokuwiki__pagetools:hover {
+    width: 220px;
+}
+
+/* Стили для списка иконок */
+#dokuwiki__pagetools ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+}
+
+/* Элементы списка */
+#dokuwiki__pagetools ul li {
+    position: relative;
+    padding: 10px;
+    border-bottom: 1px solid #444;
+}
+
+#dokuwiki__pagetools ul li a {
+    display: flex;
+    align-items: center;
+    color: #fff;
+    text-decoration: none;
+    font-size: 14px;
+    padding: 5px 10px;
+    transition: padding 0.3s ease;
+    gap: 15px; /* Добавляем расстояние между иконкой и текстом */
+}
+
+/* Иконки SVG */
+#dokuwiki__pagetools ul li a svg {
+    fill: #fff;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0; /* Чтобы SVG не уменьшались */
+}
+
+/* Скрываем текст по умолчанию */
+#dokuwiki__pagetools ul li a span {
+    display: none;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+/* При наведении показываем текст */
+#dokuwiki__pagetools:hover ul li a span {
+    display: inline-block;
+    opacity: 1;
+}
+
+/* Hover эффект для ссылок */
+#dokuwiki__pagetools ul li a:hover {
+    background-color: #555;
+}
+
+@media (max-width: 768px) {
+
+    #dokuwiki__pagetools {
+        display: none;
+    }
+
+}    
\ No newline at end of file

frontend/styles/search.css

@@ -7,6 +7,12 @@
     max-width: 400px;
   }
 
+
+  .search-results-form{
+    margin-bottom: 40px;
+    max-width: 100%;
+  }
+
   /* Стиль поля ввода */
   .search-wrapper input[type="text"] {
     width: 100%;
@@ -48,4 +54,141 @@
   .icon-button:active {
     transform: scale(0.9);
   }
-</style>
\ No newline at end of file
+
+
+  /* Стиль для основного контейнера формы */
+.search-form {
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f4f4f4;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    font-family: Arial, sans-serif;
+}
+
+/* Стили для кнопок */
+.search-form button[type="submit"],
+.search-form button.toggleAssistant {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 15px;
+    cursor: pointer;
+    font-size: 1em;
+    margin-right: 10px;
+    transition: background-color 0.3s;
+}
+
+.search-form button[type="submit"]:hover,
+.search-form button.toggleAssistant:hover {
+    background-color: #0056b3;
+}
+
+.search-form button.toggleAssistant {
+    margin-bottom: 10px; /* Отступ снизу */
+}
+
+/* Стиль для текстового поля */
+.search-form input[type="text"] {
+    width: calc(100% - 140px);
+    padding: 10px;
+    font-size: 1em;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    margin-right: 10px;
+    box-sizing: border-box;
+}
+
+.search-form .active{
+    font-weight: bold;
+}
+
+
+.advancedOptions {
+    display: flex; /* Элементы в одну строку */
+    gap: 10px; /* Отступ между элементами */
+    align-items: center; /* Выравнивание элементов по вертикали */
+}
+
+.advancedOptions .toggle {
+    position: relative; /* Для позиционирования выпадающего меню */
+    display: inline-block;
+    cursor: pointer;
+    padding-right: 20px; /* Оставляем место для стрелки справа */
+}
+
+.advancedOptions .toggle .current {
+    padding: 8px 16px;
+    background-color: transparent; /* Убираем стили кнопок */
+    border: none; /* Убираем границу */
+    border-radius: 0; /* Убираем радиус границ */
+    position: relative;
+    font-size: 14px; /* Регулируем размер текста */
+}
+
+.advancedOptions .toggle:after {
+    content: '▼'; /* Иконка стрелки вниз */
+    position: absolute;
+    right: 5px; /* Размещаем стрелку справа */
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.advancedOptions .toggle[aria-expanded="true"]:after {
+    content: '▲'; /* Иконка стрелки вверх, когда меню открыто */
+}
+
+.advancedOptions .toggle ul {
+    display: none;
+    position: absolute;
+    top: 100%; /* Открываем меню под элементом */
+    left: 0;
+    width: 100%; /* Ширина меню как у родителя */
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    z-index: 1000; /* Поверх остальных элементов */
+}
+
+.advancedOptions .toggle ul li {
+    padding: 8px;
+    cursor: pointer;
+}
+
+.advancedOptions .toggle ul li:hover {
+    background-color: #f0f0f0;
+}
+
+.advancedOptions .toggle ul[aria-expanded="true"] {
+    display: block;
+}
+
+.advancedOptions .toggle ul a {
+    text-decoration: none;
+    color: #333;
+    display: block;
+    width: 100%;
+}
+
+.advancedOptions .toggle ul a:hover {
+    background-color: #e0e0e0;
+}
+
+
+
+@media (max-width: 768px) {
+    .advancedOptions{
+        max-width: 100%;
+
+    }
+
+    .search-form{
+        max-width: 100%;
+        padding: 8px;
+    } 
+}    

frontend/styles/toc.css

+.dw__toc .toggle span {
+    display: none;
+}
+
+.toggle {
+    display: flex;
+    cursor: pointer; /* Указываем на то, что элемент кликабельный */
+    margin: 0;
+}
+
+.toggle::after {
+    content: '▼'; /* Стрелка вверх */
+    margin-left: 8px; /* Отступ между текстом и стрелкой */
+}
+
+.toggle.open::after {
+    content: '▼'; /* Стрелка вверх */
+    margin-left: 8px; /* Отступ между текстом и стрелкой */
+}
+
+.toggle.closed::after {
+    content: '◄'; /* Стрелка влево */
+    margin-left: 8px; /* Отступ между текстом и стрелкой */
+}
+

frontend/styles/toolbar.css

+/* Стили для панели инструментов */
+.picker {
+    display: none;
+}
+
+
+ textarea {
+    width: 100%;
+    height: 500px;
+}
+
+
+#size__ctl{
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+
+.tool__bar {
+    display: flex; /* Расположение кнопок в строку */
+    flex-wrap: wrap; /* Перенос на следующую строку при необходимости */
+    padding: 10px; /* Отступ вокруг панели */
+    background-color: #f7f7f7; /* Цвет фона */
+    border: 1px solid #ccc; /* Граница */
+    border-radius: 5px; /* Закругленные углы */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень */
+}
+
+/* Стили для кнопок */
+.toolbutton {
+    background: none; /* Без фона */
+    border: none; /* Без рамки */
+    cursor: pointer; /* Указатель при наведении */
+    margin: 5px; /* Отступ между кнопками */
+    padding: 5px; /* Отступ внутри кнопки */
+    transition: transform 0.2s; /* Плавный эффект при наведении */
+}
+
+/* Эффект наведения для кнопок */
+.toolbutton:hover {
+    transform: scale(1.1); /* Увеличение размера при наведении */
+}
+
+/* Изображения в кнопках */
+.toolbutton img {
+    display: block; /* Отображение как блочный элемент */
+    margin: auto; /* Центрирование изображения */
+}
+
+/* Альтернативные стили для кнопок с доступом по клавишам */
+.toolbutton[accesskey]:hover {
+    background-color: #e2e2e2; /* Цвет фона при наведении */
+    border-radius: 3px; /* Закругление углов при наведении */
+}
+
+/* Стили для контейнера кнопок */
+.editButtons {
+    display: flex; /* Расположение кнопок в строку */
+    justify-content: flex-start; /* Выравнивание кнопок вправо */
+    margin-top: 20px; /* Отступ сверху */
+    margin-bottom: 20px; /* Отступ сверху */
+}
+
+
+/* Стили для кнопок */
+.editButtons button {
+    background-color: #007bff; /* Цвет фона кнопок */
+    color: white; /* Цвет текста */
+    border: none; /* Без границы */
+    border-radius: 5px; /* Закругленные углы */
+    padding: 10px 15px; /* Отступы внутри кнопок */
+    margin-left: 10px; /* Отступ между кнопками */
+    cursor: pointer; /* Указатель при наведении */
+    transition: background-color 0.3s, transform 0.2s; /* Плавные эффекты */
+}
+
+/* Эффект наведения для кнопок */
+.editButtons button:hover {
+    background-color: #0056b3; /* Темнее цвет фона при наведении */
+    transform: scale(1.05); /* Немного увеличиваем размер */
+}
+
+/* Эффект для активных кнопок */
+.editButtons button:active {
+    transform: scale(0.95); /* Уменьшаем размер при нажатии */
+}
+
+/* Специальные стили для кнопки "Отменить" */
+.editButtons button[type="submit"][name="do[cancel]"] {
+    background-color: #dc3545; /* Цвет фона для кнопки отмены */
+}
+
+.editButtons button[type="submit"][name="do[cancel]"]:hover {
+    background-color: #c82333; /* Темнее цвет фона при наведении */
+}
+

frontend/styles/toolsmenu.css

+.local-nav{
+    display: flex;
+    gap: 14px;
+}
+
+
+
+/* Основной контейнер для меню инструментов */
+.tools-menu {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+/* Стили для иконки инструментов */
+.tools-menu .tools-icon svg {
+    width: 20px;
+    height: 20px;
+    fill: #fff; /* Цвет иконки */
+}
+
+/* Скрываем выпадающее меню по умолчанию */
+.tools-menu .dropdown-menu {
+    display: none; /* Скрыто по умолчанию */
+    position: absolute;
+    right: 0;
+    top: 25px;
+    background-color: #333;
+    border-radius: 5px;
+    padding: 10px 0;
+    min-width: 220px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    opacity: 0; /* Начальная непрозрачность */
+    transition: opacity 0.3s ease; /* Плавное появление */
+}
+
+/* Показываем меню при наведении */
+.tools-menu:hover .dropdown-menu {
+    display: block; /* Показываем меню */
+    opacity: 1; /* Меню становится видимым */
+}
+
+/* Стили для списка */
+.tools-menu .dropdown-menu ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* Стили для элементов меню */
+.tools-menu .dropdown-menu ul li {
+    padding: 10px 20px;
+}
+
+/* Стили для ссылок в меню */
+.tools-menu .dropdown-menu ul li a {
+    display: flex;
+    align-items: center;
+    color: #fff;
+    text-decoration: none;
+    font-size: 16px;
+}
+
+/* Изменение цвета фона при наведении на элементы меню */
+.tools-menu .dropdown-menu ul li a:hover {
+    background-color: #444;
+}
+
+/* Стили для иконок в выпадающем меню */
+.tools-menu .dropdown-menu ul li a svg {
+    margin-left: 10px;
+    fill: #fff; /* Цвет иконок в меню */
+    width: 24px;
+    height: 24px;
+}
+
+/* Увеличиваем область наведения */
+.tools-menu:hover .dropdown-menu,
+.tools-menu .dropdown-menu:hover {
+    display: block; /* Меню остается открытым, если курсор на меню */
+    opacity: 1; /* Сохраняем видимость */
+}
+
+.tools-menu-end{
+    border-bottom: 1px solid #444;
+    padding-top: 8px;
+}

frontend/styles/usermenu.css

+/* Основной контейнер для меню пользователя */
+.user-menu {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+/* Стили для иконки */
+.user-menu svg {
+    width: 24px;
+    height: 24px;
+    fill: #fff; /* Цвет иконки */
+}
+
+/* Скрываем выпадающее меню по умолчанию */
+.user-menu .dropdown-menu {
+    display: none; /* Скрыто по умолчанию */
+    position: absolute;
+    right: 0;
+    top: 22px;
+    background-color: #333;
+    border-radius: 5px;
+    padding: 10px 0;
+    min-width: 200px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    opacity: 0; /* Начальная непрозрачность */
+    transition: opacity 0.3s ease; /* Плавное появление */
+}
+
+/* Показываем меню при наведении */
+.user-menu:hover .dropdown-menu {
+    display: block; /* Показываем меню */
+    opacity: 1; /* Меню становится видимым */
+}
+
+/* Стили для списка */
+.user-menu .dropdown-menu ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* Стили для элементов меню */
+.user-menu .dropdown-menu ul li {
+    padding: 10px 20px;
+}
+
+/* Стили для ссылок в меню */
+.user-menu .dropdown-menu ul li a {
+    display: flex;
+    align-items: center;
+    color: #fff;
+    text-decoration: none;
+    font-size: 16px;
+}
+
+/* Изменение цвета фона при наведении на элементы меню */
+.user-menu .dropdown-menu ul li a:hover {
+    background-color: #444;
+}
+
+/* Стили для иконок в выпадающем меню */
+.user-menu .dropdown-menu ul li a svg {
+    margin-left: 10px;
+    fill: #fff; /* Цвет иконок в меню */
+    width: 24px;
+    height: 24px;
+}
+
+/* Увеличиваем область наведения */
+.user-menu:hover .dropdown-menu,
+.user-menu .dropdown-menu:hover {
+    display: block; /* Меню остается открытым, если курсор на меню */
+    opacity: 1; /* Сохраняем видимость */
+}
+
+
+

main.php

@@ -5,46 +5,135 @@ if (!defined('DOKU_INC')) die(); // Прямая доступность запр
 // Включаем стандартные DokuWiki функции
 include_once('tpl_functions.php');
 
+$hasSidebar = page_findnearest($conf['sidebar']);
+$showSidebar = $hasSidebar && ($ACT == 'show');
+
 
 ?><!DOCTYPE html>
 <html lang="<?php echo $conf['lang']; ?>">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <?php tpl_metaheaders()?>
+    <?//if (isset($_GET['do']) && $_GET['do'] === 'edit'):?>
+        <?php tpl_metaheaders()?>
+    <?//endif?>
     <title><?php tpl_pagetitle(); ?> [<?php echo strip_tags($conf['title']); ?>]</title>
-    <?php tpl_metaheaders(); ?>
     <?=$frontend_str?>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
 </head>
-<body>
+<body data-page-id="<?php echo $ID ?>">
+
     <header id="dokuwiki__header">
+
     <div class="header-inner">    
         <div class="logo">
             <div class="logo-img"><a href="<?php echo wl(); ?>"><img src="/lib/tpl/ak/frontend/assets/imgs/logo.png" /></a></div>    
             <div class="logo-title"><a href="<?php echo wl(); ?>">Библиотека Архивариус</a></div>
+        </div>   
+        <div class="desk"> 
+            <?include ('partials/searchform.php'); ?>
         </div>    
-       <?include ('partials/searchform.php'); ?>
-        <nav>
-                <?php if (isset($_SERVER['REMOTE_USER'])): ?>
-            <a class="button" href="<?php echo wl('', ['do' => 'admin']); ?>">Админка</a>
-            <a class="button" href="<?php echo  wl('', ['do' => 'logout']); wl('doku.php?id=start&do=logout'); ?>">Выйти</a>
-            <?php else: ?>
-            <a class="button" href="<?php echo wl('doku.php?id=start&do=login'); ?>">Войти</a>
-            <?php endif; ?>
+        <nav class="desk">
+            <a class="button" href="<?php echo wl('', ['id' => 'about']); ?>">О проекте</a>
             </nav>
+            
+            <div class="local-nav desk">
+                
+                <div class="tools-menu">
+                    <div class="tools-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="iconify">
+                        <path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9c-2-2-5-2.4-7.4-1.3L9 6L6 9L1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z" fill="currentColor"></path>
+                        </svg>
+                    </div>
+                   
+                    <nav class="dropdown-menu">
+                        <div class="menutitle">Инструменты сайта</div>
+                        <ul class="tools-menu-end">
+                            <?php echo (new \dokuwiki\Menu\SiteMenu())->getListItems(); ?>
+                        </ul>
+                        <div class="menutitle">Инструменты страницы</div>
+                        <ul>
+                            <?php echo (new \dokuwiki\Menu\PageMenu())->getListItems(); ?>
+                        </ul>
+                    </nav>
+                    
+                </div>
+                             
+
+                <div class="user-menu">
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="iconify" data-icon="mdi:account" style="vertical-align: -0.125em; transform: rotate(360deg);">
+                        <path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" fill="currentColor"></path>
+                    </svg>
+                    <nav class="dropdown-menu">
+                        <ul><?php echo (new \dokuwiki\Menu\UserMenu())->getListItems(); ?></ul>
+                    </nav>
+                </div>  
+
+            </div>  
+            
+            <div class="burger">
+                <svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0H23V2H0V0Z" fill="#006842"></path>
+                <path d="M0 7H23V9H0V7Z" fill="#006842"></path>
+                <path d="M0 14H23V16H0V14Z" fill="#006842"></path>
+                </svg>
+            </div>
+
+        
+    </div>    
+
+    <div class="mobile-menu">
+    
+        <div class="close-menu">
+            <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1 1L22 22M1 22L22 1" stroke="#006842" stroke-width="2"/>
+            </svg>
         </div>
+
+        <div class="mobile-content">
+
+            <div class="mobilelogo">
+                <div><a href="<?php echo wl(); ?>"><img src="/lib/tpl/ak/frontend/assets/imgs/logo.png" /></a></div>    
+                <div class="logo-mob-title"><a href="<?php echo wl(); ?>">Библиотека Архивариус</a></div>
+            </div>   
+        
+            <?include ('partials/searchform.php'); ?>
+
+            <nav>
+                <a class="button" href="<?php echo wl('', ['id' => 'about']); ?>">О проекте</a>
+                </nav>
+
+            <?include ('partials/mobilemenu.php'); ?>
+
         
+        </div>    
+
+
+
+
+    </div>
+
+    <nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading">
+        <h3 class="a11y" id="dokuwiki__pagetools__heading"><?php echo $lang['page_tools']; ?></h3>
+        <div class="tools">
+            <ul>
+                <?php echo (new \dokuwiki\Menu\PageMenu())->getListItems(); ?>
+            </ul>
+        </div>
+    </nav> 
+    
     </header>
 
-    <main class="wrapper container">
-  
+    <a name="dokuwiki__top" id="dokuwiki__top"></a>
 
+    <main class="wrapper container">
+       
         <section class="content">
             <?php tpl_content(); // Основной контент ?>
         </section>
     </main>
 
+
     <footer>
         <p class="copy">&copy; <?php echo date('Y'); ?> <span class="footer_logo">Библиотека Архивариус</p>
     </footer>

partials/fullmenu.php

+<? 
+$html = '<div class="tools-menu">';
+
+foreach ( (new \dokuwiki\Menu\MobileMenu())->getGroupedItems() as $tools => $items) {
+    if ($items !== []) {
+        // Создание группы инструментов
+        $html .= '<div class="menu-group" aria-label="' . $lang[$tools . '_tools'] . '">';
+        $html .= '<span class="group-label">' . $lang[$tools . '_tools'] . '</span>';
+        $html .= '<ul>';
+
+        // Перебор каждого инструмента внутри группы
+        foreach ($items as $item) {
+            $params = $item->getParams();
+            $html .= '<li><a href="'.wl('', ['do' => $params['do'] ]).'" data-value="' . $params['do'] . '">';
+            $html .= hsc($item->getLabel());
+            $html .= '</a></li>';
+        }
+
+        $html .= '</ul>';
+        $html .= '</div>';
+    }
+}
+
+$html .= '</div>';
+
+echo $html;

partials/mobilemenu.php

+<? 
+$html = '<div class="custom-select-menu">';
+
+foreach ( (new \dokuwiki\Menu\MobileMenu())->getGroupedItems() as $tools => $items) {
+    if ($items !== []) {
+        // Создание группы инструментов
+        $html .= '<div class="menu-group" aria-label="' . $lang[$tools . '_tools'] . '">';
+        $html .= '<span class="group-label">' . $lang[$tools . '_tools'] . '</span>';
+        $html .= '<ul>';
+
+        // Перебор каждого инструмента внутри группы
+        foreach ($items as $item) {
+            $params = $item->getParams();
+            $html .= '<li><a href="'.wl('', ['do' => $params['do'] ]).'" data-value="' . $params['do'] . '">';
+            $html .= hsc($item->getLabel());
+            $html .= '</a></li>';
+        }
+
+        $html .= '</ul>';
+        $html .= '</div>';
+    }
+}
+
+$html .= '</div>';
+
+echo $html;

style.ini

 [colors]
 __background__    = "#f5f5f5"
-__text__          = "#333333"
+__text__          = "#18530B"
 __link__          = "#007bff"
 __link_visited__  = "#0056b3"
 __link_hover__    = "#003f7f"

tpl_functions.php

@@ -2,12 +2,21 @@
 
 // Fallback script for compatibility with Bootstrap Wrapper and Icons plugins
 
-define('VITE_ENV', 'dev'); 
+define('VITE_ENV', 'prod'); 
 
 define('VITE_SERVER', 'http://localhost:5173');
 define('VITE_ENTRY_POINT', '/main.js');
 
 
+//global $INFO;
+
+if (isset($_GET['do']) && $_GET['do'] === 'admin') {
+    define('IS_ADMIN', true);
+} else {
+    define('IS_ADMIN', false);
+}
+
+
 if ( defined('VITE_ENV') && VITE_ENV === 'dev' ) {
 
     $frontend_str = '<script type="module" crossorigin src="'. VITE_SERVER .'/@vite/client"></script>';
@@ -50,3 +59,6 @@ function tpl_main_page() {
 
 
 
+
+
+