63 lines
2.7 KiB
HTML
63 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='es'>
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
|
<title>Calendario y Pendientes</title>
|
|
<link rel='stylesheet' href='style.css'>
|
|
</head>
|
|
<body>
|
|
<div class='background'></div>
|
|
<div class='container glass'>
|
|
<h1>Calendario y Pendientes</h1>
|
|
<div class='tabs'>
|
|
<button class='tab active' data-tab='calendario'>Calendario</button>
|
|
<button class='tab' data-tab='pendientes'>Pendientes</button>
|
|
<button class='tab' data-tab='completados'>Completados</button>
|
|
</div>
|
|
<div id='calendario' class='section active'>
|
|
<div class='calendar-header'>
|
|
<button id='prevMonth' class='nav-btn' aria-label='Mes anterior'><</button>
|
|
<h2 id='monthYear'></h2>
|
|
<button id='nextMonth' class='nav-btn' aria-label='Mes siguiente'>></button>
|
|
</div>
|
|
<div class='weekdays'>
|
|
<div>Dom</div><div>Lun</div><div>Mar</div><div>Mie</div><div>Jue</div><div>Vie</div><div>Sab</div>
|
|
</div>
|
|
<div id='calendarGrid' class='calendar-grid'></div>
|
|
</div>
|
|
<div id='pendientes' class='section'>
|
|
<form id='formPendiente' class='glass-form'>
|
|
<input type='hidden' id='pendienteId'>
|
|
<input type='text' id='descripcion' placeholder='Descripcion del pendiente' required>
|
|
<input type='date' id='fecha' required>
|
|
<select id='estado'>
|
|
<option value='pendiente'>Pendiente</option>
|
|
<option value='en progreso'>En progreso</option>
|
|
<option value='completado'>Completado</option>
|
|
</select>
|
|
<select id='urgencia'>
|
|
<option value='baja'>Baja</option>
|
|
<option value='media' selected>Media</option>
|
|
<option value='alta'>Alta</option>
|
|
</select>
|
|
<button type='submit' id='btnGuardar'>Guardar</button>
|
|
<button type='button' id='btnCancelar' class='hidden'>Cancelar</button>
|
|
</form>
|
|
<div id='listaPendientes' class='lista-pendientes'></div>
|
|
</div>
|
|
<div id='completados' class='section'>
|
|
<div id='listaCompletados' class='lista-pendientes'></div>
|
|
</div>
|
|
</div>
|
|
<div id='modalDia' class='modal glass hidden'>
|
|
<div class='modal-content'>
|
|
<h3 id='modalTitulo'></h3>
|
|
<div id='modalPendientes'></div>
|
|
<button id='cerrarModal'>Cerrar</button>
|
|
</div>
|
|
</div>
|
|
<script src='script.js'></script>
|
|
</body>
|
|
</html>
|