diff --git a/index.html b/index.html index 39ed6b64..60aac05c 100644 --- a/index.html +++ b/index.html @@ -382,19 +382,38 @@

WordWise

Contact Us Give Feedback +
- - - - + + + Profile Icon + + + -
- + + +
diff --git a/profile.html b/profile.html new file mode 100644 index 00000000..fe6803f9 --- /dev/null +++ b/profile.html @@ -0,0 +1,97 @@ + + + + + + + + + + + + + Profile Page + + + + + +
+ +
+

Your Profile

+ + + +
+
+ Profile Image + +
+

Skylar Reed

+

Email: skylar.reed@example.com

+

Phone: +987 654 3210

+

Joined: October 31, 2024

+

About Me: Hello!🙋🏻‍♂️ Join me as we explore the world together—one destination at a time! 😎

+

Last active: 31/10/2024, 11:12 PM

+ +
+ +
+ + +
+
+ +
+ +

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?

+ + +
+ +
+ + + + diff --git a/style.css b/style.css index 0fe90374..22541e62 100644 --- a/style.css +++ b/style.css @@ -3858,4 +3858,40 @@ h1 + p, p + p { } .containerNumbers p { color: white; +} + +.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; + } \ No newline at end of file diff --git a/testp.css b/testp.css new file mode 100644 index 00000000..f18cc51b --- /dev/null +++ b/testp.css @@ -0,0 +1,251 @@ +body { + + font-family: 'Arial', sans-serif; + background: #f4ede3; + margin: 0; + padding: 0; + /*background-image: url(./assets/images/banner-bg.svg);*/ + +} + +.fa-home { + + position: absolute; + right: 190px; + top: 40px; + font-size: 25px; + color: #333333; + +} + +.fa-home:hover { + + color:#000000; + +} + +.profile-container { + + max-width: 1200px; + margin: 0 auto; + padding: 20px; + background: rgb(244 237 227); + border-radius: 8px; + box-shadow: 0 4px 10px rgb(0 0 0 / 40%); + +} + +.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: #f8b5b5; + +} + +.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: rgb(51 51 51); + 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: #000000; + transform: scale(1.05); + +} + +.edit_profiled{ + + background: rgb(51 51 51); + 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: rgb(51 51 51); + +} + +.card { + + margin-bottom: 15px; + padding: 15px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + background: #f8b5b5; + +} + +.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; + padding: 15px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + text-align: center; + background: #f8b5b5; + +} + +.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 */ + + } + +} + diff --git a/testp.js b/testp.js new file mode 100644 index 00000000..891c89ec --- /dev/null +++ b/testp.js @@ -0,0 +1,32 @@ +// 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(); + +