").addClass("recent-item").html(`
98 |
103 |
${user.name}
104 |
105 | `);
106 | listItem.data("user", user);
107 | $recentList.append(listItem);
108 | });
109 | }
110 |
111 | function displayNoResults() {
112 | $recentList.html('
No results found
');
113 | }
114 |
115 | function displayError() {
116 | $recentList.html(
117 | '
An error occurred. Please try again.
'
118 | );
119 | }
120 |
121 | function clearResults() {
122 | $recentList.empty();
123 | }
124 |
125 | function handleScroll() {
126 | const scrollTop = $recentList.scrollTop();
127 | const scrollHeight = $recentList[0].scrollHeight;
128 | const clientHeight = $recentList.height();
129 |
130 | if (
131 | scrollTop + clientHeight >= scrollHeight - 5 &&
132 | !isLoading &&
133 | hasMoreResults
134 | ) {
135 | console.log("Loading more results");
136 | fetchAndDisplayResults();
137 | }
138 | }
139 |
140 | function handleResultClick(event) {
141 | const $clickedItem = $(event.currentTarget);
142 | const userData = $clickedItem.data("user");
143 |
144 | if (userData) {
145 | saveRecentSearch(userData);
146 | localStorage.setItem("selectedFriendEmail", userData.email);
147 |
148 | const $iframe = $(window.parent.document).find(
149 | "#homePage .homeWallComponent iframe"
150 | );
151 |
152 | $iframe.attr(
153 | "src",
154 | "../components/pages/wall/myFriendPostWallComponent.html"
155 | );
156 | }
157 | }
158 |
159 | function handleRemoveClick(event) {
160 | event.stopPropagation();
161 | const $clickedItem = $(event.target).closest(".recent-item");
162 | const userData = $clickedItem.data("user");
163 |
164 | if (userData) {
165 | removeRecentSearch(userData);
166 | $clickedItem.remove();
167 | }
168 | }
169 |
170 | function saveRecentSearch(userData) {
171 | let recentSearches = JSON.parse(
172 | localStorage.getItem("recentSearches") || "[]"
173 | );
174 |
175 | const idExists = recentSearches.some((user) => user.name === userData.name);
176 |
177 | if (!idExists) {
178 | if (recentSearches.length === 5) {
179 | recentSearches.shift();
180 | }
181 | recentSearches.push(userData);
182 | localStorage.setItem("recentSearches", JSON.stringify(recentSearches));
183 | }
184 | }
185 |
186 | function removeRecentSearch(userData) {
187 | let recentSearches = JSON.parse(
188 | localStorage.getItem("recentSearches") || "[]"
189 | );
190 | recentSearches = recentSearches.filter(
191 | (user) => user.name !== userData.name
192 | );
193 | localStorage.setItem("recentSearches", JSON.stringify(recentSearches));
194 | }
195 |
196 | function showRecentSearches() {
197 | const recentSearches = JSON.parse(
198 | localStorage.getItem("recentSearches") || "[]"
199 | );
200 | clearResults();
201 | if (recentSearches.length > 0) {
202 | $recentContainer.find("h2").text("Recent");
203 | displayResults(recentSearches.reverse());
204 | } else {
205 | displayNoResults();
206 | }
207 | }
208 |
209 | initEventListeners();
210 | showRecentSearches();
211 | });
212 |
213 | function getJwtToken() {
214 | const cookies = document.cookie.split("; ");
215 | for (let cookie of cookies) {
216 | if (cookie.startsWith("jwt=")) {
217 | return cookie.split("=")[1];
218 | }
219 | }
220 | return null;
221 | }
222 |
--------------------------------------------------------------------------------
/controller/Registrationform2Controller.js:
--------------------------------------------------------------------------------
1 | // ====== Profile Picture Upload ======
2 | const profileDropArea = document.getElementById("propic-drop-area");
3 | const profileInputFile = document.getElementById("profile-input-file");
4 | const profileImgView = document.getElementById("profile-img-view");
5 |
6 | profileInputFile.addEventListener("change", displayProfilePicture);
7 |
8 | // Drag & drop
9 | profileDropArea.addEventListener("dragover", function (e) {
10 | e.preventDefault();
11 | });
12 |
13 | profileDropArea.addEventListener("drop", function (e) {
14 | e.preventDefault();
15 | profileInputFile.files = e.dataTransfer.files;
16 | displayProfilePicture();
17 | });
18 |
19 | // Applying border style on click
20 | let profilePictureContainer = document.getElementById("profile-pic-container");
21 |
22 | document.querySelector("#profile-input-file").onclick = function () {
23 | profilePictureContainer.style.border = "2px solid #E90708";
24 | };
25 |
26 | document.addEventListener("click", function (event) {
27 | if (
28 | !profilePictureContainer.contains(event.target) &&
29 | event.target.id !== "profile-input-file"
30 | ) {
31 | profilePictureContainer.style.border = "none";
32 | }
33 | });
34 |
35 | // ====== Cover Picture Upload ======
36 | const coverDropArea = document.getElementById("coverpic-drop-area");
37 | const coverInputFile = document.getElementById("cover-input-file");
38 | const coverImgView = document.getElementById("cover-img-view");
39 |
40 | coverInputFile.addEventListener("change", displayCoverPicture);
41 |
42 | // Drag & drop
43 | coverDropArea.addEventListener("dragover", function (e) {
44 | e.preventDefault();
45 | });
46 |
47 | coverDropArea.addEventListener("drop", function (e) {
48 | e.preventDefault();
49 | coverInputFile.files = e.dataTransfer.files;
50 | displayCoverPicture();
51 | });
52 |
53 | // Applying border style on click
54 | let coverPictureContainer = document.getElementById("cover-pic-container");
55 |
56 | document.querySelector("#cover-input-file").onclick = function () {
57 | coverPictureContainer.style.border = "2px solid #E90708";
58 | };
59 |
60 | document.addEventListener("click", function (event) {
61 | if (
62 | !coverPictureContainer.contains(event.target) &&
63 | event.target.id !== "cover-input-file"
64 | ) {
65 | coverPictureContainer.style.border = "none";
66 | }
67 | });
68 |
69 | // Function to display profile picture
70 | function displayProfilePicture() {
71 | const file = profileInputFile.files[0];
72 | if (file) {
73 | if (file.size > 7 * 1024 * 1024) {
74 | // Check if file size exceeds 7MB
75 | Toastify({
76 | text: "Please select a profile photo smaller than 7MB.",
77 | duration: 3000,
78 | gravity: "top",
79 | position: "right",
80 | backgroundColor: "#ff0000",
81 | close: true,
82 | stopOnFocus: true,
83 | }).showToast();
84 | profileInputFile.value = ""; // Reset the file input
85 | profileImgView.style.backgroundImage = ""; // Clear any previous image
86 | } else if (file.type.startsWith("image/") && file.type !== "image/gif") {
87 | const reader = new FileReader();
88 | reader.onloadend = function () {
89 | const profilePicBase64 = reader.result;
90 | profileImgView.style.backgroundImage = `url(${profilePicBase64})`;
91 | profileImgView.textContent = "";
92 | };
93 | reader.readAsDataURL(file);
94 | } else {
95 | Toastify({
96 | text: "Please select a valid image file (JPEG, PNG, etc.). GIFs are not allowed.",
97 | duration: 3000,
98 | gravity: "top",
99 | position: "right",
100 | backgroundColor: "#ff0000",
101 | close: true,
102 | stopOnFocus: true,
103 | }).showToast();
104 | profileInputFile.value = "";
105 | profileImgView.style.backgroundImage = "";
106 | }
107 | }
108 | }
109 |
110 | // Function to display cover picture
111 | function displayCoverPicture() {
112 | const file = coverInputFile.files[0];
113 | if (file) {
114 | if (file.size > 7 * 1024 * 1024) {
115 | // Check if file size exceeds 7MB
116 | Toastify({
117 | text: "Please select a profile photo smaller than 7MB.",
118 | duration: 3000,
119 | gravity: "top",
120 | position: "right",
121 | backgroundColor: "#ff0000",
122 | close: true,
123 | stopOnFocus: true,
124 | }).showToast();
125 | coverInputFile.value = ""; // Reset the file input
126 | coverImgView.style.backgroundImage = ""; // Clear any previous image
127 | } else if (file.type.startsWith("image/") && file.type !== "image/gif") {
128 | const reader = new FileReader();
129 | reader.onloadend = function () {
130 | const coverPicBase64 = reader.result;
131 | coverImgView.style.backgroundImage = `url(${coverPicBase64})`;
132 | coverImgView.textContent = "";
133 | };
134 | reader.readAsDataURL(file);
135 | } else {
136 | Toastify({
137 | text: "Please select a valid image file (JPEG, PNG, etc.). GIFs are not allowed.",
138 | duration: 3000,
139 | gravity: "top",
140 | position: "right",
141 | backgroundColor: "#ff0000",
142 | close: true,
143 | stopOnFocus: true,
144 | }).showToast();
145 | coverInputFile.value = "";
146 | coverImgView.style.backgroundImage = "";
147 | }
148 | }
149 | }
150 |
151 | // Add event listeners for profile and cover pictures
152 | document.addEventListener("DOMContentLoaded", function () {
153 | const storedData = localStorage.getItem("registrationFormData");
154 |
155 | if (storedData) {
156 | const formData = JSON.parse(storedData);
157 |
158 | document
159 | .getElementById("register-form-02")
160 | .addEventListener("submit", (event) => {
161 | event.preventDefault();
162 | let bio = document.getElementById("bio").value;
163 |
164 | if (bio !== null && bio !== "") {
165 | formData.bio = bio;
166 |
167 | // Append profile and cover pictures if they exist
168 | if (profileInputFile.files[0]) {
169 | const reader = new FileReader();
170 | reader.onloadend = function () {
171 | formData.profilePic = reader.result;
172 | localStorage.setItem(
173 | "registrationFormData",
174 | JSON.stringify(formData)
175 | );
176 | };
177 | reader.readAsDataURL(profileInputFile.files[0]);
178 | }
179 |
180 | if (coverInputFile.files[0]) {
181 | const reader = new FileReader();
182 | reader.onloadend = function () {
183 | formData.coverPic = reader.result;
184 | localStorage.setItem(
185 | "registrationFormData",
186 | JSON.stringify(formData)
187 | );
188 | };
189 | reader.readAsDataURL(coverInputFile.files[0]);
190 | }
191 |
192 | localStorage.setItem(
193 | "registrationFormData",
194 | JSON.stringify(formData)
195 | );
196 |
197 | window.location.href = "/pages/registrationOtpVerifyPage.html";
198 | }
199 | });
200 | }
201 |
202 | //Validations checks
203 | $("#bio").attr("required", true);
204 | $("#bio").attr({
205 | pattern: ".{1,30}",
206 | title: "Please enter between 1 and 30 characters.",
207 | required: true,
208 | });
209 | $('input[type="checkbox"]').attr("required", true);
210 | });
211 |
--------------------------------------------------------------------------------
/controller/SearchPopupController.js:
--------------------------------------------------------------------------------
1 | import { searchUsers } from "../model/SearchPopupModel.js";
2 |
3 | $(document).ready(function () {
4 | let currentPage = 0;
5 | let isLoading = false;
6 | let hasMoreResults = true;
7 | let currentSearchTerm = "";
8 |
9 | const $searchInput = $("#search-for-friends");
10 | const $searchPopup = $("#searchPopUp");
11 | const $searchPopupList = $("#searchPopupList");
12 | const $recentList = $("#recent-list");
13 | const $searchTitle = $("#search-title");
14 |
15 | function initEventListeners() {
16 | $searchInput.on("click", function () {
17 | showSearchPopup();
18 | });
19 |
20 | $searchInput.on("keypress", function (e) {
21 | if (e.which === 13) {
22 | e.preventDefault();
23 | handleSearch();
24 | }
25 | });
26 |
27 | $searchInput.on("input", function () {
28 | if ($(this).val().trim() === "") {
29 | resetSearch();
30 | showRecentSearches();
31 | }
32 | });
33 |
34 | $(document).on("click", function (event) {
35 | if (
36 | !$(event.target).closest("#search-for-friends, #searchPopUp").length
37 | ) {
38 | $searchPopup.hide();
39 | }
40 | });
41 |
42 | $recentList.on("scroll", handleScroll);
43 | $recentList.on("click", ".search-result", handleResultClick);
44 | $recentList.on("click", ".remove-btn", handleRemoveClick);
45 | }
46 |
47 | function showSearchPopup() {
48 | showRecentSearches();
49 | $searchPopup.show();
50 | }
51 |
52 | function handleSearch() {
53 | const newSearchTerm = $searchInput.val().trim();
54 | if (newSearchTerm !== currentSearchTerm) {
55 | resetSearch();
56 | currentSearchTerm = newSearchTerm;
57 | if (currentSearchTerm) {
58 | $searchPopup.show();
59 | $searchTitle.text("Results");
60 | fetchAndDisplayResults();
61 | } else {
62 | $searchTitle.text("Recent");
63 | showRecentSearches();
64 | }
65 | }
66 | }
67 |
68 | function resetSearch() {
69 | currentPage = 0;
70 | hasMoreResults = true;
71 | currentSearchTerm = "";
72 | clearResults();
73 | $searchTitle.text("Recent");
74 | adjustPopupHeight(0);
75 | }
76 |
77 | function fetchAndDisplayResults() {
78 | if (isLoading || !hasMoreResults || !currentSearchTerm) return;
79 |
80 | isLoading = true;
81 | searchUsers(currentSearchTerm, currentPage)
82 | .then(function (results) {
83 | if (Array.isArray(results) && results.length > 0) {
84 | displayResults(results);
85 | currentPage++;
86 | hasMoreResults = results.length === 10;
87 | adjustPopupHeight($recentList.children().length);
88 | } else {
89 | hasMoreResults = false;
90 | displayNoResults();
91 | adjustPopupHeight(1);
92 | }
93 | })
94 | .catch(function (error) {
95 | console.error("Error fetching search results:", error);
96 | if (error.response && error.response.status === 404) {
97 | hasMoreResults = false;
98 | displayNoResults();
99 | adjustPopupHeight(1);
100 | } else {
101 | displayError();
102 | adjustPopupHeight(1);
103 | }
104 | })
105 | .finally(function () {
106 | isLoading = false;
107 | });
108 | }
109 |
110 | function displayResults(results) {
111 | $.each(results, function (index, user) {
112 | const listItem = $("
").addClass(
113 | "d-flex justify-content-between align-items-center"
114 | ).html(`
115 |
116 |
121 |
${user.name}
122 |
');
132 | }
133 |
134 | function displayError() {
135 | $recentList.html(
136 | '
An error occurred. Please try again.'
137 | );
138 | }
139 |
140 | function clearResults() {
141 | $recentList.empty();
142 | }
143 |
144 | function handleScroll() {
145 | const scrollTop = $recentList.scrollTop();
146 | const scrollHeight = $recentList[0].scrollHeight;
147 | const clientHeight = $recentList.height();
148 |
149 | if (
150 | scrollTop + clientHeight >= scrollHeight - 5 &&
151 | !isLoading &&
152 | hasMoreResults
153 | ) {
154 | console.log("Loading more results");
155 | fetchAndDisplayResults();
156 | }
157 | }
158 |
159 | function adjustPopupHeight(resultCount) {
160 | const baseHeight = 100;
161 | const itemHeight = 50;
162 | const maxHeight = 400;
163 |
164 | let newHeight = baseHeight + resultCount * itemHeight;
165 | newHeight = Math.min(newHeight, maxHeight);
166 |
167 | $searchPopupList.css("height", `${newHeight}px`);
168 | }
169 |
170 | function handleResultClick(event) {
171 | const $clickedItem = $(event.currentTarget).closest("li");
172 | const userData = $clickedItem.data("user");
173 |
174 | if (userData) {
175 | saveRecentSearch(userData);
176 |
177 | localStorage.setItem("selectedFriendEmail", userData.email);
178 | const $iframe = $("#homePage .homeWallComponent iframe");
179 | $iframe.attr(
180 | "src",
181 | "../components/pages/wall/myFriendPostWallComponent.html"
182 | );
183 | }
184 | }
185 |
186 | function handleRemoveClick(event) {
187 | event.stopPropagation();
188 | const $clickedItem = $(event.target).closest("li");
189 | const userData = $clickedItem.data("user");
190 |
191 | if (userData) {
192 | removeRecentSearch(userData);
193 | $clickedItem.remove();
194 | }
195 | }
196 |
197 | // Add click event listener
198 | $(document).on("click", ".remove-btn", handleRemoveClick);
199 | function removeRecentSearch(userData) {
200 | let recentSearches = JSON.parse(
201 | localStorage.getItem("recentSearches") || "[]"
202 | );
203 | recentSearches = recentSearches.filter(
204 | (user) => user.name !== userData.name
205 | );
206 | localStorage.setItem("recentSearches", JSON.stringify(recentSearches));
207 | }
208 |
209 | function saveRecentSearch(userData) {
210 | let recentSearches = JSON.parse(
211 | localStorage.getItem("recentSearches") || "[]"
212 | );
213 |
214 | const idExists = recentSearches.some((user) => user.name === userData.name);
215 |
216 | if (!idExists) {
217 | if (recentSearches.length === 5) {
218 | recentSearches.shift();
219 | }
220 | recentSearches.push(userData);
221 | localStorage.setItem("recentSearches", JSON.stringify(recentSearches));
222 | }
223 | }
224 |
225 | function showRecentSearches() {
226 | const recentSearches = JSON.parse(
227 | localStorage.getItem("recentSearches") || "[]"
228 | );
229 | clearResults();
230 | if (recentSearches.length > 0) {
231 | $searchTitle.text("Recent");
232 | displayResults(recentSearches.reverse());
233 | adjustPopupHeight(recentSearches.length);
234 | } else {
235 | displayNoResults();
236 | adjustPopupHeight(1);
237 | }
238 | }
239 |
240 | initEventListeners();
241 | });
242 |
--------------------------------------------------------------------------------
/components/css/CreatePostCardComponent.css:
--------------------------------------------------------------------------------
1 | #homeWallComponent .card {
2 | box-shadow: 0 4px 18.3px 0 rgba(0, 0, 0, 0.05);
3 | }
4 |
5 | #homeWallComponent .card .card-header {
6 | color: #000;
7 | font-family: "Poppins", sans-serif;
8 | font-size: 16px;
9 | font-weight: 600;
10 | padding: 18px 26px 14px 26px;
11 | border-bottom: 2px solid #f4f4f4;
12 | background-color: #ffffff;
13 | }
14 |
15 | #homeWallComponent .card .card-body {
16 | background-color: #ffffff;
17 | }
18 |
19 | #homeWallComponent .card .card-body > img {
20 | width: 63px;
21 | height: 63px;
22 | border: 3px solid #c0c0c0;
23 | border-radius: 50%;
24 | object-fit: cover;
25 | aspect-ratio: 1 / 1;
26 | }
27 |
28 | #homeWallComponent .input-group {
29 | border-radius: 8px;
30 | border: 1.5px solid #d5d5d5;
31 | background: #fff;
32 | box-shadow: 0 0 22.9px -6px rgba(0, 0, 0, 0.1);
33 | padding-right: 15px;
34 | }
35 |
36 | #homeWallComponent .input-group input {
37 | padding: 18px 22px;
38 | color: #949494;
39 | font-family: "Poppins", sans-serif;
40 | font-size: 13px;
41 | font-weight: 500;
42 | }
43 |
44 | #homeWallComponent .input-group input:focus{
45 | box-shadow: none !important;
46 | }
47 |
48 | #homeWallComponent .input-group img {
49 | width: 17px;
50 | height: 17px;
51 | }
52 |
53 | body::-webkit-scrollbar {
54 | width: 0;
55 | }
56 |
57 | .menu {
58 | display: flex;
59 | align-items: center;
60 | padding: 10px;
61 | }
62 |
63 | .home-text {
64 | font-family: Arial, sans-serif;
65 | margin: 0;
66 | padding: 0;
67 | font-size: 14px;
68 | font-weight: normal;
69 | color: #7a7a7a;
70 | margin-right: 10px;
71 | }
72 |
73 | .approve-text {
74 | font-size: 30px;
75 | font-weight: bold;
76 | color: black;
77 | }
78 |
79 | .feed-text {
80 | font-family: Arial, sans-serif;
81 | margin: 0;
82 | padding: 0;
83 | font-size: 18px;
84 | font-weight: bold;
85 | color: #6b6b6b;
86 | padding: 8px;
87 | }
88 |
89 | @media (max-width: 320px) {
90 | #homeWallComponent .card .card-body > img {
91 | width: 30px;
92 | height: 30px;
93 | float: left;
94 | margin-right: 1px;
95 | }
96 |
97 | #homeWallComponent .card .card-header {
98 | font-size: 12px;
99 | font-weight: 600;
100 | padding: 18px 26px 14px 13px;
101 | border-bottom: 2px solid #f4f4f4;
102 | background-color: #ffffff;
103 | }
104 |
105 | #homeWallComponent .card .card-body {
106 | padding: 22px 10px;
107 | background-color: #ffffff;
108 | }
109 |
110 | #addon-wrapping-search {
111 | width: 2px;
112 | height: 4px;
113 | }
114 |
115 | #homeWallComponent .input-group input {
116 | padding: 10px 10px;
117 | color: #949494;
118 | font-family: "Poppins", sans-serif;
119 | font-size: 10px;
120 | font-weight: 500;
121 | }
122 |
123 | #addon-wrapping {
124 | width: 20px;
125 | height: 30px;
126 | }
127 |
128 | .home-text {
129 | font-family: Arial, sans-serif;
130 | display: flex;
131 | align-items: center;
132 | font-size: 14px;
133 | font-weight: normal;
134 | color: #7a7a7a;
135 | margin-right: 10px;
136 | }
137 |
138 | .approve-text {
139 | font-family: Arial, sans-serif;
140 | display: flex;
141 | align-items: center;
142 | font-size: 24px;
143 | font-weight: 800;
144 | color: black;
145 | }
146 |
147 | .feed-text {
148 | font-size: 15px;
149 | font-weight: 600px;
150 | }
151 | }
152 |
153 | @media (max-width: 375px) {
154 | #homeWallComponent .card .card-body > img {
155 | width: 50px;
156 | height: 50px;
157 | float: left;
158 | margin-right: 1px;
159 | }
160 |
161 | #homeWallComponent .card .card-header {
162 | font-size: 16px;
163 | font-weight: 600;
164 | padding: 18px 26px 14px 13px;
165 | border-bottom: 2px solid #f4f4f4;
166 | background-color: #ffffff;
167 | }
168 |
169 | #homeWallComponent .card .card-body {
170 | padding: 22px 10px;
171 | background-color: #ffffff;
172 | }
173 |
174 | #addon-wrapping-search {
175 | width: 6px;
176 | height: 7px;
177 | }
178 |
179 | #homeWallComponent .input-group input {
180 | padding: 10px 10px;
181 | color: #949494;
182 | font-family: "Poppins", sans-serif;
183 | font-size: 12px;
184 | font-weight: 500;
185 | }
186 |
187 | #addon-wrapping {
188 | width: 25px;
189 | height: 35px;
190 | }
191 |
192 | .home-text {
193 | font-family: Arial, sans-serif;
194 | display: flex;
195 | align-items: center;
196 | font-size: 14px;
197 | font-weight: normal;
198 | color: #7a7a7a;
199 | margin-right: 10px;
200 | }
201 |
202 | .approve-text {
203 | font-family: Arial, sans-serif;
204 | display: flex;
205 | align-items: center;
206 | font-size: 24px;
207 | font-weight: 800;
208 | color: black;
209 | }
210 |
211 | .feed-text {
212 | font-size: 15px;
213 | font-weight: 600px;
214 | }
215 | }
216 |
217 | @media (max-width: 375px) {
218 | #homeWallComponent .card .card-body > img {
219 | width: 50px;
220 | height: 50px;
221 | float: left;
222 | margin-right: 1px;
223 | }
224 |
225 | #homeWallComponent .card .card-header {
226 | font-size: 16px;
227 | font-weight: 600;
228 | padding: 18px 26px 14px 13px;
229 | border-bottom: 2px solid #f4f4f4;
230 | background-color: #ffffff;
231 | }
232 |
233 | #homeWallComponent .card .card-body {
234 | padding: 22px 10px;
235 | background-color: #ffffff;
236 | }
237 |
238 | #addon-wrapping-search {
239 | width: 6px;
240 | height: 7px;
241 | }
242 |
243 | #homeWallComponent .input-group input {
244 | padding: 10px 10px;
245 | color: #949494;
246 | font-family: "Poppins", sans-serif;
247 | font-size: 12px;
248 | font-weight: 500;
249 | }
250 |
251 | #addon-wrapping {
252 | width: 25px;
253 | height: 35px;
254 | }
255 |
256 | .home-text {
257 | font-family: Arial, sans-serif;
258 | display: flex;
259 | align-items: center;
260 | font-size: 16px;
261 | font-weight: normal;
262 | color: #7a7a7a;
263 | margin-right: 10px;
264 | }
265 |
266 | .approve-text {
267 | font-family: Arial, sans-serif;
268 | display: flex;
269 | align-items: center;
270 | font-size: 26px;
271 | font-weight: 800;
272 | color: black;
273 | }
274 |
275 | .feed-text {
276 | font-size: 17px;
277 | font-weight: 600px;
278 | }
279 | }
280 |
281 | @media (max-width: 425px) {
282 | #homeWallComponent .card .card-body > img {
283 | width: 50px;
284 | height: 50px;
285 | float: left;
286 | margin-right: 1px;
287 | }
288 |
289 | #homeWallComponent .card .card-header {
290 | font-size: 16px;
291 | font-weight: 600;
292 | padding: 18px 26px 14px 13px;
293 | border-bottom: 2px solid #f4f4f4;
294 | background-color: #ffffff;
295 | }
296 |
297 | #homeWallComponent .card .card-body {
298 | padding: 22px 10px;
299 | background-color: #ffffff;
300 | }
301 |
302 | #addon-wrapping-search {
303 | width: 6px;
304 | height: 7px;
305 | }
306 |
307 | #homeWallComponent .input-group input {
308 | padding: 10px 10px;
309 | color: #949494;
310 | font-family: "Poppins", sans-serif;
311 | font-size: 12px;
312 | font-weight: 500;
313 | }
314 |
315 | #addon-wrapping {
316 | width: 25px;
317 | height: 35px;
318 | }
319 |
320 | .home-text {
321 | font-family: Arial, sans-serif;
322 | display: flex;
323 | align-items: center;
324 | font-size: 16px;
325 | font-weight: normal;
326 | color: #7a7a7a;
327 | margin-right: 10px;
328 | }
329 |
330 | .approve-text {
331 | font-family: Arial, sans-serif;
332 | display: flex;
333 | align-items: center;
334 | font-size: 26px;
335 | font-weight: 800;
336 | color: black;
337 | }
338 |
339 | .feed-text {
340 | font-size: 17px;
341 | font-weight: 600px;
342 | }
343 | }
344 |
--------------------------------------------------------------------------------
/pages/homePage.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
SE10 NETWORK
18 |
19 |
20 |
21 |
40 |
41 |
42 |
70 |
71 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
98 |
99 |
103 |
104 |
110 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 | Birthdays
122 | 
123 |
124 |
125 |
No one has birthdays today
126 |
127 |
128 |
129 |
157 |
158 |
159 |
Notifications
160 |
161 |
163 |
164 |
167 |
170 |
176 |
181 |
187 |
192 |
198 |
203 |
209 |
214 |
220 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
--------------------------------------------------------------------------------
/assets/css/homePage.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: var(--bg-color);
3 | }
4 |
5 | #navBar {
6 | background: #fff;
7 | box-shadow: 0 -8px 80px 0 rgba(0, 0, 0, 0.1);
8 | padding: 25px 100px;
9 | }
10 |
11 | #navBar h1 {
12 | color: var(--btn-bg-color);
13 | font-family: "Poppins", sans-serif;
14 | font-size: 32px;
15 | font-style: normal;
16 | font-weight: 700;
17 | line-height: normal;
18 | margin: 0;
19 | }
20 |
21 | #navBar input {
22 | width: 25vw;
23 | border-radius: 41px;
24 | border: 1px solid rgba(233, 7, 8, 0.33);
25 | background: #fffafa;
26 | padding: 12px 12px 12px 62px;
27 | font-family: "Poppins", sans-serif;
28 | color: rgba(233, 7, 8, 0.5);
29 | font-weight: 500;
30 | }
31 |
32 | #navBar input::placeholder {
33 | color: rgba(233, 7, 8, 0.5);
34 | }
35 |
36 | #navBar input:focus {
37 | outline: none;
38 | border: 1px solid var(--btn-bg-color);
39 | color: var(--btn-bg-color);
40 | }
41 |
42 | #navBar .searchIcon {
43 | left: 45px;
44 | }
45 |
46 | #navBar .profile {
47 | width: 40px;
48 | height: 40px;
49 | border-radius: 50%;
50 | }
51 |
52 | #navBar .profile img {
53 | width: 100%;
54 | height: 100%;
55 | border-radius: 50%;
56 | border: 2px #fff;
57 | background-size: cover;
58 | }
59 |
60 | #navBar .notification {
61 | width: 20px;
62 | height: 20px;
63 | display: flex;
64 | }
65 |
66 | #navBar .notification img {
67 | width: 100%;
68 | height: 100%;
69 | }
70 |
71 | #homePage {
72 | padding: 34px 100px 0 100px;
73 | }
74 |
75 | #homePage > :first-child {
76 | width: 15vw;
77 | }
78 |
79 | #homePage .profile {
80 | border-radius: 15px;
81 | background: #fff;
82 | box-shadow: 0 4px 18.3px 0 rgba(0, 0, 0, 0.05);
83 | }
84 |
85 | #homePage .profile .banner {
86 | width: 100%;
87 | height: 100%;
88 | border-radius: 15px 15px 0 0;
89 | }
90 |
91 | #homePage .profile img {
92 | width: 100%;
93 | height: 100%;
94 | }
95 |
96 | #homePage .profile .profileImage {
97 | width: 100%;
98 | display: flex;
99 | justify-content: center;
100 | position: relative;
101 | bottom: 30px;
102 | }
103 |
104 | #homePage .profile img {
105 | width: 100%;
106 | height: 100%;
107 | }
108 |
109 | #homePage .profile .profileImage img {
110 | width: 63px;
111 | height: 100%;
112 | border-radius: 50%;
113 | border: 2px solid #fff;
114 | object-fit: cover;
115 | }
116 |
117 | #homePage .profile * {
118 | text-align: center;
119 | line-height: 10px;
120 | }
121 |
122 | #homePage .profile h4 {
123 | color: #000;
124 | font-family: "Poppins", sans-serif;
125 | font-size: 18px;
126 | font-weight: 700;
127 | line-height: 18px;
128 | }
129 |
130 | #homePage .profile h5 {
131 | color: #9e9e9e;
132 | font-family: "Poppins", sans-serif;
133 | font-size: 14px;
134 | font-weight: 500;
135 | margin-bottom: 14px;
136 | }
137 |
138 | #homePage .profile h6 {
139 | color: #000;
140 | font-family: "Poppins", sans-serif;
141 | font-size: 13px;
142 | padding: 0 15px;
143 | font-weight: 500;
144 | line-height: 18px;
145 | }
146 |
147 | #homePage .profile .profileDetails {
148 | position: relative;
149 | bottom: 10px;
150 | }
151 |
152 | #homePage .profile button {
153 | padding: 18px 0;
154 | border-radius: 0 0 15px 15px;
155 | border: 0;
156 | border-top: 2px solid #ebebeb;
157 | background: #fff;
158 | color: #e90708;
159 | text-align: center;
160 | font-family: "Poppins", sans-serif;
161 | font-size: 14px;
162 | font-weight: 500;
163 | }
164 |
165 | #homePage .homeButton button,
166 | #homePage .myPostButton button,
167 | #homePage .approveButton button {
168 | margin-top: 40px;
169 | border-radius: 15px;
170 | border: 1px solid transparent;
171 | background: transparent;
172 | display: flex;
173 | padding: 12px 27px;
174 | gap: 16px;
175 | align-items: center;
176 | color: #000;
177 | font-family: "Poppins", sans-serif;
178 | font-size: 16px;
179 | font-weight: 600;
180 | }
181 |
182 | #homePage .homeButton button img,
183 | #homePage .myPostButton button img,
184 | #homePage .approveButton button img {
185 | width: 20px;
186 | height: 20px;
187 | }
188 |
189 | #homePage .myPostButton button,
190 | #homePage .approveButton button {
191 | margin-top: 5px;
192 | }
193 |
194 | #homePage .active button {
195 | border: 1px solid #e7e7e7;
196 | background: #fff;
197 | }
198 |
199 | #homePage > .homeWallComponent {
200 | width: 58vw;
201 | height: 83vh;
202 | }
203 |
204 | #homePage .homeWallComponent > iframe {
205 | width: 100%;
206 | height: 100%;
207 | max-height: 100%;
208 | overflow-x: hidden;
209 | overflow-y: scroll;
210 | }
211 |
212 | #homePage .homeWallComponent > iframe::-webkit-scrollbar {
213 | width: 0 !important;
214 | }
215 |
216 | #homePage > :last-child {
217 | width: 15vw;
218 | }
219 |
220 | #homePage .birthDays {
221 | width: 100%;
222 | height: auto;
223 | background-color: #fff;
224 | border-radius: 15px;
225 | padding: 16px 18px;
226 | box-shadow: 0 4px 18.3px 0 rgba(0, 0, 0, 0.05);
227 | cursor: pointer;
228 | }
229 |
230 | #homePage .birthDays h3 {
231 | color: #000;
232 | font-family: "Poppins", sans-serif;
233 | font-size: 18px;
234 | font-weight: 700;
235 | }
236 |
237 | #homePage .birthDays h3 img {
238 | height: 23px;
239 | width: auto;
240 | margin-left: 10px;
241 | }
242 |
243 | #homePage .birthDays img {
244 | width: 14px;
245 | height: 14px;
246 | }
247 |
248 | #homePage .birthDays p {
249 | color: #797979;
250 | font-family: "Poppins", sans-serif;
251 | font-size: 14px;
252 | font-weight: 500;
253 | margin-top: 5px;
254 | }
255 |
256 | #homePage .birthDays + h1 {
257 | color: #000;
258 | font-family: "Poppins", sans-serif;
259 | font-size: 24px;
260 | font-weight: 700;
261 | margin-top: 40px;
262 | margin-bottom: 26px;
263 | }
264 |
265 | #homePage > :last-child button {
266 | border-radius: 15px;
267 | border: 1px solid #e7e7e7;
268 | background: #fff;
269 | display: flex;
270 | padding: 12px 27px;
271 | align-items: center;
272 | gap: 14px;
273 | width: 100%;
274 | }
275 |
276 | #homePage > :last-child button img {
277 | width: 23px;
278 | height: 23px;
279 | }
280 |
281 | #homePage > :last-child button span {
282 | color: #797979;
283 | font-family: "Poppins", sans-serif;
284 | font-size: 12px;
285 | font-weight: 500;
286 | text-align: start;
287 | }
288 |
289 | .searchPopUp {
290 | top: 84px;
291 | display: none;
292 | }
293 |
294 | #notifications {
295 | height: 60vh;
296 | overflow-x: hidden;
297 | overflow-y: scroll;
298 | }
299 |
300 | #notifications::-webkit-scrollbar {
301 | width: 0 !important;
302 | }
303 |
304 | /* bottom nav bar mobile css start */
305 | .img-box {
306 | border-bottom: 3px solid transparent;
307 | padding: 1px !important;
308 | height: 30px;
309 | }
310 |
311 | .red-border-bottom {
312 | border-bottom: 3px solid var(--btn-bg-color);
313 | }
314 | /* bottom nav bar mobile css end */
315 |
316 | @media screen and (max-width: 1440px) {
317 | #homePage {
318 | padding: 34px 75px 0 75px;
319 | }
320 |
321 | #navBar {
322 | padding: 25px 75px;
323 | }
324 | }
325 |
326 | @media screen and (max-width: 991px) {
327 | #navBar {
328 | padding: 0;
329 | }
330 |
331 | #homePage {
332 | padding: 0;
333 | }
334 |
335 | #navBar nav {
336 | justify-content: space-between !important;
337 | padding: 32px 30px 12px 30px;
338 | }
339 |
340 | #navBar h1 {
341 | color: #000;
342 | font-size: 20px;
343 | font-weight: 700;
344 | }
345 |
346 | #homePage > .homeWallComponent {
347 | width: 100%;
348 | margin: 0;
349 | }
350 | }
351 |
352 | @media (min-width: 992px) and (max-width: 1800px) {
353 | #homePage .wall {
354 | margin-right: 70px;
355 | }
356 |
357 | #homePage .notifi {
358 | margin-left: 60px;
359 | }
360 |
361 | #homePage .profile h5 {
362 | line-height: 20px;
363 | }
364 |
365 | #homePage .homeButton button,
366 | #homePage .myPostButton button,
367 | #homePage .approveButton button {
368 | font-size: 14px;
369 | }
370 |
371 | .profile {
372 | width: 130%;
373 | }
374 |
375 | #homePage .myPostButton,
376 | #homePage .homeButton,
377 | #homePage .approveButton {
378 | width: 130%;
379 | }
380 |
381 | #homePage .homeButton button,
382 | #homePage .myPostButton button,
383 | #homePage .approveButton button {
384 | padding-left: 25%;
385 | }
386 |
387 | #homePage .birthDays {
388 | width: 130%;
389 | margin-left: -24%;
390 | }
391 |
392 | #notifications {
393 | width: 130%;
394 | margin-left: -24%;
395 | }
396 |
397 | .notify-title {
398 | margin-left: -20%;
399 | }
400 | }
401 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [![Contributors][contributors-shield]][contributors-url]
4 | [![Closed Pull Requests][closed-pull-requests-shield]][closed-pull-requests-url]
5 | [![Stargazers][stars-shield]][stars-url]
6 | [![Issues][issues-shield]][issues-url]
7 | [![MIT License][license-shield]][license-url]
8 |
9 |
10 |
11 |
12 |
13 |
14 | 
15 |
16 |
17 |
SE10 NETWORK FRONTEND
18 |
19 |
20 | Welcome to the SE10 NETWORK frontend repository! This frontend application serves as the user interface for a social media platform specifically designed for students of IJSE (Institute of Software Engineering). It enables students to create and share posts, view updates from others, and receive notifications about important events like birthdays and
21 | campus-related activities.
22 |
23 | Explore the project »
24 |
25 |
26 | View Design
27 | ·
28 | Report Bug
29 | ·
30 | Request Feature
31 |
32 |
33 |
34 |
35 |
36 |
37 | Table of Contents
38 |
39 | -
40 | About The Project
41 |
44 |
45 | -
46 | Getting Started
47 |
51 |
52 | -
53 | API Documentation
54 |
55 | -
56 | Figma Design
57 |
58 | -
59 | Backend Repository
60 |
61 | - Top contributors
62 | - License
63 |
64 |
65 |
66 |
67 |
68 |
69 | ## About The Project
70 |
71 |
72 | 
73 |
74 |
75 |
76 | **User Interface**:
77 | - Clean and responsive interface built with **HTML**, **CSS**, and **Bootstrap**.
78 | - Dynamic elements for user interaction powered by **JavaScript** and **JQuary**.
79 |
80 | **Post Management**:
81 | - Users can create, view, and delete posts.
82 | - Live updates of posts for a seamless user experience.
83 |
84 | **Notifications**:
85 | - Birthday reminders and event notifications.
86 | - Visual indicators for new updates.
87 |
88 | **Axios Integration**:
89 | - Used for communicating with the backend API to handle requests and responses.
90 |
91 |
(back to top)
92 |
93 |
94 |
95 | ### Built With
96 |
97 | This project was developed using a variety of modern web technologies and libraries to ensure a responsive and dynamic user experience.
98 |
99 | * [![HTML][HTML.com]][HTML-url]
100 | * [![CSS][CSS.com]][CSS-url]
101 | * [![JavaScript][JavaScript.com]][JavaScript-url]
102 | * [![JQuery][JQuery.com]][JQuery-url]
103 | * [![Axios][Axios.com]][Axios-url]
104 | * [![Bootstrap][Bootstrap.com]][Bootstrap-url]
105 |
106 |
(back to top)
107 |
108 |
109 |
110 |
111 | ## Getting Started
112 |
113 | Follow these steps to set up the project locally and get it running on your machine. The instructions will guide you through the process of cloning the repository, installing dependencies, and configuring any required settings.
114 |
115 | ### Prerequisites
116 |
117 | Before setting up the project, make sure you have the following tools and libraries installed or configured as needed:
118 |
119 | * **Axios**
120 | Axios is already included in the project. No additional installation is required.
121 |
122 | * **Bootstrap**
123 | Bootstrap has already been downloaded and set up for the project.
124 |
125 |
126 | ### Installation
127 |
128 | Follow these steps to install and set up the project on your local machine:
129 |
130 | 1. **Clone the repository**
131 | ```sh
132 | git clone https://github.com/SE10-IJSE/SE10-NETWORK-FRONTEND.git
133 |
134 | 2. Change git remote url to avoid accidental pushes to base project
135 | ```sh
136 | git remote set-url origin github_username/repo_name
137 | git remote -v # confirm the changes
138 | ```
139 |
140 |
(back to top)
141 |
142 |
143 | ## API Documentation
144 |
145 | Refer to the [Postman API Documentation](https://documenter.getpostman.com/view/39303999/2sAY4sjQPn) for detailed API endpoints and usage instructions.
146 |
147 | ## Figma Design
148 |
149 | Check out the Figma design for the frontend [here](https://www.figma.com/design/5PdKIjEzJCegZ8EMcPSQxw/SE10---Galle-Branch?node-id=1669-162202&node-type=canvas&t=7zzsFOiX0p3oQuxe-0).
150 |
151 | ## Backend Repository
152 |
153 | Access the backend repository on GitHub [here](https://github.com/SE10-IJSE/SE10-NETWORK-BACKEND).
154 |
155 |
156 |
(back to top)
157 |
158 |
159 | ## Top contributors:
160 |
161 |
162 | 
163 |
164 |
165 |
(back to top)
166 |
167 |
168 |
169 | ## License
170 |
171 | Distributed under the MIT License. See [LICENSE](LICENSE) for more information.
172 |
173 |
(back to top)
174 |
175 | ##
176 |
177 |
178 | © 2024 SE10 NETWORK
179 |
180 |
181 |
182 |
183 | [contributors-shield]: https://img.shields.io/github/contributors/SE10-IJSE/SE10-NETWORK-FRONTEND.svg?style=for-the-badge
184 | [contributors-url]: https://github.com/SE10-IJSE/SE10-NETWORK-FRONTEND/graphs/contributors
185 | [closed-pull-requests-shield]: https://img.shields.io/github/issues-pr-closed/SE10-IJSE/SE10-NETWORK-FRONTEND.svg?style=for-the-badge
186 | [closed-pull-requests-url]: https://github.com/SE10-IJSE/SE10-NETWORK-FRONTEND/pulls?q=is%3Apr+is%3Aclosed
187 | [stars-shield]: https://img.shields.io/github/stars/SE10-IJSE/SE10-NETWORK-FRONTEND.svg?style=for-the-badge
188 | [stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
189 | [issues-shield]: https://img.shields.io/github/issues/SE10-IJSE/SE10-NETWORK-FRONTEND.svg?style=for-the-badge
190 | [issues-url]: https://github.com/SE10-IJSE/SE10-NETWORK-FRONTEND/issues
191 | [license-shield]: https://img.shields.io/github/license/SE10-IJSE/SE10-NETWORK-FRONTEND.svg?style=for-the-badge
192 | [license-url]: https://github.com/SE10-IJSE/SE10-NETWORK-FRONTEND/blob/main/LICENSE
193 | [HTML.com]: https://img.shields.io/badge/HTML-E34F26?style=for-the-badge&logo=html5&logoColor=white
194 | [HTML-url]: https://developer.mozilla.org/en-US/docs/Web/HTML
195 | [CSS.com]: https://img.shields.io/badge/CSS-1572B6?style=for-the-badge&logo=css3&logoColor=white
196 | [CSS-url]: https://developer.mozilla.org/en-US/docs/Web/CSS
197 | [JavaScript.com]: https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black
198 | [JavaScript-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript
199 | [Axios.com]: https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white
200 | [Axios-url]: https://axios-http.com/
201 | [Bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
202 | [Bootstrap-url]: https://getbootstrap.com
203 | [JQuery.com]: https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white
204 | [JQuery-url]: https://jquery.com
--------------------------------------------------------------------------------
26 | 
42 | 
38 | 
62 | 
65 | 
68 | 
72 | 
37 | 
49 | 
71 | 
79 | 
82 | 
84 | 
87 | 
95 | 
124 |