script.js

// Main JavaScript file for mobile banking app
document.addEventListener('DOMContentLoaded', function() {
    console.log('Mobile Banking App loaded successfully!');
    
    // Add click handlers for navigation items
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            const text = this.querySelector('span').textContent;
            console.log(`Clicked: ${text}`);
            // Add haptic feedback for mobile
            if (navigator.vibrate) {
                navigator.vibrate(50);
            }
        });
    });
    
    // Add click handler for movements link
    const movementsLink = document.querySelector('.movements-link');
    if (movementsLink) {
        movementsLink.addEventListener('click', function() {
            console.log('Viewing movements...');
            // Simulate navigation
            this.style.color = '#1d4ed8';
            setTimeout(() => {
                this.style.color = '#3b82f6';
            }, 200);
        });
    }
    
    // Add click handler for enter button
    const enterBtn = document.querySelector('.enter-btn');
    if (enterBtn) {
        enterBtn.addEventListener('click', function() {
            console.log('Entering FUTURO...');
            this.textContent = 'CARGANDO...';
            setTimeout(() => {
                this.textContent = 'ENTRAR A FUTURO';
            }, 1500);
        });
    }
    
    // Add click handler for config button
    const configBtn = document.querySelector('.config-btn');
    if (configBtn) {
        configBtn.addEventListener('click', function() {
            console.log('Configuring limits...');
            const icon = this.querySelector('i');
            icon.style.transform = 'rotate(180deg)';
            setTimeout(() => {
                icon.style.transform = 'rotate(0deg)';
            }, 300);
        });
    }
    
    // Add smooth scroll behavior for better UX
    document.documentElement.style.scrollBehavior = 'smooth';
    
    // Add touch feedback for buttons
    const buttons = document.querySelectorAll('button, .nav-item');
    buttons.forEach(button => {
        button.addEventListener('touchstart', function() {
            this.style.opacity = '0.8';
        });
        
        button.addEventListener('touchend', function() {
            this.style.opacity = '1';
        });
    });
    
    // Simulate real-time balance updates (demo purposes)
    const balanceAmounts = document.querySelectorAll('.balance-amount');
    setInterval(() => {
        balanceAmounts.forEach(amount => {
            // Add subtle animation to indicate live data
            amount.style.transform = 'scale(1.02)';
            setTimeout(() => {
                amount.style.transform = 'scale(1)';
            }, 200);
        });
    }, 30000); // Every 30 seconds
});