killroy42/index.html

## index.html
<html><head><script>
var map = Array.prototype.map;
var toArray = [].slice.apply.bind([].slice);
var p = Promise.resolve();
var htmlStyle = 'height: 100%; background: #000;';
var bodyStyle =
	'height: 100%; margin: 0;'+
	'text-align: center;'+
	'color: grey;'+
	'background-repeat: no-repeat;'+
	'background-position: center center;'+
	'background-size: contain;';
var divStyle =
	'position: absolute;'+
	'width: 100%; height: 100%;'+
	'background-repeat: no-repeat;'+
	'background-position: center center;'+
	'background-size: contain;'+
	'transition: opacity 0.3s ease-in-out;';
var slideShowInterval = 3000;

function main() {
	var cur, interval, imageUrls = [];
	document.documentElement.style.cssText = htmlStyle
	document.body.style.cssText = bodyStyle;
	document.body.innerHTML = 'Drop Images Here';
	document.addEventListener('dragenter', cancelEvent);
	document.addEventListener('dragover', cancelEvent);
	document.addEventListener('drop', function(e) {
		cancelEvent(e);
		document.body.innerHTML = '<div>';
		var img1 = document.createElement('div');
		var img2 = document.createElement('div');
		img1.style.cssText = divStyle;
		img2.style.cssText = divStyle;
		document.body.appendChild(img1);
		document.body.appendChild(img2);
		var files = toArray(e.dataTransfer.files);
		clearInterval(interval);
		imageUrls.forEach(window.URL.revokeObjectURL.bind(window.URL));
		imageUrls = files.map(window.URL.createObjectURL.bind(window.URL));
		cur = 0;
		function showImage() {
			img1.style.backgroundImage = 'url('+imageUrls[cur]+')';
			setTimeout(function() {
				img1.style.opacity = '1';
				img2.style.opacity = '0';
				var tmp = img1;
				img1 = img2;
				img2 = tmp;
			}, 100);
			cur = (cur + 1) % imageUrls.length;
		}
		showImage();
		interval = setInterval(showImage, slideShowInterval);
	});
}

function cancelEvent(e) {
	e.stopPropagation();
	e.preventDefault();
}

document.addEventListener('DOMContentLoaded', main);
</script></head></html>
	<html><head><script>
	var map = Array.prototype.map;
	var toArray = [].slice.apply.bind([].slice);
	var p = Promise.resolve();
	var htmlStyle = 'height: 100%; background: #000;';
	var bodyStyle =
	'height: 100%; margin: 0;'+
	'text-align: center;'+
	'color: grey;'+
	'background-repeat: no-repeat;'+
	'background-position: center center;'+
	'background-size: contain;';
	var divStyle =
	'position: absolute;'+
	'width: 100%; height: 100%;'+
	'background-repeat: no-repeat;'+
	'background-position: center center;'+
	'background-size: contain;'+
	'transition: opacity 0.3s ease-in-out;';
	var slideShowInterval = 3000;

	function main() {
	var cur, interval, imageUrls = [];
	document.documentElement.style.cssText = htmlStyle
	document.body.style.cssText = bodyStyle;
	document.body.innerHTML = 'Drop Images Here';
	document.addEventListener('dragenter', cancelEvent);
	document.addEventListener('dragover', cancelEvent);
	document.addEventListener('drop', function(e) {
	cancelEvent(e);
	document.body.innerHTML = '<div>';
	var img1 = document.createElement('div');
	var img2 = document.createElement('div');
	img1.style.cssText = divStyle;
	img2.style.cssText = divStyle;
	document.body.appendChild(img1);
	document.body.appendChild(img2);
	var files = toArray(e.dataTransfer.files);
	clearInterval(interval);
	imageUrls.forEach(window.URL.revokeObjectURL.bind(window.URL));
	imageUrls = files.map(window.URL.createObjectURL.bind(window.URL));
	cur = 0;
	function showImage() {
	img1.style.backgroundImage = 'url('+imageUrls[cur]+')';
	setTimeout(function() {
	img1.style.opacity = '1';
	img2.style.opacity = '0';
	var tmp = img1;
	img1 = img2;
	img2 = tmp;
	}, 100);
	cur = (cur + 1) % imageUrls.length;
	}
	showImage();
	interval = setInterval(showImage, slideShowInterval);
	});
	}

	function cancelEvent(e) {
	e.stopPropagation();
	e.preventDefault();
	}

	document.addEventListener('DOMContentLoaded', main);
	</script></head></html>