roll20-character-sheets/Maid/maid.html

<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<div class="sheet-bounding-box" style="font-family: 'Kaushan Script', cursive;">
    <div style="display: table; width: 100%;">
        <div class="upper-left-box">
            <div>
                <h1>MAID RPG</h1>
                <h2>BASIC CHARACTER SHEET</h2>
            </div>
            <div class="form-row">Name:<input type="text" name="attr_name"></div>
            <div class="form-row">Age:<input type="number" name="attr_age"></div>
            <span class="box-title">Maid Colors</span>
            <div class="form-row">Clothes:<input type="text" name="attr_colorclothes"></div>
            <div class="form-row">Eyes:<input type="text" name="attr_coloreyes"></div>
            <div class="form-row">Hair:<input type="text" name="attr_colorhair"></div>
        </div>
        <div style="display: table-cell; width: 60%;">
            <div class="dotted">
               <span class="box-title">
                    Maid Types:
                   <input type="text" name="attr_maidtype1" placeholder="Type 1" style="width: 35%; text-align: center; border: none;"> 
                   / 
                   <input type="text" name="attr_maidtype2" placeholder="Type 2" style="width: 35%; text-align: center; border: none;">
               </span>
            </div>
            <div style="display: table-cell;">
                <div style="display: table; width: 100%; padding-right: 10px; margin-top: 10px;">
                    <div class="dotted" style="display: table-cell; width: 55%;">
                        <span class="box-title">Special Qualities</span>
                        <input class="note" type="text" name="attr_quality1">
                        <input class="note" type="text" name="attr_quality2">
                        <input class="note" type="text" name="attr_quality3">
                        <input class="note" type="text" name="attr_quality4">
                        <input class="note" type="text" name="attr_quality5">
                        <input class="note" type="text" name="attr_quality6">
                    </div>
                    <div style="display: table-cell; padding-left: 6px;">
                        <div class="dotted" style="height: 30%;">
                            <span class="box-title">Maid Roots</span>
                            <input type="text" name="attr_roots" class="hidden-input" placeholder="Blank Space">
                        </div>
                        <div class="dotted" style="height: 30%; margin-top: 3%;">
                            <span class="box-title">Stress Explosion!</span>
                            <input type="text" name="attr_explosion" class="hidden-input" placeholder="Blank Space">
                        </div>
                        <div class="dotted" style="height: 30%; margin-top: 3%;">
                            <span class="box-title">Maid Power</span>
                            <input type="text" name="attr_power" class="hidden-input" placeholder="Blank Space">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="attributes dotted">
        <span style="float: right;">
            2D6<button type="roll" name="roll_2d6" value="[[2d6]]"></button>
            D6<button type="roll" name="roll_d6" value="[[d6]]"></button>
            D66<button type="roll" name="roll_d66" value="[[10*d6 + d6]]"></button>
            D666<button type="roll" name="roll_d666" value="[[100*d6 + 10*d6 + d6]]"></button>
        </span>
        <span class="box-title">Attributes</span>
        <div style="clear: both;"></div>
        <div class="attribute dotted">
            Athletics <br>
            <input type="number" name="attr_athletics"> 
            <button type="roll" name="roll_athletics" value="/r @{athletics} * d6"></button>
        </div>
        <div class="attribute dotted">
            Affection <br>
            <input type="number" name="attr_affection"> 
            <button type="roll" name="roll_affection" value="/r @{affection} * d6"></button>
        </div>
        <div class="attribute dotted">
            Skill <br>
            <input type="number" name="attr_skill"> 
            <button type="roll" name="roll_skill" value="/r @{skill} * d6"></button>
        </div>
        <div class="attribute dotted">
            Cunning <br>
            <input type="number" name="attr_cunning"> 
            <button type="roll" name="roll_cunning" value="/r @{cunning} * d6"></button>
        </div>
        <div class="attribute dotted">
            Luck <br>
            <input type="number" name="attr_luck"> 
            <button type="roll" name="roll_luck" value="/r @{luck} * d6"></button>
        </div>
        <div class="attribute dotted">
            Will <br>
            <input type="number" name="attr_will"> 
            <button type="roll" name="roll_will" value="/r @{will} * d6"></button>
        </div>
    </div>
    <div style="display: table; width: 100%;">
        <div style="height: 450px; display: table-cell; width: 60%; padding-right: 10px;">
            <div class="dotted lower-box">
                <div style="float: right;">
                    <span class="box-title">Spirit ( <input type="number" name="attr_spirit" value="@{will} * 10" disabled="true"> )</span>
                </div>
                <span class="box-title">Stress</span>
                <textarea name="attr_stress" style=""></textarea>
            </div>
            <div class="dotted lower-box">
                <div style="float: right;">
                    <span class="box-title">Starting Favor ( <input type="number" name="attr_startingfavor" value="@{affection} * 2" disabled="true"> )</span>
                </div>
                <span class="box-title">Favor</span>
                <textarea name="attr_favor" style=""></textarea>
            </div>
            <div class="dotted lower-box">
                <span class="box-title">Notes (Items, etc.)</span>
                <textarea name="attr_notes" style=""></textarea>
            </div>
        </div>
        <div style="height: 470px; display: table-cell;">
            <div class="dotted lower-right-box" style="height: 150px;"> 
                <span class="box-title">Maid Weapons</span>
                <textarea name="attr_weapons" style=""></textarea>
            </div>
            <div class="dotted lower-right-box" style="height: 312px; margin-top: 10px;">
                <span class="box-title">Appearance and Personality</span>
                <textarea name="attr_appearance" style=""></textarea>
            </div>
        </div>
    </div>
</div>