yoto-covers/README.md

# Yoto Up Covers Web App

A standalone web application for creating and customizing Yoto card covers. This web app generates printable sheets of Yoto card covers with full customization options.

## Features

### Print Layout Configuration
- **Cards per Page**: Configure grid layout (1-4 columns, 1-5 rows)
- **Page Margins**: Adjustable margins in millimeters
- **Card Spacing**: Control spacing between cards on the sheet
- **A4 Print Optimization**: Designed for standard A4 paper printing

### Template Customization
- **Multiple Templates**: Classic, Frozen, Minimal, and Vintage cover styles
- **Title Styles**: Classic, Large, Small, Folded, and Condensed title effects
- **Color Customization**: Customize accent colors and title colors
- **Full Cover Image (Full Bleed) Option**: Choose whether images cover the full card background
- **Title Shadows**: Add depth with optional title shadows

### Card Variations
- **Individual Card Customization**: Set different titles, footers, and images for each card position
- **No Duplicate Cards**: Only generates the number of cards you specify (no automatic duplication)
- **Single Card Mode**: If no variations are defined, generates a single card for testing

### Print Layout Configuration
- **Cards per Page**: Configure grid layout (1-4 columns, 1-5 rows)
- **Page Margins**: Adjustable margins in millimeters
- **Card Spacing**: Control spacing between cards on the sheet
- **Multi-Page Support**: Automatically creates multiple pages if needed
- **A4 Print Optimization**: Designed for standard A4 paper printing

### Image Management
- **Drag & Drop Upload**: Easily upload multiple images
- **Image Editing**: Adjust fit modes (scale, crop, resize)
- **Crop Positioning**: Fine-tune crop positions and offsets
- **Text Overlays**: Add customizable text overlays on images

### Preview & Export
- **Live Preview**: Real-time preview of your print sheet design
- **Zoom Controls**: Zoom in/out and fit-to-screen options
- **HTML Export**: Download your print sheet as an HTML file
- **Print Preview**: Print directly from the browser with faithful reproduction

## Getting Started

1. **Open the Web App**: Open `index.html` in your web browser
2. **Configure Print Layout**: Set cards per row/column, margins, and spacing
3. **Customize Template**: Select a template and adjust global settings
4. **Add Images**: Upload images via drag & drop or file selection
5. **Create Variations**: Add individual card customizations if needed
6. **Edit Images**: Select images to adjust fit, crop, and add text overlays
7. **Preview**: Click "Generate Preview" to see your print sheet
8. **Export**: Download as HTML or print directly

## Print Layout Options

### Grid Configuration
- **Cards per Row**: Number of cards horizontally (1-4)
- **Cards per Column**: Number of cards vertically (1-5)
- **Total Cards**: Up to 20 cards per A4 sheet

### Spacing & Margins
- **Page Margin**: Space around the entire sheet (default: 10mm)
- **Card Spacing**: Gap between individual cards (default: 5mm)

### Print Optimization
- **A4 Paper Size**: Optimized for standard A4 printing
- **300 DPI Resolution**: High-quality output for printing
- **CSS Print Media**: Separate styles for screen and print

## Template Styles

### Classic
- Traditional card layout with centered title and footer
- Hero image area with rounded corners
- Clean, professional appearance

### Frozen
- Icy, frosted aesthetic
- Large uppercase title
- Subtle shadow effects

### Minimal
- Clean, minimalist design
- Focus on typography and negative space
- Subtle accent elements

### Vintage
- Retro-inspired design
- Classic typography treatments
- Warm color palettes

## Title Effects

### Folded (Default)
- 3D paper folding effect using CSS pseudo-elements
- Creates depth with highlight and shadow layers
- Responsive to title size changes

### Classic
- Standard centered title
- Clean, readable typography

### Large/Small
- Scaled title sizes for emphasis or subtlety

### Condensed
- Narrow letter spacing for compact titles

## Technical Details

### Card Dimensions
- **Fixed Size**: Each card is exactly 54mm × 85.6mm (standard NFC card dimensions)
- **No Scaling**: Cards maintain exact proportions for printing
- **Grid Layout**: Cards are arranged in a CSS Grid for precise positioning

### Print Sheet Specifications
- **Paper Size**: A4 (210mm × 297mm)
- **Resolution**: 300 DPI for high-quality printing
- **Layout**: CSS Grid with configurable rows/columns
- **Multi-Page**: Automatic page breaks for large numbers of cards
- **Print CSS**: Separate styles for screen and print

### Browser Compatibility
- Modern browsers with CSS Grid and Flexbox support
- HTML5 File API for image uploads
- CSS Transforms for title effects
- Print media queries for faithful reproduction

### File Formats
- Input: PNG, JPG, JPEG, GIF, WebP
- Output: HTML with embedded images (base64)
- Print: Direct browser printing or PDF export

## Usage Tips

1. **Card Variations**: Add card variations to create multiple unique cards. If no variations are added, a single card is generated for testing.
2. **Print Layout**: Configure the grid layout to fit your needs. Cards will be arranged automatically across multiple pages if necessary.
3. **Fixed Dimensions**: Each card is exactly 54mm × 85.6mm, ensuring compatibility with NFC card sleeves.
4. **Image Quality**: Use high-resolution images (at least 500×800px) for best results when printing.
5. **Print Testing**: Always test print output before final production. Use the "Print Preview" button for browser printing.

## Development

This web app is built with:
- **HTML5**: Semantic markup and structure
- **CSS3**: Modern styling with Grid, Flexbox, and Transforms
- **Vanilla JavaScript**: No external dependencies for maximum compatibility

### File Structure
```
web_app/
├── index.html      # Main application interface
├── app.js         # Application logic and functionality
└── README.md      # This documentation
```

## Contributing

This web app replicates the covers functionality from the Yoto Up desktop application. For bug reports or feature requests related to the original desktop app, please refer to the main Yoto Up repository.

## License

This web app is part of the Yoto Up project and follows the same licensing terms.