mirror of
https://github.com/R0m1k3/Presencia.git
synced 2026-10-22 22:58:03 +02:00
Claude
767b7aaa3b
- Calendrier : sous 640px, la grille 7 colonnes devient une liste verticale (une ligne pleine largeur par jour), boutons AM/PM en cibles tactiles de 44px minimum. - Popover de statut : positionnement recalculé pour rester dans l'écran (bascule au-dessus de la cellule et se recale à gauche si besoin) au lieu de pouvoir déborder hors viewport. - Tableaux admin (sociétés, utilisateurs, validation) : scroll horizontal indépendant pour ne pas casser la mise en page sur petit écran. - Nav admin et en-tête compactés sur mobile. Testé avec Playwright en viewport mobile (375x812) : calendrier liste, popover, connexion et vues admin.
207 lines
8.0 KiB
HTML
207 lines
8.0 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Presencia — Gestion des présences</title>
|
||
<link rel="stylesheet" href="css/style.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<div id="toast-container" class="toast-container"></div>
|
||
|
||
<!-- LOGIN VIEW -->
|
||
<section id="view-login" class="login-screen">
|
||
<div class="login-card">
|
||
<div class="brand">
|
||
<span class="brand-mark">◆</span>
|
||
<span class="brand-name">Presencia</span>
|
||
</div>
|
||
<p class="login-subtitle">Gestion des présences par société</p>
|
||
<form id="login-form" autocomplete="on">
|
||
<label class="field">
|
||
<span>Adresse e-mail</span>
|
||
<input type="email" id="login-email" required autocomplete="username" placeholder="vous@societe.com" />
|
||
</label>
|
||
<label class="field">
|
||
<span>Mot de passe</span>
|
||
<input type="password" id="login-password" required autocomplete="current-password" placeholder="••••••••" />
|
||
</label>
|
||
<div id="login-error" class="form-error" hidden></div>
|
||
<button type="submit" class="btn btn-primary btn-block">Se connecter</button>
|
||
</form>
|
||
<p class="login-hint">Accès réservé — comptes créés par l'administrateur.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- MAIN APP -->
|
||
<div id="app" class="app" hidden>
|
||
<header class="topbar">
|
||
<div class="topbar-brand">
|
||
<span class="brand-mark">◆</span>
|
||
<span class="brand-name">Presencia</span>
|
||
</div>
|
||
<nav id="admin-nav" class="topbar-nav" hidden>
|
||
<button class="nav-btn" data-view="calendar" data-admin-mode="own">Mon planning</button>
|
||
<button class="nav-btn" data-view="companies">Sociétés</button>
|
||
<button class="nav-btn" data-view="users">Utilisateurs</button>
|
||
<button class="nav-btn" data-view="plannings">Plannings</button>
|
||
<button class="nav-btn" data-view="validation">Validation & export</button>
|
||
</nav>
|
||
<div class="topbar-user">
|
||
<div class="user-chip">
|
||
<span id="user-name" class="user-name"></span>
|
||
<span id="user-role" class="user-role-badge"></span>
|
||
</div>
|
||
<button id="logout-btn" class="btn btn-ghost btn-sm">Déconnexion</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main">
|
||
|
||
<!-- CALENDAR VIEW (cadre self, or admin viewing a cadre) -->
|
||
<section id="view-calendar" class="view">
|
||
<div class="calendar-header">
|
||
<div class="calendar-title-group">
|
||
<h1 id="calendar-owner-name">Mon planning</h1>
|
||
<div class="month-nav">
|
||
<button id="prev-month" class="icon-btn" aria-label="Mois précédent">‹</button>
|
||
<span id="month-label" class="month-label"></span>
|
||
<button id="next-month" class="icon-btn" aria-label="Mois suivant">›</button>
|
||
</div>
|
||
</div>
|
||
<div id="validation-banner" class="validation-banner"></div>
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<span class="legend-item"><i class="dot dot-present"></i>Présent</span>
|
||
<span class="legend-item"><i class="dot dot-absent"></i>Absent</span>
|
||
<span class="legend-item"><i class="dot dot-conge"></i>Congé</span>
|
||
<span class="legend-item"><i class="dot dot-rtt"></i>RTT</span>
|
||
<span class="legend-item"><i class="dot dot-empty"></i>Non renseigné</span>
|
||
</div>
|
||
|
||
<div class="calendar-weekdays">
|
||
<span>Lun</span><span>Mar</span><span>Mer</span><span>Jeu</span><span>Ven</span><span>Sam</span><span>Dim</span>
|
||
</div>
|
||
<div id="calendar-grid" class="calendar-grid"></div>
|
||
|
||
<div id="calendar-actions" class="calendar-actions">
|
||
<button id="validate-month-btn" class="btn btn-primary">Valider mon mois</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPANIES VIEW (admin) -->
|
||
<section id="view-companies" class="view" hidden>
|
||
<div class="view-header">
|
||
<h1>Sociétés</h1>
|
||
<button id="add-company-btn" class="btn btn-primary">+ Nouvelle société</button>
|
||
</div>
|
||
<div class="card">
|
||
<div class="table-scroll">
|
||
<table class="data-table">
|
||
<thead><tr><th>Nom</th><th>Cadres actifs</th><th>Créée le</th><th></th></tr></thead>
|
||
<tbody id="companies-tbody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- USERS VIEW (admin) -->
|
||
<section id="view-users" class="view" hidden>
|
||
<div class="view-header">
|
||
<h1>Utilisateurs</h1>
|
||
<button id="add-user-btn" class="btn btn-primary">+ Nouvel utilisateur</button>
|
||
</div>
|
||
<div class="card">
|
||
<div class="filter-row">
|
||
<label>Société :
|
||
<select id="users-filter-company"><option value="">Toutes</option></select>
|
||
</label>
|
||
</div>
|
||
<div class="table-scroll">
|
||
<table class="data-table">
|
||
<thead><tr><th>Nom</th><th>E-mail</th><th>Rôle</th><th>Société</th><th>Statut</th><th></th></tr></thead>
|
||
<tbody id="users-tbody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PLANNINGS VIEW (admin browses any cadre calendar) -->
|
||
<section id="view-plannings" class="view" hidden>
|
||
<div class="view-header"><h1>Plannings</h1></div>
|
||
<div class="card selector-card">
|
||
<label>Société :
|
||
<select id="plannings-company-select"></select>
|
||
</label>
|
||
<label>Cadre :
|
||
<select id="plannings-cadre-select"></select>
|
||
</label>
|
||
<button id="plannings-view-btn" class="btn btn-primary">Afficher le planning</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- VALIDATION & EXPORT VIEW (admin) -->
|
||
<section id="view-validation" class="view" hidden>
|
||
<div class="view-header"><h1>Validation & export mensuel</h1></div>
|
||
<div class="card selector-card">
|
||
<label>Société :
|
||
<select id="validation-company-select"></select>
|
||
</label>
|
||
<label>Mois :
|
||
<select id="validation-month-select"></select>
|
||
</label>
|
||
<label>Année :
|
||
<select id="validation-year-select"></select>
|
||
</label>
|
||
<button id="validation-load-btn" class="btn btn-primary">Afficher</button>
|
||
</div>
|
||
|
||
<div id="validation-summary-card" class="card" hidden>
|
||
<div class="validation-summary-header">
|
||
<div>
|
||
<h2 id="validation-company-title"></h2>
|
||
<p id="validation-status-text" class="muted"></p>
|
||
</div>
|
||
<div class="validation-summary-actions">
|
||
<button id="validate-company-btn" class="btn btn-primary">Valider la société</button>
|
||
<button id="reopen-company-btn" class="btn btn-outline">Réouvrir</button>
|
||
</div>
|
||
</div>
|
||
<div class="table-scroll">
|
||
<table class="data-table">
|
||
<thead><tr><th>Cadre</th><th>Statut</th><th>Validé le</th><th></th></tr></thead>
|
||
<tbody id="validation-cadres-tbody"></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="export-row">
|
||
<span>Export :</span>
|
||
<button id="export-pdf-btn" class="btn btn-outline">Télécharger PDF</button>
|
||
<button id="export-excel-btn" class="btn btn-outline">Télécharger Excel</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<!-- STATUS POPOVER (day half-cell picker) -->
|
||
<div id="status-popover" class="popover" hidden>
|
||
<div class="popover-title" id="popover-title"></div>
|
||
<button class="popover-option" data-status="present"><i class="dot dot-present"></i>Présent</button>
|
||
<button class="popover-option" data-status="absent"><i class="dot dot-absent"></i>Absent</button>
|
||
<button class="popover-option" data-status="conge"><i class="dot dot-conge"></i>Congé</button>
|
||
<button class="popover-option" data-status="rtt"><i class="dot dot-rtt"></i>RTT</button>
|
||
<button class="popover-option popover-clear" data-status="">Effacer</button>
|
||
</div>
|
||
|
||
<!-- GENERIC MODAL -->
|
||
<div id="modal-backdrop" class="modal-backdrop" hidden>
|
||
<div class="modal" id="modal-box"></div>
|
||
</div>
|
||
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|