Spaces:

Jaafarsa
/

undefined

Running

App Files Files Community

undefined / profile-settings.html

Jaafarsa

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

d6d532d verified 5 months ago

raw

history blame contribute delete

11.9 kB

	<!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>