Card Designer

An interactive card editor for creating custom game cards with a professional look. Design both the front and back of your cards with an intuitive interface and export them in high quality.

---

Table of Contents

• Features
• Technologies
• Project Structure
• Getting Started
• Usage
• Export
• Browser Compatibility
• Contributing
• License
• Author

---

Features

Front Editor

• Card values — 0–13 with customizable display (Joker, Jack, Queen, King, Ace)
• Special icons — Unique graphics for face cards
• Central icon — Large SVG library with search
• Customizable colors — Complete palette with themed presets
• Customizable text — Ability name and level with varied fonts
• Adjustable dimensions — Width, height, and rounded corners

Back Editor

• Background patterns — 11 different patterns (geometric, lines, dots, grid, diamonds, chevrons, zigzag, hexagons, circles, crosses, waves)
• Color presets — 6 predefined themes (Dark, Midnight, Fire, Ocean, Forest, Royal)
• Central icon — Full SVG library with customization options
• Customizable text — Center text with adjustable size and color
• Border styles — 4 options (solid, dashed, dotted, double)
• Corner decorations — Elegant ornaments in each corner

Export & Save

• PNG export — Front only, back only, or both faces at once
• Bulk export — Export all cards (0–13) in a single click
• Export quality — 4 levels (1x to 4x)
• Presets — Save and reload your configurations
• Custom SVGs — Import your own SVG icons

---

Technologies

Technology	Purpose
HTML5	Semantic structure
CSS3	Design, gradients, and animations
Vanilla JavaScript	Modular application logic
html2canvas	High-quality PNG export
SVG	Scalable vector icons

---

Project Structure

card/
├── index.html                 # Entry point
├── LICENSE
├── public/
│   ├── css/
│   │   ├── base.css          # Base styles
│   │   ├── card.css          # Front card styles
│   │   ├── card-back.css     # Back card styles
│   │   ├── editor-panel.css  # Control panel
│   │   ├── form-controls.css # Inputs and controls
│   │   ├── modal.css         # Modals
│   │   ├── preview.css       # Preview area
│   │   └── responsive.css    # Responsive design
│   └── js/
│       ├── state.js          # Global application state
│       ├── card.js           # Front card logic
│       ├── card-back.js      # Back card logic
│       ├── controls.js       # Front controls
│       ├── controls-back.js  # Back controls
│       ├── export.js         # Export functions
│       ├── presets.js        # Preset management
│       ├── main.js           # JS entry point
│       └── svg-library*.js   # SVG icon library
└── README.md

---

Getting Started

Installation

git clone https://github.com/PerretWilliam/card.git
cd card

Then open index.html in your browser. No build step or dependency installation required.

---

Usage

Quick Start

1. Select the Front or Back tab
2. Use the controls to customize your card
3. Preview changes in real time
4. Click the desired export button

Front — Card Values

• Slider or dropdown to select values 0–13
• Automatic display: 0, 1–9, J (Jack), Q (Queen), K (King), A (Ace)
• Custom text to override the default display

Front — Color Presets

Preset	Color
Stamina	Green
Attack	Red
Defense	Blue
Magic	Purple
Fire	Orange
Special	Gold

Front — Icons

• 100+ SVG icons available in the library
• Customizable size and color
• Optional glow effect
• Support for custom SVG imports

Back — Color Presets

Dark, Midnight, Fire, Ocean, Forest, Royal

Back — Background Patterns

None, Geometric, Lines, Dots, Grid, Diamonds, Chevrons, Zigzag, Hexagons, Circles, Crosses, Waves — with adjustable opacity (0–100%)

Presets

• Save — Store your current configuration
• Load — Restore a saved configuration
• Reset — Return to default settings

Presets are stored in the browser's localStorage.

Dimension Synchronization

Width, height, and corner radius are automatically synchronized between front and back to ensure visual consistency.

Custom SVGs

1. Copy your SVG code
2. Go to the "Custom SVG" section
3. Paste the code and click Apply SVG

---

Export

Export Options

Option	Description
Export PNG (Front)	Export the front face only
Export PNG (Back)	Export the back face only
Export Front + Back	Export both faces for the current value
Export All (0–13)	Export all 14 card values at once

Quality Levels

Level	Resolution
1x	320 × 480 px
2x	640 × 960 px
3x	960 × 1440 px (recommended)
4x	1280 × 1920 px

File Naming

Format: {name}_{value}_{face}.png

Example: card_A_front.png, card_A_back.png

---

Browser Compatibility

Browser	Minimum Version
Chrome	90+
Firefox	88+
Safari	14+
Edge	90+

---

Contributing

Contributions are welcome.

1. Fork the project
2. Create a branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add your feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request

---

License

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

---

Author

William Perret