covidsimulator/visualize.html at master · ssannkkallpp/covidsimulator · GitHub

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
<html lang="en">
    <head>
        <title>Covid-19 Visualization</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <META http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="theme-color" content="#323232">
        <meta name="description" content="Covid-19 Visualization">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="google" content="notranslate">

        <link rel="author" content="Covid-19 Visualization"/>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">

        <link type="text/css" rel="stylesheet" href="css/visualize.css">

        <link rel="stylesheet" href="css/pico.min.css">

    </head>

    <body>
        <main class="container">
            <select class="select-country hide" id="country-dropdown"></select>
            <progress value="50" max="100" id="page-load-progress-bar"></progress>
            <article id="main-article">
                <div class="grid hide" id="large-numbers-grid">
                    <article class="large-numbers-card light-blue-border">
                        <span class="large-numbers" id="cases-yesterday">1000000</span> <br>
                        Cases Yesterday
                    </article>
                    <article class="large-numbers-card lime-border">
                        <span class="large-numbers" id="deaths-yesterday">1000000</span> <br>
                        Deaths Yesterday
                    </article>
                    <article class="large-numbers-card amber-border">
                        <span class="large-numbers" id="total-cases">1000000</span> <br>
                        Total Cases
                    </article>
                    <article class="large-numbers-card orange-border">
                        <span class="large-numbers" id="total-deaths">1000000</span> <br>
                        Total Deaths
                    </article>
                </div>

                <progress value="50" max="100" id="country-progress-bar"></progress>

                <div class="data-container hide" id="chart-grid">
                    <div class="button-group">
                    <a href="#!" role="button" class="contrast" id = "daily_button" onclick="show_daily()">Daily</a>
                    <a href="#!" role="button" class="contrast outline" id = "cumulative_button" onclick="show_cumulative()">Cumulative</a>
                    </div>
                    <div class="button-group">
                    <a href="#!" role="button" class="contrast outline" id = "cases_button" onclick="show_cases()">Cases</a>
                    <a href="#!" role="button" class="contrast outline" id = "deaths_button" onclick="show_deaths()">Deaths</a>
                    </div>
                    <canvas id="line-graph"></canvas>
                </div>
            </article>

        </main>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
        <script type="text/javascript" src="js/chartjs-plugin-colorschemes.min.js"></script>
        <script src="js/visualize.js"></script>
    </body>
</html>