Diario Personal Para Pc Con Contrasena Page

<div id="diaryApp" class="diary-container"> <div class="diary-header"> <h2>📖 Mi Diario Secreto</h2> <button id="logoutBtn" class="btn-cerrar-sesion" style="background:#865d36;">🚪 Cerrar sesión</button> </div> <div class="diario-body"> <div class="fecha-control"> <label style="font-weight: bold;">📅 Fecha:</label> <input type="date" id="fechaSelector"> <button id="nuevoDiaBtn" class="btn-nuevo-dia">✨ Nueva entrada</button> </div> <textarea id="diarioTexto" placeholder="Escribe tus pensamientos, recuerdos o lo que sientes hoy..."></textarea> <div class="acciones"> <button id="saveEntryBtn" class="btn-guardar">💾 Guardar entrada</button> </div> <div id="statusMsg" class="status"></div> </div> <footer> ✍️ Tus recuerdos están cifrados localmente. Solo visible con tu contraseña. </footer> </div>

<div id="lockScreen" class="lock-screen"> <div class="lock-icon">📔🔒</div> <h2>Diario Personal</h2> <p style="color:#5d4a32;">Protegido con contraseña</p> <input type="password" id="passwordInput" class="password-input" placeholder="Contraseña" autocomplete="off"> <br> <button id="unlockBtn">🔓 Desbloquear</button> <div id="loginError" class="error-msg" style="display: none;">⚠️ Contraseña incorrecta</div> <div style="margin-top: 25px; font-size: 0.75rem; color:#a07d58;">🔐 Solo tú tienes acceso</div> </div>

.btn-nuevo-dia background: #2c553c;

.btn-cerrar-sesion background: #aa6f3c;

.error-msg color: #c23b22; background: #ffe6e2; padding: 8px; border-radius: 40px; margin-top: 12px; font-size: 0.85rem; display: inline-block;

Here’s a complete, ready-to-use in HTML/CSS/JS. Save it as diario.html and open it in any browser. No internet needed.

.btn-guardar background: #4f6d5c;

.btn-nuevo-dia:hover background: #3f7557;

.diary-header background: #5d3a1a; color: #f9e7c2; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px;

.diary-container display: none; flex-direction: column; background: #fffef7; diario personal para pc con contrasena

.status margin-top: 15px; font-size: 0.85rem; text-align: right; color: #4f6b3c;

.acciones display: flex; justify-content: flex-end; gap: 15px; margin-top: 8px;

.lock-icon font-size: 3rem; margin-bottom: 1rem; Save it as diario