<style type="text/css">
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: normal;
src: url('../fonts/RobotoCondensed-Regular.ttf') format('truetype'),
url('./fonts/RobotoCondensed-Regular.ttf') format('truetype')
}
body {
min-height: 100vh !important;
margin: 0 !important;
}
.ui-content {
padding: 0;
}
.ui-header {
display: none;
}
.ui-listview {
margin-top: 0px !important;
}
#item215 {
padding: 0px !important;
border: 0;
background-image: url("/img/openweather/backgrounds/%ow_fact.image%-winter.jpg") !important;
background-size: cover;
}
.uk-main {
font-family: Roboto Condensed;
font-size: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100vh - 20px);
padding: 10px;
}
.uk-weather {
color: #EAEAEA;
mix-blend-mode: difference;
}
.uk-weather-forecast {
width: 100%;
border-radius: 20px;
background-color: rgba(205, 209, 220, 0.6);
backdrop-filter: blur(5px);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.uk-weather-condition {
font-size: 36px;
margin-top: 20px;
text-transform: capitalize;
}
.uk-weather-temp {
font-size: 116px;
margin-top: 90px;
}
.right-floated {
float: right;
}
.weather-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.weather-row .weather-item {
font-size: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.weather-row .weather-item > img {
width: 35px;
}
</style>
<div class="uk-main">
<div class="uk-weather">
<div style="text-transform: capitalize;">%ThisComputer.weekDay%<span class="right-floated">%ThisComputer.Date%</span>
<div class="uk-weather-condition">%ow_fact.weather_type%</div>
<div class="uk-weather-temp">%ow_fact.temperature%°C</div>
<div>Булгари Парк</div>
</div>
</div>
<div class="uk-weather-forecast">
<div class="weather-row">
<div class="weather-item">
<div id="time1"></div>
<img src="/img/openweather/icons/%ow_fact_1.image%.svg" />
<div>%ow_fact_1.temperature%°C</div>
</div>
<div class="weather-item">
<div id="time2"></div>
<img src="/img/openweather/icons/%ow_fact_2.image%.svg" />
<div>%ow_fact_2.temperature%°C</div>
</div>
<div class="weather-item">
<div id="time3"></div>
<img src="/img/openweather/icons/%ow_fact_3.image%.svg" />
<div>%ow_fact_3.temperature%°C</div>
</div>
<div class="weather-item">
<div id="time4"></div>
<img src="/img/openweather/icons/%ow_fact_4.image%.svg" />
<div>%ow_fact_4.temperature%°C</div>
</div>
<div class="weather-item">
<div id="time5"></div>
<img src="/img/openweather/icons/%ow_fact_5.image%.svg" />
<div>%ow_fact_5.temperature%°C</div>
</div>
<div class="weather-item">
<div id="time6"></div>
<img src="/img/openweather/icons/%ow_fact_6.image%.svg" />
<div>%ow_fact_6.temperature%°C</div>
</div>
</div>
<div class="weather-row">
<div class="weather-item">
<div id="day1name"></div>
<div class="weather-row">
<img id="day1image" src="/img/openweather/icons/01d.svg" style="width: 70px;" />
<div class="weather-item">
<div id="day1max">19°C</div>
<div id="day1min" style="color: rgba(61, 62, 63, 0.32);">19°C</div>
</div>
</div>
</div>
<div class="weather-item">
<div id="day2name"></div>
<div class="weather-row">
<img id="day2image" src="/img/openweather/icons/01d.svg" style="width: 70px;" />
<div class="weather-item">
<div id="day2max">28°C</div>
<div id="day2min" style="color: rgba(61, 62, 63, 0.32);">19°C</div>
</div>
</div>
</div>
<div class="weather-item">
<div id="day3name"></div>
<div class="weather-row">
<img id="day3image" src="/img/openweather/icons/01d.svg" style="width: 70px;" />
<div class="weather-item">
<div id="day3max">28°C</div>
<div id="day3min" style="color: rgba(61, 62, 63, 0.32);">19°C</div>
</div>
</div>
</div>
</div>
<div class="weather-row">
<div class="weather-item">
<div id="day4name"></div>
<div class="weather-row">
<img id="day4image" src="/img/openweather/icons/01d.svg" style="width: 70px;" />
<div class="weather-item">
<div id="day4max">28°C</div>
<div id="day4min" style="color: rgba(61, 62, 63, 0.32);">19°C</div>
</div>
</div>
</div>
<!--<div class="weather-item">
<div id="day5name"></div>
<div class="weather-row">
<img id="day5image" src="/img/openweather/icons/01d.svg" style="width: 70px;" />
<div class="weather-item">
<div id="day5max">28°C</div>
<div id="day5min" style="color: rgba(61, 62, 63, 0.32);">19°C</div>
</div>
</div>
</div>-->
</div>
</div>
</div>
<script type="text/javascript">
$("#time1").html("%ow_fact_1.date%".match(/\d*\:\d*/));
$("#time2").html("%ow_fact_2.date%".match(/\d*\:\d*/));
$("#time3").html("%ow_fact_3.date%".match(/\d*\:\d*/));
$("#time4").html("%ow_fact_4.date%".match(/\d*\:\d*/));
$("#time5").html("%ow_fact_5.date%".match(/\d*\:\d*/));
$("#time6").html("%ow_fact_6.date%".match(/\d*\:\d*/));
$.ajax({
url: '/objects/?script=getWeatherForecast',
type: 'GET',
dataType: "json",
async: false,
success: function (data) {
for (let key in data) {
if (data.hasOwnProperty(key)) {
const value = data[key].max;
$("#day"+key+"name").html(data[key].weekday);
$("#day"+key+"max").html(data[key].max+"°C");
$("#day"+key+"min").html(data[key].min+"°C");
$("#day"+key+"image").attr("src", "/img/openweather/icons/"+data[key].image+".svg");
}
}
}
});
</script>