Skip to content

Instantly share code, notes, and snippets.

@GregoireHebert

GregoireHebert/niceClock.html

Last active May 17, 2019 13:45
Show Gist options
  • Save GregoireHebert/6ee478af0af23ea756734bb6e7203d00 to your computer and use it in GitHub Desktop.
Save GregoireHebert/6ee478af0af23ea756734bb6e7203d00 to your computer and use it in GitHub Desktop.
Download ZIP
A digital clock made of analog clocks
Raw
niceClock.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
}
html, body {
min-height: 100%;
}
body {
background-color: #EEE;
}
.wrapper {
margin: auto;
margin-top: 40px;
padding: 10px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0px;
grid-auto-rows: minmax(225px, auto);
width: 450px;
transform: perspective(450px) rotateY(15deg);
-webkit-box-shadow: 0 8px 15px -8px black;
-moz-box-shadow: 0 8px 15px -8px black;
box-shadow: 0 8px 15px -8px black;
}
.row {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
grid-auto-rows: minmax(50px, auto);
width: 225px;
}
.clock {
position: relative;
height: 50px;
width: 50px;
background: #EEE;
box-sizing: border-box;
border-radius: 100%;
border: 2px solid #CCC;
-webkit-box-shadow: inset 0 3px 12px #999, 0 8px 15px -8px black;
-moz-box-shadow: inset 0 3px 12px #999, 0 8px 15px -8px black;
box-shadow: inset 0 3px 12px #999, 0 8px 15px -8px black;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.clock .hour {
width: 3px;
height: 100%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transform: rotate(30deg);
transition: transform 8s;
}
.clock.ho .hour, .clock.tl .hour {
transform: rotate(-90deg);
}
.clock.tr .hour {
transform: rotate(90deg);
}
.clock.ve .hour, .clock.bl .hour, .clock.br .hour {
transform: rotate(180deg);
}
.clock .hour:before {
position: absolute;
content: "";
background: #262626;
height: 20px;
width: 3px;
top: 23px;
}
.clock .minute {
width: 3px;
height: 100%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transform: rotate(30deg);
transition: transform 4s;
}
.clock.ve .minute, .clock.tr .minute, .clock.tl .minute {
transform: rotate(0deg);
}
.clock.bl .minute {
transform: rotate(-90deg);
}
.clock.br .minute, .clock.ho .minute {
transform: rotate(90deg);
}
.clock .minute:before {
position: absolute;
content: "";
background: #262626;
height: 20px;
width: 3px;
top: 23px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="quadrant">
<div class="row">
<!-- top left number */ -->
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour "></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour "></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
</div>
</div>
<div class="quadrant">
<div class="row">
<!-- top left number */ -->
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour "></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour "></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
</div>
</div>
<div class="quadrant">
<div class="row">
<!-- top left number */ -->
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour "></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour "></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
</div>
</div>
<div class="quadrant">
<div class="row">
<!-- top left number */ -->
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour "></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour "></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
<div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
const mapping = [
['tl', 'ho', 'ho', 'tr',
've', 'tl', 'tr', 've',
've', 've', 've', 've',
've', 've', 've', 've',
've', 'bl', 'br', 've',
'bl', 'ho', 'ho', 'br'],
['tl', 'ho', 'tr', ' ',
'bl', 'tr', 've', ' ',
' ', 've', 've', ' ',
' ', 've', 've', ' ',
'tl', 'br', 'bl', 'tr',
'bl', 'ho', 'ho', 'br'],
['tl', 'ho', 'ho', 'tr',
'bl', 'ho', 'tr', 've',
'tl', 'ho', 'br', 've',
've', 'tl', 'ho', 'br',
've', 'bl', 'ho', 'tr',
'bl', 'ho', 'ho', 'br'],
['tl', 'ho', 'ho', 'tr',
'bl', 'ho', 'tr', 've',
'tl', 'ho', 'br', 've',
'bl', 'ho', 'tr', 've',
'tl', 'ho', 'br', 've',
'bl', 'ho', 'ho', 'br'],
['tl', 'tr', 'tl', 'tr',
've', 've', 've', 've',
've', 'bl', 'br', 've',
'bl', 'ho', 'tr', 've',
' ', ' ', 've', 've',
' ', ' ', 'bl', 'br'],
['tl', 'ho', 'ho', 'tr',
've', 'tl', 'ho', 'br',
've', 'bl', 'ho', 'tr',
'bl', 'ho', 'tr', 've',
'tl', 'ho', 'br', 've',
'bl', 'ho', 'ho', 'br'],
['tl', 'ho', 'ho', 'tr',
've', 'tl', 'ho', 'br',
've', 'bl', 'ho', 'tr',
've', 'tl', 'tr', 've',
've', 'bl', 'br', 've',
'bl', 'ho', 'ho', 'br'],
['tl', 'ho', 'ho', 'tr',
'bl', 'ho', 'tr', 'ev',
' ', ' ', 've', 've',
' ', ' ', 've', 've',
' ', ' ', 've', 've',
' ', ' ', 'bl', 'br'],
['tl', 'ho', 'ho', 'tr',
've', 'tl', 'tr', 've',
've', 'bl', 'br', 've',
've', 'tl', 'tr', 've',
've', 'bl', 'br', 've',
'bl', 'ho', 'ho', 'br'],
['tl', 'ho', 'ho', 'tr',
've', 'tl', 'tr', 've',
've', 'bl', 'br', 've',
'bl', 'ho', 'tr', 've',
'tl', 'ho', 'br', 've',
'bl', 'ho', 'ho', 'br'],
];
function displayNumber(position, number) {
let quadrants = document.querySelectorAll('.quadrant:nth-child('+(++position)+') > .row > div > .clock');
for (key in mapping[number]) {
quadrants[key].classList.remove('tr');
quadrants[key].classList.remove('tl');
quadrants[key].classList.remove('br');
quadrants[key].classList.remove('bl');
quadrants[key].classList.remove('ho');
quadrants[key].classList.remove('ve');
}
setTimeout(() => {
for (key in mapping[number]) {
if (mapping[number][key].trim() !== '') {
quadrants[key].classList.add(mapping[number][key]);
}
}
}, 8000)
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
function displayTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
m = checkTime(m);
time = (h.toString()+m.toString());
time = time.split("");
for(position in time) {
displayNumber(position, time[position]);
}
}
displayTime();
setInterval('displayTime()', 60000);
</script>
</body>
</html>
@GregoireHebert
Copy link
Author

https://jsfiddle.net/j98cmbos/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment