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>
+            <a href="intenciones.html" class="boton">Intenciones de oración</a>
-        </section>-->
+        </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>