scrouthtv/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css" />

		<script>
			setInterval(function() {
				var xhttp = new XMLHttpRequest(); // https://w3schools.com/xml/xml_http.asp
				xhttp.onreadystatechange = function() {
					if (this.readyState == 4 && this.status == 200) {
       			// Parse json:
						data = JSON.parse(xhttp.responseText);

						// Set the text to the data:
       			document.getElementById("current").innerHTML = data["leistung"];
    			}
				}

				xhttp.open("GET", "solar.json"); // Optional boolean parameter defaults to true
				xhttp.send();
			}, 10*1000); // Call the inner function once every 10 seconds
		</script>
	</head>
	<body>
    <div id="content">
      <span class="title">Aktuelle Leistung: </span>
      <span class="data" id="current">N/A</span>
    </div>
	</body>
</html>

## style.css
body {
  font-family: "Century Gothic", "Arial Rounded MT Bold", sans-serif;
}

#content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: #ddd;
  padding: 2em;
  line-height: 300%;
  -webkit-box-shadow: 3px 3px 15px 1px #000000;
  box-shadow: 3px 3px 15px 1px #000000;
}

.title {
  display: block;
  font-size: 200%;
}

.data {
  font-size: 300%;
}
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="style.css" />

	<script>
	setInterval(function() {
	var xhttp = new XMLHttpRequest(); // https://w3schools.com/xml/xml_http.asp
	xhttp.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
	// Parse json:
	data = JSON.parse(xhttp.responseText);

	// Set the text to the data:
	document.getElementById("current").innerHTML = data["leistung"];
	}
	}

	xhttp.open("GET", "solar.json"); // Optional boolean parameter defaults to true
	xhttp.send();
	}, 10*1000); // Call the inner function once every 10 seconds
	</script>
	</head>
	<body>
	<div id="content">
	<span class="title">Aktuelle Leistung: </span>
	<span class="data" id="current">N/A</span>
	</div>
	</body>
	</html>
	body {
	font-family: "Century Gothic", "Arial Rounded MT Bold", sans-serif;
	}

	#content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	background-color: #ddd;
	padding: 2em;
	line-height: 300%;
	-webkit-box-shadow: 3px 3px 15px 1px #000000;
	box-shadow: 3px 3px 15px 1px #000000;
	}

	.title {
	display: block;
	font-size: 200%;
	}

	.data {
	font-size: 300%;
	}