diff --git a/dicquo/templates/base.html b/dicquo/templates/base.html
index 29f7247..1a116c9 100644
--- a/dicquo/templates/base.html
+++ b/dicquo/templates/base.html
@@ -34,11 +34,16 @@
body {
margin: 0;
min-height: 100vh;
- background-color: #570000; /* Fallback color */
- transition: background 1s ease; /* Плавное появление градиента */
+ background-color: #111; /* Изначально темный фон */
+ opacity: 0; /* Скрываем контент до расчета цвета */
+ transition: opacity 0.9s ease-in-out; /* Очень плавное появление */
}
+
+
{% block ExtraHead %}{% endblock %}
diff --git a/dicquo/templates/index.html b/dicquo/templates/index.html
index be16e2f..ece1227 100644
--- a/dicquo/templates/index.html
+++ b/dicquo/templates/index.html
@@ -81,10 +81,6 @@
-
diff --git a/public/static/js/bg-generator.js b/public/static/js/bg-generator.js
index c3a13cc..189b965 100644
--- a/public/static/js/bg-generator.js
+++ b/public/static/js/bg-generator.js
@@ -58,5 +58,38 @@ document.addEventListener("DOMContentLoaded", function() {
// 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);
+ }
+});