diff --git a/assets/css/style.css b/assets/css/style.css index 78265a95..1b940ecf 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -3327,4 +3327,40 @@ transition: background-color 0.3s; } .dropdown-toggle::after { border-top: 1px; -} \ No newline at end of file +} + +.profile-icon { + + border-radius: 50%; + position: relative; + margin-left: 20px; /* Adjust space between Login button and Profile icon */ + +} + +.dropdown-menu { + + display: none; + position: absolute; + top: 35px; /* Adjust based on the height of your navbar */ + right: 0; + background-color: white; + color: black; + border: 1px solid #ccc; + border-radius: 4px; + z-index: 1; + +} + +.dropdown-menu a { + + display: block; + padding: 10px 15px; + text-decoration: none; + +} + +.dropdown-menu a:hover { + + background-color: #f1f1f1; + +} diff --git a/index.html b/index.html index dfac5b11..dc44b2e3 100644 --- a/index.html +++ b/index.html @@ -306,6 +306,22 @@ data-scroll-nav="0" href="./loginPage.html">Login/Register 💻 + +
  • + + Profile Icon + +
    • + + +
  • + + + + +
    + +

    Account Details

    +
    +
    +

    Address

    +

    789 Pine Lane, Austin, TX 73301

    + +
    + +
    +

    Change Password

    +

    *********63

    + +
    + +
    +

    Privacy Settings

    +

    Visibility Status: Public

    + + +
    + +
    +

    Recent Activity

    +

    Updated profile information

    + + +
    + +
    +
    + +
    + +

    Notifications

    +
    +

    Your profile has been updated successfully!

    + + +
    +
    +

    Joshef Roy has sent you a friend request. Accept or decline?

    + + +
    + +
    + + + + \ No newline at end of file diff --git a/testp.css b/testp.css new file mode 100644 index 00000000..20abf82a --- /dev/null +++ b/testp.css @@ -0,0 +1,253 @@ +body { + + font-family: 'Arial', sans-serif; + background: linear-gradient(135deg, #353a5f,#9ebaf3 60%,#353a5f 100%); + margin: 0; + padding: 0; + background-image: url(./assets/images/banner-bg.svg); + +} + +.fa-home { + + position: absolute; + right: 190px; + top: 40px; + font-size: 25px; + color: #33aeaa; + +} + +.fa-home:hover { + + color:#d5ebc7; + +} + +.profile-container { + + max-width: 1200px; + margin: 0 auto; + padding: 20px; + background: linear-gradient(105deg, #00bfff,#150e4e); + border-radius: 8px; + box-shadow: 0 4px 10px rgb(0 0 0 / 40%); + background-image: url(./assets/images/banner-bg.svg); + +} + +.navbar a:hover { + + color: #0056b3; + +} + +.profile-card { + + text-align: left; + margin: 20px 0; + padding: 20px; + /*border: 1px solid #ddd;*/ /* Border for the card */ + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + background: linear-gradient(135deg, #18a5a7, #d9ecc7); + +} + +.profile-image { + + border-radius: 50%; + width: 170px; + height: 170px; + object-fit: cover; + +} + +.profile-name { + + font-size: 24px; + margin: 10px 0; + +} + +.profile-bio { + + font-size: 16px; + color: black; + +} + +.edit-profile-btn { + + background: linear-gradient(to right,#fe8464 0%, #fe6e9a 50%, #fe8464 100%); + color: white; + border: none; + padding: 10px 20px; + cursor: pointer; + border-radius: 5px; + transition: background 0.3s, transform 0.3s; + +} + +.edit-profile-btn:hover { + + background-color: #3700b2; + transform: scale(1.05); + +} + +.edit_profiled{ + + background: linear-gradient(to right,#fe8464 0%, #fe6e9a 50%, #fe8464 100%); + color: white; + border: none; + padding: 10px 20px; + cursor: pointer; + border-radius: 5px; + transition: background 0.3s, transform 0.3s; + position: relative; + right: 40%; + left: 290px; + +} + +.content-section { + + margin: 20px 0; + +} + +.content-section h2 { + + font-size: 22px; + margin-bottom: 10px; + color: white; + +} + +.card { + + background: #f9f9f9; + margin-bottom: 15px; + padding: 15px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + background: linear-gradient(135deg, #18a5a7, #d9ecc7); + +} + +.card h3 { + + font-size: 18px; + margin: 5px 0; + +} + +.card p { + + font-size: 14px; + color: black; + +} + + +.profile-details { + + display: flex; + flex-wrap: wrap; + gap: 20px; + +} + +.profile-detail-card { + + flex: 1; /* Allow cards to grow and fill space */ + min-width: 200px; + background: #f9f9f9; + padding: 15px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + text-align: center; + background: linear-gradient(135deg, #18a5a7, #d9ecc7); + +} + +.nav-links { + + list-style-type: none; + padding: 0; + margin: 0; + text-align: right; + +} + +.home-link { + + float: right; + +} + +.profile-header { + + display: flex; + align-items: center; + +} + +.profile-image { + margin-right: 20px; + margin-left: 50px; + margin-top: 30px; +} + +.profile-info { + + flex: 1; /* Allow this section to take the remaining space */ + margin-left: 50px; + +} + + + +/* Media Queries for Responsiveness */ +@media (max-width: 768px) { + + .navbar ul { + + flex-direction: column; /* Stack navbar items on smaller screens */ + align-items: center; + + } + + .profile-container { + + padding: 10px; /* Reduce padding on smaller screens */ + + } + + .profile-card { + + margin: 10px 0; /* Reduce margin for smaller screens */ + + } + + .content-section h2 { + + font-size: 20px; /* Smaller headings */ + + } + + .edit-profile-btn, .view-order-btn { + + width: 100%; /* Full width buttons */ + padding: 12px; /* Increase padding for easier tapping */ + + } + + .footer { + + font-size: 14px; /* Smaller footer text */ + + } + +} \ No newline at end of file diff --git a/textp.js b/textp.js new file mode 100644 index 00000000..1981c76d --- /dev/null +++ b/textp.js @@ -0,0 +1,33 @@ +// Get current timestamp +const getCurrentTimestamp = () => { + return new Date().getTime(); + }; + + // Store last active timestamp in LocalStorage + const storeLastActive = () => { + const lastActive = getCurrentTimestamp(); + localStorage.setItem('lastActive', lastActive); + }; + + // Get last active timestamp from LocalStorage + const getLastActive = () => { + return localStorage.getItem('lastActive'); + }; + + // Update last active timestamp on page load and interaction + document.addEventListener('DOMContentLoaded', storeLastActive); + document.addEventListener('click', storeLastActive); + document.addEventListener('scroll', storeLastActive); + document.addEventListener('keydown', storeLastActive); + + // Example usage: + const displayLastActive = () => { + const lastActive = getLastActive(); + const formattedTime = new Date(parseInt(lastActive)).toLocaleString(); + document.getElementById('last-active').innerHTML = Last active: ${formattedTime}; + }; + + displayLastActive(); + + + \ No newline at end of file