glaforge/dominoClock.html

## dominoClock.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>24h Domino Clock</title>
        <meta http-equiv="refresh" content="60">
        <script>
            function drawDot(context, x, y) {
                var lg1 = context.createLinearGradient(x - 10, y - 10, x + 20, y + 40);
                lg1.addColorStop(0, 'black');
                lg1.addColorStop(1, 'gray');

                var lg2 = context.createLinearGradient(x - 40, y - 50, x + 20, y + 40);
                lg2.addColorStop(1, 'black');
                lg2.addColorStop(0, 'gray');


                context.beginPath();
                context.arc(x, y, 17, 0, 2 * Math.PI, false);
                context.fillStyle = lg1; // "black";
                context.fill();
                context.lineWidth = 2;
                context.strokeStyle = lg2; // "#555555";
                context.stroke();
            }

            function draw(num, y, x) {
                var canvas = document.getElementById("d" + y + x);
                var context = canvas.getContext("2d");
                if (num % 2 === 1)  {
                    drawDot(context, canvas.width / 2, canvas.height / 2);
                }
                if (num > 1) {
                    drawDot(context, canvas.width / 6, canvas.height / 6);
                    drawDot(context, 5 * canvas.width / 6, 5 * canvas.height / 6);
                }
                if (num > 3) {
                    drawDot(context, canvas.width / 6, 5 * canvas.height / 6);
                    drawDot(context, 5 * canvas.width / 6, canvas.height / 6);
                }
                if (num === 6) {
                    drawDot(context, canvas.width / 6, canvas.height / 2);
                    drawDot(context, 5 * canvas.width / 6, canvas.height / 2);
                }
            }

            window.onload = function() {
                var date = new Date();

                var hours = date.getHours();
                var minutes = date.getMinutes();

                var hourTen = Math.floor(hours/10);
                var hourUni = hours % 10;
                var minTen = Math.floor(minutes/10);
                var minUni = minutes % 10;

                draw(hourTen, 1, 1);
                draw(minTen, 1, 2);
                draw(hourUni < 7 ? 0 : 12 - hourUni, 2, 1);
                draw(minUni < 7 ? 0 : 12 - minUni, 2, 2);
                draw(hourUni < 7 ? hourUni : hourUni * 2 - 12, 3, 1);
                draw(minUni < 7 ? minUni : minUni * 2 - 12, 3, 2);
            };
        </script>
        <style>
            body {
                text-align: center;
                background-color: #C99464;
                background-image: url(http://www.ipad-wallpapers.us/bgs/wood-ipad-background.jpg);
                background-size: cover;
            }

            canvas {
                border: 2px ridge white;
                border-radius: 8px;
                margin: 7px;
            }

            #dominoClock {
      -webkit-transform: perspective( 600px )  rotateX( 5deg ) rotateZ( 1deg );
         -moz-transform: perspective( 600px )  rotateX( 5deg ) rotateZ( 1deg );
           -o-transform: perspective( 600px )  rotateX( 5deg ) rotateZ( 1deg );
              transform: perspective( 600px )  rotateX( 5deg ) rotateZ( 1deg );

                display: inline-block;
                width: 520px;
                margin: 10px;
                padding: 10px;
            }

            .domino {
                background-color: white;
                background-image: url(http://i.istockimg.com/file_thumbview_approve/4167890/2/stock-photo-4167890-white-marble-texture.jpg);
                background-size: cover;
                border: 0px solid #888888;
                border-radius: 15px;
                border-width: 0px 5px 3px 0px;
                border-bottom-color: #AAAAAA;
                box-shadow: 9px 5px 15px #553300;
                margin: 5px;
                padding: 5px;
            }

            #topDomino {
                display: inline-block;
                width: 400px;
                height: 200px;
            }

            #leftDomino, #rightDomino {
                width: 200px;
                height: 400px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div id="dominoClock">
            <div id="topDomino" class="domino">
                <canvas id="d11" width="180" height="180"></canvas>
                <canvas id="d12" width="180" height="180"></canvas>
            </div>
            <div id="leftDomino" class="domino">
                <canvas id="d21" width="180" height="180"></canvas>
                <canvas id="d31" width="180" height="180"></canvas>
            </div>
            <div id="rightDomino" class="domino">
                <canvas id="d22" width="180" height="180"></canvas>
                <canvas id="d32" width="180" height="180"></canvas>
            </div>
        </div>
    </body>
</html>

	<!DOCTYPE HTML>
	<html>
	<head>
	<title>24h Domino Clock</title>
	<meta http-equiv="refresh" content="60">
	<script>
	function drawDot(context, x, y) {
	var lg1 = context.createLinearGradient(x - 10, y - 10, x + 20, y + 40);
	lg1.addColorStop(0, 'black');
	lg1.addColorStop(1, 'gray');

	var lg2 = context.createLinearGradient(x - 40, y - 50, x + 20, y + 40);
	lg2.addColorStop(1, 'black');
	lg2.addColorStop(0, 'gray');


	context.beginPath();
	context.arc(x, y, 17, 0, 2 * Math.PI, false);
	context.fillStyle = lg1; // "black";
	context.fill();
	context.lineWidth = 2;
	context.strokeStyle = lg2; // "#555555";
	context.stroke();
	}

	function draw(num, y, x) {
	var canvas = document.getElementById("d" + y + x);
	var context = canvas.getContext("2d");
	if (num % 2 === 1) {
	drawDot(context, canvas.width / 2, canvas.height / 2);
	}
	if (num > 1) {
	drawDot(context, canvas.width / 6, canvas.height / 6);
	drawDot(context, 5 * canvas.width / 6, 5 * canvas.height / 6);
	}
	if (num > 3) {
	drawDot(context, canvas.width / 6, 5 * canvas.height / 6);
	drawDot(context, 5 * canvas.width / 6, canvas.height / 6);
	}
	if (num === 6) {
	drawDot(context, canvas.width / 6, canvas.height / 2);
	drawDot(context, 5 * canvas.width / 6, canvas.height / 2);
	}
	}

	window.onload = function() {
	var date = new Date();

	var hours = date.getHours();
	var minutes = date.getMinutes();

	var hourTen = Math.floor(hours/10);
	var hourUni = hours % 10;
	var minTen = Math.floor(minutes/10);
	var minUni = minutes % 10;

	draw(hourTen, 1, 1);
	draw(minTen, 1, 2);
	draw(hourUni < 7 ? 0 : 12 - hourUni, 2, 1);
	draw(minUni < 7 ? 0 : 12 - minUni, 2, 2);
	draw(hourUni < 7 ? hourUni : hourUni * 2 - 12, 3, 1);
	draw(minUni < 7 ? minUni : minUni * 2 - 12, 3, 2);
	};
	</script>
	<style>
	body {
	text-align: center;
	background-color: #C99464;
	background-image: url(http://www.ipad-wallpapers.us/bgs/wood-ipad-background.jpg);
	background-size: cover;
	}

	canvas {
	border: 2px ridge white;
	border-radius: 8px;
	margin: 7px;
	}

	#dominoClock {
	-webkit-transform: perspective( 600px ) rotateX( 5deg ) rotateZ( 1deg );
	-moz-transform: perspective( 600px ) rotateX( 5deg ) rotateZ( 1deg );
	-o-transform: perspective( 600px ) rotateX( 5deg ) rotateZ( 1deg );
	transform: perspective( 600px ) rotateX( 5deg ) rotateZ( 1deg );

	display: inline-block;
	width: 520px;
	margin: 10px;
	padding: 10px;
	}

	.domino {
	background-color: white;
	background-image: url(http://i.istockimg.com/file_thumbview_approve/4167890/2/stock-photo-4167890-white-marble-texture.jpg);
	background-size: cover;
	border: 0px solid #888888;
	border-radius: 15px;
	border-width: 0px 5px 3px 0px;
	border-bottom-color: #AAAAAA;
	box-shadow: 9px 5px 15px #553300;
	margin: 5px;
	padding: 5px;
	}

	#topDomino {
	display: inline-block;
	width: 400px;
	height: 200px;
	}

	#leftDomino, #rightDomino {
	width: 200px;
	height: 400px;
	display: inline-block;
	}
	</style>
	</head>
	<body>
	<div id="dominoClock">
	<div id="topDomino" class="domino">
	<canvas id="d11" width="180" height="180"></canvas>
	<canvas id="d12" width="180" height="180"></canvas>
	</div>
	<div id="leftDomino" class="domino">
	<canvas id="d21" width="180" height="180"></canvas>
	<canvas id="d31" width="180" height="180"></canvas>
	</div>
	<div id="rightDomino" class="domino">
	<canvas id="d22" width="180" height="180"></canvas>
	<canvas id="d32" width="180" height="180"></canvas>
	</div>
	</div>
	</body>
	</html>