-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (144 loc) · 8.26 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Days Behind USA · COVID-19</title>
<meta name="description" content="Number of days various countries are behind USA in total COVID-19 cases assuming similar case growth rate">
<!-- OG -->
<meta property="og:title" content="Days Behind USA · COVID-19"/>
<meta property="og:site_name" content="#daysbehindusa"/>
<meta property="og:type" content="data.visualize"/>
<meta property="og:url" content="https://daysbehindusa.com"/>
<meta property="og:image" content="https://i.imgur.com/EjrNMxL.png"/>
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="fav/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="fav/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav/favicon-16x16.png">
<link rel="manifest" href="fav/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="fav/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/mobile.css">
<!-- JS -->
<script type="text/javascript" src="js/packages/jquery.min.js"></script>
<script type="text/javascript" src="js/packages/moment.min.js"></script>
<script type="text/javascript" src="./js/data.js"></script>
<script type="text/javascript" src="./js/render.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
<div class="center-wrapper">
<!---------------->
<!-- LEFT PANEL -->
<!---------------->
<div class="controls-wrapper">
<div class="header">
<h1>#daysbehindusa</h1>
<!------------------------->
<!-- Product Hunt Banner -->
<!------------------------->
<a href="https://www.producthunt.com/posts/days-behind-italy-covid-19?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-days-behind-italy-covid-19"
target="_blank"><img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=189202&theme=light"
alt="Days Behind Italy: COVID-19 - Number of days behind Italy in total COVID-19 cases | Product Hunt Embed"
style="width: 250px; height: 54px;" width="250px" height="54px"/></a>
<p style="margin-top: 25px;">Number of days various countries are behind USA in total COVID-19 cases assuming similar case growth rate</p>
<p>Based on data from <a href="https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6" target="_blank">2019 Novel Coronavirus COVID-19 (2019-nCoV) Data
Repository by Johns Hopkins CSSE</a></p>
</div>
<div class="slide-container">
<label for="starting-range" id="starting-range-title">Starting USA Case Number</label>
<div id="amount_slider"></div>
<input type="range" min="100" max="30000" value="6000" class="slider" id="starting-range" name="starting" step="100">
<p id="starting-range-label">-</p>
</div>
<div class="toggle-wrapper">
<p>Display Deaths and Recoveries</p>
<label class="toggle">
<input type="checkbox" id="expand"/>
<span class="toggle-slider"></span>
</label>
</div>
<div class="toggle-wrapper">
<p>Population Weighted</p>
<label class="toggle">
<input type="checkbox" id="weighted"/>
<span class="toggle-slider"></span>
</label>
</div>
<div id="filter-btn">
<p>Filter</p>
<img src="./img/misc/filter.svg" alt="Filter Icon">
</div>
<div id="summary-wrapper"></div>
</div>
<!---------------->
<!-- BODY PANEL -->
<!---------------->
<div id="body"></div>
<!------------------>
<!-- FILTER PANEL -->
<!------------------>
<div id="filter-bg"></div>
<div id="filter"></div>
<!----------------->
<!-- RIGHT PANEL -->
<!----------------->
<div id="twitter-wrapper">
<div id="tweet-hashtag-wrapper">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large"
data-text="Number of days various countries are behind USA in total COVID-19 cases assuming similar case growth rate"
data-url="https://daysbehindusa.com/" data-hashtags="daysbehindusa" data-show-count="true">Share</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="footer">
<div class="info-wrapper">
<p>Created by <a href="https://twitter.com/ndyf" target="_blank">Andy Feng</a><br>Made with ♥ in Los
Angeles, CA</p>
<p>⬩</p>
<p>Powered by data published by <a href="https://github.com/CSSEGISandData/COVID-19" target="_blank">Johns Hopkins University, CSSE</a></p>
<p>API endpoint by <a href="https://github.com/pomber/covid19" target="_blank">github.com/pomber/covid19</a></p>
<p>Population data via <a href="https://www.worldometers.info/population/" target="_blank">Worldometer</a></p>
<p>⬩</p>
<p>Inspired by the following Tweets:</p>
</div>
</div>
<div id="tweet-embeds">
<blockquote class="twitter-tweet" data-theme="dark"><p lang="en" dir="ltr">1/ <a
href="https://twitter.com/hashtag/CoVID_19?src=hash&ref_src=twsrc%5Etfw">#CoVID_19</a> Update
12th March. Confirmed cases in European countries still following 9-14 days behind Italy. Italy, France
and perhaps Germany have reduced their increase rate to ~22% per day. The rest are still on 30%+ <a
href="https://t.co/nbGhNvanKK">pic.twitter.com/nbGhNvanKK</a></p>— Mark Handley
(@MarkJHandley) <a
href="https://twitter.com/MarkJHandley/status/1238275488210173956?ref_src=twsrc%5Etfw">March 13,
2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-theme="dark"><p lang="en" dir="ltr">As of today, the U.S. COVID-19
outbreak is 10 days behind Italy. Spain is 7 days behind, Germany is 8.<br><br>With the tool <a
href="https://twitter.com/zachlatta?ref_src=twsrc%5Etfw">@zachlatta</a> & I built this
weekend <a href="https://twitter.com/hackclub?ref_src=twsrc%5Etfw">@hackclub</a>, you can predict the
outbreak by country. Updated daily. 🦠<a href="https://t.co/9WvRT8R1UB">https://t.co/9WvRT8R1UB</a></p>—
Lachlan Campbell (@lachlanjc) <a
href="https://twitter.com/lachlanjc/status/1240299654039904257?ref_src=twsrc%5Etfw">March 18,
2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
</body>
</html>