From 2f4ef9b865063ade515f2a583fe81a290c29a3a8 Mon Sep 17 00:00:00 2001 From: Subhajit-2023-44 Date: Tue, 5 Nov 2024 18:03:07 +0530 Subject: [PATCH] done --- index.html | 60 ++++++++++++ profile.html | 105 +++++++++++++++++++++ testp.css | 253 +++++++++++++++++++++++++++++++++++++++++++++++++++ testp.js | 37 ++++++++ 4 files changed, 455 insertions(+) create mode 100644 profile.html create mode 100644 testp.css create mode 100644 testp.js diff --git a/index.html b/index.html index 14cd8e7..d169eec 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,47 @@ + diff --git a/profile.html b/profile.html new file mode 100644 index 0000000..3a91aad --- /dev/null +++ b/profile.html @@ -0,0 +1,105 @@ + + + + + + + + + + + + + Profile Page + + + + + +
+ +
+

Your Profile

+ + + +
+
+ Profile Image + +
+

Joan Reed

+

Role: Patient

+

Email: Joan.reed@example.com

+

Phone: +987 654 3210

+

Emergency Contact: +983 928 1988

+

Date of Birth: 02/02/02

+

Gender: Male

+

Preferred Language: Hindi

+

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

+ + +
+ +
+

Medical History

+

Last Checkup: October 2024

+ + +
+ +
+
+ +
+ +

Notifications

+
+

[October 31, 2024] You have an upcoming appointment with Dr. Jane Smith on November 03, 2024.

+ + +
+
+

[October 30, 2024] Your annual check-up was successful. Please continue your current medication and schedule a follow-up appointment in 6 months.

+ + +
+
+

[October 29, 2024] Your profile has been updated successfully!

+ + +
+ +
+ + + + diff --git a/testp.css b/testp.css new file mode 100644 index 0000000..ac108d2 --- /dev/null +++ b/testp.css @@ -0,0 +1,253 @@ +body { + + font-family: 'Arial', sans-serif; + background: #e4eaf1; + margin: 0; + padding: 0; + background-image: url(./assets/images/banner-bg.svg); + +} + +.fa-home { + + position: absolute; + right: 190px; + top: 40px; + font-size: 25px; + color: #0560c2; + +} + +.fa-home:hover { + + color:#5875b3; + +} + +.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: #abd4fc; + +} + +.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: #0560c2; + 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: #5875b3; + transform: scale(1.05); + +} + +.edit_profiled{ + + background: #0560c2; + 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: #2980b9; + +} + +.card { + + margin-bottom: 15px; + padding: 15px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + background: #abd4fc; + +} + +.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: #abd4fc; + +} + +.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 0000000..d9ddcda --- /dev/null +++ b/testp.js @@ -0,0 +1,37 @@ +// 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(); + +