Replace CSS comparison/graph diagrams with custom infographic images
Swaps the CSS-only kdoc-compare and kdoc-graph blocks for two custom transparent-background PNGs (+ lossless WebP) designed by the user. memoryVlibrary shows the two-path General AI vs DBN flow; norwegianLaw shows the connected-law knowledge graph. Both served via <picture> with WebP primary and PNG fallback. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+14
-98
@@ -130,38 +130,13 @@ function imgSlot(string $slot, string $file, string $label, string $caption, str
|
||||
<h2 class="kdoc-section__title"><?= htmlspecialchars($t['problem_title']) ?></h2>
|
||||
<p class="kdoc-section__sub"><?= htmlspecialchars($t['problem_sub']) ?></p>
|
||||
|
||||
<div class="kdoc-compare">
|
||||
|
||||
<!-- Left: generic AI -->
|
||||
<div class="kdoc-compare__col kdoc-compare__col--generic">
|
||||
<p class="kdoc-compare__label"><?= htmlspecialchars($t['col_generic_label']) ?></p>
|
||||
<div class="kdoc-compare__flow">
|
||||
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_generic_s1']) ?></div>
|
||||
<div class="kdoc-compare__arrow">↓</div>
|
||||
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_generic_s2']) ?></div>
|
||||
<div class="kdoc-compare__arrow">↓</div>
|
||||
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_generic_s3']) ?></div>
|
||||
<div class="kdoc-compare__arrow">↓</div>
|
||||
<div class="kdoc-compare__flow-step kdoc-compare__flow-step--final"><?= htmlspecialchars($t['col_generic_s4']) ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Do Better Norge -->
|
||||
<div class="kdoc-compare__col kdoc-compare__col--dbn">
|
||||
<p class="kdoc-compare__label"><?= htmlspecialchars($t['col_dbn_label']) ?></p>
|
||||
<div class="kdoc-compare__flow">
|
||||
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_dbn_s1']) ?></div>
|
||||
<div class="kdoc-compare__arrow">↓</div>
|
||||
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_dbn_s2']) ?></div>
|
||||
<div class="kdoc-compare__arrow">↓</div>
|
||||
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_dbn_s3']) ?></div>
|
||||
<div class="kdoc-compare__arrow">↓</div>
|
||||
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_dbn_s4']) ?></div>
|
||||
<div class="kdoc-compare__arrow">↓</div>
|
||||
<div class="kdoc-compare__flow-step kdoc-compare__flow-step--final"><?= htmlspecialchars($t['col_dbn_s5']) ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kdoc-diagram-img">
|
||||
<picture>
|
||||
<source srcset="assets/images/why-ours/memoryVlibrary.webp" type="image/webp">
|
||||
<img src="assets/images/why-ours/memoryVlibrary.png"
|
||||
alt="Two-path comparison: General AI searches its memory and may cite laws that don't exist; Do Better Norge searches 220,000+ verified Norwegian legal passages, reranks results, and cites the real passages found"
|
||||
loading="lazy" width="1536" height="1024">
|
||||
</picture>
|
||||
</div>
|
||||
<p class="kdoc-compare__caption"><?= htmlspecialchars($t['problem_caption']) ?></p>
|
||||
</div>
|
||||
@@ -209,75 +184,16 @@ function imgSlot(string $slot, string $file, string $label, string $caption, str
|
||||
<h2 class="kdoc-section__title"><?= htmlspecialchars($t['graph_title']) ?></h2>
|
||||
<p class="kdoc-section__sub"><?= htmlspecialchars($t['graph_sub']) ?></p>
|
||||
|
||||
<div class="kdoc-graph">
|
||||
<div class="kdoc-graph__node kdoc-graph__node--start">
|
||||
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n1']) ?></p>
|
||||
</div>
|
||||
<div class="kdoc-graph__connector">
|
||||
<div class="kdoc-graph__connector-line"></div>
|
||||
<span class="kdoc-graph__connector-label">finds</span>
|
||||
<div class="kdoc-graph__connector-line"></div>
|
||||
</div>
|
||||
<div class="kdoc-graph__node">
|
||||
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n2']) ?></p>
|
||||
<p class="kdoc-graph__node-note"><?= htmlspecialchars($t['graph_n2_note']) ?></p>
|
||||
</div>
|
||||
<div class="kdoc-graph__connector">
|
||||
<div class="kdoc-graph__connector-line"></div>
|
||||
<span class="kdoc-graph__connector-label">linked to</span>
|
||||
<div class="kdoc-graph__connector-line"></div>
|
||||
</div>
|
||||
<div class="kdoc-graph__node">
|
||||
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n3']) ?></p>
|
||||
<p class="kdoc-graph__node-note"><?= htmlspecialchars($t['graph_n3_note']) ?></p>
|
||||
</div>
|
||||
<div class="kdoc-graph__connector">
|
||||
<div class="kdoc-graph__connector-line"></div>
|
||||
<span class="kdoc-graph__connector-label">linked to</span>
|
||||
<div class="kdoc-graph__connector-line"></div>
|
||||
</div>
|
||||
<div class="kdoc-graph__node">
|
||||
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n4']) ?></p>
|
||||
<p class="kdoc-graph__node-note"><?= htmlspecialchars($t['graph_n4_note']) ?></p>
|
||||
</div>
|
||||
<div class="kdoc-graph__connector">
|
||||
<div class="kdoc-graph__connector-line"></div>
|
||||
<span class="kdoc-graph__connector-label">backed by</span>
|
||||
<div class="kdoc-graph__connector-line"></div>
|
||||
</div>
|
||||
<div class="kdoc-graph__node">
|
||||
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n5']) ?></p>
|
||||
<p class="kdoc-graph__node-note"><?= htmlspecialchars($t['graph_n5_note']) ?></p>
|
||||
</div>
|
||||
<div class="kdoc-graph__connector">
|
||||
<div class="kdoc-graph__connector-line"></div>
|
||||
<span class="kdoc-graph__connector-label">plus</span>
|
||||
<div class="kdoc-graph__connector-line"></div>
|
||||
</div>
|
||||
<div class="kdoc-graph__node">
|
||||
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n6']) ?></p>
|
||||
<p class="kdoc-graph__node-note"><?= htmlspecialchars($t['graph_n6_note']) ?></p>
|
||||
</div>
|
||||
<div class="kdoc-graph__connector">
|
||||
<div class="kdoc-graph__connector-line"></div>
|
||||
<span class="kdoc-graph__connector-label">becomes</span>
|
||||
<div class="kdoc-graph__connector-line"></div>
|
||||
</div>
|
||||
<div class="kdoc-graph__node kdoc-graph__node--end">
|
||||
<p class="kdoc-graph__node-title"><?= htmlspecialchars($t['graph_n7']) ?></p>
|
||||
<p class="kdoc-graph__node-note"><?= htmlspecialchars($t['graph_n7_note']) ?></p>
|
||||
</div>
|
||||
<div class="kdoc-diagram-img">
|
||||
<picture>
|
||||
<source srcset="assets/images/why-ours/norwegianLaw.webp" type="image/webp">
|
||||
<img src="assets/images/why-ours/norwegianLaw.png"
|
||||
alt="Norwegian law knowledge graph showing how your question connects through barnevernsloven § 4-4, barneloven § 30 and § 34, ECHR Article 8, 23 ECHR judgments vs Norway, and Bufdir guidance — all grounding your final answer"
|
||||
loading="lazy" width="1448" height="1086">
|
||||
</picture>
|
||||
</div>
|
||||
|
||||
<p class="kdoc-section__sub" style="margin-top:1.5rem;text-align:center"><?= htmlspecialchars($t['graph_caption']) ?></p>
|
||||
|
||||
<?php echo imgSlot(
|
||||
'3',
|
||||
'graph.jpg',
|
||||
'Knowledge graph — connected Norwegian law',
|
||||
'Abstract visualization of a legal knowledge graph: glowing nodes labeled §4-4, ECHR Art.8, barneloven, Bufdir connected by golden threads on a midnight-navy background.',
|
||||
'Abstract visualization of a legal knowledge graph on a deep midnight-navy background. Glowing circular nodes connected by golden threads — some nodes labeled with §4-4, ECHR Art.8, barneloven, Bufdir. The central node pulses white. Norwegian red (#BA0C2F) and gold (#C9A84C) accent colors. Data-visualization aesthetic, clean, no text clutter beyond the node labels. Wide landscape format 16:9.'
|
||||
); ?>
|
||||
</div>
|
||||
|
||||
<!-- ── Side-by-side answer comparison ────────────────────────────────────── -->
|
||||
|
||||
Reference in New Issue
Block a user