MediaWiki:Outfitter.html

<table class="outfitter_main_table" style="height: 545px; margin: 0 auto;">
  <tr>
    <td style="height: 30px;" colspan="8">
      <div class="titulo">Outfitter</div>
    </td>
  </tr>
  <tr>
    <td class="janela" rowspan="2">
      <div class="janela_bg"></div>
      <div class="icone_janela_outfit"></div>
      <div class="titulo_janela">Outfits</div>
      <div class="janela_outfits">
        <form id="form_outfits"></form>
      </div>
    </td>

    <td class="janela" rowspan="2">
      <div class="janela_bg"></div>
      <div class="icone_janela_mount"></div>
      <div class="titulo_janela">Montarias</div>
      <div class="janela_montarias">
        <form id="form_montarias"></form>
      </div>
    </td>

    <td style="width: 360px; vertical-align: top;" colspan="3">
      <div class="simple_box">
        <table style="width: 100%;">
          <tr>
            <td style="text-align: center; position: relative;">
              <div class="carregando"></div>
              <canvas id="tela" width="128" height="128" style="border: 2px dotted rgb(31, 42, 49);"></canvas>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <table style="margin-top: -4px; line-height: 12px;">
                <tr>
                  <td><div class="botao_e" id="out_e"></div></td>
                  <td style="width: 100%"><div class="outfit_nome"></div></td>
                  <td><div class="botao_d" id="out_d"></div></td>
                </tr>
                <tr>
                  <td><div class="botao_e" id="mount_e"></div></td>
                  <td style="width: 100%"><div class="montaria_nome"></div></td>
                  <td><div class="botao_d" id="mount_d"></div></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>

      <div id="tabela_cores_container" class="simple_box">
        <table style="margin: 10px auto;">
          <tr style="height:20px;">
            <td>
              <table class="tabela_seletores">
                <tr>
                  <td class="seletores" id="head">Head</td>
                  <td class="seletores" id="primary">Primary</td>
                  <td class="seletores" id="secondary">Secondary</td>
                  <td class="seletores" id="detail">Detail</td>
                </tr>
              </table>
            </td>
          </tr>
          <tr style="height:104px">
            <td style="vertical-align: top;">
              <table class="tabela_cores">
                <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>                        </tr>
                <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>                        </tr>
                <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>                        </tr>
                <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>                        </tr>
                <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>                        </tr>
                <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>                        </tr>
                <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>                        </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>

      <div id="controls" class="simple_box">
      <table style="margin: 5px auto;">
        <tr style="height: 25px;">
          <td style="text-align: center; vertical-align: middle; width: 80px;" rowspan="4">
            <div class="orientacao">
              <div class="seta_cima"></div>
              <div class="seta_direita"></div>
              <div class="seta_baixo"></div>
              <div class="seta_esquerda"></div>
            </div>
          </td>
          <td colspan="2">
            <label for="nome_char">Nome:</label> <input type="text" class="nome_char" id="nome_char" style="width: 200px;" placeholder="Digite um nome...">
          </td>
        </tr>
        <tr style="height: 25px;">
          <td style="width: 125px">
            <div class="check"><input type="checkbox" id="addon_1" name="addon_1"/> <label for="addon_1"></label><span>Addon 1</span></div>
          </td>
          <td style="width: 125px">
            <div class="check"><input type="checkbox" id="vida" name="vida"/> <label for="vida"></label>Barra de Vida</div>
          </td>
        </tr>
        <tr style="height: 25px;">
          <td>
            <div class="check"><input type="checkbox" id="addon_2" name="addon_2"/> <label for="addon_2"></label><span>Addon 2</span></div>
          </td>
          <td>
            <div class="check"><input type="checkbox" id="aa" name="aa"/> <label for="aa"></label>Anti-aliasing</div>
          </td>
        </tr>
        <tr style="height: 25px;">
          <td>
            <div class="check"><input type="checkbox" id="animar" name="animar"/> <label for="animar"></label>Animar</div>
          </td>
          <td>
            <div class="check"><input type="checkbox" id="quadros" name="quadros"/> <label for="quadros"></label>Quadros</div>
          </td>
        </tr>
        </table>
      </div>
    </td>

    <td class="janela" rowspan="2">
      <div class="janela_bg"></div>
      <div class="icone_janela_outfit"></div>
      <div class="titulo_janela">Outros</div>
      <div class="janela_outfits">
        <form id="form_outros"></form>
      </div>
    </td>
  </tr>
  <tr style="white-space: nowrap;">
    <td style="padding: 0 10px 10px 10px; width: 100%">
      <label>Link: <input type="text" style="width: calc(100% - 37px)" class="link" onClick="this.select();" readonly="readonly"></label>
    </td>
  </tr>
</table>

<table class="quadros" style="display: none; border-collapse: separate; margin: 15px auto; text-align: center;">
  <tr>
    <tr>
      <td colspan="4" style="padding: 4px;" id="tick"></td>
    </tr>
    <td>
      <canvas class="quadro" id="q0" width="64" height="64" style="margin-left: 2px;"></canvas>
      <canvas class="quadro" id="q1" width="64" height="64"></canvas>
      <canvas class="quadro" id="q2" width="64" height="64"></canvas>
      <canvas class="quadro" id="q3" width="64" height="64"></canvas>
    </td>
  </tr>
  <tr>
    <td>
      <canvas class="quadro" id="q4" width="64" height="64" style="margin-left: 2px;"></canvas>
      <canvas class="quadro" id="q5" width="64" height="64"></canvas>
      <canvas class="quadro" id="q6" width="64" height="64"></canvas>
      <canvas class="quadro" id="q7" width="64" height="64"></canvas>
    </td>
  </tr>
  <tr>
    <td>
      <canvas class="quadro" id="q8" width="64" height="64" style="margin-left: 2px;"></canvas>
      <canvas class="quadro" id="q9" width="64" height="64"></canvas>
      <canvas class="quadro" id="q10" width="64" height="64"></canvas>
      <canvas class="quadro" id="q11" width="64" height="64"></canvas>
    </td>
  </tr>
  <tr>
    <td>
      <canvas class="quadro" id="q12" width="64" height="64" style="margin-left: 2px;"></canvas>
      <canvas class="quadro" id="q13" width="64" height="64"></canvas>
      <canvas class="quadro" id="q14" width="64" height="64"></canvas>
      <canvas class="quadro" id="q15" width="64" height="64"></canvas>
    </td>
  </tr>
  <tr>
    <td>
      <canvas class="quadro" id="q16" width="64" height="64" style="margin-left: 2px;"></canvas>
      <canvas class="quadro" id="q17" width="64" height="64"></canvas>
      <canvas class="quadro" id="q18" width="64" height="64"></canvas>
      <canvas class="quadro" id="q19" width="64" height="64"></canvas>
    </td>
  </tr>
  <tr>
    <td>
      <canvas class="quadro" id="q20" width="64" height="64" style="margin-left: 2px;"></canvas>
      <canvas class="quadro" id="q21" width="64" height="64"></canvas>
      <canvas class="quadro" id="q22" width="64" height="64"></canvas>
      <canvas class="quadro" id="q23" width="64" height="64"></canvas>
    </td>
  </tr>
  <tr>
    <td>
      <canvas class="quadro" id="q24" width="64" height="64" style="margin-left: 2px;"></canvas>
      <canvas class="quadro" id="q25" width="64" height="64"></canvas>
      <canvas class="quadro" id="q26" width="64" height="64"></canvas>
      <canvas class="quadro" id="q27" width="64" height="64"></canvas>
    </td>
  </tr>
  <tr>
    <td>
      <canvas class="quadro" id="q28" width="64" height="64" style="margin-left: 2px;"></canvas>
      <canvas class="quadro" id="q29" width="64" height="64"></canvas>
      <canvas class="quadro" id="q30" width="64" height="64"></canvas>
      <canvas class="quadro" id="q31" width="64" height="64"></canvas>
    </td>
  </tr>
  <tr>
    <td>
      <canvas class="quadro" id="q32" width="64" height="64" style="margin-left: 2px;"></canvas>
      <canvas class="quadro" id="q33" width="64" height="64"></canvas>
      <canvas class="quadro" id="q34" width="64" height="64"></canvas>
      <canvas class="quadro" id="q35" width="64" height="64"></canvas>
    </td>
  </tr>
  <tr style="display: inline;">
    <td>
      <canvas class="quadro" id="q36" width="64" height="64" style="margin-left: 2px;"></canvas>
      <canvas class="quadro" id="q37" width="64" height="64"></canvas>
      <canvas class="quadro" id="q38" width="64" height="64"></canvas>
      <canvas class="quadro" id="q39" width="64" height="64"></canvas>
    </td>
  </tr>
</table>

<img class="invisivel" id="img_letras" src="https://www.tibiawiki.com.br/wiki/Especial:Redirecionar/file/Outfiter_Letras.png" alt="letras" />
<canvas class="invisivel" id="tela_cor" width="64" height="64"></canvas>
<canvas class="invisivel" id="montagem" width="2560" height="128"></canvas>
<div style="clear: both;">&nbsp</div>