juavillo
15fc6dac3b
Cargos configurables por ronda (por defecto Camarero/a, Encargado, Cocina), calendario con días recuadrados, recuento de compañeros del mismo cargo por día y minileyenda por mes. Panel de administración con login, rondas y exportación a Excel. Node + Express + SQLite, listo para Docker/Coolify. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
69 lines
2.4 KiB
HTML
69 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<title>Pedir vacaciones</title>
|
|
<meta name="theme-color" content="#f6f0e3" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Karla:wght@400;700;800&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="/css/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<header class="masthead">
|
|
<p class="kicker">Ronda de vacaciones</p>
|
|
<h1 id="round-title">Cargando…</h1>
|
|
<p class="sub" id="round-sub"></p>
|
|
</header>
|
|
|
|
<div id="closed-banner" class="closed-banner hidden">
|
|
🔒 Esta ronda está cerrada. Solo puedes consultar tu petición.
|
|
</div>
|
|
|
|
<!-- Registro -->
|
|
<section id="join-card" class="card hidden">
|
|
<h2>¿Quién eres?</h2>
|
|
<form id="join-form">
|
|
<label for="name">Tu nombre y apellido</label>
|
|
<input id="name" type="text" autocomplete="name" maxlength="60" placeholder="P. ej. María García" required />
|
|
|
|
<label>Tu cargo</label>
|
|
<div class="role-grid" id="role-grid"></div>
|
|
|
|
<div class="error-msg" id="join-error"></div>
|
|
<button class="btn btn--accent" type="submit">Empezar a elegir días</button>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Calendario -->
|
|
<section id="calendar-section" class="hidden">
|
|
<div class="me-strip">
|
|
<div class="who">
|
|
<small id="me-role"></small>
|
|
<span id="me-name"></span>
|
|
</div>
|
|
<div class="tally"><b id="me-count">0</b> días</div>
|
|
</div>
|
|
<p class="hint" id="calendar-hint">
|
|
Toca los días que quieres pedir. El número <span class="chip">2</span> indica
|
|
cuántas personas de tu mismo cargo ya han pedido ese día.
|
|
</p>
|
|
<div id="calendar"></div>
|
|
<footer class="colophon">Buen servicio · Buen descanso</footer>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="savebar" id="savebar">
|
|
<div class="inner">
|
|
<span class="label" id="save-label"></span>
|
|
<button class="btn" id="save-btn">Guardar</button>
|
|
</div>
|
|
</div>
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script src="/js/round.js"></script>
|
|
</body>
|
|
</html>
|