From 69743ea1aeb3d2a2fbae076cf78c45e23adcd164 Mon Sep 17 00:00:00 2001 From: Ankit Kumar <139707943+Kumar-Ankit07@users.noreply.github.com> Date: Wed, 2 Oct 2024 15:58:56 +0530 Subject: [PATCH] Added Profile Page with light and dark mode facility --- index.html | 4 +- profile.html | 52 +++++++++++ profile.js | 41 ++++++++ styles.css | 260 +++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 356 insertions(+), 1 deletion(-) create mode 100644 profile.html create mode 100644 profile.js create mode 100644 styles.css diff --git a/index.html b/index.html index 3b2fc06..7736438 100644 --- a/index.html +++ b/index.html @@ -31,10 +31,12 @@
  • ... +
    Abhrajit Gupta
    @abhrajit_gupta
    -
    + +
    • diff --git a/profile.html b/profile.html new file mode 100644 index 0000000..6fffd61 --- /dev/null +++ b/profile.html @@ -0,0 +1,52 @@ + + + + + + User Profile Page + + + + + +
    +

    User Profile

    +
    +
    +
    +
    + +
    + +
    +
    + +
    + +
    + + +
    +
    + + +
    +
    + + +
    + +
    +
    +
    + + + + diff --git a/profile.js b/profile.js new file mode 100644 index 0000000..3ca4e0c --- /dev/null +++ b/profile.js @@ -0,0 +1,41 @@ + +function loadProfileImage(event) { + const profileImage = document.getElementById('profileImage'); + const file = event.target.files[0]; + + if (file) { + const reader = new FileReader(); + reader.onload = function(e) { + profileImage.src = e.target.result; + }; + reader.readAsDataURL(file); + } +} + +document.getElementById('profileForm').addEventListener('submit', function(event) { + event.preventDefault(); + const name = document.getElementById('name').value; + const email = document.getElementById('email').value; + const bio = document.getElementById('bio').value; + console.log("Profile Updated:", { name, email, bio }); + alert("Profile updated successfully!"); +}); + +// DARK MODE +const themeToggleButton = document.getElementById("themeToggle"); +const body = document.body; +if (localStorage.getItem("theme") === "dark") { + body.classList.add("dark-mode"); + themeToggleButton.textContent = "☀️ "; +} +themeToggleButton.addEventListener("click", () => { + body.classList.toggle("dark-mode"); + + if (body.classList.contains("dark-mode")) { + themeToggleButton.textContent = "☀️"; + localStorage.setItem("theme", "dark"); + } else { + themeToggleButton.textContent = "🌙"; + localStorage.setItem("theme", "light"); + } +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c029921 --- /dev/null +++ b/styles.css @@ -0,0 +1,260 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Poppins', sans-serif; + background-color: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} +body.dark-mode { + background-color: #2c2c2c; + color: #e0e0e0; +} +.navbar { + width: 100%; + background-color: #007bff; + padding: 15px; + position: fixed; + top: 0; + left: 0; + z-index: 1000; +} + +body.dark-mode .navbar { + background-color: #1a1a1a; +} +.navbar ul { + list-style: none; + display: flex; + justify-content: flex-start; + padding-left: 20px; +} + +.navbar ul li { + margin-right: 20px; +} + +.navbar ul li a { + color: white; + text-decoration: none; + font-size: 18px; + padding: 10px 15px; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +.navbar ul li a:hover { + background-color: #0056b3; +} + + +.hover-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + color: white; + font-size: 18px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s ease; +} + +.profile-pic:hover .hover-overlay { + opacity: 1; +} + +.form-group { + margin-bottom: 15px; + text-align: left; +} + +label { + font-weight: bold; + margin-bottom: 5px; + display: block; + color: #333; +} + +input[type="text"], input[type="email"], textarea { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 5px; + transition: border-color 0.3s ease; +} + +input[type="text"]:focus, input[type="email"]:focus, textarea:focus { + border-color: #007bff; + outline: none; +} + +.update-btn { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.update-btn:hover { + background-color: #0056b3; +} +.theme-toggle-btn { + background-color: transparent; + border: none; + color: white; + cursor: pointer; + font-size: 18px; + transition: background-color 0.3s ease; +} + +.theme-toggle-btn:hover { + background-color: #0056b3; +} + +.profile-container { + text-align: center; + width: 100%; + max-width: 500px; + margin-top: 100px; +} + +h1 { + margin-bottom: 20px; + transition: color 0.5s ease; +} + +.profile-card { + background-color: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); + transition: background-color 0.5s ease; +} + +body.dark-mode .profile-card { + background-color: #444; +} + +.profile-pic-container { + position: relative; + width: 150px; + height: 150px; + margin: 0 auto 20px; +} + +.profile-pic { + position: relative; + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; + border: 3px solid #ddd; + transition: transform 0.3s ease; +} + +body.dark-mode .profile-pic { + border-color: #666; +} + +.profile-pic:hover { + transform: scale(1.05); + cursor: pointer; +} + +.profile-pic img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.hover-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + color: white; + font-size: 18px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s ease; +} + +.profile-pic:hover .hover-overlay { + opacity: 1; +} + +.form-group { + margin-bottom: 15px; + text-align: left; +} + +label { + font-weight: bold; + margin-bottom: 5px; + display: block; + color: #333; + transition: color 0.5s ease; +} + +body.dark-mode label { + color: #ddd; +} + +input[type="text"], input[type="email"], textarea { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 5px; + transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; +} + +body.dark-mode input[type="text"], +body.dark-mode input[type="email"], +body.dark-mode textarea { + background-color: #555; + color: #eee; + border-color: #666; +} + +input[type="text"]:focus, input[type="email"]:focus, textarea:focus { + border-color: #007bff; + outline: none; +} + +.update-btn { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.update-btn:hover { + background-color: #0056b3; +} + +body.dark-mode .update-btn { + background-color: #1a1a1a; + color: #fff; +} \ No newline at end of file