Spaces:

stat2025
/

PDF

Running

App Files Files Community

stat2025 commited on Nov 9, 2025

Commit

ed1606f

verified ·

1 Parent(s): 23ca33f

Update index.html

Browse files

Files changed (1) hide show

index.html +172 -255

index.html CHANGED Viewed

@@ -1,276 +1,193 @@
-<!DOCTYPE html>
-<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>
-</head>
-<body>
-  <div class="page">
-    <!-- الهيدر العلوي -->
-    <header class="topbar">
-      <div class="top-left">
-        <div class="logo-mark">PDF</div>
-        <div class="brand-text">
-          <div class="brand-title">أداة دمج ملفات المجموعة</div>
-          <div class="brand-sub">دمج احترافي لصور وملفات PDF في ملف واحد</div>
-        </div>
-      </div>
-      <div class="top-right">
-        <span class="credit">تصميم وإعداد الدعم الفني: نوف الناصر</span>
       </div>
-    </header>
-    <!-- المحتوى الرئيسي -->
-    <main class="main">
-      <!-- تعريف بسيط -->
-      <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">اختر صورًا فقط أو ملفات PDF فقط.</span>
-        </div>
-        <div class="step">
-          <span class="step-number">3</span>
-          <span class="step-text">تحميل ملف PDF النهائي مباشرة.</span>
-        </div>
-      </section>
-      <!-- الكارد الرئيسي -->
-      <section class="card main-card">
-        <div class="card-row">
-          <h2 class="card-title">اختر الملفات المراد دمجها</h2>
-          <p class="hint">
-            يدعم:
-            <strong>عدة ملفات PDF</strong> ➜ ملف PDF واحد،
-            أو
-            <strong>عدة صور (JPG / PNG)</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>
-        <!-- قائمة الملفات المختارة -->
-        <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-report.pdf"
-          />
-        </div>
-        <!-- زر الدمج -->
-        <div class="actions">
-          <button id="mergeBtn" class="btn-main">
-            دمج وإنشاء ملف PDF واحد
-          </button>
-        </div>
-        <!-- حالة العملية -->
-        <div id="status" class="status"></div>
-      </section>
-    </main>
-  </div>
-  <script>
-    const filesInput = document.getElementById("files");
-    const mergeBtn = document.getElementById("mergeBtn");
-    const statusDiv = document.getElementById("status");
-    const fileListDiv = document.getElementById("fileList");
-    const outputNameInput = document.getElementById("outputName");
-    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">${f.name}</span>
-                <span class="size">${(f.size / 1024).toFixed(1)} كيلوبايت</span>
-              </li>`
-            )
-            .join("")}
-        </ul>
-      `;
-    }
-    function detectMode(files) {
-      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 files = Array.from(filesInput.files || []).sort((a, b) =>
-        a.name.localeCompare(b.name, undefined, { numeric: true })
-      );
-      renderFileList(files);
-      setStatus("");
-    });
-    mergeBtn.addEventListener("click", async () => {
-      let files = Array.from(filesInput.files || []);
-      if (!files.length) {
-        setStatus("الرجاء اختيار الملفات أولاً.", "error");
-        return;
-      }
-      files = files.sort((a, b) =>
-        a.name.localeCompare(b.name, undefined, { numeric: true })
-      );
-      renderFileList(files);
-      const mode = detectMode(files);
-      if (!mode) {
-        setStatus(
-          "يجب أن تكون جميع الملفات صورًا فقط أو جميعها PDF فقط في العملية الواحدة.",
-          "error"
-        );
-        return;
-      }
-      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");
         }
-        // إعادة التهيئة
-        filesInput.value = "";
-        renderFileList([]);
-      } catch (err) {
-        console.error(err);
-        setStatus("حدث خطأ أثناء المعالجة. تأكد من الملفات وحاول مرة أخ��ى.", "error");
-      } finally {
-        mergeBtn.disabled = false;
-        mergeBtn.classList.remove("disabled");
       }
-    });
-  </script>
-</body>
-</html>

+<script>
+  const filesInput = document.getElementById("files");
+  const mergeBtn = document.getElementById("mergeBtn");
+  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">${f.name}</span>
+              <span class="size">${(f.size / 1024).toFixed(1)} كيلوبايت</span>
+            </li>`
+          )
+          .join("")}
+      </ul>
+    `;
+  }
+  function detectMode(files) {
+    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("");
+    // مسح قيمة input حتى نقدر نختار نفس الملف مرة ثانية لو حبينا
+    filesInput.value = "";
+  });
+  mergeBtn.addEventListener("click", async () => {
+    let files = [...selectedFiles];
+    if (!files.length) {
+      setStatus("الرجاء اختيار الملفات أولاً.", "error");
+      return;
     }
+    files.sort((a, b) =>
+      a.name.localeCompare(b.name, undefined, { numeric: true })
+    );
+    renderFileList(files);
+    const mode = detectMode(files);
+    if (!mode) {
+      setStatus(
+        "يجب أن تكون جميع الملفات صورًا فقط أو جميعها PDF فقط في العملية الواحدة.",
+        "error"
       );
+      return;
     }
+    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([]);
+    } catch (err) {
+      console.error(err);
+      setStatus("حدث خطأ أثناء المعالجة. تأكد من الملفات وحاول مرة أخرى.", "error");
+    } finally {
+      mergeBtn.disabled = false;
+      mergeBtn.classList.remove("disabled");
+    }
+  });
+</script>