Table basics with some HTMX to allow data refresh

This commit is contained in:
2025-01-28 20:21:43 +01:00
parent acf7b5ab6b
commit 3c180625b2
8 changed files with 388 additions and 22 deletions

265
assets/logo.svg Normal file
View File

@@ -0,0 +1,265 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="256"
height="256"
viewBox="0 0 256 256"
version="1.1"
id="svg3"
sodipodi:docname="logo.svg"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs3">
<inkscape:path-effect
effect="powermask"
id="path-effect15"
is_visible="true"
lpeversion="1"
uri="#mask-powermask-path-effect15"
invert="false"
hide_mask="false"
background="true"
background_color="#ffffffff" />
<inkscape:path-effect
effect="powermask"
id="path-effect14"
is_visible="true"
lpeversion="1"
uri="#mask-powermask-path-effect14"
invert="false"
hide_mask="false"
background="true"
background_color="#ffffffff" />
<inkscape:path-effect
effect="powerclip"
message=""
id="path-effect13"
is_visible="true"
lpeversion="1"
inverse="true"
flatten="false"
hide_clip="false" />
<inkscape:path-effect
effect="powerclip"
message=""
id="path-effect12"
is_visible="true"
lpeversion="1"
inverse="true"
flatten="false"
hide_clip="false" />
<inkscape:path-effect
effect="powerclip"
message=""
id="path-effect11"
is_visible="true"
lpeversion="1"
inverse="true"
flatten="false"
hide_clip="false" />
<inkscape:path-effect
effect="powermask"
id="path-effect9"
is_visible="true"
lpeversion="1"
uri="#mask-powermask-path-effect9"
invert="false"
hide_mask="false"
background="true"
background_color="#ffffffff" />
<inkscape:path-effect
effect="powermask"
id="path-effect8"
is_visible="true"
lpeversion="1"
uri="#mask-powermask-path-effect8"
invert="false"
hide_mask="false"
background="true"
background_color="#ffffffff" />
<inkscape:path-effect
effect="powermask"
id="path-effect7"
is_visible="true"
lpeversion="1"
uri="#mask-powermask-path-effect7"
invert="false"
hide_mask="false"
background="true"
background_color="#ffffffff" />
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath9">
<rect
style="display:none;opacity:1;mix-blend-mode:normal;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:8.78723;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="rect9"
width="100.455"
height="15.318766"
x="126.82163"
y="135.80667"
d="m 126.82163,135.80667 h 100.455 v 15.31877 h -100.455 z" />
<path
id="lpe_path-effect11"
style="display:inline;opacity:1;mix-blend-mode:normal;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:8.78723;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
class="powerclip"
d="m 168.34962,137.49724 h 61.89469 v 53.94291 h -61.89469 z m -41.52799,-1.69057 v 15.31877 h 100.455 v -15.31877 z" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath10">
<rect
style="display:none;opacity:1;mix-blend-mode:normal;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:8.78723;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="rect10"
width="100.455"
height="15.318766"
x="126.82163"
y="135.80667"
d="m 126.82163,135.80667 h 100.455 v 15.31877 h -100.455 z" />
<path
id="lpe_path-effect12"
style="display:inline;opacity:1;mix-blend-mode:normal;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:8.78723;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
class="powerclip"
d="m 121.74987,137.4969 h 61.72408 v 53.96962 h -61.72408 z m 5.07176,-1.69023 v 15.31877 h 100.455 v -15.31877 z" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath11">
<rect
style="display:none;opacity:1;mix-blend-mode:normal;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:8.78723;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="rect11"
width="100.455"
height="15.318766"
x="126.82163"
y="135.80667"
d="m 126.82163,135.80667 h 100.455 v 15.31877 h -100.455 z" />
<path
id="lpe_path-effect13"
style="display:inline;opacity:1;mix-blend-mode:normal;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:8.78723;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
class="powerclip"
d="m 123,139 h 106 v 74 H 123 Z m 3.82163,-3.19333 v 15.31877 h 100.455 v -15.31877 z" />
</clipPath>
</defs>
<sodipodi:namedview
id="namedview3"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="4"
inkscape:cx="129.5"
inkscape:cy="123.125"
inkscape:window-width="1896"
inkscape:window-height="1026"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg3" />
<!-- Background rectangle with rounded corners -->
<rect
width="256"
height="256"
rx="48"
ry="48"
fill="#FF6600"
id="rect1"
style="fill:#ff6600;fill-opacity:1" />
<!-- RSS symbol -->
<!-- Small circle -->
<!-- First arc -->
<path
d="m 72,112 c 38,0 72,34 72,72"
fill="none"
stroke="#ffffff"
stroke-width="24"
stroke-linecap="round"
id="path1" />
<path
d="m 72,36 c 78,0 148,70 148,148"
fill="none"
stroke="#ffffff"
stroke-width="24"
stroke-linecap="round"
id="path2" />
<!-- Second arc -->
<g
inkscape:groupmode="layer"
id="layer1"
inkscape:label="mail"
style="display:inline;mix-blend-mode:normal">
<path
x="128"
y="144"
width="96"
height="64"
fill="#FFFFFF"
rx="8"
ry="8"
id="rect2"
style="fill:#e6e6e6"
mask="none"
sodipodi:type="rect"
clip-path="url(#clipPath11)"
inkscape:path-effect="#path-effect13"
d="m 136,144 h 80 c 4.432,0 8,3.568 8,8 v 48 c 0,4.432 -3.568,8 -8,8 h -80 c -4.432,0 -8,-3.568 -8,-8 v -48 c 0,-4.432 3.568,-8 8,-8 z" />
<line
x1="128.02968"
y1="144.03561"
x2="177.19414"
y2="184.92781"
stroke="#ff6600"
stroke-width="4.00277"
id="line2"
mask="none"
clip-path="url(#clipPath10)"
inkscape:path-effect="#path-effect12"
d="m 128.02968,144.03561 49.16446,40.8922" />
<line
x1="223.96869"
y1="144.03763"
x2="174.62524"
y2="184.89977"
stroke="#ff6600"
stroke-width="4"
id="line3"
mask="none"
clip-path="url(#clipPath9)"
inkscape:path-effect="#path-effect11"
d="m 223.96869,144.03763 -49.34345,40.86214" />
<polygon
points="224,144 128,144 176,104 "
fill="#ffffff"
id="polygon2"
transform="matrix(0.99906475,0,0,0.99788438,0.1631611,7.4375162)"
style="fill:#e6e6e6;fill-opacity:1" />
<path
style="fill:#fbf46f;fill-opacity:1;stroke:#ff6600;stroke-width:2;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="M 139.125,152.375 212.75,152.25 176,183.5 Z"
id="path5" />
<path
style="fill:none;fill-opacity:1;stroke:#ff6600;stroke-width:2;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 137.62066,152.20474 h 75.8372"
id="path4" />
</g>
<!-- Email envelope -->
<!-- Envelope body -->
<!-- Envelope flap -->
<!-- Envelope details -->
<path
style="fill:none;stroke:#fbf46f;stroke-width:12;stroke-dasharray:none;stroke-opacity:1"
d="m 71.880322,186.18182 c 0,0 -2.986403,-88.537022 29.599538,-106.664846 25.66147,-14.275685 36.95282,17.638952 47.53683,29.110466 15.64037,16.95188 26.85443,-3.75287 26.55983,35.1332 L 175.5,153 v 0 l 0.0625,6.75 v 0"
id="path3"
sodipodi:nodetypes="cssccccc"
mask="none" />
<circle
cx="72"
cy="184"
r="24"
fill="#FFFFFF"
id="circle1" />
</svg>

After

Width:  |  Height:  |  Size: 8.7 KiB