130 lines
No EOL
8 KiB
HTML
130 lines
No EOL
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 2</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 3: Details Entry -->
|
|
<div id="screen-details"
|
|
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 scroll-mt-8">
|
|
<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:43</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-1.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"></div>
|
|
<a href="entry-edit-step-3.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 pt-4 pb-12 flex flex-col gap-8 no-scrollbar">
|
|
|
|
<!-- Emotional Level - Updated -->
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex justify-between items-end"><label class="text-sm font-medium text-white/60">Emotional
|
|
Level</label><span class="text-xs font-medium text-blue-400">Good</span></div>
|
|
<div class="flex justify-between items-center pt-2 pb-1">
|
|
<button
|
|
class="group w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 hover:border-white/20 transition-all active:scale-95"><span
|
|
class="text-xl group-hover:scale-110 transition-transform grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100">😫</span></button>
|
|
<button
|
|
class="group w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 hover:border-white/20 transition-all active:scale-95"><span
|
|
class="text-xl group-hover:scale-110 transition-transform grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100">😔</span></button>
|
|
<button
|
|
class="group w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 hover:border-white/20 transition-all active:scale-95"><span
|
|
class="text-xl group-hover:scale-110 transition-transform grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100">🙁</span></button>
|
|
<button
|
|
class="group w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 hover:border-white/20 transition-all active:scale-95"><span
|
|
class="text-xl group-hover:scale-110 transition-transform grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100">😐</span></button>
|
|
<!-- Selected -->
|
|
<button
|
|
class="group w-10 h-10 rounded-full bg-[#2563eb] border border-blue-400 shadow-[0_0_15px_rgba(37,99,235,0.5)] flex items-center justify-center transition-all scale-110"><span
|
|
class="text-xl">🙂</span></button>
|
|
<button
|
|
class="group w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 hover:border-white/20 transition-all active:scale-95"><span
|
|
class="text-xl group-hover:scale-110 transition-transform grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100">😄</span></button>
|
|
<button
|
|
class="group w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 hover:border-white/20 transition-all active:scale-95"><span
|
|
class="text-xl group-hover:scale-110 transition-transform grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100">🤩</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-sm font-medium text-white/60">Date</label>
|
|
<div class="group relative">
|
|
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none"><i data-lucide="calendar"
|
|
class="w-4 h-4 text-white/40 group-focus-within:text-blue-400 transition-colors"></i></div><input
|
|
type="date"
|
|
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-10 pr-3 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-transparent transition-all placeholder-white/20 font-medium"
|
|
value="2023-07-28">
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-sm font-medium text-white/60">Time</label>
|
|
<div class="group relative">
|
|
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none"><i data-lucide="clock"
|
|
class="w-4 h-4 text-white/40 group-focus-within:text-blue-400 transition-colors"></i></div><input
|
|
type="time"
|
|
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-10 pr-3 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-transparent transition-all placeholder-white/20 font-medium"
|
|
value="14:30">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2"><label class="text-sm font-medium text-white/60">Short Title</label><input
|
|
type="text" placeholder="e.g. Summer Wedding"
|
|
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-4 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-transparent transition-all placeholder-white/20 font-medium">
|
|
</div>
|
|
<div class="flex flex-col gap-2"><label class="text-sm font-medium text-white/60">Headline</label><input
|
|
type="text" placeholder="A day to remember forever"
|
|
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-4 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-transparent transition-all placeholder-white/20 font-medium">
|
|
</div>
|
|
<div class="flex flex-col gap-2 flex-1"><label
|
|
class="text-sm font-medium text-white/60">Description</label><textarea
|
|
placeholder="Write your thoughts here..."
|
|
class="w-full h-32 bg-white/5 border border-white/10 rounded-xl py-3 px-4 text-sm text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-transparent transition-all placeholder-white/20 font-medium resize-none leading-relaxed"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |