diff options
author | Joris | 2024-06-02 14:38:13 +0200 |
---|---|---|
committer | Joris | 2024-06-02 14:38:22 +0200 |
commit | 1019ea1ed341e3a7769c046aa0be5764789360b6 (patch) | |
tree | 1a0d8a4f00cff252d661c42fc23ed4c19795da6f /src/static | |
parent | e8da9790dc6d55cd2e8883322cdf9a7bf5b4f5b7 (diff) |
Migrate to Rust and Hyper
With sanic, downloading a file locally is around ten times slower than
with Rust and hyper.
Maybe `pypy` could have helped, but I didn’t succeed to set it up
quickly with the dependencies.
Diffstat (limited to 'src/static')
-rw-r--r-- | src/static/main.css | 94 | ||||
-rw-r--r-- | src/static/main.js | 49 |
2 files changed, 143 insertions, 0 deletions
diff --git a/src/static/main.css b/src/static/main.css new file mode 100644 index 0000000..af0ee54 --- /dev/null +++ b/src/static/main.css @@ -0,0 +1,94 @@ +html { + margin: 0 1rem; + font-size: 16px; + line-height: 1.4rem; + font-family: sans-serif; + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + max-width: 30rem; + margin: 0 auto; +} + +a { + text-decoration: none; + color: #06C; +} + +h1 { + text-align: center; + font-variant: small-caps; + font-size: 40px; + letter-spacing: 0.2rem; + margin-bottom: 4rem; +} + +.g-Link { + text-decoration: underline; +} + +label { + display: flex; + gap: 0.5rem; + flex-direction: column; + margin-bottom: 2rem; +} + +input, select { + font-size: inherit; + border: 1px solid black; + height: 2rem; + background: white; +} + +input[type=file] { + align-content: center; + padding-left: 2px; +} + +input[type=submit] { + width: 100%; + background: #06C; + cursor: pointer; + border: none; + color: white; +} + +.g-Loading { + display: none; + align-items: center; + justify-content: center; + gap: 1rem; + margin-bottom: 2rem; +} + +.g-Error { + text-align: center; + margin-bottom: 2rem; + color: #C00; +} + +.g-Spinner { + width: 25px; + height: 25px; + border: 4px solid #06C; + border-bottom-color: transparent; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/src/static/main.js b/src/static/main.js new file mode 100644 index 0000000..40e62d6 --- /dev/null +++ b/src/static/main.js @@ -0,0 +1,49 @@ +window.onload = function() { + const form = document.querySelector('form') + + if (form !== null) { + const submit = document.querySelector('input[type="submit"]') + const loading = document.querySelector('.g-Loading') + const error = document.querySelector('.g-Error') + + function showError(msg) { + loading.style.display = 'none' + submit.disabled = false + error.innerText = msg + error.style.display = 'block' + } + + form.onsubmit = function(event) { + event.preventDefault() + + loading.style.display = 'flex' + submit.disabled = true + error.style.display = 'none' + + const key = document.querySelector('input[name="key"]').value + const expiration = document.querySelector('select[name="expiration"]').value + const file = document.querySelector('input[name="file"]').files[0] + const filename = file.name.replace(/[^0-9a-zA-Z\.]/gi, '-') + + // Wait a bit to prevent showing the loader too briefly + setTimeout(function() { + const xhr = new XMLHttpRequest() + xhr.open('POST', '/', true) + xhr.onload = function () { + if (xhr.status === 200) { + window.location = `/${xhr.responseText}` + } else { + showError(`Error uploading: ${xhr.status}`) + } + } + xhr.onerror = function () { + showError('Upload error') + } + xhr.setRequestHeader('X-FileName', filename) + xhr.setRequestHeader('X-Expiration', expiration) + xhr.setRequestHeader('X-Key', key) + xhr.send(file) + }, 500) + } + } +} |