68 lines
3.7 KiB
Plaintext
68 lines
3.7 KiB
Plaintext
package uploadView
|
|
|
|
import "github.com/fossyy/filekeeper/view/client/layout"
|
|
|
|
templ content(title string) {
|
|
@layout.BaseAuth(title){
|
|
<div class="flex items-center min-h-screen p-4 sm:p-6 bg-gray-900 text-white">
|
|
<div class="mx-auto w-full max-w-md space-y-8">
|
|
<div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md" data-v0-t="card">
|
|
<div class="flex flex-col space-y-1.5 p-4">
|
|
<div class="flex items-center justify-center w-full">
|
|
<label for="dropzone-file"
|
|
class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
|
<svg class="w-8 h-8 mb-4 text-gray-400" aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" />
|
|
</svg>
|
|
<p class="mb-2 text-sm text-gray-400 font-semibold">Click to upload or drag and drop</p>
|
|
</div>
|
|
<input id="dropzone-file" type="file" class="hidden" />
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<div hidden>
|
|
<div class="flex items-center gap-x-3 whitespace-nowrap">
|
|
<div id="progress-fake" class="flex w-full h-2 rounded-full overflow-hidden bg-gray-700"
|
|
role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
|
|
<div id="progress-fake"
|
|
class="flex flex-col justify-center rounded-full overflow-hidden bg-teal-500 text-xs text-white text-center whitespace-nowrap transition duration-500">
|
|
</div>
|
|
</div>
|
|
<div class="w-6 text-end">
|
|
<span id="progress-fake" class="text-sm text-white">Starting...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
document.addEventListener("dragover", function (event) {
|
|
event.preventDefault();
|
|
});
|
|
|
|
document.addEventListener("drop", async function (event) {
|
|
event.preventDefault();
|
|
const file = event.dataTransfer.files[0]
|
|
await handleFile(file)
|
|
});
|
|
|
|
document.getElementById('dropzone-file').addEventListener('change', async function(event) {
|
|
event.preventDefault();
|
|
const file = event.target.files[0]
|
|
await handleFile(file)
|
|
});
|
|
</script>
|
|
}
|
|
}
|
|
|
|
templ Main(title string) {
|
|
@content(title)
|
|
} |