feat(ui): Add GitHub integration and enhance hero section design
- Add GitHub star counter badge to navigation (desktop and mobile) - Implement grid pattern background in hero section - Redesign hero title with inline PDF Toolkit badge and briefcase icon - Update feature badges styling with improved visual hierarchy - Refactor CTA button layout with icon integration - Add simple-mode-footer utility component for footer management - Update all tool pages with consistent styling improvements - Enhance responsive design for mobile navigation with GitHub link - Improve visual consistency across all pages with updated color scheme
This commit is contained in:
@@ -80,6 +80,12 @@ const init = () => {
|
||||
supportSection.style.display = 'none';
|
||||
}
|
||||
|
||||
// Hide "Used by companies" section
|
||||
const usedBySection = document.querySelector('.hide-section') as HTMLElement;
|
||||
if (usedBySection) {
|
||||
usedBySection.style.display = 'none';
|
||||
}
|
||||
|
||||
// Hide footer but keep copyright
|
||||
const footer = document.querySelector('footer');
|
||||
if (footer) {
|
||||
@@ -291,17 +297,26 @@ const init = () => {
|
||||
console.log('Please share our tool and share the love!');
|
||||
|
||||
|
||||
const githubStarsElement = document.getElementById('github-stars');
|
||||
if (githubStarsElement && !__SIMPLE_MODE__) {
|
||||
const githubStarsElements = [
|
||||
document.getElementById('github-stars-desktop'),
|
||||
document.getElementById('github-stars-mobile')
|
||||
];
|
||||
|
||||
if (githubStarsElements.some(el => el) && !__SIMPLE_MODE__) {
|
||||
fetch('https://api.github.com/repos/alam00000/bentopdf')
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data.stargazers_count !== undefined) {
|
||||
githubStarsElement.textContent = formatStars(data.stargazers_count);
|
||||
const formattedStars = formatStars(data.stargazers_count);
|
||||
githubStarsElements.forEach(el => {
|
||||
if (el) el.textContent = formattedStars;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
githubStarsElement.textContent = '-';
|
||||
githubStarsElements.forEach(el => {
|
||||
if (el) el.textContent = '-';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
27
src/js/utils/simple-mode-footer.ts
Normal file
27
src/js/utils/simple-mode-footer.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { APP_VERSION } from '../../version.js';
|
||||
|
||||
// Handle simple mode footer replacement for tool pages
|
||||
if (__SIMPLE_MODE__) {
|
||||
const footer = document.querySelector('footer');
|
||||
if (footer) {
|
||||
footer.style.display = 'none';
|
||||
|
||||
const simpleFooter = document.createElement('footer');
|
||||
simpleFooter.className = 'mt-16 border-t-2 border-gray-700 py-8';
|
||||
simpleFooter.innerHTML = `
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex items-center mb-4">
|
||||
<img src="../../images/favicon.svg" alt="Bento PDF Logo" class="h-8 w-8 mr-2">
|
||||
<span class="text-white font-bold text-lg">BentoPDF</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">
|
||||
© 2025 BentoPDF. All rights reserved.
|
||||
</p>
|
||||
<p class="text-gray-500 text-xs mt-2">
|
||||
Version <span id="app-version-simple">${APP_VERSION}</span>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(simpleFooter);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user