// bg-generator.js: Generates a unique gradient background based on text content document.addEventListener("DOMContentLoaded", function() { // 1. Get the text to hash (from hidden span in 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 } // 2. Hash function (DJB2) let hash = 5381; for (let i = 0; i < text.length; i++) { // Force 32-bit integer arithmetic hash = ((hash << 5) + hash) + text.charCodeAt(i); hash = hash & hash; // Convert to 32bit integer } // 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 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); // Seeded random generator // Generate 6 color components with darker range for "meditative" feel let colors = []; for(let i=0; i<6; i++) { // Generate number between 10 and 80 (dark colors) colors.push(Math.floor(rand() * 70) + 10); } // Shuffle slightly based on random to allow variation on refresh (optional) // 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 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) const imgBgContainer = document.querySelector('.image-col center > div'); if (imgBgContainer) { // Use the first color of the gradient with opacity 0.7 imgBgContainer.style.background = `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, 0.7)`; } // 6. Reveal content (Fade In effect) setTimeout(() => { document.body.style.opacity = 1; }, 50); // 7. Handle Fade Out on link clicks 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' && !link.href.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 // Wait for transition (matches CSS transition time 1.5s) setTimeout(() => { window.location.href = link.href; }, 900); } } }); // 8. Auto-redirect ("meditative" slideshow) // Find the NEXT link and simulate a click on it after 15 seconds 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. nextLink.click(); }, 15000); } });