- var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

- var today = new Date()
- var getMonth = monthNames[today.getMonth()]
- var getHours = today.getHours()
- var getHours = today.getHours()
- var getMinutes = today.getHours()

- var type  = 'meeting'
- var day   = today.getDate();
- var month = getMonth.substr(getMonth, 3)
- var year  = today.getFullYear()
- var hour  = (getHours >= 0 && getHours < 10) ? "0" + getHours : getHours + ""
- var min   = (getMinutes >= 0 && getMinutes < 10) ? "0" + getMinutes : getMinutes + ""

.wrapper
  .block
    .cal
      .cal__item.month #{month}
      .cal__item.day #{day}
      .cal__item.year #{year}
    .timer
      .timer__item.sec
      .timer__item.min
      .timer__item.hour
  .message
    | A 
    span.label.type #{type}
    |  will happen on the 
    span.label.day #{day}
    |  of 
    span.label.month #{month}
    |  at 
    span#time.label #{hour}:#{min}
    |.

// fonts ----------
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700)


// vars ----------

// colors
$color__gray--light: #E5E6E7
$color__gray: #7C8BA4
$color__gray--dark: #323a44
$color__red: #E74C3C
$color__green: #65AB09
$color__blue: #0099ff

// calendar
$calendar__width: 300px
$calendar__border-width: 12px

// timer
$timer__width: $calendar__width/3
$timer__pointer-width: 8px

// global
$global__border-radius: 70px


// mixins ----------

// pointer
=pointer($size, $ratio:1)
  width: $size
  height: ($timer__pointer-width/$ratio)
  margin-top: -($timer__pointer-width/$ratio)/2
  margin-left: -($timer__pointer-width/$ratio)/2
  transform-origin: ($timer__pointer-width/$ratio)/2 ($timer__pointer-width/$ratio)/2

// center absolutely
=center($pos:both)
  position: absolute
  @if $pos == both
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
  @else if $pos == h
    left: 50%
    transform: translateX(-50%)
  @else if $pos == v
    top: 50%
    transform: translateY(-50%)

// font-smooth
=font-smooth
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale


// base ----------
*,
*:before,
*:after
  box-sizing: border-box

body,
html
  font-family: 'Montserrat', sans-serif
  font-size: 100%
  color: $color__gray--dark
  width: 100%
  height: 100%
  padding: 0
  +font-smooth


// layout ----------
.wrapper
  width: $calendar__width
  height: 400px
  +center
  .block
    width: $calendar__width
    height: $calendar__width
    position: relative
    .cal
      width: $calendar__width
      height: $calendar__width
      border: $calendar__border-width solid $color__gray--light
      border-radius: $global__border-radius
      text-align: center
      .cal__item
        width: 100%
        position: absolute
        +center(h)
        &.month
          top: 20px
          color: $color__gray--light
          font-size: 40px
          text-transform: uppercase
        &.day
          font-size: 180px
          +center
        &.year
          bottom: 30px
          color: $color__gray
          font-size: 20px
    .timer
      width: $timer__width
      height: $timer__width
      position: absolute
      bottom: -$timer__width/3
      right: -$timer__width/3
      border: $timer__pointer-width solid $color__gray--dark
      background: white
      border-radius: 50%
      box-shadow: 0 0 0 12px white
      transform: rotate(-90deg)
      .timer__item
        position: absolute
        top: 50%
        left: 50%
        background: $color__gray--dark
        border-radius: $global__border-radius
        &.sec
          +pointer(40%, 3)
          background: $color__red
        &.min
          +pointer(40%)
        &.hour
          +pointer(25%)
  .message
    margin-top: $timer__width/2.5
    font-size: 20px
    text-align: center
    line-height: 2em
    .label
      background: $color__blue
      color: #fff
      font-weight: bold
      padding: 4px 8px 6px
      border-radius: $global__border-radius
      &.type
        background: $color__green
      &.month
        text-transform: uppercase

var hourHand = $('.timer .hour'),
    minuteHand = $('.timer .min'),
    secondHand = $('.timer .sec');
var secondHandFullCircles = 0;


// update time
setInterval(updateTime, 1000);


// time
function updateTime() {
  var timeNow = new Date(),
      seconds = timeNow.getSeconds(),
      minutes = timeNow.getMinutes(),
      hours = timeNow.getHours();

  if (seconds === 0) secondHandFullCircles++;
  seconds += (secondHandFullCircles * 60);
  
  if(hours == 0 && minutes == 0) updateDate();
  
  TweenMax.to(hourHand, .8, {rotation: 30 * hours, ease: Elastic.easeOut});
  TweenMax.to(minuteHand, .8, {rotation: 6 * minutes, ease: Elastic.easeOut});
  TweenMax.to(secondHand, .8, {rotation: 6 * seconds, ease: Elastic.easeOut});
  
  $('#time').html(addZero(hours) + ':' + addZero(minutes));
}


// date
function updateDate() {
  var timeNow = new Date(),
      locale = 'pt-pt',
      day = addZero(timeNow.getDate()),
      month = timeNow.toLocaleString(locale, {month: 'short'}),
      year = timeNow.getFullYear();

  $('.day').html(day);
  $('.month').html(month);
  $('.year').html(year);
}


// add zero
function addZero(num) {
  return (num >= 0 && num < 10) ? "0" + num : num + "";
}