Weitzman-MUSA-JavaScript · laivlys · Oct 25, 2024 · Oct 25, 2024 · Oct 25, 2024 · Oct 28, 2024
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 node_modules/
+
+config.js
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,150 @@
+body { 
+    background-color: #252829; /* Dark background */
+    color: #FAFFFD;
+    margin: 0; 
+    padding: 0;
+    font-family: 'Barlow';
+    font-weight: 100;
+}
+
+#container {
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+
+#dashboard h1 {
+    margin: 20px 0 5px;
+    margin-left: 20px;
+    font-size: 45px;
+}
+
+#map { 
+    height: 90vh; 
+    width: 70vw;
+    padding: 0;
+    margin: 0;
+}
+
+#tab {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 69%;
+    height: 5vh;
+    cursor: pointer;
+    gap: 10px;
+    padding: 10px 10px;
+    border-radius: 5px;
+    font-family: 'Barlow';
+}
+
+#sidebar {
+    display: flex;
+    flex-direction: column; 
+    align-items: flex-start; 
+    width: 30vw;
+    height: 90vh;
+    overflow: hidden;
+    overflow-y: auto;                           
+}
+
+#whaleImageContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-grow: 1;
+}
+
+#whaleImage {
+    border-radius: 5px;
+    flex-grow: 1;
+}  
+
+.whaleButton {
+    font-size: 18px;
+    font-family: "Barlow";
+    color: #FAFFFD;
+    border-radius: 5px;
+    border: none;
+    background-color: #758fae;
+    padding: 10px 15px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    flex-grow: 1; 
+    max-width: 200px;
+
+}
+
+.whaleButton:hover {
+    background-color: #3a5a77;      /* Darker shade on hover */
+    transform: translateY(-2px);    /* Slight lift effect */
+}
+
+.whaleButton:active {
+    transform: translateY(0);        /* Reset the lift effect */
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */
+}
+
+#whaleStatusContainer {
+    position: absolute;
+    top: 25px;
+    right: 10px;
+    height: 10vh;
+    width: 29vw;
+    display: flex;
+    flex-direction: column; 
+    align-items: center;
+}
+
+#whaleStatusLabel {
+    font-size: 30px;
+    color: white;    
+    margin: 0;      
+    padding-bottom: 5px; 
+}
+
+#whaleStatus {
+    font-size: 35px; 
+    margin: 0;       
+}
+
+.statusText {
+    color: inherit;
+    font-weight:bold;
+}
+
+.activeButton {
+    box-shadow: 0 0 10px rgba(100, 128, 128, 0.8); 
+    border: 2px solid rgba(100, 128, 128, 0.8); 
+}
+
+#weatherInfo {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex-grow: 1;
+}
+
+.weatherItem {
+    margin-bottom: 10px; /* Space between items */
+    flex: 1;
+}
+
+.weatherBox {
+    padding: 10px; /* Space inside the box */
+    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
+    border: 1px solid #ccc; /* Border color */
+    border-radius: 5px; /* Rounded corners */
+    font-size: 36px; /* Font size for the value */
+    color: #ffffff; /* Text color */
+    text-align: center; /* Center align text */
+    width: 100%;
+}
+
+#windDirection {
+    position: relative;
+    text-align: center; /* Center-align text and images */
+    flex-grow: 1;
+}
diff --git a/data/blueFinWhale.geojson b/data/blueFinWhale.geojson
diff --git a/data/blueFinWhale.jpg b/data/blueFinWhale.jpg
diff --git a/data/blueWhale.geojson b/data/blueWhale.geojson
diff --git a/data/blueWhale.jpg b/data/blueWhale.jpg
diff --git a/data/bowheadWhale.geojson b/data/bowheadWhale.geojson
diff --git a/data/bowheadWhale.jpg b/data/bowheadWhale.jpg
diff --git a/data/falseKillerWhale.geojson b/data/falseKillerWhale.geojson
diff --git a/data/falseKillerWhale.jpg b/data/falseKillerWhale.jpg
diff --git a/data/finWhale.geojson b/data/finWhale.geojson
diff --git a/data/finWhale.jpg b/data/finWhale.jpg
diff --git a/data/humpbackWhale.geojson b/data/humpbackWhale.geojson
diff --git a/data/humpbackWhale.jpg b/data/humpbackWhale.jpg
diff --git a/data/northArrow.png b/data/northArrow.png
diff --git a/data/pilotWhale.jpg b/data/pilotWhale.jpg
diff --git a/data/shortFinnedPilotWhale.geojson b/data/shortFinnedPilotWhale.geojson
diff --git a/data/shortFinnedPilotWhale.jpg b/data/shortFinnedPilotWhale.jpg
diff --git a/data/spermWhale.geojson b/data/spermWhale.geojson
diff --git a/data/spermWhale.jpg b/data/spermWhale.jpg
diff --git a/data/whaleShark.geojson b/data/whaleShark.geojson
diff --git a/data/whaleShark2.png b/data/whaleShark2.png
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+    <title>Whale Dashboard</title>
+    <link rel="stylesheet" href="css/style.css">
+    <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Asap+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+</head>
+
+<body>
+
+    <div id="dashboard">
+        <h1>Hello, Whale!</h>
+        <div id="whaleStatusContainer">
+            <p id="whaleStatusLabel">IUCN Red List Status:</p>
+            <p id="whaleStatus"><span class="statusText"></span></p>
+        </div>
+    </div>
+
+    <div id = "tab">
+        <button class="whaleButton" data-species="humpbackWhale" data-lon="160" data-lat="-40">Humpback Whale</button>
+        <button class="whaleButton" data-species="whaleShark" data-lon="-87" data-lat="25">Whale Shark</button>
+        <button class="whaleButton" data-species="pilotWhale" data-lon="-74" data-lat="35">Short-Finned Pilot Whale</button>
+        <button class="whaleButton" data-species="blueWhale" data-lon="170" data-lat="-64">Blue Whale</button>
+        <button class="whaleButton" data-species="bowheadWhale" data-lon="-85" data-lat="71">Bowhead Whale</button>
+        <button class="whaleButton" data-species="falseKillerWhale" data-lon="-160" data-lat="23">False Killer Whale</button>
+        <button class="whaleButton" data-species="finWhale" data-lon="-111" data-lat="26">Fin Whale</button>
+        <button class="whaleButton" data-species="spermWhale" data-lon="-112" data-lat="28">Sperm Whale</button>
+    </div>
+
+    <main>
+
+        <div id="container">
+            <div id="map"></div>
+            <div id="sidebar">
+                <div id="weatherInfo">
+                    <div class="weatherItem">
+                        <div class="weatherBox" id="windSpeed"></div>
+                    </div>
+                    <div class="weatherItem">
+                        <div class="weatherBox" id="windDirection"></div>
+                        <canvas id="windRoseChart"></canvas>
+                    </div>
+                    <div class="weatherItem">
+                        <div class="weatherBox" id="weatherDescription"></div>
+                    </div>
+                </div>
+                <div id="whaleImageContainer"></div>
+                <p id="whaleDescription"></p>
+                </div>
+            </div>
+        </div>
+
+    </main>
+
+    <script src="js/main.js" type="module"></script>
+
+</body>
+
+</html>