campanha.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
  1. {% include "partials/header.html" %}
  2. <meta property="og:title" content="{% if c.og_title %}{{c.og_title}}{%else%}{{c.name}} - Acredito.me{%endif%}" />
  3. <meta property="og:type" content="website" />
  4. <meta property="og:url" content="{%if c.customdomain%}http://{{c.customdomain}}{%else%}{{baseurl}}/{{c.urlname}}{%endif%}" />
  5. <meta property="og:image" content="{% if c.og_image != '' %}{{baseurl}}/{{c.og_image}}{%else%}{{baseurl}}/{{c.profile_pic}}{%endif%}" />
  6. <meta property="og:image:width" content="1200"/>
  7. <meta property="og:image:height" content="630"/>
  8. <meta property="og:description" content="{% if c.og_description%} {{c.og_description}} {%else%} Ajude a campanha {{c.name}} agora mesmo de forma simples com o Acredito.me.{%endif%}"/>
  9. <meta property="fb:app_id" content="1503423656375466"/>
  10. </head>
  11. <body>
  12. {% if c.allowmenubar == true %}
  13. {% include "partials/menubar.html" %}
  14. {% else %}
  15. <br>
  16. {% endif %}
  17. {% block body %}
  18. <style>
  19. body
  20. {
  21. background: url("{% if c.imgbg %} {{baseurl}}/{{ c.imgbg }} {% else %} {{baseurl}}/bg.png {% endif %}") !important;
  22. }
  23. .row{
  24. background-color: #fff;
  25. padding: 5px;
  26. margin-left: 2%;
  27. margin-right: 2%;
  28. }
  29. .img_perfil{
  30. max-width: 300px;
  31. border-radius: 100%;
  32. align-items: center;
  33. }
  34. .logo{
  35. max-width: 100%;
  36. }
  37. .texto_principal{
  38. margin-top: 20px;
  39. margin-bottom: 20px;
  40. font-size: 18px;
  41. text-align: justify;
  42. line-height: 1.5em;
  43. padding-top: 30px;
  44. padding-left: 30px;
  45. padding-right: 30px;
  46. padding-bottom: 15px;
  47. font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  48. }
  49. .texto_doacoes{
  50. font-size: 17px !important;
  51. font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  52. }
  53. #doar-online{
  54. font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  55. font-size: 14px !important;
  56. line-height: 1.42857143 !important;
  57. color: #555555 !important;
  58. background-color: #ffffff !important;
  59. }
  60. #campo_doacoes{
  61. padding-left: 50px;
  62. padding-right: 50px;
  63. }
  64. #teste{
  65. font-size: 15px;
  66. }
  67. .bandeira-banco{
  68. max-width: 120px;
  69. margin-bottom: 6px;
  70. margin-top: 6px;
  71. }
  72. #social_icons{
  73. margin-right: 20px;
  74. color: #3f7dbb;
  75. }
  76. #social_icons:hover{
  77. color: #7aa3cc;
  78. }
  79. #likebox-wrapper * {
  80. max-width: 100% !important;
  81. }
  82. .share-buttons{
  83. text-align: right;
  84. margin-top: 20px;
  85. }
  86. .super-title{
  87. font-size: 50px;
  88. text-decoration: none !important;
  89. font-weight: normal;
  90. color: #7C916F;
  91. text-align: center;
  92. }
  93. #main{
  94. margin-left: 15% !important;
  95. margin-right: 15% !important;
  96. padding-left: 0 !important;
  97. padding-right: 0 !important;
  98. }
  99. @media only screen
  100. and (max-width: 1600px){
  101. #main{
  102. margin-left: 10% !important;
  103. margin-right: 10% !important;
  104. padding-left: 0px !important;
  105. padding-right: 0px !important;
  106. }
  107. }
  108. @media only screen
  109. and (max-width : 1024px) {
  110. .img_perfil{
  111. max-width: 250px;
  112. border-radius: 100%;
  113. align-items: center;
  114. }
  115. #main{
  116. margin-left: 2% !important;
  117. margin-right: 2% !important;
  118. padding-left: 0px !important;
  119. padding-right: 0px !important;
  120. }
  121. .row{
  122. background-color: #fff;
  123. padding: 1px !important;
  124. margin-left: 1% !important;
  125. margin-right: 1% !important;
  126. }
  127. }
  128. </style>
  129. <div class="panel" id="main">
  130. <div class="row">
  131. <p class="share-buttons">
  132. {% if c.customdomain%}
  133. <a href="https://twitter.com/share" class="twitter-share-button" via="acreditome" data-url="http://{{c.customdomain}}">Tweet</a>
  134. <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></a>
  135. <iframe src="https://www.facebook.com/plugins/share_button.php?href=http%3A%2F%2F{{c.customdomain}}&layout=button_count&size=small&mobile_iframe=true&appId=1503423656375466&width=125&height=20" width="135" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  136. {% else %}
  137. <a href="https://twitter.com/share" class="twitter-share-button" via="acreditome" data-url="{{baseurl}}/{{c.urlname}}">Tweet</a>
  138. <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></a>
  139. <iframe src="https://www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Facredito.me%2F{{c.urlname}}&layout=button_count&size=small&mobile_iframe=true&appId=1503423656375466&width=125&height=20" width="135" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  140. {% endif %}
  141. </p>
  142. <div class="col-md-12">
  143. <!-- <a href="{{baseurl}}/{{c.urlname}}"> -->
  144. <div class="super-title">{% if c.logo_pic %}<img src="{{baseurl}}/{{ c.logo_pic }}" class="logo" alt="{{baseurl}}/{{ c.name }}">{% else %}{{ c.name }}{% endif %}</div>
  145. <!-- </a> -->
  146. <h4 align="center">
  147. {% if c.facebook_url %}<a href="{{ c.facebook_url }}" target="_blank" id="social_icons"><i class="fa fa-facebook-official fa-2x"></i></a>{% endif %}
  148. {% if c.instagram_url %}<a href="{{ c.instagram_url }}" target="_blank" id="social_icons"><i class="fa fa-instagram fa-2x"></i></a>{% endif %}
  149. {% if c.twitter_url %}<a href="{{ c.twitter_url }}" target="_blank" id="social_icons"><i class="fa fa-twitter fa-2x"></i></a>{% endif %}
  150. </h4>
  151. </div>
  152. </div>
  153. <div class="row">
  154. <div class="col-md-1"></div>
  155. <div class="col-md-5">
  156. <p align=center>
  157. <img src="{{baseurl}}/{{ c.profile_pic }}" class="img_perfil" alt="{{ c.name }}">
  158. </p>
  159. </div>
  160. {% if c.status == "andamento"%}
  161. <div class="col-md-5" id="teste">
  162. <h2 align=left id="text_arrecadamos">
  163. Já arrecadamos
  164. </h2>
  165. <h1 align=left id="temos"></h1>
  166. <h2 align=left id="text_arrecadamos">
  167. Precisamos ainda
  168. </h2>
  169. <h1 align=left id="precisamos"></h1>
  170. <h1>
  171. <div class="progress">
  172. <div class="progress-bar" id="barra" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:99%">
  173. </div>
  174. </div>
  175. </h1>
  176. {% endif %}
  177. {% if c.status == "completa"%}
  178. <div class="col-md-5" id="teste">
  179. <h3><span class="label label-success">Campanha Completa</span></h3>
  180. <h2 align=left id="text_arrecadamos">
  181. Arrecadamos
  182. </h2>
  183. <h1 align=left> R$ {{c.wehave }} </h1>
  184. <h2 align=left id="text_arrecadamos">
  185. de R$ {{c.weneed}}
  186. </h2>
  187. <!-- <h3 align=left id="precisamos"></h3> -->
  188. <h1>
  189. <div class="progress">
  190. <div class="progress-bar" id="barra" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:{{ (100 * c.wehave.replace(',','').replace('.','').replace('.','')) / c.weneed.replace(',','').replace('.','').replace('.','')}}%">
  191. </div>
  192. </div>
  193. </h1>
  194. {% endif %}
  195. {% if c.status == "encerrada"%}
  196. <div class="col-md-5" id="teste">
  197. <h3><span class="label label-danger">Campanha Encerrada</span></h3>
  198. <h2 align=left id="text_arrecadamos">
  199. <br>
  200. Arrecadamos
  201. </h2>
  202. <h1 align=left> R$ {{c.wehave }} </h1>
  203. <h2 align=left id="text_arrecadamos">
  204. de R$ {{c.weneed}}
  205. </h2>
  206. <!-- <h3 align=left id="precisamos"></h3> -->
  207. <h1>
  208. <div class="progress">
  209. <div class="progress-bar" id="barra" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:{{ (100 * c.wehave.replace(',','').replace('.','').replace('.','')) / c.weneed.replace(',','').replace('.','').replace('.','')}}%">
  210. </div>
  211. </div>
  212. </h1>
  213. {% endif %}
  214. {% if c.status == "recorrente"%}
  215. <div class="col-md-5" id="teste">
  216. <h3><span class="label label-info">Campanha Recorrente</span></h3>
  217. <h2 align=left id="text_arrecadamos">
  218. <br>
  219. Arrecadamos
  220. </h2>
  221. <h1 align=left> R$ {{c.wehave }} por mês</h1>
  222. <h3 align=left id="text_arrecadamos">
  223. Meta: R$ {{c.weneed}} por mês
  224. </h3>
  225. <!-- <h3 align=left id="precisamos"></h3> -->
  226. <h1>
  227. <div class="progress">
  228. <div class="progress-bar" id="barra" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:{{ (100 * c.wehave.replace(',','').replace('.','').replace('.','')) / c.weneed.replace(',','').replace('.','').replace('.','')}}%">
  229. </div>
  230. </div>
  231. </h1>
  232. {% endif %}
  233. </div>
  234. <div class="col-md-1"></div>
  235. <div class="col-md-12">
  236. <p class="texto_principal">
  237. {{ c.description | safe }}
  238. </p>
  239. </p>
  240. </div>
  241. </div>
  242. <div class="row" id="campo_doacoes">
  243. <h1 align=center>Doe qualquer valor</h1>
  244. {% if c.bancos %}
  245. {% set n = 0 %}
  246. {% if c.bancos.banco1.banco %} {% set n = n + 1 %}{% endif %}
  247. {% if c.bancos.banco2.banco %} {% set n = n + 1 %}{% endif %}
  248. {% if c.bancos.banco3.banco %} {% set n = n + 1 %}{% endif %}
  249. {% if c.bancos.banco4.banco %} {% set n = n + 1 %}{% endif %}
  250. {% for b in [c.bancos.banco1, c.bancos.banco2, c.bancos.banco3, c.bancos.banco4] %}
  251. {% if b.banco %}
  252. {% if n == 1 %} <center> {% endif %}
  253. <div class="col-md-{{ 12 / n }}">
  254. <h2 style="font-size:20pt;">
  255. <i class="fa fa-bank fa-1x"></i>{{ b.banco | title}}
  256. </h2>
  257. <img src="{{baseurl}}/img/bancos/{{ b.banco | lower}}.png" class="bandeira-banco">
  258. <p class="texto_doacoes">
  259. {{ b.info }} <br>
  260. <b>Agência:</b> {{ b.ag }} <br>
  261. <b>Conta:</b> {{ b.conta }} <br>
  262. {% if b.op %} <b>Operação:</b> {{b.op}} <br>{% endif %}
  263. {% if b.cpf %}<b>CPF:</b> {{ b.cpf }} <br>{% endif %}
  264. {{ b.titular }} <br>
  265. </p>
  266. </div>
  267. {% if n == 1 %} </center> {% endif %}
  268. {% endif %}
  269. {% endfor %}
  270. {% endif %}
  271. </div>
  272. {% set n = 0%}
  273. {% if c.pagseguro %} {% set n = n + 1%} {% endif %}
  274. {% if c.paypal_link %}{% set n = n + 1%}{% endif %}
  275. {% if c.paypal_email %}{% set n = n + 1%}{% endif %}
  276. {% if c.vakinha %}{% set n = n + 1%}{% endif %}
  277. <div class="row" id="campo_doacoes">
  278. <br>
  279. {% if c.pagseguro %}
  280. <div class="col-md-{{ 12/ n }}" id="doar-online">
  281. <h2 style="font-size:20pt;">
  282. <i class="fa fa-file-o fa-1x"></i> Boleto
  283. </h2>
  284. <p align="justify">
  285. A melhor forma de pagar por boleto é usando o serviço pagseguro, clique abaixo e você será direcionado para a página de doação. Basta escolher a opção boleto.
  286. </p>
  287. <p align="center" >
  288. <img src="{{baseurl}}/img/bancos/pagseguro.png"><br><br>
  289. <a onclick="centerPopup('{{ c.pagseguro }}', 'doacaoPagseguro', 1200, 800);">
  290. <button type="submit" class="btn btn-success">Doar com pagseguro</button></a>
  291. </p>
  292. </div>
  293. {% endif %}
  294. {% if c.paypal_link %}
  295. <div class="col-md-{{ 12/ n }}" id="doar-online">
  296. <h2 style="font-size:20pt;">
  297. <i class="fa fa-credit-card fa-1x"></i> Cartão de Crédito
  298. </h2>
  299. <p align="justify">
  300. Para ajudar com qualquer quantia com cartão de crédito, recomendados o uso do paypal. Clique abaixo e você será direcionado para a página de doação. Basta escolher o cartão desejado.
  301. </p>
  302. <p align="center">
  303. <img src="{{baseurl}}/img/bancos/paypal.png"><br><br>
  304. <a onclick="centerPopup('{{ c.paypal_link }}', 'doacaoPaypal', 1200, 800);">
  305. <button type="submit" class="btn btn-success" method="post" name="currency_code" value="GBP" >Doar com paypal <input type="hidden" name="currency_code" value="GBP"></button></a>
  306. </p>
  307. </div>
  308. {% endif %}
  309. {% if c.paypal_email %}
  310. <div class="col-md-{{ 12/ n }}" id="doar-online">
  311. <h2 style="font-size:20pt;">
  312. <i class="fa fa-globe fa-1x"></i> Exterior
  313. </h2>
  314. <p align="justify">
  315. Você também pode ajudar direto do exterior e em qualquer moeda estrangeira, basta clicar no botão abaixo.
  316. <br><br><br>
  317. </p>
  318. <p align="center">
  319. <img src="{{baseurl}}/img/bancos/paypal.png"><br><br>
  320. <a onclick="centerPopup('{{baseurl}}/{{c.urlname}}/exterior', 'doacaoExterior', 900, 600);">
  321. <button type="submit" class="btn btn-success">
  322. Doar do exterior
  323. </button>
  324. </a>
  325. </p>
  326. </div>
  327. {% endif %}
  328. {% if c.vakinha %}
  329. <div class="col-md-{{ 12/ n }}" id="doar-online">
  330. <h2 style="font-size:20pt;">
  331. <i class="fa fa-clone fa-1x"></i> Outros Sites
  332. </h2>
  333. <p align="justify">
  334. Você também pode ajudar pelo site vakinha, um site de vaquinhas onlines. Mas lá eles ficam com uma <a href="https://www.vakinha.com.br/taxas-e-termos-de-uso-2">taxa</a> de 6,4% do valor original, que no caso de um tratamento de AME1, siginifica um valor de 192 mil reais.
  335. </p>
  336. <p align="center">
  337. <img src="{{baseurl}}/img/bancos/vakinha.png" style="max-height:30px;"><br><br>
  338. <a href="{{ c.vakinha }}" target="_blank"><button type="submit" class="btn btn-success">Acessar Vakinha</button></a>
  339. </p>
  340. </div>
  341. {% endif %}
  342. </div>
  343. <div class="row">
  344. <br>
  345. <div class="col-md-1">
  346. </div>
  347. <!-- teste -->
  348. {% if c.galeria != '' %}
  349. <div class="col-md-10">
  350. <h2 align="center">
  351. <h1 align="center">Galeria de Fotos</h1><br>
  352. <div class="slide">
  353. <div class="demo-gallery">
  354. <ul id="lightgallery" class="list-unstyled row">
  355. {% for foto in c.galeria %}
  356. <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="{{baseurl}}/{{ foto }} 375, {{baseurl}}/{{ foto }} 480, {{baseurl}}/{{ foto }} 800" data-src="{{baseurl}}/{{ foto }}" data-sub-html="">
  357. <a href="">
  358. <img class="img-responsive" src="{{baseurl}}/{{ foto }}">
  359. </a>
  360. </li>
  361. {% endfor %}
  362. </ul>
  363. </div>
  364. </h2>
  365. </div>
  366. <div class="col-md-1">
  367. </div>
  368. </div>
  369. {% endif %}
  370. </div>
  371. <div class="row" id="campo_doacoes">
  372. <div class="col-md-4" ></div>
  373. <div class="col-md-4" >
  374. <h2 align="center">
  375. Contatos
  376. </h2>
  377. <p class="texto_doacoes">
  378. {% if c.wpp_contato%}<b>Whatsapp :</b> {{ c.wpp_contato }} <br>{% endif %}
  379. {% if c.wpp2_contato%}<b>Whatsapp Alternativo:</b> {{ c.wpp2_contato }}<br>{% endif %}
  380. {% if c.telefone_contato%}<b>Telefone para contato:</b> {{ c.telefone_contato }} <br>{% endif %}
  381. {% if c.email_contato%}<b>E-mail:</b> {{ c.email_contato }}<br>{% endif %}
  382. {% if c.facebook_url%}<b>Siga a gente no</b> <a href="{{ c.facebook_url }}" target="_blank">Facebook</a> <br>{% endif %}
  383. {% if c.instagram_url%}<b>Acompanhe também no</b> <a href="{{ c.instagram_url }}" target="_blank">Instagram</a> <br>{% endif %}
  384. {% if c.facebook_url%}<b>Messenger:</b> <a href="{{ c.facebook_url | replace('facebook.com', 'm.me') }}" target="_blank">Mandar mensagem</a> <br>{% endif %}<br><br>
  385. </p>
  386. </div>
  387. <div class="col-md-4"></div>
  388. </div>
  389. </div>
  390. </div>
  391. </div>
  392. <script>
  393. var temos = {{ c.wehave | replace(".", "") | replace(",", ".") }};
  394. var total = {{ c.weneed | replace(".", "") | replace(",", ".") }};
  395. var porcentagem = 50;
  396. </script>
  397. <script type="text/javascript">
  398. $(document).ready(function(){
  399. $('#lightgallery').lightGallery();
  400. });
  401. </script>
  402. <script src="{{baseurl}}/js/acredito.js"></script>
  403. <script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
  404. <script src="{{baseurl}}/js/lightgallery.js"></script>
  405. <script src="{{baseurl}}/js/lg-fullscreen.js"></script>
  406. <script src="{{baseurl}}/js/lg-thumbnail.js"></script>
  407. <script src="{{baseurl}}/js/lg-video.js"></script>
  408. <script src="{{baseurl}}/js/lg-autoplay.js"></script>
  409. <script src="{{baseurl}}/js/lg-zoom.js"></script>
  410. <script src="{{baseurl}}/js/lg-hash.js"></script>
  411. <script src="{{baseurl}}/js/lg-pager.js"></script>
  412. <script src="{{baseurl}}/js/jquery.mousewheel.min.js"></script>
  413. {% endblock %}
  414. {% include "partials/footer.html" %}