<span class="author">
  CSS based LED Clock by <a href="http://www.aamirafridi.com">AamirAfridi.com</a>
</span>
<span class='cp'>
    Color: <input type="color"/><br/><br/>
  <span class="zoom">Zoom:</span> <input value="0.7" id="defaultSlider" type="range" min="0.1" max="1" step="0.1"  />
</span>
<section id="clock">
  <div id="num-1" class="group">
    <div class="hexagon hor top"></div>
    <div class="hexagon ver left up"></div>
    <div class="hexagon ver right up"></div>
    <div class="hexagon hor mid"></div>
    <div class="hexagon ver left low"></div>
    <div class="hexagon ver right low"></div>
    <div class="hexagon hor low"></div>
  </div>
  <div class="dots group">
    <div class="up"></div>
    <div class="down"></div>
  </div>
</section>

body {
  background: #3b0209;
  width: 100%;
}

#clock {
  margin-left: 50px;
  margin-top: 50px;
}

.author,
.author a {
  color: white;
}

.author {
  position: absolute;
  top: 5px;
  right: 5px;
  opacity: 0.7;
  font-family: sans-serif;
}

.group {
  float: left;
  margin-right: 90px;
  -webkit-transform: skew(-5deg);
  -moz-transform: skew(-5deg);
  -ms-transform: skew(-5deg);
  -o-transform: skew(-5deg);
  transform: skew(-5deg);
}

.num-9 .ver.left.low, .num-0 .hor.mid, .group div {
  opacity: 0.1;
}

.dots div {
  position: relative;
}

.hexagon {
  position: relative;
}
.hexagon.hor {
  width: 100px;
  height: 50px;
}
.hexagon.ver {
  width: 50px;
  height: 150px;
}
.hexagon.left {
  margin-left: -52px;
  margin-top: 2px;
}
.hexagon.left.low {
  margin-left: -52px;
}
.hexagon.right {
  margin-left: 101px;
  margin-top: -150px;
}
.hexagon.right.low {
  margin-left: 101px;
}
.hexagon.hor.mid {
  margin-top: 1px;
}
.hexagon.hor.low {
  margin-top: 1px;
}

.dots div {
  background: #FA4031;
}

.hexagon {
  background: #FA4031;
}
.hexagon:before, .hexagon:after {
  background: #FA4031;
}
.hexagon:before, .hexagon:after {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.hexagon.hor:before {
  left: -18px;
  top: 8px;
}
.hexagon.hor:after {
  right: -18px;
  top: 8px;
}
.hexagon.ver:before {
  top: -18px;
  left: 8px;
}
.hexagon.ver:after {
  bottom: -18px;
  left: 8px;
}

#num-6 {
  margin-right: 0;
}

.cp {
  position: absolute;
  right: 0px;
  bottom: 0px;
  background: rgba(255, 255, 255, 0.96);
  padding: 10px;
  -webkit-border-top-left-radius: 16px;
  color: #575757;
  opacity: 0.2;
  transition: opacity 1s ease-out;
}
.cp:hover {
  opacity: 1;
}

.dots {
  margin-top: 107px;
  margin-left: -55px;
}
.dots div {
  height: 50px;
  width: 50px;
  margin-top: 48px;
  border-radius: 30px;
}

.num-0 div, .num-9 div, .num-8 div {
  opacity: 1;
}

.num-1 .ver.right.up, .num-1 .ver.right.low {
  opacity: 1;
}

.num-3 .ver.right.low, .num-2 .ver.right.up, .num-3 .ver.right.up, .num-7 .ver.right.up {
  opacity: 1;
}

.num-4 .ver.right.up, .num-4 .ver.right.low {
  opacity: 1;
}

.num-5 .ver.right.low, .num-7 .ver.right.low, .num-6 .ver.right.low, .num-2 .hor.top, .num-7 .hor.top, .num-3 .hor.top, .num-6 .hor.top, .num-5 .hor.top, .num-2 .hor.mid, .num-3 .hor.mid, .num-4 .hor.mid, .num-6 .hor.mid, .num-5 .hor.mid, .num-2 .ver.left.low, .num-6 .ver.left.low, .num-4 .ver.left.up, .num-5 .ver.left.up, .num-6 .ver.left.up, .num-2 .hor.low, .num-3 .hor.low, .num-5 .hor.low, .num-6 .hor.low, .dots div {
  opacity: 1;
}

#defaultSlider {
  width: 100px;
}

.zoom {
  float: left;
}

$(function () { //return;
    var
        $group1 = $('.group:first'),
        cssClasses = $group1.attr('class') + ' num-',
        $clock = $('#clock'),
        $newDots = $('.dots').clone();
  
    //remove dots original copy
    $('.dots').remove();
   
    //append digits and dots to the clock container
    $clock.append(
      $group1.clone().attr('id', 'num-2'),
      $newDots,
      $group1.clone().attr('id', 'num-3'),
      $group1.clone().attr('id', 'num-4'),
      $newDots.clone(),
      $group1.clone().attr('id', 'num-5'),
      $group1.clone().attr('id', 'num-6'),
      '<br style="clear:both" />'
    )
    
    var $group2 = $('#num-2'),
        $group3 = $('#num-3'),
        $group4 = $('#num-4'),
        $group5 = $('#num-5'),
        $group6 = $('#num-6');


    function updateClock() {
        // Gets the current time
        var now = new Date();

        // Get the hours, minutes and seconds from the current time
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        // Format hours, minutes and seconds
        if (hours < 10) {
            hours = "0" + hours;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }

        hours = hours.toString().split('');
        minutes = minutes.toString().split('');
        seconds = seconds.toString().split('');

        $group1.attr('class', cssClasses + hours[0])
        $group2.attr('class', cssClasses + hours[1])
        $group3.attr('class', cssClasses + minutes[0])
        $group4.attr('class', cssClasses + minutes[1])
        $group5.attr('class', cssClasses + seconds[0])
        $group6.attr('class', cssClasses + seconds[1])

    }

    setInterval(updateClock, 1000);
    updateClock();

    //color picker
    $('head').append('<style></style>');
    var $style = $('head style:last');
  
  $('input:first')
    .spectrum({
        color: "#FA4031",
        showInput: true,
        className: "full-spectrum",
        showInitial: true,
        showPalette: true,
        showSelectionPalette: true,
        maxPaletteSize: 10,
        preferredFormat: "hex",
        localStorageKey: "spectrum.demo",
        move: function(color) {
            $style
              .empty()
            .html(
              '.dots div, .hexagon, .hexagon:after,'
              +' .hexagon:before { background:'
              + color
              + '}')
        },
        palette: [
            ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
            "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
            ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
            "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], 
            ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", 
            "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", 
            "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", 
            "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", 
            "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", 
            "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
            "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
            "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
            "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", 
            "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
        ]
    }); 
  
    //zoom clock
    var transFormPrefixed = PrefixFree.prefixProperty('transform');
    $('#defaultSlider').on('input change',function() {
      $clock.attr(
        'style', 
        transFormPrefixed + ': scale('+this.value+')'
      );
    }).change();
});