| 123 |
- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style>*{margin:0;padding:0;box-sizing:border-box}html,body{height:100vh;width:100vw;background:#000}.grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:100vh;width:100vw;grid-template-areas:"topLeft topRight" "bottomLeft bottomRight";gap:2px}.grid>*{background:#000;min-height:0;min-width:0;overflow:hidden}.topLeft{display:flex;flex-direction:column;justify-content:space-around;align-items:center;grid-area:topLeft;color:#fff}.topRight{display:flex;align-items:center;justify-content:center;grid-area:topRight}.bottomRight{grid-area:bottomRight}#date{font-size:2.2em}#time{font-size:1.8em;text-align:center}.weather{display:flex;justify-content:space-around;width:100%}.weatherBlock{display:flex;justify-content:space-around;align-items:center;position:relative;padding-top:35px;width:50%}.weatherBlock h2{position:absolute;top:0;left:0;width:100%;text-align:center}.topRight img{height:95%}.bottomRight iframe{width:100%;height:100%}
- </style> </head> <body> <div class="grid"> <div class="topLeft"> <div class="dateTime"> <p id="date"></p> <p id="time"></p> </div> <div class="weather"> <div id="currentWeather" class="weatherBlock"> <h2>Current Weather</h2> <div class="condition"> <img> <p class="conditionText"></p> </div> <div class="weatherInfo"> <p id="temp"></p> <p id="feels"></p> <p id="wind"></p> <p id="humidity"></p> </div> </div> </div> </div> <div class="topRight"> <img id="radar" src="https://radar.weather.gov/ridge/standard/KLTX_0.gif" alt="radar"> </div> <div class="bottomLeft"> <table> <thead id="forecastHead"> <tr> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody id="forecastBody"> <tr> <td>Temp (°F)</td> <td></td> <td></td> <td></td> </tr> <tr> <td>Humidity</td> <td></td> <td></td> <td></td> </tr> <tr> <td>Chance Of Rain</td> <td></td> <td></td> <td></td> </tr> <tr> <td>Precipitation (inches)</td> <td></td> <td></td> <td></td> </tr> <tr> <td>Max Wind (MPH)</td> <td></td> <td></td> <td></td> </tr> <tr> <td>Sunrise</td> <td></td> <td></td> <td></td> </tr> <tr> <td>Sunset</td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> <div class="bottomRight"> <iframe src="https://www.youtube-nocookie.com/embed/4nMfRpesYfw?si=O9Up2lQKNo8v9gi2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div> </div> <script>(()=>{var d=()=>{let t=new Date;document.getElementById("date").textContent=t.toLocaleDateString("en-US",{weekday:"long",year:"numeric",month:"long",day:"numeric"}),document.getElementById("time").textContent=t.toLocaleTimeString("en-US",{hour:"numeric",minute:"2-digit",hour12:!0})},m=t=>{let c=document.getElementById("forecastHead").children[0],n=document.getElementById("forecastBody");for(let e=0;e<t.length;e++){let r=new Date(t[e].date);c.children[e+1].textContent=r.toLocaleDateString("en-US",{month:"short",day:"numeric",year:"2-digit"}),n.children[0].children[e+1]=`${t[e].day.mintemp_f} - ${t[e].day.maxtemp_f}`,n.children[1].children[e+1]=`${t[e].day.avghumidity}%`,n.children[2].children[e+1]=`${t[e].day.daily_chance_of_rain}%`,n.children[3].children[e+1]=t[e].day.totalprecip_in,n.children[4].children[e+1]=t[e].day.maxwind_mph,n.children[5].children[e+1]=t[e].astro.sunrise,n.children[6].children[e+1]=t[e].astro.sunset}},i=()=>{fetch("https://api.weatherapi.com/v1/forecast.json?key=519f51763fa8477b864184849251502&q=29576&days=3&aqi=no",{method:"get"}).then(t=>t.json()).then(t=>{console.log(t);let c=`Temperature: ${t.current.temp_f}\xB0F`;document.getElementById("temp").textContent=c;let n=`Feels Like: ${t.current.feelslike_f}\xB0F`;document.getElementById("feels").textContent=n;let e=document.querySelector("#currentWeather img");e.src=`https:${t.current.condition.icon}`,e.alt=t.current.condition.text;let r=document.querySelector("#currentWeather .conditionText");r.textContent=t.current.condition.text;let o=`Wind: ${t.current.wind_mph}mph ${t.current.wind_dir}`;document.getElementById("wind").textContent=o;let a=`Humidity: ${t.current.humidity}%`;document.getElementById("humidity").textContent=a,m(t.forecast.forecastday)}).catch(t=>{console.log(t)})},l=()=>{let t=document.getElementById("radar"),c=t.src.split("?")[0];t.src=c+"?t="+Date.now()};i();setInterval(i,6e4);d();setInterval(d,1e4);setInterval(l,10*1e3);})();
- </script> </body> </html>
|
