Skip to content

V1.1.4 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MohammedTsmu wants to merge 22 commits into from
Closed

V1.1.4 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
c08f868
done
MohammedTsmu Jun 23, 2024
3ed0146
pdf2chapter pre final
MohammedTsmu Jun 23, 2024
bc51150
feature to select pages
MohammedTsmu Jun 23, 2024
d912881
دمج ملفات PDF.
MohammedTsmu Jun 23, 2024
9f55d77
إضافة ميزة تحويل صفحات PDF إلى صور (JPG أو PNG)
MohammedTsmu Jun 23, 2024
080f79f
7 features
MohammedTsmu Jun 23, 2024
825cc0f
7 features
MohammedTsmu Jun 23, 2024
2f17e00
extract feature
MohammedTsmu Jun 23, 2024
7089063
extract feature
MohammedTsmu Jun 23, 2024
9ebb3d7
Rotate pages feature
MohammedTsmu Jun 23, 2024
fd71451
reorder pages full drag and drop and download feature
MohammedTsmu Jun 23, 2024
7714b49
تطبيق خلفية على صفحات PDF
MohammedTsmu Jun 23, 2024
fb3f1ad
done for now
MohammedTsmu Jun 23, 2024
928429e
add copyrights
MohammedTsmu Jun 23, 2024
6dd904a
icons, scroll to, enhance performance, new looking
MohammedTsmu Jun 24, 2024
e7b0ae4
done
MohammedTsmu Jun 24, 2024
b99693f
done
MohammedTsmu Jun 24, 2024
2bd91ea
Done
MohammedTsmu Jun 24, 2024
336f724
Active Compression feature
MohammedTsmu Jul 9, 2025
e4c6b0f
Compression Feature++
MohammedTsmu Jul 9, 2025
8ea5d76
Merge tag 'v1.1.4' of https://github.com/MohammedTsmu/PDFNinjaPro int…
MohammedTsmu Jul 9, 2025
036f8a2
UI+
MohammedTsmu Jul 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
225 changes: 204 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,223 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Splitter App</title>
<title>PDF Ninja Pro</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- <link rel="icon" href="favicon.ico" type="image/x-icon"> -->
<!-- Font Awesome Favicon -->
<link rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='red' stroke='red'><path d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm4.95 10.95H11.1V5.1H10v5.85H5.1v1.1H10v5.85h1.1V12.05h5.85z'/></svg>"
type="image/svg+xml">


<meta name="description"
content="PDF Tools App - A comprehensive tool for splitting, merging, converting, commenting, extracting text, rotating, reordering, and adding backgrounds to PDF files.">
<meta name="keywords"
content="PDF tools, split PDF, merge PDF, convert PDF, comment PDF, extract text from PDF, rotate PDF, reorder PDF, add background to PDF">
<meta name="author" content="Mohammed Q. Sattar">
</head>

<body>
<div class="container">
<h1 class="text-center">PDF Splitter App</h1>
<div class="upload-section text-center">
<input type="file" id="pdf-upload" accept="application/pdf">
<button id="upload-btn" class="btn btn-primary">Upload PDF</button>
</div>
<div id="spinner" class="spinner-border" role="status" style="display: none;">
<span class="visually-hidden">Loading...</span>
</div>
<div class="container my-4">
<h1 class="text-center mb-4">PDF Ninja Pro <i class="fas fa-file-pdf"></i></h1>
<div class="row">
<div class="col-md-8">
<div id="pdf-preview" class="pdf-preview row"></div>
<div class="col-md-12 mb-4">
<div class="upload-section text-center">
<input type="file" id="pdf-upload" accept="application/pdf" class="form-control mb-2">
<button id="upload-btn" class="btn btn-primary"><i class="fas fa-upload"></i> Upload PDF</button>
</div>
<div id="upload-notification" class="alert alert-success" role="alert" style="display: none;">
<i class="fas fa-check-circle"></i> File uploaded successfully!
</div>
<div id="spinner" class="spinner-border text-primary" role="status" style="display: none;">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<ul class="nav nav-tabs" id="pdfToolsTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="split-tab" data-bs-toggle="tab" data-bs-target="#split"
type="button" role="tab" aria-controls="split" aria-selected="true"><i class="fas fa-cut"></i> Split
PDF</button>
</li>

<li class="nav-item" role="presentation">
<button class="nav-link" id="merge-tab" data-bs-toggle="tab" data-bs-target="#merge" type="button"
role="tab" aria-controls="merge" aria-selected="false"><i class="fas fa-compress-alt"></i> Merge
PDFs</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="convert-tab" data-bs-toggle="tab" data-bs-target="#convert" type="button"
role="tab" aria-controls="convert" aria-selected="false"><i class="fas fa-image"></i> Convert PDF to
Images</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="comment-tab" data-bs-toggle="tab" data-bs-target="#comment" type="button"
role="tab" aria-controls="comment" aria-selected="false"><i class="fas fa-comment-alt"></i> Add
Comments</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="extract-tab" data-bs-toggle="tab" data-bs-target="#extract" type="button"
role="tab" aria-controls="extract" aria-selected="false"><i class="fas fa-file-alt"></i> Extract
Text</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="rotate-tab" data-bs-toggle="tab" data-bs-target="#rotate" type="button"
role="tab" aria-controls="rotate" aria-selected="false"><i class="fas fa-sync-alt"></i> Rotate
Pages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="reorder-tab" data-bs-toggle="tab" data-bs-target="#reorder" type="button"
role="tab" aria-controls="reorder" aria-selected="false"><i class="fas fa-sort"></i> Reorder
Pages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="background-tab" data-bs-toggle="tab" data-bs-target="#background"
type="button" role="tab" aria-controls="background" aria-selected="false"><i
class="fas fa-fill-drip"></i> Add Backgrounds</button>
</li>
</ul>
<div class="tab-content" id="pdfToolsTabContent">
<div class="tab-pane fade show active" id="split" role="tabpanel" aria-labelledby="split-tab">
<div class="row">
<div class="col-md-6 mb-4">
<div class="split-section">
<input type="text" id="chapter-name" placeholder="Chapter Name" class="form-control mb-2">
<input type="number" id="start-page" placeholder="From Page" class="form-control mb-2">
<input type="number" id="end-page" placeholder="To Page" class="form-control mb-2">
<button id="split-btn" class="btn btn-success mb-2"><i class="fas fa-cut"></i> Split
PDF</button>
<a id="download-link" href="#" class="btn btn-primary" style="display: none;"><i
class="fas fa-download"></i> Download PDF</a>

<button id="compress-btn" class="btn btn-warning mb-2">
<i class="fas fa-compress"></i> Compress PDF
</button>
</div>
<div id="notification" class="notification"></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="merge" role="tabpanel" aria-labelledby="merge-tab">
<div class="row">
<div class="col-md-6 mb-4">
<div class="merge-section text-center">
<h3><i class="fas fa-compress-alt"></i> Merge PDFs</h3>
<input type="file" id="pdf-merge-upload" accept="application/pdf" multiple
class="form-control mb-2">
<button id="merge-btn" class="btn btn-secondary"><i class="fas fa-compress-alt"></i> Merge
PDFs</button>
<a id="merge-download-link" href="#" class="btn btn-primary mt-2" style="display: none;"><i
class="fas fa-download"></i> Download Merged PDF</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="split-section">
<input type="text" id="chapter-name" placeholder="Chapter Name" class="form-control mb-2">
<input type="number" id="start-page" placeholder="From Page" class="form-control mb-2">
<input type="number" id="end-page" placeholder="To Page" class="form-control mb-2">
<button id="split-btn" class="btn btn-success mb-2">Split PDF</button>
<a id="download-link" href="#" class="btn btn-primary" style="display: none;">Download PDF</a>
<div class="tab-pane fade" id="convert" role="tabpanel" aria-labelledby="convert-tab">
<div class="row">
<div class="col-md-6 mb-4">
<div class="convert-section text-center">
<h3><i class="fas fa-image"></i> Convert PDF to Images</h3>
<button id="convert-btn" class="btn btn-info"><i class="fas fa-image"></i> Convert Selected
Pages to Images</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="comment" role="tabpanel" aria-labelledby="comment-tab">
<div class="row">
<div class="col-md-6 mb-4">
<div class="comment-section text-center">
<h3><i class="fas fa-comment-alt"></i> Add Comments to PDF</h3>
<textarea id="comment-text" class="form-control mb-2"
placeholder="Enter your comment"></textarea>
<button id="comment-btn" class="btn btn-warning"><i class="fas fa-comment-alt"></i> Add
Comment to Selected Pages</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="extract" role="tabpanel" aria-labelledby="extract-tab">
<div class="row">
<div class="col-md-6 mb-4">
<div class="extract-section text-center">
<h3><i class="fas fa-file-alt"></i> Extract Text from PDF</h3>
<button id="extract-btn" class="btn btn-dark"><i class="fas fa-file-alt"></i> Extract Text
from Selected Pages</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="rotate" role="tabpanel" aria-labelledby="rotate-tab">
<div class="row">
<div class="col-md-6 mb-4">
<div class="rotate-section text-center">
<h3><i class="fas fa-sync-alt"></i> Rotate Pages</h3>
<select id="rotate-angle" class="form-control mb-2">
<option value="90">90 degrees</option>
<option value="180">180 degrees</option>
<option value="270">270 degrees</option>
</select>
<button id="rotate-btn" class="btn btn-secondary"><i class="fas fa-sync-alt"></i> Rotate
Selected Pages</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="reorder" role="tabpanel" aria-labelledby="reorder-tab">
<div class="row">
<div class="col-md-6 mb-4">
<div class="reorder-section text-center">
<h3><i class="fas fa-sort"></i> Reorder Pages</h3>
<button id="reorder-btn" class="btn btn-primary"><i class="fas fa-sort"></i> Reorder
Pages</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="background" role="tabpanel" aria-labelledby="background-tab">
<div class="row">
<div class="col-md-6 mb-4">
<div class="background-section text-center">
<h3><i class="fas fa-fill-drip"></i> Add Backgrounds</h3>
<input type="color" id="background-color" class="form-control mb-2">
<button id="background-btn" class="btn btn-info"><i class="fas fa-fill-drip"></i> Add
Background to Selected Pages</button>
</div>
</div>
</div>
<div id="notification" class="notification"></div>
</div>
</div>
<div id="pdf-preview" class="pdf-preview"></div>
<div id="scroll-buttons" class="text-center my-4" style="display: none;">
<button id="scroll-top-btn" class="btn btn-primary"><i class="fas fa-arrow-up"></i> Scroll to Top</button>
<button id="scroll-bottom-btn" class="btn btn-primary"><i class="fas fa-arrow-down"></i> Scroll to
Bottom</button>
</div>
</div>

<footer class="text-center mt-4">
<p id="copyright">© 2024 Mohammed Q. Sattar Production</p>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
<script src="js/main.js"></script>
<script src="js/split.js"></script>
<script src="js/compress.js"></script>
<script src="js/merge.js"></script>
<script src="js/convert.js"></script>
<script src="js/comment.js"></script>
<script src="js/extract.js"></script>
<script src="js/rotate.js"></script>
<script src="js/reorder.js"></script>
<script src="js/background.js"></script>
<script src="js/copyright.js"></script>
</body>

</html>
52 changes: 52 additions & 0 deletions js/background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
document.getElementById('background-btn').addEventListener('click', async function () {
const fileInput = document.getElementById('pdf-upload');
const file = fileInput.files[0];
const backgroundColor = document.getElementById('background-color').value;

if (file && selectedPages.size > 0) {
console.log('Adding background color to selected pages:', Array.from(selectedPages), 'Color:', backgroundColor);
const fileReader = new FileReader();
fileReader.onload = async function () {
const typedarray = new Uint8Array(this.result);
const pdfDoc = await PDFLib.PDFDocument.load(typedarray);
const pdfLibDoc = await PDFLib.PDFDocument.create();

const pagesToCopy = await pdfLibDoc.copyPages(pdfDoc, Array.from(selectedPages).map(p => p - 1));

for (const page of pagesToCopy) {
const { width, height } = page.getSize();
const newPage = pdfLibDoc.addPage([width, height]);

newPage.drawRectangle({
x: 0,
y: 0,
width: width,
height: height,
color: PDFLib.rgb(
parseInt(backgroundColor.slice(1, 3), 16) / 255,
parseInt(backgroundColor.slice(3, 5), 16) / 255,
parseInt(backgroundColor.slice(5, 7), 16) / 255
),
opacity: 0.5,
});

const embeddedPage = await pdfLibDoc.embedPage(page);
newPage.drawPage(embeddedPage);
}

const pdfBytes = await pdfLibDoc.save();
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = 'background.pdf';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
console.log('Background added and PDF ready for download.');
};
fileReader.readAsArrayBuffer(file);
} else {
console.log('No file selected or no pages selected for background application.');
}
});
41 changes: 41 additions & 0 deletions js/comment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
document.getElementById('comment-btn').addEventListener('click', async function () {
const fileInput = document.getElementById('pdf-upload');
const file = fileInput.files[0];
const commentText = document.getElementById('comment-text').value;
if (file && selectedPages.size > 0 && commentText) {
console.log('Adding comment to selected pages:', Array.from(selectedPages));
const fileReader = new FileReader();
fileReader.onload = async function () {
const typedarray = new Uint8Array(this.result);
const pdfDoc = await PDFLib.PDFDocument.load(typedarray);
const pdfLibDoc = await PDFLib.PDFDocument.create();
const pagesToCopy = await pdfLibDoc.copyPages(pdfDoc, Array.from(selectedPages).map(p => p - 1));

pagesToCopy.forEach((page, index) => {
const { width, height } = page.getSize();
const text = pdfLibDoc.embedText(commentText, {
size: 24,
x: width / 2,
y: height / 2,
color: PDFLib.rgb(0, 0, 0),
});
page.drawText(text);
pdfLibDoc.addPage(page);
});

const pdfBytes = await pdfLibDoc.save();
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = `commented.pdf`;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
console.log('Comment added and PDF ready for download.');
};
fileReader.readAsArrayBuffer(file);
} else {
console.log('No file selected or no pages/comments provided.');
}
});
Loading