Added Profile Page with light and dark mode facility

abhrajit2004 · Oct 2, 2024 · 69743ea · 69743ea
1 parent 6873259
commit 69743ea
Show file tree

Hide file tree

Showing 4 changed files with 356 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -31,10 +31,12 @@
                     </li>
                     <li class="flex items-center gap-3 w-fit hover:bg-gray-900 cursor-pointer p-4 hover:rounded-full transition-all">
                             <img class="rounded-full" src="dp.jpg" alt="...">
+                        <a href="profile.html">
                             <div class="aboutitem">
                                 <div class="font-bold">Abhrajit Gupta</div>
                                 <div class="text-sm text-gray-500">@abhrajit_gupta</div>
-                            </div>                
+                            </div>   
+                        </a>             
                     </li>
                 </ul>
             </div>

diff --git a/profile.html b/profile.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Profile Page</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body class="light-mode"> 
+
+    <nav class="navbar">
+        <ul>
+            <li><a href="index.html" class="home-btn">Home</a></li>
+            <li>
+                <button id="themeToggle" class="theme-toggle-btn">🌙 </button>
+            </li>
+        </ul>
+    </nav>
+    <div class="profile-container">
+        <h1>User Profile</h1>
+        <div class="profile-card">
+            <form id="profileForm">
+                <div class="profile-pic-container">
+                    <div class="profile-pic">
+                        <img src="dp.jpg" alt="" id="profileImage">
+                        <div class="hover-overlay">
+                            <label for="profilePicInput">Change Picture</label>
+                        </div>
+                    </div>
+                    <input type="file" id="profilePicInput" accept="image/*" onchange="loadProfileImage(event)" style="display:none;">
+                </div>
+
+                <div class="form-group">
+                    <label for="name">Name:</label>
+                    <input type="text" id="name" value="Abhrajit Gupta">
+                </div>
+                <div class="form-group">
+                    <label for="email">Email:</label>
+                    <input type="email" id="email" value="john.@abhrajit_gupta.com">
+                </div>
+                <div class="form-group">
+                    <label for="bio">Bio:</label>
+                    <textarea id="bio" rows="4">I am a web developer who loves to build amazing websites.</textarea>
+                </div>
+                <button type="submit" class="update-btn">Update Profile</button>
+            </form>
+        </div>
+    </div>
+
+    <script src="profile.js"></script>
+</body>
+</html>
diff --git a/profile.js 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
@@ -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;
+}