acredito.me/views/novacampanha.html

{% set title = "Criar Nova Campanha" %}
{% include "partials/header.html" %}
{% include "partials/menubar.html" %}

{% block body %}
<script src="/js/jquery.tagsinput.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="/css/jquery.tagsinput.css">

<link rel="stylesheet" href="/css/bootstrap-select.css">
<script>
$(document).ready(function() {
    $('#nchars').html(0 + ' caractere');

    $('#textarea').keyup(function() {
        var textlength = $('#textarea').val().length;

        $('#nchars').html(textlength + ' caracteres');
    });
});
</script>
<style>
.hidden-div {
    display:none;
}
</style>
<div class="container">
  <div class="panel">
    <div class="panel-body">
      {% if messages.error %}
      <div role="alert" class="alert alert-danger">
        {% for error in messages.error %}
        <div>{{ error.msg }}</div>
        {% endfor %}
      </div>
      {% endif %}
      <form>
        <h3> Criar nova campanha </h3>
        <legend>Informações Básicas</legend>

        <div class="form-group">
          <label for="name">Título da Campanha (obrigatório)</label>
          <input type="text" name="name" id="name"class="form-control" autofocus value="{{ form.name }}">
          <small class="text-muted">Insira um título para sua campanha. Por exemplo: Ajude a manter o acredito.me no ar.</a></small>
        </div>
        <div class="form-group">
          <label for="urlname">Url da Campanha (obrigatório)</label>
          <input type="text" name="urlname" id="urlname" class="form-control" value="{{ form.urlname }}">
          <small class="text-muted">É como a URL ficará no endereço para acessar a campannha. Por exemplo: acreditome</a></small>
        </div>
        <div class="form-group">
          <label for="weneed">Meta da Campanha (R$) (obrigatório)</label>
          <input type="text" name="weneed" id="weneed"class="form-control" style="width:350px !important;" step="1" size="35" value="{{ form.weneed }}">
          <small class="text-muted">Por exemplo, se a meta for R$2.000,50 digite 2.000,50</a></small>
        </div>
        <div class="form-group">
          <label for="wehave">Já arrecadado (R$)</label>
          <input type="text" name="wehave" id="wehave" class="form-control" style="width:350px !important;" step="1" size="35" value="{% if form.wehave %}{{ form.wehave }}{% else %}0,00{% endif %}">
          <small class="text-muted">Por exemplo, se você já tem R$125,50, digite 125,50. Deixe em branco se ainda não arrecadou nenhum valor.</a></small>
        </div>
        <div class="form-group">
          <label for="wehave">Texto de Descrição (obrigatório)</label>
          <textarea class="form-control" rows="10" name="description" id="textarea">{{ form.description }}</textarea>
          <small class="text-muted"><div id="nchars"></div> Mínimo 300 caracteres. Conte sobre sua campanha, os objetivos, como a quantia arrecada será utilizada.</a></small>
        </div>

        <legend>Doação por Depóstio Bancário</legend>
        <div class="form-group">
          <p>Você pode adicionar até quatro tipos de bancos diferentes para receber depósitos como forma de doação offline. Atenção: As informações serão públicas. Clique no  botão "+" para adicionar sua(s) conta(s) bancárias.</p>

          <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#banco1" id="hidden-div" onclick="getElementById('hidden-div').style.display = 'block'; this.style.display ='none'"> + </button><br>
          <div id="banco1" class="collapse">
            <h6>Conta Bancária 1 <a href="javascript:void(0);" data-toggle="collapse" data-target="#banco1" onclick="getElementById('hidden-div').style.display = 'block';">(Excluir)</a></h6>
            <select class="selectpicker" name="bancos_banco_banco1" data-live-search="true">
              {% include 'partials/banklist.html' %}
            </select>
            <br><br>
            <label>Nome do Titular da Conta</label>
            <input type="text" name="bancos_banco_titular1" class="form-control" value="{{form.bancos.banco1.titular}}" placeholder="João da Silva Dias">
            <label>Agência</label>
            <input type="text" name="bancos_banco_ag1" class="form-control" value="{{form.bancos_banco_ag1}}" placeholder="1234-8" style="width:350px !important;">
            <label>Conta</label>
            <input type="text" name="bancos_banco_conta1" class="form-control" value="{{form.bancos_banco_conta1}}" placeholder="123456-88" style="width:350px !important;">
            <label>Operação</label>
            <input type="text" name="bancos_banco_op1" class="form-control" value="{{form.bancos_banco_op1}}" placeholder="" style="width:150px !important;">
            <br><button type="button" class="btn btn-default" data-toggle="collapse" data-target="#banco2">+</button><br>
          </div>

          <div id="banco2" class="collapse">
            <h6>Conta Bancária 2 <a href="javascript:void(0);" data-toggle="collapse" data-target="#banco2">(Excluir)</a></h6>
            <select class="selectpicker" name="bancos_banco_banco2" data-live-search="true">
              {% include 'partials/banklist.html' %}
            </select>
            <br><br>
            <label>Nome do Titular da Conta</label>
            <input type="text" name="bancos_banco_titular2" class="form-control" value="{{form.bancos.banco2.titular}}" placeholder="João da Silva Dias">
            <label>Agência</label>
            <input type="text" name="bancos_banco_ag2" class="form-control" value="{{form.bancos.banco2.ag}}" placeholder="1234-8" style="width:350px !important;">
            <label>Conta</label>
            <input type="text" name="bancos_banco_conta2" class="form-control" value="{{form.bancos.banco2.conta}}" placeholder="123456-88" style="width:350px !important;">
            <label>Operação</label>
            <input type="text" name="bancos_banco_op2" class="form-control" value="{{form.bancos.banco2.op}}" placeholder="" style="width:150px !important;">
            <br><button type="button" class="btn btn-default" data-toggle="collapse" data-target="#banco3">+</button><br>
          </div>

          <div id="banco3" class="collapse">
            <h6>Conta Bancária 3 <a href="javascript:void(0);" data-toggle="collapse" data-target="#banco3">(Excluir)</a></h6>
            <select class="selectpicker" name="bancos_banco_banco3" data-live-search="true">
              {% include 'partials/banklist.html' %}
            </select>
            <br><br>
            <label>Nome do Titular da Conta</label>
            <input type="text" name="bancos_banco_titular3" class="form-control" value="{{form.bancos.banco3.titular}}" placeholder="João da Silva Dias">
            <label>Agência</label>
            <input type="text" name="bancos_banco_ag3" class="form-control" value="{{form.bancos.banco3.ag}}" placeholder="1234-8" style="width:350px !important;">
            <label>Conta</label>
            <input type="text" name="bancos_banco_conta3" class="form-control" value="{{form.bancos.banco3.conta}}" placeholder="123456-88" style="width:350px !important;">
            <label>Operação</label>
            <input type="text" name="bancos_banco_op3" class="form-control" value="{{form.bancos.banco3.op}}" placeholder="" style="width:150px !important;">
            <br><button type="button" class="btn btn-default" data-toggle="collapse" data-target="#banco4">+</button><br>
          </div>

          <div id="banco4" class="collapse">
            <h6>Conta Bancária 4 <a href="javascript:void(0);" data-toggle="collapse" data-target="#banco4">(Excluir)</a></h6>
            <select class="selectpicker" name="bancos_banco_banco4" data-live-search="true">
              {% include 'partials/banklist.html' %}
            </select>
            <br><br>
            <label>Nome do Titular da Conta</label>
            <input type="text" name="bancos_banco_titular4" class="form-control" value="{{form.bancos.banco4.titular}}" placeholder="João da Silva Dias">
            <label>Agência</label>
            <input type="text" name="bancos_banco_ag4" class="form-control" value="{{form.bancos.banco4.ag}}" placeholder="1234-8" style="width:350px !important;">
            <label>Conta</label>
            <input type="text" name="bancos_banco_conta4" class="form-control" value="{{form.bancos.banco4.conta}}" placeholder="123456-88" style="width:350px !important;">
            <label>Operação</label>
            <input type="text" name="bancos_banco_op4" class="form-control" value="{{form.bancos.banco4.op}}" placeholder="" style="width:150px !important;">
          </div>
        </div>


        <legend>Doação Online</legend>
        <div class="form-group">
          <label>E-mail Paypal</label>
          <input type="text" name="paypal_email" class="form-control" value="{{ form.paypal_email }}">
          <small class="text-muted">Insira aqui exatamente o mesmo e-mail de sua conta paypal. Por exemplo: emaildopaypal@gmail.com</a></small>

          <br><br><label>Link de doação Paypal</label>
          <input type="text" name="paypal_link" class="form-control" value="{{ form.paypal_link }}">
          <small class="text-muted">Insira o link gerado no campo de doações de seu paypal. Por exemplo: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=5HFY2RS7LNEUA</a></small>

          <br><br><label>Link da doação Pagseguro/Pag.ae</label>
          <input type="text" name="pagseguro" class="form-control" value="{{ form.pagseguro }}">
          <small class="text-muted">Insira o link gerado no campo de doações do pagseguro. Por exemplo: https://pag.ae/bkh8PW6</a></small>
        </div>

        <legend>Contato</legend>
        <div class="form-group">
          <label >Email para contato</label>
          <input type="text" name="email_contato" id="email_contato" class="form-control" value="{{ form.email_contato }}" >
          <small class="text-muted">Você deseja adicionar algum e-mail para contato? Lembre-se, ele será publico. Por exemplo: emaildecontato@gmail.com</a></small>

          <br><br><label>Telefone Fixo para Contato</label>
          <input type="text" name="telefone_contato" class="form-control" value="{{ form.telefone_contato }}">
          <small class="text-muted">Você deseja adicionar algum telefone fixo para contato? Lembre-se, ele será publico. Por exemplo: +55 (41) 99815-8337</a></small>

          <br><br><label>Whatsapp para contato</label>
          <input type="text" name="wpp_contato" class="form-control" value="{{ form.wpp_contato }}" >
          <small class="text-muted">Você deseja adicionar algum whatsapp para contato? Lembre-se, ele será publico. Se não, deixe em branco. Por exemplo: +55 (41) 99815-8337</a></small>

          <br><br><label>Whatsapp alternativo para contato</label>
          <input type="text" name="wpp2_contato" class="form-control" value="{{ form.wpp2_contato }}">
          <small class="text-muted">Você deseja adicionar algum whatsapp secundário para contato? Lembre-se, ele será publico. Por exemplo: +55 (41) 99815-8337</a></small>

          <br><br><label>Telegram para contato</label>
          <input type="text" name="telegram_contato" class="form-control" value="{{ form.telegram_contato }}">
          <small class="text-muted">Insira o username de seu telegram. Lembre-se, ele será publico. Por exemplo: +55 (41) 99815-8337</a></small>

        </div>

        <legend>Redes sociais</legend>
        <div class="form-group">
          <p>É <b>recomendado</b> que você tenha páginas nas redes sociais (facebook, instagram, twitter. etc.) para a divulgação da sua campanha. Pode ser uma página específica para a campanha ou a página da sua ONG, da sua Causa ou o seu perfil pessoal mesmo. Isso passa credibilidade e faz com que os doadores possam acompanhar mais de perto a sua campanha. </p>

          <label for="wehave">Fanpage ou perfil no Facebook (obrigatório)</label>
          <input type="text" name="facebook_url" id="facebook_url" class="form-control" value="{{ form.facebook_url }}">
          <small class="text-muted">Copie e cole a URL da sua página ou perfil. Por exemplo: http://facebook.com/acreditome </a></small>

          <br><br><label for="wehave">Perfil no Instagram</label>
          <input type="text" name="instagram_url" id="instagram_url" class="form-control" value="{{ form.instagram_url }}">
          <small class="text-muted">Copie e cole a URL da sua página ou perfil. Por exemplo:  http://instagram.com/acreditome </a></small>

          <br><br><label for="wehave">Perfil no Twitter</label>
          <input type="text" name="twitter_url" id="twitter_url" class="form-control" value="{{ form.twitter_url }}">
          <small class="text-muted">Copie e cole a URL da sua página ou perfil. Por exemplo http://twitter.com/acreditome </a></small>
        </div>

        <legend> Fotos e Imagens </legend>
        <div class="form-group">
          <label>Foto Principal</label>
            <div>
              <input id="upload-input" type="file" accept="image/jpg, image/jpeg">
              <img1></img1>
            </div>
        </div>

        <div class="form-group">
          <label>Imagem para fundo da página</label>
          <div>
            <input id="upload-input2" type="file" accept="image/jpg, image/jpeg" >
            <img2></img2>
          </div>
        </div>


        <!-- Fim -->
        <div class="form-group">
          <small class="text-muted">Criando uma conta, você concorda com os <a href="/" target="_blank">Termos de Uso</a>.</small>
        </div>
        <button type="submit" class="btn btn-success" formmethod="post">Criar Campanha</button>
        <button formaction="/minhascampanhas" formmethod="get" class="btn btn-danger" value="_">Cancelar</button>
      </form>
    </div>
  </div>
</div>
<script src="/js/bootstrap-select.js"></script>
<script src="/js/upload.js"></script>
{% endblock %}
{% include "partials/footer.html" %}