<em>A powerful desktop PDF reader and editor built with Kotlin Multiplatform and Jetpack Compose</em>
Created for Softablitz 2025 Team JholaChhapDevs: Shubham Gupta (Leader), Pawan Kumar, Sanyam Goel
Team JholaChhapDevs: Shubham Gupta (Leader), Pawan Kumar, Sanyam Goel
Course: MCA 2nd YearCourse: MCA 2nd Year## Features
PDF Juggler is a comprehensive desktop PDF management application that provides an intuitive interface for reading, editing, and manipulating PDF documents. Built using Kotlin Multiplatform and Jetpack Compose Desktop, it offers advanced features like AI-powered document analysis, text-to-speech capabilities, and seamless PDF editing tools.- Maroon & Gold Theme: Matches the original KMP app's color scheme
This landing page showcases the application's features and provides download options for all major platforms.## 🎯 About This Project- Responsive Layout: Three-panel design (thumbnails, viewer, AI chat)
📄 PDF ManagementPDF Juggler is a powerful multi-tab PDF viewer with AI assistant capabilities, developed as part of Softablitz 2025. This landing page showcases the application's features and provides download options for all major platforms.
-
PDF Viewing & Navigation - High-quality rendering with smooth navigation and zoom controls
-
Multi-Tab Support - Open and manage multiple PDFs simultaneously### 📄 PDF Viewing
-
Page Management - Reorder, extract, and manipulate PDF pages
-
Print Support - Advanced printing options with custom settings## ✨ Features- Multi-Tab Support: Open and manage multiple PDFs simultaneously
-
AI Analysis - Generate table of contents and document summaries using Google Gemini AI
-
Context-Aware Assistant - Ask questions about your PDF and get intelligent responses### Multi-Tab Interface- Rotation: Rotate pages left/right
-
Smart Summaries - Automatically extract key points and create cheat sheets
-
Open multiple PDFs simultaneously- Navigation: Page-by-page navigation with keyboard shortcuts
-
Text-to-Speech - Convert PDF text to speech with MaryTTS integration- Seamless tab switching- Page Thumbnails: Preview all pages in the left sidebar
-
Search & Highlight - Advanced text search with highlighting capabilities
-
Bookmark Management - Create and manage bookmarks for quick navigation- Modern, clean design
-
Encryption/Decryption - Secure document handling with encryption capabilities
-
Windows 10+ (MSI Installer)### AI Chat Assistant- Add Bookmarks: Bookmark any page with a custom title
-
macOS 11+ (DMG Installer)
-
Linux Ubuntu 20.04+ (DEB Package)- Powered by Google Gemini AI- Navigate: Quick navigation to bookmarked pages
-
Kotlin Multiplatform - Cross-platform development
-
Jetpack Compose Desktop - Modern declarative UI- Intelligent summaries and explanations
-
Coroutines - Asynchronous programming
- Apache PDFBox - PDF manipulation and rendering### Smart Document Management- Auto-Extract: Automatically extracts TOC from PDF (if available)
-
Google Gemini API - AI-powered document analysis
-
MaryTTS - Text-to-speech engine- Table of contents navigation- Quick Navigation: Click to jump to any section
-
Material 3 Design - Modern design system
-
Voyager Navigation - Type-safe navigation- Zoom and rotation tools### 🤖 AI Assistant (Demo)
-
Ktor Client - HTTP networking
-
Chat Interface: Side panel for AI interactions
-
Download Tab- Windows 10+ (.EXE)
-
Feature showcase with 4 key highlights
-
Platform-specific download buttons (Windows, macOS, Linux)- macOS 11+ (.DMG)## Setup & Usage
-
Build from source instructions with commands
-
Version information- Linux Ubuntu 20.04+ (DEB/RPM)
-
-
About Us Tab### Quick Start
-
Detailed project introduction
-
Complete feature list (8 major features)## 🚀 Quick Start
-
Comprehensive technology stack breakdown
-
Team member profiles and roles1. Download the files to a folder:
-
Contact information
-
Simply open index.html in any modern web browser. No installation or build process required! - index.html
-
✅ Smooth tab transitions -
styles.css -
✅ Animated feature cards
-
✅ Scroll-triggered fade-in effects### Tabs Available: -
script.js -
✅ Platform-specific icons
-
✅ Hover animations1. Download - Get the app for your platform
-
✅ Responsive design
-
✅ Professional maroon & gold theme2. About Us - Learn about the team and technology2. Open
index.htmlin a modern web browser (Chrome, Firefox, Edge, Safari)
Simply open index.html in any modern web browser. No installation or build process required!## 💻 Technology Stack3. Click "Open PDF" or the + button to load a PDF file
The landing page features a beautiful maroon and gold color scheme:- Frontend: HTML5, CSS3, JavaScript ES6+That's it! No server or build process required for basic usage.
-
Primary Gold: #CC9900
-
Dark Maroon: #330000- Desktop App: Kotlin Multiplatform, Jetpack Compose
-
Pale Cream: #FFCC99
-
Muted Yellow: #DDDD99- AI Integration: Google Gemini AI### For Development
-
✅ Chrome/Edge 90+If you want to run it on a local server (recommended for development):
-
✅ Firefox 88+
-
✅ Safari 14+## 👥 Meet the Team
-
✅ Opera 76+
-
✅ Mobile browsers```bash
web-version/
├── index.html # Main landing page with 2 tabs**Shubham Gupta** - Team Leader
├── styles.css # Complete styling and animations
├── script.js # Tab switching and interactionsProject architecture, AI integration, and overall coordination# Using Node.js (with http-server)
├── README.md # This file
├── LANDING_PAGE_INFO.md # Detailed documentationnpx http-server
└── references/
└── AiChatComponent.kt # Kotlin reference implementation**Pawan Kumar** - Developer Core PDF functionality and rendering engine implementation# Using PHP
php -S localhost:8000
Edit index.html and replace # in download buttons:Sanyam Goel - Developer ```
<a href="YOUR_DOWNLOAD_URL" class="download-btn windows">UI/UX design and frontend developmentThen open http://localhost:8000 in your browser.
Edit CSS variables in styles.css:## 🎨 Design
:root {## Keyboard Shortcuts
--primary-gold: #CC9900;
--dark-maroon: #330000;The landing page features a beautiful maroon and gold color scheme that reflects professionalism and elegance:
}
```- Primary Gold: #CC9900- **Arrow Left/Right**: Previous/Next page
## 🌐 Deployment Options- Dark Maroon: #330000- **+/=**: Zoom in
### GitHub Pages- Pale Cream: #FFCC99- **-**: Zoom out
```bash
git add .- Muted Yellow: #DDDD99- **0**: Reset zoom
git commit -m "Add PDF Juggler landing page"
git push origin main- **Enter** (in AI chat): Send messageEnable GitHub Pages in repository settings.### Visual Features:
Drag and drop the folder for instant deployment.
- Hover animations
- Scroll-triggered fade-ins- ✅ Chrome/Edge (recommended)
- Platform-specific icons- ✅ Firefox
Shubham Gupta (Team Leader)
Project architecture, AI integration, and overall coordination- Responsive design- ✅ Safari
Pawan Kumar (Developer) -
Core PDF functionality and rendering engine implementation
Sanyam Goel (Developer)
UI/UX design and frontend development## Differences from KMP Version
This project was created as part of Softablitz 2025, showcasing:```bash### Simplified Features
-
✅ Modern cross-platform desktop application
-
✅ AI integration with Google Geminigit add .- No actual PDF editing/saving (requires backend)
-
✅ Advanced PDF manipulation capabilities
-
✅ Text-to-speech functionalitygit commit -m "Add PDF Juggler landing page"- No highlight annotations (could be added with additional work)
-
✅ Professional UI/UX design
-
✅ Comprehensive feature setgit push origin main- No text selection/search (could be added with PDF.js text layer)
For questions, feedback, or early access requests, please contact Team JholaChhapDevs through your institution's Softablitz 2025 channels.Then enable GitHub Pages in repository settings.
---### What's Included
Good luck with Softablitz 2025! 🏆### Option 2: Netlify- ✅ Multi-tab PDF viewing
Made with ❤️ by Team JholaChhapDevs Drag and drop the folder to Netlify for instant deployment.- ✅ Zoom, rotation, navigation
MCA 2nd Year • Softablitz 2025
- ✅ Thumbnails, TOC, bookmarks
vercel --prod
```## Customization
### Option 4: Any Web Host### Colors
Upload via FTP/SFTP to any web hosting service.Edit CSS variables in `styles.css`:
```css
## 🔧 Customization:root {
--primary-gold: #CC9900;
### Update Download Links --dark-maroon: #330000;
Edit `index.html` and replace `#` with actual download URLs: --pale-cream: #FFCC99;
```html /* ... more colors ... */
<a href="YOUR_WINDOWS_DOWNLOAD_URL" class="download-btn windows">}
<a href="YOUR_MACOS_DOWNLOAD_URL" class="download-btn macos">```
<a href="YOUR_LINUX_DOWNLOAD_URL" class="download-btn linux">
```### Fonts
The app uses the Inter font from Google Fonts. To use custom fonts like in the KMP version:
### Change Colors
Edit CSS variables in `styles.css`:1. Add font files to a `fonts/` folder
```css2. Update the `@font-face` rules in `styles.css`
:root {3. Update the `font-family` properties
--primary-gold: #YOUR_COLOR;
--dark-maroon: #YOUR_COLOR;## Adding AI Integration
}
```To connect a real AI service (like Gemini, OpenAI, etc.):
### Add More Content1. Get an API key from your chosen provider
The HTML structure is clean and easy to extend. Add new sections in either tab as needed.2. Update the `sendAiMessage()` function in `script.js`:
## 📱 Browser Support```javascript
async function sendAiMessage() {
- ✅ Chrome/Edge 90+ const message = aiInput.value.trim();
- ✅ Firefox 88+ if (!message) return;
- ✅ Safari 14+
- ✅ Opera 76+ // Add user message to UI
- ✅ Mobile browsers addMessageToChat('user', message);
aiInput.value = '';
## 📄 File Structure
// Call your AI API
``` try {
web-version/ const response = await fetch('YOUR_AI_API_ENDPOINT', {
├── index.html # Main landing page method: 'POST',
├── styles.css # All styling and animations headers: {
├── script.js # Tab switching logic 'Content-Type': 'application/json',
├── README.md # This file 'Authorization': 'Bearer YOUR_API_KEY'
├── LANDING_PAGE_INFO.md # Detailed documentation },
├── script_old.js # Backup of original PDF viewer body: JSON.stringify({
├── README_backup.md # Backup of original README message: message,
└── references/ // Add PDF context if needed
└── AiChatComponent.kt # Kotlin reference })
``` });
## 🌟 Highlights const data = await response.json();
addMessageToChat('assistant', data.response);
✅ Professional landing page design } catch (error) {
✅ Multi-platform download options console.error('AI Error:', error);
✅ Feature showcase section addMessageToChat('assistant', 'Sorry, I encountered an error.');
✅ Complete team information }
✅ Technology stack display }
✅ Smooth animations and transitions ```
✅ Fully responsive design
✅ Easy to customize and deploy ## Extending Functionality
## 📞 Contact### Adding Text Selection
Use PDF.js text layer:
For questions, feedback, or early access requests, please contact the JholaChhapDevs team through your institution's Softablitz 2025 channels.```javascript
const textLayer = await page.getTextContent();
## 📝 License// Render text layer over canvas
Created for Softablitz 2025. All rights reserved by Team JholaChhapDevs.
---```javascript
// Use PDF.js text extraction + search logic
Good luck with your competition! 🏆const text = await page.getTextContent();
// Implement search highlighting
Made with ❤️ by Team JholaChhapDevs ```
MCA 2nd Year • Softablitz 2025
Use Canvas API or SVG overlays to draw on PDFs
- PDF.js (v3.11.174): Mozilla's PDF rendering library
- Loaded from CDN (no installation needed)
- Handles PDF parsing and rendering
- Create a GitHub repository
- Upload the three files
- Enable GitHub Pages in settings
- Access at
https://yourusername.github.io/repo-name/
Simply drag and drop the folder to deploy instantly
Upload files via FTP/SFTP to any web hosting service
This is a demonstration project. Adjust the license as needed for your use case.
Design inspired by the PDF Juggler KMP application with maroon and gold theme.
Need Help? Check the browser console for any errors, and ensure you're using a modern browser with JavaScript enabled.