Oscar's Weather🌧️☁

Tornado!!!!

Starlink map

SpaghettiModels.com

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="/favicon.png">
    <title>Oscar!</title>
    <style>
        .overlay {
            position:  relative;
            z-index: 100;
        }
        .radar {
        }
        #forecast {
            flex: 1;
            display: flex;
            overflow: auto;
        }
        #forecast ul {
            display: flex;
            min-height: min-content;
            flex-direction: row;
            /*flex-wrap: wrap; */
            /*width: 100%;*/
        }
        
        #forecast li {
            background: white;
            border-radius: 10px;
            border: 2px solid gray;
            list-style: none;
            display: inline-block;
            width: calc(100% / 14);
            text-align: center;
            padding: 2px;
        }
        .detailedforecast {
            font-size: 0.8em;
        }
        .radar-loop {
            height: 390px;
        }
    </style>
    <style type="text/css">
                body {
            font-family: verdana;
            background-color: black;
            height: 100vh;
            width: 100vw;
            position: relative;
        }

.center {
            height: 2px;
            width: 2px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            animation: round 4s infinite linear;
        }

.particle {
            height: 100px;
            width: 100px;
            border-radius: 100px;
            border-left: 2px solid white;
            border-top: 2px solid transparent;
            border-top-color: transparent!important;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(var(--start));
        }

@keyframes round {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

.spinnytext {
            color: white;
            font-family: monospace;
            font-size: 5rem;
        }

a {
            color: white;
            margin: 3px;
        }
    </style>
</head>

<body>
    <div id="tornado-container" class="center">
        <div style="--start:95deg" class="particle"><span class="spinnytext">Tornado!</span></div>
    </div>
    <div class="overlay">
    <a href="https://radar.weather.gov/?settings=v1_eyJhZ2VuZGEiOnsiaWQiOiJuYXRpb25hbCIsImNlbnRlciI6Wy04OS4wMTksNDEuOTY1XSwibG9jYXRpb24iOlstODguMzM2LDQyLjIyMV0sInpvb20iOjkuNDI0NzEzMjYxNzE1MjU4LCJsYXllciI6ImNyZWZfcWNkIn0sImFuaW1hdGluZyI6dHJ1ZSwiYmFzZSI6ImRhcmtjYW52YXMiLCJhcnRjYyI6ZmFsc2UsImNvdW50eSI6dHJ1ZSwiY3dhIjpmYWxzZSwicmZjIjpmYWxzZSwic3RhdGUiOnRydWUsIm1lbnUiOmZhbHNlLCJzaG9ydEZ1c2VkT25seSI6ZmFsc2UsIm9wYWNpdHkiOnsiYWxlcnRzIjowLjgsImxvY2FsIjowLjYsImxvY2FsU3RhdGlvbnMiOjAuOCwibmF0aW9uYWwiOjAuNn19"><img class="radar" src="https://radar.weather.gov/ridge/standard/CONUS_loop.gif"></a> <img src="https://radar.weather.gov/ridge/standard/KLOT_loop.gif" class="radar-loop"> <img src="https://radar.weather.gov/ridge/standard/KMKX_loop.gif" class="radar-loop"> <BR>
    
<BR>
<a href="https://satellitemap.space/">Starlink map</a>
    <div id="forecast"></div>
<a href="https://spaghettimodels.com/">SpaghettiModels.com</a><BR>
<img src="https://www.wpc.ncep.noaa.gov/images/wwd/radnat/natrad_loop.gif"><BR>
    <span id="noaaforecast"></span><img src="https://graphical.weather.gov/GraphicalNDFD.php?width=720&timezone=CDT&sector=CONUS&element=maxt&n=1"> <img src="https://graphical.weather.gov/GraphicalNDFD.php?width=720&timezone=CST&sector=CONUS&element=mint&n=1"> <img src="https://graphical.weather.gov/GraphicalNDFD.php?width=720&timezone=CST&sector=CONUS&element=sky&n=1"><BR>
</div>
<script>
    const center = document.getElementById("tornado-container");
    const COLORS = [
        "#FF0000",
        "#0AFFDD",
        "#FF5E00",
        "#0BFFC7",
        "#0BFFB3",
        "#08FFA3",
        "#0BFF8D",
        "#FF8A00",
        "#0BFF8D",
        "#0FFF67",
        "#FFD000",

];

for (let i = 0; i < 160; i++) {
        let particle = document.createElement("div");
        particle.setAttribute("class", "particle");
        particle.style.setProperty("--start", `${Math.floor(Math.random() * 360)}deg`)

let rheight = i * 10 + 10;
        rheight = `${rheight}px`
        particle.style.height = rheight;
        particle.style.width = rheight;
        particle.style.borderRadius = rheight;
        particle.style.borderColor = COLORS[Math.floor(Math.random() * COLORS.length)];
        center.appendChild(particle);

}
</script>
<script>
//prevent page cache
document.body.onunload=function(){}

document.getElementById("noaaforecast").innerHTML = `<img src="https://www.wpc.ncep.noaa.gov/noaa/noaad1.gif?${Date.now()}">`

getWeather()
async function getWeather(){
  
  const weatherUrl = 'https://api.weather.gov/gridpoints/LOT/50,88/forecast'
    
  const forecast = document.getElementById("forecast")
  
  try {
    const response = await fetch(weatherUrl)

if (!response.ok) {
        forecast.innerHTML = 'Error fetching forecast! <button onclick="getWeather()">Try Again</button>'
        return
    }
      try{
        const respJson = await response.json()
        if(!respJson.properties || !respJson.properties.periods){
            forecast.innerHTML = 'Error fetching forecast! <button onclick="getWeather()">Try Again</button>'
            return;
        }
        const f = respJson.properties.periods

let html = '<ul>'
        let i = 0;
        for (const period in f) {
            let p = f[period]
            console.log(p)
            html += `<li>${p.name}<br/>${p.temperature}<br/><img src="${p.icon}"><br/><span class="detailedforecast">${p.detailedForecast}</span></li>`
        }
        html += '</ul>'
        console.log(html)
        forecast.innerHTML = html
        
      }catch(err){
        console.log('invalid json',err)
      }

} catch (error) {
    forecast.innerHTML =  `<B>Error</B> Calling API ${weatherUrl}<BR\><PRE>${error}</PRE>`
  }
  
}

</script>
<style type="text/css">
.cookieclicker {
    position: relative;
}
#cookieimage, #cookieclicks {
    position: absolute;
}
#cookieimage{
}
#cookieclicks {
    color: #0f0;
    z-index: 10;
    font-size: 4rem;
}
</style>
<div class="cookieclicker">
<div id="cookieclicks">0</div>
<img id="cookieimage" onclick="cookieClick()" src="perfectCookie.png">
</BR>
<script>
    let localStorageKey = "cookieclicks"
    let cookieclicks = localStorage.getItem(localStorageKey) || 0;
    function cookieClick(){
        cookieclicks++
        updateCookieClickText(cookieclicks)
        localStorage.setItem(localStorageKey, cookieclicks);
    }
    function updateCookieClickText(clicks){
        document.getElementById("cookieclicks").innerHTML = clicks
    }
    updateCookieClickText(cookieclicks)
</script>
</body>
</html>