192 lines
5.4 KiB
HTML
192 lines
5.4 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Mutant</title>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<link rel="shortcut icon" href="guy.png?v=1" type="image/x-icon">
|
||
|
|
<style>
|
||
|
|
body, html {
|
||
|
|
font-family: sans-serif;
|
||
|
|
background-color: black;
|
||
|
|
text-align: center;
|
||
|
|
color: #FF2D40;
|
||
|
|
}
|
||
|
|
|
||
|
|
#image {
|
||
|
|
padding-top: 20px;
|
||
|
|
max-height: 600px;
|
||
|
|
max-width: 600px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#form {
|
||
|
|
display: block;
|
||
|
|
padding-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#info {
|
||
|
|
padding-top: 10px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inline {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
cursor: pointer;
|
||
|
|
transition: text-shadow 250ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button:hover {
|
||
|
|
text-shadow: 0 0 12px white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.numb {
|
||
|
|
width: 8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.recaptcha_widget {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let recaptcha_checked = false
|
||
|
|
|
||
|
|
function recaptcha_callback() {
|
||
|
|
recaptcha_checked = true
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = function() {
|
||
|
|
document.getElementById('form').onsubmit = function() {
|
||
|
|
return check_form()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function check_form() {
|
||
|
|
if (!recaptcha_checked) {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
|
||
|
|
let ok = false
|
||
|
|
|
||
|
|
for(let item of Array.from(document.querySelectorAll(".check_effect"))) {
|
||
|
|
if(item.checked) {
|
||
|
|
ok = true
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if(!ok) {
|
||
|
|
alert("No effects selected.")
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
|
||
|
|
let num_files = 0
|
||
|
|
|
||
|
|
for(let file of Array.from(document.querySelectorAll(".file"))) {
|
||
|
|
if(file.value) {
|
||
|
|
num_files += 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log(num_files)
|
||
|
|
|
||
|
|
if(num_files == 0) {
|
||
|
|
alert("No file selected.")
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
|
||
|
|
let submit = document.querySelector("#submit")
|
||
|
|
submit.value = "Uploading"
|
||
|
|
submit.disabled = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function on_file_select(evt) {
|
||
|
|
console.log("Updating image")
|
||
|
|
|
||
|
|
let files = evt.target.files
|
||
|
|
|
||
|
|
if(files.length == 0) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
let f = files[0]
|
||
|
|
|
||
|
|
if (!f.type.match('image.*')) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
let reader = new FileReader()
|
||
|
|
|
||
|
|
reader.onload = (function(tf) {
|
||
|
|
return function(e) {
|
||
|
|
document.querySelector('#image').src = e.target.result
|
||
|
|
}
|
||
|
|
})(f);
|
||
|
|
|
||
|
|
reader.readAsDataURL(f)
|
||
|
|
}
|
||
|
|
|
||
|
|
function select_all() {
|
||
|
|
for(let item of Array.from(document.querySelectorAll('.check_effect'))) {
|
||
|
|
item.checked = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function unselect_all() {
|
||
|
|
for(let item of Array.from(document.querySelectorAll('.check_effect'))) {
|
||
|
|
item.checked = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function default_delay() {
|
||
|
|
document.querySelector('#delay').value = 250
|
||
|
|
}
|
||
|
|
|
||
|
|
function clear_file(n) {
|
||
|
|
document.querySelector(`#file_${n}`).value = ""
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id='info'>Turn images into gifs<br>Provide at least 1 image</div>
|
||
|
|
<img src='guy.png' id='image'>
|
||
|
|
<form id='form' method='post' action='upload.php' enctype="multipart/form-data">
|
||
|
|
<br>
|
||
|
|
<div class='inline button' onclick='clear_file(1)'>Remove</div>
|
||
|
|
<input type='file' id='file_1' class='file' name='image_1' accept="image/*"><br><br>
|
||
|
|
<div class='inline button' onclick='clear_file(2)'>Remove</div>
|
||
|
|
<input type='file' id='file_2' class='file' name='image_2' accept="image/*"><br><br>
|
||
|
|
<div class='inline button' onclick='clear_file(3)'>Remove</div>
|
||
|
|
<input type='file' id='file_3' class='file' name='image_3' accept="image/*"><br><br>
|
||
|
|
<div class='inline button' onclick='clear_file(4)'>Remove</div>
|
||
|
|
<input type='file' id='file_4' class='file' name='image_4' accept="image/*"><br><br><br>
|
||
|
|
|
||
|
|
<div class="recaptcha_widget g-recaptcha" data-sitekey="6LcrUsoeAAAAAGVg1HQFTO0RDuVCidJo70cKSH7O" data-callback="recaptcha_callback"></div>
|
||
|
|
|
||
|
|
<br><br><br>
|
||
|
|
|
||
|
|
<input type='submit' id='submit' value='Mutate'>
|
||
|
|
|
||
|
|
<br><br><br>
|
||
|
|
Glitch <input class='check_effect' type='checkbox' name='effect_1' checked>
|
||
|
|
Wave <input class='check_effect' type='checkbox' name='effect_2' checked>
|
||
|
|
Mirror <input class='check_effect' type='checkbox' name='effect_3' checked>
|
||
|
|
Static <input class='check_effect' type='checkbox' name='effect_4' checked> <br>
|
||
|
|
Glow <input class='check_effect' type='checkbox' name='effect_5' checked>
|
||
|
|
Glass <input class='check_effect' type='checkbox' name='effect_6' checked>
|
||
|
|
Color <input class='check_effect' type='checkbox' name='effect_7' checked>
|
||
|
|
Chalk <input class='check_effect' type='checkbox' name='effect_8' checked>
|
||
|
|
<br><br>
|
||
|
|
<div class='inline button' onclick='select_all()'>Select All</div> |
|
||
|
|
<div class='inline button' onclick='unselect_all()'>Unselect All</div>
|
||
|
|
<br><br><br>
|
||
|
|
Delay between frames (ms): <input type='number' min='10' max='10000' value='250' class='numb' id='delay' name='delay'>
|
||
|
|
<br><br>
|
||
|
|
<div class='inline button' onclick='default_delay()'>Default</div>
|
||
|
|
<br><br>
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
</html>
|