-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
258 lines (254 loc) · 15.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html>
<head>
<title>Reorganize o Brasil</title>
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/x-icon" href="static/dist/img/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="static/dist/css/general.css">
<meta charset="utf-8"/>
</head>
<body>
<div id="mainContent">
<div class="row map-n-info">
<svg width="80%" height="600"></svg>
<div class="column right">
<span class="h1 fw-bolder lh-1 stateHeader"></span><br>
<span id="stateMunCount" class="h1 fw-medium lh-1"></span><br><hr>
<span class="fs-6 fw-lighter mt-3">
Informações:
</span>
<div class="infoList mb-3 mt-2">
<span class="fw-light" id = "statePop"></span><br>
<span class="fw-light" id = "stateBiggestCity"></span><br>
<span class="fw-light" id = "stateArea"></span><br>
<span class="fw-light" id = "stateHDI"></span><br>
<span class="fw-light" id = "stateGDP"></span><br>
<span class="fw-light" id = "statePPC"></span><br>
<hr>
<div class="collapses mb-3 mt-2">
<a class="collapse-links collapsed" data-bs-toggle="collapse" href="#collapse22Ellection" aria-expanded="false" aria-controls="collapseEllection">
Eleição 2022
</a>
<div class="collapse" id="collapse22Ellection">
<div class="collapse-content card card-body mt-1" id="state22Ellection">
<div class="candidates">
<div class="election22 e22-lula election-candidate">
<div class="candidate-left">
<div class="img-candidate img-lula">
<img src="static/dist/img/lula.jpeg" />
</div>
</div>
<div class="candidate-middle">
<small class="fw-lighter">
Lula
<span class='fw-lighter info-detail ms-1' id="totalLula"></span>
</small>
<div class="progress progress-lula">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" id="progressLula"></div>
</div>
</div>
<div class="candidate-right">
<div id="resultLula" class="result-candidate"></div>
</div>
</div>
<div class="election22 e22-bolsonaro election-candidate">
<div class="candidate-left">
<div class="img-candidate img-bolsonaro">
<img src="static/dist/img/hmkk.jpeg" />
</div>
</div>
<div class="candidate-middle">
<small class="fw-lighter">
Bolsonaro
<span class='fw-lighter info-detail ms-1' id="totalBolsonaro"></span>
</small>
<div class="progress progress-bolsonaro">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" id="progressBolsonaro"></div>
</div>
</div>
<div class="candidate-right">
<div id="resultBolsonaro" class="result-candidate"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<span class="fs-6 fw-lighter mt-3">
Outras estatísticas:
</span>
<div class="collapses mb-3 mt-2">
<a class="collapse-links collapsed" data-bs-toggle="collapse" href="#collapseGeneral" aria-expanded="false" aria-controls="collapseGeneral">
Gerais
</a>
<div class="collapse" id="collapseGeneral">
<div class="collapse-content card card-body mt-1" id="stateGeneralInfo"></div>
</div>
<a class="collapse-links collapsed mt-2" data-bs-toggle="collapse" href="#collapseAgeNSex" aria-expanded="false" aria-controls="collapseAgeNSex">
Idade e Sexo
</a>
<div class="collapse" id="collapseAgeNSex">
<div class="collapse-content card card-body mt-1" id="stateAgeSex"></div>
</div>
<a class="collapse-links collapsed mt-2" data-bs-toggle="collapse" href="#collapseHomes" aria-expanded="false" aria-controls="collapseHomes">
Domicílios
</a>
<div class="collapse" id="collapseHomes">
<div class="collapse-content card card-body mt-1" id="stateHomes"></div>
</div>
<a class="collapse-links collapsed mt-2" data-bs-toggle="collapse" href="#collapsePoverty" aria-expanded="false" aria-controls="collapsePoverty">
Pobreza
</a>
<div class="collapse" id="collapsePoverty">
<div class="collapse-content card card-body mt-1" id="statePoverty"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row states-n-settings">
<div class="mid container">
<div class="column mid">
<h2>Reorganize o Brasil</h2>
<div class="state-buttons mb-3">
<button id="newState" style="width:100%">Novo Estado</button>
<button id="assignState" style="width:100%">Atribuir Estado</button>
</div>
<div>
<p class="lead">
Estados:
</p>
<div id="stateList" class="row"></div>
</div>
</div>
</div>
<div class="column right">
<h3>Definições do Mapa</h3>
<div class="form-check form-switch">
<input id="showMunicipalities" type="checkbox" checked class="form-check-input"/> <label class="form-check-label" for="showMunicipalities">Mostrar Limites Municipais</label><br/>
</div>
<div class="form-check form-switch">
<input id="showStates" type="checkbox" checked class="form-check-input"/> <label class="form-check-label" for="showStates">Mostrar Divisas Estaduais</label><br/><br/>
</div>
<div class="compressor-btns">
<button id="compressor" style="width:50%; float:left;" >Salvar</button>
<button id="decompressor" style="width:50%; float: right;">Carregar</button>
</div>
<button id="loadRealBR" style="width:100%; float: right; margin-top: 0.5rem;">Carregar Estados Reais</button>
</div>
</div>
<div class="row divider"></div>
<div class="row lists">
<div class="column left">
<div class="form-floating">
<select id="state-lists-select" class="form-select form-select-sm" aria-label=".form-select-sm lists-select Floating label select">
<optgroup label="População">
<option value="1" selected>Maiores Cidades</option>
<option value="9">Menores Cidades</option>
</opgroup>
<optgroup label="Área">
<option value="17">Maiores Territórios</option>
<option value="18">Menores Território</option>
<option value="19">Mais densamente povoados</option>
<option value="20">Menos densamente povoados</option>
</opgroup>
<optgroup label="IDH">
<option value="2">Melhores IDHs</option>
<option value="10">Piores IDHs</option>
</opgroup>
<optgroup label="PIB">
<option value="3">Maiores PIBs</option>
<option value="11">Menores PIBs</option>
</opgroup>
<optgroup label="PIB Per Capita">
<option value="4">Maiores PPC</option>
<option value="12">Menores PPC</option>
</opgroup>
<optgroup label="Eleição 2022">
<option value="21">Mais petistas</option>
<option value="22">Mais bolsonaristas</option>
</opgroup>
<optgroup label="Expectativa de Vida">
<option value="5">Mais Longevidade</option>
<option value="13">Menos Longevidade</option>
</opgroup>
<optgroup label="GINI">
<option value="6">Menos Desiguais</option>
<option value="14">Mais Desiguais</option>
</opgroup>
<optgroup label="Agua e Esgoto">
<option value="7">Mais Inadequados</option>
<option value="15">Menos Inadequados</option>
</opgroup>
<optgroup label="Pobres">
<option value="8">Mais Pobres</option>
<option value="16">Menos Pobres</option>
</opgroup>
</select>
<label class="select-label" for="state-lists-select">Listar cidades do estado por:</label>
</div>
<div id="state-lists-select-parent">
<p class="h4 fw-bolder mt-3">
<span id="stateCitiesHeader">Maiores cidades</span>
<br><span class="stateName lead fs-5">
</span>
</p>
<table id="stateCities" class="table table-striped lists-table">
<thead>
<tr id="stateCitiesThs">
<th scope="col">#</th>
<th scope="col">Cidade</th>
<th scope="col" id="stateCitiesCol3">População</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="column right">
<div class="form-floating">
<select id="lists-select" class="form-select form-select-sm" aria-label=".form-select-sm lists-select">
<option value="1" selected>População</option>
<option value="9">Área</option>
<option value="2">IDH</option>
<option value="3">PIB</option>
<option value="4">PIB Per Capita</option>
<option value="5">Expectativa de Vida</option>
<option value="6">GINI</option>
<option value="10">Densidade populacional</option>
<option value="7">Agua e Esgoto Inadequados</option>
<option value="8">Pobres</option>
<optgroup label="Eleição 2022">
<option value="11">Mais petistas</option>
<option value="12">Mais bolsonaristas</option>
</opgroup>
</select>
<label class="select-label" for="state-lists-select">Listar estados por:</label>
</div>
<div id="lists-select-parent">
</div>
</div>
</div>
<div class="row divider"></div>
</div>
<div class="footer">
<div class="footer-logo mb-2"><img src="static/dist/img/logo.png"/></div>
<div class="mb-2">Desenvolvido por <a href="https://github.com/AdrysonFreitas">Adryson Freitas</a>.</div>
<hr>
<div class="creditos">
<div class="mb-1">Agradecimentos especiais e créditos ao <a href="https://github.com/DysLabs/dyslabs.github.io/tree/master/mapster">Dyslabs</a> pelo código inicial que esse app foi baseado.</div>
<div class="mb-1">Todos os dados desse site foram compilados a partir de dados gratuitos. Os dados do site não necessariamente estão atualizados ou representam a realidade brasileira, é apenas por diversão. Para dados mais precisos acesse <a href="https://www.ibge.gov.br">IBGE</a>.</div>
<div class="mb-1">Veja todos os créditos <a href="creditos.html">aqui</a>.</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="static/dist/js/jscolor.js"></script>
<script src="static/dist/js/pako.js"></script>
<script src="static/dist/js/mapster.js"></script>
</html>