├── README.md ├── assets ├── CANDARA.TTF ├── CANDARAB.TTF ├── TT1182M_.TTF ├── background.webp └── metas.png ├── background.webp ├── index.css ├── index.html └── index.js /README.md: -------------------------------------------------------------------------------- 1 | # Ordem Paranormal: Enigma do Medo 2 | 3 | Esse é um site para visualização dos dados da campanha de crowdfunding do https://www.catarse.me/ordem 4 | 5 | --- 6 | 7 | O Catarse leva tempo pra carregar tudo do site deles, pra gente que é doido e fica atualizando o site de 5 em 5 minutos, essa vai ser uma ajuda para ver os dados de forma mais rápida e simples. 8 | 9 | Importante salientar que não estamos ganhando nada com isso, é apendar uma forma de ajudar a visualizar os resultados da arrecadação do projeto!! 10 | 11 | ## Os doidos que fizeram isso 12 | 13 | - Programador: Gabriel Ferreira 14 | - Designer: Taisa Soares 15 | 16 | Se quiser dar aquela força, segue a gente no Twitter: 17 | 18 | ### Gabriel 19 | [![Twitter Badge](https://img.shields.io/badge/-Twitter-1ca0f1?style=flat-square&labelColor=1ca0f1&logo=twitter&logoColor=white&link=https://twitter.com/gabrielf_dev)](https://twitter.com/gabrielf_dev) 20 | 21 | ### Taisa 22 | [![Twitter Badge](https://img.shields.io/badge/-Twitter-1ca0f1?style=flat-square&labelColor=1ca0f1&logo=twitter&logoColor=white&link=https://twitter.com/taisa_semh)](https://twitter.com/taisa_semh) 23 | -------------------------------------------------------------------------------- /assets/CANDARA.TTF: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabsf-dev/enigma_do_medo/f08defe6aba775ac039892085ad41fdc6f772609/assets/CANDARA.TTF -------------------------------------------------------------------------------- /assets/CANDARAB.TTF: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabsf-dev/enigma_do_medo/f08defe6aba775ac039892085ad41fdc6f772609/assets/CANDARAB.TTF -------------------------------------------------------------------------------- /assets/TT1182M_.TTF: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabsf-dev/enigma_do_medo/f08defe6aba775ac039892085ad41fdc6f772609/assets/TT1182M_.TTF -------------------------------------------------------------------------------- /assets/background.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabsf-dev/enigma_do_medo/f08defe6aba775ac039892085ad41fdc6f772609/assets/background.webp -------------------------------------------------------------------------------- /assets/metas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabsf-dev/enigma_do_medo/f08defe6aba775ac039892085ad41fdc6f772609/assets/metas.png -------------------------------------------------------------------------------- /background.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabsf-dev/enigma_do_medo/f08defe6aba775ac039892085ad41fdc6f772609/background.webp -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | /* Importação de Fontes */ 2 | 3 | @font-face { 4 | font-family: 'Candara Bold'; 5 | src: url(assets/CANDARAB.TTF) 6 | } 7 | 8 | @font-face { 9 | font-family: 'Candara'; 10 | src: url(assets/CANDARA.TTF) 11 | } 12 | 13 | @font-face { 14 | font-family: 'Century'; 15 | src: url(assets/TT1182M_.TTF) 16 | } 17 | 18 | /* Global Defs */ 19 | 20 | * { 21 | margin: 0; 22 | padding: 0; 23 | box-sizing: border-box; 24 | color: #fff; 25 | } 26 | 27 | body { 28 | background-image: url(assets/background.webp); 29 | background-repeat: no-repeat; 30 | } 31 | 32 | #content { 33 | display: flex; 34 | flex-direction: column; 35 | justify-content: center; 36 | align-items: center; 37 | margin: 91px 30px; 38 | } 39 | 40 | /* Title */ 41 | 42 | #title { 43 | font-family: 'Century'; 44 | font-size: 20px; 45 | line-height: 0.2; 46 | } 47 | 48 | #subtitle { 49 | font-family: 'Candara'; 50 | font-size: 35px; 51 | } 52 | 53 | /* Progress Bar */ 54 | 55 | #progressbar-container { 56 | height: 40px; 57 | border-radius: 10px; 58 | } 59 | 60 | #progressbar-conf { 61 | background: linear-gradient(170deg, #b04b55, #642531, #000); 62 | width: 0%; 63 | transition: 0.5s; 64 | } 65 | 66 | #progressbar-wait { 67 | background: linear-gradient(170deg, #797d9d, #153955, #000); 68 | width: 0%; 69 | transition: 0.5s; 70 | } 71 | 72 | #marks-container { 73 | display: flex; 74 | flex-direction: column; 75 | justify-content: center; 76 | align-items: flex-end; 77 | margin-bottom: 6px; 78 | } 79 | 80 | #marks { 81 | background-image: url(assets/metas.png); 82 | background-repeat: no-repeat; 83 | height: 23px; 84 | width: 205px; 85 | } 86 | 87 | /* Values */ 88 | 89 | #container-values { 90 | margin-top: 25px; 91 | margin-bottom: 10px; 92 | } 93 | 94 | .container-value { 95 | display: flex; 96 | flex-direction: row; 97 | justify-content: space-between; 98 | align-items: center; 99 | margin-bottom: 15px; 100 | } 101 | 102 | .name-value { 103 | font-family: 'Century'; 104 | font-size: 20px; 105 | margin-right: 10px; 106 | } 107 | 108 | .container-money { 109 | display: flex; 110 | flex-direction: column; 111 | justify-content: center; 112 | align-items: center; 113 | border: 2px solid #fff; 114 | border-radius: 10px; 115 | font-family: 'Candara Bold'; 116 | font-size: 22px; 117 | width: 175px; 118 | padding: 3.5px 0; 119 | padding-bottom: 5px; 120 | } 121 | 122 | #pledged { 123 | background: linear-gradient(#b04b55, #642531, #000); 124 | } 125 | 126 | #waiting { 127 | background: linear-gradient(#797d9d, #153955, #000); 128 | } 129 | 130 | #total { 131 | background-color: rgba(255, 255, 255, .35); 132 | width: 100vw; 133 | display: flex; 134 | flex-direction: column; 135 | justify-content: center; 136 | align-items: center; 137 | padding: 10px 0; 138 | } 139 | 140 | .total-texts { 141 | font-family: 'Candara Bold'; 142 | } 143 | 144 | #total-title { 145 | width: 100vw; 146 | text-align: center; 147 | font-size: 25px; 148 | } 149 | 150 | #total-value { 151 | font-size: 40px; 152 | } 153 | 154 | /* Feito Por */ 155 | 156 | .info, #by { 157 | font-family: 'Candara'; 158 | font-size: 12px; 159 | } 160 | 161 | #apoio { 162 | margin-top: 8px; 163 | font-size: 20px; 164 | } 165 | 166 | #by { 167 | text-align: center; 168 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | Enigma do Medo - Crowdfunding 14 | 15 | 16 | 17 |
18 | 19 |
ORDEM PARANORMAL
20 |
ENIGMA DO MEDO
21 | 22 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 | 34 |
35 |
36 | Confirmado: 37 |
38 |
39 |
40 | Pendente: 41 |
42 |
43 |
44 | 45 |
46 |
Somatório:
47 |
48 |
49 | 50 |
Obs: Valores com base no valor de apoio mínimo
51 |
Se ainda não apoiou, clica 52 | aqui
53 |
54 |
Programação: @gabrielf_dev | Design: @taisa_semh
56 | 57 | 58 | 61 | 64 | 67 | 68 | 69 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('load', () => { 2 | const META = 3000000; 3 | 4 | axios.get('https://api.catarse.me/project_details?project_id=eq.122021') 5 | .then((projectRes) => { 6 | let data = projectRes.data[0]; 7 | let pledged = data.pledged; 8 | 9 | document.getElementById('progressbar-conf').style.width = `${calcPercent(pledged)}%`; 10 | document.getElementById('pledged').innerHTML = `${formatMoney(pledged)}`; 11 | 12 | axios.get('https://api.catarse.me/reward_details?project_id=eq.122021') 13 | .then((detailsRes) => { 14 | let data = detailsRes.data; 15 | let waiting = 0; 16 | 17 | data.forEach((d) => { 18 | let minimum = d.minimum_value; 19 | let wait = d.waiting_payment_count; 20 | 21 | waiting += minimum * wait; 22 | }); 23 | 24 | let total = pledged + waiting; 25 | 26 | document.getElementById('progressbar-wait').style.width = pledged >= META ? '0%' : `${(waiting + pledged) >= META ? calcPercent(META - pledged) : calcPercent(waiting)}%`; 27 | document.getElementById('waiting').innerHTML = `${formatMoney(waiting)}`; 28 | document.getElementById('total-value').innerHTML = `${formatMoney(total)}`; 29 | }) 30 | .catch((error) => { 31 | console.log(error); 32 | }); 33 | 34 | }) 35 | .catch((error) => { 36 | console.log(error); 37 | }); 38 | 39 | setInterval(() => { 40 | axios.get('https://api.catarse.me/project_details?project_id=eq.122021') 41 | .then((projectRes) => { 42 | let data = projectRes.data[0]; 43 | let pledged = data.pledged; 44 | 45 | document.getElementById('progressbar-conf').style.width = `${calcPercent(pledged)}%`; 46 | document.getElementById('pledged').innerHTML = `${formatMoney(pledged)}`; 47 | 48 | axios.get('https://api.catarse.me/reward_details?project_id=eq.122021') 49 | .then((detailsRes) => { 50 | let data = detailsRes.data; 51 | let waiting = 0; 52 | 53 | data.forEach((d) => { 54 | let minimum = d.minimum_value; 55 | let wait = d.waiting_payment_count; 56 | 57 | waiting += minimum * wait; 58 | }); 59 | 60 | let total = pledged + waiting; 61 | 62 | document.getElementById('progressbar-wait').style.width = pledged >= META ? '0%' : `${(waiting + pledged) >= META ? calcPercent(META - pledged) : calcPercent(waiting)}%`; 63 | document.getElementById('waiting').innerHTML = `${formatMoney(waiting)}`; 64 | document.getElementById('total-value').innerHTML = `${formatMoney(total)}`; 65 | }) 66 | .catch((error) => { 67 | console.log(error); 68 | }); 69 | 70 | }) 71 | .catch((error) => { 72 | console.log(error); 73 | }); 74 | }, 10000); 75 | }); 76 | 77 | function formatMoney(number = 0, prefix = true) { 78 | try { 79 | return prefix 80 | ? 81 | number.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', maximumFractionDigits: 2, minimumFractionDigits: 2 }).includes(',') 82 | ? number.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', maximumFractionDigits: 2, minimumFractionDigits: 2 }) 83 | : `${number.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', maximumFractionDigits: 2, minimumFractionDigits: 2 })},00` 84 | : 85 | number.toLocaleString('pt-BR', { currency: 'BRL', maximumFractionDigits: 2, minimumFractionDigits: 2 }).includes(',') 86 | ? number.toLocaleString('pt-BR', { currency: 'BRL', maximumFractionDigits: 2, minimumFractionDigits: 2 }) 87 | : `${number.toLocaleString('pt-BR', { currency: 'BRL', maximumFractionDigits: 2, minimumFractionDigits: 2 })},00` 88 | } catch { 89 | return `${'0'.toLocaleString('pt-BR', { currency: 'BRL', maximumFractionDigits: 2, minimumFractionDigits: 2 }) 90 | },00` 91 | } 92 | } 93 | 94 | function calcPercent(number = 0, total = 3000000) { 95 | return (number * 100) / total; 96 | } 97 | 98 | 99 | // Detalhes do Projeto: 100 | // https://api.catarse.me/project_details?project_id=eq.122021 101 | 102 | // Detalhes de Recompensa: 103 | // https://api.catarse.me/reward_details?project_id=eq.122021 --------------------------------------------------------------------------------