diff options
Diffstat (limited to 'public/index.html')
| -rw-r--r-- | public/index.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..f0a7e03 --- /dev/null +++ b/public/index.html @@ -0,0 +1,153 @@ +<!DOCTYPE html> +<html> + <head> + <title>loli-safe - A self hosted upload service</title> + <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.0/css/bulma.min.css"> + <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css"> + <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script> + + <style type="text/css"> + #b { + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; + -webkit-animation-duration: 1.5s; + animation-duration: 1.5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-name: floatUp; + animation-name: floatUp; + -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); + animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); + border-radius: 24px; + display: inline-block; + height: 240px; + margin-bottom: 40px; + position: relative; + vertical-align: top; + width: 240px; + box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); + } + img.logo { + height: 200px; + margin-top: 20px; + } + + .dz-preview .dz-details { display: flex; } + .dz-preview .dz-details .dz-size, .dz-preview .dz-details .dz-filename { flex: 1 } + .dz-preview img, .dz-preview .dz-success-mark, .dz-preview .dz-error-mark { display: none } + + @keyframes floatUp { + 0% { + opacity: 0; + box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0); + -webkit-transform: scale(0.86); + transform: scale(0.86); + } + 25% { + opacity: 100; + } + 67% { + box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); + -webkit-transform: scale(1); + transform: scale(1); + } + } + + </style> + </head> + + <body> + <section class="hero is-fullheight has-text-centered"> + <div class="hero-body"> + <div class="container"> + <p id="b"> + <img class='logo' src="/images/logo.png"> + </p> + <h1 id="bulma" class="title"> + loli-safe + </h1> + <h2 id="modern-framework" class="subtitle"> + A <strong>modern</strong> self-hosted file upload <strong>service</strong> + </h2> + + <div class="columns"> + <div class="column"></div> + <div class="column"> + <a class="button is-danger is-outlined is-fullwidth" id="upload-button">Upload files</a> + </div> + <div class="column"></div> + </div> + + <div class="columns"> + <div class="column"></div> + <div class="column"> + <div class="notification" id="dropzone">Or drag and drop files here</div> + </div> + <div class="column"></div> + </div> + + <div id="uploads"> + <div id="template" class="columns"> + <div class="column"> + <p data-dz-size></p> + </div> + <div class="column"> + <p data-dz-name></p> + </div> + <div class="column"> + <progress class="progress is-primary" value="100" max="100" data-dz-uploadprogress></progress> + <p data-dz-errormessage></p> + <p class="link"></p> + </div> + </div> + </div> + + </div> + </div> + </section> + + <script type="text/javascript"> + window.onload = function () { + var previewNode = document.querySelector("#template"); + previewNode.id = ""; + var previewTemplate = previewNode.parentNode.innerHTML; + previewNode.parentNode.removeChild(previewNode); + + var dropzone = new Dropzone('div#dropzone', { + url: '/api/upload', + paramName: 'file', + maxFilesize: 512, + parallelUploads: 2, + uploadMultiple: false, + previewsContainer: 'div#uploads', + previewTemplate: previewTemplate, + createImageThumbnails: false, + maxFiles: 1000, + autoProcessQueue: true + }); + + // Update the total progress bar + dropzone.on("uploadprogress", function(file, progress) { + file.previewElement.querySelector(".progress").style.width = progress + "%"; + }); + + dropzone.on("success", function(file, response) { + // Handle the responseText here. For example, add the text to the preview element: + a = document.createElement('a'); + a.href = 'https://i.kanacchi.moe/' + response.filename; + a.innerHTML = response.filename; + + file.previewTemplate.querySelector(".progress").style.display = 'none'; + file.previewTemplate.querySelector(".link").appendChild(a); + }); + + }; + </script> + + </body> +</html>
\ No newline at end of file |