Update index.html

index.html

@@ -198,31 +198,36 @@
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
         #result-container.loading #loading-placeholder { display: flex; }
         
-        /* --- NEW: Advanced Loading Spinner --- */
-        .loading-spinner {
-            width: 80px;
-            height: 80px;
+        /* --- NEW & IMPROVED: Creative Loading Spinner --- */
+        .creative-loader {
+            width: 100px;
+            height: 100px;
             position: relative;
         }
-        @keyframes spin-loader { to { transform: rotate(360deg); } }
-        .loading-spinner svg {
+        .creative-loader svg {
             width: 100%;
             height: 100%;
+            transform-origin: center;
         }
-        .loading-spinner .arc {
+        .creative-loader .arc {
             fill: none;
-            stroke-width: 5;
+            stroke-width: 4;
             stroke-linecap: round;
             transform-origin: 50% 50%;
-            animation: spin-loader infinite linear;
+            animation: spin-loader 2s linear infinite;
         }
-        .loading-spinner .arc1 {
-            stroke: var(--primary-color-end);
-            animation-duration: 1.5s;
+        .creative-loader .arc1 { stroke: var(--primary-color-start); animation-duration: 2.2s; }
+        .creative-loader .arc2 { stroke: var(--primary-color-end); animation-duration: 1.8s; animation-direction: reverse; }
+        .creative-loader .arc3 { stroke: #8b5cf6; animation-duration: 2s; }
+        .creative-loader .star {
+            fill: var(--primary-color-end);
+            transform-origin: center;
+            animation: pulse-star 1.5s ease-in-out infinite;
         }
-        .loading-spinner .arc2 {
-            stroke: var(--primary-color-start);
-            animation-duration: 3s;
+        @keyframes spin-loader { to { transform: rotate(360deg); } }
+        @keyframes pulse-star {
+            0%, 100% { transform: scale(0.9); opacity: 0.8; }
+            50% { transform: scale(1.1); opacity: 1; }
         }
 
         .loading-text { font-weight: 500; color: #64748b; }
@@ -315,10 +320,14 @@
                 </h2>
                 <div id="result-container">
                     <div id="loading-placeholder">
-                        <div class="loading-spinner">
-                             <svg viewBox="0 0 50 50">
-                                <circle class="arc arc1" cx="25" cy="25" r="20" stroke-dasharray="62.83, 125.66"></circle>
-                                <circle class="arc arc2" cx="25" cy="25" r="15" stroke-dasharray="47.12, 94.24"></circle>
+                        <div class="creative-loader">
+                            <svg viewBox="0 0 50 50">
+                                <g>
+                                    <circle class="arc arc1" cx="25" cy="25" r="22" stroke-dasharray="60 150"></circle>
+                                    <circle class="arc arc2" cx="25" cy="25" r="18" stroke-dasharray="60 150"></circle>
+                                    <circle class="arc arc3" cx="25" cy="25" r="14" stroke-dasharray="60 150"></circle>
+                                    <path class="star" d="M25,21 L26.9,24.1 L30,25 L26.9,25.9 L25,29 L23.1,25.9 L20,25 L23.1,24.1 Z"></path>
+                                </g>
                             </svg>
                         </div>
                         <p class="loading-text">هوش مصنوعی در حال خلق اثر شماست...</p>
@@ -341,8 +350,7 @@
     </div>
     
     <script>
-        // The JavaScript logic remains unchanged from the previous correct version.
-        // It correctly handles the 'loading' class which now triggers the new SVG animation.
+        // The JavaScript logic remains unchanged. It correctly handles the 'loading' class which now triggers the new SVG animation.
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
         const dropZone = document.getElementById('drop-zone');
         const dropZoneContent = document.getElementById('drop-zone-content');