roll20-character-sheets/FightingFantasy/FightingFantasy.html

<input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab" value="hero" />
<div class="tab-buttons">
  <button type="action" name="act_hero" data-i18n="Hero">Hero</button>
  <button type="action" name="act_notesAndMonsters" data-i18n="Notes/Monsters">Notes/Monsters</button>

</div>

<div class="sheet-character">
  <div class="main-div">

    <div class="main-top-content">

      <div class="title-and-subtitle">
        <span class="sheet-title" data-i18n="title">Adventure Sheet</span>
        <span class="sheet-subtitle" data-i18n="subtitle">Fighting Fantasy by Steve Jackson and Ian Livingstone</span>

      </div>

      <div>

        <details open>
          <summary style="font-weight:bold; " data-i18n="hero-info">Hero Info</summary>
          <div class="hero-info">
            <div>
              <label data-i18n="hero-name">Name <input type="text" name="attr_character_name"
                  spellcheck="false" /></label>
            </div>
            <div>
              <label data-i18n="provisions">Provisions <input type="number" name="attr_remaining_provisions"
                  class="text-center">
              </label>
            </div>
            <div>
              <label data-i18n="goldCoins">Gold coins <input type="number" name="attr_gold_coins" class="text-center">
              </label>
            </div>
          </div>

        </details>
      </div>


    </div>

    <div class="hero-stats-details">
      <details open>
        <summary style="font-weight:bold; " data-i18n="hero-stats">Hero Stats</summary>
        <div class="hero-stats">

          <div class="hero-skill">

            <div class="hero-roll">
              <label data-i18n="skill">
                Skill </label>

              <button type="roll" class="skill-roll-btn" name="skillroll" value="[[2d6+@{characterskill}]]"> </button>
            </div>




            <input type="text" name="attr_characterskill" maxlength="2" />
          </div>


          <div class="hero-stamina">
            <label data-i18n="stamina">Stamina </label>
            <input type="text" name="attr_characterstamina" maxlength="2" />
          </div>

          <div class="hero-luck">
            <label data-i18n="luck">Luck </label>
            <input type="text" name="attr_characterluck" maxlength="2" />
          </div>

        </div>
      </details>
    </div>
    <hr>

    <div class="sheet-sections">

      <div class="hero-equipments-and-others">

        <div class="equipments">
          <div class="equipments-header">
            <h3 data-i18n="equipments">Equipments/Items </h3>
          </div>

          <fieldset class="repeating_equipments">

            <input type="text" name="attr_equipment" class="attr_equipment" spellcheck="false" />

          </fieldset>
        </div>


        <div class="potions">
          <label class="potions-header" data-i18n="potions">Potions</label>

          <fieldset class="repeating_potions">

            <input type="text" name="attr_potions" class="attr_potions" spellcheck="false" />
          </fieldset>
        </div>


      </div>


      <div class="hero-backstory-and-others">
        <div class="backstory">
          <label class="backstory-header" data-i18n="backstory">
            Backstory
            <textarea class="backstory-area" spellcheck="false">

      </textarea>
          </label>
        </div>
      </div>



    </div>



  </div>
</div>

<div class="sheet-notesAndMonsters">
  <div class="main-monster-div">

    <div class="main-top-content">

      <div class="title-and-subtitle">
        <span class="sheet-title" data-i18n="title">Adventure Sheet</span>
        <span class="sheet-subtitle" data-i18n="subtitle">Fighting Fantasy by Steve Jackson and Ian Livingstone</span>

      </div>

      <div>

        <details open>
          <summary style="font-weight:bold; " data-i18n="hero-notes">Hero Notes</summary>
          <textarea spellcheck="false"></textarea>

        </details>
      </div>




      <div class="monster-ecounters-details">
        <details open>
          <summary style="font-weight:bold; " data-i18n="monster-encounters">Encounters</summary>

          <fieldset class="repeating_encounters">

            <div class="monster-div">
              <input type="text" data-i18n="monster name" placeholder="monster name here" name="attr_encounters"
                class="attr_encounters monster-name" spellcheck="false">
              <div class="monster-stats">
                <div class="monster-stats-div">
                  <label data-i18n="skill">Skill</label>
                  <input type="text" maxlength="2" style="width: 60px; text-align:center">
                </div>

                <div class="monster-stats-div">
                  <label data-i18n="stamina">Stamina</label>
                  <input type="text" maxlength="2" style="width: 60px; text-align:center">
                </div>

                <div class="monster-stats-div">
                  <label data-i18n="attacks">Attacks</label>
                  <input type="text" maxlength="2" style="width: 60px; text-align:center">
                </div>
              </div>


            </div>

          </fieldset>
        </details>
      </div>

    </div>




  </div>



</div>

<script type="text/worker">
  const buttonlist = ["hero","notesAndMonsters"];
  buttonlist.forEach(button => {
      on(`clicked:${button}`, function() {
          setAttrs({
              sheetTab: button
          });
      });
  });
  
</script>