-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (137 loc) · 12.9 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
<!doctype html>
<html>
<head>
<title>BOT Infographic</title>
<link rel="stylesheet" href="./css/main.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<!-- This loads Neue Haas Grotesk from TypeKit. This is the same element used on the main BOT site. Ahssan created the TypeKit project which generated this URL. If the TypeKit project is modified, this will need to be updated to load the fonts. -->
<link rel="stylesheet" href="https://use.typekit.net/lol4vas.css">
</head>
<body>
<div id="infographic-container">
<div id="background">
<div id="a-look-inside-vch">
<h1>A Look Inside VCH</h1>
<p>2017 - 2018</p>
</div>
<div id="hospital-colour">
<!--
This div shows behind the background-image-container.
Its background-color sets the colour of the hospital.
-->
</div>
<div id="background-image-container">
<img id="image" src="./assets/background.png" alt="background image" />
</div>
<div id="hospital-name-container">
<h3>VCH</h3>
</div>
<div class="info-box" id="surgeries">
<h3 id="surgeries-value">0</h3>
<caption>surgeries</caption>
</div>
<div class="info-box" id="births">
<h3 id="births-value">0</h3>
<caption>births</caption>
</div>
<div class="info-box" id="inpatient-days">
<h3 id="inpatient-days-value">0</h3>
<caption>inpatient days</caption>
</div>
<div class="info-box" id="residential-care-clients">
<h3 id="residential-care-clients-value">0</h3>
<caption>residential care clients</caption>
</div>
<!-- <div class="line home"></div> -->
<div class="home-info">
<div class="info-box" id="home-support-clients">
<h3 id="home-support-clients-value">0</h3>
<caption>home support clients</caption>
</div>
<hr>
<div class="info-box" id="home-support-visits">
<h3 id="home-support-visits-value">0</h3>
<caption>home support<br />visits</caption>
</div>
<hr id="home-support-visits-hr">
<div class="info-box" id="home-care-nursing-visits">
<h3 id="home-care-nursing-visits-value">0</h3>
<caption>home care<br>nursing visits</caption>
</div>
<hr>
<div class="info-box" id="home-care-rehab-visits">
<h3 id="home-care-rehab-visits-value">0</h3>
<caption>home care rehab visits</caption>
</div>
</div>
<div class="info-box" id="psychiatric-unit-admissions">
<h3 id="psychiatric-unit-admissions-value">0</h3>
<caption>mental health<br>inpatient visits</caption>
</div>
<div class="info-box" id="emergency-department-visits">
<h3 id="emergency-department-visits-value">0</h3>
<caption>emergency department visits</caption>
</div>
<!-- smoke svgs -->
<svg id="svg-smoke-1" class="svg-smoke" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103.19 75.22">
<path d="M2.06,20.87a7.12,7.12,0,0,0,1.47,6.75,12.81,12.81,0,0,0-3,5A12.93,12.93,0,0,0,3.37,44.84c2.38,2.63,7.06,4.5,10.57,3.5a7.82,7.82,0,0,0,3.38-1.94,15.8,15.8,0,0,0,3.5,2.67A15.53,15.53,0,0,0,32,50.51a13.94,13.94,0,0,0,9-6.94c.13-.25.25-.51.38-.77a9.37,9.37,0,0,0,3.51.44,9.14,9.14,0,0,0,4.08-1.31,12.77,12.77,0,0,0,9.29,3.38,12.06,12.06,0,0,0,9.34-4.46c.06-.07.11-.16.17-.24a5.7,5.7,0,0,0,3.63,3.54l.12,0a7.55,7.55,0,0,0,.73,4.6c1.87,4.14,7,5.54,11.16,5,4.86-.62,8-4.21,8.89-8.89a.43.43,0,0,1,0,0,14.31,14.31,0,0,0,2.16-.26,10.37,10.37,0,0,0,7.9-6.39A10.27,10.27,0,0,0,100.51,27l-.18-.18a4.66,4.66,0,0,0,1.61-4.55,5.48,5.48,0,0,0-1.12-2.4,11.92,11.92,0,0,0,.63-5,6,6,0,0,0-.6-2.39,8.4,8.4,0,0,0-.23-.93,5.38,5.38,0,0,0-2.5-3C97,7.89,95.94,6.9,94.58,6.78c-2.22-.19-5.7.08-7.13,2.09L87.36,9a12.51,12.51,0,0,0-4.53-1.43A4.74,4.74,0,0,0,79,8.71a5.42,5.42,0,0,0-.26-.48A17.81,17.81,0,0,0,68.58.74a15.52,15.52,0,0,0-11.33.72,11,11,0,0,0-2.8,2,12.34,12.34,0,0,0-5.57-1.53,12.51,12.51,0,0,0-8.27,3.18,6.34,6.34,0,0,0-1,1.13,22.7,22.7,0,0,0-5.05-1.48,20.64,20.64,0,0,0-6.31-.51c-3.88.41-7.83,1.47-10.39,4.6a8.88,8.88,0,0,0-1.94,5.26,21.26,21.26,0,0,0-2.53-.07C9,14.22,3.64,16.53,2.06,20.87Z" />
<path d="M38.14,57.09A5.14,5.14,0,0,0,41,60.81c2.9,1.38,6.16-1.94,4.8-4.74C44.23,52.91,37.62,52.61,38.14,57.09Z" />
<path d="M52.53,54.73A2.68,2.68,0,0,0,54,56.65a1.88,1.88,0,0,0,2.47-2.44C55.67,52.58,52.26,52.42,52.53,54.73Z" />
<path d="M42.82,72.22A3.83,3.83,0,0,0,44.89,75a2.72,2.72,0,0,0,3.56-3.52C47.33,69.13,42.43,68.91,42.82,72.22Z" />
<path d="M12.17,30.5a.8.8,0,0,1-.13.7A.56.56,0,0,0,12.17,30.5Z" />
</svg>
<svg id="svg-smoke-2" class="svg-smoke" dxmlns="http://www.w3.org/2000/svg" viewBox="0 0 103.19 75.22">
<path d="M2.06,20.87a7.12,7.12,0,0,0,1.47,6.75,12.81,12.81,0,0,0-3,5A12.93,12.93,0,0,0,3.37,44.84c2.38,2.63,7.06,4.5,10.57,3.5a7.82,7.82,0,0,0,3.38-1.94,15.8,15.8,0,0,0,3.5,2.67A15.53,15.53,0,0,0,32,50.51a13.94,13.94,0,0,0,9-6.94c.13-.25.25-.51.38-.77a9.37,9.37,0,0,0,3.51.44,9.14,9.14,0,0,0,4.08-1.31,12.77,12.77,0,0,0,9.29,3.38,12.06,12.06,0,0,0,9.34-4.46c.06-.07.11-.16.17-.24a5.7,5.7,0,0,0,3.63,3.54l.12,0a7.55,7.55,0,0,0,.73,4.6c1.87,4.14,7,5.54,11.16,5,4.86-.62,8-4.21,8.89-8.89a.43.43,0,0,1,0,0,14.31,14.31,0,0,0,2.16-.26,10.37,10.37,0,0,0,7.9-6.39A10.27,10.27,0,0,0,100.51,27l-.18-.18a4.66,4.66,0,0,0,1.61-4.55,5.48,5.48,0,0,0-1.12-2.4,11.92,11.92,0,0,0,.63-5,6,6,0,0,0-.6-2.39,8.4,8.4,0,0,0-.23-.93,5.38,5.38,0,0,0-2.5-3C97,7.89,95.94,6.9,94.58,6.78c-2.22-.19-5.7.08-7.13,2.09L87.36,9a12.51,12.51,0,0,0-4.53-1.43A4.74,4.74,0,0,0,79,8.71a5.42,5.42,0,0,0-.26-.48A17.81,17.81,0,0,0,68.58.74a15.52,15.52,0,0,0-11.33.72,11,11,0,0,0-2.8,2,12.34,12.34,0,0,0-5.57-1.53,12.51,12.51,0,0,0-8.27,3.18,6.34,6.34,0,0,0-1,1.13,22.7,22.7,0,0,0-5.05-1.48,20.64,20.64,0,0,0-6.31-.51c-3.88.41-7.83,1.47-10.39,4.6a8.88,8.88,0,0,0-1.94,5.26,21.26,21.26,0,0,0-2.53-.07C9,14.22,3.64,16.53,2.06,20.87Z" />
<path d="M38.14,57.09A5.14,5.14,0,0,0,41,60.81c2.9,1.38,6.16-1.94,4.8-4.74C44.23,52.91,37.62,52.61,38.14,57.09Z" />
<path d="M52.53,54.73A2.68,2.68,0,0,0,54,56.65a1.88,1.88,0,0,0,2.47-2.44C55.67,52.58,52.26,52.42,52.53,54.73Z" />
<path d="M42.82,72.22A3.83,3.83,0,0,0,44.89,75a2.72,2.72,0,0,0,3.56-3.52C47.33,69.13,42.43,68.91,42.82,72.22Z" />
<path d="M12.17,30.5a.8.8,0,0,1-.13.7A.56.56,0,0,0,12.17,30.5Z" />
</svg>
<svg id="svg-smoke-3" class="svg-smoke" dxmlns="http://www.w3.org/2000/svg" viewBox="0 0 103.19 75.22">
<path d="M2.06,20.87a7.12,7.12,0,0,0,1.47,6.75,12.81,12.81,0,0,0-3,5A12.93,12.93,0,0,0,3.37,44.84c2.38,2.63,7.06,4.5,10.57,3.5a7.82,7.82,0,0,0,3.38-1.94,15.8,15.8,0,0,0,3.5,2.67A15.53,15.53,0,0,0,32,50.51a13.94,13.94,0,0,0,9-6.94c.13-.25.25-.51.38-.77a9.37,9.37,0,0,0,3.51.44,9.14,9.14,0,0,0,4.08-1.31,12.77,12.77,0,0,0,9.29,3.38,12.06,12.06,0,0,0,9.34-4.46c.06-.07.11-.16.17-.24a5.7,5.7,0,0,0,3.63,3.54l.12,0a7.55,7.55,0,0,0,.73,4.6c1.87,4.14,7,5.54,11.16,5,4.86-.62,8-4.21,8.89-8.89a.43.43,0,0,1,0,0,14.31,14.31,0,0,0,2.16-.26,10.37,10.37,0,0,0,7.9-6.39A10.27,10.27,0,0,0,100.51,27l-.18-.18a4.66,4.66,0,0,0,1.61-4.55,5.48,5.48,0,0,0-1.12-2.4,11.92,11.92,0,0,0,.63-5,6,6,0,0,0-.6-2.39,8.4,8.4,0,0,0-.23-.93,5.38,5.38,0,0,0-2.5-3C97,7.89,95.94,6.9,94.58,6.78c-2.22-.19-5.7.08-7.13,2.09L87.36,9a12.51,12.51,0,0,0-4.53-1.43A4.74,4.74,0,0,0,79,8.71a5.42,5.42,0,0,0-.26-.48A17.81,17.81,0,0,0,68.58.74a15.52,15.52,0,0,0-11.33.72,11,11,0,0,0-2.8,2,12.34,12.34,0,0,0-5.57-1.53,12.51,12.51,0,0,0-8.27,3.18,6.34,6.34,0,0,0-1,1.13,22.7,22.7,0,0,0-5.05-1.48,20.64,20.64,0,0,0-6.31-.51c-3.88.41-7.83,1.47-10.39,4.6a8.88,8.88,0,0,0-1.94,5.26,21.26,21.26,0,0,0-2.53-.07C9,14.22,3.64,16.53,2.06,20.87Z" />
<path d="M38.14,57.09A5.14,5.14,0,0,0,41,60.81c2.9,1.38,6.16-1.94,4.8-4.74C44.23,52.91,37.62,52.61,38.14,57.09Z" />
<path d="M52.53,54.73A2.68,2.68,0,0,0,54,56.65a1.88,1.88,0,0,0,2.47-2.44C55.67,52.58,52.26,52.42,52.53,54.73Z" />
<path d="M42.82,72.22A3.83,3.83,0,0,0,44.89,75a2.72,2.72,0,0,0,3.56-3.52C47.33,69.13,42.43,68.91,42.82,72.22Z" />
<path d="M12.17,30.5a.8.8,0,0,1-.13.7A.56.56,0,0,0,12.17,30.5Z" />
</svg>
<svg id="svg-smoke-4" class="svg-smoke" dxmlns="http://www.w3.org/2000/svg" viewBox="0 0 103.19 75.22">
<path d="M2.06,20.87a7.12,7.12,0,0,0,1.47,6.75,12.81,12.81,0,0,0-3,5A12.93,12.93,0,0,0,3.37,44.84c2.38,2.63,7.06,4.5,10.57,3.5a7.82,7.82,0,0,0,3.38-1.94,15.8,15.8,0,0,0,3.5,2.67A15.53,15.53,0,0,0,32,50.51a13.94,13.94,0,0,0,9-6.94c.13-.25.25-.51.38-.77a9.37,9.37,0,0,0,3.51.44,9.14,9.14,0,0,0,4.08-1.31,12.77,12.77,0,0,0,9.29,3.38,12.06,12.06,0,0,0,9.34-4.46c.06-.07.11-.16.17-.24a5.7,5.7,0,0,0,3.63,3.54l.12,0a7.55,7.55,0,0,0,.73,4.6c1.87,4.14,7,5.54,11.16,5,4.86-.62,8-4.21,8.89-8.89a.43.43,0,0,1,0,0,14.31,14.31,0,0,0,2.16-.26,10.37,10.37,0,0,0,7.9-6.39A10.27,10.27,0,0,0,100.51,27l-.18-.18a4.66,4.66,0,0,0,1.61-4.55,5.48,5.48,0,0,0-1.12-2.4,11.92,11.92,0,0,0,.63-5,6,6,0,0,0-.6-2.39,8.4,8.4,0,0,0-.23-.93,5.38,5.38,0,0,0-2.5-3C97,7.89,95.94,6.9,94.58,6.78c-2.22-.19-5.7.08-7.13,2.09L87.36,9a12.51,12.51,0,0,0-4.53-1.43A4.74,4.74,0,0,0,79,8.71a5.42,5.42,0,0,0-.26-.48A17.81,17.81,0,0,0,68.58.74a15.52,15.52,0,0,0-11.33.72,11,11,0,0,0-2.8,2,12.34,12.34,0,0,0-5.57-1.53,12.51,12.51,0,0,0-8.27,3.18,6.34,6.34,0,0,0-1,1.13,22.7,22.7,0,0,0-5.05-1.48,20.64,20.64,0,0,0-6.31-.51c-3.88.41-7.83,1.47-10.39,4.6a8.88,8.88,0,0,0-1.94,5.26,21.26,21.26,0,0,0-2.53-.07C9,14.22,3.64,16.53,2.06,20.87Z" />
<path d="M38.14,57.09A5.14,5.14,0,0,0,41,60.81c2.9,1.38,6.16-1.94,4.8-4.74C44.23,52.91,37.62,52.61,38.14,57.09Z" />
<path d="M52.53,54.73A2.68,2.68,0,0,0,54,56.65a1.88,1.88,0,0,0,2.47-2.44C55.67,52.58,52.26,52.42,52.53,54.73Z" />
<path d="M42.82,72.22A3.83,3.83,0,0,0,44.89,75a2.72,2.72,0,0,0,3.56-3.52C47.33,69.13,42.43,68.91,42.82,72.22Z" />
<path d="M12.17,30.5a.8.8,0,0,1-.13.7A.56.56,0,0,0,12.17,30.5Z" />
</svg>
<svg id="svg-smoke-5" class="svg-smoke" dxmlns="http://www.w3.org/2000/svg" viewBox="0 0 103.19 75.22">
<path d="M2.06,20.87a7.12,7.12,0,0,0,1.47,6.75,12.81,12.81,0,0,0-3,5A12.93,12.93,0,0,0,3.37,44.84c2.38,2.63,7.06,4.5,10.57,3.5a7.82,7.82,0,0,0,3.38-1.94,15.8,15.8,0,0,0,3.5,2.67A15.53,15.53,0,0,0,32,50.51a13.94,13.94,0,0,0,9-6.94c.13-.25.25-.51.38-.77a9.37,9.37,0,0,0,3.51.44,9.14,9.14,0,0,0,4.08-1.31,12.77,12.77,0,0,0,9.29,3.38,12.06,12.06,0,0,0,9.34-4.46c.06-.07.11-.16.17-.24a5.7,5.7,0,0,0,3.63,3.54l.12,0a7.55,7.55,0,0,0,.73,4.6c1.87,4.14,7,5.54,11.16,5,4.86-.62,8-4.21,8.89-8.89a.43.43,0,0,1,0,0,14.31,14.31,0,0,0,2.16-.26,10.37,10.37,0,0,0,7.9-6.39A10.27,10.27,0,0,0,100.51,27l-.18-.18a4.66,4.66,0,0,0,1.61-4.55,5.48,5.48,0,0,0-1.12-2.4,11.92,11.92,0,0,0,.63-5,6,6,0,0,0-.6-2.39,8.4,8.4,0,0,0-.23-.93,5.38,5.38,0,0,0-2.5-3C97,7.89,95.94,6.9,94.58,6.78c-2.22-.19-5.7.08-7.13,2.09L87.36,9a12.51,12.51,0,0,0-4.53-1.43A4.74,4.74,0,0,0,79,8.71a5.42,5.42,0,0,0-.26-.48A17.81,17.81,0,0,0,68.58.74a15.52,15.52,0,0,0-11.33.72,11,11,0,0,0-2.8,2,12.34,12.34,0,0,0-5.57-1.53,12.51,12.51,0,0,0-8.27,3.18,6.34,6.34,0,0,0-1,1.13,22.7,22.7,0,0,0-5.05-1.48,20.64,20.64,0,0,0-6.31-.51c-3.88.41-7.83,1.47-10.39,4.6a8.88,8.88,0,0,0-1.94,5.26,21.26,21.26,0,0,0-2.53-.07C9,14.22,3.64,16.53,2.06,20.87Z" />
<path d="M38.14,57.09A5.14,5.14,0,0,0,41,60.81c2.9,1.38,6.16-1.94,4.8-4.74C44.23,52.91,37.62,52.61,38.14,57.09Z" />
<path d="M52.53,54.73A2.68,2.68,0,0,0,54,56.65a1.88,1.88,0,0,0,2.47-2.44C55.67,52.58,52.26,52.42,52.53,54.73Z" />
<path d="M42.82,72.22A3.83,3.83,0,0,0,44.89,75a2.72,2.72,0,0,0,3.56-3.52C47.33,69.13,42.43,68.91,42.82,72.22Z" />
<path d="M12.17,30.5a.8.8,0,0,1-.13.7A.56.56,0,0,0,12.17,30.5Z" />
</svg>
<img id="water-splash" src="./assets/water-splash-1.svg" alt="water splashing" />
<img id="helicopter" src="./assets/helicopter.svg" alt="helicopter" />
</div>
<div id="menu" class="show">
<div class="menu-header">
<img id="icon-pin" src="./assets/pin.svg" alt="Map pin" />
<h3>Location</h3>
<img id="icon-plus" src="./assets/plus.svg" alt="expand menu" />
</div>
<hr />
<ul id="site-buttons">
<li class="site-button" data-site="all">ALL</li>
<li class="site-button" data-site="vancouver">VANCOUVER</li>
<li class="site-button" data-site="richmond">RICHMOND</li>
<li class="site-button" data-site="coastal">COASTAL</li>
<li class="site-button" data-site="north-vancouver">NORTH VANCOUVER</li>
<li class="site-button" data-site="squamish">SQUAMISH</li>
<li class="site-button" data-site="powell-river">POWELL RIVER</li>
<li class="site-button" data-site="sechelt">SECHELT</li>
<li class="site-button" data-site="whistler-pemberton">WHISTLER & PEMBERTON</li>
</ul>
</div>
</div>
<script data-main="./js/main" src="./js/require.js"></script>
</body>
</html>