Biblioteca cristiana

2026-01-20 17:36:09 +01:00 · 2026-01-20 17:36:09 +01:00 · b46d946e9f
parent 707171ee73
commit b46d946e9f
7 changed files with 199 additions and 4 deletions
--- a/biblioteca-cristiana.html
+++ b/biblioteca-cristiana.html
@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Biblioteca cristiana</title>
+    <link rel="icon" type="image/x-icon" href="img/favicon.png">
+    <link rel="stylesheet" href="css/estilos.css">
+</head>
+<body>
+    <header class="header-hoy" id="header-hoy">
+        <h1 class="titulo">RECURSOS CATÓLICOS</h1>
+        <h2>Biblioteca cristiana</h2>
+
+        <div class="fecha">
+            <span id="fecha-hoy">Martes, 15 de enero de 2026</span>
+        </div>
+
+        <!-- MENU -->
+        <nav class="menu-principal">
+            <a href="index.html">Inicio</a>
+            <a href="rosario.html">Rosario</a>
+            <a href="oraciones-basicas.html">Oraciones Básicas</a>
+            <a href="intenciones.html">Intenciones</a>
+            <a href="biblioteca-cristiana.html">Biblioteca cristiana</a>
+        </nav>
+    </header>
+    <main class="contenedor">
+        <section class="bloque bloque-fondo">
+                <h3>Biblia y evangelio</h3>
+                <p><a href="https://www.amazon.es/Sagrada-Bibliapopular-geltexbac-EDICIONES-B%C3%8DBLICAS/dp/8422015617/ref=sr_1_6?__mk_es_ES=%C3%85M%C3%85%C5%BD%C3%95%C3%91&amp;crid=2X17ZIW20JHVF&amp;keywords=biblia&amp;qid=1686516688&amp;sprefix=biblia%2Caps%2C94&amp;sr=8-6">Sagrada Biblia de la conferencia Episcopal Española (CEE)</a></p>
+                <p><a href="https://www.amazon.es/Catecismo-Doctrina-Cristiana-Ediciones-Populares/dp/8483531496/ref=sr_1_3?crid=1CHRQQCBSKTOY&amp;keywords=catecismo+astete&amp;qid=1686517828&amp;s=books&amp;sprefix=Catecismo+as%2Cstripbooks%2C80&amp;sr=1-3" target="_blank" rel="noreferrer noopener">Catecismo de la doctrina cristiana</a></p>
+        </section>
+
+        <section class="bloque bloque-fondo">
+                <h3>Vidas de santos y películas</h3>
+                <p><a href="https://www.amazon.es/d%C3%ADas-Madre-Teresa-Jos%C3%A9-Gonz%C3%A1lez-Balado-ebook/dp/B09SGHLP6R/ref=tmm_kin_swatch_0?_encoding=UTF8&amp;qid=1686518245&amp;sr=1-12">365 días con la madre Teresa de Calcuta</a></p>
+                <p><a href="https://www.amazon.es/Francisco-Asis-Santos-Amigos-Dios/dp/8484079244/ref=sr_1_1?__mk_es_ES=%C3%85M%C3%85%C5%BD%C3%95%C3%91&amp;crid=3JXXXQXP05Y9H&amp;keywords=san+francisco+de+asis+luis+perez+simon&amp;qid=1686518697&amp;s=digital-text&amp;sprefix=san+francisco+de+asis+luis+perez+simon%2Cdigital-text%2C77&amp;sr=1-1">San Francisco de Asis (Padre de los Franciscanos)</a> </p>
+        </section>
+
+        <section class="bloque bloque-fondo">
+            <h3>Películas</h3>
+            <p><a href="https://www.primevideo.com/detail/0RIG0ODHPZZNTT1XF4Y8I9VM46/ref=dvm_src_ret_es_xx_s">Una monja de cuidado</a> (Sister Act)</p>
+        </section>	
+    </main>
+</body>
+</html>
--- a/css/intenciones.css
+++ b/css/intenciones.css
@ -6,4 +6,55 @@
    --arena: #E8DCC2;
    --color-primary-dark: #2F3A56;
    --color-text-light: #FDFBF7;
-  }
+  }
+
+
+.contenedor-intenciones {
+    max-width: 600px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: white;
+    border-radius: 15px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+}
+
+.formulario-intencion {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 2rem;
+}
+
+.formulario-intencion input {
+    flex: 1;
+    padding: 12px;
+    border: 1px solid var(--arena);
+    border-radius: 8px;
+    font-family: 'Nunito', sans-serif;
+}
+
+.lista-personalizada {
+    list-style: none;
+    padding: 0;
+}
+
+.item-intencion {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    border-bottom: 1px solid var(--color-secundario);
+    transition: background 0.3s;
+}
+
+.item-intencion:hover {
+    background-color: #fdfaf5;
+}
+
+.btn-borrar {
+    background: none;
+    border: none;
+    color: #cc0000;
+    cursor: pointer;
+    font-weight: bold;
+    padding: 5px 10px;
+}
--- a/index.html
+++ b/index.html
@ -36,6 +36,8 @@
        <a href="index.html">Inicio</a>
        <a href="rosario.html">Rosario</a>
        <a href="oraciones-basicas.html">Oraciones Básicas</a>
+        <a href="intenciones.html">Intenciones</a>
+        <a href="biblioteca-cristiana.html">Biblioteca cristiana</a>
    </nav>

 </header>
@ -53,7 +55,6 @@
        </section>

        <!-- INTENCIÓN -->
-        <!--
        <section class="bloque">
            <h3>🙏 Intención de hoy</h3>
            <p class="intencion">
@ -63,8 +64,8 @@
                    <li>Por los líderes del mundo, para que gobiernen con sabiduría y justicia.</li>
                </ul>
            </p>
-            <a href="diario-oracion.html" class="boton">Ofrecer mi oración</a>
-        </section>-->
+            <a href="intenciones.html" class="boton">Intenciones de oración</a>
+        </section>

        <!-- DIARIO -->
        <!--
@ -92,6 +93,13 @@
            </div>
        </section>

+        <section class="bloque bloque-fondo" style="background-image: url('img/oraciones.jpg');">
+            <div class="capa-oscura">
+                <h3>Biblioteca cristiana</h3>
+                <p>Recomendaciones de libros y recursos cristianos</p>
+                <a href="biblioteca-cristiana.html" class="boton">Ver Biblioteca</a>
+            </div>
+        </section>
        
        <!-- RECURSOS -->
        <!--
--- a/intenciones.html
+++ b/intenciones.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Intenciones de oración</title>
+    <link rel="icon" type="image/x-icon" href="img/favicon.png">
+    <link rel="stylesheet" href="css/estilos.css">
+    <link rel="stylesheet" href="css/intenciones.css">
+</head>
+<body>
+    <header class="header-hoy" id="header-hoy">
+        <h1 class="titulo">RECURSOS CATÓLICOS</h1>
+
+        <div class="fecha">
+            <span id="fecha-hoy">Martes, 15 de enero de 2026</span>
+        </div>
+
+        <!-- MENU -->
+        <nav class="menu-principal">
+            <a href="index.html">Inicio</a>
+            <a href="rosario.html">Rosario</a>
+            <a href="oraciones-basicas.html">Oraciones Básicas</a>
+            <a href="intenciones.html">Intenciones</a>
+            <a href="biblioteca-cristiana.html">Biblioteca cristiana</a>
+        </nav>
+    </header>
+
+    <div class="contenedor-intenciones">
+    <h3>🙏 Mis Intenciones Personales</h3>
+    <p class="texto-suave">Estas intenciones se guardan solo en tu dispositivo.</p>
+    
+    <div class="formulario-intencion">
+        <input type="text" id="nueva-intencion" placeholder="Escribe tu petición aquí...">
+        <button id="btn-guardar" class="boton">Añadir Intención</button>
+    </div>
+
+    <ul id="lista-intenciones" class="lista-personalizada">
+    </ul>
+</div>
+<script src="js/intenciones.js"></script>
+</body>
+</html>
--- a/js/intenciones.js
+++ b/js/intenciones.js
@ -0,0 +1,41 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const input = document.getElementById('nueva-intencion');
+    const btnGuardar = document.getElementById('btn-guardar');
+    const lista = document.getElementById('lista-intenciones');
+
+    // 1. Cargar intenciones guardadas al iniciar
+    let intenciones = JSON.parse(localStorage.getItem('misIntenciones')) || [];
+    renderizarIntenciones();
+
+    // 2. Función para guardar
+    btnGuardar.addEventListener('click', () => {
+        const texto = input.value.trim();
+        if (texto) {
+            intenciones.push({ id: Date.now(), texto: texto });
+            localStorage.setItem('misIntenciones', JSON.stringify(intenciones));
+            input.value = '';
+            renderizarIntenciones();
+        }
+    });
+
+    // 3. Función para mostrar en pantalla
+    function renderizarIntenciones() {
+        lista.innerHTML = '';
+        intenciones.forEach(intencion => {
+            const li = document.createElement('li');
+            li.className = 'item-intencion';
+            li.innerHTML = `
+                <span>${intencion.texto}</span>
+                <button class="btn-borrar" onclick="eliminarIntencion(${intencion.id})">✕</button>
+            `;
+            lista.appendChild(li);
+        });
+    }
+
+    // 4. Función para eliminar (la hacemos global para que el onclick funcione)
+    window.eliminarIntencion = (id) => {
+        intenciones = intenciones.filter(i => i.id !== id);
+        localStorage.setItem('misIntenciones', JSON.stringify(intenciones));
+        renderizarIntenciones();
+    };
+});
--- a/oraciones-basicas.html
+++ b/oraciones-basicas.html
@ -4,6 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oraciones Básicas</title>
+    <link rel="icon" type="image/x-icon" href="img/favicon.png">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/oraciones-basicas.css">
 </head>
@ -20,6 +21,7 @@
            <a href="index.html">Inicio</a>
            <a href="rosario.html">Rosario</a>
            <a href="oraciones-basicas.html">Oraciones Básicas</a>
+            <a href="intenciones.html">Intenciones</a>
        </nav>
    </header>

--- a/rosario.html
+++ b/rosario.html
@ -3,6 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="img/favicon.png">
    <title>Rosario</title>
    <link rel="stylesheet" href="css/estilos.css">
 </head>
@ -28,6 +29,8 @@
            <a href="index.html">Inicio</a>
            <a href="rosario.html">Rosario</a>
            <a href="oraciones-basicas.html">Oraciones Básicas</a>
+            <a href="intenciones.html">Intenciones</a>
+            <a href="biblioteca-cristiana.html">Biblioteca cristiana</a>
        </nav>
    </header>