cdv-poznan · martabakaj · Feb 13, 2022 · Apr 5, 2022 · May 19, 2022 · May 19, 2022
diff --git a/AuroraMovie.mp4 b/AuroraMovie.mp4
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,109 @@
+<!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" />
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <title>AURORA MAP</title>
+  </head>
+  <body>
+    <nav class="navigation">
+      <a id="about-aurora-link">ABOUT AURORA</a>
+      <a id="aurora-map-link">AURORA MAP</a>
+      <a id="aurora-gallery-link">AURORA GALLERY</a>
+    </nav>
+    <header class="aurora">
+      <!--  <video src="Movie1.mp4" control> -->
+      <video class="AuroraMovie" src="AuroraMovie.mp4" autoplay loop muted>
+        <p>sorry, no video</p>
+      </video>
+    </header>
+
+    <div id="about-aurora">
+      <div class="box">
+        <h3>Aurora</h3>
+
+        <p>
+          An <strong>aurora</strong>, also known as the
+          <strong>polar lights</strong> or <strong>aurora polaris</strong>, is a
+          natural light display in Earth's sky, predominantly seen in
+          high-latitude regions (around the Arctic and Antarctic).
+        </p>
+        <p>
+          Auroras display dynamic patterns of brilliant lights that appear as
+          curtains, rays, spirals, or dynamic flickers covering the entire sky.
+        </p>
+        <p>
+          Auroras are the result of disturbances in the magnetosphere caused by
+          the solar wind. Major disturbances result from enhancements in the
+          speed of the solar wind from coronal holes and coronal mass ejections.
+          These disturbances alter the trajectories of charged particles in the
+          magnetospheric plasma. These particles, mainly electrons and protons,
+          precipitate into the upper atmosphere (thermosphere/exosphere). The
+          resulting ionization and excitation of atmospheric constituents emit
+          light of varying colour and complexity. The form of the aurora,
+          occurring within bands around both polar regions, is also dependent on
+          the amount of acceleration imparted to the precipitating particles.
+        </p>
+      </div>
+      <div class="box">
+        <h3>K<sub>p</sub>-index</h3>
+
+        <p>
+          The official planetary <strong>K<sub>p</sub>-index</strong> is derived
+          by calculating a weighted average of K-indices from a network of 13
+          geomagnetic observatories at mid-latitude locations. Since these
+          observatories do not report their data in real-time, various
+          operations centers around the globe estimate the index based on data
+          available from their local network of observatories. The
+          K<sub>p</sub>-index was introduced by Bartels in 1939.
+        </p>
+        <ul>
+          <li>0 - 1: quiet</li>
+          <li>2 - 3: unsettled</li>
+          <li>4: active</li>
+          <li>5: minor geomagnetic storm</li>
+          <li>6: moderate geomagnetic storm</li>
+          <li>7: strong geomagnetic storm</li>
+          <li>8: severe geomagnetic storm</li>
+          <li>9: extreme geomagnetic storm</li>
+        </ul>
+      </div>
+    </div>
+
+    <div id="aurora-map" class="box">
+      <div id="map"></div>
+      <script
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1MJLtZVpzhnM8xLSlKSWW90DqehAhnAI&callback=initMap&v=weekly"
+        async
+      ></script>
+    </div>
+
+    <div id="aurora-gallery" class="box">
+      <div class="gallery">
+        <article class="gallerypicture">
+          <img src="zdjecia/aurora-borealis-744351_960_720.webp" alt="Aurora" />
+        </article>
+        <article class="gallerypicture">
+          <img src="zdjecia/aurora-g537af5b0e_1920.jpg" alt="Aurora" />
+        </article>
+        <article class="gallerypicture">
+          <img src="zdjecia/aurora-g74f410e95_1920.jpg" alt="Aurora" />
+        </article>
+        <article class="gallerypicture">
+          <img src="zdjecia/nature-gd8b0ff76e_1920.jpg" alt="Aurora" />
+        </article>
+        <article class="gallerypicture">
+          <img src="zdjecia/northern-lights-g10bf04e4b_1920.jpg" alt="Aurora" />
+        </article>
+        <article class="gallerypicture">
+          <img src="zdjecia/northern-lights-gc31bdc65b_1920.jpg" alt="Aurora" />
+        </article>
+      </div>
+    </div>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
diff --git a/script.js b/script.js
@@ -0,0 +1,81 @@
+document.querySelector("video").playbackRate = 0.75;
+
+$("#about-aurora-link").click(function () {
+  $("#about-aurora, #aurora-map, #aurora-gallery").fadeOut();
+  $("#about-aurora").fadeIn();
+});
+
+$("#aurora-map-link").click(function () {
+  $("#about-aurora, #aurora-map, #aurora-gallery").fadeOut();
+  $("#aurora-map").fadeIn();
+});
+
+$("#aurora-gallery-link").click(function () {
+  $("#about-aurora, #aurora-map, #aurora-gallery").fadeOut();
+  $("#aurora-gallery").fadeIn();
+});
+
+function initMap() {
+  const myLatlng = { lat: 52.41573519438039, lng: 16.93194798098 };
+  const map = new google.maps.Map(document.getElementById("map"), {
+    zoom: 5,
+    center: myLatlng,
+  });
+  // Create the initial InfoWindow.
+  let infoWindow = new google.maps.InfoWindow({
+    content:
+      "<strong>Click on map to check actual Kp index in that place!</strong>",
+    position: myLatlng,
+  });
+  let infoWindow2 = new google.maps.InfoWindow({});
+
+  infoWindow.open(map);
+
+  // Configure the click listener.
+  map.addListener("click", (mapsMouseEvent) => {
+    // Close the current InfoWindow.
+    infoWindow.close();
+    // Create a new InfoWindow.
+    infoWindow = new google.maps.InfoWindow({
+      position: mapsMouseEvent.latLng,
+    });
+    infoWindow.setContent("<strong>loading...</strong>");
+    infoWindow.open(map);
+
+    // API URL AURORA
+    var apiURLlink =
+      "https://api.auroras.live/v1/?type=all&" +
+      "lat=" +
+      mapsMouseEvent.latLng.toJSON().lat +
+      "&long=" +
+      mapsMouseEvent.latLng.toJSON().lng +
+      "&forecast=false&threeday=false&colour=hex";
+
+    function getApiResponse(url) {
+      const postsRequest = fetch(url);
+      return postsRequest.then((response) => response.json());
+    }
+
+    getApiResponse(apiURLlink).then((auroraData) => {
+      infoWindow.setContent(
+        "<strong>ACTUAL KP: " + auroraData.ace.kp + "</strong>"
+      );
+      infoWindow2.close();
+      infoWindow2 = new google.maps.InfoWindow({
+        position: {
+          lat: parseFloat(auroraData.probability.highest.lat),
+          lng: parseFloat(auroraData.probability.highest.long),
+        },
+      });
+
+      infoWindow2.setContent(
+        "<strong>The bigest probability of Aurora is here: " +
+          auroraData.probability.highest.value +
+          "%</strong>"
+      );
+      infoWindow2.open(map);
+
+      console.log(auroraData);
+    });
+  });
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,143 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #002171;
+  font-family: 'Montserrat', sans-serif;
+}
+
+.AuroraMovie {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  object-fit: cover;
+}
+
+.navigation {
+  position: absolute;
+  top: 60px;
+  left: 0;
+  width: 100%;
+  background-color: #00217180;
+  display: flex;
+  padding: 10px 0;
+  justify-content: space-around;
+  z-index: 10;
+  text-align: center;
+}
+
+.navigation a {
+  text-decoration: none;
+  font-weight: bold;
+  color: #6ff9ff80;
+  font-size: 28px;
+  cursor: pointer;
+}
+
+.box {
+  background-color: #00217180;
+  padding: 10px;
+  color: #6ff9ff;
+  -webkit-box-shadow: 0px 0px 24px 0px rgba(0, 33, 113, 1);
+  -moz-box-shadow: 0px 0px 24px 0px rgba(0, 33, 113, 1);
+  box-shadow: 0px 0px 24px 0px rgba(0, 33, 113, 1);
+}
+
+#about-aurora,
+#aurora-map,
+#aurora-gallery {
+  position: absolute;
+  top: 150px;
+  left: 10%;
+  right: 10%;
+  display: none;
+}
+
+#about-aurora {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+#about-aurora .box {
+  width: 40%;
+}
+
+#aurora-map {
+  color: #002171;
+}
+
+#aurora-gallery {}
+
+#map {
+  height: 500px;
+}
+
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.gallerypicture {
+  width: 27.3333%;
+  box-sizing: border-box;
+  border: 3px solid #c0c6d4;
+  margin: 3%;
+}
+
+.gallerypicture img {
+  width: 100%;
+  display: block;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: .3s ease-in-out;
+  transition: .3s ease-in-out;
+}
+
+.gallerypicture:hover img {
+  -webkit-transform: scale(1.3);
+  transform: scale(1.3);
+}
+
+@media (max-width: 1000px) {
+  .navigation a {
+    font-size: 18px;
+  }
+
+  #about-aurora .box {
+    width: 100%;
+    margin-bottom: 50px;
+  }
+
+  .gallerypicture {
+    width: 44%;
+  }
+
+  #map {
+    height: 400px;
+  }
+}
+
+@media (max-width: 600px) {
+  .navigation {
+    top: 40px;
+  }
+
+  .navigation a {
+    display: inline-block;
+    width: 100px;
+  }
+
+  .gallerypicture {
+    width: 94%;
+  }
+
+  #map {
+    height: 300px;
+  }
+}
diff --git a/zdjecia/aurora-borealis-744351_960_720.webp b/zdjecia/aurora-borealis-744351_960_720.webp
diff --git a/zdjecia/aurora-g02ff7546e_1920.jpg b/zdjecia/aurora-g02ff7546e_1920.jpg
diff --git a/zdjecia/aurora-g537af5b0e_1920.jpg b/zdjecia/aurora-g537af5b0e_1920.jpg
diff --git a/zdjecia/aurora-g74f410e95_1920.jpg b/zdjecia/aurora-g74f410e95_1920.jpg
diff --git a/zdjecia/iceland-g20b81ef57_1920.jpg b/zdjecia/iceland-g20b81ef57_1920.jpg
diff --git a/zdjecia/nature-gd8b0ff76e_1920.jpg b/zdjecia/nature-gd8b0ff76e_1920.jpg
diff --git a/zdjecia/northern-lights-g10bf04e4b_1920.jpg b/zdjecia/northern-lights-g10bf04e4b_1920.jpg
diff --git a/zdjecia/northern-lights-gc31bdc65b_1920.jpg b/zdjecia/northern-lights-gc31bdc65b_1920.jpg