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 15, 2025
1 parent 35cfa4f commit 3a6505d
Showing 1 changed file with 55 additions and 81 deletions.
136 changes: 55 additions & 81 deletions MYXXfm/pages/lopezbarber58.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
justify-content: center;
align-items: center;
padding: 0;
overflow-x: hidden; /* Prevent horizontal scrolling */
overflow-x: hidden;
}

body {
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>

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

0 comments on commit 3a6505d

Please sign in to comment.