115 lines
4.9 KiB
Plaintext
115 lines
4.9 KiB
Plaintext
---
|
|
// Importar componentes existentes
|
|
import Navbar from "../components/Navbar.astro";
|
|
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. 🌿"
|
|
];
|
|
|
|
// Función para obtener un mensaje aleatorio
|
|
function obtenerMensajeAleatorio() {
|
|
return mensajes[Math.floor(Math.random() * mensajes.length)];
|
|
}
|
|
|
|
// Mensaje inicial
|
|
let mensajeActual = obtenerMensajeAleatorio();
|
|
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 />
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<Footer />
|
|
|
|
<script>
|
|
document.getElementById('nuevoMensaje').addEventListener('click', () => {
|
|
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. 🌿"
|
|
];
|
|
const mensajeActual = mensajes[Math.floor(Math.random() * mensajes.length)];
|
|
document.getElementById('mensaje').textContent = mensajeActual;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|