novacampanha.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. {% set title = "Criar Nova Campanha" %}
  2. {% include "partials/header.html" %}
  3. {% include "partials/menubar.html" %}
  4. {% block body %}
  5. <script src="/js/jquery.tagsinput.min.js" charset="utf-8"></script>
  6. <link rel="stylesheet" href="/css/jquery.tagsinput.css">
  7. <link rel="stylesheet" href="/css/bootstrap-select.css">
  8. <script>
  9. $(document).ready(function() {
  10. $('#nchars').html(0 + ' caractere');
  11. $('#textarea').keyup(function() {
  12. var textlength = $('#textarea').val().length;
  13. $('#nchars').html(textlength + ' caracteres');
  14. });
  15. });
  16. </script>
  17. <style>
  18. .hidden-div {
  19. display:none;
  20. }
  21. </style>
  22. <div class="container">
  23. <div class="panel">
  24. <div class="panel-body">
  25. {% if messages.error %}
  26. <div role="alert" class="alert alert-danger">
  27. {% for error in messages.error %}
  28. <div>{{ error.msg }}</div>
  29. {% endfor %}
  30. </div>
  31. {% endif %}
  32. <form>
  33. <h3> Criar nova campanha </h3>
  34. <legend>Informações Básicas</legend>
  35. <div class="form-group">
  36. <label for="name">Título da Campanha (obrigatório)</label>
  37. <input type="text" name="name" id="name"class="form-control" autofocus value="{{ form.name }}">
  38. <small class="text-muted">Insira um título para sua campanha. Por exemplo: Ajude a manter o acredito.me no ar.</a></small>
  39. </div>
  40. <div class="form-group">
  41. <label for="urlname">Url da Campanha (obrigatório)</label>
  42. <input type="text" name="urlname" id="urlname" class="form-control" value="{{ form.urlname }}">
  43. <small class="text-muted">É como a URL ficará no endereço para acessar a campannha. Por exemplo: acreditome</a></small>
  44. </div>
  45. <div class="form-group">
  46. <label for="weneed">Meta da Campanha (R$) (obrigatório)</label>
  47. <input type="text" name="weneed" id="weneed"class="form-control" style="width:350px !important;" step="1" size="35" value="{{ form.weneed }}">
  48. <small class="text-muted">Por exemplo, se a meta for R$2.000,50 digite 2.000,50</a></small>
  49. </div>
  50. <div class="form-group">
  51. <label for="wehave">Já arrecadado (R$)</label>
  52. <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 %}">
  53. <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>
  54. </div>
  55. <div class="form-group">
  56. <label for="wehave">Texto de Descrição (obrigatório)</label>
  57. <textarea class="form-control" rows="10" name="description" id="textarea">{{ form.description }}</textarea>
  58. <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>
  59. </div>
  60. <legend>Doação por Depóstio Bancário</legend>
  61. <div class="form-group">
  62. <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>
  63. <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>
  64. <div id="banco1" class="collapse">
  65. <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>
  66. <select class="selectpicker" name="bancos_banco_banco1" data-live-search="true">
  67. {% include 'partials/banklist.html' %}
  68. </select>
  69. <br><br>
  70. <label>Nome do Titular da Conta</label>
  71. <input type="text" name="bancos_banco_titular1" class="form-control" value="{{form.bancos.banco1.titular}}" placeholder="João da Silva Dias">
  72. <label>Agência</label>
  73. <input type="text" name="bancos_banco_ag1" class="form-control" value="{{form.bancos_banco_ag1}}" placeholder="1234-8" style="width:350px !important;">
  74. <label>Conta</label>
  75. <input type="text" name="bancos_banco_conta1" class="form-control" value="{{form.bancos_banco_conta1}}" placeholder="123456-88" style="width:350px !important;">
  76. <label>Operação</label>
  77. <input type="text" name="bancos_banco_op1" class="form-control" value="{{form.bancos_banco_op1}}" placeholder="" style="width:150px !important;">
  78. <br><button type="button" class="btn btn-default" data-toggle="collapse" data-target="#banco2">+</button><br>
  79. </div>
  80. <div id="banco2" class="collapse">
  81. <h6>Conta Bancária 2 <a href="javascript:void(0);" data-toggle="collapse" data-target="#banco2">(Excluir)</a></h6>
  82. <select class="selectpicker" name="bancos_banco_banco2" data-live-search="true">
  83. {% include 'partials/banklist.html' %}
  84. </select>
  85. <br><br>
  86. <label>Nome do Titular da Conta</label>
  87. <input type="text" name="bancos_banco_titular2" class="form-control" value="{{form.bancos.banco2.titular}}" placeholder="João da Silva Dias">
  88. <label>Agência</label>
  89. <input type="text" name="bancos_banco_ag2" class="form-control" value="{{form.bancos.banco2.ag}}" placeholder="1234-8" style="width:350px !important;">
  90. <label>Conta</label>
  91. <input type="text" name="bancos_banco_conta2" class="form-control" value="{{form.bancos.banco2.conta}}" placeholder="123456-88" style="width:350px !important;">
  92. <label>Operação</label>
  93. <input type="text" name="bancos_banco_op2" class="form-control" value="{{form.bancos.banco2.op}}" placeholder="" style="width:150px !important;">
  94. <br><button type="button" class="btn btn-default" data-toggle="collapse" data-target="#banco3">+</button><br>
  95. </div>
  96. <div id="banco3" class="collapse">
  97. <h6>Conta Bancária 3 <a href="javascript:void(0);" data-toggle="collapse" data-target="#banco3">(Excluir)</a></h6>
  98. <select class="selectpicker" name="bancos_banco_banco3" data-live-search="true">
  99. {% include 'partials/banklist.html' %}
  100. </select>
  101. <br><br>
  102. <label>Nome do Titular da Conta</label>
  103. <input type="text" name="bancos_banco_titular3" class="form-control" value="{{form.bancos.banco3.titular}}" placeholder="João da Silva Dias">
  104. <label>Agência</label>
  105. <input type="text" name="bancos_banco_ag3" class="form-control" value="{{form.bancos.banco3.ag}}" placeholder="1234-8" style="width:350px !important;">
  106. <label>Conta</label>
  107. <input type="text" name="bancos_banco_conta3" class="form-control" value="{{form.bancos.banco3.conta}}" placeholder="123456-88" style="width:350px !important;">
  108. <label>Operação</label>
  109. <input type="text" name="bancos_banco_op3" class="form-control" value="{{form.bancos.banco3.op}}" placeholder="" style="width:150px !important;">
  110. <br><button type="button" class="btn btn-default" data-toggle="collapse" data-target="#banco4">+</button><br>
  111. </div>
  112. <div id="banco4" class="collapse">
  113. <h6>Conta Bancária 4 <a href="javascript:void(0);" data-toggle="collapse" data-target="#banco4">(Excluir)</a></h6>
  114. <select class="selectpicker" name="bancos_banco_banco4" data-live-search="true">
  115. {% include 'partials/banklist.html' %}
  116. </select>
  117. <br><br>
  118. <label>Nome do Titular da Conta</label>
  119. <input type="text" name="bancos_banco_titular4" class="form-control" value="{{form.bancos.banco4.titular}}" placeholder="João da Silva Dias">
  120. <label>Agência</label>
  121. <input type="text" name="bancos_banco_ag4" class="form-control" value="{{form.bancos.banco4.ag}}" placeholder="1234-8" style="width:350px !important;">
  122. <label>Conta</label>
  123. <input type="text" name="bancos_banco_conta4" class="form-control" value="{{form.bancos.banco4.conta}}" placeholder="123456-88" style="width:350px !important;">
  124. <label>Operação</label>
  125. <input type="text" name="bancos_banco_op4" class="form-control" value="{{form.bancos.banco4.op}}" placeholder="" style="width:150px !important;">
  126. </div>
  127. </div>
  128. <legend>Doação Online</legend>
  129. <div class="form-group">
  130. <label>E-mail Paypal</label>
  131. <input type="text" name="paypal_email" class="form-control" value="{{ form.paypal_email }}">
  132. <small class="text-muted">Insira aqui exatamente o mesmo e-mail de sua conta paypal. Por exemplo: emaildopaypal@gmail.com</a></small>
  133. <br><br><label>Link de doação Paypal</label>
  134. <input type="text" name="paypal_link" class="form-control" value="{{ form.paypal_link }}">
  135. <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>
  136. <br><br><label>Link da doação Pagseguro/Pag.ae</label>
  137. <input type="text" name="pagseguro" class="form-control" value="{{ form.pagseguro }}">
  138. <small class="text-muted">Insira o link gerado no campo de doações do pagseguro. Por exemplo: https://pag.ae/bkh8PW6</a></small>
  139. </div>
  140. <legend>Contato</legend>
  141. <div class="form-group">
  142. <label >Email para contato</label>
  143. <input type="text" name="email_contato" id="email_contato" class="form-control" value="{{ form.email_contato }}" >
  144. <small class="text-muted">Você deseja adicionar algum e-mail para contato? Lembre-se, ele será publico. Por exemplo: emaildecontato@gmail.com</a></small>
  145. <br><br><label>Telefone Fixo para Contato</label>
  146. <input type="text" name="telefone_contato" class="form-control" value="{{ form.telefone_contato }}">
  147. <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>
  148. <br><br><label>Whatsapp para contato</label>
  149. <input type="text" name="wpp_contato" class="form-control" value="{{ form.wpp_contato }}" >
  150. <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>
  151. <br><br><label>Whatsapp alternativo para contato</label>
  152. <input type="text" name="wpp2_contato" class="form-control" value="{{ form.wpp2_contato }}">
  153. <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>
  154. <br><br><label>Telegram para contato</label>
  155. <input type="text" name="telegram_contato" class="form-control" value="{{ form.telegram_contato }}">
  156. <small class="text-muted">Insira o username de seu telegram. Lembre-se, ele será publico. Por exemplo: +55 (41) 99815-8337</a></small>
  157. </div>
  158. <legend>Redes sociais</legend>
  159. <div class="form-group">
  160. <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>
  161. <label for="wehave">Fanpage ou perfil no Facebook (obrigatório)</label>
  162. <input type="text" name="facebook_url" id="facebook_url" class="form-control" value="{{ form.facebook_url }}">
  163. <small class="text-muted">Copie e cole a URL da sua página ou perfil. Por exemplo: http://facebook.com/acreditome </a></small>
  164. <br><br><label for="wehave">Perfil no Instagram</label>
  165. <input type="text" name="instagram_url" id="instagram_url" class="form-control" value="{{ form.instagram_url }}">
  166. <small class="text-muted">Copie e cole a URL da sua página ou perfil. Por exemplo: http://instagram.com/acreditome </a></small>
  167. <br><br><label for="wehave">Perfil no Twitter</label>
  168. <input type="text" name="twitter_url" id="twitter_url" class="form-control" value="{{ form.twitter_url }}">
  169. <small class="text-muted">Copie e cole a URL da sua página ou perfil. Por exemplo http://twitter.com/acreditome </a></small>
  170. </div>
  171. <legend> Fotos e Imagens </legend>
  172. <div class="form-group">
  173. <label>Foto Principal</label>
  174. <div>
  175. <input id="upload-input" type="file" accept="image/jpg, image/jpeg">
  176. <img1></img1>
  177. </div>
  178. </div>
  179. <div class="form-group">
  180. <label>Imagem para fundo da página</label>
  181. <div>
  182. <input id="upload-input2" type="file" accept="image/jpg, image/jpeg" >
  183. <img2></img2>
  184. </div>
  185. </div>
  186. <!-- Fim -->
  187. <div class="form-group">
  188. <small class="text-muted">Criando uma conta, você concorda com os <a href="/" target="_blank">Termos de Uso</a>.</small>
  189. </div>
  190. <button type="submit" class="btn btn-success" formmethod="post">Criar Campanha</button>
  191. <button formaction="/minhascampanhas" formmethod="get" class="btn btn-danger" value="_">Cancelar</button>
  192. </form>
  193. </div>
  194. </div>
  195. </div>
  196. <script src="/js/bootstrap-select.js"></script>
  197. <script src="/js/upload.js"></script>
  198. {% endblock %}
  199. {% include "partials/footer.html" %}