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 43d0dcd commit f1721f1
Showing 1 changed file with 87 additions and 35 deletions.
122 changes: 87 additions & 35 deletions MYXXfm/pages/lopezbarber58.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="es">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<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.">
<meta name="description" content="Contact your barber shop - Connect via Instagram or WhatsApp.">
<title>Lopez Barber</title>

<!-- FontAwesome for Icons -->
Expand All @@ -13,15 +13,15 @@
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body {
overflow: hidden; /* Prevent scroll until content is loaded */
overflow: hidden;
background: radial-gradient(circle, #1c3b69, #2a5579, #4a90e2, #5e8db6, #8abbd4);
background-size: 400% 400%;
animation: gradientBG 120s ease infinite;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
min-height: 100vh;
text-align: center;
flex-direction: column;
padding: 0 10px;
Expand All @@ -39,7 +39,7 @@
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 1); /* Increased opacity to make it darker */
background: rgba(0, 0, 0, 1);
display: flex;
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -77,7 +77,7 @@
.container {
width: 100%;
max-width: 800px;
padding: 2rem 2rem 2rem;
padding: 2rem 2rem 4rem;
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
Expand All @@ -99,20 +99,14 @@

/* Logo at the top of the page */
.logo-container {
margin-bottom: 1rem; /* Reduced space under the logo */
margin-bottom: 1rem;
opacity: 1;
}

.logo {
width: 180px;
}

h1, h2, p {
white-space: nowrap; /* Prevent text from wrapping onto multiple lines */
overflow: hidden; /* Hide overflowing text */
text-overflow: ellipsis; /* Add ellipsis when the text overflows */
}

h1 {
font-size: 2.5rem;
font-family: 'Roboto', sans-serif;
Expand Down Expand Up @@ -159,7 +153,7 @@
justify-content: center;
gap: 2rem;
margin-top: 3rem;
flex-wrap: nowrap; /* Prevent wrapping of social links */
flex-wrap: wrap;
}

.social-icon {
Expand All @@ -172,10 +166,7 @@
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
background-color: #333;
white-space: nowrap;
min-width: 200px;
text-align: center; /* Ensure text is centered */
background-color: #333;
}

.social-icon i { margin-right: 0.5rem; }
Expand All @@ -189,6 +180,29 @@
.instagram { background-color: #e1306c; }
.whatsapp { background-color: #25D366; }

.taggbox {
margin-top: 2rem;
display: none;
}

.language-switcher {
margin-top: 20px;
}

.language-switcher button {
margin: 0 5px;
padding: 5px 10px;
background: transparent;
color: #FFD700;
border: 1px solid #FFD700;
border-radius: 5px;
cursor: pointer;
}

.language-switcher button:hover {
background-color: rgba(255, 215, 0, 0.1);
}

@media (max-width: 768px) {
body {
font-size: 16px;
Expand All @@ -202,15 +216,8 @@

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
.social-links {
flex-direction: column;
gap: 1rem;
}
.social-icon {
width: 100%;
font-size: 1.4rem;
min-width: 100%;
}
.social-links { flex-direction: column; gap: 1rem; }
.social-icon { width: 100%; font-size: 1.4rem; }
}
</style>

Expand All @@ -231,34 +238,79 @@
<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>
<h1 data-lang-en="Connect with Your Barber Shop!" data-lang-es="¡Conéctate con Tu Barbería!">Connect with Your Barber Shop!</h1>
<p data-lang-en="Choose your preferred method to contact us:" data-lang-es="Elige tu forma preferida de contactarnos:">Choose your preferred method to contact us:</p>

<div class="social-links">
<a href="https://instagram.com/lopezbarber58" target="_blank" class="social-icon instagram" aria-label="Instagram de Tu Barbería">
<a href="https://instagram.com/lopezbarber58" target="_blank" class="social-icon instagram" aria-label="Instagram de Tu Barbería" data-lang-en="Instagram" data-lang-es="Instagram">
<i class="fab fa-instagram"></i> Instagram
</a>
<a href="https://wa.me/+34602483067" target="_blank" class="social-icon whatsapp" aria-label="WhatsApp de Tu Barbería">
<a href="https://wa.me/+34602483067" target="_blank" class="social-icon whatsapp" aria-label="WhatsApp de Tu Barbería" data-lang-en="WhatsApp" data-lang-es="WhatsApp">
<i class="fab fa-whatsapp"></i> WhatsApp
</a>
</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 data-lang-en="Gran Cardenal Street<br>29620 Torremolinos<br>Málaga, Spain" data-lang-es="Calle Gran Cardenal<br>29620 Torremolinos<br>Málaga, España" style="margin-top: 20px; font-size: 0.9em;">
Gran Cardenal Street<br>
29620 Torremolinos<br>
Málaga, Spain
</address>

<div class="language-switcher">
<button onclick="changeLanguage('en')">English</button>
<button onclick="changeLanguage('es')">Español</button>
</div>
</div>

<script>
// Function to change language
function changeLanguage(lang) {
document.querySelectorAll('[data-lang-en], [data-lang-es]').forEach(el => {
const translation = el.getAttribute(`data-lang-${lang}`);
if (translation) {
if (el.tagName.toLowerCase() === 'address') {
el.innerHTML = translation.replace(/\n/g, '<br>');
} else {
el.textContent = translation;
}
}
});
}

// 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
};

// 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 window load event
// Wait for the widget to load
window.addEventListener('load', function() {
setTimeout(hideLoadingSpinner, 5000); // Ensure spinner stays for 5 seconds
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>
</html>

0 comments on commit f1721f1

Please sign in to comment.