diff --git a/lagebild/lagebild.css b/lagebild/lagebild.css index e086559..d86ba49 100644 --- a/lagebild/lagebild.css +++ b/lagebild/lagebild.css @@ -938,36 +938,61 @@ a.source-detail-article-title:hover { 100% { transform: scale(3.5); opacity: 0; } } -/* ---------- Fact Check Cards ---------- */ +/* ---------- Fact Checks (Filter + Accordion) ---------- */ .fc-stats { + justify-content: center; display: flex; - gap: 12px; - margin-bottom: 24px; + gap: 10px; + margin-bottom: 20px; flex-wrap: wrap; } .fc-stat { background: var(--lb-bg-secondary); border-radius: var(--radius-sm, 4px); - padding: 14px 20px; + padding: 12px 18px; text-align: center; - min-width: 80px; + min-width: 75px; border: 1px solid var(--lb-border); + cursor: pointer; + transition: all 0.2s; + font-family: inherit; +} +.fc-stat:hover { + border-color: rgba(200, 168, 81, 0.4); + box-shadow: 0 0 16px var(--lb-glow-soft); +} +.fc-stat.active { + border-color: var(--lb-accent); + box-shadow: 0 0 20px var(--lb-glow-soft); + background: rgba(200, 168, 81, 0.06); } .fc-stat.confirmed { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); } +.fc-stat.confirmed.active { + border-color: var(--lb-success); + box-shadow: 0 0 16px rgba(16, 185, 129, 0.2); +} .fc-stat.unconfirmed { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.2); } +.fc-stat.unconfirmed.active { + border-color: var(--lb-warning); + box-shadow: 0 0 16px rgba(245, 158, 11, 0.2); +} .fc-stat.contradicted { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); } +.fc-stat.contradicted.active { + border-color: var(--lb-error); + box-shadow: 0 0 16px rgba(239, 68, 68, 0.2); +} .fc-stat-num { display: block; - font-size: 1.6rem; + font-size: 1.5rem; font-weight: 800; color: var(--lb-text); } @@ -975,109 +1000,166 @@ a.source-detail-article-title:hover { .fc-stat.unconfirmed .fc-stat-num { color: var(--lb-warning); } .fc-stat.contradicted .fc-stat-num { color: var(--lb-error); } .fc-stat-label { - font-size: 0.75rem; + font-size: 0.72rem; color: var(--lb-text-sec); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } -.factcheck-card { - background: var(--lb-bg-secondary); - border-radius: var(--radius-sm, 4px); - padding: 20px; - margin-bottom: 12px; - border-left: 4px solid var(--lb-border); - transition: transform 0.2s, box-shadow 0.2s; -} -.factcheck-card:hover { - transform: translateY(-1px); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); -} -.factcheck-card.highlight { - background: rgba(200, 168, 81, 0.06); - border-left-color: var(--lb-accent); - box-shadow: 0 2px 12px rgba(200, 168, 81, 0.1); -} -.factcheck-card[data-status="confirmed"], -.factcheck-card[data-status="established"] { - border-left-color: var(--lb-success); -} -.factcheck-card[data-status="unconfirmed"], -.factcheck-card[data-status="unverified"] { - border-left-color: var(--lb-warning); -} -.factcheck-card[data-status="contradicted"], -.factcheck-card[data-status="disputed"] { - border-left-color: var(--lb-error); -} -.factcheck-card[data-status="developing"] { - border-left-color: #3b82f6; -} -.factcheck-card[data-status="false"] { - border-left-color: #dc2626; -} - -.factcheck-header { +/* Factcheck Icon (from real Monitor) */ +.fc-icon { + flex-shrink: 0; + width: 22px; + height: 22px; + border-radius: 4px; display: flex; align-items: center; - justify-content: space-between; - margin-bottom: 8px; -} -.factcheck-sources { - font-size: 0.8rem; - color: var(--lb-text-sec); -} -.factcheck-claim { - font-size: 0.95rem; - color: var(--lb-text); - margin: 0 0 4px; - line-height: 1.5; -} - -/* Status Badges */ -.status-badge { - display: inline-block; - padding: 3px 10px; - border-radius: var(--radius-sm, 4px); - font-size: 0.72rem; + justify-content: center; + font-size: 11px; font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.5px; } -.status-badge.confirmed, .status-badge.established { +.fc-icon.small { + width: 18px; + height: 18px; + font-size: 10px; +} +.fc-icon.confirmed, .fc-icon.established { background: rgba(16, 185, 129, 0.15); color: #34d399; } -.status-badge.unconfirmed, .status-badge.unverified { +.fc-icon.unconfirmed, .fc-icon.unverified { background: rgba(245, 158, 11, 0.15); color: #fbbf24; } -.status-badge.contradicted, .status-badge.disputed { +.fc-icon.contradicted, .fc-icon.disputed, .fc-icon.false { background: rgba(239, 68, 68, 0.15); color: #f87171; } -.status-badge.developing { +.fc-icon.developing { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } -.status-badge.false { - background: rgba(220, 38, 38, 0.15); - color: #f87171; + +/* Accordion List */ +.fc-list { + border: 1px solid var(--lb-border); + border-radius: 4px; + overflow: hidden; +} +.fc-row { + border-bottom: 1px solid var(--lb-border); +} +.fc-row:last-child { + border-bottom: none; +} +.fc-row-header { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + cursor: pointer; + transition: background 0.15s; +} +.fc-row-header:hover { + background: var(--lb-bg-secondary); +} +.fc-row.open .fc-row-header { + background: var(--lb-bg-secondary); + border-bottom: 1px solid var(--lb-border); +} +.fc-row-claim { + flex: 1; + font-size: 0.88rem; + color: var(--lb-text); + line-height: 1.4; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.fc-row.open .fc-row-claim { + white-space: normal; + text-overflow: unset; +} +.fc-row-sources { + flex-shrink: 0; + font-size: 0.72rem; + color: var(--lb-text-sec); + background: var(--lb-bg-card); + border: 1px solid var(--lb-border); + padding: 2px 7px; + border-radius: 3px; + font-weight: 600; +} +.fc-row-history-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--lb-accent); + flex-shrink: 0; + box-shadow: 0 0 6px var(--lb-glow); +} +.fc-row-chevron { + flex-shrink: 0; + color: var(--lb-text-sec); + font-size: 0.8rem; + transition: transform 0.2s; + width: 16px; + text-align: center; +} +.fc-row.open .fc-row-chevron { + transform: rotate(90deg); + color: var(--lb-accent); } -/* Status Progression */ -.status-progression { +/* Expandable Detail */ +.fc-row-detail { + display: none; + background: rgba(0, 0, 0, 0.15); +} +.fc-row.open .fc-row-detail { + display: block; + animation: sourceDetailSlideIn 0.25s ease-out; +} +.fc-row-detail-inner { + padding: 14px 14px 14px 46px; +} +.fc-detail-status { + font-size: 0.85rem; + color: var(--lb-text); + margin-bottom: 8px; + display: flex; + align-items: center; + gap: 6px; +} +.fc-detail-evidence { + font-size: 0.82rem; + color: var(--lb-text-sec); + line-height: 1.6; + padding: 10px 14px; + background: rgba(0, 0, 0, 0.2); + border-radius: 4px; + border: 1px solid var(--lb-border); + margin-bottom: 8px; +} +.fc-detail-evidence strong { + color: var(--lb-text); +} +.fc-detail-evidence a { + color: var(--lb-accent) !important; + word-break: break-all; +} +.fc-detail-progression { display: flex; align-items: center; gap: 6px; - margin-top: 10px; - padding-top: 10px; - border-top: 1px solid var(--lb-border); font-size: 0.78rem; flex-wrap: wrap; + padding-top: 8px; + border-top: 1px solid var(--lb-border); } -.progression-label { +.fc-detail-prog-label { color: var(--lb-text-sec); font-weight: 500; margin-right: 4px; @@ -1096,25 +1178,6 @@ a.source-detail-article-title:hover { font-size: 0.7rem; } -/* Evidence block */ -.factcheck-evidence { - font-size: 0.82rem; - color: var(--lb-text-sec); - margin: 10px 0 0; - line-height: 1.6; - padding: 10px 14px; - background: rgba(0, 0, 0, 0.2); - border-radius: var(--radius-sm, 4px); - border: 1px solid var(--lb-border); -} -.factcheck-evidence strong { - color: var(--lb-text); -} -.factcheck-evidence a { - color: var(--lb-accent) !important; - word-break: break-all; -} - /* ---------- Floating CTA Pill ---------- */ .floating-cta { position: fixed; @@ -1343,10 +1406,15 @@ a.source-detail-article-title:hover { .lagebild-main { padding: 1rem 12px 3rem; } - .factcheck-header { - flex-direction: column; - align-items: flex-start; - gap: 6px; + .fc-row-claim { + font-size: 0.82rem; + } + .fc-row-detail-inner { + padding: 12px 12px 12px 12px; + } + .fc-stat { + padding: 10px 14px; + min-width: 65px; } .sources-grid { grid-template-columns: repeat(2, 1fr); @@ -1375,6 +1443,7 @@ a.source-detail-article-title:hover { height: 350px !important; } .fc-stats { + justify-content: center; gap: 8px; } .fc-stat { diff --git a/lagebild/lagebild.js b/lagebild/lagebild.js index 8c04d38..bd7f66a 100644 --- a/lagebild/lagebild.js +++ b/lagebild/lagebild.js @@ -695,27 +695,57 @@ var Lagebild = { }, /* ===== TAB: FAKTENCHECKS ===== */ + /* ===== Factcheck Icons (from real Monitor) ===== */ + fcIcons: { + confirmed: '✓', + unconfirmed: '?', + contradicted: '✗', + developing: '↻', + established: '✓', + disputed: '⚠', + 'false': '✗', + unverified: '?' + }, + + fcLabels: { + confirmed: 'Bestätigt', + unconfirmed: 'Unbestätigt', + contradicted: 'Widerlegt', + developing: 'Unklar', + established: 'Gesichert', + disputed: 'Umstritten', + 'false': 'Falsch', + unverified: 'Nicht verifiziert' + }, + renderFactChecksTab: function() { var checks = this.currentView.fact_checks || []; if (!checks.length) { - document.getElementById('factchecks-content').innerHTML = '
Keine Faktenchecks verf\u00fcgbar.
'; + document.getElementById('factchecks-content').innerHTML = 'Keine Faktenchecks verfügbar.
'; return; } + // Count stats var stats = { confirmed: 0, unconfirmed: 0, contradicted: 0, developing: 0, established: 0, disputed: 0 }; for (var k = 0; k < checks.length; k++) { var st = checks[k].status || 'developing'; if (stats[st] !== undefined) stats[st]++; } + var confirmedTotal = stats.confirmed + stats.established; + var openTotal = stats.unconfirmed + stats.developing; + var contradictedTotal = stats.contradicted + stats.disputed; + + // Stat cards (clickable filters) var h = '' + this.esc(this.fixUmlauts(fc.claim || '')) + '
'; + + // Expandable detail + h += '