Initial commit

hgarbeil · Oct 26, 2024 · 3d7f153 · 3d7f153
commit 3d7f153
Show file tree

Hide file tree

Showing 9 changed files with 3,522 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,163 @@
+:root {
+  --clr-sky-100: #3f87a6;
+  --clr-sky-900: #1f5796;
+  --clr-hotearth: #fa6c14;
+  --clr-neutral : #ebf8e1 ;
+  --clr-neutral-gray : #aeafaf ;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Poppins", sans-serif;
+  width: 100dvw ;
+  height : 100dvh ;
+}
+
+header {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  font-size: 1.4rem;
+  background: linear-gradient(175deg, #3f87a6, #ebf8e1, #f69d3c);
+  box-shadow: 6px 0px 5px gray;
+}
+
+
+
+.divimage img {
+    border-radius: 35px ;
+    height: 6rem ;
+    padding: 25px ;
+
+
+
+
+}
+
+.topnav ul {
+  position : relative ;
+  bottom : -50px ;
+  font-size: 1.2rem;
+  display: flex;
+  justify-content: space-around;
+  gap: 10px;
+  list-style-type: none;
+}
+
+.topnav-list li {
+  color: yellow;
+  text-decoration: none;
+
+  padding: 5px 5px;
+  background-color: var(--clr-sky-100);
+  border-radius: 5px;
+}
+
+.topnav-list li:hover {
+  color: #3f87a6;
+  background: yellow;
+}
+
+.slidebar {
+  position: absolute;
+  border-top-right-radius: 15px ;
+  top: 180px ;
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  height : 100% ;
+  left: -420px;
+  background-color: var(--clr-sky-900);
+  color : #ebf8e1 ;
+  padding: 10px 10px ;
+  transition: all .5s ease ;
+}
+
+.slidebar span {
+    cursor: pointer ;
+    text-align: right ;
+    position:relative;
+    left  : 380px ;
+}
+
+.slidebar.active {
+    left: 0 ;
+    transition: all 1s ease ;
+
+}
+
+
+
+.slidebar a {
+    color: yellow ;
+}
+.slidebar a:hover, a:visited {
+    color: orange ;
+}
+
+
+section.maincontent {
+    display: flex ;
+    flex-wrap: wrap ;
+    justify-content: space-evenly;
+    gap: 10px ;
+    padding: 20px 30px ;
+    width: 100% ;
+    background: #ebf8e1  ;
+
+
+}
+.main-left,.main-right {
+    flex :  1 1 0 ;
+    border: 1px solid var(--clr-sky-900) ;
+    padding: 20px 30px ;
+    display: flex ;
+    flex-direction: column;
+
+}
+.main-footer {
+    display: flex ;
+    justify-content: flex-start ;
+    align-items: center ;
+    background: var(--clr-neutral) ;
+    gap: 10px ;
+    padding: 10px 30px ;
+
+}
+/* 
+
+.main-left {
+    flex :  1 1 0 ;
+    border: 1px solid var(--clr-sky-900) ;
+    padding: 20px 30px ;
+}
+.main-right {
+    flex : 1 1 0 ;
+    padding: 20px 30px ;
+    border: 1px solid var(--clr-sky-900) ;
+} */
+
+.chartdiv {
+    width: 600px ;
+}
+
+.chartdiv p {
+    font-style: italic ;
+}
+
+.furtherinfo {
+    font-size: 1.2rem ;
+    border-radius: 15px;
+    padding: 5px 10px ;
+    display: flex ;
+    margin:auto ;
+    margin-top:20px ;
+    background-color: var(--clr-sky-900);
+    color: var(--clr-neutral) ;
+
+}
+.furtherinfo:hover {
+    cursor: pointer;
+    color: yellow ;
+}
diff --git a/data/Global_TAVG_monthly.txt b/data/Global_TAVG_monthly.txt
diff --git a/data/gtemps.txt b/data/gtemps.txt
@@ -0,0 +1,7 @@
+<h2>Global Average Temperatures</h2>
+<p>Data from the <a href='https://berkeleyearth.org/global-temperature-report-for-2023/' target="_blank">Berkeley Earth Global Temperature Report.<a>
+Berkeley Earth, a California-based non-profit research organization, has been preparing independent analyses of global mean temperature changes since 2013. The following is our report on global mean temperature during 2023.
+</p>
+<p>
+They conclude that 2023 was the warmest year on Earth since 1850, exceeding the previous record set in 2016 by a clear and definitive margin.
+</p>
diff --git a/data/mloa_co2.txt b/data/mloa_co2.txt
@@ -0,0 +1,6 @@
+<h2>Mauna Loa CO2</h2>
+<p>CO2 vs Date plot here was generated from data recorded under the <a href="https://scrippsco2.ucsd.edu/" target="_blank">Scripps CO2 program.</a></p>
+<p>
+The Scripps CO2 program was initiated in 1956 by Charles David Keeling and 
+operated under his direction until his passing in 2005. It is currently being continued by Ralph F. Keeling, 
+who also runs a parallel program at SIO to measure changes in atmospheric O2 and Ar abundances (Scripps O2 Program).</p>
diff --git a/data/monthly_in_situ_co2_mlo.csv b/data/monthly_in_situ_co2_mlo.csv
diff --git a/images/earth.jpg b/images/earth.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Climate Web</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=close" /><link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,400;0,500;0,700;1,100;1,400;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <header>
+        <div class="divimage"><img src="images/earth.jpg" alt="View of earth from space" srcset=""></div>
+        <div class="title-block">
+            <h2>Climate Change</h2>
+            <p>Exploring Global and USA Climate Change</p>
+        </div>
+        <div>
+
+            <nav class="topnav">
+                <ul class="topnav-list">
+                    <li class="topnav-items">Home</li>
+                    <li class="topnav-items">CO2 Gases</li>
+                    <li class="topnav-items">CO2 Contributions</li>
+                    <li class="topnav-items">Sources</li>
+                </ul>
+
+            </nav>
+        </div>
+    </header>
+    <section class="slidebar">
+        <div><span class="material-symbols-outlined" onclick="furtherInfo(0)">
+            close
+            </span></div>
+        <div id="topDiv" width="600px" height="400px"></div>
+        <div></div>
+        <div></div>
+    </section>
+    <section class="maincontent">
+        <div class="main-left">
+            <h2>CO2 from Mauna Loa Time Series</h2>
+            <div class="chartdiv">
+                <canvas id="mloa_chart"></canvas>
+                <p class="leftinfo">Hello</p>
+            </div>
+            <button id="mloa_info" class="furtherinfo" onclick="furtherInfo(0)">Further Info</button>
+        </div>
+        <div class="main-right">
+            <h2>Global Temperature Anomaly Time Series</h2>
+            <div class="chartdiv">
+                <canvas id="gtemps_chart"></canvas>
+                <p class="rightinfo">Hello</p>
+            </div>
+            <button id="gtemps_info" class="furtherinfo" onclick="furtherInfo(1)">Further Info</button>
+        </div>
+    </section>
+    <section class="main-footer"
+            <h2>Year range</h2>
+            <h5>Start Year :</h5>
+            <input type="range" min="2000" max="2025" value="50" class="slider" id="yearRange">
+
+    </section>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js" referrerpolicy="no-referrer"></script> -->
+    <script src="js/ajax-utils.js"></script>
+    <script src="js/main.js"></script>
+
+</body>
+</html>
diff --git a/js/ajax-utils.js b/js/ajax-utils.js
@@ -0,0 +1,73 @@
+// 
+
+(function (global) {
+
+// Set up a namespace for our utility
+var ajaxUtils = {};
+
+
+// Returns an HTTP request object
+function getRequestObject() {
+  if (window.XMLHttpRequest) {
+    return (new XMLHttpRequest());
+  } 
+  else if (window.ActiveXObject) {
+    // For very old IE browsers (optional)
+    return (new ActiveXObject("Microsoft.XMLHTTP"));
+  } 
+  else {
+    global.alert("Ajax is not supported!");
+    return(null); 
+  }
+}
+
+
+// Makes an Ajax GET request to 'requestUrl'
+ajaxUtils.sendGetRequest = 
+  function(requestUrl, responseHandler, isJsonResponse) {
+    var request = getRequestObject();
+    console.log(requestUrl);
+    request.onreadystatechange = 
+      function() { 
+        handleResponse(request, 
+                       responseHandler,
+                       isJsonResponse); 
+      };
+    // open request - true for asynch...
+    request.open("GET", requestUrl, true);
+    // sends...
+    request.send(null); // for POST only
+  };
+
+
+// Only calls user provided 'responseHandler'
+// function if response is ready
+// and not an error
+// good if ==4 and status ==200
+function handleResponse(request,
+                        responseHandler,
+                        isJsonResponse) {
+  if ((request.readyState == 4) &&
+     (request.status == 200)) {
+
+    // Default to isJsonResponse = true
+    if (isJsonResponse == undefined) {
+      isJsonResponse = true;
+    }
+
+    if (isJsonResponse) {
+      responseHandler(JSON.parse(request.responseText));
+    }
+    else {
+      responseHandler(request.responseText);
+    }
+  }
+}
+
+
+// Expose utility to the global object
+global.$ajaxUtils = ajaxUtils;
+
+
+})(window);
+