55 lines
1.9 KiB
HTML
55 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>NyaZoom</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="css/main.css" rel="stylesheet">
|
|
<script>
|
|
fetch("https://catfact.ninja/fact")
|
|
.then(data => data.json())
|
|
.then(data => {
|
|
document.getElementById("cat-fact").innerHTML = data.fact;
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
let inputs = document.querySelectorAll('input#file');
|
|
Array.prototype.forEach.call(inputs, function (input) {
|
|
let label = input.nextElementSibling;
|
|
let labelVal = label.innerHTML;
|
|
input.addEventListener('change', function (e) {
|
|
let fileName = '';
|
|
|
|
if (this.files?.length > 1) {
|
|
fileName = this.getAttribute('data-multiple-caption')?.replace('{count}', this.files.length);
|
|
} else {
|
|
fileName = e.target.value.split('\\').pop();
|
|
}
|
|
|
|
label.innerHTML = fileName || labelVal;
|
|
});
|
|
});
|
|
}, false);
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>NyaZoom<sup>2</sup></h1>
|
|
<div class="form-wrapper">
|
|
<form action="/upload" method="post" enctype="multipart/form-data" class="main-form">
|
|
<div class="cat-img-wrapper">
|
|
<img class="cat-img" src="https://cataas.com/cat?width=250&height=250" />
|
|
</div>
|
|
<input type="file" id="file" name="file" data-multiple-caption="{count} files selected" multiple />
|
|
<label for="file">Select Files</label>
|
|
|
|
<input type="submit" value="Get Link~">
|
|
<p id="cat-fact" />
|
|
</form>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|