djmarland/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>TubeAlert</title>
    <style>
        body {  margin: 0;  font-family: sans-serif;  }
        .lines {  list-style: none;  margin: 0;  padding: 0;  }
        .line {  display: block;  padding: 16px;  background: black;  color: white;  }
        .line__name {  font-size: 1.2rem;  }
        .line--bakerloo-line {  background: #AE6118;  }
        .line--central-line {  background: #E41F1F;  }
        .line--circle-line {  background: #F8D42D;  color: #111;  }
        .line--district-line {  background: #007229;  }
        .line--hammersmith-city-line {  background: #E899A8;  color: #111;  }
        .line--jubilee-line { background: #686E72;  }
        .line--metropolitan-line {  background: #893267;  }
        .line--northern-line {  background: #000000;  }
        .line--piccadilly-line {  background: #0450A1;  }
        .line--victoria-line {  background: #009FE0;  }
        .line--waterloo-city-line {  background: #70C3CE;  color: #111;  }
        .line--dlr {  background: #00BBB4;  }
        .line--london-overground {  background: #e86a10;  }
        .line--tfl-rail {  background: #0019a8;  }
        .line__disrupted {  float: right;  }
    </style>
</head>
<body>
    <ul class="lines" id="js-results"></ul>
<script>
    (function() {
        fetch('/all.json').then(r => r.json())
            .then(data => {
                const list = document.getElementById('js-results');
                data.forEach((item) => {
                    list.innerHTML += '<li class="line line--' + item.urlKey + '">' +
                        '<h2 class="line__name">' + item.shortName + '</div>' +
                        (item.isDisrupted ? '<div class="line__disrupted">X</div>' : '') +
                    '</li>';
                });
            });
    })();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>TubeAlert</title>
	<style>
	body { margin: 0; font-family: sans-serif; }
	.lines { list-style: none; margin: 0; padding: 0; }
	.line { display: block; padding: 16px; background: black; color: white; }
	.line__name { font-size: 1.2rem; }
	.line--bakerloo-line { background: #AE6118; }
	.line--central-line { background: #E41F1F; }
	.line--circle-line { background: #F8D42D; color: #111; }
	.line--district-line { background: #007229; }
	.line--hammersmith-city-line { background: #E899A8; color: #111; }
	.line--jubilee-line { background: #686E72; }
	.line--metropolitan-line { background: #893267; }
	.line--northern-line { background: #000000; }
	.line--piccadilly-line { background: #0450A1; }
	.line--victoria-line { background: #009FE0; }
	.line--waterloo-city-line { background: #70C3CE; color: #111; }
	.line--dlr { background: #00BBB4; }
	.line--london-overground { background: #e86a10; }
	.line--tfl-rail { background: #0019a8; }
	.line__disrupted { float: right; }
	</style>
	</head>
	<body>
	<ul class="lines" id="js-results"></ul>
	<script>
	(function() {
	fetch('/all.json').then(r => r.json())
	.then(data => {
	const list = document.getElementById('js-results');
	data.forEach((item) => {
	list.innerHTML += '<li class="line line--' + item.urlKey + '">' +
	'<h2 class="line__name">' + item.shortName + '</div>' +
	(item.isDisrupted ? '<div class="line__disrupted">X</div>' : '') +
	'</li>';
	});
	});
	})();
	</script>
	</body>
	</html>