Spaces:
Running
Running
File size: 8,042 Bytes
2d60dbf | 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 | <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up | CodeForge-AI</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: '#ef4444',
secondary: '#6b7280'
}
}
}
}
</script>
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center">
<div class="max-w-md w-full mx-4">
<!-- Logo -->
<div class="text-center mb-8">
<div class="flex items-center justify-center space-x-2 mb-4">
<div class="w-10 h-10 bg-red-500 rounded-lg flex items-center justify-center">
<i data-feather="code" class="w-6 h-6"></i>
</div>
<span class="text-2xl font-bold text-white">CodeForge-AI</span>
</div>
<h1 class="text-3xl font-bold text-white mb-2">Create Account</h1>
<p class="text-gray-400">Start your development journey with us</p>
</div>
<!-- Register Form -->
<div class="bg-gray-800 rounded-2xl p-8 border border-red-500/20">
<form id="registerForm">
<div class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div>
<label for="firstName" class="block text-sm font-medium text-gray-300 mb-2">First Name</label>
<input
type="text"
id="firstName"
name="firstName"
required
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors"
placeholder="John"
>
</div>
<div>
<label for="lastName" class="block text-sm font-medium text-gray-300 mb-2">Last Name</label>
<input
type="text"
id="lastName"
name="lastName"
required
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors"
placeholder="Doe"
>
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-300 mb-2">Email Address</label>
<input
type="email"
id="email"
name="email"
required
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors"
placeholder="john@example.com"
>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-300 mb-2">Password</label>
<input
type="password"
id="password"
name="password"
required
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors"
placeholder="Create a password"
>
</div>
<div>
<label for="confirmPassword" class="block text-sm font-medium text-gray-300 mb-2">Confirm Password</label>
<input
type="password"
id="confirmPassword"
name="confirmPassword"
required
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-colors"
placeholder="Confirm your password"
>
</div>
<div class="flex items-center">
<input
type="checkbox"
id="terms"
required
class="rounded bg-gray-700 border-gray-600 text-red-500 focus:ring-red-500"
>
<label for="terms" class="ml-2 text-sm text-gray-300">
I agree to the <a href="#" class="text-red-400 hover:text-red-300 transition-colors">Terms of Service</a> and <a href="#" class="text-red-400 hover:text-red-300 transition-colors">Privacy Policy</a>
</label>
</div>
<button
type="submit"
class="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-xl font-semibold transition-colors transform hover:scale-105"
>
Create Account
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-gray-400">
Already have an account?
<a href="login.html" class="text-red-400 hover:text-red-300 transition-colors font-semibold">Sign in</a>
</p>
</div>
<div class="mt-6 pt-6 border-t border-gray-700">
<button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-3 rounded-xl font-semibold transition-colors flex items-center justify-center">
<i data-feather="github" class="w-5 h-5 mr-2"></i>
Continue with GitHub
</button>
</div>
</div>
</div>
<script>
// Initialize Feather Icons
feather.replace();
// Handle register form submission
document.getElementById('registerForm').addEventListener('submit', function(e) {
e.preventDefault();
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;
// Check if passwords match
if (password !== confirmPassword) {
alert('Passwords do not match!');
return;
}
// Store user session (in a real app, this would be handled by a backend)
const email = document.getElementById('email').value;
localStorage.setItem('userEmail', email);
localStorage.setItem('userLoggedIn', 'true');
// Redirect to workspaces page
window.location.href = 'workspaces.html';
});
</script>
</body>
</html> |