okos
/
rpg-cards


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
							<!DOCTYPE html>
<html lang="en">
<head>
    <title>RPG cards</title>
    <!-- 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/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-danger 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>Experimental user interface!</strong>
                This user interface is experimental and some UI elements are non-functional.
            </div>
            <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>Warning!</strong>
                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.
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-lg-3">
                <h3>Menu</h3>
                <form role="form">
                    <span class="help-block" id="total_card_count">Deck contains 0 cards.</span>
                    <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />
                    <a href="" id="file-save-link" style="display:none">Hidden download link</a>
                    <button type="button" class="btn btn-info btn-block" id="button-help">Open Help</button>
                    <button type="button" class="btn btn-primary btn-block" id="button-load">Load cards from file</button>
                    <button type="button" class="btn btn-primary btn-block" id="button-save">Save cards to file</button>
                    <button type="button" class="btn btn-primary btn-block" id="button-load-sample">Load sample cards</button>
                    <button type="button" class="btn btn-success btn-block" id="button-generate">Generate cards</button>
                    <span class="help-block">Note: generated cards open in a new tab or window.</span>
                </form>
                <h3>Global options</h3>
                <form role="form">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" checked disabled> Small front icons
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="default_color" class="color-label">Default color</label>
                        <div class="input-group color-input-group">
                            <select id="default_color_selector" class="colorselector-data"></select>
                            <input type="text" id="default_color" class="form-control" placeholder="Default card color">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="default_icon">Default Icon</label>
                        <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" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="default_title_size">Default title size</label>
                        <select class="form-control" id="default_title_size" disabled>
                            <option value="big">big</option>
                            <option value="normal" selected>normal</option>
                            <option value="small">small</option>
                            <option value="tiny">tiny</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="col-md-12 col-lg-5">
                <h3>Card</h3>
                <span class="help-block">Use this part to edit individual cards.</span>
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="selected-card" class="col-sm-2 control-label">Selected 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-5">
                            <button type="button" class="btn btn-danger btn-block" id="button-delete-card">Delete selected card</button>
                        </div>
                        <div class="col-sm-5">
                            <button type="button" class="btn btn-primary btn-block" id="button-add-card">Add new 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-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">
                        </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="Icon name (default icon if empty)" 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="Icon name (same as front if empty)" 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="Card color (default color if empty)" 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>
                <span class="help-block">Preview might not be 100% accurate due to style conflicts.</span>
                <div id="preview-container">
                </div>
            </div>
        </div>
    </div>
</body>
</html>