tanner/image-drop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive-app v1

Browse Source
This commit is contained in:
MEGASOL\simon.adams
2025-09-15 18:03:48 +02:00
parent 8ab6d4547f
commit 938cee689c
4 changed files with 60 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/invite.html
View File

@@ -9,7 +9,9 @@
<script>
tailwind.config = { darkMode: 'class' };
</script>
<style> body { transition: background-color .2s ease, color .2s ease; } </style>
<style>
body { transition: background-color .2s ease, color .2s ease; padding-bottom: env(safe-area-inset-bottom); }
</style>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
@@ -18,7 +20,7 @@
<div class="mx-auto max-w-4xl p-6 space-y-6">
<div id="topBanner" class="hidden rounded-2xl border border-green-200 bg-green-50 p-3 text-green-700 text-center dark:bg-green-900 dark:border-green-700 dark:text-green-300"></div>
<header class="flex items-center justify-between">
<header class="flex items-center justify-between flex-wrap gap-2">
<h1 class="text-2xl font-semibold tracking-tight">Immich Drop Uploader</h1>
<div class="flex items-center gap-2">
<a id="linkHome" href="/" class="hidden rounded-xl border px-3 py-1 text-sm dark:border-gray-600">Home</a>
@@ -52,16 +54,16 @@
</section>
<!-- Dropzone and queue copied from index.html -->
<section id="dropzone" class="rounded-2xl border-2 border-dashed p-10 text-center bg-white dark:bg-gray-800 dark:border-gray-600">
<div class="mx-auto h-12 w-12 opacity-70">
<section id="dropzone" class="rounded-2xl border-2 border-dashed p-8 md:p-10 text-center bg-white dark:bg-gray-800 dark:border-gray-600">
<div id="dropHint" class="mx-auto h-12 w-12 opacity-70 hidden md:block">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 16V8m0 0l-3 3m3-3 3 3M4 16a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4v-1a1 1 0 1 0-2 0v1a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-1a1 1 0 1 0-2 0v1z"/></svg>
</div>
<p class="mt-3 font-medium">Drop images or videos here</p>
<p class="text-sm text-gray-600 dark:text-gray-400">...or</p>
<p class="mt-3 font-medium hidden md:block">Drop images or videos here</p>
<p class="text-sm text-gray-600 dark:text-gray-400 hidden md:block">...or</p>
<div class="mt-3 relative inline-block">
<label class="rounded-2xl bg-black text-white dark:bg-white dark:text-black px-4 py-2 hover:opacity-90 cursor-pointer select-none">
<label class="rounded-2xl bg-black text-white dark:bg-white dark:text-black px-5 py-3 hover:opacity-90 cursor-pointer select-none" aria-label="Choose files">
Choose files
<input id="fileInput" type="file" multiple accept="image/*,video/*" class="absolute inset-0 opacity-0 cursor-pointer" />
<input id="fileInput" type="file" multiple accept="image/*,video/*" capture="environment" class="absolute inset-0 opacity-0 cursor-pointer" />
</label>
</div>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
@@ -86,6 +88,12 @@
Invite upload page
</footer>
</div>
<!-- Sticky mobile upload bar -->
<div class="md:hidden fixed left-0 right-0 bottom-0 z-20 p-3 bg-white/90 dark:bg-gray-900/90 border-t border-gray-200 dark:border-gray-700 backdrop-blur" style="padding-bottom: calc(env(safe-area-inset-bottom) + 12px)">
<div class="mx-auto max-w-4xl">
<button id="btnMobilePick" class="w-full rounded-2xl bg-black text-white dark:bg-white dark:text-black px-5 py-3" aria-label="Choose files">Choose files</button>
</div>
</div>
<script src="/static/header.js"></script>
<script src="/static/app.js"></script>
</body>