-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (100 loc) · 5.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
<html>
<head>
<!-- Connects to the font "Comfortaa" of 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">
<!-- Connects to jQuery through their CDN -->
<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>
<!-- Connects to the Bootstrap stylesheet through the 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">
<!-- Connects to the Selectize stylesheet through the 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" />
<!-- Connects to the Selectize through the CDN '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>
<!-- Connects to the page CSS stylesheet -->
<link rel="stylesheet" href="www/main-styles.css">
<!-- Connects to the JS script that creates the global JS variables -->
<script src="www/js/dataset.js"></script>
<!-- Connects to the JS script that creates the Selectize menu and defines its selection effect -->
<script src="www/js/selector.js"></script>
<!-- Connects to the JS script that places the iframes inside #container -->
<script src="www/js/builder.js"></script>
<!-- Connects to the JS script that adjust the font size to fit a given 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 for all content -->
<div id="encompass">
<!-- Defines the sidebar -->
<div id="sidebar">
<!-- Places the page title -->
<div id="title">
<img src="www/PL.svg" />
<div>PREMIER LEAGUE CALENDAR</div>
</div>
<!-- Places an introduction on the league -->
<div id="introduction">
The Premier League started in 1992 as a schism of 22 teams from the English Football League.
Since its inception, it has been the main league of England.
In 1995 the league arrived at its current format with 38 turns and 20 clubs.
</div>
<!-- Places the tag that will receive the menu -->
<select id="menu"></select>
<!-- Places context and acknowledgments -->
<div id="context">
<div id="explanation">
<p>
The <strong>menu</strong> above allows you to <strong>pick</strong> one out of all
<strong>48 teams</strong> that participated in the league at least once since 1995.
</p>
<p>
Once a <strong>team</strong> is picked, a <strong>calendar</strong> of its matches
is shown on the <strong>right</strong>. There are two ways to interact with the calendar
with the mouse:
</p>
</div>
<div class="mouseicons">
<img src="www/mouse_click.png" />
<img src="www/mouse_hover.png" />
<div>Click</div>
<div>Hover</div>
</div>
<div id="authorship">
<p>
Page by <strong>Ícaro Bernardes</strong>. Made with R and HTML+CSS+JS. Commented codes at the
<a href="https://github.com/IcaroBernardes/premier-calendar" target="_blank">repository</a>.
</p>
<p>
Data downloaded from <strong>Kaggle</strong> and scrapped from <strong>Globo Esporte</strong>.
</p>
<p><strong>My digital profiles:</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>
<!-- Defines space for the graphics -->
<div id="container"></div>
</div>
</body>
</html>