Spaces:

stat2025
/

PDF

Running

App Files Files Community

stat2025 commited on Nov 9, 2025

Commit

15427c1

verified ·

1 Parent(s): 592de21

Update index.html

Browse files

Files changed (1) hide show

index.html +138 -80

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="ar" dir="rtl">
 <head>
   <meta charset="UTF-8" />
-  <title>أداة دمج ملفات المجموعة | PDF واحد بسهولة</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="style.css" />
   <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
@@ -31,8 +31,8 @@
       <section class="hero">
         <h1>ادمج ملفاتك بسهولة في ملف PDF واحد منسّق.</h1>
         <p>
-          اختر مجموعة من الصور أو ملفات 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>
         </div>
         <div class="step">
           <span class="step-number">2</span>
-          <span class="step-text">تأكد أن الملفات: صور فقط أو PDF فقط في نفس العملية.</span>
         </div>
         <div class="step">
           <span class="step-number">3</span>
-          <span class="step-text">اضغط "دمج" لتحميل ملف PDF النهائي مباشرة.</span>
         </div>
       </section>
@@ -60,15 +60,16 @@
           <h2 class="card-title">اختيار الملفات</h2>
           <p class="hint">
             يدعم:
-            <strong>دمج عدة ملفات PDF</strong> في ملف واحد،
             أو
-            <strong>تحويل عدة صور (JPG / PNG)</strong> إلى ملف PDF واحد.
-            لا تخلط بين الصور وملفات PDF في عملية واحدة لتفادي الخطأ.
           </p>
           <label class="file-picker">
             <span class="file-picker-icon">📂</span>
-            <span class="file-picker-text">اضغط هنا لاختيار الملفات من جهازك</span>
             <input id="files" type="file" multiple accept=".pdf,image/*" />
           </label>
         </div>
@@ -107,15 +108,45 @@
     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");
@@ -124,11 +155,25 @@
       }
       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(
@@ -137,37 +182,56 @@
                 <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) {
@@ -182,25 +246,26 @@
       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 = ""; // للس��اح باختيار دفعات جديدة
     });
     // زر مسح جميع الملفات
@@ -212,28 +277,28 @@
       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 {
@@ -241,13 +306,22 @@
         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" ||
@@ -274,41 +348,25 @@
             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");

 <html lang="ar" dir="rtl">
 <head>
   <meta charset="UTF-8" />
+  <title>إدمج ملفاتك بكل سهولة</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="style.css" />
   <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
       <section class="hero">
         <h1>ادمج ملفاتك بسهولة في ملف PDF واحد منسّق.</h1>
         <p>
+          اختر صورًا، ملفات PDF، أو مزيجًا من الاثنين، وستقوم الأداة بإنشاء ملف PDF واحد
+          وفق الترتيب الظاهر في القائمة، مناسب لمشاركات وتقارير المجموعة.
         </p>
       </section>
       <section class="steps">
         <div class="step">
           <span class="step-number">1</span>
+          <span class="step-text">اختر الملفات (يمكن الإضافة على دفعات من الجوال أو الكمبيوتر).</span>
         </div>
         <div class="step">
           <span class="step-number">2</span>
+          <span class="step-text">رتّب الملفات، احذف ما لا تحتاجه.</span>
         </div>
         <div class="step">
           <span class="step-number">3</span>
+          <span class="step-text">اضغط دمج لتحميل ملف PDF النهائي مباشرة.</span>
         </div>
       </section>
           <h2 class="card-title">اختيار الملفات</h2>
           <p class="hint">
             يدعم:
+            <strong>ملفات PDF</strong>،
+            <strong>صور JPG / PNG</strong>،
             أو
+            <strong>دمج الاثنين معًا</strong> في ملف PDF واحد.
+            يتم الدمج بالترتيب في القائمة أدناه.
           </p>
           <label class="file-picker">
             <span class="file-picker-icon">📂</span>
+            <span class="file-picker-text">اضغط هنا لاختيار الملفات من جهازك (يمكن التكرار)</span>
             <input id="files" type="file" multiple accept=".pdf,image/*" />
           </label>
         </div>
     const fileListDiv = document.getElementById("fileList");
     const outputNameInput = document.getElementById("outputName");
+    // نحتفظ بالملفات المختارة (من عدة دفعات)
     let selectedFiles = [];
+    const MAX_RECOMMENDED_FILES = 200; // للتنبيه فقط
     function setStatus(msg, type = "") {
       statusDiv.textContent = msg;
       statusDiv.className = "status" + (type ? " " + type : "");
       if (!msg) statusDiv.className = "status";
     }
+    function isImage(file) {
+      const name = file.name.toLowerCase();
+      return (
+        file.type.startsWith("image/") ||
+        name.endsWith(".jpg") ||
+        name.endsWith(".jpeg") ||
+        name.endsWith(".png")
+      );
+    }
+    function isPDF(file) {
+      const name = file.name.toLowerCase();
+      return (
+        file.type === "application/pdf" ||
+        name.endsWith(".pdf")
+      );
+    }
+    function getFilesInfo(files) {
+      let hasImages = false;
+      let hasPDFs = false;
+      files.forEach((f) => {
+        if (isImage(f)) hasImages = true;
+        else if (isPDF(f)) hasPDFs = true;
+      });
+      return { hasImages, hasPDFs };
+    }
     function renderFileList(files) {
       if (!files.length) {
         fileListDiv.classList.add("hidden");
       }
       fileListDiv.classList.remove("hidden");
+      const { hasImages, hasPDFs } = getFilesInfo(files);
+      let modeText = "";
+      if (hasImages && hasPDFs) {
+        modeText = "الوضع الحالي: دمج صور + ملفات PDF في ملف واحد حسب الترتيب.";
+      } else if (hasPDFs) {
+        modeText = "الوضع الحالي: دمج ملفات PDF في ملف واحد.";
+      } else if (hasImages) {
+        modeText = "الوضع الحالي: تحويل صور إلى ملف PDF واحد.";
+      } else {
+        modeText = "لا توجد ملفات مدعومة في القائمة.";
+      }
       fileListDiv.innerHTML = `
         <div class="file-list-header">
           <span>الملفات المختارة: ${files.length}</span>
+          <span class="file-note">يمكنك إعادة ترتيب الملفات أو حذف أي ملف قبل الدمج.</span>
         </div>
+        <div class="mode-label">${modeText}</div>
         <ul class="file-list-ul">
           ${files
             .map(
                 <span class="index">${i + 1}</span>
                 <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>
+                </div>
               </li>`
             )
             .join("")}
         </ul>
       `;
+      // تحذير إذا العدد كبير
+      if (files.length > MAX_RECOMMENDED_FILES) {
+        setStatus(
+          "تنبيه: عدد الملفات كبير، قد تستغرق عملية الدمج وقتًا أطول على بعض الأجهزة.",
+          "warning"
+        );
+      }
+      // ربط أزرار الحذف
       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);
+            if (!selectedFiles.length) setStatus("");
           }
         });
       });
+      // ربط أزرار إعادة الترتيب
+      fileListDiv.querySelectorAll(".move-btn").forEach((btn) => {
+        btn.addEventListener("click", (e) => {
+          const index = parseInt(e.currentTarget.dataset.index, 10);
+          const dir = e.currentTarget.dataset.dir;
+          if (isNaN(index)) return;
+          if (dir === "up" && index > 0) {
+            const tmp = selectedFiles[index - 1];
+            selectedFiles[index - 1] = selectedFiles[index];
+            selectedFiles[index] = tmp;
+          } else if (dir === "down" && index < selectedFiles.length - 1) {
+            const tmp = selectedFiles[index + 1];
+            selectedFiles[index + 1] = selectedFiles[index];
+            selectedFiles[index] = tmp;
+          }
+          renderFileList(selectedFiles);
+        });
+      });
     }
     function downloadPdf(bytes, filename) {
       URL.revokeObjectURL(url);
     }
+    // إضافة ملفات على دفعات
     filesInput.addEventListener("change", () => {
+      const newFilesRaw = Array.from(filesInput.files || []);
+      if (!newFilesRaw.length) return;
+      // نسمح فقط بالصور و PDF، نتجاهل غيرها
+      const newFiles = newFilesRaw.filter((f) => isImage(f) || isPDF(f));
       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());
       renderFileList(selectedFiles);
       setStatus("");
+      // إفراغ input للسماح بالاختيار مرة أخرى
+      filesInput.value = "";
     });
     // زر مسح جميع الملفات
       outputNameInput.value = "";
     });
+    // عملية الدمج
     mergeBtn.addEventListener("click", async () => {
+      const files = [...selectedFiles];
       if (!files.length) {
         setStatus("الرجاء اختيار الملفات أولاً.", "error");
         return;
       }
+      // تأكيد أن كل الملفات مدعومة
+      const unsupported = files.filter((f) => !isImage(f) && !isPDF(f));
+      if (unsupported.length) {
+        setStatus("يوجد ملفات غير مدعومة. يرجى حذفها من القائمة.", "error");
+        return;
+      }
+      const { hasImages, hasPDFs } = getFilesInfo(files);
+      if (!hasImages && !hasPDFs) {
+        setStatus("لا توجد ملفات مدعومة للدمج.", "error");
         return;
       }
       renderFileList(files);
       try {
         mergeBtn.disabled = true;
         mergeBtn.classList.add("disabled");
+        const pdfDoc = await PDFLib.PDFDocument.create();
+        for (const file of files) {
+          const bytes = await file.arrayBuffer();
+          if (isPDF(file)) {
+            // نسخ صفحات PDF كما هي
+            const donorPdf = await PDFLib.PDFDocument.load(bytes);
+            const pages = await pdfDoc.copyPages(
+              donorPdf,
+              donorPdf.getPageIndices()
+            );
+            pages.forEach((p) => pdfDoc.addPage(p));
+          } else if (isImage(file)) {
+            // إضافة الصورة في صفحة A4
+            const lower = file.name.toLowerCase();
             let image;
             if (
               file.type === "image/jpeg" ||
             page.drawImage(image, { x, y, width: drawWidth, height: drawHeight });
           }
         }
+        const pdfBytes = await pdfDoc.save();
+        let defaultName = "merged.pdf";
+        if (hasImages && !hasPDFs) defaultName = "merged-images.pdf";
+        else if (!hasImages && hasPDFs) defaultName = "merged-pdfs.pdf";
+        else if (hasImages && hasPDFs) defaultName = "merged-mixed.pdf";
+        const outName =
+          (outputNameInput.value || defaultName).trim() || defaultName;
+        downloadPdf(pdfBytes, outName);
+        setStatus("تم إنشاء ملف PDF النهائي بنجاح.", "ok");
+        // لا نفرغ الاسم، لكن نفرغ الملفات
         selectedFiles = [];
         renderFileList([]);
         filesInput.value = "";
       } catch (err) {
         console.error(err);
         setStatus("حدث خطأ أثناء المعالجة. تأكد من الملفات وحاول مرة أخرى.", "error");