Update index.html

index.html

@@ -4,323 +4,264 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>فتوشاپ هوش مصنوعی (نسخه گالری)</title>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
-            --bg-color: #f8f9fa;
-            --text-color: #212529;
+            --bg-start: #f5f7ff;
+            --bg-end: #eef2ff;
+            --text-color: #1e293b;
             --card-bg: #ffffff;
-            --border-color: #dee2e6;
-            --primary-color-start: #3b82f6;
-            --primary-color-end: #8b5cf6;
-            --shadow-color: rgba(0, 0, 0, 0.08);
-            --drop-zone-bg: #f1f5f9;
-            --drop-zone-border-active: #a5b4fc;
+            --border-color: #e2e8f0;
+            --primary-color-start: #4f46e5;
+            --primary-color-end: #a855f7;
+            --shadow-color-light: rgba(79, 70, 229, 0.08);
+            --shadow-color-dark: rgba(30, 41, 59, 0.05);
+            --drop-zone-bg: #f8fafc;
+            --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
         }
 
-        /* --- Dark Mode --- */
         .dark {
-            --bg-color: #111827;
-            --text-color: #d1d5db;
-            --card-bg: #1f2937;
-            --border-color: #374151;
-            --shadow-color: rgba(0, 0, 0, 0.25);
-            --drop-zone-bg: #374151;
-            --drop-zone-border-active: #6366f1;
+            --bg-start: #0f172a;
+            --bg-end: #0b1120;
+            --text-color: #e2e8f0;
+            --card-bg: #1e293b;
+            --border-color: #334155;
+            --shadow-color-light: rgba(0, 0, 0, 0.2);
+            --shadow-color-dark: rgba(0, 0, 0, 0.25);
+            --drop-zone-bg: #111827;
         }
 
-        /* --- Base Styles & Animations --- */
         @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
+            from { opacity: 0; transform: translateY(30px); }
+            to { opacity: 1; transform: translateY(0); }
         }
         
         body {
             font-family: 'Vazirmatn', sans-serif;
-            background-color: var(--bg-color);
+            background-color: var(--bg-start);
+            background-image: radial-gradient(circle at top left, var(--bg-start), var(--bg-end));
             color: var(--text-color);
             margin: 0;
-            padding: 2rem;
+            padding: 3rem 1rem;
             display: flex;
             justify-content: center;
             align-items: flex-start;
             min-height: 100vh;
-            transition: background-color 0.3s, color 0.3s;
+            transition: background-color 0.4s, color 0.4s;
         }
 
         .container {
-            max-width: 700px; /* Reduced width for a more focused single-column layout */
+            max-width: 750px;
             width: 100%;
         }
 
-        /* --- Header --- */
         header {
             text-align: center;
-            margin-bottom: 2.5rem;
-            animation: fadeInUp 0.5s ease-out forwards;
+            margin-bottom: 3rem;
+            animation: fadeInUp 0.8s var(--ease-out-expo) forwards;
         }
 
         h1 {
-            font-size: 2.5rem;
-            font-weight: 700;
+            font-size: 3rem;
+            font-weight: 800;
+            letter-spacing: -1px;
             margin: 0;
             background: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            background-clip: text;
-            color: transparent;
         }
 
         p.subtitle {
-            font-size: 1.1rem;
-            color: #6b7280;
-            margin-top: 0.5rem;
+            font-size: 1.2rem;
+            color: #64748b;
+            margin-top: 0.75rem;
         }
+        .dark p.subtitle { color: #94a3b8; }
 
-        .dark p.subtitle { color: #9ca3af; }
-
-        /* --- Main Content Card --- */
         main {
             background-color: var(--card-bg);
-            border-radius: 1.5rem;
-            box-shadow: 0 20px 50px -10px var(--shadow-color);
-            padding: 2.5rem;
-            transition: background-color 0.3s, box-shadow 0.3s;
-            animation: fadeInUp 0.5s ease-out 0.2s forwards;
-            opacity: 0; /* Initially hidden for animation */
+            border-radius: 2rem;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 4px 10px var(--shadow-color-dark), 0 20px 40px var(--shadow-color-light);
+            padding: 3rem;
+            transition: all 0.4s;
+            animation: fadeInUp 0.8s var(--ease-out-expo) 0.2s forwards;
+            opacity: 0;
         }
 
-        /* --- Section Styling (Panel, Controls) --- */
-        .panel, .controls {
-            margin-bottom: 2.5rem;
-        }
-        .controls { margin-bottom: 2rem; }
+        .panel, .controls { margin-bottom: 3rem; }
         .panel:last-child { margin-bottom: 0; }
+        .controls { margin-bottom: 2.5rem; }
         
         h2 {
-            font-size: 1.25rem;
-            font-weight: 600;
-            margin-top: 0;
-            margin-bottom: 1.5rem;
-            border-bottom: 2px solid var(--border-color);
-            padding-bottom: 0.75rem;
+            font-size: 1.4rem;
+            font-weight: 700;
+            margin: 0 0 1.5rem 0;
+            padding-bottom: 1rem;
             display: flex;
             align-items: center;
             gap: 0.75rem;
+            border-bottom: 1px solid var(--border-color);
         }
+        h2 svg { color: var(--primary-color-start); }
 
-        /* --- Drop Zone & Image Preview --- */
         #drop-zone {
-            border: 3px dashed var(--border-color);
-            border-radius: 1rem;
-            padding: 2rem;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-            position: relative;
-            overflow: hidden;
-            background-color: var(--drop-zone-bg);
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            min-height: 250px;
-        }
-        
-        #drop-zone.dragover {
-            border-color: var(--drop-zone-border-active);
-            background-color: rgba(99, 102, 241, 0.1);
-            transform: scale(1.02);
-        }
-
-        #drop-zone-icon {
-            width: 50px;
-            height: 50px;
-            margin-bottom: 1rem;
-            color: #9ca3af;
-            transition: transform 0.3s ease;
-        }
-        .dark #drop-zone-icon { color: #6b7280; }
-        #drop-zone:hover #drop-zone-icon { transform: translateY(-5px); }
-
-        #drop-zone-text {
-            color: #4b5563;
-            font-weight: 500;
-        }
-        .dark #drop-zone-text { color: #d1d5db; }
-
+            border: 2px dashed var(--border-color); border-radius: 1.5rem;
+            padding: 1rem; text-align: center; cursor: pointer;
+            transition: all 0.3s var(--ease-out-expo);
+            position: relative; overflow: hidden; background-color: var(--drop-zone-bg);
+            display: flex; flex-direction: column; justify-content: center;
+            align-items: center; min-height: 280px;
+        }
+        #drop-zone::before {
+            content: ''; position: absolute; inset: -2px; border-radius: 1.5rem;
+            background: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end)) border-box;
+            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: destination-out; mask-composite: subtract;
+            opacity: 0; transition: opacity 0.3s ease;
+        }
+        #drop-zone.dragover, #drop-zone:hover {
+            border-color: transparent; transform: translateY(-5px);
+            box-shadow: 0 10px 20px -5px var(--shadow-color-light);
+        }
+        #drop-zone.dragover::before, #drop-zone:hover::before { opacity: 1; }
+        #drop-zone-content { transition: opacity 0.3s ease, transform 0.3s ease; }
+        #drop-zone:hover #drop-zone-content { transform: translateY(-5px); }
+        #drop-zone-icon { width: 50px; height: 50px; margin-bottom: 1rem; color: #94a3b8; }
+        #drop-zone-text { color: #475569; font-weight: 500; }
+        .dark #drop-zone-text { color: #94a3b8; }
         #image-preview {
-            max-width: 100%;
-            max-height: 300px;
-            border-radius: 0.75rem;
-            object-fit: contain;
-            display: none;
+            position: absolute; inset: 0; width: 100%; height: 100%;
+            padding: 1rem; box-sizing: border-box; border-radius: 1.5rem;
+            object-fit: contain; opacity: 0; transform: scale(0.95);
+            transition: opacity 0.4s ease, transform 0.4s ease;
+            pointer-events: none;
         }
+        #image-preview.visible { opacity: 1; transform: scale(1); pointer-events: auto; }
 
-        /* --- Controls (Textarea & Button) --- */
         textarea {
-            width: 100%;
-            padding: 1rem;
-            border: 2px solid var(--border-color);
-            border-radius: 0.75rem;
-            background-color: var(--bg-color);
-            color: var(--text-color);
-            font-family: 'Vazirmatn', sans-serif;
-            font-size: 1rem;
-            resize: vertical;
-            min-height: 80px;
-            box-sizing: border-box;
-            transition: all 0.3s ease;
+            width: 100%; padding: 1rem; border: 2px solid var(--border-color);
+            border-radius: 1rem; background-color: var(--drop-zone-bg);
+            color: var(--text-color); font-family: 'Vazirmatn', sans-serif;
+            font-size: 1rem; resize: vertical; min-height: 80px;
+            box-sizing: border-box; transition: all 0.3s ease;
         }
-
         textarea:focus {
-            outline: none;
-            border-color: var(--primary-color-start);
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+            outline: none; border-color: var(--primary-color-start);
+            box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color-start) 15%, transparent);
         }
 
         button#submit-btn {
-            width: 100%;
-            padding: 1rem;
-            border: none;
-            border-radius: 0.75rem;
-            background-image: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end));
-            background-size: 150% 150%;
-            color: white;
-            font-size: 1.1rem;
-            font-weight: 600;
-            cursor: pointer;
-            margin-top: 1rem;
-            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            position: relative; overflow: hidden;
+            width: 100%; padding: 1.1rem; border: none; border-radius: 1rem;
+            background-image: linear-gradient(45deg, var(--primary-color-start) 0%, var(--primary-color-end) 100%);
+            background-size: 200% auto; color: white;
+            font-size: 1.1rem; font-weight: 700; cursor: pointer;
+            margin-top: 1rem; transition: all 0.4s var(--ease-out-expo);
+            box-shadow: 0 4px 15px var(--shadow-color-light);
         }
-
         button#submit-btn:hover:not(:disabled) {
-            transform: translateY(-3px) scale(1.01);
-            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+            transform: translateY(-4px);
+            box-shadow: 0 10px 25px -5px var(--shadow-color-light);
             background-position: right center;
         }
-        
-        button#submit-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
+        button#submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+        .loader-dots {
+            display: flex; justify-content: center; align-items: center;
+            position: absolute; inset: 0;
         }
-        
-        /* --- Result Area & Loading Animation --- */
-        @keyframes pulse-bg {
-            0% { background-color: var(--drop-zone-bg); }
-            50% { background-color: color-mix(in srgb, var(--drop-zone-bg) 85%, var(--primary-color-start)); }
-            100% { background-color: var(--drop-zone-bg); }
+        .loader-dots div {
+            width: 8px; height: 8px; margin: 0 4px; background-color: white; border-radius: 50%;
+            animation: bounce 1.4s infinite ease-in-out both;
         }
+        .loader-dots .dot1 { animation-delay: -0.32s; }
+        .loader-dots .dot2 { animation-delay: -0.16s; }
+        @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }
+        #btn-text.hidden { visibility: hidden; }
 
         #result-container {
-            border: 3px solid var(--border-color);
-            border-radius: 1rem;
-            min-height: 300px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
+            border: 2px solid var(--border-color); border-radius: 1.5rem;
+            min-height: 300px; 
+            display: flex; /* Kept flex for fallback */
+            justify-content: center; /* Kept flex for fallback */
+            align-items: center; /* Kept flex for fallback */
             position: relative;
-            background-color: var(--drop-zone-bg);
-            overflow: hidden;
-            padding: 0.5rem;
-            transition: border-color 0.3s ease;
+            background-color: var(--drop-zone-bg); overflow: hidden;
+            padding: 0.5rem; transition: border-color 0.3s ease;
         }
         
-        #result-container.loading {
-            animation: pulse-bg 2s infinite ease-in-out;
+        /* --- CORRECTED: Loading Placeholder Centering --- */
+        #loading-placeholder {
+            display: none; /* Initially hidden */
+            flex-direction: column;
+            align-items: center;
+            gap: 1.5rem;
+            opacity: 0;
+            animation: fadeIn 0.5s ease forwards;
+            
+            /* Positioning logic for perfect centering */
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%; /* Ensure it takes space to center its content */
+            text-align: center;
         }
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        #result-container.loading #loading-placeholder { display: flex; }
+        
+        .loading-animation { width: 120px; height: 120px; }
+        .loading-text { font-weight: 500; color: #64748b; }
+        .dark .loading-text { color: #94a3b8; }
 
         #result-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 0.5rem;
-            width: 100%;
-            height: 100%;
+            display: grid; grid-template-columns: repeat(2, 1fr);
+            gap: 0.75rem; width: 100%; height: 100%;
         }
-
-        @keyframes popIn {
-            from {
-                transform: scale(0.8) translateY(10px);
-                opacity: 0;
-            }
-            to {
-                transform: scale(1) translateY(0);
-                opacity: 1;
-            }
+        @keyframes popIn-spring {
+            0% { opacity: 0; transform: scale(0.8) translateY(20px); }
+            80% { opacity: 1; transform: scale(1.05) translateY(-5px); }
+            100% { opacity: 1; transform: scale(1) translateY(0); }
         }
-
         #result-grid img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            border-radius: 0.75rem;
-            cursor: pointer;
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
-            opacity: 0; /* Hidden for animation */
-            animation: popIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
+            width: 100%; height: 100%; object-fit: cover; border-radius: 1rem;
+            cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease;
+            opacity: 0; animation: popIn-spring 0.6s var(--ease-out-expo) forwards;
         }
-        
         #result-grid img:hover {
-            transform: scale(1.05);
-            box-shadow: 0 5px 15px var(--shadow-color);
-        }
-
-        .spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(0,0,0,0.1);
-            border-left-color: var(--primary-color-start);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            position: absolute;
-            display: none;
-            z-index: 10;
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-
-        #error-message {
-            color: #ef4444;
-            text-align: center;
-            margin-top: 1rem;
-            display: none;
-            font-weight: 500;
+            transform: scale(1.05) rotate(1deg);
+            box-shadow: 0 10px 30px -5px var(--shadow-color-dark);
         }
         
-        /* --- Lightbox Styles (Unchanged) --- */
+        #error-message { color: #ef4444; text-align: center; margin-top: 1rem; display: none; font-weight: 500; }
+        
         #lightbox {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background-color: rgba(0, 0, 0, 0.85); z-index: 1000; display: none;
+            background-color: rgba(10, 20, 40, 0.85); z-index: 1000; display: none;
             justify-content: center; align-items: center; padding: 2rem;
-            box-sizing: border-box; backdrop-filter: blur(5px);
+            box-sizing: border-box; backdrop-filter: blur(8px);
+        }
+        #lightbox-img {
+            max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 1rem;
+            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
         }
-        #lightbox-content { position: relative; max-width: 80vw; max-height: 90vh; }
-        #lightbox-img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 1rem; }
         #lightbox-close, #lightbox-download {
-            position: absolute; top: -40px; background-color: rgba(255, 255, 255, 0.2);
-            color: white; border: none; width: 35px; height: 35px; border-radius: 50%;
-            cursor: pointer; font-size: 1.5rem; display: flex; justify-content: center;
-            align-items: center; transition: background-color 0.2s;
+            position: absolute; top: -50px; background-color: rgba(255, 255, 255, 0.1);
+            color: white; border: 1px solid rgba(255,255,255,0.2); width: 40px; height: 40px;
+            border-radius: 50%; cursor: pointer; font-size: 1.5rem; display: flex;
+            justify-content: center; align-items: center; transition: all 0.2s;
         }
         #lightbox-close { left: 10px; }
         #lightbox-download { right: 10px; }
-        #lightbox-close:hover, #lightbox-download:hover { background-color: rgba(255, 255, 255, 0.4); }
+        #lightbox-close:hover, #lightbox-download:hover {
+            background-color: rgba(255, 255, 255, 0.2); transform: scale(1.1);
+        }
 
-        /* --- Responsive Design --- */
         @media (max-width: 600px) {
-            body { padding: 1rem; }
+            body { padding: 1.5rem 1rem; }
             main { padding: 1.5rem; }
-            h1 { font-size: 2rem; }
-            h2 { font-size: 1.1rem; }
+            h1 { font-size: 2.5rem; }
         }
     </style>
 </head>
@@ -333,46 +274,65 @@
         </header>
 
         <main>
-            <!-- 1. Upload Section -->
             <div class="panel">
                 <h2>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
-                    ۱. تصویر خود را آپلود کنید
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z"/></svg>
+                    ۱. تصویر خود را انتخاب کنید
                 </h2>
                 <div id="drop-zone">
-                    <svg id="drop-zone-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.2 15c.7-1.2 1-2.5.7-3.9-.6-2.4-2.5-4.2-4.9-4.6-1.1-.2-2.2.3-3.1.9-1.4-2.4-4.1-3.9-7-3.9-4.4 0-8 3.6-8 8 0 1.9.7 3.7 1.8 5.1"></path><path d="M9.5 16.5 12 14l2.5 2.5"></path><path d="M12 14v7"></path></svg>
-                    <span id="drop-zone-text">تصویر را اینجا بکشید یا برای انتخاب کلیک کنید</span>
+                    <div id="drop-zone-content">
+                        <svg id="drop-zone-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+                        <span id="drop-zone-text">تصویر را اینجا بکشید یا برای انتخاب کلیک کنید</span>
+                    </div>
                     <img id="image-preview" src="#" alt="پیش‌نمایش تصویر" />
                 </div>
                 <input type="file" id="file-input" accept="image/*" hidden>
             </div>
 
-            <!-- 2. Controls Section -->
             <div class="controls">
                 <h2>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 5-3-3-6 6 3 3Z"></path><path d="m6 8-3-3 6-6 3 3Z"></path><path d="M14 4 12 6"></path><path d="m6 16 6 6"></path><path d="M11 11 8 8"></path></svg>
-                    ۲. دستور ویرایش را وارد کنید
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+                    ۲. دستور ویرایش را بنویسید
                 </h2>
                 <textarea id="prompt-input" rows="3" placeholder="مثال: پس‌زمینه را حذف کن و یک ساحل آفتابی قرار بده"></textarea>
-                <button id="submit-btn" disabled>ویرایش کن</button>
+                <button id="submit-btn" disabled>
+                    <span id="btn-text">خلق کن</span>
+                </button>
                 <p id="error-message"></p>
             </div>
 
-            <!-- 3. Result Section -->
             <div class="panel">
                 <h2>
-                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 22h-6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7.5"></path><path d="M2 15h20"></path><path d="M18 22a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"></path><path d="m22 22-1.5-1.5"></path></svg>
-                    ۳. نتیجه را مشاهده کنید
+                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 2H8.6c-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8c.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1V6.5L15.5 2z"/><path d="M3 7.6v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8"/><path d="M15 2v5h5"/></svg>
+                    ۳. نتیجه را ببینید
                 </h2>
                 <div id="result-container">
-                    <div class="spinner" id="loader"></div>
+                    <div id="loading-placeholder">
+                        <svg class="loading-animation" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                            <style>
+                                .circle { animation: a 4s cubic-bezier(.5,0,.5,1) infinite; transform-origin: 50px 50px; }
+                                .p1 { animation-duration: 2s; stroke: #a855f7; }
+                                .p2 { animation-duration: 3s; stroke: #8b5cf6; }
+                                .p3 { animation-duration: 4s; stroke: #6366f1; }
+                                .p4 { animation-duration: 5s; stroke: #4f46e5; }
+                                @keyframes a { to { transform: rotate(300deg) scale(0.8); } }
+                            </style>
+                            <g>
+                                <path class="circle p1" d="M50,50 m0,-45 a45,45 0 1 1 0,90 a45,45 0 1 1 0,-90" fill="none" stroke-width="3" stroke-dasharray="282.74" stroke-dashoffset="212.05" stroke-linecap="round"></path>
+                                <path class="circle p2" d="M50,50 m0,-35 a35,35 0 1 1 0,70 a35,35 0 1 1 0,-70" fill="none" stroke-width="3" stroke-dasharray="219.91" stroke-dashoffset="164.93" stroke-linecap="round"></path>
+                                <path class="circle p3" d="M50,50 m0,-25 a25,25 0 1 1 0,50 a25,25 0 1 1 0,-50" fill="none" stroke-width="3" stroke-dasharray="157.08" stroke-dashoffset="117.81" stroke-linecap="round"></path>
+                                <path class="circle p4" d="M50,50 m0,-15 a15,15 0 1 1 0,30 a15,15 0 1 1 0,-30" fill="none" stroke-width="3" stroke-dasharray="94.24" stroke-dashoffset="70.68" stroke-linecap="round"></path>
+                            </g>
+                        </svg>
+                        <p class="loading-text">هوش مصنوعی در حال خلق اثر شماست...</p>
+                    </div>
                     <div id="result-grid"></div>
                 </div>
             </div>
         </main>
     </div>
 
-    <!-- Lightbox Structure (Unchanged) -->
+    <!-- Lightbox Structure -->
     <div id="lightbox">
         <div id="lightbox-content">
              <img id="lightbox-img" src="">
@@ -382,22 +342,20 @@
              </a>
         </div>
     </div>
-
+    
     <script>
-        // --- API Endpoint (Unchanged) ---
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
 
         // --- DOM Elements ---
         const dropZone = document.getElementById('drop-zone');
+        const dropZoneContent = document.getElementById('drop-zone-content');
         const fileInput = document.getElementById('file-input');
         const imagePreview = document.getElementById('image-preview');
-        const dropZoneText = document.getElementById('drop-zone-text');
-        const dropZoneIcon = document.getElementById('drop-zone-icon'); // New element
         const promptInput = document.getElementById('prompt-input');
         const submitBtn = document.getElementById('submit-btn');
-        const resultContainer = document.getElementById('result-container'); // New reference
+        const btnText = document.getElementById('btn-text');
+        const resultContainer = document.getElementById('result-container');
         const resultGrid = document.getElementById('result-grid');
-        const loader = document.getElementById('loader');
         const errorMessage = document.getElementById('error-message');
         const lightbox = document.getElementById('lightbox');
         const lightboxImg = document.getElementById('lightbox-img');
@@ -406,88 +364,50 @@
         
         let uploadedFile = null;
 
-        // --- File Upload Logic (Updated for better UI feedback) ---
+        // --- Event Listeners and Handlers (mostly unchanged) ---
         dropZone.addEventListener('click', () => fileInput.click());
-        fileInput.addEventListener('change', (e) => {
-            const file = e.target.files[0];
-            if (file) handleFile(file);
-        });
-
-        ['dragenter', 'dragover'].forEach(eventName => {
-            dropZone.addEventListener(eventName, (e) => {
-                e.preventDefault();
-                dropZone.classList.add('dragover');
-            }, false);
-        });
-
-        ['dragleave', 'drop'].forEach(eventName => {
-             dropZone.addEventListener(eventName, (e) => {
-                e.preventDefault();
-                dropZone.classList.remove('dragover');
-            }, false);
-        });
-
-        dropZone.addEventListener('drop', (e) => {
-            const file = e.dataTransfer.files[0];
-            if (file) handleFile(file);
-        });
+        fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
+        ['dragenter', 'dragover'].forEach(eventName => dropZone.addEventListener(eventName, (e) => { e.preventDefault(); dropZone.classList.add('dragover'); }));
+        ['dragleave', 'drop'].forEach(eventName => dropZone.addEventListener(eventName, (e) => { e.preventDefault(); dropZone.classList.remove('dragover'); }));
+        dropZone.addEventListener('drop', (e) => handleFile(e.dataTransfer.files[0]));
+        promptInput.addEventListener('input', checkFormState);
 
         function handleFile(file) {
-            if (!file.type.startsWith('image/')) {
-                displayError('لطفا یک فایل تصویری انتخاب کنید.');
-                return;
-            }
-            
+            if (!file || !file.type.startsWith('image/')) { displayError('لطفا ��ک فایل تصویری انتخاب کنید.'); return; }
             uploadedFile = file;
-            
             const reader = new FileReader();
             reader.onload = (e) => {
                 imagePreview.src = e.target.result;
-                imagePreview.style.display = 'block';
-                dropZoneText.style.display = 'none';
-                dropZoneIcon.style.display = 'none'; // Hide icon
-                submitBtn.disabled = promptInput.value.trim() === ''; // Enable if prompt is already filled
+                imagePreview.classList.add('visible');
+                dropZoneContent.style.opacity = '0';
+                checkFormState();
                 clearResult();
             };
             reader.readAsDataURL(file);
         }
         
-        // --- Enable/Disable button based on both inputs ---
         function checkFormState() {
             submitBtn.disabled = !uploadedFile || promptInput.value.trim() === '';
         }
-        promptInput.addEventListener('input', checkFormState);
-
 
-        // --- API Call Logic (Unchanged core logic) ---
         submitBtn.addEventListener('click', async () => {
             if (submitBtn.disabled) return;
-
             setLoading(true);
-            
             const formData = new FormData();
             formData.append('image', uploadedFile);
             formData.append('prompt', promptInput.value.trim());
-
             try {
-                const response = await fetch(API_URL, {
-                    method: 'POST',
-                    body: formData,
-                });
-
+                const response = await fetch(API_URL, { method: 'POST', body: formData });
                 if (!response.ok) {
                     const errorData = await response.json().catch(() => ({ error: `خطای سرور: ${response.statusText}` }));
                     throw new Error(errorData.error || `یک خطای ناشناخته رخ داد.`);
                 }
-
                 const result = await response.json();
-
                 if (result.image_urls && Array.isArray(result.image_urls) && result.image_urls.length > 0) {
                     displayResult(result.image_urls);
                 } else {
                     throw new Error('پاسخ معتبری از سرور دریافت نشد. ممکن است سرور موقتا با مشکل مواجه شده باشد.');
                 }
-
             } catch (error) {
                 displayError(error.message);
             } finally {
@@ -495,32 +415,34 @@
             }
         });
 
-        // --- UI Helper Functions (Updated for animations) ---
+        // --- UI Helper Functions (UPDATED) ---
         function setLoading(isLoading) {
-            if (isLoading) {
-                loader.style.display = 'block';
-                resultContainer.classList.add('loading'); // Add loading class for pulse animation
+             if (isLoading) {
+                resultContainer.classList.add('loading'); // This now shows the SVG placeholder
+                btnText.classList.add('hidden');
+                const loader = document.createElement('div');
+                loader.className = 'loader-dots';
+                loader.innerHTML = '<div class="dot1"></div><div class="dot2"></div><div class="dot3"></div>';
+                submitBtn.appendChild(loader);
                 submitBtn.disabled = true;
-                submitBtn.textContent = 'در حال پردازش...';
                 resultGrid.innerHTML = '';
                 errorMessage.style.display = 'none';
             } else {
-                loader.style.display = 'none';
-                resultContainer.classList.remove('loading');
-                submitBtn.disabled = false;
-                submitBtn.textContent = 'ویرایش کن';
-                checkFormState(); // Re-check state after loading
+                resultContainer.classList.remove('loading'); // This hides the SVG placeholder
+                btnText.classList.remove('hidden');
+                const loader = submitBtn.querySelector('.loader-dots');
+                if (loader) submitBtn.removeChild(loader);
+                checkFormState();
             }
         }
 
         function displayResult(imageUrls) {
-            resultGrid.innerHTML = ''; // Clear previous results
+            resultGrid.innerHTML = '';
             imageUrls.forEach((url, index) => {
                 const img = document.createElement('img');
                 img.src = url;
                 img.alt = 'تصویر ویرایش شده';
-                // Staggered animation delay
-                img.style.animationDelay = `${index * 100}ms`;
+                img.style.animationDelay = `${index * 120}ms`;
                 img.addEventListener('click', () => openLightbox(url));
                 resultGrid.appendChild(img);
             });
@@ -536,25 +458,17 @@
             errorMessage.style.display = 'block';
         }
         
-        // --- Lightbox Functions (Unchanged) ---
+        // --- Lightbox Functions (unchanged logic) ---
         function openLightbox(url) {
             lightboxImg.src = url;
             lightboxDownload.href = url;
             lightbox.style.display = 'flex';
         }
-        
-        function closeLightbox() {
-            lightbox.style.display = 'none';
-        }
-
+        function closeLightbox() { lightbox.style.display = 'none'; }
         lightboxClose.addEventListener('click', closeLightbox);
-        lightbox.addEventListener('click', (e) => {
-            if (e.target === lightbox) { closeLightbox(); }
-        });
+        lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
         
-        // Initial check in case of page refresh with filled form
         checkFormState();
-
     </script>
 </body>
 </html>