Webpage formatting improvements

This commit is contained in:
raul 2024-05-29 08:45:44 +02:00
parent 12d3498055
commit 6401a0c571
2 changed files with 24 additions and 24 deletions

View File

@ -1,16 +1,23 @@
<html> <!DOCTYPE html>
<head> <html lang="en">
<link rel="stylesheet" type="" href="./style.css">
<script src="https://unpkg.com/htmx.org@1.9.4/dist/htmx.min.js"></script>
</head>
<body>
<div class="container">
<head>
<title>File Uploader</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/htmx.org@1.9.4/dist/htmx.min.js"></script>
<link href="./style.css" rel="stylesheet">
</head>
<!-- Licensed under the GPL v3.0 -->
<body>
<div class="container">
<div id="main"> <div id="main">
<h1>Raul's file uploader</h1> <h1>Raul's file uploader</h1>
<h3>Find the source <a href="https://git.bulgariu.xyz/raul/uploader" target="_blank">here!</a></h3> <h3>Find the source <a href="https://git.bulgariu.xyz/raul/uploader" target="_blank">here!</a></h3>
<form id='form' hx-encoding='multipart/form-data' hx-post='/api/upload'> <form id='form' hx-encoding='multipart/form-data' hx-post='/api/upload'>
<input type="file" name="file" value=""> <input type="file" name="file" value="" required>
<br> <br>
<br> <br>
<button id="but"> <button id="but">
@ -19,20 +26,12 @@
<progress id="progress" value="0" max="100">Upload progress:</progress> <progress id="progress" value="0" max="100">Upload progress:</progress>
</form> </form>
<script> <script>
htmx.on('#form', 'htmx:xhr:progress', function(evt) { htmx.on('#form', 'htmx:xhr:progress', function (evt) {
htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100) htmx.find('#progress').setAttribute('value', evt.detail.loaded / evt.detail.total * 100)
}); });
</script> </script>
<p class="centered">
<!-- <img src="https://bulgariu.xyz/avatar.gif" alt="" width=200px height=200px > -->
</p>
<!-- <footer> -->
<!-- Licensed under the GPL v3.0 -->
<!-- </footer> -->
</div> </div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -21,6 +21,7 @@ img {
button { button {
background-color: #eee; background-color: #eee;
border: 2px black solid; border: 2px black solid;
margin-bottom: 10px;
} }
#but:hover { #but:hover {