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.