Spaces:

Jaafarsa
/

undefined

Running

App Files Files Community

Jaafarsa commited on 21 days ago

Commit

d862b60

verified ·

1 Parent(s): d6d532d

🐳 07/02 - 14:58 - register.html is not working, also the style not fix - please update on the file - thanks

Browse files

Files changed (2) hide show

register.html +49 -21
style.css +88 -18

@@ -6,6 +6,21 @@
     <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>
     <style>
         .gradient-text {
             background: linear-gradient(90deg, #d946ef 0%, #a855f7 100%);
@@ -13,10 +28,16 @@
             background-clip: text;
             color: transparent;
         }
     </style>
 </head>
-<body class="bg-gray-900 text-gray-100 min-h-screen">
-    <div class="max-w-md 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>
@@ -30,42 +51,42 @@
                     <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">
                     </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">
                     </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">
                 </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">
                 </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">
                 </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">
                         <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" class="w-full bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-4 rounded-lg transition">
                         Create Account
                     </button>
                 </div>
@@ -78,26 +99,33 @@
     </div>
     <script>
         feather.replace();
         document.getElementById('registerForm').addEventListener('submit', async function(e) {
             e.preventDefault();
-            const firstName = document.getElementById('firstName').value;
-            const lastName = document.getElementById('lastName').value;
-            const email = document.getElementById('email').value;
             const password = document.getElementById('password').value;
             const confirmPassword = document.getElementById('confirmPassword').value;
             if (password !== confirmPassword) {
                 alert('Passwords do not match!');
                 return;
             }
-            const submitBtn = this.querySelector('button[type="submit"]');
             submitBtn.disabled = true;
-            submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin w-5 h-5"></i> Creating account...';
-            feather.replace();
             try {
                 // Simulate API call
@@ -108,20 +136,20 @@
                     firstName,
                     lastName,
                     email,
-                    password,
-                    role: 'buyer', // Default role
                     createdAt: new Date().toISOString()
                 };
                 localStorage.setItem('currentUser', JSON.stringify(user));
-                // Redirect to profile setup
-                window.location.href = 'profile-setup.html';
             } catch (error) {
                 alert('Registration failed: ' + error.message);
-            } finally {
                 submitBtn.disabled = false;
                 submitBtn.innerHTML = 'Create Account';
-                feather.replace();
             }
         });
     </script>

     <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%);
             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>
                         <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>
     <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
                     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>

style.css CHANGED Viewed

@@ -1,28 +1,98 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* YourHand.co - Global Styles */
+/* Base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    line-height: 1.6;
+}
+/* Gradient text utility */
+.gradient-text {
+    background: linear-gradient(90deg, #d946ef 0%, #a855f7 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+/* Card hover effect */
+.card-hover {
+    transition: all 0.3s ease;
+}
+.card-hover:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 25px 50px -12px rgba(216, 70, 239, 0.25);
+}
+/* Custom scrollbar for dark theme */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+}
+/* Animation keyframes */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.animate-fade-in {
+    animation: fadeIn 0.3s ease-out;
+}
+/* Form focus styles */
+input:focus,
+textarea:focus,
+select:focus {
+    outline: none;
 }
+/* Button disabled state */
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
 }
+/* Image loading placeholder */
+img {
+    background-color: #374151;
 }
+/* Live indicator pulse */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
 }
+.live-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }