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

feat: add public tool preview pages with realistic samples

Browse Source 
Each landing card now links to preview.php?tool=SLUG — a dedicated
public page with an expanded pitch, 4 capability bullets, and a
realistic Norwegian-language sample input+output for all 7 tools.

- preview.php — new public page (no auth required), switch-driven content
- includes/tool-svgs.php — extracted $toolSvgs into shared include
- index.php — require tool-svgs.php, card href → preview.php?tool=SLUG
- assets/css/tools.css — lt-preview-* component styles appended

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
davegilligan
2026-05-17 13:08:46 +02:00
parent c350750b7e
commit 849a7cf434
4 changed files with 571 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
includes/tool-svgs.php
+20
View File
@@ -0,0 +1,20 @@
<?php
declare(strict_types=1);
// SVG illustrations for each tool card (navy bg, brand palette)
// Used by index.php (landing cards) and preview.php (tool detail pages)
$toolSvgs = [
'transcribe' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><line x1="0" y1="44" x2="480" y2="44" stroke="rgba(244,197,66,0.05)" stroke-width="1"/><line x1="0" y1="89" x2="480" y2="89" stroke="rgba(244,197,66,0.05)" stroke-width="1"/><line x1="0" y1="134" x2="480" y2="134" stroke="rgba(244,197,66,0.05)" stroke-width="1"/><path d="M0,89 C10,89 12,112 20,112 C28,112 30,66 38,66 C46,66 48,132 56,132 C64,132 66,46 74,46 C82,46 84,124 92,124 C100,124 102,72 110,72 C118,72 120,108 128,108 C136,108 138,86 148,89" fill="none" stroke="#f4c542" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M332,89 C342,89 344,70 352,70 C360,70 362,112 370,112 C378,112 380,58 388,58 C396,58 398,120 406,120 C414,120 416,76 424,76 C432,76 434,102 442,102 C450,102 452,84 462,86 C470,87 472,89 480,89" fill="none" stroke="#f4c542" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><rect x="217" y="33" width="46" height="68" rx="23" fill="none" stroke="white" stroke-width="2.5" opacity="0.88"/><line x1="226" y1="57" x2="254" y2="57" stroke="rgba(244,197,66,0.38)" stroke-width="1.5"/><line x1="226" y1="68" x2="254" y2="68" stroke="rgba(244,197,66,0.38)" stroke-width="1.5"/><line x1="226" y1="79" x2="254" y2="79" stroke="rgba(244,197,66,0.38)" stroke-width="1.5"/><path d="M203,84 Q203,122 240,122 Q277,122 277,84" fill="none" stroke="white" stroke-width="2.5" opacity="0.84"/><line x1="240" y1="122" x2="240" y2="148" stroke="white" stroke-width="2.5" opacity="0.84"/><line x1="221" y1="148" x2="259" y2="148" stroke="white" stroke-width="2.5" opacity="0.84"/></svg>',
'timeline' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><rect x="400" y="0" width="80" height="178" fill="rgba(186,12,47,0.07)"/><line x1="38" y1="89" x2="445" y2="89" stroke="rgba(244,197,66,0.42)" stroke-width="2"/><circle cx="38" cy="89" r="4" fill="rgba(244,197,66,0.38)"/><polyline points="439,82 449,89 439,96" fill="none" stroke="rgba(244,197,66,0.42)" stroke-width="2" stroke-linejoin="round"/><line x1="94" y1="89" x2="94" y2="58" stroke="rgba(255,255,255,0.28)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="94" cy="89" r="7" fill="#f4c542"/><text x="94" y="48" text-anchor="middle" font-family="monospace" font-size="11" fill="rgba(255,255,255,0.58)">JAN</text><line x1="175" y1="89" x2="175" y2="120" stroke="rgba(255,255,255,0.28)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="175" cy="89" r="6" fill="rgba(255,255,255,0.76)"/><text x="175" y="138" text-anchor="middle" font-family="monospace" font-size="11" fill="rgba(255,255,255,0.55)">MAR</text><line x1="256" y1="89" x2="256" y2="50" stroke="rgba(255,255,255,0.28)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="256" cy="89" r="11" fill="#ba0c2f" opacity="0.92"/><circle cx="256" cy="89" r="5" fill="white" opacity="0.94"/><text x="256" y="40" text-anchor="middle" font-family="monospace" font-size="10" fill="#f4c542">HEARING</text><line x1="336" y1="89" x2="336" y2="120" stroke="rgba(255,255,255,0.28)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="336" cy="89" r="6" fill="rgba(255,255,255,0.76)"/><text x="336" y="138" text-anchor="middle" font-family="monospace" font-size="11" fill="rgba(255,255,255,0.55)">AUG</text><line x1="406" y1="89" x2="406" y2="58" stroke="rgba(255,255,255,0.18)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="406" cy="89" r="8" fill="none" stroke="rgba(244,197,66,0.46)" stroke-width="2" stroke-dasharray="4,2"/><text x="406" y="48" text-anchor="middle" font-family="monospace" font-size="10" fill="rgba(255,255,255,0.32)">PENDING</text></svg>',
'redact' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><g opacity="0.09" stroke="white" stroke-width="1"><line x1="44" y1="38" x2="138" y2="38"/><line x1="44" y1="52" x2="112" y2="52"/><line x1="44" y1="66" x2="124" y2="66"/><line x1="44" y1="80" x2="100" y2="80"/><line x1="44" y1="110" x2="130" y2="110"/><line x1="44" y1="124" x2="106" y2="124"/></g><rect x="155" y="21" width="176" height="140" rx="4" fill="rgba(0,0,0,0.18)"/><rect x="152" y="18" width="176" height="140" rx="4" fill="#fff" opacity="0.97"/><path d="M296,18 L328,18 L296,50 Z" fill="rgba(0,32,91,0.09)"/><line x1="296" y1="18" x2="296" y2="50" stroke="rgba(0,32,91,0.14)" stroke-width="1"/><line x1="296" y1="50" x2="328" y2="50" stroke="rgba(0,32,91,0.14)" stroke-width="1"/><line x1="168" y1="38" x2="286" y2="38" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="168" y1="50" x2="264" y2="50" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><rect x="168" y="62" width="136" height="12" rx="2" fill="#111"/><rect x="168" y="82" width="82" height="12" rx="2" fill="#111"/><line x1="257" y1="88" x2="294" y2="88" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="168" y1="104" x2="290" y2="104" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><rect x="168" y="116" width="114" height="12" rx="2" fill="#111"/><line x1="289" y1="122" x2="302" y2="122" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="168" y1="138" x2="280" y2="138" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="168" y1="150" x2="244" y2="150" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><rect x="338" y="120" width="42" height="11" rx="4" fill="#ba0c2f" transform="rotate(-40 359 125)"/><rect x="338" y="120" width="9" height="11" rx="3" fill="rgba(244,197,66,0.28)" transform="rotate(-40 359 125)"/><polygon points="318,147 326,139 330,143 322,151" fill="#ba0c2f"/></svg>',
'barnevernet' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><rect x="0" y="0" width="480" height="8" fill="rgba(186,12,47,0.22)"/><rect x="0" y="170" width="480" height="8" fill="rgba(186,12,47,0.22)"/><rect x="147" y="22" width="196" height="142" rx="4" fill="rgba(0,0,0,0.18)"/><rect x="144" y="19" width="196" height="142" rx="4" fill="#fff" opacity="0.97"/><rect x="144" y="19" width="196" height="28" rx="4" fill="#00205b"/><rect x="144" y="38" width="196" height="9" fill="#00205b"/><line x1="160" y1="31" x2="224" y2="31" stroke="rgba(255,255,255,0.60)" stroke-width="2"/><line x1="160" y1="39" x2="202" y2="39" stroke="rgba(255,255,255,0.28)" stroke-width="1.5"/><line x1="160" y1="61" x2="318" y2="61" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="73" x2="296" y2="73" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="85" x2="306" y2="85" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="97" x2="278" y2="97" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="112" x2="318" y2="112" stroke="rgba(0,32,91,0.11)" stroke-width="1"/><line x1="160" y1="122" x2="298" y2="122" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="134" x2="284" y2="134" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><circle cx="298" cy="138" r="26" fill="none" stroke="rgba(186,12,47,0.68)" stroke-width="2.5"/><circle cx="298" cy="138" r="20" fill="none" stroke="rgba(186,12,47,0.35)" stroke-width="1"/><line x1="286" y1="138" x2="310" y2="138" stroke="rgba(186,12,47,0.65)" stroke-width="3"/><line x1="298" y1="126" x2="298" y2="150" stroke="rgba(186,12,47,0.65)" stroke-width="3"/><circle cx="274" cy="118" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="282" cy="112" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="291" cy="110" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="300" cy="110" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="309" cy="112" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="318" cy="118" r="1.4" fill="rgba(186,12,47,0.50)"/></svg>',
'advocate' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><radialGradient id="adv_g" cx="50%" cy="40%" r="55%"><stop offset="0%" stop-color="rgba(244,197,66,0.11)"/><stop offset="100%" stop-color="transparent"/></radialGradient></defs><rect width="480" height="178" fill="#00205b"/><rect width="480" height="178" fill="url(#adv_g)"/><line x1="240" y1="22" x2="240" y2="158" stroke="rgba(255,255,255,0.84)" stroke-width="3" stroke-linecap="round"/><line x1="126" y1="68" x2="354" y2="68" stroke="rgba(255,255,255,0.84)" stroke-width="3" stroke-linecap="round"/><circle cx="240" cy="68" r="6" fill="#f4c542"/><circle cx="240" cy="22" r="5" fill="#f4c542"/><path d="M214,158 L266,158 L240,128 Z" fill="rgba(255,255,255,0.82)"/><line x1="126" y1="68" x2="126" y2="118" stroke="rgba(255,255,255,0.60)" stroke-width="1.8"/><line x1="354" y1="68" x2="354" y2="106" stroke="rgba(255,255,255,0.60)" stroke-width="1.8"/><path d="M100,118 Q126,132 152,118" fill="none" stroke="rgba(255,255,255,0.80)" stroke-width="2.5" stroke-linecap="round"/><line x1="100" y1="118" x2="152" y2="118" stroke="rgba(255,255,255,0.24)" stroke-width="1"/><path d="M328,106 Q354,120 380,106" fill="none" stroke="rgba(255,255,255,0.80)" stroke-width="2.5" stroke-linecap="round"/><line x1="328" y1="106" x2="380" y2="106" stroke="rgba(255,255,255,0.24)" stroke-width="1"/><circle cx="118" cy="116" r="7" fill="rgba(244,197,66,0.58)"/><circle cx="134" cy="117" r="7" fill="rgba(244,197,66,0.38)"/><rect x="346" y="100" width="17" height="11" rx="2" fill="rgba(255,255,255,0.38)"/><rect x="366" y="99" width="11" height="12" rx="2" fill="rgba(255,255,255,0.24)"/></svg>',
'deep-research' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><g stroke="rgba(244,197,66,0.24)" stroke-width="1.5" fill="none"><line x1="88" y1="48" x2="178" y2="88"/><line x1="88" y1="48" x2="88" y2="138"/><line x1="88" y1="138" x2="178" y2="88"/><line x1="178" y1="88" x2="268" y2="48"/><line x1="178" y1="88" x2="268" y2="138"/><line x1="268" y1="48" x2="268" y2="138"/><line x1="268" y1="48" x2="358" y2="68"/><line x1="268" y1="138" x2="358" y2="128"/></g><circle cx="88" cy="48" r="10" fill="rgba(244,197,66,0.68)"/><circle cx="88" cy="138" r="8" fill="rgba(255,255,255,0.46)"/><circle cx="178" cy="88" r="13" fill="#f4c542"/><circle cx="268" cy="48" r="9" fill="rgba(255,255,255,0.46)"/><circle cx="268" cy="138" r="8" fill="rgba(244,197,66,0.56)"/><circle cx="358" cy="68" r="9" fill="rgba(255,255,255,0.38)"/><circle cx="358" cy="128" r="8" fill="rgba(244,197,66,0.46)"/><circle cx="358" cy="88" r="44" fill="none" stroke="rgba(255,255,255,0.55)" stroke-width="3"/><line x1="392" y1="122" x2="424" y2="154" stroke="rgba(255,255,255,0.55)" stroke-width="4" stroke-linecap="round"/><circle cx="350" cy="80" r="6" fill="rgba(244,197,66,0.88)"/><circle cx="370" cy="96" r="5" fill="rgba(255,255,255,0.78)"/><line x1="350" y1="80" x2="370" y2="96" stroke="rgba(244,197,66,0.46)" stroke-width="1.5"/></svg>',
'corpus' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><g stroke="rgba(244,197,66,0.28)" stroke-width="1.5" fill="none"><line x1="286" y1="54" x2="376" y2="36"/><line x1="286" y1="89" x2="390" y2="89"/><line x1="286" y1="124" x2="376" y2="143"/></g><circle cx="382" cy="36" r="16" fill="rgba(244,197,66,0.15)" stroke="rgba(244,197,66,0.38)" stroke-width="1.5"/><circle cx="396" cy="89" r="13" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.22)" stroke-width="1.5"/><circle cx="382" cy="143" r="16" fill="rgba(186,12,47,0.14)" stroke="rgba(186,12,47,0.34)" stroke-width="1.5"/><text x="382" y="40" text-anchor="middle" font-family="monospace" font-size="8" fill="rgba(244,197,66,0.72)">ECHR</text><text x="396" y="93" text-anchor="middle" font-family="monospace" font-size="7" fill="rgba(255,255,255,0.52)">LOV</text><text x="382" y="147" text-anchor="middle" font-family="monospace" font-size="7" fill="rgba(255,200,200,0.52)">BVJ</text><ellipse cx="196" cy="40" rx="78" ry="13" fill="rgba(0,18,56,0.94)" stroke="rgba(244,197,66,0.68)" stroke-width="1.5"/><rect x="118" y="40" width="156" height="26" fill="rgba(0,14,46,0.96)"/><ellipse cx="196" cy="66" rx="78" ry="13" fill="rgba(0,12,40,0.96)" stroke="rgba(244,197,66,0.48)" stroke-width="1.5"/><text x="196" y="58" text-anchor="middle" font-family="monospace" font-size="9" fill="rgba(244,197,66,0.62)">220K PASSAGES</text><ellipse cx="196" cy="78" rx="78" ry="13" fill="rgba(0,28,76,0.94)" stroke="rgba(255,255,255,0.36)" stroke-width="1.5"/><rect x="118" y="78" width="156" height="26" fill="rgba(0,12,46,0.96)"/><ellipse cx="196" cy="104" rx="78" ry="13" fill="rgba(0,10,38,0.96)" stroke="rgba(255,255,255,0.26)" stroke-width="1.5"/><text x="196" y="96" text-anchor="middle" font-family="monospace" font-size="9" fill="rgba(255,255,255,0.46)">QDRANT + AZURE</text><ellipse cx="196" cy="116" rx="78" ry="13" fill="rgba(186,12,47,0.18)" stroke="rgba(186,12,47,0.48)" stroke-width="1.5"/><rect x="118" y="116" width="156" height="20" fill="rgba(100,4,18,0.14)"/><ellipse cx="196" cy="136" rx="78" ry="13" fill="rgba(80,3,14,0.20)" stroke="rgba(186,12,47,0.32)" stroke-width="1.5"/><text x="196" y="130" text-anchor="middle" font-family="monospace" font-size="9" fill="rgba(255,170,170,0.48)">NOMIC EMBED</text></svg>',
];