daveadmin/dobetternorge-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace CSS comparison/graph diagrams with custom infographic images

Browse Source 
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:
davegilligan
2026-05-21 07:23:53 +02:00
parent fc84bb31fe
commit 2aa86a0950
6 changed files with 19 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/tools.css
+5
View File
@@ -8222,3 +8222,8 @@ body.lt-landing {
letter-spacing: .03em;
}
/* Custom infographic diagram images (transparent-bg PNGs/WebPs) */
.kdoc-diagram-img { margin: 2rem auto; max-width: 960px; }
.kdoc-diagram-img picture,
.kdoc-diagram-img img { display: block; width: 100%; height: auto; }
assets/images/why-ours/memoryVlibrary.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

assets/images/why-ours/memoryVlibrary.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 657 KiB

assets/images/why-ours/norwegianLaw.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 883 KiB

assets/images/why-ours/norwegianLaw.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 528 KiB

why-ours.php
+14 -98
View File
@@ -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">&#8595;</div>
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_generic_s2']) ?></div>
<div class="kdoc-compare__arrow">&#8595;</div>
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_generic_s3']) ?></div>
<div class="kdoc-compare__arrow">&#8595;</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">&#8595;</div>
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_dbn_s2']) ?></div>
<div class="kdoc-compare__arrow">&#8595;</div>
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_dbn_s3']) ?></div>
<div class="kdoc-compare__arrow">&#8595;</div>
<div class="kdoc-compare__flow-step"><?= htmlspecialchars($t['col_dbn_s4']) ?></div>
<div class="kdoc-compare__arrow">&#8595;</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 ────────────────────────────────────── -->