Update index.html

index.html

@@ -113,6 +113,7 @@
             display: flex; flex-direction: column; justify-content: center;
             align-items: center; min-height: 280px;
         }
+        /* --- NEW: Cool gradient border on hover --- */
         #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;
@@ -164,7 +165,7 @@
         button#submit-btn:hover:not(:disabled) {
             transform: translateY(-4px);
             box-shadow: 0 10px 25px -5px var(--shadow-color-light);
-            background-position: right center;
+            background-position: right center; /* --- NEW: Gradient slide effect --- */
         }
         button#submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
         .loader-dots {
@@ -237,6 +238,7 @@
             display: grid; grid-template-columns: repeat(2, 1fr);
             gap: 0.75rem; width: 100%; height: 100%;
         }
+        /* --- NEW: Satisfying pop-in animation for results --- */
         @keyframes popIn-spring {
             0% { opacity: 0; transform: scale(0.8) translateY(20px); }
             80% { opacity: 1; transform: scale(1.05) translateY(-5px); }
@@ -254,22 +256,25 @@
         
         #error-message { color: #ef4444; text-align: center; margin-top: 1rem; display: none; font-weight: 500; }
         
+        /* --- NEW: Improved Lightbox styles --- */
         #lightbox {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
             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(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-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 1rem; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
+        #lightbox-content { position: relative; }
         #lightbox-close, #lightbox-download {
             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-close { right: 60px; /* Positioned to the right of download */ }
         #lightbox-download { right: 10px; }
         #lightbox-close:hover, #lightbox-download:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
 
+
         @media (max-width: 600px) {
             body { padding: 1.5rem 1rem; }
             main { padding: 1.5rem; }
@@ -288,12 +293,14 @@
         <main>
             <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 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>
+                    <!-- NEW SVG ICON -->
+                    <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.12 5.57a2.25 2.25 0 0 0-2.24-2.24l-1.13.3a2.25 2.25 0 0 1-2.61-2.61l.3-1.13a2.25 2.25 0 0 0-2.24-2.24l-.3 1.13a2.25 2.25 0 0 1-2.61-2.61l1.13-.3A2.25 2.25 0 0 0 8.43.37l-1.13.3a2.25 2.25 0 0 1-2.61-2.61l.3-1.13A2.25 2.25 0 0 0 .37 2.88l.3 1.13a2.25 2.25 0 0 1 2.61 2.61l-1.13.3a2.25 2.25 0 0 0 2.24 2.24l1.13-.3a2.25 2.25 0 0 1 2.61 2.61l-.3 1.13a2.25 2.25 0 0 0 2.24 2.24l.3-1.13a2.25 2.25 0 0 1 2.61 2.61l-1.13.3a2.25 2.25 0 0 0 2.24 2.24l1.13-.3a2.25 2.25 0 0 1 2.61 2.61l-.3 1.13a2.25 2.25 0 0 0 2.24 2.24l.3-1.13a2.25 2.25 0 0 1 2.61-2.61l-1.13-.3a2.25 2.25 0 0 0-2.24-2.24Z"/><path d="m12 12.5 2.5 2.5"/><path d="M12 12.5 9.5 9.5"/><circle cx="12" cy="12" r="5"/><path d="M2.88 15.57a2.25 2.25 0 0 0 2.24 2.24l.3-1.13a2.25 2.25 0 0 1 2.61-2.61l-1.13-.3A2.25 2.25 0 0 0 4.58 12l-1.13.3a2.25 2.25 0 0 1-2.61 2.61Z"/></svg>
                     ۱. تصویر خود را انتخاب کنید
                 </h2>
                 <div id="drop-zone">
                     <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>
+                        <!-- NEW SVG ICON -->
+                        <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 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>
                         <span id="drop-zone-text">تصویر را اینجا بکشید یا برای انتخاب کلیک کنید</span>
                     </div>
                     <img id="image-preview" src="#" alt="پیش‌نمایش تصویر" />
@@ -303,7 +310,8 @@
 
             <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="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>
+                    <!-- NEW SVG ICON -->
+                    <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 22h6a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v10"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10.4 12.6a2 2 0 1 1 3 3L8 21l-4 1 1-4Z"/></svg>
                     ۲. دستور ویرایش را بنویسید
                 </h2>
                 <textarea id="prompt-input" rows="3" placeholder="مثال: پس‌زمینه را حذف کن و یک ساحل آفتابی قرار بده"></textarea>
@@ -315,7 +323,8 @@
 
             <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="M10 3L12 8L17 10L12 12L10 17L8 12L3 10L8 8L10 3z"/><path d="M21 14l-1.5 3-3-1.5 3-3 1.5 3z"/><path d="M19.5 2.5l-3 1.5 1.5 3 3-1.5-1.5-3z"/></svg>
+                    <!-- NEW SVG ICON -->
+                    <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 3-1.9 5.8-5.9 1.2 4.4 4.3-1 6.1L12 17l5.4 3.5-1-6.1 4.4-4.3-5.9-1.2L12 3z"/><path d="M22 19l-1.9 2.8-2.9.2 2.1 2.3-1 3.1L22 25l2.4 1.5-1-3.1 2.1-2.3-2.9-.2L22 19z"/><path d="M5 3 3.1 5.8 0 7l2.1 2.3-1 3.1L5 11l2.4 1.5-1-3.1L8.5 7 5.6 5.8 5 3z"/></svg>
                      ۳. نتیجه را ببینید
                 </h2>
                 <div id="result-container">
@@ -342,7 +351,10 @@
     <div id="lightbox">
         <div id="lightbox-content">
              <img id="lightbox-img" src="">
-             <button id="lightbox-close">&times;</button>
+             <!-- NEW Buttons -->
+             <button id="lightbox-close" title="بستن">
+                <svg fill="white" width="20px" height="20px" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+             </button>
              <a id="lightbox-download" href="#" download="edited-image.png" title="دانلود تصویر">
                  <svg fill="white" width="20px" height="20px" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
              </a>
@@ -350,7 +362,7 @@
     </div>
     
     <script>
-        // The JavaScript logic remains unchanged. It correctly handles the 'loading' class which now triggers the new SVG animation.
+        // The JavaScript logic remains unchanged, but now it powers a much more dynamic UI!
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
         const dropZone = document.getElementById('drop-zone');
         const dropZoneContent = document.getElementById('drop-zone-content');
@@ -420,7 +432,7 @@
 
         function setLoading(isLoading) {
              if (isLoading) {
-                resultContainer.classList.add('loading');
+                resultContainer.classList.add('loading'); // This now triggers the creative loader
                 btnText.classList.add('hidden');
                 const loader = document.createElement('div');
                 loader.className = 'loader-dots';
@@ -444,6 +456,7 @@
                 const img = document.createElement('img');
                 img.src = url;
                 img.alt = 'تصویر ویرایش شده';
+                // NEW: Add staggered animation delay
                 img.style.animationDelay = `${index * 120}ms`;
                 img.addEventListener('click', () => openLightbox(url));
                 resultGrid.appendChild(img);