From c71c30888b2fca1f60d8113f8bbea6a4d4cf19d2 Mon Sep 17 00:00:00 2001
From: BusyBird15 <119532048+BusyBird15@users.noreply.github.com>
Date: Tue, 22 Oct 2024 11:44:56 -0400
Subject: [PATCH] Add files via upload

---
 beta/sparkradar/index.html |  58 +++++--
 beta/sparkradar/script.js  | 318 ++++++++++++++++++++++++++++---------
 beta/sparkradar/style.css  |  31 +---
 3 files changed, 293 insertions(+), 114 deletions(-)

diff --git a/beta/sparkradar/index.html b/beta/sparkradar/index.html
index 95453e1..09eee5a 100644
--- a/beta/sparkradar/index.html
+++ b/beta/sparkradar/index.html
@@ -59,7 +59,7 @@
     </button>
 
     <!--Radar state info-->
-    <div id="info" class="overlay-object" style="flex-direction: column; padding: 10px; display: flex; align-items: center; justify-content: center; width: calc(100% - 100px); max-width: 300px;">
+    <div id="info" class="overlay-object" style="top: 10px; right: 10px; flex-direction: column; padding: 10px; display: flex; align-items: center; justify-content: center; width: calc(100% - 100px); max-width: 300px;">
         <p id="radinfo_lna" style="margin: 0px; font-size: large;"><b>CONUS • LATEST</b></p>
         <select id="prod" style="margin-top: 10px; font-size: medium;" onchange="setProduct();">
             <option value="conus_cref">Composite Reflectivity</option>
@@ -84,8 +84,8 @@
 
     <!--Dialog-->
     <div id="dialog" style="transition: opacity 0.5s !important; opacity: 0; width: 100%; height: 100%; display: none; position: absolute; z-index: 15; justify-content: center; align-items: center; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);">
-        <div id="innerdialog" style="transition: scale 0.5s cubic-bezier(0.42, 0, 0.39, 0.98) !important; scale: 50%; overflow-y: auto; scrollbar-width: none; padding: 10px; width: 100%; height: 100%; max-width: 500px; max-height: 500px; margin: 10px; border-radius: 10px; background: black; color: white; box-shadow: #0000008c 3px 3px 9px 0px;">
-            <button id="dialog-closer" onclick="dialog(false);" class="nav-btn" style="background: #ff2121ff; border-radius: 10px;">
+        <div id="innerdialog" style="flex-direction: column; transition: scale 0.5s cubic-bezier(0.42, 0, 0.39, 0.98) !important; scale: 70%; overflow-y: auto; scrollbar-width: none; padding: 10px; width: 100%; height: 100%; max-width: 500px; max-height: 500px; margin: 10px; border-radius: 10px; background: black; color: white; box-shadow: #0000008c 3px 3px 9px 0px;">
+            <button id="dialog-closer" onclick="dialog(false); saveSettings();" class="nav-btn" style="background: #ff2121ff; border-radius: 10px;">
                 <i class="fa-solid fa-xmark" style="font-size: 16px; color: white;"></i>
             </button><br>
 
@@ -104,6 +104,9 @@
                     <button id="settings-alerts" onclick="settingsmode('settmenu-alerts', 'settings-alerts');" class="set-btn" style="background: #89999f; border-radius: 10px;">
                         <i class="fa-solid fa-triangle-exclamation" style="font-size: 16px;"></i>
                     </button>
+                    <!--<button id="settings-stream" onclick="settingsmode('settmenu-streaming', 'settings-stream');" class="set-btn" style="background: #89999f; border-radius: 10px;">
+                        <i class="fa-brands fa-youtube" style="font-size: 16px;"></i>
+                    </button>-->
                 </div>
                 <hr style="margin-bottom: 10px; width: 100%;">
 
@@ -115,6 +118,9 @@
                         <span class="checkmark" style="margin-right: 10px;"></span>
                         Show debugger
                     </label>
+                    <p style="margin: 30px 5px 5px 5px; font-size: large;"><i class="fa-solid fa-rotate setticon" style="font-size: 16px; color: white;"></i><b>Restore Settings</b></p>
+                    <p style="margin: 5px 5px 10px 5px; font-size: medium;">Reset all settings to their defaults, including custom alert colors.</p>
+                    <button style="width: max-content; font-weight: bold; margin-left: 20px; font-size: medium; background: #ff2121ff" class="function-btn" onclick="if (confirm('Reset all settings to default?')) { localStorage.removeItem('SparkRadar_settings'); window.location.reload(); }"><i class="fa-solid fa-rotate" style="font-size: 16px; margin-right: 5px;"></i>Reset to defaults</button>
                 </div>
 
                 <div id="settmenu-map" style="flex-direction: column; display: none;">
@@ -146,7 +152,7 @@
                      <select id="res" onchange="setResolution();">
                         <option value="1">Maximum</option>
                         <option value="1.5">Great</option>
-                        <option value="2">Good (Recommended)</option>
+                        <option value="2" selected="selected">Good (Recommended)</option>
                         <option value="3">Fair</option>
                         <option value="4">Data saver</option>
                         <option value="5">Minimum</option>
@@ -184,10 +190,28 @@
                         <span class="checkmark" style="margin-right: 10px;"></span>
                         Show watches
                     </label>
+                    <p style="margin: 30px 5px 5px 5px; font-size: large;"><i class="fa-solid fa-triangle-exclamation setticon" style="font-size: 16px; color: white;"></i><b>Alert Colors</b></p>
+                    <p style="margin: 5px 5px 10px 5px; font-size: medium;">Make the radar yours by defining your own alert polygon colors. If there is more than one color option, the alert will flash between the two colors.</p>
+                    <div style="margin: 5px 5px 10px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"><p style="margin: 0px 10px 0px 0px; font-size: medium;">Extreme Wind Warning</p> <input type="color" id="ewwcolor" onchange="changeAlertColors('EWW', document.getElementById('ewwcolor').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer;" value="#ff00ff"></div>
+                    <div style="margin: 0px 5px 10px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"><p style="margin: 0px 10px 0px 0px; font-size: medium;">Tornado Emergency</p> <div><input type="color" id="torecolor" onchange="changeAlertColors('TORE', document.getElementById('torecolor').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer; margin-right: 10px;" value="#c940ff"><input type="color" id="torecolor2" onchange="changeAlertColors('TORE2', document.getElementById('torecolor2').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer;" value="#ff00ff"></div></div>
+                    <div style="margin: 0px 5px 10px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"><p style="margin: 0px 10px 0px 0px; font-size: medium;">PDS Tornado Warning</p> <div><input type="color" id="pdstorcolor" onchange="changeAlertColors('PDSTOR', document.getElementById('pdstorcolor').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer; margin-right: 10px;" value="#ff0000"><input type="color" id="pdstorcolor2" onchange="changeAlertColors('PDSTOR2', document.getElementById('pdstorcolor2').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer;" value="#ff00ff"></div></div>
+                    <div style="margin: 0px 5px 10px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"><p style="margin: 0px 10px 0px 0px; font-size: medium;">Tornado Warning</p> <input type="color" id="torcolor" onchange="changeAlertColors('TOR', document.getElementById('torcolor').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer;" value="#ff0000"></div>
+                    <div style="margin: 0px 5px 10px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"><p style="margin: 0px 10px 0px 0px; font-size: medium;">PDS Severe Tstorm Warning</p> <div><input type="color" id="pdssvrcolor" onchange="changeAlertColors('PDSSVR', document.getElementById('pdssvrcolor').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer; margin-right: 10px;" value="#ff0000"><input type="color" id="pdssvrcolor2" onchange="changeAlertColors('PDSSVR2', document.getElementById('pdssvrcolor2').value)"style="border: none; border-radius: 5px; background: darkgray; cursor: pointer;" value="#FFA500"></div></div>
+                    <div style="margin: 0px 5px 10px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"><p style="margin: 0px 10px 0px 0px; font-size: medium;">Severe Tstorm Warning</p> <input type="color" id="svrcolor" onchange="changeAlertColors('SVR', document.getElementById('svrcolor').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer;" value="#FFA500"></div>
+                    <div style="margin: 0px 5px 10px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"><p style="margin: 0px 10px 0px 0px; font-size: medium;">Special Weather Statement</p> <input type="color" id="swscolor" onchange="changeAlertColors('SWS', document.getElementById('swscolor').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer;" value="#FFFF00"></div>
+                    <div style="margin: 0px 5px 10px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"><p style="margin: 0px 10px 0px 0px; font-size: medium;">Flash Flood Emergency</p> <div><input type="color" id="ffecolor" onchange="changeAlertColors('FFE', document.getElementById('ffecolor').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer; margin-right: 10px;" value="#00ff00"><input type="color" id="ffecolor2" onchange="changeAlertColors('FFE2', document.getElementById('ffecolor2').value)"style="border: none; border-radius: 5px; background: darkgray; cursor: pointer;" value="#008000"></div></div>
+                    <div style="margin: 0px 5px 10px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"><p style="margin: 0px 10px 0px 0px; font-size: medium;">Flash Flood Warning</p> <input type="color" id="ffwcolor" onchange="changeAlertColors('FFW', document.getElementById('ffwcolor').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer;" value="#008000"></div>
+                    <div style="margin: 0px 5px 10px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"><p style="margin: 0px 10px 0px 0px; font-size: medium;">Special Marine Warning</p> <input type="color" id="smwcolor" onchange="changeAlertColors('SMW', document.getElementById('smwcolor').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer;" value="#A52A2A"></div>
+                    <div style="margin: 0px 5px 10px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"><p style="margin: 0px 10px 0px 0px; font-size: medium;">Flood Warning</p> <input type="color" id="fwcolor" onchange="changeAlertColors('FW', document.getElementById('fwcolor').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer;" value="#0000FF"></div>
+                    <div style="margin: 0px 5px 10px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;"><p style="margin: 0px 10px 0px 0px; font-size: medium;">Flood Advisory</p> <input type="color" id="facolor" onchange="changeAlertColors('FA', document.getElementById('facolor').value)" style="border: none; border-radius: 5px; background: darkgray; cursor: pointer;" value="#6A5ACD"></div>
+                </div>
+
+                <div id="settmenu-streaming" style="flex-direction: column; display: none;">
+                    <p style="margin: 5px 5px 10px 5px; font-size: medium;">Streaming settings coming soon!</p>
                  </div>
             </div>
 
-            <div id="appinfo" style="align-items: center; overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
+            <div id="appinfo" style="flex-direction: column; align-items: center; overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
                 <p style="margin: 10px 5px 5px 5px; font-size: large;"><b>👋 Hi there!</b></p>
                 <p style="margin: 5px 5px 10px 5px; font-size: medium;">Thanks for checking out my radar. Spark Radar was a project I started in 2024 because I love tracking the weather and programming. I made the entire thing open source because finding the radar data was really hard to do. You can check out the source code in <a class="credit" href="https://github.com/BusyBird15/busybird15.github.io/">this repo</a>.</p>
                 <p style="margin: 20px 5px 5px 5px; font-size: large;"><b>How does it work?</b></p>
@@ -206,19 +230,19 @@
                 <p style="margin: 5px 5px 10px 15px; font-size: medium; width: calc(100% - 40px); text-align: left;"><b>SteepAtticStairs</b> (Creator of AtticRadar)<br><b>Dan Paulat</b> (Creator of SupercellWX)<br><b>Wxtership</b> (Owner of Xtreme Weather Discord)</p>
             </div>
 
-            <div id="about" style="align-items: center; overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
+            <div id="about" style="flex-direction: column; align-items: center; overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
                 <p style="margin: 10px 5px 5px 5px; font-size: large;"><b>Version:</b> BETA v0.8</p>
-                <p style="margin: 10px 5px 5px 5px; font-size: large;"><b>Date:</b> Oct. 17, 2024</p>
+                <p style="margin: 10px 5px 5px 5px; font-size: large;"><b>Date:</b> Oct. 22, 2024</p>
             </div>
 
-            <div id="alertinfo" style="font-family: Consolas; overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
+            <div id="alertinfo" style="flex-direction: column; font-family: Consolas; overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
             </div>
 
-            <div id="soundingviewer" style="overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
+            <div id="soundingviewer" style="flex-direction: column; overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
                 <img id="sounding" style="background: white; border-radius: 5px; margin-top: 10px;">
             </div>
 
-            <div id="prodviewer" style="overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
+            <div id="prodviewer" style="flex-direction: column; overflow-y: hidden; display: none; scrollbar-width: narrow; flex-direction: column;">
                 <p id="produc" style="color: white; font-family: Consolas, monospace, 'Cabin', sans-serif; font-size: medium;"></p>
             </div>
         </div>
@@ -226,7 +250,7 @@
 
     <!--WFO Products dialog-->
     <div id="wfodialog" style="transition: opacity 0.5s !important; opacity: 0; width: 100%; height: 100%; display: none; position: absolute; z-index: 14; justify-content: center; align-items: center; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);">
-        <div id="innerwfodialog" style="transition: scale 0.5s cubic-bezier(0.42, 0, 0.39, 0.98) !important; scale: 50%; flex-direction: column; overflow-y: auto; scrollbar-width: none; padding: 10px; width: 100%; height: 100%; max-width: 500px; max-height: 500px; margin: 10px; border-radius: 10px; background: black; color: white; box-shadow: #0000008c 3px 3px 9px 0px;">
+        <div id="innerwfodialog" style="transition: scale 0.5s cubic-bezier(0.42, 0, 0.39, 0.98) !important; scale: 70%; flex-direction: column; overflow-y: auto; scrollbar-width: none; padding: 10px; width: 100%; height: 100%; max-width: 500px; max-height: 500px; margin: 10px; border-radius: 10px; background: black; color: white; box-shadow: #0000008c 3px 3px 9px 0px;">
             <button id="wfo-dialog-closer" onclick="wfodialog(false);" class="nav-btn" style="background: #ff2121ff; border-radius: 10px;">
                 <i class="fa-solid fa-xmark" style="font-size: 16px; color: white;"></i>
             </button><br>
@@ -249,9 +273,19 @@
     <div id="results" class="overlay-object" style="transition: opacity 0.5s !important; opacity: 0; width: calc(100% - 520px); flex-direction: column; max-width: 330px; min-width: 180px; left: 70px; top: 60px; overflow-x: auto; height: calc(100% - 400px); min-height: 200px; max-height: 300px; scrollbar-width: none; padding: 10px; z-index: 999;"></div>
 
     <p id="infop" style="display: none; transition-duration: 0.2s; z-index: 100; margin: 0px; text-size: large; bottom: 10px; left: 10px; position: absolute; color: black;">Loading radar...</p>
+
+    <!--Map alert notifier-->
+    <div class="overlay-object" style="display: flex; right: 10px; bottom: 30px; z-index: 999;">
+        <div id="alertcontent" style="padding: 10px;">
+            <div style="display: flex; background: magenta; color: black; padding: 5px; border-radius: 5px;"><b>PDS Severe Thunderstorm Warning</b></div>
+        </div>
+    </div>
+
+    <!--Map text attribution-->
+    <p style="position: absolute; bottom: 5px; right: 5px; z-index: 999; color: white; margin: 0px;">&copy;<a href="https:/www.openstreetmap.org/copyright">OpenStreetMap</a> and &copy;<a href="https://www.maptiler.com">MapTiler</a></p>
 </body>
 
 <!--Add JS after elements are added-->
 <script src="script.js"></script>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/beta/sparkradar/script.js b/beta/sparkradar/script.js
index 2238608..411cd18 100644
--- a/beta/sparkradar/script.js
+++ b/beta/sparkradar/script.js
@@ -63,6 +63,156 @@ var alertDataSet = {}
 var alertRefresher;
 var lightningzoomlevel = 9;
 
+// Database of alert colors
+var alertcolors = {
+    'EWW': '#ff00ff',
+    'TORE': '#c940ff',
+    'TORE2': '#ff00ff',
+    'PDSTOR': '#ff0000',
+    'PDSTOR2': '#ff00ff',
+    'TOR': '#ff0000',
+    'PDSSVR': '#ff0000',
+    'PDSSVR2': '#ffa500',
+    'SVR': '#ffa500',
+    'SWS': '#ffff00',
+    'FFE': '#00ff00',
+    'FFE2': '#008000',
+    'FFW': '#008000',
+    'SMW': '#a52a2a',
+    'FW': '#0000ff',
+    'FA': '#6a5acd'
+}
+
+
+// Set map
+function setMapType(mapselector, type) {
+    mapselectors = ['darkmatmp', 'defaultmp', 'streetsmp'];
+    mapselectors.forEach(function(thisobj) {
+        document.getElementById(thisobj).checked = false;
+    });
+    document.getElementById(mapselector).checked = true;
+
+    if (currentMapLayer) { map.removeLayer(currentMapLayer); }
+    currentMapLayer = type;
+    map.addLayer(currentMapLayer);
+    if (currentMapLayer != map_darkmaterial){
+        document.getElementsByClassName("leaflet-container")[0].style.backgroundColor = 'white';
+        document.getElementById("menu").style.background = "rgba(0, 0, 0, 0.5)";
+        document.getElementById("infop").style.color = "black";
+        document.querySelectorAll(".overlay-object").forEach(function(object) {
+            object.classList.remove("overlay-object-dark");
+        });
+    } else {
+        document.getElementsByClassName("leaflet-container")[0].style.backgroundColor = 'black';
+        document.getElementById("menu").style.background = "rgba(255, 255, 255, 0.2)";
+        document.getElementById("infop").style.color = "white";
+        document.querySelectorAll(".overlay-object").forEach(function(object) {
+            object.classList.add("overlay-object-dark");
+        });
+    }
+
+    // Code to remove MapTiler attribution
+    // I AM NOT RESPONSIBLE FOR YOUR USE OF THIS CODE
+    //document.querySelectorAll("a").forEach(function(item) {
+    //    if (item.href == "https://www.maptiler.com/") {
+    //        item.style.display = "none";
+    //    }
+    //});
+}
+
+// Flashing polygon stylesheet
+function updateflashes() {
+    flashingstyles.innerHTML = `
+        @keyframes ffepulse {
+            0% { stroke: ${alertcolors.FFE}; }
+            50% { stroke: ${alertcolors.FFE2}; }
+        }
+        @keyframes torepulse {
+            0% { stroke: ${alertcolors.TORE}; }
+            50% { stroke: ${alertcolors.TORE2}; }
+        }
+        @keyframes svrpdspulse {
+            0% { stroke: ${alertcolors.PDSSVR}; }
+            50% { stroke: ${alertcolors.PDSSVR2}; }
+        }@keyframes torpdspulse {
+            0% { stroke: ${alertcolors.PDSTOR}; }
+            50% { stroke: ${alertcolors.PDSTOR2}; }
+        }
+    `;
+}
+
+const flashingstyles = document.createElement('style');
+flashingstyles.type = 'text/css';
+updateflashes();
+document.head.appendChild(flashingstyles);
+
+
+// Stored settings management
+function saveSettings() {
+    var mapMode = 0;
+    if (document.getElementById("darkmatmp").checked) { mapMode = 1; }
+    if (document.getElementById("defaultmp").checked) { mapMode = 2; }
+    if (document.getElementById("streetsmp").checked) { mapMode = 3; }
+
+    const settingsToSave = {
+        'res': resolutionFactor,
+        'rop': radarOpacity,
+        'ltz': lightningzoomlevel,
+        'alc': alertcolors,
+        'dbg': document.getElementById('debugger').checked,
+        'wch': document.getElementById('wwtoggle').checked,
+        'mpm': mapMode,
+    };
+    localStorage.setItem('SparkRadar_settings', JSON.stringify(settingsToSave));
+    console.log("Settings updated. The localStorage tag is 'SparkRadar_settings'.")
+}
+
+// Load user settings if available
+const settings = JSON.parse(localStorage.getItem('SparkRadar_settings'));
+if (settings){
+    resolutionFactor = settings.res;
+    document.getElementById('res').value = resolutionFactor;
+
+    lightningzoomlevel = settings.ltz;
+    document.getElementById('light').value = lightningzoomlevel;
+
+    radarOpacity = settings.rop;
+    document.getElementById('radop').value = radarOpacity * 100;
+
+    document.getElementById('debugger').checked = settings.dbg;
+    if (document.getElementById('debugger').checked) {
+        document.getElementById('infop').style.display = 'flex'
+    } else {
+        document.getElementById('infop').style.display = 'none'
+    }
+
+    document.getElementById('debugger').checked = settings.dbg;
+    watchesEnabled = document.getElementById('wwtoggle').checked;
+    if (watchesEnabled) { loadWatches(); }
+    else { watches.clearLayers(); }
+
+    document.getElementById("darkmatmp").checked = false;
+    document.getElementById("defaultmp").checked = false;
+    document.getElementById("streetsmp").checked = false;
+    if (settings.mpm == 1) { setMapType('darkmatmp', map_darkmaterial) }
+    else if (settings.mpm == 2) { setMapType('defaultmp', map_default) }
+    else if (settings.mpm == 3) { setMapType('streetsmp', map_streets) }
+
+    alertcolors = settings.alc;
+    updateflashes();
+
+    var colorSelectors = ['ewwcolor', 'torecolor', 'pdstorcolor', 'torcolor', 'pdssvrcolor', 'svrcolor', 'swscolor', 'ffecolor', 'ffwcolor', 'smwcolor', 'fwcolor', 'facolor', 'torecolor2', 'pdstorcolor2', 'pdssvrcolor2', 'ffecolor2'];
+    var coloritem = ['EWW', 'TORE', 'PDSTOR', 'TOR', 'PDSSVR', 'SVR', 'SWS', 'FFE', 'FFW', 'SMW', 'FW', 'FA', 'TORE2', 'PDSTOR2', 'PDSSVR2', 'FFE2'];
+    colorSelectors.forEach(function(item, index) {
+        document.getElementById(item).value = alertcolors[coloritem[index]];
+    });
+
+    console.log("Settings restored successfully.")
+} else {
+    setMapType('darkmatmp', map_darkmaterial)
+}
+
+
 // User settings
 var watchesEnabled = true;
 
@@ -108,6 +258,7 @@ const lightningicon = L.icon({
     iconUrl: 'https://raw.githubusercontent.com/BusyBird15/BusyBird15.github.io/refs/heads/main/assets/Lightning.png',
     iconSize: [20, 20],
     iconAnchor: [10, 10],
+    className: 'lightningicon',
 });
 
 function fadeIn(elementID){
@@ -121,45 +272,21 @@ function fadeOut(elementID){
 }
 
 
-// Set map
-function setMapType(mapselector, type) {
-    mapselectors = ['darkmatmp', 'defaultmp', 'streetsmp'];
-    mapselectors.forEach(function(thisobj) {
-        document.getElementById(thisobj).checked = false;
-    });
-    document.getElementById(mapselector).checked = true;
+// Contrast formula
+function getContrastYIQ(hexcolor) {
+    hexcolor = hexcolor.replace('#', '');
 
-    if (currentMapLayer) { map.removeLayer(currentMapLayer); }
-    currentMapLayer = type;
-    map.addLayer(currentMapLayer);
-    if (currentMapLayer != map_darkmaterial){
-        document.getElementsByClassName("leaflet-container")[0].style.backgroundColor = 'white';
-        document.getElementById("menu").style.background = "rgba(0, 0, 0, 0.5)";
-        document.getElementById("infop").style.color = "black";
-        document.querySelectorAll(".overlay-object").forEach(function(object) {
-            object.classList.remove("overlay-object-dark");
-        });
-    } else {
-        document.getElementsByClassName("leaflet-container")[0].style.backgroundColor = 'black';
-        document.getElementById("menu").style.background = "rgba(255, 255, 255, 0.2)";
-        document.getElementById("infop").style.color = "white";
-        document.querySelectorAll(".overlay-object").forEach(function(object) {
-            object.classList.add("overlay-object-dark");
-        });
-    }
+    // Convert the hex color to RGB values
+    const r = parseInt(hexcolor.substr(0, 2), 16);
+    const g = parseInt(hexcolor.substr(2, 2), 16);
+    const b = parseInt(hexcolor.substr(4, 2), 16);
 
-    // Code to remove MapTiler attribution
-    // I AM NOT RESPONSIBLE FOR YOUR USE OF THIS CODE
-    //document.querySelectorAll("a").forEach(function(item) {
-    //    if (item.href == "https://www.maptiler.com/") {
-    //        item.style.display = "none";
-    //    }
-    //});
-}
+    // Calculate the YIQ value
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
 
-document.addEventListener('DOMContentLoaded', function() {
-    setMapType('darkmatmp', map_darkmaterial)
-});
+    // Return black or white based on the YIQ value
+    return yiq >= 128 ? 'black' : 'white';
+}
 
 
 // Function to ensure the user isn't reading something
@@ -229,6 +356,26 @@ function scrape(url) {
         });
 }
 
+// Doesn't work on all messages
+function radarStatusMessageTimeFix(text) {
+    return text.replace(/\d{4}Z/g, match => {
+        // Extract hours and minutes from the match
+        const hours = parseInt(match.slice(0, 2));
+        const minutes = parseInt(match.slice(2, 4));
+
+        // Create a UTC date object for the time today
+        const date = new Date();
+        date.setUTCHours(hours, minutes, 0, 0);
+
+        // Convert to local time and format
+        const options = { hour: '2-digit', minute: '2-digit', hour12: true, timeZoneName: 'short' };
+        const localTimeString = date.toLocaleTimeString('en-US', options);
+
+        return localTimeString;
+    });
+}
+
+
 function loadProd(producttoview) {
     document.getElementById("produc").innerHTML = "Loading..."
     if (producttoview == "RDA") {
@@ -345,7 +492,7 @@ function dialog(toOpen, object=null, producttoview){
     } else {
         fadeOut("dialog");
         fadeOut("innerdialog");
-        document.getElementById("innerdialog").style.scale = "50%";
+        document.getElementById("innerdialog").style.scale = "70%";
     }
 }
 
@@ -356,7 +503,7 @@ function wfodialog(toOpen){
     } else {
         fadeOut("wfodialog");
         fadeOut("innerwfodialog");
-        document.getElementById("innerdialog").style.scale = "50%";
+        document.getElementById("innerdialog").style.scale = "70%";
     }
 }
 
@@ -368,25 +515,25 @@ function openAlertProduct(alertInfoId) {
     var alertTitlebackgroundColor = "white";
 
     if (alertInfo.properties.event.includes("Severe Thunderstorm")){
-        alertTitlecolor = 'black';
-        alertTitlebackgroundColor = "orange";
+        alertTitlebackgroundColor = alertcolors.SVR;
     } else if (alertInfo.properties.event.includes("Tornado")){
-        alertTitlebackgroundColor = "red";
+        alertTitlebackgroundColor = alertcolors.TOR;
     } else if (alertInfo.properties.event.includes("Flood Advisory")){
-        alertTitlebackgroundColor = "slateblue";
+        alertTitlebackgroundColor = alertcolors.FA;
     } else if (alertInfo.properties.event.includes("Flash Flood")){
-        alertTitlebackgroundColor = "green";
+        alertTitlebackgroundColor = alertcolors.FFW;
     } else if (alertInfo.properties.event.includes("Flood Warning")){
-        alertTitlebackgroundColor = "blue";
+        alertTitlebackgroundColor = alertcolors.FW;
     } else if (alertInfo.properties.event.includes("Special Weather")){
-        alertTitlebackgroundColor = "yellow";
-        alertTitlecolor = 'black';
+        alertTitlebackgroundColor = alertcolors.SWS;
     } else if (alertInfo.properties.event.includes("Extreme Wind")){
-        alertTitlebackgroundColor = "fuchsia";
-        alertTitlecolor = 'black';
+        alertTitlebackgroundColor = alertcolors.EWW;
     } else if (alertInfo.properties.event.includes("Special Marine")){
-        alertTitlebackgroundColor = "brown";
+        alertTitlebackgroundColor = alertcolors.SMW;
     }
+
+    alertTitlecolor = getContrastYIQ(alertTitlebackgroundColor);
+
     if (alertInfo.properties.description.includes("FLASH FLOOD EMERGENCY") && alertInfo.properties.event.includes("Flash Flood")){
          alertInfo.properties.event = "Flash Flood Emergency"
     }
@@ -450,6 +597,7 @@ function openAlertProduct(alertInfoId) {
     construct = construct + '<hr style="color: white;"><p style="margin: 0px; background: black; margin-bottom: 20px; margin-top: 20px; font-family: Consolas, monospace, sans-serif !important;">' + alertInfo.properties.description.replace(/\n\n/g, "<br><br>") + '</p><hr style="color: white; margin-bottom: 20px;">'
 
     if (wmoidentifier) {construct = construct + '<p style="margin: 0px;"><b>WMO Identifier:</b> ' + wmoidentifier + '</p>';}
+    if (vtec) {construct = construct + '<p style="margin: 0px;"><b>VTEC:</b> ' + vtec + '</p>';}
     if (maxwind) {construct = construct + '<p style="margin: 0px;"><b>Max Wind Gusts:</b> ' + maxwind + '</p>';}
     if (windthreat) {construct = construct + '<p style="margin: 0px;"><b>Wind Detection:</b> ' + windthreat + '</p>';}
     if (maxhail) {construct = construct + '<p style="margin: 0px;"><b>Max Hail Size:</b> ' + maxhail + '</p>';}
@@ -856,25 +1004,25 @@ function buildAlertPopup(alertInfo, lat, lng) {
         var alertTitlebackgroundColor = "white";
 
         if (alertInfo.properties.event.includes("Severe Thunderstorm")){
-            alertTitlecolor = 'black';
-            alertTitlebackgroundColor = "orange";
+            alertTitlebackgroundColor = alertcolors.SVR;
         } else if (alertInfo.properties.event.includes("Tornado")){
-            alertTitlebackgroundColor = "red";
+            alertTitlebackgroundColor = alertcolors.TOR;
         } else if (alertInfo.properties.event.includes("Flood Advisory")){
-            alertTitlebackgroundColor = "slateblue";
+            alertTitlebackgroundColor = alertcolors.FA;
         } else if (alertInfo.properties.event.includes("Flash Flood")){
-            alertTitlebackgroundColor = "green";
+            alertTitlebackgroundColor = alertcolors.FFW;
         } else if (alertInfo.properties.event.includes("Flood Warning")){
-            alertTitlebackgroundColor = "blue";
+            alertTitlebackgroundColor = alertcolors.FW;
         } else if (alertInfo.properties.event.includes("Special Weather")){
-            alertTitlebackgroundColor = "yellow";
-            alertTitlecolor = 'black';
+            alertTitlebackgroundColor = alertcolors.SWS;
         } else if (alertInfo.properties.event.includes("Extreme Wind")){
-            alertTitlebackgroundColor = "fuchsia";
-            alertTitlecolor = 'black';
+            alertTitlebackgroundColor = alertcolors.EWW;
         } else if (alertInfo.properties.event.includes("Special Marine")){
-            alertTitlebackgroundColor = "brown";
+            alertTitlebackgroundColor = alertcolors.SMW;
         }
+
+        alertTitlecolor = getContrastYIQ(alertTitlebackgroundColor);
+
         if (alertInfo.properties.description.includes("FLASH FLOOD EMERGENCY") && alertInfo.properties.event.includes("Flash Flood")){
              alertInfo.properties.event = "Flash Flood Emergency"
         }
@@ -948,6 +1096,7 @@ function openNearestRadarFromAlert(lat, lon) {
     }
 }
 
+
 function loadAlerts() {
     document.getElementById("infop").innerHTML = "Loading alerts...";
     console.info("Getting alerts");
@@ -967,7 +1116,7 @@ function loadAlerts() {
                 var thisItem = alert.geometry.coordinates[0];
                 if (alert.properties.event.includes("Flood Advisory")){
                     var border = L.polygon(reverseSubarrays(thisItem), {color: 'black', weight: 6, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
-                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'slateblue', weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
+                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: alertcolors.FA, weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
                     polygon.bindPopup(buildAlertPopup(alert, reverseSubarrays(thisItem)[0][0], reverseSubarrays(thisItem)[0][1]), {"autoPan": true, "autoPanPadding": [10, 110], 'maxheight': '400' , 'maxWidth': '380', 'className': 'popup'});
                 }
             } catch (error) { if (!String(error).includes("Cannot read properties of null")){ console.error('loadAlerts() > fetch() > forEach() > ', error); } }
@@ -978,7 +1127,7 @@ function loadAlerts() {
                 var thisItem = alert.geometry.coordinates[0];
                 if (alert.properties.event.includes("Flood Warning")){
                     var border = L.polygon(reverseSubarrays(thisItem), {color: 'black', weight: 6, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
-                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'blue', weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
+                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: alertcolors.FW, weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
                     polygon.bindPopup(buildAlertPopup(alert, reverseSubarrays(thisItem)[0][0], reverseSubarrays(thisItem)[0][1]), {"autoPan": true, "autoPanPadding": [10, 110], 'maxheight': '400' , 'maxWidth': '380', 'className': 'popup'});
                 }
             } catch (error) { if (!String(error).includes("Cannot read properties of null")){ console.error('loadAlerts() > fetch() > forEach() > ', error); } }
@@ -989,7 +1138,7 @@ function loadAlerts() {
                 var thisItem = alert.geometry.coordinates[0];
                 if (alert.properties.event.includes("Flash Flood Warning")){
                     var border = L.polygon(reverseSubarrays(thisItem), {color: 'black', weight: 6, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
-                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'green', weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
+                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: alertcolors.FFW, weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
                     polygon.bindPopup(buildAlertPopup(alert, reverseSubarrays(thisItem)[0][0], reverseSubarrays(thisItem)[0][1]), {"autoPan": true, "autoPanPadding": [10, 110], 'maxheight': '400' , 'maxWidth': '380', 'className': 'popup'});
                 }
             } catch (error) { if (!String(error).includes("Cannot read properties of null")){ console.error('loadAlerts() > fetch() > forEach() > ', error); } }
@@ -1000,7 +1149,7 @@ function loadAlerts() {
                 var thisItem = alert.geometry.coordinates[0];
                 if (alert.properties.event.includes("Special Marine")){
                     var border = L.polygon(reverseSubarrays(thisItem), {color: 'black', weight: 6, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
-                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'brown', weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
+                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: alertcolors.SMW, weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
                     polygon.bindPopup(buildAlertPopup(alert, reverseSubarrays(thisItem)[0][0], reverseSubarrays(thisItem)[0][1]), {"autoPan": true, "autoPanPadding": [10, 110], 'maxheight': '400' , 'maxWidth': '380', 'className': 'popup'});
                 }
             } catch (error) { if (!String(error).includes("Cannot read properties of null")){ console.error('loadAlerts() > fetch() > forEach() > ', error); } }
@@ -1011,7 +1160,7 @@ function loadAlerts() {
                 var thisItem = alert.geometry.coordinates[0];
                 if (alert.properties.event.includes("Flash Flood Emergency")){
                     var border = L.polygon(reverseSubarrays(thisItem), {color: 'black', weight: 6, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
-                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'green', weight: 4, fillOpacity: 0, pane: 'alerts', className: 'FFEPolygon'}).addTo(alerts);
+                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: alertcolors.FFE, weight: 4, fillOpacity: 0, pane: 'alerts', className: 'FFEPolygon'}).addTo(alerts);
                     polygon.bindPopup(buildAlertPopup(alert, reverseSubarrays(thisItem)[0][0], reverseSubarrays(thisItem)[0][1]), {"autoPan": true, "autoPanPadding": [10, 110], 'maxheight': '400' , 'maxWidth': '380', 'className': 'popup'});
                 }
             } catch (error) { if (!String(error).includes("Cannot read properties of null")){ console.error('loadAlerts() > fetch() > forEach() > ', error); } }
@@ -1022,7 +1171,7 @@ function loadAlerts() {
                 var thisItem = alert.geometry.coordinates[0];
                 if (alert.properties.event.includes("Special Weather")){
                     var border = L.polygon(reverseSubarrays(thisItem), {color: 'black', weight: 6, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
-                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'yellow', weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
+                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: alertcolors.SWS, weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
                     polygon.bindPopup(buildAlertPopup(alert, reverseSubarrays(thisItem)[0][0], reverseSubarrays(thisItem)[0][1]), {"autoPan": true, "autoPanPadding": [10, 110], 'maxheight': '400' , 'maxWidth': '380', 'className': 'popup'});
                 }
             } catch (error) { if (!String(error).includes("Cannot read properties of null")){ console.error('loadAlerts() > fetch() > forEach() > ', error); } }
@@ -1034,9 +1183,9 @@ function loadAlerts() {
                 if (alert.properties.event.includes("Severe Thunderstorm")){
                     var border = L.polygon(reverseSubarrays(thisItem), {color: 'black', weight: 6, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
                     if (alert.properties.description.includes("PARTICULARLY DANGEROUS SITUATION")) {
-                        var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'orange', weight: 4, fillOpacity: 0, pane: 'alerts', className: 'SVRPDSPolygon'}).addTo(alerts);
+                        var polygon = L.polygon(reverseSubarrays(thisItem), {color: alertcolors.SVR, weight: 4, fillOpacity: 0, pane: 'alerts', className: 'SVRPDSPolygon'}).addTo(alerts);
                     } else {
-                        var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'orange', weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
+                        var polygon = L.polygon(reverseSubarrays(thisItem), {color: alertcolors.SVR, weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
                     }
                     polygon.bindPopup(buildAlertPopup(alert, reverseSubarrays(thisItem)[0][0], reverseSubarrays(thisItem)[0][1]), {"autoPan": true, "autoPanPadding": [10, 110], 'maxheight': '400' , 'maxWidth': '380', 'className': 'popup'});
                 }
@@ -1049,11 +1198,11 @@ function loadAlerts() {
                 if (alert.properties.event.includes("Tornado")){
                     var border = L.polygon(reverseSubarrays(thisItem), {color: 'black', weight: 6, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
                     if (alert.properties.description.includes("TORNADO EMERGENCY")) {
-                        var polygon = L.polygon(reverseSubarrays(thisItem), {color: '#c940ff', weight: 4, fillOpacity: 0, pane: 'alerts', className: 'TOREPolygon'}).addTo(alerts);
+                        var polygon = L.polygon(reverseSubarrays(thisItem), {color: alertcolors.TORE, weight: 4, fillOpacity: 0, pane: 'alerts', className: 'TOREPolygon'}).addTo(alerts);
                     } else if (alert.properties.description.includes("PARTICULARLY DANGEROUS SITUATION")) {
-                        var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'red', weight: 4, fillOpacity: 0, pane: 'alerts', className: 'TORPDSPolygon'}).addTo(alerts);
+                        var polygon = L.polygon(reverseSubarrays(thisItem), {color: alertcolors.TOR, weight: 4, fillOpacity: 0, pane: 'alerts', className: 'TORPDSPolygon'}).addTo(alerts);
                     } else {
-                        var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'red', weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
+                        var polygon = L.polygon(reverseSubarrays(thisItem), {color: alertcolors.TOR, weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
                     }
                     polygon.bindPopup(buildAlertPopup(alert, reverseSubarrays(thisItem)[0][0], reverseSubarrays(thisItem)[0][1]), {"autoPan": true, "autoPanPadding": [10, 110], 'maxheight': '400' , 'maxWidth': '380', 'className': 'popup'});
                 }
@@ -1065,7 +1214,7 @@ function loadAlerts() {
                 var thisItem = alert.geometry.coordinates[0];
                 if (alert.properties.event.includes("Extreme Wind")){
                     var border = L.polygon(reverseSubarrays(thisItem), {color: 'black', weight: 6, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
-                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'fuchsia', weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
+                    var polygon = L.polygon(reverseSubarrays(thisItem), {color: alertcolors.EWW, weight: 4, fillOpacity: 0, pane: 'alerts'}).addTo(alerts);
                     polygon.bindPopup(buildAlertPopup(alert, reverseSubarrays(thisItem)[0][0], reverseSubarrays(thisItem)[0][1]), {"autoPan": true, "autoPanPadding": [10, 110], 'maxheight': '400' , 'maxWidth': '380', 'className': 'popup'});
                 }
 
@@ -1188,7 +1337,9 @@ function loadWatches() {
         });
     })
     .catch(error => {
-        console.error('loadWatches() > fetch() > ', error)
+        if (!String(error).includes("SyntaxError: Unexpected token")){
+            console.error('loadWatches() > fetch() > ', error)
+        }
         document.getElementById("infop").innerHTML = "";
     });
 }
@@ -1309,8 +1460,8 @@ setInterval(() => loadOutlook(), 300000);
 
 
 function settingsmode(thisobj, button) {
-    const btns = ['settings-general', 'settings-map', 'settings-alerts', 'settings-radar'];
-    const objects = ['settmenu-general', 'settmenu-map', 'settmenu-alerts', 'settmenu-radar'];
+    const btns = ['settings-general', 'settings-map', 'settings-alerts', 'settings-radar'];//, 'settings-stream'];
+    const objects = ['settmenu-general', 'settmenu-map', 'settmenu-alerts', 'settmenu-radar'];//, 'settmenu-streaming'];
     document.getElementById(button).style.background = '#27beffff';
     document.getElementById(thisobj).style.display = 'flex';
     objects.forEach(function(obj) {
@@ -1361,3 +1512,20 @@ function onMapEvent(e) {
 
 map.on('moveend', onMapEvent);
 map.on('zoomend', onMapEvent);
+
+
+function changeAlertColors(alert, color){
+    alertcolors[alert] = color;
+    updateflashes();
+    loadAlerts();
+    console.log("Polygon color for " + alert + " updated to " + color);
+}
+
+
+// Map radar bound circle - 150mi
+// Draw the circle
+//var circle = L.circle([yourLatitude, yourLongitude], {
+//    radius: 241401,
+//    stroke: 2,
+//    fillOpacity: 0,
+//}).addTo(map)
\ No newline at end of file
diff --git a/beta/sparkradar/style.css b/beta/sparkradar/style.css
index 2e6a1d4..454fd23 100644
--- a/beta/sparkradar/style.css
+++ b/beta/sparkradar/style.css
@@ -39,8 +39,6 @@ body {
     transition: opacity 0.5s !important;
     border-radius: 10px;
     position: absolute;
-    top: 10px;
-    right: 10px;
     z-index: 3;
     box-shadow: #0000008c 3px 3px 9px 0px;
     background-color: rgba(0, 0, 0, 0.5);
@@ -332,11 +330,6 @@ input:focus::-webkit-input-placeholder {
     color: #2a7fffff;
 }
 
-
-
-
-
-
 /* Checkboxes */
 .checkbox-container {
       display: flex;
@@ -396,41 +389,25 @@ input:focus::-webkit-input-placeholder {
     animation-timing-function: step-start;
 }
 
-@keyframes torpdspulse {
-    0% { stroke: red; }
-    50% { stroke: fuchsia; }
-}
-
 .SVRPDSPolygon {
     animation: svrpdspulse 2s infinite;
     animation-timing-function: step-start;
 }
 
-@keyframes svrpdspulse {
-    0% { stroke: orange; }
-    50% { stroke: red; }
-}
-
 .TOREPolygon {
     animation: torepulse 2s infinite;
     animation-timing-function: step-start;
 }
 
-@keyframes torepulse {
-    0% { stroke: #c940ff; }
-    50% { stroke: fuchsia; }
-}
-
 .FFEPolygon {
     animation: ffepulse 2s infinite;
     animation-timing-function: step-start;
 }
 
-@keyframes ffepulse {
-    0% { stroke: green; }
-    50% { stroke: lime; }
-}
-
 .leaflet-control-attribution {
     display: none;
+}
+
+.lightningicon {
+    opacity: 0.5;
 }
\ No newline at end of file