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

121
documentation/layout/entry-edit-step-1.html Normal file
View file

@ -0,0 +1,121 @@
<!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 1</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 2: Single Image Gallery -->
<div id="single-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:42</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="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="x" class="w-6 h-6"></i></a>
<button class="flex items-center gap-1.5 px-3 py-1.5 rounded-full hover:bg-white/10 transition-colors"><span
class="text-sm font-semibold tracking-tight">Recents</span><i data-lucide="chevron-down"
class="w-4 h-4 text-white/50"></i></button>
<a href="entry-edit-step-2.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 no-scrollbar">
<div class="grid grid-cols-3 gap-0.5 pb-20">
<div
class="relative aspect-square bg-white/5 flex flex-col items-center justify-center gap-2 cursor-pointer hover:bg-white/10 transition-colors group">
<i data-lucide="image-off" class="w-6 h-6 text-white/40 group-hover:text-white/80 transition-colors"></i>
</div>
<div class="relative aspect-square group cursor-pointer">
<img
src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=400&amp;q=80"
class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity" alt="Gallery">
<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>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover"></div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover"></div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1516762689617-e1cffcef479d?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover"></div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover"></div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1517487881594-2787fef5ebf7?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover"></div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover"></div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover"></div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover"></div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover"></div>
<div class="relative aspect-square"><img
src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&amp;w=400&amp;q=80"
class="w-full h-full object-cover"></div>
</div>
</div>
<div
class="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3 px-4 py-2 bg-[#2a2a2a] rounded-full border border-white/10 shadow-xl backdrop-blur-md">
<div class="w-8 h-8 rounded-full overflow-hidden border border-white/20"><img
src="https://images.unsplash.com/photo-1542038784456-1ea8e935640e?ixlib=rb-4.0.3&amp;w=100&amp;q=60"
class="w-full h-full object-cover"></div>
<span class="text-xs font-medium text-white/90">1 Selected</span>
<button class="w-6 h-6 flex items-center justify-center rounded-full hover:bg-white/10 transition-colors"><i
data-lucide="x" class="w-3.5 h-3.5 text-white/50"></i></button>
</div>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>

130
documentation/layout/entry-edit-step-2.html Normal file
View file

@ -0,0 +1,130 @@
<!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&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 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>

150
documentation/layout/entry-edit-step-3.html Normal file
View file

@ -0,0 +1,150 @@
<!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&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 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&amp;w=400&amp;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&amp;w=400&amp;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&amp;w=400&amp;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&amp;w=400&amp;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&amp;w=400&amp;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&amp;w=400&amp;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&amp;w=400&amp;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&amp;w=400&amp;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&amp;w=400&amp;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&amp;w=400&amp;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>

145
documentation/layout/entry-edit-step-4.html Normal file
View file

@ -0,0 +1,145 @@
<!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&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 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&amp;w=100&amp;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>

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>

194
documentation/layout/entry.html Normal file
View file

@ -0,0 +1,194 @@
<!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&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>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;w=600&amp;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&amp;w=600&amp;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&amp;w=600&amp;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&amp;w=200&amp;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&amp;w=200&amp;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&amp;w=150&amp;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&amp;w=150&amp;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&amp;w=150&amp;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&amp;w=100&amp;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 &amp; 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>

428
documentation/layout/index.html Normal file
View file

@ -0,0 +1,428 @@
<!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 - Wave Flow Duplicate</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;700&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>
<link id="all-fonts-link-font-geist" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;display=swap">
<style id="all-fonts-style-font-nunito">
.font-nunito {
font-family: 'Nunito', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-newsreader" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&amp;display=swap">
<style id="all-fonts-style-font-newsreader">
.font-newsreader {
font-family: 'Newsreader', serif !important;
}
</style>
<link id="all-fonts-link-font-google-sans-flex" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&amp;display=swap">
<style id="all-fonts-style-font-google-sans-flex">
.font-google-sans-flex {
font-family: 'Google Sans Flex', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-oswald" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&amp;display=swap">
<style id="all-fonts-style-font-oswald">
.font-oswald {
font-family: 'Oswald', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-dm-sans" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&amp;display=swap">
<style id="all-fonts-style-font-dm-sans">
.font-dm-sans {
font-family: 'DM Sans', 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 pt-8 pr-8 pb-8 pl-8">
<!-- SCREEN 1: Original with Image Logo -->
<div
class="relative w-full max-w-[390px] h-[844px] bg-app-gradient shadow-2xl overflow-hidden sm:rounded-[3rem] flex flex-col ring-8 ring-black/5">
<!-- Status Bar -->
<div class="flex justify-between items-center px-6 pt-4 pb-2 text-xs font-normal z-20 mix-blend-plus-lighter">
<span>9:41</span>
<div class="flex items-center gap-1.5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="signal" class="lucide lucide-signal w-3.5 h-3.5">
<path d="M2 20h.01"></path>
<path d="M7 20v-4"></path>
<path d="M12 20v-8"></path>
<path d="M17 20V8"></path>
<path d="M22 4v16"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="wifi" class="lucide lucide-wifi w-3.5 h-3.5">
<path d="M12 20h.01"></path>
<path d="M2 8.82a15 15 0 0 1 20 0"></path>
<path d="M5 12.859a10 10 0 0 1 14 0"></path>
<path d="M8.5 16.429a5 5 0 0 1 7 0"></path>
</svg>
<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>
<!-- Header -->
<div class="flex justify-between items-end px-6 py-2 z-20">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/420cb7fa-1091-4075-a321-497c1290e4e2_3840w.png"
alt="Logo" class="h-8 w-auto object-contain drop-shadow-md" style="">
<div class="flex items-center gap-4">
<button
class="w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center hover:bg-white/20 transition-all group overflow-hidden relative">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="sun"
class="lucide lucide-sun w-4 h-4 text-yellow-300 absolute transition-all duration-300 scale-100 rotate-0 group-hover:scale-0 group-hover:rotate-90 opacity-100 group-hover:opacity-0">
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2"></path>
<path d="M12 20v2"></path>
<path d="m4.93 4.93 1.41 1.41"></path>
<path d="m17.66 17.66 1.41 1.41"></path>
<path d="M2 12h2"></path>
<path d="M20 12h2"></path>
<path d="m6.34 17.66-1.41 1.41"></path>
<path d="m19.07 4.93-1.41 1.41"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="moon"
class="lucide lucide-moon w-4 h-4 text-blue-200 absolute transition-all duration-300 scale-0 -rotate-90 group-hover:scale-100 group-hover:rotate-0 opacity-0 group-hover:opacity-100">
<path
d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401">
</path>
</svg>
</button>
<a href="login.html" class="p-1 hover:bg-white/10 rounded-full transition-colors"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="menu" class="lucide lucide-menu w-7 h-7 text-white">
<path d="M4 5h16"></path>
<path d="M4 12h16"></path>
<path d="M4 19h16"></path>
</svg></a>
</div>
</div>
<!-- Content Area -->
<div class="flex-1 w-full h-full relative">
<!-- mt-28 adds 112px, which is 48px more than previous mt-16 (64px) -->
<div class="absolute inset-0 w-full h-full mt-28">
<svg class="absolute top-0 w-full h-[400px] overflow-visible pointer-events-none z-0"
viewBox="0 0 390 400" preserveAspectRatio="none">
<defs>
<linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:white;stop-opacity:0.1"></stop>
<stop offset="20%" style="stop-color:white;stop-opacity:0.8"></stop>
<stop offset="50%" style="stop-color:white;stop-opacity:1"></stop>
<stop offset="80%" style="stop-color:white;stop-opacity:0.8"></stop>
<stop offset="100%" style="stop-color:white;stop-opacity:0.1"></stop>
</linearGradient>
</defs>
<path d="M -50,180
C -20,180 10,100 39,100
S 80,240 117,240
S 155,60 195,60
S 235,240 273,240
S 310,180 351,180
C 390,180 410,180 440,180" fill="none" stroke="url(#lineGrad)" stroke-width="1.5"
stroke-linecap="round"></path>
</svg>
<div
class="absolute left-[10%] -translate-x-1/2 top-[100px] flex flex-col-reverse items-center z-10 -translate-y-full pb-0.5">
<div
class="relative w-3 h-3 rounded-full bg-white shadow-[0_0_15px_rgba(255,255,255,0.8)] z-20 translate-y-1.5">
</div>
<div class="h-6 w-px bg-white/40 my-1"></div>
<div class="flex flex-col items-center opacity-90">
<span
class="text-[10px] font-semibold text-white/90 bg-white/10 px-2 py-1 rounded-full backdrop-blur-md border border-white/10">21
Jun</span>
</div>
</div>
<div
class="absolute left-[30%] -translate-x-1/2 top-[240px] flex flex-col items-center z-10 -translate-y-[6px]">
<div class="relative w-3 h-3 rounded-full bg-white shadow-[0_0_15px_rgba(255,255,255,0.8)] z-20">
</div>
<div class="h-8 w-px bg-white/40 my-1.5"></div>
<div class="relative w-14 h-14 rounded-full border border-white/40 shadow-xl overflow-hidden group">
<img src="https://images.unsplash.com/photo-1523580494863-6f3031224c94?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=150&amp;q=80"
alt="Concert" class="w-full h-full object-cover" style="">
<div
class="absolute bottom-0 w-full bg-gradient-to-t from-black/80 to-transparent pt-3 pb-1 text-center">
<span class="text-[9px] font-normal text-white/90">25 Jun</span>
</div>
</div>
</div>
<!-- Link added here -->
<a href="entry"
class="absolute left-1/2 -translate-x-1/2 top-[60px] flex flex-col-reverse items-center z-20 -translate-y-full pb-1 transition-transform active:scale-95">
<div
class="relative w-4 h-4 rounded-full bg-white shadow-[0_0_20px_rgba(255,255,255,1)] ring-4 ring-white/10 z-20 translate-y-2">
</div>
<div class="h-8 w-px bg-white/40 my-1.5"></div>
<div
class="relative w-20 h-20 rounded-full border-[3px] border-white shadow-2xl overflow-hidden group">
<img src="https://images.unsplash.com/photo-1515934751635-c81c6bc9a2d8?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=300&amp;q=80"
alt="Wedding" class="w-full h-full object-cover">
<div
class="absolute bottom-0 w-full bg-gradient-to-t from-black/80 to-transparent pt-6 pb-2 text-center">
<span class="text-xs font-semibold text-white">28 Jul</span>
</div>
</div>
</a>
<div
class="absolute left-[70%] -translate-x-1/2 top-[240px] flex flex-col items-center z-10 -translate-y-[6px]">
<div class="relative w-3 h-3 rounded-full bg-white shadow-[0_0_15px_rgba(255,255,255,0.8)] z-20">
</div>
<div class="h-8 w-px bg-white/40 my-1.5"></div>
<div class="relative w-14 h-14 rounded-full border border-white/40 shadow-xl overflow-hidden group">
<img src="https://images.unsplash.com/photo-1496337589254-7e19d01cec44?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=150&amp;q=80"
alt="Dinner" class="w-full h-full object-cover" style="">
<div
class="absolute bottom-0 w-full bg-gradient-to-t from-black/80 to-transparent pt-3 pb-1 text-center">
<span class="text-[9px] font-normal text-white/90">12 Aug</span>
</div>
</div>
</div>
<div
class="absolute left-[90%] -translate-x-1/2 top-[180px] flex flex-col items-center z-10 -translate-y-1">
<div
class="relative w-2.5 h-2.5 rounded-full bg-white/90 shadow-[0_0_10px_rgba(255,255,255,0.6)] z-20">
</div>
<span class="mt-3 text-[9px] font-medium text-white/60">18 Aug</span>
</div>
</div>
<div class="absolute bottom-28 w-full">
<div class="flex justify-between px-8 text-lg text-white/60 font-normal">
<span class="opacity-50 text-sm">May</span>
<span class="opacity-80">Jun</span>
<span class="text-white scale-125 font-semibold drop-shadow-md mx-2">Jul</span>
<span class="opacity-80">Aug</span>
<span class="opacity-50 text-sm">Sep</span>
</div>
<div class="mx-8 mt-4 h-[1px] bg-gradient-to-r from-transparent via-white/30 to-transparent"></div>
<div class="text-center mt-3 text-xl font-medium tracking-tight text-white/90">2023</div>
</div>
</div>
<!-- Navbar -->
<div
class="flex z-30 bg-[#1a1a1a]/95 w-full h-20 border-white/5 border-t pr-8 pl-8 relative backdrop-blur-xl items-center justify-between">
<a href="index.html"
class="flex flex-col hover:text-white transition-colors text-white/70 w-12 h-12 items-center justify-center"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="activity" class="lucide lucide-activity w-[24px] h-[24px]">
<path
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2">
</path>
</svg></a>
<button
class="flex flex-col items-center justify-center w-12 h-12 text-white/70 hover:text-white transition-colors mr-8"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="users" class="lucide lucide-users w-6 h-6">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg></button>
<div class="absolute left-1/2 -translate-x-1/2 -top-6">
<a href="entry-edit-step-1.html"
class="flex border-[3px] hover:scale-105 transition-transform active:scale-95 group bg-[#3e3e3e] w-14 h-14 border-[#a7f3d0] rounded-full shadow-[0_4px_20px_rgba(0,0,0,0.4)] items-center justify-center"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="plus" class="lucide lucide-plus w-[28px] h-[28px]">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg></a>
</div>
<a href="login.html"
class="flex flex-col hover:text-white transition-colors text-white/70 w-12 h-12 items-center justify-center"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="mail" class="lucide lucide-mail w-6 h-6">
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
</svg></a>
<a href="profile.html"
class="flex flex-col hover:text-white transition-colors text-white/70 w-12 h-12 items-center justify-center"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="user" class="lucide lucide-user w-6 h-6">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg></a>
</div>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>

296
documentation/layout/login.html Normal file
View file

@ -0,0 +1,296 @@
<!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&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>
<link id="all-fonts-link-font-geist" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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 1: Login -->
<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">
<div
class="flex z-20 text-xs font-medium text-white mix-blend-difference pt-4 pr-6 pb-2 pl-6 items-center justify-between">
<span class="">9:41</span>
<div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" data-lucide="signal" class="lucide lucide-signal w-3.5 h-3.5">
<path d="M2 20h.01"></path>
<path d="M7 20v-4"></path>
<path d="M12 20v-8"></path>
<path d="M17 20V8"></path>
<path d="M22 4v16"></path>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="wifi" class="lucide lucide-wifi w-3.5 h-3.5">
<path d="M12 20h.01"></path>
<path d="M2 8.82a15 15 0 0 1 20 0"></path>
<path d="M5 12.859a10 10 0 0 1 14 0"></path>
<path d="M8.5 16.429a5 5 0 0 1 7 0"></path>
</svg>
<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-1 flex flex-col z-10 pr-8 pl-8 relative justify-center">
<!-- Background Decorative Blur -->
<div
class="absolute top-[-10%] right-[-10%] w-64 h-64 bg-blue-600/20 rounded-full blur-[80px] pointer-events-none">
</div>
<div
class="absolute bottom-[-10%] left-[-10%] w-64 h-64 bg-purple-600/20 rounded-full blur-[80px] pointer-events-none">
</div>
<div class="mb-12">
<!-- Added Logo based on image provided -->
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/32e790c1-060e-4820-bca4-b639b2d815b0_320w.png"
class="w-20 h-auto mb-6 drop-shadow-lg object-cover" alt="VΛYV Logo">
<p class="text-white/40 text-sm">Welcome back. Enter your credentials to access your VΛYV account.</p>
</div>
<form class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<label class="text-xs font-medium text-white/60 ml-1">Username or Email</label>
<div class="relative group">
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" data-lucide="user"
class="lucide lucide-user w-4 h-4 text-white/40 group-focus-within:text-blue-400 transition-colors">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg></div>
<input type="text" placeholder="name@example.com"
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-sm text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-all placeholder-white/20 font-medium">
</div>
</div>
<div class="flex flex-col gap-2">
<div class="flex justify-between items-center ml-1">
<label class="text-xs font-medium text-white/60">Password</label>
<a href="#"
class="text-[10px] text-blue-400 font-medium hover:text-blue-300 transition-colors">Forgot
Password?</a>
</div>
<div class="relative group">
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" data-lucide="lock"
class="lucide lucide-lock w-4 h-4 text-white/40 group-focus-within:text-blue-400 transition-colors">
<rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg></div>
<input type="password" placeholder="••••••••"
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-sm text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-all placeholder-white/20 font-medium">
</div>
</div>
<a href="index.html"
class="w-full bg-white text-black font-semibold py-3.5 rounded-xl mt-4 shadow-[0_0_20px_rgba(255,255,255,0.1)] active:scale-[0.98] transition-all hover:bg-gray-100 flex items-center justify-center gap-2">
Log In <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg></a>
</form>
<div class="mt-8 flex items-center justify-between gap-4">
<div class="h-[1px] bg-white/10 flex-1"></div>
<span class="text-[10px] text-white/30 uppercase tracking-widest">Or continue with</span>
<div class="h-[1px] bg-white/10 flex-1"></div>
</div>
<div class="flex gap-4 mt-6">
<button
class="flex-1 bg-white/5 border border-white/10 hover:bg-white/10 transition-colors rounded-xl py-2.5 flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z">
</path>
</svg>
</button>
<button
class="flex-1 bg-white/5 border border-white/10 hover:bg-white/10 transition-colors rounded-xl py-2.5 flex items-center justify-center">
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
<path
d="M24 12.276c0-.853-.076-1.674-.219-2.472H12v4.676h6.728c-.29 1.554-1.171 2.87-2.496 3.757v3.124h4.043c2.365-2.177 3.729-5.385 3.729-9.085z"
fill="#4285F4"></path>
<path
d="M12 24.48c3.243 0 5.983-1.076 7.97-2.909l-4.043-3.124c-1.076.721-2.454 1.148-3.927 1.148-3.129 0-5.782-2.114-6.73-4.956H1.206v3.121C3.18 21.676 7.294 24.48 12 24.48z"
fill="#34A853"></path>
<path
d="M5.27 14.639c-.24-.721-.378-1.492-.378-2.289s.138-1.568.378-2.289V6.936H1.206C.437 8.468 0 10.198 0 12.35s.437 3.882 1.206 5.414l4.064-3.125z"
fill="#FBBC05"></path>
<path
d="M12 4.777c1.764 0 3.349.607 4.595 1.798l3.447-3.448C17.978 1.178 15.238 0 12 0 7.294 0 3.18 2.804 1.206 6.936l4.064 3.125C6.218 7.194 8.871 4.777 12 4.777z"
fill="#EA4335"></path>
</svg>
</button>
</div>
<div class="mt-8 text-center">
<p class="text-xs text-white/40">Don't have an account? <a href="signup.html"
class="text-white font-medium cursor-pointer hover:underline">Sign up</a></p>
</div>
</div>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>

338
documentation/layout/profile.html Normal file
View file

@ -0,0 +1,338 @@
<!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&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;
}
/* Custom Range Slider Styling */
input[type=range] {
-webkit-appearance: none;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
cursor: pointer;
margin-top: -8px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: rgba(255, 255, 255, 0.1);
border-radius: 9999px;
}
</style>
<link id="all-fonts-link-font-geist" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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-12 antialiased selection:bg-blue-500/30 text-white font-['Inter'] bg-gray-100 p-8">
<!-- Screen 4: Personal Profile -->
<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">
<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 sticky top-0 z-30 bg-[#09090b]/80 backdrop-blur-md">
<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>
<span class="text-sm font-semibold tracking-tight text-white">Edit Profile</span>
<button
class="px-4 py-1.5 bg-white text-black text-xs font-semibold rounded-full hover:bg-gray-200 transition-colors">Save</button>
</div>
<div class="flex-1 overflow-y-auto px-6 pb-20 no-scrollbar">
<!-- Avatar Section -->
<div class="flex flex-col items-center my-6">
<div class="relative w-24 h-24 mb-3">
<img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=300&amp;q=80"
class="w-full h-full rounded-full object-cover border-2 border-white/10">
<button
class="absolute bottom-0 right-0 w-8 h-8 bg-[#2563eb] rounded-full flex items-center justify-center border-2 border-[#09090b] text-white hover:bg-blue-600 transition-colors">
<i data-lucide="camera" class="w-4 h-4"></i>
</button>
</div>
<span class="text-sm font-semibold text-white">Change Photo</span>
</div>
<div class="flex flex-col gap-6">
<!-- Personal Info Group -->
<div class="space-y-4">
<h3 class="text-xs font-semibold text-white/40 uppercase tracking-wider">Personal Information</h3>
<div class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div class="space-y-1.5">
<label class="text-[11px] font-medium text-white/60">First Name</label>
<input type="text" value="Alex"
class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 transition-colors">
</div>
<div class="space-y-1.5">
<label class="text-[11px] font-medium text-white/60">Last Name</label>
<input type="text" value="Morgan"
class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 transition-colors">
</div>
</div>
<div class="space-y-1.5">
<label class="text-[11px] font-medium text-white/60">Username</label>
<div class="relative">
<span class="absolute left-3 top-2.5 text-white/40 text-sm">@</span>
<input type="text" value="alexmorgan"
class="w-full bg-white/5 border border-white/10 rounded-lg pl-7 pr-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 transition-colors">
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-1.5">
<label class="text-[11px] font-medium text-white/60">Gender</label>
<select
class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 transition-colors appearance-none">
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
<div class="space-y-1.5">
<label class="text-[11px] font-medium text-white/60">Date of Birth</label>
<input type="date" value="1995-08-15"
class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 transition-colors">
</div>
</div>
</div>
</div>
<div class="h-[1px] bg-white/5 w-full"></div>
<!-- Introduction & Bio -->
<div class="space-y-4">
<h3 class="text-xs font-semibold text-white/40 uppercase tracking-wider">About</h3>
<div class="space-y-1.5">
<label class="text-[11px] font-medium text-white/60">Short Introduction</label>
<input type="text" value="Digital Nomad &amp; Photographer"
class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 transition-colors">
</div>
<div class="space-y-1.5">
<label class="text-[11px] font-medium text-white/60">Bio</label>
<textarea
class="w-full h-24 bg-white/5 border border-white/10 rounded-lg px-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 transition-colors resize-none leading-relaxed">Capturing moments across the globe. Lover of coffee, sunsets, and good design.</textarea>
</div>
</div>
<div class="h-[1px] bg-white/5 w-full"></div>
<!-- Contact & Links -->
<div class="space-y-4">
<h3 class="text-xs font-semibold text-white/40 uppercase tracking-wider">Contact &amp; Links</h3>
<div class="space-y-1.5">
<label class="text-[11px] font-medium text-white/60">Email</label>
<div class="relative">
<i data-lucide="mail" class="absolute left-3 top-2.5 w-4 h-4 text-white/40"></i>
<input type="email" value="alex@vayv.app"
class="w-full bg-white/5 border border-white/10 rounded-lg pl-9 pr-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 transition-colors">
</div>
</div>
<div class="space-y-1.5">
<label class="text-[11px] font-medium text-white/60">Website</label>
<div class="relative">
<i data-lucide="link" class="absolute left-3 top-2.5 w-4 h-4 text-white/40"></i>
<input type="url" value="https://alexmorgan.com"
class="w-full bg-white/5 border border-white/10 rounded-lg pl-9 pr-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 transition-colors">
</div>
</div>
</div>
</div>
<div class="h-[1px] bg-white/5 w-full my-6"></div>
<!-- App Settings -->
<div class="px-1">
<h3 class="text-xs font-semibold text-white/40 uppercase tracking-wider mb-3">App Settings</h3>
<div class="flex gap-3">
<a href="settings.html"
class="flex-1 bg-white/5 border border-white/10 rounded-2xl p-4 flex items-center justify-between hover:bg-white/10 transition-colors">
<span class="text-sm font-medium text-white">Settings</span>
<i data-lucide="settings" class="w-4 h-4 text-white/40"></i>
</a>
<a href="theme.html"
class="flex-1 bg-white/5 border border-white/10 rounded-2xl p-4 flex items-center justify-between hover:bg-white/10 transition-colors">
<span class="text-sm font-medium text-white">Theme</span>
<i data-lucide="palette" class="w-4 h-4 text-white/40"></i>
</a>
</div>
</div>
</div>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>

339
documentation/layout/settings.html Normal file
View file

@ -0,0 +1,339 @@
<!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 - Settings</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;
}
/* Custom Range Slider Styling */
input[type=range] {
-webkit-appearance: none;
appearance: none;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
cursor: pointer;
margin-top: -8px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: rgba(255, 255, 255, 0.1);
border-radius: 9999px;
}
</style>
<link id="all-fonts-link-font-geist" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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-12 antialiased selection:bg-blue-500/30 text-white font-['Inter'] bg-gray-100 p-8">
<!-- Screen 5: Account Settings -->
<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">
<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="profile.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>
<span class="text-sm font-semibold tracking-tight text-white">Settings</span>
<div class="w-10"></div>
</div>
<div class="flex-1 overflow-y-auto px-4 pb-12 no-scrollbar">
<!-- Search Settings -->
<div class="relative mb-6 mt-2">
<i data-lucide="search" class="absolute left-3 top-2.5 w-4 h-4 text-white/40"></i>
<input type="text" placeholder="Search settings..."
class="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-4 py-2.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-white/20 transition-all placeholder-white/20">
</div>
<!-- Account Section -->
<div class="mb-6">
<h3 class="px-2 mb-2 text-xs font-semibold text-white/40 uppercase tracking-wider">Account</h3>
<div class="bg-white/5 border border-white/10 rounded-2xl overflow-hidden">
<button class="w-full px-4 py-3.5 flex items-center justify-between hover:bg-white/5 transition-colors group">
<div class="flex items-center gap-3">
<div class="p-1.5 bg-blue-500/20 rounded-lg text-blue-400"><i data-lucide="mail" class="w-4 h-4"></i>
</div>
<span class="text-sm font-medium text-white/90">Email</span>
</div>
<div class="flex items-center gap-2">
<span class="text-xs text-white/40">alex@vayv.app</span>
<i data-lucide="chevron-right"
class="w-4 h-4 text-white/20 group-hover:text-white/60 transition-colors"></i>
</div>
</button>
<div class="h-[1px] bg-white/5 w-full ml-12"></div>
<button class="w-full px-4 py-3.5 flex items-center justify-between hover:bg-white/5 transition-colors group">
<div class="flex items-center gap-3">
<div class="p-1.5 bg-green-500/20 rounded-lg text-green-400"><i data-lucide="lock" class="w-4 h-4"></i>
</div>
<span class="text-sm font-medium text-white/90">Password</span>
</div>
<i data-lucide="chevron-right"
class="w-4 h-4 text-white/20 group-hover:text-white/60 transition-colors"></i>
</button>
<div class="h-[1px] bg-white/5 w-full ml-12"></div>
<button class="w-full px-4 py-3.5 flex items-center justify-between hover:bg-white/5 transition-colors group">
<div class="flex items-center gap-3">
<div class="p-1.5 bg-purple-500/20 rounded-lg text-purple-400"><i data-lucide="shield-check"
class="w-4 h-4"></i></div>
<span class="text-sm font-medium text-white/90">Two-Factor Auth</span>
</div>
<div class="flex items-center gap-2">
<span
class="text-[10px] bg-green-500/20 text-green-400 px-2 py-0.5 rounded font-medium border border-green-500/20">Enabled</span>
<i data-lucide="chevron-right"
class="w-4 h-4 text-white/20 group-hover:text-white/60 transition-colors"></i>
</div>
</button>
</div>
</div>
<!-- Billing Section -->
<div class="mb-6">
<h3 class="px-2 mb-2 text-xs font-semibold text-white/40 uppercase tracking-wider">Billing &amp; Plan</h3>
<div class="bg-white/5 border border-white/10 rounded-2xl overflow-hidden">
<button class="w-full px-4 py-3.5 flex items-center justify-between hover:bg-white/5 transition-colors group">
<div class="flex items-center gap-3">
<div class="p-1.5 bg-yellow-500/20 rounded-lg text-yellow-400"><i data-lucide="zap" class="w-4 h-4"></i>
</div>
<span class="text-sm font-medium text-white/90">Plan</span>
</div>
<div class="flex items-center gap-2">
<span class="text-[10px] bg-white text-black px-2 py-0.5 rounded-full font-bold">PRO</span>
<i data-lucide="chevron-right"
class="w-4 h-4 text-white/20 group-hover:text-white/60 transition-colors"></i>
</div>
</button>
<div class="h-[1px] bg-white/5 w-full ml-12"></div>
<button class="w-full px-4 py-3.5 flex items-center justify-between hover:bg-white/5 transition-colors group">
<div class="flex items-center gap-3">
<div class="p-1.5 bg-gray-500/20 rounded-lg text-gray-400"><i data-lucide="credit-card"
class="w-4 h-4"></i></div>
<span class="text-sm font-medium text-white/90">Billing Method</span>
</div>
<div class="flex items-center gap-2">
<span class="text-xs text-white/40">•••• 4242</span>
<i data-lucide="chevron-right"
class="w-4 h-4 text-white/20 group-hover:text-white/60 transition-colors"></i>
</div>
</button>
</div>
</div>
<!-- Preferences -->
<div class="mb-8">
<h3 class="px-2 mb-2 text-xs font-semibold text-white/40 uppercase tracking-wider">Preferences</h3>
<div class="bg-white/5 border border-white/10 rounded-2xl overflow-hidden">
<div class="w-full px-4 py-3.5 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="p-1.5 bg-pink-500/20 rounded-lg text-pink-400"><i data-lucide="bell" class="w-4 h-4"></i>
</div>
<span class="text-sm font-medium text-white/90">Notifications</span>
</div>
<div class="relative inline-block w-10 h-6 align-middle select-none transition duration-200 ease-in">
<input type="checkbox" name="toggle" id="toggle"
class="toggle-checkbox absolute block w-4 h-4 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 top-1 right-5 border-[#333]">
<label for="toggle"
class="toggle-label block overflow-hidden h-6 rounded-full bg-white/10 cursor-pointer"></label>
</div>
</div>
<div class="h-[1px] bg-white/5 w-full ml-12"></div>
<div class="w-full px-4 py-3.5 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="p-1.5 bg-orange-500/20 rounded-lg text-orange-400"><i data-lucide="moon" class="w-4 h-4"></i>
</div>
<span class="text-sm font-medium text-white/90">Dark Mode</span>
</div>
<div class="relative inline-block w-10 h-6 align-middle select-none transition duration-200 ease-in">
<input type="checkbox" name="toggle2" id="toggle2"
class="toggle-checkbox absolute block w-4 h-4 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 right-0 border-[#2563eb]"
checked="">
<label for="toggle2"
class="toggle-label block overflow-hidden h-6 rounded-full bg-[#2563eb] cursor-pointer"></label>
</div>
</div>
</div>
</div>
<!-- Logout -->
<button
class="w-full bg-red-500/10 border border-red-500/20 rounded-2xl py-3.5 flex items-center justify-center gap-2 text-red-400 font-medium hover:bg-red-500/20 transition-colors">
<i data-lucide="log-out" class="w-4 h-4"></i>
Log Out
</button>
<p class="text-center text-[10px] text-white/20 mt-6">Version 2.4.0 (Build 302)</p>
</div>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>

196
documentation/layout/signup.html Normal file
View file

@ -0,0 +1,196 @@
<!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 - Sign Up</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>
<!-- Fonts included similarly to login.html -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</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 2: Registration -->
<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">
<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 class="">9:42</span>
<div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" data-lucide="signal" class="lucide lucide-signal w-3.5 h-3.5">
<path d="M2 20h.01"></path>
<path d="M7 20v-4"></path>
<path d="M12 20v-8"></path>
<path d="M17 20V8"></path>
<path d="M22 4v16"></path>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi"
class="lucide lucide-wifi w-3.5 h-3.5">
<path d="M12 20h.01"></path>
<path d="M2 8.82a15 15 0 0 1 20 0"></path>
<path d="M5 12.859a10 10 0 0 1 14 0"></path>
<path d="M8.5 16.429a5 5 0 0 1 7 0"></path>
</svg>
<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 z-30 pt-3 pr-4 pb-3 pl-4 items-center">
<a href="login.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"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="arrow-left" class="lucide lucide-arrow-left w-6 h-6">
<path d="m12 19-7-7 7-7"></path>
<path d="M19 12H5"></path>
</svg></a>
</div>
<div class="flex-1 overflow-y-auto px-8 pb-8 no-scrollbar">
<div class="mb-8">
<!-- Added Logo based on image provided -->
<img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/32e790c1-060e-4820-bca4-b639b2d815b0_320w.png"
class="w-20 h-auto mb-6 drop-shadow-lg object-cover" alt="VΛYV Logo">
<h1 class="font-['Inter'] text-2xl tracking-tight font-semibold text-white mb-2">Create Account</h1>
<p class="text-white/40 text-sm">Join VΛYV to start capturing your journey.</p>
</div>
<form class="flex flex-col gap-5">
<!-- Names -->
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col gap-2">
<label class="text-xs font-medium text-white/60 ml-1">First Name</label>
<input type="text"
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-1 focus:ring-blue-500 focus:border-blue-500 transition-all font-medium placeholder-white/20">
</div>
<div class="flex flex-col gap-2">
<label class="text-xs font-medium text-white/60 ml-1">Last Name</label>
<input type="text"
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-1 focus:ring-blue-500 focus:border-blue-500 transition-all font-medium placeholder-white/20">
</div>
</div>
<!-- Username (Mandatory) -->
<div class="flex flex-col gap-2">
<label class="text-xs font-medium text-white/60 ml-1">Username <span class="text-blue-400">*</span></label>
<div class="relative">
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none"><span
class="text-white/40 text-sm font-medium">@</span></div>
<input type="text" placeholder="username"
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-8 pr-4 text-sm text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-all placeholder-white/20 font-medium">
</div>
</div>
<!-- Gender & DOB -->
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col gap-2">
<label class="text-xs font-medium text-white/60 ml-1">Gender</label>
<div class="relative">
<select
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-4 pr-8 text-sm text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-all appearance-none font-medium">
<option>Select</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<div class="absolute inset-y-0 right-3 flex items-center pointer-events-none"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="chevron-down" class="lucide lucide-chevron-down w-4 h-4 text-white/40">
<path d="m6 9 6 6 6-6"></path>
</svg></div>
</div>
</div>
<div class="flex flex-col gap-2">
<label class="text-xs font-medium text-white/60 ml-1">Date of Birth</label>
<input type="date"
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-3 text-sm text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-all font-medium text-white/60">
</div>
</div>
<!-- Email (Mandatory) -->
<div class="flex flex-col gap-2">
<label class="text-xs font-medium text-white/60 ml-1">Email <span class="text-blue-400">*</span></label>
<div class="relative">
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="mail" class="lucide lucide-mail w-4 h-4 text-white/40">
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
</svg></div>
<input type="email" placeholder="name@example.com"
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-sm text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-all placeholder-white/20 font-medium">
</div>
</div>
<!-- Password (Mandatory) -->
<div class="flex flex-col gap-2">
<label class="text-xs font-medium text-white/60 ml-1">Password <span class="text-blue-400">*</span></label>
<div class="relative">
<div class="absolute inset-y-0 left-3 flex items-center pointer-events-none"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="lock" class="lucide lucide-lock w-4 h-4 text-white/40">
<rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg></div>
<input type="password" placeholder="Create a strong password"
class="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-sm text-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-all placeholder-white/20 font-medium">
</div>
</div>
<button
class="w-full bg-white text-black font-semibold py-3.5 rounded-xl mt-4 shadow-[0_0_20px_rgba(255,255,255,0.1)] active:scale-[0.98] transition-all hover:bg-gray-100 flex items-center justify-center gap-2">
Create Account
</button>
</form>
<div class="mt-6 text-center">
<p class="text-xs text-white/40 leading-relaxed px-4">By creating an account, you agree to our <a href="#"
class="text-white/60 underline">Terms of Service</a> and <a href="#" class="text-white/60 underline">Privacy
Policy</a>.</p>
</div>
<div class="mt-4 text-center">
<p class="text-xs text-white/40">Already have an account? <a href="login.html"
class="text-white font-medium cursor-pointer hover:underline">Log in</a></p>
</div>
</div>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>

399
documentation/layout/theme.html Normal file
View file

@ -0,0 +1,399 @@
<!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 - Theme Settings</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;
}
/* Custom Range Slider Styling */
input[type=range] {
-webkit-appearance: none;
appearance: none;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
cursor: pointer;
margin-top: -8px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: rgba(255, 255, 255, 0.1);
border-radius: 9999px;
}
</style>
<link id="all-fonts-link-font-geist" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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-12 antialiased selection:bg-blue-500/30 text-white font-['Inter'] bg-gray-100 p-8">
<!-- Screen 6: Theme Settings -->
<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">
<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="profile.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>
<span class="text-sm font-semibold tracking-tight text-white">Theme</span>
<button
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="rotate-ccw" class="w-5 h-5"></i></button>
</div>
<div class="flex-1 overflow-y-auto px-6 pb-12 no-scrollbar">
<!-- Preview Section -->
<div
class="w-full h-40 bg-gradient-to-b from-white/5 to-transparent border border-white/10 rounded-2xl mt-4 mb-8 flex flex-col items-center justify-center relative overflow-hidden group">
<div
class="absolute inset-0 opacity-20 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-500 via-transparent to-transparent transition-colors duration-500">
</div>
<!-- Mini Chart Preview -->
<svg viewBox="0 0 200 100"
class="w-full h-full text-blue-500 fill-none px-4 pt-8 transition-colors duration-300">
<defs>
<linearGradient id="chartGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#3b82f6" stop-opacity="0.5"></stop>
<stop offset="100%" stop-color="#3b82f6" stop-opacity="0"></stop>
</linearGradient>
</defs>
<!-- Main Line -->
<path d="M0,80 C20,80 40,30 60,40 C80,50 100,80 120,60 C140,40 160,20 200,30" class="stroke-current stroke-2"
style="filter: drop-shadow(0px 4px 6px rgba(59, 130, 246, 0.5));"></path>
<!-- Secondary Lines for 'Count' preview -->
<path d="M0,85 C20,85 40,35 60,45 C80,55 100,85 120,65 C140,45 160,25 200,35"
class="stroke-current stroke-[1.5] opacity-50"></path>
<path d="M0,90 C20,90 40,40 60,50 C80,60 100,90 120,70 C140,50 160,30 200,40"
class="stroke-current stroke-1 opacity-20"></path>
<path d="M0,80 C20,80 40,30 60,40 C80,50 100,80 120,60 C140,40 160,20 200,30 V100 H0 Z"
class="stroke-none fill-blue-500/10"></path>
</svg>
<div class="absolute bottom-3 left-4 text-[10px] font-medium text-white/40 uppercase tracking-widest">Preview
</div>
<!-- Floating Thumbnail Preview -->
<div
class="absolute top-6 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-white shadow-lg overflow-hidden border border-white/20">
<img
src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=300&amp;q=80"
class="w-full h-full object-cover">
</div>
</div>
<!-- Background Color Selection -->
<div class="mb-10">
<div class="flex items-baseline justify-between mb-4">
<h3 class="text-xs font-semibold text-white/90 tracking-tight">Background Color</h3>
<span class="text-[10px] text-white/40">10 presets</span>
</div>
<div class="grid grid-cols-5 gap-3">
<button
class="group relative aspect-square rounded-xl bg-[#09090b] border-2 border-white/20 hover:border-white/40 transition-all ring-2 ring-white ring-offset-2 ring-offset-[#09090b] shadow-lg">
<div class="absolute inset-0 flex items-center justify-center opacity-100 transition-opacity">
<i data-lucide="check" class="w-3.5 h-3.5 text-white"></i>
</div>
</button>
<button
class="relative aspect-square rounded-xl bg-[#0f172a] border border-white/10 hover:scale-105 transition-all"></button>
<button
class="relative aspect-square rounded-xl bg-[#171717] border border-white/10 hover:scale-105 transition-all"></button>
<button
class="relative aspect-square rounded-xl bg-[#18181b] border border-white/10 hover:scale-105 transition-all"></button>
<button
class="relative aspect-square rounded-xl bg-[#172554] border border-white/10 hover:scale-105 transition-all"></button>
<button
class="relative aspect-square rounded-xl bg-[#1e1b4b] border border-white/10 hover:scale-105 transition-all"></button>
<button
class="relative aspect-square rounded-xl bg-[#2e1065] border border-white/10 hover:scale-105 transition-all"></button>
<button
class="relative aspect-square rounded-xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 border border-white/10 hover:scale-105 transition-all"></button>
<button
class="relative aspect-square rounded-xl bg-gradient-to-br from-cyan-500 via-blue-500 to-emerald-500 border border-white/10 hover:scale-105 transition-all"></button>
<button
class="relative aspect-square rounded-xl bg-gradient-to-br from-rose-500 via-orange-500 to-amber-500 border border-white/10 hover:scale-105 transition-all"></button>
</div>
</div>
<!-- Wave & Appearance Settings -->
<div class="space-y-4">
<div class="flex items-center justify-between">
<h3 class="text-xs font-semibold text-white/90 tracking-tight">Wave &amp; Appearance</h3>
<button class="text-[10px] text-blue-400 font-medium hover:text-blue-300">Reset</button>
</div>
<div class="bg-white/5 border border-white/10 rounded-2xl p-5 space-y-6">
<!-- Wave Color Selection -->
<div>
<label class="text-xs font-medium text-white/60 block mb-3">Wave Color</label>
<div class="grid grid-cols-10 gap-2">
<button
class="w-5 h-5 rounded-full bg-blue-500 ring-2 ring-white ring-offset-2 ring-offset-[#09090b] cursor-pointer"></button>
<button
class="w-5 h-5 rounded-full bg-purple-500 hover:ring-2 hover:ring-white/20 hover:ring-offset-2 hover:ring-offset-[#09090b] transition-all cursor-pointer"></button>
<button
class="w-5 h-5 rounded-full bg-emerald-400 hover:ring-2 hover:ring-white/20 hover:ring-offset-2 hover:ring-offset-[#09090b] transition-all cursor-pointer"></button>
<button
class="w-5 h-5 rounded-full bg-rose-500 hover:ring-2 hover:ring-white/20 hover:ring-offset-2 hover:ring-offset-[#09090b] transition-all cursor-pointer"></button>
<button
class="w-5 h-5 rounded-full bg-white hover:ring-2 hover:ring-white/20 hover:ring-offset-2 hover:ring-offset-[#09090b] transition-all cursor-pointer"></button>
<button
class="w-5 h-5 rounded-full bg-amber-400 hover:ring-2 hover:ring-white/20 hover:ring-offset-2 hover:ring-offset-[#09090b] transition-all cursor-pointer"></button>
<button
class="w-5 h-5 rounded-full bg-cyan-400 hover:ring-2 hover:ring-white/20 hover:ring-offset-2 hover:ring-offset-[#09090b] transition-all cursor-pointer"></button>
<button
class="w-5 h-5 rounded-full bg-lime-400 hover:ring-2 hover:ring-white/20 hover:ring-offset-2 hover:ring-offset-[#09090b] transition-all cursor-pointer"></button>
<button
class="w-5 h-5 rounded-full bg-fuchsia-500 hover:ring-2 hover:ring-white/20 hover:ring-offset-2 hover:ring-offset-[#09090b] transition-all cursor-pointer"></button>
<button
class="w-5 h-5 rounded-full bg-orange-500 hover:ring-2 hover:ring-white/20 hover:ring-offset-2 hover:ring-offset-[#09090b] transition-all cursor-pointer"></button>
</div>
</div>
<div class="h-[1px] bg-white/5 w-full"></div>
<!-- Thumbnail Image Radius -->
<div>
<div class="flex justify-between items-center mb-3">
<label class="text-xs font-medium text-white/60">Thumbnail Radius</label>
<span class="text-xs font-mono text-white">50%</span>
</div>
<div class="flex items-center gap-4">
<i data-lucide="square" class="w-4 h-4 text-white/20"></i>
<div class="relative w-full h-6 flex items-center">
<input type="range" min="0" max="100" value="50"
class="w-full h-1 bg-white/10 rounded-lg appearance-none cursor-pointer z-20">
<div class="absolute left-0 top-1/2 -translate-y-1/2 h-1 bg-blue-500 rounded-l-lg pointer-events-none"
style="width: 50%"></div>
</div>
<i data-lucide="circle" class="w-4 h-4 text-white/80"></i>
</div>
</div>
<div class="h-[1px] bg-white/5 w-full"></div>
<!-- Curvyness -->
<div>
<div class="flex justify-between items-center mb-3">
<label class="text-xs font-medium text-white/60">Curvyness</label>
<span class="text-xs font-mono text-white">75%</span>
</div>
<div class="flex items-center gap-4">
<i data-lucide="activity" class="w-4 h-4 text-white/20"></i>
<div class="relative w-full h-6 flex items-center">
<input type="range" min="0" max="100" value="75"
class="w-full h-1 bg-white/10 rounded-lg appearance-none cursor-pointer z-20">
<div class="absolute left-0 top-1/2 -translate-y-1/2 h-1 bg-blue-500 rounded-l-lg pointer-events-none"
style="width: 75%"></div>
</div>
<i data-lucide="waves" class="w-4 h-4 text-white/80"></i>
</div>
</div>
<!-- Line Count -->
<div>
<div class="flex justify-between items-center mb-3">
<label class="text-xs font-medium text-white/60">Count of Lines</label>
<span class="text-xs font-mono text-white">3</span>
</div>
<div class="flex items-center gap-4">
<span class="text-xs font-medium text-white/20 w-4 text-center">1</span>
<div class="relative w-full h-6 flex items-center">
<input type="range" min="1" max="10" value="3"
class="w-full h-1 bg-white/10 rounded-lg appearance-none cursor-pointer z-20">
<div class="absolute left-0 top-1/2 -translate-y-1/2 h-1 bg-blue-500 rounded-l-lg pointer-events-none"
style="width: 30%"></div>
</div>
<span class="text-xs font-medium text-white/80 w-4 text-center">10</span>
</div>
</div>
</div>
<!-- Show Grid Lines Toggle -->
<div class="bg-white/5 border border-white/10 rounded-2xl p-5 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="p-2 bg-white/5 rounded-lg text-white/80"><i data-lucide="grid" class="w-4 h-4"></i></div>
<span class="text-xs font-medium text-white/80">Show Grid Lines</span>
</div>
<div class="relative inline-block w-10 h-6 align-middle select-none transition duration-200 ease-in">
<input type="checkbox" name="toggle3" id="toggle3"
class="toggle-checkbox absolute block w-4 h-4 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 top-1 right-5 border-[#333]">
<label for="toggle3"
class="toggle-label block overflow-hidden h-6 rounded-full bg-white/10 cursor-pointer"></label>
</div>
</div>
</div>
</div>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>