-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (127 loc) · 7.44 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
<!doctype html>
<html lang="pt-br">
<head>
<title>MAPA DAS MINAS</title>
<!-- Iconify -->
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<!-- Fontes -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Mapa-->
<script src='https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css' rel='stylesheet' />
<!-- Meu CSS -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="loading.css">
<!-- Meu JS-->
<script src="scripts/helperFunctions.js"></script>
<script src="scripts/dataCol.js"></script>
<script src="scripts/main.js"></script>
</head>
<body onload="Start()">
<div id="loading">
<div class="logo">
<img width="240px" src="assets/logo.png">
</div>
<div class="textoLoading">
<p class="frase" style="color: #C14B34;"> Você não precisa andar sozinha. </p>
<p class="frase"> Bora unir as mina do quad
e invadir as pistas, carai! 🤘 </p>
<img width="200px" id="loadingImg" class="carregandoGif loader" src="assets/bandaid.png">
<p class="creditos"> idealizado por <span style="color: #C14B34">@haoleskater</span> </br>
desenvolvido com 💗 <span style="color: #C14B34">@isabelazamith</span>
</p>
</div>
</div>
<div id="maisInfo">
<div onclick="fechaSaibaMais()" class="iconify close" style="font-size: 20px; color: #C14B34;
margin-bottom: 20px;" data-icon="gg:close-r" data-inline="false"></div>
<div class="logo">
<img width="240px" src="assets/logo.png">
</div>
<div class="textoLoading" style="max-width: 300px">
<p class="frase" style="text-align: left; font-size: 15px; font-weight: 400;"> ❓ Esse é um projeto colaborativo e em constante expansão para mapear
as minas do quad/rollerskate no Brasil. </br>Nosso objetivo é incentivar rolês para aumentar a
<span style="color: #C14B34; font-weight: 500;">quantidade e a segurança</span> das mulheres nas pistas.</br> </br>
<a>🛼 Rollerskate</a> é um tipo de patins, também conhecido como quad ou tradicional. </p> </br>
<a style="color: #C14B34; font-weight: 600; font-size: 20px;" href="https://forms.gle/Qoo61n32H1nnZNL76" target="_blank">🌎 Participe do mapa! </a>
<p class="creditos">
idealizado por <span ><a style="color: #C14B34"href="https://instagram.com/haoleskater" target="_blank">@haoleskater</a></span> </br>
desenvolvido com 💗 <a style="color: #C14B34"href="https://instagram.com/isabelazamith" target="_blank">@isabelazamith</a></span>
</p>
</div>
</div>
<div class="container-fluid top">
<img width="100px" src="assets/marcadagua.png">
<span class="row busca">
<!-- Adionar busca quando arrumar -->
<!--
<div class="dropdown">
<button class="btn btn-default" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="estadoSelecionado">Seu estado</span>
<span class="iconify lupa" data-icon="fluent:search-20-regular" data-inline="false"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a href="#"><li>Acre</li></a>
<a href="#"><li>Alagoas</li></a>
<a href="#"><li>Amapá</li></a>
<a href="#"><li>Amazonas</li></a>
<a href="#"><li>Bahia</li></a>
<a href="#"><li>Ceará</li></a>
<a href="#"><li>Distrito Federal</li></a>
<a href="#"><li>Espírito Santo</li></a>
<a href="#"><li>Goiás</li></a>
<a href="#"><li>Maranhão</li></a>
<a href="#"><li>Mato Grosso</li></a>
<a href="#"><li>Mato Grosso do Sul</li></a>
<a href="#"><li>Minas Gerais</li></a>
<a href="#"><li>Pará</li></a>
<a href="#"><li>Paraíba</li></a>
<a href="#"><li>Paraná</li></a>
<a href="#"><li>Pernambuco</li></a>
<a href="#"><li>Piauí</li></a>
<a href="#"><li>Rio de Janeiro</li></a>
<a href="#"><li>Rio Grande do Norte</li></a>
<a href="#"><li>Rio Grande do Sul</li></a>
<a href="#"><li>Rondônia</li></a>
<a href="#"><li>Roraima</li></a>
<a href="#"><li>Santa Catarina</li></a>
<a href="#"><li>São Paulo</li></a>
<a href="#"><li>Sergipe</li></a>
<a href="#"><li>Tocantins</li></a>
</ul>
</div>
-->
<div class="row link">
<!-- <a onclick="abreSaibaMais()">Saiba Mais</a> -->
<a href="https://forms.gle/Qoo61n32H1nnZNL76" target=”_blank”> Participe do mapa </a>
</div>
</span>
</div>
<div class ="row" id="box-info">
<div class="col-12 infoTitulo">
<img src="assets/minas.png" style="margin-bottom: 10px;">
<p class="caveat"> EM <span id="estadoExib">ESTADO</span></p>
<p class="infoFooter">Clique sobre o nome para ser redirecionada para o instagram</p>
</div>
<hr class="col-12 divisoria">
<div class="col-12" id="infoConteudo">
<p id="mina1">@HAOLESKATER</p>
</div>
</div>
<div id='map'> </div>
<!-- Map -->
<script src="scripts/map.js"></script>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>