diff --git a/ConfluentTranslator/public/index.html b/ConfluentTranslator/public/index.html index 74af28c..60c2d8c 100644 --- a/ConfluentTranslator/public/index.html +++ b/ConfluentTranslator/public/index.html @@ -81,14 +81,84 @@ .error { color: #ff4a4a; } .row { display: flex; gap: 15px; } .row .form-group { flex: 1; } + + /* Tabs */ + .tabs { + display: flex; + gap: 10px; + margin-bottom: 20px; + border-bottom: 2px solid #3a3a3a; + } + .tab { + background: transparent; + padding: 10px 20px; + border: none; + color: #b0b0b0; + cursor: pointer; + font-weight: 600; + border-bottom: 3px solid transparent; + transition: all 0.2s; + } + .tab:hover { color: #e0e0e0; } + .tab.active { + color: #4a9eff; + border-bottom-color: #4a9eff; + } + .tab-content { display: none; } + .tab-content.active { display: block; } + + /* Lexique */ + .lexique-results { + max-height: 400px; + overflow-y: auto; + margin-top: 15px; + } + .lexique-item { + background: #1a1a1a; + padding: 10px; + margin-bottom: 8px; + border-radius: 4px; + border-left: 3px solid #4a9eff; + display: flex; + justify-content: space-between; + align-items: center; + } + .lexique-fr { + color: #e0e0e0; + font-weight: 500; + } + .lexique-cf { + color: #4a9eff; + font-family: monospace; + font-size: 1.1em; + } + .lexique-count { + color: #b0b0b0; + font-size: 0.9em; + margin-top: 10px; + } + .no-results { + color: #b0b0b0; + text-align: center; + padding: 20px; + font-style: italic; + }