<!DOCTYPE blah>
<html>
<head>
  <title>f0ck me!</title>
  <link rel="icon" type="image/gif" href="./s/favicon.gif" />
  <link rel="stylesheet" type="text/css" href="./s/style.css">
</head>
<body>
	<div class="navbar"><a href="/">f0ck.me</a> | <a href="/how">how to</a> | <a href="/contact">Contact</a>| <span id="themes"></span></div>
  <ul id="posts" data-last="{{ last }}">
    {% for item in items %}<li class="post"><a href="./{{ item.id }}" title="{{ item.mime }}"><img class="thumb" src="./t/{{ item.id }}.png" /></a></li>
    {% endfor %}
  </ul>
  <script src="./s/jquery-3.1.0.min.js"></script>
  <script>
  var load = false;
  $(()=>{
    $(window).scroll(()=>{
      if($(window).scrollTop() + $(window).height() >= $(document).height() - 130 && !load) {
        load = true;
        $.getJSON('./api/p/'+$('#posts').data('last'), (msg) => {
          var html = "";
          for(var i = 0; i < msg.items.length; i++)
            if(msg.items[i].id)
              html += "<li class=\"post\"><a href=\"./"+msg.items[i].id+"\" title=\""+msg.items[i].mime+"\"><img class=\"thumb\" src=\"./t/"+msg.items[i].id+".png\" /></a></li>\n";
          $('#posts').append(html);
          $('#posts').data('last', msg.last);
          load = false;
        });
      }
    });
  });
</script>
<script src="theme.js"></script>
</body>
</html>