CardGen

Welcome to CardGen While this site does save your data in your local web starage, please also back it up externally. Simple browser based card generator for faster prototyping of boardgames. I designed this as a single HTML file with embedded CSS and JavaScript, to make it easier for you to download, modify and run offline. The tool requires basic knowledge of HTML and CSS, but hopefully editing the initial templates should be enough to get you started. For more info or suggestions please visit https://github.com/vildninja/card. Happy prototyping :) /Jannek
CSS style The style of the cards. I have provided a basic example, but it should be easy to modify to your liking without too much effort. Read more about positioning elements on w3scools.com/css.	HTML design The template of the cards. The content of this box will be duplicated for every line in the CSV document. To insert text from the CSV document simlpy write %label% in the template. Please use \% to write %. You can also write %IF%label% ... %END% to only include segment if value is present for the given label. Alternative you can write %IF=x%label% ... %END% to only include segment if value for the given label is equal to x. Or %FOR%label% ... %END% to repeat a segment according to the number provided for the label. Read more about HTML on w3schools.com/html.	CSV data The comma seperated values. Any spread sheet editor should support export to this format. The first row of data should allways be the labels used to reference the data from the template (using %label%). Adding a colloumn named "copies" tells the cardGen how many copies of the card to generate. Note: labels are case sensitive.

.frame { position: relative; float: left; width: 64mm; height: 88mm; margin: 0mm; border-radius: 4mm; box-sizing: border-box; border: 1.5mm solid grey; } .card { position: absolute; top: 1mm; bottom: 1mm; left: 1mm; right: 1mm; } .name { position: relative; top: 0mm; width: 100%; height: 4mm; background-color: #ccc; border-radius: 2mm 2mm 0mm 0mm; } .pic { position: relative; top: 0mm; width: 100%; height: 40mm; background-color: white; background-size: cover; background-position: center; box-sizing: border-box; border: 1mm solid #ccc; } .middle { position: relative; display: block; top: 0mm; width: 100%; height: 5mm; padding: 0mm 1mm 0mm 1mm; background-color: #ccc; box-sizing: border-box; } .description { position: relative; display: block; top: 0mm; width: 100%; height: 30mm; padding: 1mm; box-sizing: border-box; background-color: #eee; border-radius: 0mm 0mm 2mm 2mm; } .footer { position: absolute; bottom: 0mm; right: 0mm; text-align: right; height: 3.5mm; width: 25mm; } h1 { font-family: serif; margin: 0mm; padding: 0.2mm 1mm; font-size: 4mm; } h2 { font-family: serif; font-weight: normal; font-style: italic; margin: 0mm; padding: 0.2mm; font-size: 4mm; } p { font-family: serif; margin: 0mm; padding: 0.2mm; font-size: 3.5mm; } h3 { font-family: serif; font-weight: normal; font-style: italic; margin: 0mm; padding: 1mm; font-size: 3mm; }	%FOR%copies% <div class="frame" style="background-color: %color%; border-color: %border%"> <div class="card"> <div class="name"> <h1>%name%</h1> </div> <div class="pic" style="background-image: url('%imgurl%');"> </div> <div class="middle"> <h2>%type%</h2> </div> <div class="description"> <p>%description%</p> %IF%notes%<h3>"%notes%"</h3>%END% </div> <div class="footer"> <h3>cardGen</h3> </div> </div> </div> %END%	copies,name,imgurl,type,description,notes,color,border 2,"Animated Fox","https://i.imgur.com/aM30Y5W.gif","Play whenever","This Fox is super cool!","And a fluffy tail!!",lightblue,black 1,"Lesser Fox","https://i.imgur.com/JUzvnwj.png","Play whenever","This Fox is kinda cool!","Would prefer a regular Fox though...",white,red 2,"Blurry Fox","https://i.imgur.com/3QLhDjG.jpg","Play as an action","This Fox can evade enemy cameras!","Please use a macro lens next time..",lightblue,blue
Download project as JSON