kaa/grid.html

## grid.html
<html style="background:black">
  <textarea id="input"></textarea><br>
  <img style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-height: 100vh; max-width: 100vw" id="grid">
  <script>
    grid = document.getElementById("grid")
    area = document.getElementById("input")
    area.addEventListener("change", function(){
      i = 0;
      items = area.value.split("\n").map(t => t.replace("/small/","/big/").replace("/thumbs","/img").replace("_t.","."));
      update();
    })
    document.body.addEventListener("keyup", function(evt) {
      i += (evt.key=="ArrowLeft" ? -1 : evt.key=="ArrowRight" ? 1 : 0) * (evt.shiftKey ? 10 : 1);
      update();
    })
    function update() {
      grid.setAttribute("src", "")
      grid.setAttribute("src", items[i])
    }
  </script>
</html>
	<html style="background:black">
	<textarea id="input"></textarea><br>
	<img style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-height: 100vh; max-width: 100vw" id="grid">
	<script>
	grid = document.getElementById("grid")
	area = document.getElementById("input")
	area.addEventListener("change", function(){
	i = 0;
	items = area.value.split("\n").map(t => t.replace("/small/","/big/").replace("/thumbs","/img").replace("_t.","."));
	update();
	})
	document.body.addEventListener("keyup", function(evt) {
	i += (evt.key=="ArrowLeft" ? -1 : evt.key=="ArrowRight" ? 1 : 0) * (evt.shiftKey ? 10 : 1);
	update();
	})
	function update() {
	grid.setAttribute("src", "")
	grid.setAttribute("src", items[i])
	}
	</script>
	</html>