Cambio de datos en el index y arreglo de enlaces de compartir de participa
This commit is contained in:
@@ -116,7 +116,7 @@ const animateOnScroll = `
|
||||
<div class="row justify-content-center text-center">
|
||||
{
|
||||
[
|
||||
{ number: "100+", description: "Personas a las que hemos concienciado." },
|
||||
{ number: "500+", description: "Personas a las que hemos concienciado." },
|
||||
{ number: "5+", description: "Proyectos creados para fomentar la sostenibilidad." }
|
||||
].map((impact, index) => (
|
||||
<div class="col-md-3 mb-4 animate-on-scroll">
|
||||
|
||||
@@ -5,21 +5,21 @@ import Footer from "../components/Footer.astro";
|
||||
|
||||
// Lista ampliada de mensajes sobre sostenibilidad
|
||||
const mensajes = [
|
||||
"¡Únete al cambio! 🌍 Cada acción cuenta para un futuro sostenible.",
|
||||
"La sostenibilidad comienza contigo. Comparte y actúa hoy. 🌱",
|
||||
"Pequeños pasos, grandes cambios. Contribuye a un mundo mejor. 🌿",
|
||||
"La Tierra es nuestro hogar. Protejámosla juntos. 🌎",
|
||||
"Actúa localmente, impacta globalmente. Sé parte del cambio. 🌐",
|
||||
"Cada gota cuenta. Conserva el agua y protege el futuro. 💧",
|
||||
"La energía renovable es el camino hacia un mañana más limpio. ⚡",
|
||||
"Reciclar es más que una acción, es un compromiso. ♻️",
|
||||
"El cambio climático es real. Actúa ahora, no mañana. 🌡️",
|
||||
"La biodiversidad es vida. Presérvala. 🐾",
|
||||
"Compra local, apoya a tu comunidad y reduce tu huella de carbono. 🛒",
|
||||
"La educación es clave para un desarrollo sostenible. 📚",
|
||||
"La naturaleza no necesita a las personas, las personas necesitan a la naturaleza. 🌳",
|
||||
"Invierte en nuestro planeta. Es el único hogar que tenemos. 🏡",
|
||||
"El futuro es verde. Haz tu parte para que así sea. 🌿"
|
||||
"¿Sabías que cada pequeña acción cuenta? ¡Juntos podemos crear un futuro más verde! 🌍",
|
||||
"Hoy es el día perfecto para empezar a cuidar nuestro planeta 🌱",
|
||||
"Tu granito de arena marca la diferencia. ¿Te animas a ser parte del cambio? 🌿",
|
||||
"Nuestro planeta nos necesita más que nunca. ¿Qué harás hoy por él? 🌎",
|
||||
"¡Genial! Actuando localmente creamos impacto global 🌐",
|
||||
"El agua es vida. ¿Cómo la proteges tú? 💧",
|
||||
"Imagina un futuro con energía limpia. ¡Está más cerca de lo que crees! ⚡",
|
||||
"El reciclaje es como una cadena: cada eslabón importa ♻️",
|
||||
"El planeta no puede esperar. ¿Nos ayudas a protegerlo? 🌡️",
|
||||
"Cada especie cuenta. ¿Qué tal si hoy aprendemos más sobre biodiversidad? 🐾",
|
||||
"Apoyar lo local es apoyar nuestro futuro. ¿Te unes? 🛒",
|
||||
"Compartir conocimiento es multiplicar el impacto. ¡Cuéntanos tus ideas! 📚",
|
||||
"La naturaleza nos habla. ¿Estamos escuchando? 🌳",
|
||||
"Este es nuestro único hogar. ¿Cómo lo cuidas tú? 🏡",
|
||||
"¡Construyamos juntos un futuro más verde! ¿Te apuntas? 🌿",
|
||||
];
|
||||
|
||||
// Función para obtener un mensaje aleatorio
|
||||
@@ -33,82 +33,189 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
|
||||
---
|
||||
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Participa Ahora | Ecobjetivos</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
body, html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.container {
|
||||
flex: 1;
|
||||
padding-top: 60px; /* Ajusta el padding superior para separar del navbar */
|
||||
}
|
||||
footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Navbar />
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Participa Ahora | Ecobjetivos</title>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.container {
|
||||
flex: 1;
|
||||
padding-top: 60px; /* Ajusta el padding superior para separar del navbar */
|
||||
}
|
||||
footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Navbar />
|
||||
|
||||
<div class="container py-5">
|
||||
<h1 class="text-center mb-4 mt-4">¡Participa Ahora!</h1>
|
||||
<p class="lead text-center mb-5">Descubre cómo puedes contribuir a un futuro sostenible y comparte el mensaje.</p>
|
||||
<div class="container py-5">
|
||||
<h1 class="text-center mb-4 mt-4">¡Participa Ahora!</h1>
|
||||
<p class="lead text-center mb-5">
|
||||
Descubre cómo puedes contribuir a un futuro sostenible y comparte el
|
||||
mensaje.
|
||||
</p>
|
||||
|
||||
<div class="text-center mb-4">
|
||||
<blockquote class="blockquote">
|
||||
<p id="mensaje" class="mb-0">{mensajeActual}</p>
|
||||
</blockquote>
|
||||
<button class="btn btn-primary mt-3" id="nuevoMensaje">
|
||||
Obtener otro mensaje
|
||||
</button>
|
||||
<div class="text-center mb-4">
|
||||
<blockquote class="blockquote">
|
||||
<p id="mensaje" class="mb-0">{mensajeActual}</p>
|
||||
</blockquote>
|
||||
<button class="btn btn-primary mt-3" id="nuevoMensaje">
|
||||
Obtener otro mensaje
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h3>Comparte en tus redes sociales:</h3>
|
||||
<a href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(mensajeActual + " " + urlSitio)}`} target="_blank" class="btn btn-info m-2">
|
||||
<i class="fab fa-twitter"></i> Twitter
|
||||
</a>
|
||||
<button class="btn btn-primary m-2" data-bs-toggle="modal" data-bs-target="#facebookModal">
|
||||
<i class="fab fa-facebook"></i> Facebook
|
||||
</button>
|
||||
<button class="btn btn-secondary m-2" data-bs-toggle="modal" data-bs-target="#linkedinModal">
|
||||
<i class="fab fa-linkedin"></i> LinkedIn
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
<!-- Modal Facebook -->
|
||||
<div class="modal fade" id="facebookModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Compartir en Facebook</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Copia este mensaje para compartirlo:</p>
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" id="textoFacebook" readonly>
|
||||
<button class="btn btn-primary" type="button" id="copiarFacebook">Copiar</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href={`https://www.facebook.com/share.php?u=${encodeURIComponent(urlSitio)}&t=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-primary">Ir a Facebook</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<h3>Comparte en tus redes sociales:</h3>
|
||||
<a href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(mensajeActual + " " + urlSitio)}`} target="_blank" class="btn btn-info m-2">
|
||||
<i class="fab fa-twitter"></i> Twitter
|
||||
</a>
|
||||
<a href={`https://www.facebook.com/sharer/sharer.php?u=${urlSitio}"e=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-primary m-2">
|
||||
<i class="fab fa-facebook"></i> Facebook
|
||||
</a>
|
||||
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=${urlSitio}&title=Ecobjetivos&summary=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-secondary m-2">
|
||||
<i class="fab fa-linkedin"></i> LinkedIn
|
||||
</a>
|
||||
<!-- Modal LinkedIn -->
|
||||
<div class="modal fade" id="linkedinModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Compartir en LinkedIn</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Copia este mensaje para compartirlo:</p>
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" id="textoLinkedin" readonly>
|
||||
<button class="btn btn-primary" type="button" id="copiarLinkedin">Copiar</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(urlSitio)}&title=Sostenibilidad&summary=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-primary">Ir a LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
<script>
|
||||
document.getElementById('nuevoMensaje').addEventListener('click', () => {
|
||||
<script>
|
||||
const mensajes = [
|
||||
"¡Únete al cambio! 🌍 Cada acción cuenta para un futuro sostenible.",
|
||||
"La sostenibilidad comienza contigo. Comparte y actúa hoy. 🌱",
|
||||
"Pequeños pasos, grandes cambios. Contribuye a un mundo mejor. 🌿",
|
||||
"La Tierra es nuestro hogar. Protejámosla juntos. 🌎",
|
||||
"Actúa localmente, impacta globalmente. Sé parte del cambio. 🌐",
|
||||
"Cada gota cuenta. Conserva el agua y protege el futuro. 💧",
|
||||
"La energía renovable es el camino hacia un mañana más limpio. ⚡",
|
||||
"Reciclar es más que una acción, es un compromiso. ♻️",
|
||||
"El cambio climático es real. Actúa ahora, no mañana. 🌡️",
|
||||
"La biodiversidad es vida. Presérvala. 🐾",
|
||||
"Compra local, apoya a tu comunidad y reduce tu huella de carbono. 🛒",
|
||||
"La educación es clave para un desarrollo sostenible. 📚",
|
||||
"La naturaleza no necesita a las personas, las personas necesitan a la naturaleza. 🌳",
|
||||
"Invierte en nuestro planeta. Es el único hogar que tenemos. 🏡",
|
||||
"El futuro es verde. Haz tu parte para que así sea. 🌿"
|
||||
"¿Sabías que cada pequeña acción cuenta? ¡Juntos podemos crear un futuro más verde! 🌍",
|
||||
"Hoy es el día perfecto para empezar a cuidar nuestro planeta 🌱",
|
||||
"Tu granito de arena marca la diferencia. ¿Te animas a ser parte del cambio? 🌿",
|
||||
"Nuestro planeta nos necesita más que nunca. ¿Qué harás hoy por él? 🌎",
|
||||
"¡Genial! Actuando localmente creamos impacto global 🌐",
|
||||
"El agua es vida. ¿Cómo la proteges tú? 💧",
|
||||
"Imagina un futuro con energía limpia. ¡Está más cerca de lo que crees! ⚡",
|
||||
"El reciclaje es como una cadena: cada eslabón importa ♻️",
|
||||
"El planeta no puede esperar. ¿Nos ayudas a protegerlo? 🌡️",
|
||||
"Cada especie cuenta. ¿Qué tal si hoy aprendemos más sobre biodiversidad? 🐾",
|
||||
"Apoyar lo local es apoyar nuestro futuro. ¿Te unes? 🛒",
|
||||
"Compartir conocimiento es multiplicar el impacto. ¡Cuéntanos tus ideas! 📚",
|
||||
"La naturaleza nos habla. ¿Estamos escuchando? 🌳",
|
||||
"Este es nuestro único hogar. ¿Cómo lo cuidas tú? 🏡",
|
||||
"¡Construyamos juntos un futuro más verde! ¿Te apuntas? 🌿",
|
||||
];
|
||||
const mensajeActual = mensajes[Math.floor(Math.random() * mensajes.length)];
|
||||
document.getElementById('mensaje').textContent = mensajeActual;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
function copiarAlPortapapeles(texto, botonId) {
|
||||
navigator.clipboard.writeText(texto).then(() => {
|
||||
const boton = document.getElementById(botonId);
|
||||
if (boton) {
|
||||
boton.textContent = '¡Copiado!';
|
||||
setTimeout(() => {
|
||||
boton.textContent = 'Copiar';
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Inicialización al cargar la página
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const mensajeActual = document.getElementById('mensaje')?.textContent || '';
|
||||
|
||||
const textoFacebookElement = document.getElementById('textoFacebook');
|
||||
const textoLinkedinElement = document.getElementById('textoLinkedin');
|
||||
|
||||
if (textoFacebookElement) {
|
||||
textoFacebookElement.value = mensajeActual;
|
||||
}
|
||||
if (textoLinkedinElement) {
|
||||
textoLinkedinElement.value = mensajeActual;
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('nuevoMensaje')?.addEventListener('click', () => {
|
||||
const mensajeActual = mensajes[Math.floor(Math.random() * mensajes.length)];
|
||||
const mensajeElement = document.getElementById('mensaje');
|
||||
const textoFacebookElement = document.getElementById('textoFacebook');
|
||||
const textoLinkedinElement = document.getElementById('textoLinkedin');
|
||||
|
||||
if (mensajeElement) {
|
||||
mensajeElement.textContent = mensajeActual;
|
||||
}
|
||||
if (textoFacebookElement) {
|
||||
textoFacebookElement.value = mensajeActual;
|
||||
}
|
||||
if (textoLinkedinElement) {
|
||||
textoLinkedinElement.value = mensajeActual;
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('copiarFacebook')?.addEventListener('click', () => {
|
||||
const textoFacebook = document.getElementById('textoFacebook');
|
||||
if (textoFacebook) {
|
||||
copiarAlPortapapeles(textoFacebook.value, 'copiarFacebook');
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('copiarLinkedin')?.addEventListener('click', () => {
|
||||
const textoLinkedin = document.getElementById('textoLinkedin');
|
||||
if (textoLinkedin) {
|
||||
copiarAlPortapapeles(textoLinkedin.value, 'copiarLinkedin');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user