194 lines
No EOL
18 KiB
HTML
194 lines
No EOL
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"><head><meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VΛYV App Interface Variations</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>
|
|
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">.font-geist { font-family: 'Geist', sans-serif !important; }</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">.font-roboto { font-family: 'Roboto', sans-serif !important; }</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">.font-montserrat { font-family: 'Montserrat', sans-serif !important; }</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">.font-poppins { font-family: 'Poppins', sans-serif !important; }</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">.font-playfair { font-family: 'Playfair Display', serif !important; }</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">.font-merriweather { font-family: 'Merriweather', serif !important; }</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">.font-manrope { font-family: 'Manrope', sans-serif !important; }</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">.font-work-sans { font-family: 'Work Sans', sans-serif !important; }</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">.font-pt-serif { font-family: 'PT Serif', serif !important; }</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">.font-geist-mono { font-family: 'Geist Mono', monospace !important; }</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">.font-space-mono { font-family: 'Space Mono', monospace !important; }</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">.font-quicksand { font-family: 'Quicksand', sans-serif !important; }</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">.font-nunito { font-family: 'Nunito', sans-serif !important; }</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 7: Complete Entry View -->
|
|
<div 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">
|
|
<!-- Header Overlaid -->
|
|
<div class="absolute top-0 w-full flex justify-between items-center px-6 pt-12 pb-2 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="chevron-left" class="w-6 h-6"></i></a>
|
|
<button 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="more-horizontal" class="w-6 h-6"></i></button>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto no-scrollbar relative">
|
|
|
|
<!-- Hero Slider -->
|
|
<div class="w-full h-[45%] relative group">
|
|
<div class="flex overflow-x-auto snap-x snap-mandatory no-scrollbar h-full w-full">
|
|
<div class="w-full shrink-0 h-full snap-center relative">
|
|
<img src="https://images.unsplash.com/photo-1511895426328-dc8714191300?ixlib=rb-4.0.3&w=600&q=80" class="w-full h-full object-cover">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-[#09090b]"></div>
|
|
</div>
|
|
<div class="w-full shrink-0 h-full snap-center relative">
|
|
<img src="https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&w=600&q=80" class="w-full h-full object-cover">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-[#09090b]"></div>
|
|
</div>
|
|
<div class="w-full shrink-0 h-full snap-center relative">
|
|
<img src="https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd?ixlib=rb-4.0.3&w=600&q=80" class="w-full h-full object-cover">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-[#09090b]"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Slider Indicators -->
|
|
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex gap-1.5 z-20">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-white"></div>
|
|
<div class="w-1.5 h-1.5 rounded-full bg-white/40"></div>
|
|
<div class="w-1.5 h-1.5 rounded-full bg-white/40"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Body -->
|
|
<div class="relative px-6 -mt-6 z-20 pb-32">
|
|
<!-- Meta Info -->
|
|
<div class="flex flex-col gap-1 mb-6">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-[10px] font-bold uppercase tracking-widest text-blue-400">Summer Wedding</span>
|
|
<div class="flex items-center gap-1 bg-white/5 px-2 py-0.5 rounded-full border border-white/5">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-green-400"></div>
|
|
<span class="text-[10px] text-white/60">Positivity +2</span>
|
|
</div>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-white leading-tight tracking-tight mt-1">A day to remember forever</h1>
|
|
<div class="flex items-center gap-4 mt-3 text-xs text-white/50 font-medium">
|
|
<div class="flex items-center gap-1.5"><i data-lucide="calendar" class="w-3.5 h-3.5"></i><span>28 Jul, 14:30</span></div>
|
|
<div class="flex items-center gap-1.5"><i data-lucide="map-pin" class="w-3.5 h-3.5"></i><span>Central Park, NY</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Emotional Level Visual -->
|
|
<div class="mb-8">
|
|
<label class="text-xs font-medium text-white/40 uppercase tracking-wider mb-2 block">Emotional Impact</label>
|
|
<div class="h-1.5 w-full bg-white/10 rounded-full relative overflow-hidden">
|
|
<div class="absolute left-0 top-0 bottom-0 w-[80%] bg-gradient-to-r from-blue-500 to-green-400 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="mb-8">
|
|
<p class="text-sm text-white/80 leading-relaxed font-light">
|
|
The sun was shining perfectly through the trees as we arrived. It was one of those rare moments where everything feels exactly right. The laughter, the music, and the company made it unforgettable. I want to keep this memory close.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Video Slider -->
|
|
<div class="mb-8">
|
|
<label class="text-xs font-medium text-white/40 uppercase tracking-wider mb-3 block">Videos</label>
|
|
<div class="flex gap-3 overflow-x-auto no-scrollbar snap-x snap-mandatory">
|
|
<div class="w-40 aspect-[9/16] bg-white/5 rounded-xl shrink-0 overflow-hidden relative border border-white/10 snap-start">
|
|
<img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&w=200&q=60" class="w-full h-full object-cover opacity-80">
|
|
<div class="absolute inset-0 flex items-center justify-center"><div class="w-8 h-8 rounded-full bg-black/50 backdrop-blur flex items-center justify-center"><i data-lucide="play" class="w-4 h-4 text-white fill-white ml-0.5"></i></div></div>
|
|
</div>
|
|
<div class="w-40 aspect-[9/16] bg-white/5 rounded-xl shrink-0 overflow-hidden relative border border-white/10 snap-start">
|
|
<img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-4.0.3&w=200&q=60" class="w-full h-full object-cover opacity-80">
|
|
<div class="absolute inset-0 flex items-center justify-center"><div class="w-8 h-8 rounded-full bg-black/50 backdrop-blur flex items-center justify-center"><i data-lucide="play" class="w-4 h-4 text-white fill-white ml-0.5"></i></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Photo Gallery -->
|
|
<div class="mb-8">
|
|
<div class="flex justify-between items-end mb-3">
|
|
<label class="text-xs font-medium text-white/40 uppercase tracking-wider block">Gallery</label>
|
|
<span class="text-[10px] text-blue-400 font-medium cursor-pointer">View All</span>
|
|
</div>
|
|
<div class="grid grid-cols-4 gap-2">
|
|
<div class="aspect-square rounded-lg overflow-hidden bg-white/5"><img src="https://images.unsplash.com/photo-1511895426328-dc8714191300?ixlib=rb-4.0.3&w=150&q=60" class="w-full h-full object-cover hover:opacity-80 transition-opacity"></div>
|
|
<div class="aspect-square rounded-lg overflow-hidden bg-white/5"><img src="https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&w=150&q=60" class="w-full h-full object-cover hover:opacity-80 transition-opacity"></div>
|
|
<div class="aspect-square rounded-lg overflow-hidden bg-white/5"><img src="https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd?ixlib=rb-4.0.3&w=150&q=60" class="w-full h-full object-cover hover:opacity-80 transition-opacity"></div>
|
|
<div class="aspect-square rounded-lg overflow-hidden bg-white/5 flex items-center justify-center text-white/50 text-xs font-medium bg-white/10">+5</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Audio Recordings -->
|
|
<div class="mb-8">
|
|
<label class="text-xs font-medium text-white/40 uppercase tracking-wider mb-3 block">Audio Notes</label>
|
|
<div class="flex gap-3 mb-3">
|
|
<!-- Thumbnails -->
|
|
<div class="w-14 h-14 rounded-lg bg-[#2563eb] flex items-center justify-center border border-white/10 shadow-[0_0_10px_rgba(37,99,235,0.5)] shrink-0">
|
|
<i data-lucide="mic" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<div class="w-14 h-14 rounded-lg bg-white/5 flex items-center justify-center border border-white/10 shrink-0 opacity-60">
|
|
<i data-lucide="music-2" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<div class="w-14 h-14 rounded-lg bg-white/5 flex items-center justify-center border border-white/10 shrink-0 opacity-60">
|
|
<i data-lucide="music-2" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
</div>
|
|
<!-- Active Player -->
|
|
<div class="bg-white/5 border border-white/10 p-3 pr-4 rounded-xl flex items-center gap-3">
|
|
<button class="w-8 h-8 rounded-full bg-white text-black flex items-center justify-center shrink-0 hover:bg-gray-200">
|
|
<i data-lucide="pause" class="w-3.5 h-3.5 fill-current"></i>
|
|
</button>
|
|
<div class="flex-1">
|
|
<div class="flex justify-between text-[10px] mb-1.5">
|
|
<span class="font-medium text-white">Speech.m4a</span>
|
|
<span class="text-white/40">0:12 / 0:45</span>
|
|
</div>
|
|
<div class="h-1 bg-white/10 rounded-full overflow-hidden">
|
|
<div class="h-full w-1/3 bg-[#2563eb] rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- People & Categories -->
|
|
<div class="mb-8 space-y-6">
|
|
<div>
|
|
<label class="text-xs font-medium text-white/40 uppercase tracking-wider mb-2 block">With Whom</label>
|
|
<div class="flex items-center gap-2">
|
|
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&w=100&q=60" class="w-10 h-10 rounded-full border border-white/10 object-cover">
|
|
<div class="w-10 h-10 rounded-full bg-blue-900/50 border border-blue-500/30 flex items-center justify-center text-xs font-semibold text-blue-200">JD</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="text-xs font-medium text-white/40 uppercase tracking-wider mb-2 block">Tags & Category</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-2.5 py-1 rounded-full bg-blue-600/20 text-blue-300 text-[10px] font-medium border border-blue-500/30 flex items-center gap-1"><i data-lucide="party-popper" class="w-3 h-3"></i>Celebration</span>
|
|
<span class="px-2.5 py-1 rounded-full bg-white/5 text-white/60 text-[10px] font-medium border border-white/10">#summer</span>
|
|
<span class="px-2.5 py-1 rounded-full bg-white/5 text-white/60 text-[10px] font-medium border border-white/10">#memories</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sticky Footer Action -->
|
|
<div class="absolute bottom-0 w-full px-6 py-4 bg-[#09090b]/90 backdrop-blur-xl border-t border-white/5 flex items-center gap-3 z-40">
|
|
<button class="w-12 h-12 rounded-full border border-white/10 bg-white/5 flex items-center justify-center text-white hover:bg-white/10 transition-colors">
|
|
<i data-lucide="share-2" class="w-5 h-5"></i>
|
|
</button>
|
|
<button class="flex-1 bg-white text-black h-12 rounded-full font-semibold text-sm flex items-center justify-center gap-2 hover:bg-gray-200 transition-colors shadow-lg shadow-white/5">
|
|
<i data-lucide="edit-3" class="w-4 h-4"></i>
|
|
Edit Entry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
|
|
|
|
</body></html> |