partlyhuman/index.html

## index.html
<html>
<head>
  <title></title>
  <style type="text/css">
  body {
    background-color: black;
    color: white;
  }
  .select {
    position: absolute;
    top: 5;
    width: 100%;
    text-align: center;
  }
  body {
    margin: 0;
    text-align: center;
    display: table;
    height: 100%;
    width: 100%;
  }
  .wrap {
    padding: 0;
    display: table-cell;
    align: center;
    vertical-align: middle;
    text-align: center;
  }
  .card {
    display: none;
    margin: 0 auto;
    padding: 2em;
    max-width: 85%;
    border: 2px solid #444;
    border-radius: 5px;
  }
  h2 {
    margin: 0;
    font-family: "Helvetica-Light", "HelveticaNeue-Light", "Helvetica", sans-serif;
    font-weight: normal;
    font-size: 500%;
  }
  </style>
</head>
<body>


<div class="select">
<select><option>Select a board...</option></select>
</div>

<div class="wrap">
<div class="card">
  <h2 id="name"></h2>
  <pre id="desc"></pre>
</div>
</div>

<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
                                          <!-- replace with your API key -->
<script src="//api.trello.com/1/client.js?key=###########################"></script>
<script>
var UpdateSeconds = 120;
var SelectedBoard = null;
var UpdateInterval = null;

function populateBoards() {
  Trello.get('/members/me', {boards: 'open'}, function(member){
    var $select = $('select').show();
    for (var i = 0; i < member.boards.length; i++) {
      var board = member.boards[i];
      $select.append($("<option>").attr({value: board.id}).html(board.name));
    };
    $select.change(function(e){
      SelectedBoard = $(this).val();
      $.cookie('SelectedBoard', SelectedBoard);
      update();
    });
    SelectedBoard = $.cookie('SelectedBoard');
    if (SelectedBoard) {
      $select.val(SelectedBoard);
    }
    beginUpdateLoop();
  }, function (err) {
    debugger;
    console.error(err);
  });
}

function update() {
  if (!SelectedBoard) return;
  Trello.get('/boards/'+SelectedBoard+'/lists', {cards: 'open', card_fields: 'desc,name'}, function(lists) {
    var $card = $('.card');
    try {
      var card = lists[0].cards[0];
      document.title = card.name;
      $('#name').text(card.name);
      $('#desc').text(card.desc);
      $card.show();
    } catch(e) {
      console.error(e);
      $card.hide();
    }
  }, function(err) {
    console.error("Error!", err);
  });
}

function beginUpdateLoop() {
  update();
  if (UpdateInterval) {
    window.clearInterval(UpdateInterval);
  }
  UpdateInterval = window.setInterval(update, 1000 * UpdateSeconds);
}

Trello.authorize({interactive: false});
if (Trello.authorized()) {
  populateBoards();
} else {
  Trello.authorize({type: 'redirect', name: 'TrelloTask', persist: 'true', expiration: 'never'});
}

</script>

</body>
</html>
	<html>
	<head>
	<title></title>
	<style type="text/css">
	body {
	background-color: black;
	color: white;
	}
	.select {
	position: absolute;
	top: 5;
	width: 100%;
	text-align: center;
	}
	body {
	margin: 0;
	text-align: center;
	display: table;
	height: 100%;
	width: 100%;
	}
	.wrap {
	padding: 0;
	display: table-cell;
	align: center;
	vertical-align: middle;
	text-align: center;
	}
	.card {
	display: none;
	margin: 0 auto;
	padding: 2em;
	max-width: 85%;
	border: 2px solid #444;
	border-radius: 5px;
	}
	h2 {
	margin: 0;
	font-family: "Helvetica-Light", "HelveticaNeue-Light", "Helvetica", sans-serif;
	font-weight: normal;
	font-size: 500%;
	}
	</style>
	</head>
	<body>


	<div class="select">
	<select><option>Select a board...</option></select>
	</div>

	<div class="wrap">
	<div class="card">
	<h2 id="name"></h2>
	<pre id="desc"></pre>
	</div>
	</div>

	<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<!-- replace with your API key -->
	<script src="//api.trello.com/1/client.js?key=###########################"></script>
	<script>
	var UpdateSeconds = 120;
	var SelectedBoard = null;
	var UpdateInterval = null;

	function populateBoards() {
	Trello.get('/members/me', {boards: 'open'}, function(member){
	var $select = $('select').show();
	for (var i = 0; i < member.boards.length; i++) {
	var board = member.boards[i];
	$select.append($("<option>").attr({value: board.id}).html(board.name));
	};
	$select.change(function(e){
	SelectedBoard = $(this).val();
	$.cookie('SelectedBoard', SelectedBoard);
	update();
	});
	SelectedBoard = $.cookie('SelectedBoard');
	if (SelectedBoard) {
	$select.val(SelectedBoard);
	}
	beginUpdateLoop();
	}, function (err) {
	debugger;
	console.error(err);
	});
	}

	function update() {
	if (!SelectedBoard) return;
	Trello.get('/boards/'+SelectedBoard+'/lists', {cards: 'open', card_fields: 'desc,name'}, function(lists) {
	var $card = $('.card');
	try {
	var card = lists[0].cards[0];
	document.title = card.name;
	$('#name').text(card.name);
	$('#desc').text(card.desc);
	$card.show();
	} catch(e) {
	console.error(e);
	$card.hide();
	}
	}, function(err) {
	console.error("Error!", err);
	});
	}

	function beginUpdateLoop() {
	update();
	if (UpdateInterval) {
	window.clearInterval(UpdateInterval);
	}
	UpdateInterval = window.setInterval(update, 1000 * UpdateSeconds);
	}

	Trello.authorize({interactive: false});
	if (Trello.authorized()) {
	populateBoards();
	} else {
	Trello.authorize({type: 'redirect', name: 'TrelloTask', persist: 'true', expiration: 'never'});
	}

	</script>

	</body>
	</html>