-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (90 loc) · 5.19 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
<html>
<head>
<!-- Conecta com a fonte "Comfortaa" do Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;700&display=swap" rel="stylesheet">
<!-- Conecta com jQuery através da CDN deles -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Conecta com estilo do Bootstrap através da CDN 'jsDelivr' -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Conecta com estilo do Selectize através da CDN 'cdnjs' -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css"
integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Conecta com Selectize através da cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"
integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Conecta com o CSS da página -->
<link rel="stylesheet" href="www/main-styles.css">
<!-- Conecta com o script JS que gera as variáveis globais -->
<script src="www/js/dataset.js"></script>
<!-- Conecta com o script JS que gera o menu Selectize e define o efeito de sua seleção -->
<script src="www/js/selector.js"></script>
<!-- Conecta com o script JS que insere os iframes dentro de #container -->
<script src="www/js/builder.js"></script>
<!-- Conecta com o script JS que ajusta a fonte para caber em um container -->
<script src="www/js/resizeToFit.js"></script>
<script>
window.addEventListener("load", function () {
resizeToFit.init(["#context"]);
});
window.addEventListener("resize", function () {
resizeToFit.resize();
});
</script>
</head>
<body>
<!-- Container que encompassa todo conteúdo -->
<div id="encompass">
<!-- Define o menu lateral -->
<div id="sidebar">
<!-- Insere o título da página -->
<div id="title">O CALENDÁRIO DO BRASILEIRÃO</div>
<!-- Insere tag que irá receber o menu -->
<select id="menu"></select>
<!-- Insere contexto e créditos -->
<div id="context">
<div id="explanation">
<p>Desde 2006 a Série A do Brasileirão adotou um modelo de 38 rodadas com 20 clubes. O <strong>menu
acima</strong> permite <strong>selecionar</strong> um dos <strong>42 clubes</strong> que participaram desse
formato do campeonato em ao menos uma temporada.</p>
<p>Ao selecionar um <strong>clube</strong> seu <strong>calendário</strong> de resultados é exibido à
<strong>direita</strong>. Há duas formas de interagir com o calendário através do mouse:
</p>
</div>
<div class="mouseicons">
<img src="www/mouse_click.png" />
<img src="www/mouse_hover.png" />
<div>Clique</div>
<div>Hover<div style="font-size: 0.4em;">(sobreposição)</div>
</div>
</div>
<div id="authorship">
<p>Página feita por <strong>Ícaro Bernardes</strong> com R e HTML+CSS+JS. Códigos comentados no <a
href="https://github.com/IcaroBernardes/calendario-brasileirao"
target="_blank">repositório</a>.</p>
<p>Dados obtidos através do pacote <a href="https://github.com/williamorim/brasileirao"
target="_blank">{brasileirao}</a> criado por <a href="https://github.com/williamorim"
target="_blank">William Amorim</a></p>
<p><strong>Perfis digitais:</strong></p>
<p id="profiles">
<a href="https://twitter.com/icarobsc" target="_blank"><span class="glyphs" id="twt"></span></a>
<a href="https://github.com/IcaroBernardes" target="_blank"><span class="glyphs"
id="ghb"></span></a>
<a href="https://www.linkedin.com/in/icarobsc" target="_blank"><span class="glyphs"
id="lkd"></span></a>
</p>
</div>
</div>
</div>
<!-- Define espaço para o conteúdo -->
<div id="container"></div>
</div>
</body>
</html>