🌌 Image to PDF Converter - Dark Edition

A stunning dark-themed web application with 3D effects that allows users to upload images and convert them to PDF format with cosmic precision.

✨ Features

  • šŸŒ™ Dark Theme: Beautiful dark interface with cyberpunk aesthetics
  • šŸŽ­ 3D Effects: Immersive 3D transformations and animations
  • šŸš€ Drag & Drop: Intuitive drag-and-drop interface with holographic effects
  • šŸ“± Multiple Formats: Supports JPEG, PNG, GIF, and WebP image formats
  • āš™ļø PDF Customization:
    • Page size (A4, Letter, Legal)
    • Orientation (Portrait, Landscape)
    • Margin settings
    • Image quality settings
  • šŸ–¼ļø Image Preview: Stunning 3D image cards with hover effects
  • ⚔ Client-side Processing: Fast, client-side PDF generation using jsPDF
  • šŸ“± Responsive Design: Works beautifully on desktop and mobile devices
  • šŸŽØ Glass Morphism: Modern glass-card design with backdrop blur effects

šŸŽØ Visual Features

  • Holographic Upload Zone: Animated gradient effects on the drop zone
  • Floating Cards: Subtle floating animations for enhanced depth
  • Neon Buttons: Glowing buttons with 3D hover effects
  • Cyber Grid Background: Animated grid pattern for sci-fi aesthetics
  • Glow Text Effects: Text with neon glow and shadow effects
  • 3D Image Previews: Images that lift and rotate on hover
  • Loading Animations: Futuristic 3D loading spinners

šŸ—ļø Project Structure

ā”œā”€ā”€ backend/
│   └── index.ts             # Main Hono server with PDF generation
ā”œā”€ā”€ frontend/
│   ā”œā”€ā”€ index.html           # Dark-themed HTML template with loader
│   ā”œā”€ā”€ index.tsx            # React frontend with 3D components
│   └── style.css            # Advanced CSS with 3D effects and animations
ā”œā”€ā”€ shared/
│   └── types.ts             # Shared TypeScript types
└── README.md

šŸš€ Usage

  1. Visit the application URL and enjoy the cosmic loading animation
  2. Drag and drop images into the holographic upload zone or click to select files
  3. Watch your images appear in beautiful 3D preview cards
  4. Customize PDF options with the sleek dark controls
  5. Click the glowing "Convert to PDF" button
  6. Download your perfectly formatted PDF document

šŸ› ļø Technical Details

  • Backend: Hono framework with static file serving
  • Frontend: React with TypeScript and advanced CSS animations
  • Styling: Custom dark theme with glass morphism and 3D effects
  • PDF Generation: Client-side PDF creation using jsPDF for optimal performance
  • File Upload: Base64 encoding with drag-and-drop support
  • Animations: CSS3 transforms, transitions, and keyframe animations
  • Performance: Optimized 3D effects with hardware acceleration

šŸŽ­ Design Philosophy

This application combines functionality with stunning visual design, featuring:

  • Cyberpunk Aesthetics: Dark colors with neon accents
  • Depth and Dimension: 3D transforms and layered effects
  • Smooth Interactions: Fluid animations and transitions
  • Visual Feedback: Hover states and loading animations
  • Modern UI Patterns: Glass morphism and backdrop filters