File size: 6,203 Bytes
70ba896 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
<!-- 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> |