399 lines
No EOL
19 KiB
HTML
399 lines
No EOL
19 KiB
HTML
<!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&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 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&auto=format&fit=crop&w=300&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 & 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> |