gitmedia/thats-me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add splitted layouts

Browse source
This commit is contained in:
Tilman Behrend 2026-02-27 07:30:26 +01:00
parent 9fe2bcade3
commit f01a0a967f
12 changed files with 2909 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

150
documentation/layout/entry-edit-step-3.html Normal file
View file

@ -0,0 +1,150 @@
<!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 3</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&amp;family=Inter:wght@300;400;500;600&amp;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 4: Multiple Image Gallery -->
<div id="multiple-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:44</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="entry-edit-step-2.html"
class="w-10 h-10 flex items-center justify-center text-white/60 hover:text-white transition-colors hover:bg-white/10 rounded-full"><i
data-lucide="chevron-left" class="w-6 h-6"></i></a>
<div class="flex flex-col items-center">
<span class="text-sm font-semibold tracking-tight text-white">Add Photos</span>
<span class="text-[10px] text-white/50">Camera Roll</span>
</div>
<a href="entry-edit-step-4.html"
class="px-4 py-1.5 bg-[#2563eb] text-white text-xs font-semibold rounded-full hover:bg-blue-600 transition-colors">Add
(3)</a>
</div>
<div class="flex-1 overflow-y-auto no-scrollbar">
<div class="grid grid-cols-3 gap-0.5 pb-20">
<!-- Selected 1 -->
<div class="relative aspect-square group cursor-pointer">
<img src="https://images.unsplash.com/photo-1511895426328-dc8714191300?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover opacity-60">
<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 class="absolute bottom-1.5 left-1.5 bg-black/50 backdrop-blur px-1.5 rounded text-[10px] font-medium">1
</div>
</div>
<!-- Selected 2 -->
<div class="relative aspect-square group cursor-pointer">
<img src="https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover opacity-60">
<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 class="absolute bottom-1.5 left-1.5 bg-black/50 backdrop-blur px-1.5 rounded text-[10px] font-medium">2
</div>
</div>
<!-- Selected 3 -->
<div class="relative aspect-square group cursor-pointer">
<img src="https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover opacity-60">
<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 class="absolute bottom-1.5 left-1.5 bg-black/50 backdrop-blur px-1.5 rounded text-[10px] font-medium">3
</div>
</div>
<!-- Unselected -->
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover hover:opacity-80 transition-opacity">
<div class="absolute top-1.5 right-1.5 w-5 h-5 border border-white/40 rounded-full"></div>
</div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1552083375-1447ce886485?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover hover:opacity-80 transition-opacity">
<div class="absolute top-1.5 right-1.5 w-5 h-5 border border-white/40 rounded-full"></div>
</div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1506477331477-33d5d8b3dc85?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover hover:opacity-80 transition-opacity">
<div class="absolute top-1.5 right-1.5 w-5 h-5 border border-white/40 rounded-full"></div>
</div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover hover:opacity-80 transition-opacity">
<div class="absolute top-1.5 right-1.5 w-5 h-5 border border-white/40 rounded-full"></div>
</div>
<div class="relative aspect-square"><img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg"
class="w-full h-full object-cover hover:opacity-80 transition-opacity">
<div class="absolute top-1.5 right-1.5 w-5 h-5 border border-white/40 rounded-full"></div>
</div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover hover:opacity-80 transition-opacity">
<div class="absolute top-1.5 right-1.5 w-5 h-5 border border-white/40 rounded-full"></div>
</div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1466112928291-0903b80a9466?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover hover:opacity-80 transition-opacity">
<div class="absolute top-1.5 right-1.5 w-5 h-5 border border-white/40 rounded-full"></div>
</div>
<div class="relative aspect-square"><img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg"
class="w-full h-full object-cover hover:opacity-80 transition-opacity">
<div class="absolute top-1.5 right-1.5 w-5 h-5 border border-white/40 rounded-full"></div>
</div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1509233725247-49e657c54213?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover hover:opacity-80 transition-opacity">
<div class="absolute top-1.5 right-1.5 w-5 h-5 border border-white/40 rounded-full"></div>
</div>
</div>
</div>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>