עיצוב + הורדה כ-PDF

NHLOCAL · Oct 13, 2024 · e54f1f7 · e54f1f7
1 parent a2bbe09
commit e54f1f7
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -9,20 +9,28 @@
     <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
     <!-- קישור לספריית Marked.js דרך CDN -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+	<!-- הוספת jsPDF דרך CDN -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
 </head>
 <body>
     <header>
         <h1>זה קל!</h1>
         <p>מילון טכנולוגי מקיף עם תרגום והסברים בעברית</p>
     </header>
 
-    <nav id="tab-buttons">
-        <!-- כפתורי ניווט בין הקבוצות ייטענו כאן דינמית -->
-    </nav>
+	<nav id="tab-buttons">
+		<!-- כפתורי ניווט בין הקבוצות ייטענו כאן דינמית -->
+	</nav>
+
+	<!-- כפתור להורדת PDF -->
+	<div class="download-container">
+		<button id="download-pdf">הורד כ-PDF</button>
+	</div>
+
+	<main id="content-sections">
+		<!-- התוכן ייטען כאן דינמית -->
+	</main>
 
-    <main id="content-sections">
-        <!-- התוכן ייטען כאן דינמית -->
-    </main>
 
     <footer>
         <p>&copy; 2024 זה קל! | כל הזכויות שמורות</p>

diff --git a/script.js b/script.js
@@ -5,7 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const contentSectionsContainer = document.getElementById('content-sections');
     let currentTab = null;
 
-    // פוקנציה לטעינת קובץ Markdown
+    // פונקציה לטעינת קובץ Markdown
     function loadMarkdown() {
         fetch('words.md')
             .then(response => {
@@ -26,7 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
             });
     }
 
-    // פוקנציה לחילוץ קבוצות מהקובץ Markdown
+    // פונקציה לחילוץ קבוצות מהקובץ Markdown
     function extractGroups(markdown) {
         const groups = {};
         const regex = /# (.*?)\n([\s\S]*?)(?=# |$)/g;
@@ -40,7 +40,7 @@ document.addEventListener('DOMContentLoaded', () => {
         return groups;
     }
 
-    // פוקנציה ליצירת הכפתורים דינמית
+    // פונקציה ליצירת הכפתורים דינמית
     function renderTabs(groups) {
         tabButtonsContainer.innerHTML = '';
         Object.keys(groups).forEach(groupName => {
@@ -54,7 +54,7 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
-    // פוקנציה ליצירת התוכן דינמית
+    // פונקציה ליצירת התוכן דינמית
     function renderContent(groups) {
         contentSectionsContainer.innerHTML = '';
         Object.entries(groups).forEach(([groupName, groupContent]) => {
@@ -66,7 +66,7 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
-    // פוקנציה לשינוי הטאב הפעיל
+    // פונקציה לשינוי הטאב הפעיל
     function setActiveTab(groupName) {
         if (currentTab === groupName) return;
 
@@ -89,6 +89,22 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
+    // פונקציה ליצירת PDF מהתוכן הנבחר
+    function generatePDF() {
+        const activeSection = document.querySelector('.content-section.active');
+        const pdf = new jsPDF('p', 'pt', 'a4');
+        pdf.html(activeSection, {
+            callback: function (doc) {
+                doc.save(`${currentTab}.pdf`);
+            },
+            x: 10,
+            y: 10
+        });
+    }
+
+    // האזנה לכפתור ההורדה
+    document.getElementById('download-pdf').addEventListener('click', generatePDF);
+
     // טעינת התוכן
     loadMarkdown();
 });
diff --git a/styles.css b/styles.css
@@ -129,3 +129,31 @@ footer {
     padding: 10px 0;
     margin-top: 40px;
 }
+
+
+/* הדגשת העמודה הראשונה */
+table td:first-child {
+    font-weight: bold;
+}
+
+
+/* כפתור הורדת PDF */
+.download-container {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.download-container button {
+    background-color: #ff5722;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    font-size: 1em;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.download-container button:hover {
+    background-color: #e64a19;
+}