Mejoando las cabeceras
This commit is contained in:
Tatiana Villa Ema
parent
b129999f39
commit
d7c2e2de4a
|
|
@ -10,23 +10,7 @@
|
|||
</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>
|
||||
<div id="header-container"></div>
|
||||
|
||||
<section class="controls">
|
||||
<input type="text" id="searchInput" placeholder="Buscar por título, autor o tema...">
|
||||
|
|
@ -44,6 +28,7 @@
|
|||
|
||||
<section id="booksContainer" class="grid"></section>
|
||||
|
||||
<script src="js/header.js"></script>
|
||||
<script src="js/biblioteca.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<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 class="ciclo">
|
||||
<span id="nombre_ciclo">ABC</span>
|
||||
<span id="ciclo_par_impar">Par o impar</span>
|
||||
</div>
|
||||
|
||||
<div id="indicador-liturgico" class="liturgico">
|
||||
<span class="color-dia" id="color-liturgico" title="Tiempo Ordinario"></span>
|
||||
<span class="nombre-color" id="tiempo-liturgico">Tiempo Ordinario</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="santo">
|
||||
<h2 id="santo-del-dia">Santa Maria Madre de Dios</h2>
|
||||
<div id="descripcion-santo-del-dia">(Patrona de los conductores)</div>
|
||||
</div>
|
||||
|
||||
<button class="menu-toggle" id="menu-toggle">☰</button>
|
||||
|
||||
<nav class="menu-principal" id="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>
|
||||
<script src="js/header.js"></script>
|
||||
</header>
|
||||
34
index.html
34
index.html
|
|
@ -9,38 +9,7 @@
|
|||
</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 class="ciclo">
|
||||
<span id="nombre_ciclo">ABC</span>
|
||||
<span id="ciclo_par_impar">Par o impar</div>
|
||||
</div>
|
||||
|
||||
<div id="indicador-liturgico" class="liturgico">
|
||||
<span class="color-dia" id="color-liturgico" title="Tiempo Ordinario"></span>
|
||||
<span class="nombre-color" id="tiempo-liturgico">Tiempo Ordinario</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="santo">
|
||||
<h2 id="santo-del-dia">Santa Maria Madre de Dios</h2>
|
||||
<div id="descripcion-santo-del-dia">(Patrona de los conductores)</div>
|
||||
</div>
|
||||
|
||||
<!-- MENU -->
|
||||
<nav class="menu-principal" id="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 id="header-container"></div>
|
||||
|
||||
<main class="contenedor">
|
||||
<!-- DIFUNTO -->
|
||||
|
|
@ -112,6 +81,7 @@
|
|||
|
||||
</main>
|
||||
|
||||
<script src="js/header.js"></script>
|
||||
<script src="js/codigo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,22 +9,7 @@
|
|||
<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 id="header-container"></div>
|
||||
|
||||
<div class="contenedor-intenciones">
|
||||
<h3>🙏 Mis Intenciones Personales</h3>
|
||||
|
|
@ -38,6 +23,7 @@
|
|||
<ul id="lista-intenciones" class="lista-personalizada">
|
||||
</ul>
|
||||
</div>
|
||||
<script src="js/header.js"></script>
|
||||
<script src="js/intenciones.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
277
js/codigo.js
277
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 = `<span class="nombre-difunto">DEP 🕊️ ${elDifunto.nombre}</span>`;
|
||||
|
||||
// También actualizamos la sección de intención principal si existe
|
||||
|
||||
const intencionGral = document.querySelector('.intencion');
|
||||
if (intencionGral) {
|
||||
intencionGral.innerHTML = `<li>Hoy pedimos especialmente por ${elDifunto.nombre}</li>`;
|
||||
|
|
@ -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
|
||||
});
|
||||
|
||||
|
||||
/* ============================================
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = `<span class="nombre-difunto">DEP 🕊️ ${elDifunto.nombre} — ${anosPasados}º aniversario</span>`;
|
||||
}
|
||||
} 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");
|
||||
}
|
||||
});
|
||||
|
|
@ -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}`;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,21 +9,7 @@
|
|||
<link rel="stylesheet" href="css/oraciones-basicas.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>
|
||||
</nav>
|
||||
</header>
|
||||
<div id="header-container"></div>
|
||||
|
||||
<main class="contenedor">
|
||||
<!-- PADRE NUESTRO -->
|
||||
|
|
@ -82,6 +68,8 @@
|
|||
|
||||
</main>
|
||||
|
||||
|
||||
<script src="js/header.js"></script>
|
||||
<script src="js/codigo.js"></script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
27
rosario.html
27
rosario.html
|
|
@ -8,31 +8,7 @@
|
|||
<link rel="stylesheet" href="css/estilos.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-hoy" id="header-hoy">
|
||||
<h1 class="titulo">RECURSOS CATÓLICOS</h1>
|
||||
<h2 class="subtitulo">SANTO ROSARIO - <span id="nombre_misterio">Nombre del misterio</span></h2>
|
||||
|
||||
<div class="fecha">
|
||||
<span id="fecha-hoy">Martes, 15 de enero de 2026</span>
|
||||
|
||||
<!-- <div class="misterio">
|
||||
<span id="nombre_misterio">Nombre del misterio</span>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<div class="santo_discreto">
|
||||
<h2 id="santo-del-dia">Santa Maria Madre de Dios</h2>
|
||||
</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 id="header-container"></div>
|
||||
|
||||
<div class="contenedor_rosario">
|
||||
<h3 id="titulo_misterio">Primer Misterio Gozoso - La Anunciación del Ángel a María</h3>
|
||||
|
|
@ -44,6 +20,7 @@
|
|||
<img src="img/gozosos1.jpg" alt="Rosario Image" id="imagen-misterio" class="imagen-misterio">
|
||||
</div>
|
||||
|
||||
<script src="js/header.js"></script>
|
||||
<script src="js/rosario.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue