user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Profile | FUTA Library</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <style>
        body {
            background: #7c5582;
            font-family: 'Poppins', Arial, sans-serif;
            margin: 0;
            color: #222;
        }
       
        
        .user-container {
            margin-left: 120px;
            margin-top: 40px;
            display: flex;
            gap: 32px;
        }
        .user-card {
            background: #fff;
            border-radius: 24px;
            width: 340px;
            min-width: 340px;
            padding: 32px 0 24px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 4px 32px rgba(0,0,0,0.08);
        }
        .user-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 18px;
            border: 4px solid #bba2d3;
        }
        .user-name {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 2px;
            text-align: center;
        }
        .user-role {
            font-size: 16px;
            color: #6d3a8c;
            font-weight: 500;
            margin-bottom: 12px;
            text-align: center;
        }
        .user-info-btn {
            background: #bba2d3;
            color: #222;
            border: none;
            border-radius: 12px;
            padding: 8px 24px;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .user-links {
            width: 80%;
            margin-top: 8px;
        }
        .user-links .link {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #222;
            font-size: 15px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .user-links .link i {
            color: #6d3a8c;
            font-size: 18px;
        }
        .user-links .link.logout {
            color: #a94442;
        }
        .profile-section {
            background: #fff;
            border-radius: 24px;
            flex: 1;
            padding: 32px 40px 32px 40px;
            box-shadow: 0 4px 32px rgba(0,0,0,0.08);
      max-width: 850px;
        }
        .profile-section h2 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 18px;
        }
        .profile-row {
            display: flex;
            gap: 24px;
            margin-bottom: 18px;
        }
        .profile-group {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .profile-label {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        .profile-input {
            background: #f3f0f4;
            border: none;
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 16px;
            color: #222;
            width: 91%;
        }
        .profile-radio-group {
            display: flex;
            gap: 18px;
            margin-bottom: 18px;
        }
        .profile-radio-group label {
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }
        .profile-radio-group input[type="radio"] {
            accent-color: #6d3a8c;
            margin-right: 4px;
        }
        .profile-actions {
           
            display: flex;
           margin-right: 50px;
            gap: 16px;
            margin-top: 32px;
            justify-content: flex-end;
        }
        .profile-actions button {
            background: #bba2d3;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px 32px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
       .profile-actions button:hover {
            background: #6d3a8c;
        }
        
       
    </style>
</head>
<body>
     <div class="sidebar">
       <a href="welcome.html" title="Welcome"> <img src="logo.png" alt="Library Logo" /></a>
        <div class="nav">
            <a href="home.html" title="Home">
                <button>
                    <i class="fa-solid fa-house"></i>
                </button>
            </a>
            <a href="resource.html" title="resource">
                <button>
                    <i class="fa-solid fa-book"></i>
                </button>
            </a>
            <a href="cart.html" title="Cart">
                <button>
                   <i class="fa-regular fa-cart-shopping"></i>
                </button>
            </a>
            <a href="user.html" title="Profile">
                <button>
                    <i class="fa-solid fa-user"></i>
                </button>
            </a>
        </div>
                 <!-- <button id="toggle-mode" title="Toggle light/dark mode"> -->
                <!-- <i class="fa-solid fa-circle-half-stroke"></i> -->
            <!-- </button> -->
        </div>
    </div>
    <div class="user-container">
        <!-- Profile Card -->
        <div class="user-card">
            <label for="avatar-upload" style="cursor:pointer;">
                <img src="zorak.png" alt="User Avatar" class="user-avatar" id="profile-img" />
                <input type="file" id="avatar-upload" accept="image/*" style="display:none;">
                <span style="position:absolute;top:110px;right:110px;background:#bba2d3;border-radius:50%;padding:4px;cursor:pointer;">
                    <i class="fa-solid fa-pen" style="color:#6d3a8c;font-size:16px;"></i>
                </span>
            </label>
            <div class="user-name" id="display-name">John Doe</div>
            <div class="user-role">Student <i class="fa-solid fa-circle-check" style="color:#6d3a8c;font-size:14px;"></i></div>
            <div class="user-links">
                <div class="link active" id="personal-info-link">
                    <i class="fa-solid fa-user"></i> Personal Information
                </div>
                <div class="link" id="login-password-link">
                    <i class="fa-solid fa-lock"></i> Login & Password
                </div>
                <div class="link logout"><i class="fa-solid fa-arrow-right-from-bracket"></i> Log out</div>
            </div>
        </div>
        <!-- Personal Info Section -->
        <div class="profile-section" id="profile-section">
            <h2>Personal Information</h2>
            <div class="profile-radio-group">
                <label><input type="radio" name="gender" checked> Male</label>
                <label><input type="radio" name="gender"> Female</label>
            </div>
            <div class="profile-row">
                <div class="profile-group">
                    <div class="profile-label">First Name</div>
                    <input class="profile-input" type="text" id="first-name" placeholder="John" style="width: 80%;" />
                </div>
                <div class="profile-group">
                    <div class="profile-label">Last Name</div>
                    <input class="profile-input" type="text" id="last-name" placeholder="Doe" style="width: 80%;" />
                </div>
            </div>
            <div class="profile-row">
                <div class="profile-group" style="flex:2;">
                    <div class="profile-label">Email</div>
                    <input class="profile-input" type="email" id="email" placeholder="JohnDoe@example.com" />
                </div>
            </div>
            <div class="profile-row">
                <div class="profile-group">
                    <div class="profile-label">Matric Number</div>
                    <input class="profile-input" type="text" id="matric" placeholder="ifs/69/0690" />
                </div>
            </div>
            <div class="profile-row">
                <div class="profile-group">
                    <div class="profile-label">Phone Number</div>
                    <input class="profile-input" type="text" id="phone" placeholder="+234 123456789" style="width: 80%;" />
                </div>
                <div class="profile-group">
                    <div class="profile-label">Date of birth</div>
                    <input class="profile-input" type="date" id="dob" placeholder="01/01/6900" style="width: 80%;" />
                </div>
            </div>
            <div class="profile-actions">
                <button id="reset-btn">Reset</button>
                <button id="save-btn">Save Changes</button>
            </div>
        </div>
        <!-- Forgot Password Section (hidden by default) -->
        <div class="profile-section" id="forgot-section" style="display:none;">
            <div style="text-align:center;">
                <img src="logo.png" alt="Library Logo" style="width:90px;margin-bottom:10px;" />
                <!-- <h2 style="margin-bottom:0;">ALBERT<br>ILEMOBADE<br>LIBRARY</h2> -->
                <div style="margin:18px 0;">
                    <button style="background:#bba2d3;border:none;border-radius:50%;width:40px;height:40px;">
                        <i class="fa-solid fa-question" style="color:#6d3a8c;font-size:22px;"></i>
                    </button>
                </div>
                <h2 style="font-size:2em;margin-bottom:0;">Forgot Password?</h2>
                <div style="color:#666;margin-bottom:18px;">Don't worry . We'll send you reset instruction</div>
            </div>
            <form id="forgot-form" style="margin-top:10px;display:flex;flex-direction:column;align-items:center;">
                <div style="width:100%;margin-bottom:18px;">
                    <label style="font-weight:500;display:block;text-align:left;margin-bottom:8px;">Email</label>
                    <input type="email" placeholder="johndoe@sample.com" style="width:100%;background:#ece8ee;border:none;border-radius:8px;padding:12px 16px;font-size:16px;" />
                </div>
                <button type="submit" id="send-reset-btn" style="width:100%;background:#7c5582;color:#fff;border:none;border-radius:8px;padding:12px 0;font-size:16px;font-weight:600;margin-bottom:10px;">
                    Send Password Reset Link
                </button>
            </form>
            <div style="display:flex;justify-content:space-between;margin-top:8px;">
                <a href="#" id="back-to-login" style="color:#222;text-decoration:none;font-size:15px;">
                    <i class="fa-solid fa-arrow-left"></i> Back to login
                </a>
                <a href="#" style="color:#7c5582;text-decoration:none;font-size:15px;">Resend</a>
            </div>
        </div>
    </div>
    <!-- Add the modal for "Linked Sent" -->
<div id="reset-modal" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.25);z-index:9999;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:18px;max-width:500px;width:90vw;padding:48px 32px;text-align:center;box-shadow:0 4px 32px rgba(0,0,0,0.12);margin:auto;">
        <img src="logo.png" alt="Library Logo" style="width:90px;margin-bottom:10px;" />
        <h2 style="font-size:2em;margin-bottom:0;">Linked Sent</h2>
        <div style="color:#666;margin-bottom:18px;margin-top:18px;">
            Click the link we’ve sent to your email to reset your password.<br>
            Follow the on-screen steps to create a new one and regain access to your account.
        </div>
        <button id="home-btn" style="background:#6d3a8c;color:#fff;border:none;border-radius:8px;padding:14px 0;width:70%;font-size:1.5em;font-weight:600;cursor:pointer;">Home</button>
    </div>
</div>
    <script>
   

    
        const personalInfoLink = document.getElementById('personal-info-link');
        const loginPasswordLink = document.getElementById('login-password-link');
        const profileSection = document.getElementById('profile-section');
        const forgotSection = document.getElementById('forgot-section');

        personalInfoLink.addEventListener('click', function() {
            personalInfoLink.classList.add('active');
            loginPasswordLink.classList.remove('active');
            profileSection.style.display = '';
            forgotSection.style.display = 'none';
        });

        loginPasswordLink.addEventListener('click', function() {
            loginPasswordLink.classList.add('active');
            personalInfoLink.classList.remove('active');
            profileSection.style.display = 'none';
            forgotSection.style.display = '';
        });

        document.getElementById('back-to-login').addEventListener('click', function(e) {
            e.preventDefault();
            personalInfoLink.classList.add('active');
            loginPasswordLink.classList.remove('active');
            profileSection.style.display = '';
            forgotSection.style.display = 'none';
        });

        // Show modal on password reset
        document.getElementById('forgot-form').addEventListener('submit', function(e) {
            e.preventDefault();
            document.getElementById('reset-modal').style.display = 'flex';
        });

        document.getElementById('home-btn').addEventListener('click', function() {
            document.getElementById('reset-modal').style.display = 'none';
        });

        // Reset button logic
        document.getElementById('reset-btn').addEventListener('click', function() {
            document.getElementById('first-name').value = '';
            document.getElementById('last-name').value = '';
            document.getElementById('email').value = '';
            document.getElementById('matric').value = '';
            document.getElementById('phone').value = '';
            document.getElementById('dob').value = '';
        });

        // Save changes logic
        document.getElementById('save-btn').addEventListener('click', function() {
            const fname = document.getElementById('first-name').value.trim();
            const lname = document.getElementById('last-name').value.trim();
            // const email = document.getElementById('email').value.trim();
            // const matric = document.getElementById('matric').value.trim();
            // const phone = document.getElementById('phone').value.trim();
            // const dob = document.getElementById('dob').value;

            // Update name
            document.getElementById('display-name').textContent = (fname + ' ' + lname).trim();

            // Update other profile info (add these elements in your .user-card if you want them visible)
            // let emailElem = document.getElementById('profile-email');
            // if (!emailElem) {
            //     emailElem = document.createElement('div');
            //     emailElem.id = 'profile-email';
            //     emailElem.style.fontSize = '15px';
            //     emailElem.style.marginBottom = '2px';
            //     document.querySelector('.user-card').appendChild(emailElem);
            // }
            // emailElem.textContent = email;

            // let matricElem = document.getElementById('profile-matric');
            // if (!matricElem) {
            //     matricElem = document.createElement('div');
            //     matricElem.id = 'profile-matric';
            //     matricElem.style.fontSize = '15px';
            //     matricElem.style.marginBottom = '2px';
            //     document.querySelector('.user-card').appendChild(matricElem);
            // }
            // matricElem.textContent = matric;

            // let phoneElem = document.getElementById('profile-phone');
            // if (!phoneElem) {
            //     phoneElem = document.createElement('div');
            //     phoneElem.id = 'profile-phone';
            //     phoneElem.style.fontSize = '15px';
            //     phoneElem.style.marginBottom = '2px';
            //     document.querySelector('.user-card').appendChild(phoneElem);
            // }
            // phoneElem.textContent = phone;

            // let dobElem = document.getElementById('profile-dob');
            // if (!dobElem) {
            //     dobElem = document.createElement('div');
            //     dobElem.id = 'profile-dob';
            //     dobElem.style.fontSize = '15px';
            //     dobElem.style.marginBottom = '2px';
            //     document.querySelector('.user-card').appendChild(dobElem);
            // }
            // dobElem.textContent = dob;
        });

        // Profile image upload logic
        const avatarUpload = document.getElementById('avatar-upload');
        const profileImg = document.getElementById('profile-img');
        avatarUpload.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if(file) {
                const reader = new FileReader();
                reader.onload = function(evt) {
                    profileImg.src = evt.target.result;
                    localStorage.setItem('profileImg', evt.target.result);
                };
                reader.readAsDataURL(file);
            }
        });
        // Load saved image if exists
        window.addEventListener('DOMContentLoaded', function() {
            const savedImg = localStorage.getItem('profileImg');
            if(savedImg) profileImg.src = savedImg;
        });
    </script>
</body>
</html>