صفحه ورود خیلی طولانیه

و میخوام از یه لودینگ خفن تر استفاده منی

index.html

@@ -47,32 +47,25 @@
     <div id="three-bg" class="fixed inset-0 -z-10 opacity-20"></div>
     <!-- Loading Screen with Rocket Animation -->
     <div id="loading-screen" class="fixed inset-0 bg-dark-900 flex flex-col items-center justify-center z-50">
-        <div class="rocket-container relative w-32 h-32 mb-8">
-            <div class="rocket absolute w-full h-full">
-                <svg viewBox="0 0 24 24" fill="none" stroke="url(#rocket-gradient)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
-                    <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L11 18l5-5z"></path>
-                    <path d="M2 2l7.586 7.586"></path>
-                    <circle cx="11" cy="11" r="2"></circle>
-                </svg>
-                <defs>
-                    <linearGradient id="rocket-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                        <stop offset="0%" stop-color="#00D9FF" />
-                        <stop offset="100%" stop-color="#8B5CF6" />
-                    </linearGradient>
-                </defs>
-            </div>
-            <div class="flames absolute bottom-0 left-1/2 transform -translate-x-1/2">
-                <div class="flame"></div>
-                <div class="flame"></div>
-                <div class="flame"></div>
+        <div class="cyber-loader relative w-48 h-48 mb-8">
+            <div class="cyber-circle"></div>
+            <div class="cyber-circle"></div>
+            <div class="cyber-circle"></div>
+            <div class="cyber-center">
+                <div class="cyber-dot"></div>
+                <div class="cyber-dot"></div>
+                <div class="cyber-dot"></div>
             </div>
         </div>
         <div class="text-center">
-            <h1 id="typing-text" class="text-3xl md:text-4xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-primary-500 to-secondary-500"></h1>
-            <div class="h-1 w-32 mx-auto bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full animate-pulse"></div>
+            <h1 class="text-3xl md:text-4xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-primary-500 to-secondary-500">
+                Web Mania Studio
+            </h1>
+            <div class="cyber-progress">
+                <div class="cyber-progress-bar"></div>
+            </div>
         </div>
-    </div>
+</div>
 <!-- Main Content -->
     <main class="min-h-screen flex flex-col">
         <!-- Header -->
@@ -273,39 +266,31 @@
             const typingText = document.getElementById('typing-text');
             const text = "Web Mania Studio";
             let i = 0;
-            
-            // Rocket launch animation
-            gsap.to(rocket, {
-                y: -50,
-                scale: 1.2,
-                duration: 0.5,
-                ease: "power2.out",
-                delay: 0.5
+            // Cyber circles animation
+            gsap.to(".cyber-circle", {
+                rotation: 360,
+                duration: 2,
+                repeat: -1,
+                ease: "none"
             });
             
-            // Typing animation
-            function typeWriter() {
-                if (i < text.length) {
-                    typingText.innerHTML += text.charAt(i);
-                    i++;
-                    setTimeout(typeWriter, 100);
+            gsap.to(".cyber-circle:nth-child(2)", {
+                rotation: -360,
+                duration: 3,
+                repeat: -1,
+                ease: "none"
+            });
+            // Hide loading screen after progress completes
+            gsap.to("#loading-screen", {
+                opacity: 0,
+                duration: 0.8,
+                delay: 3,
+                ease: "power2.inOut",
+                onComplete: () => {
+                    document.getElementById('loading-screen').style.display = 'none';
                 }
-            }
-            
-            setTimeout(typeWriter, 1000);
-            
-            // Hide loading screen
-            setTimeout(() => {
-                gsap.to("#loading-screen", {
-                    opacity: 0,
-                    duration: 0.8,
-                    ease: "power2.inOut",
-                    onComplete: () => {
-                        document.getElementById('loading-screen').style.display = 'none';
-                    }
-                });
-            }, 3000);
-        });
+            });
+});
 </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

style.css

@@ -18,73 +18,108 @@ body {
 #three-bg canvas {
     display: block;
 }
-
-/* Rocket Loading Animation */
-.rocket-container {
+/* Cyberpunk Loading Animation */
+.cyber-loader {
     perspective: 1000px;
 }
 
-.rocket {
-    transform-origin: center bottom;
-    animation: float 3s ease-in-out infinite;
+.cyber-circle {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 3px solid transparent;
+    border-radius: 50%;
+    border-top-color: #00D9FF;
+    animation: spin 2s linear infinite;
 }
 
-.rocket svg {
+.cyber-circle:nth-child(1) {
     width: 100%;
     height: 100%;
+    animation-delay: 0.1s;
+}
+
+.cyber-circle:nth-child(2) {
+    width: 70%;
+    height: 70%;
+    top: 15%;
+    left: 15%;
+    border-top-color: #8B5CF6;
+    animation-direction: reverse;
+    animation-delay: 0.2s;
 }
 
-.flames {
-    width: 40px;
-    height: 40px;
+.cyber-circle:nth-child(3) {
+    width: 40%;
+    height: 40%;
+    top: 30%;
+    left: 30%;
+    border-top-color: #00D9FF;
+    animation-delay: 0.3s;
 }
 
-.flame {
+.cyber-center {
     position: absolute;
-    width: 10px;
-    height: 20px;
-    background: linear-gradient(to top, #FF512F, #F09819);
-    border-radius: 50% 50% 20% 20%;
-    opacity: 0.8;
-    animation: flicker 0.3s ease-in-out infinite alternate;
+    width: 20%;
+    height: 20%;
+    top: 40%;
+    left: 40%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-.flame:nth-child(1) {
-    left: 5px;
-    animation-delay: 0.1s;
+.cyber-dot {
+    width: 6px;
+    height: 6px;
+    background: #00D9FF;
+    border-radius: 50%;
+    margin: 0 2px;
+    animation: pulse 1.5s ease-in-out infinite;
 }
 
-.flame:nth-child(2) {
-    left: 15px;
-    height: 25px;
-    animation-delay: 0.2s;
+.cyber-dot:nth-child(1) {
+    animation-delay: 0s;
 }
 
-.flame:nth-child(3) {
-    left: 25px;
-    animation-delay: 0.3s;
+.cyber-dot:nth-child(2) {
+    animation-delay: 0.5s;
 }
 
-@keyframes float {
-    0%, 100% {
-        transform: translateY(0) rotate(0deg);
-    }
-    50% {
-        transform: translateY(-20px) rotate(5deg);
-    }
+.cyber-dot:nth-child(3) {
+    animation-delay: 1s;
 }
 
-@keyframes flicker {
-    0% {
-        transform: scaleY(1);
-        opacity: 0.8;
-    }
-    100% {
-        transform: scaleY(1.2);
-        opacity: 1;
-    }
+.cyber-progress {
+    width: 200px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+    margin: 0 auto;
+    overflow: hidden;
 }
 
+.cyber-progress-bar {
+    height: 100%;
+    width: 0;
+    background: linear-gradient(90deg, #00D9FF, #8B5CF6);
+    animation: progress 3s ease-in-out forwards;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.5); opacity: 0.7; }
+}
+
+@keyframes progress {
+    0% { width: 0; }
+    100% { width: 100%; }
+}
 /* Typing Animation */
 #typing-text {
     border-right: 2px solid #00D9FF;