Peter/bkbh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More UI

Browse source
This commit is contained in:
Bianca Fürstenau 2025-02-15 12:36:39 +01:00
parent 8dd046b22d
commit 4b1efa3a30
6 changed files with 676 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
src/assets/angel.svg Normal file
View file

@ -0,0 +1,160 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="194.08638mm"
height="62.971954mm"
viewBox="0 0 194.08638 62.971954"
version="1.1"
id="svg4122"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
sodipodi:docname="angel.svg"
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">
<sodipodi:namedview
id="namedview4124"
pagecolor="#ffffff"
bordercolor="#111111"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:document-units="mm"
showgrid="false"
width="1600mm"
showguides="true"
inkscape:guide-bbox="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.75455247"
inkscape:cx="205.41978"
inkscape:cy="85.481133"
inkscape:window-width="1920"
inkscape:window-height="1028"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="1.3259282e-06,27.988837"
orientation="0,-1"
id="guide5081" />
</sodipodi:namedview>
<defs
id="defs4119">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1533">
<path
d="m 257.88,347.4 h 114.6 v 109.32 h -114.6 z"
clip-rule="evenodd"
id="path1531" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1543">
<path
d="M 0,0 H 11.658 V 11.657 H 0 Z"
id="path1541" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1533-9">
<path
d="m 257.88,347.4 h 114.6 v 109.32 h -114.6 z"
clip-rule="evenodd"
id="path1531-2" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1543-0">
<path
d="M 0,0 H 11.658 V 11.657 H 0 Z"
id="path1541-2" />
</clipPath>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(31.403672,-14.014619)">
<g
id="g1527"
transform="matrix(0.77726188,0,0,-0.77726188,-120.92846,357.88505)"
style="fill:#000000;fill-opacity:1">
<g
id="g1529"
clip-path="url(#clipPath1533)"
style="fill:#000000;fill-opacity:1">
<g
id="g1535"
transform="matrix(1.5917,-3.77e-7,-3.77e-7,1.5183,257.88,347.4)"
style="fill:#000000;fill-opacity:1">
<g
id="g1537"
transform="scale(6.1761,6.1763)"
style="fill:#000000;fill-opacity:1">
<g
id="g1539"
clip-path="url(#clipPath1543)"
style="fill:#000000;fill-opacity:1">
<path
d="m 8.725,7.3964 v 2.016 h -0.96 v -1.104 l -1.92,1.8236 v 0 L 0.80505,5.3324 1.345,4.8764 l 4.5,4.272 v 0 l 4.5,-4.272 0.54,0.456 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1545" />
<path
d="m 2.245,5.0564 v -3.564 h 2.88 v 3 h 1.44 v -3 h 2.88 v 3.564 l -3.6,3.42 z m 2.16,-2.004 h -1.44 v 1.44 h 1.44 z m 2.88,1.44 h 1.44 v -1.44 h -1.44 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1547" />
</g>
</g>
</g>
</g>
</g>
<g
id="g1527-3"
transform="matrix(0.77726188,0,0,-0.77726188,-237.99524,357.88507)"
style="fill:#000000;fill-opacity:1">
<g
id="g1529-7"
clip-path="url(#clipPath1533-9)"
style="fill:#000000;fill-opacity:1">
<g
id="g1535-5"
transform="matrix(1.5917,-3.77e-7,-3.77e-7,1.5183,257.88,347.4)"
style="fill:#000000;fill-opacity:1">
<g
id="g1537-9"
transform="scale(6.1761,6.1763)"
style="fill:#000000;fill-opacity:1">
<g
id="g1539-2"
clip-path="url(#clipPath1543-0)"
style="fill:#000000;fill-opacity:1">
<path
d="m 8.725,7.3964 v 2.016 h -0.96 v -1.104 l -1.92,1.8236 v 0 L 0.80505,5.3324 1.345,4.8764 l 4.5,4.272 v 0 l 4.5,-4.272 0.54,0.456 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1545-2" />
<path
d="m 2.245,5.0564 v -3.564 h 2.88 v 3 h 1.44 v -3 h 2.88 v 3.564 l -3.6,3.42 z m 2.16,-2.004 h -1.44 v 1.44 h 1.44 z m 2.88,1.44 h 1.44 v -1.44 h -1.44 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1547-8" />
</g>
</g>
</g>
</g>
</g>
<path
d="m 45.916893,66.818921 1.88771,6.648664 c 0.25902,0.858989 -0.27189,1.685296 -1.06955,1.88557 -0.87018,0.218497 -1.73866,-0.33348 -1.97608,-1.120884 l -2.94375,-10.155306 c -0.10794,-0.357913 -0.0963,-0.707342 0.082,-1.021604 0.0256,-0.04491 0.0509,-0.08978 0.0764,-0.134686 0.0256,-0.04491 0.0509,-0.08978 0.10186,-0.179587 l 0.0509,-0.08978 0.0509,-0.08978 c 0.17437,-0.19781 0.44286,-0.342193 0.70745,-0.370129 l 10.2917,-2.469768 c 0.87018,-0.218499 1.73866,0.333483 1.97608,1.120887 0.25901,0.858986 -0.2719,1.685293 -1.06956,1.885568 l -6.3304,1.512402 c 7.90305,6.678392 16.84928,8.667294 26.60342,5.833266 4.79376,-1.434597 9.256,-3.709973 13.1692,-6.771511 0.68975,-0.558187 1.69331,-0.463649 2.24627,0.206025 0.59999,0.696373 0.54347,1.673081 -0.12074,2.186371 -4.18554,3.322427 -9.01425,5.805313 -14.24312,7.349152 -7.4807,2.224724 -18.59974,2.860398 -29.49067,-6.224873 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.4032"
id="path1795" />
<path
d="m 86.443803,25.090942 -1.88772,-6.648666 c -0.259,-0.858987 0.27189,-1.685295 1.06956,-1.885569 0.87018,-0.21848 1.73865,0.333481 1.97608,1.120886 l 2.94375,10.155306 c 0.10792,0.357911 0.0963,0.707341 -0.082,1.021602 -0.0255,0.0449 -0.0509,0.08979 -0.0764,0.134684 -0.0255,0.04489 -0.0509,0.08979 -0.10186,0.179578 l -0.0509,0.08979 -0.0509,0.08979 c -0.17438,0.197784 -0.44286,0.342193 -0.70745,0.370126 l -10.2917,2.469769 c -0.87018,0.218481 -1.73865,-0.333481 -1.97607,-1.120886 -0.25901,-0.858986 0.27189,-1.685294 1.06956,-1.885568 l 6.3304,-1.512403 c -7.90306,-6.678393 -16.84929,-8.667295 -26.60342,-5.833268 -4.79377,1.434598 -9.25601,3.709975 -13.16919,6.771513 -0.68975,0.558185 -1.69331,0.463649 -2.24626,-0.206034 -0.59999,-0.696371 -0.54347,-1.673079 0.12081,-2.18637 4.18554,-3.322423 9.01424,-5.805311 14.24309,-7.349149 7.4807,-2.224724 18.59974,-2.860398 29.49067,6.224871 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.40319"
id="path1775" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7 KiB

196
src/assets/cafe.svg Normal file
View file

@ -0,0 +1,196 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="158.31358mm"
height="62.971931mm"
viewBox="0 0 158.31358 62.971931"
version="1.1"
id="svg3399"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
sodipodi:docname="cafe.svg"
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">
<sodipodi:namedview
id="namedview3401"
pagecolor="#ffffff"
bordercolor="#111111"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:document-units="mm"
showgrid="false"
width="160mm"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="1.5091049"
inkscape:cx="254.45547"
inkscape:cy="100.39063"
inkscape:window-width="1920"
inkscape:window-height="1028"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<defs
id="defs3396">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1533">
<path
d="m 257.88,347.4 h 114.6 v 109.32 h -114.6 z"
clip-rule="evenodd"
id="path1531" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1543">
<path
d="M 0,0 H 11.658 V 11.657 H 0 Z"
id="path1541" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1661">
<path
d="m 163.44,359.4 h 59.64 v 57 h -59.64 z"
clip-rule="evenodd"
id="path1659" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1671">
<path
d="M 0,0 H 11.658 V 11.657 H 0 Z"
id="path1669" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1763">
<path
d="m 232.17,448.97 48.66,-27.6 -26.34,-46.43 -48.65,27.6 z"
clip-rule="evenodd"
id="path1761" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1773">
<path
d="M 0,0 H 11.658 V 11.657 H 0 Z"
id="path1771" />
</clipPath>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-1.1429917,-10.473169)">
<g
id="g1527"
transform="matrix(0.77726188,0,0,-0.77726188,-124.1546,354.3436)"
style="fill:#000000;fill-opacity:1">
<g
id="g1529"
clip-path="url(#clipPath1533)"
style="fill:#000000;fill-opacity:1">
<g
id="g1535"
transform="matrix(1.5917,-3.77e-7,-3.77e-7,1.5183,257.88,347.4)"
style="fill:#000000;fill-opacity:1">
<g
id="g1537"
transform="scale(6.1761,6.1763)"
style="fill:#000000;fill-opacity:1">
<g
id="g1539"
clip-path="url(#clipPath1543)"
style="fill:#000000;fill-opacity:1">
<path
d="m 8.725,7.3964 v 2.016 h -0.96 v -1.104 l -1.92,1.8236 v 0 L 0.80505,5.3324 1.345,4.8764 l 4.5,4.272 v 0 l 4.5,-4.272 0.54,0.456 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1545" />
<path
d="m 2.245,5.0564 v -3.564 h 2.88 v 3 h 1.44 v -3 h 2.88 v 3.564 l -3.6,3.42 z m 2.16,-2.004 h -1.44 v 1.44 h 1.44 z m 2.88,1.44 h 1.44 v -1.44 h -1.44 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1547" />
</g>
</g>
</g>
</g>
</g>
<g
id="g1655"
transform="matrix(0.51952631,0,0,-0.51952631,-42.255704,252.80757)"
style="fill:#000000;fill-opacity:1">
<g
id="g1657"
clip-path="url(#clipPath1661)"
style="fill:#000000;fill-opacity:1"
transform="matrix(2.0459446,0,0,2.0459446,-284.39996,-393.48151)">
<g
id="g1663"
transform="matrix(0.82833,-3.77e-7,-1.88e-7,0.79167,163.44,359.4)"
style="fill:#000000;fill-opacity:1">
<g
id="g1665"
transform="scale(6.1761,6.1763)"
style="fill:#000000;fill-opacity:1">
<g
id="g1667"
clip-path="url(#clipPath1671)"
style="fill:#000000;fill-opacity:1">
<path
d="m 6.805,10.252 c 0,-0.5298 -0.4298,-0.9596 -0.96,-0.9596 -0.5301,0 -0.96,0.4298 -0.96,0.9596 0,0.531 0.4299,0.96 0.96,0.96 0.5302,0 0.96,-0.429 0.96,-0.96 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1673" />
<path
d="m 8.461,5.3084 -0.672,2.856 c -0.024,0.096 -0.072,0.192 -0.144,0.264 -0.288,0.24 -0.624,0.408 -1.008,0.528 -0.264,0.048 -0.528,0.096 -0.792,0.096 -0.264,0 -0.528,-0.048 -0.792,-0.12 C 4.669,8.8364 4.333,8.6444 4.045,8.4044 3.973,8.3324 3.925,8.2364 3.901,8.1404 L 3.229,5.2844 c 0,-0.024 -0.024,-0.072 -0.024,-0.12 0,-0.264 0.216,-0.48 0.48,-0.48 0.216,0 0.408,0.168 0.456,0.36 l 0.504,2.088 V 0.41238 h 0.96 V 4.7324 h 0.48 V 0.41238 h 0.96 V 7.1564 l 0.504,-2.088 c 0.048,-0.192 0.24,-0.36 0.456,-0.36 0.264,0 0.48,0.216 0.48,0.48 0,0.048 -0.024,0.096 -0.024,0.12 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1675" />
</g>
</g>
</g>
</g>
</g>
<g
id="g1757"
transform="matrix(0.93940343,0,0,-0.93940343,-168.06075,408.74568)"
style="fill:#000000;fill-opacity:1">
<g
id="g1759"
clip-path="url(#clipPath1763)"
style="fill:#000000;fill-opacity:1">
<g
id="g1765"
transform="matrix(-0.36577,-0.64483,0.67576,-0.38331,232.17,448.97)"
style="fill:#000000;fill-opacity:1">
<g
id="g1767"
transform="scale(6.1761,6.1763)"
style="fill:#000000;fill-opacity:1">
<g
id="g1769"
clip-path="url(#clipPath1773)"
style="fill:#000000;fill-opacity:1">
<path
d="M 3.853,9.3884 2.725,8.2964 c -0.144,-0.144 -0.372,-0.132 -0.504,0 -0.144,0.144 -0.132,0.372 0,0.504 L 3.937,10.48 c 0.06,0.06 0.132,0.096 0.216,0.096 0.012,0 0.024,0 0.036,0 0.012,0 0.024,0 0.048,0 h 0.024 0.024 c 0.06,-0.012 0.12,-0.048 0.156,-0.096 l 1.68,-1.7156 c 0.144,-0.144 0.132,-0.372 0,-0.504 -0.144,-0.144 -0.372,-0.132 -0.504,0 l -1.032,1.056 c -0.444,-2.256 0.18,-4.2 1.872,-5.772 0.84,-0.768 1.812,-1.38 2.88,-1.8 0.192,-0.072 0.288,-0.276 0.216,-0.456 -0.072,-0.192 -0.276,-0.288 -0.456,-0.216 -1.152,0.444 -2.208,1.104 -3.12,1.944 -1.308,1.2 -2.712,3.276 -2.124,6.372 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1775" />
</g>
</g>
</g>
</g>
</g>
<path
d="m 38.146908,64.004175 1.887716,6.648664 c 0.259021,0.858989 -0.27189,1.685296 -1.069554,1.88557 -0.870183,0.218497 -1.738657,-0.33348 -1.976078,-1.120884 L 34.045239,61.262219 c -0.10794,-0.357913 -0.09626,-0.707342 0.08198,-1.021604 0.02557,-0.04491 0.05094,-0.08978 0.07642,-0.134686 0.02557,-0.04491 0.05094,-0.08978 0.101863,-0.179587 l 0.05094,-0.08978 0.05094,-0.08978 c 0.174366,-0.19781 0.442856,-0.342193 0.70745,-0.370129 l 10.291699,-2.469768 c 0.870179,-0.218499 1.738656,0.333483 1.976076,1.120887 0.259016,0.858986 -0.271894,1.685293 -1.069561,1.885568 l -6.330398,1.512402 c 7.903057,6.678392 16.84928,8.667294 26.603418,5.833266 4.793763,-1.434597 9.256008,-3.709973 13.169199,-6.771511 0.689754,-0.558187 1.693318,-0.463649 2.246271,0.206025 0.599991,0.696373 0.543478,1.673081 -0.12074,2.186371 -4.185537,3.322427 -9.01425,5.805313 -14.243114,7.349152 -7.480703,2.224724 -18.599742,2.860398 -29.490669,-6.224873 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.4032"
id="path1795" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8.2 KiB

108
src/assets/cash.svg Normal file
View file

@ -0,0 +1,108 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="119.91628mm"
height="87.342445mm"
viewBox="0 0 119.91628 87.342445"
version="1.1"
id="svg4364"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
sodipodi:docname="money.svg"
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">
<sodipodi:namedview
id="namedview4366"
pagecolor="#ffffff"
bordercolor="#111111"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:document-units="mm"
showgrid="false"
width="160mm"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="1.0670983"
inkscape:cx="199.60672"
inkscape:cy="213.19497"
inkscape:window-width="1920"
inkscape:window-height="1028"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs4361">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1577">
<path
d="m 400.32,286.8 h 59.76 v 57 h -59.76 z"
clip-rule="evenodd"
id="path1575" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath1587">
<path
d="M 0,0 H 11.658 V 11.657 H 0 Z"
id="path1585" />
</clipPath>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-17.801089,-0.9065759)">
<g
id="g1571"
transform="matrix(2.2152553,0,0,-2.2152553,-875.42645,744.94867)">
<g
id="g1573"
clip-path="url(#clipPath1577)">
<g
id="g1579"
transform="matrix(0.83,0,-3.77e-7,0.79167,400.32,286.8)">
<g
id="g1581"
transform="scale(6.1761,6.1763)">
<g
id="g1583"
clip-path="url(#clipPath1587)">
<path
d="m 10.405,3.0524 -0.36,-0.36 h -8.28 l -0.48,0.48 v 2.4 l 0.48,0.48 h 8.28 l 0.36,-0.36 z m -9.83995,3.72 v -4.8 H 11.125 v 4.8 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1589" />
<path
d="m 6.805,4.3724 c 0,-0.6628 -0.4298,-1.2 -0.96,-1.2 -0.5301,0 -0.96,0.5372 -0.96,1.2 0,0.6627 0.4299,1.2 0.96,1.2 0.5302,0 0.96,-0.5373 0.96,-1.2 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1591" />
<path
d="m 3.205,4.3724 c 0,-0.1988 -0.1611,-0.36 -0.36,-0.36 -0.1988,0 -0.36,0.1612 -0.36,0.36 0,0.1988 0.1612,0.36 0.36,0.36 0.1989,0 0.36,-0.1612 0.36,-0.36 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1593" />
<path
d="m 9.205,4.3724 c 0,-0.1988 -0.1611,-0.36 -0.36,-0.36 -0.1988,0 -0.36,0.1612 -0.36,0.36 0,0.1988 0.1612,0.36 0.36,0.36 0.1989,0 0.36,-0.1612 0.36,-0.36 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1595" />
<path
d="m 7.993,9.0884 0.18,-0.456 0.72,0.144 -0.504,1.2596 -6.456,-2.6396 3.696,0.732 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1597" />
<path
d="m 7.369,7.2524 1.896,0.372 0.084,-0.372 h 0.732 l -0.24,1.224 -6.156,-1.224 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1599" />
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

245
src/index.html
View file

@ -1,97 +1,196 @@
<!doctype html>
<html lang="en">
<html lang="de">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri App</title>
<title>Darmstadt sagt Nein zur Bezahlkartei!</title>
<script type="module" src="/main.js" defer></script>
</head>
<body>
<main class="v-container">
<div class="h-container">
<form class="column" id="aldi-form">
<div class="v-container" id="cafe">
<div id=cafe-voucher>
<h1 class="shout">
Sumpf
</h1>
<div class="h-container">
<form class="column" id="cafe-voucher-aldi">
<button type="submit">
<img
src="/assets/aldi.svg"
class="logo"
alt="ALDI-Süd-Logo"
/>
</button>
</form>
<form class="column" id="cafe-voucher-edeka">
<button type="submit">
<img
src="/assets/edeka.svg"
class="logo"
alt="Edeka-Logo"
/>
</button>
</form>
<form class="column" id="cafe-voucher-dm">
<button type="submit">
<img
src="/assets/dm.svg"
class="logo"
alt="dm-Logo"
/>
</button>
</form>
<form class="column" id="cafe-voucher-lidl">
<button type="submit">
<img
src="/assets/lidl.svg"
class="logo"
alt="Lidl-Logo"
/>
</button>
</form>
<form class="column" id="cafe-voucher-rewe">
<button type="submit">
<img
src="/assets/rewe.svg"
class="logo"
alt="Rewe-Logo"
/>
</button>
</form>
<form class="column" id="cafe-voucher-tegut">
<button type="submit">
<img
src="/assets/tegut.svg"
class="logo"
alt="Tegut-Logo"
/>
</button>
</form>
</div>
</div>
<div id="cafe-inventory">
<form class="v-container">
<div>
<input type="radio" id="cafe-inventory-acc-sumpf" name="cafe-inventory-acc">
<label for="cafe-inventory-acc-sumpf">Sumpf</label>
<br/>
<input type="radio" id="cafe-inventory-acc-hs" name="cafe-inventory-acc">
<label for="cafe-inventory-acc-hs">Heinersyndikat</label>
</div>
<div>
<label for="cafe-inventory-voucher-aldi">
<img
src="/assets/aldi.svg"
class="logo"
alt="ALDI-Süd-Logo"
/>
</label>
<input type="number" id="cafe-inventory-voucher-aldi" name="cafe-inventory-voucher-aldi" min="0">
<br/>
<label for="cafe-inventory-voucher-edeka">
<img
src="/assets/edeka.svg"
class="logo"
alt="Edeka-Logo"
/>
</label>
<input type="number" id="cafe-inventory-voucher-edeka" name="cafe-inventory-voucher-edeka" min="0">
<br/>
<label for="cafe-inventory-voucher-dm">
<img
src="/assets/dm.svg"
class="logo"
alt="dm-Logo"
/>
</label>
<input type="number" id="cafe-inventory-voucher-dm" name="cafe-inventory-voucher-dm" min="0">
<br/>
<label for="cafe-inventory-voucher-lidl">
<img
src="/assets/lidl.svg"
class="logo"
alt="Lidl-Logo"
/>
</label>
<input type="number" id="cafe-inventory-voucher-lidl" name="cafe-inventory-voucher-lidl" min="0">
<br/>
<label for="cafe-inventory-voucher-rewe">
<img
src="/assets/rewe.svg"
class="logo"
alt="Rewe-Logo"
/>
</label>
<input type="number" id="cafe-inventory-voucher-rewe" name="cafe-inventory-voucher-rewe" min="0">
<br/>
<label for="cafe-inventory-voucher-tegut">
<img
src="/assets/tegut.svg"
class="logo"
alt="Tegut-Logo"
/>
</label>
<input type="number" id="cafe-inventory-voucher-tegut" name="cafe-inventory-voucher-tegut" min="0">
<br/>
</div>
<div>
<label for="cafe-inventory-cash">
<img
src="/assets/cash.svg"
class="logo"
alt="Bargeld"
/>
</label>
<input type="number" id="cafe-inventory-cash" name="cafe-inventory-cash" min="0">
<br/>
</div>
</form>
</div>
<div class="h-container nav">
<form id="cafe-nav-inventory">
<button type="submit">
<span class="shout">
Bestand
</span>
</button>
</form>
<form id="cafe-nav-voucher">
<button type="submit">
<span class="shout">
Annahme
</span>
</button>
</form>
</div>
</div>
<div class="angel">
<div>
<form class="h-container">
</form>
</div>
</div>
<div class="h-container nav">
<form class="column" id="nav-cafe">
<button type="submit">
<img
src="/assets/aldi.svg"
src="/assets/cafe.svg"
class="logo"
alt="ALDI-Süd-Logo"
alt="Tauschcafé"
/>
</button>
</form>
<form class="column" id="edeka-form">
<form class="column" id="nav-angel">
<button type="submit">
<img
src="/assets/edeka.svg"
src="/assets/angel.svg"
class="logo"
alt="Edeka-Logo"
/>
</button>
</form>
<form class="column" id="dm-form">
<button type="submit">
<img
src="/assets/dm.svg"
class="logo"
alt="dm-Logo"
/>
</button>
</form>
<form class="column" id="lidl-form">
<button type="submit">
<img
src="/assets/lidl.svg"
class="logo"
alt="Lidl-Logo"
/>
</button>
</form>
<form class="column" id="rewe-form">
<button type="submit">
<img
src="/assets/rewe.svg"
class="logo"
alt="Rewe-Logo"
/>
</button>
</form>
<form class="column" id="tegut-form">
<button type="submit">
<img
src="/assets/tegut.svg"
class="logo"
alt="Tegut-Logo"
alt="Botengang"
/>
</button>
</form>
</div>
<div class="h-container">
<form class="column" id="storno-form">
<button type="submit" id="storno-button">
Storno
</button>
</form>
<form class="column" id="tara-form">
<button type="submit">
Tara
</button>
</form>
</div>
<p id="cnt-msg"></p>
<div class="h-container">
<form class="column" id="push-form">
<button type="submit" class="shout">
↑
</button>
</form>
<form class="column" id="pull-form">
<button type="submit" class="shout">
↓
</button>
</form>
</div>
</main>
<p id="pull-msg"></p>
</body>
</html>

4
src/main.js
View file

@ -1,5 +1,9 @@
const { invoke } = window.__TAURI__.core;
let cafe;
let cafeVoucher;
let cafeInventory;
let cntMsgEl;
let pullMsgEl;

69
src/styles.css
View file

@ -5,9 +5,8 @@
:root {
font-family: Noto Sans, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
font-size: 20px;
line-height: 30px;
color: #0f0f0f;
background-color: #f6f6f6;
@ -17,26 +16,44 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
--b: #98d0c3;
--v: #5c2483;
--y: #f9b000;
}
.h-container {
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-around;
text-align: center;
gap: 3mm;
}
.v-container {
margin: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
text-align: center;
gap: 3mm;
flex-flow: column wrap;
justify-content: space-between;
flex: 1;
min-height: fill;
}
label .logo {
height: 30px;
}
body {
min-height: 98vh;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
}
.nav {
flex: 0;
margin: 3mm;
padding: 3mm;
}
.logo {
@ -46,7 +63,7 @@
transition: 0.75s;
max-height: 100%;
max-width: 100%;
width: 100%;
height: 100%;
}
.column {
@ -56,20 +73,15 @@
margin: auto;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
h1 {
text-align: center;
}
.shout {
font-size: 1.2cm;
font-family: hessenSagtNein;
}
button {
margin: auto;
flex: 1;
@ -85,15 +97,11 @@ button {
background-color: #ffffff;
transition: border-color 0.25s;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
button {
cursor: pointer;
}
.shout {
font-size: 1.2cm;
font-family: hessenSagtNein;
input[type=number] {
border: 1px solid #eee;
}
button:hover {
@ -104,11 +112,6 @@ button:active {
background-color: #e8e8e8;
}
input,
button {
outline: none;
}
@media (prefers-color-scheme: dark) {
:root {
color: #f6f6f6;