Basic help

generator/generate.html

@@ -38,9 +38,8 @@
         <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>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.
+                <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">
@@ -314,7 +313,7 @@
         </div>
     </div>
     <!-- Modal -->
-    <div class="modal" id="print-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal" id="print-modal" tabindex="-1" role="dialog">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
@@ -341,5 +340,42 @@
             </div>
         </div>
     </div>
+    <!-- Modal -->
+    <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>
 </body>
 </html>

generator/js/ui.js

@@ -184,7 +184,7 @@ function ui_render_selected_card() {
 }
 
 function ui_open_help() {
-    window.open("http://crobi.github.io/rpg-cards/", "_blank");
+    $("#help-modal").modal('show');
 }
 
 function ui_select_icon() {