JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<img id='poster_blur' style='position:fixed;top:0;right:0;left:0;bottom:0;' class='image_blur' src='https://img2-placeit-net.s3-accelerate.amazonaws.com/uploads/stage/stage_image/21198/large_thumb_placeit__88_.jpg'>
<ul class="title">
  <li>A</li>
</ul>


<div id="background">
    <img id='poster'src='https://img2-placeit-net.s3-accelerate.amazonaws.com/uploads/stage/stage_image/21198/large_thumb_placeit__88_.jpg' class='stretch' />
</div>

<div id='gesture' style='position:fixed;top:0;bottom:0;left:0;right:0;z-index:99;'>

</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}
  * {
      touch-action: manipulation;
  }
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 5px;
  padding:5px;
  list-style:none;
}

li {
  background-color: rgba(255,255,255,0.1);
  border-radius: 3px;
  padding: 10px;
  font-size: 14px;
}

.title {
  z-index: 1;
  color: rgba(255,255,255,0.8);
  text-align:center;
}

.next_skip_ui {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.next_skip_ui > li {
    background: none;
}

.background {
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1;
}

.stretch {
    width: 80%;
    height: 80%;
        padding:10%;
}
.image_blur {
    -webkit-filter: blur(100px);
    -moz-filter: blur(100px);
    -o-filter: blur(100px);
    -ms-filter: blur(100px);
    filter: blur(100px);
    z-index: -1;
     min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

JavaScript

var tapedTwice = false;

  
var direction = '',
    path = '',
    oldx = 0,
    oldy = 0,
    block = false;    
$(document).bind('touchmove mousemove touchstart click', function (e) {

//console.log(e);
//console.log(e.handleObj.type)
//console.log(e)
if(e.handleObj.type == 'touchstart'){
if (e.touches.length === 2) {
   alert("closse windows");
}
	var touch = e.touches[0];
var x = touch.pageX;
    var width = document.body.clientWidth;
    var path = ""
    if(width / 2 > x)
    {
    	path = "/prev";
    }
    else
    {
    	path = "/next";
    }
    if(!tapedTwice) {
        tapedTwice = true;
        setTimeout( function() { tapedTwice = false; }, 300 );
        return false;
    }
    event.preventDefault();
    //action on double tap goes below
     const req = new XMLHttpRequest();
      	req.open('GET', location.protocol + '//' + location.host + path, false); 
      	req.send(null);
        if (req.status === 200) {
} else {
}
}
  var introunded = 100;
if(e.originalEvent.touches == undefined){

	introunded = 100;
}else{
  introunded = 100;
}
	if(oldx == 0 || oldy == 0)
  {
  	oldy = e.originalEvent.touches ? Math.round(e.originalEvent.touches[0].pageY/ introunded) * introunded : Math.round(e.pageY / introunded) * introunded;
		oldx = e.originalEvent.touches ? Math.round(e.originalEvent.touches[0].pageX/ introunded) * introunded : Math.round(e.pageX / introunded) * introunded;
  }
				var currentY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY;
   			var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
     
       currentY =  Math.round(currentY / introunded) * introunded;
       currentX =  Math.round(currentX / introunded) * introunded;
        
        direction = d(oldx,currentX,oldy,currentY);

        if(direction == undefined)
        {
        	return;
        }
  
        if(direction == 'top')
        {
        	path = '/up';
        }
        if(direction == 'bottom')
        {
       ...