ReapCard - Rapid Prototyping for Card Layouts

Overview

ReapCard is a web-based tool that allows users to quickly design and generate custom card layouts using a flexible canvas interface. It supports adding various elements like text, images, and boxes, importing data from Excel files, and batch-generating cards based on the provided layout and data.

Features

• Canvas-Based Design: Design your card layouts on a canvas with customizable dimensions, colors, and more.
• Element Addition: Add boxes, text, images, and placeholders to your design.
• Undo/Redo Support: Easily correct mistakes with undo and redo functionality.
• Layout Saving/Loading: Save your layouts as JSON files and reload them later for further editing.
• Excel Integration: Import data from Excel files to dynamically generate cards.
• XLSX Template Generation: Automatically generate an Excel template based on your layout elements.
• Batch Card Generation: Generate cards in bulk, either as individual PNGs or arranged on A4 sheets.
• Preview Functionality: Preview the first card based on your current layout and data.
• Image Handling: Upload multiple images and dynamically insert them into your cards during generation.

Installation

Clone this repository to your local machine:

git clone https://github.com/yourusername/reapcard.git

Navigate to the project directory:

cd reapcard

Open ReapCard.html in your preferred web browser to start using the tool.

Or just download the files and open the html in any browser or use a simple webserver.

Usage

1. Design Your Layout: Use the tools provided to add boxes, text, images, and image placeholders to the canvas.
2. Upload Your Data: Upload an Excel file containing the data for your cards.
3. Upload Images: Upload images that will be used in your card designs.
4. Preview Your Card: Use the preview feature to see how your first card will look based on the layout and data.
5. Generate Cards: Choose the output format (single PNGs or multiple on A4) and generate your cards.
6. Save Your Layout: Save your layout as a JSON file for future edits.

Project Structure

• ReapCard.html: The main HTML file that structures the web application.
• ReapCardstyles.css: The CSS file that styles the interface of the application.
• ReapCardscript.js: The JavaScript file that contains the logic for card design, element addition, canvas manipulation, and card generation.

Dependencies

The project uses the following libraries:

• Font Awesome for icons.
• XLSX.js for Excel file manipulation.

Contributing

Contributions are welcome!

License

This project is licensed under the MIT License - see the LICENSE file for details.