PowerPresent - Professional Presentation Viewer

A beautiful, fully-featured web-based PowerPoint presentation viewer built with pure HTML, JavaScript, and Tailwind CSS. No backend required!

🌟 Features

Core Functionality

• 📁 Multiple Presentation Support - Manage and view multiple presentations from one central hub
• 📱 Fully Responsive - Works perfectly on desktop, tablet, and mobile devices
• ⌨️ Keyboard Navigation - Full keyboard control for seamless presenting
• 👆 Touch Support - Swipe gestures for mobile and tablet navigation
• 🖼️ Slide Thumbnails - Quick navigation with thumbnail sidebar
• 📊 Progress Tracking - Visual progress bar and slide counter
• 🎯 Fullscreen Mode - Distraction-free presentation mode (auto-hides slide list)
• 👁️ Hide Slides - Mark slides as hidden and filter them during presentation (hidden by default)
• 🔍 Filter Hidden Slides - Toggle between showing all slides or only visible ones
• 🎬 Video Playback - Full support for embedded videos with play/pause controls
• 🎥 Video Controls - Play, pause, seek, volume, speed control, and fullscreen for videos
• 💾 Local Storage - Uploaded presentations and hidden slide settings are saved

User Experience

• 🎨 Beautiful Animations - Smooth transitions and modern UI effects
• 🎯 Professional Design - Clean, corporate-ready interface
• 🚀 Fast Performance - Instant loading and navigation
• 🔒 Privacy First - All processing happens locally in your browser
• 📖 Demo Presentations - Pre-loaded samples to get you started

🎮 How to Use

Getting Started

1. Open presentation-viewer.html in any modern web browser
2. You'll see the home page with an upload button
3. Upload your first .pptx presentation to get started
4. Videos embedded in your presentation will be automatically detected and playable

Uploading Your Own Presentations

1. Click the "Upload Presentation" button in the header
2. Select a .pptx file from your computer (or drag & drop)
3. The application will process and extract your slides
4. Your presentation will be automatically opened and saved for future use

Navigation Controls

Keyboard Shortcuts

• Arrow Right / Space / Page Down - Next slide
• Arrow Left / Page Up - Previous slide
• Home - Go to first slide
• End - Go to last slide
• H - Hide/Unhide current slide
• F - Toggle fullscreen mode
• Escape - Exit fullscreen or return to home

Touch Gestures (Mobile/Tablet)

• Swipe Left - Next slide
• Swipe Right - Previous slide
• Tap Thumbnails - Jump to specific slide

Mouse Controls

• Click Left Arrow - Previous slide
• Click Right Arrow - Next slide
• Click Thumbnails - Jump to specific slide
• Click Thumbnail Icon - Toggle sidebar
• Click Fullscreen Icon - Toggle fullscreen

🛠️ Technical Details

Technologies Used

• HTML5 - Modern semantic markup
• Tailwind CSS - Utility-first styling framework
• Vanilla JavaScript - No frameworks, pure JS for maximum performance
• JSZip - PPTX file processing (PPTX files are ZIP archives)
• Font Awesome - Professional icons

Browser Compatibility

• Chrome/Edge (Recommended) - 90+
• Firefox - 88+
• Safari - 14+
• Opera - 76+

File Processing

The application uses JSZip to extract content from PPTX files:

• Extracts embedded images and videos from ppt/media/ folder
• Creates object URLs for local viewing
• Stores data in browser's localStorage for persistence
• Supports video formats: MP4, WebM, OGG, MOV, AVI, WMV, FLV, MKV, M4V
• Supports image formats: JPG, PNG, GIF, BMP, SVG

Storage

• LocalStorage - Saves uploaded presentations for future sessions
• Blob URLs - Stores slide images in memory
• No Server - Everything runs client-side

📋 Features in Detail

Home Page

• Hero Section - Beautiful gradient banner with feature highlights
• Presentation Grid - Responsive card layout for all presentations
• Upload Button - Quick access to upload functionality
• Empty State - Helpful message when no presentations exist

Viewer Page

• Header Bar - Presentation title, slide counter, and controls
• Progress Bar - Visual indicator of presentation progress
• Main Viewer - Large, centered slide display with hidden slide indicator
• Video Player - Full-featured video player with play/pause, volume, seek, and speed controls
• Thumbnail Sidebar - Quick navigation with hide/unhide buttons (auto-hides in fullscreen)
• Navigation Buttons - Large, accessible arrow buttons
• Control Panel - Hide slide, filter, thumbnails toggle, fullscreen, and reset buttons
• Hidden Slide Management - Visual indicators and filtering system (hidden by default)
• Smart Navigation - Automatically skips hidden slides and pauses videos when navigating

Upload Modal

• Drag & Drop Zone - Drop files directly into the modal
• File Browser - Traditional file selection
• Processing Indicator - Shows progress while extracting slides
• Instructions - Clear guidance for users

🎨 Design Features

Animations

• Smooth fade-in effects for page elements
• Slide transitions with opacity changes
• Hover effects on interactive elements
• Scale animations for modals

Color Scheme

• Primary - Purple gradient (#667eea to #764ba2)
• Accents - Indigo and vibrant gradients
• Backgrounds - Clean whites and subtle grays
• Dark Mode Elements - Semi-transparent black overlays

Responsive Breakpoints

• Mobile - < 768px (single column, hidden sidebar)
• Tablet - 768px - 1024px (2 columns)
• Desktop - > 1024px (3 columns, full features)

💡 Tips for Best Results

Uploading Presentations

1. Use PowerPoint 2007+ format (.pptx, not .ppt)
2. Include images - Presentations with embedded images work best
3. Optimize file size - Smaller files process faster
4. Test locally - Try demo presentations first

Presenting

1. Use fullscreen mode - Press 'F' for distraction-free presenting (auto-hides slide list)
2. Practice navigation - Familiarize yourself with keyboard shortcuts
3. Check thumbnails - Review all slides before presenting
4. Hide unnecessary slides - Click the eye icon on thumbnails or press 'H' to hide slides
5. Filter hidden slides - Click "Hide Hidden" button to skip hidden slides during presentation
6. Mobile tip - Swipe gestures work great on tablets

Managing Hidden Slides

1. Hide a slide - Click the eye icon on any thumbnail or press 'H' while viewing
2. Unhide a slide - Click the eye icon again on a hidden slide
3. Show all slides - Click "Show All" button in the header
4. Hide hidden slides - Default mode - hidden slides are filtered out during presentation
5. Navigation - When hiding hidden slides, arrow keys automatically skip them
6. Visual indicator - Hidden slides show a red "Hidden Slide" badge when displayed
7. Persistent - Hidden slide settings are saved for each presentation

Video Playback

When slides contain embedded videos:

1. Automatic detection - Videos are automatically detected and displayed with controls
2. Play/Pause - Click the play button overlay or anywhere on the video
3. Volume control - Adjust volume with slider or mute button
4. Seek - Click on progress bar to jump to any point in the video
5. Playback speed - Change speed from 0.5x to 2x
6. Video fullscreen - Expand video to fullscreen (separate from presentation fullscreen)
7. Auto-pause - Videos automatically pause when navigating to another slide
8. Video indicator - Video slides show a "Video Slide" badge and play icon

Performance

• Clear old presentations - Remove unused presentations from browser storage
• Use modern browsers - Chrome and Edge offer best performance
• Stable connection - CDN resources load faster with good connection

🔧 Customization

Modify Demo Presentations

Edit the loadDemoPresentations() function to change demo content:

const demoPresentations = [
    {
        id: 'demo-1',
        title: 'Your Title',
        description: 'Your description',
        slideCount: 10,
        thumbnail: 'your-image-url',
        slides: generateDemoSlides(10, 'Your Title')
    }
];

Change Color Scheme

Modify Tailwind classes in the HTML:

• Replace purple-600 with your preferred color
• Update gradient combinations
• Modify background colors

Adjust Layout

• Change grid columns: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
• Modify spacing: gap-8, p-4, m-2
• Update responsive breakpoints

🐛 Troubleshooting

Presentation Won't Upload

• Check file format - Must be .pptx (not .ppt)
• File size - Very large files (>50MB) may take time
• Browser support - Use Chrome/Edge for best compatibility

Slides Not Displaying

• Check browser console - Look for JavaScript errors
• Verify file - Try opening the PPTX in PowerPoint first
• Image extraction - Some PPTX files don't contain embedded media
• Video support - Ensure your browser supports the video format (MP4 recommended)

Videos Not Playing

• Format support - Not all video formats work in all browsers (MP4 is most compatible)
• Codec issues - Browser may not support the video codec
• File corruption - Try re-embedding the video in PowerPoint
• Browser compatibility - Use Chrome or Edge for best video support

Performance Issues

• Clear browser cache - Reset and try again
• Close other tabs - Free up memory
• Reduce file size - Optimize images in PowerPoint before upload

Storage Full

• Clear localStorage - Delete old presentations
• Use private browsing - Temporary sessions don't save
• Export presentations - Save important files externally

📝 Limitations

• No PowerPoint animations - PowerPoint slide animations are not preserved
• Media extraction only - Only embedded images and videos can be extracted
• Static text - Text is rendered as images (not searchable or editable)
• Browser video support - Video playback depends on browser codec support
• File size - Very large videos may impact performance
• Browser storage limits - ~5-10MB per domain for localStorage

🚀 Future Enhancements

Potential features for future versions:

• PDF export functionality
• Slide notes display
• Presentation sharing via URL
• Cloud storage integration
• Animation support
• Real-time collaboration
• Presentation recording
• Advanced slide editing

📄 License

This is a demonstration project. Feel free to use and modify for your needs.

🙏 Credits

Built with:

• Tailwind CSS - https://tailwindcss.com
• Font Awesome - https://fontawesome.com
• JSZip - https://stuk.github.io/jszip

---

PowerPresent - Present with Confidence, Anywhere, Anytime! 🎯✨