From 814564525215ca69ec3738442038ac5ef9f2f507 Mon Sep 17 00:00:00 2001 From: Joakim Date: Tue, 6 Jan 2026 16:17:57 +0100 Subject: [PATCH] feat(pwa): complete PWA configuration - Generate PWA icons in multiple sizes (72-512px) - Create favicon.svg with app branding - Add offline.html fallback page - Update app.html with PWA meta tags - Add theme-color and apple-touch-icon - Configure viewport-fit for mobile notches - PWA manifest already configured in vite.config.js - Service worker caching already configured --- opal-web/generate-icons.sh | 24 +++++++++ opal-web/src/app.html | 6 ++- opal-web/static/favicon.svg | 4 ++ opal-web/static/icons/icon-128.png | Bin 0 -> 1232 bytes opal-web/static/icons/icon-144.png | Bin 0 -> 1305 bytes opal-web/static/icons/icon-152.png | Bin 0 -> 1352 bytes opal-web/static/icons/icon-192.png | Bin 0 -> 1505 bytes opal-web/static/icons/icon-384.png | Bin 0 -> 2612 bytes opal-web/static/icons/icon-512.png | Bin 0 -> 3559 bytes opal-web/static/icons/icon-72.png | Bin 0 -> 997 bytes opal-web/static/icons/icon-96.png | Bin 0 -> 1109 bytes opal-web/static/offline.html | 76 +++++++++++++++++++++++++++++ 12 files changed, 109 insertions(+), 1 deletion(-) create mode 100755 opal-web/generate-icons.sh create mode 100644 opal-web/static/favicon.svg create mode 100644 opal-web/static/icons/icon-128.png create mode 100644 opal-web/static/icons/icon-144.png create mode 100644 opal-web/static/icons/icon-152.png create mode 100644 opal-web/static/icons/icon-192.png create mode 100644 opal-web/static/icons/icon-384.png create mode 100644 opal-web/static/icons/icon-512.png create mode 100644 opal-web/static/icons/icon-72.png create mode 100644 opal-web/static/icons/icon-96.png create mode 100644 opal-web/static/offline.html diff --git a/opal-web/generate-icons.sh b/opal-web/generate-icons.sh new file mode 100755 index 0000000..0909aa2 --- /dev/null +++ b/opal-web/generate-icons.sh @@ -0,0 +1,24 @@ +#!/bin/bash +# Generate PWA icons from SVG using ImageMagick (if available) +# Otherwise, create placeholder text files + +SIZES=(72 96 128 144 152 192 384 512) +ICON_DIR="static/icons" + +mkdir -p "$ICON_DIR" + +if command -v convert &> /dev/null; then + echo "Generating icons with ImageMagick..." + for size in "${SIZES[@]}"; do + convert -background "#4f46e5" -fill white -font Arial-Bold \ + -size ${size}x${size} -gravity center \ + label:O "$ICON_DIR/icon-$size.png" + echo "Created icon-$size.png" + done +else + echo "ImageMagick not found. Creating placeholder icon files..." + for size in "${SIZES[@]}"; do + echo "Placeholder $size x $size icon" > "$ICON_DIR/icon-$size.png" + done + echo "Note: Install ImageMagick and re-run to generate real icons" +fi diff --git a/opal-web/src/app.html b/opal-web/src/app.html index f273cc5..1262ab3 100644 --- a/opal-web/src/app.html +++ b/opal-web/src/app.html @@ -2,7 +2,11 @@ - + + + + + %sveltekit.head% diff --git a/opal-web/static/favicon.svg b/opal-web/static/favicon.svg new file mode 100644 index 0000000..b96d64a --- /dev/null +++ b/opal-web/static/favicon.svg @@ -0,0 +1,4 @@ + + + O + diff --git a/opal-web/static/icons/icon-128.png b/opal-web/static/icons/icon-128.png new file mode 100644 index 0000000000000000000000000000000000000000..a360fa658138f72900d503e01dcae2927ba73c86 GIT binary patch literal 1232 zcmeAS@N?(olHy`uVBq!ia0y~yU}ykg0VW0p2AMNj_Zb)%6p}rHd>I(3)EF2VS{N99 zf#hE>Fq9fFFuY1&V6d9Oz#v{QXIG#N0|NtFlDE6de=y*T_#6(bwJ zAg`;*pB)Sg45}rr5hW>!C8<`)MX8A;sSHL2MrOJOhPno3A%><_hUQj=#@Yr3Rt5%3 z^dbdOH00)|WTsW()^N4>;aUa;1`W6kC7HRY#U+Wk1-SJzr5z|@U|`EaktaqI0( zZx4||hT|Xq`)rC@oyfT;?#-po8!9-ul&o8n1apKsg)V)wc%!Lr+v?{iRl4%BoQSy! zkMfd^35%S)0tHm6Up!Uiw~M%O^@49~$@0S$9#t}0zuou0e{Qjxdw=6kJ>%Ve7BSJ* zR#|mfr4?tr&4r3q^*z~tt2Dts)-nBsZ>Yxqo4a0po%+s{`46*N{PN2?H+Oa|T>ja5 z{&#-6nbtESWM0j?Z&&^Q^SPKm?(>W4L>v@EZ@jHp^FCifTPKst?0A>iZ9B&Y;a`^Q z>i66K*80ls%rvd&IkF$L_Sb#2W}K3%X+N`Exy*3i{x6$2XDukqozL{)_9eAcvBkL) zkDt8O`S9bqRoxc0RBLY7^k=v9f3#m=i&&H5aFa~|W3hwoP1-n@Rn;cq+#_{>ehwwnKMeJj}@+xNV3 z-gA)rLH)lI+!#g?MIrFak8g>4(em8$3~vgAZ?_43-VJ8Xx0iS`-#W3HEunq(hqk=4 z`P*%oHyob3_j{$g-o42$`~3EAw`KcLT@`fKeffR8zg$l3sB-u7I%pZg;q z;!en=n#~!j-x@R2wf?VpegDbta;y0LzgTCwUlSD;_KaX)U|{fc^>bP0l+XkK{EzK` literal 0 HcmV?d00001 diff --git a/opal-web/static/icons/icon-144.png b/opal-web/static/icons/icon-144.png new file mode 100644 index 0000000000000000000000000000000000000000..5146ab8b786478d57da272ec2f54e65139484c2d GIT binary patch literal 1305 zcmeAS@N?(olHy`uVBq!ia0y~yV3+{H0!$1H3>I5fu3=zcP)PO&@?~JCQe$9fXklRZ z#lXPO@PdJ%)PRBERRRNp)eHs(@q#(K0&N%=7}%1$-Ch2J0cXVbI}8jA>?NMQuI#TE z+4u!{T}}S%U|?WSEpd$~Nl7e8wMs5ZO)N=eFfuSQ(={;EH82Y?G_^7`w=y)=HZZU< zFj%4&DTtyWH$NpatrE9}tHlr3GB7Y`z-=hW%uOvWNz5(4t*0sNKoJ82^G{C~$B>F! zZ*Tf%Ok-s@{_%P3)U&gW6&YOVj@@M6zOi|N#w|q|p@Tx6Qv|{*Z+PneHC!0Hz%BOG zmgYxEM-EL0bn&>P=&C6oWu5X;mA}~NM$C?t(z~`F-rXF;CR=Co?(JtwyZ65jy|=8X zoNqt%-Me+`E?#^TZ+q?UkMmdO^?5yieOBCj-=@mjn;y&VFDo;dUte_k)Yhy1TtDP@ zd_4W+$)DZI*=_Z6?iM`!vQz%u8|j_qHU_)@eKX%~cILbNoA9aatk+B~Zdv*1__xc} z>vi*Q-`%u4|EO{5dHg&dd_x6}-YL!{Ecg?%D(PfI{$0! zh5tprA1+#&p}8t`K9kKSweHSGaqlP2Gk)B@E?&~Q@Vmp`56mCeR8@VI_O^d(ed~YJ z@4(E1^&2*2Xixi6duRXZzl(pxhy4BEj$%)>(~9-_a^p2#wuBFtM4Z9I@N3@ z%U&JJogE)lw&soGg&C`4uUp0E{96fPYi*5M8@76?Ewj{Q^H>2D0}dex7EYcf7B)ww zW`#z_2?rEB5=Moo7bdIB&-um8t=|m_`&G*4`TNi0X@TRXHUIqFeV@Z_8ZR&mbA1sVi8&HCsy|;k6ntc1uKIN!e-Y!OK8Eq%3?iO@ zlG?oseUo1=TQ0^lJA1ZueD$jDhv&UN#y@p0pV;<$%C_mp_|I-VH+SvY+6T5bzTQ99 zclYl7-+t$(KYo8zTc=t}M+jur{ptKEoa@);;$LU4`8D;y-}(PoZ=JbjDz_&FRQNG?y85}S Ib4q9e07FF)7ytkO literal 0 HcmV?d00001 diff --git a/opal-web/static/icons/icon-152.png b/opal-web/static/icons/icon-152.png new file mode 100644 index 0000000000000000000000000000000000000000..de37768a1019002062c7bb888277b74c75c13e26 GIT binary patch literal 1352 zcmeAS@N?(olHy`uVBq!ia0y~yV3+~I0!$1H495+!O&J&%6p}rHd>I(3)EF2VS{N99 zF)%PRykKA`HDF+PmB7GYHG_dcykO3*KpO@I2DT(`cbETQz!~xV4g&)Ndx@v7EBh-( zHhw`~SCccptHiD0YVpIh3=9k!a2rZ8b5n~;5_1c1>uE|mP{hE%qT%V{7*cWT z?M?rTYo!dwKfeF0G24{4*x*Wc>?Zs6jm;A@ZYjzL9Tf7MB5-~FVZX|k{hV`|OkV{p zmlY9L7HjKKa+<`a>D74QhN8EALEZTM^I+Re|u z_g}kw`R?DJo_?Ay_qy`W^{V{zwXeTkE0&JCxux{v#B=v|TScF@*;#pX)~|HdiW6V& ztEr{kmyfmm^!dxL&FX&tOP;^ISgqWA`E_1>dG_Bo2Nu_bR)KReu!!E6=;< zPT_(rQ?~`J|0R-eZ>GlMr*ZcW-kY5KdwuMlsxR;EJ$uNW6#etdDs!>=d-WL)w)Qy( zwfw)>btz8lYrWNm&5tKPi%A&n{Zd@u{@M`IX4JPZ|W}9~wJLXyM zdwl59)3aHt=dpA9L}zM$efD|Qt#iuj?FvgzUzmNke*K?~uVOb`xN0q4`Zmut{439b zDM7EKx8+r3o_x3}onh&ep!a(&eNB3;A9|j_OLOV93=^qdx2whtL0#s(6I><;jH1C1 z0!!-tUOBS#X8G!Qj8lTVYQOxPc=2T~B*yB#{l2XJZcivAW*7HPT)*sks4cU`(kZ{* z=I8G{Q6iwN(;22EwU(?nvLO%XxeD zFxOVyS-P)g@4&Tq8nR7E{_m;Om`nbKP zzt6h=_vxnRtL&I(@XtD*J5Hn!&&zUNC1@pbY~916z`}yUTwt;Eecwhk=2Cy~NYkmHibX z8^0j0tI3}o3=9maC9V-ADTyViR>?)Fi6yBFMg~S^x(0^224*3KrdEdLR))sf1_o9J z221oJ1yMBQ=BH$)RpQogwfNy$1_lNVxD6$lxv9k^iMa*1^)#g&C}Ln>Iq2!)7*cWT z?JfU|X{-##KR&OWdUn>aB7Vq4v1EHJI#MvTeeS1A^3o+-S5|n> zEenY0iO@+A5mbJ8!9`O*$~xtxDu1!jjhG!PrStOJ%h{K{5&2W_{&{iDyzi~|i+_Hy zJO6u%mG$l0>gwJ9zeGHLynjk{ly~m>>+!d~o|@OkyF9u+JA3W^4^Qr$y?tuFn8VrK zKVQFjbE;Z6`gncRoyx*5fBMV&eRTTy_1^9H{Pyi!ZD#)8VJ{OISIu5|JNDP+>@Nqt z_WHIOBtz4agp00m>W%A$jzv}F9*>;+? z2mYrOUkq9E`hUuUgwMyX&bPRFcy;H>*{g3y@4EK?;DLS59=}|AAS!I{?p1bAB6$O@ z-((IqGYiw6I*)x#CapVkN zU}gC6dDG42fZ030R^9IYYQH?4Ve5*Jl_6SFy{gy(y7#3d4f~dqn{r;kKTPL>7c6>|L5JG7k9T`GH!?pnYW^+e&-HlTjmw6 zPp$9YsY^^v$VlAq{hItsLx;5zvm|Y5UVnPEKS5dcaP;%^uGXZ55uW_a*S6eDS{5O9 z(|%8FU7o3fx39OjmjBnfE1&Uq(T4 zkzCfRe@T~%UurYR*I(3)EF2VS{N99 zF)%PRykKA`HDF+PmB7GYHG_dcykO3*KpO@I2DT(`cbETQz!~xV4g&)Ndx@v7EBh-( zHhw`~SCccptHiD0YVpIh3=9k!a2rZ8b5n~;5_1c1>uE|mP{hE%DdOqk7*cWT z?H&J)7y>{_4hu1TYrC7dG*u3 z`%FLAF`DeQtNwrHKL32XPsh&P?LQ+MyYFxC<$Vqe4g9Z;{QBswzrX6$!pY_FJGX4j zetjn6{_gYtW;5LS{nA=~_t)j8@5ldqG*6wqxOwNnf?LxW7(T?`lvu;RPTzLxk3+XM zcCU}Gcz5gZ3{}+AX%WRn$5{lZs%T_($ z-fnCBR+52XvhkeyAkP{g_|h9_e4(XT5Goravpg5BVHEGxpow{yP7P-gd%kYh!M1cK&(x|JTo-52=hF zKJVYNt@yg~?*4yozMc2^&BefAx8mdHvya5k literal 0 HcmV?d00001 diff --git a/opal-web/static/icons/icon-512.png b/opal-web/static/icons/icon-512.png new file mode 100644 index 0000000000000000000000000000000000000000..cef4881d3a38c724c5d154c2f7521fd3de99dec8 GIT binary patch literal 3559 zcmeAS@N?(olHy`uVBq!ia0y~yU}6Aa0T89#HUAw01A{`cN02WALzNl>LqiJ#!!HH~ zhK3gm45bDP46hOx7_4S6Fo+k-*%fHRz`($kNoHmSXC&tB_`ljZZs&V%ewkfwZ|>axX8!GumyYw_ z*_i+3F(U)RhPU_reE#+8T6x$ztKaRbzwfL0b@cxJ&o@qe-F$rgz0cp)-``c9{qwJ# zY0Z9y8IiMh*8li^czOSxjm6)UH@i>I`+sGNzW@Wnj|BB=efCv9uLkqa-Shj@(zCI% z(~teW_xII)&W647_kG?NUBBzg->3TTDvJ!PXUO&}tL0)~I8dKiyTNS7z8_Z(aj!nE zx3BKu&g_1FzWvW1)xB4L|L4|P`^c)QpW4;)%3ks_F#JFMPU4N+olRdBKW+d1r{I(5 z|0f@Mz5mSgHfC>oK5gIjKM&@qFW)P|z_4ScTKRXMyifZD8QSODf4X%pcCy!uZ#E1J z50=f6J;UcV`FV9azy0s0{jn7vj$HTuoBaO$vc2343_l8bpXJ@GFFCG#c^)GJLr(j} z+IG1ghjP#RRI@QKY>;&;&VTd&PoKRXgxmJ`V}*^JKZNt=l05@M3kL%O0|zK|2`GUQ zxeEgWgF^=>Z3{3mFfb^BGJq2c!>Gd1;2BL63=E@Lfq{WxG%Ji|h0&}qT4|0p6$WVo zDdo$vnO}>e@6YMq5x-d7?y8(yuR%&OKdx*Q59`l;cgx23-uHR` z8F&1+&V4@S_p?Xa#p^cyy6dUxQ?13o@WKA3L=Mk3vH1}{p1u+mkKg~{&er4V?d_jG zv-8ih|G)nI{GBGn2^H@?e0Gn!z4P_NyYBU6ztfl1vN13mV4rPs-+JfC`l99McgO!# ZH|M-5`mZU7nSp_U!PC{xWt~$(69DVMooN67 literal 0 HcmV?d00001 diff --git a/opal-web/static/icons/icon-72.png b/opal-web/static/icons/icon-72.png new file mode 100644 index 0000000000000000000000000000000000000000..097976329093c6198b435b1272eabe7254d293b6 GIT binary patch literal 997 zcmeAS@N?(olHy`uVBq!ia0y~yVDJE80VW0phA#OZ!3+!x3dtTpz6=aiY77hwEes65 z7#J8DUNA6}8Za=tN?>5Hn!&&zUNC1@pbY~916z`}yUTwt;Eecwhk=2Cy~NYkmHibX z8^0j0tI3}o3=9maC9V-ADTyViR>?)Fi6yBFMg~S^x(0^224*3KrdEdLR))sf1_o9J z221oJ1yMBQ=BH$)RpQogwfNy$1_lNVxD6$lxv9k^iMa*1^)#g&C}Ln>I_l}-7*cWT z?OlJ5$%QhbWG24{4*kGCX?l0dB$^?X5ty`1?bvj)*GpDxCeRWA**ormn%2GdT z4O_*H22Ncafh8V+TrJ1={_cHp(4NOk+^Y1jt$+J{zJHnDE<8QnUK@A(dE$rKip|f@ zzg*4A^!9CWaZ-3SQ?>m|$NA6f-_Oakx_c?m@X_x_-z}Ga+kWlJYkro$)0duKIi*rL zPW<fU96Z^ENCCiE>?9QpgIC5npGY|ED_RyGL&P&&3~dA5TdS*wNzsVwL_vm8C90Pn^q} z-wQE!+l$NP$4qVCe&mDPn!OSK3~W;7eC9Ennq+!N_tc^9y?N(te~M3P=k}DzbYE>I zy)Si3C0nS!*X@(L=hk?LHkIys@hdP=cl9c{{;~qj=@*{?)}8>`(kb8>sr>a&sWVmwQ7~SZldHw!L$|j zKWr}UuVhdAsJj^y`r78-zwW4>A0iuC%evHQpZ|&WDSJNW+Wltdzopr07apk@Bjb+ literal 0 HcmV?d00001 diff --git a/opal-web/static/icons/icon-96.png b/opal-web/static/icons/icon-96.png new file mode 100644 index 0000000000000000000000000000000000000000..3792996159136e0b49589cd304f838394788a485 GIT binary patch literal 1109 zcmeAS@N?(olHy`uVBq!ia0y~yU`POA0VW0p2HPwf9R>ylg=CK)Uj~LMH3o);76yi2 z3=9knFBlj~4Hy_+B``2p&0t^6frO`n|iu9hE&{o zd&Ap9q>$nG$NxSXqgE$!CB?qE^m#*tz$7JW7bU?QrB0zs-z?r}>f8Ff5Qzw!ZuNFy zhVvlf!f2Vm#zlyfaM{He2`B+d=Tete(iO z_%2)T?>==ickI3KR6b77{p>T|<6-gsF@AFE_W4*vEW8vlGqiK{$#1W;|M~aSS6EKG zP_p8pr1u>EckAD6-79kR+nc_6?dbh_qDye_1o=yYiHlM zUtjZ~`fTv+-2ygwDWS3HC!=p03xvE|_ssUUSN^SejSGsD@4xysZO=AaX2+)$^PX4E zdn?JIb?=LVlfwi70TmV&PDaOJ!0fa(og=F~2kgsbWj)Kp%5H=F9&alrIm4B_Tx+Qn< zUpA>FPlH6ZKKqpQr}lp_JF0(d-jeE^_0Ai+!BP7JoCvzUJ4}{W&(oXNHNW$&_x#V= zn{7p1mD7us3B2#S>tF58I{473Gt7KjNTXxe!OF~NTY2MHK&6Uvp lzvhkolON@);?MtMan8PaRme|w0s{jBgQu&X%Q~loCIH + + + + + Offline - Opal Task Manager + + + +
+ + + +

You're Offline

+

It looks like you've lost your internet connection. Please check your connection and try again.

+ +
+ +