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">
|
<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." }
|
{ number: "5+", description: "Proyectos creados para fomentar la sostenibilidad." }
|
||||||
].map((impact, index) => (
|
].map((impact, index) => (
|
||||||
<div class="col-md-3 mb-4 animate-on-scroll">
|
<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
|
// Lista ampliada de mensajes sobre sostenibilidad
|
||||||
const mensajes = [
|
const mensajes = [
|
||||||
"¡Únete al cambio! 🌍 Cada acción cuenta para un futuro sostenible.",
|
"¿Sabías que cada pequeña acción cuenta? ¡Juntos podemos crear un futuro más verde! 🌍",
|
||||||
"La sostenibilidad comienza contigo. Comparte y actúa hoy. 🌱",
|
"Hoy es el día perfecto para empezar a cuidar nuestro planeta 🌱",
|
||||||
"Pequeños pasos, grandes cambios. Contribuye a un mundo mejor. 🌿",
|
"Tu granito de arena marca la diferencia. ¿Te animas a ser parte del cambio? 🌿",
|
||||||
"La Tierra es nuestro hogar. Protejámosla juntos. 🌎",
|
"Nuestro planeta nos necesita más que nunca. ¿Qué harás hoy por él? 🌎",
|
||||||
"Actúa localmente, impacta globalmente. Sé parte del cambio. 🌐",
|
"¡Genial! Actuando localmente creamos impacto global 🌐",
|
||||||
"Cada gota cuenta. Conserva el agua y protege el futuro. 💧",
|
"El agua es vida. ¿Cómo la proteges tú? 💧",
|
||||||
"La energía renovable es el camino hacia un mañana más limpio. ⚡",
|
"Imagina un futuro con energía limpia. ¡Está más cerca de lo que crees! ⚡",
|
||||||
"Reciclar es más que una acción, es un compromiso. ♻️",
|
"El reciclaje es como una cadena: cada eslabón importa ♻️",
|
||||||
"El cambio climático es real. Actúa ahora, no mañana. 🌡️",
|
"El planeta no puede esperar. ¿Nos ayudas a protegerlo? 🌡️",
|
||||||
"La biodiversidad es vida. Presérvala. 🐾",
|
"Cada especie cuenta. ¿Qué tal si hoy aprendemos más sobre biodiversidad? 🐾",
|
||||||
"Compra local, apoya a tu comunidad y reduce tu huella de carbono. 🛒",
|
"Apoyar lo local es apoyar nuestro futuro. ¿Te unes? 🛒",
|
||||||
"La educación es clave para un desarrollo sostenible. 📚",
|
"Compartir conocimiento es multiplicar el impacto. ¡Cuéntanos tus ideas! 📚",
|
||||||
"La naturaleza no necesita a las personas, las personas necesitan a la naturaleza. 🌳",
|
"La naturaleza nos habla. ¿Estamos escuchando? 🌳",
|
||||||
"Invierte en nuestro planeta. Es el único hogar que tenemos. 🏡",
|
"Este es nuestro único hogar. ¿Cómo lo cuidas tú? 🏡",
|
||||||
"El futuro es verde. Haz tu parte para que así sea. 🌿"
|
"¡Construyamos juntos un futuro más verde! ¿Te apuntas? 🌿",
|
||||||
];
|
];
|
||||||
|
|
||||||
// Función para obtener un mensaje aleatorio
|
// Función para obtener un mensaje aleatorio
|
||||||
@@ -33,14 +33,21 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
|
|||||||
---
|
---
|
||||||
|
|
||||||
<html lang="es">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<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" />
|
||||||
<title>Participa Ahora | Ecobjetivos</title>
|
<title>Participa Ahora | Ecobjetivos</title>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
<link
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
|
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>
|
<style>
|
||||||
body, html {
|
body,
|
||||||
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -54,13 +61,16 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
|
|||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
|
|
||||||
<div class="container py-5">
|
<div class="container py-5">
|
||||||
<h1 class="text-center mb-4 mt-4">¡Participa Ahora!</h1>
|
<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>
|
<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">
|
<div class="text-center mb-4">
|
||||||
<blockquote class="blockquote">
|
<blockquote class="blockquote">
|
||||||
@@ -70,45 +80,142 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
|
|||||||
Obtener otro mensaje
|
Obtener otro mensaje
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h3>Comparte en tus redes sociales:</h3>
|
<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">
|
<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
|
<i class="fab fa-twitter"></i> Twitter
|
||||||
</a>
|
</a>
|
||||||
<a href={`https://www.facebook.com/sharer/sharer.php?u=${urlSitio}"e=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-primary m-2">
|
<button class="btn btn-primary m-2" data-bs-toggle="modal" data-bs-target="#facebookModal">
|
||||||
<i class="fab fa-facebook"></i> Facebook
|
<i class="fab fa-facebook"></i> Facebook
|
||||||
</a>
|
</button>
|
||||||
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=${urlSitio}&title=Ecobjetivos&summary=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-secondary m-2">
|
<button class="btn btn-secondary m-2" data-bs-toggle="modal" data-bs-target="#linkedinModal">
|
||||||
<i class="fab fa-linkedin"></i> LinkedIn
|
<i class="fab fa-linkedin"></i> LinkedIn
|
||||||
</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Footer />
|
<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>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
<script>
|
<script>
|
||||||
document.getElementById('nuevoMensaje').addEventListener('click', () => {
|
|
||||||
const mensajes = [
|
const mensajes = [
|
||||||
"¡Únete al cambio! 🌍 Cada acción cuenta para un futuro sostenible.",
|
"¿Sabías que cada pequeña acción cuenta? ¡Juntos podemos crear un futuro más verde! 🌍",
|
||||||
"La sostenibilidad comienza contigo. Comparte y actúa hoy. 🌱",
|
"Hoy es el día perfecto para empezar a cuidar nuestro planeta 🌱",
|
||||||
"Pequeños pasos, grandes cambios. Contribuye a un mundo mejor. 🌿",
|
"Tu granito de arena marca la diferencia. ¿Te animas a ser parte del cambio? 🌿",
|
||||||
"La Tierra es nuestro hogar. Protejámosla juntos. 🌎",
|
"Nuestro planeta nos necesita más que nunca. ¿Qué harás hoy por él? 🌎",
|
||||||
"Actúa localmente, impacta globalmente. Sé parte del cambio. 🌐",
|
"¡Genial! Actuando localmente creamos impacto global 🌐",
|
||||||
"Cada gota cuenta. Conserva el agua y protege el futuro. 💧",
|
"El agua es vida. ¿Cómo la proteges tú? 💧",
|
||||||
"La energía renovable es el camino hacia un mañana más limpio. ⚡",
|
"Imagina un futuro con energía limpia. ¡Está más cerca de lo que crees! ⚡",
|
||||||
"Reciclar es más que una acción, es un compromiso. ♻️",
|
"El reciclaje es como una cadena: cada eslabón importa ♻️",
|
||||||
"El cambio climático es real. Actúa ahora, no mañana. 🌡️",
|
"El planeta no puede esperar. ¿Nos ayudas a protegerlo? 🌡️",
|
||||||
"La biodiversidad es vida. Presérvala. 🐾",
|
"Cada especie cuenta. ¿Qué tal si hoy aprendemos más sobre biodiversidad? 🐾",
|
||||||
"Compra local, apoya a tu comunidad y reduce tu huella de carbono. 🛒",
|
"Apoyar lo local es apoyar nuestro futuro. ¿Te unes? 🛒",
|
||||||
"La educación es clave para un desarrollo sostenible. 📚",
|
"Compartir conocimiento es multiplicar el impacto. ¡Cuéntanos tus ideas! 📚",
|
||||||
"La naturaleza no necesita a las personas, las personas necesitan a la naturaleza. 🌳",
|
"La naturaleza nos habla. ¿Estamos escuchando? 🌳",
|
||||||
"Invierte en nuestro planeta. Es el único hogar que tenemos. 🏡",
|
"Este es nuestro único hogar. ¿Cómo lo cuidas tú? 🏡",
|
||||||
"El futuro es verde. Haz tu parte para que así sea. 🌿"
|
"¡Construyamos juntos un futuro más verde! ¿Te apuntas? 🌿",
|
||||||
];
|
];
|
||||||
|
|
||||||
|
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 mensajeActual = mensajes[Math.floor(Math.random() * mensajes.length)];
|
||||||
document.getElementById('mensaje').textContent = mensajeActual;
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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