Skip to content

iscodev0/many-images-to-pdf

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🐼 PandaScan Converter (Beta)

Transform images into professional PDFs instantly - Perfect for comics, documents, and photo collections.

powered by iscodev

Astro TailwindCSS TypeScript Mobile Dark Mode

✨ New Features v2.0

  • 🌙 Dark Mode Toggle - Automatic system detection + manual toggle
  • 📱 Full Mobile Support - Responsive design for all screen sizes
  • 🎨 Adaptive UI - Components that scale perfectly on any device
  • 🚀 Touch Optimized - Mobile-first interaction design
  • 🌐 PWA Ready - Progressive Web App capabilities

⚡ Quick Start

  1. Upload images (drag & drop or URLs)
  2. Reorder by dragging table rows
  3. Configure quality and comic style
  4. Download your professional PDF

Live Demo: Visit pandascan.online 🚀

🎯 Core Features

  • 📁 Multi-Upload: Drag & drop files + URL support
  • 🔄 Drag Reorder: Change image order easily
  • 📏 Smart Quality: 480px/720px/Original with optimized compression
  • 🎨 Professional Output: A4, Letter, Legal, Comic styles
  • 🔒 Watermark: Branded PDFs (always included)
  • 🌙 Dark/Light Mode: System preference + manual toggle
  • 📱 Mobile First: Perfect experience on any device

🛠️ Tech Stack

Framework: Astro 5.13.3 • UI: Tailwind + shadcn/ui • PDF: jsPDF • Images: browser-image-compression

🚀 Installation

bun install && bun run dev

📖 Usage Guide

English 🇺🇸

  1. Upload images by dragging files or adding URLs
  2. Reorder by dragging rows in the table
  3. Configure settings (quality, comic style, etc.)
  4. Download your professional PDF

Perfect for: Comics, documents, photo collections

Español 🇪🇸

  1. Sube imágenes arrastrando archivos o agregando URLs
  2. Reordena arrastrando filas en la tabla
  3. Configura ajustes (calidad, estilo cómic, etc.)
  4. Descarga tu PDF profesional

Perfecto para: Cómics, documentos, colecciones de fotos

🚀 Default Configuration

  • Style: Comic mode (no spaces between images)
  • Quality: Standard 720px for balanced performance
  • Watermark: Always enabled (PandaScan Converter)
  • Image info: Disabled by default
  • Page numbers: Enabled by default
  • Theme: Dark mode by default (follows system preference)

📱 Mobile & Responsive Features

🌙 Dark Mode

  • Auto Detection: Follows system preference automatically
  • Manual Toggle: Fixed button in top-right corner
  • Smooth Transitions: All elements animate between themes
  • PWA Support: Theme-color meta tag updates dynamically

📱 Mobile Optimizations

  • Touch Targets: Minimum 44px for all interactive elements
  • Responsive Grid: Components stack appropriately on small screens
  • Collapsible Tutorial: Expandable on mobile to save space
  • Scroll Tables: Horizontal scroll for wide tables on mobile
  • Adaptive Text: Font sizes scale with screen size
  • Mobile Gestures: Touch-optimized drag & drop

🎨 Responsive Breakpoints

  • xs: 475px+ (very small phones)
  • sm: 640px+ (small phones)
  • md: 768px+ (tablets)
  • lg: 1024px+ (laptops)
  • xl: 1280px+ (desktops)

🔧 Error Handling

  • 404 Pages: Automatic redirect to main page
  • Corrupt images: Automatically filtered
  • Load errors: Automatic retries with visual feedback
  • Compatibility: Works on all modern browsers
  1. Configura ajustes (calidad, estilo cómic, etc.)
  2. Descarga tu PDF profesional

Perfecto para: Cómics, documentos, colecciones de fotos

⚙️ Quality Settings

Quality Resolution Best For File Size
480px 480px max width Mobile viewing, fast loading Smallest
720px 720px max width General use, balanced quality Medium (recommended)
Original No compression Print quality, archival Largest

🏗️ Project Structure

src/
├── components/
│   ├── ui/                    # UI components
│   └── ImageToPDFConverter.astro  # Main app
├── lib/utils.ts               # Utilities  
└── pages/index.astro          # Entry point

📱 Browser Support

Chrome 88+ • Firefox 85+ • Safari 14+

📄 License

MIT License


Made with ❤️ by PandaScan | Visit pandascan.online │ └── index.astro └── package.json


Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.

There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the `public/` directory.

## 🧞 Commands

All commands are run from the root of the project, from a terminal:

| Command                   | Action                                           |
| :------------------------ | :----------------------------------------------- |
| `bun install`             | Installs dependencies                            |
| `bun dev`             | Starts local dev server at `localhost:4321`      |
| `bun build`           | Build your production site to `./dist/`          |
| `bun preview`         | Preview your build locally, before deploying     |
| `bun astro ...`       | Run CLI commands like `astro add`, `astro check` |
| `bun astro -- --help` | Get help using the Astro CLI                     |

## 👀 Want to learn more?

Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

About

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors