-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.html
504 lines (471 loc) · 25 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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>CoVizu</title>
<meta name="description"
content="CoVizu: Real-time analysis and visualization of the global diversity of SARS-CoV-2 genomes.">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/driver.min.css">
<script src="js/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="js/d3.js"></script>
<script src="js/d3-scale.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/d3-save-svg.min.js"></script>
<script src="js/driver.min.js"></script>
</head>
<body>
<script>
/*
Language translations for text in other files.
Change this for every index-lang.html
Note: we cannot display HTML in title attribute, i.e., é will not render.
*/
var i18n_text = {
// time-tree legend titles
region_legend: {
"Africa": "Africa", // English -> lang
"Asia": "Asia",
"China": "China",
"Europe": "Europe",
"North America": "North America",
"Oceania": "Oceania",
"South America": "South America"
},
sample_legend: "Sample size (log10)",
coldate_legend: "Last collection date",
diverge_legend: "Divergence (strict molecular clock)",
infections_legend: "Predicted infections (log10, increasing)",
infections_tooltip: "Predicted infections",
total: "Total",
sampled: "Sampled",
displayed: "Displayed",
dsc_infections: "Decreasing infections",
null_infections: "N/A",
// side bar data statistics
last_update: "Last update",
number_genomes: "Number of genomes",
number_lineages: "Number of lineages",
number_cases: "Number of cases",
region: "Region",
countries: "Countries",
samples: "Samples",
// tooltips
tip_diffs: "Mean diffs from root",
tip_residual: "Deviation from clock",
tip_cases: "Number of cases",
tip_varcount: "Number of variants",
tip_coldates: "Collection dates",
tip_mutations: "Mutations",
vedge_parent: "Parent",
vedge_child: "Child",
vedge_distance: "Genomic distance",
vedge_support: "Support",
vedge_coldate: "Collection date",
hedge_unique_dates: "Unique collection dates",
hedge_coldates: "Collection dates (displayed)",
sample_orig_lab: "Originating lab",
sample_subm_lab: "Submitting lab",
sample_authors: "Authors",
// walkthrough tour
tour_tree_title: "Phylogenetic Tree",
tour_tree_desc: "This is a time-scaled phylogenetic tree summarizing the common ancestry of different SARS-CoV-2 lineages.",
tour_lin_title: "Lineages",
tour_lin_desc: "For each lineage, we draw a rectangle to represent the range of sample collection dates. To explore the samples within a lineage, click on the rectangle to retrieve the associated beadplot.",
tour_legend_title: "Colouring the Tree",
tour_legend_desc: "Right now, the tree is coloured by divergence. Browse through the drop-down to explore other options.",
tour_beadplot_title: "Beadplot",
tour_beadplot_desc: "We use beadplots to visualize the different variants of SARS-CoV-2 within a lineage, where and when they have been sampled, and how they are related to each other.",
tour_bead_title: "Beads",
tour_bead_desc: "Beads indicate when that variant was sampled. The area of the bead is scaled in proportion to the number of times the variant was sampled that day. Colours represent the most common geographic region of the samples.",
tour_variant_title: "Variants",
tour_variant_desc: "Each horizontal line segment represents a variant – viruses with identical genomes. If there are no beads on the line and it is grey, then it is an unsampled variant: two or more sampled variants descend from an ancestral variant that has not been directly observed.",
tour_search_title: "Search Bar",
tour_search_desc: 'You can use the text box to find a specific sample within a specified date range. Use the "Previous" and "Next" buttons to iterate through your search results, and the "Clear" button to reset the search interface.',
tour_tables_title: "Summary Tables",
tour_tables_desc: "Toggle through the different tabs to see a summary of the countries, samples and mutations of a particular beadplot or bead.",
tour_end_title: "That's it!",
tour_end_desc: `Click back here if you ever want to revisit the quick tour. For more help, you can also click on the
<a style="text-decoration: none;" href="https://en.wikipedia.org/wiki/Shoshinsha_mark" target="_new">
🔰</a>icons.`,
next_bttn: 'Next',
previous_bttn: 'Previous',
close_bttn: 'Close',
done_bttn: 'Done',
// miscellaneous
okay: "Okay!",
got_it: "Got it!",
tour: "Quick Tour",
loading: `Loading. Please Wait...`,
loading_json: "Loading JSON data from server (~10s)...",
country_theaders: ["Region", "Country", "Count"],
sample_theaders: ["Accession", "Name", "Date"],
mutation_threaders: ["Mutation", "Frequency", "Phenotype"],
phenotypes: {
'Vaccine neutralization efficacy': 'Vaccine neutralization efficacy', //English -> translated
'Anthropozoonotic events': 'Anthropozoonotic events',
'Gene expression increase': 'Gene expression increase',
'ACE2 receptor binding affinity': 'ACE2 receptor binding affinity',
'Monoclonal antibody serial passage escape': 'Monoclonal antibody serial passage escape',
'Convalescent plasma escape': 'Convalescent plasma escape',
'Antibody epitope effects': 'Antibody epitope effects'
}
};
</script>
<div class="tooltip" id="tooltipContainer"></div>
<div class="modal">
<div class="modal-content">
<h2 class="modal-title">Search Error</h2>
<div class="modal-text"></div>
<a class="closeBtn" href="javascript:void(0)">x</a>
</div>
</div>
<div class="app">
<div class="app-left">
<div class="bar" style="top: 10px; left: 10px; z-index:10" >
<!-- <span style="display: inline-block; width: 250px; vertical-align: top"> -->
<div class="legend-container">
<label for="select-tree-colours">Colour tree by:</label>
<select name="tree-colours" id="select-tree-colours">
<option value="Region">Region</option>
<option value="No. samples">No. samples</option>
<option value="Collection date">Collection date</option>
<option value="Divergence">Divergence</option>
<option value="Infections" selected>Infections</option>
</select>
<div class="legend" id="div-region-legend"></div>
<div class="legend" id="svg-sample-legend"></div>
<div class="legend" id="svg-coldate-legend"></div>
<div class="legend" id="svg-diverge-legend"></div>
<div class="legend" id="svg-infections-legend"></div>
</div>
<!-- </span> -->
<!-- <span style="display: inline-block; vertical-align: top"> -->
<div class="search-bar-container">
<div id="search-bar">
<input type="search" id="search-input"
placeholder="e.g., B.1.351 or EPI_ISL_434070 or Canada">
<input id="start-date" class="dates"
placeholder="Start">
to
<input id="end-date" class="dates"
placeholder="End">
<span onclick="$('#help-search').dialog('open');" style="cursor: help">🔰</span>
</div>
<br/>
<div id="navigation" style="padding-top: 5px">
<button type="button" id="search-button">Search</button>
<button type="button" id="clear_button">Clear</button>
<button type="button" id="previous_button">Previous</button>
<button type="button" id="next_button">Next</button>
<div id="search_stats">
<span id="curr_hit">0</span>
<span>of</span>
<span id="tot_hits">0</span>
<span>points</span>
</div>
</div>
<div style="padding-top: 5px;">
<img id="loading" src="img/Loading_icon_cropped.gif"/>
<span id="loading_text"></span>
<span id="error_message"></span>
</div>
</div>
<!-- </span> -->
</div>
<div class="tree-beadplot">
<div id="tree-vscroll">
<div id="tree-inner-vscroll"></div>
</div>
<div class="leftbox" id="leftbox">
<div class="floattitle" id="tree-title">
<div>
Time-scaled tree
<span class="clicker" id="nwk-button" title="Download time-scaled tree" onclick="save_timetree()">
NWK
</span>
<div class="clicker" title="Download lineage statistics as CSV" onclick="export_csv();"> CSV </div>
<span title="Timetree help" onclick="$('#help-timetree').dialog('open');" style="cursor: help">🔰</span>
</div>
<div>
<label for="display-tree">Display:</label>
<select name="display-tree" id="display-tree">
<option value="Non-Recombinants" selected="selected">Non-Recombinants</option>
<option value="XBB Lineages">XBB Lineages</option>
<option value="Other Recombinants">Other Recombinants</option>
</select>
</div>
</div>
<div id="tree-cutoff" style="position: relative;">
<div id="cutoff-date"></div>
<img id="loading-tree" src="img/Loading_icon_cropped.gif"/>
</div>
<div class="floattile" id="tree-slider">
<div id="tree-slider-handle" class="ui-slider-handle"></div>
</div>
<div id="cutoff-line" style="visibility: hidden"></div>
<div id="tree-axis">
<div class="floattitle" id="svg-timetreeaxis" style="top: 58px; z-index: 13"></div>
<div class="tree-container">
<div class="tree-content" id="svg-timetree" style="width: 250px; max-width: 250px;">
</div>
</div>
</div>
</div>
<div class="middlebox">
<div class="floattitle" id="beadplot-title">
<div>Beadplot</div>
<div class="clicker" id="beadplot-nwk" title="Download beadplot as tree" onclick="save_beadplot();"> NWK </div>
<div class="clicker" title="Save beadplot as SVG" onclick="export_svg();"> SVG </div>
<div title="Beadplot help" onclick="$('#help-beadplot').dialog('open');" style="cursor: help">🔰</div>
<div class="edge-cuttoff">
<label style="vertical-align: middle;" for="vedge-slider">Edge cutoff: </label>
<div id="left-arrow" class="arrow">
<div style="transform: translateY(-25%);" class="larrow">‹</div>
</div>
<div id="vedge-slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
<div id="right-arrow" class="arrow">
<div style="transform: translateY(-25%);" class="rarrow">›</div>
</div>
</div>
<label class="expand" style="vertical-align: middle;"> Expand: </label>
<label class="switch">
<input type="checkbox" id="expand-option">
<span class="slider round"></span>
</label>
</div>
<div id="beadplot-container">
<div class="floattitle" id="svg-clusteraxis" style="top: 58px; z-index: 14"></div>
<div id="beadplot-hscroll">
<div id="inner-hscroll"></div>
</div>
<div class="beadplot-content" id="svg-cluster"></div>
</div>
</div>
<div id="beadplot-vscroll">
<div id="inner-vscroll"></div>
</div>
</div>
</div>
<div class="app-right">
<div>
<div style="top: 0; right: 0; z-index: 10; width: 270px">
<a href="https://github.com/PoonLab/covizu" target=“_new” class="github-corner" aria-label="View source on GitHub">
<!-- https://github.com/tholman/github-corners -->
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0; z-index: 21" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
</div>
<div class="rightbox">
<div class="sticky">
<div style="padding-top: 10px; cursor: help;">
<h1><span id="intro" onclick="$('#splash').dialog('open');">CoVizu</span></h1>
</div>
<div style="font-size: 8pt;">
<a href="index.html">en</a>
<a href="index-es.html">es</a>
<a href="index-fr.html">fr</a>
<a href="index-zh.html">zh</a>
</div>
<div style="padding-top: 10px; padding-right: 6px;">
<h3>Near real-time visualization of SARS-CoV-2 (hCoV-19) genomic variation</h3>
</div>
<span style="width: 250px">
<div class="gisaid">Enabled by data from <a href="https://gisaid.org" target="_new">
<img src="https://www.gisaid.org/fileadmin/gisaid/img/schild.png"
height="24px"/>
</a>
</div>
</span>
</div>
<p>
<div style="font-size: 0.9em;" id="div-last-update"></div>
<div style="font-size: 0.9em;" id="div-number-genomes"></div>
<div style="font-size: 0.9em;" id="div-number-lineages"></div>
</p>
<div id="tabs">
<ul>
<li style="font-size: 0.8em"><a href="#tabs-1">Countries</a></li>
<li style="font-size: 0.8em"><a href="#tabs-2">Samples</a></li>
<li style="font-size: 0.8em"><a href="#tabs-3">Mutations</a></li>
</ul>
<div id="tabs-1">
<div class="breaker" id="barplot"></div>
<div style="overflow-y: auto; overflow-x: hidden; max-height: 200px" id="country-table"></div>
</div>
<div id="tabs-2">
<div id="seqtable-hint" class="hint">
Hover over accession (EPI_ISL_#) to display laboratory and author info.
</div>
<div style="overflow-y: auto; overflow-x: hidden; max-height: 200px" id="seq-table"></div>
</div>
<div id="tabs-3">
<div id="muttable-hint" class="hint">
Phenotype annotations retrieved from <a href="https://github.com/nodrogluap/pokay">Pokay</a>,
curated by <a href="https://people.ucalgary.ca/~gordonp/">Paul Gordon</a> and his team.
<br/>
<div class="clicker" title="Download mutation frequencies as CSV" onclick="export_muttable();"> CSV </div>
</div>
<div style="overflow-y: auto; overflow-x: hidden; max-height: 200px" id="mut-table"></div>
<table id="muttable-legend" class="legend"></table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="splash" title="Welcome">
<p>
<b>CoVizu</b> is an <a href="https://github.com/PoonLab/CoVizu" target="_new">open source project</a>
endeavouring to visualize the global diversity of SARS-CoV-2 genomes, which are provided by
the <a href="https://gisaid.org" target="_new">GISAID Initiative</a>.
</p>
<p>
This web page provides two interactive visualizations of these data.
On the left, it displays a <a href="https://en.wikipedia.org/wiki/Phylogenetic_tree" target="_new">
phylogenetic tree</a> summarizing the evolutionary relationships among different
<a href="https://cov-lineages.org" target="_new">SARS-CoV-2 lineages</a> (groupings of viruses with
similar genomes, useful for linking outbreaks in different places; <a href="https://www.nature.com/articles/s41564-020-0770-5" target="_new">Rambaut
<i>et al.</i> 2020</a>).
You can navigate between different lineages by clicking on their respective boxes.
</p>
<p>
Selecting a lineage displays a "beadplot" visualization in the centre of the page.
Each horizontal line represents one or more samples of SARS-CoV-2 that share the same genome
sequence.
Beads along the line represent the dates that this variant was sampled.
</p>
<p>
For more help, click on the
<a style="text-decoration: none;" href="https://en.wikipedia.org/wiki/Shoshinsha_mark" target="_new">
🔰</a>icons or have a look at the quick tour.
</p>
</div>
<div id="help-timetree" title="Help: Time-scaled tree interface">
<p>
A phylogenetic tree is a model of how different populations are related by common ancestors.
The tree displayed here (generated by <a href="https://github.com/neherlab/treetime">
TreeTime</a> v0.8.0) summarizes the common ancestry of different
<a href="https://cov-lineages.org" target="_new">SARS-CoV-2 lineages</a>, which are
pre-defined groupings of viruses based on genome similarity.
</p>
<p>
A time scale is drawn above the tree marked with
<a href="https://en.wikipedia.org/wiki/ISO_8601" target="_new">dates</a>.
The earliest ancestor (root) is drawn on the left, and the most recent observed descendants are
on the right.
We estimate the dates of common ancestors by comparing the sampled genomes and assuming
a <a href="http://virological.org/t/phylodynamic-analysis-176-genomes-6-mar-2020/356" target="_new">constant rate</a> of evolution.
</p>
<p>
For each lineage, we draw a rectangle to summarize the range of sample collection
dates, and colour it according to the geographic region it was sampled most often.
To explore the samples within a lineage, click on the label (<i>e.g.,</i> "B.4")
or the rectangle to retrieve the associated beadplot.
</p>
</div>
<div id="help-beadplot" title="Help: Beadplot interface">
<p>
We use beadplots to visualize the different variants of SARS-CoV-2 within a
<a href="https://cov-lineages.org" target="_new">lineage</a>, where and when
they have been sampled, and how they are related to each other.
Every object in the beadplot has additional info in a tooltip (which you view by hovering
over that object with your mouse pointer).
</p>
<p>
Each horizontal line segment represents a variant – viruses with
<span class="hint" title="It's a bit more complicated. Many genomes are identical in sequence, but many more have missing information - parts of the genome that have not been sequenced. Since we can't be 100% certain two genomes with missing parts are identical, we randomly re-sample genomes 100 times (non-parametric bootstrap) and evaluate how often they are separated in our analysis.">identical</span>
genomes.
We draw beads along a line to indicate when that variant was sampled.
If there are no beads on the line and it is grey, then it is an unsampled variant:
two or more sampled variants descend from an ancestral variant that has not
been directly observed.
</p>
<p>
The area of the bead is scaled in proportion to the number of times the variant
was sampled that day.
This is important for rapid or intensively-sampled epidemics, <i>e.g.,</i>
lineage D.2 in Australia.
Beads are <span class="hint" title="Refer to the barplot in the Countries tab in the right panel for a colour legend.">coloured</span>
with respect to the most common geographic region of the samples.
</p>
<p>
We draw vertical line segments to connects variants to their
<span class="hint" title="The direction of ancestor-descendant relationships is, in effect, determined by degree size. This is a crude estimate, so be cautious about interpreting the directionality of these relationships.">common ancestors</span>.
These relationships are estimated by the <a href="https://en.wikipedia.org/wiki/Neighbor_joining">neighbor-joining method</a> using
<a href="https://birc.au.dk/software/rapidnj/">RapidNJ</a>.
Tooltips for each edge report the number of genetic differences (mutations)
between ancestor and descendant as the "genomic distance".
Since it's difficult to reconstruct exactly when these mutations occurred,
we simply map each line to when the first sample was collected.
</p>
</div>
<div id="help-search" title="Help: Search interface">
<p>
Since there is an overwhelming number of sampled infections that we are trying to visualize
here, we have built a basic search interface that you can interact with using the inputs
at the top of this web page.
</p>
<p>
You can use the text box to find a specific sample by GISAID accession number.
If you start to enter an accession number, the text box will display a number of
possibilities (autocompletion).
You can also search samples by substring (case-sensitive).
For example, searching for "Madaga" (hit enter to submit) will jump to the first lineage that
contains a sample from Madagascar.
</p>
<p>
Use the "Previous" and "Next" buttons to iterate through your search results, and the "Clear"
button to reset the search interface.
</p>
</div>
<div id="dialog" title="Acknowledgements">
<p>
We would like to thank the GISAID Initiative and are grateful to all of the data contributors,
i.e. the Authors, the Originating laboratories responsible for obtaining the specimens, and
the Submitting laboratories for generating the genetic sequence and metadata and sharing via
the GISAID Initiative, on which this research is based.
</p>
<p>
Elbe, S., and Buckland-Merrett, G. (2017)
Data, disease and diplomacy: GISAID’s innovative contribution to global health.
<i>Global Challenges</i>, 1:33-46.<br/>
DOI: <a href="https://doi.org/10.1002/gch2.1018" target=“_new”>10.1002/gch2.1018</a>
PMCID: <a href="https://pubmed.ncbi.nlm.nih.gov/31565258/" target=“_new”>31565258</a>
</p>
<p>
Note: When using results from these analyses in your manuscript, ensure that you also
acknowledge the Contributors of data, i.e. “We gratefully acknowledge all the Authors,
the Originating laboratories responsible for obtaining the specimens, and the Submitting
laboratories for generating the genetic sequence and metadata and sharing via the GISAID
Initiative, on which this research is based.”
</p>
<p>
Also, cite the following reference:
Shu, Y., McCauley, J. (2017) GISAID: From vision to reality. <i>EuroSurveillance</i>, 22(13)<br/>
DOI: <a href="https://www.eurosurveillance.org/content/10.2807/1560-7917.ES.2017.22.13.30494" target=“_new”>10.2807/1560-7917.ES.2017.22.13.30494</a>
PMCID: <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5388101/" target=“_new”>PMC5388101</a>
</p>
</div>
<footer class="footer">
GISAID data provided on this website are subject to GISAID’s
<a href="https://www.gisaid.org/DAA/" target=“_new”>Terms and Conditions</a>
  
<button class="ack" id="ack-open" onclick="console.log('click');">Acknowledgements</button>
</footer>
<script src="js/beadplot.js"></script>
<script src="js/utils.js"></script>
<script src="js/drawtree.js"></script>
<script src="js/phylo.js"></script>
<script src="js/search.js"></script>
<script src="js/gisaid/gisaid.js?random=1"></script>
<script src="js/covizu.js"></script>
</body>
</html>