Added WhatsApp Modal

Author: owais-softpak

assets/css/style.css

@@ -1026,6 +1026,46 @@ textarea.input-field {
 }
 
 
+/*-----------------------------------*\
+ * #WhatsApp Modal
+\*-----------------------------------*/
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.6);
+}
+
+.modal-content {
+    background: #fff;
+    margin: 5% auto;
+    padding: 0;
+    width: 80%;
+    height: 80%;
+    border-radius: 10px;
+    position: relative;
+}
+
+.modal-content iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 10px;
+}
+
+.close {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    font-size: 30px;
+    cursor: pointer;
+    color: #333;
+}
+
 /*-----------------------------------*\
  * #MEDIA QUERIES
 \*-----------------------------------*/
@@ -1445,3 +1485,4 @@ textarea.input-field {
     }
 
 }
+

assets/js/script.js

@@ -153,6 +153,29 @@ if (preloader) {
             setTimeout(() => {
                 if (preloader.parentNode) preloader.parentNode.removeChild(preloader);
             }, 1000);
-        }, 2000); // <-- duration before fade-out (in ms)
+        }, 1500); // <-- duration before fade-out (in ms)
     });
 }
+
+document.addEventListener("DOMContentLoaded", () => {
+    const modal = document.getElementById("myModal");
+    const openModal = document.getElementById("openModal");
+    const closeModal = document.getElementById("closeModal");
+
+    if (openModal && modal && closeModal) {
+        openModal.onclick = (e) => {
+            e.preventDefault();
+            modal.style.display = "block";
+        };
+
+        closeModal.onclick = () => {
+            modal.style.display = "none";
+        };
+
+        window.onclick = (event) => {
+            if (event.target === modal) {
+                modal.style.display = "none";
+            }
+        };
+    }
+});

index.html

@@ -118,9 +118,9 @@ <h2 class="h2 hero-title">Turning Ideas into Robust, Cloud-Native Applications</
                     </a>
                 </li>
                 <li>
-                    <a class="hero-social-link" href="https://www.facebook.com/muhammadowaismushtaq/" target="_blank">
-                        <ion-icon name="logo-facebook"></ion-icon>
-                        <div class="tooltip">Facebook</div>
+                    <a class="hero-social-link" href="#" id="openModal">
+                        <ion-icon name="logo-whatsapp"></ion-icon>
+                        <div class="tooltip">Chat with Owais 👋</div>
                     </a>
                 </li>
             </ul>
@@ -760,7 +760,6 @@ <h3 class="h4 contact-item-title">Email:</h3>
     </article>
 </main>
 
-
 <!--
   - #FOOTER
 -->
@@ -780,11 +779,23 @@ <h3 class="h4 contact-item-title">Email:</h3>
 
     </div>
 </footer>
+
+<!-- Modal -->
+<div id="myModal" class="modal">
+    <div class="modal-content">
+        <span class="close" id="closeModal">&times;</span>
+        <!-- The other static site or page you want to show -->
+        <iframe src="https://muhammadowaismushtaq.github.io/portfolio-whatsapp/" title="Other Site"></iframe>
+    </div>
+</div>
+
 <a class="go-top" data-go-top href="#top" title="Go to Top">
     <ion-icon name="arrow-up"></ion-icon>
 </a>
+
 <script src="./assets/js/script.js"></script>
-<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" type="module"></script>
-<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+<!-- Ionicons for modern browsers -->
+<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+
 </body>
 </html>