87 lines
3.8 KiB
HTML
87 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Diario de Oración</title>
|
|
<link rel="icon" type="image/x-icon" href="img/favicon.png">
|
|
<link rel="stylesheet" href="css/estilos.css">
|
|
<link rel="stylesheet" href="css/diario.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="header-container"></div>
|
|
|
|
<main class="contenedor-diario">
|
|
|
|
<!-- CABECERA -->
|
|
<div class="diario-cabecera">
|
|
<h2>🕯 Mi Diario de Oración</h2>
|
|
<p class="saludo-diario" id="saludo-usuario"></p>
|
|
</div>
|
|
|
|
<!-- EDITOR -->
|
|
<section class="bloque editor-diario" id="editor-diario">
|
|
|
|
<!-- Navegación de fecha -->
|
|
<div class="nav-fecha">
|
|
<button class="btn-nav" id="btn-anterior" title="Día anterior">‹</button>
|
|
<div class="fecha-centro">
|
|
<span class="display-fecha" id="display-fecha"></span>
|
|
<input type="date" id="fecha-entrada" class="input-fecha-oculto" aria-label="Seleccionar fecha">
|
|
<button class="btn-cambiar-fecha" title="Elegir otra fecha"
|
|
onclick="document.getElementById('fecha-entrada').showPicker
|
|
? document.getElementById('fecha-entrada').showPicker()
|
|
: document.getElementById('fecha-entrada').focus()">📅</button>
|
|
</div>
|
|
<button class="btn-nav" id="btn-siguiente" title="Día siguiente">›</button>
|
|
</div>
|
|
|
|
<!-- Estado espiritual -->
|
|
<div class="estados-animo">
|
|
<p class="label-estados">¿Cómo estás hoy en tu interior?</p>
|
|
<div class="botones-estados">
|
|
<button class="btn-estado" data-estado="paz">🕊️ <span>Paz</span></button>
|
|
<button class="btn-estado" data-estado="gratitud">🙏 <span>Gratitud</span></button>
|
|
<button class="btn-estado" data-estado="lucha">😔 <span>Lucha</span></button>
|
|
<button class="btn-estado" data-estado="gozo">✨ <span>Gozo</span></button>
|
|
<button class="btn-estado" data-estado="silencio">🌿 <span>Silencio</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Título opcional -->
|
|
<input type="text" id="titulo-entrada" placeholder="Título de la entrada (opcional)…"
|
|
class="input-titulo" maxlength="100">
|
|
|
|
<!-- Área de escritura -->
|
|
<textarea id="texto-entrada"
|
|
placeholder="Escribe tu oración, reflexión o lo que llevas en el corazón hoy…"
|
|
class="textarea-diario" rows="8"></textarea>
|
|
|
|
<!-- Botones -->
|
|
<div class="acciones-diario">
|
|
<button class="boton btn-guardar-diario" id="btn-guardar-entrada">Guardar ✝</button>
|
|
<button class="boton btn-borrar-diario" id="btn-borrar-entrada" style="display:none;">Eliminar</button>
|
|
</div>
|
|
|
|
<div id="mensaje-diario" class="mensaje-diario" style="display:none;"></div>
|
|
</section>
|
|
|
|
<!-- HISTORIAL DE ENTRADAS -->
|
|
<section class="bloque historial-diario">
|
|
<h3>📖 Mis entradas</h3>
|
|
<ul id="lista-entradas" class="lista-entradas"></ul>
|
|
<p id="sin-entradas" class="texto-suave" style="display:none;">
|
|
Aún no hay entradas en tu diario. ¡Empieza hoy mismo escribiendo lo que llevas en el corazón!
|
|
</p>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<script src="js/api-config.js"></script>
|
|
<script src="js/auth.js"></script>
|
|
<script src="js/header.js"></script>
|
|
<script src="js/diario.js"></script>
|
|
</body>
|
|
</html>
|