h4ckx0r/webSostenible
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://git.h4ckdata.es/h4ckx0r/webSostenible

Browse Source
This commit is contained in:
Lucas Curiel
2024-11-06 19:17:07 +01:00
parent 1632fba9e6 c02b3771c3
commit 57dde5551e
3 changed files with 342 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/ListadoPostsHorizontal.astro
View File

@@ -11,7 +11,7 @@ const posts = await Astro.glob("../pages/posts/*.mdx");
<h5 class="card-title">
{post.frontmatter.titulo}
</h5>
<p class="card-text">
<p class="card-text post-content">
{post.frontmatter.descripcion}
...
</p>
@@ -24,3 +24,14 @@ const posts = await Astro.glob("../pages/posts/*.mdx");
))
}
</div>
<style>
.post-content {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 4; /* Limita a 4 líneas */
line-height: 1.5; /* Ajusta según el diseño */
max-height: calc(1.5em * 4); /* Calcula la altura máxima */
}
</style>

216
src/pages/index.astro
View File

@@ -24,75 +24,45 @@ const animateOnScroll = `
---
<html lang="es">
<head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content={Astro.generator} />
<link rel="sitemap" href="/sitemap-index.xml" />
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"
></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-1JT18RF3R4");
</script>
<meta
name="description"
content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible."
/>
<meta name="description" content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible." />
<link rel="icon" type="image/png" href="logo.png" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<title>Ecobjetivos | Tu web de desarrollo Sostenible</title>
</head>
<body>
</head>
<body>
<Navbar />
<header class="header-bg text-white">
<img
src={"/imgs/bosqueverde.png"}
alt="Bosque Verde"
class="video-bg"
/>
<img src={"/imgs/bosqueverde.png"} alt="Bosque Verde" class="video-bg" />
<video autoplay muted loop class="video-bg">
<source src="/imgs/bosqueverde.mp4" type="video/mp4" />
Tu navegador no soporta la reproducción de videos.
</video>
<div class="container text-center">
<h1
class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"
>
<h1 class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular">
Ecobjetivos: Sostenibilidad y Desarrollo
</h1>
<p
class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s"
>
<p class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s">
Construyendo juntos un futuro más verde y equitativo
</p>
<a
href="#intro"
class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s"
>Descubre más</a
>
<a href="#intro" class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s">Descubre más</a>
</div>
</header>
@@ -103,25 +73,12 @@ const animateOnScroll = `
<div class="col-md-6 animate-on-scroll">
<h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
<p class="lead">
Los Objetivos de Desarrollo Sostenible (ODS) son
un llamado universal a la acción para erradicar
la pobreza, proteger el planeta y garantizar que
todas las personas gocen de paz y prosperidad
para 2030. Estos objetivos buscan promover un
desarrollo que asegure la sostenibilidad de
nuestros recursos y ecosistemas para las futuras
generaciones.
Los Objetivos de Desarrollo Sostenible (ODS) son un llamado universal a la acción para erradicar la pobreza, proteger el planeta y garantizar que todas las personas gocen de paz y prosperidad para 2030. Estos objetivos buscan promover un desarrollo que asegure la sostenibilidad de nuestros recursos y ecosistemas para las futuras generaciones.
</p>
</div>
<div class="col-md-6 animate-on-scroll">
<div class="text-white p-5 text-center">
<Image
src="/imgs/17Objetivos.png"
alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU"
class="img-thumbnail .img-fluid"
width="730"
height="450"
/>
<Image src="/imgs/17Objetivos.png" alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU" class="img-thumbnail .img-fluid" width="730" height="450" />
</div>
</div>
</div>
@@ -130,30 +87,21 @@ const animateOnScroll = `
<section id="objetivos" class="py-5">
<div class="container">
<h2 class="text-center mb-5 animate-on-scroll">
Nuestros Objetivos Principales
</h2>
<h2 class="text-center mb-5 animate-on-scroll">Nuestros Objetivos Principales</h2>
<div class="row">
{
[
"fa-seedling",
"fa-hands-holding-circle",
"fa-graduation-cap",
"fa-industry",
].map((icon, index) => (
{ icon: "fa-seedling", title: "Vida de Ecosistemas Terrestres", description: "Proteger, restaurar y promover el uso sostenible de los ecosistemas terrestres." },
{ icon: "fa-hands-holding-circle", title: "Reducción de Desigualdades", description: "Reducir la desigualdad en y entre los países." },
{ icon: "fa-graduation-cap", title: "Educación de Calidad", description: "Garantizar una educación inclusiva, equitativa y de calidad." },
{ icon: "fa-industry", title: "Industria, Innovación e Infraestructura", description: "Construir infraestructuras resilientes, promover la industrialización inclusiva y sostenible." }
].map((obj, index) => (
<div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
<div class="card h-100 text-center">
<div class="card-body">
<i
class={`fa-solid ${icon} fa-3x mb-3 text-primary`}
/>
<h5 class="card-title">
Objetivo {index + 1}
</h5>
<p class="card-text">
Descripción del objetivo{" "}
{index + 1}
</p>
<i class={`fa-solid ${obj.icon} fa-3x mb-3 text-primary`} />
<h5 class="card-title">{obj.title}</h5>
<p class="card-text">{obj.description}</p>
</div>
</div>
</div>
@@ -165,23 +113,20 @@ const animateOnScroll = `
<section id="impact" class="py-5 bg-success text-white">
<div class="container">
<h2 class="text-center mb-5 animate-on-scroll">
Nuestro Impacto
</h2>
<h2 class="text-center mb-5 animate-on-scroll">Nuestro Impacto</h2>
<div class="row text-center">
{
["1M+", "500K", "100+", "50+"].map(
(number, index) => (
[
{ number: "1M+", description: "Personas impactadas" },
{ number: "500K", description: "Árboles plantados" },
{ number: "100+", description: "Proyectos completados" },
{ number: "50+", description: "Países involucrados" }
].map((impact, index) => (
<div class="col-md-3 mb-4 animate-on-scroll">
<h3 class="display-4 fw-bold">
{number}
</h3>
<p class="lead">
Estadística {index + 1}
</p>
<h3 class="display-4 fw-bold">{impact.number}</h3>
<p class="lead">{impact.description}</p>
</div>
),
)
))
}
</div>
</div>
@@ -189,21 +134,13 @@ const animateOnScroll = `
<section id="gallery" class="py-5">
<div class="container">
<h2 class="text-center mb-5 animate-on-scroll">
Galería de Impacto
</h2>
<h2 class="text-center mb-5 animate-on-scroll">Galería de Impacto</h2>
<div class="row g-4">
{
[1, 2, 3, 4, 5, 6].map((num) => (
<div class="col-md-4 animate-on-scroll">
<div class="bg-light p-4 text-center">
<Image
src={`/imgs/imgimp${num}.jpg`}
alt={`Imagen de impacto ${num}`}
class="img-fluid img-fit"
width="10"
height="10"
/>
<Image src={`/imgs/imgimp${num}.jpg`} alt={`Imagen de impacto ${num}`} class="img-fluid img-fit" width="10" height="10" />
</div>
</div>
))
@@ -214,37 +151,28 @@ const animateOnScroll = `
<section id="posts" class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-5 animate-on-scroll pt-1">
Posts Recientes
</h2>
<h2 class="text-center mb-5 animate-on-scroll pt-1">Posts Recientes</h2>
<ListadoPostsHorizontal />
</div>
</section>
<section id="proyectos" class="py-5">
<div class="container">
<h2 class="text-center mb-5 animate-on-scroll pt-2">
Nuestros Proyectos
</h2>
<h2 class="text-center mb-5 animate-on-scroll pt-2">Nuestros Proyectos</h2>
<div class="row">
{
[1, 2, 3, 4].map((num) => (
[
{ title: "Proyecto Verde", description: "Iniciativa para reforestar áreas urbanas y rurales." },
{ title: "Educación para Todos", description: "Programa de educación inclusiva en comunidades desfavorecidas." },
{ title: "Energía Limpia", description: "Desarrollo de tecnologías para energías renovables." },
{ title: "Agua Limpia", description: "Proyectos para mejorar el acceso al agua potable." }
].map((project, index) => (
<div class="col-md-6 mb-4 animate-on-scroll">
<div class="card">
<div class="card-body">
<h5
class="card-title"
aria-label="Proyecto"
>
Proyecto {num}
</h5>
<p class="card-text">
Descripción del proyecto {num} y
su impacto en los ODS.
</p>
<a href="#" class="btn btn-success">
Ver detalles
</a>
<h5 class="card-title" aria-label="Proyecto">{project.title}</h5>
<p class="card-text">{project.description}</p>
<a href="#" class="btn btn-success">Ver detalles</a>
</div>
</div>
</div>
@@ -256,41 +184,25 @@ const animateOnScroll = `
<section id="cta" class="py-5 bg-primary text-white text-center">
<div class="container">
<h2 class="display-4 mb-4 animate-on-scroll">
¡Únete al Cambio!
</h2>
<p class="lead mb-5 animate-on-scroll">
Juntos podemos crear un impacto duradero. Descubre cómo
puedes contribuir a los ODS.
</p>
<a href="#" class="btn btn-lg btn-light animate-on-scroll"
>¡Participa ahora!</a
>
<h2 class="display-4 mb-4 animate-on-scroll">¡Únete al Cambio!</h2>
<p class="lead mb-5 animate-on-scroll">Juntos podemos crear un impacto duradero. Descubre cómo puedes contribuir a los ODS.</p>
<a href="/participa" class="btn btn-lg btn-light animate-on-scroll">¡Participa ahora!</a>
</div>
</section>
</main>
<Footer />
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script set:html={animateOnScroll} />
</body>
</html>
</html>
<style is:global>
<style is:global>
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
h1, h2, h3, h4, h5, h6, p, a {
font-family: "Inter Tight", sans-serif !important;
font-optical-sizing: auto;
font-weight: 400 !important;
@@ -301,8 +213,8 @@ const animateOnScroll = `
font-weight: 400;
font-style: normal;
}
</style>
<style>
</style>
<style>
.header-bg {
background-color: #4caf50;
min-height: 100vh;
@@ -337,4 +249,20 @@ const animateOnScroll = `
position: relative;
z-index: 1;
}
</style>
.btn-outline-light:hover {
background-color: #ffffff;
color: #4caf50;
transition: background-color 0.3s ease, color 0.3s ease;
}
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: #ffffff;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
</style>

114
src/pages/participa.astro Normal file
View File

@@ -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>