Schedule Update

n1cogrv · Nov 15, 2024 · ad53758 · ad53758
commit ad53758
Show file tree

Hide file tree

Showing 251 changed files with 121,889 additions and 0 deletions.
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+wear-a-mask.jasonchen.icu
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013-2020 Start Bootstrap LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/about.html b/about.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
+    <meta content="Visualization of Covid-19 in United States, tables and maps are included." name="description">
+    <meta content="MijazzChan" name="author">
+
+    <title>Covid-19 US Visualization - About</title>
+
+    <!-- Bootstrap core CSS -->
+    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" rel="stylesheet">
+    <link href="css/dark-mode.css" rel="stylesheet">
+    <!-- Custom styles for this template -->
+    <link href="css/custom.css" rel="stylesheet">
+
+</head>
+
+<body>
+
+<div aria-hidden="true" aria-labelledby="staticBackdropLabel" class="modal fade" data-backdrop="static" data-keyboard="false"
+     id="state-select-modal" tabindex="-1">
+    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
+        <div class="bg-light modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="staticBackdropLabel">Visualizer</h5>
+            </div>
+            <div class="modal-body">
+                <h4 style="padding-bottom: 1rem">Before diving into state-wise data, please select a state first.</h4>
+                <div class="list-unstyled row bg-light" id="states-list">
+                    <!--                    <a class="list-group-item list-group-item-action state-selection" href="?state=here">Row1</a>-->
+
+
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-primary" data-dismiss="modal" type="button">Understood</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="d-flex" id="wrapper">
+
+    <!-- Sidebar -->
+    <div class="bg-light border-right" id="sidebar-wrapper">
+        <div class="sidebar-heading">Covid-19 US Visualization</div>
+        <div class="list-group list-group-flush">
+            <a class="list-group-item list-group-item-action bg-light" href="index.html">Overview</a>
+            <a class="list-group-item list-group-item-action bg-light" href="listing.html">Listing</a>
+            <a class="list-group-item list-group-item-action bg-light" href="state-wise.html">Region Data</a>
+            <a class="list-group-item list-group-item-action bg-light" href="state-overview-map.html">State Overview
+                Map</a>
+            <a class="list-group-item list-group-item-action bg-light" href="about.html">About</a>
+            <!--        <a href="#" class="list-group-item list-group-item-action bg-light">Status</a>-->
+        </div>
+    </div>
+    <!-- /#sidebar-wrapper -->
+
+    <!-- Page Content -->
+    <div id="page-content-wrapper">
+
+        <nav class="navbar navbar-light bg-light border-bottom">
+            <button class="navbar-toggler-icon" id="menu-toggle"></button>
+            <span class="nav-item custom-control custom-switch dark-mode-nav">
+                    <input class="custom-control-input" id="darkSwitch" type="checkbox"/>
+                    <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
+            </span>
+        </nav>
+
+        <div class="container-fluid">
+            <p class="h2 text-center" style="padding-top: 1rem">About This Project</p>
+            <div class="col-12">
+                <ul class="list bg-light" style="padding: 0.5rem 2rem; margin-top: 2rem">
+                    <li class="about-list">
+                        <h4>Github - <a href="https://github.com/MijazzChan/covid-19-visualization">covid-19-visualization</a>
+                        </h4>
+                        <h5>Json data will be generated by Github Actions periodically
+                            in order to serve GitHub Pages. </h5>
+                    </li>
+                    <li class="about-list">
+                        <h4>Data Source</h4>
+                        <h5>
+                            Data will be fetched from
+                            <a href="https://github.com/nytimes/covid-19-data">nytimes/covid-19-data</a> via GitHub Actions.
+                        </h5>
+                    </li>
+                    <li class="about-list">
+                        <h4>Graphs/Charts</h4>
+                        <h5>
+                            Graphs/Charts using in this project is powered by Highcharts, under a Highsoft
+                            Non-Commercial License.
+                            <a href="https://www.highcharts.com/">Visit HighCharts</a>
+                        </h5>
+                    </li>
+                    <li>
+                        <h4>SINCE</h4>
+                        <h5>I have been up and running for since <span id="time-span"></span> . Offer me a star <a
+                                href="https://github.com/n1cogrv/covid-19-visualization">here</a> if this project is
+                            helpful to you.</h5>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <!-- /#page-content-wrapper -->
+
+    </div>
+    <!-- /#wrapper -->
+
+
+    <!-- Bootstrap core JavaScript -->
+    <script crossorigin="anonymous"
+            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
+    <script crossorigin="anonymous"
+            integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
+            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
+    <!-- Dark mode switch override -->
+    <script src="js/override-default-darkmode-detection.js"></script>
+
+    <script crossorigin="anonymous"
+            integrity="sha256-c95CVJWVMOTR2b7FhjeRhPlrSVPaz5zV5eK917/s7vc="
+            src="https://cdn.jsdelivr.net/npm/[email protected]/min/moment.min.js"></script>
+
+
+    <script src="js/utils.js"></script>
+    <!-- Menu Toggle Script -->
+    <script>
+        $("#menu-toggle").click(function (e) {
+            e.preventDefault();
+            $("#wrapper").toggleClass("toggled");
+        });
+    </script>
+    <script>
+        $(document).ready(function () {
+                $("#time-span").html(moment("20210105", "YYYYMMDD").fromNow().toString());
+            }
+        );
+    </script>
+
+</div>
+</body>
+
+</html>
diff --git a/css/custom.css b/css/custom.css
@@ -0,0 +1,104 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,500&display=swap');
+
+#wrapper {
+    overflow-x: hidden;
+}
+
+#sidebar-wrapper {
+    min-height: 100vh;
+    margin-left: -15rem;
+    -webkit-transition: margin .25s ease-out;
+    -moz-transition: margin .25s ease-out;
+    -o-transition: margin .25s ease-out;
+    transition: margin .25s ease-out;
+}
+
+#sidebar-wrapper .sidebar-heading {
+    padding: 0.875rem 1.25rem;
+    font-size: 1.2rem;
+}
+
+#sidebar-wrapper .list-group {
+    width: 15rem;
+}
+
+#page-content-wrapper {
+    min-width: 100vw;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+    margin-left: 0;
+}
+
+li.dark-mode-nav {
+    padding-top: 0.5rem;
+}
+
+@media (min-width: 768px) {
+    #sidebar-wrapper {
+        margin-left: 0;
+    }
+
+    #page-content-wrapper {
+        min-width: 0;
+        width: 100%;
+    }
+
+    #wrapper.toggled #sidebar-wrapper {
+        margin-left: -15rem;
+    }
+}
+
+.listing-card {
+    padding: 0.5rem;
+}
+
+a.state-selection {
+    width: 33%;
+}
+
+.highcharts-figure, .highcharts-data-table table {
+    min-width: 310px;
+    max-width: 100%;
+    height: 600px;
+    margin: 0;
+}
+
+.highcharts-data-table table {
+    font-family: "JetBrains Mono", serif;
+    border-collapse: collapse;
+    font-size: 16px;
+    border: 1px solid #EBEBEB;
+    margin: 10px auto;
+    text-align: center;
+    width: 100%;
+    max-width: 500px;
+}
+
+.highcharts-data-table caption {
+    padding: 1em 0;
+    font-size: 1.2em;
+    color: #555;
+}
+
+.highcharts-data-table th {
+    font-weight: 600;
+    padding: 0.5em;
+}
+
+.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
+    padding: 0.5em;
+}
+
+.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
+    background: #f8f8f8;
+}
+
+.highcharts-data-table tr:hover {
+    background: #f1f7ff;
+}
+
+.about-list {
+    padding-bottom: 1rem;
+
+}
diff --git a/css/dark-mode.css b/css/dark-mode.css
@@ -0,0 +1,65 @@
+[data-theme="dark"] {
+    background-color: #2b2727 !important;
+    color: #ffffff;
+}
+
+[data-theme="dark"] .bg-light {
+    background-color: #353131 !important;
+    color: #ffffff;
+}
+
+[data-theme="dark"] .bg-white {
+    background-color: #2b2727 !important;
+}
+
+[data-theme="dark"] .bg-black {
+    background-color: #ffffff !important;
+}
+
+[data-theme="dark"] button.bg-transparent {
+    color: #ffffff !important;
+}
+
+[data-theme="dark"] .nav-link {
+    color: rgba(255, 255, 255, 0.8) !important;
+}
+
+[data-theme="dark"] .nav-link:focus {
+    color: rgba(255, 255, 255, 0.3) !important;
+}
+
+/*[data-theme="dark"] .dropdown-menu, .dropdown-item {*/
+/*    color: #ffffff;*/
+/*    text-decoration: none;*/
+/*    background-color: #2b2727 !important;*/
+/*}*/
+[data-theme="dark"] .list-group {
+    color: #ffffff !important;
+}
+
+[data-theme="dark"] a.state-selection {
+    background-color: #2b2727;
+    color: #f8f8f8;
+}
+
+[data-theme="dark"] a.list-group-item:hover, a.list-group-item:focus {
+    background-color: rgba(255, 255, 255, 0.3) !important;
+    color: #ffffff;
+}
+
+[data-theme="dark"] .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
+}
+
+[data-theme="dark"] .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
+    background-color: #000000 !important;
+    color: #ffffff;
+
+}
+
+[data-theme="dark"] .highcharts-data-table tr:hover {
+    background-color: #000000 !important;
+    color: #ffffff;
+
+}
+