š¼ļø 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
Visit the application URL and enjoy the cosmic loading animation
Drag and drop images into the holographic upload zone or click to select files
Watch your images appear in beautiful 3D preview cards
Customize PDF options with the sleek dark controls
Click the glowing "Convert to PDF" button
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