From 92e9a8077061a5cc789eee4650536090ca1a748c Mon Sep 17 00:00:00 2001
From: aceberg <1502200+aceberg@users.noreply.github.com>
Date: Sat, 6 Sep 2025 03:15:53 +0700
Subject: [PATCH] About card upd

---
 backend/internal/web/public/assets/Config.js |  2 +-
 backend/internal/web/public/version          |  2 +-
 backend/internal/web/webgui.go               |  1 -
 frontend/src/components/Config/About.tsx     | 48 ++++++++++++++++----
 frontend/src/components/Config/Donate.tsx    | 17 +++++++
 frontend/src/pages/Config.tsx                |  8 ++++
 6 files changed, 65 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/Config/Donate.tsx

diff --git a/backend/internal/web/public/assets/Config.js b/backend/internal/web/public/assets/Config.js
index 947daf7..44a4304 100644
--- a/backend/internal/web/public/assets/Config.js
+++ b/backend/internal/web/public/assets/Config.js
@@ -1 +1 @@
-import{c as J,o as K,a as X,t,i as l,b as c,s as G,d as z,e as d,S as V,f as e,F as O,g as Z,h as tt,j as Q}from"./index.js";var et=t('<div class="card border-primary"><div class=card-header>About (<a target=_blank></a>)</div><div class=card-body><p>● After changing <b>Host</b> or <b>Port</b> the app must be restarted</p><p>● <b>Shoutrrr URL</b> provides notifications to Discord, Email, Gotify, Telegram and other services. <a href=https://nicholas-fedor.github.io/shoutrrr/ target=_blank>Link to documentation</a></p><p>● <b>Interfaces</b> - one or more, space separated</p><p>● <b>Timeout (seconds)</b> - time between scans</p><p>● <b>Args for arp-scan</b> - pass your own arguments to <code>arp-scan</code>. Enable <b>debug</b> log level to see resulting command. (Example: <code>-r 1</code>). See <a href=https://github.com/aceberg/WatchYourLAN/blob/main/docs/VLAN_ARP_SCAN.md target=_blank>docs</a> for more.</p><p>● <b>Arp Strings</b> - can setup scans for <code>vlans</code>, <code>docker0</code> and etcetera. See <a href=https://github.com/aceberg/WatchYourLAN/blob/main/docs/VLAN_ARP_SCAN.md target=_blank>docs</a> for more.</p><p>● <b>Trim History</b> - remove history after (hours)</p><p>● <b>Store History in DB</b> - DEPRECATED. Now History is always stored in DB. Use <b>Trim History</b> to reduce DB size</p><p>● <b>PG Connect URL</b> - address to connect to PostgreSQL DB. (Example: <code>postgres://username:password@192.168.0.1:5432/dbname?sslmode=disable</code>). Full list of URL parameters <a href=https://pkg.go.dev/github.com/lib/pq#hdr-Connection_String_Parameters target=_blank>here</a></p><p>● If you find this app useful, please, <a href=https://github.com/aceberg#donate target=_blank>donate');function lt(){const[i,n]=J(""),[a,s]=J("");return K(async()=>{const r=await X();n(r),s("https://github.com/aceberg/WatchYourLAN/releases/tag/"+r)}),(()=>{var r=et(),o=r.firstChild,p=o.firstChild,b=p.nextSibling;return l(b,i),c(()=>G(b,"href",a())),r})()}var rt=t("<option value=dark selected>dark"),it=t("<option value=light>light"),st=t('<div class="card border-primary"><div class=card-header>Basic config</div><div class="card-body table-responsive"><form method=post><table class="table table-borderless"><tbody><tr><td>Host</td><td><input name=host type=text class=form-control></td></tr><tr><td>Port</td><td><input name=port type=text class=form-control></td></tr><tr><td>Theme</td><td><select name=theme class=form-select></select></td></tr><tr><td>Color mode</td><td><select name=color class=form-select></select></td></tr><tr><td>Local node-bootstrap URL</td><td><input name=node type=text class=form-control></td></tr><tr><td>Shoutrrr URL</td><td><textarea name=shout class=form-control style=width:100%; rows=3 wrap=soft></textarea></td></tr><tr><td><button type=submit class="btn btn-primary">Save</button></td><td><button type=button style=float:right; class="btn btn-info">Test notification</button></td><td>'),nt=t("<option selected>"),at=t("<option>"),ot=t("<option value=dark>dark"),dt=t("<option value=light selected>light");function ct(){const i=["cerulean","cosmo","cyborg","darkly","emerald","flatly","grass","grayscale","journal","litera","lumen","lux","materia","minty","morph","ocean","pulse","quartz","sand","sandstone","simplex","sketchy","slate","solar","spacelab","superhero","united","vapor","wood","yeti","zephyr"],n=()=>{Z()};return(()=>{var a=st(),s=a.firstChild,r=s.nextSibling,o=r.firstChild,p=o.firstChild,b=p.firstChild,_=b.firstChild,m=_.firstChild,f=m.nextSibling,P=f.firstChild,k=_.nextSibling,E=k.firstChild,g=E.nextSibling,I=g.firstChild,w=k.nextSibling,B=w.firstChild,v=B.nextSibling,N=v.firstChild,x=w.nextSibling,R=x.firstChild,C=R.nextSibling,D=C.firstChild,A=x.nextSibling,U=A.firstChild,L=U.nextSibling,H=L.firstChild,T=A.nextSibling,q=T.firstChild,u=q.nextSibling,F=u.firstChild,W=T.nextSibling,Y=W.firstChild,j=Y.nextSibling,M=j.firstChild;return G(o,"action",z+"/api/config/"),l(N,d(O,{each:i,children:S=>d(V,{get when(){return S==e().Theme},get fallback(){return(()=>{var h=at();return h.value=S,l(h,S),h})()},get children(){var h=nt();return h.value=S,l(h,S),h}})})),l(D,d(V,{get when(){return e().Color=="dark"},get fallback(){return[ot(),dt()]},get children(){return[rt(),it()]}})),l(F,()=>e().ShoutURL),M.$$click=n,c(()=>P.value=e().Host),c(()=>I.value=e().Port),c(()=>H.value=e().NodePath),a})()}tt(["click"]);var pt=t('<div class="card border-primary"><div class=card-header>InfluxDB2 config</div><div class="card-body table-responsive"><form method=post><table class="table table-borderless"><tbody><tr><td>Enable</td><td><div class="form-check form-switch"></div></td></tr><tr><td>Address</td><td><input name=addr type=text class=form-control></td></tr><tr><td>Token</td><td><input name=token type=text class=form-control></td></tr><tr><td>Org</td><td><input name=org type=text class=form-control></td></tr><tr><td>Bucket</td><td><input name=bucket type=text class=form-control></td></tr><tr><td>Skip TLS verify</td><td><div class="form-check form-switch"></div></td></tr><tr><td><button type=submit class="btn btn-primary">Save</button></td><td>'),bt=t("<input class=form-check-input type=checkbox name=enable checked>"),$t=t("<input class=form-check-input type=checkbox name=enable>"),ft=t("<input class=form-check-input type=checkbox name=skip checked>"),ht=t("<input class=form-check-input type=checkbox name=skip>");function _t(){return(()=>{var i=pt(),n=i.firstChild,a=n.nextSibling,s=a.firstChild,r=s.firstChild,o=r.firstChild,p=o.firstChild,b=p.firstChild,_=b.nextSibling,m=_.firstChild,f=p.nextSibling,P=f.firstChild,k=P.nextSibling,E=k.firstChild,g=f.nextSibling,I=g.firstChild,w=I.nextSibling,B=w.firstChild,v=g.nextSibling,N=v.firstChild,x=N.nextSibling,R=x.firstChild,C=v.nextSibling,D=C.firstChild,A=D.nextSibling,U=A.firstChild,L=C.nextSibling,H=L.firstChild,T=H.nextSibling,q=T.firstChild;return G(s,"action",z+"/api/config_influx/"),l(m,(()=>{var u=Q(()=>!!e().InfluxEnable);return()=>u()?bt():$t()})()),l(q,(()=>{var u=Q(()=>!!e().InfluxSkipTLS);return()=>u()?ft():ht()})()),c(()=>E.value=e().InfluxAddr),c(()=>B.value=e().InfluxToken),c(()=>R.value=e().InfluxOrg),c(()=>U.value=e().InfluxBucket),i})()}var ut=t('<div class="card border-primary"><div class=card-header>Prometheus config</div><div class="card-body table-responsive"><form method=post><table class="table table-borderless"><tbody><tr><td>Enable</td><td><div class="form-check form-switch"></div></td></tr><tr><td><button type=submit class="btn btn-primary">Save</button></td><td><a href=/metrics target=_blank>/metrics'),mt=t("<input class=form-check-input type=checkbox name=enable checked>"),gt=t("<input class=form-check-input type=checkbox name=enable>");function vt(){return(()=>{var i=ut(),n=i.firstChild,a=n.nextSibling,s=a.firstChild,r=s.firstChild,o=r.firstChild,p=o.firstChild,b=p.firstChild,_=b.nextSibling,m=_.firstChild;return G(s,"action",z+"/api/config_prometheus/"),l(m,(()=>{var f=Q(()=>!!e().PrometheusEnable);return()=>f()?mt():gt()})()),i})()}var xt=t("<option value=sqlite selected>sqlite"),Ct=t("<option value=postgres>postgres"),St=t('<div class="card border-primary"><div class=card-header>Scan settings</div><div class="card-body table-responsive"><form method=post><table class="table table-borderless"><tbody><tr><td>Interfaces</td><td><input name=ifaces type=text class=form-control></td></tr><tr><td>Timeout (seconds)</td><td><input name=timeout type=number class=form-control></td></tr><tr><td>Args for arp-scan</td><td><input name=arpargs type=text class=form-control></td></tr><tr><td>Arp Strings</td><td><input name=arpstrs type=text class=form-control></td></tr><tr><td>Log level</td><td><select name=log class=form-select></select></td></tr><tr><td>Trim History (hours)</td><td><input name=trim type=number class=form-control></td></tr><tr><td>Use DB</td><td><select name=usedb class=form-select></select></td></tr><tr><td>PG Connect URL</td><td><textarea name=pgconnect class=form-control style=width:100%; rows=3 wrap=soft></textarea></td></tr><tr><td><button type=submit class="btn btn-primary">Save</button></td><td>'),yt=t("<input name=arpstrs type=text class=form-control>"),kt=t("<option selected>"),wt=t("<option>"),At=t("<option value=sqlite>sqlite"),Lt=t("<option value=postgres selected>postgres");function Tt(){return(()=>{var i=St(),n=i.firstChild,a=n.nextSibling,s=a.firstChild,r=s.firstChild,o=r.firstChild,p=o.firstChild,b=p.firstChild,_=b.nextSibling,m=_.firstChild,f=p.nextSibling,P=f.firstChild,k=P.nextSibling,E=k.firstChild,g=f.nextSibling,I=g.firstChild,w=I.nextSibling,B=w.firstChild,v=g.nextSibling,N=v.firstChild,x=N.nextSibling,R=x.firstChild,C=v.nextSibling,D=C.firstChild,A=D.nextSibling,U=A.firstChild,L=C.nextSibling,H=L.firstChild,T=H.nextSibling,q=T.firstChild,u=L.nextSibling,F=u.firstChild,W=F.nextSibling,Y=W.firstChild,j=u.nextSibling,M=j.firstChild,S=M.nextSibling,h=S.firstChild;return G(s,"action",z+"/api/config_settings/"),l(x,d(O,{get each(){return e().ArpStrs},children:y=>(()=>{var $=yt();return $.value=y,$})()}),R),l(U,d(O,{each:["debug","info","warn","error"],children:y=>d(V,{get when(){return y==e().LogLevel},get fallback(){return(()=>{var $=wt();return $.value=y,l($,y),$})()},get children(){var $=kt();return $.value=y,l($,y),$}})})),l(Y,d(V,{get when(){return e().UseDB=="sqlite"},get fallback(){return[At(),Lt()]},get children(){return[xt(),Ct()]}})),l(h,()=>e().PGConnect),c(()=>m.value=e().Ifaces),c(()=>E.value=e().Timeout),c(()=>B.value=e().ArpArgs),c(()=>q.value=e().TrimHist),i})()}var Pt=t("<div class=row><div class=col-md><div class=mt-4></div></div><div class=col-md><div class=mt-4></div><div class=mt-4>");function It(){return(()=>{var i=Pt(),n=i.firstChild,a=n.firstChild,s=n.nextSibling,r=s.firstChild,o=r.nextSibling;return l(n,d(ct,{}),a),l(a,d(Tt,{})),l(s,d(_t,{}),r),l(r,d(vt,{})),l(o,d(lt,{})),i})()}export{It as default};
+import{c as J,o as K,a as X,t,i as r,b,s as H,d as W,e as c,S as V,f as e,F as M,g as Z,h as tt,j as Q}from"./index.js";var et=t('<div class="card border-primary"><div class=card-header>About (<a target=_blank></a>)</div><div class=card-body><table class="table table-striped"><tbody><tr><td><b>Swagger API docs</b></td><td><a href=/swagger/index.html target=_blank>/swagger/index.html</a></td></tr><tr><td><b>Local node-bootstrap URL</b></td><td>local themes and fonts (optional). If empty, the app will pull everything from <code>cdn</code></td></tr><tr><td><b>Shoutrrr URL</b></td><td>provides notifications to Discord, Email, Gotify, Telegram and other services. <a href=https://shoutrrr.nickfedor.com/services/overview/ target=_blank>Link to documentation</a></td></tr><tr><td><b>Interfaces</b></td><td>one or more, space separated</td></tr><tr><td><b>Timeout (seconds)</b></td><td>time between scans</td></tr><tr><td><b>Args for arp-scan</b></td><td>pass your own arguments to <code>arp-scan</code>. Enable <b>debug</b> log level to see resulting command. (Example: <code>-r 1</code>). See <a href=https://github.com/aceberg/WatchYourLAN/blob/main/docs/VLAN_ARP_SCAN.md target=_blank>docs</a> for more</td></tr><tr><td><b>Arp Strings</b></td><td>can setup scans for <code>vlans</code>, <code>docker0</code> and etcetera. See <a href=https://github.com/aceberg/WatchYourLAN/blob/main/docs/VLAN_ARP_SCAN.md target=_blank>docs</a> for more</td></tr><tr><td><b>Trim History</b></td><td>remove history after (hours)</td></tr><tr><td><b>PG Connect URL</b></td><td>address to connect to PostgreSQL DB. (Example: <code>postgres://username:password@192.168.0.1:5432/dbname?sslmode=disable</code>). Full list of URL parameters <a href=https://pkg.go.dev/github.com/lib/pq#hdr-Connection_String_Parameters target=_blank>here');function rt(){const[i,d]=J(""),[s,a]=J("");return K(async()=>{const l=await X();d(l),a("https://github.com/aceberg/WatchYourLAN/releases/tag/"+l)}),(()=>{var l=et(),n=l.firstChild,o=n.firstChild,p=o.nextSibling;return r(p,i),b(()=>H(p,"href",s())),l})()}var lt=t("<option value=dark selected>dark"),it=t("<option value=light>light"),st=t('<div class="card border-primary"><div class=card-header>Basic config</div><div class="card-body table-responsive"><form method=post><table class="table table-borderless"><tbody><tr><td>Host</td><td><input name=host type=text class=form-control></td></tr><tr><td>Port</td><td><input name=port type=text class=form-control></td></tr><tr><td>Theme</td><td><select name=theme class=form-select></select></td></tr><tr><td>Color mode</td><td><select name=color class=form-select></select></td></tr><tr><td>Local node-bootstrap URL</td><td><input name=node type=text class=form-control></td></tr><tr><td>Shoutrrr URL</td><td><textarea name=shout class=form-control style=width:100%; rows=3 wrap=soft></textarea></td></tr><tr><td><button type=submit class="btn btn-primary">Save</button></td><td><button type=button style=float:right; class="btn btn-info">Test notification</button></td><td>'),at=t("<option selected>"),nt=t("<option>"),dt=t("<option value=dark>dark"),ot=t("<option value=light selected>light");function ct(){const i=["cerulean","cosmo","cyborg","darkly","emerald","flatly","grass","grayscale","journal","litera","lumen","lux","materia","minty","morph","ocean","pulse","quartz","sand","sandstone","simplex","sketchy","slate","solar","spacelab","superhero","united","vapor","wood","yeti","zephyr"],d=()=>{Z()};return(()=>{var s=st(),a=s.firstChild,l=a.nextSibling,n=l.firstChild,o=n.firstChild,p=o.firstChild,$=p.firstChild,u=$.firstChild,h=u.nextSibling,I=h.firstChild,k=$.nextSibling,P=k.firstChild,g=P.nextSibling,E=g.firstChild,w=k.nextSibling,R=w.firstChild,v=R.nextSibling,N=v.firstChild,x=w.nextSibling,U=x.firstChild,C=U.nextSibling,B=C.firstChild,A=x.nextSibling,q=A.firstChild,L=q.nextSibling,D=L.firstChild,T=A.nextSibling,G=T.firstChild,_=G.nextSibling,F=_.firstChild,O=T.nextSibling,Y=O.firstChild,j=Y.nextSibling,z=j.firstChild;return H(n,"action",W+"/api/config/"),r(N,c(M,{each:i,children:S=>c(V,{get when(){return S==e().Theme},get fallback(){return(()=>{var m=nt();return m.value=S,r(m,S),m})()},get children(){var m=at();return m.value=S,r(m,S),m}})})),r(B,c(V,{get when(){return e().Color=="dark"},get fallback(){return[dt(),ot()]},get children(){return[lt(),it()]}})),r(F,()=>e().ShoutURL),z.$$click=d,b(()=>I.value=e().Host),b(()=>E.value=e().Port),b(()=>D.value=e().NodePath),s})()}tt(["click"]);var bt=t('<div class="card border-info"><div class=card-header>Donations and Work</div><div class=card-body><p>Every <a href=https://github.com/aceberg#donate target=_blank>donation</a> is truly appreciated!</p><p>I am offering self-hosted and mobile apps development for a small price. The Open Source apps I created are listed in my <a href=https://aceberg.github.io/portfolio/ target=_blank>portfolio</a>. They are all human-coded, not generated by AI. Please, <a href=https://github.com/aceberg#contact target=_blank>contact</a> me, if you are interested.');function pt(){return bt()}var ft=t('<div class="card border-primary"><div class=card-header>InfluxDB2 config</div><div class="card-body table-responsive"><form method=post><table class="table table-borderless"><tbody><tr><td>Enable</td><td><div class="form-check form-switch"></div></td></tr><tr><td>Address</td><td><input name=addr type=text class=form-control></td></tr><tr><td>Token</td><td><input name=token type=text class=form-control></td></tr><tr><td>Org</td><td><input name=org type=text class=form-control></td></tr><tr><td>Bucket</td><td><input name=bucket type=text class=form-control></td></tr><tr><td>Skip TLS verify</td><td><div class="form-check form-switch"></div></td></tr><tr><td><button type=submit class="btn btn-primary">Save</button></td><td>'),ht=t("<input class=form-check-input type=checkbox name=enable checked>"),mt=t("<input class=form-check-input type=checkbox name=enable>"),$t=t("<input class=form-check-input type=checkbox name=skip checked>"),_t=t("<input class=form-check-input type=checkbox name=skip>");function ut(){return(()=>{var i=ft(),d=i.firstChild,s=d.nextSibling,a=s.firstChild,l=a.firstChild,n=l.firstChild,o=n.firstChild,p=o.firstChild,$=p.nextSibling,u=$.firstChild,h=o.nextSibling,I=h.firstChild,k=I.nextSibling,P=k.firstChild,g=h.nextSibling,E=g.firstChild,w=E.nextSibling,R=w.firstChild,v=g.nextSibling,N=v.firstChild,x=N.nextSibling,U=x.firstChild,C=v.nextSibling,B=C.firstChild,A=B.nextSibling,q=A.firstChild,L=C.nextSibling,D=L.firstChild,T=D.nextSibling,G=T.firstChild;return H(a,"action",W+"/api/config_influx/"),r(u,(()=>{var _=Q(()=>!!e().InfluxEnable);return()=>_()?ht():mt()})()),r(G,(()=>{var _=Q(()=>!!e().InfluxSkipTLS);return()=>_()?$t():_t()})()),b(()=>P.value=e().InfluxAddr),b(()=>R.value=e().InfluxToken),b(()=>U.value=e().InfluxOrg),b(()=>q.value=e().InfluxBucket),i})()}var gt=t('<div class="card border-primary"><div class=card-header>Prometheus config</div><div class="card-body table-responsive"><form method=post><table class="table table-borderless"><tbody><tr><td>Enable</td><td><div class="form-check form-switch"></div></td></tr><tr><td><button type=submit class="btn btn-primary">Save</button></td><td><a href=/metrics target=_blank>/metrics'),vt=t("<input class=form-check-input type=checkbox name=enable checked>"),xt=t("<input class=form-check-input type=checkbox name=enable>");function Ct(){return(()=>{var i=gt(),d=i.firstChild,s=d.nextSibling,a=s.firstChild,l=a.firstChild,n=l.firstChild,o=n.firstChild,p=o.firstChild,$=p.nextSibling,u=$.firstChild;return H(a,"action",W+"/api/config_prometheus/"),r(u,(()=>{var h=Q(()=>!!e().PrometheusEnable);return()=>h()?vt():xt()})()),i})()}var St=t("<option value=sqlite selected>sqlite"),yt=t("<option value=postgres>postgres"),kt=t('<div class="card border-primary"><div class=card-header>Scan settings</div><div class="card-body table-responsive"><form method=post><table class="table table-borderless"><tbody><tr><td>Interfaces</td><td><input name=ifaces type=text class=form-control></td></tr><tr><td>Timeout (seconds)</td><td><input name=timeout type=number class=form-control></td></tr><tr><td>Args for arp-scan</td><td><input name=arpargs type=text class=form-control></td></tr><tr><td>Arp Strings</td><td><input name=arpstrs type=text class=form-control></td></tr><tr><td>Log level</td><td><select name=log class=form-select></select></td></tr><tr><td>Trim History (hours)</td><td><input name=trim type=number class=form-control></td></tr><tr><td>Use DB</td><td><select name=usedb class=form-select></select></td></tr><tr><td>PG Connect URL</td><td><textarea name=pgconnect class=form-control style=width:100%; rows=3 wrap=soft></textarea></td></tr><tr><td><button type=submit class="btn btn-primary">Save</button></td><td>'),wt=t("<input name=arpstrs type=text class=form-control>"),At=t("<option selected>"),Lt=t("<option>"),Tt=t("<option value=sqlite>sqlite"),It=t("<option value=postgres selected>postgres");function Pt(){return(()=>{var i=kt(),d=i.firstChild,s=d.nextSibling,a=s.firstChild,l=a.firstChild,n=l.firstChild,o=n.firstChild,p=o.firstChild,$=p.nextSibling,u=$.firstChild,h=o.nextSibling,I=h.firstChild,k=I.nextSibling,P=k.firstChild,g=h.nextSibling,E=g.firstChild,w=E.nextSibling,R=w.firstChild,v=g.nextSibling,N=v.firstChild,x=N.nextSibling,U=x.firstChild,C=v.nextSibling,B=C.firstChild,A=B.nextSibling,q=A.firstChild,L=C.nextSibling,D=L.firstChild,T=D.nextSibling,G=T.firstChild,_=L.nextSibling,F=_.firstChild,O=F.nextSibling,Y=O.firstChild,j=_.nextSibling,z=j.firstChild,S=z.nextSibling,m=S.firstChild;return H(a,"action",W+"/api/config_settings/"),r(x,c(M,{get each(){return e().ArpStrs},children:y=>(()=>{var f=wt();return f.value=y,f})()}),U),r(q,c(M,{each:["debug","info","warn","error"],children:y=>c(V,{get when(){return y==e().LogLevel},get fallback(){return(()=>{var f=Lt();return f.value=y,r(f,y),f})()},get children(){var f=At();return f.value=y,r(f,y),f}})})),r(Y,c(V,{get when(){return e().UseDB=="sqlite"},get fallback(){return[Tt(),It()]},get children(){return[St(),yt()]}})),r(m,()=>e().PGConnect),b(()=>u.value=e().Ifaces),b(()=>P.value=e().Timeout),b(()=>R.value=e().ArpArgs),b(()=>G.value=e().TrimHist),i})()}var Et=t('<div class=row><div class=col-md><div class=mt-4></div><div class="mt-4 mb-4"></div></div><div class=col-md><div class=mt-4></div><div class=mt-4>');function Nt(){return(()=>{var i=Et(),d=i.firstChild,s=d.firstChild,a=s.nextSibling,l=d.nextSibling,n=l.firstChild,o=n.nextSibling;return r(d,c(ct,{}),s),r(s,c(pt,{})),r(a,c(Pt,{})),r(l,c(ut,{}),n),r(n,c(Ct,{})),r(o,c(rt,{})),i})()}export{Nt as default};
diff --git a/backend/internal/web/public/version b/backend/internal/web/public/version
index 81628e0..242a448 100644
--- a/backend/internal/web/public/version
+++ b/backend/internal/web/public/version
@@ -1 +1 @@
-VERSION=2.1.3
\ No newline at end of file
+VERSION=2.1.4
\ No newline at end of file
diff --git a/backend/internal/web/webgui.go b/backend/internal/web/webgui.go
index 2fc6c07..7f14c5a 100644
--- a/backend/internal/web/webgui.go
+++ b/backend/internal/web/webgui.go
@@ -42,7 +42,6 @@ func Gui() {
 		"\n  Default DB: " + conf.AppConfig.UseDB +
 		"\n  Log level: " + conf.AppConfig.LogLevel +
 		"\n  Web GUI: http://" + address +
-		"\n  Swagger UI: http://" + address + "/swagger/index.html" +
 		"\n=================================== " + colorReset)
 
 	gin.SetMode(gin.ReleaseMode)
diff --git a/frontend/src/components/Config/About.tsx b/frontend/src/components/Config/About.tsx
index 2371159..45ba424 100644
--- a/frontend/src/components/Config/About.tsx
+++ b/frontend/src/components/Config/About.tsx
@@ -18,16 +18,44 @@ function About() {
         About (<a href={link()} target="_blank">{version()}</a>)
       </div>
       <div class="card-body">
-        <p>● After changing <b>Host</b> or <b>Port</b> the app must be restarted</p>
-        <p>● <b>Shoutrrr URL</b> provides notifications to Discord, Email, Gotify, Telegram and other services. <a href="https://nicholas-fedor.github.io/shoutrrr/" target="_blank">Link to documentation</a></p>
-        <p>● <b>Interfaces</b> - one or more, space separated</p>
-        <p>● <b>Timeout (seconds)</b> - time between scans</p>
-        <p>● <b>Args for arp-scan</b> - pass your own arguments to <code>arp-scan</code>. Enable <b>debug</b> log level to see resulting command. (Example: <code>-r 1</code>). See <a href="https://github.com/aceberg/WatchYourLAN/blob/main/docs/VLAN_ARP_SCAN.md" target="_blank">docs</a> for more.</p>
-        <p>● <b>Arp Strings</b> - can setup scans for <code>vlans</code>, <code>docker0</code> and etcetera. See <a href="https://github.com/aceberg/WatchYourLAN/blob/main/docs/VLAN_ARP_SCAN.md" target="_blank">docs</a> for more.</p>
-        <p>● <b>Trim History</b> - remove history after (hours)</p>
-        <p>● <b>Store History in DB</b> - DEPRECATED. Now History is always stored in DB. Use <b>Trim History</b> to reduce DB size</p>
-        <p>● <b>PG Connect URL</b> - address to connect to PostgreSQL DB. (Example: <code>postgres://username:password@192.168.0.1:5432/dbname?sslmode=disable</code>). Full list of URL parameters <a href="https://pkg.go.dev/github.com/lib/pq#hdr-Connection_String_Parameters" target="_blank">here</a></p>
-        <p>● If you find this app useful, please, <a href="https://github.com/aceberg#donate" target="_blank">donate</a></p>
+        <table class="table table-striped"><tbody>
+          <tr>
+            <td><b>Swagger API docs</b></td>
+            <td><a href="/swagger/index.html" target="_blank">/swagger/index.html</a></td>
+          </tr>
+          <tr>
+            <td><b>Local node-bootstrap URL</b></td>
+            <td>local themes and fonts (optional). If empty, the app will pull everything from <code>cdn</code></td>
+          </tr>
+          <tr>
+            <td><b>Shoutrrr URL</b></td>
+            <td>provides notifications to Discord, Email, Gotify, Telegram and other services. <a href="https://shoutrrr.nickfedor.com/services/overview/" target="_blank">Link to documentation</a></td>
+          </tr>
+          <tr>
+            <td><b>Interfaces</b></td>
+            <td>one or more, space separated</td>
+          </tr>
+          <tr>
+            <td><b>Timeout (seconds)</b></td>
+            <td>time between scans</td>
+          </tr>
+          <tr>
+            <td><b>Args for arp-scan</b></td>
+            <td>pass your own arguments to <code>arp-scan</code>. Enable <b>debug</b> log level to see resulting command. (Example: <code>-r 1</code>). See <a href="https://github.com/aceberg/WatchYourLAN/blob/main/docs/VLAN_ARP_SCAN.md" target="_blank">docs</a> for more</td>
+          </tr>
+          <tr>
+            <td><b>Arp Strings</b></td>
+            <td>can setup scans for <code>vlans</code>, <code>docker0</code> and etcetera. See <a href="https://github.com/aceberg/WatchYourLAN/blob/main/docs/VLAN_ARP_SCAN.md" target="_blank">docs</a> for more</td>
+          </tr>
+          <tr>
+            <td><b>Trim History</b></td>
+            <td>remove history after (hours)</td>
+          </tr>
+          <tr>
+            <td><b>PG Connect URL</b></td>
+            <td>address to connect to PostgreSQL DB. (Example: <code>postgres://username:password@192.168.0.1:5432/dbname?sslmode=disable</code>). Full list of URL parameters <a href="https://pkg.go.dev/github.com/lib/pq#hdr-Connection_String_Parameters" target="_blank">here</a></td>
+          </tr>
+        </tbody></table>
       </div>
     </div>
   )
diff --git a/frontend/src/components/Config/Donate.tsx b/frontend/src/components/Config/Donate.tsx
new file mode 100644
index 0000000..93447dd
--- /dev/null
+++ b/frontend/src/components/Config/Donate.tsx
@@ -0,0 +1,17 @@
+
+
+function Donate() {
+
+  return (
+    <div class="card border-info">
+      <div class="card-header">Donations and Work</div>
+      <div class="card-body">
+        <p>Every <a href="https://github.com/aceberg#donate" target="_blank">donation</a> is truly appreciated!</p>
+        <p>I am offering self-hosted and mobile apps development for a small price.
+          The Open Source apps I created are listed in my <a href="https://aceberg.github.io/portfolio/" target="_blank">portfolio</a>. They are all human-coded, not generated by AI. Please, <a href="https://github.com/aceberg#contact" target="_blank">contact</a> me, if you are interested.</p>
+      </div>
+    </div>
+  )
+}
+
+export default Donate
\ No newline at end of file
diff --git a/frontend/src/pages/Config.tsx b/frontend/src/pages/Config.tsx
index cc012a7..b5471ef 100644
--- a/frontend/src/pages/Config.tsx
+++ b/frontend/src/pages/Config.tsx
@@ -1,5 +1,6 @@
 import About from "../components/Config/About"
 import Basic from "../components/Config/Basic"
+import Donate from "../components/Config/Donate"
 import Influx from "../components/Config/Influx"
 import Prometheus from "../components/Config/Prometheus"
 import Scan from "../components/Config/Scan"
@@ -9,13 +10,20 @@ function Config() {
   return (
     <div class="row">
       <div class="col-md">
+        
         <Basic></Basic>
+        
         <div class="mt-4">
+          <Donate></Donate>
+        </div>
+        <div class="mt-4 mb-4">
           <Scan></Scan>
         </div>
       </div>
       <div class="col-md">
+        
         <Influx></Influx>
+        
         <div class="mt-4">
           <Prometheus></Prometheus>
         </div>