stevehjohn/mirror.htm

## mirror.htm
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Mirror Mirror on the Wall</title>
    <link href='https://fonts.googleapis.com/css?family=Pacifico|Open+Sans' rel='stylesheet' type='text/css' />
    <style>
        body, h2, ul, li {
            background-color: black;
            color: white;
            font-family: 'Open Sans', sans-serif;
            font-size: 30px;
            text-indent: 0;
            list-style-type: none;
            list-style-position: inside;
            margin: 0;
            padding: 0;
        }

        .message {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
        }

        .weather {
            position: absolute;
            top: 0;
            right: 0;
        }

        .todo {
            position: absolute;
            left: 0;
            top: 35%;
            width: 100%;
            text-align: center;
        }

        .news {
            position: absolute;
            left: 0;
            top: 42%;
            width: 100%;
            text-align: center;
        }

        @font-face {
            font-family: 'weather';
            src: url("artill_clean_icons.htm") format("opentype");
        }

        #weather h1 {
            font-family: 'weather';
            font-size: 120px;
            margin: 0;
            padding: 0;
        }

            #weather h1.icon-0:before {
                content: ":";
            }

            #weather h1.icon-1:before {
                content: "p";
            }

            #weather h1.icon-2:before {
                content: "S";
            }

            #weather h1.icon-3:before {
                content: "Q";
            }

            #weather h1.icon-4:before {
                content: "S";
            }

            #weather h1.icon-5:before {
                content: "W";
            }

            #weather h1.icon-6:before {
                content: "W";
            }

            #weather h1.icon-7:before {
                content: "W";
            }

            #weather h1.icon-8:before {
                content: "W";
            }

            #weather h1.icon-9:before {
                content: "I";
            }

            #weather h1.icon-10:before {
                content: "W";
            }

            #weather h1.icon-11:before {
                content: "I";
            }

            #weather h1.icon-12:before {
                content: "I";
            }

            #weather h1.icon-13:before {
                content: "I";
            }

            #weather h1.icon-14:before {
                content: "I";
            }

            #weather h1.icon-15:before {
                content: "W";
            }

            #weather h1.icon-16:before {
                content: "I";
            }

            #weather h1.icon-17:before {
                content: "W";
            }

            #weather h1.icon-18:before {
                content: "U";
            }

            #weather h1.icon-19:before {
                content: "Z";
            }

            #weather h1.icon-20:before {
                content: "Z";
            }

            #weather h1.icon-21:before {
                content: "Z";
            }

            #weather h1.icon-22:before {
                content: "Z";
            }

            #weather h1.icon-23:before {
                content: "Z";
            }

            #weather h1.icon-24:before {
                content: "E";
            }

            #weather h1.icon-25:before {
                content: "E";
            }

            #weather h1.icon-26:before {
                content: "3";
            }

            #weather h1.icon-27:before {
                content: "a";
            }

            #weather h1.icon-28:before {
                content: "A";
            }

            #weather h1.icon-29:before {
                content: "a";
            }

            #weather h1.icon-30:before {
                content: "A";
            }

            #weather h1.icon-31:before {
                content: "6";
            }

            #weather h1.icon-32:before {
                content: "1";
            }

            #weather h1.icon-33:before {
                content: "6";
            }

            #weather h1.icon-34:before {
                content: "1";
            }

            #weather h1.icon-35:before {
                content: "W";
            }

            #weather h1.icon-36:before {
                content: "1";
            }

            #weather h1.icon-37:before {
                content: "S";
            }

            #weather h1.icon-38:before {
                content: "S";
            }

            #weather h1.icon-39:before {
                content: "S";
            }

            #weather h1.icon-40:before {
                content: "M";
            }

            #weather h1.icon-41:before {
                content: "W";
            }

            #weather h1.icon-42:before {
                content: "I";
            }

            #weather h1.icon-43:before {
                content: "W";
            }

            #weather h1.icon-44:before {
                content: "a";
            }

            #weather h1.icon-45:before {
                content: "S";
            }

            #weather h1.icon-46:before {
                content: "U";
            }

            #weather h1.icon-47:before {
                content: "S";
            }

        #date {
            float: left;
            padding-top: 50px;
        }

        .rss {
            margin-top: 20px;
        }

            .rss, .rss ul, .rss ul li {
                font-size: 16px;
                text-align: left;
            }

                .rss a {
                    text-decoration: none;
                    color: white;
                }

                .rss .itemTitle {
                    font-weight: bold;
                }

                .rss li {
                    margin-bottom: 20px;
                }

                .rss img {
                    display: none;
                }

        .xkcd {
            position: absolute;
            top: 75%;
            left: 0;
            width: 100%;
            text-align: center;
        }

            .xkcd img {
                -webkit-filter: invert(100%);
                -moz-filter: invert(100%);
                -o-filter: invert(100%);
                filter: invert(100%);
                height: 247px;
            }

        #xkcdTemp {
            display: none;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/locale/en-gb.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FeedEk/3.0.0/js/FeedEk.min.js"></script>
    <script language="javascript" type="text/javascript">
        function updateWeather() {
            $.simpleWeather({
                woeid: '13864',
                location: '',
                unit: 'c',
                success: function (weather) {
                    var html = '<h1 class="icon-' + weather.code + '"></h1>';
                    html += '<h2>' + weather.temp + '&deg;C</h2>';
                    html += '<ul><li>' + weather.city + ', ' + weather.region + '</li>';
                    html += '<li class="currently">' + weather.currently + '</li></ul>';
                    html += '<li>Sunrise ' + weather.sunrise.toUpperCase() + '</li>';
                    html += '<li>Sunset ' + weather.sunset.toUpperCase() + '</li>';
                    html += '<li id="time"></li>';

                    $("#weather").html(html);
                },
                error: function (error) {
                    $("#weather").html('<p>' + error + '</p>');
                }
            });
        };

        function updateTime() {
            $('#time').text('Now ' + new Date().toLocaleTimeString('en-US', { timeZone: 'Europe/London' }));
            $('#date').text(new Date().toLocaleDateString('en-GB', { timezone: 'Europe/London', weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }));
        }

        var feedTitles = ['Science', 'Technology', 'Entertainment'];
        var feeds = ['http://feeds.bbci.co.uk/news/science_and_environment/rss.xml?edition=uk',
            'http://feeds.bbci.co.uk/news/technology/rss.xml?edition=uk',
            'http://feeds.bbci.co.uk/news/entertainment_and_arts/rss.xml?edition=uk'];

        var feedIdx = 0;

        function updateRss() {
            $('#rssFeedTitle').text(feedTitles[feedIdx]);
            $('#rss').FeedEk({
                FeedUrl: feeds[feedIdx],
                MaxCount: 5,
                ShowDesc: true,
                ShowPubDate: true,
                DescCharacterLimit: 150,
                TitleLinkTarget: '_blank',
                DateFormat: 'DD MMMM'
            });
            feedIdx++;
            if (feedIdx >= feeds.length) {
                feedIdx = 0;
            }
        }

        function updateXkcd() {
            $('#xkcdTemp').FeedEk({
                FeedUrl: 'http://xkcd.com/rss.xml'
            });
            setTimeout(function () {
                var img = $('#xkcdTemp').find('img')[0];
                $('.xkcd').html(img);
            }, 10000);
        }

        var msgIdx = 0;

        var messages = [
            'Go out and be fucking awesome',
            'Make someone smile today',
            'Give a random book to a stranger',
            'Compliment someone at random',
            'Buy a meal for a homeless person'
        ];

        function updateMessage() {
            $('.message').text(messages[msgIdx]);
            msgIdx++;
            if (msgIdx >= messages.length) {
                msgIdx = 0;
            }
        }

        $(document).ready(function () {
            updateRss();
            updateWeather();
            updateXkcd();
            updateMessage();

            window.setInterval(function () {
                updateWeather();
            }, 600000);
            window.setInterval(function () {
                updateTime();
            }, 1000);
            window.setInterval(function () {
                updateRss();
            }, 60000);
            window.setInterval(function () {
                updateXkcd();
            }, 3600000);
            window.setInterval(function () {
                updateMessage();
            }, 43200000);
        });
    </script>
</head>
<body>
    <img src="loader.gif"/>
    <div id="date"></div>
    <div id="weather" class="weather">
    </div>

    <div class="todo">
        Aw, it's cocking Wednesday, put the chuffing bins out.
    </div>

    <div class="news">
        Latest <span id="rssFeedTitle"></span> News
        <div class="rss" id="rss"></div>
    </div>

    <div class="xkcd">
    </div>

    <div class="message">
        Go out and be fucking awesome!
    </div>

    <div id="xkcdTemp"></div>
</body>

</html>
	<!DOCTYPE html>

	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<title>Mirror Mirror on the Wall</title>
	<link href='https://fonts.googleapis.com/css?family=Pacifico\|Open+Sans' rel='stylesheet' type='text/css' />
	<style>
	body, h2, ul, li {
	background-color: black;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size: 30px;
	text-indent: 0;
	list-style-type: none;
	list-style-position: inside;
	margin: 0;
	padding: 0;
	}

	.message {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	}

	.weather {
	position: absolute;
	top: 0;
	right: 0;
	}

	.todo {
	position: absolute;
	left: 0;
	top: 35%;
	width: 100%;
	text-align: center;
	}

	.news {
	position: absolute;
	left: 0;
	top: 42%;
	width: 100%;
	text-align: center;
	}

	@font-face {
	font-family: 'weather';
	src: url("artill_clean_icons.htm") format("opentype");
	}

	#weather h1 {
	font-family: 'weather';
	font-size: 120px;
	margin: 0;
	padding: 0;
	}

	#weather h1.icon-0:before {
	content: ":";
	}

	#weather h1.icon-1:before {
	content: "p";
	}

	#weather h1.icon-2:before {
	content: "S";
	}

	#weather h1.icon-3:before {
	content: "Q";
	}

	#weather h1.icon-4:before {
	content: "S";
	}

	#weather h1.icon-5:before {
	content: "W";
	}

	#weather h1.icon-6:before {
	content: "W";
	}

	#weather h1.icon-7:before {
	content: "W";
	}

	#weather h1.icon-8:before {
	content: "W";
	}

	#weather h1.icon-9:before {
	content: "I";
	}

	#weather h1.icon-10:before {
	content: "W";
	}

	#weather h1.icon-11:before {
	content: "I";
	}

	#weather h1.icon-12:before {
	content: "I";
	}

	#weather h1.icon-13:before {
	content: "I";
	}

	#weather h1.icon-14:before {
	content: "I";
	}

	#weather h1.icon-15:before {
	content: "W";
	}

	#weather h1.icon-16:before {
	content: "I";
	}

	#weather h1.icon-17:before {
	content: "W";
	}

	#weather h1.icon-18:before {
	content: "U";
	}

	#weather h1.icon-19:before {
	content: "Z";
	}

	#weather h1.icon-20:before {
	content: "Z";
	}

	#weather h1.icon-21:before {
	content: "Z";
	}

	#weather h1.icon-22:before {
	content: "Z";
	}

	#weather h1.icon-23:before {
	content: "Z";
	}

	#weather h1.icon-24:before {
	content: "E";
	}

	#weather h1.icon-25:before {
	content: "E";
	}

	#weather h1.icon-26:before {
	content: "3";
	}

	#weather h1.icon-27:before {
	content: "a";
	}

	#weather h1.icon-28:before {
	content: "A";
	}

	#weather h1.icon-29:before {
	content: "a";
	}

	#weather h1.icon-30:before {
	content: "A";
	}

	#weather h1.icon-31:before {
	content: "6";
	}

	#weather h1.icon-32:before {
	content: "1";
	}

	#weather h1.icon-33:before {
	content: "6";
	}

	#weather h1.icon-34:before {
	content: "1";
	}

	#weather h1.icon-35:before {
	content: "W";
	}

	#weather h1.icon-36:before {
	content: "1";
	}

	#weather h1.icon-37:before {
	content: "S";
	}

	#weather h1.icon-38:before {
	content: "S";
	}

	#weather h1.icon-39:before {
	content: "S";
	}

	#weather h1.icon-40:before {
	content: "M";
	}

	#weather h1.icon-41:before {
	content: "W";
	}

	#weather h1.icon-42:before {
	content: "I";
	}

	#weather h1.icon-43:before {
	content: "W";
	}

	#weather h1.icon-44:before {
	content: "a";
	}

	#weather h1.icon-45:before {
	content: "S";
	}

	#weather h1.icon-46:before {
	content: "U";
	}

	#weather h1.icon-47:before {
	content: "S";
	}

	#date {
	float: left;
	padding-top: 50px;
	}

	.rss {
	margin-top: 20px;
	}

	.rss, .rss ul, .rss ul li {
	font-size: 16px;
	text-align: left;
	}

	.rss a {
	text-decoration: none;
	color: white;
	}

	.rss .itemTitle {
	font-weight: bold;
	}

	.rss li {
	margin-bottom: 20px;
	}

	.rss img {
	display: none;
	}

	.xkcd {
	position: absolute;
	top: 75%;
	left: 0;
	width: 100%;
	text-align: center;
	}

	.xkcd img {
	-webkit-filter: invert(100%);
	-moz-filter: invert(100%);
	-o-filter: invert(100%);
	filter: invert(100%);
	height: 247px;
	}

	#xkcdTemp {
	display: none;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/locale/en-gb.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/FeedEk/3.0.0/js/FeedEk.min.js"></script>
	<script language="javascript" type="text/javascript">
	function updateWeather() {
	$.simpleWeather({
	woeid: '13864',
	location: '',
	unit: 'c',
	success: function (weather) {
	var html = '<h1 class="icon-' + weather.code + '"></h1>';
	html += '<h2>' + weather.temp + '°C</h2>';
	html += '<ul><li>' + weather.city + ', ' + weather.region + '</li>';
	html += '<li class="currently">' + weather.currently + '</li></ul>';
	html += '<li>Sunrise ' + weather.sunrise.toUpperCase() + '</li>';
	html += '<li>Sunset ' + weather.sunset.toUpperCase() + '</li>';
	html += '<li id="time"></li>';

	$("#weather").html(html);
	},
	error: function (error) {
	$("#weather").html('<p>' + error + '</p>');
	}
	});
	};

	function updateTime() {
	$('#time').text('Now ' + new Date().toLocaleTimeString('en-US', { timeZone: 'Europe/London' }));
	$('#date').text(new Date().toLocaleDateString('en-GB', { timezone: 'Europe/London', weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }));
	}

	var feedTitles = ['Science', 'Technology', 'Entertainment'];
	var feeds = ['http://feeds.bbci.co.uk/news/science_and_environment/rss.xml?edition=uk',
	'http://feeds.bbci.co.uk/news/technology/rss.xml?edition=uk',
	'http://feeds.bbci.co.uk/news/entertainment_and_arts/rss.xml?edition=uk'];

	var feedIdx = 0;

	function updateRss() {
	$('#rssFeedTitle').text(feedTitles[feedIdx]);
	$('#rss').FeedEk({
	FeedUrl: feeds[feedIdx],
	MaxCount: 5,
	ShowDesc: true,
	ShowPubDate: true,
	DescCharacterLimit: 150,
	TitleLinkTarget: '_blank',
	DateFormat: 'DD MMMM'
	});
	feedIdx++;
	if (feedIdx >= feeds.length) {
	feedIdx = 0;
	}
	}

	function updateXkcd() {
	$('#xkcdTemp').FeedEk({
	FeedUrl: 'http://xkcd.com/rss.xml'
	});
	setTimeout(function () {
	var img = $('#xkcdTemp').find('img')[0];
	$('.xkcd').html(img);
	}, 10000);
	}

	var msgIdx = 0;

	var messages = [
	'Go out and be fucking awesome',
	'Make someone smile today',
	'Give a random book to a stranger',
	'Compliment someone at random',
	'Buy a meal for a homeless person'
	];

	function updateMessage() {
	$('.message').text(messages[msgIdx]);
	msgIdx++;
	if (msgIdx >= messages.length) {
	msgIdx = 0;
	}
	}

	$(document).ready(function () {
	updateRss();
	updateWeather();
	updateXkcd();
	updateMessage();

	window.setInterval(function () {
	updateWeather();
	}, 600000);
	window.setInterval(function () {
	updateTime();
	}, 1000);
	window.setInterval(function () {
	updateRss();
	}, 60000);
	window.setInterval(function () {
	updateXkcd();
	}, 3600000);
	window.setInterval(function () {
	updateMessage();
	}, 43200000);
	});
	</script>
	</head>
	<body>
	<img src="loader.gif"/>
	<div id="date"></div>
	<div id="weather" class="weather">
	</div>

	<div class="todo">
	Aw, it's cocking Wednesday, put the chuffing bins out.
	</div>

	<div class="news">
	Latest <span id="rssFeedTitle"></span> News
	<div class="rss" id="rss"></div>
	</div>

	<div class="xkcd">
	</div>

	<div class="message">
	Go out and be fucking awesome!
	</div>

	<div id="xkcdTemp"></div>
	</body>

	</html>