jessedhillon/makertime-calendar.html

## makertime-calendar.html
<html>
  <head>
    <style type="text/css">
      body {
        font-family: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif
      }

      #clock {
        display: flex;
        flex-flow: column;
        align-items: center;
      }

      .segment {
        display: flex;
        flex-flow: row nowrap;
      }

      .date {
        position: absolute;
        bottom: 0;
        margin: 0 0 2px 2px;
        text-transform: uppercase;
        font-size: 50%;
        color: rgba(50, 50, 50, 0.5);
      }

      .block {
        position: relative;
        height: 50px;
        width: 50px;
        margin: 2px;
        box-sizing: border-box;
        padding: 2px;
      }

      .block.past {
        border: 1px solid rgba(50, 50, 50, 0.25);
      }

      .block.current {
        border: 1px solid rgba(119, 130, 226, 0.75);
      }

      .block.future {
        border: 1px solid #64bb4b;
      }

      .block label {
        position: absolute;
        display: block;
        height: 40px;
        width: 40px;
        line-height: 40px;
        left: 4px;
        top: 4px;
        text-align: center;
        vertical-align: middle;
      }

      .block .progress {
        height: 100%;
      }

      .block .progress .empty {
        background: rgba(50, 50, 50, 0.25);
      }

      .block .progress .empty label {
        color: rgba(50, 50, 50, 0.50);
      }

      .block .progress .full {
        background: #64bb4b;
      }

      .block.current .progress .full label {
        border-radius: 40px;
        background: rgba(119, 130, 226, 0.75);
        color: rgba(255, 255, 255, 0.95);
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
        border: 1px solid #004cff;
        box-sizing: border-box;
      }

      .block .progress .full label {
        color: rgba(255, 255, 255, 0.5);
      }

      .height-0 {
        height: 0%;
      }

      .height-1 {
        height: 25%;
      }

      .height-2 {
        height: 50%;
      }

      .height-3 {
        height: 75%;
      }

      .height-4 {
        height: 100%;
      }
    </style>
    <script type="text/javascript">
function blocksForYear(year) {
  var isLeapYear = (year % 100 == 0) ? (year % 400 == 0) : (year % 4 == 0);
  return isLeapYear ? 1098 : 1095
}

function currentBlockQuartile() {
  // 0 < 2 hours remain: q1
  // 2 < 4 hours remain: q2
  // 3 < 4 hours remain: q3
  var now = new Date();
  var blockLength = 8;
  var remainingHours = blockLength - ((now.getHours() % blockLength) + 1);
  if(remainingHours <= 2) {
    return 1;
  } else if(remainingHours <= 4) {
    return 2;
  } else if(remainingHours <= 6) {
    return 3;
  } else {
    return 4;
  }
}

function makeTimeForDate(date) {
  if(!date) {
    date = new Date();
  }
  var blocksPerDay = 3;
  var start = new Date(date.getFullYear(), 0, 0);
  var diff = date - start;
  var oneDay = 1000 * 60 * 60 * 24;
  var dayOfYear = Math.floor(diff / oneDay);
  var makeTimeEndOfToday = blocksForYear(date.getFullYear()) - (dayOfYear * blocksPerDay);
  var blocksRemainingToday = Math.floor((23 - date.getHours()) / 8);

  return makeTimeEndOfToday + blocksRemainingToday + 1;
}

function dateForMakeTime(blockNum, year) {
  var blockLength = 1000 * 60 * 60 * 8;
  var s = blockLength * (blocksForYear(year) - blockNum);
  var t = new Date(year, 0, 1).getTime();
  return new Date(t + s);
}

function formatDate(date) {
  var d = date.getDate().toString();
  if(d.length == 1) {
    d = "0" + d;
  }

  var m = (date.getMonth() + 1).toString();
  if(m.length == 1) {
    m = "0" + m;
  }

  return m + "/" + d;
}

function makeClock(startDate, endDate) {
  console.log('current maketime', makeTimeForDate());
  var now = new Date();
  var startDate = startDate || new Date(now.getFullYear(), 0, 1);
  var endDate = endDate || new Date(2017, 2, 30);

  var year = now.getFullYear();
  var blockCount = blocksForYear(year);

  var clockEl = document.getElementById('clock');
  var segmentSize = 15;
  var segmentCount = Math.ceil(blockCount / segmentSize);
  var blockNum = blockCount;

  var currentBlock = makeTimeForDate();
  var currentYear = year;

  clockEl.innerHTML = '';

  for(var s = 0; dateForMakeTime(blockNum, year) < endDate; s++) {
    var segmentEl = document.createElement('div');
    segmentEl.classList.add('segment');

    for(var b = 0; b < segmentSize && blockNum > 0; b++) {
      var blockEl = document.createElement('div');
      blockEl.classList.add('block');
      segmentEl.appendChild(blockEl);

      var progressEl = document.createElement('div');
      var emptyEl = document.createElement('div');
      var fullEl = document.createElement('div');

      progressEl.classList.add('progress');
      emptyEl.classList.add('empty');
      fullEl.classList.add('full');

      progressEl.appendChild(emptyEl);
      progressEl.appendChild(fullEl);
      blockEl.appendChild(progressEl);

      if(blockNum == currentBlock && year == currentYear) {
        var quartile = currentBlockQuartile();
        emptyEl.classList.add('height-' + (4 - quartile));
        fullEl.classList.add('height-' + quartile);

        var fullLabelEl = document.createElement('label');
        fullLabelEl.innerHTML = blockNum.toString();
        fullEl.appendChild(fullLabelEl);

        blockEl.classList.add('current');
      } else {
        var blockDate = dateForMakeTime(blockNum, year);

        if(blockDate < now) {
          var labelEl = document.createElement('label');
          labelEl.innerHTML = blockNum.toString();

          emptyEl.classList.add('height-4');
          emptyEl.appendChild(labelEl);

          blockEl.classList.add('past');
        } else if(blockDate > now) {
          var labelEl = document.createElement('label');
          labelEl.innerHTML = blockNum.toString();

          fullEl.classList.add('height-4');
          fullEl.appendChild(labelEl);

          blockEl.classList.add('future');
        }
      }

      blockEl.setAttribute('id', 'block-' + blockNum);
      blockNum--;

      if(blockNum == 0) {
        year += 1;
        blockNum = blocksForYear(year);
      }

      if(b == 0) {
        var dateEl = document.createElement('p');
        dateEl.innerHTML = formatDate(dateForMakeTime(blockNum, year));
        dateEl.classList.add('date');
        blockEl.appendChild(dateEl);
      }
    }

    clockEl.appendChild(segmentEl);
  }
};

function refreshClock() {
  makeClock();
  setTimeout(function() {
    document.querySelector('.block.current').scrollIntoView();
  });
}

var refreshPeriod = 15 * 60 * 1000;
document.addEventListener('DOMContentLoaded', function() {
  refreshClock();
  setInterval(refreshClock, refreshPeriod);
});
    </script>
  </head>

  <body>
    <div class="container">
      <div id="clock"></div>
    </div>
  </body>
</html>
	<html>
	<head>
	<style type="text/css">
	body {
	font-family: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif
	}

	#clock {
	display: flex;
	flex-flow: column;
	align-items: center;
	}

	.segment {
	display: flex;
	flex-flow: row nowrap;
	}

	.date {
	position: absolute;
	bottom: 0;
	margin: 0 0 2px 2px;
	text-transform: uppercase;
	font-size: 50%;
	color: rgba(50, 50, 50, 0.5);
	}

	.block {
	position: relative;
	height: 50px;
	width: 50px;
	margin: 2px;
	box-sizing: border-box;
	padding: 2px;
	}

	.block.past {
	border: 1px solid rgba(50, 50, 50, 0.25);
	}

	.block.current {
	border: 1px solid rgba(119, 130, 226, 0.75);
	}

	.block.future {
	border: 1px solid #64bb4b;
	}

	.block label {
	position: absolute;
	display: block;
	height: 40px;
	width: 40px;
	line-height: 40px;
	left: 4px;
	top: 4px;
	text-align: center;
	vertical-align: middle;
	}

	.block .progress {
	height: 100%;
	}

	.block .progress .empty {
	background: rgba(50, 50, 50, 0.25);
	}

	.block .progress .empty label {
	color: rgba(50, 50, 50, 0.50);
	}

	.block .progress .full {
	background: #64bb4b;
	}

	.block.current .progress .full label {
	border-radius: 40px;
	background: rgba(119, 130, 226, 0.75);
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
	border: 1px solid #004cff;
	box-sizing: border-box;
	}

	.block .progress .full label {
	color: rgba(255, 255, 255, 0.5);
	}

	.height-0 {
	height: 0%;
	}

	.height-1 {
	height: 25%;
	}

	.height-2 {
	height: 50%;
	}

	.height-3 {
	height: 75%;
	}

	.height-4 {
	height: 100%;
	}
	</style>
	<script type="text/javascript">
	function blocksForYear(year) {
	var isLeapYear = (year % 100 == 0) ? (year % 400 == 0) : (year % 4 == 0);
	return isLeapYear ? 1098 : 1095
	}

	function currentBlockQuartile() {
	// 0 < 2 hours remain: q1
	// 2 < 4 hours remain: q2
	// 3 < 4 hours remain: q3
	var now = new Date();
	var blockLength = 8;
	var remainingHours = blockLength - ((now.getHours() % blockLength) + 1);
	if(remainingHours <= 2) {
	return 1;
	} else if(remainingHours <= 4) {
	return 2;
	} else if(remainingHours <= 6) {
	return 3;
	} else {
	return 4;
	}
	}

	function makeTimeForDate(date) {
	if(!date) {
	date = new Date();
	}
	var blocksPerDay = 3;
	var start = new Date(date.getFullYear(), 0, 0);
	var diff = date - start;
	var oneDay = 1000 * 60 * 60 * 24;
	var dayOfYear = Math.floor(diff / oneDay);
	var makeTimeEndOfToday = blocksForYear(date.getFullYear()) - (dayOfYear * blocksPerDay);
	var blocksRemainingToday = Math.floor((23 - date.getHours()) / 8);

	return makeTimeEndOfToday + blocksRemainingToday + 1;
	}

	function dateForMakeTime(blockNum, year) {
	var blockLength = 1000 * 60 * 60 * 8;
	var s = blockLength * (blocksForYear(year) - blockNum);
	var t = new Date(year, 0, 1).getTime();
	return new Date(t + s);
	}

	function formatDate(date) {
	var d = date.getDate().toString();
	if(d.length == 1) {
	d = "0" + d;
	}

	var m = (date.getMonth() + 1).toString();
	if(m.length == 1) {
	m = "0" + m;
	}

	return m + "/" + d;
	}

	function makeClock(startDate, endDate) {
	console.log('current maketime', makeTimeForDate());
	var now = new Date();
	var startDate = startDate \|\| new Date(now.getFullYear(), 0, 1);
	var endDate = endDate \|\| new Date(2017, 2, 30);

	var year = now.getFullYear();
	var blockCount = blocksForYear(year);

	var clockEl = document.getElementById('clock');
	var segmentSize = 15;
	var segmentCount = Math.ceil(blockCount / segmentSize);
	var blockNum = blockCount;

	var currentBlock = makeTimeForDate();
	var currentYear = year;

	clockEl.innerHTML = '';

	for(var s = 0; dateForMakeTime(blockNum, year) < endDate; s++) {
	var segmentEl = document.createElement('div');
	segmentEl.classList.add('segment');

	for(var b = 0; b < segmentSize && blockNum > 0; b++) {
	var blockEl = document.createElement('div');
	blockEl.classList.add('block');
	segmentEl.appendChild(blockEl);

	var progressEl = document.createElement('div');
	var emptyEl = document.createElement('div');
	var fullEl = document.createElement('div');

	progressEl.classList.add('progress');
	emptyEl.classList.add('empty');
	fullEl.classList.add('full');

	progressEl.appendChild(emptyEl);
	progressEl.appendChild(fullEl);
	blockEl.appendChild(progressEl);

	if(blockNum == currentBlock && year == currentYear) {
	var quartile = currentBlockQuartile();
	emptyEl.classList.add('height-' + (4 - quartile));
	fullEl.classList.add('height-' + quartile);

	var fullLabelEl = document.createElement('label');
	fullLabelEl.innerHTML = blockNum.toString();
	fullEl.appendChild(fullLabelEl);

	blockEl.classList.add('current');
	} else {
	var blockDate = dateForMakeTime(blockNum, year);

	if(blockDate < now) {
	var labelEl = document.createElement('label');
	labelEl.innerHTML = blockNum.toString();

	emptyEl.classList.add('height-4');
	emptyEl.appendChild(labelEl);

	blockEl.classList.add('past');
	} else if(blockDate > now) {
	var labelEl = document.createElement('label');
	labelEl.innerHTML = blockNum.toString();

	fullEl.classList.add('height-4');
	fullEl.appendChild(labelEl);

	blockEl.classList.add('future');
	}
	}

	blockEl.setAttribute('id', 'block-' + blockNum);
	blockNum--;

	if(blockNum == 0) {
	year += 1;
	blockNum = blocksForYear(year);
	}

	if(b == 0) {
	var dateEl = document.createElement('p');
	dateEl.innerHTML = formatDate(dateForMakeTime(blockNum, year));
	dateEl.classList.add('date');
	blockEl.appendChild(dateEl);
	}
	}

	clockEl.appendChild(segmentEl);
	}
	};

	function refreshClock() {
	makeClock();
	setTimeout(function() {
	document.querySelector('.block.current').scrollIntoView();
	});
	}

	var refreshPeriod = 15 * 60 * 1000;
	document.addEventListener('DOMContentLoaded', function() {
	refreshClock();
	setInterval(refreshClock, refreshPeriod);
	});
	</script>
	</head>

	<body>
	<div class="container">
	<div id="clock"></div>
	</div>
	</body>
	</html>