cfebs/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style>
    .row {
      font-family: monospace;
      display: block;
    }
    .box {
      font-family: monospace;
      display: inline-block;
      font-size: 0.7rem;
    }
    #main {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      text-align: center;
    }
  </style>
</head>
<body>

<div id="main">
  <div id="box" class="box">&nbsp;</div>
</div>

<script>
  var mainEl = document.getElementById('#main');
  var dict = '!"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~';
  var message1 = "Hi Dina";
  var message2 = "This is Collin from the ops team";
  var message3 = "Have a great day, see you soon <3";

  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;

  var startTime = window.performance.now();
  var boxEl = document.getElementById('box');

  var rows = Math.min(Math.floor(windowHeight / boxEl.offsetHeight) - 10, 30);
  var cols = Math.min(Math.floor(windowWidth * 0.9 / boxEl.offsetWidth) - 15, 60);

  console.log(windowHeight, windowWidth);
  console.log(boxEl.offsetHeight, boxEl.offsetWidth);
  console.log(rows, cols);

  var message1Row = Math.floor(rows/2) - 3;
  var message2Row = message1Row + 1;
  var message3Row = message1Row + 2;

  var fadeTimes = [];

  var maxTime = 1000*15; // ms

  var charNum = 0;
  for (var r = 0; r < rows; r++) {
      for (var c = 0; c < cols; c++) {
        charNum++;
        fadeTimes[charNum] = Math.floor(Math.random() * maxTime) + 500;
      }
  }


  var now = window.performance.now();

  var isMessage = false;
  var doneCount = 0;

  var drawInterval = null;

  function draw() {
    var totalHtml = '';
    var rowHtml = '';
    var charNum = 0;

    var sinceStart = window.performance.now() - startTime;

    if (sinceStart > maxTime + 2000) {
      clearInterval(drawInterval);
      console.log('done');
      return;
    }

    for (var r = 0; r < rows; r++) {
      rowHtml = '<div class="row">';
      for (var c = 0; c < cols; c++) {
        var boxContent = null;
        charNum++;

        if (sinceStart > fadeTimes[charNum]) {
          if (r == message1Row && c < message1.length) {
            // get message1 col
            boxContent = message1[c];
          }
          else if (r == message2Row && c < message2.length) {
            // get message2 col
            boxContent = message2[c];
          }
          else if (r == message3Row && c < message3.length) {
            // get message3 col
            boxContent = message3[c];
          }
        }
        else {
          boxContent = dict[Math.floor(Math.random() * dict.length)];
        }

        if (!boxContent || boxContent == ' ') {
          boxContent = '&nbsp;';
        }

        rowHtml += '<div class="box">' + boxContent + '</div>';
      }
      rowHtml += '</div>';
      totalHtml += rowHtml;
    }

    main.innerHTML = totalHtml;
  }

  draw();
  drawInterval = setInterval(function() {
    draw();
  }, 1000/10);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style>
	.row {
	font-family: monospace;
	display: block;
	}
	.box {
	font-family: monospace;
	display: inline-block;
	font-size: 0.7rem;
	}
	#main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	text-align: center;
	}
	</style>
	</head>
	<body>

	<div id="main">
	<div id="box" class="box"> </div>
	</div>

	<script>
	var mainEl = document.getElementById('#main');
	var dict = '!"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{\|}~';
	var message1 = "Hi Dina";
	var message2 = "This is Collin from the ops team";
	var message3 = "Have a great day, see you soon <3";

	var windowWidth = window.innerWidth;
	var windowHeight = window.innerHeight;

	var startTime = window.performance.now();
	var boxEl = document.getElementById('box');

	var rows = Math.min(Math.floor(windowHeight / boxEl.offsetHeight) - 10, 30);
	var cols = Math.min(Math.floor(windowWidth * 0.9 / boxEl.offsetWidth) - 15, 60);

	console.log(windowHeight, windowWidth);
	console.log(boxEl.offsetHeight, boxEl.offsetWidth);
	console.log(rows, cols);

	var message1Row = Math.floor(rows/2) - 3;
	var message2Row = message1Row + 1;
	var message3Row = message1Row + 2;

	var fadeTimes = [];

	var maxTime = 1000*15; // ms

	var charNum = 0;
	for (var r = 0; r < rows; r++) {
	for (var c = 0; c < cols; c++) {
	charNum++;
	fadeTimes[charNum] = Math.floor(Math.random() * maxTime) + 500;
	}
	}


	var now = window.performance.now();

	var isMessage = false;
	var doneCount = 0;

	var drawInterval = null;

	function draw() {
	var totalHtml = '';
	var rowHtml = '';
	var charNum = 0;

	var sinceStart = window.performance.now() - startTime;

	if (sinceStart > maxTime + 2000) {
	clearInterval(drawInterval);
	console.log('done');
	return;
	}

	for (var r = 0; r < rows; r++) {
	rowHtml = '<div class="row">';
	for (var c = 0; c < cols; c++) {
	var boxContent = null;
	charNum++;

	if (sinceStart > fadeTimes[charNum]) {
	if (r == message1Row && c < message1.length) {
	// get message1 col
	boxContent = message1[c];
	}
	else if (r == message2Row && c < message2.length) {
	// get message2 col
	boxContent = message2[c];
	}
	else if (r == message3Row && c < message3.length) {
	// get message3 col
	boxContent = message3[c];
	}
	}
	else {
	boxContent = dict[Math.floor(Math.random() * dict.length)];
	}

	if (!boxContent \|\| boxContent == ' ') {
	boxContent = ' ';
	}

	rowHtml += '<div class="box">' + boxContent + '</div>';
	}
	rowHtml += '</div>';
	totalHtml += rowHtml;
	}

	main.innerHTML = totalHtml;
	}

	draw();
	drawInterval = setInterval(function() {
	draw();
	}, 1000/10);
	</script>
	</body>
	</html>