Adição da tela de animação no login

This commit is contained in:
2026-06-17 18:59:17 -03:00
parent 076bd42973
commit 883a7aba52
7 changed files with 46 additions and 5 deletions

View File

@@ -63,6 +63,38 @@
<body class="bg-[#0a0a0a] text-white min-h-screen">
<%# ── Animação de abertura (uma vez, logo após o login) ── %>
<% if @mostrar_splash %>
<div id="splash-login"
class="fixed inset-0 z-[100] bg-[#0a0a0a] flex items-center justify-center"
onclick="encerrarSplash()">
<video id="splash-video" autoplay muted playsinline
class="max-w-[90vw] max-h-[90vh] w-auto h-auto object-contain">
<source src="/login-animacao.webm" type="video/webm">
<source src="/login-animacao.mp4" type="video/mp4">
</video>
<button type="button" onclick="event.stopPropagation(); encerrarSplash()"
class="absolute bottom-6 right-6 text-gray-400 hover:text-white text-sm border border-white/20 rounded-lg px-4 py-2">
Pular ✕
</button>
</div>
<script>
(function () {
var splash = document.getElementById('splash-login');
var video = document.getElementById('splash-video');
if (!splash) return;
window.encerrarSplash = function () {
splash.style.transition = 'opacity .4s';
splash.style.opacity = '0';
setTimeout(function () { splash.remove(); }, 400);
};
// Some quando o vídeo termina; fallback de segurança de 8s.
if (video) video.addEventListener('ended', window.encerrarSplash);
setTimeout(window.encerrarSplash, 8000);
})();
</script>
<% end %>
<%# ── Navbar ─────────────────────────────────────────── %>
<% if user_signed_in? %>
<%= render 'layouts/navbar' %>