Hugging Face's logo

Spaces:
Jaafarsa
/
undefined
Running

App Files Community
undefined
File size: 7,573 Bytes
ab6d371
 
 
 
 
d6d532d
ab6d371
 
d862b60
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ab6d371
 
 
 
 
 
 
d862b60
 
 
 
 
 
ab6d371
 
d862b60
 
d6d532d
 
 
ab6d371
 
 
d6d532d
ab6d371
d6d532d
ab6d371
 
 
d6d532d
d862b60
ab6d371
 
 
d6d532d
d862b60
ab6d371
 
d6d532d
ab6d371
 
d6d532d
d862b60
ab6d371
d6d532d
ab6d371
 
d6d532d
d862b60
ab6d371
d6d532d
ab6d371
 
d6d532d
d862b60
ab6d371
af99098
d6d532d
 
d862b60
d6d532d
 
 
af99098
d6d532d
d862b60
ab6d371
 
 
d6d532d
 
 
ab6d371
 
 
d6d532d
ab6d371
 
d862b60
ab6d371
af99098
d6d532d
ab6d371
d6d532d
d862b60
 
 
ab6d371
 
d6d532d
d862b60
ab6d371
 
d862b60
ab6d371
 
d6d532d
d862b60
 
 
 
 
 
d6d532d
d862b60
d6d532d
 
 
 
 
 
 
 
 
 
d862b60
d6d532d
 
 
 
d862b60
 
 
 
 
d6d532d
 
 
 
 
ab6d371
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register - YourHand.co</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            500: '#d946ef',
                            600: '#c026d3',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-text {
            background: linear-gradient(90deg, #d946ef 0%, #a855f7 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .animate-spin {
            animation: spin 1s linear infinite;
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center">
    <div class="max-w-md w-full mx-auto py-12 px-4">
        <div class="flex items-center justify-center mb-8">
            <i data-feather="hand" class="text-primary-500 w-8 h-8"></i>
            <span class="text-2xl font-bold gradient-text ml-2">YourHand.co</span>
        </div>

        <div class="bg-gray-800 rounded-xl p-8 shadow-lg">
            <h1 class="text-2xl font-bold text-center mb-6">Create Your Account</h1>
            
            <form id="registerForm" class="space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="firstName" class="block text-sm font-medium mb-1">First Name</label>
                        <input type="text" id="firstName" required 
                            class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 text-white">
                    </div>
                    <div>
                        <label for="lastName" class="block text-sm font-medium mb-1">Last Name</label>
                        <input type="text" id="lastName" required 
                            class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 text-white">
                    </div>
                </div>

                <div>
                    <label for="email" class="block text-sm font-medium mb-1">Email</label>
                    <input type="email" id="email" required 
                        class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 text-white">
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium mb-1">Password</label>
                    <input type="password" id="password" required minlength="8"
                        class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 text-white">
                </div>

                <div>
                    <label for="confirmPassword" class="block text-sm font-medium mb-1">Confirm Password</label>
                    <input type="password" id="confirmPassword" required minlength="8"
                        class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 text-white">
                </div>

                <div class="pt-2">
                    <label class="flex items-center">
                        <input type="checkbox" required class="rounded bg-gray-700 border-gray-600 text-primary-500 focus:ring-primary-500 w-4 h-4">
                        <span class="ml-2 text-sm">I agree to the <a href="#" class="text-primary-500 hover:underline">Terms & Conditions</a></span>
                    </label>
                </div>

                <div class="pt-2">
                    <button type="submit" id="submitBtn" class="w-full bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-4 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed">
                        Create Account
                    </button>
                </div>

                <div class="text-center text-sm pt-2">
                    <p>Already have an account? <a href="login.html" class="text-primary-500 hover:underline">Log in</a></p>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Initialize feather icons
        feather.replace();

        document.getElementById('registerForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            const firstName = document.getElementById('firstName').value.trim();
            const lastName = document.getElementById('lastName').value.trim();
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;

            // Validation
            if (password !== confirmPassword) {
                alert('Passwords do not match!');
                document.getElementById('confirmPassword').focus();
                return;
            }

            if (password.length < 8) {
                alert('Password must be at least 8 characters long!');
                return;
            }

            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin inline mr-2"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg> Creating account...';

            try {
                // Simulate API call
                await new Promise(resolve => setTimeout(resolve, 1500));
                
                // Store user data in localStorage
                const user = {
                    firstName,
                    lastName,
                    email,
                    role: 'buyer',
                    createdAt: new Date().toISOString()
                };
                localStorage.setItem('currentUser', JSON.stringify(user));
                
                // Show success message
                alert('Account created successfully!');
                
                // Redirect to profile settings (profile-setup.html doesn't exist, use profile-settings.html)
                window.location.href = 'profile-settings.html';
            } catch (error) {
                alert('Registration failed: ' + error.message);
                submitBtn.disabled = false;
                submitBtn.innerHTML = 'Create Account';
            }
        });
    </script>
</body>
</html>