mirror of
https://github.com/nfonteyne/octane-website.git
synced 2026-09-03 23:24:48 +02:00
111 lines
4.8 KiB
HTML
111 lines
4.8 KiB
HTML
<!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">
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
</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">
|
|
<button type="button" class="secondary nav-toggle calendar-filters-toggle" id="btn-filters-toggle">Filtres</button>
|
|
<button type="button" class="secondary" id="btn-my-calendars">Mes calendriers</button>
|
|
<button type="button" id="btn-refresh">Actualiser les disponibilités</button>
|
|
</div>
|
|
</div>
|
|
<div id="error"></div>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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">×</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">
|
|
<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">×</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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
<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">×</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>
|
|
<p class="note"><a href="/calendar-ics-help.html">Comment trouver mon lien ICS ?</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|