Spaces:

Jaafarsa
/

undefined

Running

App Files Files Community

Jaafarsa commited on Oct 10, 2025

Commit

d6d532d

verified ·

1 Parent(s): 628c3ee

let the buyer and seller make their account, and add setting to their profile

Browse files

Files changed (4) hide show

index.html +2 -2
profile-settings.html +226 -0
register.html +63 -107
seller-dashboard.html +15 -7

index.html CHANGED Viewed

@@ -73,7 +73,7 @@
                     <i data-feather="moon" class="w-5 h-5"></i>
                 </button>
                 <a href="register.html" class="hidden md:block bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition">
-                    Sign Up
                 </a>
 <button class="md:hidden p-2 rounded-full hover:bg-gray-700 transition">
                     <i data-feather="menu" class="w-5 h-5"></i>
@@ -811,7 +811,7 @@
                 <a href="#" class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105">
                     Shop Now
                 </a>
-                <a href="login.html" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105">
                     Become a Seller
 </a>
             </div>

                     <i data-feather="moon" class="w-5 h-5"></i>
                 </button>
                 <a href="register.html" class="hidden md:block bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition">
+                    Register
                 </a>
 <button class="md:hidden p-2 rounded-full hover:bg-gray-700 transition">
                     <i data-feather="menu" class="w-5 h-5"></i>
                 <a href="#" class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105">
                     Shop Now
                 </a>
+                <a href="register.html?role=seller" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105">
                     Become a Seller
 </a>
             </div>

profile-settings.html ADDED Viewed

	@@ -0,0 +1,226 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile Settings - 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%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <nav class="bg-gray-800 border-b border-gray-700 px-4 py-3">
+        <div class="max-w-7xl mx-auto flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+                <i data-feather="hand" class="text-primary-500 w-8 h-8"></i>
+                <span class="text-2xl font-bold gradient-text">YourHand.co</span>
+            </div>
+            <div class="flex items-center space-x-4">
+                <a href="index.html" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition">
+                    Back to Home
+                </a>
+            </div>
+        </div>
+    </nav>
+    <div class="max-w-4xl mx-auto px-4 py-8">
+        <div class="flex flex-col md:flex-row gap-8">
+            <!-- Sidebar -->
+            <div class="w-full md:w-64 bg-gray-800 rounded-xl p-6">
+                <div class="flex flex-col items-center mb-8">
+                    <div class="relative">
+                        <div class="w-24 h-24 rounded-full bg-gray-700 overflow-hidden mb-4">
+                            <img id="profileImage" src="http://static.photos/people/200x200/10" alt="Profile" class="w-full h-full object-cover">
+                        </div>
+                        <button id="changePhotoBtn" class="absolute bottom-0 right-0 bg-primary-500 rounded-full p-2 hover:bg-primary-600 transition">
+                            <i data-feather="camera" class="w-4 h-4"></i>
+                        </button>
+                        <input type="file" id="profilePhotoUpload" accept="image/*" class="hidden">
+                    </div>
+                    <h3 id="userName" class="text-xl font-bold text-center">John Doe</h3>
+                    <p id="userRole" class="text-sm text-gray-400">Buyer</p>
+                </div>
+                <nav class="space-y-1">
+                    <a href="profile-settings.html" class="flex items-center space-x-3 px-3 py-2 bg-gray-700 rounded-lg text-primary-500">
+                        <i data-feather="user" class="w-5 h-5"></i>
+                        <span>Profile</span>
+                    </a>
+                    <a href="account-settings.html" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition">
+                        <i data-feather="settings" class="w-5 h-5"></i>
+                        <span>Account</span>
+                    </a>
+                    <a href="privacy-settings.html" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition">
+                        <i data-feather="lock" class="w-5 h-5"></i>
+                        <span>Privacy</span>
+                    </a>
+                    <a href="notifications-settings.html" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition">
+                        <i data-feather="bell" class="w-5 h-5"></i>
+                        <span>Notifications</span>
+                    </a>
+                    <a href="payment-settings.html" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition">
+                        <i data-feather="credit-card" class="w-5 h-5"></i>
+                        <span>Payments</span>
+                    </a>
+                </nav>
+            </div>
+            <!-- Main Content -->
+            <div class="flex-1 bg-gray-800 rounded-xl p-8">
+                <h2 class="text-2xl font-bold mb-6">Profile Settings</h2>
+                <form id="profileForm" class="space-y-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <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="bio" class="block text-sm font-medium mb-1">Bio</label>
+                        <textarea id="bio" rows="3"
+                            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"></textarea>
+                    </div>
+                    <div>
+                        <label for="location" class="block text-sm font-medium mb-1">Location</label>
+                        <input type="text" id="location"
+                            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">
+                        <button type="submit" class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-6 rounded-lg transition">
+                            Save Changes
+                        </button>
+                    </div>
+                </form>
+                <!-- Seller-specific fields -->
+                <div id="sellerFields" class="mt-8 hidden">
+                    <h3 class="text-xl font-bold mb-4 border-b border-gray-700 pb-2">Seller Information</h3>
+                    <form id="sellerForm" class="space-y-6">
+                        <div>
+                            <label for="shopName" class="block text-sm font-medium mb-1">Shop Name</label>
+                            <input type="text" id="shopName"
+                                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="shopDescription" class="block text-sm font-medium mb-1">Shop Description</label>
+                            <textarea id="shopDescription" rows="3"
+                                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"></textarea>
+                        </div>
+                        <div>
+                            <label for="shopCategory" class="block text-sm font-medium mb-1">Shop Category</label>
+                            <select id="shopCategory"
+                                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">
+                                <option>Home Decor</option>
+                                <option>Jewelry</option>
+                                <option>Clothing</option>
+                                <option>Art</option>
+                                <option>Food & Beverage</option>
+                                <option>Other</option>
+                            </select>
+                        </div>
+                        <div class="pt-2">
+                            <button type="submit" class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-6 rounded-lg transition">
+                                Save Seller Info
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+        // Load user data
+        document.addEventListener('DOMContentLoaded', function() {
+            const user = JSON.parse(localStorage.getItem('currentUser')) || {};
+            // Populate form fields
+            document.getElementById('firstName').value = user.firstName || '';
+            document.getElementById('lastName').value = user.lastName || '';
+            document.getElementById('userName').textContent = `${user.firstName || ''} ${user.lastName || ''}`.trim() || 'User';
+            document.getElementById('userRole').textContent = user.role === 'seller' ? 'Seller' : 'Buyer';
+            // Show seller fields if user is a seller
+            if (user.role === 'seller') {
+                document.getElementById('sellerFields').classList.remove('hidden');
+                document.getElementById('shopName').value = user.shopName || '';
+                document.getElementById('shopDescription').value = user.shopDescription || '';
+                document.getElementById('shopCategory').value = user.shopCategory || '';
+            }
+        });
+        // Profile photo upload
+        document.getElementById('changePhotoBtn').addEventListener('click', function() {
+            document.getElementById('profilePhotoUpload').click();
+        });
+        document.getElementById('profilePhotoUpload').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    document.getElementById('profileImage').src = event.target.result;
+                    // Save to local storage
+                    const user = JSON.parse(localStorage.getItem('currentUser')) || {};
+                    user.profileImage = event.target.result;
+                    localStorage.setItem('currentUser', JSON.stringify(user));
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+        // Save profile
+        document.getElementById('profileForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const user = JSON.parse(localStorage.getItem('currentUser')) || {};
+            user.firstName = document.getElementById('firstName').value;
+            user.lastName = document.getElementById('lastName').value;
+            user.bio = document.getElementById('bio').value;
+            user.location = document.getElementById('location').value;
+            localStorage.setItem('currentUser', JSON.stringify(user));
+            alert('Profile saved successfully!');
+        });
+        // Save seller info
+        document.getElementById('sellerForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const user = JSON.parse(localStorage.getItem('currentUser')) || {};
+            user.shopName = document.getElementById('shopName').value;
+            user.shopDescription = document.getElementById('shopDescription').value;
+            user.shopCategory = document.getElementById('shopCategory').value;
+            localStorage.setItem('currentUser', JSON.stringify(user));
+            alert('Seller information saved successfully!');
+        });
+    </script>
+</body>
+</html>

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Register - CraftyMunch</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <style>
@@ -16,157 +16,113 @@
     </style>
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">
-    <nav class="bg-gray-800 border-b border-gray-700 px-4 py-3">
-        <div class="max-w-7xl mx-auto flex items-center justify-between">
-            <div class="flex items-center space-x-2">
-                <i data-feather="hand" class="text-primary-500 w-8 h-8"></i>
-                <span class="text-2xl font-bold gradient-text">CraftyMunch</span>
-            </div>
-            <a href="index.html" class="text-primary-500 hover:text-primary-400 transition">
-                Back to Home
-            </a>
         </div>
-    </nav>
-    <section class="max-w-md mx-auto py-16 px-4">
         <div class="bg-gray-800 rounded-xl p-8 shadow-lg">
-            <h1 class="text-3xl font-bold mb-6 text-center">Create Your Account</h1>
-            <form id="registerForm" class="space-y-6">
                 <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" name="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" name="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" name="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" name="password" 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="confirmPassword" class="block text-sm font-medium mb-1">Confirm Password</label>
-                    <input type="password" id="confirmPassword" name="confirmPassword" 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 class="pt-2 space-y-4">
-                    <h3 class="text-lg font-medium">Account Type</h3>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <label class="flex items-center p-4 border-2 border-gray-700 rounded-lg hover:border-primary-500 transition cursor-pointer">
-                            <input type="radio" name="accountType" value="buyer" checked class="hidden">
-                            <div class="flex-1">
-                                <div class="flex items-center mb-2">
-                                    <i data-feather="shopping-bag" class="w-5 h-5 mr-2 text-primary-500"></i>
-                                    <h4 class="font-bold">Buyer</h4>
-                                </div>
-                                <p class="text-sm text-gray-400">Browse and purchase handmade items and rescued food</p>
-                            </div>
-                            <div class="ml-4 w-5 h-5 rounded-full border-2 border-gray-600 flex items-center justify-center">
-                                <div class="w-3 h-3 rounded-full bg-primary-500 hidden"></div>
-                            </div>
-                        </label>
-                        <label class="flex items-center p-4 border-2 border-gray-700 rounded-lg hover:border-primary-500 transition cursor-pointer">
-                            <input type="radio" name="accountType" value="seller" class="hidden">
-                            <div class="flex-1">
-                                <div class="flex items-center mb-2">
-                                    <i data-feather="package" class="w-5 h-5 mr-2 text-primary-500"></i>
-                                    <h4 class="font-bold">Seller</h4>
-                                </div>
-                                <p class="text-sm text-gray-400">Sell handmade goods or list food for rescue</p>
-                            </div>
-                            <div class="ml-4 w-5 h-5 rounded-full border-2 border-gray-600 flex items-center justify-center">
-                                <div class="w-3 h-3 rounded-full bg-primary-500 hidden"></div>
-                            </div>
-                        </label>
-                    </div>
-                </div>
-                <script>
-                    // Style radio button selection
-                    document.querySelectorAll('input[name="accountType"]').forEach(radio => {
-                        radio.addEventListener('change', function() {
-                            const allLabels = document.querySelectorAll('label[for]');
-                            allLabels.forEach(label => {
-                                const box = label.parentElement;
-                                const check = box.querySelector('div > div');
-                                const input = box.querySelector('input');
-                                if (input.checked) {
-                                    box.classList.add('border-primary-500');
-                                    check.classList.remove('hidden');
-                                } else {
-                                    box.classList.remove('border-primary-500');
-                                    check.classList.add('hidden');
-                                }
-                            });
-                        });
-                    });
-                    // Initialize first selection
-                    document.querySelector('input[name="accountType"]:checked').dispatchEvent(new Event('change'));
-                </script>
-<div class="pt-4">
-                    <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>
-                <div class="text-center text-sm text-gray-400">
-                    Already have an account?
-                    <a href="login.html" class="text-primary-500 hover:text-primary-400 transition">Log in</a>
                 </div>
             </form>
         </div>
-    </section>
     <script>
         feather.replace();
-        // Style radio buttons on page load
-        document.querySelectorAll('input[name="accountType"]').forEach(radio => {
-            const box = radio.parentElement;
-            const check = box.querySelector('div > div');
-            if (radio.checked) {
-                box.classList.add('border-primary-500');
-                check.classList.remove('hidden');
-            }
-        });
-document.getElementById('registerForm').addEventListener('submit', function(e) {
             e.preventDefault();
             const password = document.getElementById('password').value;
             const confirmPassword = document.getElementById('confirmPassword').value;
             if (password !== confirmPassword) {
                 alert('Passwords do not match!');
                 return;
             }
-            // In a real app, you would send this data to your backend
-            const accountType = document.querySelector('input[name="accountType"]:checked').value;
-            alert(`Registration successful! Account type: ${accountType}. Redirecting...`);
-            // Redirect based on account type
-            setTimeout(() => {
-                window.location.href = accountType === 'seller' ? 'seller-dashboard.html' : 'index.html';
-            }, 1500);
         });
     </script>
 </body>

 <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>
     <style>
     </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>
         </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">
                     </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>
+                <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>
         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
+                await new Promise(resolve => setTimeout(resolve, 1500));
+                // Store user data in localStorage
+                const user = {
+                    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>
 </body>

seller-dashboard.html CHANGED Viewed

@@ -47,14 +47,14 @@
             <!-- Sidebar -->
             <div class="w-full md:w-64 bg-gray-800 rounded-xl p-6">
                 <div class="flex items-center space-x-3 mb-8">
-                    <div class="w-12 h-12 rounded-full bg-primary-500 bg-opacity-20 flex items-center justify-center">
-                        <i data-feather="user" class="text-primary-500"></i>
                     </div>
                     <div>
-                        <h3 class="font-bold">Seller Name</h3>
                         <p class="text-xs text-gray-400">Premium Seller</p>
                     </div>
-                </div>
                 <nav class="space-y-2">
                     <a href="seller-dashboard.html" class="flex items-center space-x-3 px-3 py-2 bg-gray-700 rounded-lg text-primary-500">
@@ -77,11 +77,11 @@
                         <i data-feather="bar-chart-2" class="w-5 h-5"></i>
                         <span>Analytics</span>
                     </a>
-                    <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition">
                         <i data-feather="settings" class="w-5 h-5"></i>
                         <span>Settings</span>
                     </a>
-                </nav>
             </div>
             <!-- Main Content -->
@@ -252,7 +252,15 @@
     <script>
         feather.replace();
-        // Initialize drop zone styling
         document.addEventListener('DOMContentLoaded', function() {
             const dropZone = document.getElementById('dropZone');
             dropZone.addEventListener('dragover', function(e) {

             <!-- Sidebar -->
             <div class="w-full md:w-64 bg-gray-800 rounded-xl p-6">
                 <div class="flex items-center space-x-3 mb-8">
+                    <div class="w-12 h-12 rounded-full overflow-hidden">
+                        <img id="sellerProfileImage" src="http://static.photos/people/200x200/10" alt="Profile" class="w-full h-full object-cover">
                     </div>
                     <div>
+                        <h3 id="sellerName" class="font-bold">Seller Name</h3>
                         <p class="text-xs text-gray-400">Premium Seller</p>
                     </div>
+</div>
                 <nav class="space-y-2">
                     <a href="seller-dashboard.html" class="flex items-center space-x-3 px-3 py-2 bg-gray-700 rounded-lg text-primary-500">
                         <i data-feather="bar-chart-2" class="w-5 h-5"></i>
                         <span>Analytics</span>
                     </a>
+                <a href="profile-settings.html" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition">
                         <i data-feather="settings" class="w-5 h-5"></i>
                         <span>Settings</span>
                     </a>
+</nav>
             </div>
             <!-- Main Content -->
     <script>
         feather.replace();
+        // Load seller profile data
+        document.addEventListener('DOMContentLoaded', function() {
+            const user = JSON.parse(localStorage.getItem('currentUser')) || {};
+            if (user.profileImage) {
+                document.getElementById('sellerProfileImage').src = user.profileImage;
+            }
+            document.getElementById('sellerName').textContent = `${user.firstName || ''} ${user.lastName || ''}`.trim() || 'Seller';
+        });
+// Initialize drop zone styling
         document.addEventListener('DOMContentLoaded', function() {
             const dropZone = document.getElementById('dropZone');
             dropZone.addEventListener('dragover', function(e) {