Update index.html

index.html

@@ -29,10 +29,10 @@
 
       <!-- تعريف بسيط -->
       <section class="hero">
-        <h1>ادمج ملفاتك بسهولة في PDF واحد منسّق.</h1>
+        <h1>ادمج ملفاتك بسهولة في ملف PDF واحد منسّق.</h1>
         <p>
-          اختر مجموعة من الصور أو ملفات PDF، وسيتم إنشاء ملف PDF واحد مرتب حسب أسماء الملفات،
-          للاستخدام الداخلي ضمن مجموعتك.
+          اختر مجموعة من الصور أو ملفات PDF، وستقوم الأداة بإنشاء ملف PDF واحد مرتب حسب أسماء الملفات،
+          ليسهل حفظه ومشاركته بين أعضاء المجموعة.
         </p>
       </section>
 
@@ -40,15 +40,15 @@
       <section class="steps">
         <div class="step">
           <span class="step-number">1</span>
-          <span class="step-text">اضغط لاختيار الملفات، ويمكن الإضافة على دفعات.</span>
+          <span class="step-text">اختر ملفاتك (يمكن الإضافة على دفعات من الجوال أو الكمبيوتر).</span>
         </div>
         <div class="step">
           <span class="step-number">2</span>
-          <span class="step-text">استخدم إما صورًا فقط أو ملفات PDF فقط في كل عملية.</span>
+          <span class="step-text">تأكد أن الملفات: صور فقط أو PDF فقط في نفس العملية.</span>
         </div>
         <div class="step">
           <span class="step-number">3</span>
-          <span class="step-text">احصل على ملف PDF واحد جاهز للتحميل.</span>
+          <span class="step-text">اضغط "دمج" لتحميل ملف PDF النهائي مباشرة.</span>
         </div>
       </section>
 
@@ -57,13 +57,13 @@
 
         <!-- اختيار الملفات -->
         <div class="card-row">
-          <h2 class="card-title">اختر الملفات المراد دمجها</h2>
+          <h2 class="card-title">اختيار الملفات</h2>
           <p class="hint">
             يدعم:
             <strong>دمج عدة ملفات PDF</strong> في ملف واحد،
             أو
             <strong>تحويل عدة صور (JPG / PNG)</strong> إلى ملف PDF واحد.
-            لا تخلط بين الصور وملفات PDF في نفس العملية.
+            لا تخلط بين الصور وملفات PDF في عملية واحدة لتفادي الخطأ.
           </p>
 
           <label class="file-picker">
@@ -87,11 +87,10 @@
           />
         </div>
 
-        <!-- زر الدمج -->
+        <!-- الأزرار -->
         <div class="actions">
-          <button id="mergeBtn" class="btn-main">
-            دمج وإنشاء ملف PDF واحد
-          </button>
+          <button id="mergeBtn" class="btn-main">دمج وإنشاء ملف PDF واحد</button>
+          <button id="clearBtn" class="btn-secondary" type="button">مسح جميع الملفات</button>
         </div>
 
         <!-- حالة العملية -->
@@ -101,19 +100,223 @@
   </div>
 
   <script>
-.delete-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  transition: 0.2s;
-}
-
-.delete-btn:hover {
-  color: #b91c1c;
-  transform: scale(1.1);
-}
+    const filesInput = document.getElementById("files");
+    const mergeBtn = document.getElementById("mergeBtn");
+    const clearBtn = document.getElementById("clearBtn");
+    const statusDiv = document.getElementById("status");
+    const fileListDiv = document.getElementById("fileList");
+    const outputNameInput = document.getElementById("outputName");
 
+    // مصفوفة للاحتفاظ بكل الملفات المختارة (من عدة مرات اختيار)
+    let selectedFiles = [];
+
+    function setStatus(msg, type = "") {
+      statusDiv.textContent = msg;
+      statusDiv.className = "status" + (type ? " " + type : "");
+      if (!msg) statusDiv.className = "status";
+    }
+
+    function renderFileList(files) {
+      if (!files.length) {
+        fileListDiv.classList.add("hidden");
+        fileListDiv.innerHTML = "";
+        return;
+      }
+
+      fileListDiv.classList.remove("hidden");
+      fileListDiv.innerHTML = `
+        <div class="file-list-header">
+          <span>الملفات المختارة: ${files.length}</span>
+          <span class="file-note">يمكنك حذف أي ملف قبل الدمج أو مسح الكل.</span>
+        </div>
+        <ul class="file-list-ul">
+          ${files
+            .map(
+              (f, i) => `
+              <li>
+                <span class="index">${i + 1}</span>
+                <span class="name" title="${f.name}">${f.name}</span>
+                <span class="size">${(f.size / 1024).toFixed(1)} كيلوبايت</span>
+                <button class="delete-btn" data-index="${i}" title="حذف هذا الملف">🗑️</button>
+              </li>`
+            )
+            .join("")}
+        </ul>
+      `;
+
+      // أزرار الحذف لكل ملف
+      fileListDiv.querySelectorAll(".delete-btn").forEach((btn) => {
+        btn.addEventListener("click", (e) => {
+          const index = parseInt(e.currentTarget.dataset.index, 10);
+          if (!isNaN(index)) {
+            selectedFiles.splice(index, 1);
+            renderFileList(selectedFiles);
+            setStatus("");
+          }
+        });
+      });
+    }
+
+    function detectMode(files) {
+      if (!files.length) return null;
+      const allImages = files.every((f) => f.type.startsWith("image/"));
+      const allPDFs = files.every(
+        (f) =>
+          f.type === "application/pdf" ||
+          f.name.toLowerCase().endsWith(".pdf")
+      );
+      if (allImages) return "images";
+      if (allPDFs) return "pdfs";
+      return null;
+    }
+
+    function downloadPdf(bytes, filename) {
+      const blob = new Blob([bytes], { type: "application/pdf" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    }
+
+    // إضافة ملفات على دفعات (مهم للجوال)
+    filesInput.addEventListener("change", () => {
+      const newFiles = Array.from(filesInput.files || []);
+      if (!newFiles.length) return;
+
+      // دمج بدون تكرار (اسم + حجم + وقت تعديل)
+      const map = new Map();
+      [...selectedFiles, ...newFiles].forEach((f) => {
+        const key = `${f.name}|${f.size}|${f.lastModified}`;
+        if (!map.has(key)) map.set(key, f);
+      });
+
+      selectedFiles = Array.from(map.values()).sort((a, b) =>
+        a.name.localeCompare(b.name, undefined, { numeric: true })
+      );
+
+      renderFileList(selectedFiles);
+      setStatus("");
+      filesInput.value = ""; // للسماح باختيار دفعات جديدة
+    });
+
+    // زر مسح جميع الملفات
+    clearBtn.addEventListener("click", () => {
+      selectedFiles = [];
+      renderFileList([]);
+      setStatus("تم مسح جميع الملفات المختارة.", "ok");
+      filesInput.value = "";
+      outputNameInput.value = "";
+    });
+
+    // تنفيذ الدمج
+    mergeBtn.addEventListener("click", async () => {
+      let files = [...selectedFiles];
+
+      if (!files.length) {
+        setStatus("الرجاء اختيار الملفات أولاً.", "error");
+        return;
+      }
+
+      const mode = detectMode(files);
+      if (!mode) {
+        setStatus(
+          "تنبيه: يجب أن تكون جميع الملفات صورًا فقط أو جميعها PDF فقط في العملية الواحدة.",
+          "error"
+        );
+        return;
+      }
+
+      // ترتيب حسب الاسم
+      files.sort((a, b) =>
+        a.name.localeCompare(b.name, undefined, { numeric: true })
+      );
+      renderFileList(files);
+
+      try {
+        setStatus("جاري معالجة الملفات...", "loading");
+        mergeBtn.disabled = true;
+        mergeBtn.classList.add("disabled");
+
+        if (mode === "images") {
+          const pdfDoc = await PDFLib.PDFDocument.create();
+
+          for (const file of files) {
+            const bytes = await file.arrayBuffer();
+            const lower = file.name.toLowerCase();
+
+            let image;
+            if (
+              file.type === "image/jpeg" ||
+              file.type === "image/jpg" ||
+              lower.endsWith(".jpg") ||
+              lower.endsWith(".jpeg")
+            ) {
+              image = await pdfDoc.embedJpg(bytes);
+            } else {
+              image = await pdfDoc.embedPng(bytes);
+            }
+
+            const imgWidth = image.width;
+            const imgHeight = image.height;
+            const pageWidth = 595.28;   // A4
+            const pageHeight = 841.89;  // A4
+
+            const page = pdfDoc.addPage([pageWidth, pageHeight]);
+            const scale = Math.min(pageWidth / imgWidth, pageHeight / imgHeight);
+            const drawWidth = imgWidth * scale;
+            const drawHeight = imgHeight * scale;
+            const x = (pageWidth - drawWidth) / 2;
+            const y = (pageHeight - drawHeight) / 2;
+
+            page.drawImage(image, { x, y, width: drawWidth, height: drawHeight });
+          }
+
+          const pdfBytes = await pdfDoc.save();
+          const outName =
+            (outputNameInput.value || "merged-images.pdf").trim() ||
+            "merged-images.pdf";
+          downloadPdf(pdfBytes, outName);
+          setStatus("تم إنشاء ملف PDF من الصور بنجاح.", "ok");
+        }
+
+        if (mode === "pdfs") {
+          const pdfDoc = await PDFLib.PDFDocument.create();
+
+          for (const file of files) {
+            const bytes = await file.arrayBuffer();
+            const donorPdf = await PDFLib.PDFDocument.load(bytes);
+            const pages = await pdfDoc.copyPages(
+              donorPdf,
+              donorPdf.getPageIndices()
+            );
+            pages.forEach((p) => pdfDoc.addPage(p));
+          }
+
+          const pdfBytes = await pdfDoc.save();
+          const outName =
+            (outputNameInput.value || "merged-pdfs.pdf").trim() ||
+            "merged-pdfs.pdf";
+          downloadPdf(pdfBytes, outName);
+          setStatus("تم دمج ملفات PDF بنجاح.", "ok");
+        }
+
+        // تنظيف بعد الدمج
+        selectedFiles = [];
+        renderFileList([]);
+        filesInput.value = "";
+        // لا نمسح اسم الملف؛ يمكن استخدامه مرة أخرى لو أحب
+      } catch (err) {
+        console.error(err);
+        setStatus("حدث خطأ أثناء المعالجة. تأكد من الملفات وحاول مرة أخرى.", "error");
+      } finally {
+        mergeBtn.disabled = false;
+        mergeBtn.classList.remove("disabled");
+      }
+    });
   </script>
 </body>
 </html>