Update index.html

index.html

@@ -169,18 +169,108 @@
         #submit-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; opacity: 0.7; }
         #submit-btn .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none; }
         
-        #result-container { min-height: 250px; position: relative; padding: 1rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth); display: flex; align-items: center; justify-content: center; }
+        #result-container { min-height: 350px; position: relative; padding: 1rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth); display: flex; align-items: center; justify-content: center; }
         #result-container.loading, #result-container.has-content { border-style: solid; border-color: var(--panel-border); }
-        #loading-placeholder { display: none; flex-direction: column; align-items: center; gap: 1.5rem; }
-        #result-container.loading #loading-placeholder { display: flex; animation: fadeIn 0.5s; }
-        .orbital-loader { width: 110px; height: 110px; position: relative; animation: spin 10s linear infinite; }
-        .orbit { position: absolute; top: 50%; left: 50%; border: 2px dashed rgba(74, 108, 250, 0.35); border-radius: 50%; transform-origin: center center; }
-        .orbit:nth-child(1) { width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; animation: spin 2.8s linear infinite reverse; }
-        .orbit:nth-child(2) { width: 70px; height: 70px; margin: -35px 0 0 -35px; animation: spin 3.8s linear infinite; }
-        .orbit .satellite { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: var(--accent-primary); box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary); }
-        .orbit:nth-child(1) .satellite { top: -5px; left: 50%; transform: translateX(-50%); }
-        .orbit:nth-child(2) .satellite { top: 50%; left: -5px; background-color: var(--accent-secondary); transform: translateY(-50%); }
-        .loading-text { font-weight: 500; color: var(--text-secondary); }
+        #loading-placeholder { display: none; }
+        #result-container.loading #loading-placeholder { display: flex; animation: fadeIn 0.5s; justify-content: center; align-items: center; width: 100%; }
+        
+        /* --- START: New AI Animation Styles --- */
+        .generator-container {
+            position: relative;
+            width: 400px;
+            max-width: 100%; /* Ensures responsiveness on smaller screens */
+            height: 300px;
+            border: 2px solid #38bdf8;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 0 0 40px rgba(56, 189, 248, 0.3);
+            animation: pulse 5s infinite cubic-bezier(0.4, 0, 0.6, 1);
+            background-color: #161b22;
+            color: #f0f6fc;
+        }
+
+        @keyframes pulse {
+            0% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); }
+            50% { box-shadow: 0 0 60px rgba(56, 189, 248, 0.7); }
+            100% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); }
+        }
+
+        .noise-layer {
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.6"/></svg>') repeat;
+            opacity: 1; animation: fade-noise 7s infinite ease-in-out;
+        }
+
+        @keyframes fade-noise {
+            0% { opacity: 1; filter: blur(5px); } 30% { opacity: 0.8; filter: blur(2px); } 100% { opacity: 0; filter: blur(0px); }
+        }
+
+        .sketch-layer {
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            background-image: url('https://picsum.photos/400/300?grayscale');
+            background-size: cover; background-position: center;
+            filter: grayscale(1) contrast(1.5) blur(3px); opacity: 0;
+            animation: reveal-sketch 7s infinite ease-in-out;
+        }
+
+        @keyframes reveal-sketch {
+            0% { opacity: 0; filter: grayscale(1) contrast(1.5) blur(3px); } 20% { opacity: 1; filter: grayscale(1) contrast(1.2) blur(1px); } 60% { opacity: 0.5; filter: grayscale(0.5) contrast(1) blur(0px); } 100% { opacity: 0; }
+        }
+
+        .building-layer {
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            background-image: url('https://picsum.photos/400/300');
+            background-size: cover; background-position: center;
+            filter: blur(15px) saturate(0.5) brightness(0.7); opacity: 0;
+            animation: denoise-color 7s infinite ease-in-out;
+        }
+
+        @keyframes denoise-color {
+            0% { opacity: 0; filter: blur(15px) saturate(0.5) brightness(0.7); } 40% { opacity: 0.6; filter: blur(5px) saturate(1) brightness(1); } 100% { opacity: 1; filter: blur(0px) saturate(1.5) brightness(1.1); }
+        }
+        
+        .pixel-grid {
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px), repeating-linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px);
+            opacity: 1; animation: dissolve-grid 7s infinite ease-in-out;
+        }
+
+        @keyframes dissolve-grid {
+            0% { opacity: 1; } 70% { opacity: 0.5; } 100% { opacity: 0; }
+        }
+        
+        .particles {
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 50%), radial-gradient(circle at 30% 70%, rgba(187, 134, 252, 0.2) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(250, 204, 21, 0.2) 0%, transparent 50%);
+            animation: flow-particles 7s infinite cubic-bezier(0.4, 0, 0.6, 1);
+        }
+
+        @keyframes flow-particles {
+            0% { transform: translate(0, 0) scale(1); opacity: 0.5; } 50% { transform: translate(10px, -15px) scale(1.05); opacity: 0.8; } 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
+        }
+
+        .text-overlay {
+            position: absolute; top: 45%; left: 50%;
+            transform: translate(-50%, -50%); font-size: 24px; font-weight: 700;
+            text-shadow: 0 0 20px rgba(56, 189, 248, 0.8), 0 0 30px rgba(187, 134, 252, 0.5);
+            animation: glow-text 7s infinite ease-in-out;
+        }
+
+        @keyframes glow-text {
+            0% { opacity: 0.7; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); } 50% { opacity: 1; text-shadow: 0 0 30px rgba(56, 189, 248, 1), 0 0 40px rgba(187, 134, 252, 0.7); } 100% { opacity: 0.7; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); }
+        }
+
+        .progress-bar {
+            position: absolute; bottom: 0; left: 0; width: 0%; height: 6px;
+            background: linear-gradient(to right, #38bdf8, #bb86fc, #facc15);
+            animation: progress 7s infinite linear;
+        }
+
+        @keyframes progress {
+            0% { width: 0%; } 100% { width: 100%; }
+        }
+        /* --- END: New AI Animation Styles --- */
+        
         #result-grid { display: none; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; }
         #result-container.has-content #result-grid { display: grid; }
         #result-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-input); cursor: pointer; transition: var(--transition-smooth); box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); }
@@ -287,8 +377,17 @@
                 </div>
                 <div id="result-container">
                     <div id="loading-placeholder">
-                        <div class="orbital-loader"><div class="orbit"><div class="satellite"></div></div><div class="orbit"><div class="satellite"></div></div></div>
-                        <p class="loading-text">هوش مصنوعی در حال خلق اثر شماست...</p>
+                        <!-- START: New AI Animation HTML -->
+                        <div class="generator-container">
+                            <div class="noise-layer"></div>
+                            <div class="sketch-layer"></div>
+                            <div class="building-layer"></div>
+                            <div class="pixel-grid"></div>
+                            <div class="particles"></div>
+                            <div class="text-overlay">در حال ساخت تصویر...</div>
+                            <div class="progress-bar"></div>
+                        </div>
+                        <!-- END: New AI Animation HTML -->
                     </div>
                     <div id="result-grid"></div>
                 </div>