Profile icon added and fixed some css

Va16hav07 · Va16hav07 · commit 51479bc06739 · 2024-12-18T14:01:46.000+05:30
diff --git a/image.png b/image.png
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@ <h2>Create an Account</h2>
         <input type="password" id="password" placeholder="Set a password" required>
         <button id="registerButton">Sign Up</button>
         <div class="redirect">
-            <button id="redirectToLogin">Already have an account? Log In</button>
+            <span>Already have an account? <a href="#" id="redirectToLogin">Log In</a></span>
         </div>
     </div>
     <div id="loginPage" class="container">
@@ -26,10 +26,10 @@ <h2>Log In</h2>
         <input type="password" id="loginPassword" placeholder="Enter your password" required>
         <button id="loginButton">Log In</button>
         <div class="redirect">
-            <button id="redirectToRegister">Don't have an account? Sign Up</button>
+            <span>Don't have an account? <a href="#" id="redirectToRegister">Sign Up</a></span>
         </div>
     </div>
 
     <script src="script.js"></script>
 </body>
-</html>
+</html>
diff --git a/landing.css b/landing.css
@@ -62,7 +62,7 @@ a {
 
 .content {
     margin: 20px auto;
-    width: 90%;
+    width: auto;
     max-width: 900px;
     background-color: #eef2f3;
     background-image: url('https://bestofmotivation.com/wp-content/uploads/2023/03/time-management.png');
@@ -209,34 +209,62 @@ button.delete:hover {
 }
 
 .search-bar {
-    width: 100%;
+    width: 60%; 
+    max-width: 400px;
     padding: 10px;
-    margin: 10px 0 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
-    transition: border-color 0.3s ease;
+    margin: 0 auto;
+    display: block;
 }
 
 .search-bar:focus {
     border-color: #28a745;
     outline: none;
     box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
 }
-.help-button, .about-us-button {
-    background-color: #007bff;
-    color: white;
-    border: none;
-    padding: 10px 20px;
+.profile-icon-container {
+    position: relative;
+    display: inline-block;
+}
+
+.profile-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.dropdown-menu {
+    position: absolute;
+    right: 0;
+    top: 50px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     border-radius: 5px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    min-width: 150px;
+}
+
+.dropdown-menu.hidden {
+    display: none;
+}
+
+.dropdown-item {
+    padding: 10px 15px;
+    border: none;
+    text-align: left;
+    width: 100%;
+    background: none;
     cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.3s ease;
-    margin-left: 10px;
-    font-size: 1rem;
+    font-size: 14px;
 }
 
-.help-button:hover, .about-us-button:hover {
-    background-color: #0056b3;
-    transform: scale(1.05);
+.dropdown-item:hover {
+    background-color: #007bff;
 }
 
 
diff --git a/landing.html b/landing.html
@@ -9,19 +9,21 @@
 <body>
     <div class="top-bar">
         <h1 id="welcomeMessage">Welcome to Your Time Management System</h1>
-        <br />
-        <br />
         <div class="top-bar-right">
-            <a href="profile.html">
-                <button class = "profile-button">Profile</button>
-            </a>
-            <button id="signOutButton" class="sign-out-button">Sign Out</button>
-            </div>    
+            <div class="profile-icon-container">
+                <img src="image.png" alt="Profile Icon" id="profileIcon" class="profile-icon">
+                <div id="dropdownMenu" class="dropdown-menu hidden">
+                    <button class="dropdown-item" onclick="navigateTo('profile.html')">Profile</button>
+                    <button class="dropdown-item" onclick="navigateTo('help.html')">Help</button>
+                    <button class="dropdown-item" onclick="navigateTo('abt.html')">About Us</button>
+                    <button class="dropdown-item" id="signOutButton">Sign Out</button>
+                </div>
+            </div>            
+        </div>
     </div>
     
     <div class="main">
         <main class="content">
-            <h2>Your Tasks</h2>
             <div class="Search">
                 <h2>Search Tasks</h2>
                 <input 
@@ -31,42 +33,21 @@ <h2>Search Tasks</h2>
                   placeholder="Search for a task..." 
                   oninput="filterTasks()">
             </div><br>
-            
-            <!-- Updated task input form -->
+            <h2>Your Tasks</h2>
             <div class="task-input">
-                <input type="text" id="taskInput" placeholder="Add a new task">
+                <input type="text" id="taskInput" placeholder="Add Task title">
                 <input type="text" id="taskDescriptionInput" placeholder="Task Description">
-                
-                <!-- Add Due Date Input -->
                 <input type="date" id="taskDueDate" placeholder="Due Date">
-                
-                <!-- Add Priority Dropdown -->
                 <select id="taskPriority">
                     <option value="low">Low</option>
                     <option value="medium">Medium</option>
                     <option value="high">High</option>
                 </select>
-                
                 <button id="addTaskButton">Add Task</button>
-                
             </div>
-            
-            <ul id="taskList" class="task-list">
-            </ul>
+            <ul id="taskList" class="task-list"></ul>
         </main>
-    </div>
-    <footer>
-        <div class="top-bar">
-            <div class="top-bar-left">
-                <h1>Time Management System</h1>
-            </div>
-            <div class="top-bar-right">
-                <a href="help.html"><button class="help-button">Help</button></a>
-                <a href="abt.html"><button class="about-us-button">About Us</button></a>
-            </div>
-        </div>
-    </footer>
-    
+    </div>    
     <script src="landing.js"></script>
 </body>
-</html>
+</html>
diff --git a/landing.js b/landing.js
@@ -1,4 +1,6 @@
 const welcomeMessage = document.getElementById("welcomeMessage");
+const profileIcon = document.getElementById("profileIcon");
+const dropdownMenu = document.getElementById("dropdownMenu");
 const signOutButton = document.getElementById("signOutButton");
 const taskInput = document.getElementById("taskInput");
 const taskDescriptionInput = document.getElementById("taskDescriptionInput");
@@ -7,8 +9,6 @@ const taskPriority = document.getElementById("taskPriority");
 const addTaskButton = document.getElementById("addTaskButton");
 const taskList = document.getElementById("taskList");
 const searchBar = document.getElementById("searchBar");
-
-// Retrieve the logged-in user safely
 const loggedinUser = JSON.parse(localStorage.getItem("loggedinUser"));
 
 if (loggedinUser) {
@@ -17,16 +17,20 @@ if (loggedinUser) {
     window.location.href = "index.html";
 }
 
-// Profile button logic (ensures only one listener)
-const profileButton = document.querySelector('.profile-button');
-if (profileButton) {
-    profileButton.addEventListener('click', () => {
-        console.log("Navigating to profile.html...");
-        window.location.href = "profile.html";
-    });
+profileIcon.addEventListener("click", (event) => {
+    event.stopPropagation(); 
+    dropdownMenu.classList.toggle("hidden");
+});
+
+document.addEventListener("click", (event) => {
+    if (!dropdownMenu.contains(event.target) && !profileIcon.contains(event.target)) {
+        dropdownMenu.classList.add("hidden");
+    }
+});
+function navigateTo(url) {
+    window.location.href = url;
 }
 
-// Retrieve tasks from localStorage or initialize an empty array
 let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
 
 // Function to save tasks to localStorage
@@ -141,7 +145,7 @@ addTaskButton.addEventListener("click", () => {
         dueDate: taskDueDateValue,
         priority: taskPriorityValue,
         done: false,
-        username: loggedinUser.username // Associate task with the logged-in user
+        username: loggedinUser.username /\
     };
 
     tasks.push(newTask);
diff --git a/script.js b/script.js
@@ -112,3 +112,15 @@ if (redirectToRegisterButton) {
         registerPage.classList.add("active");
     });
 }
+
+document.getElementById('redirectToLogin').addEventListener('click', function(e) {
+    e.preventDefault();  
+    document.getElementById('registerPage').classList.remove('active');
+    document.getElementById('loginPage').classList.add('active');
+});
+
+document.getElementById('redirectToRegister').addEventListener('click', function(e) {
+    e.preventDefault();  
+    document.getElementById('loginPage').classList.remove('active');
+    document.getElementById('registerPage').classList.add('active');
+});
diff --git a/style.css b/style.css
@@ -13,12 +13,13 @@ body {
 
 .container {
     width: 330px;
-    background-color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.2); 
     padding: 24px;
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
     display: none; 
-    margin-right: 85px; 
+    margin-right: 85px;
+    backdrop-filter: blur(2000px);
 }
 
 .container.active {
@@ -53,7 +54,7 @@ body {
 }
 
 .container button:hover {
-    background-color: #5a6268; 
+    background-color: #007bff; 
 }
 
 .message {
