Spaces:

stat2025
/

PDF

Running

App Files Files Community

stat2025 commited on Nov 9, 2025

Commit

7ea4204

verified ·

1 Parent(s): 9e39215

Update index.html

Browse files

Files changed (1) hide show

index.html +53 -55

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>
@@ -10,91 +10,93 @@
 <body>
   <div class="page">
-    <!-- الشريط العلوي -->
     <header class="topbar">
-      <div class="brand">
-        <div class="logo-circle">G</div>
         <div class="brand-text">
           <div class="brand-title">أداة دمج ملفات المجموعة</div>
-          <div class="brand-sub">حل داخلي مبسط لأعضاء الفريق</div>
         </div>
       </div>
-      <nav class="nav">
-        <span class="nav-link active">لوحة الدمج</span>
-        <span class="nav-link muted">استخدام داخلي</span>
-      </nav>
     </header>
-    <!-- مقدمة -->
     <main class="main">
       <section class="hero">
-        <h1>ادمج ملفاتك بسهولة في ملف PDF واحد.</h1>
         <p>
-          اختر مجموعة من الصور أو ملفات PDF، والأداة تقوم بإنشاء ملف PDF واحد
-          مرتب باحترافية، مناسب لمشاركات المجموعة وتقاريرها.
         </p>
       </section>
-      <!-- خطوات مبسطة -->
       <section class="steps">
         <div class="step">
-          <div class="step-number">1</div>
-          <div class="step-text">اضغط لاختيار الملفات المراد دمجها.</div>
         </div>
         <div class="step">
-          <div class="step-number">2</div>
-          <div class="step-text">اختر إما صورًا فقط أو ملفات PDF فقط.</div>
         </div>
         <div class="step">
-          <div class="step-number">3</div>
-          <div class="step-text">احصل على ملف PDF نهائي جاهز للمشاركة.</div>
         </div>
       </section>
-      <!-- الكرت الرئيسي -->
       <section class="card main-card">
-        <!-- اختيار الملفات -->
         <div class="card-row">
-          <h2 class="card-title">اختيار الملفات</h2>
           <p class="hint">
-            يدعم دمج عدة ملفات PDF في ملف واحد، أو تحويل مجموعة صور (JPG / PNG) إلى ملف PDF واحد.
-            يُفضّل عدم خلط الصور وملفات PDF في نفس العملية.
           </p>
           <label class="file-picker">
-            <span class="file-picker-label">اختر الملفات من جهازك</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-title small">اسم مل�� الإخراج (اختياري)</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>
-    <!-- التذييل -->
-    <footer class="footer">
-      <span>أداة دمج ملفات المجموعة</span>
-      <span class="dot">•</span>
-      <span>تصميم وإعداد الدعم الفني: نوف الناصر</span>
-    </footer>
   </div>
   <script>
@@ -119,8 +121,8 @@
       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
@@ -139,12 +141,11 @@
     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;
@@ -172,13 +173,11 @@
     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 })
       );
@@ -219,7 +218,6 @@
             const imgWidth = image.width;
             const imgHeight = image.height;
             const pageWidth = 595.28;   // A4
             const pageHeight = 841.89;  // A4
@@ -238,7 +236,7 @@
             (outputNameInput.value || "merged-images.pdf").trim() ||
             "merged-images.pdf";
           downloadPdf(pdfBytes, outName);
-          setStatus("تم إنشاء ملف PDF من الصور وتحميله بنجاح.", "ok");
         }
         if (mode === "pdfs") {
@@ -259,10 +257,10 @@
             (outputNameInput.value || "merged-pdfs.pdf").trim() ||
             "merged-pdfs.pdf";
           downloadPdf(pdfBytes, outName);
-          setStatus("تم دمج ملفات PDF وتحميل الملف النهائي.", "ok");
         }
-        // تنظيف
         filesInput.value = "";
         renderFileList([]);
       } catch (err) {

 <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>
 <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>
       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
     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;
     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 })
       );
             const imgWidth = image.width;
             const imgHeight = image.height;
             const pageWidth = 595.28;   // A4
             const pageHeight = 841.89;  // A4
             (outputNameInput.value || "merged-images.pdf").trim() ||
             "merged-images.pdf";
           downloadPdf(pdfBytes, outName);
+          setStatus("تم إنشاء ملف PDF من الصور بنجاح.", "ok");
         }
         if (mode === "pdfs") {
             (outputNameInput.value || "merged-pdfs.pdf").trim() ||
             "merged-pdfs.pdf";
           downloadPdf(pdfBytes, outName);
+          setStatus("تم دمج ملفات PDF بنجاح.", "ok");
         }
+        // إعادة التهيئة
         filesInput.value = "";
         renderFileList([]);
       } catch (err) {