File size: 8,203 Bytes
efb14ad |
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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - Sally</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
}
.register-card {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="font-sans antialiased gradient-bg 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 p-10 bg-white rounded-xl register-card">
<div class="text-center">
<div class="flex justify-center">
<i data-feather="message-circle" class="text-purple-600 h-10 w-10"></i>
</div>
<h2 class="mt-6 text-3xl font-extrabold text-gray-900">
Create a new account
</h2>
<p class="mt-2 text-sm text-gray-600">
Or <a href="/login.html" class="font-medium text-purple-600 hover:text-purple-500">sign in to your existing account</a>
</p>
</div>
<form class="mt-8 space-y-6" action="#" method="POST">
<div class="rounded-md shadow-sm space-y-4">
<div>
<label for="full-name" class="sr-only">Full name</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i data-feather="user" class="h-5 w-5 text-gray-400"></i>
</div>
<input id="full-name" name="name" type="text" autocomplete="name" required class="appearance-none block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md placeholder-gray-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm" placeholder="Full name">
</div>
</div>
<div>
<label for="email-address" class="sr-only">Email address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i data-feather="mail" class="h-5 w-5 text-gray-400"></i>
</div>
<input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md placeholder-gray-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm" placeholder="Email address">
</div>
</div>
<div>
<label for="password" class="sr-only">Password</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i data-feather="lock" class="h-5 w-5 text-gray-400"></i>
</div>
<input id="password" name="password" type="password" autocomplete="new-password" required class="appearance-none block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md placeholder-gray-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm" placeholder="Password">
<div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePassword('password')">
<i data-feather="eye" class="h-5 w-5 text-gray-400" id="toggle-icon-password"></i>
</div>
</div>
<p class="mt-1 text-xs text-gray-500">Must be at least 8 characters long</p>
</div>
<div>
<label for="confirm-password" class="sr-only">Confirm Password</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i data-feather="lock" class="h-5 w-5 text-gray-400"></i>
</div>
<input id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required class="appearance-none block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-md placeholder-gray-500 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm" placeholder="Confirm Password">
<div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePassword('confirm-password')">
<i data-feather="eye" class="h-5 w-5 text-gray-400" id="toggle-icon-confirm"></i>
</div>
</div>
</div>
</div>
<div class="flex items-center">
<input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" required>
<label for="terms" class="ml-2 block text-sm text-gray-900">
I agree to the <a href="#" class="font-medium text-purple-600 hover:text-purple-500">Terms of Service</a> and <a href="#" class="font-medium text-purple-600 hover:text-purple-500">Privacy Policy</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-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
<i data-feather="user-plus" class="h-5 w-5 text-purple-300 group-hover:text-purple-200"></i>
</span>
Create account
</button>
</div>
<div class="relative mt-6">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">
Or sign up with
</span>
</div>
</div>
<div class="grid grid-cols-2 gap-3 mt-6">
<button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<i data-feather="github" class="h-5 w-5"></i>
<span class="ml-2">GitHub</span>
</button>
<button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<i data-feather="google" class="h-5 w-5"></i>
<span class="ml-2">Google</span>
</button>
</div>
</form>
</div>
<script>
function togglePassword(id) {
const input = document.getElementById(id);
const toggleIcon = document.getElementById(`toggle-icon-${id}`);
if (input.type === 'password') {
input.type = 'text';
toggleIcon.setAttribute('data-feather', 'eye-off');
} else {
input.type = 'password';
toggleIcon.setAttribute('data-feather', 'eye');
}
feather.replace();
}
feather.replace();
</script>
</body>
</html>
|