Adição da tela de animação no login
This commit is contained in:
@@ -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' %>
|
||||
|
||||
Reference in New Issue
Block a user