296 lines
No EOL
16 KiB
HTML
296 lines
No EOL
16 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 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&family=Inter:wght@300;400;500;600&display=swap"
|
|
rel="stylesheet">
|
|
<style>
|
|
.bg-app-gradient {
|
|
background: linear-gradient(180deg, #2e1065 0%, #2563eb 45%, #86efac 100%);
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
<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-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> |