Enhance UI and functionality: added quick links sidebar, improved avatar management, and refined login form validation

Author: Syed-Muhammad-Ali-git

README.md

@@ -0,0 +1,79 @@
+# Social Network Web Application
+
+## Project Overview
+
+This is a simple social network web application prototype that enables user registration, login, posting content (text and images), commenting, liking posts, and managing user avatars. It is a client-side application that uses localStorage for data persistence.
+
+## Main Features
+
+- User Registration and Login with form validation
+- User session maintained via localStorage
+- Create posts with text and optional image upload
+- View posts with author info, timestamps, likes, and comments
+- Edit and delete posts and comments owned by the current user
+- Upload and remove user profile avatars
+- Quick Links sidebar for navigation
+- Responsive layout with sidebar toggling on small screens
+- Notifications and confirmation dialogs using SweetAlert2
+- Simple time ago formatting for post timestamps
+
+## Project Structure
+
+### HTML
+
+- `index.html`: Main landing page showing user’s feed and post creation UI.
+- `loginform/login.html`: Login form page (scripts included here for login form handling).
+- `sign-inform/signin.html`: Signup form page (scripts included here for registration handling).
+
+### CSS
+
+- All CSS files are under `assets/css/`
+- `style.css`: Main stylesheet for the application styling.
+- `login.css` and `signup.css`: Styles for login and signup pages respectively.
+
+### JavaScript
+
+- `assets/js/app.js`: Main application logic for home page, including posts, comments, avatars, UI behaviors.
+- `assets/js/login.js`: Handles login page form validation and submission.
+- `assets/js/signin.js`: Handles signup page form validation and submission.
+
+### Libraries
+
+- Bootstrap for responsive styling and UI components.
+- Font Awesome for icons.
+- SweetAlert2 for modals and alerts.
+
+## How It Works
+
+- When a user visits the login page, they can enter their credentials to log in or navigate to the signup page.
+- On signup, user data is saved to localStorage and the user is auto-logged in.
+- Upon successful login, users are redirected to the main page (`index.html`).
+- Users can create posts with text and images. Posts are saved in localStorage.
+- Users can like, comment, edit, and delete their own posts and comments.
+- User profile avatars can be uploaded, previewed, and removed.
+- Posts display author info and timestamps formatted as relative time (e.g., "2 hours ago").
+- UI includes responsive navigation and sidebar toggling for better usability on small devices.
+
+## How to Run
+
+1. Open `loginform/login.html` in a browser to log in.
+2. Open `sign-inform/signin.html` to register a new account.
+3. After logging in, `index.html` serves as the main application screen.
+4. No backend server is required; this is a fully client-side app using browser localStorage.
+
+## Notes
+
+- All data is stored locally in the browser's localStorage; refreshing or clearing browser data will erase users and posts.
+- Image uploads are handled as base64 data URLs stored in localStorage.
+- This is a prototype and not meant for production use.
+
+## Future Improvements
+
+- Implement server-side backend and database for persistence.
+- Add real authentication and security features.
+- Improve UI/UX and accessibility.
+- Add friend and notification systems.
+
+---
+
+_Created by AliMazhar (example author), Social Network Demo Project._

assets/css/style.css

@@ -1,4 +1,18 @@
 /* Global Styles */
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ padding-top: 56px;
+}
+
 :root {
  --primary-color: #344F7E;
  --secondary-color: #273A5C;
@@ -43,18 +57,7 @@
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;
 }
 
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
 
-body {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- background-color: var(--bg-color);
- color: var(--text-color);
- padding-top: 56px;
-}
 
 /* Navigation */
 .navbar {
@@ -590,6 +593,27 @@ body {
  max-height: 350px;
  overflow-y: auto;
  padding: 5px 0;
+ user-select: text;
+ /* To control color of selected text */
+}
+
+.comments-list::selection,
+.comments-list *::selection {
+ background-color: transparent;
+ /* Prevent blue highlight on selection */
+}
+
+.comment-menu {
+ position: absolute;
+ right: 0;
+ top: 3px;
+ /* Moved further up from 8px */
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ min-width: 130px;
+ z-index: 1000;
+ overflow: hidden;
 }
 
 .comment-item {
@@ -670,7 +694,7 @@ body {
 .comment-menu {
  position: absolute;
  right: 0;
- top: 25px;
+ top: 8px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -679,6 +703,16 @@ body {
  overflow: hidden;
 }
 
+.comment-text:hover {
+ text-decoration: none;
+ color: inherit;
+ outline: none;
+}
+
+.comment-text:focus {
+ outline: none;
+}
+
 .comment-menu button {
  width: 100%;
  padding: 10px 14px;
@@ -734,12 +768,38 @@ body {
  .sidebar {
  padding: 0 10px;
  }
+
+ /* Quick Links Sidebar toggle styles for small screens */
+ #quickLinksSidebar.d-none {
+ display: none !important;
+ }
+
+ #quickLinksSidebar.d-block {
+ position: fixed !important;
+ top: 56px;
+ /* height of navbar */
+ left: 0;
+ height: calc(100vh - 56px);
+ width: 250px;
+ background-color: #fff;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+ overflow-y: auto;
+ z-index: 1050;
+ padding: 1rem;
+ }
+
+ /* Make sure main container has some left margin when sidebar visible */
+ body:not(.quickLinksOpen) #quickLinksSidebar.d-block+.main-container {
+ margin-left: 0;
+ }
 }
 
 @media (max-width: 768px) {
  .main-container {
- padding: 0 5px; /* Reduce horizontal padding to avoid horizontal scroll caused by Bootstrap row negative margins */
- overflow-x: hidden; /* Prevent horizontal overflow */
+ padding: 0 5px;
+ /* Reduce horizontal padding to avoid horizontal scroll caused by Bootstrap row negative margins */
+ overflow-x: hidden;
+ /* Prevent horizontal overflow */
  }
 
  .feed-container {

assets/js/app.js

@@ -24,6 +24,9 @@ function init() {
  // Display user info
  displayUserInfo();
 
+ // Show or hide the remove avatar button
+ toggleRemoveAvatarBtn();
+
  // Load posts from localStorage
  loadPosts();
 
@@ -33,6 +36,12 @@ function init() {
  // Set up avatar upload handler
  setupAvatarUpload();
 
+ // Setup quick links sidebar toggle button
+ setupQuickLinksToggle();
+
+ // Setup remove avatar button click
+ setupRemoveAvatarBtn();
+
  // Close menus when clicking outside
  document.addEventListener("click", function (e) {
  // Close post menus
@@ -48,6 +57,86 @@ function init() {
  });
  }
  });
+
+ // Toggle Quick Links sidebar visibility on small screens
+ function setupQuickLinksToggle() {
+ const toggleBtn = document.getElementById("quickLinksToggleBtn");
+ const quickLinksSidebar = document.getElementById("quickLinksSidebar");
+ if (toggleBtn && quickLinksSidebar) {
+ toggleBtn.addEventListener("click", () => {
+ if (quickLinksSidebar.classList.contains("d-none")) {
+ quickLinksSidebar.classList.remove("d-none");
+ quickLinksSidebar.classList.add(
+ "d-block",
+ "position-fixed",
+ "bg-white",
+ "shadow",
+ "vh-100",
+ "overflow-auto"
+ );
+ quickLinksSidebar.style.top = "56px"; // below navbar
+ quickLinksSidebar.style.left = "0";
+ quickLinksSidebar.style.zIndex = "1050";
+ document.body.style.overflow = "hidden"; // prevent body scroll
+ } else {
+ quickLinksSidebar.classList.add("d-none");
+ quickLinksSidebar.classList.remove(
+ "d-block",
+ "position-fixed",
+ "bg-white",
+ "shadow",
+ "vh-100",
+ "overflow-auto"
+ );
+ quickLinksSidebar.style.top = "";
+ quickLinksSidebar.style.left = "";
+ quickLinksSidebar.style.zIndex = "";
+ document.body.style.overflow = ""; // restore scroll
+ }
+ });
+ }
+ }
+
+ // Show or hide remove avatar button
+ function toggleRemoveAvatarBtn() {
+ const avatar = localStorage.getItem(`avatar_${currentUser.email}`);
+ const removeBtn = document.getElementById("removeAvatarBtn");
+ if (removeBtn) {
+ removeBtn.style.display = avatar ? "block" : "none";
+ }
+ }
+
+ // Setup remove avatar button event handler
+ function setupRemoveAvatarBtn() {
+ const removeBtn = document.getElementById("removeAvatarBtn");
+ if (removeBtn) {
+ removeBtn.addEventListener("click", () => {
+ Swal.fire({
+ title: "Remove Avatar?",
+ text: "Are you sure you want to remove your profile avatar?",
+ icon: "warning",
+ showCancelButton: true,
+ confirmButtonColor: "#d33",
+ cancelButtonColor: "#344F7E",
+ confirmButtonText: "Yes, remove it!",
+ cancelButtonText: "Cancel",
+ }).then((result) => {
+ if (result.isConfirmed) {
+ localStorage.removeItem(`avatar_${currentUser.email}`);
+ displayAvatar();
+ toggleRemoveAvatarBtn();
+ Swal.fire({
+ icon: "success",
+ title: "Avatar removed!",
+ confirmButtonColor: "#344F7E",
+ timer: 1500,
+ showConfirmButton: false,
+ });
+ }
+ });
+ });
+ }
+ }
 }
 
 // Display user information
@@ -145,11 +234,12 @@ function setupImageUpload() {
  }
 }
 
-// Load posts from localStorage
+// Load posts from localStorage and filter posts by current user
 function loadPosts() {
  const savedPosts = localStorage.getItem("posts");
  if (savedPosts) {
- posts = JSON.parse(savedPosts);
+ const allPosts = JSON.parse(savedPosts);
+ posts = allPosts.filter((post) => post.author.email === currentUser.email);
  } else {
  posts = [];
  }