djoka/bentopdf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat(docker): add docker configuration files and update styles

Browse Source 
refactor: convert script tags to link tags for stylesheets in HTML files
fix: update PDF download to use Uint8Array for blob creation
style: reformat CSS file for better readability and organization
This commit is contained in:
abdullahalam123
2025-10-12 18:23:13 +05:30
parent 5e72d7ca2d
commit 3f90e5ed8d
38 changed files with 269 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/css/styles.css
View File

@@ -65,16 +65,16 @@ input[type="file"]::file-selector-button {
}
#tool-interface {
color: #39A0ED;
color: #39A0ED;
}
.page-thumbnail,
#file-list > li {
cursor: grab;
#file-list>li {
cursor: grab;
}
.sortable-chosen {
cursor: grabbing;
cursor: grabbing;
}
.compare-viewer-wrapper.overlay-mode {
@@ -92,7 +92,7 @@ input[type="file"]::file-selector-button {
position: absolute;
top: 0;
left: 0;
width: 100%;
width: 100%;
height: auto;
}
@@ -134,40 +134,52 @@ footer a {
left: 0;
width: 100%;
/* height: 30px; */
background-color: orange; /* Yellow marker color */
background-color: orange;
/* Yellow marker color */
z-index: -1;
transform: skew(-20deg);
}
.pill {
background-color: #374151; /* bg-gray-700 */
color: #d1d5db; /* text-gray-300 */
background-color: #374151;
/* bg-gray-700 */
color: #d1d5db;
/* text-gray-300 */
padding: 8px 16px;
border-radius: 9999px; /* rounded-full */
border-radius: 9999px;
/* rounded-full */
font-size: 14px;
font-weight: 500;
}
.cta-button {
background-color: #4f46e5; /* indigo-600 */
background-color: #4f46e5;
/* indigo-600 */
color: white;
font-weight: 600;
padding: 12px 24px;
border-radius: 8px; /* rounded-lg */
border-radius: 8px;
/* rounded-lg */
transition: background-color 0.2s ease-in-out;
}
.cta-button:hover {
background-color: #4338ca; /* indigo-700 */
background-color: #4338ca;
/* indigo-700 */
}
.marker-text {
background-color: rgba(255, 255, 0, 0.5); /* Yellow marker color */
background-color: rgba(255, 255, 0, 0.5);
/* Yellow marker color */
padding: 0 5px;
}
.feature-card {
background-color: #1f2937; /* bg-gray-800 */
background-color: #1f2937;
/* bg-gray-800 */
padding: 24px;
border-radius: 8px; /* rounded-lg */
border-radius: 8px;
/* rounded-lg */
text-align: center;
}
@@ -197,33 +209,44 @@ footer a {
.section-divider {
height: 1px;
background: linear-gradient(to right, transparent, #4f46e5, transparent); /* Fades from transparent to indigo and back */
margin: 2rem auto; /* my-16 */
max-width: 42rem; /* max-w-xl */
background: linear-gradient(to right, transparent, #4f46e5, transparent);
/* Fades from transparent to indigo and back */
margin: 2rem auto;
/* my-16 */
max-width: 42rem;
/* max-w-xl */
opacity: 0.5;
}
.btn-gradient {
display: inline-block;
padding: 0.75rem 2rem; /* py-3 px-8 */
border-radius: 0.5rem; /* rounded-lg */
background-image: linear-gradient(to bottom, #6366f1, #4f46e5); /* from-indigo-500 to-indigo-600 */
color: #ffffff; /* text-white */
font-weight: 600; /* font-semibold */
padding: 0.75rem 2rem;
/* py-3 px-8 */
border-radius: 0.5rem;
/* rounded-lg */
background-image: linear-gradient(to bottom, #6366f1, #4f46e5);
/* from-indigo-500 to-indigo-600 */
color: #ffffff;
/* text-white */
font-weight: 600;
/* font-semibold */
transition-property: all;
transition-duration: 200ms;
transform: translateY(0);
}
.btn-gradient:hover {
box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3), 0 4px 6px -4px rgba(79, 70, 229, 0.3); /* hover:shadow-xl hover:shadow-indigo-500/30 */
transform: translateY(-0.25rem); /* hover:-translate-y-1 */
box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3), 0 4px 6px -4px rgba(79, 70, 229, 0.3);
/* hover:shadow-xl hover:shadow-indigo-500/30 */
transform: translateY(-0.25rem);
/* hover:-translate-y-1 */
}
.btn-gradient:focus {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 2px #111827, 0 0 0 4px #818cf8; /* focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-400 */
box-shadow: 0 0 0 2px #111827, 0 0 0 4px #818cf8;
/* focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-400 */
}
.btn-gradient:disabled {
@@ -234,10 +257,14 @@ footer a {
}
.solid-spinner {
width: 64px; /* w-16 */
height: 64px; /* h-16 */
border: 5px solid #374151; /* border-gray-700 */
border-bottom-color: #4f46e5; /* border-indigo-600 */
width: 64px;
/* w-16 */
height: 64px;
/* h-16 */
border: 5px solid #374151;
/* border-gray-700 */
border-bottom-color: #4f46e5;
/* border-indigo-600 */
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
@@ -248,6 +275,7 @@ footer a {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
@@ -256,7 +284,8 @@ footer a {
#signature-ghost {
position: absolute;
z-index: 100;
pointer-events: none; /* Allows clicks to pass through to the canvas */
pointer-events: none;
/* Allows clicks to pass through to the canvas */
opacity: 0.6;
background-size: contain;
background-repeat: no-repeat;
@@ -264,7 +293,8 @@ footer a {
/* Highlight for selected signature in the saved list */
.saved-signature.selected {
border-color: #4f46e5; /* indigo-600 */
border-color: #4f46e5;
/* indigo-600 */
box-shadow: 0 0 10px rgba(79, 70, 229, 0.5);
}
@@ -273,13 +303,25 @@ footer a {
cursor: move;
}
#canvas-sign.resize-ns { cursor: ns-resize; }
#canvas-sign.resize-ew { cursor: ew-resize; }
#canvas-sign.resize-nesw { cursor: nesw-resize; }
#canvas-sign.resize-nwse { cursor: nwse-resize; }
#canvas-sign.resize-ns {
cursor: ns-resize;
}
#canvas-sign.resize-ew {
cursor: ew-resize;
}
#canvas-sign.resize-nesw {
cursor: nesw-resize;
}
#canvas-sign.resize-nwse {
cursor: nwse-resize;
}
.faq-item.open .faq-question {
color: #818cf8; /* indigo-400 */
color: #818cf8;
/* indigo-400 */
}
.faq-item.open .faq-icon {
@@ -288,30 +330,39 @@ footer a {
/* Testimonial Card Styles */
.testimonial-card {
background-color: #1f2937; /* bg-gray-800 */
background-color: #1f2937;
/* bg-gray-800 */
padding: 24px;
border-radius: 0.75rem; /* rounded-xl */
border: 1px solid #374151; /* border-gray-700 */
border-radius: 0.75rem;
/* rounded-xl */
border: 1px solid #374151;
/* border-gray-700 */
display: flex;
flex-direction: column;
}
.pill {
background-color: #374151; /* bg-gray-700 */
color: #d1d5db; /* text-gray-300 */
background-color: #374151;
/* bg-gray-700 */
color: #d1d5db;
/* text-gray-300 */
padding: 8px 16px;
border-radius: 9999px; /* rounded-full */
border-radius: 9999px;
/* rounded-full */
font-size: 14px;
font-weight: 500;
}
.pill {
background-color: #374151; /* bg-gray-700 */
color: #d1d5db; /* text-gray-300 */
background-color: #374151;
/* bg-gray-700 */
color: #d1d5db;
/* text-gray-300 */
/* Smaller padding and font size by default for mobile */
padding: 6px 12px;
font-size: 12px;
border-radius: 9999px; /* rounded-full */
border-radius: 9999px;
/* rounded-full */
font-weight: 500;
}
@@ -333,9 +384,11 @@ footer a {
overflow-x: auto;
white-space: nowrap;
}
.form-field-group {
display: inline-block;
width: 90%; /* Adjust as needed */
width: 90%;
/* Adjust as needed */
margin-right: 1rem;
}
}
@@ -345,4 +398,61 @@ footer a {
gap: 1rem;
padding: 1rem;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.legal-content h2 {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
color: white;
margin-top: 2rem;
margin-bottom: 1rem;
}
.legal-content h3 {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
color: rgb(129 140 248);
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.legal-content p {
margin-bottom: 1rem;
line-height: 1.625;
color: rgb(156 163 175);
}
.legal-content ul {
list-style-type: disc;
list-style-position: inside;
margin-bottom: 1rem;
padding-left: 1rem;
color: rgb(156 163 175);
}
.legal-content a {
color: rgb(129 140 248);
text-decoration: underline;
}
.legal-content a:hover {
color: rgb(165 180 252);
}
details>summary {
list-style: none;
}
details>summary::-webkit-details-marker {
display: none;
}
details>summary .icon {
transition: transform 0.2s ease-in-out;
}
details[open]>summary .icon {
transform: rotate(45deg);
}

3
src/js/logic/add-blank-page.ts
View File

@@ -40,7 +40,8 @@ export async function addBlankPage() {
}
const newPdfBytes = await newPdf.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), 'page-added.pdf');
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'page-added.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Could not add a blank page.');

2
src/js/logic/bmp-to-pdf.ts
View File

@@ -45,7 +45,7 @@ export async function bmpToPdf() {
page.drawImage(pngImage, { x: 0, y: 0, width: pngImage.width, height: pngImage.height });
}
const pdfBytes = await pdfDoc.save();
downloadFile(new Blob([pdfBytes], { type: 'application/pdf' }), 'from_bmps.pdf');
downloadFile(new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' }), 'from_bmps.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Failed to convert BMP to PDF. One of the files may be invalid.');

2
src/js/logic/change-background-color.ts
View File

@@ -43,7 +43,7 @@ export async function changeBackgroundColor() {
}
const newPdfBytes = await newPdfDoc.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), 'background-changed.pdf');
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'background-changed.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Could not change the background color.');

2
src/js/logic/change-text-color.ts
View File

@@ -134,7 +134,7 @@ export async function changeTextColor() {
}
const newPdfBytes = await newPdfDoc.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), 'text-color-changed.pdf');
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'text-color-changed.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Could not change text color.');

2
src/js/logic/combine-single-page.ts
View File

@@ -66,7 +66,7 @@ export async function combineToSinglePage() {
}
const newPdfBytes = await newDoc.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), 'combined-page.pdf');
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'combined-page.pdf');
} catch (e) {
console.error(e);

2
src/js/logic/compress.ts
View File

@@ -88,7 +88,7 @@ async function performSmartCompression(arrayBuffer: any, settings: any) {
canvas.height = Math.floor(newHeight);
const img = new Image();
const imageUrl = URL.createObjectURL(new Blob([imageBytes]));
const imageUrl = URL.createObjectURL(new Blob([new Uint8Array(imageBytes)]));
await new Promise((resolve, reject) => {
img.onload = resolve;

2
src/js/logic/delete-pages.ts
View File

@@ -47,7 +47,7 @@ export async function deletePages() {
copiedPages.forEach((page: any) => newPdf.addPage(page));
const newPdfBytes = await newPdf.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), 'deleted-pages.pdf');
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'deleted-pages.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Could not delete pages.');

2
src/js/logic/duplicate-organize.ts
View File

@@ -154,7 +154,7 @@ export async function processAndSave() {
copiedPages.forEach((page: any) => newPdfDoc.addPage(page));
const newPdfBytes = await newPdfDoc.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), 'organized.pdf');
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'organized.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Failed to save the new PDF.');

2
src/js/logic/fix-dimensions.ts
View File

@@ -77,7 +77,7 @@ export async function fixDimensions() {
}
const newPdfBytes = await newDoc.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), 'standardized.pdf');
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'standardized.pdf');
} catch (e) {
console.error(e);

2
src/js/logic/heic-to-pdf.ts
View File

@@ -26,7 +26,7 @@ export async function heicToPdf() {
page.drawImage(pngImage, { x: 0, y: 0, width: pngImage.width, height: pngImage.height });
}
const pdfBytes = await pdfDoc.save();
downloadFile(new Blob([pdfBytes], { type: 'application/pdf' }), 'from_heic.pdf');
downloadFile(new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' }), 'from_heic.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Failed to convert HEIC to PDF. One of the files may be invalid or unsupported.');

2
src/js/logic/image-to-pdf.ts
View File

@@ -123,7 +123,7 @@ export async function imageToPdf() {
}
const pdfBytes = await pdfDoc.save();
downloadFile(new Blob([pdfBytes], { type: 'application/pdf' }), 'from-images.pdf');
downloadFile(new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' }), 'from-images.pdf');
} catch (e) {
console.error(e);
showAlert('Error', e.message || 'Failed to create PDF from images.');

2
src/js/logic/invert-colors.ts
View File

@@ -42,7 +42,7 @@ export async function invertColors() {
newPage.drawImage(image, { x: 0, y: 0, width: image.width, height: image.height });
}
const newPdfBytes = await newPdfDoc.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), 'inverted.pdf');
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'inverted.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Could not invert PDF colors.');

2
src/js/logic/jpg-to-pdf.ts
View File

@@ -83,7 +83,7 @@ export async function jpgToPdf() {
}
const pdfBytes = await pdfDoc.save();
downloadFile(new Blob([pdfBytes], { type: 'application/pdf' }), 'from_jpgs.pdf');
downloadFile(new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' }), 'from_jpgs.pdf');
} catch (e) {
console.error(e);
showAlert('Conversion Error', e.message);

2
src/js/logic/merge.ts
View File

@@ -244,7 +244,7 @@ export async function merge() {
}
const mergedPdfBytes = await newPdfDoc.save();
downloadFile(new Blob([mergedPdfBytes], { type: 'application/pdf' }), 'merged.pdf');
downloadFile(new Blob([new Uint8Array(mergedPdfBytes)], { type: 'application/pdf' }), 'merged.pdf');
showAlert('Success', 'PDFs merged successfully!');
} catch (e) {

2
src/js/logic/n-up.ts
View File

@@ -101,7 +101,7 @@ export async function nUpTool() {
}
const newPdfBytes = await newDoc.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), `n-up_${n}.pdf`);
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), `n-up_${n}.pdf`);
} catch (e) {
console.error(e);
showAlert('Error', 'An error occurred while creating the N-Up PDF.');

2
src/js/logic/organize.ts
View File

@@ -17,7 +17,7 @@ export async function organize() {
copiedPages.forEach((page: any) => newPdf.addPage(page));
const newPdfBytes = await newPdf.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), 'organized.pdf');
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'organized.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Could not save the changes.');

2
src/js/logic/pdf-to-greyscale.ts
View File

@@ -48,7 +48,7 @@ export async function pdfToGreyscale() {
newPage.drawImage(image, { x: 0, y: 0, width: image.width, height: image.height });
}
const newPdfBytes = await newPdfDoc.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), 'greyscale.pdf');
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'greyscale.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Could not convert to greyscale.');

2
src/js/logic/png-to-pdf.ts
View File

@@ -25,7 +25,7 @@ export async function pngToPdf() {
});
}
const pdfBytes = await pdfDoc.save();
downloadFile(new Blob([pdfBytes], { type: 'application/pdf' }), 'from_pngs.pdf');
downloadFile(new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' }), 'from_pngs.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Failed to create PDF from PNG images. Ensure all files are valid PNGs.');

2
src/js/logic/reverse-pages.ts
View File

@@ -16,7 +16,7 @@ export async function reversePages() {
copiedPages.forEach((page: any) => newPdf.addPage(page));
const newPdfBytes = await newPdf.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), 'reversed.pdf');
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'reversed.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Could not reverse the PDF pages.');

2
src/js/logic/split-in-half.ts
View File

@@ -42,7 +42,7 @@ export async function splitInHalf() {
}
const newPdfBytes = await newPdfDoc.save();
downloadFile(new Blob([newPdfBytes], { type: 'application/pdf' }), 'split-half.pdf');
downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'split-half.pdf');
} catch (e) {
console.error(e);

2
src/js/logic/split.ts
View File

@@ -198,7 +198,7 @@ export async function split() {
const copiedPages = await newPdf.copyPages(state.pdfDoc, uniqueIndices as number[]);
copiedPages.forEach((page: any) => newPdf.addPage(page));
const pdfBytes = await newPdf.save();
downloadFile(new Blob([pdfBytes], { type: 'application/pdf' }), 'split-document.pdf');
downloadFile(new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' }), 'split-document.pdf');
}
if (splitMode === 'visual') {

2
src/js/logic/svg-to-pdf.ts
View File

@@ -45,7 +45,7 @@ export async function svgToPdf() {
page.drawImage(pngImage, { x: 0, y: 0, width: pngImage.width, height: pngImage.height });
}
const pdfBytes = await pdfDoc.save();
downloadFile(new Blob([pdfBytes], { type: 'application/pdf' }), 'from_svgs.pdf');
downloadFile(new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' }), 'from_svgs.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Failed to convert SVG to PDF. One of the files may be invalid.');

2
src/js/logic/tiff-to-pdf.ts
View File

@@ -72,7 +72,7 @@ export async function tiffToPdf() {
}
}
const pdfBytes = await pdfDoc.save();
downloadFile(new Blob([pdfBytes], { type: 'application/pdf' }), 'from_tiff.pdf');
downloadFile(new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' }), 'from_tiff.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Failed to convert TIFF to PDF. One of the files may be invalid or corrupted.');

2
src/js/logic/txt-to-pdf.ts
View File

@@ -64,7 +64,7 @@ export async function txtToPdf() {
}
const pdfBytes = await pdfDoc.save();
downloadFile(new Blob([pdfBytes], { type: 'application/pdf' }), 'text-document.pdf');
downloadFile(new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' }), 'text-document.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Failed to create PDF from text.');

2
src/js/logic/webp-to-pdf.ts
View File

@@ -38,7 +38,7 @@ export async function webpToPdf() {
});
}
const pdfBytes = await pdfDoc.save();
downloadFile(new Blob([pdfBytes], { type: 'application/pdf' }), 'from_webp.pdf');
downloadFile(new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' }), 'from_webp.pdf');
} catch (e) {
console.error(e);
showAlert('Error', 'Failed to convert WebP to PDF. Ensure all files are valid WebP images.');

3
src/js/utils/helpers.ts
View File

@@ -110,4 +110,5 @@ export function parsePageRanges(rangeString: any, totalPages: any) {
// @ts-expect-error TS(2362) FIXME: The left-hand side of an arithmetic operation must... Remove this comment to see the full error message
return Array.from(indices).sort((a, b) => a - b);
}
}