Spaces:
Running
Running
File size: 10,162 Bytes
820fd96 15fe46e 820fd96 15fe46e 820fd96 15fe46e 820fd96 15fe46e 820fd96 15fe46e 820fd96 15fe46e 820fd96 | 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - DeliveryPal</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#FF6B35',
secondary: '#6E0D88',
}
}
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<style>
.auth-bg {
background-image: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('http://static.photos/technology/1200x630/12');
}
.google-btn {
transition: all 0.3s ease;
}
.google-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="font-sans bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="truck" class="text-primary h-8 w-8"></i>
<span class="ml-2 text-xl font-bold text-primary">DeliveryPal</span>
</div>
</div>
<div class="flex items-center">
<a href="login.html" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Already have an account? Login</a>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="min-h-screen flex items-center justify-center auth-bg bg-cover bg-center">
<div class="max-w-md w-full bg-white rounded-lg shadow-md overflow-hidden">
<div class="p-8">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-gray-900">Create an Account</h2>
<p class="text-gray-600 mt-2">Join DeliveryPal to start sending or delivering packages</p>
</div>
<!-- Google Sign-In -->
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com"
data-callback="handleCredentialResponse"
data-auto_prompt="false">
</div>
<div class="g_id_signin mb-6"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left"
data-width="300">
</div>
<div class="mb-6">
<button class="google-btn w-full flex items-center justify-center border border-gray-300 rounded-md py-2 px-4 text-gray-700 hover:border-primary hover:text-primary transition">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google logo" class="h-5 w-5 mr-2">
<span>Continue with Google</span>
</button>
</div>
<div class="flex items-center my-6">
<div class="flex-grow border-t border-gray-300"></div>
<span class="mx-4 text-gray-500">or</span>
<div class="flex-grow border-t border-gray-300"></div>
</div>
<!-- Registration Form -->
<form class="space-y-6" id="registrationForm">
<div class="grid grid-cols-2 gap-4">
<div>
<label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
<input type="text" id="first-name" name="first-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
<input type="text" id="last-name" name="last-name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
<input type="tel" id="phone" name="phone" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
<input type="password" id="password" name="password" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div class="flex items-center">
<input type="checkbox" id="terms" name="terms" required class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="terms" class="ml-2 block text-sm text-gray-700">
I agree to the <a href="#" class="text-primary hover:underline">Terms of Service</a> and <a href="#" class="text-primary hover:underline">Privacy Policy</a>
</label>
</div>
<div>
<button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
Create Account
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600">
Already have an account? <a href="login.html" class="text-primary font-medium hover:underline">Sign in</a>
</p>
</div>
</div>
<div class="bg-gray-50 px-8 py-4">
<div class="text-center text-sm text-gray-500">
<p>By continuing, you agree to our Terms of Service and Privacy Policy.</p>
</div>
</div>
</div>
</div>
<script>
feather.replace();
// Initialize Google Sign-In
window.onload = function() {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.querySelector(".g_id_signin"),
{ theme: "outline", size: "large" }
);
};
function handleCredentialResponse(response) {
// Handle Google Sign-In response
console.log("Google Sign-In successful");
console.log("JWT Token: " + response.credential);
// Here you would typically send the credential to your backend
// for verification and user creation
// For now, we'll just redirect to a success page
window.location.href = "index.html";
}
// Handle form submission
document.getElementById('registrationForm').addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
const formData = new FormData(this);
const userData = {
firstName: formData.get('first-name'),
lastName: formData.get('last-name'),
email: formData.get('email'),
phone: formData.get('phone'),
password: formData.get('password')
};
// Simple validation
if (userData.password !== formData.get('confirm-password')) {
alert('Passwords do not match!');
return;
}
// Here you would typically send the data to your backend
console.log('User data:', userData);
// For demonstration, show success message and redirect
alert('Registration successful! Redirecting to login...');
window.location.href = 'login.html';
});
</script>
</body>
</html>
|