Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Expression Émotionnelle — Explorateur de corpus</title> | |
| <meta name="description" content="Interface d'exploration des annotations émotionnelles Glozz et CyberAggAdo" /> | |
| <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body class="show-arrows"> | |
| <!-- ─── MAIN LAYOUT ─── --> | |
| <div id="app-layout"> | |
| <!-- ─── SIDEBAR FILTERS ─── --> | |
| <aside id="sidebar" class="collapsed"> | |
| <div class="sidebar-header"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg> | |
| <span>Filtres</span> | |
| <button id="btn-close-sidebar" class="btn-ghost" title="Fermer les filtres">✕</button> | |
| </div> | |
| <!-- Search --> | |
| <div class="filter-section"> | |
| <label class="filter-label" for="search-input">Recherche textuelle</label> | |
| <input type="search" id="search-input" placeholder="Mot dans le texte…" autocomplete="off" /> | |
| </div> | |
| <!-- Corpus --> | |
| <div class="filter-section" id="filter-corpus"> | |
| <label class="filter-label">Corpus</label> | |
| <div class="checkbox-group" id="corpus-checks"></div> | |
| </div> | |
| <!-- Type --> | |
| <div class="filter-section" id="filter-type"> | |
| <label class="filter-label">Type d'unité</label> | |
| <div class="checkbox-group" id="type-checks"></div> | |
| </div> | |
| <!-- Emotion --> | |
| <div class="filter-section" id="filter-emotion"> | |
| <label class="filter-label">Catégorie émotionnelle</label> | |
| <div class="checkbox-group scrollable" id="emotion-checks"></div> | |
| </div> | |
| <!-- Mode --> | |
| <div class="filter-section" id="filter-mode"> | |
| <label class="filter-label">Mode</label> | |
| <div class="checkbox-group" id="mode-checks"></div> | |
| </div> | |
| <!-- Nature linguistique --> | |
| <div class="filter-section" id="filter-nature"> | |
| <label class="filter-label">Nature linguistique</label> | |
| <div class="checkbox-group scrollable" id="nature-checks"></div> | |
| </div> | |
| <!-- Discontinuous --> | |
| <div class="filter-section"> | |
| <label class="filter-label">Discontinuité</label> | |
| <div class="checkbox-group" id="discontinuous-checks"> | |
| <label class="checkbox-item"><input type="checkbox" value="true" checked /><span>Discontinues</span></label> | |
| <label class="checkbox-item"><input type="checkbox" value="false" checked /><span>Continues</span></label> | |
| </div> | |
| </div> | |
| <!-- Display options --> | |
| <div class="filter-section"> | |
| <label class="filter-label">Affichage</label> | |
| <label class="checkbox-item"> | |
| <input type="checkbox" id="toggle-decl" checked /> | |
| <span>Déclencheurs</span> | |
| </label> | |
| <label class="checkbox-item"> | |
| <input type="checkbox" id="toggle-arrows" checked /> | |
| <span>Flèches émotionnelles</span> | |
| </label> | |
| </div> | |
| <!-- Reset --> | |
| <div class="filter-section" style="margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--border-subtle)"> | |
| <button id="btn-reset" class="btn-ghost" style="width:100%;text-align:center">Réinitialiser les filtres</button> | |
| </div> | |
| </aside> | |
| <!-- ─── MAIN CONTENT ─── --> | |
| <main id="main-content"> | |
| <h1 id="main-title">Visualisation des SitEmo</h1> | |
| <p id="main-subtitle">Schéma d'annotation utilisé : Etienne (<a href="https://hal.science/hal-03263194v1/document" target="_blank" rel="noopener">2021</a>)</p> | |
| <!-- Sidebar open button (visible when sidebar collapsed) --> | |
| <button id="btn-open-sidebar" class="sidebar-open-btn" title="Ouvrir les filtres"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg> | |
| Filtres | |
| </button> | |
| <!-- Distribution charts (collapsible) --> | |
| <div id="charts-toggle" class="charts-toggle-btn" role="button" tabindex="0"> | |
| <svg class="charts-toggle-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg> | |
| Afficher la distribution des catégories émotionnelles et des modes | |
| </div> | |
| <div id="charts-row" class="charts-collapsed"> | |
| <div class="chart-card" id="chart-emotion"> | |
| <h3>Distribution par émotion</h3> | |
| <div class="chart-bars" id="bars-emotion"></div> | |
| </div> | |
| <div class="chart-card" id="chart-mode"> | |
| <h3>Distribution par mode</h3> | |
| <div class="chart-bars" id="bars-mode"></div> | |
| </div> | |
| </div> | |
| <!-- Legend --> | |
| <div id="legend-bar"> | |
| <span class="legend-item"><span class="legend-swatch" style="background:rgba(40,80,160,.30)"></span> Désignée</span> | |
| <span class="legend-item"><span class="legend-swatch" style="background:rgba(0,130,100,.30)"></span> Comportementale</span> | |
| <span class="legend-item"><span class="legend-swatch" style="background:rgba(180,100,20,.30)"></span> Suggérée</span> | |
| <span class="legend-item"><span class="legend-swatch" style="background:rgba(120,50,140,.30)"></span> Montrée</span> | |
| <span class="legend-item"><span class="legend-swatch" style="background:rgba(120,120,120,.30)"></span> Autre</span> | |
| <span class="legend-item legend-decl"><span class="legend-swatch-text">abc</span> Déclencheur</span> | |
| </div> | |
| <!-- Table --> | |
| <div id="table-container"> | |
| <div id="table-toolbar"> | |
| <span id="table-count">–</span> | |
| <div class="table-pagination" id="pagination"></div> | |
| </div> | |
| <div id="table-scroll"> | |
| <table id="data-table"> | |
| <thead> | |
| <tr> | |
| <th class="col-text">Texte annoté</th> | |
| <th class="col-tags">Émotions</th> | |
| <th class="col-tags">Modes</th> | |
| <th class="col-tags">Nature ling.</th> | |
| </tr> | |
| </thead> | |
| <tbody id="table-body"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- ─── DETAIL MODAL ─── --> | |
| <div id="modal-backdrop" class="hidden" role="dialog" aria-modal="true"> | |
| <div id="modal-card"> | |
| <button id="modal-close" class="btn-ghost" aria-label="Fermer">✕</button> | |
| <h2 id="modal-title">Détail du message</h2> | |
| <div id="modal-body"></div> | |
| </div> | |
| </div> | |
| <!-- LOADING --> | |
| <div id="loading-overlay"> | |
| <div class="loader-spinner"></div> | |
| <p>Chargement des données…</p> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |