roll20-character-sheets/Celerity Lite/charsheet_celerity_lite.html

<div class="paged">
    <div class="charsheet">
        <div class="logobox">
            <div class="logo">
                <img src="https://i.imgur.com/GVozHAd.png">
            </div>
        </div>
        <div class="picturebox">
            <div class="logo">
                <!-- <img src="https://i.imgur.com/dPByJ8A.png" style="border-radius: 10%"> -->
            </div>
        </div>
        <div class="identitybox">
            <div class="identitygrid">
                <div class="namebox">
                    <input type="text" class="info-box" style="width: 100%" name="attr_name" />
                    <br>
                    <span class="solidblack">Name</span>
                </div>
                <div class="playerbox">
                    <input type="text" class="info-box" style="width: 100%" name="attr_player" />
                    <br>
                    <span class="solidblack">Player</span>
                </div>
                <div class="racebox">
                    <input type="text" class="info-box" style="width: 100%" name="attr_race" />
                    <br>
                    <span class="solidblack">Race</span>
                </div>
                <div class="classbox">
                    <input type="text" class="info-box" style="width: 100%" name="attr_class" />
                    <br>
                    <span class="solidblack">Class</span>
                </div>
                <div class="hpgrid">
                    <div class="hpbox">
                        <div class="label">
                            <span class="whiteout">HP</span>
                        </div>
                    </div>
                    <div class="currenthpbox">
                        <input type="number" class="info-box" style="width: 100%" name="attr_current_hp" />
                        <br>
                        <span class="solidblack">Current HP</span>
                    </div>
                    <div class="maxhpbox">
                        <input type="number" class="info-box" style="width: 100%" name="attr_max_hp" />
                        <br>
                        <span class="solidblack">Max HP</span>
                    </div>
                </div>
                <div class="armorgrid">
                    <div class="armorbox">
                        <input type="text" class="info-box" style="width: 100%" name="attr_armor_type" />
                        <br>
                        <span class="solidblack">Armor Type</span>
                    </div>
                    <div class="speedbox">
                        <input type="number" class="info-box" style="width: 100%" name="attr_speed" />
                        <br>
                        <span class="solidblack">Armor Value</span>
                    </div>
                    <div class="armorvaluebox">
                        <input type="number" class="info-box" style="width: 100%" name="attr_armorvalue" />
                        <br>
                        <span class="solidblack">Shield Type</span>
                    </div>
                </div>
                <div class="affinitybox">
                    <input type="number" class="info-box" style="width: 100%" name="attr_affinity" />
                    <br>
                    <span class="solidblack">Speed</span>
                </div>
                <div class="effectrangebox">
                    <input type="text" class="info-box" style="width: 100%" name="attr_evasionactioncost" />
                    <br>
                    <span class="solidblack">Affinity</span>
                </div>
            </div>
        </div>
        <div class="attributenamebox">
            <div class="label">
                <span class="whiteout">Attribute</span>
            </div>
        </div>
        <div class="strbox">
            <div class="strgrid">
                <div class="strgridlabel">
                    <div class="label">
                        <span class="whiteout">Str</span>
                    </div>
                </div>
                <div class="strscore">
                    <input type="number" class="info-box" style="width: 100%" name="attr_str_score" />
                </div>
                <div class="strtemp">
                    <input type="number" class="info-box" style="width: 100%" name="attr_str_temp" />
                </div>
            </div>
        </div>
        <div class="dexbox">
            <div class="dexgrid">
                <div class="dexgridlabel">
                    <div class="label">
                        <span class="whiteout">Agi</span>
                    </div>
                </div>
                <div class="dexscore">
                    <input type="number" class="info-box" style="width: 100%" name="attr_agi_score" />
                </div>
                <div class="dextemp">
                    <input type="number" class="info-box" style="width: 100%" name="attr_agi_temp" />
                </div>
            </div>
        </div>
        <div class="chabox">
            <div class="chagrid">
                <div class="chagridlabel">
                    <div class="label">
                        <span class="whiteout">Cha</span>
                    </div>
                </div>
                <div class="chascore">
                    <input type="number" class="info-box" style="width: 100%" name="attr_cha_score" />
                </div>
                <div class="chatemp">
                    <input type="number" class="info-box" style="width: 100%" name="attr_cha_temp" />
                </div>
            </div>
        </div>
        <div class="magicbox">
            <div class="magicgrid">
                <div class="magicgridlabel">
                    <div class="label">
                        <span class="whiteout">Mana</span>
                    </div>
                </div>
                <div class="magicscore">
                    <input type="number" class="info-box" style="width: 100%" name="attr_mana_score" />
                </div>
                <div class="magictemp">
                    <input type="number" class="info-box" style="width: 100%" name="attr_mana_temp" />
                </div>
            </div>
        </div>
        <div class="vitbox">
            <div class="vitgrid">
                <div class="vitgridlabel">
                    <div class="label">
                        <span class="whiteout">Vit</span>
                    </div>
                </div>
                <div class="vitscore">
                    <input type="number" class="info-box" style="width: 100%" name="attr_vit_score" />
                </div>
                <div class="vittemp">
                    <input type="number" class="info-box" style="width: 100%" name="attr_vit_temp" />
                </div>
            </div>
        </div>
        <div class="expertisenamebox">
            <div class="label">
                <span class="whiteout">Expertise</span>
            </div>
        </div>
        <div class="exp1box">
            <div class="exp1grid">
                <div class="exp1">
                    <input type="text" class="info-box" style="width: 100%" name="attr_exp1" />
                </div>
                <div class="exp1a">
                    <input type="number" class="info-box" style="width: 100%" name="attr_exp1a" />
                </div>
            </div>
        </div>
        <div class="exp2box">
            <div class="exp2grid">
                <div class="exp2">
                    <input type="text" class="info-box" style="width: 100%" name="attr_exp2" />
                </div>
                <div class="exp2a">
                    <input type="number" class="info-box" style="width: 100%" name="attr_exp2a" />
                </div>
            </div>
        </div>
        <div class="exp3box">
            <div class="exp3grid">
                <div class="exp3">
                    <input type="text" class="info-box" style="width: 100%" name="attr_exp3" />
                </div>
                <div class="exp3a">
                    <input type="number" class="info-box" style="width: 100%" name="attr_exp3a" />
                </div>
            </div>
        </div>
        <div class="exp4box">
            <div class="exp4grid">
                <div class="exp4">
                    <input type="text" class="info-box" style="width: 100%" name="attr_exp4" />
                </div>
                <div class="exp4a">
                    <input type="number" class="info-box" style="width: 100%" name="attr_exp4a" />
                </div>
            </div>
        </div>
        <div class="exp5box">
            <div class="exp5grid">
                <div class="exp5">
                    <input type="text" class="info-box" style="width: 100%" name="attr_exp5" />
                </div>
                <div class="exp5a">
                    <input type="number" class="info-box" style="width: 100%" name="attr_exp5a" />
                </div>
            </div>
        </div>
        <div class="exp6box">
            <div class="exp6grid">
                <div class="exp6">
                    <input type="text" class="info-box" style="width: 100%" name="attr_exp6" />
                </div>
                <div class="exp6a">
                    <input type="number" class="info-box" style="width: 100%" name="attr_exp6a" />
                </div>
            </div>
        </div>
        <div class="exp7box">
            <div class="exp7grid">
                <div class="exp7">
                    <input type="text" class="info-box" style="width: 100%" name="attr_exp7" />
                </div>
                <div class="exp7a">
                    <input type="number" class="info-box" style="width: 100%" name="attr_exp7a" />
                </div>
            </div>
        </div>
        <div class="exp8box">
            <div class="exp8grid">
                <div class="exp8">
                    <input type="text" class="info-box" style="width: 100%" name="attr_exp8" />
                </div>
                <div class="exp8a">
                    <input type="number" class="info-box" style="width: 100%" name="attr_exp8a" />
                </div>
            </div>
        </div>
        <div class="itemslotnamebox">
            <div class="label">
                <span class="whiteout">Inventory</span>
            </div>
        </div>
        <div class="itemslot1">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_item_slot_1" />
            </div>
        </div>
        <div class="itemslot2">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_item_slot_2" />
            </div>
        </div>
        <div class="itemslot3">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_item_slot_3" />
            </div>
        </div>
        <div class="itemslot4">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_item_slot_4" />
            </div>
        </div>
        <div class="itemslot5">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_item_slot_5" />
            </div>
        </div>
        <div class="sa1">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_special_ability_1" />
            </div>
        </div>
        <div class="sa2">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_special_ability_2" />
            </div>
        </div>
        <div class="sa3">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_special_ability_3" />
            </div>
        </div>
        <div class="sa4">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_special_ability_4" />
            </div>
        </div>
        <div class="sa5">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_special_ability_5" />
            </div>
        </div>
        <div class="sa6">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_special_ability_6" />
            </div>
        </div>
        <div class="sa7">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_special_ability_7" />
            </div>
        </div>
        <div class="specialabilitynamebox">
            <div class="label">
                <span class="whiteout">Alchemy Essence</span>
            </div>
        </div>
        <div class="sa8">
            <div class="label">
                <input type="text" class="info-box" style="width: 100%" name="attr_special_ability_8" />
            </div>
        </div>
        <div class="weaponbox1">
            <div class="weapongrid1">
                <div class="weapon_namebox">
                    <div class="label">
                        <span class="whiteout">Weapon</span>
                    </div>
                </div>
                <div class="weapon_name">
                    <div class="label">
                        <input type="text" class="info-box" style="width: 100%" name="attr_weapon_name_1" />
                    </div>
                </div>
            </div>
        </div>
        <div class="weaponbox2">
            <div class="weapongrid1">
                <div class="weapon_namebox">
                    <div class="label">
                        <span class="whiteout">Weapon</span>
                    </div>
                </div>
                <div class="weapon_name">
                    <div class="label">
                        <input type="text" class="info-box" style="width: 100%" name="attr_weapon_name_2" />
                    </div>
                </div>
            </div>
        </div>
        <div class="weaponbox3">
            <div class="weapongrid2">
                <div class="weapon_dmgbox">
                    <div class="label">
                        <span class="whiteout">Damage</span>
                    </div>
                </div>
                <div class="weapon_dmg">
                    <div class="label">
                        <input type="text" class="info-box" style="width: 100%" name="attr_weapon_dmg_1" />
                    </div>
                </div>
                <div class="weapon_rngbox">
                    <div class="label">
                        <span class="whiteout">Range</span>
                    </div>
                </div>
                <div class="weapon_rng">
                    <div class="label">
                        <input type="text" class="info-box" style="width: 100%" name="attr_weapon_rng_1" />
                    </div>
                </div>
            </div>
        </div>
        <div class="weaponbox4">
            <div class="weapongrid2">
                <div class="weapon_dmgbox">
                    <div class="label">
                        <span class="whiteout">Damage</span>
                    </div>
                </div>
                <div class="weapon_dmg">
                    <div class="label">
                        <input type="text" class="info-box" style="width: 100%" name="attr_weapon_dmg_2" />
                    </div>
                </div>
                <div class="weapon_rngbox">
                    <div class="label">
                        <span class="whiteout">Range</span>
                    </div>
                </div>
                <div class="weapon_rng">
                    <div class="label">
                        <input type="text" class="info-box" style="width: 100%" name="attr_weapon_rng_2" />
                    </div>
                </div>
            </div>
        </div>
        <div class="weaponbox5">
            <div class="weapongrid1">
                <div class="weapon_namebox">
                    <div class="label">
                        <span class="whiteout">Weapon</span>
                    </div>
                </div>
                <div class="weapon_name">
                    <div class="label">
                        <input type="text" class="info-box" style="width: 100%" name="attr_weapon_name_3" />
                    </div>
                </div>
            </div>
        </div>
        <div class="weaponbox6">
            <div class="weapongrid1">
                <div class="weapon_namebox">
                    <div class="label">
                        <span class="whiteout">Weapon</span>
                    </div>
                </div>
                <div class="weapon_name">
                    <div class="label">
                        <input type="text" class="info-box" style="width: 100%" name="attr_weapon_name_4" />
                    </div>
                </div>
            </div>
        </div>
        <div class="weaponbox7">
            <div class="weapongrid2">
                <div class="weapon_dmgbox">
                    <div class="label">
                        <span class="whiteout">Damage</span>
                    </div>
                </div>
                <div class="weapon_dmg">
                    <div class="label">
                        <input type="text" class="info-box" style="width: 100%" name="attr_weapon_dmg_3" />
                    </div>
                </div>
                <div class="weapon_rngbox">
                    <div class="label">
                        <span class="whiteout">Range</span>
                    </div>
                </div>
                <div class="weapon_rng">
                    <div class="label">
                        <input type="text" class="info-box" style="width: 100%" name="attr_weapon_rng_3" />
                    </div>
                </div>
            </div>
        </div>
        <div class="weaponbox8">
            <div class="weapongrid2">
                <div class="weapon_dmgbox">
                    <div class="label">
                        <span class="whiteout">Damage</span>
                    </div>
                </div>
                <div class="weapon_dmg">
                    <div class="label">
                        <input type="text" class="info-box" style="width: 100%" name="attr_weapon_dmg_4" />
                    </div>
                </div>
                <div class="weapon_rngbox">
                    <div class="label">
                        <span class="whiteout">Range</span>
                    </div>
                </div>
                <div class="weapon_rng">
                    <input type="text" class="info-box" style="width: 100%" name="attr_weapon_rng_4" />
                </div>
            </div>
        </div>
        <div class="inventorynamebox">
            <div class="label">
                <span class="whiteout">Miscellaneous</span>
            </div>
        </div>
        <div class="inventory1">
            <input type="text" class="info-box" style="width: 100%" name="attr_inventory_1" />
        </div>
        <div class="inventory2">
            <input type="text" class="info-box" style="width: 100%" name="attr_inventory_2" />
        </div>
        <div class="inventory3">
            <input type="text" class="info-box" style="width: 100%" name="attr_inventory_3" />
        </div>
        <div class="inventory4">
            <input type="text" class="info-box" style="width: 100%" name="attr_inventory_4" />
        </div>
        <div class="inventory5">
            <input type="text" class="info-box" style="width: 100%" name="attr_inventory_5" />
        </div>
        <div class="inventory6">
            <input type="text" class="info-box" style="width: 100%" name="attr_inventory_6" />
        </div>
        <div class="inventory7">
            <input type="text" class="info-box" style="width: 100%" name="attr_inventory_7" />
        </div>
        <div class="inventory8">
            <input type="text" class="info-box" style="width: 100%" name="attr_inventory_8" />
        </div>
        <div class="spellsnamebox">
            <div class="label">
                <span class="whiteout">Spells Known</span>
            </div>
        </div>
        <div class="spell1">
            <input type="text" class="info-box" style="width: 100%" name="attr_spell_1" />
        </div>
        <div class="spell2">
            <input type="text" class="info-box" style="width: 100%" name="attr_spell_2" />
        </div>
        <div class="spell3">
            <input type="text" class="info-box" style="width: 100%" name="attr_spell_3" />
        </div>
        <div class="spell4">
            <input type="text" class="info-box" style="width: 100%" name="attr_spell_4" />
        </div>
        <div class="spell5">
            <input type="text" class="info-box" style="width: 100%" name="attr_spell_5" />
        </div>
        <div class="spell6">
            <input type="text" class="info-box" style="width: 100%" name="attr_spell_6" />
        </div>
        <div class="spell7">
            <input type="text" class="info-box" style="width: 100%" name="attr_spell_7" />
        </div>
        <div class="spell8">
            <input type="text" class="info-box" style="width: 100%" name="attr_spell_8" />
        </div>
    </div>
</div>