Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Correspondance IFS v8 - BRC v9</title> | |
| <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@300;400;500;600&family=Outfit:wght@400;600;700&display=swap" | |
| rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <header class="app-header"> | |
| <div class="header-left"> | |
| <div class="logo-section"> | |
| <span class="logo-ifs">IFS</span> | |
| <span class="arrow">↔</span> | |
| <span class="logo-brc">BRCGS</span> | |
| </div> | |
| <div class="header-text"> | |
| <h1 id="mainTitle">Correspondance IFS v8 ↔ BRC v9</h1> | |
| <p id="subTitle">Outil d'analyse comparative des référentiels de sécurité des aliments</p> | |
| </div> | |
| </div> | |
| <div class="header-right"> | |
| <!-- Guide toggle button --> | |
| <div class="guide-wrapper"> | |
| <button type="button" class="header-btn" id="guideToggle" title="Afficher le guide"> | |
| <span id="guideBtnLabel">? Guide</span> | |
| </button> | |
| <!-- Guide dropdown panel --> | |
| <div class="guide-panel" id="guidePanel" aria-hidden="true"> | |
| <div class="guide-grid"> | |
| <div class="guide-item"> | |
| <span class="guide-icon">👆</span> | |
| <span class="guide-text"> | |
| <strong id="help1Title">Cliquez sur une exigence</strong> | |
| <span id="help1Text">pour voir sa correspondance</span> | |
| </span> | |
| </div> | |
| <div class="guide-item"> | |
| <span class="guide-icon">⚠️</span> | |
| <span class="guide-text"> | |
| <strong id="help2Title">Correspondance approximative</strong> | |
| <span id="help2Text">pas de correspondance directe</span> | |
| </span> | |
| </div> | |
| <div class="guide-item"> | |
| <span class="guide-icon">⛔</span> | |
| <span class="guide-text"> | |
| <strong id="help3Title">Pas de correspondance</strong> | |
| <span id="help3Text">exigence non cartographiée</span> | |
| </span> | |
| </div> | |
| <div class="guide-item"> | |
| <span class="guide-icon">🔴</span> | |
| <span class="guide-text"> | |
| <strong>KO</strong> | |
| <span id="help4Text">Exigence éliminatoire</span> | |
| </span> | |
| </div> | |
| <div class="guide-item"> | |
| <span class="guide-icon">⊕</span> | |
| <span class="guide-text"> | |
| <strong id="help5Title">Mode comparaison</strong> | |
| <span id="help5Text">multi-sélection IFS</span> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Language toggle --> | |
| <button type="button" class="header-btn lang-btn" id="langToggle" title="Changer de langue / Switch language"> | |
| <span class="lang-fr">FR</span> | |
| <span class="lang-sep">|</span> | |
| <span class="lang-en">EN</span> | |
| </button> | |
| <input type="text" id="searchInput" class="search-input" placeholder="Rechercher..."> | |
| </div> | |
| </header> | |
| <!-- Mobile tab switcher (visible only on small screens) --> | |
| <div class="mobile-tabs" id="mobileTabs"> | |
| <button type="button" class="mobile-tab active" id="tabIfs">IFS Food v8</button> | |
| <button type="button" class="mobile-tab" id="tabBrc">BRCGS Food v9</button> | |
| </div> | |
| <main class="main-container"> | |
| <!-- IFS Column --> | |
| <section class="column ifs-column" id="ifsColumn"> | |
| <div class="column-header"> | |
| <h2>IFS Food v8</h2> | |
| <div class="header-actions"> | |
| <span class="badge ifs-badge">IFS</span> | |
| <button type="button" class="nav-btn compare-btn" id="compareMode" title="Mode comparaison multi-sélection">⊕</button> | |
| <button type="button" class="nav-btn" id="expandIfs" title="Tout déplier">⬆</button> | |
| <button type="button" class="nav-btn" id="collapseIfs" title="Tout réduire">⬇</button> | |
| </div> | |
| </div> | |
| <!-- Comparison status bar --> | |
| <div class="compare-bar" id="compareBar"> | |
| <span id="compareCount">0 sélectionné(s)</span> | |
| <button type="button" class="compare-clear-btn" id="clearCompare">✕ Effacer la sélection</button> | |
| </div> | |
| <div id="ifsList" class="scrollable-list"></div> | |
| </section> | |
| <!-- BRC Column --> | |
| <section class="column brc-column" id="brcColumn"> | |
| <div class="column-header"> | |
| <h2>BRCGS Food v9</h2> | |
| <div class="header-actions"> | |
| <span class="badge brc-badge">BRCGS</span> | |
| <button type="button" class="nav-btn" id="expandBrc" title="Tout déplier">⬆</button> | |
| <button type="button" class="nav-btn" id="collapseBrc" title="Tout réduire">⬇</button> | |
| </div> | |
| </div> | |
| <div id="brcList" class="scrollable-list"></div> | |
| </section> | |
| </main> | |
| <script src="data.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |