Update index.html

index.html

@@ -86,8 +86,9 @@
         }
         label.form-label svg { width: 24px; height: 24px; color: var(--accent-primary); }
 
-        /* --- New Uploader Style --- */
-        #upload-area {
+        /* --- New Uploader with Image Preview --- */
+        #drop-zone {
+            position: relative;
             border: 2px dashed var(--input-border);
             border-radius: var(--radius-input);
             padding: 2rem;
@@ -95,50 +96,72 @@
             cursor: pointer;
             transition: var(--transition-smooth);
             background-color: var(--input-bg);
+            min-height: 250px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
         }
-        #upload-area.drag-over, #upload-area:hover {
+        #drop-zone.drag-over, #drop-zone:hover {
             border-color: var(--accent-primary);
             background-color: #fff;
             box-shadow: 0 0 15px var(--accent-primary-glow);
         }
-        #upload-icon svg { width: 48px; height: 48px; color: var(--accent-primary); margin-bottom: 1rem; stroke-width: 1.5; opacity: 0.8; }
-        #upload-area p { margin: 0; color: var(--text-secondary); font-weight: 500; }
-        #file-preview {
-            display: none;
+        #drop-zone-content {
+            display: flex;
+            flex-direction: column;
             align-items: center;
-            justify-content: space-between;
-            padding: 1rem 1.2rem;
+            gap: 1rem;
+            transition: opacity 0.3s ease;
+        }
+        #drop-zone-content svg { width: 48px; height: 48px; color: var(--accent-primary); stroke-width: 1.5; opacity: 0.8; }
+        #drop-zone-content p { margin: 0; color: var(--text-secondary); font-weight: 500; }
+        
+        #image-preview {
+            position: absolute;
+            top: 0; left: 0; width: 100%; height: 100%;
+            object-fit: contain;
+            padding: 1rem;
+            box-sizing: border-box;
             background-color: var(--input-bg);
-            border-radius: var(--radius-input);
-            border: 1px solid var(--panel-border);
-            animation: fadeIn 0.3s;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s ease, visibility 0.3s;
+            pointer-events: none;
+        }
+        #image-preview.visible { opacity: 1; visibility: visible; pointer-events: auto; }
+        #remove-preview-btn {
+            position: absolute;
+            top: 1rem;
+            left: 1rem; /* Adjusted for RTL */
+            background-color: rgba(0,0,0,0.5);
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 32px;
+            height: 32px;
+            font-size: 1.5rem;
+            line-height: 1;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s ease, visibility 0.3s;
+            z-index: 10;
         }
-        #file-info { display: flex; align-items: center; gap: 1rem; overflow: hidden; }
-        #file-info svg { color: var(--accent-secondary); width: 28px; height: 28px; flex-shrink: 0; }
-        #file-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        #remove-file-btn { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 1.5rem; transition: all 0.2s; flex-shrink: 0; padding: 0 .5rem; }
-        #remove-file-btn:hover { color: var(--danger-color); transform: scale(1.1); }
+        #remove-preview-btn.visible { opacity: 1; visibility: visible; }
         
         textarea {
-            width: 100%;
-            padding: 1rem 1.2rem;
-            border-radius: var(--radius-input);
-            border: 1px solid var(--input-border);
-            background-color: var(--input-bg);
-            color: var(--text-primary);
-            box-shadow: var(--shadow-sm) inset;
-            font-family: var(--app-font);
-            font-size: 1rem;
-            box-sizing: border-box;
-            transition: var(--transition-smooth);
-            min-height: 90px;
-            resize: vertical;
+            width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-input); border: 1px solid var(--input-border);
+            background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset;
+            font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: var(--transition-smooth);
+            min-height: 90px; resize: vertical;
         }
         textarea:focus {
-            outline: none;
-            border-color: var(--accent-primary);
-            box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset;
-            background-color: var(--panel-bg);
+            outline: none; border-color: var(--accent-primary);
+            box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset; background-color: var(--panel-bg);
         }
         #submit-btn {
             display: flex; align-items: center; justify-content: center; gap: 10px;
@@ -157,39 +180,47 @@
         #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: 180px; position: relative;
+            min-height: 220px; position: relative;
             box-sizing: border-box; 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: 1rem; }
+        #loading-placeholder { display: none; flex-direction: column; align-items: center; gap: 1.5rem; }
         #result-container.loading #loading-placeholder { display: flex; animation: fadeIn 0.5s; }
-        /* Using the TTS loader */
-        .orbital-loader { width: 80px; height: 80px; position: relative; animation: spin 10s linear infinite; }
+        
+        /* Bigger Loader */
+        .orbital-loader { width: 100px; height: 100px; 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: 25px; height: 25px; margin: -12.5px 0 0 -12.5px; animation: spin 2.8s linear infinite reverse; }
-        .orbit:nth-child(2) { width: 50px; height: 50px; margin: -25px 0 0 -25px; animation: spin 3.8s linear infinite; }
-        .orbit .satellite { position: absolute; width: 8px; height: 8px; 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: -4px; left: 50%; transform: translateX(-50%); }
-        .orbit:nth-child(2) .satellite { top: 50%; left: -4px; background-color: var(--accent-secondary); transform: translateY(-50%); }
+        .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); }
         
         #result-grid {
-            display: none; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-            gap: 1rem; width: 100%;
+            display: none;
+            grid-template-columns: repeat(2, 1fr); /* Bigger results */
+            gap: 1rem;
+            width: 100%;
         }
         #result-container.has-content #result-grid { display: grid; }
         #result-grid img {
-            width: 100%; height: 150px; object-fit: cover; border-radius: var(--radius-input);
-            cursor: pointer; transition: var(--transition-smooth); box-shadow: var(--shadow-md);
+            width: 100%;
+            aspect-ratio: 1 / 1; /* Make them square */
+            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);
         }
         #result-grid img:hover { transform: scale(1.05); box-shadow: var(--shadow-lg); z-index: 10; position: relative; }
         #error-message { color: var(--danger-color); text-align: center; margin-top: 1rem; display: none; font-weight: 500; }
         
-        /* --- History Gallery Styles --- */
+        /* History Gallery Styles */
         .gallery-header { display: flex; justify-content: space-between; align-items: center; }
         #clear-history-btn { background: none; border: 1px solid var(--panel-border); color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: var(--radius-btn); cursor: pointer; display: none; align-items: center; gap: 0.5rem; font-family: var(--app-font); font-weight: 500; transition: all 0.2s; }
         #clear-history-btn:hover { border-color: var(--danger-color); color: var(--danger-color); }
@@ -197,13 +228,12 @@
         #history-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
         #history-grid:empty::before { content: 'هنوز تصویری خلق نکرده‌اید. اولین ویرایش شما اینجا ذخیره خواهد شد.'; color: var(--text-secondary); grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; background-color: var(--input-bg); border-radius: var(--radius-card); }
         .history-item { background-color: var(--input-bg); border-radius: var(--radius-card); border: 1px solid var(--panel-border); padding: 1.5rem; transition: var(--transition-smooth); }
-        .history-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
         .history-item-prompt { font-weight: 600; margin: 0 0 1rem 0; word-break: break-word; }
         .history-item-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
         .history-item-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-input); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid var(--panel-border); }
         .history-item-grid img:hover { transform: scale(1.1); box-shadow: var(--shadow-md); z-index: 5; position: relative; }
 
-        /* --- Lightbox Styles --- */
+        /* Lightbox Styles */
         #lightbox { position: fixed; inset: 0; background-color: rgba(18, 24, 38, 0.6); backdrop-filter: blur(10px) saturate(150%); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s; }
         #lightbox.visible { display: flex; opacity: 1; }
         #lightbox-content { position: relative; animation: fadeIn 0.3s ease; }
@@ -217,8 +247,6 @@
         @media (max-width: 768px) {
             main, .gallery-section { padding: 1.5rem; }
             h1 { font-size: 2.2rem; }
-            #result-grid { grid-template-columns: repeat(2, 1fr); }
-            #result-grid img { height: auto; aspect-ratio: 1/1; }
             .history-item-grid { grid-template-columns: repeat(2, 1fr); }
         }
     </style>
@@ -232,29 +260,24 @@
 
         <main>
             <div class="form-group">
-                <label for="upload-area" class="form-label">
+                <label for="drop-zone" class="form-label">
                     <svg xmlns="http://www.w3.org/2000/svg" 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>
                     ۱. تصویر خود را انتخاب کنید
                 </label>
-                <div id="upload-container">
-                    <label id="upload-area">
-                        <div id="upload-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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></div>
+                <div id="drop-zone">
+                    <div id="drop-zone-content">
+                        <svg><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>
                         <p>فایل تصویر را اینجا بکشید یا برای انتخاب کلیک کنید</p>
-                    </label>
-                    <div id="file-preview">
-                        <div id="file-info">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M13.5,16V19H10.5V16H8L12,12L16,16H13.5M13,9V3.5L18.5,9H13Z" /></svg>
-                            <span id="file-name"></span>
-                        </div>
-                        <button type="button" id="remove-file-btn" title="حذف فایل">&times;</button>
                     </div>
+                    <img id="image-preview" src="#" alt="پیش‌نمایش تصویر">
+                    <button type="button" id="remove-preview-btn" title="حذف تصویر">&times;</button>
                 </div>
                 <input type="file" id="file-input" accept="image/*" hidden>
             </div>
 
             <div class="form-group">
                 <label for="prompt-input" class="form-label">
-                    <svg xmlns="http://www.w3.org/2000/svg" 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>
+                    <svg xmlns="http://www.w.org/2000/svg" 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>
                     ۲. دستور ویرایش را بنویسید
                 </label>
                 <textarea id="prompt-input" rows="3" placeholder="مثال: پس‌زمینه را حذف کن و یک ساحل آفتابی قرار بده"></textarea>
@@ -308,12 +331,11 @@
     <script>
         const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
         
-        // --- DOM Elements ---
-        const uploadArea = document.getElementById('upload-area');
+        const dropZone = document.getElementById('drop-zone');
+        const dropZoneContent = document.getElementById('drop-zone-content');
         const fileInput = document.getElementById('file-input');
-        const filePreview = document.getElementById('file-preview');
-        const fileNameSpan = document.getElementById('file-name');
-        const removeFileBtn = document.getElementById('remove-file-btn');
+        const imagePreview = document.getElementById('image-preview');
+        const removePreviewBtn = document.getElementById('remove-preview-btn');
         const promptInput = document.getElementById('prompt-input');
         const submitBtn = document.getElementById('submit-btn');
         const btnText = document.getElementById('btn-text');
@@ -330,35 +352,44 @@
 
         let uploadedFile = null;
 
-        // --- Uploader Logic ---
         const resetUploader = () => {
             uploadedFile = null;
             fileInput.value = '';
-            uploadArea.style.display = 'block';
-            filePreview.style.display = 'none';
+            imagePreview.classList.remove('visible');
+            removePreviewBtn.classList.remove('visible');
+            dropZoneContent.style.opacity = '1';
             checkFormState();
         };
+
         const handleFile = (file) => {
             if (!file || !file.type.startsWith('image/')) {
                 displayError('لطفا یک فایل تصویری معتبر انتخاب کنید.');
                 return;
             }
             uploadedFile = file;
-            fileNameSpan.textContent = file.name;
-            uploadArea.style.display = 'none';
-            filePreview.style.display = 'flex';
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                imagePreview.src = e.target.result;
+                imagePreview.classList.add('visible');
+                removePreviewBtn.classList.add('visible');
+                dropZoneContent.style.opacity = '0';
+            };
+            reader.readAsDataURL(file);
             checkFormState();
             clearResult();
         };
-        uploadArea.addEventListener('click', () => fileInput.click());
+
+        dropZone.addEventListener('click', () => fileInput.click());
         fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => uploadArea.addEventListener(e, p => { p.preventDefault(); p.stopPropagation(); }));
-        ['dragenter', 'dragover'].forEach(e => uploadArea.addEventListener(e, () => uploadArea.classList.add('drag-over')));
-        ['dragleave', 'drop'].forEach(e => uploadArea.addEventListener(e, () => uploadArea.classList.remove('drag-over')));
-        uploadArea.addEventListener('drop', e => handleFile(e.dataTransfer.files[0]));
-        removeFileBtn.addEventListener('click', resetUploader);
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => dropZone.addEventListener(e, p => { p.preventDefault(); p.stopPropagation(); }));
+        ['dragenter', 'dragover'].forEach(e => dropZone.addEventListener(e, () => dropZone.classList.add('drag-over')));
+        ['dragleave', 'drop'].forEach(e => dropZone.addEventListener(e, () => dropZone.classList.remove('drag-over')));
+        dropZone.addEventListener('drop', e => handleFile(e.dataTransfer.files[0]));
+        removePreviewBtn.addEventListener('click', (e) => {
+            e.stopPropagation(); // prevent drop-zone click event
+            resetUploader();
+        });
 
-        // --- Form & Submission ---
         promptInput.addEventListener('input', checkFormState);
         function checkFormState() {
             submitBtn.disabled = !uploadedFile || promptInput.value.trim() === '';
@@ -390,7 +421,6 @@
             }
         });
 
-        // --- UI State Management ---
         function setLoading(isLoading) {
              if (isLoading) {
                 resultContainer.classList.remove('has-content');
@@ -428,7 +458,6 @@
             errorMessage.style.display = 'block';
         }
 
-        // --- Lightbox Functions ---
         function openLightbox(url) {
             lightboxImg.src = url;
             lightboxDownload.href = url;
@@ -438,7 +467,6 @@
         lightboxClose.addEventListener('click', closeLightbox);
         lightbox.addEventListener('click', (e) => { if (e.target === lightbox) closeLightbox(); });
 
-        // --- History Management ---
         const getHistory = () => JSON.parse(localStorage.getItem('aiPhotoshopHistory') || '[]');
         const saveHistory = (history) => {
             localStorage.setItem('aiPhotoshopHistory', JSON.stringify(history));
@@ -447,7 +475,7 @@
         const addToHistory = (item) => {
             let history = getHistory();
             history.unshift(item);
-            if (history.length > 15) history.pop(); // Limit history size
+            if (history.length > 15) history.pop();
             saveHistory(history);
         };
         const handleClearHistory = () => {