Counter.html

counter.html

<style>
/* from http://sanographix.github.io/css3-countdown/demo/ */

dl.discharge .number-wrapper {
    margin: 5px;
    height: 100%;
    font-size: 68px;
    -moz-box-shadow: 0 5px 8px #000000;
    -webkit-box-shadow: 0 5px 8px #000000;
    box-shadow: 0 5px 8px #000000;
    position: relative;
}

dl.discharge .caption {
    position: absolute;
    bottom: -10px;
    left: 0;
    text-align: center;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    width: 100%;
    color: #bbb;
}
dl.discharge .number.day {
  color: #deb;
}

dl.discharge .number {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background: #000;
    background-image: linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
    background-image: -o-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
    background-image: -moz-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
    background-image: -webkit-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
    background-image: -ms-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
    -webkit-border-top-right-radius: 7px;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topleft: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    padding: 0 12px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px solid #555;
    -moz-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
    -moz-text-shadow: 0 3px 3px #000000;
    -webkit-text-shadow: 0 3px 3px #000000;
    text-shadow: 0 3px 3px #000000;
}

dl.discharge .line {
    position: absolute;
    width: 100%;
    height: 1px;
    top: 52%;
    left: 0;
    background: #000;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

dl.discharge dt.name {
    padding-bottom: 5px;
    font-weight: bold;
}
dl.discharge span.number {
    color: #eee;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 48pt;
}
dl.discharge i.caption {
    font-size: 12pt;
}
dl.discharge .infinity {
    font-family: 'Arial', sans-serif;
    font-weight: 800;
    font-size: 48pt;
    color: #555;
}
</style>


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="dischargeWrapper"></div>

<script type="text/javascript">
$(function(){

var display = function() {
  $("dl.discharge").each(function(i, e) {
    var started = $(this).attr('data-discharge-date').length > 0,
      dischargeDate = new Date($(this).attr('data-discharge-date')),
      remainTime = (dischargeDate - new Date() - ( 9 * 3600 * 1000)) / 1000,
      remainDay = Math.floor(remainTime / 60 / 60 / 24),
      remainHour = Math.floor(remainTime / 60 / 60 % 24),
      remainMinute = Math.floor(remainTime / 60 % 60),
      remainSecond = Math.floor(remainTime % 60);

      if(!started) { $(e).find('dd').html('<span class="infinity">∞</span>'); }
      else if(remainTime > 0) {
        var ht = $.map( [
          ['day', remainDay, 'days'],
          ['hour', remainHour, 'hr'],
          ['min', remainMinute, 'min'],
          ['sec', remainSecond, 'sec'] ], function(v, i) {
           function padzero(v) { return (v<10) ? ('0'+v) : v; }
            var s = '<span class="number-wrapper">';
            s += '<div class="line"></div>';
            s += '<div class="caption">' + v[2] + '</div>';
            s += '<span class="number ' + v[0] + '">' + padzero(v[1]) + '</span>';
            s += '</span>';
            return s;
        }).join(" ");

        $(e).find('dd').html(ht);
      }
      else {
        $(e).find('dd').html('이미 민간인. 좋겠다...');
      }
    });
  };

  var sortFunc = function(a, b) {
    var aa = a[1] || 'Z', bb = b[1] || 'Z';
    if(aa > bb) return 1;
    if(aa < bb) return -1;
    return 0;
  };

  myName = $("#CommonUserName").find('a').text();
  members.sort(sortFunc);
  otherMembers.sort(sortFunc);

  var draw = function(i, e) {
    var dlElem = $("<dl>").addClass('discharge').attr('data-discharge-date', e[1]).append($("<dt class='name'>").html(e[0])).append($("<dd>"));
    dlElem.appendTo($("#dischargeWrapper"));
    if(myName == e[0]) dlElem.addClass('mine');
  };
  $.each(members, draw);
  $("#dischargeWrapper").append("<hr>");
  $.each(otherMembers, draw);

  display();
  setInterval(display, 1000);
});

</script>