Sobretodo el rosario
This commit is contained in:
Tatiana Villa Ema
parent
7fe80501a3
commit
25a1019802
112
css/estilos.css
112
css/estilos.css
|
|
@ -4,6 +4,7 @@
|
|||
: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;
|
||||
|
|
@ -36,23 +37,24 @@ body {
|
|||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 6px;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.fecha {
|
||||
letter-spacing: 2px;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 0.5rem;
|
||||
font-family: 'EB Garamond', serif;
|
||||
font-style: italic;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.ciclo {
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-top: 0.3rem;
|
||||
opacity: 0.8;
|
||||
font-family: 'EB Garamond', serif;
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -75,9 +77,10 @@ body {
|
|||
padding: 1.5rem;
|
||||
border: 2px solid var(--color-acento);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 5px 15px rgba(232, 162, 58, 0.5);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.santo h2 {
|
||||
|
|
@ -91,19 +94,23 @@ body {
|
|||
margin-top: 5px;
|
||||
font-size: 0.95rem;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
/* --- DIFUNTOS (Mínimo y mono) --- */
|
||||
/*
|
||||
.tarjeta-difunto {
|
||||
background: #f0f7ff;
|
||||
border-radius: 50px;
|
||||
margin: 2rem auto;
|
||||
max-width: 80%;
|
||||
padding: 10px 20px;
|
||||
border: 1px dashed var(--color-primario);
|
||||
} */
|
||||
.santo_discreto {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
font-family: 'EB Garamond', serif;
|
||||
font-style: italic;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.santo_discreto #descripcion-santo-del-dia {
|
||||
margin-top: 0px;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
color: var(--color-secundario);
|
||||
}
|
||||
|
||||
.nombre-difunto {
|
||||
font-weight: 600;
|
||||
|
|
@ -157,7 +164,7 @@ body {
|
|||
/* --- BOTONES --- */
|
||||
.boton {
|
||||
display: inline-block;
|
||||
background-color: var(--color-acento);
|
||||
background-color: var(--color-primario);
|
||||
color: white;
|
||||
padding: 12px 25px;
|
||||
text-decoration: none;
|
||||
|
|
@ -171,7 +178,7 @@ body {
|
|||
|
||||
.boton:hover {
|
||||
transform: translateY(-2px);
|
||||
background-color: #d18d2b;
|
||||
background-color: var(--color-hover);
|
||||
}
|
||||
|
||||
/* --- RECURSOS (Enlaces abajo) --- */
|
||||
|
|
@ -191,4 +198,73 @@ body {
|
|||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- ROSARIO --- */
|
||||
.contenedor_rosario {
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
padding: 2.5rem;
|
||||
box-shadow: 0 15px 35px rgba(47, 58, 86, 0.1);
|
||||
max-width: 700px;
|
||||
margin: -30px auto 40px; /* Sube un poco sobre la cabecera */
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.contenedor_rosario h3 {
|
||||
font-family: 'EB Garamond', serif;
|
||||
font-size: 2rem;
|
||||
color: var(--color-primario);
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.controles-rosario {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.btn-nav {
|
||||
background-color: var(--color-primario);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.btn-nav:hover {
|
||||
background-color: var(--color-acento);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.indicador-paso {
|
||||
font-family: 'EB Garamond', serif;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-primario);
|
||||
}
|
||||
|
||||
.imagen-misterio {
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
transition: opacity 0.5s ease;
|
||||
border: 5px solid var(--color-secundario);
|
||||
}
|
||||
|
||||
#imagen-misterio {
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border: 4px solid var(--color-acento); /* Ese E8A23A en acción */
|
||||
border-radius: 15px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
/* Fuentes importadas desde Google Fonts */
|
||||
@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 {
|
||||
--color-primario: #2F3A56;
|
||||
--color-secundario: #EAF2FA;
|
||||
--color-fondo: #FAF7F2;
|
||||
--color-texto: #2b2b2b;
|
||||
--color-acento: #E8A23A;
|
||||
|
||||
--color-text: #3A3A3A;
|
||||
--color-naranja: #F4C76E;
|
||||
--arena: #E8DCC2;
|
||||
--color-primary-dark: #2F3A56;
|
||||
--color-text-light: #FDFBF7;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Gothic ', Garamond, 'Times New Roman', serif;
|
||||
background-color: var(--color-fondo);
|
||||
color: var(--color-texto);
|
||||
}
|
||||
|
||||
.header-hoy {
|
||||
background-color: var(--color-primario);
|
||||
color: var(--color-secundario);
|
||||
text-align: center;
|
||||
padding: 2.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.fecha {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.titulo {
|
||||
margin: 0.5rem;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 5px;
|
||||
color: var(--color-secundario);
|
||||
line-height: 1.2;
|
||||
text-shadow: var(--color-secundario) 1px 1px 2px;
|
||||
}
|
||||
|
||||
.subtitulo {
|
||||
font-size: 1rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.fecha {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#indicador-liturgico {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.santo {
|
||||
font-size: 1.3rem;
|
||||
/* border: 1px solid #E8A23A;*/
|
||||
border-top: 0; /* Esto quita específicamente el de arriba */
|
||||
border-left: 0;
|
||||
border-radius: 0 0 5px 5px; /* Redondea solo las esquinas de abajo */
|
||||
max-width: fit-content;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
box-shadow: #2b2b2b 1px 1px 5px;
|
||||
}
|
||||
|
||||
.santo {
|
||||
text-align: center; /* Centra todo el contenido (h2 y div) */
|
||||
margin: 10px auto; /* Margen arriba/abajo y centrado horizontal del bloque */
|
||||
padding: 10px;
|
||||
border: 1px solid #E8A23A;
|
||||
border-radius: 5px;
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
/* Quitamos los márgenes automáticos que separan el nombre de la descripción */
|
||||
.santo h2 {
|
||||
margin: 0;
|
||||
font-size: 1.3rem; /* Ajusta según prefieras */
|
||||
}
|
||||
|
||||
#descripcion-santo-del-dia {
|
||||
margin-top: 2px; /* Un espacio mínimo para que no estén pegados */
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
|
||||
.tarjeta-difunto {
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.nombre-difunto {
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-primario);
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.bloque {
|
||||
text-align: center; /* Esto centrará textos, botones y listas */
|
||||
font-size: 1.5rem;
|
||||
margin: 2rem 1.5rem;
|
||||
padding: 1.5rem;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
border: 1px solid var(--color-primario);
|
||||
}
|
||||
|
||||
.bloque p {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* Si usas listas <ul> en la intención, para que se centren hay que quitarles el padding */
|
||||
.bloque ul {
|
||||
list-style: none; /* Quita los puntos si prefieres un look más limpio */
|
||||
padding: 0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
|
@ -4,10 +4,35 @@
|
|||
{ "fecha": "2026-01-06", "color": "blanco", "tiempo": "Navidad (Epifanía del Señor)" },
|
||||
{ "fecha": "2026-01-11", "color": "blanco", "tiempo": "Navidad (Bautismo del Señor)" },
|
||||
{ "fecha": "2026-01-17", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-01-18", "color": "blanco", "tiempo": "Tiempo Ordinario (Conversión de San Pablo)" },
|
||||
{ "fecha": "2026-01-18", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-01-19", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-01-20", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-01-21", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-01-22", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-01-25", "color": "blanco", "tiempo": "Tiempo Ordinario (Conversión de San Pablo)" },
|
||||
{ "fecha": "2026-01-29", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-01-30", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-01-31", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-02-01", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-02-02", "color": "blanco", "tiempo": "Tiempo Ordinario (Presentación del Señor)" },
|
||||
{ "fecha": "2026-02-03", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-02-04", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-02-11", "color": "verde", "tiempo": "Tiempo Ordinario" },
|
||||
{ "fecha": "2026-02-14", "color": "verde", "tiempo": "Domingo de Carnaval" },
|
||||
{ "fecha": "2026-02-15", "color": "verde", "tiempo": "Cuaresma (Lunes de Carnaval)" },
|
||||
{ "fecha": "2026-02-16", "color": "verde", "tiempo": "Cuaresma (Martes de Carnaval)" },
|
||||
{ "fecha": "2026-02-18", "color": "morado", "tiempo": "Cuaresma (Miércoles de Ceniza)" },
|
||||
{ "fecha": "2026-03-01", "color": "morado", "tiempo": "Cuaresma" },
|
||||
{ "fecha": "2026-03-08", "color": "morado", "tiempo": "Cuaresma" },
|
||||
{ "fecha": "2026-03-15", "color": "morado", "tiempo": "Cuaresma" },
|
||||
{ "fecha": "2026-03-18", "color": "morado", "tiempo": "Cuaresma" },
|
||||
{ "fecha": "2026-03-19", "color": "blanco", "tiempo": "Cuaresma (San José)" },
|
||||
{ "fecha": "2026-03-20", "color": "morado", "tiempo": "Cuaresma" },
|
||||
{ "fecha": "2026-03-21", "color": "morado", "tiempo": "Cuaresma" },
|
||||
{ "fecha": "2026-03-22", "color": "morado", "tiempo": "Cuaresma" },
|
||||
{ "fecha": "2026-03-23", "color": "morado", "tiempo": "Cuaresma" },
|
||||
{ "fecha": "2026-03-24", "color": "morado", "tiempo": "Cuaresma" },
|
||||
{ "fecha": "2026-03-25", "color": "violeta", "tiempo": "Cuaresma (Anunciación del Señor)" },
|
||||
{ "fecha": "2026-03-29", "color": "rojo", "tiempo": "Semana Santa (Domingo de Ramos)" },
|
||||
{ "fecha": "2026-04-02", "color": "blanco", "tiempo": "Triduo Pascual (Jueves Santo)" },
|
||||
{ "fecha": "2026-04-03", "color": "rojo", "tiempo": "Triduo Pascual (Viernes Santo)" },
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 5.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 MiB |
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<vector android:height="24dp" android:tint="#000000"
|
||||
android:viewportHeight="24" android:viewportWidth="24"
|
||||
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<path android:fillColor="@android:color/white" android:pathData="M7.41,8.59L12,13.17l4.59,-4.58L18,10l-6,6 -6,-6 1.41,-1.41z"/>
|
||||
</vector>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<vector android:height="24dp" android:tint="#000000"
|
||||
android:viewportHeight="24" android:viewportWidth="24"
|
||||
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<path android:fillColor="@android:color/white" android:pathData="M7.41,15.41L12,10.83l4.59,4.58L18,14l-6,-6 -6,6z"/>
|
||||
</vector>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="108dp"
|
||||
android:height="108dp"
|
||||
android:viewportWidth="108"
|
||||
android:viewportHeight="108">
|
||||
<path
|
||||
android:fillColor="#3DDC84"
|
||||
android:pathData="M0,0h108v108h-108z" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M9,0L9,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,0L19,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M29,0L29,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M39,0L39,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M49,0L49,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M59,0L59,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M69,0L69,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M79,0L79,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M89,0L89,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M99,0L99,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,9L108,9"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,19L108,19"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,29L108,29"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,39L108,39"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,49L108,49"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,59L108,59"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,69L108,69"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,79L108,79"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,89L108,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,99L108,99"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,29L89,29"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,39L89,39"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,49L89,49"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,59L89,59"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,69L89,69"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,79L89,79"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M29,19L29,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M39,19L39,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M49,19L49,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M59,19L59,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M69,19L69,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M79,19L79,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
</vector>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:aapt="http://schemas.android.com/aapt"
|
||||
android:width="108dp"
|
||||
android:height="108dp"
|
||||
android:viewportWidth="108"
|
||||
android:viewportHeight="108">
|
||||
<path android:pathData="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
|
||||
<aapt:attr name="android:fillColor">
|
||||
<gradient
|
||||
android:endX="85.84757"
|
||||
android:endY="92.4963"
|
||||
android:startX="42.9492"
|
||||
android:startY="49.59793"
|
||||
android:type="linear">
|
||||
<item
|
||||
android:color="#44000000"
|
||||
android:offset="0.0" />
|
||||
<item
|
||||
android:color="#00000000"
|
||||
android:offset="1.0" />
|
||||
</gradient>
|
||||
</aapt:attr>
|
||||
</path>
|
||||
<path
|
||||
android:fillColor="#FFFFFF"
|
||||
android:fillType="nonZero"
|
||||
android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
|
||||
android:strokeWidth="1"
|
||||
android:strokeColor="#00000000" />
|
||||
</vector>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
|
|
@ -44,6 +44,7 @@
|
|||
</section>
|
||||
|
||||
<!-- INTENCIÓN -->
|
||||
<!--
|
||||
<section class="bloque">
|
||||
<h3>🙏 Intención de hoy</h3>
|
||||
<p class="intencion">
|
||||
|
|
@ -54,22 +55,23 @@
|
|||
</ul>
|
||||
</p>
|
||||
<a href="diario-oracion.html" class="boton">Ofrecer mi oración</a>
|
||||
</section>
|
||||
</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>
|
||||
</section>-->
|
||||
|
||||
<!-- ROSARIO -->
|
||||
<section class="bloque">
|
||||
<h3>📿 Rosario</h3>
|
||||
<p>Hoy rezamos los Misterios Luminosos</p>
|
||||
<a href="rosario/index.html" class="boton">Rezar el Rosario</a>
|
||||
<a href="rosario.html" class="boton">Rezar el Rosario</a>
|
||||
</section>
|
||||
|
||||
<!-- RECURSOS -->
|
||||
|
|
|
|||
|
|
@ -50,7 +50,8 @@ async function cargarYActualizarTodo() {
|
|||
"blanco": "#ffffff",
|
||||
"rojo": "#b30000",
|
||||
"azul": "#0074d9",
|
||||
"rosa": "#e7b1cc"
|
||||
"rosa": "#e7b1cc",
|
||||
"violeta": "#a0b5b0"
|
||||
};
|
||||
|
||||
const colorReal = mapaColores[datosHoy.color] || "#0054a4"; // Color por defecto si no se encuentra
|
||||
|
|
@ -202,7 +203,6 @@ function visualizarDatos() {
|
|||
const opcionesFecha = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
||||
const hoy = new Date();
|
||||
fechaHoyElem.textContent = hoy.toLocaleDateString('es-ES', opcionesFecha);
|
||||
|
||||
}
|
||||
|
||||
// Evento de carga unificado
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
let indiceMisterio = 0;
|
||||
let misteriosHoy = null;
|
||||
|
||||
const MISTERIOS_DATA = {
|
||||
0: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] },
|
||||
1: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] },
|
||||
2: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] },
|
||||
3: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] },
|
||||
4: { nombre: "Luminosos", titulos: ["El Bautismo", "Las Bodas de Caná", "El Anuncio del Reino", "La Transfiguración", "La Institución de la Eucaristía"] },
|
||||
5: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] },
|
||||
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}`;
|
||||
|
||||
actualizarVistaMisterio();
|
||||
|
||||
// Eventos de los botones con comprobación de existencia (buena práctica)
|
||||
const btnSiguiente = document.getElementById('siguiente');
|
||||
const btnAnterior = document.getElementById('anterior');
|
||||
|
||||
if (btnSiguiente) {
|
||||
btnSiguiente.addEventListener('click', () => {
|
||||
indiceMisterio = (indiceMisterio + 1) % 5;
|
||||
actualizarVistaMisterio();
|
||||
});
|
||||
}
|
||||
|
||||
if (btnAnterior) {
|
||||
btnAnterior.addEventListener('click', () => {
|
||||
indiceMisterio = (indiceMisterio - 1 + 5) % 5;
|
||||
actualizarVistaMisterio();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function actualizarVistaMisterio() {
|
||||
const titulo = document.getElementById('titulo_misterio');
|
||||
const imagen = document.getElementById('imagen-misterio');
|
||||
const paso = document.getElementById('paso-actual');
|
||||
|
||||
if (titulo) {
|
||||
titulo.textContent = `${indiceMisterio + 1}º Misterio: ${misteriosHoy.titulos[indiceMisterio]}`;
|
||||
}
|
||||
|
||||
if (paso) paso.textContent = indiceMisterio + 1;
|
||||
|
||||
if (imagen) {
|
||||
const carpeta = misteriosHoy.nombre.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
|
||||
// Asegúrate de que las fotos sean jpg y sigan este patrón: gozosos1.jpg, gozosos2.jpg...
|
||||
imagen.src = `img/${carpeta}${indiceMisterio + 1}.jpg`;
|
||||
|
||||
// Animación suave
|
||||
imagen.style.opacity = 0;
|
||||
setTimeout(() => { imagen.style.opacity = 1; }, 50);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', inicializarRosario);
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
const MISTERIOS_POR_DIA = {
|
||||
0: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] }, // Domingo
|
||||
1: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] }, // Lunes
|
||||
2: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] }, // Martes
|
||||
3: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] }, // Miércoles
|
||||
4: { nombre: "Luminosos", titulos: ["El Bautismo", "Las Bodas de Caná", "El Anuncio del Reino", "La Transfiguración", "La Institución de la Eucaristía"] }, // Jueves
|
||||
5: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] }, // Viernes
|
||||
6: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] } // Sábado
|
||||
|
||||
};
|
||||
|
||||
function inicializarVariables() {
|
||||
cabeceraHoy = document.getElementById('header-hoy');
|
||||
fechaHoyElem = document.getElementById('fecha-hoy');
|
||||
santoDelDiaElem = document.getElementById('santo-del-dia');
|
||||
nombreMisterioElem = document.getElementById('nombre_misterio');
|
||||
tituloMisterioElem = document.getElementById('titulo_misterio');
|
||||
descripcionMisterioElem = document.getElementById('descripcion_misterio');
|
||||
imagenMisterioElem = document.getElementById('imagen-misterio');
|
||||
}
|
||||
|
||||
function datosCabecera() {
|
||||
// Aquí definimos el formato completo con el AÑO
|
||||
const opcionesFecha = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' };
|
||||
const hoy = new Date();
|
||||
if (fechaHoyElem) {
|
||||
fechaHoyElem.textContent = hoy.toLocaleDateString('es-ES', opcionesFecha);
|
||||
}
|
||||
}
|
||||
|
||||
function cargarMisterioHoy() {
|
||||
const hoy = new Date();
|
||||
const diaSemana = hoy.getDay();
|
||||
const misterioHoy = MISTERIOS_POR_DIA[diaSemana];
|
||||
|
||||
// ACTUALIZAR TÍTULOS DE MISTERIOS
|
||||
indiceMisterio=0; // Siempre el primer misterio del día
|
||||
nombreMisterioElem.textContent = `Misterios ${misterioHoy.nombre}`;
|
||||
tituloMisterioElem.textContent = `1º Misterio ${misterioHoy.nombre}: ${misterioHoy.titulos[0]}`;
|
||||
|
||||
|
||||
|
||||
// ACTUALIZAR CONTENIDO DEL MISTERIO
|
||||
const tituloMisterioElem = document.getElementById('titulo_misterio');
|
||||
if (tituloMisterioElem) {
|
||||
tituloMisterioElem.textContent = `1º Misterio ${misterioHoy.nombre}: ${misterioHoy.titulos[0]}`;
|
||||
}
|
||||
|
||||
const imagenMisterioElem = document.getElementById('imagen-misterio');
|
||||
if (imagenMisterioElem) {
|
||||
const imgId = misterioHoy.nombre.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
|
||||
imagenMisterioElem.src = `img/${imgId}1.jpg`;
|
||||
}
|
||||
}
|
||||
|
||||
// Evento de carga
|
||||
window.addEventListener("load", () => {
|
||||
inicializarVariables();
|
||||
datosCabecera(); // Esta pone la fecha con AÑO
|
||||
cargarMisterioHoy(); // Esta ahora solo pone los misterios sin romper la fecha
|
||||
|
||||
if (typeof santoDelDia === "function") santoDelDia();
|
||||
});
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rosario</title>
|
||||
<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">Rosario</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>
|
||||
</header>
|
||||
|
||||
<div class="contenedor_rosario">
|
||||
<h3 id="titulo_misterio">Primer Misterio Gozoso - La Anunciación del Ángel a María</h3>
|
||||
<div class="controles-rosario">
|
||||
<button id="anterior" class="btn-nav">← Anterior</button>
|
||||
<div class="indicador-paso"><span id="paso-actual">1</span> / 5</div>
|
||||
<button id="siguiente" class="btn-nav">Siguiente →</button>
|
||||
</div>
|
||||
<img src="img/gozosos1.jpg" alt="Rosario Image" id="imagen-misterio" class="imagen-misterio">
|
||||
</div>
|
||||
|
||||
<script src="js/rosario.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue