okos
/
rpg-cards


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
							<!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">2.5&quot; x 3.5&quot; (Poker)</option>
                                <option value="35x50">3.5&quot; x 5.0&quot;</option>
                                <option value="36x54" selected>3.6&quot; x 5.4&quot; (Monster)</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="rounded-corners" class="col-sm-4 control-label">Corners</label>
                        <div class="col-sm-8">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" checked id="rounded-corners" data-option="rounded_corners" value="1"> Rounded card corners
                                </label>
                            </div>
                        </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-stats" class="col-sm-2 control-label">Stats</label>
                        <div class="col-sm-10">
                            <input type="text" id="card-stats" class="form-control" placeholder="SPD|HP|AC" data-property="stats">
                        </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-background" class="col-sm-2 control-label">Background</label>
                        <div class="col-sm-10">
                            <input type="text" id="card-background" class="form-control" placeholder="Background image URL" data-property="background_image">
                        </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"></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>