Registro de Situaciones de Vida

``` **CSS (style.css):** ```css body { font-family: sans-serif; background-color: #f9f9f9; color: #333; transition: background-color 0.3s, color 0.3s; } .container { max-width: 600px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; margin-bottom: 20px; } label { display: block; margin-bottom: 5px; } textarea { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; } button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #3e8e41; } #mensaje { margin-top: 15px; padding: 10px; border-radius: 4px; } .exito { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* Modo Oscuro */ body.modo-oscuro { background-color: #333; color: #f9f9f9; } .modo-oscuro .container { background-color: #444; box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); } .modo-oscuro textarea { background-color: #555; color: #f9f9f9; border: 1px solid #666; } ``` **JavaScript (script.js):** ```javascript document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('registroForm'); const mensajeDiv = document.getElementById('mensaje'); const modoOscuroBtn = document.getElementById('modoOscuroBtn'); const body = document.body; form.addEventListener('submit', function(event) { event.preventDefault(); const situacion = document.getElementById('situacion').value; const fechaHora = new Date().toLocaleString(); const registro = { situacion: situacion, fechaHora: fechaHora }; // Simulación de guardado en JSON (en la consola) console.log(JSON.stringify(registro)); mensajeDiv.textContent = 'Situación guardada correctamente (ver consola)'; mensajeDiv.classList.add('exito'); // Limpiar el formulario form.reset(); // Limpiar el mensaje después de 3 segundos setTimeout(() => { mensajeDiv.textContent = ''; mensajeDiv.classList.remove('exito'); }, 3000); }); modoOscuroBtn.addEventListener('click', function() { body.classList.toggle('modo-oscuro'); }); }); ```