Mejora estética y participa ahora

2024-11-06 17:52:30 +01:00
parent f3221dce96
commit c02b3771c3
3 changed files with 342 additions and 289 deletions
--- a/src/pages/participa.astro
+++ b/src/pages/participa.astro
@@ -0,0 +1,114 @@
+---
+// 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}&quote=${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>