Update index.html

index.html

@@ -17,6 +17,7 @@
             --shadow-color-light: rgba(79, 70, 229, 0.08);
             --shadow-color-dark: rgba(30, 41, 59, 0.05);
             --drop-zone-bg: #f8fafc;
+            --danger-color: #ef4444;
             --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
         }
 
@@ -78,16 +79,18 @@
         }
         .dark p.subtitle { color: #94a3b8; }
 
-        main {
+        main, .gallery-section {
             background-color: var(--card-bg);
             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;
+            animation: fadeInUp 0.8s var(--ease-out-expo) forwards;
             opacity: 0;
         }
+        main { animation-delay: 0.2s; }
+        .gallery-section { margin-top: 3rem; animation-delay: 0.4s; }
 
         .panel, .controls { margin-bottom: 3rem; }
         .panel:last-child { margin-bottom: 0; }
@@ -113,7 +116,6 @@
             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;
@@ -165,7 +167,7 @@
         button#submit-btn:hover:not(:disabled) {
             transform: translateY(-4px);
             box-shadow: 0 10px 25px -5px var(--shadow-color-light);
-            background-position: right center; /* --- NEW: Gradient slide effect --- */
+            background-position: right center;
         }
         button#submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
         .loader-dots {
@@ -190,46 +192,22 @@
         }
         
         #loading-placeholder {
-            display: none;
-            flex-direction: column; align-items: center; justify-content: center;
-            gap: 1.5rem; opacity: 0;
-            animation: fadeIn 0.5s ease forwards;
+            display: none; flex-direction: column; align-items: center; justify-content: center;
+            gap: 1.5rem; opacity: 0; animation: fadeIn 0.5s ease forwards;
             position: absolute; inset: 0;
         }
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
         #result-container.loading #loading-placeholder { display: flex; }
         
-        /* --- NEW & IMPROVED: Creative Loading Spinner --- */
-        .creative-loader {
-            width: 100px;
-            height: 100px;
-            position: relative;
-        }
-        .creative-loader svg {
-            width: 100%;
-            height: 100%;
-            transform-origin: center;
-        }
-        .creative-loader .arc {
-            fill: none;
-            stroke-width: 4;
-            stroke-linecap: round;
-            transform-origin: 50% 50%;
-            animation: spin-loader 2s linear infinite;
-        }
+        .creative-loader { width: 100px; height: 100px; position: relative; }
+        .creative-loader svg { width: 100%; height: 100%; transform-origin: center; }
+        .creative-loader .arc { fill: none; stroke-width: 4; stroke-linecap: round; transform-origin: 50% 50%; animation: spin-loader 2s linear infinite; }
         .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;
-        }
+        .creative-loader .star { fill: var(--primary-color-end); transform-origin: center; animation: pulse-star 1.5s ease-in-out infinite; }
         @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; }
-        }
+        @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; }
         .dark .loading-text { color: #94a3b8; }
@@ -238,25 +216,16 @@
             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); }
-            100% { opacity: 1; transform: scale(1) translateY(0); }
-        }
+        @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: 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) rotate(1deg);
-            box-shadow: 0 10px 30px -5px var(--shadow-color-dark);
-        }
+        #result-grid img:hover { transform: scale(1.05) rotate(1deg); box-shadow: 0 10px 30px -5px var(--shadow-color-dark); }
         
-        #error-message { color: #ef4444; text-align: center; margin-top: 1rem; display: none; font-weight: 500; }
+        #error-message { color: var(--danger-color); 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;
@@ -264,20 +233,82 @@
             box-sizing: border-box; backdrop-filter: blur(8px);
         }
         #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-controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; }
+        .lightbox-btn {
+            background-color: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255,255,255,0.2);
+            width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex;
+            justify-content: center; align-items: center; transition: all 0.2s; text-decoration: none;
+        }
+        .lightbox-btn svg { width: 24px; height: 24px; }
+        .lightbox-btn:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
+        #lightbox-close { position: absolute; top: 20px; right: 20px; font-size: 2rem; }
+        
+        /* --- NEW: History Gallery Styles --- */
+        .gallery-header { display: flex; justify-content: space-between; align-items: center; }
+        #clear-history-btn {
+            background: none; border: 1px solid var(--border-color); color: #64748b;
+            padding: 0.5rem 1rem; border-radius: 0.75rem; cursor: pointer;
+            display: flex; align-items: center; gap: 0.5rem;
+            font-family: 'Vazirmatn', sans-serif; font-weight: 500; transition: all 0.2s;
+        }
+        #clear-history-btn:hover { border-color: var(--danger-color); color: var(--danger-color); }
+        #clear-history-btn svg { width: 18px; height: 18px; }
+
+        #history-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 1.5rem;
+            margin-top: 1.5rem;
+        }
+        #history-grid:empty::before {
+            content: 'هنوز تصویری خلق نکرده‌اید. اولین ویرایش شما اینجا ذخیره خواهد شد.';
+            color: #64748b;
+            .dark & { color: #94a3b8; }
+            grid-column: 1 / -1;
+            text-align: center;
+            padding: 3rem 1rem;
+            background-color: var(--drop-zone-bg);
+            border-radius: 1rem;
+        }
+        .history-item {
+            background-color: var(--drop-zone-bg);
+            border-radius: 1.25rem;
+            border: 1px solid var(--border-color);
+            overflow: hidden;
+            box-shadow: 0 2px 8px var(--shadow-color-dark);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            opacity: 0; animation: popIn-spring 0.6s var(--ease-out-expo) forwards;
         }
-        #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); }
+        .history-item:hover { transform: translateY(-8px); box-shadow: 0 10px 20px var(--shadow-color-dark); }
+        .history-item-img {
+            width: 100%;
+            height: 180px;
+            object-fit: cover;
+            display: block;
+        }
+        .history-item-content { padding: 1rem; }
+        .history-item-prompt {
+            font-size: 0.9rem; font-weight: 500;
+            margin: 0 0 1rem 0; height: 4.5em; /* 3 lines with line-height */
+            line-height: 1.5em; overflow: hidden;
+            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
+        }
+        .history-item-actions { display: flex; gap: 0.5rem; }
+        .history-btn {
+            flex-grow: 1; text-align: center;
+            padding: 0.6rem; border-radius: 0.75rem;
+            border: 1px solid var(--border-color); background-color: var(--card-bg);
+            color: var(--text-color); font-weight: 600;
+            display: flex; justify-content: center; align-items: center; gap: 0.5rem;
+            cursor: pointer; transition: all 0.2s; text-decoration: none;
+        }
+        .history-btn svg { width: 18px; height: 18px; }
+        .history-btn:hover { background-color: var(--primary-color-start); color: white; border-color: var(--primary-color-start); }
 
 
         @media (max-width: 600px) {
             body { padding: 1.5rem 1rem; }
-            main { padding: 1.5rem; }
+            main, .gallery-section { padding: 1.5rem; }
             h1 { font-size: 2.5rem; }
         }
     </style>
@@ -293,14 +324,12 @@
         <main>
             <div class="panel">
                 <h2>
-                    <!-- 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>
+                    <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">
                     <div id="drop-zone-content">
-                        <!-- 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>
+                        <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="پیش‌نمایش تصویر" />
@@ -310,8 +339,7 @@
 
             <div class="controls">
                 <h2>
-                    <!-- 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>
+                    <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>
@@ -323,21 +351,13 @@
 
             <div class="panel">
                 <h2>
-                    <!-- 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>
+                    <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>
                      ۳. نتیجه را ببینید
                 </h2>
                 <div id="result-container">
                     <div id="loading-placeholder">
                         <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>
+                            <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>
                     </div>
@@ -345,24 +365,35 @@
                 </div>
             </div>
         </main>
+        
+        <!-- NEW: History Gallery Section -->
+        <section class="gallery-section">
+            <div class="gallery-header">
+                 <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"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
+                    گالری و تاریخچه شما
+                </h2>
+                <button id="clear-history-btn" style="display: none;">
+                    <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="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                    <span>پاک کردن تاریخچه</span>
+                </button>
+            </div>
+            <div id="history-grid"></div>
+        </section>
     </div>
 
     <!-- Lightbox Structure -->
     <div id="lightbox">
-        <div id="lightbox-content">
-             <img id="lightbox-img" src="">
-             <!-- 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>
-        </div>
+         <img id="lightbox-img" src="">
+         <div id="lightbox-controls">
+            <a id="lightbox-download" href="#" download="edited-image.png" title="دانلود تصویر" class="lightbox-btn">
+                 <svg fill="white" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+            </a>
+         </div>
+         <button id="lightbox-close" class="lightbox-btn">&times;</button>
     </div>
     
     <script>
-        // 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');
@@ -378,15 +409,25 @@
         const lightboxImg = document.getElementById('lightbox-img');
         const lightboxClose = document.getElementById('lightbox-close');
         const lightboxDownload = document.getElementById('lightbox-download');
+        // New History Gallery Elements
+        const historyGrid = document.getElementById('history-grid');
+        const clearHistoryBtn = document.getElementById('clear-history-btn');
         let uploadedFile = null;
 
+        // --- Event Listeners Setup ---
         dropZone.addEventListener('click', () => fileInput.click());
         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);
+        submitBtn.addEventListener('click', handleSubmit);
+        lightboxClose.addEventListener('click', closeLightbox);
+        lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
+        clearHistoryBtn.addEventListener('click', handleClearHistory);
+        document.addEventListener('DOMContentLoaded', renderHistory); // Load history on page load
 
+        // --- Core Functions ---
         function handleFile(file) {
             if (!file || !file.type.startsWith('image/')) { displayError('لطفا یک فایل تصویری انتخاب کنید.'); return; }
             uploadedFile = file;
@@ -405,7 +446,7 @@
             submitBtn.disabled = !uploadedFile || promptInput.value.trim() === '';
         }
 
-        submitBtn.addEventListener('click', async () => {
+        async function handleSubmit() {
             if (submitBtn.disabled) return;
             setLoading(true);
             const formData = new FormData();
@@ -420,19 +461,21 @@
                 const result = await response.json();
                 if (result.image_urls && Array.isArray(result.image_urls) && result.image_urls.length > 0) {
                     displayResult(result.image_urls);
+                    // NEW: Save to history
+                    addToHistory({ prompt: promptInput.value.trim(), urls: result.image_urls });
                 } else {
-                    throw new Error('پاسخ معتبری از سرور دریافت نشد. ممکن است سرور موقتا با مشکل مواجه شده باشد.');
+                    throw new Error('پاسخ معتبری از سرور دریافت نشد.');
                 }
             } catch (error) {
                 displayError(error.message);
             } finally {
                 setLoading(false);
             }
-        });
+        }
 
         function setLoading(isLoading) {
              if (isLoading) {
-                resultContainer.classList.add('loading'); // This now triggers the creative loader
+                resultContainer.classList.add('loading');
                 btnText.classList.add('hidden');
                 const loader = document.createElement('div');
                 loader.className = 'loader-dots';
@@ -456,7 +499,6 @@
                 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);
@@ -473,15 +515,82 @@
             errorMessage.style.display = 'block';
         }
         
+        // --- Lightbox Functions ---
         function openLightbox(url) {
             lightboxImg.src = url;
             lightboxDownload.href = url;
             lightbox.style.display = 'flex';
         }
         function closeLightbox() { lightbox.style.display = 'none'; }
-        lightboxClose.addEventListener('click', closeLightbox);
-        lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
         
+        // --- NEW: History Management Functions ---
+        function getHistory() {
+            try {
+                const history = localStorage.getItem('aiPhotoshopHistory');
+                return history ? JSON.parse(history) : [];
+            } catch (e) {
+                console.error("Failed to parse history from localStorage", e);
+                return [];
+            }
+        }
+
+        function saveHistory(history) {
+            localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history));
+            renderHistory();
+        }
+
+        function addToHistory(item) {
+            const history = getHistory();
+            history.unshift(item); // Add to the beginning (newest first)
+            if (history.length > 20) { // Keep history size manageable
+                history.pop();
+            }
+            saveHistory(history);
+        }
+        
+        function handleClearHistory() {
+            if (confirm('آیا از پاک کردن تمام تاریخچه ویرایش‌ها مطمئن هستید؟')) {
+                localStorage.removeItem('aiPhotoshopHistory');
+                renderHistory();
+            }
+        }
+
+        function renderHistory() {
+            const history = getHistory();
+            historyGrid.innerHTML = ''; // Clear current grid
+            
+            if (history.length > 0) {
+                clearHistoryBtn.style.display = 'flex';
+                history.forEach((item, index) => {
+                    const card = document.createElement('div');
+                    card.className = 'history-item';
+                    card.style.animationDelay = `${index * 80}ms`;
+
+                    card.innerHTML = `
+                        <img src="${item.urls[0]}" alt="پیش‌نمایش تاریخچه" class="history-item-img">
+                        <div class="history-item-content">
+                            <p class="history-item-prompt">${item.prompt}</p>
+                            <div class="history-item-actions">
+                                <button class="history-btn view-all-btn">
+                                    <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="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+                                    مشاهده
+                                </button>
+                                <a href="${item.urls[0]}" download="ai-edit-${Date.now()}.png" class="history-btn">
+                                    <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 17v-10"/><path d="m15 14-3 3-3-3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg>
+                                    دانلود
+                                </a>
+                            </div>
+                        </div>
+                    `;
+                    // Add event listener to the "View All" button to open the first image in lightbox
+                    card.querySelector('.view-all-btn').addEventListener('click', () => openLightbox(item.urls[0]));
+                    historyGrid.appendChild(card);
+                });
+            } else {
+                 clearHistoryBtn.style.display = 'none';
+            }
+        }
+
         checkFormState();
     </script>
 </body>