-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
307 lines (304 loc) · 15.5 KB
/
index.html
1
<!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>Dublin Pollution Visualizer</title> <!-- Favicon --> <link rel="shortcut icon" href="./img/svg/Logo.svg" type="image/x-icon"> <!-- Custom styles --> <link rel="stylesheet" href="./css/style.css"></head><body><div class="layer"></div><!-- ! Body --><a class="skip-link sr-only" href="#skip-target">Skip to content</a><div class="page-flex"> <!-- ! Sidebar --> <aside class="sidebar"> <div class="sidebar-start"> <div class="sidebar-head"> <a href="index.html" class="logo-wrapper" title="Home"> <span class="sr-only">Home</span> <span class="icon logo" aria-hidden="true"></span> <div class="logo-text"> <span class="logo-subtitle">Pollution Visualizer</span> <span class="logo-title">Dublin</span> </div> </a> <button class="sidebar-toggle transparent-btn" title="Menu" type="button"> <span class="sr-only">Toggle menu</span> <span class="icon menu-toggle" aria-hidden="true"></span> </button> </div> <div class="sidebar-body"> <ul class="sidebar-body-menu"> <li> <a class="active" href="index.html"><span class="icon home" aria-hidden="true"></span>Dashboard</a> </li> <li> <a class="show-cat-btn" href="#"> <span class="icon document" aria-hidden="true"></span>Areas <span class="category__btn transparent-btn" title="Open list"> <span class="sr-only">Open list</span> <span class="icon arrow-down" aria-hidden="true"></span> </span> </a> <ul class="cat-sub-menu"> <li> <a href="area-1.html"> South Canal </a> </li> <li> <a href="area-2.html"> The Liberties </a> </li> <li> <a href="area-3.html"> Dublin Heuston </a> </li> <li> <a href="area-4.html"> Technological University Dublin </a> </li> <li> <a href="area-5.html"> North City Center </a> </li> <li> <a href="area-6.html"> City Port </a> </li> </ul> </li> <li> <a href="about.html"> <span class="icon category" aria-hidden="true"></span>About </a> </li> <li> <a href="support.html"> <span class="icon message" aria-hidden="true"></span>Support </a> </li> </ul> </div> </div> <div class="sidebar-footer"> <a href="mailto:solfontm@tcd.ie" class="sidebar-user"> <span class="sidebar-user-img"> <picture><source srcset="./img/avatar/avatar-illustrated-03.webp" type="image/webp"><img src="./img/avatar/avatar-illustrated-03.png" alt="User name"></picture> </span> <div class="sidebar-user-info"> <span class="sidebar-user__title">Marc Solé Fonte</span> <span class="sidebar-user__subtitle">Need help? Hit me up!</span> </div> </a> </div> </aside> <div class="main-wrapper"> <!-- ! Main nav --> <nav class="main-nav--bg"> <div class="container main-nav"> <div class="main-nav-start"> </div> <div class="main-nav-end"> <button class="sidebar-toggle transparent-btn" title="Menu" type="button"> <span class="sr-only">Toggle menu</span> <span class="icon menu-toggle--gray" aria-hidden="true"></span> </button> <button id="theme-switcher" class="theme-switcher gray-circle-btn" type="button" title="Switch theme"> <span class="sr-only">Switch theme</span> <i class="sun-icon" data-feather="sun" aria-hidden="true"></i> <i class="moon-icon" data-feather="moon" aria-hidden="true"></i> </button> </div> </div> </nav> <!-- ! Main --> <main class="main users chart-page" id="skip-target"> <div class="container"> <h2 class="main-title">Dashboard</h2> <div class="row stat-cards"> <div class="col-md-6 col-xl-3"> <article class="stat-cards-item"> <div class="stat-cards-icon primary"> <i data-feather="bar-chart-2" aria-hidden="true"></i> </div> <div class="stat-cards-info"> <p id="dashboard-available-data-points" class="stat-cards-info__num">Loading...</p> <p class="stat-cards-info__title">Data points available</p> <p class="stat-cards-info__progress"> <span class="stat-cards-info__profit success"> <i data-feather="trending-up" aria-hidden="true"></i>2100+ </span> Every week </p> </div> </article> </div> <div class="col-md-6 col-xl-3"> <article class="stat-cards-item"> <div class="stat-cards-icon warning"> <i data-feather="home" aria-hidden="true"></i> </div> <div class="stat-cards-info"> <p class="stat-cards-info__num">6 Areas Covered</p> <p class="stat-cards-info__title">Only in Dublin</p> <p class="stat-cards-info__progress"> <span class="stat-cards-info__profit success"> <i data-feather="feather" aria-hidden="true"></i> <a href="https://github.com/msolefonte/dublin-pollution-piper">Adapt it to your city!</a> </span> </p> </div> </article> </div> <div class="col-md-6 col-xl-3"> <article class="stat-cards-item"> <div class="stat-cards-icon success"> <i data-feather="activity" aria-hidden="true"></i> </div> <div class="stat-cards-info"> <p class="stat-cards-info__num">Real-time</p> <p class="stat-cards-info__title">Data presented as collected</p> <p class="stat-cards-info__progress"> <span class="stat-cards-info__profit success"> <i data-feather="clock" aria-hidden="true"></i> Last update a <span id="dashboard-last-update">t Loading...</span> </span> </p> </div> </article> </div> <div class="col-md-6 col-xl-3"> <article class="stat-cards-item"> <div class="stat-cards-icon purple"> <i data-feather="wind" aria-hidden="true"></i> </div> <div class="stat-cards-info"> <p id="dashboard-emissions-monthly" class="stat-cards-info__num"></p> <p class="stat-cards-info__title">NO₂ emissions</p> <p id="dashboard-emissions-evolution" class="stat-cards-info__progress"> Loading... </p> </div> </article> </div> </div> <div class="row"> <div class="col-md-12 col-xl-9"> <div class="chart"> <canvas id="dashboard-emissions-chart" aria-label="Site statistics" role="img"></canvas> </div> </div> <div class="col-md-12 col-xl-3"> <article class="stat-cards-item"> <div class="stat-cards-info"> <p class="stat-cards-info__num">About NO₂ pollution</p> <p class="stat-cards-info__title">Problems and consequences</p> <p class="stat-cards-info__progress" align="justify"> According to epidemiological studies directed by the World Health Organization, reduced lung function growth and symptoms of bronchitis in asthmatic children increase in association with long-term exposure to nitrogen dioxide. </p> <br> <p class="stat-cards-info__progress" align="justify"> Other sources claim that small day-to-day variations in NO₂ can cause changes in lung function and respiratory conditions, eye irritation and increased visits to emergency departments and hospital admissions for respiratory issues. </p> </div> </article> </div> </div> <div class="row stat-cards"> <div class="col-md-4 col-xl-2 mb-20"> <article class="stat-cards-item"> <div class="stat-cards-info"> <p class="stat-cards-info__num">South Canal</p> <p class="stat-cards-info__title">Dublin 12</p> <p id="area-1-last-emission-value"class="stat-cards-info__progress"></p> </div> </article> </div> <div class="col-md-4 col-xl-2 mb-20"> <article class="stat-cards-item"> <div class="stat-cards-info"> <p class="stat-cards-info__num">The Liberties</p> <p class="stat-cards-info__title">Dublin 8</p> <p id="area-2-last-emission-value"class="stat-cards-info__progress"></p> </div> </article> </div> <div class="col-md-4 col-xl-2 mb-20"> <article class="stat-cards-item"> <div class="stat-cards-info"> <p class="stat-cards-info__num">Dublin Heuston</p> <p class="stat-cards-info__title">Dublin 8</p> <p id="area-3-last-emission-value"class="stat-cards-info__progress"></p> </div> </article> </div> <div class="col-md-4 col-xl-2 mb-20"> <article class="stat-cards-item"> <div class="stat-cards-info"> <p class="stat-cards-info__num">Tech. University</p> <p class="stat-cards-info__title">Dublin 7</p> <p id="area-4-last-emission-value"class="stat-cards-info__progress"></p> </div> </article> </div> <div class="col-md-4 col-xl-2 mb-20"> <article class="stat-cards-item"> <div class="stat-cards-info"> <p class="stat-cards-info__num">North City Center</p> <p class="stat-cards-info__title">Dublin 1</p> <p id="area-5-last-emission-value"class="stat-cards-info__progress"></p> </div> </article> </div> <div class="col-md-4 col-xl-2 mb-20"> <article class="stat-cards-item"> <div class="stat-cards-info"> <p class="stat-cards-info__num">City Port</p> <p class="stat-cards-info__title">Dublin 4</p> <p id="area-6-last-emission-value"class="stat-cards-info__progress"></p> </div> </article> </div> </div> </div> </main> <!-- ! Footer --> <footer class="footer"> <div class="container footer--flex"> <div class="footer-start"> <p>2021 © Marc Solé Fonte - <a href="https://github.com/msolefonte/" target="_blank" rel="noopener noreferrer">msolefonte</a></p> </div> <ul class="footer-end"> <li><a href="about.html">About</a></li> <li><a href="support.html">Support</a></li> </ul> </div> </footer> </div></div><!-- Chart library --><script src="./plugins/chart.min.js"></script><!-- Icons library --><script src="plugins/feather.min.js"></script><!-- Custom scripts --><script src="js/base.js"></script><script src="js/gatherer.js"></script></body></html>