Sample Page | Heizmantel-Digitalisierung

	<!DOCTYPE html>
	<html lang=“de-DE„>

	<head>
	<meta http-equiv=“content-type“ content=“text/html; charset=UTF-8“ />
	<meta charset=“UTF-8“ />
	<meta name=“viewport“ content=“width=device-width, initial-scale=1.0“ />
	<title>Die Co2 Uhr tickt</title>
	<style>
	@font-face {
	font-family: ‚AktivGroteskBold‘;
	src: url(‚https://taz.de/lib/share/fonts/AktivGroteskBold/AktivGrotesk_W_Bd.woff2‘) format(‚woff‘);
	font-weight: bold;
	font-style: bold;
	}

	html {
	height: 100%;
	background: rgb(243, 141, 59);
	background: linear-gradient(90deg, rgba(243, 141, 59, 1) 0%, rgba(229, 11, 89, 1) 100%);
	font-family: AktivGroteskBold, tazze, taz_bold, sans-serif;
	}

	body {
	color: #ffffff;
	margin: 0px;
	height: 100%;
	overflow: hidden;
	}

	h3 {
	font-size: 30px;
	margin: 25px;
	font-weight: normal;
	}

	h4 {
	font-size: 20px;
	margin: 20px;
	font-weight: normal;
	}

	#link-klima {
	color: white;
	position: fixed;
	right: 0px;
	bottom: 0px;
	padding: 15px;
	color: white;
	font-size: 22px;
	}

	#link-uhr {
	font-size: 14px;
	position: fixed;
	left: 0px;
	bottom: 0px;
	padding-left: 10px;
	padding-bottom: 8px;
	color: white;
	}

	#link-uhr svg {
	width: 22px;
	fill: white;

	}

	#img-klima {
	position: fixed;
	left: 0px;
	top: 0px;
	padding: 10px;
	width: 100px;

	}

	/* table { */
	/* margin: 11px 0; */
	/* padding: 0;
	border: 0;
	text-align: right; */
	/* } */

	th,
	td {
	/* width: 33px;
	height: 22px; */
	margin: 0;
	padding: 10px;
	text-align: center;
	font-weight: normal;
	width: 100px;
	}



	/* th {
	font-size: 1.85vw;
	} */

	#date-numbers td {
	font-size: 60px;
	}

	#wrapper {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	}

	#main {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	display: table;
	z-index: 50;
	}


	#date-text th {
	padding-top: 0px;
	font-size: 14px;
	}

	@media only screen and (max-width: 800px) {

	h3 {
	font-size: 30px;
	margin: 25px;
	font-weight: normal;
	margin-bottom: 14px;
	}

	h4 {
	font-size: 18px;
	margin: 20px;
	margin-top: 13px;
	margin-bottom: 55px;

	}

	#date-numbers td {
	font-size: 60px;
	}

	/* #date-text th {
	padding-top: 0px;
	font-size: 14px;
	} */

	#img-klima {

	width: 70px;
	}

	th,
	td {

	width: 72px;
	padding: 7px;
	}

	#link-klima {

	font-size: 22px;
	}

	#link-uhr {

	padding-left: 14px;
	padding-bottom: 12px;


	}



	}

	@media only screen and (max-width: 600px) {

	#date-numbers td {
	font-size: 45px;
	}


	}



	@media only screen and (max-width: 430px) {


	#img-klima {
	width: 55px;
	}

	#date-numbers td {
	font-size: 30px;
	}

	/* #date-numbers td {
	font-size: 25px;
	}

	h4 {
	font-size: 16px;
	}

	th,
	td {
	padding: 5px;
	} */

	}

	@media only screen and (max-width: 400px) {


	h3 {
	font-size: 18px;
	margin: 23px;


	margin-bottom: 16px;
	}

	h4 {
	font-size: 12px;
	/* margin: 8px; */
	margin: 10px;
	margin-top: 21px;
	margin-bottom: 55px;
	}

	#date-numbers td {
	font-size: 29px;
	}

	#date-text th {
	padding-top: 0px;
	font-size: 11px;
	}

	th,
	td {
	padding: 1px;
	width: 60px;
	}

	#img-klima {
	width: 35px;
	}

	#link-klima {
	font-size: 15px;
	}

	#link-uhr {
	padding-left: 10px;
	padding-bottom: 8px;
	}

	table {
	padding: 3px;
	}
	}


	@media only screen and (max-height: 241px) and (min-width: 401px) {
	h3 {
	font-size: 18px;
	margin: 23px;


	margin-bottom: 16px;
	}

	h4 {
	font-size: 12px;
	/* margin: 8px; */
	margin: 10px;
	margin-top: 21px;
	margin-bottom: 55px;
	}

	#date-numbers td {
	font-size: 29px;
	}

	#date-text th {
	padding-top: 0px;
	font-size: 11px;
	}

	th,
	td {
	padding: 1px;
	width: 60px;
	}

	#img-klima {
	width: 35px;
	}

	#link-klima {
	font-size: 15px;
	}

	#link-uhr {
	padding-left: 10px;
	padding-bottom: 8px;
	}

	table {
	padding: 3px;
	}

	#img-klima {
	width: 50px;
	}


	}
	</style>
	</head>

	<body>
	<div id=“main„>
	<div id=“wrapper“ align=“center„>
	<!– <h1 id=“global-temp“>CO<sub>2</sub> emissions (tonnes/sec)</h1>
	<div id=“global-temp-container“><span id=“currentrate“ class=“bold grad“>1’337</span></div> –>
	<h3 id=“time-to-two„>Die CO<sub>2</sub>-Uhr tickt</h3>
	<div>
	<table>
	<tbody>
	<tr id=“date-numbers„>
	<td class=“years„>2</td>
	<td class=“months„>12</td>
	<td class=“days„>217</td>
	<td class=“hours„>17</td>
	<td class=“minutes„>14</td>
	<td class=“seconds„>37</td>
	<!– <td id=“milliseconds“>76</td> –>
	</tr>
	<tr id=“date-text„>
	<th class=“years„>Jahre</th>
	<th class=“months„>Monate</th>
	<th class=“days„>Tage</th>
	<th class=“hours„>Stunden</th>
	<th class=“minutes„>Minuten</th>
	<th class=“seconds„>Sekunden</th>
	<!– <th> </th> –>
	</tr>
	</tbody>
	</table>
	</div>
	<!– <h4>bleiben, bis das CO<sub>2</sub>-Budget verbraucht ist, nach dem sich die Erde um 1,5-Grad erhitzt.</h4> –>
	<h4>bleiben, bis das globale CO<sub>2</sub>-Budget für das Erreichen des 1,5-Grad-Limits aufgebraucht ist.
	</h4>

	<!– <h1 id=“tonnes“>CO<sub>2</sub> budget left (tonnes)</h1> –>
	<!– <div id=“carbontonnes“>329.017.715.251</div> –>
	</div>

	<a id=“link-uhr“ target=“_blank“ href=“https://taz.de/co2uhr„>
	<svg xmlns=“http://www.w3.org/2000/svg“ viewBox=“0 0 512 512„>
	<path
	d=“M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z“ />
	</svg>
	</a>
	<a id=“link-klima“ target=“_blank“ href=“https://taz.de/klima„>▶ Alles zur Klimakrise</a>
	<a href=“https://taz.de/klima“ target=“_blank„><img id=“img-klima“ src=“https://taz.de/Projekt/co2uhr/logo.png„
	alt=““ /></a>


	</div>
	</div>
	<script>
	setInterval(myTimer, 1000); // months in JS Date() starts with 0 – so Dec is 11 not 12
	var secondsPerYear = 3600 * 24 * 365.25;
	var startDate = new Date(2021, 00, 01, 00, 00, 00);
	var initialAnnualEmissions = 42.2 * 1e9;
	var annualGrowthRate = 1.0; // 1.022;
	var totalBudget = 361 * 1e9;


	function st(selector, text) {
	document.querySelector(selector).innerHTML = text;
	}

	function myTimer() {
	// st(‚#currentrate‘,
	// getCurrentEmissionsPerS()
	// .toFixed(0)
	// .toLocaleString()
	// .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, „st1′“)
	// );

	// document.getElementById(„p1“).innerHTML =
	var dd = countdownTime(getDoomTime()).split(‚ ‚).reverse();

	if (6 < dd.length) st(‚#date-numbers .years‘, parseInt(dd[6]));
	else st(‚#date-numbers .years‘, ‚0‘);
	if (5 < dd.length) st(‚#date-numbers .months‘, parseInt(dd[5]));
	else st(‚#date-numbers .months‘, ‚0‘);
	if (4 < dd.length) st(‚#date-numbers .days‘, parseInt(dd[4]));
	else st(‚#date-numbers .days‘, ‚0‘);
	st(‚#date-numbers .hours‘, parseInt(dd[3]));
	st(‚#date-numbers .minutes‘, parseInt(dd[2]));
	st(‚#date-numbers .seconds‘, parseInt(dd[1]));

	if (parseInt(dd[6]) !== 1) st(‚#date-text .years‘, „Jahre“);
	else st(‚#date-text .years‘, ‚Jahr‘);

	if (parseInt(dd[5]) !== 1) st(‚#date-text .months‘, „Monate“);
	else st(‚#date-text .months‘, ‚Monat‘);

	if (parseInt(dd[4]) !== 1) st(‚#date-text .days‘, „Tage“);
	else st(‚#date-text .days‘, ‚Tage‘);

	if (parseInt(dd[3]) !== 1) st(‚#date-text .hours‘, „Stunden“);
	else st(‚#date-text .hours‘, ‚Stunde‘);

	if (parseInt(dd[2]) !== 1) st(‚#date-text .minutes‘, „Minuten“);
	else st(‚#date-text .minutes‘, ‚Minute‘);

	// if (parseInt(dd[1]) !== 1) st(‚#date-text .seconds‘, „Sekunden“);
	// else st(‚#date-text .seconds‘, ‚Sekunde‘)


	// var out = [];
	// out.push(getBudgetLeft().toFixed(0));
	// out.join(„“)
	// st(„#carbontonnes“,out.toLocaleString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, „st1.“));
	}

	myTimer();

	function countdownTime(target) {
	var now = new Date(),
	yd,
	md,
	dd,
	hd,
	nd,
	sd,
	ms,
	out = [];
	yd = target.getFullYear() – now.getFullYear();
	md = target.getMonth() – now.getMonth();
	dd = target.getDate() – now.getDate();
	hd = target.getHours() – now.getHours();
	nd = target.getMinutes() – now.getMinutes();
	sd = target.getSeconds() – now.getSeconds();

	// negatives need to be dealt with regardless whether the deadline has passed!
	while (true) {
	if (md < 0) {
	yd–;
	md += 12;
	}
	if (dd < 0) {
	md–;
	dd += getDaysInMonth(now.getMonth() – 1, now.getFullYear());
	}
	if (hd < 0) {
	dd–;
	hd += 24;
	}
	if (nd < 0) {
	hd–;
	nd += 60;
	}
	if (sd < 0) {
	nd–;
	sd += 60;
	}
	if (md >= 0 && yd >= 0 && dd >= 0 && hd >= 0 && nd >= 0 && sd >= 0) break;
	}

	if (true)
	//(yd > 0)
	out.push(yd + ‚y ‚ + (yd == 1 ? “ : “));
	if (md < 10 && md >= 0) out.push(‚0‘ + md + ‚m ‚ + (md == 1 ? “ : “));
	else if (md >= 10) out.push(md + ‚m ‚);
	if (dd < 10 && dd >= 0) out.push(‚0‘ + dd + ‚d ‚ + (dd == 1 ? “ : “));
	else if (dd >= 10) out.push(dd + ‚d ‚);
	if (Math.abs(hd) < 10 && Math.abs(hd) >= 0) out.push(‚0‘ + hd + ‚h ‚ + (hd == 1 ? “ : “));
	else if (hd >= 10) out.push(hd + ‚h ‚);
	else console.log(hd);
	if (nd < 10 && nd >= 0) out.push(‚0‘ + nd + „‚ “ + (nd == 1 ? “ : “));
	else if (nd >= 10) out.push(nd + „‚ „);
	if (sd < 10 && sd >= 0) out.push(‚0‘ + sd + „“ “ + (sd == 1 ? “ : “));
	else if (sd >= 10) out.push(sd + „“ „);

	if (target.getTime() – now.getTime() > 0) {
	ms = 99 – now.getMilliseconds().toString().slice(0, 2);
	} else {
	ms = now.getMilliseconds().toString().slice(0, 2);
	}
	if (ms < 10 && ms >= 0) out.push(‚0‘ + ms + “ + (ms == 1 ? “ : “));
	else if (ms >= 10) out.push(ms + “);

	return out.join(“);
	}

	function getDaysInMonth(month, year) {
	if (typeof year == ‚undefined‘) year = 2015;
	// any non-leap-year works as default
	var currmon = new Date(year, month);
	var nextmon = new Date(year, month + 1);
	return Math.floor((nextmon.getTime() – currmon.getTime()) / (24 * 3600 * 1000));
	}

	function sPassed() {
	var now = new Date();
	var diff = [];
	diff = Math.floor((now.getTime() – startDate.getTime()) / 1000);
	return diff;
	}

	function getCurrentEmissionsPerS() {
	res =
	(initialAnnualEmissions / secondsPerYear) *
	Math.pow(annualGrowthRate, sPassed(startDate) / secondsPerYear);
	return res;
	}

	function getBudgetLeft() {
	budgetUsed = (sPassed(startDate) / secondsPerYear) * initialAnnualEmissions;
	res = totalBudget – budgetUsed;
	return res;
	}

	function getDoomTime() {
	yearsRemaining = totalBudget / initialAnnualEmissions;
	d = new Date(startDate.getTime() + yearsRemaining * secondsPerYear * 1000);
	return d;
	}
	</script>
	</body>

	</html>