ikrpg.github.io/_posts/Character-Sheet/0000-01-01-Gear.html

---
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 fields 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="gear" class="card">
        <input id="name" title="Hero's Name" type="text" />
        <div class="content">
            <div id="gear1" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear2" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear3" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear4" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear5" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear6" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear7" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear8" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear9" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear10" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear11" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear12" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear13" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear14" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear15" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear16" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear17" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear18" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear19" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear20" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear21" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear22" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </div>
            <div id="gear23" class="gear">
                <input type="text" title="Gear" class="title" />
                <input type="text" title="Benefit" class="benefit" />
            </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",
        "gear1": { "title": "Gear 1", "benefit": "Benefit 1" },
        "gear2": { "title": "Gear 2", "benefit": "Benefit 2" },
        "gear3": { "title": "...", "benefit": "..." },
        "gear4": { "title": "", "benefit": "" },
        "gear5": { "title": "", "benefit": "" },
        "gear6": { "title": "", "benefit": "" },
        "gear7": { "title": "", "benefit": "" },
        "gear8": { "title": "", "benefit": "" },
        "gear9": { "title": "", "benefit": "" },
        "gear10": { "title": "", "benefit": "" },
        "gear11": { "title": "", "benefit": "" },
        "gear12": { "title": "", "benefit": "" },
        "gear13": { "title": "", "benefit": "" },
        "gear14": { "title": "", "benefit": "" },
        "gear15": { "title": "", "benefit": "" },
        "gear16": { "title": "", "benefit": "" },
        "gear17": { "title": "", "benefit": "" },
        "gear18": { "title": "", "benefit": "" },
        "gear19": { "title": "", "benefit": "" },
        "gear20": { "title": "", "benefit": "" },
        "gear21": { "title": "", "benefit": "" },
        "gear22": { "title": "", "benefit": "" },
        "gear23": { "title": "", "benefit": "" }
    });
    hero.bind();
</script>