mod: Переработаны дизайн и компоновка. Минималистичный код.

public/static/js/bg-generator.js

@@ -1,25 +1,29 @@
-// bg-generator.js: Generates a unique gradient background based on text content
+// bg-generator.js:
+// - Генерирует уникальный градиентный фон на основе текстового содержимого
+// - Реализует плавное появление и исчезновение при навигации
+// - Авто-редирект через 15 секунд для создания "медитативного" слайд-шоу эффекта
+// - Обрабатывает принятие Cookie
 
 document.addEventListener("DOMContentLoaded", function() {
-    // 1. Get the text to hash (from hidden span in base.html)
+    // 1. Получаем текст для хеширования (из скрытого span в base.html)
     const rawSpan = document.getElementById('dq-content-raw');
     let text = rawSpan ? rawSpan.innerText.trim() : "";
 
     if (!text) {
-        text = "DictumAndQuotesDefault" + Math.random(); // Fallback random if no text
+        text = "DictumAndQuotesDefault" + Math.random(); // Случайный вариант, если текста нет
     }
 
-    // 2. Hash function (DJB2)
+    // 2. Хеш-функция (DJB2)
     let hash = 5381;
     for (let i = 0; i < text.length; i++) {
-        // Force 32-bit integer arithmetic
+        // Принудительная 32-битная целочисленная арифметика
         hash = ((hash << 5) + hash) + text.charCodeAt(i);
-        hash = hash & hash; // Convert to 32bit integer
+        hash = hash & hash; // Преобразование в 32-битное целое
     }
 
-    // 3. Generate 6 color components deterministically from the hash
-    // We need 6 numbers between 0 and 255.
-    // Let's use pseudo-random generator seeded by hash
+    // 3. Детерминированная генерация 6 цветовых компонентов из хеша
+    // Нам нужно 6 чисел от 0 до 255.
+    // Используем генератор псевдослучайных чисел с затравкой из хеша
 
     function Mulberry32(a) {
         return function() {
@@ -30,53 +34,53 @@ document.addEventListener("DOMContentLoaded", function() {
         }
     }
 
-    const rand = Mulberry32(hash); // Seeded random generator
+    const rand = Mulberry32(hash); // Генератор случайных чисел с seed
 
-    // Generate 6 color components with darker range for "meditative" feel
+    // Генерация 6 цветовых компонентов в темном диапазоне для "медитативного" ощущения
     let colors = [];
     for(let i=0; i<6; i++) {
-        // Generate number between 10 and 80 (dark colors)
+        // Генерируем число от 10 до 80 (темные цвета)
         colors.push(Math.floor(rand() * 70) + 10);
     }
 
-    // Shuffle slightly based on random to allow variation on refresh (optional)
-    // colors.sort(() => Math.random() - 0.5);
+    // Немного перетасовываем на основе случайности, чтобы позволить вариации при обновлении (опционально)
+    colors.sort(() => Math.random() - 0.5);
 
     const rgb1 = `rgb(${colors[0]}, ${colors[1]}, ${colors[2]})`;
     const rgb2 = `rgb(${colors[3]}, ${colors[4]}, ${colors[5]})`;
 
     console.log("DQ BG Generator:", text.substring(0, 20) + "...", hash, rgb1, rgb2);
 
-    // 4. Apply to body
-    // Using linear-gradient to right with standard syntax
+    // 4. Применяем к body.
+    // Используем линейный градиент вправо со стандартным синтаксисом
     const bgString = `linear-gradient(90deg, ${rgb1} 0%, ${rgb2} 100%)`;
     document.body.style.background = bgString;
 
-    // 5. Apply to image background container (if exists on index page)
+    // 5. Применяем к контейнеру фона изображения (если он есть на главной странице)
     const imgBgContainer = document.querySelector('.image-col center > div');
     if (imgBgContainer) {
-         // Use the first color of the gradient with opacity 0.7
+         // Используем первый цвет градиента с прозрачностью 0.7
          imgBgContainer.style.background = `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, 0.7)`;
     }
 
-    // 6. Reveal content (Fade In effect)
+    // 6. Показываем контент (эффект плавного появления - Fade In)
     setTimeout(() => {
         document.body.style.opacity = 1;
     }, 50);
 
-    // 7. Handle Fade Out on link clicks
+    // 7. Обработка плавного исчезновения (Fade Out) при клике по ссылкам
     document.body.addEventListener('click', function(e) {
-        // Find if a link was clicked (bubble up)
+        // Ищем, была ли нажата ссылка (всплытие)
         const link = e.target.closest('a');
         if (link && link.href && link.target !== '_blank') {
             const hrefAttr = link.getAttribute('href');
             if (hrefAttr && !hrefAttr.startsWith('#') && !link.href.includes('javascript:')) {
-                // Check if it is an internal link (same domain)
+                // Проверяем, является ли ссылка внутренней (тот же домен)
                 if (new URL(link.href).origin === window.location.origin) {
-                    e.preventDefault(); // Stop immediate navigation
-                    document.body.style.opacity = 0; // Start Fade Out
+                    e.preventDefault(); // Останавливаем немедленный переход
+                    document.body.style.opacity = 0; // Запускаем Fade Out
 
-                    // Wait for transition (matches CSS transition time 1.5s)
+                    // Ждем завершения перехода (соответствует времени CSS transition 0.9s (было 1.5s))
                     setTimeout(() => {
                         window.location.href = link.href;
                     }, 900);
@@ -85,14 +89,28 @@ document.addEventListener("DOMContentLoaded", function() {
         }
     });
 
-    // 8. Auto-redirect ("meditative" slideshow)
-    // Find the NEXT link and simulate a click on it after 15 seconds
+    // 8. Авто-редирект ("медитативное" слайд-шоу)
+    // Ищем ссылку "ДАЛЕЕ" и симулируем клик по ней через 15 секунд
     const nextLink = document.querySelector('#next a');
     if (nextLink) {
         setTimeout(() => {
-            // Trigger the click event on the link so our handler above (step 7) catches it
-            // and performs the smooth fade out animation.
+            // Вызываем событие клика по ссылке, чтобы наш обработчик выше (шаг 7) поймал его
+            // и выполнил анимацию плавного исчезновения.
             nextLink.click();
         }, 15000);
     }
+
+    // 9. Логика принятия Cookie
+    const cookieBanner = document.querySelector('footer');
+    if (cookieBanner) {
+        const acceptButton = cookieBanner.querySelector('button');
+        if (acceptButton) {
+            acceptButton.addEventListener('click', function() {
+                const date = new Date();
+                date.setTime(date.getTime() + (92 * 24 * 60 * 60 * 1000)); // ~3 месяца (7948800000ms)
+                document.cookie = "cookie_accept=1; expires=" + date.toUTCString() + "; path=/; SameSite=Lax";
+                cookieBanner.remove();
+            });
+        }
+    }
 });