add splitted layouts
This commit is contained in:
Tilman Behrend
parent
9fe2bcade3
commit
f01a0a967f
12 changed files with 2909 additions and 0 deletions
121
documentation/layout/entry-edit-step-1.html
Normal file
121
documentation/layout/entry-edit-step-1.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="scroll-smooth">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>VΛYV App - Entry Edit Step 1</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Inter:wght@300;400;500;600&display=swap"
|
||||
rel="stylesheet">
|
||||
<style>
|
||||
.bg-app-gradient {
|
||||
background: linear-gradient(180deg, #2e1065 0%, #2563eb 45%, #86efac 100%);
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="flex flex-wrap items-center justify-center min-h-screen gap-16 antialiased selection:bg-blue-500/30 text-white font-['Inter'] bg-gray-100 p-8">
|
||||
|
||||
<!-- Screen 2: Single Image Gallery -->
|
||||
<div id="single-image-gallery"
|
||||
class="relative w-full max-w-[390px] h-[844px] bg-black shadow-2xl overflow-hidden sm:rounded-[3rem] flex flex-col ring-8 ring-black/5">
|
||||
<div
|
||||
class="flex justify-between items-center px-6 pt-4 pb-2 text-xs font-medium z-20 text-white mix-blend-difference">
|
||||
<span>9:42</span>
|
||||
<div class="flex items-center gap-1.5"><i data-lucide="signal" class="w-3.5 h-3.5"></i><i data-lucide="wifi"
|
||||
class="w-3.5 h-3.5"></i>
|
||||
<div class="w-5 h-2.5 border border-white/40 rounded-[3px] relative">
|
||||
<div class="absolute inset-0.5 bg-white rounded-[1px] w-[70%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between items-center px-4 py-3 border-b border-white/10 bg-black/50 backdrop-blur-md sticky top-0 z-30">
|
||||
<a href="index.html"
|
||||
class="w-10 h-10 flex items-center justify-center text-white/90 bg-black/20 backdrop-blur-md rounded-full hover:bg-black/40 transition-colors"><i
|
||||
data-lucide="x" class="w-6 h-6"></i></a>
|
||||
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-full hover:bg-white/10 transition-colors"><span
|
||||
class="text-sm font-semibold tracking-tight">Recents</span><i data-lucide="chevron-down"
|
||||
class="w-4 h-4 text-white/50"></i></button>
|
||||
<a href="entry-edit-step-2.html"
|
||||
class="px-4 py-1.5 bg-white text-black text-xs font-semibold rounded-full hover:bg-gray-200 transition-colors inline-flex items-center justify-center">Next</a>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto no-scrollbar">
|
||||
<div class="grid grid-cols-3 gap-0.5 pb-20">
|
||||
<div
|
||||
class="relative aspect-square bg-white/5 flex flex-col items-center justify-center gap-2 cursor-pointer hover:bg-white/10 transition-colors group">
|
||||
<i data-lucide="image-off" class="w-6 h-6 text-white/40 group-hover:text-white/80 transition-colors"></i>
|
||||
</div>
|
||||
<div class="relative aspect-square group cursor-pointer">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80"
|
||||
class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity" alt="Gallery">
|
||||
<div class="absolute inset-0 border-[3px] border-[#2563eb] z-10"></div>
|
||||
<div
|
||||
class="absolute top-1.5 right-1.5 w-5 h-5 bg-[#2563eb] rounded-full flex items-center justify-center z-20 shadow-sm">
|
||||
<i data-lucide="check" class="w-3 h-3 text-white"></i></div>
|
||||
</div>
|
||||
<div class="relative aspect-square"><img
|
||||
src="https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-4.0.3&w=400&q=80"
|
||||
class="w-full h-full object-cover"></div>
|
||||
<div class="relative aspect-square"><img
|
||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&w=400&q=80"
|
||||
class="w-full h-full object-cover"></div>
|
||||
<div class="relative aspect-square"><img
|
||||
src="https://images.unsplash.com/photo-1516762689617-e1cffcef479d?ixlib=rb-4.0.3&w=400&q=80"
|
||||
class="w-full h-full object-cover"></div>
|
||||
<div class="relative aspect-square"><img
|
||||
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&w=400&q=80"
|
||||
class="w-full h-full object-cover"></div>
|
||||
<div class="relative aspect-square"><img
|
||||
src="https://images.unsplash.com/photo-1517487881594-2787fef5ebf7?ixlib=rb-4.0.3&w=400&q=80"
|
||||
class="w-full h-full object-cover"></div>
|
||||
<div class="relative aspect-square"><img
|
||||
src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-4.0.3&w=400&q=80"
|
||||
class="w-full h-full object-cover"></div>
|
||||
<div class="relative aspect-square"><img
|
||||
src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-4.0.3&w=400&q=80"
|
||||
class="w-full h-full object-cover"></div>
|
||||
<div class="relative aspect-square"><img
|
||||
src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&w=400&q=80"
|
||||
class="w-full h-full object-cover"></div>
|
||||
<div class="relative aspect-square"><img
|
||||
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&w=400&q=80"
|
||||
class="w-full h-full object-cover"></div>
|
||||
<div class="relative aspect-square"><img
|
||||
src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&w=400&q=80"
|
||||
class="w-full h-full object-cover"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3 px-4 py-2 bg-[#2a2a2a] rounded-full border border-white/10 shadow-xl backdrop-blur-md">
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden border border-white/20"><img
|
||||
src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?ixlib=rb-4.0.3&w=100&q=60"
|
||||
class="w-full h-full object-cover"></div>
|
||||
<span class="text-xs font-medium text-white/90">1 Selected</span>
|
||||
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-white/10 transition-colors"><i
|
||||
data-lucide="x" class="w-3.5 h-3.5 text-white/50"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue