<script src="notification-handler.js"></script> <!DOCTYPE html> <html lang="en" data-theme="light"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Profile | SetupGuru.shop</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@400;500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"> <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script> <style> :root { /* Light Theme: Consistent with login.html */ --primary-color-light: #2E1A5F; --secondary-color-light: #C49B46; --background-light: #f4f7fc; --card-bg-light: #FFFFFF; --text-primary-light: #1a1a2e; --text-secondary-light: #5a5a78; --border-color-light: #e0e5ec; /* Dark Theme: Premium Look */ --primary-color-dark: #C49B46; /* Gold becomes primary */ --secondary-color-dark: #8a78e8; /* Lighter violet */ --background-dark: #1F1D2B; /* Premium dark background */ --card-bg-dark: #262837; /* Premium dark card background */ --text-primary-dark: #f0f2f5; --text-secondary-dark: #a9a9c4; --border-color-dark: #3a3a5a; --shadow-color: rgba(0, 0, 0, 0.08); --transition-speed: 0.3s; } [data-theme="light"] { --primary-color: var(--primary-color-light); --secondary-color: var(--secondary-color-light); --background-color: var(--background-light); --card-bg: var(--card-bg-light); --text-color: var(--text-primary-light); --text-secondary: var(--text-secondary-light); --border-color: var(--border-color-light); } [data-theme="dark"] { --primary-color: var(--primary-color-dark); --secondary-color: var(--secondary-color-dark); --background-color: var(--background-dark); --card-bg: var(--card-bg-dark); --text-color: var(--text-primary-dark); --text-secondary: var(--text-secondary-dark); --border-color: var(--border-color-dark); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Roboto', sans-serif; background-color: var(--background-color); color: var(--text-color); transition: background-color var(--transition-speed), color var(--transition-speed); opacity: 0; animation: fadeInPage 0.5s forwards; } .container { max-width: 900px; margin: 0 auto; padding: 20px; } h1, h2, h3 { font-family: 'Playfair Display', serif; color: var(--primary-color); } @keyframes fadeInPage { to { opacity: 1; } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } @keyframes text-pan { 0% { background-position: 0% center; } 100% { background-position: -200% center; } } .profile-header { text-align: center; padding: 30px 0; margin-bottom: 2rem; position: relative; } .profile-picture { width: 150px; height: 150px; border-radius: 50%; border: 5px solid var(--primary-color); box-shadow: 0 10px 30px var(--shadow-color); margin-bottom: 1rem; animation: float 6s ease-in-out infinite; object-fit: cover; background-color: var(--border-color); } .profile-header h1 { font-size: 2.8rem; margin: 0; } .profile-header .tagline { font-size: 1.1rem; color: var(--text-secondary); margin-top: 5px; } .profile-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .card { background-color: var(--card-bg); padding: 1.5rem; border-radius: 15px; box-shadow: 0 4px 20px var(--shadow-color); transition: all var(--transition-speed); border: 1px solid var(--border-color); } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px var(--shadow-color); } [data-theme="dark"] .card:hover { box-shadow: 0 8px 30px rgba(196, 155, 70, 0.1); } .card h2 { margin-bottom: 1.5rem; display: flex; align-items: center; gap: 10px; } .card h2 .fa { font-size: 1.5rem; } .user-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .info-item { display: flex; align-items: center; background-color: var(--background-color); padding: 1rem; border-radius: 10px; transition: background-color var(--transition-speed); } .info-item i { color: var(--secondary-color); font-size: 1.5rem; width: 40px; text-align: center; margin-right: 1rem; } .info-item p { margin: 0; line-height: 1.2; word-break: break-word; } .info-item .label { font-size: 0.8rem; color: var(--text-secondary); } .order-list { display: flex; flex-direction: column; gap: 1rem; } .order-item { display: flex; align-items: center; gap: 1rem; background-color: var(--background-color); padding: 1rem; border-radius: 10px; } .order-item img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; } .order-info { flex-grow: 1; } .order-id { font-weight: 500; } .order-date { font-size: 0.9rem; color: var(--text-secondary); } .order-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; color: white; } .status-delivered { background-color: #2ecc71; } .status-pending { background-color: #f39c12; } .status-cancelled { background-color: #e74c3c; } .actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .action-button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 1rem; background-color: var(--background-color); border-radius: 10px; text-decoration: none; color: var(--text-color); font-weight: 500; transition: all var(--transition-speed); } .action-button:hover { background-color: var(--primary-color); color: white; } .action-button i { font-size: 2rem; margin-bottom: 0.5rem; color: var(--secondary-color); transition: color var(--transition-speed); } .action-button:hover i { color: white; } .settings-list { list-style: none; } .settings-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--border-color); } .settings-item:last-child { border-bottom: none; } .theme-switch { position: relative; display: inline-block; width: 50px; height: 26px; } .theme-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 26px; transition: var(--transition-speed); } .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: var(--transition-speed); } .slider .fa-moon { position: absolute; left: 6px; top: 5px; color: #fff; transition: var(--transition-speed); opacity: 0; } .slider .fa-sun { position: absolute; right: 6px; top: 5px; color: #fff; transition: var(--transition-speed); } input:checked + .slider { background-color: var(--primary-color); } input:checked + .slider:before { transform: translateX(24px); } input:checked + .slider .fa-moon { opacity: 1; } input:checked + .slider .fa-sun { opacity: 0; } .footer { text-align: center; padding: 2rem 0; } .footer p { margin-bottom: 0.5rem; color: var(--text-secondary); } .footer .thanks-text { font-family: 'Playfair Display', serif; font-size: 1.2rem; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200%; animation: text-pan 5s linear infinite; } .btn { padding: 12px 24px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; font-size: 1rem; transition: all var(--transition-speed); } .btn-primary { background-color: var(--primary-color); color: white; } .btn-primary:hover { background-color: var(--secondary-color); color: var(--primary-color-light); } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 1000; opacity: 0; transition: opacity var(--transition-speed); } .modal-overlay.visible { display: flex; opacity: 1; } .modal-content { background-color: var(--card-bg); padding: 2rem; border-radius: 15px; width: 90%; max-width: 450px; text-align: center; transform: scale(0.9); transition: transform var(--transition-speed); } .modal-overlay.visible .modal-content { transform: scale(1); } .modal-content h3 { margin-bottom: 1.5rem; } .modal-actions { display: flex; justify-content: center; gap: 1rem; } .modal-actions .btn-secondary { background-color: #ccc; color: #333; } @media (min-width: 768px) { .profile-grid { grid-template-columns: repeat(2, 1fr); grid-template-areas: "info actions" "info settings" "orders orders" "footer-area footer-area"; } #user-info-card { grid-area: info; } #orders-card { grid-area: orders; } #actions-card { grid-area: actions; } #settings-card { grid-area: settings; } .footer-grid-area { grid-area: footer-area; align-self: end; } } </style> </head> <body> <div class="container"> <header class="profile-header"> <img src="https://i.ibb.co/zT8W3ZhL/pngtree-user-profile-avatar-png-image-10211467.png" alt="Profile Picture" class="profile-picture" id="profilePicture"> <h1 id="profileName">Loading...</h1> <p class="tagline">Your personal space</p> </header> <main class="profile-grid"> <section id="user-info-card" class="card"> <h2><i class="fas fa-user-circle"></i>User Details</h2> <div class="user-info-grid"> <div class="info-item"> <i class="fas fa-user"></i> <div><p class="label">Full Name</p><p id="infoName">-</p></div> </div> <div class="info-item"> <i class="fas fa-envelope"></i> <div><p class="label">Email</p><p id="infoEmail">-</p></div> </div> <div class="info-item"> <i class="fas fa-mobile-alt"></i> <div><p class="label">Mobile</p><p id="infoMobile">-</p></div> </div> <div class="info-item"> <i class="fas fa-map-marker-alt"></i> <div><p class="label">Address</p><p id="infoAddress">-</p></div> </div> <div class="info-item"> <i class="fas fa-calendar-alt"></i> <div><p class="label">Joined Date</p><p id="infoJoined">-</p></div> </div> </div> </section> <section id="orders-card" class="card" style="display: none;"> <h2><i class="fas fa-box-open"></i>My Orders</h2> <div class="order-list" id="orderList"> </div> </section> <section id="actions-card" class="card"> <h2><i class="fas fa-bolt"></i>Quick Actions</h2> <div class="actions-grid"> <a href="tel:9499473347" class="action-button"><i class="fas fa-phone-alt"></i> Call Support</a> <a href="https://wa.me/919499473347" target="_blank" class="action-button"><i class="fab fa-whatsapp"></i> WhatsApp</a> <a href="support.html" class="action-button"><i class="fas fa-headset"></i> Quick Support</a> </div> </section> <section id="settings-card" class="card"> <h2><i class="fas fa-cog"></i>Settings</h2> <ul class="settings-list"> <li class="settings-item"> <span><i class="fas fa-palette"></i> Dark Mode</span> <label class="theme-switch"><input type="checkbox" id="themeToggle"><span class="slider"><i class="fas fa-sun"></i><i class="fas fa-moon"></i></span></label> </li> <li class="settings-item"> <button id="logoutBtn" style="background:none; border:none; color:inherit; font:inherit; cursor:pointer; text-align:left; width:100%;"> <span><i class="fas fa-sign-out-alt"></i> Log Out</span> </button> </li> </ul> </section> <div class="footer-grid-area"></div> </main> <footer class="footer"> <p>,%# <span id="currentYear"></span> SetupGuru.shop</p> <p class="thanks-text">Thanks for being with us</p> </footer> </div> <div class="modal-overlay" id="logoutModal"> <div class="modal-content"> <h3>Confirm Logout</h3> <p>Are you sure you want to log out?</p> <div class="modal-actions"> <button type="button" class="btn btn-secondary" data-close>Cancel</button> <button id="confirmLogoutBtn" class="btn btn-primary">Log Out</button> </div> </div> </div> <script> const firebaseConfig = { apiKey: "AIzaSyAMweRCGXZCfuRvtlVO0acLbKmY4heV08s", authDomain: "setupguru-217af.firebaseapp.com", projectId: "setupguru-217af", storageBucket: "setupguru-217af.firebasestorage.app", messagingSenderId: "377386830551", appId: "1:377386830551:web:39090b0add3f2bc630be92" }; firebase.initializeApp(firebaseConfig); const auth = firebase.auth(); const db = firebase.firestore(); document.addEventListener('DOMContentLoaded', () => { document.getElementById('currentYear').textContent = new Date().getFullYear(); const themeToggle = document.getElementById('themeToggle'); const currentTheme = localStorage.getItem('theme') || 'light'; document.documentElement.setAttribute('data-theme', currentTheme); themeToggle.checked = currentTheme === 'dark'; themeToggle.addEventListener('change', function() { const newTheme = this.checked ? 'dark' : 'light'; document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); }); auth.onAuthStateChanged(user => { if (user) { fetchUserProfile(user.uid); } else { window.location.href = 'login.html'; } }); const fetchUserProfile = async (uid) => { try { const userDoc = await db.collection('users').doc(uid).get(); if (userDoc.exists) { updateProfileUI(userDoc.data()); } else { updateProfileUI({}); } } catch (error) { console.error("Error fetching user data:", error); } }; const updateProfileUI = (data) => { const get = (val, fallback = '-') => val || fallback; document.getElementById('profileName').textContent = get(data.fullName, 'Welcome!'); document.getElementById('infoName').textContent = get(data.fullName); document.getElementById('infoEmail').textContent = get(data.email); document.getElementById('infoMobile').textContent = get(data.mobile); document.getElementById('infoAddress').textContent = get(data.address); document.getElementById('infoJoined').textContent = data.createdAt ? new Date(data.createdAt.seconds * 1000).toLocaleDateString() : '-'; }; const logoutModal = document.getElementById('logoutModal'); document.getElementById('logoutBtn').addEventListener('click', () => logoutModal.classList.add('visible')); logoutModal.addEventListener('click', function(e) { if (e.target === this || e.target.hasAttribute('data-close')) { this.classList.remove('visible'); } }); document.getElementById('confirmLogoutBtn').addEventListener('click', () => { auth.signOut().catch(error => console.error('Sign out error', error)); }); }); </script> </body> </html>