2025-08-04 11:44:00 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > User Profile< / title >
< link rel = "stylesheet" href = "style.css" / >
< / head >
< body >
< div class = "page-wrapper" >
2025-08-05 06:00:54 +00:00
< div class = "nav-1-wrapper" > < nav class = "nav-1-navbar" > < div class = "nav-1-logo" > Radiance Jewels< / div > < ul class = "nav-1-nav-links" > < li > < a href = "index.html" > Home< / a > < / li > < li > < a href = "product_catalog.html" > Product Catalog< / a > < / li > < li > < a href = "shopping_cart.html" > Shopping Cart< / a > < / li > < li > < a href = "checkout.html" > Checkout< / a > < / li > < li > < a href = "login.html" > Login< / a > < / li > < li > < a href = "dashboard.html" > Dashboard< / a > < / li > < li > < a href = "order_history.html" > Order History< / a > < / li > < li > < a href = "user_profile.html" > User Profile< / a > < / li > < li > < a href = "sign_up.html" > Sign Up< / a > < / li > < / ul > < div class = "nav-1-nav-actions" > < button class = "nav-1-btn nav-1-outline" > Sign Up< / button > < button class = "nav-1-btn nav-1-solid" > Login< / button > < / div > < / nav > < / div >
2025-08-04 11:44:00 +00:00
< section class = "profile-header" >
< div class = "profile-info-container" >
< div class = "profile-avatar" >
< img src = "https://via.placeholder.com/120x120?text=User" alt = "User Profile Picture" class = "profile-image" >
< / div >
< div class = "profile-details" >
< h2 class = "profile-name" > Johnathan Doe< / h2 >
< p class = "profile-tagline" > Premium Member since 2023< / p >
< p class = "profile-email" > john.doe@example.com< / p >
< / div >
< / div >
< nav class = "profile-navigation" >
< ul class = "profile-nav-list" >
< li class = "profile-nav-item" > < a href = "#dashboard" class = "profile-nav-link" > Dashboard< / a > < / li >
< li class = "profile-nav-item" > < a href = "#orders" class = "profile-nav-link" > Order History< / a > < / li >
< li class = "profile-nav-item" > < a href = "#wishlist" class = "profile-nav-link" > Wishlist< / a > < / li >
< li class = "profile-nav-item" > < a href = "#settings" class = "profile-nav-link" > Settings< / a > < / li >
< li class = "profile-nav-item" > < a href = "#logout" class = "profile-nav-link profile-nav-link--logout" > Logout< / a > < / li >
< / ul >
< / nav >
< / section >
< section class = "personal-info-section" >
< div class = "container" >
< h2 class = "section-title" > Personal Information< / h2 >
< p class = "section-description" > Manage your profile details and preferences for a seamless shopping experience.< / p >
< form class = "personal-info-form" action = "/api/profile/update" method = "POST" >
< fieldset class = "form-group" >
< legend class = "group-title" > Contact Details< / legend >
< div class = "form-row" >
< div class = "form-field" >
< label for = "firstName" > First Name< / label >
< input type = "text" id = "firstName" name = "firstName" placeholder = "e.g., John" value = "Placeholder First Name" required = "" aria-required = "true" >
< / div >
< div class = "form-field" >
< label for = "lastName" > Last Name< / label >
< input type = "text" id = "lastName" name = "lastName" placeholder = "e.g., Doe" value = "Placeholder Last Name" required = "" aria-required = "true" >
< / div >
< / div >
< div class = "form-row" >
< div class = "form-field" >
< label for = "email" > Email Address< / label >
< input type = "email" id = "email" name = "email" placeholder = "e.g., john.doe@example.com" value = "placeholder@example.com" required = "" aria-required = "true" >
< / div >
< div class = "form-field" >
< label for = "phone" > Phone Number (Optional)< / label >
< input type = "tel" id = "phone" name = "phone" placeholder = "e.g., +1 (123) 456-7890" value = "+1 (123) 456-7890" >
< / div >
< / div >
< / fieldset >
< fieldset class = "form-group" >
< legend class = "group-title" > Shipping Address< / legend >
< div class = "form-field full-width" >
< label for = "addressLine1" > Address Line 1< / label >
< input type = "text" id = "addressLine1" name = "addressLine1" placeholder = "e.g., 123 Main Street" value = "Placeholder Address Line 1" required = "" aria-required = "true" >
< / div >
< div class = "form-field full-width" >
< label for = "addressLine2" > Address Line 2 (Optional)< / label >
< input type = "text" id = "addressLine2" name = "addressLine2" placeholder = "e.g., Apt 4B, Building C" value = "Placeholder Address Line 2" >
< / div >
< div class = "form-row" >
< div class = "form-field" >
< label for = "city" > City< / label >
< input type = "text" id = "city" name = "city" placeholder = "e.g., New York" value = "Placeholder City" required = "" aria-required = "true" >
< / div >
< div class = "form-field" >
< label for = "stateProvince" > State / Province< / label >
< input type = "text" id = "stateProvince" name = "stateProvince" placeholder = "e.g., NY" value = "Placeholder State" required = "" aria-required = "true" >
< / div >
< / div >
< div class = "form-row" >
< div class = "form-field" >
< label for = "zipPostalCode" > Zip / Postal Code< / label >
< input type = "text" id = "zipPostalCode" name = "zipPostalCode" placeholder = "e.g., 10001" value = "P1L 5F4" required = "" aria-required = "true" >
< / div >
< div class = "form-field" >
< label for = "country" > Country< / label >
< select id = "country" name = "country" required = "" aria-required = "true" >
< option value = "" > Select Country< / option >
< option value = "US" selected = "" > United States< / option >
< option value = "CA" > Canada< / option >
< option value = "GB" > United Kingdom< / option >
< option value = "IN" > India< / option >
< option value = "AU" > Australia< / option >
< option value = "DE" > Germany< / option >
< option value = "FR" > France< / option >
<!-- More countries would be listed here -->
< / select >
< / div >
< / div >
< / fieldset >
< fieldset class = "form-group" >
< legend class = "group-title" > Password Management< / legend >
< p class = "group-description" > Change your password for enhanced account security.< / p >
< div class = "form-field full-width" >
< label for = "currentPassword" > Current Password< / label >
< input type = "password" id = "currentPassword" name = "currentPassword" placeholder = "Enter your current password" >
< / div >
< div class = "form-field full-width" >
< label for = "newPassword" > New Password< / label >
< input type = "password" id = "newPassword" name = "newPassword" placeholder = "Enter a new password" >
< / div >
< div class = "form-field full-width" >
< label for = "confirmNewPassword" > Confirm New Password< / label >
< input type = "password" id = "confirmNewPassword" name = "confirmNewPassword" placeholder = "Confirm your new password" >
< / div >
< / fieldset >
< div class = "form-actions" >
< button type = "submit" class = "button button-primary" > Save Changes< / button >
< button type = "reset" class = "button button-secondary" > Discard Changes< / button >
< / div >
< / form >
< / div >
< / section >
< section class = "shipping-addresses-management" >
< div class = "container" >
< h2 > Shipping Addresses< / h2 >
< div class = "address-list" >
< div class = "address-card" >
< h3 > Default Shipping Address< / h3 >
< p > < strong > Recipient:< / strong > User Full Name< / p >
< p > < strong > Address Line 1:< / strong > 123 Main Street< / p >
< p > < strong > Address Line 2:< / strong > Apt 4B< / p >
< p > < strong > City:< / strong > Anytown< / p >
< p > < strong > State/Province:< / strong > AA< / p >
< p > < strong > Zip/Postal Code:< / strong > 12345< / p >
< p > < strong > Country:< / strong > United States< / p >
< p > < strong > Phone:< / strong > (555) 123-4567< / p >
< div class = "address-actions" >
< button type = "button" class = "btn btn-edit" > Edit< / button >
< button type = "button" class = "btn btn-delete" > Delete< / button >
< / div >
< / div >
< div class = "address-card" >
< h3 > Secondary Address< / h3 >
< p > < strong > Recipient:< / strong > Another User< / p >
< p > < strong > Address Line 1:< / strong > 456 Oak Avenue< / p >
< p > < strong > Address Line 2:< / strong > Suite 101< / p >
< p > < strong > City:< / strong > Othercity< / p >
< p > < strong > State/Province:< / strong > BB< / p >
< p > < strong > Zip/Postal Code:< / strong > 67890< / p >
< p > < strong > Country:< / strong > United States< / p >
< p > < strong > Phone:< / strong > (555) 987-6543< / p >
< div class = "address-actions" >
< button type = "button" class = "btn btn-edit" > Edit< / button >
< button type = "button" class = "btn btn-delete" > Delete< / button >
< button type = "button" class = "btn btn-set-default" > Set as Default< / button >
< / div >
< / div >
< div class = "address-card" >
< h3 > Work Address< / h3 >
< p > < strong > Recipient:< / strong > User Full Name< / p >
< p > < strong > Address Line 1:< / strong > 789 Business Park Blvd< / p >
< p > < strong > Address Line 2:< / strong > Office 200< / p >
< p > < strong > City:< / strong > Metropolis< / p >
< p > < strong > State/Province:< / strong > CC< / p >
< p > < strong > Zip/Postal Code:< / strong > 90210< / p >
< p > < strong > Country:< / strong > United States< / p >
< p > < strong > Phone:< / strong > (555) 111-2222< / p >
< div class = "address-actions" >
< button type = "button" class = "btn btn-edit" > Edit< / button >
< button type = "button" class = "btn btn-delete" > Delete< / button >
< button type = "button" class = "btn btn-set-default" > Set as Default< / button >
< / div >
< / div >
< / div >
< div class = "add-new-address-section" >
< h3 > Add New Shipping Address< / h3 >
< form class = "address-form" >
< div class = "form-group" >
< label for = "newFullName" > Full Name< / label >
< input type = "text" id = "newFullName" name = "fullName" placeholder = "e.g., Jane Doe" required = "" >
< / div >
< div class = "form-group" >
< label for = "newAddressLine1" > Address Line 1< / label >
< input type = "text" id = "newAddressLine1" name = "addressLine1" placeholder = "Street address, P.O. Box" required = "" >
< / div >
< div class = "form-group" >
< label for = "newAddressLine2" > Address Line 2 (Optional)< / label >
< input type = "text" id = "newAddressLine2" name = "addressLine2" placeholder = "Apartment, suite, unit, building, floor etc." >
< / div >
< div class = "form-group" >
< label for = "newCity" > City< / label >
< input type = "text" id = "newCity" name = "city" placeholder = "e.g., New York" required = "" >
< / div >
< div class = "form-group" >
< label for = "newStateProvince" > State / Province< / label >
< input type = "text" id = "newStateProvince" name = "stateProvince" placeholder = "e.g., NY" required = "" >
< / div >
< div class = "form-group" >
< label for = "newZipCode" > Zip / Postal Code< / label >
< input type = "text" id = "newZipCode" name = "zipCode" placeholder = "e.g., 10001" required = "" >
< / div >
< div class = "form-group" >
< label for = "newCountry" > Country< / label >
< select id = "newCountry" name = "country" required = "" >
< option value = "" > Select Country< / option >
< option value = "US" > United States< / option >
< option value = "CA" > Canada< / option >
< option value = "IN" > India< / option >
< option value = "GB" > United Kingdom< / option >
<!-- More countries can be added here -->
< / select >
< / div >
< div class = "form-group" >
< label for = "newPhoneNumber" > Phone Number< / label >
< input type = "tel" id = "newPhoneNumber" name = "phoneNumber" placeholder = "e.g., (123) 456-7890" required = "" >
< / div >
< div class = "form-group checkbox-group" >
< input type = "checkbox" id = "setDefaultAddress" name = "setDefaultAddress" >
< label for = "setDefaultAddress" > Set as my default shipping address< / label >
< / div >
< button type = "submit" class = "btn btn-primary" > Save Address< / button >
< / form >
< / div >
< / div >
< / section >
< section class = "password-change-section" aria-labelledby = "passwordChangeHeading" >
< div class = "password-change-container" >
< h2 id = "passwordChangeHeading" class = "section-title" > Change Your Password< / h2 >
< p class = "section-description" > For your security, please update your password regularly.< / p >
< form action = "/update-password" method = "POST" class = "password-change-form" >
< div class = "form-group" >
< label for = "currentPassword" > Current Password< / label >
< input type = "password" id = "currentPassword" name = "currentPassword" placeholder = "Enter your current password" required = "" autocomplete = "current-password" >
< / div >
< div class = "form-group" >
< label for = "newPassword" > New Password< / label >
< input type = "password" id = "newPassword" name = "newPassword" placeholder = "Enter your new password" required = "" autocomplete = "new-password" >
< / div >
< div class = "form-group" >
< label for = "confirmNewPassword" > Confirm New Password< / label >
< input type = "password" id = "confirmNewPassword" name = "confirmNewPassword" placeholder = "Re-enter your new password" required = "" autocomplete = "new-password" >
< / div >
< button type = "submit" class = "submit-button" > Update Password< / button >
< / form >
< / div >
< / section >
< section class = "communication-preferences-section" >
< div class = "container" >
< h2 class = "section-title" > Communication Preferences< / h2 >
< p class = "section-description" > Manage how you receive updates, offers, and essential notifications from us.< / p >
< form class = "preferences-form" >
< fieldset class = "preference-group" >
< legend class = "group-title" > Email Notifications< / legend >
< div class = "preference-item" >
< input type = "checkbox" id = "email-promotions" name = "email-promotions" checked = "" >
< label for = "email-promotions" class = "preference-label" >
< span class = "label-text" > Promotional Offers & Discounts< / span >
< span class = "label-description" > Receive exclusive deals, new collection alerts, and special event invitations directly in your inbox.< / span >
< / label >
< / div >
< div class = "preference-item" >
< input type = "checkbox" id = "email-newsletter" name = "email-newsletter" checked = "" >
< label for = "email-newsletter" class = "preference-label" >
< span class = "label-text" > Newsletter & Product Updates< / span >
< span class = "label-description" > Stay informed about our latest jewelry trends, blog posts, and company news.< / span >
< / label >
< / div >
< div class = "preference-item" >
< input type = "checkbox" id = "email-order-updates" name = "email-order-updates" checked = "" disabled = "" >
< label for = "email-order-updates" class = "preference-label" >
< span class = "label-text" > Order & Shipping Updates< / span >
< span class = "label-description" > Essential notifications regarding your purchases, shipping status, and delivery (cannot be disabled).< / span >
< / label >
< / div >
< / fieldset >
< fieldset class = "preference-group" >
< legend class = "group-title" > SMS Notifications< / legend >
< div class = "preference-item" >
< input type = "checkbox" id = "sms-promotions" name = "sms-promotions" >
< label for = "sms-promotions" class = "preference-label" >
< span class = "label-text" > Promotional SMS< / span >
< span class = "label-description" > Get quick alerts about flash sales, limited-time offers, and special events via text message.< / span >
< / label >
< / div >
< div class = "preference-item" >
< input type = "checkbox" id = "sms-order-status" name = "sms-order-status" checked = "" disabled = "" >
< label for = "sms-order-status" class = "preference-label" >
< span class = "label-text" > Order Status Alerts< / span >
< span class = "label-description" > Critical updates on your order confirmation, dispatch, and delivery status (cannot be disabled).< / span >
< / label >
< / div >
< / fieldset >
< div class = "form-actions" >
< button type = "submit" class = "button primary-button" > Save Changes< / button >
< button type = "button" class = "button secondary-button" > Cancel< / button >
< a href = "#" class = "unsubscribe-link" > Unsubscribe from all marketing communications< / a >
< / div >
< / form >
< / div >
< / section >
< div class = "footer-1-wrapper" > < section class = "footer-1-section" > < div class = "footer-1-top" > < div class = "footer-1-brand" > < h3 class = "footer-1-logo" > Gleam Jewels< / h3 > < p class = "footer-1-newsletter-text" > Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.< / p > < div class = "footer-1-newsletter-form" > < input type = "email" placeholder = "Your email address" > < button class = "footer-1-subscribe-btn" > Shine With Us< / button > < / div > < p class = "footer-1-privacy-note" > < span > By subscribing you agree to with our < / span > < a href = "#" > Privacy Policy< / a > < span > and provide consent to receive updates from our company.< / span > < / p > < / div > < div class = "footer-1-columns" > < div class = "footer-1-column" > < h4 > Explore< / h4 > < ul > < li > < a href = "rings.html" > Rings< / a > < / li > < li > < a href = "necklaces.html" > Necklaces< / a > < / li > < li > < a href = "bangles.html" > Bangles< / a > < / li > < li > < a href = "earrings.html" > Earrings< / a > < / li > < li > < a href = "new_arrivals.html" > New Arrivals< / a > < / li > < / ul > < / div > < div class = "footer-1-column" > < h4 > Support< / h4 > < ul > < li > < a href = "about_us.html" > About Us< / a > < / li > < li > < a href = "contact_us.html" > Contact Us< / a > < / li > < li > < a href = "faq.html" > FAQ< / a > < / li > < li > < a href = "shipping_returns.html" > Shipping & Returns< / a > < / li > < li > < a href = "customer_dashboard.html" > Customer Dashboard< / a > < / li > < / ul > < / div > < div class = "footer-1-column footer-1-social" > < h4 > Follow us< / h4 > < ul > < li > < i class = "fab fa-facebook" > < / i > < span > Facebook< / span > < / li > < li > < i class = "fab fa-instagram" > < / i > < span > Instagram< / span > < / li > < li > < i class = "fab fa-x-twitter" > < / i > < span > X< / span > < / li > < li > < i class = "fab fa-linkedin" > < / i > < span > LinkedIn< / span > < / li > < li > < i class = "fab fa-youtube" > < / i > < span > Youtube< / span > < / li > < / ul > < / div > < / div > < / div > < div class = "footer-1-bottom" > < p > © 2025 Gleam Jewels. All rights reserved.< / p > < ul class = "footer-1-links" > < li > < a href = "product_detail.html" > Product Detail< / a > < / li > < li > < a href = "order_confirmation.html" > Order Confirmation< / a > < / li > < li > < a href = "admin_login.html" > Admin Login< / a > < / li > < li > < a href = "admin_dashboard.html" > Admin Dashboard< / a > < / li > < li > < a href = "admin_product_management.html" > Admin Product Management< / a > < / li > < li > < a href = "admin_add_product.html" > Admin Add Product< / a > < / li > < li > < a href = "admin_edit_product.html" > Admin Edit Product< / a > < / li > < li > < a href = "admin_order_management.html" > Admin Order Management< / a > < / li > < li > < a href = "admin_user_management.html" > Admin User Management< / a > < / li > < / ul > < / div > < / section > < / div >
< / div >
< script >
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
< / script >
< / body >
< / html >
