150 lines
No EOL
8.1 KiB
HTML
150 lines
No EOL
8.1 KiB
HTML
<!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&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 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&w=400&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&w=400&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&w=400&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&w=400&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&w=400&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&w=400&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&w=400&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&w=400&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&w=400&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&w=400&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> |