Update lopezbarber58.html

Author: MYXXdev

MYXXfm/pages/lopezbarber58.html

@@ -26,7 +26,7 @@
       justify-content: center;
       align-items: center;
       padding: 0;
-      overflow-x: hidden; /* Prevent horizontal scrolling */
+      overflow-x: hidden; 
     }
 
     body { 
@@ -166,17 +166,17 @@
       align-items: center; 
       justify-content: center;
       padding: 0.5rem;
-      border-radius: 50%; /* Changed to make circular */
+      border-radius: 50%; 
       font-size: 1.2rem; 
       color: #fff; 
       text-decoration: none; 
       transition: all 0.3s ease; 
-      width: 50px; /* Adjusted for circular shape */
-      height: 50px; /* Adjusted for circular shape */
+      width: 50px; 
+      height: 50px; 
     }
 
     .social-icon i {
-      margin: 0; /* Adjusted to center the icon */
+      margin: 0; 
     }
 
     .social-icon:hover { 
@@ -192,14 +192,14 @@
     .whatsapp { background-color: #25D366; }
     .schedule { 
       background-color: #ff5733; 
-      border-radius: 25px; /* Keep this button pill-shaped */
-      padding: 0.5rem 1rem; /* Reset padding for text */ 
-      width: auto; /* Reset width for this button */
-      height: auto; /* Reset height for this button */
+      border-radius: 25px; 
+      padding: 0.5rem 1rem; 
+      width: auto; 
+      height: auto; 
     }
 
     .schedule i {
-      margin-right: 0.5rem; /* Add margin for icon separation */
+      margin-right: 0.5rem; 
     }
 
     .taggbox { 
@@ -270,16 +270,20 @@
       width: 100%;
       height: 100%;
       overflow: auto;
-      background-color: rgba(0,0,0,0.9);
+      background-color: rgba(0,0,0,0.7);
     }
 
     .modal-content {
-      margin: auto;
-      display: block;
+      margin: 15% auto;
+      padding: 4px;
       width: 80%;
       max-width: 700px;
+      background-color: white;
+      border-radius: 15px;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+      position: relative;
       animation-name: zoom;
-      animation-duration: 0.6s;
+      animation-duration: 0.3s;
     }
 
     @keyframes zoom {
@@ -288,50 +292,26 @@
     }
 
     .close {
+      color: #777;
       position: absolute;
-      top: 15px;
-      right: 35px;
-      color: #f1f1f1;
-      font-size: 40px;
+      right: 10px;
+      top: 10px;
+      font-size: 24px;
       font-weight: bold;
-      transition: 0.3s;
+      cursor: pointer;
     }
 
     .close:hover,
     .close:focus {
-      color: #bbb;
+      color: #000;
       text-decoration: none;
-      cursor: pointer;
-    }
-
-    .social-icon.circle-share {
-      background-color: #007bff; 
-      padding: 0.5rem; 
-      border-radius: 50%; 
-      font-size: 1.5rem; 
-      color: #fff; 
-      text-decoration: none; 
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      top: 10px;
-      right: 10px; 
-      transition: all 0.3s ease;
-    }
-
-    .social-icon.circle-share i {
-      margin: 0; 
     }
 
-    .social-icon.circle-share:hover {
-      background-color: #0056b3; 
-      transform: scale(1.05); 
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
-    }
-
-    .social-icon.circle-share:active {
-      transform: scale(0.95); 
+    .modal-content iframe {
+      border: none;
+      width: 100%;
+      height: 500px;
+      border-radius: 10px;
     }
   </style>
 </head>
@@ -355,7 +335,7 @@ <h1 data-lang-en="Book an appointment with López!" data-lang-es="Reserva una ci
     <br>
     <div class="social-links">
       <!-- Schedule Appointment Button -->
-      <a href="https://lopezbarber58.setmore.com" target="_blank" class="social-icon schedule" aria-label="Schedule Appointment">
+      <a href="javascript:void(0);" class="social-icon schedule" aria-label="Schedule Appointment">
         <i class="fas fa-calendar"></i>
         <span data-lang-en="Book Appointment" data-lang-es="Reservar Cita">Book Appointment</span>
       </a>
@@ -369,11 +349,6 @@ <h1 data-lang-en="Book an appointment with López!" data-lang-es="Reserva una ci
       <a href="https://instagram.com/lopezbarber58" target="_blank" class="social-icon instagram" aria-label="Instagram de López">
         <i class="fab fa-instagram"></i>
       </a>
-
-      <!-- New Circle Share Button -->
-      <a href="javascript:void(0);" class="social-icon circle-share" onclick="openPopupImage()" aria-label="Share Image">
-        <i class="fas fa-share"></i>
-      </a>
     </div>
     <br>
     <div class="taggbox" id="taggboxWidget" data-widget-id="2147120" data-tags="false"></div>
@@ -392,10 +367,13 @@ <h1 data-lang-en="Book an appointment with López!" data-lang-es="Reserva una ci
       <img src="https://flagcdn.com/w320/gb.png" alt="English" onclick="changeLanguage('en')" />
     </div>
 
-    <!-- The Modal -->
-    <div id="myModal" class="modal">
-      <span class="close">×</span>
-      <img class="modal-content" id="img01">
+    <!-- The Modal for Appointment Booking -->
+    <div id="appointmentModal" class="modal">
+      <div class="modal-content">
+        <span class="close">×</span>
+        <h2>Book an Appointment</h2>
+        <iframe src="https://lopezbarber58.setmore.com" width="100%" height="500px" frameborder="0"></iframe>
+      </div>
     </div>
   </div>
 
@@ -419,47 +397,43 @@ <h1 data-lang-en="Book an appointment with López!" data-lang-es="Reserva una ci
     // Set default language on load (example: English)
     window.onload = () => {
       const userLang = navigator.language || navigator.userLanguage;
-      changeLanguage(userLang.startsWith('es') ? 'es' : 'en'); // Default to Spanish if user's language is Spanish, else English
+      changeLanguage(userLang.startsWith('es') ? 'es' : 'en');
     };
 
     // Function to hide loading spinner after widget loads
     function hideLoadingSpinner() {
       document.getElementById('loadingOverlay').style.opacity = 0;
-      document.querySelector('.container').style.opacity = 1; // Show the main content
+      document.querySelector('.container').style.opacity = 1; 
       setTimeout(() => {
         document.getElementById('loadingOverlay').style.display = 'none';
-      }, 1000); // Wait for the fade-out to complete
+      }, 1000);
     }
 
     // Wait for the widget to load
     window.addEventListener('load', function() {
-      setTimeout(hideLoadingSpinner, 3000); // Ensure spinner stays for 3 seconds
+      setTimeout(hideLoadingSpinner, 3000); 
     });
 
-    // Function to open the modal with the image
-    function openPopupImage() {
-      var modal = document.getElementById("myModal");
-      var modalImg = document.getElementById("img01");
-      var imgSource = "https://myxxdev.github.io/images/LopezBarber58QRCode.png"; // Replace this with the actual image URL
+    // Function to open the appointment modal
+    document.querySelector('.schedule').addEventListener('click', function(event) {
+      event.preventDefault(); 
+      var modal = document.getElementById("appointmentModal");
       modal.style.display = "block";
-      modalImg.src = imgSource;
-
-      // Get the <span> element that closes the modal
-      var span = document.getElementsByClassName("close")[0];
+    });
 
-      // When the user clicks on <span> (x), close the modal
-      span.onclick = function() { 
-        modal.style.display = "none";
-      }
-    }
+    // For closing the modal
+    document.querySelector('.close').addEventListener('click', function() {
+      var modal = document.getElementById("appointmentModal");
+      modal.style.display = "none";
+    });
 
-    // When the user clicks anywhere outside of the modal, close it
-    window.onclick = function(event) {
-      var modal = document.getElementById("myModal");
+    // Close modal if clicking outside of it
+    window.addEventListener('click', function(event) {
+      var modal = document.getElementById("appointmentModal");
       if (event.target == modal) {
         modal.style.display = "none";
       }
-    }
+    });
   </script>
 
 </body>