Fresh start

Wiping the entire project to start over

.gitignore

@@ -1,3 +0,0 @@
-/node_modules
-/generator/js/*.map
-/generator/js/*.d.ts

generator/css/card-size.css

@@ -1,101 +0,0 @@
-/*
-    Full page printing CSS
-    ======================
-
-    Since we want precisely specify the card sizes, we must not allow the user to scale the content to fit a sheet of paper.
-    We must also make sure the browser does not add randomly sized margins to the page.
-
-    Instead, we use absolute sizes for all content, such that it fills a sheet of paper:
-    1) Remove all page margins (using the @page CSS rule). The borders of the document will be outside of the printable area,
-       however, we will cluster all content around the center, so that we won't crop anything.
-    2) Fill the document with <page> elements which have an absolute size equal to the full area of the paper.
-    3) Fill each page with cards, arranged around the center of the page.
-*/
-
-
-/* Center all content within a page */
-.page {
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    flex-direction: row;
-    flex-wrap: wrap;
-    page-break-after: always;
-    padding: 0;
-}
-
-/* A4 paper area */
-/* Chrome has problems with page sizes given in metric units. Make the paper area slightly smaller to work around this. */
-page[size="A4"] {
-    width:  210mm; /* full: 210.0mm */
-    height: 296mm; /* full: 297.0mm */
-}
-
-/* US letter area */
-page[size="Letter"] {
-    width:  8.5in;
-    height: 11.0in;
-}
-
-page[size="25x35"] {
-    width: 2.5in;
-    height: 3.5in;
-}
-
-/* Default card size */
-.card {
-    width:2.5in;
-    height:3.5in;
-}
-
-/* Bridge card size */
-.card-size-225x35 {
-    width:2.25in;
-    height:3.5in;
-}
-.card-size-225x35 .card-back-icon {
-    width: 1in;
-    height: 1in;
-}
-
-/* Poker / Magic card size */
-.card-size-25x35 {
-    width:2.5in;
-    height:3.5in;
-}
-.card-size-25x35 .card-back-icon {
-    width: 1in;
-    height: 1in;
-}
-
-/* Poker / Magic card size */
-.card-size-35x50 {
-    width:3.5in;
-    min-width:3.5in;
-    height:5.0in;
-}
-.card-size-35x50 .card-back-icon {
-    width: 1.5in;
-    height: 1.5in;
-}
-
-/* Landscape big card */
-.card-size-75x50 {
-    width:7.5in;
-    height:5.0in;
-}
-.card-size-75x50 .card-back-icon {
-    width: 2in;
-    height: 2in;
-}
-
-/* Card sizes that fill out the entire sheet of paper (minimal margins) */
-.page[size="A4"] .card-size-full3x3 {
-    width:69mm;
-    height:98mm;
-}
-
-.page[size="Letter"] .card-size-full3x3 {
-    width:71mm;
-    height:92mm;
-}

generator/css/cards.css

@@ -1,234 +0,0 @@
-.card {
-    border: 2mm solid;
-    border-radius: 4px;
-    box-sizing: border-box;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
-    font-size: 8pt;
-}
-
-.card-content-container {
-    padding:2mm;
-    padding-top:1mm;
-    border-radius: 2mm;
-    margin-top:0px;
-    background-color: white;
-    border-color: inherit;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    font-size: inherit;
-}
-
-.card-back {
-    background-color: white;
-    border-radius: 4mm;
-    border-color: inherit;
-    margin: 3mm;
-    flex: 1;
-    display: flex;
-}
-
-.card-back-inner {
-    margin: 3mm;
-    border: 1mm solid;
-    border-color: inherit;
-    border-radius: 4mm;
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-}
-
-.card-back-icon {
-    width: 1in;
-    height: 1in;
-    border: 4mm solid;
-    border-color: inherit;
-    border-radius: 4mm;
-    background-repeat: no-repeat;
-    background-size: contain;
-}
-
-.card-title-icon {
-    width: 12mm;
-    height: 12mm;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-color: inherit;
-    border-color: inherit;
-}
-.card-title-icon-container {
-    position: absolute;
-    right: -1mm;
-    top: -1mm;
-    border: 1mm solid;
-    border-radius: 1mm;
-    background-color: inherit;
-    border-color: inherit;
-}
-
-.card-title-inlineicon {
-    width: 7mm;
-    height: 7mm;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-color: inherit;
-    border-color: inherit;
-}
-.card-title-inlineicon-container {
-    position: absolute;
-    right: -1mm;
-    top: -1mm;
-    border: 1mm solid;
-    border-radius: 1mm;
-    background-color: inherit;
-    border-color: inherit;
-}
-
-.card-title {
-    height: 8mm;
-    padding-left: 2mm;
-    font-family: Lora, 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
-    font-variant: small-caps;
-    font-weight: bold;
-    background-color: inherit;
-    color: white;
-}
-.card-title-16 {
-    font-size: 16pt;
-    line-height: 6.5mm;
-}
-.card-title-15 {
-    font-size: 15pt;
-    line-height: 6.5mm;
-}
-.card-title-14 {
-    font-size: 14pt;
-    line-height: 6.5mm;
-}
-.card-title-13 {
-    font-size: 13pt;
-    line-height: 7mm;
-}
-.card-title-12 {
-    font-size: 12pt;
-    line-height: 7mm;
-}
-.card-title-11 {
-    font-size: 11pt;
-    line-height: 7.5mm;
-}
-.card-title-10 {
-    font-size: 10pt;
-    line-height: 7.5mm;
-}
-.card-subtitle {
-    height: 18px;
-    line-height: 18px;
-    margin-bottom: 0.0em;
-    font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
-    font-size: 10pt;
-    font-style: italic;
-}
-
-.card-property-line {
-    text-indent: -1em;
-    margin-left: 1em;
-    font-size: inherit;
-    color: black;
-}
-
-.card-property-name {
-    display: inline;
-    font-size: inherit;
-}
-.card-property-text {
-    display: inline;
-}
-
-.card-section {
-    border-bottom: 1px solid;
-    font-size: 10pt;
-    font-variant: small-caps;
-    font-weight: normal;
-    letter-spacing: 1px;
-    margin: 0;
-    border-color: inherit;
-}
-
-.card-section + .card-element {
-    margin-top: 0.3em;
-}
-
-.card-p {
-
-}
-
-.card-fill {flex:1;}
-
-.card-description-line {
-    margin-top: 0.5em;
-    margin-bottom: 0.0em;
-    font-size: inherit;
-    color: black;
-}
-.card-description-name {
-    display: inline;
-    font-size: inherit;
-    font-style: italic;
-}
-.card-description-name::after {
-    content: ".";
-}
-.card-description-text {
-    display: inline;
-}
-
-.card-ruler {
-    width: 100%;
-    height: 1.0mm;
-    margin-top: 0.3em;
-    margin-bottom: 0.3em;
-}
-
-.card-box {
-    display: inline;
-    height: 10mm;
-    width: 10mm;
-    margin-right: 0.3em;
-}
-
-.card-stats {
-    width: 100%
-}
-
-.card-stats-header {
-    text-align: center;
-    padding: 0;
-    width: 16.6%;
-}
-
-.card-stats-cell {
-    text-align: center;
-    padding: 0;
-}
-
-.card-bullet-line {
-    font-size: inherit;
-    color: black;
-    padding-left: 16px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    margin-top: 0;
-}
-
-.card-bullet {
-    margin-bottom: 0;
-    margin-top: 0;
-    font-size: inherit;
-}

generator/css/class-icons.css

@@ -1,12 +0,0 @@
-.icon-class-barbarian { background-image: url(../img/classes/barbarian.png);}
-.icon-class-bard { background-image: url(../img/classes/bard.png);}
-.icon-class-cleric { background-image: url(../img/classes/cleric.png);}
-.icon-class-druid { background-image: url(../img/classes/druid.png);}
-.icon-class-fighter { background-image: url(../img/classes/fighter.png);}
-.icon-class-monk { background-image: url(../img/classes/monk.png);}
-.icon-class-paladin { background-image: url(../img/classes/paladin.png);}
-.icon-class-ranger { background-image: url(../img/classes/ranger.png);}
-.icon-class-rogue { background-image: url(../img/classes/rogue.png);}
-.icon-class-sorcerer { background-image: url(../img/classes/sorcerer.png);}
-.icon-class-warlock { background-image: url(../img/classes/warlock.png);}
-.icon-class-wizard { background-image: url(../img/classes/wizard.png);}

generator/css/custom-icons.css

@@ -1,34 +0,0 @@
-.icon-custom-armor-light { background-image: url(../img/leather-vest.png);}
-.icon-custom-armor-medium { background-image: url(../img/lamellar.png);}
-.icon-custom-armor-heavy { background-image: url(../img/breastplate.png);}
-.icon-custom-shield { background-image: url(../img/round-shield.png);}
-
-.icon-custom-potion { background-image: url(../img/drink-me.png);}
-.icon-custom-light { background-image: url(../img/candle-flame.png);}
-.icon-custom-flask { background-image: url(../img/fizzing-flask.png);}
-.icon-custom-vial { background-image: url(../img/chemical-drop.png);}
-.icon-custom-poison { background-image: url(../img/poison-bottle.png);}
-.icon-custom-trap { background-image: url(../img/wolf-trap.png);}
-.icon-custom-item { background-image: url(../img/knapsack.png);}
-.icon-custom-wand { background-image: url(../img/crystal-wand.png);}
-.icon-custom-swords { background-image: url(../img/crossed-swords.png);}
-.icon-custom-arrows { background-image: url(../img/target-arrows.png);}
-.icon-custom-swordarrow { background-image: url(../img/mixed-swords.png);}
-
-.icon-custom-spell { background-image: url(../img/white-book.png);}
-.icon-custom-spell-0 { background-image: url(../img/white-book-0.png);}
-.icon-custom-spell-1 { background-image: url(../img/white-book-1.png);}
-.icon-custom-spell-2 { background-image: url(../img/white-book-2.png);}
-.icon-custom-spell-3 { background-image: url(../img/white-book-3.png);}
-.icon-custom-spell-4 { background-image: url(../img/white-book-4.png);}
-.icon-custom-spell-5 { background-image: url(../img/white-book-5.png);}
-.icon-custom-spell-6 { background-image: url(../img/white-book-6.png);}
-.icon-custom-spell-7 { background-image: url(../img/white-book-7.png);}
-.icon-custom-spell-8 { background-image: url(../img/white-book-8.png);}
-.icon-custom-spell-9 { background-image: url(../img/white-book-9.png);}
-.icon-custom-spell-holy { background-image: url(../img/white-book-cd.png);}
-.icon-custom-spell-runes { background-image: url(../img/book-cover.png);}
-
-.icon-custom-class-arcane { background-image: url(../img/robe.png);}
-.icon-custom-class-cleric { background-image: url(../img/holy-symbol.png);}
-.icon-custom-class-rogue { background-image: url(../img/cloak-dagger.png);}

generator/css/output.css

@@ -1,34 +0,0 @@
-.page-background {
-  background: rgb(204,204,204); 
-}
-
-body {
-    display: flex;
-    justify-content:center;
-    align-content:center;
-}
-
-.page-preview {
-    background: white;
-    margin: 0 auto;
-    margin-bottom: 16px;
-    box-shadow: 0 0 8px rgba(0,0,0,0.5);
-}
-
-@media print {
-  .page-preview {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    box-shadow: 0;
-    background-color: white;
-  }
-  .page-background {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    box-shadow: 0;
-    /* Set the background to gray to visualize the page size in the print preview */
-    background-color: gray;
-  }
-}

generator/css/ui.css

@@ -1,62 +0,0 @@
-#preview-container {
-    margin: 10px;
-    background-color: white;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-}
-
-/* Small screen (preview fills all columns) */
-@media (max-width : 1199px) {
-    .preview-container {
-        flex-direction: row;
-    }
-    .card {
-        margin-right: 10px;
-    }
-}
-/* Large screen (preview fills one column, columns are narrow) */
-@media (min-width: 1200px) and (max-width : 1599px) {
-    .preview-container {
-        flex-direction: column;
-    }
-    .card {
-        margin-bottom: 10px;
-    }
-}
-/* Huge screen (preview fills one column, columns are wide) */
-@media (min-width : 1600px) {
-    .preview-container {
-        flex-direction: row;
-    }
-    .card {
-        margin-right: 10px;
-    }
-}
-
-.row-eq-height {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display:         flex;
-}
-
-.color-input-addon {
-    border-right: 0;
-    border-radius: 4px !important;
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-}
-
-.form-group {
-    margin-bottom: 10px;
-}
-
-.card h4 {
-    /* Revert bootstrap style for the card preview */
-    font-weight: bold;
-}
-
-.form-horizontal {
-    margin-top: 10px;
-}

generator/data/card_data.js

@@ -1 +0,0 @@
-var card_data = [];

generator/data/card_data_example.js

@@ -1,163 +0,0 @@
-var card_data_example = [
-    {
-        "count": 1,
-        "color": "maroon",
-        "title": "Burning Hands",
-        "icon": "white-book-1",
-        "icon_back": "robe",
-        "contents": [
-            "subtitle | 1st level evocation",
-            "rule",
-            "property | Casting time | 1 action",
-            "property | Range | Self (15ft cone)",
-            "property | Components | V,S",
-            "rule",
-            "fill | 2",
-            "text | Each creature in a 15-foot cone must make a Dexterity saving throw. A creature takes <b>3d6 fire damage</b> on a failed save, or half as much damage on a successful one.",
-            "text | The fire ignites any flammable objects in the area that aren't being worn or carried.",
-            "fill | 3",
-            "section | At higher levels",
-            "text | +1d6 damage for each slot above 1st"
-        ],
-        "tags": ["spell", "mage"]
-    },
-    {
-        "count": 1,
-        "color": "indigo",
-        "title": "Cunning Action",
-        "icon": "white-book",
-        "icon_back": "cloak-dagger",
-        "contents": [
-            "subtitle | Rogue feature",
-            "rule",
-            "fill | 2",
-            "text | You can take a <b>bonus action on each of your turns</b> in combat. This action can be used only to take the <b>Dash, Disengage, or Hide</b> action.",
-            "fill | 2",
-            "section | Fast hands (Thief 3rd)",
-            "text | You can also use the bonus action to make a Dexterity (<b>Sleight of Hand</b>) check, use your thieves' tools to <b>disarm a trap</b> or <b>open a lock</b>, or take the <b>Use an Object</b> action."
-        ],
-        "tags": ["feature", "rogue"]
-    },
-    {
-        "count": 1,
-        "color": "dimgray",
-        "title": "Full Plate",
-        "icon": "breastplate",
-        "contents": [
-            "subtitle | Heavy armor (1500gp)",
-            "rule",
-            "property | AC | 18",
-            "property | Strength required | 15",
-            "property | Stealth | Disadvantage",
-            "rule",
-            "fill | 2",
-            "description | Heavy | Unless you have the required strength, your speed is reduced by 10 feet.",
-            "description | Stealth | You have disadvantage on Dexterity (Stealth) checks.",
-            "fill | 3"
-        ],
-        "tags": ["item", "armor"]
-    },
-    {
-        "count": 1,
-        "color": "dimgray",
-        "title": "Dagger",
-        "icon": "mixed-swords",
-        "contents": [
-            "subtitle | Simple melee weapon (2gp)",
-            "rule",
-            "property | Damage | 1d4 piercing",
-            "property | Modifier | Strength or Dexterity",
-            "property | Properties | Light, Finesse, Thrown (20/60)",
-            "rule",
-            "fill | 2",
-            "description | Finesse | Use your choice of Strength or Dexterity modifier for attack and damage.",
-            "description | Light | When you attack while dual wielding light weapons, you may use a bonus action to attack with your off hand.",
-            "description | Thrown | You can throw the weapon to make a ranged attack with the given range.",
-            "fill | 3"
-        ],
-        "tags": ["item", "weapon"]
-    },
-    {
-        "count": 1,
-        "color": "dimgray",
-        "title": "Shortsword of Very Long Names",
-        "title_size": "10",
-        "icon": "crossed-swords",
-        "contents": [
-            "subtitle | Simple melee weapon (10gp)",
-            "rule",
-            "property | Damage | 1d6 piercing",
-            "property | Modifier | Strength or Dexterity",
-            "property | Properties | Light, Finesse",
-            "rule",
-            "fill | 2",
-            "description | Finesse | Use your choice of Strength or Dexterity modifier for attack and damage.",
-            "description | Light | When you attack while dual wielding light weapons, you may use a bonus action to attack with your off hand.",
-            "fill | 3"
-        ],
-        "tags": ["item", "weapon", "magic"]
-    },
-    {
-        "count": 1,
-        "color": "dimgray",
-        "title": "Wand of Magic Missiles",
-        "icon": "crystal-wand",
-        "contents": [
-            "subtitle | Wondrous item",
-            "rule",
-            "property | Maximum charges | 7",
-            "property | Recharge | 1d6+1 each day",
-            "property | Depletion | If you expend the last charge, roll a d20. On a 1, the item is destroyed.",
-            "rule",
-            "fill | 2",
-            "description | Spells | You can use your action to cast the following spells:",
-            "bullet | magic missile, 1st level (1 charge)",
-            "bullet | magic missile, 2nd level (2 charges)",
-            "bullet | magic missile, 3rd level (3 charges)",
-            "fill | 3",
-            "boxes | 7 | 2.5"
-        ],
-        "tags": ["item", "wondrous-item", "magic"]
-    },
-    {
-        "count": 2,
-        "color": "dimgray",
-        "title": "Potion of Healing",
-        "icon": "drink-me",
-        "contents": [
-            "subtitle | Potion (50gp)",
-            "rule",
-            "property | Use time | 1 action",
-            "property | Hit points restored | 2d4+2",
-            "rule",
-            "fill | 2",
-            "text | When you drink this potion, you regain 2d4+2 hitpoints.",
-            "text | Drinking or administering a potion takes 1 action.",
-            "fill | 3"
-        ],
-        "tags": ["item", "consumable"]
-    },
-    {
-        "count": 1,
-        "color": "black",
-        "title": "Goblin",
-        "icon": "imp-laugh",
-        "contents": [
-            "subtitle | Small humanoid (goblinoid)",
-            "rule",
-            "property | Armor class | 15 (leather armor, shield)",
-            "property | Hit points | 7 (2d6)",
-            "rule",
-            "dndstats | 8 | 14 | 10 | 10 | 8 | 8",
-            "rule",
-            "property | Skills | Stealth +6",
-            "property | Challenge | 1/4 (50 XP)",
-            "rule",
-            "description | Nimble escape | Disengage or Hide as bonus action",
-            "fill | 2",
-            "section | Actions",
-            "description | Scimitar | Melee Weapon Attack: +4 to hit, reach 5 ft., one target. Hit: 5 (1d6 + 2) slashing damage"
-        ],
-        "tags": ["creature", "humanoid"]
-    }
-]

generator/generate.html

@@ -1,451 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>RPG cards</title>
-    <meta charset="UTF-8">
-    <!-- Library: jQuery -->
-    <script type="text/javascript" src="lib/jquery/jquery.min.js" charset="utf-8"></script>
-    <!-- Library: Bootstrap -->
-    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
-    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css" />
-    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-theme.min.css" />
-    <!-- Library: Bootstrap typeahead -->
-    <script type="text/javascript" src="lib/typeahead/bootstrap3-typeahead.min.js" charset="utf-8"></script>
-    <!-- Library: Color picker -->
-    <link href="lib/colorpicker/css/bootstrap-colorselector.css" rel="stylesheet" />
-    <script type="text/javascript" src="lib/colorpicker/js/bootstrap-colorselector.js" charset="utf-8"></script>
-    <!-- Data -->
-    <script type="text/javascript" src="data/card_data_example.js"></script>
-    <!-- Javascript -->
-    <script type="text/javascript" src="js/cards.js"></script>
-    <script type="text/javascript" src="js/colors.js"></script>
-    <script type="text/javascript" src="js/icons.js"></script>
-    <script type="text/javascript" defer src="js/ui.js"></script>
-    <!-- CSS -->
-    <link href="css/ui.css" rel="stylesheet" />
-    <link href="css/cards.css" rel="stylesheet" />
-    <link href="css/card-size.css" rel="stylesheet" />
-    <link href="css/icons.css" rel="stylesheet" />
-    <link href="css/class-icons.css" rel="stylesheet" />
-    <link href="css/custom-icons.css" rel="stylesheet" />
-    <!-- Fonts -->
-    <link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
-    <link href='https://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>
-</head>
-<body>
-    <div class="container-fluid">
-        <!--<h1 class="page-header">RPG card generator</h1>-->
-        <div class="row">
-            <div class="alert alert-warning alert-dismissible" role="alert">
-                <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-                <strong>Note</strong>
-                Click on "Open help" to display some information about how to use this generator and what to do if you have a feature request or found a bug.
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-12 col-lg-3">
-                <!--<h3>Menu</h3>-->
-                <form style="display:none" id="file-load-form">
-                    <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />
-                </form>
-                <form role="form" class="form-horizontal">
-                    <div class="form-group">
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-info btn-block" id="button-help">Open Help</button>
-                        </div>
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-danger btn-block" id="button-clear">Delete all</button>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-primary btn-block" id="button-load-sample">Load sample</button>
-                        </div>
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-primary btn-block" id="button-load">Load from file</button>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-primary btn-block" id="button-sort">Sort</button>
-                        </div>
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-primary btn-block" id="button-save" onclick="ui_save_file()">Save to file</button>
-                            <a href="" download="rpg_cards.json" id="file-save-link" style="display:none">Hidden download link</a>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-primary btn-block" id="button-filter">Map/Filter</button>
-                        </div>
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-success btn-block" id="button-generate">Generate</button>
-                        </div>
-                    </div>
-                    <!--<span class="help-block">Generated cards open in a new tab or window.</span>-->
-                </form>
-                <h3>Page settings</h3>
-                <form role="form" class="form-horizontal">
-                    <div class="form-group">
-                        <label for="page-size" class="col-sm-4 control-label">Page Size</label>
-                        <div class="col-sm-8">
-                            <select class="form-control" id="page-size" data-option="page_size">
-                                <option value="A4" selected>A4</option>
-                                <option value="Letter">US letter</option>
-                                <option value="25x35">2.5&quot; x 3.5&quot;</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="card-size" class="col-sm-4 control-label">Card Size</label>
-                        <div class="col-sm-8">
-                            <select class="form-control" id="card-size" data-option="card_size">
-                                <option value="225x35">2.25&quot; x 3.5&quot; (Bridge)</option>
-                                <option value="25x35" selected>2.5&quot; x 3.5&quot; (Poker)</option>
-                                <option value="35x50">3.5&quot; x 5.0&quot;</option>
-                                <option value="75x50">7.5&quot; x 5.0&quot;</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="card-size" class="col-sm-4 control-label">Cards/page</label>
-                        <div class="col-sm-3">
-                            <input type="text" id="page-rows" class="form-control" data-option="page_rows" value="3">
-                        </div>
-                        <div class="col-sm-2">
-                            <p class="form-control-static">x</p>
-                        </div>
-                        <div class="col-sm-3">
-                            <input type="text" id="page-columns" class="form-control" data-option="page_columns" value="3">
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="card-arrangement" class="col-sm-4 control-label">Arrangement</label>
-                        <div class="col-sm-8">
-                            <select class="form-control" id="card-arrangement" data-option="card_arrangement">
-                                <option value="doublesided" selected>Double sided printing</option>
-                                <option value="front_only">Front side only</option>
-                                <option value="side_by_side">Side by side</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="foreground-color" class="col-sm-4 control-label">Front color</label>
-                        <div class="col-sm-8">
-                            <div class="input-group">
-                                <select id="foreground_color_selector" class="colorselector-data"></select>
-                                <input type="text" id="foreground-color" class="form-control" placeholder="Front page color" data-property="color" value="white">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="background-color" class="col-sm-4 control-label">Back color</label>
-                        <div class="col-sm-8">
-                            <div class="input-group">
-                                <select id="background_color_selector" class="colorselector-data"></select>
-                                <input type="text" id="background-color" class="form-control" placeholder="Back page color" data-property="color" value="white">
-                            </div>
-                        </div>
-                    </div>
-                </form>
-                <h3>Default values</h3>
-                <form role="form" class="form-horizontal">
-                    <div class="form-group">
-                        <label for="small-icons" class="col-sm-2 control-label">Icon</label>
-                        <div class="col-sm-10">
-                            <div class="checkbox">
-                                <label>
-                                    <input type="checkbox" checked id="small-icons"> Use small front icons
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="default-color" class="col-sm-2 control-label">Color</label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <select id="default_color_selector" class="colorselector-data"></select>
-                                <input type="text" id="default-color" class="form-control" placeholder="Card color" data-property="color" value="black">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="default-icon" class="col-sm-2 control-label">Icon</label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <span class="input-group-btn">
-                                    <button class="btn btn-default icon-select-button" type="button">Search</button>
-                                </span>
-                                <input type="text" id="default-icon" class="form-control icon-list" placeholder="Icon name">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="default-title-size" class="col-sm-2 control-label">Title</label>
-                        <div class="col-sm-10">
-                            <select class="form-control" id="default-title-size">
-                                <option value="16">16pt font</option>
-                                <option value="15">15pt font</option>
-                                <option value="14">14pt font</option>
-                                <option value="13" selected>13pt font</option>
-                                <option value="12">12pt font</option>
-                                <option value="11">11pt font</option>
-                                <option value="10">10pt font</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-primary btn-block" id="button-apply-color">Apply color</button>
-                        </div>
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-primary btn-block" id="button-apply-font">Apply title font</button>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-primary btn-block" id="button-apply-icon">Apply icon</button>
-                        </div>
-                        <div class="col-sm-6">
-                            <button type="button" class="btn btn-primary btn-block" id="button-apply-icon-back">Apply back icon</button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-            <div class="col-md-12 col-lg-5">
-                <!--<h3>Card</h3>-->
-                <form class="form-horizontal" role="form">
-                    <div class="form-group">
-                        <label for="selected-card" class="col-sm-2 control-label">Deck</label>
-                        <div class="col-sm-10">
-                            <p class="form-control-static" id="total_card_count">Deck contains 0 cards.</p>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="selected-card" class="col-sm-2 control-label">Card</label>
-                        <div class="col-sm-10">
-                            <select class="form-control" id="selected-card"></select>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label class="col-sm-2 control-label"></label>
-                        <div class="col-sm-4">
-                            <button type="button" class="btn btn-danger btn-block" id="button-delete-card">Delete card</button>
-                        </div>
-                        <div class="col-sm-3">
-                            <button type="button" class="btn btn-primary btn-block" id="button-add-card">Add new card</button>
-                        </div>
-                        <div class="col-sm-3">
-                            <button type="button" class="btn btn-primary btn-block" id="button-duplicate-card">Duplicate card</button>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="card-title" class="col-sm-2 control-label">Name</label>
-                        <div class="col-sm-10">
-                            <input type="text" id="card-title" class="form-control" placeholder="Title">
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="card-title-size" class="col-sm-2 control-label">Title</label>
-                        <div class="col-sm-10">
-                            <select class="form-control" id="card-title-size" data-property="title_size">
-                                <option value="" selected>default font</option>
-                                <option value="16">16pt font</option>
-                                <option value="15">15pt font</option>
-                                <option value="14">14pt font</option>
-                                <option value="13">13pt font</option>
-                                <option value="12">12pt font</option>
-                                <option value="11">11pt font</option>
-                                <option value="10">10pt font</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="card-count" class="col-sm-2 control-label">Count</label>
-                        <div class="col-sm-10">
-                            <input type="number" id="card-count" class="form-control" placeholder="Count" data-property="count" value="1">
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="card-tags" class="col-sm-2 control-label">Tags</label>
-                        <div class="col-sm-10">
-                            <input type="text" id="card-tags" class="form-control" placeholder="Tags">
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="card-icon" class="col-sm-2 control-label">Icon</label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <span class="input-group-btn">
-                                    <button class="btn btn-default icon-select-button" type="button">Search</button>
-                                </span>
-                                <input type="text" id="card-icon" class="form-control icon-list" placeholder="Default icon" data-property="icon">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="card-icon-back" class="col-sm-2 control-label">Back icon</label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <span class="input-group-btn">
-                                    <button class="btn btn-default icon-select-button" type="button">Search</button>
-                                </span>
-                                <input type="text" id="card-icon-back" class="form-control icon-list" placeholder="Same as front" data-property="icon_back">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="card-color" class="col-sm-2 control-label">Color</label>
-                        <div class="col-sm-10">
-                            <div class="input-group">
-                                <select id="card_color_selector" class="colorselector-data"></select>
-                                <input type="text" id="card-color" class="form-control" placeholder="Default color" data-property="color">
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="card-contents" class="col-sm-2 control-label">Contents</label>
-                        <div class="col-sm-10">
-                            <textarea class="form-control" rows="14" id="card-contents" wrap="off"></textarea>
-                        </div>
-                    </div>
-                </form>
-            </div>
-            <div class="col-md-12 col-lg-4">
-                <!--<h3>Preview</h3>-->
-                <div id="preview-container" class="preview-container">
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Modal -->
-    <div class="modal" id="print-modal" tabindex="-1" role="dialog">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-                    <h4 class="modal-title" id="myModalLabel">Printing generated cards</h4>
-                </div>
-                <div class="modal-body">
-                    <ul>
-                        <li>The generated cards open in a new tab or window. If you don't see any new tab or window, check your popup and script blockers. If that does not help, try disabling all addons.</li>
-                        <li>Make sure you enable the printing of background images and colors in your browser.</li>
-                        <li>Make sure your printer uses the correct paper size (same as in the editor).</li>
-                        <li>Enable double sided printing (flip on long edge).</li>
-                        <li>Do not scale the document to fit the page. Print at original size.</li>
-                        <li>
-                            Some printers are not very precise (pages print slightly shifted or rotated) and the cards will not line up with the card backs.
-                            If this is the case, there's not much you can do.
-                            Try making the page background the same color as the cards, so that you won't get any white edges on the card.
-                            If that does not help, try a different printer or print single-sided.
-                        </li>
-                    </ul>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Ok, got it</button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Modal (Info)-->
-    <div class="modal" id="help-modal" tabindex="-1" role="dialog">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-                    <h4 class="modal-title" id="myModalLabel">RGP card generator</h4>
-                </div>
-                <div class="modal-body">
-                    <ul>
-                        <li>Some RPG systems are protected by copyright. Even if some spell/item data is freely available, it does not mean you may redistribute cards containing such data.</li>
-                        <li>If you find a bug or have a feature request, post them at the <a href="https://github.com/crobi/rpg-cards/issues">Github project site</a>.</li>
-                        <li>
-                            The user interface consists of three columns: 
-                            <img alt="help" src="img/help/help.png" style="max-width:95%; display:block; padding: 5px; margin: 10px 0 10px 0; border: 1px solid #ebebeb; box-shadow: 0 0 5px #ebebeb;"/>
-                            The left column contains the menu and global settings.
-                            In the middle menu, you can select and edit individual cards.
-                            The right column contains a preview of the selected card.
-                        </li>
-                        <li>
-                            To use the generator, either load the sample card deck ("Load sample"),
-                            load a card deck from a file ("Load from file"),
-                            or manually add some cards.
-                            When you're done, click on "Generate" to generate a document with all your cards, which can then be printed.
-                        </li>
-                        <li>
-                            To learn about what features are available to define a card, inspect the sample deck or
-                            read some basic documentation at the <a href="http://crobi.github.io/rpg-cards/">project site</a>.
-                        </li>
-                    </ul>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Modal (Sort)-->
-    <div class="modal" id="sort-modal" tabindex="-1" role="dialog">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-                    <h4 class="modal-title" id="myModalLabel">Sort cards</h4>
-                </div>
-                <div class="modal-body">
-                    <p>
-                        Enter the comparison function below.
-                        The comparison function is a block of javascript code.
-                        Return -1 if card_a should appear before card_b.
-                    </p>
-                    <textarea class="form-control" rows="10" id="sort-function" wrap="off">
-if (card_a.title < card_b.title) {
-    return -1;
-}
-else if (card_a.title > card_b.title) {
-    return 1;
-}
-else {
-    return 0;
-}
-                    </textarea>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" id="sort-execute">Sort</button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Modal (Filter)-->
-    <div class="modal" id="filter-modal" tabindex="-1" role="dialog">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-                    <h4 class="modal-title" id="myModalLabel">Filter/map cards</h4>
-                </div>
-                <div class="modal-body">
-                    <p>
-                        Enter code below that will be executed for each card in the deck.
-                        Return false to remove the current card from the deck.
-                    </p>
-                    <textarea class="form-control" rows="10" id="filter-function" wrap="off">
-// Color all spell cards yellow
-if (card_has_tag(card, "spell")) {
-    card.color = "yellow";
-}
-
-// Remove all creature cards
-if (card_has_tag(card, "creature")) {
-    return false;
-}
-                    </textarea>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" id="filter-execute">Filter</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</body>
-</html>