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

173
documentation/layout/entry-edit-step-5.html Normal file
View file

@ -0,0 +1,173 @@
<!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 5</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 6: Location, People, Categories, Publish -->
<div id="location"
class="relative w-full max-w-[390px] h-[844px] bg-[#09090b] 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:46</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 sticky top-0 z-30">
<a href="entry-edit-step-4.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-1 text-center text-sm font-semibold">Details</div>
<div class="w-10"></div>
</div>
<div class="flex-1 overflow-y-auto px-6 py-2 flex flex-col gap-8 no-scrollbar pb-24">
<!-- Location -->
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-white/60">Location</label>
<div class="group relative">
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none"><i data-lucide="map-pin"
class="w-4 h-4 text-white/40 group-focus-within:text-blue-400 transition-colors"></i></div>
<input type="text" value="Central Park, New York"
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-10 pr-10 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-transparent transition-all font-medium">
<div
class="absolute inset-y-0 right-3 flex items-center cursor-pointer hover:text-white text-white/40 transition-colors">
<i data-lucide="locate-fixed" class="w-4 h-4"></i></div>
</div>
</div>
<!-- Related Persons -->
<div class="flex flex-col gap-3">
<div class="flex justify-between items-center">
<label class="text-sm font-medium text-white/60">With whom?</label>
<span class="text-xs text-white/30">2 selected</span>
</div>
<div class="flex gap-3 overflow-x-auto no-scrollbar py-1">
<button
class="w-12 h-12 rounded-full bg-white/10 border border-white/10 flex items-center justify-center hover:bg-white/20 transition-colors shrink-0">
<i data-lucide="plus" class="w-5 h-5 text-white/70"></i>
</button>
<div class="relative w-12 h-12 shrink-0">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&amp;w=100&amp;q=60"
class="w-full h-full rounded-full object-cover border border-white/10">
<div class="absolute -top-1 -right-1 bg-black/60 rounded-full p-0.5"><i data-lucide="x"
class="w-3 h-3 text-white"></i></div>
</div>
<div
class="relative w-12 h-12 shrink-0 flex items-center justify-center bg-blue-900/50 border border-blue-500/30 rounded-full">
<span class="text-xs font-semibold text-blue-200">JD</span>
<div class="absolute -top-1 -right-1 bg-black/60 rounded-full p-0.5"><i data-lucide="x"
class="w-3 h-3 text-white"></i></div>
</div>
</div>
</div>
<!-- Categories -->
<div class="flex flex-col gap-3">
<label class="text-sm font-medium text-white/60">Category</label>
<!-- Category Search Input -->
<div class="relative mb-1">
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none"><i data-lucide="search"
class="w-4 h-4 text-white/40"></i></div>
<input type="text" placeholder="Search categories..."
class="w-full bg-white/5 border border-white/10 rounded-xl py-2.5 pl-9 pr-4 text-xs text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-transparent transition-all font-medium placeholder-white/20">
</div>
<div class="grid grid-cols-2 gap-3">
<button
class="flex items-center gap-3 p-3 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 transition-all text-left group">
<div class="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-300"><i
data-lucide="briefcase" class="w-4 h-4"></i></div>
<span class="text-xs font-medium text-white/80">Career</span>
</button>
<button
class="flex items-center gap-3 p-3 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 transition-all text-left group">
<div class="w-8 h-8 rounded-lg bg-orange-500/20 flex items-center justify-center text-orange-300"><i
data-lucide="graduation-cap" class="w-4 h-4"></i></div>
<span class="text-xs font-medium text-white/80">Education</span>
</button>
<button
class="flex items-center gap-3 p-3 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 transition-all text-left group">
<div class="w-8 h-8 rounded-lg bg-yellow-500/20 flex items-center justify-center text-yellow-300"><i
data-lucide="trophy" class="w-4 h-4"></i></div>
<span class="text-xs font-medium text-white/80">Awards</span>
</button>
<button
class="flex items-center gap-3 p-3 bg-blue-600 border border-blue-500 rounded-xl shadow-[0_0_15px_rgba(37,99,235,0.3)] transition-all text-left">
<div class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white"><i
data-lucide="party-popper" class="w-4 h-4"></i></div>
<span class="text-xs font-medium text-white">Celebration</span>
</button>
</div>
</div>
<!-- Tags -->
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-white/60">Tags</label>
<div class="relative">
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none"><i data-lucide="hash"
class="w-4 h-4 text-white/40"></i></div>
<input type="text" placeholder="happy, summer, memories"
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-9 pr-4 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-transparent transition-all font-medium">
</div>
<div class="flex flex-wrap gap-2 mt-1">
<span
class="px-2.5 py-1 rounded-md bg-[#2563eb]/20 text-blue-300 text-[10px] font-medium border border-[#2563eb]/30">#happy</span>
<span
class="px-2.5 py-1 rounded-md bg-[#2563eb]/20 text-blue-300 text-[10px] font-medium border border-[#2563eb]/30">#summer</span>
</div>
</div>
</div>
<!-- Sticky Bottom Button -->
<div class="absolute bottom-0 w-full p-6 bg-gradient-to-t from-[#09090b] via-[#09090b] to-transparent z-40">
<a href="index.html"
class="w-full bg-white text-black font-semibold py-3.5 rounded-full shadow-lg shadow-white/10 active:scale-[0.98] transition-all hover:bg-gray-100 flex items-center justify-center gap-2">
<span>Publish</span>
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>