Spaces:

stat2025
/

PDF

Running

App Files Files Community

stat2025 commited on Nov 9, 2025

Commit

a2d435c

verified ·

1 Parent(s): ed1606f

Update index.html

Browse files

Files changed (1) hide show

index.html +273 -172

index.html CHANGED Viewed

@@ -1,193 +1,294 @@
-<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>

+<!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> في ملف واحد،
+            أو
+            <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>
+        <!-- قائمة الملفات المختارة -->
+        <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"
+          />
+        </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");
+    // نخزن جميع الملفات المختارة من عدة مرات اختيار
+    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("");
+      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>
+</body>
+</html>