{% extends "base.html" %} {% block head %} <link rel="stylesheet" href="/mobile-hide.css"></link> <style> .qr-code { display: block; min-height: min(160px, 35vw); width: min(160px, 35vw); object-fit: contain; image-rendering: pixelated; padding: min(40px, 8vw); background: white; margin: min(40px, 8vw) auto; border-radius: 12px; } .btn-fill { width: calc(100% - var(--margin-x)); } </style> {% endblock %} {% block body %} <div style="width:fit-content;margin:0;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding-bottom:100px;"> <h1 style="text-align:center;margin-bottom:0">File uploaded successfully!</h1> <p style="margin-top:4px;font-size:90%"> It is available via the <a href='{{ env.instanceurl }}/upload/{{ urlencoding::encode(link) }}'> following link </a> </p> <div style="width:100%"> <img src="{{ env.instanceurl }}/qr/{{ urlencoding::encode(link) }}" class="qr-code"> </div> <a href="/" role="button" class="btn btn-fill" style="display:block" > Upload another file </a> <br/> <div class="js-only btn btn-fill" style="cursor:pointer" id="btn-upload-done" data-clipboard-text="{{ env.instanceurl }}/upload/{{ urlencoding::encode(link) }}"> Copy link </div> </div> {% endblock %} {% block scripts %} <script>document.getElementById('btn-upload-done').style.display = 'block'</script> <script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script> <script> new ClipboardJS('#btn-upload-done'); (()=>{ let e = document.getElementById('btn-upload-done'); let animating = false; e.onclick = () => { if (animating) return let old = e.innerText; e.innerText = 'Copied!' animating = true; setTimeout(() => { e.innerText = old; animating = false }, 1500); } })() </script> {% endblock %}