-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (168 loc) · 8.3 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
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="./styles/style-1.scss">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="app/assets/javascripts/animate.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="main.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="app/assets/images/other_images/favicon-32x32.png"/>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
<link rel="stylesheet" href="app/assets/javascripts/javascript.js">
<body>
<h1>KB824: Journey of a Legend</h1>
<div id="splash-page"></div>
<div class="header">
<p>Kobe Bryant was one of basketball most endearing superstars of the modern era amassing over 30,000 points, 5 NBA championships, 3 total Most Valuable Player awards (2x Finals, 1x regular season), and even Olympic Gold. He was known for his incredible work ethic and absolute skill and footwork in the game of basketball. More recently, he won an <strong>Academy Award</strong> for <em>Best Animated Short Film</em> with Dear Basketball. KB824 is a web application that will take a look into his illustrious 20 year career with the Los Angeles Lakers.</p>
<div>
<b>UPDATE</b>: On January 26, 2020, a world lost an icon. Kobe was doing what he does best, being a father, and was on his
way taking his beautiful and talented daugther Gianna to a youth game. On the way there, reduced visibility caused the
heliocopter to crash killing all 9 aboard. While my heart is still heavy, I know his memories and teachings will still
endure the test of time. Thank you Kobe for everything you did. Much love. Mamba out 🎤
</div>
</div>
<div class="top-container-main">
<h1>Kobe's Game Log</h1>
<div class="top-blurb">
<p>Below is a scatterplot of every single game that Kobe has ever played in the NBA. Feel free to <strong>hover</strong> over the scatterplots for a blurb on how successful Kobe was that night. <strong>Click</strong> on the nodes to see detailed stats from that night. Finally, press the <strong>buttons</strong> on the right to shift the nodes around.</p>
</div>
<div class="top-display">
<div class="top-container">
<div class="chart1-bttn">
<div class="words">
<p>Display Kobe's career data on:</p>
</div>
<button type="button" class="pts large blue button">Points</button>
<button type="button" class="rebs large blue button">Rebounds</button>
<button type="button" class="asts large blue button">Assists</button>
<button type="button" class="blks large blue button">Blocks</button>
<button type="button" class="stls large blue button">Steals</button>
<button type="button" class="tovs large blue button">Turnovers</button>
<button type="button" class="gmsc large blue button">Efficiency</button>
</div>
<!-- checking -->
</div>
<div width=1000>
<svg width="1000" height="600" ></svg></div>
<div class="chart-two">
<h3>Game Information</h3>
<div class="image-container">
<img class="headshot" src="https://a.espncdn.com/i/headshots/nba/players/full/110.png" alt="">
<img id="oppImg" class="headshot" src="./app/assets/images/other_images/question_mark.gif" />
</div>
<div class="table-container">
<table class="table">
<tr>
<th>Kobe Bryant</th>
<td></td>
</tr>
<tr>
<th align="left">Points</th>
<td id="tb-pts">N/A</td>
<td></td>
<th align="left">FG%</th>
<td id="tb-fg">N/A</td>
</tr>
<tr>
<th align="left">Rebounds</th>
<td id="tb-rebs">N/A</td>
<td></td>
<th align="left">FT%</th>
<td id="tb-ft">N/A</td>
</tr>
<tr>
<th align="left">Assists</th>
<td id="tb-asts">N/A</td>
<td></td>
<th align="left">3P%</th>
<td id="tb-threept">N/A</td>
</tr>
<tr>
<th align="left">Steals</th>
<td id="tb-stls">N/A</td>
</tr>
<tr>
<th align="left">Blocks</th>
<td id="tb-blks">N/A</td>
</tr>
<tr>
<th align="left">Turnovers</th>
<td id="tb-tovs">N/A</td>
</tr>
</table>
</div>
<div class="game-info-text">
<p>Click on the game events in the <strong>scatterplot</strong> shown to the left to get a detailed look
into Kobe's performance from that game</p>
</div>
</div>
</div>
</div>
<div class="bottom-container-main">
<div class="bottom-blurb">
<h1>Conquest Map</h1>
<div class="conquest-blurb">
<p style>Kobe was a modern day <strong>Alexander the Great</strong>, conquering opposing cities like the famed ancient Greek general. Below is the route he took through his twenty year campaign. Join me as we take a trip through memory lane, drawing a path to the eventually city where he has his highest scoring average. Follow the same <strong>path</strong> he took ranging from as far east as <em>New York</em> to the friendly coasts of <em>Los Angeles</em>. You can <strong>click</strong> on the <strong>cities</strong> for more information. <br/><br/> <strong>N.B.</strong> Please note that this is by <strong>team abbreviations</strong> so the <em>Seattle Supersonics</em> are a different squad from the <em>OKC Thunder</em>.</p>
</div>
<div id="conquest-btn-container">
<button type="button" class="large blue button">Begin the Conquest</button>
</div>
</div>
<div class="bottom-container">
<!-- Added more Kobe featuress -->
<div class="chart-3">
<svg class="svg2" width="1000" height="600"></svg>
<div class="chart-two">
<h3>City Info</h3>
<div class="image-container">
<img id="opp2Img" class="headshot3" src="./app/assets/images/Los-Angeles-Lakers-Transparent-Free-PNG.png"/>
<img class="headshot2" src="./app/assets/images/other_images/kobe_dunk.png" alt="">
</div>
<div class="table-container">
<table class="table">
<tr>
<th>Kobe Bryant</th>
<td></td>
</tr>
<tr>
<th align="left">City</th>
<td id="teams-city">N/A</td>
<td></td>
</tr>
<tr>
<th align="left">Team</th>
<td id="teams-name">N/A</td>
</tr>
<tr>
<th align="left">Points</th>
<td id="teams-pts">N/A</td>
</tr>
<tr>
<th align="left">Games</th>
<td id="teams-games">N/A</td>
</tr>
</table>
</div>
<div class="game-info-text">
<p>Click on the cities on the <strong>map</strong> shown to the left to show the points per game Kobe had against each team. </p>
</div>
</div>
</div>
</body>
<footer>
<div class="footer">
<div class="social"><img src="app/assets/images/other_images/info.png"/></div>
<div class="link-stack">
<a href="https://github.com/GreenRabite" target="_blank"><i class="devicon-github-plain-wordmark icon"></i></a>
<a href="http://andy-luo.com/" target="_blank"><i class="devicon-chrome-plain icon"></i></a>
<a href="https://www.linkedin.com/in/andywluo/" target="_blank"><i class="fab fa-linkedin icon"></i></a>
</div>
</div>
</footer>