MaverickEsq/tempalup.html

## tempalup.html
<html>
<head>
    <title>tempal up</title>
    <script>
    // Set this to the destination host
    var host = '//paste.bin';
    // Set this to the destination host name
    // ie "tempal" for temp.al
    var name = 'tempal';
    </script>
    <style>
    #container {
        height: 100%;
        display: table;
        margin: auto;
    }
    #content {
        display: table-cell;
        vertical-align: middle;
        position: relative;
    }
    #icon {
        width: 45vw;
        height: 25vw;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    #art {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    pre {
        font-family: monospace;
        white-space: pre;
    }

    #status {
        margin:auto;
    }
    .loading:after {
      display: inline-block;
      animation: dotty steps(1,end) 1s infinite;
      content: '';
    }

    @keyframes dotty {
        0%   { content: '   '; }
        25%  { content: '.  '; }
        50%  { content: '.. '; }
        75%  { content: '...'; }
        100% { content: '   '; }
    }
    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <span id="icon">
                <pre id="art">
 _______________________________________________________
|                                                       |
|                                                       |
|                          ___                          |
|                         /   \                         |
|                        /     \                        |
|                       /       \                       |
|                      /         \                      |
|                     /           \                     |
|                __  /___       ___\  __                |
|               |  |     |     |     |  |               |
|               |  |     |     |     |  |               |
|               |  |     |     |     |  |               |
|               |  |     |_____|     |  |               |
|               |  |_________________|  |               |
|               |_______________________|               |
|             _  _ ___  _    ____ ____ ___              |
|             |  | |__] |    |  | |__| |  \             |
|             |__| |    |___ |__| |  | |__/             |
|                                                       |
|                                                       |
|_______________________________________________________|
                </pre>
                <pre id="status"> </pre>
            </span>
        </div>
    </div>
    <script>
        function getPaste(e) {
            // If its files, treat it as files
            // Otherwise, item
            if (e.files.length > 0) {
                var item = e.files[0];
            } else {
                var item = e.items[0];
            }
            // If its text, upload as string
            if (item.kind == "string") {
                item.getAsString(function (e) { upload(e); });
            } else {
                upload(item);
            }
        }

        function upload(p) {
            // Make it say Uploading...
            var status = document.getElementById("status");
            status.innerText = "   UPLOADING";
            status.className = "loading";

            // Curling things
            // Then crap to get text from the response object
            let form = new FormData();
            form.append(name, p);
            fetch(host, {method: "POST", body: form})
                .then(function(response) {
                    return response.text().then(function(text) {
                        gieb(text);
                    })
                });
        }

        function gieb (u) {
            // Put the result in the page
            var status = document.getElementById("status");
            status.innerText = u;
            status.className = "";
        }

        // Adding paste
        window.addEventListener("paste", function(e){ getPaste(e.clipboardData); }, false);

        // Overriding defaults
        ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { document.getElementsByTagName("BODY")[0].addEventListener(eventName, preventDefaults, false)})
        function preventDefaults (e) {
            e.preventDefault()
            e.stopPropagation()
        }
        // Adding drag and drop
        document.getElementsByTagName("BODY")[0].addEventListener('drop', function(e){ getPaste(e.dataTransfer); }, false);
    </script>
</body>
</html>
	<html>
	<head>
	<title>tempal up</title>
	<script>
	// Set this to the destination host
	var host = '//paste.bin';
	// Set this to the destination host name
	// ie "tempal" for temp.al
	var name = 'tempal';
	</script>
	<style>
	#container {
	height: 100%;
	display: table;
	margin: auto;
	}
	#content {
	display: table-cell;
	vertical-align: middle;
	position: relative;
	}
	#icon {
	width: 45vw;
	height: 25vw;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	}
	#art {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
	pre {
	font-family: monospace;
	white-space: pre;
	}

	#status {
	margin:auto;
	}
	.loading:after {
	display: inline-block;
	animation: dotty steps(1,end) 1s infinite;
	content: '';
	}

	@keyframes dotty {
	0% { content: ' '; }
	25% { content: '. '; }
	50% { content: '.. '; }
	75% { content: '...'; }
	100% { content: ' '; }
	}
	</style>
	</head>
	<body>
	<div id="container">
	<div id="content">
	<span id="icon">
	<pre id="art">
	_______________________________________________________
	\| \|
	\| \|
	\| ___ \|
	\| / \ \|
	\| / \ \|
	\| / \ \|
	\| / \ \|
	\| / \ \|
	\| __ /___ ___\ __ \|
	\| \| \| \| \| \| \| \|
	\| \| \| \| \| \| \| \|
	\| \| \| \| \| \| \| \|
	\| \| \| \|_____\| \| \| \|
	\| \| \|_________________\| \| \|
	\| \|_______________________\| \|
	\| _ _ ___ _ ____ ____ ___ \|
	\| \| \| \|__] \| \| \| \|__\| \| \ \|
	\| \|__\| \| \|___ \|__\| \| \| \|__/ \|
	\| \|
	\| \|
	\|_______________________________________________________\|
	</pre>
	<pre id="status"> </pre>
	</span>
	</div>
	</div>
	<script>
	function getPaste(e) {
	// If its files, treat it as files
	// Otherwise, item
	if (e.files.length > 0) {
	var item = e.files[0];
	} else {
	var item = e.items[0];
	}
	// If its text, upload as string
	if (item.kind == "string") {
	item.getAsString(function (e) { upload(e); });
	} else {
	upload(item);
	}
	}

	function upload(p) {
	// Make it say Uploading...
	var status = document.getElementById("status");
	status.innerText = " UPLOADING";
	status.className = "loading";

	// Curling things
	// Then crap to get text from the response object
	let form = new FormData();
	form.append(name, p);
	fetch(host, {method: "POST", body: form})
	.then(function(response) {
	return response.text().then(function(text) {
	gieb(text);
	})
	});
	}

	function gieb (u) {
	// Put the result in the page
	var status = document.getElementById("status");
	status.innerText = u;
	status.className = "";
	}

	// Adding paste
	window.addEventListener("paste", function(e){ getPaste(e.clipboardData); }, false);

	// Overriding defaults
	;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { document.getElementsByTagName("BODY")[0].addEventListener(eventName, preventDefaults, false)})
	function preventDefaults (e) {
	e.preventDefault()
	e.stopPropagation()
	}
	// Adding drag and drop
	document.getElementsByTagName("BODY")[0].addEventListener('drop', function(e){ getPaste(e.dataTransfer); }, false);
	</script>
	</body>
	</html>