196 lines
No EOL
10 KiB
HTML
196 lines
No EOL
10 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 - 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&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>
|
|
<!-- 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> |