okos
/
rpg-cards


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="description" content="Rpg-cards : RPG spell/item/monster card generator">

    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">

    <title>Rpg-cards</title>
  </head>

  <body>

    <!-- HEADER -->
    <div id="header_wrap" class="outer">
        <header class="inner">
          <a id="forkme_banner" href="https://github.com/crobi/rpg-cards">View on GitHub</a>

          <h1 id="project_title">Rpg-cards</h1>
          <h2 id="project_tagline">RPG spell/item/monster card generator</h2>

            <section id="downloads">
              <a class="zip_download_link" href="https://github.com/crobi/rpg-cards/zipball/master">Download this project as a .zip file</a>
              <a class="tar_download_link" href="https://github.com/crobi/rpg-cards/tarball/master">Download this project as a tar.gz file</a>
            </section>
        </header>
    </div>

    <!-- MAIN CONTENT -->
    <div id="main_content_wrap" class="outer">
      <section id="main_content" class="inner">
        <h3>
            <a name="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages"><span class="octicon octicon-link"></span></a>
            What it does
        </h3>

<p>
    This project generates cards for spells, items, or monsters for RPG games.
    The cards are packed on a sheet such that you can print double sided and
    get cards with a front and back.
    Here's an example of what you can create:
</p>

<div align="center">
    <img src="images/front.png">
    <img src="images/back.png">
</div>

<p>
    You can define the content of the cards yourself using simple JSON data. The above example was generated by this:
</p>

<pre><code>{
    "count": 1,
    "color": "dimgray",
    "title": "Full Plate",
    "icon": "custom-armor-heavy",
    "contents": [
        "subtitle | Heavy armor (1500gp)",
        "rule",
        "property | AC | 18",
        "property | Strength required | 15",
        "property | Stealth | Disadvantage",
        "rule",
        "fill-2",
        "description | Heavy | Your speed is reduced by 10 feet.",
        "description | Stealth | You have disadvantage on Stealth.",
        "fill-3"
    ]
}
</code></pre>

          <h3>
    <a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>
    Live demo
</h3>

<p>
    <a href="generator/generator.htm">Try it out yourself</a>
</p>

<h3>
    <a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>
    Card JSON data
</h3>

<p>
    <ul>
        <li>
            <strong>count</strong>
            The number of times this card is repeated. Useful for consumable items that you hand out multiple times.
        </li>
        <li>
            <strong>color</strong>
            Name of the card color. You can use all <a href="http://www.w3schools.com/cssref/css_colornames.asp">CSS color names</a>.
            Additional custom colors are defined in <i>css/custom-colors.css</i>.
        </li>
        <li>
            <strong>icon</strong>
            Name of the card icon. You can use all icons from <a href="http://game-icons.net/">game-icons.net</a>.
            For example, the file name of <a href="http://game-icons.net/lorc/originals/plain-dagger.html">this dagger</a>
            is <i>plain-dagger.png</i>, so you would use "plain-dagger" as the icon name.
            Additional custom names are defined in <i>css/custom-icons.css</i>.
        </li>
        <li>
            <strong>back_icon</strong>
            Optional. Name of the big icon on the card back. If not specified, the icon from the "icon" property is used.
        </li>
        <li>
            <strong>title</strong>
            The title of the card.
        </li>
        <li>
            <strong>contents</strong>
            An array of strings, specifying all card elements, in top to bottom order (see below).
        </li>
    </ul>
</p>


<h3>
    <a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>
    Card elements
</h3>

<p>
    Each card element is a string of the following format:
    <pre>element | param1 | param2</pre><br />

    The following elements are available:

    <ul>
        <li>
            <strong>subtitle</strong>
            Slightly larger italic text.
            Param1: the subtitle text.
        </li>
        <li>
            <strong>rule</strong>
            A horizontal rule.
        </li>
        <li>
            <strong>property</strong>
            A property line. The property description is indented if it spans more than one line.
            Param1: the property name (in bold).
            Param2: the property description.
        </li>
        <li>
            <strong>description</strong>
            Same as <i>property</i>, but text is not indented.
        </li>
        <li>
            <strong>text</strong>
            A simple paragraph of text.
            Param1: the text.
        </li>
        <li>
            <strong>subsection</strong>
            A subsection header, with a horizontal rule below the subsection name.
            Param1: the subsection name
        </li>
        <li>
            <strong>fill-1</strong>
            A dynamically resized empty element that takes up 1 unit of unused space on the card.
            You can use this to vertically center text by adding one of these before and after the text you want to center.
        </li>
        <li>
            <strong>fill-2</strong>
            Same as <i>fill-1</i>, but takes up 2 units of unused space - these elements will therefore be larger than any <i>fill-1</i> element.
        </li>
    </ul>
</p>

      </section>
    </div>

    <!-- FOOTER  -->
    <div id="footer_wrap" class="outer">
      <footer class="inner">
        <p class="copyright">Rpg-cards maintained by <a href="https://github.com/crobi">crobi</a></p>
        <p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
      </footer>
    </div>

    
  </body>
</html>