Add dishwasher notification

css/main.css

@@ -174,6 +174,16 @@ body, html {
 	text-align: right;
 }
 
+.dishwasher {
+	background-color: white;
+	color: black;
+	margin: 0 200px;	
+	font-size: 60px;	
+	border-radius: 1000px;
+	border-radius: 1200px;
+	display: none;
+}
+
 @font-face {
   font-family: 'HelveticaNeue-UltraLight';
   src: url('font/HelveticaNeue-UltraLight.eot'); /* IE9 Compat Modes */

index.php

@@ -13,6 +13,7 @@
 
 	<div class="top left"><div class="date small dimmed"></div><div class="time"></div><div class="calendar xxsmall"></div></div>
 	<div class="top right"><div class="windsun small dimmed"></div><div class="temp"></div><div class="forecast small dimmed"></div></div>
+	<div class="center-ver center-hor"><div class="dishwasher light">Vaatwasser is klaar!</div></div>
 	<div class="lower-third center-hor"><div class="compliment light"></div></div>
 	<div class="bottom center-hor"><div class="news medium"></div></div>
 
@@ -23,6 +24,7 @@
 <script src="js/ical_parser.js"></script>
 <script src="js/moment-with-langs.min.js"></script>
 <script src="js/main.js?nocache=<?php echo md5(microtime()) ?>"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js"></script>
 
 </body>
 </html>

js/main.js

@@ -47,6 +47,15 @@ jQuery(document).ready(function($) {
 	var compliment;
 
 
+	var socket = io.connect('http://rpi-development.local:8080');
+	socket.on('dishwasher', function (dishwasherReady) {
+		if (dishwasherReady) {
+			$('.dishwasher').fadeIn();
+		} else {
+			$('.dishwasher').fadeOut();
+		}
+	});
+
 
 	var weatherParams = {
 		'q':'Baarn,Netherlands',