position all the form at center

This commit is contained in:
blek 2023-09-30 12:23:54 +10:00
parent 107627f357
commit c9d94b60da
Signed by: blek
GPG Key ID: 14546221E3595D0C
1 changed files with 56 additions and 54 deletions

View File

@ -2,64 +2,66 @@
{% block body %} {% block body %}
<h1>File upload</h1> <div style="max-width:95vw;width:fit-content;margin:0 auto">
<div style='margin:var(--margin)'> <h1 style="text-align:center">File upload</h1>
<p> <div style='margin:var(--margin)'>
You can upload a file here <b>for free</b> to share with others for 30 minutes.<br/> <p>
How cool is that, eh? You can upload a file here <b>for free</b> to share with others for 30 minutes.<br/>
</p> How cool is that, eh?
<div class="card"> </p>
<div class="card-title"> <div class="card">
Upload form <div class="card-title">
</div> Upload form
<div class='card-text'> </div>
<form action="/upload" method="POST" enctype="multipart/form-data"> <div class='card-text'>
<p> <form action="/upload" method="POST" enctype="multipart/form-data">
I want my file deleted: <p>
</p> I want my file deleted:
<ul class="bfile-formupload-file-delete-pick"> </p>
<li> <ul class="bfile-formupload-file-delete-pick">
<input type="radio" id="bfile-formupload-delete-30-min" name="delmode" value='30' checked /> <li>
<label for="bfile-formupload-delete-30-min">After 30 minutes</label> <input type="radio" id="bfile-formupload-delete-30-min" name="delmode" value='30' checked />
</li> <label for="bfile-formupload-delete-30-min">After 30 minutes</label>
<li> </li>
<input type="radio" id="bfile-formupload-delete-dl" name="delmode" value='dl' /> <li>
<label for="bfile-formupload-delete-dl">After 30 minutes OR a download</label> <input type="radio" id="bfile-formupload-delete-dl" name="delmode" value='dl' />
</li> <label for="bfile-formupload-delete-dl">After 30 minutes OR a download</label>
</ul> </li>
<p> </ul>
<input type="file" name="file" id="bfile-formupload-file" style="display: none" /> <p>
<label for="bfile-formupload-file"> <input type="file" name="file" id="bfile-formupload-file" style="display: none" />
<span class='btn btn-fill mobile-file-upload-btn'> <label for="bfile-formupload-file">
Select a file <span class='btn btn-fill mobile-file-upload-btn'>
</span> Select a file
<span class="file-drag-n-drop"> </span>
<span class="file-drag-n-drop-inside"> <span class="file-drag-n-drop">
<span class="file-drag-n-drop-inside-text"> <span class="file-drag-n-drop-inside">
<object data="/tab-new-symbolic.svg" width="32" height="32"></object><br/> <span class="file-drag-n-drop-inside-text">
<span style="line-height:16pt"> <object data="/tab-new-symbolic.svg" width="32" height="32"></object><br/>
<span id='drag-n-drop-jsonly' style='display:none'> <span style="line-height:16pt">
Drag & drop your files here! <span id='drag-n-drop-jsonly' style='display:none'>
</span> Drag & drop your files here!
<noscript>
Click to upload your files!<br/>
<span style="font-size: 70%">
You will be able to drag and drop if you enable JS
</span> </span>
</noscript> <noscript>
Click to upload your files!<br/>
<span style="font-size: 70%">
You will be able to drag and drop if you enable JS
</span>
</noscript>
</span>
</span> </span>
</span> </span>
</span> </span>
</span> <script src="/dragndrop-form.js"></script>
<script src="/dragndrop-form.js"></script> </label>
</label> </p>
</p> <p>
<p> <button class='btn btn-fill'>
<button class='btn btn-fill'> Upload!
Upload! </button>
</button> </p>
</p> </form>
</form> </div>
</div> </div>
</div> </div>
</div> </div>