resources/views/components/loading-screen.blade.php

<!-- Professional Glassmorphic Loading Screen -->
<div id="loading-screen" class="fixed inset-0 z-[9999] flex items-center justify-center transition-opacity duration-500" style="background: rgba(0, 0, 0, 0.95);">
    <!-- Background with blobs -->
    <div class="absolute inset-0">
        <div class="bg-blob bg-blob-1"></div>
        <div class="bg-blob bg-blob-2"></div>
        <div class="bg-blob bg-blob-3"></div>
    </div>
    
    <!-- Main loading container -->
    <div class="relative z-10 text-center">
        <!-- Logo and brand -->
        <div class="mb-8">
            <div class="w-20 h-20 bg-gradient-to-r from-purple-500 to-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-6 loading-pulse">
                <i class="fas fa-gamepad text-white text-3xl"></i>
            </div>
            <h1 class="text-3xl font-bold text-white mb-2">GameStore</h1>
            <p class="text-white/70">Premium Gaming Experience</p>
        </div>
        
        <!-- Loading animation -->
        <div class="mb-8">
            <!-- Spinning ring -->
            <div class="relative w-24 h-24 mx-auto mb-6">
                <div class="absolute inset-0 rounded-full border-4 border-white/20"></div>
                <div class="absolute inset-0 rounded-full border-4 border-transparent border-t-purple-500 border-r-blue-500 animate-spin"></div>
                <div class="absolute inset-2 rounded-full border-2 border-white/10"></div>
                <div class="absolute inset-2 rounded-full border-2 border-transparent border-b-pink-500 border-l-cyan-500 animate-spin" style="animation-direction: reverse; animation-duration: 1.5s;"></div>
            </div>
            
            <!-- Loading dots -->
            <div class="flex justify-center space-x-2 mb-4">
                <div class="w-3 h-3 bg-purple-500 rounded-full loading-dot" style="animation-delay: 0s;"></div>
                <div class="w-3 h-3 bg-blue-500 rounded-full loading-dot" style="animation-delay: 0.2s;"></div>
                <div class="w-3 h-3 bg-pink-500 rounded-full loading-dot" style="animation-delay: 0.4s;"></div>
            </div>
        </div>
        
        <!-- Loading text -->
        <div class="text-white/80">
            <p class="text-lg font-medium mb-2" id="loading-text">Loading your gaming experience...</p>
            <div class="w-64 h-2 bg-white/10 rounded-full mx-auto overflow-hidden">
                <div class="h-full bg-gradient-to-r from-purple-500 to-blue-500 rounded-full loading-progress"></div>
            </div>
        </div>
        
        <!-- Glassmorphic card with additional info -->
        <div class="card mt-8 max-w-sm mx-auto text-left">
            <div class="flex items-center space-x-3 mb-3">
                <div class="w-8 h-8 bg-green-500/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-check text-green-400 text-sm"></i>
                </div>
                <span class="text-white/80 text-sm">Secure connection established</span>
            </div>
            <div class="flex items-center space-x-3 mb-3">
                <div class="w-8 h-8 bg-blue-500/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-database text-blue-400 text-sm"></i>
                </div>
                <span class="text-white/80 text-sm">Loading game catalog</span>
            </div>
            <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-purple-500/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-user-shield text-purple-400 text-sm"></i>
                </div>
                <span class="text-white/80 text-sm">Preparing your profile</span>
            </div>
        </div>
    </div>
</div>

<style>
/* Loading animations */
@keyframes loading-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes loading-dot {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-10px); opacity: 1; }
}

@keyframes loading-progress {
    0% { width: 0%; }
    100% { width: 100%; }
}

.loading-pulse {
    animation: loading-pulse 2s ease-in-out infinite;
}

.loading-dot {
    animation: loading-dot 1.5s ease-in-out infinite;
}

.loading-progress {
    animation: loading-progress 3s ease-in-out infinite;
}

/* Fade out animation */
.loading-fade-out {
    opacity: 0;
    pointer-events: none;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const loadingScreen = document.getElementById('loading-screen');
    const loadingText = document.getElementById('loading-text');
    
    const loadingMessages = [
        'Loading...',
        'Bruh...',
        'E...',
        'Ok...',
        'Welcome to GameStore!'
    ];
    
    let messageIndex = 0;
    
    // Change loading text every 800ms
    const textInterval = setInterval(() => {
        if (messageIndex < loadingMessages.length - 1) {
            messageIndex++;
            loadingText.textContent = loadingMessages[messageIndex];
        }
    }, 800);
    
    // Check if this is the first visit
    const hasVisited = sessionStorage.getItem('hasVisited');
    
    if (hasVisited) {
        // If already visited, show for minimum 1.5 seconds
        setTimeout(() => {
            clearInterval(textInterval);
            loadingScreen.classList.add('loading-fade-out');
            setTimeout(() => {
                loadingScreen.remove();
            }, 500);
        }, 500);
    } else {
        // First visit - show loading screen for full 3.5 seconds
        sessionStorage.setItem('hasVisited', 'true');
        setTimeout(() => {
            clearInterval(textInterval);
            loadingScreen.classList.add('loading-fade-out');
            
            // Remove from DOM after fade animation
            setTimeout(() => {
                loadingScreen.remove();
            }, 500);
        }, 800);
    }
});
</script>