oraciones basicas y menuprincipal
This commit is contained in:
Tatiana Villa Ema
parent
25a1019802
commit
47f8c43158
|
|
@ -121,6 +121,26 @@ body {
|
|||
gap: 8px;
|
||||
}
|
||||
|
||||
/* --- MENÚ PRINCIPAL --- */
|
||||
.menu-principal {
|
||||
background-color: var(--color-primario);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-principal a {
|
||||
color: var(--blanco-puro);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
/* --- BLOQUES DE CONTENIDO --- */
|
||||
.bloque {
|
||||
background-color: var(--blanco-puro);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
/* Fuentes importadas corregidas */
|
||||
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Nunito:wght@400;600&display=swap');
|
||||
|
||||
:root {
|
||||
/* Paleta refinada */
|
||||
--color-primario: #2F3A56; /* Azul noche espiritual */
|
||||
--color-hover: #24314A; /* Azul noche más oscuro */
|
||||
--color-secundario: #EAF2FA; /* Azul muy suave */
|
||||
--color-fondo: #FAF7F2; /* Crema papel antiguo */
|
||||
--color-texto: #2b2b2b;
|
||||
--color-acento: #E8A23A; /* Dorado litúrgico */
|
||||
--blanco-puro: #FFFFFF;
|
||||
--sombra: rgba(47, 58, 86, 0.15);
|
||||
}
|
||||
|
||||
.oracion {
|
||||
background-color: var(--blanco-puro);
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
max-width: 600px; /* Para que no se estire demasiado en PC */
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 15px var(--sombra);
|
||||
border: none; /* Quitamos el borde oscuro para que sea más elegante */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.titulo-oracion {
|
||||
font-family: 'EB Garamond', serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
color: var(--color-primario);
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--color-acento);
|
||||
}
|
||||
|
||||
.contenido-oracion {
|
||||
font-family: 'EB Garamond', serif;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.6;
|
||||
color: var(--color-texto);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
112
index.html
112
index.html
|
|
@ -29,62 +29,78 @@
|
|||
<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>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
|
||||
<main class="contenedor">
|
||||
<!-- DIFUNTO -->
|
||||
<section class="tarjeta-difunto">
|
||||
<div id="difunto-hoy"></div>
|
||||
</section>
|
||||
<main class="contenedor">
|
||||
<!-- DIFUNTO -->
|
||||
<section class="tarjeta-difunto">
|
||||
<div id="difunto-hoy"></div>
|
||||
</section>
|
||||
|
||||
<!-- SALMO -->
|
||||
<section class="bloque">
|
||||
<blockquote class="salmo" id="__salmo">
|
||||
Salmo del día no disponible
|
||||
</section>
|
||||
<!-- SALMO -->
|
||||
<section class="bloque">
|
||||
<blockquote class="salmo" id="__salmo">
|
||||
Salmo del día no disponible
|
||||
</section>
|
||||
|
||||
<!-- INTENCIÓN -->
|
||||
<!--
|
||||
<section class="bloque">
|
||||
<h3>🙏 Intención de hoy</h3>
|
||||
<p class="intencion">
|
||||
<ul>
|
||||
<li>Por la paz en el mundo y el fin de los conflictos.</li>
|
||||
<li>Por los enfermos y sus familias, para que encuentren consuelo y sanación.</li>
|
||||
<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>-->
|
||||
<!-- INTENCIÓN -->
|
||||
<!--
|
||||
<section class="bloque">
|
||||
<h3>🙏 Intención de hoy</h3>
|
||||
<p class="intencion">
|
||||
<ul>
|
||||
<li>Por la paz en el mundo y el fin de los conflictos.</li>
|
||||
<li>Por los enfermos y sus familias, para que encuentren consuelo y sanación.</li>
|
||||
<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>-->
|
||||
|
||||
<!-- DIARIO -->
|
||||
<!--
|
||||
<section class="bloque bloque-intimo">
|
||||
<h3>🕯 Mi oración de hoy</h3>
|
||||
<p class="texto-suave">
|
||||
Un espacio personal para escribir lo que llevas en el corazón
|
||||
</p>
|
||||
<a href="diario-oracion.html" class="boton">Escribir en mi diario</a>
|
||||
</section>-->
|
||||
<!-- DIARIO -->
|
||||
<!--
|
||||
<section class="bloque bloque-intimo">
|
||||
<h3>🕯 Mi oración de hoy</h3>
|
||||
<p class="texto-suave">
|
||||
Un espacio personal para escribir lo que llevas en el corazón
|
||||
</p>
|
||||
<a href="diario-oracion.html" class="boton">Escribir en mi diario</a>
|
||||
</section>-->
|
||||
|
||||
<!-- ROSARIO -->
|
||||
<section class="bloque">
|
||||
<h3>📿 Rosario</h3>
|
||||
<p>Hoy rezamos los Misterios Luminosos</p>
|
||||
<a href="rosario.html" class="boton">Rezar el Rosario</a>
|
||||
</section>
|
||||
<!-- ROSARIO -->
|
||||
<section class="bloque">
|
||||
<h3>Rosario</h3>
|
||||
<p id="nombre_misterio">Hoy rezamos los Misterios X</p>
|
||||
<a href="rosario.html" class="boton">Rezar el Rosario</a>
|
||||
</section>
|
||||
|
||||
<!-- RECURSOS -->
|
||||
<section class="recursos">
|
||||
<a href="oraciones-basicas.html">Oraciones</a>
|
||||
<a href="santos.html">Santos y novenas</a>
|
||||
<a href="calendario-liturgico/index.php">Calendario litúrgico</a>
|
||||
<a href="biblioteca-basica-cristiana.html">Biblioteca</a>
|
||||
</section>
|
||||
<!-- ORACIONES BÁSICAS -->
|
||||
<section class="bloque">
|
||||
<h3>Oraciones Básicas</h3>
|
||||
<p>Padre Nuestro, Ave María, Gloria</p>
|
||||
<a href="oraciones-basicas.html" class="boton">Rezar las Oraciones Básicas</a>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- RECURSOS -->
|
||||
<!--
|
||||
<section class="recursos">
|
||||
<a href="santos.html">Santos y novenas</a>
|
||||
<a href="calendario-liturgico/index.php">Calendario litúrgico</a>
|
||||
<a href="biblioteca-basica-cristiana.html">Biblioteca</a>
|
||||
</section>
|
||||
-->
|
||||
|
||||
<script src="js/codigo.js"></script>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
<script src="js/codigo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
28
js/codigo.js
28
js/codigo.js
|
|
@ -1,4 +1,6 @@
|
|||
let fechaHoyElem, santoDelDiaElem, indicadorLiturgicoElem, cabeceraHoy;
|
||||
let fechaHoyElem, santoDelDiaElem, indicadorLiturgicoElem, cabeceraHoy, menuPrincipalElem,
|
||||
nombreCicloElem, cicloParImparElem, descripcionSantoDelDiaElem,
|
||||
errorElem, difuntoHoyElem, salmoDelDiaElem;
|
||||
|
||||
function inicializarVariables() {
|
||||
cabeceraHoy = document.getElementById('header-hoy');
|
||||
|
|
@ -8,6 +10,7 @@ function inicializarVariables() {
|
|||
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');
|
||||
|
|
@ -54,10 +57,11 @@ async function cargarYActualizarTodo() {
|
|||
"violeta": "#a0b5b0"
|
||||
};
|
||||
|
||||
const colorReal = mapaColores[datosHoy.color] || "#0054a4"; // Color por defecto si no se encuentra
|
||||
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.
|
||||
|
|
@ -205,6 +209,25 @@ function visualizarDatos() {
|
|||
fechaHoyElem.textContent = hoy.toLocaleDateString('es-ES', opcionesFecha);
|
||||
}
|
||||
|
||||
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" }
|
||||
};
|
||||
const hoy = new Date();
|
||||
const diaSemana = hoy.getDay();
|
||||
const misterioHoy = MISTERIOS_DATA[diaSemana];
|
||||
const nombreMistElem = document.getElementById('nombre_misterio');
|
||||
if (nombreMistElem) {
|
||||
nombreMistElem.textContent = `Hoy rezamos los misterios ${misterioHoy.nombre.toUpperCase()}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Evento de carga unificado
|
||||
window.addEventListener("load", () => {
|
||||
inicializarVariables();
|
||||
|
|
@ -212,5 +235,6 @@ window.addEventListener("load", () => {
|
|||
santoDelDia();
|
||||
visualizarDatos();
|
||||
visualizarSalmo();
|
||||
visualizarRosario();
|
||||
cargarYActualizarTodo(); // Esta función ahora hace el trabajo de las dos anteriores
|
||||
});
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Oraciones Básicas</title>
|
||||
<link rel="stylesheet" href="css/estilos.css">
|
||||
<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>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="contenedor">
|
||||
<!-- PADRE NUESTRO -->
|
||||
<section class="bloque">
|
||||
<div class="titulo-oracion">Padre Nuestro</div>
|
||||
<div class="contenido-oracion">
|
||||
<p>Padre nuestro que estás en los cielos, santificado sea tu Nombre; venga tu reino; hágase tu voluntad, así en la tierra como en el cielo. Danos hoy nuestro pan de cada día; perdona nuestras ofensas, como también nosotros perdonamos a los que nos ofenden; no nos dejes caer en la tentación y líbranos del mal. Amén.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- AVE MARÍA -->
|
||||
<section class="bloque">
|
||||
<div class="titulo-oracion">Ave María</div>
|
||||
<div class="contenido-oracion">
|
||||
<p>Dios te salve, María, llena eres de gracia; el Señor es contigo; bendita tú eres entre todas las mujeres, y bendito es el fruto de tu vientre, Jesús. Santa María, Madre de Dios, ruega por nosotros, pecadores, ahora y en la hora de nuestra muerte. Amén.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- GLORIA -->
|
||||
<section class="bloque">
|
||||
<div class="titulo-oracion">Gloria</div>
|
||||
<div class="contenido-oracion">
|
||||
<p>Gloria a Dios en el cielo, y en la tierra paz a los hombres que ama el Señor. Por tu inmensa gloria te alabamos, te bendecimos, te adoramos, te glorificamos, te damos gracias, Señor Dios, Rey celestial, Dios Padre todopoderoso. Señor, Hijo único, Jesucristo. Señor Dios, Cordero de Dios, Hijo del Padre, tú que quitas el pecado del mundo, ten piedad de nosotros; tú que quitas el pecado del mundo, atiende nuestra súplica; tú que estás sentado a la derecha del Padre, ten piedad de nosotros. Porque sólo tú eres santo, sólo tú Señor, sólo tú Altísimo, Jesucristo, con el Espíritu Santo, en la gloria de Dios Padre. Amén.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SALVE -->
|
||||
<section class="bloque">
|
||||
<div class="titulo-oracion">Salve</div>
|
||||
<div class="contenido-oracion">
|
||||
<p>Salve, Reina y Madre de misericordia, vida, dulzura y esperanza nuestra; salve. A ti llamamos los desterrados hijos de Eva; a ti suspiramos, gimiendo y llorando en este valle de lágrimas. Ea, pues, Señora abogada nuestra, vuelve a nosotros esos tus ojos misericordiosos; y después de este destierro muéstranos a Jesús, fruto bendito de tu vientre. Oh clemente, oh piadosa, oh dulce Virgen María. Ruega por nosotros, Santa Madre de Dios, para que seamos dignos de alcanzar las promesas de Nuestro Señor Jesucristo. Amén.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CREDO -->
|
||||
<section class="bloque">
|
||||
<div class="titulo-oracion">Credo</div>
|
||||
<div class="contenido-oracion">
|
||||
<p>Creo en Dios, Padre todopoderoso, Creador del cielo y de la tierra;</p>
|
||||
<p>Creo en Jesucristo, su único Hijo, nuestro Señor; que fue concebido por obra y gracia del Espíritu Santo, nació de Santa María Virgen; padeció bajo el poder de Poncio Pilato; fue crucificado, muerto y sepultado; descendió a los infiernos; al tercer día resucitó de entre los muertos; subió a los cielos y está sentado a la derecha de Dios Padre todopoderoso; desde allí ha de venir a juzgar a vivos y muertos.</p>
|
||||
<p>Creo en el Espíritu Santo; la santa Iglesia católica; la comunión de los santos; el perdón de los pecados; la resurrección de la carne; y la vida eterna. Amén.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CREDO NICENO -->
|
||||
<section class="bloque">
|
||||
<div class="titulo-oracion">Credo Niceno</div>
|
||||
<div class="contenido-oracion">
|
||||
<p>Creo en un solo Dios, Padre todopoderoso, Creador del cielo y de la tierra, de todo lo visible y lo invisible.</p>
|
||||
<p>Creo en un solo Señor, Jesucristo, Hijo único de Dios, nacido del Padre antes de todos los siglos: Dios de Dios, Luz de Luz, Dios verdadero de Dios verdadero, engendrado, no creado, de la misma naturaleza que el Padre, por quien todo fue hecho; que por nosotros los hombres y por nuestra salvación bajó del cielo, y por obra del Espíritu Santo se encarnó de María, la Virgen, y se hizo hombre; y por nuestra causa fue crucificado en tiempos de Poncio Pilato; padeció y fue sepultado, y resucitó al tercer día, según las Escrituras; y subió al cielo, y está sentado a la derecha del Padre; y de nuevo vendrá con gloria para juzgar a vivos y muertos, y su reino no tendrá fin. </p>
|
||||
<p>Creo en el Espíritu Santo, Señor y dador de vida, que procede del Padre y del Hijo, que con el Padre y el Hijo recibe una misma adoración y gloria, y que habló por los profetas. Creo en la Iglesia, que es una, santa, católica y apostólica.</p>
|
||||
<p>Confieso que hay un solo bautismo para el perdón de los pecados. Espero la resurrección de los muertos y la vida del mundo futuro. Amén.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="js/codigo.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
13
rosario.html
13
rosario.html
|
|
@ -9,19 +9,26 @@
|
|||
<body>
|
||||
<header class="header-hoy" id="header-hoy">
|
||||
<h1 class="titulo">RECURSOS CATÓLICOS</h1>
|
||||
<h2 class="subtitulo">Rosario</h2>
|
||||
<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">
|
||||
<!-- <div class="misterio">
|
||||
<span id="nombre_misterio">Nombre del misterio</span>
|
||||
</div>
|
||||
</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>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="contenedor_rosario">
|
||||
|
|
|
|||
Loading…
Reference in New Issue