-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (71 loc) · 5.17 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
<!doctype html>
<!--
Material Design Lite
Copyright 2015 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Assignment 2</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-pink.min.css" />
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/vega.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/vega-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/vega-embed.min.js"></script>
</head>
<body>
<div id='bg' class="demo-layout mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">
<main class="demo-main mdl-layout__content">
<div class="demo-container mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div id='main' class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<h2 style="text-align:center"><b>The Summer Olympics</b></h3>
<h5 style="text-align:center">FIT3179 Assignment 2</h5>
<h5 style="text-align:center">By Luke Phillips, 32511760</h5><br>
<p class="line-text">
Since 1896, the Summer Olympic Games remains the largest sporting competition in the world. Held every 4 years, the world's best athletes gather to compete for their shot at a prestigious gold medal.
</p>
<h3 style="margin-top:5px;text-align:center"><b>Hosts of the Games</b></h3>
<p class="line-text">
Every Olympics is hosted by a city which undergoes a length bid process. Held over a 2 week span, athletes, coaches, officials and fans gather in the host city for the Games.
</p>
<div style="width:100%;" id="hosts"></div>
<div style='margin-top:20px; width:100%' id="hosts-map"></div>
<h3 style="margin-top:5px;width:100%;text-align:center"><b>Medals</b></h3>
<p class="line-text">The best 3 athletes in each sport for men and women recieve a medal; gold for 1st, silver for 2nd and bronze for 3rd. The United States lead the overall medal count with Australia placing 8th.</p>
<p> Filter by:
<button id='total-btn' class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Total</button>
<button id='gold-btn' style='background-color:#d4a71f' class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Gold</button>
<button id='silver-btn' style='background-color:silver' class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Silver</button>
<button id='bronze-btn' style='background-color:#c96' class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Bronze</button>
</p>
<div style="width:100%;" id="map"></div>
<div style="width:100%;" id="top10"></div>
<p>Note: this include precursor countries (eg. Soviet Union medals are counted in Russia's total).</p>
<h3 style="margin-top:5px;width:100%;text-align:center"><b>Sports</b></h3>
<p class="line-text">There were 33 sports in the latest Summer Olympics <i>Tokyo 2020</i>.</p>
<p class="line-text">Each sport is rated into 6 categories based on their popularity with A being the most popular.</p>
<h3 style="font-size: 1rem;text-align:center;margin-top:0;margin-bottom:0"><b>Olympic sports by IOC Popularity Categories</b></h3>
<div style="width:100%;" id="sports"></div>
</div>
</div>
</main>
</div>
<script src="$$hosted_libs_prefix$$/$$version$$/material.min.js"></script>
<script src="index.js"></script>
</body>
</html>