Root Explorer PHP

Editing: footer_stickey.php

<style>
     /* Sticky footer button container */
     .sticky-footer {
         position: fixed;
         bottom: 75px;
         right: 25px;
         z-index: 9999;
     }

.sticky-footer img {
         border-radius: 50%;
     }

/* Main message icon */
     .message-icon {
         background-color: #25d366;
         color: white;
         width: 60px;
         height: 60px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 30px;
         cursor: pointer;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
         transition: all 0.3s ease;
     }

.message-icon:hover {
         transform: scale(1.05);
     }

/* Hidden contact buttons */
     .contact-options {
         position: absolute;
         bottom: 76px;
         right: 5px;
         display: none;
         flex-direction: column;
         gap: 10px;
     }

.contact-options.active {
         display: flex;
     }

/* Contact buttons */
     .contact-btn {
         width: 50px;
         height: 50px;
         border-radius: 50%;
         background: #0d65cd;
         color: #25d366;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 35px;
         cursor: pointer;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
         transition: all 0.3s;
     }

.contact-btn.phone {
         color: #007bff;
     }

.contact-btn:hover {
         transform: scale(1.1);
     }

/* WhatsApp Chat Popup */
     .whatsapp-popup {
         z-index: 9999;
         position: fixed;
         bottom: 142px;
         right: 25px;
         height: 350px;
         width: 370px;
         background: #f0f0f0;
         border-radius: 12px;
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
         display: none;
         flex-direction: column;
         overflow: hidden;
         font-family: "Helvetica", Arial, sans-serif;
         animation: popupSlide 0.3s ease;
     }

@keyframes popupSlide {
         from {
             opacity: 0;
             transform: translateY(20px);
         }

to {
             opacity: 1;
             transform: translateY(0);
         }
     }

/* WhatsApp header */
     .whatsapp-header {
         background: #075e54;
         color: #fff;
         padding: 10px 15px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
     }

.whatsapp-header-left {
         display: flex;
         align-items: center;
         gap: 10px;
     }

.whatsapp-header img {
         width: 35px;
         height: 35px;
         border-radius: 50%;
     }

.whatsapp-header h4 {
         margin: 0;
         font-size: 16px;
     }

.close-chat {
         font-size: 18px;
         cursor: pointer;
         color: #fff;
         opacity: 0.9;
         transition: opacity 0.2s;
     }

.close-chat:hover {
         opacity: 1;
     }

/* Chat body */
     .whatsapp-body {
         background: #e5ddd5;
         padding: 10px;
         flex: 1;
         overflow-y: auto;
         max-height: 250px;
         padding-bottom: 50px;
     }

.message-bubble {
         background: #dcf8c6;
         margin: 5px 0;
         padding: 10px 10px;
         border-radius: 8px;
         align-self: flex-start;
         font-size: 14px;
         margin-right: 50px;
     }

/* Chat input */
     .whatsapp-input {
         display: flex;
         border-top: 1px solid #ccc;
         background: #fff;
         padding: 5px;
     }

.whatsapp-input input {
         flex: 1;
         border: none;
         outline: none;
         padding: 8px;
         font-size: 14px;
     }

.whatsapp-input button {
         background: #25d366;
         border: none;
         color: #fff;
         padding: 0 12px;
         border-radius: 8px;
         cursor: pointer;
         font-weight: bold;
         transition: background 0.2s;
     }

.whatsapp-input button:hover {
         background: #20b358;
     }

/* ===== RESPONSIVE DESIGN ===== */
     @media (max-width: 768px) {
         .whatsapp-popup {
             width: 90%;
             right: 5%;
             bottom: 135px;
             max-height: 70vh;
             z-index: 9999;
         }

.contact-options {
             bottom: 55px;
             right: 3px;
         }

.message-icon {
             width: 50px;
             height: 50px;
             font-size: 22px;
         }

.contact-btn {
             width: 45px;
             height: 45px;
             font-size: 20px;
         }

.whatsapp-header img {
             width: 30px;
             height: 30px;
         }

.whatsapp-header h4 {
             font-size: 15px;
         }
     }

@media (max-width: 480px) {
         .whatsapp-popup {
             width: 95%;
             right: 2.5%;
             bottom: 128px;
             max-height: 75vh;
             z-index: 9999;
         }

.contact-options {
             bottom: 55px;
             right: 3px;
         }

.message-icon {
             width: 48px;
             height: 48px;
             font-size: 20px;
         }

.contact-btn {
             width: 42px;
             height: 42px;
             font-size: 18px;
         }

.whatsapp-input input {
             font-size: 13px;
         }

.whatsapp-input button {
             padding: 0 10px;
             font-size: 13px;
         }
     }
 </style>

<div class="sticky-footer">
     <div class="contact-options" id="contactOptions">
         <div class="contact-btn whatsapp" id="whatsappBtn" title="Chat on WhatsApp">
             <img src="https://cdn-icons-png.flaticon.com/512/124/124034.png" alt="WhatsApp">
         </div>
         <a href="tel:<?php echo $phone ?>" class="contact-btn phone" title="Call Us">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" height="30px" width="30px">
                 <path fill="#ffffff" d="M376 32C504.1 32 608 135.9 608 264C608 277.3 597.3 288 584 288C570.7 288 560 277.3 560 264C560 162.4 477.6 80 376 80C362.7 80 352 69.3 352 56C352 42.7 362.7 32 376 32zM384 224C401.7 224 416 238.3 416 256C416 273.7 401.7 288 384 288C366.3 288 352 273.7 352 256C352 238.3 366.3 224 384 224zM352 152C352 138.7 362.7 128 376 128C451.1 128 512 188.9 512 264C512 277.3 501.3 288 488 288C474.7 288 464 277.3 464 264C464 215.4 424.6 176 376 176C362.7 176 352 165.3 352 152zM176.1 65.4C195.8 60 216.4 70.1 224.2 88.9L264.7 186.2C271.6 202.7 266.8 221.8 252.9 233.2L208.8 269.3C241.3 340.9 297.8 399.3 368.1 434.2L406.7 387C418 373.1 437.1 368.4 453.7 375.2L551 415.8C569.8 423.6 579.9 444.2 574.5 463.9L573 469.4C555.4 534.1 492.9 589.3 416.6 573.2C241.6 536.1 103.9 398.4 66.8 223.4C50.7 147.1 105.9 84.6 170.5 66.9L176 65.4z" />
             </svg>
         </a>
     </div>

<div class="whatsapp-popup" id="whatsappPopup">
     <div class="whatsapp-header">
         <div class="whatsapp-header-left">
             <img src="https://cdn-icons-png.flaticon.com/512/124/124034.png" alt="WhatsApp">
             <div>
                 <h4 style="color: white;">Dr. Ankur Arya</h4>
                 
                 <small>Online</small>
             </div>
         </div>
         
     </div>
     <div class="whatsapp-body">
         <div class="message-bubble">Hello 👋 How can we assist you today?</div>
     </div>
     <div class="whatsapp-input">
         <input type="text" id="whatsappMessage" placeholder="Type your message..." />
         <button id="sendMessageBtn">Send</button>
     </div>
 </div>

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

// Toggle contact options
     messageIcon.addEventListener("click", () => {
         contactOptions.classList.toggle("active");
         whatsappPopup.style.display = "none";
     });

// Show WhatsApp popup
     whatsappBtn.addEventListener("click", () => {
         whatsappPopup.style.display =
             whatsappPopup.style.display === "flex" ? "none" : "flex";
         contactOptions.classList.remove("active");
     });

// Close WhatsApp popup
     closeChat.addEventListener("click", () => {
         whatsappPopup.style.display = "none";
     });

// Send WhatsApp message (redirect)
     sendMessageBtn.addEventListener("click", () => {
         const message = encodeURIComponent(whatsappMessage.value.trim());
         if (message) {
             const phoneNumber = "<?php echo $phone ?>"; // Replace with your WhatsApp number
             const whatsappURL = `https://web.whatsapp.com/send/?phone=<?php echo $phone ?>&text=` + encodeURIComponent(message)
             ;
             window.open(whatsappURL, "_blank");
             whatsappMessage.value = "";
             whatsappPopup.style.display = "none"; // auto close after sending
         }
     });
 </script>

if (
      !isClickInsidePopup &&
      !isClickOnWhatsappBtn &&
      !isClickOnMessageIcon &&
      !isClickInsideContactOptions
    ) {
      // Close WhatsApp popup with animation
      if (whatsappPopup.style.display === "flex") {
        whatsappPopup.style.opacity = "0";
        whatsappPopup.style.transform = "translateY(20px)";

setTimeout(() => {
          whatsappPopup.style.display = "none";
          whatsappPopup.style.opacity = "";
          whatsappPopup.style.transform = "";
        }, 250);
      }

// Close contact options
      contactOptions.classList.remove("active");
    }
  });
</script>

[ CANCEL ]

Name	Type	Actions
.. (Parent Directory)
📄 faq.php	FILE	[EDIT]
📄 footer_stickey.php	FILE	[EDIT]
📄 testimonial.php	FILE	[EDIT]
📄 why_book.php	FILE	[EDIT]

[ Root System Explorer ]

Editing: footer_stickey.php