erjemin
5bfd50efd5
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 1m27s
117 lines
6.0 KiB
JavaScript
117 lines
6.0 KiB
JavaScript
// bg-generator.js:
|
||
// - Генерирует уникальный градиентный фон на основе текстового содержимого
|
||
// - Реализует плавное появление и исчезновение при навигации
|
||
// - Авто-редирект через 15 секунд для создания "медитативного" слайд-шоу эффекта
|
||
// - Обрабатывает принятие Cookie
|
||
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
// 1. Получаем текст для хеширования (из скрытого span в base.html)
|
||
const rawSpan = document.getElementById('dq-content-raw');
|
||
let text = rawSpan ? rawSpan.innerText.trim() : "";
|
||
|
||
if (!text) {
|
||
text = "DictumAndQuotesDefault" + Math.random(); // Случайный вариант, если текста нет
|
||
}
|
||
|
||
// 2. Хеш-функция (DJB2)
|
||
let hash = 5381;
|
||
for (let i = 0; i < text.length; i++) {
|
||
// Принудительная 32-битная целочисленная арифметика
|
||
hash = ((hash << 5) + hash) + text.charCodeAt(i);
|
||
hash = hash & hash; // Преобразование в 32-битное целое
|
||
}
|
||
|
||
// 3. Детерминированная генерация 6 цветовых компонентов из хеша
|
||
// Нам нужно 6 чисел от 0 до 255.
|
||
// Используем генератор псевдослучайных чисел с затравкой из хеша
|
||
|
||
function Mulberry32(a) {
|
||
return function() {
|
||
var t = a += 0x6D2B79F5;
|
||
t = Math.imul(t ^ (t >>> 15), t | 1);
|
||
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
|
||
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
||
}
|
||
}
|
||
|
||
const rand = Mulberry32(hash); // Генератор случайных чисел с seed
|
||
|
||
// Генерация 6 цветовых компонентов в темном диапазоне для "медитативного" ощущения
|
||
let colors = [];
|
||
for(let i=0; i<6; i++) {
|
||
// Генерируем число от 10 до 80 (темные цвета)
|
||
colors.push(Math.floor(rand() * 70) + 10);
|
||
}
|
||
|
||
// Немного перетасовываем на основе случайности, чтобы позволить вариации при обновлении (опционально)
|
||
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. Применяем к body.
|
||
// Используем линейный градиент вправо со стандартным синтаксисом
|
||
const bgString = `linear-gradient(90deg, ${rgb1} 0%, ${rgb2} 100%)`;
|
||
document.body.style.background = bgString;
|
||
|
||
// 5. Применяем к контейнеру фона изображения (если он есть на главной странице)
|
||
const imgBgContainer = document.querySelector('.image-col center > div');
|
||
if (imgBgContainer) {
|
||
// Используем первый цвет градиента с прозрачностью 0.7
|
||
imgBgContainer.style.background = `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, 0.7)`;
|
||
}
|
||
|
||
// 6. Показываем контент (эффект плавного появления - Fade In)
|
||
setTimeout(() => {
|
||
document.body.style.opacity = 1;
|
||
}, 50);
|
||
|
||
// 7. Обработка плавного исчезновения (Fade Out) при клике по ссылкам
|
||
document.body.addEventListener('click', function(e) {
|
||
// Ищем, была ли нажата ссылка (всплытие)
|
||
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:')) {
|
||
// Проверяем, является ли ссылка внутренней (тот же домен)
|
||
if (new URL(link.href).origin === window.location.origin) {
|
||
e.preventDefault(); // Останавливаем немедленный переход
|
||
document.body.style.opacity = 0; // Запускаем Fade Out
|
||
|
||
// Ждем завершения перехода (соответствует времени CSS transition 0.9s (было 1.5s))
|
||
setTimeout(() => {
|
||
window.location.href = link.href;
|
||
}, 900);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// 8. Авто-редирект ("медитативное" слайд-шоу)
|
||
// Ищем ссылку "ДАЛЕЕ" и симулируем клик по ней через 15 секунд
|
||
const nextLink = document.querySelector('#next a');
|
||
if (nextLink) {
|
||
setTimeout(() => {
|
||
// Вызываем событие клика по ссылке, чтобы наш обработчик выше (шаг 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();
|
||
});
|
||
}
|
||
}
|
||
});
|