Da ja öfter schon nach soetwas gefragt wurde, hier meine beiden Dateien:
klima.htm
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Klima</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Cache-control" content="public,max-age=86400">
<link rel="stylesheet" type="text/css" href="klima.css">
<script>
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
window.onload = timedRefresh(60000);
</script>
</head>
<body>
<div class="balken kopfzeile" >
<div class="text">
<span class="tittel">
Raumklima
</span>
<span class="menu">
<span class="menupunkt">
Licht
</span>
<span class="menupunkt">
<a href="index.htm">Szenen</a>
</span>
</span>
</div>
</div>
<div id="Raumklimadaten"></div>
<script>
var raumdaten = {
"Wohnzimmer":"channel7",
"Garten":"channel8",
"Schlafzimmer":"channel6",
"Bad":"channel9"
};
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
for (x in raumdaten) {
kanal = raumdaten[x];
if (myObj[kanal].temperature == "")
{
document.getElementById("Raumklimadaten").innerHTML += "<div class='raum balken'><div class='text'><span class='raumname'>" + x + " :</span> keine Daten</div></div>";
}
else
{
document.getElementById("Raumklimadaten").innerHTML += "<div class='raum balken'><div class='text'><span class='raumname'>" + x + " :</span> " + myObj[kanal].temperature + "°C / " + myObj[kanal].humidity + "%</div></div>";
}
};
};
};
xmlhttp.open("GET", "weather.json", true);
xmlhttp.send();
</script>
<div class="wetter">
<div id="cont_3cbbfaa59c0576f6944cb7edfc4cc9c4"><script type="text/javascript" async src="https://www.daswetter.com/wid_loader/3cbbfaa59c0576f6944cb7edfc4cc9c4"></script></div>
</div>
</body>
</html>
Code: Alles auswählen
body {
font-family: 'Titillium Web',sans-serif;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQIW2NkwAQ+jGhiPgwMDFuQBcECIEUwQbgATBBFACQIALmgBFKywiuGAAAAAElFTkSuQmCC);
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
color:white;
}
.balken
{
position: relative;
z-index: 10;
height: 60px;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: black;
color: white;
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-size: 36px;
border-radius: 20px;
margin:10px;
}
.kopfzeile
{
background: linear-gradient(to bottom,#a8e2a8 0%,#476b47 100%);
}
.raum
{
background: linear-gradient(to bottom,#ffaa00 0%,#ac7300 100%);
}
.text
{
line-height: 60px;
margin-left: 20px;
}
.tittel
{
float:left;
}
.menu
{
float:right;
margin-right: 20px;
}
.menupunkt
{
float:inherit;
padding-left: 20px;
padding-right: 20px;
margin-right: 0px;
border-left-width: 5px;
border-left-style: solid;
}
.wetter
{
position: relative;
z-index: 10;
padding: 20px;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: black;
color: white;
-webkit-tap-highlight-color: rgba(0,0,0,0);
background: linear-gradient(to bottom,#ffaa00 0%,#ac7300 100%);
font-size: 36px;
border-radius: 20px;
margin: 10px;
}
span.raumname
{
display:inline-block;
width:250px;
}