<commit_before>---
title: Página do cliente
layout: examples
---

<h1 class="ls-title-intro ls-ico-users">Clientes</h1>

<div class="ls-box">
  <div class="ls-float-right ls-regroup">
    <a href="" class="ls-btn-primary" target="_blank">Acessar o Painel</a>
    <div data-ls-module="dropdown" class="ls-dropdown ls-pos-right">
      <a href="#" class="ls-btn"></a>
      <ul class="ls-dropdown-nav">
        <li>
          <a href="" data-ls-toggle-fields="#domain-form" data-toggle-class="ls-display-none" data-target=".domain-actions" class="domain-actions">Editar</a>
        </li>
        <li><a href="#" data-ls-module="modal" data-target="#editPassword">Alterar senha</a></li>
        <li><a href="#">Desativar</a></li>
      </ul>
    </div>
  </div>

  <form action="" class="ls-form row" data-ls-module="form">
    <fieldset id="domain-form" class="ls-form-text ls-form-disable">
      <label class="ls-field col-md-6 col-lg-8">
        <b class="ls-label">Nome</b>
        <input type="text" value="<NAME>" required>
      </label>
      <label class="ls-field col-md-6 col-lg-8">
        <b class="ls-label">login/E-mail:</b>
        <input type="text" value="<EMAIL>" required>
      </label>
      <label class="ls-field col-md-6 col-lg-8">
        <b class="ls-label">Status:</b>
        <input type="text" value="Ativo" required>
      </label>
      <label class="ls-field col-md-6 col-lg-8">
        <b class="ls-label">Data de cadastro:</b>
        <input type="text" value="18/05/1987" required>
      </label>
      <label class="ls-field col-md-6 col-lg-8">
        <b class="ls-label">Informações:</b>
        <textarea name="" id="" cols="30" rows="5">com Fulano de Tal no telefone: 11 5555-5555. Horários entre 12:00 e 16:00 dias úteis.</textarea>
      </label>
    </fieldset>
    <div class="domain-actions ls-display-none">
      <button type="submit" class="ls-btn-primary">Salvar</button>
      <button class="ls-btn" data-ls-toggle-fields="#domain-form" data-toggle-class="ls-display-none" data-target=".domain-actions" >Cancelar</button>
    </div>
  </form>
</div>



<div class="ls-box">

  <header class="ls-info-header">
    <h2 class="ls-title-3 col-md-6 ls-ico-calendar-check">
      Período atual
      <small>01/01/2014 a 01/01/2015</small>
    </h2>

    <div class="ls-actions-btn ls-float-right">
      <a href="" data-ls-module="modal" data-target="#removeMessage" class="ls-btn">Remover envios</a>
      <a href="" data-ls-module="modal" data-target="#addMessage" class="ls-btn-primary">Adicionar envios</a>
    </div>
  </header>


  <div class="row ls-board-box">

    <div class="col-md-3">
      <div class="ls-box">
        <strong class="ls-board-info">9 <small>milhões</small></strong>
        <small>Válido até 01/01/2014</small>
      </div>
    </div>

    <div class="col-md-3">
      <div class="ls-box">
        <h6 class="ls-title-4">Avulso</h6>
        <strong class="ls-board-info">0</strong>
      </div>
    </div>

    <div class="col-md-3">
      <div class="ls-box">
        <h6 class="ls-title-4">Removidos</h6>
        <strong class="ls-board-info">0</strong>
      </div>
    </div>

    <div class="col-md-3">
      <div class="ls-box">
        <h6 class="ls-title-4 color-default">Utilizados</h6>
        <strong class="ls-board-info">10.743</strong>
      </div>
    </div>

  </div>
</div>


<div class="ls-box">

  <header class="ls-info-header">
      <h2 class="ls-title-3 col-md-6 ls-ico-calendar-more">
        Próximo período
        <small>01/01/2014 a 01/01/2015</small>
      </h2>

    <div class="ls-actions-btn ls-float-right ls-float-none-xs">
      <a href="" data-ls-module="modal" data-target="#editAmount" class="ls-btn ls-btn-block-sm">Alterar quantidade</a>
    </div>
  </header>

  <div class="row ls-board-box">

    <div class="col-sm-6 col-md-3">
      <div class="ls-box">
        <strong class="ls-board-info">9 <small>milhões</small></strong>
        <small>Válido até 01/01/2014</small>
      </div>
    </div>

    <div class="col-sm-6 col-md-9">
      <div class="ls-box">
        <p class="ls-txt-center-all">
          <a href="">Cancelar recorrência</a>
          <span class="ls-ico-help" data-ls-module="popover" data-trigger="hover" data-title="Cancelar recorrência" data-content="Ao desabilitar a recorrência, os envios desse cliente não serão renovados para os próximos períodos." data-placement="top"></span>
        </p>
      </div>
    </div>

  </div>
</div>


<div class="row">
  <div class="col-md-8 col-xs-6">
    <h2 class="ls-title-3">Relatórios</h2>
  </div>
  <div class="col-md-4 col-xs-6">
    <div class="ls-group-btn ls-group-active ls-float-right">
      <button type="button" data-ls-module="tabs" data-target=".child1" class="ls-btn ls-active ls-ico-chart-bar-up"></button>
      <button type="button" data-ls-module="tabs" data-target=".child2" class="ls-btn ls-ico-table-alt"></button>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <ul class="ls-tabs-nav" id="awesome-tab">
      <li class="ls-active"><a data-ls-module="tabs" href="#tab1">Contratação x uso</a></li>
      <li><a data-ls-module="tabs" href="#tab2">Estatísticas de envios</a></li>
    </ul>

    <div class="ls-tabs-container" id="awesome-tab-content">
      <div id="tab1" class="ls-tab-content ls-active">

        <div class="ls-tab-content child1 ls-active">
          <p>Contratação x uso</p>
          <img src="<%= base_url %>/<%= images_dir %>/graph-example.jpg">
        </div>

        <div class="ls-tab-content child2">

          <table class="ls-table">
            <thead>
              <tr>
                <th class="ls-txt-center hidden-xs">Período</th>
                <th class="ls-txt-center">Contratados</th>
                <th class="ls-txt-center" colspan="2">Distribuídos</th>
              </tr>
            </thead>
            <tbody>
                <tr>
                  <td class="ls-txt-center hidden-xs">28/03/2014 a 27/04/2014</td>
                  <td class="ls-txt-center">1000000</td>
                  <td class="ls-txt-center">10741</td>
                  <td class="ls-txt-center">1%</td>
                </tr>
                <tr>
                  <td class="ls-txt-center hidden-xs">28/03/2014 a 27/04/2014</td>
                  <td class="ls-txt-center">1000000</td>
                  <td class="ls-txt-center">10741</td>
                  <td class="ls-txt-center">1%</td>
                </tr>
                <tr>
                  <td class="ls-txt-center hidden-xs">28/03/2014 a 27/04/2014</td>
                  <td class="ls-txt-center">1000000</td>
                  <td class="ls-txt-center">10741</td>
                  <td class="ls-txt-center">1%</td>
                </tr>
                <tr>
                  <td class="ls-txt-center hidden-xs">28/03/2014 a 27/04/2014</td>
                  <td class="ls-txt-center">1000000</td>
                  <td class="ls-txt-center">10741</td>
                  <td class="ls-txt-center">1%</td>
                </tr>
                <tr>
                  <td class="ls-txt-center hidden-xs">28/03/2014 a 27/04/2014</td>
                  <td class="ls-txt-center">1000000</td>
                  <td class="ls-txt-center">10741</td>
                  <td class="ls-txt-center">1%</td>
                </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div id="tab2" class="ls-tab-content">

        <div class="ls-tab-content child1 ls-active">
          <p>Estatísticas de envios</p>
          <img src="<%= base_url %>/<%= images_dir %>/graph-example.jpg">
        </div>

        <div class="ls-tab-content child2">
          <table class="ls-table">
            <thead>
              <tr>
                <th class="ls-txt-center">Data</th>
                <th class="ls-txt-center">Todos</th>
                <th class="ls-txt-center" colspan="2">Ativos</th>
                <th class="ls-txt-center hidden-xs" colspan="2">Desativados</th>
                <th class="ls-txt-center hidden-xs" colspan="2">Bloqueados por bounce</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="ls-txt-center">Hoje</td>
                <td class="ls-txt-center">29</td>
                <td class="ls-txt-center">26</td>
                <td class="ls-txt-center hidden-xs">89%</td>
                <td class="ls-txt-center hidden-xs">3</td>
                <td class="ls-txt-center hidden-xs">10%</td>
                <td class="ls-txt-center hidden-xs">0</td>
                <td class="ls-txt-center hidden-xs">0%</td>
              </tr>
              <tr>
                <td class="ls-txt-center">Hoje</td>
                <td class="ls-txt-center">29</td>
                <td class="ls-txt-center">26</td>
                <td class="ls-txt-center hidden-xs">89%</td>
                <td class="ls-txt-center hidden-xs">3</td>
                <td class="ls-txt-center hidden-xs">10%</td>
                <td class="ls-txt-center hidden-xs">0</td>
                <td class="ls-txt-center hidden-xs">0%</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row ls-box-filter">
  <div class="col-md-12">
    <h2 class="ls-title-3">Histórico de transações</h2>

    <form action="" class="ls-form ls-form-inline">
      <label class="ls-field">
        <b class="ls-label">Período</b>
        <input type="date" name="cel2" id="datepicker">
      </label>

      <label class="ls-field">
        <b class="ls-label">a</b>
        <input type="date" name="cel2" id="datepicker">
      </label>
      <button type="button" class="ls-btn">Filtrar</button>
    </form>
  </div><commit_msg>Little improvement	:p<commit_after>---
title: Página do cliente
layout: examples
---

<h1 class="ls-title-intro ls-ico-users">Clientes</h1>

<div class="ls-box">
  <div class="ls-float-right ls-regroup">
    <a href="" class="ls-btn-primary" target="_blank">Acessar o Painel</a>
    <div data-ls-module="dropdown" class="ls-dropdown ls-pos-right">
      <a href="#" class="ls-btn"></a>
      <ul class="ls-dropdown-nav">
        <li>
          <a href="" data-ls-toggle-fields="#domain-form" data-toggle-class="ls-display-none" data-target=".domain-actions" class="domain-actions">Editar</a>
        </li>
        <li><a href="#" data-ls-module="modal" data-target="#editPassword">Alterar senha</a></li>
        <li><a href="#">Desativar</a></li>
      </ul>
    </div>
  </div>

  <form action="" class="ls-form row" data-ls-module="form">
    <fieldset id="domain-form" class="ls-form-text ls-form-disable">
      <label class="ls-field col-md-6 col-lg-8">
        <b class="ls-label">Nome</b>
        <input type="text" value="<NAME>" required>
      </label>
      <label class="ls-field col-md-6 col-lg-8">
        <b class="ls-label">login/E-mail:</b>
        <input type="text" value="<EMAIL>" required>
      </label>
      <label class="ls-field col-md-6 col-lg-8">
        <b class="ls-label">Status:</b>
        <input type="text" value="Ativo" required>
      </label>
      <label class="ls-field col-md-6 col-lg-8">
        <b class="ls-label">Data de cadastro:</b>
        <input type="text" value="18/05/1987" required>
      </label>
      <label class="ls-field col-md-6 col-lg-8">
        <b class="ls-label">Informações:</b>
        <textarea name="" id="" cols="30" rows="5">com Fulano de Tal no telefone: 11 5555-5555. Horários entre 12:00 e 16:00 dias úteis.</textarea>
      </label>
    </fieldset>
    <div class="domain-actions ls-display-none">
      <button type="submit" class="ls-btn-primary">Salvar</button>
      <button class="ls-btn" data-ls-toggle-fields="#domain-form" data-toggle-class="ls-display-none" data-target=".domain-actions" >Cancelar</button>
    </div>
  </form>
</div>



<div class="ls-box">

  <header class="ls-info-header">
    <h2 class="ls-title-3 col-md-6 ls-ico-calendar-check">
      Período atual
      <small>01/01/2014 a 01/01/2015</small>
    </h2>

    <div class="ls-actions-btn ls-float-right">
      <a href="" data-ls-module="modal" data-target="#removeMessage" class="ls-btn">Remover envios</a>
      <a href="" data-ls-module="modal" data-target="#addMessage" class="ls-btn-primary">Adicionar envios</a>
    </div>
  </header>


  <div class="row ls-board-box">

    <div class="col-md-3">
      <div class="ls-box">
        <strong class="ls-board-info">9 <small>milhões</small></strong>
        <small>Válido até 01/01/2014</small>
      </div>
    </div>

    <div class="col-md-3">
      <div class="ls-box">
        <h6 class="ls-title-4">Avulso</h6>
        <strong class="ls-board-info">0</strong>
      </div>
    </div>

    <div class="col-md-3">
      <div class="ls-box">
        <h6 class="ls-title-4">Removidos</h6>
        <strong class="ls-board-info">0</strong>
      </div>
    </div>

    <div class="col-md-3">
      <div class="ls-box">
        <h6 class="ls-title-4 color-default">Utilizados</h6>
        <strong class="ls-board-info">10.743</strong>
      </div>
    </div>

  </div>
</div>


<div class="ls-box">

  <header class="ls-info-header">
      <h2 class="ls-title-3 col-md-6 ls-ico-calendar-more">
        Próximo período
        <small>01/01/2014 a 01/01/2015</small>
      </h2>

    <div class="ls-actions-btn ls-float-right ls-float-none-xs">
      <a href="" data-ls-module="modal" data-target="#editAmount" class="ls-btn ls-btn-block-sm">Alterar quantidade</a>
    </div>
  </header>

  <div class="row ls-board-box">

    <div class="col-sm-6 col-md-3">
      <div class="ls-box">
        <strong class="ls-board-info">9 <small>milhões</small></strong>
        <small>Válido até 01/01/2014</small>
      </div>
    </div>

    <div class="col-sm-6 col-md-9">
      <div class="ls-box">
        <p class="ls-txt-center-all">
          <a href="">Cancelar recorrência</a>
          <span class="ls-ico-help" data-ls-module="popover" data-trigger="hover" data-title="Cancelar recorrência" data-content="Ao desabilitar a recorrência, os envios desse cliente não serão renovados para os próximos períodos." data-placement="top"></span>
        </p>
      </div>
    </div>

  </div>
</div>


<div class="row">
  <div class="col-md-8 col-xs-6">
    <h2 class="ls-title-3">Relatórios</h2>
  </div>
  <div class="col-md-4 col-xs-6">
    <div class="ls-group-btn ls-group-active ls-float-right">
      <button type="button" data-ls-module="tabs" data-target=".child1" class="ls-btn ls-active ls-ico-chart-bar-up"></button>
      <button type="button" data-ls-module="tabs" data-target=".child2" class="ls-btn ls-ico-table-alt"></button>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <ul class="ls-tabs-nav" id="awesome-tab">
      <li class="ls-active"><a data-ls-module="tabs" href="#tab1">Contratação x uso</a></li>
      <li><a data-ls-module="tabs" href="#tab2">Estatísticas de envios</a></li>
    </ul>

    <div class="ls-tabs-container" id="awesome-tab-content">
      <div id="tab1" class="ls-tab-content ls-active">

        <div class="ls-tab-content child1 ls-active">
          <p>Contratação x uso</p>
          <img src="<%= base_url %>/<%= images_dir %>/graph-example.jpg">
        </div>

        <div class="ls-tab-content child2">

          <table class="ls-table">
            <thead>
              <tr>
                <th class="ls-txt-center hidden-xs">Período</th>
                <th class="ls-txt-center">Contratados</th>
                <th class="ls-txt-center" colspan="2">Distribuídos</th>
              </tr>
            </thead>
            <tbody>
                <tr>
                  <td class="ls-txt-center hidden-xs">28/03/2014 a 27/04/2014</td>
                  <td class="ls-txt-center">1000000</td>
                  <td class="ls-txt-center">10741</td>
                  <td class="ls-txt-center">1%</td>
                </tr>
                <tr>
                  <td class="ls-txt-center hidden-xs">28/03/2014 a 27/04/2014</td>
                  <td class="ls-txt-center">1000000</td>
                  <td class="ls-txt-center">10741</td>
                  <td class="ls-txt-center">1%</td>
                </tr>
                <tr>
                  <td class="ls-txt-center hidden-xs">28/03/2014 a 27/04/2014</td>
                  <td class="ls-txt-center">1000000</td>
                  <td class="ls-txt-center">10741</td>
                  <td class="ls-txt-center">1%</td>
                </tr>
                <tr>
                  <td class="ls-txt-center hidden-xs">28/03/2014 a 27/04/2014</td>
                  <td class="ls-txt-center">1000000</td>
                  <td class="ls-txt-center">10741</td>
                  <td class="ls-txt-center">1%</td>
                </tr>
                <tr>
                  <td class="ls-txt-center hidden-xs">28/03/2014 a 27/04/2014</td>
                  <td class="ls-txt-center">1000000</td>
                  <td class="ls-txt-center">10741</td>
                  <td class="ls-txt-center">1%</td>
                </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div id="tab2" class="ls-tab-content">

        <div class="ls-tab-content child1 ls-active">
          <p>Estatísticas de envios</p>
          <img src="<%= base_url %>/<%= images_dir %>/graph-example.jpg">
        </div>

        <div class="ls-tab-content child2">
          <table class="ls-table">
            <thead>
              <tr>
                <th class="ls-txt-center">Data</th>
                <th class="ls-txt-center">Todos</th>
                <th class="ls-txt-center" colspan="2">Ativos</th>
                <th class="ls-txt-center hidden-xs" colspan="2">Desativados</th>
                <th class="ls-txt-center hidden-xs" colspan="2">Bloqueados por bounce</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="ls-txt-center">Hoje</td>
                <td class="ls-txt-center">29</td>
                <td class="ls-txt-center">26</td>
                <td class="ls-txt-center hidden-xs">89%</td>
                <td class="ls-txt-center hidden-xs">3</td>
                <td class="ls-txt-center hidden-xs">10%</td>
                <td class="ls-txt-center hidden-xs">0</td>
                <td class="ls-txt-center hidden-xs">0%</td>
              </tr>
              <tr>
                <td class="ls-txt-center">Hoje</td>
                <td class="ls-txt-center">29</td>
                <td class="ls-txt-center">26</td>
                <td class="ls-txt-center hidden-xs">89%</td>
                <td class="ls-txt-center hidden-xs">3</td>
                <td class="ls-txt-center hidden-xs">10%</td>
                <td class="ls-txt-center hidden-xs">0</td>
                <td class="ls-txt-center hidden-xs">0%</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<h2 class="ls-title-3">Histórico de transações</h2>

<div class="row ls-box-filter">
  <div class="col-md-12">
    <form action="" class="ls-form ls-form-inline">
      <label class="ls-field">
        <b class="ls-label">Período</b>
        <input type="date" name="cel2" id="datepicker">
      </label>

      <label class="ls-field">
        <b class="ls-label">a</b>
        <input type="date" name="cel2" id="datepicker">
      </label>
      <button type="button" class="ls-btn">Filtrar</button>
    </form>
  </div>
{'fraction_non_alphanumeric': 0.19698364008179958, 'fraction_numerical': 0.032719836400818, 'mean_word_length': 2.035065942591156, 'pattern_counts': {'":': 0, '<': 677, '<?xml version=': 0, '>': 677, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4619761', 'n_tokens_mistral': 7362, 'n_tokens_neox': 6783, 'n_words': 1187}