Bionic-Sources/variants.html at main · ZC82531/Bionic-Sources · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variants</title>
    <link rel="stylesheet" href="variants.css">
    <!-- Vue.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js" integrity="sha512-hIlMpy2enepx9maXZF1gn0hsvPLerXoLHdb095CmRY5HG3bZfN7XPBZ14g+TUDH1aGgfLyPHmY9/zuU53smuMw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/granim/2.0.0/granim.min.js" integrity="sha512-CmlPTWm5+a1Gt2YSNk2rGZVvbH3Zge6imS7M4/vrhC8d+A1RcehmLxWMqUdv8aEu7pwfTo74EtnrR+8Cf8KdCA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="variants.js" defer></script>
    <script src="navbar.js"></script>
</head>
<body>
    <div id="app">
        <canvas id="granim-canvas"></canvas>
        <navbar-component></navbar-component>

        <div id="text">
            <div id="div1">
                <p>
                    Variants: Important Things to Know
                </p>
            </div>
            <br>
            <div class="img">
                <img src="images/variants.jpg">
            </div>

            <div class="span">
                <span id="typed_1"></span>
            </div>
            <br>

            <div class="info">
                <ul>
                    <li>Just like any virus, the original coronavirus strain is expected to mutate into new variants.</li>
                    <br>
                    <li>All COVID-19 tests will detect any variant, although they are incapable of telling you which variant you have or if you have one. </li>
                    <br>
                    <li>Most variants have similar symptoms as the original COVID-19 strain.</li>
                    <br>
                    <li>Scientists classify these variants as variants of interest, of concern, and of high consequence based on transmission rate, treatments, and severity. There are currently four variants of concern in the US: </li>
                    <br>
                    <li>For more information, visit the <a href="https://www.cdc.gov/coronavirus/2019-ncov/variants/variants.html">CDC website</a>.</li>
                </ul>
            </div>

            <div v-for="variant in variants" :key="variant.id" class="variant-section">
                <div :id="'div' + variant.id">
                    <p>{{ variant.name }}</p>
                </div>
                <div class="span">
                    <span :id="'typed_' + variant.id"></span>
                </div>
                <div class="info">
                    <br>
                    <p>{{ variant.description }}</p>
                    <br>
                </div>
                <div class="img">
                    <img :src="'images/' + variant.image">
                </div>
            </div>

            <div id="div6">
                <p>
                    Why the Variants are Concerning
                </p>
            </div>
            <div class="span">
                <span id="typed_6"></span>
            </div>
            <div class="info">
                <p>Although research has not shown whether any of these variants is more severe or not than the original strain, experts agree that their higher transmission rates are set to be the most important deciding factor in how the pandemic continues.</p>
            </div>
            <div class="img">
                <img src="images/vaccine.webp">
            </div>
        </div>
    </div>

    <!-- Vue.js instance -->
    <script>
        new Vue({
            el: '#app',
            components: {
                'navbar-component': NavbarComponent
            },
            data: {
                variants: [
                    {
                        id: 2,
                        name: 'Delta',
                        description: 'The delta variant, first discovered in India, was the main cause behind the subcontinent\'s intense COVID numbers this past spring. Studies show that this variant is probably the most transmissible of the main four "variants of concern". It is highly recommended by the CDC to wear your mask if you are not vaccinated. Individuals fully vaccinated have shown to still have near full effectiveness for no risk of hospitalization against the variant, although they can still contract it and spread it with uncertainty of how minimized this is.',
                        image: 'delta.jpg'
                    },
                    {
                        id: 3,
                        name: 'Alpha',
                        description: 'The alpha variant, first identified in the UK, is believed to be 50% more transmissible from person to person than the original coronavirus strain. Causing a surge of cases in the UK in the fall of 2020, the alpha variant has been the dominant variant in the US for most of this past year, but it is soon to be taken over by the delta variant. The alpha variant spreads MUCH faster than other variants which is why it is a big concern. The three FDA-approved vaccines do work against this variant to nearly eliminate risk of hospitalization, severe illness, and death. Wearing masks if not fully vaccinated is strongly recommended.',
                        image: 'alpha.jpg'
                    },
                    {
                        id: 4,
                        name: 'Gamma',
                        description: 'The gamma variant spiked in Brazil and it is also believed to be more transmissible than the original COVID-19 strain, although we do not know by how much. It has not grown significantly in the US but has overtaken the beta variant in domestic cases. The current data does not',
                        image: 'gamma.jpg'
                    },
                    {
                        id: 5,
                        name: 'Beta',
                        description: 'The beta variant gets its name from being believed to be 50% more transmissible than the original strain, as the alpha variant is. Emerging from South Africa, this variant has not grown significantly in the US either.',
                        image: 'beta.jpg'
                    }
                ]
            },
            mounted() {
                // Initialize Typed.js instances here if needed
            }
        });
    </script>
</body>
</html>