Spaces:
Running
Running
File size: 5,977 Bytes
625a56c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - TechBazaar.pk</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
500: '#8B5CF6',
},
secondary: {
500: '#10B981',
},
dark: {
900: '#0F172A',
800: '#1E293B',
700: '#334155',
}
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #0F172A;
color: #F1F5F9;
}
.form-input {
background-color: #1E293B;
border: 1px solid #334155;
}
.form-input:focus {
border-color: #8B5CF6;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}
</style>
</head>
<body class="bg-dark-900">
<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<div>
<div class="mx-auto h-12 w-12 rounded-full bg-primary-500 flex items-center justify-center">
<i data-feather="user-plus" class="text-white"></i>
</div>
<h2 class="mt-6 text-center text-3xl font-extrabold">
Create your account
</h2>
<p class="mt-2 text-center text-sm text-slate-400">
Or
<a href="login.html" class="font-medium text-primary-500 hover:text-primary-400">
sign in to your account
</a>
</p>
</div>
<form class="mt-8 space-y-6" action="#" method="POST">
<div class="rounded-md shadow-sm -space-y-px">
<div>
<label for="full-name" class="sr-only">Full Name</label>
<input id="full-name" name="full-name" type="text" required class="form-input appearance-none rounded-none relative block w-full px-3 py-3 border placeholder-slate-500 text-white rounded-t-md focus:outline-none focus:z-10 sm:text-sm" placeholder="Full Name">
</div>
<div>
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="form-input appearance-none rounded-none relative block w-full px-3 py-3 border placeholder-slate-500 text-white focus:outline-none focus:z-10 sm:text-sm" placeholder="Email address">
</div>
<div>
<label for="phone" class="sr-only">Phone Number</label>
<input id="phone" name="phone" type="tel" required class="form-input appearance-none rounded-none relative block w-full px-3 py-3 border placeholder-slate-500 text-white focus:outline-none focus:z-10 sm:text-sm" placeholder="Phone Number">
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input id="password" name="password" type="password" autocomplete="new-password" required class="form-input appearance-none rounded-none relative block w-full px-3 py-3 border placeholder-slate-500 text-white focus:outline-none focus:z-10 sm:text-sm" placeholder="Password">
</div>
<div>
<label for="password-confirm" class="sr-only">Confirm Password</label>
<input id="password-confirm" name="password-confirm" type="password" autocomplete="new-password" required class="form-input appearance-none rounded-none relative block w-full px-3 py-3 border placeholder-slate-500 text-white rounded-b-md focus:outline-none focus:z-10 sm:text-sm" placeholder="Confirm Password">
</div>
</div>
<div class="flex items-center">
<input id="terms" name="terms" type="checkbox" required class="h-4 w-4 text-primary-500 focus:ring-primary-500 border-gray-300 rounded">
<label for="terms" class="ml-2 block text-sm text-slate-400">
I agree to the <a href="#" class="text-primary-500 hover:text-primary-400">Terms and Conditions</a>
</label>
</div>
<div>
<button type="submit" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
<i data-feather="user" class="h-5 w-5 text-primary-300 group-hover:text-primary-200"></i>
</span>
Create Account
</button>
</div>
</form>
</div>
</div>
<script>
feather.replace();
</script>
</body>
</html>
|