Pokemon Clock for Chromecast

clock.html

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  function show_time() {
    $('.clock').html('');
    $('.clock').css('text-align', 'center');

    $('body').css('overflow', 'hidden');

    var date = new Date();
    var hour   = date.getHours(),
        minute = date.getMinutes();
        
    if (hour.toString().length == 1) hour = "0" + hour.toString();
    if (minute.toString().length == 1) minute = "0" + minute.toString();

    var time = $('<div />');
    time.text('The time is now ' + (parseInt(hour) == 0 ? 12 : 
    hour 
    % 12) + 
    ':' + minute);
    time.css('position', 'absolute');
    time.css('bottom', '0');
    time.css('left', '0');
    time.css('text-align', 'center');
    time.css('color', 'white');
    time.css('background', 'black');
    time.css('width', '100%');
    time.css('font-size', '78px');
    time.css('font-family', 'Impact, Charcoal, sans-serif');
    time.css('padding', '20px');
    time.appendTo($('.clock'));

    if (parseInt(hour) == 0) hour = 151;
    if (parseInt(minute) == 0) minute = 151;
    
    var fusion = $('<img />');
    fusion.attr('src', 'http://images.alexonsager.net/pokemon/fused/' + parseInt(hour) + '/' 
    + parseInt(hour) + '.' + parseInt(minute) + '.png');
    fusion.css('height', '90%');
    fusion.appendTo($('.clock'));

  }

  $(document).ready(function() {
    setInterval(show_time, 1000);
  });
</script>

<div class="clock"></div>