okos
/
rpg-cards


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
							<!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: 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" defer src="js/cards.js"></script>
    <script type="text/javascript" defer src="js/colors.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" />
</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 row-eq-height">
            <div class="col-md-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">Select</button>
                            </span>
                            <input type="text" id="default_icon" class="form-control" 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-5">
                <h3>Card</h3>
                <form role="form">
                    <div class="form-group">
                        <label for="selected_card">Selected card</label>
                        <select class="form-control" id="selected_card"></select>
                    </div>
                    <div class="form-group">
                        <label for="card_name">Name</label>
                        <input type="text" id="card_title" class="form-control" placeholder="Title" readonly>
                    </div>
                    <div class="form-group">
                        <label for="card_icon">Icon</label>
                        <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default icon-select-button" type="button">Select</button>
                            </span>
                            <input type="text" id="card_icon" class="form-control" placeholder="Icon name" readonly>
                        </div>                 
                    </div>
                    <div class="form-group">
                        <label for="card_color" class="color-label">Color</label>
                        <div class="input-group color-input-group">
                            <select id="card_color_selector" class="colorselector-data"></select>
                            <input type="text" id="card_color" class="form-control" placeholder="Card color" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="card_contents">Contents</label>
                        <textarea class="form-control" rows="10" id="card_contents" readonly wrap="off">
                        </textarea>
                    </div>
                    <button type="button" class="btn btn-primary btn-block" id="button-delete-card">Delete selected card</button>
                    <button type="button" class="btn btn-primary btn-block" id="button-add-card">Add new card</button>
                </form>
            </div>
            <div class="col-md-4">
                <h3>Preview</h3>
                <div id="preview-container">
                </div>
            </div>
        </div>
    </div>
</body>
</html>