Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment