Skip to content

Commit

Permalink
Update lopezbarber58.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@MYXXdev
MYXXdev committed Jan 12, 2025
1 parent 990cbe9 commit 3666ee0
Showing 1 changed file with 111 additions and 23 deletions.
134 changes: 111 additions & 23 deletions MYXXfm/pages/lopezbarber58.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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); }
Expand All @@ -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); }
Expand All @@ -103,6 +142,7 @@
opacity: 0;
animation: fadeInText 2s ease-out 1s forwards;
}

@keyframes fadeInText {
0% { opacity: 0; }
100% { opacity: 1; }
Expand All @@ -115,6 +155,7 @@
margin-top: 3rem;
flex-wrap: wrap;
}

.social-icon {
display: flex;
align-items: center;
Expand All @@ -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>

Expand All @@ -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>

0 comments on commit 3666ee0

Please sign in to comment.