Update lopezbarber58.html

Author: MYXXdev

MYXXfm/pages/lopezbarber58.html

@@ -6,10 +6,14 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <meta name="description" content="Contacto con Tu Barbería - Conéctate a través de Instagram o WhatsApp.">
   <title>Lopez Barber</title>
+
+  <!-- FontAwesome for Icons -->
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
+
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
     body { 
-      overflow: hidden; 
+      overflow: hidden; /* Prevent scroll until content is loaded */
       background: radial-gradient(circle, #1c3b69, #2a5579, #4a90e2, #5e8db6, #8abbd4); 
       background-size: 400% 400%; 
       animation: gradientBG 120s ease infinite; 
@@ -28,6 +32,48 @@
       100% { background-position: 0% 50%; } 
     }
 
+    /* Custom Logo Spinner */
+    .loading-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 1); /* Increased opacity to make it darker */
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 9999;
+      opacity: 1;
+      transition: opacity 1s ease;
+    }
+
+    .logo-spinner {
+      width: 500px;
+      height: 500px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      animation: spin 2s linear infinite, pulse 1.5s ease-in-out infinite;
+    }
+
+    .logo-spinner img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.1); }
+      100% { transform: scale(1); }
+    }
+
+    /* Main Content Styles */
     .container { 
       width: 100%; 
       max-width: 800px; 
@@ -42,32 +88,23 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
+      opacity: 0;
+      transition: opacity 1s ease-out;
     }
+
     @keyframes fadeIn { 
       0% { opacity: 0; transform: translateY(50px); } 
       100% { opacity: 1; transform: translateY(0); } 
     }
 
+    /* Logo at the top of the page */
     .logo-container { 
-      position: absolute; 
-      top: 50%; 
-      left: 50%; 
-      transform: translate(-50%, -50%); 
-      animation: moveLogoToPosition 3s ease-out forwards; 
-      z-index: 3; 
+      margin-bottom: 1rem; /* Reduced space under the logo */
+      opacity: 1; 
     }
+
     .logo { 
       width: 180px; 
-      opacity: 0; 
-      animation: logoFadeIn 1.5s ease-out 0.5s forwards; 
-    }
-    @keyframes logoFadeIn { 
-      0% { opacity: 0; transform: scale(4); } 
-      100% { opacity: 1; transform: scale(1); } 
-    }
-    @keyframes moveLogoToPosition { 
-      0% { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(4); }
-      100% { top: 10px; left: 50%; transform: translateX(-50%) scale(1); }
     }
 
     h1 { 
@@ -79,6 +116,7 @@
       color: #FFD700; 
       animation: slideInFromLeft 1.5s ease-out; 
     }
+
     @keyframes slideInFromLeft { 
       0% { opacity: 0; transform: translateX(-100px); } 
       100% { opacity: 1; transform: translateX(0); } 
@@ -91,6 +129,7 @@
       opacity: 0; 
       animation: slideInFromRight 1.5s ease-out 0.5s forwards; 
     }
+
     @keyframes slideInFromRight { 
       0% { opacity: 0; transform: translateX(100px); } 
       100% { opacity: 1; transform: translateX(0); } 
@@ -103,6 +142,7 @@
       opacity: 0; 
       animation: fadeInText 2s ease-out 1s forwards; 
     }
+
     @keyframes fadeInText { 
       0% { opacity: 0; } 
       100% { opacity: 1; } 
@@ -115,6 +155,7 @@
       margin-top: 3rem; 
       flex-wrap: wrap; 
     }
+
     .social-icon { 
       display: flex; 
       align-items: center; 
@@ -127,44 +168,58 @@
       transition: all 0.3s ease; 
       background-color: #333; 
     }
+
     .social-icon i { margin-right: 0.5rem; }
     .social-icon:hover { 
       transform: scale(1.05); 
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
       background-color: #ff6a00; 
     }
+
     .social-icon:active { transform: scale(0.95); }
     .instagram { background-color: #e1306c; }
     .whatsapp { background-color: #25D366; }
 
-    .taggbox { margin-top: 2rem; }
+    .taggbox { 
+      margin-top: 2rem; 
+      display: none; /* Hide the widget initially */
+    }
 
     @media (max-width: 768px) {
       body { 
         font-size: 16px;
         padding: 0 30px; 
       }
+
       .container { 
         padding: 2rem; 
         max-width: 100%; 
       }
+
       h1 { font-size: 2rem; }
       h2 { font-size: 1.6rem; }
       .social-links { flex-direction: column; gap: 1rem; }
       .social-icon { width: 100%; font-size: 1.4rem; }
     }
   </style>
 
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Poppins:wght@300;500;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
 </head>
 <body>
 
-  <div class="logo-container">
-    <img src="https://myxxdev.github.io/images/LopezBarber.png" alt="Logo de Tu Barbería" class="logo" loading="lazy">
+  <!-- Loading Spinner -->
+  <div class="loading-overlay" id="loadingOverlay">
+    <div class="logo-spinner">
+      <img src="https://myxxdev.github.io/images/LopezBarber.png" alt="Logo de Tu Barbería" class="logo" />
+    </div>
   </div>
 
+  <!-- Main Content -->
   <div class="container">
+    <!-- Logo placed here -->
+    <div class="logo-container">
+      <img src="https://myxxdev.github.io/images/LopezBarber.png" alt="Logo de Tu Barbería" class="logo" />
+    </div>
+    
     <h1>¡Conéctate con Tu Barbería!</h1>
     <p>Elige tu forma preferida de contactarnos:</p>
 
@@ -177,9 +232,42 @@ <h1>¡Conéctate con Tu Barbería!</h1>
       </a>
     </div>
 
-    <div class="taggbox" style="width:100%;height:100%" data-widget-id="2147120" data-tags="false"></div>
+    <div class="taggbox" id="taggboxWidget" style="width:100%; height:100%" data-widget-id="2147120" data-tags="false"></div>
     <script src="https://widget.taggbox.com/embed-lite.min.js" type="text/javascript"></script>
+
+    <!-- Example Address -->
+    <address style="margin-top: 20px; font-size: 0.9em;">
+      Calle Gran Cardenal<br>
+      29620 Torremolinos<br>
+      Málaga, España
+    </address>
   </div>
 
+  <script>
+    // Function to hide loading spinner after widget loads
+    function hideLoadingSpinner() {
+      document.getElementById('loadingOverlay').style.opacity = 0;
+      document.querySelector('.taggbox').style.display = 'block';
+      document.querySelector('.container').style.opacity = 1; // Show the main content
+      setTimeout(() => {
+        document.getElementById('loadingOverlay').style.display = 'none';
+      }, 1000); // Wait for the fade-out to complete
+    }
+
+    // Wait for the widget to load
+    window.addEventListener('load', function() {
+      setTimeout(hideLoadingSpinner, 3000); // Ensure spinner stays for 5 seconds
+    });
+
+    // Check if widget is ready after script loads
+    const interval = setInterval(() => {
+      const taggbox = document.getElementById('taggboxWidget');
+      if (taggbox && taggbox.children.length > 0) {
+        hideLoadingSpinner();
+        clearInterval(interval);
+      }
+    }, 500); // Check every 500ms
+  </script>
+
 </body>
 </html>