---
layout: ikrpg
tags: [Character Sheet, None, None]
categories: [ Character-Sheet ]
---

<p>
    <a href="/portal/Character-Sheet">Back to the Character Sheet main page</a>.
</p>

<h2>Usage</h2>
<ol>
    <li><strong>Fill out</strong> the input forms of the character sheet.</li>
    <li>Click the <strong>Save sheet to URL</strong> link below the sheet.</li>
    <li><strong>Copy the URL</strong> and share it with your friends!</li>
</ol>

<div class="sheet">
    <form id="abilities" class="card">
        <input id="name" type="text" />
        <div class="content">
            <div id="ability1" class="ability">
                <input class="title" type="text" />
                <textarea class="description" rows="1"></textarea>
            </div>
            <div id="ability2" class="ability">
                <input class="title" type="text" />
                <textarea class="description" rows="1"></textarea>
            </div>
            <div id="ability3" class="ability">
                <input class="title" type="text" />
                <textarea class="description" rows="1"></textarea>
            </div>
            <div id="ability4" class="ability">
                <input class="title" type="text" />
                <textarea class="description" rows="1"></textarea>
            </div>
            <div id="ability5" class="ability">
                <input class="title" type="text" />
                <textarea class="description" rows="1"></textarea>
            </div>
            <div id="ability6" class="ability">
                <input class="title" type="text" />
                <textarea class="description" rows="1"></textarea>
            </div>
            <div id="ability7" class="ability">
                <input class="title" type="text" />
                <textarea class="description" rows="1"></textarea>
            </div>
            <div id="ability8" class="ability">
                <input class="title" type="text" />
                <textarea class="description" rows="1"></textarea>
            </div>
            <div id="ability9" class="ability">
                <input class="title" type="text" />
                <textarea class="description" rows="1"></textarea>
            </div>
            <div id="ability10" class="ability">
                <input class="title" type="text" />
                <textarea class="description" rows="1"></textarea>
            </div>
            <div id="ability11" class="ability">
                <input class="title" type="text" />
                <textarea class="description" rows="1"></textarea>
            </div>
            <div id="ability12" class="ability">
                <input class="title" type="text" />
                <textarea class="description" rows="1"></textarea>
            </div>
        </div>
    </form>
</div>
<p>
    <a href="javascript:hero.url();">Save sheet to URL</a>
</p>
<script type="text/javascript" src="/static/javascripts/heroic.js"></script>
<script type="text/javascript">
    var hero = new Heroic({
        "name": "Hero's name",
        "ability1": { "title": "Ability 1 name", "description": "Ability 1 description" },
        "ability2": { "title": "Ability 2 name", "description": "Ability 2 description" },
        "ability3": { "title": "...", "description": "..." },
        "ability4": { "title": "", "description": "" },
        "ability5": { "title": "", "description": "" },
        "ability6": { "title": "", "description": "" },
        "ability7": { "title": "", "description": "" },
        "ability8": { "title": "", "description": "" },
        "ability9": { "title": "", "description": "" },
        "ability10": { "title": "", "description": "" },
        "ability11": { "title": "", "description": "" },
        "ability12": { "title": "", "description": "" }
    });
    hero.bind();
</script>