Update index.html

index.html

@@ -36,7 +36,7 @@
         </div>
         <div class="step">
           <span class="step-number">2</span>
-          <span class="step-text">رتّب الملفات، واحذف أي ملف لا ترغب بوجوده.</span>
+          <span class="step-text">رتّب الملفات أو احذف ما لا تحتاجه قبل الدمج.</span>
         </div>
         <div class="step">
           <span class="step-number">3</span>
@@ -47,55 +47,57 @@
       <!-- الكارد الرئيسي -->
       <section class="card main-card">
 
-        <!-- اختيار الملفات -->
-        <div class="card-row">
-          <h2 class="card-title">اختر الملفات المراد دمجها</h2>
+        <!-- القسم 1: اختيار الملفات -->
+        <div class="card-section card-select">
+          <h2 class="card-title">اختيار الملفات</h2>
           <p class="hint">
             يدعم:
             <strong>ملفات PDF</strong>،
             <strong>صور JPG / PNG</strong>،
             أو
             <strong>الدمج بينهما</strong> في ملف واحد.
-            يتم الدمج وفق الترتيب الظاهر في القائمة، مع استخدام صفحات A4 ثابتة.
+            يتم الدمج وفق الترتيب الظاهر في القائمة، مع صفحات A4 ثابتة.
           </p>
 
           <label class="file-picker">
             <span class="file-picker-icon">📂</span>
-            <span class="file-picker-text">اضغط هنا لاختيار الملفات من جهازك (يمكن التكرار)</span>
+            <span class="file-picker-text">اضغط لاختيار الملفات (يمكن التكرار والإضافة لاحقًا)</span>
             <input id="files" type="file" multiple accept=".pdf,image/*" />
           </label>
         </div>
 
-        <!-- قائمة الملفات المختارة -->
-        <div id="fileList" class="file-list hidden"></div>
-
-        <!-- اسم الملف الناتج -->
-        <div class="card-row inline">
-          <label for="outputName" class="card-label">اسم ملف الإخراج (اختياري)</label>
-          <input
-            id="outputName"
-            type="text"
-            class="output-input"
-            placeholder="مثال: group-merged.pdf"
-          />
+        <!-- القسم 2: قائمة الملفات -->
+        <div class="card-section">
+          <div id="fileList" class="file-list hidden"></div>
         </div>
 
-        <!-- الأزرار -->
-        <div class="actions">
-          <button id="mergeBtn" class="btn-main">دمج وإنشاء ملف PDF واحد</button>
-          <button id="clearBtn" class="btn-secondary" type="button">مسح جميع الملفات</button>
-        </div>
+        <!-- القسم 3: الإخراج والأزرار -->
+        <div class="card-section card-output">
+          <div class="card-row inline">
+            <label for="outputName" class="card-label">اسم ملف الإخراج (اختياري)</label>
+            <input
+              id="outputName"
+              type="text"
+              class="output-input"
+              placeholder="مثال: group-merged.pdf"
+            />
+          </div>
+
+          <div class="actions">
+            <button id="mergeBtn" class="btn-main">دمج وإنشاء ملف PDF واحد</button>
+            <button id="clearBtn" class="btn-secondary" type="button">مسح جميع الملفات</button>
+          </div>
 
-        <!-- حالة العملية -->
-        <div id="status" class="status"></div>
+          <div id="status" class="status"></div>
 
-        <!-- شريط التقدم -->
-        <div id="progress" class="progress hidden">
-          <div id="progressText" class="progress-text">جاري المعالجة...</div>
-          <div class="progress-bar">
-            <div id="progressFill" class="progress-fill"></div>
+          <div id="progress" class="progress hidden">
+            <div id="progressText" class="progress-text">جاري المعالجة...</div>
+            <div class="progress-bar">
+              <div id="progressFill" class="progress-fill"></div>
+            </div>
           </div>
         </div>
+
       </section>
     </main>
   </div>
@@ -200,9 +202,9 @@
                 <span class="name" title="${f.name}">${f.name}</span>
                 <span class="size">${(f.size / 1024).toFixed(1)} كيلوبايت</span>
                 <div class="row-actions">
-                  <button class="move-btn" data-index="${i}" data-dir="up" title="نقل لأعلى">▲</button>
-                  <button class="move-btn" data-index="${i}" data-dir="down" title="نقل لأسفل">▼</button>
-                  <button class="delete-btn" data-index="${i}" title="حذف الملف">🗑️</button>
+                  <button class="move-btn" data-index="${i}" data-dir="up" title="نقل لأعلى">↑</button>
+                  <button class="move-btn" data-index="${i}" data-dir="down" title="نقل لأسفل">↓</button>
+                  <button class="delete-btn" data-index="${i}" title="حذف الملف">×</button>
                 </div>
               </li>`
             )
@@ -240,9 +242,11 @@
           if (isNaN(index)) return;
 
           if (dir === "up" && index > 0) {
-            [selectedFiles[index - 1], selectedFiles[index]] = [selectedFiles[index], selectedFiles[index - 1]];
+            [selectedFiles[index - 1], selectedFiles[index]] =
+              [selectedFiles[index], selectedFiles[index - 1]];
           } else if (dir === "down" && index < selectedFiles.length - 1) {
-            [selectedFiles[index + 1], selectedFiles[index]] = [selectedFiles[index], selectedFiles[index + 1]];
+            [selectedFiles[index + 1], selectedFiles[index]] =
+              [selectedFiles[index], selectedFiles[index + 1]];
           }
           renderFileList(selectedFiles);
         });
@@ -318,14 +322,15 @@
         showProgress(true);
         mergeBtn.disabled = true;
         mergeBtn.classList.add("disabled");
+        filesInput.disabled = true;
+        clearBtn.disabled = true;
 
         const pdfDoc = await PDFLib.PDFDocument.create();
         const totalSteps = files.length;
         let currentStep = 0;
 
-        // مقاس A4 ثابت
-        const pageWidth = 595.28;
-        const pageHeight = 841.89;
+        const pageWidth = 595.28;   // A4
+        const pageHeight = 841.89;  // A4
 
         for (const file of files) {
           const bytes = await file.arrayBuffer();
@@ -353,7 +358,6 @@
 
             const imgWidth = image.width;
             const imgHeight = image.height;
-
             const scale = Math.min(pageWidth / imgWidth, pageHeight / imgHeight);
             const drawWidth = imgWidth * scale;
             const drawHeight = imgHeight * scale;
@@ -392,6 +396,8 @@
       } finally {
         mergeBtn.disabled = false;
         mergeBtn.classList.remove("disabled");
+        filesInput.disabled = false;
+        clearBtn.disabled = false;
       }
     });
   </script>