diff --git a/biblioteca-cristiana.html b/biblioteca-cristiana.html index 7784efb..00488d3 100644 --- a/biblioteca-cristiana.html +++ b/biblioteca-cristiana.html @@ -10,23 +10,7 @@ -
-

RECURSOS CATÓLICOS

-

Biblioteca cristiana

- -
- Martes, 15 de enero de 2026 -
- - - -
+
@@ -44,6 +28,7 @@
+ diff --git a/css/estilos.css b/css/estilos.css index 67a6bed..8f8d80d 100644 --- a/css/estilos.css +++ b/css/estilos.css @@ -23,13 +23,16 @@ body { /* --- CABECERA --- */ .header-hoy { - background-color: var(--color-primario); color: var(--blanco-puro); text-align: center; - padding: 3rem 1.5rem; + min-height: 300px; /* ajusta según tu diseño */ + padding: 2rem; + background-color: var(--color-primario); + border-bottom: 1px solid #ccc; transition: background-color 0.8s ease; /* Para que el cambio litúrgico sea suave */ } + .titulo { font-family: 'EB Garamond', serif; margin: 0; @@ -122,11 +125,12 @@ body { } /* --- MENÚ PRINCIPAL --- */ +/*menu de escritorio*/ .menu-principal { background-color: var(--color-primario); display: flex; justify-content: center; - gap: 30px; + gap: 1rem; padding: 10px 0; margin: 0; } @@ -141,6 +145,45 @@ body { transition: color 0.3s ease; } +/* Botón hamburguesa */ +.menu-toggle { + display: none; + font-size: 2rem; + background: none; + border: none; + color: inherit; + cursor: pointer; +} + + +/* MODO MÓVIL */ +@media (max-width: 768px) { + + .menu-toggle { + display: block; + margin-left: auto; + margin-right: autoc; + } + + .menu-principal { + display: none; + flex-direction: column; + background-color: inherit; + padding: 1rem; + border-top: 1px solid rgba(255,255,255,0.3); + } + + .menu-principal.activo { + display: flex; + } + + .menu-principal a { + padding: 0.5rem 0; + font-size: 1.2rem; + } +} + + /* --- BLOQUES DE CONTENIDO --- */ .bloque { background-color: var(--blanco-puro); diff --git a/header.html b/header.html new file mode 100644 index 0000000..290c866 --- /dev/null +++ b/header.html @@ -0,0 +1,33 @@ +
+

RECURSOS CATÓLICOS

+ +
+ Martes, 15 de enero de 2026 + +
+ ABC + Par o impar +
+ +
+ + Tiempo Ordinario +
+
+ +
+

Santa Maria Madre de Dios

+
(Patrona de los conductores)
+
+ + + + + +
diff --git a/index.html b/index.html index e99862a..d1c5b76 100644 --- a/index.html +++ b/index.html @@ -9,38 +9,7 @@ -
-

RECURSOS CATÓLICOS

- -
- Martes, 15 de enero de 2026 - -
- ABC - Par o impar
-
- -
- - Tiempo Ordinario -
- - -
-

Santa Maria Madre de Dios

-
(Patrona de los conductores)
-
- - - - -
+
@@ -112,6 +81,7 @@
+ diff --git a/intenciones.html b/intenciones.html index e1dd0ce..0629152 100644 --- a/intenciones.html +++ b/intenciones.html @@ -9,22 +9,7 @@ -
-

RECURSOS CATÓLICOS

- -
- Martes, 15 de enero de 2026 -
- - - -
+

🙏 Mis Intenciones Personales

@@ -38,6 +23,7 @@
+ \ No newline at end of file diff --git a/js/codigo.js b/js/codigo.js index 522ef67..abaebc9 100644 --- a/js/codigo.js +++ b/js/codigo.js @@ -1,91 +1,54 @@ -let fechaHoyElem, santoDelDiaElem, indicadorLiturgicoElem, cabeceraHoy, menuPrincipalElem, +/* ============================================ + ESPERAR A QUE EL HEADER SE CARGUE +============================================ */ + +window.addEventListener("load", () => { + // Damos un pequeño margen para que header.html termine de insertarse + setTimeout(() => { + inicializarVariables(); + difuntos(); + visualizarDatos(); + visualizarSalmo(); + visualizarRosario(); + cargarYActualizarTodo(); + }, 200); +}); + + + +/* ============================================ + VARIABLES GLOBALES +============================================ */ + +let fechaHoyElem, indicadorLiturgicoElem, cabeceraHoy, menuPrincipalElem, nombreCicloElem, cicloParImparElem, descripcionSantoDelDiaElem, errorElem, difuntoHoyElem, salmoDelDiaElem; + + +/* ============================================ + INICIALIZAR VARIABLES +============================================ */ + function inicializarVariables() { cabeceraHoy = document.getElementById('header-hoy'); - fechaHoyElem = document.getElementById('fecha-hoy'); - nombreCicloElem = document.getElementById('nombre_ciclo'); - cicloParImparElem = document.getElementById('ciclo_par_impar'); - santoDelDiaElem = document.getElementById('santo-del-dia'); - descripcionSantoDelDiaElem = document.getElementById('descripcion-santo-del-dia'); - indicadorLiturgicoElem = document.getElementById('indicador-liturgico'); menuPrincipalElem = document.getElementById('menu-principal'); errorElem = document.getElementById('__error'); difuntoHoyElem = document.getElementById('difunto-hoy'); salmoDelDiaElem = document.getElementById('__salmo'); + + fechaHoyElem = document.getElementById('fecha-hoy'); + nombreCicloElem = document.getElementById('nombre_ciclo'); + cicloParImparElem = document.getElementById('ciclo_par_impar'); + descripcionSantoDelDiaElem = document.getElementById('descripcion-santo-del-dia'); + indicadorLiturgicoElem = document.getElementById('indicador-liturgico'); } -async function cargarYActualizarTodo() { - // 1. Obtener fecha de hoy en formato YYYY-MM-DD (ISO) - const hoy = new Date(); - const fechaISO = hoy.toISOString().split('T')[0]; - if (hoy.getFullYear() % 2 === 0) { - cicloParImparElem.textContent = "Año Par"; - } else { - cicloParImparElem.textContent = "Año Impar"; - } - if (hoy.getFullYear() % 3 === 0) { - nombreCicloElem.textContent = "Ciclo C -"; - } else if (hoy.getFullYear() % 3 === 1) { - nombreCicloElem.textContent = "Ciclo A -"; - } else { - nombreCicloElem.textContent = "Ciclo B -"; - } - - try { - // 2. Cargar el JSON unificado (enero/febrero que creamos) - const respuesta = await fetch('data/calendario-liturgico.json'); - const datosCalendario = await respuesta.json(); - - // 3. Buscar el objeto del día de hoy - const datosHoy = datosCalendario.find(dia => dia.fecha === fechaISO); - - const colorDiaCirculo = document.querySelector('.color-dia'); - const nombreTiempoText = document.querySelector('.nombre-color'); - - if (datosHoy) { - const mapaColores = { - "verde": "#2d5a27", - "morado": "#5d2d91", - "blanco": "#ffffff", - "rojo": "#b30000", - "azul": "#0074d9", - "rosa": "#e7b1cc", - "violeta": "#a0b5b0" - }; - - const colorReal = mapaColores[datosHoy.color] || "var(--color-primario)"; // Color por defecto si no se encuentra - - // 1. Cambiamos el fondo de la cabecera - cabeceraHoy.style.backgroundColor = colorReal; - menuPrincipalElem.style.backgroundColor = colorReal; - - // 2. Ajustamos el color del TEXTO de toda la cabecera - // Si el color es claro (blanco o rosa), ponemos texto oscuro. Si no, blanco. - const colorTexto = (datosHoy.color === "blanco" || datosHoy.color === "rosa") ? "#2b2b2b" : "#ffffff"; - - cabeceraHoy.style.color = colorTexto; - - // Forzamos a que el título y la fecha también cambien (por si el CSS es muy específico) - const tituloMain = cabeceraHoy.querySelector('.titulo'); - if (tituloMain) tituloMain.style.color = colorTexto; - - indicadorLiturgicoElem.textContent = datosHoy.tiempo; - // Aseguramos que el indicador también use el color de contraste - indicadorLiturgicoElem.style.color = colorTexto; - - } else { - indicadorLiturgicoElem.textContent = "-"; - } - - } catch (error) { - console.error("Error cargando el calendario:", error); - errorElem.textContent = "Error cargando el calendario: " + error.message; - } -} +/* ============================================ + DIFUNTOS +============================================ */ async function difuntos() { const hoy = new Date(); @@ -96,7 +59,6 @@ async function difuntos() { const res = await fetch('data/difuntos.json'); const listaDifuntos = await res.json(); - // Buscamos si alguien cumple aniversario de fallecimiento hoy const elDifunto = listaDifuntos.find(d => { if (!d.fallecimiento || d.fallecimiento.includes('XXXX')) return false; const f = d.fallecimiento.split('-'); @@ -104,35 +66,8 @@ async function difuntos() { }); if (elDifunto && difuntoHoyElem) { - let infoAniversario = ""; - let infoVida = ""; - - // 1. Calcular años desde el fallecimiento - const anioFallecimiento = parseInt(elDifunto.fallecimiento.split('-')[0]); - const anosPasados = hoy.getFullYear() - anioFallecimiento; - infoAniversario = `${anosPasados}º aniversario`; - - // 2. Calcular edad que tenía al fallecer (si hay fecha de nacimiento) - if (elDifunto.nacimiento && !elDifunto.nacimiento.includes('XXXX')) { - const nacion = new Date(elDifunto.nacimiento); - const fallecio = new Date(elDifunto.fallecimiento); - let edad = fallecio.getFullYear() - nacion.getFullYear(); - - // Ajuste por si no había cumplido años ese año - const m = fallecio.getMonth() - nacion.getMonth(); - if (m < 0 || (m === 0 && fallecio.getDate() < nacion.getDate())) { - edad--; - } - infoVida = `Vivió ${edad} años`; - } else if (elDifunto.nota) { - // Si no hay fecha exacta pero sí una nota manual (ej. "77 años") - infoVida = elDifunto.nota; - } - - // 3. Renderizar en el HTML con el detalle de oración difuntoHoyElem.innerHTML = `DEP 🕊️ ${elDifunto.nombre}`; - - // También actualizamos la sección de intención principal si existe + const intencionGral = document.querySelector('.intencion'); if (intencionGral) { intencionGral.innerHTML = `
  • Hoy pedimos especialmente por ${elDifunto.nombre}
    • `; @@ -143,37 +78,13 @@ async function difuntos() { } } -async function santoDelDia() { - const hoy = new Date(); - // Usamos el formato local para evitar líos de zona horaria - const offset = hoy.getTimezoneOffset() * 60000; - const fechaISO = new Date(hoy - offset).toISOString().split('T')[0]; - - try { - const res = await fetch('data/santos.json'); - const listaSantos = await res.json(); - // Buscamos el santo usando el campo "fecha" de tu JSON - const elSanto = listaSantos.find(d => d.fecha === fechaISO); - if (elSanto && santoDelDiaElem) { - // Mostramos el santo. Si tiene descripción (ej. Patrón de los animales), la añadimos. - const descripcion = elSanto.descripcion ? `${elSanto.descripcion}` : ""; - - santoDelDiaElem.textContent = `${elSanto.santo}`; - if (descripcionSantoDelDiaElem) { - descripcionSantoDelDiaElem.textContent = descripcion; - } else { - descripcionSantoDelDiaElem.textContent = ""; - } - } - } catch (e) { - console.error("Error en la carga de santos:", e); - } -} +/* ============================================ + SALMO DEL DÍA +============================================ */ async function visualizarSalmo() { - // 1. Seleccionamos el elemento del DOM (asegúrate de inicializarlo en inicializarVariables) const salmoElem = document.getElementById('__salmo'); try { @@ -182,8 +93,6 @@ async function visualizarSalmo() { const listaSalmos = await res.json(); - // 2. Lógica de selección: - // Usamos el día del año para que no se repitan tanto los salmos const hoy = new Date(); const inicioAnio = new Date(hoy.getFullYear(), 0, 0); const dif = hoy - inicioAnio; @@ -192,7 +101,6 @@ async function visualizarSalmo() { const indiceHoy = diaDelAnio % listaSalmos.length; const salmoDeHoy = listaSalmos[indiceHoy]; - // 3. Renderizado (dentro del try para asegurar que tenemos los datos) if (salmoDeHoy && salmoElem) { salmoElem.innerHTML = `${salmoDeHoy.texto}`; } @@ -203,38 +111,93 @@ async function visualizarSalmo() { } } -function visualizarDatos() { - const opcionesFecha = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; - const hoy = new Date(); - fechaHoyElem.textContent = hoy.toLocaleDateString('es-ES', opcionesFecha); -} + + +/* ============================================ + ROSARIO DEL DÍA +============================================ */ function visualizarRosario() { const MISTERIOS_DATA = { - 0: { nombre: "Gloriosos" }, - 1: { nombre: "Gozosos"}, - 2: { nombre: "Dolorosos" }, - 3: { nombre: "Gloriosos" }, - 4: { nombre: "Luminosos" }, - 5: { nombre: "Dolorosos" }, - 6: { nombre: "Gozosos" } -}; + 0: { nombre: "Gloriosos" }, + 1: { nombre: "Gozosos"}, + 2: { nombre: "Dolorosos" }, + 3: { nombre: "Gloriosos" }, + 4: { nombre: "Luminosos" }, + 5: { nombre: "Dolorosos" }, + 6: { nombre: "Gozosos" } + }; + const hoy = new Date(); const diaSemana = hoy.getDay(); const misterioHoy = MISTERIOS_DATA[diaSemana]; + const nombreMistElem = document.getElementById('nombre_misterio'); if (nombreMistElem) { nombreMistElem.textContent = `MISTERIOS ${misterioHoy.nombre.toUpperCase()}`; } } -// Evento de carga unificado -window.addEventListener("load", () => { - inicializarVariables(); - difuntos(); - santoDelDia(); - visualizarDatos(); - visualizarSalmo(); - visualizarRosario(); - cargarYActualizarTodo(); // Esta función ahora hace el trabajo de las dos anteriores -}); \ No newline at end of file + + +/* ============================================ + FECHA HUMANA +============================================ */ + +function visualizarDatos() { + const opcionesFecha = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; + const hoy = new Date(); + fechaHoyElem.textContent = hoy.toLocaleDateString('es-ES', opcionesFecha); +} + + + +/* ============================================ + CALENDARIO LITÚRGICO +============================================ */ + +async function cargarYActualizarTodo() { + const hoy = new Date(); + const fechaISO = hoy.toISOString().split('T')[0]; + + cicloParImparElem.textContent = hoy.getFullYear() % 2 === 0 ? "Año Par" : "Año Impar"; + + if (hoy.getFullYear() % 3 === 0) { + nombreCicloElem.textContent = "Ciclo C -"; + } else if (hoy.getFullYear() % 3 === 1) { + nombreCicloElem.textContent = "Ciclo A -"; + } else { + nombreCicloElem.textContent = "Ciclo B -"; + } + + try { + const respuesta = await fetch('data/calendario-liturgico.json'); + const datosCalendario = await respuesta.json(); + const datosHoy = datosCalendario.find(dia => dia.fecha === fechaISO); + + const mapaColores = { + "verde": "#2d5a27", + "morado": "#5d2d91", + "blanco": "#ffffff", + "rojo": "#b30000", + "azul": "#0074d9", + "rosa": "#e7b1cc", + "violeta": "#a0b5b0" + }; + + if (datosHoy) { + const colorReal = mapaColores[datosHoy.color] || "#333"; + const colorTexto = (datosHoy.color === "blanco" || datosHoy.color === "rosa") ? "#2b2b2b" : "#ffffff"; + + cabeceraHoy.style.backgroundColor = colorReal; + menuPrincipalElem.style.backgroundColor = colorReal; + cabeceraHoy.style.color = colorTexto; + + indicadorLiturgicoElem.textContent = datosHoy.tiempo; + indicadorLiturgicoElem.style.color = colorTexto; + } + + } catch (error) { + console.error("Error cargando el calendario:", error); + } +} diff --git a/js/header.js b/js/header.js new file mode 100644 index 0000000..56c7c7e --- /dev/null +++ b/js/header.js @@ -0,0 +1,186 @@ +/* ================================ + 1. CARGAR HEADER Y LUEGO INICIAR +================================ */ + +fetch("header.html") + .then(res => res.text()) + .then(html => { + document.getElementById("header-container").innerHTML = html; + + // Ahora que el header YA existe en el DOM: + inicializarVariables(); + difuntos(); + santoDelDia(); + visualizarDatos(); + cargarYActualizarTodo(); + }) + .catch(err => console.error("Error cargando header:", err)); + + + +/* ================================ + 2. VARIABLES GLOBALES +================================ */ + +let fechaHoyElem, santoDelDiaElem, indicadorLiturgicoElem, cabeceraHoy, menuPrincipalElem, + nombreCicloElem, cicloParImparElem, descripcionSantoDelDiaElem, + errorElem, difuntoHoyElem; + + + +/* ================================ + 3. INICIALIZAR VARIABLES +================================ */ + +function inicializarVariables() { + cabeceraHoy = document.getElementById('header-hoy'); + fechaHoyElem = document.getElementById('fecha-hoy'); + nombreCicloElem = document.getElementById('nombre_ciclo'); + cicloParImparElem = document.getElementById('ciclo_par_impar'); + santoDelDiaElem = document.getElementById('santo-del-dia'); + descripcionSantoDelDiaElem = document.getElementById('descripcion-santo-del-dia'); + indicadorLiturgicoElem = document.getElementById('indicador-liturgico'); + menuPrincipalElem = document.getElementById('menu-principal'); + difuntoHoyElem = document.getElementById('difunto-hoy'); +} + + + +/* ================================ + 4. CALENDARIO LITÚRGICO +================================ */ + +async function cargarYActualizarTodo() { + const hoy = new Date(); + const fechaISO = hoy.toISOString().split('T')[0]; + + cicloParImparElem.textContent = hoy.getFullYear() % 2 === 0 ? "Año Par" : "Año Impar"; + + if (hoy.getFullYear() % 3 === 0) { + nombreCicloElem.textContent = "Ciclo C -"; + } else if (hoy.getFullYear() % 3 === 1) { + nombreCicloElem.textContent = "Ciclo A -"; + } else { + nombreCicloElem.textContent = "Ciclo B -"; + } + + try { + const respuesta = await fetch('data/calendario-liturgico.json'); + const datosCalendario = await respuesta.json(); + const datosHoy = datosCalendario.find(dia => dia.fecha === fechaISO); + + const mapaColores = { + "verde": "#2d5a27", + "morado": "#5d2d91", + "blanco": "#ffffff", + "rojo": "#b30000", + "azul": "#0074d9", + "rosa": "#e7b1cc", + "violeta": "#a0b5b0" + }; + + if (datosHoy) { + const colorReal = mapaColores[datosHoy.color] || "#333"; + const colorTexto = (datosHoy.color === "blanco" || datosHoy.color === "rosa") ? "#2b2b2b" : "#ffffff"; + + cabeceraHoy.style.backgroundColor = colorReal; + menuPrincipalElem.style.backgroundColor = colorReal; + cabeceraHoy.style.color = colorTexto; + + const tituloMain = cabeceraHoy.querySelector('.titulo'); + if (tituloMain) tituloMain.style.color = colorTexto; + + indicadorLiturgicoElem.textContent = datosHoy.tiempo; + indicadorLiturgicoElem.style.color = colorTexto; + } else { + indicadorLiturgicoElem.textContent = "-"; + } + + } catch (error) { + console.error("Error cargando el calendario:", error); + } +} + + + +/* ================================ + 5. DIFUNTOS +================================ */ + +async function difuntos() { + const hoy = new Date(); + const mesHoy = hoy.getMonth() + 1; + const diaHoy = hoy.getDate(); + + try { + const res = await fetch('data/difuntos.json'); + const listaDifuntos = await res.json(); + + const elDifunto = listaDifuntos.find(d => { + if (!d.fallecimiento || d.fallecimiento.includes('XXXX')) return false; + const f = d.fallecimiento.split('-'); + return parseInt(f[1]) === mesHoy && parseInt(f[2]) === diaHoy; + }); + + if (elDifunto && difuntoHoyElem) { + const anioFallecimiento = parseInt(elDifunto.fallecimiento.split('-')[0]); + const anosPasados = hoy.getFullYear() - anioFallecimiento; + + difuntoHoyElem.innerHTML = `DEP 🕊️ ${elDifunto.nombre} — ${anosPasados}º aniversario`; + } + } catch (e) { + console.error("Error en la carga de difuntos:", e); + } +} + + + +/* ================================ + 6. SANTO DEL DÍA +================================ */ + +async function santoDelDia() { + const hoy = new Date(); + const offset = hoy.getTimezoneOffset() * 60000; + const fechaISO = new Date(hoy - offset).toISOString().split('T')[0]; + + try { + const res = await fetch('data/santos.json'); + const listaSantos = await res.json(); + + const elSanto = listaSantos.find(d => d.fecha === fechaISO); + + if (elSanto) { + santoDelDiaElem.textContent = elSanto.santo; + descripcionSantoDelDiaElem.textContent = elSanto.descripcion || ""; + } + } catch (e) { + console.error("Error en la carga de santos:", e); + } +} + + + +/* ================================ + 7. FECHA HUMANA +================================ */ + +function visualizarDatos() { + const opcionesFecha = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; + const hoy = new Date(); + fechaHoyElem.textContent = hoy.toLocaleDateString('es-ES', opcionesFecha); +} + +/* ================================ + 8. MENÚ MÓVIL +================================ */ +document.addEventListener("click", (e) => { + const toggle = document.getElementById("menu-toggle"); + const menu = document.getElementById("menu-principal"); + + if (!toggle || !menu) return; + + if (e.target === toggle) { + menu.classList.toggle("activo"); + } +}); diff --git a/js/rosario.js b/js/rosario.js index 75a600c..e0f2cea 100644 --- a/js/rosario.js +++ b/js/rosario.js @@ -11,43 +11,12 @@ const MISTERIOS_DATA = { 6: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] } }; -async function santoDelDia() { - const hoy = new Date(); - const offset = hoy.getTimezoneOffset() * 60000; - const fechaISO = new Date(hoy - offset).toISOString().split('T')[0]; - - // Obtenemos los elementos aquí para evitar errores de "undefined" - const santoElem = document.getElementById('santo-del-dia'); - - try { - // IMPORTANTE: Ruta relativa para GitHub Pages - const res = await fetch('data/santos.json'); - const listaSantos = await res.json(); - const elSanto = listaSantos.find(d => d.fecha === fechaISO); - - if (elSanto && santoElem) { - santoElem.textContent = elSanto.santo + " ruega por nosotros"; - } - } catch (e) { - console.error("Error en la carga de santos:", e); - } -} function inicializarRosario() { const hoy = new Date(); misteriosHoy = MISTERIOS_DATA[hoy.getDay()]; - // Llamamos a la función de los santos - santoDelDia(); - - // Poner la fecha (con año) - const fechaElem = document.getElementById('fecha-hoy'); - if (fechaElem) { - fechaElem.textContent = hoy.toLocaleDateString('es-ES', { - weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' - }); - } - + const nombreMistElem = document.getElementById('nombre_misterio'); if (nombreMistElem) nombreMistElem.textContent = `Misterios ${misteriosHoy.nombre}`; diff --git a/oraciones-basicas.html b/oraciones-basicas.html index f06bffa..bff489a 100644 --- a/oraciones-basicas.html +++ b/oraciones-basicas.html @@ -9,21 +9,7 @@ -
    -

    RECURSOS CATÓLICOS

    - -
    - Martes, 15 de enero de 2026 -
    - - - -
    +
    @@ -82,6 +68,8 @@
    + + diff --git a/rosario.html b/rosario.html index 4461586..95660b8 100644 --- a/rosario.html +++ b/rosario.html @@ -8,31 +8,7 @@ -
    -

    RECURSOS CATÓLICOS

    -

    SANTO ROSARIO - Nombre del misterio

    - -
    - Martes, 15 de enero de 2026 - - -
    - -
    -

    Santa Maria Madre de Dios

    -
    - - - -
    +

    Primer Misterio Gozoso - La Anunciación del Ángel a María

    @@ -44,6 +20,7 @@ Rosario Image
    + \ No newline at end of file