|
@@ -3,83 +3,112 @@
|
|
|
<head>
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
<meta charset="utf-8">
|
|
|
<style>
|
|
<style>
|
|
|
- *{margin:0;padding:0;box-sizing:border-box}
|
|
|
|
|
|
|
+ *{margin:0;padding:0;box-sizing:border-box};
|
|
|
html, body{
|
|
html, body{
|
|
|
height: 100vh;
|
|
height: 100vh;
|
|
|
|
|
+ width: 100vw;
|
|
|
|
|
+ background: black;
|
|
|
|
|
+ }
|
|
|
|
|
+ .grid{
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
|
|
+ grid-template-rows: 1fr 1fr;
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+ width: 100vw;
|
|
|
|
|
+ grid-template-areas:
|
|
|
|
|
+ "topLeft topRight"
|
|
|
|
|
+ "bottom bottom";
|
|
|
|
|
+ gap: 2px;
|
|
|
}
|
|
}
|
|
|
- body{
|
|
|
|
|
|
|
+ .grid > *{
|
|
|
background: black;
|
|
background: black;
|
|
|
- color: white;
|
|
|
|
|
|
|
+ min-height: 0;
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+ .topLeft{
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ grid-area: topLeft;
|
|
|
|
|
+ color: white;
|
|
|
}
|
|
}
|
|
|
- .dateTime{
|
|
|
|
|
|
|
+ .topRight{
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- font-size: 3em;
|
|
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ grid-area: topRight;
|
|
|
|
|
+ }
|
|
|
|
|
+ .bottom{
|
|
|
|
|
+ grid-area: bottom;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ #date{
|
|
|
|
|
+ font-size: 2.2em;
|
|
|
|
|
+ }
|
|
|
|
|
+ #time{
|
|
|
|
|
+ font-size: 1.8em;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ .weather{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+ width: 100%;
|
|
|
}
|
|
}
|
|
|
.weatherBlock{
|
|
.weatherBlock{
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
|
|
|
|
+ justify-content: space-around;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
- padding: 45px 15px 25px 15px;
|
|
|
|
|
- border: 1px solid white;
|
|
|
|
|
- height: 250px;
|
|
|
|
|
|
|
+ padding-top: 35px;
|
|
|
|
|
+ width: 50%;
|
|
|
}
|
|
}
|
|
|
.weatherBlock h2{
|
|
.weatherBlock h2{
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- top: 15px;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- font-size: 2em;
|
|
|
|
|
- text-decoration: underline;
|
|
|
|
|
- }
|
|
|
|
|
- .weatherBlock img{
|
|
|
|
|
- height: 10vw;
|
|
|
|
|
- width: 10vw;
|
|
|
|
|
}
|
|
}
|
|
|
- .condition{
|
|
|
|
|
- margin-right: 35px;
|
|
|
|
|
|
|
+ .topRight img{
|
|
|
|
|
+ height: 95%;
|
|
|
}
|
|
}
|
|
|
- .conditionText{
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- }
|
|
|
|
|
- .weatherInfo{
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
|
|
+ .bottom iframe{
|
|
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
- padding: 15px 0;
|
|
|
|
|
- }
|
|
|
|
|
- .weatherInfo p{
|
|
|
|
|
- font-size: 1.3em;
|
|
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
|
- <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 class="grid">
|
|
|
|
|
+ <div class="topLeft">
|
|
|
|
|
+ <div class="dateTime">
|
|
|
|
|
+ <p id="date"></p>
|
|
|
|
|
+ <p id="time"></p>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="weatherInfo">
|
|
|
|
|
- <p id="temp"></p>
|
|
|
|
|
- <p id="feels"></p>
|
|
|
|
|
- <p id="wind"></p>
|
|
|
|
|
- <p id="humidity"</p>
|
|
|
|
|
|
|
+ <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>
|
|
</div>
|
|
|
|
|
+ <div class="topRight">
|
|
|
|
|
+ <img id="radar" src="https://radar.weather.gov/ridge/standard/KLTX_0.gif" alt="radar">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="bottom">
|
|
|
|
|
+ <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>
|
|
</div>
|
|
|
</body>
|
|
</body>
|
|
|
<script>
|
|
<script>
|
|
@@ -128,9 +157,16 @@
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ const getRadarImage = () =>{
|
|
|
|
|
+ const img = document.getElementById("radar");
|
|
|
|
|
+ const base = img.src.split("?")[0];
|
|
|
|
|
+ img.src = base + "?t=" + Date.now();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
getWeather();
|
|
getWeather();
|
|
|
setInterval(getWeather, 60000);
|
|
setInterval(getWeather, 60000);
|
|
|
setDateTime();
|
|
setDateTime();
|
|
|
setInterval(setDateTime, 10000);
|
|
setInterval(setDateTime, 10000);
|
|
|
|
|
+ setInterval(getRadarImage, 10 * 1000);
|
|
|
</script>
|
|
</script>
|
|
|
</html>
|
|
</html>
|
