add splitted layouts
This commit is contained in:
Tilman Behrend
parent
9fe2bcade3
commit
f01a0a967f
12 changed files with 2909 additions and 0 deletions
339
documentation/layout/settings.html
Normal file
339
documentation/layout/settings.html
Normal 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&family=Inter:wght@300;400;500;600&display=swap"
|
||||
rel="stylesheet">
|
||||
<style>
|
||||
.bg-app-gradient {
|
||||
background: linear-gradient(180deg, #2e1065 0%, #2563eb 45%, #86efac 100%);
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* 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&display=swap">
|
||||
<style id="all-fonts-style-font-geist">
|
||||
.font-geist {
|
||||
font-family: 'Geist', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-roboto" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-roboto">
|
||||
.font-roboto {
|
||||
font-family: 'Roboto', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-montserrat" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-montserrat">
|
||||
.font-montserrat {
|
||||
font-family: 'Montserrat', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-poppins" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-poppins">
|
||||
.font-poppins {
|
||||
font-family: 'Poppins', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-playfair" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap">
|
||||
<style id="all-fonts-style-font-playfair">
|
||||
.font-playfair {
|
||||
font-family: 'Playfair Display', serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-instrument-serif" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-instrument-serif">
|
||||
.font-instrument-serif {
|
||||
font-family: 'Instrument Serif', serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-merriweather" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap">
|
||||
<style id="all-fonts-style-font-merriweather">
|
||||
.font-merriweather {
|
||||
font-family: 'Merriweather', serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-bricolage" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-bricolage">
|
||||
.font-bricolage {
|
||||
font-family: 'Bricolage Grotesque', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-jakarta" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap">
|
||||
<style id="all-fonts-style-font-jakarta">
|
||||
.font-jakarta {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-manrope" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap">
|
||||
<style id="all-fonts-style-font-manrope">
|
||||
.font-manrope {
|
||||
font-family: 'Manrope', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-space-grotesk" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-space-grotesk">
|
||||
.font-space-grotesk {
|
||||
font-family: 'Space Grotesk', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-work-sans" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap">
|
||||
<style id="all-fonts-style-font-work-sans">
|
||||
.font-work-sans {
|
||||
font-family: 'Work Sans', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-pt-serif" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap">
|
||||
<style id="all-fonts-style-font-pt-serif">
|
||||
.font-pt-serif {
|
||||
font-family: 'PT Serif', serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-geist-mono" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-geist-mono">
|
||||
.font-geist-mono {
|
||||
font-family: 'Geist Mono', monospace !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-space-mono" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap">
|
||||
<style id="all-fonts-style-font-space-mono">
|
||||
.font-space-mono {
|
||||
font-family: 'Space Mono', monospace !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-quicksand" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-quicksand">
|
||||
.font-quicksand {
|
||||
font-family: 'Quicksand', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-nunito" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap">
|
||||
<style id="all-fonts-style-font-nunito">
|
||||
.font-nunito {
|
||||
font-family: 'Nunito', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="flex flex-wrap items-center justify-center min-h-screen gap-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 & 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue