gregor/gtransfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more htmx

Browse Source
This commit is contained in:
Gregor Lohaus
2026-02-25 12:44:20 +01:00
parent 2b77988086
commit 860dfd062e
10 changed files with 191 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Backend/src/main/resources/templates/index.html
+7 -44
View File
@@ -8,6 +8,7 @@
<link rel="stylesheet" th:href="@{/style.css}">
<script th:src="@{/webjars/bootstrap/dist/js/bootstrap.bundle.min.js}" defer></script>
<script th:src="@{/webjars/htmx.org/dist/htmx.min.js}" defer></script>
<script th:src="@{/crypto.js}" defer></script>
<script th:src="@{/upload.js}" defer></script>
</head>
<body class="d-flex flex-column min-vh-100">
@@ -27,52 +28,14 @@
</p>
</div>
<div class="col-lg-7 d-flex justify-content-center justify-content-lg-end">
<input type="file" id="file-input" hidden>
<div id="drop-zone" class="drop-zone text-center py-5 px-4 w-100">
<!-- State: prompt (default) -->
<div id="view-prompt">
<div class="drop-zone-icon mb-3">&#x1F4C2;</div>
<div class="mb-2">
<strong>Choose a file</strong>
<span class="drop-zone-text"> or drag and drop here</span>
</div>
<div class="drop-zone-text small">Any file type &middot; Up to <span th:text="${maxFileSize}">10GB</span></div>
<div class="drop-zone-icon mb-3">&#x1F4C2;</div>
<div class="mb-2">
<strong>Choose a file</strong>
<span class="drop-zone-text"> or drag and drop here</span>
</div>
<!-- State: file selected -->
<div id="view-selected" class="d-none">
<div class="drop-zone-icon mb-3">&#x1F4C4;</div>
<div class="fw-medium mb-3" id="selected-name"></div>
<div class="d-flex gap-2 justify-content-center">
<button id="upload-btn" class="btn btn-success px-4">Send</button>
<button id="reset-btn" class="btn btn-link drop-zone-text text-decoration-none">Change file</button>
</div>
</div>
<!-- State: uploading -->
<div id="view-uploading" class="d-none">
<div class="mb-3">
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="drop-zone-text" id="upload-status">Preparing&hellip;</div>
</div>
<!-- State: result -->
<div id="view-result" class="d-none">
<div class="drop-zone-icon mb-3">&#x2705;</div>
<div class="drop-zone-text mb-3">Your file is ready to share</div>
<div class="input-group mb-2">
<input type="text" id="share-link" class="form-control form-control-sm" readonly>
<button id="copy-btn" class="btn btn-outline-success btn-sm">Copy</button>
</div>
<button id="new-upload-btn" class="btn btn-link drop-zone-text text-decoration-none small">
Send another file
</button>
</div>
<input type="file" id="file-input" hidden>
<div class="drop-zone-text small">Any file type &middot; Up to <span th:text="${maxFileSize}">10GB</span></div>
</div>
</div>
</div>