skluck/clock.html

## clock.html
<!DOCTYPE html>
<html>
<head>
    <title>The Coloured Clock</title>
    <style type="text/css">
        body {
            background: #fff;
            color: white;
            font: bold 7em Helvetica, sans-serif;
            margin: 0;
            overflow: hidden;
            padding: 0;

            -webkit-transition: all 1s;
            transition: all 1s;
        }

        article {
            bottom: 0;
            left: 0;
            position: fixed;
            right: 0;
            top: 0;
            border: .05em solid rgba(255, 255, 255, .7);
            margin: .1em;
        }

        .gradient {
            background: -webkit-radial-gradient(
                center, ellipse cover,
                rgba(255,255,255,0.5) 50%,
                rgba(255,255,255,0.3) 100%
            );
            /* Chrome10+,Safari5.1+ */

            height: 100%;
            left: 0;
            padding-top: 10px;
            position: fixed;
            top: 0;
            width: 100%;

            -webkit-transition: background 1s;
            transition: background 1s;
        }

        hr {
            background: rgba(255, 255, 255, .7);
            border: 0;
            height: .05em;
            margin: 0;
            position: absolute;
            right: 0;
            top: 1.2em;

            -webkit-transition: width 1s;
            transition: width 1s;
        }

        #time,
        hr {
            -webkit-transition: width 1s;
            transition: width 1s;
        }

        #time {
            position: absolute;
            right: 0;
            top: 0;
        }

        #time p {
            color: rgba(255, 255, 255, 0);
            font-size: 40%;
            font-weight: normal;
            left: 0;
            margin: 0;
            margin-top: .2em;
            position: relative;
            text-shadow: none;

            -webkit-transition: all 150ms ease-out;
            transition: all 150ms ease-out;
        }

        #time:hover p {
            color: rgba(255, 255, 255, .7);
        }

        #month {
            bottom:0;
            font-size: 100%;
            left:0;
            margin: 0em .15em;
            position: absolute;
        }

        #calendar {
            bottom:0;
            right:0;
            margin: .15em;
            overflow: hidden;
            padding:0;
            position: absolute;
        }

        #calendar li {
            border: 2px solid rgba(255, 255, 255, 0);
            float: left;
            font-size: 40%;
            font-weight: normal;
            list-style: none;

            padding: 0em .2em 0em .10em;
            text-align: right;
            width: 1em;
        }

        #calendar li:empty {
            height: 1em;
        }

        #calendar li.weekend {
            color: rgba(255, 255, 255, .5);
        }

        #calendar li.weekend.end {
            clear:left;
        }

        #calendar li.today {
            border: 2px solid rgba(255, 255, 255, .7);
        }

        .shadow {
            -webkit-background-clip: text;
            text-shadow:
            rgba(0,0,0,0.1) -1px -2px -2px,
            rgba(0,0,0,0.1) 1px 2px 2px,
            rgba(0,0,0,0.2) 2px 3px 3px;
        }
    </style>
    <style type="text/css">
    </style>
</head>

<body id="body">
    <section class="gradient"></section>
    <article>
        <hr id="bar">
        <section id="time"></section>

        <h1 id="month" class="shadow"></h1>
        <ul id="calendar"></ul>
    </article>
</body>

<script type="text/javascript">
    //create some variable i'll need to use
    var color = 0,
        minPourc = 0,
        secPourc = 0,
        whiteOrNot = 0,
        seed = Math.floor(Math.random() * 90); // random number from 0 to 90

    //every second we do this
    setInterval(function() {
        //create date function
        var myDate = new Date(),
            getHours = myDate.getHours(),
            getMinutes = myDate.getMinutes(),
            getSeconds = myDate.getSeconds();

        //add 0 before one size numbers
        if (getHours < 10) {
            getHours = "0" + getHours;
        }

        if (getMinutes < 10) {
            getMinutes = "0" + getMinutes;
        }

        if (getSeconds < 10) {
            getSeconds = "0" + getSeconds;
        }


        //set hsl colors
        var hslVal = parseInt(getSeconds / 60 * 360),
        // var hslVal = parseInt(getSeconds / 80 * 360) + seed, // use 80 as the base and the seed will fill in the rest (60/80 = 75% of 360 = 270, random seed = 0-90)
            hslSat = 40 + parseInt(getMinutes / 60 * 40), // don't go before 20 and after 80 to have white every time and stay visible
            hslLig = hslSat,
            minPourc = 100 - (getMinutes / 60 * 100),
            minPourc = minPourc < 36 ? 36 : minPourc,
            secPourc = minPourc - (getSeconds / 60 * minPourc) + '%';
            minPourc = minPourc + '%';

        //set the time and color content
        if (getHours > 12) {
            getHours -= 12;
        }
        var displayDate = getHours + ':' + getMinutes + ':' + getSeconds,
            colorHSL = "hsl(" + hslVal + ', ' + hslSat + '%, ' + hslLig + '%)';

        //apply the color to the background and text-color
        document.getElementById('body').style.backgroundColor = colorHSL;

        //the first second, we set a width to border and time than we fix it every minutes
        document.getElementById('time').innerHTML = '<span class="shadow">' + displayDate +'</span><p>'+ colorHSL +'</p>';
        document.getElementById('time').style.width = minPourc;
        document.getElementById('bar').style.width = minPourc;

        if (getMinutes === 59) {
            document.getElementById('bar').style.width = secPourc;
        }

        //month
        var Month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        getYear = myDate.getFullYear();

        //28 or 29 february and more
        var February = new Date(getYear,1,1).getMonth() == new Date(getYear,1,29).getMonth() ? 29 : 28,
            DayNumber = [31, February, 31, 30, 31, 30, 31, 30, 31, 30, 31, 30],
            getMonth = myDate.getMonth(),
            getDay = myDate.getDay(); //0 = Sunday
            getCurrentDay = myDate.getDate();

        // Set the month display
        var getMonthFull = Month[getMonth];
        document.getElementById('month').innerHTML = getMonthFull;

        // set the days on the calendar
        var calendarFill = '';

        var date = new Date(getYear,getMonth,1).getDay();
        for (var j=0;j<date; j++) {
            calendarFill += '<li></li>';
        }

        for (var i=1; i < DayNumber[getMonth]+1; i++) {
            var date = new Date(getYear,getMonth,i).getDay();

            if (date === 0) {
                calendarFill += '<li class="weekend end">' + i + '</li>';

            } else if (date === 6) {
                calendarFill += '<li class="weekend">' + i + '</li>';

            } else if (i === getCurrentDay){
                calendarFill += '<li class="today">' + i + '</li>';

            } else {
                calendarFill += '<li>' + i + '</li>';
            }
        }

        document.getElementById('calendar').innerHTML = calendarFill;

    }, 1000);
</script>
<script type="text/javascript">

</script>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>The Coloured Clock</title>
	<style type="text/css">
	body {
	background: #fff;
	color: white;
	font: bold 7em Helvetica, sans-serif;
	margin: 0;
	overflow: hidden;
	padding: 0;

	-webkit-transition: all 1s;
	transition: all 1s;
	}

	article {
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	border: .05em solid rgba(255, 255, 255, .7);
	margin: .1em;
	}

	.gradient {
	background: -webkit-radial-gradient(
	center, ellipse cover,
	rgba(255,255,255,0.5) 50%,
	rgba(255,255,255,0.3) 100%
	);
	/* Chrome10+,Safari5.1+ */

	height: 100%;
	left: 0;
	padding-top: 10px;
	position: fixed;
	top: 0;
	width: 100%;

	-webkit-transition: background 1s;
	transition: background 1s;
	}

	hr {
	background: rgba(255, 255, 255, .7);
	border: 0;
	height: .05em;
	margin: 0;
	position: absolute;
	right: 0;
	top: 1.2em;

	-webkit-transition: width 1s;
	transition: width 1s;
	}

	#time,
	hr {
	-webkit-transition: width 1s;
	transition: width 1s;
	}

	#time {
	position: absolute;
	right: 0;
	top: 0;
	}

	#time p {
	color: rgba(255, 255, 255, 0);
	font-size: 40%;
	font-weight: normal;
	left: 0;
	margin: 0;
	margin-top: .2em;
	position: relative;
	text-shadow: none;

	-webkit-transition: all 150ms ease-out;
	transition: all 150ms ease-out;
	}

	#time:hover p {
	color: rgba(255, 255, 255, .7);
	}

	#month {
	bottom:0;
	font-size: 100%;
	left:0;
	margin: 0em .15em;
	position: absolute;
	}

	#calendar {
	bottom:0;
	right:0;
	margin: .15em;
	overflow: hidden;
	padding:0;
	position: absolute;
	}

	#calendar li {
	border: 2px solid rgba(255, 255, 255, 0);
	float: left;
	font-size: 40%;
	font-weight: normal;
	list-style: none;

	padding: 0em .2em 0em .10em;
	text-align: right;
	width: 1em;
	}

	#calendar li:empty {
	height: 1em;
	}

	#calendar li.weekend {
	color: rgba(255, 255, 255, .5);
	}

	#calendar li.weekend.end {
	clear:left;
	}

	#calendar li.today {
	border: 2px solid rgba(255, 255, 255, .7);
	}

	.shadow {
	-webkit-background-clip: text;
	text-shadow:
	rgba(0,0,0,0.1) -1px -2px -2px,
	rgba(0,0,0,0.1) 1px 2px 2px,
	rgba(0,0,0,0.2) 2px 3px 3px;
	}
	</style>
	<style type="text/css">
	</style>
	</head>

	<body id="body">
	<section class="gradient"></section>
	<article>
	<hr id="bar">
	<section id="time"></section>

	<h1 id="month" class="shadow"></h1>
	<ul id="calendar"></ul>
	</article>
	</body>

	<script type="text/javascript">
	//create some variable i'll need to use
	var color = 0,
	minPourc = 0,
	secPourc = 0,
	whiteOrNot = 0,
	seed = Math.floor(Math.random() * 90); // random number from 0 to 90

	//every second we do this
	setInterval(function() {
	//create date function
	var myDate = new Date(),
	getHours = myDate.getHours(),
	getMinutes = myDate.getMinutes(),
	getSeconds = myDate.getSeconds();

	//add 0 before one size numbers
	if (getHours < 10) {
	getHours = "0" + getHours;
	}

	if (getMinutes < 10) {
	getMinutes = "0" + getMinutes;
	}

	if (getSeconds < 10) {
	getSeconds = "0" + getSeconds;
	}


	//set hsl colors
	var hslVal = parseInt(getSeconds / 60 * 360),
	// var hslVal = parseInt(getSeconds / 80 * 360) + seed, // use 80 as the base and the seed will fill in the rest (60/80 = 75% of 360 = 270, random seed = 0-90)
	hslSat = 40 + parseInt(getMinutes / 60 * 40), // don't go before 20 and after 80 to have white every time and stay visible
	hslLig = hslSat,
	minPourc = 100 - (getMinutes / 60 * 100),
	minPourc = minPourc < 36 ? 36 : minPourc,
	secPourc = minPourc - (getSeconds / 60 * minPourc) + '%';
	minPourc = minPourc + '%';

	//set the time and color content
	if (getHours > 12) {
	getHours -= 12;
	}
	var displayDate = getHours + ':' + getMinutes + ':' + getSeconds,
	colorHSL = "hsl(" + hslVal + ', ' + hslSat + '%, ' + hslLig + '%)';

	//apply the color to the background and text-color
	document.getElementById('body').style.backgroundColor = colorHSL;

	//the first second, we set a width to border and time than we fix it every minutes
	document.getElementById('time').innerHTML = '<span class="shadow">' + displayDate +'</span><p>'+ colorHSL +'</p>';
	document.getElementById('time').style.width = minPourc;
	document.getElementById('bar').style.width = minPourc;

	if (getMinutes === 59) {
	document.getElementById('bar').style.width = secPourc;
	}

	//month
	var Month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
	getYear = myDate.getFullYear();

	//28 or 29 february and more
	var February = new Date(getYear,1,1).getMonth() == new Date(getYear,1,29).getMonth() ? 29 : 28,
	DayNumber = [31, February, 31, 30, 31, 30, 31, 30, 31, 30, 31, 30],
	getMonth = myDate.getMonth(),
	getDay = myDate.getDay(); //0 = Sunday
	getCurrentDay = myDate.getDate();

	// Set the month display
	var getMonthFull = Month[getMonth];
	document.getElementById('month').innerHTML = getMonthFull;

	// set the days on the calendar
	var calendarFill = '';

	var date = new Date(getYear,getMonth,1).getDay();
	for (var j=0;j<date; j++) {
	calendarFill += '<li></li>';
	}

	for (var i=1; i < DayNumber[getMonth]+1; i++) {
	var date = new Date(getYear,getMonth,i).getDay();

	if (date === 0) {
	calendarFill += '<li class="weekend end">' + i + '</li>';

	} else if (date === 6) {
	calendarFill += '<li class="weekend">' + i + '</li>';

	} else if (i === getCurrentDay){
	calendarFill += '<li class="today">' + i + '</li>';

	} else {
	calendarFill += '<li>' + i + '</li>';
	}
	}

	document.getElementById('calendar').innerHTML = calendarFill;

	}, 1000);
	</script>
	<script type="text/javascript">

	</script>

	</html>