nyazoom/dist/index.html

55 lines
1.9 KiB
HTML
Raw Normal View History

2023-04-07 13:59:26 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<title>NyaZoom</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
2023-04-08 03:37:20 +00:00
<link href="css/style.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 = '';
2023-04-07 13:59:26 +00:00
2023-04-08 03:37:20 +00:00
if (this.files?.length > 1) {
fileName = this.getAttribute('data-multiple-caption')?.replace('{count}', this.files.length);
} else {
fileName = e.target.value.split('\\').pop();
}
2023-04-07 13:59:26 +00:00
2023-04-08 03:37:20 +00:00
label.innerHTML = fileName || labelVal;
});
});
}, false);
</script>
</head>
2023-04-07 13:59:26 +00:00
2023-04-08 03:37:20 +00:00
<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>
2023-04-07 13:59:26 +00:00
2023-04-08 03:37:20 +00:00
<input type="submit" value="Get Link~">
<p id="cat-fact" />
</form>
</div>
2023-04-07 13:59:26 +00:00
</body>
</html>