145 lines
No EOL
6.8 KiB
HTML
145 lines
No EOL
6.8 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 4</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 5: Video & Audio Selection -->
|
|
<div id="video-audio"
|
|
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:45</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-3.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">Media</div>
|
|
<a href="entry-edit-step-5.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 px-6 py-4 flex flex-col gap-6 no-scrollbar">
|
|
|
|
<!-- Video Section -->
|
|
<div class="flex flex-col gap-3">
|
|
<div class="flex justify-between items-center">
|
|
<label class="text-sm font-medium text-white/80">Videos</label>
|
|
<span class="text-xs text-blue-400 font-medium cursor-pointer">View All</span>
|
|
</div>
|
|
<div
|
|
class="relative h-48 rounded-2xl bg-white/5 border border-white/10 flex flex-col items-center justify-center gap-3 cursor-pointer hover:bg-white/10 transition-colors group border-dashed">
|
|
<div
|
|
class="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<i data-lucide="video" class="w-6 h-6 text-white/60"></i>
|
|
</div>
|
|
<span class="text-xs font-medium text-white/40">Tap to select videos</span>
|
|
</div>
|
|
<!-- Selected Video Mini-Preview (Simulated) -->
|
|
<div class="flex items-center gap-3 bg-white/5 p-3 rounded-xl border border-white/10">
|
|
<div class="w-12 h-12 bg-black rounded-lg overflow-hidden relative">
|
|
<img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&w=100&q=60"
|
|
class="w-full h-full object-cover opacity-60">
|
|
<i data-lucide="play"
|
|
class="w-4 h-4 text-white absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-white"></i>
|
|
</div>
|
|
<div class="flex-1 flex flex-col gap-1.5">
|
|
<span class="text-xs font-medium text-white">Holiday_clip.mp4</span>
|
|
<span class="text-[10px] text-white/40">00:15 • 12MB</span>
|
|
</div>
|
|
<button class="text-white/40 hover:text-white"><i data-lucide="x" class="w-4 h-4"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Separator -->
|
|
<div class="h-[1px] bg-white/5 w-full"></div>
|
|
|
|
<!-- Audio Section -->
|
|
<div class="flex flex-col gap-3">
|
|
<div class="flex justify-between items-center">
|
|
<label class="text-sm font-medium text-white/80">Audio</label>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<button
|
|
class="h-20 rounded-xl bg-white/5 border border-white/10 flex flex-col items-center justify-center gap-2 hover:bg-white/10 transition-colors">
|
|
<i data-lucide="mic" class="w-5 h-5 text-red-400"></i>
|
|
<span class="text-xs font-medium text-white/60">Record</span>
|
|
</button>
|
|
<button
|
|
class="h-20 rounded-xl bg-white/5 border border-white/10 flex flex-col items-center justify-center gap-2 hover:bg-white/10 transition-colors">
|
|
<i data-lucide="music" class="w-5 h-5 text-blue-400"></i>
|
|
<span class="text-xs font-medium text-white/60">Select File</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Audio Player (Visual) -->
|
|
<div class="mt-2 bg-[#2563eb]/10 border border-[#2563eb]/30 p-4 rounded-xl flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-[#2563eb] flex items-center justify-center shrink-0">
|
|
<i data-lucide="play" class="w-4 h-4 text-white fill-white ml-0.5"></i>
|
|
</div>
|
|
<div class="flex-1 flex flex-col gap-1.5">
|
|
<span class="text-xs font-medium text-white/90">Voice Note 01</span>
|
|
<!-- Waveform Graphic -->
|
|
<div class="flex items-center gap-[2px] h-4 items-end">
|
|
<div class="w-1 h-2 bg-[#2563eb]/50 rounded-full"></div>
|
|
<div class="w-1 h-3 bg-[#2563eb]/70 rounded-full"></div>
|
|
<div class="w-1 h-4 bg-[#2563eb] rounded-full"></div>
|
|
<div class="w-1 h-3 bg-[#2563eb]/80 rounded-full"></div>
|
|
<div class="w-1 h-2 bg-[#2563eb]/60 rounded-full"></div>
|
|
<div class="w-1 h-4 bg-[#2563eb] rounded-full"></div>
|
|
<div class="w-1 h-3 bg-[#2563eb]/70 rounded-full"></div>
|
|
<div class="w-1 h-2 bg-[#2563eb]/50 rounded-full"></div>
|
|
<div class="w-1 h-1 bg-[#2563eb]/30 rounded-full"></div>
|
|
<div class="w-1 h-2 bg-[#2563eb]/50 rounded-full"></div>
|
|
<div class="w-1 h-3 bg-white/20 rounded-full"></div>
|
|
<div class="w-1 h-2 bg-white/20 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<span class="text-[10px] text-white/50 font-mono">0:14</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |