Merge pull request #62 from Arnob-B/main

pop up added

css/popup.css

@@ -0,0 +1,25 @@
+.popup {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    justify-content: center;
+    align-items: center;
+}
+
+.popup-image {
+    max-width: 90%;
+    max-height: 90%;
+}
+
+.close {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    color: white;
+    font-size: 40px;
+    cursor: pointer;
+}

index.html

@@ -11,6 +11,7 @@
     />
     <link rel="stylesheet" href="css/output.css" />
     <link rel="stylesheet" href="css/messages.css">
+    <link rel="stylesheet" href="css/popup.css">
 
     <style>
       /* Add styles for the hamburger menu and responsive design */
@@ -365,6 +366,7 @@
                     class="w-[96%] rounded-xl my-2"
                     src="public/sample.jpeg"
                     alt="..."
+                    onclick="openPopup('public/sample.jpeg')"
                   />
                 </div>
                 <div class="icons flex mx-2 justify-around text-gray-600">
@@ -453,6 +455,7 @@
                     class="w-[96%] rounded-xl my-2"
                     src="public/sample2.jpeg"
                     alt="..."
+                    onclick="openPopup('public/sample2.jpeg')"
                   />
                 </div>
                 <div class="icons flex mx-2 justify-around text-gray-600">
@@ -592,9 +595,13 @@ <h1 class="text-xl font-bold p-3">Who to follow</h1>
           >
             <div class="text-blue-400 hover:underline">Show more</div>
           </div>
-        </div>
-      </div>
-    </div>
+          </div>
+          <div class="popup" id="popup">
+            <span class="close" onclick="closePopup()">&times;</span>
+            <img class="popup-image" id="popup-image" src="" alt="Enlarged Image">
+          </div>
+          </div>
+          </div>
 
 
   <script>
@@ -628,6 +635,18 @@ <h1 class="text-xl font-bold p-3">Who to follow</h1>
   hamburgerMenu.classList.toggle("show"); // Toggle visibility of the hamburger menu
 });
 
+function openPopup(imageUrl) {
+    const popup = document.getElementById('popup');
+    const popupImage = document.getElementById('popup-image');
+
+    popupImage.src = imageUrl; // Set the image URL
+    popup.style.display = 'flex'; // Show the pop-up
+}
+
+function closePopup() {
+    const popup = document.getElementById('popup');
+    popup.style.display = 'none'; // Hide the pop-up
+}
   </script>