renako/templates/index.html

{% extends "base.html" %}

{% block title %}Renako{% endblock %}

{% block content %}
<!-- Animación de entrada inicial -->
<div id="initialAnimation" class="fixed inset-0 bg-gray-50 flex items-center justify-center z-50">
    <h1 id="initialText" class="text-6xl font-bold text-gray-900 opacity-0 transform scale-95">
        Acorta tus <span class="text-primary">enlaces</span>
    </h1>
</div>

<!-- Contenido principal (inicialmente oculto) -->
<div id="mainContent" class="space-y-12 opacity-0">
    <!-- Hero Section -->
    {% include 'components/hero_section.html' %}

    <!-- URL Shortener Form -->
    {% include 'components/url_shortener_form.html' %}

    <!-- Quick Access to My Links -->
    <div class="text-center">
        <a 
            href="{{ url_for('my_links') }}" 
            class="inline-flex items-center px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-xl transition-all duration-200"
        >
            <i class="fas fa-list mr-2"></i>
            Ver mis enlaces
        </a>
    </div>
</div>

<script>
// Animación de entrada de la página
document.addEventListener('DOMContentLoaded', function() {
    const initialAnimation = document.getElementById('initialAnimation');
    const initialText = document.getElementById('initialText');
    const mainContent = document.getElementById('mainContent');
    const header = document.querySelector('header');
    
    // Ocultar header inicialmente
    if (header) {
        header.style.opacity = '0';
        header.style.transform = 'translateY(-20px)';
    }
    
    // Secuencia de animación
    setTimeout(() => {
        // Mostrar texto inicial
        initialText.style.transition = 'all 1s ease-out';
        initialText.style.opacity = '1';
        initialText.style.transform = 'scale(1)';
    }, 300);
    
    setTimeout(() => {
        // Desvanecer texto inicial
        initialText.style.transition = 'all 0.8s ease-in';
        initialText.style.opacity = '0';
        initialText.style.transform = 'scale(1.1)';
    }, 2500);
    
    setTimeout(() => {
        // Ocultar overlay de animación inicial
        initialAnimation.style.transition = 'opacity 0.5s ease-out';
        initialAnimation.style.opacity = '0';
        
        setTimeout(() => {
            initialAnimation.style.display = 'none';
        }, 500);
        
        // Mostrar header
        if (header) {
            header.style.transition = 'all 0.8s ease-out';
            header.style.opacity = '1';
            header.style.transform = 'translateY(0)';
        }
        
        // Mostrar contenido principal
        mainContent.style.transition = 'all 1s ease-out';
        mainContent.style.opacity = '1';
        
    }, 3500);
});
</script>
{% endblock %}