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

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>