roll20-character-sheets-tester/Magical-Kitties/Magical-Kitties-Save-the-Day.html

<div class="container">

  <img src="https://github.com/Anduh/roll20-character-sheets/blob/MagicKittens/Magical-Kitties/magical-kitties-logo.png?raw=true" class="logo" />
  <br>

 <div class="threequarterswide flex flex-center">
    <h2 class="whiteonredtext">Your Kitty</h2>

    <div class="flex flex-between">
      <span class="redtext width200">Name</span> <input type="text" class="flex-grow-2 input-large" name="attr_character_name">
    </div>

    <div class="flex flex-between">
      <span class="redtext width200">Extra Dice Rolls</span> 
      <button type="roll" class="button-roll" value="&{template:default} {{name=**Extra Dice**}} {{ Rolled ?{Extra Dice|1} extra dice.}} {{Successes = [[(?{Extra Dice})d6>?{Task Difficulty|Typical,4|Easy,3|Hard,5|Extreme,6}]] }} ">Roll</button>
    </div>

 </div>


  <!-- Trackables, Max & desc -->
  <div class="fullwide flex flex-even">

    <div class="thirdwide flex flex-center">
       <h2 class="whiteonredtext">Trackables</h2>
       <div class="flex flex-between">
         <span class="redtext">Owies</span> <input type="number" class="input-large" value="0" min="0" max="6" name="attr_owies"/>
       </div>
       <div class="flex flex-between">
         <span class="redtext">Treats</span> <input type="number" class="input-large" value="0" min="0" max="5" name="attr_treats"/>
       </div>
       <div class="flex flex-between">
         <span class="redtext">Injuries</span> <input type="number" class="input-large" value="0" min="0" max="4" name="attr_injuries"/>
       </div>
       <div class="flex flex-between">
         <span class="redtext">Level</span> <input type="number" class="input-large" value="0" min="0" max="10" name="attr_level"/>
       </div>
       <div class="flex flex-between">
         <span class="redtext">Current XP</span> <input type="number" class="input-large" value="0" min="0" max="100" name="attr_xp"/>
       </div>
    </div>

    <div class="twentywide flex flex-start">
       <h2 class="whiteonredtext">Maximums</h2>
       <div>
         <input type="number"class="input-large 46h" placeholder="0" min="0" max="5" name="attr_owies_max"/>
       </div>
       <div>
         <input type="number"class="input-large 46h" placeholder="0" min="0" max="5" name="attr_treats_max"/>
       </div>
    </div>

    <div class="thirdwide">
      <div>
        <h2><span class="whiteonredtext">Kitty Description</span></h2>
        <textarea  name="attr_k_desc" class="kitty-desc" spellcheck="true"></textarea>
      </div>
    </div>

  </div>


  <!-- Attributes -->
  <div class="threequarterswide flex flex-end">
     <h2 class="whiteonredtext">Attributes</h2>
      <div class="attributes">
          <div class="score">
             <label for="attr_cute_score">Cute</label>
             <input type="number"  placeholder="1" name="attr_cute_score">
             <br>
             <button type="roll" class="button-roll" value="&{template:default} {{name=**Cute Roll Check**}} {{ Rolled [[ @{cute_score} - @{injuries} ]] dice.}} {{Successes = [[(@{cute_score} - @{injuries})d6>?{Task Difficulty|Typical,4|Easy,3|Hard,5|Extreme,6}]] }} ">Roll</button>
             <br>
          </div>
          <div class="score">
             <label for="attr_cunning_score">Cunning</label>
             <input type="number"  placeholder="1" name="attr_cunning_score">
             <br>
             <button type="roll" class="button-roll" value="&{template:default} {{name=**Cunning Roll Check**}} {{ Rolled [[ @{cunning_score} - @{injuries} ]] dice.}} {{Successes = [[(@{cunning_score} - @{injuries})d6>?{Task Difficulty|Typical,4|Easy,3|Hard,5|Extreme,6}]] }} ">Roll</button>
             <br>
          </div>
          <div class="score">
             <label for="attr_fierce_score">Fierce</label>
             <input type="number"  placeholder="1" name="attr_fierce_score">
             <br>
             <button type="roll" class="button-roll" value="&{template:default} {{name=**Fierce Roll Check**}} {{ Rolled [[ @{fierce_score} - @{injuries} ]] dice.}} {{Successes = [[(@{fierce_score} - @{injuries})d6>?{Task Difficulty|Typical,4|Easy,3|Hard,5|Extreme,6}]] }} ">Roll</button>
             <br>
          </div>
      </div>
  </div>


  <!-- Repeating section -->
  <div class="threequarterswide">
  <hr/>
    
    <h2><span class="whiteonredtext">Talents</span></h2>
    <fieldset class="repeating_Talents">
        <h4 class="redtext">
            <input type="text" style="width: 400px" name="attr_TalentsTitle" class="talenttitle input-medium" placeholder="Talent Name" />
            <div class="threequarterswide flex flex-end">
                <div class="attributes">
                    <button type="roll" class="button-roll" value="&{template:default} {{name=**@{TalentsTitle}(Cute) Check**}} {{ Rolled [[ (@{cute_score} + 1 - @{injuries}) ]] dice.}} {{Successes = [[(@{cute_score}+1 - @{injuries})d6>?{Task Difficulty|Typical,4|Easy,3|Hard,5|Extreme,6}]] }}">Roll Cute</button>
                    <button type="roll" class="button-roll" value="&{template:default} {{name=**@{TalentsTitle}(Cunning) Check**}} {{ Rolled [[ (@{cunning_score} + 1 - @{injuries}) ]] dice.}} {{Successes = [[(@{cunning_score}+1 - @{injuries})d6>?{Task Difficulty|Typical,4|Easy,3|Hard,5|Extreme,6}]] }}">Roll Cunning</button>
                    <button type="roll" class="button-roll" value="&{template:default} {{name=**@{TalentsTitle}(Fierce) Check**}} {{ Rolled [[ (@{fierce_score} + 1 - @{injuries}) ]] dice.}} {{Successes = [[(@{fierce_score}+1 - @{injuries})d6>?{Task Difficulty|Typical,4|Easy,3|Hard,5|Extreme,6}]] }}">Roll Fierce</button>
                </div>
            </div>
        </h4>
        <textarea class="input-medium" name="attr_TalentsDetails"></textarea>
        <hr/> 
    </fieldset>
    <br>


    <h2><span class="whiteonredtext">Magical Powers</span></h2>
    <fieldset class="repeating_Magicpowers">
        <h4 class="redtext"><input type="text" style="width: 400px" name="attr_MagicalTitle" class="magicaltitle input-medium" placeholder="Magical Power Name" /></h4>
            <div class="threequarterswide flex flex-end">
                <div class="attributes">
                    <button type="roll" class="button-roll" value="&{template:default} {{name=**@{MagicalTitle}(Cute) Check**}} {{ Rolled [[ (@{cute_score} + 2 - @{injuries}) ]] dice.}} {{Successes = [[(@{cute_score} +2 - @{injuries})d6>?{Task Difficulty|Typical,4|Easy,3|Hard,5|Extreme,6}]] }}">Roll Cute</button>
                    <button type="roll" class="button-roll" value="&{template:default} {{name=**@{MagicalTitle}(Cunning) Check**}} {{ Rolled [[ (@{cunning_score} + 2 - @{injuries}) ]] dice.}} {{Successes = [[(@{cunning_score} +2 - @{injuries})d6>?{Task Difficulty|Typical,4|Easy,3|Hard,5|Extreme,6}]] }}">Roll Cunning</button>
                    <button type="roll" class="button-roll" value="&{template:default} {{name=**@{MagicalTitle}(Fierce) Check**}} {{ Rolled [[ (@{fierce_score} + 2 - @{injuries}) ]] dice.}} {{Successes = [[(@{fierce_score} +2 - @{injuries})d6>?{Task Difficulty|Typical,4|Easy,3|Hard,5|Extreme,6}]] }}">Roll Fierce</button>
                </div>
            </div>
        <textarea class="input-medium" name="attr_MagicalDetails"></textarea>
        <hr/> 
    </fieldset>
    <br>

    <h2><span class="whiteonredtext">Flaws</span></h2>
    <fieldset class="repeating_Flaws">
        <h4 class="redtext"><input type="text" style="width: 400px" name="attr_FlawsTitle" class="flawstitle input-medium" placeholder="Flaw Name" /></h4>
        <textarea class="input-medium" name="attr_FlawsDetails"></textarea>
        <hr/> 
    </fieldset>
    <br>

    <h2><span class="whiteonredtext">Notes</h2>
    <fieldset class="repeating_Notes">
      <textarea class="input-medium"  name="attr_notes"></textarea>
      <hr/> 
    </fieldset>
    <br>
  <!-- All about your human -->
  <hr/> 

  <div class="fullwide flex flex-center">
     <h2 class="whiteonredtext">Your Person</h2>
     <div class="flex flex-between">
       <span class="redtext width200">Name</span> <input type="text" class="flex-grow-2 input-large" name="attr_persons_name">
     </div>
     <div class="flex flex-between">
       <span class="redtext width200">Hometown</span> <input type="text" class="flex-grow-2 input-large" name="attr_hometown">
     </div>
  </div>


    <h2><span class="whiteonredtext">Your Person's Details</span></h2>
    <textarea class="input-medium" style="font-size: 18pt" name="attr_h_details"></textarea>
    <br>

    <h2><span class="whiteonredtext">Problems Facing Your Person</span></h2>
    <fieldset class="repeating_Problems">
        <h4 class="redtext">
           <input type="text" style="width: 400px" name="attr_ProblemsTitle" class="problemstitle input-medium" placeholder="Problem Name" />
           <span class="whiteonredtext">Problem Rank:</span> <input type="number" class="input-medium" value="1" min="1" max="10" name="attr_problem_rank"/>
        </h4>
        <textarea class="input-medium" name="attr_ProblemDetails"></textarea>
        <hr/> 
    </fieldset>

  </div>

</div>