diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..30a5cef --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,9 @@ +{ + "permissions": { + "allow": [ + "Bash(npm install *)", + "Bash(npm run *)", + "Bash(awk '{print $NF}')" + ] + } +} diff --git a/about.html b/about.html index 08a384d..154c518 100644 --- a/about.html +++ b/about.html @@ -286,7 +286,7 @@

Explore All Tools diff --git a/index.html b/index.html index a710c24..cb9032f 100644 --- a/index.html +++ b/index.html @@ -102,44 +102,6 @@ {{> navbar }} -
-
- - Love BentoPDF? Help us keep it free and open source! - - - - Donate - - - - - - Sponsor - -
-
@@ -188,10 +150,10 @@ -
+ diff --git a/public/images/profile-pic.png b/public/images/profile-pic.png new file mode 100644 index 0000000..aab5eb1 Binary files /dev/null and b/public/images/profile-pic.png differ diff --git a/public/locales/en/common.json b/public/locales/en/common.json index c22880e..5768b9e 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -223,7 +223,7 @@ "footer": { "copyright": "© 2026 BentoPDF. All rights reserved.", "version": "Version", - "company": "Company", + "company": "Company (BentoPDF)", "aboutUs": "About Us", "faqLink": "FAQ", "contactUs": "Contact Us", diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json index 7e21edb..80f4d2e 100644 --- a/public/locales/fr/common.json +++ b/public/locales/fr/common.json @@ -214,7 +214,7 @@ "footer": { "copyright": "© 2026 BentoPDF. Tous droits réservés.", "version": "Version", - "company": "Entreprise", + "company": "Entreprise (BentoPDF)", "aboutUs": "À propos", "faqLink": "FAQ", "contactUs": "Nous contacter", diff --git a/src/css/markdown-editor.css b/src/css/markdown-editor.css index 3852036..faeb0bb 100644 --- a/src/css/markdown-editor.css +++ b/src/css/markdown-editor.css @@ -45,23 +45,23 @@ } .md-editor-btn-secondary { - color: rgb(156, 163, 175); - background: rgb(31, 41, 55); - border: 1px solid rgb(55, 65, 81); + color: rgb(157, 191, 175); + background: rgb(0, 62, 28); + border: 1px solid rgb(2, 78, 37); } .md-editor-btn-secondary:hover { - background: rgb(55, 65, 81); + background: rgb(2, 78, 37); color: white; } .md-editor-btn-primary { color: white; - background: rgb(79, 70, 229); + background: rgb(117, 187, 153); } .md-editor-btn-primary:hover { - background: rgb(99, 102, 241); + background: rgb(117, 187, 153); } .md-editor-btn:disabled { @@ -75,18 +75,18 @@ align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; - background: rgb(31, 41, 55); - border: 1px solid rgb(55, 65, 81); + background: rgb(0, 62, 28); + border: 1px solid rgb(2, 78, 37); border-radius: 0.375rem; font-size: 0.875rem; - color: rgb(156, 163, 175); + color: rgb(157, 191, 175); } .theme-toggle-slider { position: relative; width: 40px; height: 20px; - background: rgb(55, 65, 81); + background: rgb(2, 78, 37); border-radius: 10px; cursor: pointer; transition: background 0.2s; @@ -105,7 +105,7 @@ } .theme-toggle-slider.active { - background: rgb(79, 70, 229); + background: rgb(117, 187, 153); } .theme-toggle-slider.active::before { @@ -118,7 +118,7 @@ grid-template-columns: 1fr 1fr; gap: 1rem; height: 600px; - border: 1px solid rgb(55, 65, 81); + border: 1px solid rgb(2, 78, 37); border-radius: 0.5rem; overflow: hidden; } @@ -127,22 +127,22 @@ display: flex; flex-direction: column; min-height: 0; - background: rgb(31, 41, 55); + background: rgb(0, 62, 28); } .md-editor-pane-header { padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; - color: rgb(156, 163, 175); - background: rgb(17, 24, 39); - border-bottom: 1px solid rgb(55, 65, 81); + color: rgb(157, 191, 175); + background: rgb(1, 17, 9); + border-bottom: 1px solid rgb(2, 78, 37); flex-shrink: 0; } /* Separator between panes */ .md-editor-pane:first-child { - border-right: 2px solid rgb(55, 65, 81); + border-right: 2px solid rgb(2, 78, 37); } .md-editor.light-mode .md-editor-pane:first-child { @@ -158,7 +158,7 @@ font-size: 0.875rem; line-height: 1.6; color: rgb(229, 231, 235); - background: rgb(31, 41, 55); + background: rgb(0, 62, 28); border: none; outline: none; resize: none; @@ -181,19 +181,19 @@ .md-editor.light-mode .md-editor-textarea { background: white; - color: rgb(17, 24, 39); + color: rgb(1, 17, 9); } .md-editor.light-mode .md-editor-preview { background: white; - color: rgb(17, 24, 39); + color: rgb(1, 17, 9); } .md-editor-preview { flex: 1; padding: 1.5rem; overflow-y: auto; - background: rgb(31, 41, 55); + background: rgb(0, 62, 28); color: rgb(229, 231, 235); } @@ -218,13 +218,13 @@ .md-editor-preview h1 { font-size: 2em; - border-bottom: 1px solid rgb(55, 65, 81); + border-bottom: 1px solid rgb(2, 78, 37); padding-bottom: 0.3em; } .md-editor-preview h2 { font-size: 1.5em; - border-bottom: 1px solid rgb(55, 65, 81); + border-bottom: 1px solid rgb(2, 78, 37); padding-bottom: 0.3em; } @@ -249,20 +249,20 @@ .md-editor-preview code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.9em; - background: rgb(17, 24, 39); + background: rgb(1, 17, 9); color: rgb(251, 191, 36); padding: 0.2em 0.4em; border-radius: 3px; } .md-editor-preview pre { - background: rgb(17, 24, 39); + background: rgb(1, 17, 9); padding: 1rem; overflow: auto; border-radius: 0.5rem; line-height: 1.45; margin: 1em 0; - border: 1px solid rgb(55, 65, 81); + border: 1px solid rgb(2, 78, 37); } .md-editor-preview pre code { @@ -274,8 +274,8 @@ .md-editor-preview blockquote { margin: 1em 0; padding: 0 1em; - color: rgb(156, 163, 175); - border-left: 4px solid rgb(79, 70, 229); + color: rgb(157, 191, 175); + border-left: 4px solid rgb(117, 187, 153); } .md-editor-preview ul, @@ -296,24 +296,24 @@ .md-editor-preview th, .md-editor-preview td { - border: 1px solid rgb(55, 65, 81); + border: 1px solid rgb(2, 78, 37); padding: 8px 12px; text-align: left; } .md-editor-preview th { - background: rgb(17, 24, 39); + background: rgb(1, 17, 9); font-weight: 600; color: white; } .md-editor-preview tr:nth-child(even) { - background: rgb(17, 24, 39); + background: rgb(1, 17, 9); } .md-editor-preview hr { border: none; - border-top: 1px solid rgb(55, 65, 81); + border-top: 1px solid rgb(2, 78, 37); margin: 2em 0; } @@ -330,7 +330,7 @@ .md-editor.light-mode .md-editor-preview h4, .md-editor.light-mode .md-editor-preview h5, .md-editor.light-mode .md-editor-preview h6 { - color: rgb(17, 24, 39); + color: rgb(1, 17, 9); } .md-editor.light-mode .md-editor-preview h1, @@ -353,12 +353,12 @@ } .md-editor.light-mode .md-editor-preview pre code { - color: rgb(17, 24, 39); + color: rgb(1, 17, 9); } .md-editor.light-mode .md-editor-preview blockquote { color: rgb(75, 85, 99); - border-left-color: rgb(99, 102, 241); + border-left-color: rgb(117, 187, 153); } .md-editor.light-mode .md-editor-preview th, @@ -368,7 +368,7 @@ .md-editor.light-mode .md-editor-preview th { background: rgb(249, 250, 251); - color: rgb(17, 24, 39); + color: rgb(1, 17, 9); } .md-editor.light-mode .md-editor-preview tr:nth-child(even) { @@ -382,7 +382,7 @@ /* Markdown Plugin Styles */ .md-editor-preview mark { background-color: rgb(254, 243, 199); - color: rgb(17, 24, 39); + color: rgb(1, 17, 9); padding: 0.1em 0.2em; border-radius: 2px; } @@ -390,7 +390,7 @@ .md-editor-preview ins { text-decoration: none; background-color: rgb(134, 239, 172); - color: rgb(17, 24, 39); + color: rgb(1, 17, 9); padding: 0.1em 0.2em; border-radius: 2px; } @@ -403,7 +403,7 @@ .md-editor-preview .footnotes { margin-top: 2em; padding-top: 1em; - border-top: 1px solid rgb(55, 65, 81); + border-top: 1px solid rgb(2, 78, 37); font-size: 0.9em; } @@ -412,11 +412,11 @@ } .md-editor-preview .table-of-contents { - background: rgb(17, 24, 39); + background: rgb(1, 17, 9); padding: 1em 1.5em; border-radius: 0.5rem; margin: 1em 0; - border: 1px solid rgb(55, 65, 81); + border: 1px solid rgb(2, 78, 37); } .md-editor.light-mode .md-editor-preview .table-of-contents { @@ -430,9 +430,9 @@ justify-content: center; margin: 1.5em 0; padding: 1em; - background: rgb(17, 24, 39); + background: rgb(1, 17, 9); border-radius: 0.5rem; - border: 1px solid rgb(55, 65, 81); + border: 1px solid rgb(2, 78, 37); } .md-editor-preview .mermaid-diagram svg { @@ -473,14 +473,14 @@ } .md-editor-modal { - background: rgb(31, 41, 55); + background: rgb(0, 62, 28); border-radius: 0.75rem; padding: 1.5rem; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; - border: 1px solid rgb(55, 65, 81); + border: 1px solid rgb(2, 78, 37); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); } @@ -499,7 +499,7 @@ .md-editor-modal-close { padding: 0.5rem; - color: rgb(156, 163, 175); + color: rgb(157, 191, 175); background: transparent; border: none; cursor: pointer; @@ -508,7 +508,7 @@ } .md-editor-modal-close:hover { - background: rgb(55, 65, 81); + background: rgb(2, 78, 37); color: white; } @@ -529,7 +529,7 @@ gap: 0.5rem; padding: 0.375rem 0; font-size: 0.875rem; - color: rgb(156, 163, 175); + color: rgb(157, 191, 175); cursor: pointer; } @@ -541,8 +541,8 @@ padding: 0.5rem 0.75rem; font-size: 0.875rem; color: white; - background: rgb(17, 24, 39); - border: 1px solid rgb(55, 65, 81); + background: rgb(1, 17, 9); + border: 1px solid rgb(2, 78, 37); border-radius: 0.375rem; cursor: pointer; width: 100%; @@ -554,12 +554,11 @@ .md-editor-settings-group select:focus { outline: none; - border-color: rgb(79, 70, 229); + border-color: rgb(117, 187, 153); } /* Print Styles */ @media print { - /* Reset all backgrounds, margins, and padding */ html, body { @@ -584,10 +583,10 @@ nav, footer, #back-to-tools, - .bg-gray-800>h1.text-2xl, - .bg-gray-800>p.text-gray-400, - #markdown-editor-container~h1, - #markdown-editor-container~p { + .bg-gray-800 > h1.text-2xl, + .bg-gray-800 > p.text-gray-400, + #markdown-editor-container ~ h1, + #markdown-editor-container ~ p { display: none !important; } @@ -600,7 +599,7 @@ .py-8, .px-4, #markdown-editor-container, - [class*="container"] { + [class*='container'] { padding: 0 !important; margin: 0 !important; background: white !important; @@ -658,8 +657,8 @@ page-break-after: avoid; } - .md-editor-preview>h1:first-child, - .md-editor-preview>*:first-child { + .md-editor-preview > h1:first-child, + .md-editor-preview > *:first-child { margin-top: 0 !important; } @@ -769,7 +768,7 @@ .md-editor-pane:first-child { border-right: none; - border-bottom: 2px solid rgb(55, 65, 81); + border-bottom: 2px solid rgb(2, 78, 37); } .md-editor.light-mode .md-editor-pane:first-child { @@ -814,4 +813,4 @@ .md-editor-actions { gap: 0.375rem; } -} \ No newline at end of file +} diff --git a/src/css/styles.css b/src/css/styles.css index ed4111b..09b2c8f 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -42,6 +42,19 @@ --font-lato: 'Lato', sans-serif; --font-merriweather: 'Merriweather', serif; --font-cedarville: 'Cedarville Cursive', cursive; + + --color-indigo-400: #d9f3e4; + --color-indigo-500: #75bb99; + --color-indigo-600: #75bb99; + --color-indigo-700: #5a9e7d; + --color-gray-900: #011109; + --color-gray-800: #003e1c; + --color-gray-700: #024e25; + --color-gray-600: #036830; + --color-gray-500: #9dbfaf; + --color-gray-400: #9dbfaf; + --color-gray-300: #d9f3e4; + --color-gray-200: #d9f3e4; } html { @@ -50,16 +63,16 @@ html { body { font-family: 'DM Sans', sans-serif; - background-color: #111827; - color: #d1d5db; + background-color: #011109; + color: #d9f3e4; } .tool-card { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - border: 1px solid #374151; - background-color: #1f2937; + border: 1px solid #024e25; + background-color: #003e1c; padding: 1.5rem; border-radius: 0.5rem; display: flex; @@ -68,12 +81,25 @@ body { text-align: center; } +.btn-cta-red { + background: linear-gradient(to bottom, #cc3910, #bb2d0c); +} + +.btn-cta-red:hover { + box-shadow: + 0 20px 25px -5px rgba(187, 45, 12, 0.4), + 0 8px 10px -6px rgba(187, 45, 12, 0.3); +} + .tool-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1); - border-color: #4f46e5; + border-color: #bb2d0c; + box-shadow: + 0 10px 15px -3px rgba(187, 45, 12, 0.2), + 0 4px 6px -2px rgba(187, 45, 12, 0.1); } .category-header { @@ -98,11 +124,11 @@ body { } .category-header:hover { - color: #818cf8; + color: #d9f3e4; } .category-header:hover .category-chevron { - color: #818cf8; + color: #d9f3e4; } .category-tools { @@ -126,7 +152,7 @@ body { border-left: none; border-right: none; border-top: none; - border-bottom: 1px solid #1f2937; + border-bottom: 1px solid #003e1c; background-color: transparent; align-items: center; justify-content: flex-start; @@ -160,8 +186,8 @@ body { .compact-mode .tool-card:hover { transform: none; box-shadow: none; - background-color: #1f2937; - border-color: #1f2937; + background-color: #003e1c; + border-color: #003e1c; } @media (min-width: 640px) { @@ -197,23 +223,23 @@ input[type='file']::file-selector-button { } ::-webkit-scrollbar-track { - background: #1f2937; + background: #003e1c; } ::-webkit-scrollbar-thumb { - background: #4f46e5; + background: #75bb99; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { - background: #4338ca; + background: #5a9e7d; /* indigo-700 */ } /* Style for drag-and-drop placeholder */ .sortable-ghost { opacity: 0.4; - border: 2px dashed #4f46e5; + border: 2px dashed #75bb99; } #embed-pdf-container > div { @@ -222,7 +248,7 @@ input[type='file']::file-selector-button { } #tool-interface { - color: #39a0ed; + color: #75bb99; } #page-organizer .page-thumbnail, @@ -251,9 +277,9 @@ input[type='file']::file-selector-button { min-width: 0; overflow: auto; height: 75vh; - border: 2px solid #374151; + border: 2px solid #024e25; border-radius: 0.5rem; - background-color: #1f2937; + background-color: #003e1c; } /* This rule ensures canvases in side-by-side panels display at their natural rendered size. */ @@ -285,9 +311,9 @@ footer a { } .pill { - background-color: #374151; + background-color: #024e25; /* bg-gray-700 */ - color: #d1d5db; + color: #d9f3e4; /* text-gray-300 */ padding: 8px 16px; border-radius: 9999px; @@ -297,7 +323,7 @@ footer a { } .cta-button { - background-color: #4f46e5; + background-color: #75bb99; /* indigo-600 */ color: white; font-weight: 600; @@ -308,7 +334,7 @@ footer a { } .cta-button:hover { - background-color: #4338ca; + background-color: #5a9e7d; /* indigo-700 */ } @@ -319,7 +345,7 @@ footer a { } .feature-card { - background-color: #1f2937; + background-color: #003e1c; /* bg-gray-800 */ padding: 24px; border-radius: 8px; @@ -347,13 +373,13 @@ footer a { right: 0; bottom: 0; height: 6px; - background: linear-gradient(120deg, #6366f1, #8b5cf6); + background: linear-gradient(120deg, #75bb99, #5a9e7d); z-index: -1; } .section-divider { height: 1px; - background: linear-gradient(to right, transparent, #4d44f7, transparent); + background: linear-gradient(to right, transparent, #75bb99, transparent); /* Fades from transparent to indigo and back */ margin: 2rem auto; /* my-16 */ @@ -368,7 +394,7 @@ footer a { /* py-3 px-8 */ border-radius: 0.5rem; /* rounded-lg */ - background-image: linear-gradient(to bottom, #6366f1, #4f46e5); + background-image: linear-gradient(to bottom, #75bb99, #75bb99); /* from-indigo-500 to-indigo-600 */ color: #ffffff; /* text-white */ @@ -381,16 +407,16 @@ footer a { .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); + 0 10px 15px -3px rgba(117, 187, 153, 0.3), + 0 4px 6px -4px rgba(117, 187, 153, 0.3); } .btn-gradient:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: - 0 0 0 2px #111827, - 0 0 0 4px #818cf8; + 0 0 0 2px #011109, + 0 0 0 4px #d9f3e4; /* focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-indigo-400 */ } @@ -406,9 +432,9 @@ footer a { /* w-16 */ height: 64px; /* h-16 */ - border: 5px solid #374151; + border: 5px solid #024e25; /* border-gray-700 */ - border-bottom-color: #4f46e5; + border-bottom-color: #75bb99; /* border-indigo-600 */ border-radius: 50%; display: inline-block; @@ -438,9 +464,9 @@ footer a { /* Highlight for selected signature in the saved list */ .saved-signature.selected { - border-color: #4f46e5; + border-color: #75bb99; /* indigo-600 */ - box-shadow: 0 0 10px rgba(79, 70, 229, 0.5); + box-shadow: 0 0 10px rgba(117, 187, 153, 0.5); } /* Cursor change when hovering over a placed signature */ @@ -465,7 +491,7 @@ footer a { } .faq-item.open .faq-question { - color: #818cf8; + color: #d9f3e4; /* indigo-400 */ } @@ -475,21 +501,21 @@ footer a { /* Testimonial Card Styles */ .testimonial-card { - background-color: #1f2937; + background-color: #003e1c; /* bg-gray-800 */ padding: 24px; border-radius: 0.75rem; /* rounded-xl */ - border: 1px solid #374151; + border: 1px solid #024e25; /* border-gray-700 */ display: flex; flex-direction: column; } .pill { - background-color: #374151; + background-color: #024e25; /* bg-gray-700 */ - color: #d1d5db; + color: #d9f3e4; /* text-gray-300 */ padding: 8px 16px; border-radius: 9999px; @@ -499,9 +525,9 @@ footer a { } .pill { - background-color: #374151; + background-color: #024e25; /* bg-gray-700 */ - color: #d1d5db; + color: #d9f3e4; /* text-gray-300 */ /* Smaller padding and font size by default for mobile */ padding: 6px 12px; @@ -626,11 +652,11 @@ button:disabled, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; line-height: 1; - color: #e5e7eb; - background-color: #374151; - border: 1px solid #4b5563; + color: #d9f3e4; + background-color: #024e25; + border: 1px solid #036830; border-radius: 0.25rem; - box-shadow: 0 1px 0 0 #1f2937; + box-shadow: 0 1px 0 0 #003e1c; } .shortcut-input { @@ -642,8 +668,8 @@ button:disabled, .shortcut-input:focus { outline: none; - border-color: #6366f1; - box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); + border-color: #75bb99; + box-shadow: 0 0 0 2px rgba(117, 187, 153, 0.2); } /* Custom Scrollbar for Modal Content */ @@ -652,16 +678,16 @@ button:disabled, } #shortcuts-list::-webkit-scrollbar-track { - background: #1f2937; + background: #003e1c; } #shortcuts-list::-webkit-scrollbar-thumb { - background: #4b5563; + background: #036830; border-radius: 3px; } #shortcuts-list::-webkit-scrollbar-thumb:hover { - background: #6b7280; + background: #9dbfaf; } /* Scroll to Top Button Visibility */ @@ -693,7 +719,7 @@ input[type='color'] { width: 2.5rem; height: 2.5rem; padding: 0; - border: 2px solid #4b5563; + border: 2px solid #036830; border-radius: 9999px; background: transparent; cursor: pointer; diff --git a/src/partials/footer.html b/src/partials/footer.html index a158c23..0a768a6 100644 --- a/src/partials/footer.html +++ b/src/partials/footer.html @@ -6,7 +6,7 @@ diff --git a/src/partials/navbar.html b/src/partials/navbar.html index 6470c9b..4e45ff6 100644 --- a/src/partials/navbar.html +++ b/src/partials/navbar.html @@ -8,7 +8,7 @@ > @@ -23,12 +23,6 @@