octane-website/public/calendar.html

117 lines
5.1 KiB
HTML
Raw Normal View History

2026-07-08 15:53:25 +02:00
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Disponibilités — Octane</title>
<script src="/js/theme-init.js"></script>
<link rel="stylesheet" href="/css/style.css">
2026-07-10 11:35:18 +02:00
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
2026-07-08 15:53:25 +02:00
</head>
<body>
<header class="app-header">
<nav id="main-nav"></nav>
</header>
<main>
<div class="section-header">
<div>
<h1 style="margin:0">Disponibilités</h1>
<p class="page-subtitle" id="last-checked" style="margin:0.25rem 0 0">Chargement…</p>
</div>
<div class="calendar-header-actions">
2026-07-08 15:53:25 +02:00
<button type="button" class="secondary nav-toggle calendar-filters-toggle" id="btn-filters-toggle">Filtres</button>
2026-07-09 18:26:25 +02:00
<button type="button" class="secondary" id="btn-my-calendars">Mes calendriers</button>
2026-07-08 15:53:25 +02:00
<button type="button" id="btn-refresh">Actualiser les disponibilités</button>
</div>
</div>
<div id="error"></div>
2026-07-09 18:26:25 +02:00
<div class="panel my-feed-banner" id="my-feed-banner" style="display:none">
<p class="empty">Vous n'avez pas encore ajouté de calendrier — ajoutez-en un pour apparaître dans les disponibilités.</p>
<button type="button" id="btn-my-feed-banner-add">Ajouter mon calendrier</button>
</div>
2026-07-08 15:53:25 +02:00
<div id="rehearsals-section" style="display:none">
<h2 id="rehearsals-title" style="margin:1.5rem 0 0.5rem">Répétitions proposées</h2>
<div class="panel" id="rehearsals-list"></div>
<details class="rehearsal-voted-section" id="rehearsals-voted-section" style="display:none">
<summary id="rehearsals-voted-summary">Répétitions traitées</summary>
<div class="panel" id="rehearsals-voted-list"></div>
</details>
</div>
2026-07-08 15:53:25 +02:00
<div class="calendar-layout">
<div class="calendar-filters-backdrop" id="filters-backdrop"></div>
<aside class="calendar-filters panel" id="filters-panel">
<div class="section-header" style="margin:0 0 0.5rem">
<h3 style="margin:0">Filtres</h3>
<button type="button" class="secondary icon-btn calendar-filters-close" id="btn-filters-close">&times;</button>
</div>
<p class="note" style="margin:0 0 0.5rem">Personnes incluses</p>
<div id="people-list" class="calendar-people-list"></div>
</aside>
<div class="calendar-main">
2026-07-23 11:40:59 +02:00
<div class="calendar-month-nav">
<button type="button" class="secondary icon-btn" id="btn-month-prev" aria-label="Mois précédent">&lsaquo;</button>
<span class="calendar-month-label" id="month-label"></span>
<button type="button" class="secondary icon-btn" id="btn-month-next" aria-label="Mois suivant">&rsaquo;</button>
</div>
2026-07-08 15:53:25 +02:00
<div class="calendar-header-row">
<span>Lun</span><span>Mar</span><span>Mer</span><span>Jeu</span><span>Ven</span><span>Sam</span><span>Dim</span>
</div>
<div class="calendar-grid" id="calendar-grid"></div>
<div class="calendar-legend" id="legend"></div>
</div>
</div>
</main>
<div id="toast" class="toast hidden"></div>
<div id="modal-overlay" class="modal-overlay hidden">
<div class="modal card">
<button type="button" class="icon-btn secondary modal-close" id="modal-close">&times;</button>
<div class="modal-date card-title" id="modal-date"></div>
<div id="modal-concert-section"></div>
<div id="modal-rehearsal-section"></div>
<div id="modal-availability-section">
<div class="modal-time note" id="modal-time"></div>
<div class="modal-section">
<div class="modal-section-title available">Disponibles</div>
<div class="modal-people" id="modal-available"></div>
</div>
<div class="modal-section">
<div class="modal-section-title busy">Indisponibles</div>
<div class="modal-people" id="modal-busy"></div>
</div>
2026-07-08 15:53:25 +02:00
</div>
<button type="button" class="secondary" id="modal-propose-rehearsal-btn" style="margin-top:1rem; width:100%; white-space:normal; line-height:1.3;">
Proposer cette date pour la prochaine répétition
</button>
2026-07-08 15:53:25 +02:00
</div>
</div>
2026-07-09 18:26:25 +02:00
<div id="my-calendars-modal-overlay" class="modal-overlay hidden">
<div class="modal card modal-wide">
<button type="button" class="icon-btn secondary modal-close" id="my-calendars-modal-close">&times;</button>
<h2 style="margin-top:0">Mes calendriers</h2>
<p class="note">
Ajoutez le lien ICS (iCal) d'un ou plusieurs de vos calendriers pour apparaître dans les disponibilités.
L'application ne conserve jamais leur contenu — seul un statut disponible/occupé par créneau est déduit.
</p>
<div id="my-calendars-list"><p class="empty">Chargement…</p></div>
<form id="my-calendars-add-form" class="inline-form">
<input name="label" placeholder="Libellé (optionnel)">
<input name="icsUrl" type="url" placeholder="URL du calendrier (.ics)" required>
<button type="submit" class="secondary icon-btn">+ Ajouter</button>
</form>
2026-07-10 10:07:12 +02:00
<p class="note"><a href="/calendar-ics-help.html">Comment trouver mon lien ICS ?</a></p>
2026-07-09 18:26:25 +02:00
</div>
</div>
2026-07-08 15:53:25 +02:00
<script src="/js/api.js"></script>
<script src="/js/render.js"></script>
<script src="/js/nav.js"></script>
<script src="/js/calendar.js"></script>
</body>
</html>