SA7
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
index.ts
https://pro989--a6c30c4c380e11f088419e149126039e.web.val.run
A stunning dark-themed web application with 3D effects that allows users to upload images and convert them to PDF format with cosmic precision.
- 🌙 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
- 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
├── 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
- 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
- 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
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