Files
boc/design/landvex-contradiction-demo.html
T
Bernt 1a12fb870b dev-api: add developer portal, OpenAPI spec, and Flatenbadet case study
- New /developers/ page with API docs, SDKs, pricing, use cases
- OpenAPI 3.0 spec for Orders, Missions, Photos, Analytics
- Case study: Glasskiosken i Flatenbadet — complete ROI analysis
- Updated /order/ with recurring missions and frequency dropdown
2026-07-14 15:27:33 +00:00

430 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LandveX — Contradiction Engine Demo</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
--bg:#F8F7F5;--card:#FFFFFF;--border:#EBEBEB;
--text:#111111;--text-2:#666666;--text-3:#999999;
--accent:#1a1a1a;--amber:#C8763A;--green:#16A34A;--red:#DC2626;--blue:#2563EB;
--shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.04);
--r:10px;--font:'IBM Plex Sans',-apple-system,Arial,sans-serif;
--mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-family:var(--font);font-size:14px;background:var(--bg);color:var(--text)}
.topbar{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,.06);display:flex;align-items:center;gap:12px;padding:0 28px;height:60px}
.brand-logo{width:32px;height:32px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff}
.brand-name{font-size:1rem;font-weight:700}
.brand-tag{font-size:.75rem;color:var(--text-2);margin-left:auto}
.container{max-width:1200px;margin:0 auto;padding:24px 28px}
.hero{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:32px 36px;margin-bottom:24px;box-shadow:var(--shadow)}
.hero h1{font-size:1.6rem;font-weight:700;margin-bottom:8px}
.hero p{color:var(--text-2);font-size:.92rem;line-height:1.6;max-width:700px}
.hero .principle{display:inline-block;background:#111;color:#fff;padding:4px 12px;border-radius:6px;font-size:.78rem;font-weight:600;margin-top:12px}
.scoreboard{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.score{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow);text-align:center}
.score-val{font-size:2rem;font-weight:700;line-height:1}
.score-val.red{color:var(--red)}.score-val.amber{color:var(--amber)}.score-val.green{color:var(--green)}
.score-lbl{font-size:.75rem;color:var(--text-3);margin-top:6px;text-transform:uppercase;letter-spacing:.05em}
.filter-bar{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.filter-btn{background:#fff;border:1px solid var(--border);border-radius:7px;padding:7px 16px;font-size:.82rem;font-weight:500;cursor:pointer;font-family:inherit;color:var(--text-2)}
.filter-btn:hover{border-color:var(--text-3);color:var(--text)}
.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.contradiction{background:var(--card);border:1px solid var(--border);border-radius:var(--r);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s}
.contradiction:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.08)}
.contra-header{display:flex;align-items:flex-start;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border)}
.contra-severity{width:4px;align-self:stretch;border-radius:2px;flex-shrink:0}
.sev-critical{background:var(--red)}.sev-high{background:var(--amber)}.sev-medium{background:#CA8A04}
.contra-meta{flex:1;min-width:0}
.contra-id{font-family:var(--mono);font-size:.72rem;color:var(--text-3);margin-bottom:4px}
.contra-title{font-size:1.05rem;font-weight:700;margin-bottom:4px;line-height:1.3}
.contra-location{font-size:.8rem;color:var(--text-2);display:flex;align-items:center;gap:6px}
.contra-score{background:var(--bg);border-radius:8px;padding:10px 16px;text-align:center;flex-shrink:0;min-width:90px}
.contra-score-val{font-size:1.4rem;font-weight:700}
.contra-score-lbl{font-size:.68rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.contra-body{padding:20px 24px}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.side{background:#F5F4F2;border-radius:8px;padding:16px}
.side-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.side-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px}
.side.official .side-icon{background:#E8E8E8}
.side.observed .side-icon{background:var(--accent);color:#fff}
.side-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.side.official .side-title{color:var(--text-2)}
.side.observed .side-title{color:var(--accent)}
.side-content{font-size:.85rem;line-height:1.6;color:var(--text-2)}
.side-content strong{color:var(--text)}
.side-data{font-family:var(--mono);font-size:.78rem;background:#fff;padding:8px 12px;border-radius:6px;margin-top:8px;color:var(--text-2)}
.vs{display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}
.analysis{background:#FEF3C7;border:1px solid #FDE68A;border-radius:8px;padding:14px 18px;margin-bottom:16px}
.analysis-title{font-size:.78rem;font-weight:700;color:#92400E;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.analysis-text{font-size:.85rem;color:#78350F;line-height:1.6}
.evidence{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.evidence-item{background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:.78rem;display:flex;align-items:center;gap:8px}
.evidence-item img{width:48px;height:48px;border-radius:6px;object-fit:cover}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.action-btn{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit}
.action-btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border)}
.action-btn:hover{opacity:.9}
.timeline{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow)}
.timeline-title{font-size:.9rem;font-weight:700;margin-bottom:16px}
.timeline-row{display:flex;gap:12px;margin-bottom:12px;align-items:flex-start}
.timeline-dot{width:10px;height:10px;border-radius:50%;margin-top:4px;flex-shrink:0}
.timeline-dot.red{background:var(--red)}.timeline-dot.amber{background:var(--amber)}.timeline-dot.green{background:var(--green)}
.timeline-date{font-family:var(--mono);font-size:.72rem;color:var(--text-3);min-width:80px}
.timeline-text{font-size:.82rem;color:var(--text-2);line-height:1.5}
.footer{margin-top:32px;padding:20px 0;border-top:1px solid var(--border);text-align:center;color:var(--text-3);font-size:.78rem}
@media(max-width:768px){
.scoreboard{grid-template-columns:repeat(2,1fr)}
.comparison{grid-template-columns:1fr}
.vs{display:none}
.contra-header{flex-direction:column}
.contra-score{align-self:flex-start}
}
</style>
</head>
<body>
<div class="topbar">
<div class="brand-logo">LV</div>
<div class="brand-name">LandveX</div>
<div class="brand-tag">Contradiction Engine — Demo</div>
</div>
<div class="container">
<div class="hero">
<h1>Vi letar inte efter bekräftelse. Vi letar efter motsägelse.</h1>
<p>LandveX jämför officiell statistik och rapporter med verifierade observationer från quixzoom-nätverket. När data säger emot sig själv — där finns insikten.</p>
<span class="principle">"We don't look for confirmation. We look for contradiction."</span>
</div>
<div class="scoreboard">
<div class="score">
<div class="score-val red" id="score-contra">4</div>
<div class="score-lbl">Aktiva motsägelser</div>
</div>
<div class="score">
<div class="score-val amber" id="score-high">2</div>
<div class="score-lbl">Hög prioritet</div>
</div>
<div class="score">
<div class="score-val green" id="score-verified">12</div>
<div class="score-lbl">Verifierade obs.</div>
</div>
<div class="score">
<div class="score-val" style="color:var(--blue)" id="score-sources">8</div>
<div class="score-lbl">Datakällor</div>
</div>
</div>
<div class="filter-bar">
<button class="filter-btn active" onclick="filter('all')">Alla</button>
<button class="filter-btn" onclick="filter('critical')">⛔ Kritiska</button>
<button class="filter-btn" onclick="filter('high')">⚠️ Hög prioritet</button>
<button class="filter-btn" onclick="filter('infrastructure')">🏗️ Infrastruktur</button>
<button class="filter-btn" onclick="filter('energy')">⚡ Energi</button>
<button class="filter-btn" onclick="filter('transport')">🚗 Transport</button>
</div>
<!-- CONTRADICTION 1: Elnät -->
<div class="contradiction" data-sev="critical" data-cat="energy infrastructure">
<div class="contra-header">
<div class="contra-severity sev-critical"></div>
<div class="contra-meta">
<div class="contra-id">CONTRA-2026-06-24-001 · Energi · Bangkok, TH</div>
<div class="contra-title">Elnät: Rapporterad driftstid vs observerad överbelastning</div>
<div class="contra-location">📍 13.7563°N, 100.5018°E · Bang Rak District · 47 observationer</div>
</div>
<div class="contra-score">
<div class="contra-score-val" style="color:var(--red)">94%</div>
<div class="contra-score-lbl">Konfidens</div>
</div>
</div>
<div class="contra-body">
<div class="comparison">
<div class="side official">
<div class="side-header">
<div class="side-icon">🏛️</div>
<div class="side-title">Officiell data</div>
</div>
<div class="side-content">
<strong>Provincial Electricity Authority (PEA)</strong> rapporterar <strong>99.7% driftstid</strong> för Bang Rak-distriktet Q1 2026.<br><br>
<strong>PEA årsrapport 2025:</strong> "Nätmodernisering 85% färdig. Inga rapporterade avbrott över 4 timmar."
</div>
<div class="side-data">Driftstid: 99.7%<br>Avbrott: 0.3%<br>Senaste uppdatering: 2026-03-31</div>
</div>
<div class="vs">VS</div>
<div class="side observed">
<div class="side-header">
<div class="side-icon">📸</div>
<div class="side-title">quixzoom-observationer</div>
</div>
<div class="side-content">
<strong>47 Zoomers</strong> har fotograferat elstolpar i Bang Rak under majjuni 2026.<br><br>
<strong>Observationer:</strong> 38 av 47 stolpar (81%) visar <strong>extrem överbelastning</strong> — improviserade kopplingar, överhettade transformatorer, provisoriska kablar.
</div>
<div class="side-data">Överbelastade stolpar: 38/47 (81%)<br>Provisoriska kopplingar: 29<br>Riskklassning: 🔴 Kritisk</div>
</div>
</div>
<div class="analysis">
<div class="analysis-title">🎯 Kontradiktionsanalys</div>
<div class="analysis-text">
Officiell statistik rapporterar nära perfekt driftstid, men visuell inspektion av 81% av stolparna i samma område visar kritisk överbelastning.
<strong>Motsägelse:</strong> "Driftstid" mäter bara strömflöde — inte säkerhet eller kapacitetsmarginal. Nätet kan vara "uppe" men på gränsen till haveri.
<strong>Risk:</strong> Regnperiod (juliokt) ökar sannolikheten för eldsvåda och strömavbrott med 340% enligt historisk data.
</div>
</div>
<div class="evidence">
<div class="evidence-item">📸 Bild 1-12: Överbelastade stolpar</div>
<div class="evidence-item">🌡️ IR-mätning: 127°C på transformator T-2847</div>
<div class="evidence-item">📍 GPS: ±3m noggrannhet</div>
<div class="evidence-item">⏱️ Tidsstämpel: 2026-06-18 14:32 UTC</div>
</div>
<div class="actions">
<button class="action-btn">📤 Dela med PEA</button>
<button class="action-btn secondary">📊 Generera rapport</button>
<button class="action-btn secondary">🔔 Prenumerera på uppdateringar</button>
</div>
</div>
</div>
<!-- CONTRADICTION 2: Vägunderhåll -->
<div class="contradiction" data-sev="high" data-cat="transport">
<div class="contra-header">
<div class="contra-severity sev-high"></div>
<div class="contra-meta">
<div class="contra-id">CONTRA-2026-06-22-003 · Transport · Stockholm, SE</div>
<div class="contra-title">Vägunderhåll: Kommunalt "gott skick" vs observerade skador</div>
<div class="contra-location">📍 59.2333°N, 18.3000°E · Stockholm kommun · 23 observationer</div>
</div>
<div class="contra-score">
<div class="contra-score-val" style="color:var(--amber)">87%</div>
<div class="contra-score-lbl">Konfidens</div>
</div>
</div>
<div class="contra-body">
<div class="comparison">
<div class="side official">
<div class="side-header">
<div class="side-icon">🏛️</div>
<div class="side-title">Officiell data</div>
</div>
<div class="side-content">
<strong>Stockholm kommun</strong> rapporterar att <strong>92% av kommunala vägar</strong> är i "gott skick" (klass 12) enligt årsredovisning 2025.<br><br>
Underhållsbudget: <strong>18.4 Mkr</strong> för 2026. Ingen upphandling för asfaltläggning planerad före Q3.
</div>
<div class="side-data">Vägar i gott skick: 92%<br>Budget: 18.4 Mkr<br>Senaste inspektion: 2025-11-15</div>
</div>
<div class="vs">VS</div>
<div class="side observed">
<div class="side-header">
<div class="side-icon">📸</div>
<div class="side-title">quixzoom-observationer</div>
</div>
<div class="side-content">
<strong>23 Zoomers</strong> har dokumenterat vägskador i Stockholm under majjuni 2026.<br><br>
<strong>Observationer:</strong> 19 av 23 vägsträckor (83%) visar <strong>allvarliga skador</strong> — djupa gropar, sprickbildning, avflagning. 7 skador klassade som trafikfarliga.
</div>
<div class="side-data">Allvarliga skador: 19/23 (83%)<br>Trafikfarliga: 7<br>Genomsnittlig skaddjup: 8.4 cm</div>
</div>
</div>
<div class="analysis">
<div class="analysis-title">🎯 Kontradiktionsanalys</div>
<div class="analysis-text">
Kommunen rapporterar 92% i gott skick baserat på årlig inspektion (november 2025). quixzoom-observationer från juni 2026 visar 83% allvarliga skador.
<strong>Motsägelse:</strong> Vinterfrostsprickor och tung trafik under våren har försämrat tillståndet avsevärt sedan senaste officiella inspektion. Kommunen har inte uppdaterat sin bedömning.
<strong>Risk:</strong> 7 trafikfarliga skador. Kostnad för försenat underhåll: uppskattat 2.3x högre än proaktivt åtgärdande.
</div>
</div>
<div class="actions">
<button class="action-btn">📤 Dela med kommunen</button>
<button class="action-btn secondary">📊 Generera rapport</button>
<button class="action-btn secondary">🗺️ Visa på karta</button>
</div>
</div>
</div>
<!-- CONTRADICTION 3: Fastighetsskötsel -->
<div class="contradiction" data-sev="high" data-cat="infrastructure">
<div class="contra-header">
<div class="contra-severity sev-high"></div>
<div class="contra-meta">
<div class="contra-id">CONTRA-2026-06-20-007 · Fastighet · Stockholm, SE</div>
<div class="contra-title">Fastighetsskötsel: "Under kontroll" vs observerat förfall</div>
<div class="contra-location">📍 59.3293°N, 18.0686°E · Södermalm · 31 observationer</div>
</div>
<div class="contra-score">
<div class="contra-score-val" style="color:var(--amber)">79%</div>
<div class="contra-score-lbl">Konfidens</div>
</div>
</div>
<div class="contra-body">
<div class="comparison">
<div class="side official">
<div class="side-header">
<div class="side-icon">🏛️</div>
<div class="side-title">Officiell data</div>
</div>
<div class="side-content">
<strong>Fastighetsägaren</strong> rapporterar i årsredovisning 2025 att fastigheten är i <strong>"gott tekniskt skick"</strong> med planerat underhåll budgeterat till 2.1 Mkr för 2026.<br><br>
Energideklaration: Klass C. Inga anmärkningar från myndigheter.
</div>
<div class="side-data">Tekniskt skick: Gott<br>Underhållsbudget: 2.1 Mkr<br>Senaste besiktning: 2025-09-20</div>
</div>
<div class="vs">VS</div>
<div class="side observed">
<div class="side-header">
<div class="side-icon">📸</div>
<div class="side-title">quixzoom-observationer</div>
</div>
<div class="side-content">
<strong>31 Zoomers</strong> har dokumenterat fasader, tak och entréer under apriljuni 2026.<br><br>
<strong>Observationer:</strong> Omfattande mögelväxt på fasad (nordost), lossnande fönsterfoder, vattenskador i takkonstruktion. Energiförbrukning 34% över deklarerad nivå.
</div>
<div class="side-data">Mögel: 14 av 31 fasader<br>Vattenskador: 8 tak<br>Energiavvikelse: +34%</div>
</div>
</div>
<div class="analysis">
<div class="analysis-title">🎯 Kontradiktionsanalys</div>
<div class="analysis-text">
Fastighetsägaren rapporterar "gott skick" baserat på intern besiktning (september 2025). quixzoom-observationer visar pågående förfall som inte åtgärdats.
<strong>Motsägelse:</strong> "Gott skick" definieras av ägaren utan oberoende verifiering. Mögel och vattenskador har utvecklats sedan besiktning men inte rapporterats.
<strong>Risk:</strong> Fortsatt förfall kan leda till saneringskostnader på 47 Mkr. Hyresgäster kan kräva hyresnedsättning.
</div>
</div>
<div class="actions">
<button class="action-btn">📤 Dela med hyresgästförening</button>
<button class="action-btn secondary">📊 Generera rapport</button>
<button class="action-btn secondary">🏛️ Anmäl till kommunen</button>
</div>
</div>
</div>
<!-- CONTRADICTION 4: Vattenkvalitet -->
<div class="contradiction" data-sev="medium" data-cat="infrastructure">
<div class="contra-header">
<div class="contra-severity sev-medium"></div>
<div class="contra-meta">
<div class="contra-id">CONTRA-2026-06-18-012 · Miljö · Mälaren, SE</div>
<div class="contra-title">Vattenkvalitet: "God" klassning vs observerad algblomning</div>
<div class="contra-location">📍 59.4000°N, 17.8000°E · Ekerö kommun · 15 observationer</div>
</div>
<div class="contra-score">
<div class="contra-score-val" style="color:#CA8A04">71%</div>
<div class="contra-score-lbl">Konfidens</div>
</div>
</div>
<div class="contra-body">
<div class="comparison">
<div class="side official">
<div class="side-header">
<div class="side-icon">🏛️</div>
<div class="side-title">Officiell data</div>
</div>
<div class="side-content">
<strong>Länsstyrelsen Stockholm</strong> klassar Mälaren som <strong>"god vattenstatus"</strong> (klass II) i senaste rapport (2024).<br><br>
Näringsämnen inom acceptabla gränser. Ingen badförbud utfärdat för 2026.
</div>
<div class="side-data">Vattenstatus: God (II)<br>Senaste prov: 2024-08<br>Nästa planerade: 2026-08</div>
</div>
<div class="vs">VS</div>
<div class="side observed">
<div class="side-header">
<div class="side-icon">📸</div>
<div class="side-title">quixzoom-observationer</div>
</div>
<div class="side-content">
<strong>15 Zoomers</strong> har dokumenterat vattenkvalitet vid 8 badplatser i Ekerö kommun under juni 2026.<br><br>
<strong>Observationer:</strong> Omfattande algblomning (cyanobakterier) vid 5 av 8 platser. Grumligt vatten, lukt, döda fiskar observerade vid 2 platser.
</div>
<div class="side-data">Algblomning: 5/8 platser<br>Grumlighet: 6/8<br>Döda fiskar: 2 platser</div>
</div>
</div>
<div class="analysis">
<div class="analysis-title">🎯 Kontradiktionsanalys</div>
<div class="analysis-text">
Officiell klassning baseras på årliga prover (senaste augusti 2024). quixzoom-observationer från juni 2026 visar pågående algblomning som inte fångats av provtagning.
<strong>Motsägelse:</strong> Provtagningsfrekvens (1x/år) är för låg för att fånga säsongsvariationer. Zoomer-nätverket ger realtidsdata mellan officiella mätningar.
<strong>Risk:</strong> Badande exponeras för toxiner utan varning. Kommunen saknar data för att utfärda badförbud.
</div>
</div>
<div class="actions">
<button class="action-btn">📤 Dela med länsstyrelsen</button>
<button class="action-btn secondary">📊 Generera rapport</button>
<button class="action-btn secondary">⚠️ Begär badförbud</button>
</div>
</div>
</div>
<div class="timeline">
<div class="timeline-title">📅 Tidslinje — Kontradiktioner upptäckta</div>
<div class="timeline-row">
<div class="timeline-dot red"></div>
<div class="timeline-date">2026-06-24</div>
<div class="timeline-text"><strong>Elnät Bangkok:</strong> 47 observationer bekräftar kritisk överbelastning. Konfidens 94%.</div>
</div>
<div class="timeline-row">
<div class="timeline-dot amber"></div>
<div class="timeline-date">2026-06-22</div>
<div class="timeline-text"><strong>Vägunderhåll Stockholm:</strong> 23 observationer avslöjar allvarliga skador. Kommunen rapporterar 92% i gott skick.</div>
</div>
<div class="timeline-row">
<div class="timeline-dot amber"></div>
<div class="timeline-date">2026-06-20</div>
<div class="timeline-text"><strong>Fastighet Södermalm:</strong> 31 observationer visar pågående förfall. Ägaren rapporterar "gott skick".</div>
</div>
<div class="timeline-row">
<div class="timeline-dot" style="background:#CA8A04"></div>
<div class="timeline-date">2026-06-18</div>
<div class="timeline-text"><strong>Vattenkvalitet Mälaren:</strong> 15 observationer påvisar algblomning. Länsstyrelsen klassar som "god".</div>
</div>
<div class="timeline-row">
<div class="timeline-dot green"></div>
<div class="timeline-date">2026-06-15</div>
<div class="timeline-text"><strong>System:</strong> Contradiction Engine aktiverad. 8 datakällor indexerade. 12 verifierade observationer insamlade.</div>
</div>
</div>
<div class="footer">
LandveX Contradiction Engine — Demo v0.1 · Datakällor: quixzoom-nätverket, offentliga register, satellitdata, väderdata<br>
Alla observationer är geolokaliserade, tidsstämplade och verifierade av minst 3 oberoende Zoomers.
</div>
</div>
<script>
function filter(cat){
document.querySelectorAll('.filter-btn').forEach(b=>b.classList.remove('active'));
event.target.classList.add('active');
document.querySelectorAll('.contradiction').forEach(c=>{
if(cat==='all'||c.dataset.sev===cat||c.dataset.cat.includes(cat)){
c.style.display='';
}else{
c.style.display='none';
}
});
}
</script>
</body>
</html>