mod: усилена медитативность
This commit is contained in:
@@ -34,11 +34,16 @@
|
|||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #570000; /* Fallback color */
|
background-color: #111; /* Изначально темный фон */
|
||||||
transition: background 1s ease; /* Плавное появление градиента */
|
opacity: 0; /* Скрываем контент до расчета цвета */
|
||||||
|
transition: opacity 0.9s ease-in-out; /* Очень плавное появление */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<noscript>
|
||||||
|
<style>body { opacity: 1; }</style>
|
||||||
|
</noscript>
|
||||||
|
|
||||||
{% block ExtraHead %}{% endblock %}
|
{% block ExtraHead %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -81,10 +81,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
setTimeout('location.replace("/{{ NEXT }}_{{ NEXT_TXT }}{% if CURRENT_TAG %}?tag={{ CURRENT_TAG }}{% endif %}")', 15000);
|
|
||||||
/*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/
|
|
||||||
</script>
|
|
||||||
<noscript>
|
<noscript>
|
||||||
<meta http-equiv="refresh" content="15; url=/{{ NEXT}}_{{ NEXT_TXT }}{% if CURRENT_TAG %}?tag={{ CURRENT_TAG }}{% endif %}">
|
<meta http-equiv="refresh" content="15; url=/{{ NEXT}}_{{ NEXT_TXT }}{% if CURRENT_TAG %}?tag={{ CURRENT_TAG }}{% endif %}">
|
||||||
</noscript>
|
</noscript>
|
||||||
|
|||||||
@@ -58,5 +58,38 @@ document.addEventListener("DOMContentLoaded", function() {
|
|||||||
// Use the first color of the gradient with opacity 0.7
|
// Use the first color of the gradient with opacity 0.7
|
||||||
imgBgContainer.style.background = `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, 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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user