formatting, keyboard event, new icon

assets/icons/icon.svg

@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="135mm"
+   height="135mm"
+   viewBox="0 0 135 134.99999"
+   version="1.1"
+   id="svg826"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="icon.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="namedview828"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="0.69664703"
+     inkscape:cx="231.82472"
+     inkscape:cy="427.76326"
+     inkscape:window-width="1850"
+     inkscape:window-height="1043"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs823" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-30.263197,-33.55683)">
+    <path
+       d="m 119.06724,152.65127 -16.51259,-24.46343 c -0.12652,-0.18782 -0.38256,-0.24064 -0.57092,-0.11445 -0.12065,0.0792 -0.18835,0.21423 -0.18245,0.35803 l 1.60094,37.91312 c 0.0118,0.29924 0.26487,0.53393 0.56504,0.52229 0.12359,-0.006 0.24427,-0.0529 0.33843,-0.13494 l 14.58799,-12.74535 c 0.3855,-0.33748 0.46196,-0.90974 0.17356,-1.33527 z m -19.06703,-24.65419 -20.229535,25.82806 c -0.347263,0.44302 -0.267805,1.08569 0.176573,1.43203 0.04709,0.0352 0.09417,0.0675 0.147146,0.0968 l 21.918766,11.70649 c 0.309,0.16431 0.69159,0.0471 0.8564,-0.26114 0.053,-0.0998 0.0795,-0.2114 0.0736,-0.3257 l -1.61859,-38.05105 c -0.0176,-0.40792 -0.36197,-0.72486 -0.77104,-0.71019 -0.21778,0.009 -0.42082,0.11445 -0.55327,0.28466 z"
+       fill="#000000"
+       id="path2"
+       style="fill:#de324c;fill-opacity:1;stroke-width:0.264583" />
+    <path
+       d="m 145.43148,53.861965 c -0.31425,0.09114 -0.29853,0.641117 -0.3111,0.879964 l -0.72279,14.874581 c -0.0377,0.791977 0.18854,1.577658 0.64106,2.228189 l 9.94939,14.271201 c 0.10689,0.153988 0.37703,0.578115 0.55616,0.531019 0.2577,-0.07223 0.22622,-0.63156 0.22622,-0.776287 l -0.006,-16.464704 c 0.003,-0.389678 -0.11325,-0.773112 -0.33311,-1.096803 l -9.32092,-13.8469 c -0.12258,-0.201134 -0.39912,-0.681972 -0.67881,-0.60026 z m -24.2229,24.189647 21.76542,-7.036594 c 0.52795,-0.175974 0.89564,-0.656828 0.92707,-1.213088 l 0.7919,-16.310811 c 0.0157,-0.289131 -0.2074,-0.537407 -0.49651,-0.553121 -0.0691,-0.0031 -0.13828,0.0063 -0.20426,0.03143 l -20.56183,7.391719 c -0.32055,0.116285 -0.55309,0.399124 -0.60651,0.73541 l -2.49834,16.207078 c -0.0566,0.37084 0.19484,0.716545 0.56566,0.773112 0.10685,0.01887 0.2137,0.0094 0.3174,-0.02513 z m 21.70258,-6.505469 -21.778,7.042891 c -0.19798,0.06599 -0.35511,0.223123 -0.41482,0.421111 -0.0597,0.201136 -0.0189,0.417882 0.10684,0.581395 l 11.16554,14.261835 c 0.23257,0.29845 0.62222,0.427302 0.98677,0.323586 l 21.68988,-6.040173 c 0.0757,-0.02222 0.1479,-0.05662 0.21061,-0.100806 0.11959,-0.08467 0.2106,-0.201084 0.2577,-0.339196 0.0786,-0.213784 0.0471,-0.449527 -0.0818,-0.635 L 144.6427,72.127538 c -0.38026,-0.553111 -1.08733,-0.791951 -1.73154,-0.581395 z"
+       fill="#000000"
+       id="path2-3"
+       style="fill:#f4895f;fill-opacity:1;stroke-width:0.264583" />
+    <path
+       d="m 56.136477,89.83976 -9.9936,-9.248431 c -0.11803,-0.109114 -0.30303,-0.105913 -0.41789,0.0064 l -2.3732,2.371513 -7.78946,7.782005 c -0.13078,0.131498 -0.13078,0.346604 0,0.478102 0.0446,0.04498 0.10207,0.07699 0.16268,0.08996 l 28.79098,6.498168 c 0.0479,0.01296 0.0958,-0.01905 0.10848,-0.0672 0.006,-0.03228 -0.003,-0.06429 -0.0254,-0.08678 z m -10.64115,-9.569344 c 0.12759,-0.128376 0.18183,-0.317685 0.13716,-0.494189 l -4.91865,-19.864069 c -0.0191,-0.07702 -0.0989,-0.125156 -0.17545,-0.1059 -0.0542,0.01284 -0.0957,0.05777 -0.10845,0.115528 l -5.3397,30.479685 c -0.01,0.05768 0.0287,0.112183 0.0829,0.121973 0.0319,0.0064 0.067,-0.0032 0.0925,-0.02884 l 7.89473,-7.887996 z m 0.47848,-0.760545 c 0.0319,0.12835 0.15949,0.208598 0.29027,0.176504 0.0223,-0.0064 0.0415,-0.01283 0.0606,-0.02569 l 25.19616,-14.517768 c 0.0862,-0.05133 0.11483,-0.160443 0.0669,-0.247094 -0.0254,-0.04493 -0.0701,-0.07702 -0.11801,-0.08665 l -30.06689,-6.138919 c -0.21691,-0.04493 -0.42744,0.09948 -0.4721,0.317693 -0.0128,0.05776 -0.01,0.118737 0.003,0.176498 z m 25.88516,-14.100598 -6.35397,3.658341 -18.94427,10.913983 c -0.1244,0.07059 -0.16586,0.231061 -0.0957,0.356208 0.0128,0.02246 0.0287,0.04172 0.0478,0.06096 l 3.18342,2.942723 15.38433,14.232043 c 0.10213,0.09313 0.25849,0.08678 0.35083,-0.01588 0.0288,-0.03201 0.0511,-0.07382 0.0606,-0.118798 l 6.63496,-31.837042 c 0.019,-0.09625 -0.0415,-0.192538 -0.13732,-0.215001 -0.0479,-0.0064 -0.0923,0 -0.13071,0.02246 z"
+       fill="#000000"
+       id="path2-6"
+       style="fill:#f8e16f;fill-opacity:1;stroke-width:0.264583" />
+    <path
+       d="m 73.909975,137.19333 -7.1546,-25.79191 c -0.0106,-0.0455 -0.0524,-0.0736 -0.0979,-0.0771 -0.0561,0 -0.10504,0.042 -0.10504,0.0981 l -0.74876,25.78835 c -0.007,0.28734 0.091,0.57097 0.27649,0.79164 l 4.64952,5.52423 c 0.014,0.0175 0.0349,0.0315 0.0561,0.0421 0.0804,0.0384 0.17489,0.003 0.21325,-0.0773 l 2.89349,-6.13013 c 0.0281,-0.0524 0.0349,-0.11192 0.0175,-0.16801 z m -7.83325,1.57268 c -0.4199,-0.49741 -1.01812,-0.80195 -1.66556,-0.84772 L 51.053676,136.9552 c -0.32189,-0.0212 -0.62976,0.13309 -0.80467,0.40614 l -7.69692,12.09569 c -0.021,0.0315 -0.028,0.0735 -0.021,0.11218 0.0175,0.0839 0.0979,0.13997 0.18193,0.1225 l 27.547809,-5.62557 c 0.0246,-0.004 0.0455,-0.014 0.063,-0.0318 0.0595,-0.0524 0.0701,-0.13996 0.0175,-0.2032 z m -32.540509,-16.85938 7.37154,1.66039 0.0315,0.007 c 0.41283,0.0911 0.84314,0.021 1.207,-0.19616 L 64.540825,109.9302 c 0.0489,-0.0175 0.077,-0.0736 0.0595,-0.1226 -0.0177,-0.049 -0.0701,-0.0771 -0.1225,-0.0596 h -0.004 l -26.844579,5.36646 c -0.15742,0.0315 -0.29387,0.12959 -0.37785,0.2662 l -3.78197,6.3718 c -0.004,0.007 -0.007,0.0175 -0.0105,0.0245 -0.014,0.056 0.021,0.11559 0.077,0.12959 z m 16.28244,14.33737 -7.94178,-11.47199 c -0.25541,-0.36779 -0.64376,-0.63052 -1.08109,-0.7286 l -7.1861,-1.61484 c -0.0245,-0.007 -0.049,-0.004 -0.0735,0.004 -0.0735,0.0245 -0.11545,0.1016 -0.091,0.17516 l 8.37214,26.61511 c 0.0245,0.0804 0.11194,0.12595 0.1924,0.1016 0.035,-0.0106 0.063,-0.0315 0.084,-0.0632 l 7.74237,-12.16898 c 0.16444,-0.25929 0.15746,-0.59187 -0.0175,-0.84773 z m -7.23857,-12.55088 c -0.31838,0.22069 -0.39886,0.66204 -0.17495,0.98081 l 7.63043,11.02014 c 0.31837,0.46238 0.82918,0.75313 1.38895,0.79176 l 13.088249,0.94562 c 0.0106,0 0.0209,0.003 0.0315,0.003 0.4199,0.0106 0.77312,-0.31855 0.78714,-0.74242 l 0.76968,-26.38041 c 0,-0.0771 -0.0175,-0.15763 -0.0595,-0.22419 -0.1188,-0.19266 -0.37068,-0.25571 -0.5633,-0.14012 l -22.856159,13.72438 c -0.014,0.004 -0.028,0.0105 -0.042,0.021 z"
+       fill="#000000"
+       id="path2-7"
+       style="fill:#95cf92;fill-opacity:1;stroke-width:0.264583" />
+    <path
+       d="m 98.018544,69.090094 -11.24802,-6.45821 c -0.22701,-0.12991 -0.48646,-0.20056 -0.74887,-0.20056 h -5.8761 c -0.12678,0 -0.22998,0.10319 -0.22998,0.23019 0,0.059 0.0236,0.11801 0.0649,0.15928 l 5.21272,5.45465 c 0.0825,0.0857 0.18573,0.15346 0.29779,0.19791 l 11.65783,4.47754 c 0.22704,0.0857 0.48059,-0.0265 0.5661,-0.25082 0.006,-0.0148 0.0118,-0.0294 0.0147,-0.0471 l 0.68403,-2.62414 c 0.0943,-0.36592 -0.0678,-0.74983 -0.3951,-0.93874 z m 16.387026,-9.79653 -1.59199,0.41915 -3.39064,0.89141 c -0.21246,0.0561 -0.40693,0.15938 -0.57494,0.30107 l -2.42358,2.09261 -7.005376,6.04811 c -0.28306,0.245 -0.48353,0.56965 -0.57788,0.92974 l -0.67813,2.5916 c -0.0236,0.0857 0.0295,0.17409 0.11499,0.19791 0.0442,0.0116 0.0884,0.006 0.12676,-0.0177 l 12.418596,-7.70705 c 0.0529,-0.0323 0.10028,-0.0767 0.13547,-0.12965 l 3.59701,-5.40463 c 0.0413,-0.065 0.0267,-0.15055 -0.0381,-0.19188 -0.0325,-0.0236 -0.0738,-0.0295 -0.11219,-0.0207 z m 0.55722,-0.94454 -1.34726,-12.65388 c -0.0238,-0.22432 -0.12092,-0.43093 -0.28019,-0.59328 l -5.81131,-5.89745 c -0.0648,-0.0679 -0.17092,-0.0679 -0.23575,-0.003 -0.0206,0.0177 -0.0354,0.0443 -0.0442,0.0679 l -2.60054,7.88688 c -0.11795,0.35422 -0.11205,0.74088 0.0206,1.08918 l 3.68856,9.91767 0.57785,1.55554 c 0.11483,0.30993 0.44503,0.48112 0.76649,0.39846 l 3.62956,-0.95634 1.3118,-0.34536 c 0.20955,-0.0502 0.34502,-0.25088 0.32438,-0.46635 z m -25.123016,-10.5759 c 0.28305,0.44572 0.78721,0.70252 1.31498,0.66413 l 2.09336,-0.14758 10.272106,-0.72906 c 0.35086,-0.0266 0.65159,-0.25974 0.76068,-0.59328 l 2.60919,-7.91937 c 0.0561,-0.16235 -0.0323,-0.3365 -0.19156,-0.39259 l -11.144816,-3.96705 c -0.342,-0.12102 -0.71644,-0.0915 -1.03486,0.0856 l -9.37287,5.19495 c -0.10025,0.0591 -0.13856,0.18598 -0.0796,0.28927 0.003,0.003 0.003,0.006 0.006,0.009 z m 13.618536,0.19188 -8.641676,0.61394 -3.69432,0.2627 c -0.46289,0.0325 -0.85206,0.3542 -0.97589,0.79992 l -3.26975,11.89812 c -0.0943,0.34845 0.056,0.71728 0.36854,0.90038 l 10.97383,6.29893 c 0.33907,0.19473 0.76362,0.15346 1.06141,-0.10028 l 8.998426,-7.76895 c 0.29475,-0.25678 0.40111,-0.67003 0.26538,-1.03603 l -0.44529,-1.19838 -3.75616,-10.09774 c -0.13563,-0.366 -0.49533,-0.59918 -0.8845,-0.57261 z m -16.982606,13.51859 1.27074,-4.62812 2.04618,-7.43825 c 0.11793,-0.43093 0.0501,-0.89435 -0.19166,-1.27217 l -3.94785,-6.21919 -0.85503,-1.34599 c -0.056,-0.0885 -0.17396,-0.1151 -0.26241,-0.059 -0.0206,0.0118 -0.0354,0.0266 -0.0501,0.0443 l -6.12377,7.94001 c -0.12678,0.16531 -0.1887,0.37193 -0.17101,0.57854 l 1.09679,12.59781 c 0.0177,0.19765 0.1828,0.34819 0.38034,0.34819 h 6.08542 c 0.33907,0 0.63392,-0.22119 0.72237,-0.5461 z"
+       fill="#000000"
+       id="path2-5"
+       style="fill:#369acc;fill-opacity:1;stroke-width:0.264583" />
+    <path
+       d="M 118.64673,106.05542 112.9947,87.254053 c -0.006,-0.0205 -0.0265,-0.0292 -0.0468,-0.0234 -0.0145,0.006 -0.0233,0.0175 -0.0262,0.0321 l -1.09723,15.495497 c -0.009,0.10221 0.0497,0.1986 0.14022,0.23948 l 5.84465,2.75391 0.76729,0.36214 c 0.0236,0.0117 0.0556,0 0.0672,-0.0234 0.006,-0.009 0.009,-0.0234 0.003,-0.0351 z m -0.17225,0.47019 -0.88397,-0.41471 -5.6814,-2.67798 c -0.0992,-0.0438 -0.21299,0 -0.25664,0.0964 -0.003,0.003 -0.003,0.009 -0.006,0.0117 l -3.73804,10.53386 -2.20318,6.20871 c -0.009,0.0204 0.003,0.0437 0.0236,0.0495 0.0145,0.006 0.032,0.003 0.0437,-0.009 l 12.75156,-13.55343 c 0.0582,-0.0613 0.0553,-0.1606 -0.009,-0.21902 -0.0146,-0.0117 -0.0265,-0.0205 -0.041,-0.0263 z M 94.999544,88.433883 111.2204,102.4546 c 0.0556,0.0467 0.13732,0.0438 0.1868,-0.0117 0.0204,-0.0204 0.0291,-0.0497 0.0323,-0.0789 l 1.14379,-16.129217 c 0.003,-0.038 -0.0265,-0.0672 -0.0643,-0.0701 h -0.0116 l -17.423156,1.98877 c -0.0875,0.009 -0.14883,0.0876 -0.14007,0.17521 0.006,0.0438 0.0263,0.0789 0.0554,0.10514 z M 111.15637,103.6753 c 0.0291,-0.0788 -0.0116,-0.16645 -0.0905,-0.19272 -0.032,-0.0117 -0.0672,-0.0117 -0.0992,0 l -21.546256,7.04683 c -0.07,0.0233 -0.10797,0.0992 -0.0846,0.16934 0.009,0.0294 0.0292,0.0526 0.0554,0.0701 l 15.427266,10.11026 0.0467,0.0323 c 0.0613,0.0407 0.14589,0.0233 0.18675,-0.041 0.006,-0.009 0.009,-0.0175 0.0117,-0.0262 l 2.07163,-5.83486 z M 94.605634,88.644143 c -0.0875,-0.0759 -0.21593,-0.0642 -0.29181,0.0205 -0.0204,0.0234 -0.035,0.0526 -0.0438,0.0847 l -5.22608,21.196187 c -0.0233,0.0876 0.0321,0.17807 0.12255,0.20135 0.0292,0.009 0.0613,0.006 0.0905,-0.003 l 21.668926,-7.0848 c 0.0815,-0.0263 0.12541,-0.1139 0.099,-0.19566 -0.009,-0.0263 -0.0233,-0.0497 -0.0466,-0.0701 z m -0.25387,-1.10389 c 0.0263,0.15478 0.16925,0.26283 0.32681,0.24238 l 16.512726,-1.88656 c 0.0175,-0.003 0.032,-0.0205 0.0262,-0.038 -0.003,-0.0146 -0.0116,-0.0234 -0.0262,-0.0263 l -17.621536,-3.26207 c -0.035,-0.006 -0.07,0.0146 -0.0788,0.0526 -0.003,0.009 -0.003,0.0175 0,0.0263 z m 7.583776,31.942927 -13.011206,-8.52726 c -0.10504,-0.0672 -0.24511,-0.041 -0.31805,0.0611 l -3.93631,5.63933 c -0.035,0.0526 -0.0234,0.12277 0.0292,0.15769 0.0117,0.009 0.0263,0.0145 0.0408,0.0175 l 19.115586,4.00976 c 0.0233,0.006 0.0467,-0.009 0.0525,-0.032 0.006,-0.0177 -0.003,-0.0381 -0.0204,-0.0468 z m -22.030616,-24.174737 13.89534,-7.27173 c 0.11965,-0.0642 0.18383,-0.1986 0.1605,-0.33001 l -0.85789,-4.8741 c -0.006,-0.035 -0.0409,-0.0584 -0.0788,-0.0526 -0.0117,0.003 -0.0233,0.009 -0.0321,0.0175 l -13.12208,12.46416 c -0.0117,0.0117 -0.0117,0.0292 0,0.0409 0.009,0.0117 0.0233,0.0117 0.035,0.006 z m 8.50295,14.502627 c 0.0467,0.0643 0.13422,0.0788 0.19841,0.032 0.0292,-0.0204 0.0467,-0.0495 0.0555,-0.0818 l 5.18228,-21.012027 c 0.0175,-0.0759 -0.0292,-0.15479 -0.10504,-0.17233 -0.0321,-0.009 -0.0671,-0.003 -0.0992,0.0117 l -14.49934,7.59005 c -0.16341,0.0847 -0.22469,0.2862 -0.14006,0.44974 0.006,0.0117 0.0146,0.0263 0.0233,0.038 l 3.45779,4.841977 z m -0.0992,0.91414 c 0.0729,-0.10531 0.07,-0.24263 -0.003,-0.34476 l -9.15949,-12.832077 c -0.0146,-0.0175 -0.0409,-0.0234 -0.0584,-0.009 -0.0146,0.0117 -0.0204,0.0292 -0.0146,0.0467 l 5.17939,18.681617 c 0.0146,0.0497 0.0671,0.0788 0.11671,0.0643 0.0204,-0.006 0.0379,-0.0175 0.0496,-0.0352 1.29673,-1.85716 2.59321,-3.71449 3.88964,-5.57186 z"
+       fill="#000000"
+       id="path2-35"
+       style="fill:#9656a2;fill-opacity:1;stroke-width:0.264583" />
+    <path
+       d="m 152.99462,120.58258 c 0.25029,0.22829 0.54504,0.39632 0.86492,0.50097 l 6.36508,2.02602 c 0.0508,0.0159 0.10795,-0.0127 0.12356,-0.0634 0.01,-0.0317 0.003,-0.0634 -0.0156,-0.0888 l -2.8104,-3.71597 c -0.0476,-0.0602 -0.10134,-0.11414 -0.16801,-0.15536 l -18.50913,-11.65209 c -0.0412,-0.0254 -0.0982,-0.0127 -0.12356,0.0285 -0.0222,0.038 -0.0159,0.0856 0.0158,0.11414 z m 7.5438,3.07552 -6.85298,-2.18141 c -0.24712,-0.0793 -0.51329,-0.0412 -0.72866,0.10147 l -8.22822,5.46933 c -0.22495,0.14902 -0.36119,0.40267 -0.36119,0.67218 l 0.0507,18.43095 c 0,0.10134 0.0824,0.18389 0.18693,0.18389 0.0602,0 0.11406,-0.0286 0.14894,-0.0762 l 15.86994,-22.34658 c 0.054,-0.0729 0.0349,-0.17753 -0.0378,-0.23143 -0.0159,-0.006 -0.0317,-0.0159 -0.0476,-0.0222 z m -28.84739,1.60433 11.99835,1.6297 c 0.26612,0.0349 0.53544,-0.0254 0.75721,-0.17439 l 7.79079,-5.17763 c 0.29157,-0.19341 0.37068,-0.58973 0.17753,-0.88143 -0.0286,-0.0444 -0.0635,-0.0824 -0.10133,-0.11732 l -15.93347,-14.53417 c -0.0666,-0.0602 -0.16476,-0.0539 -0.22495,0.0127 -0.0159,0.019 -0.0285,0.0412 -0.0349,0.0634 l -4.9584,18.38648 c -0.0919,0.33927 0.10772,0.68802 0.44673,0.77681 0.0285,0.006 0.0539,0.0127 0.0824,0.0159 z m 11.70053,2.02287 -12.34688,-1.67727 c -0.17426,-0.0254 -0.35169,0.0254 -0.48792,0.13951 l -4.85384,4.01402 -2.71206,2.24163 c -0.11406,0.0951 -0.1299,0.26633 -0.038,0.38047 0.0158,0.019 0.0349,0.0349 0.0539,0.0507 l 20.51157,14.22348 c 0.13626,0.0952 0.32319,0.0603 0.41823,-0.0762 0.0349,-0.0505 0.0539,-0.11086 0.0539,-0.17119 l -0.0507,-18.49419 c 0,-0.32025 -0.23447,-0.58658 -0.54811,-0.63095 z m -13.23083,-1.76922 c 0.23127,-0.19023 0.39603,-0.44706 0.47524,-0.73559 l 4.71443,-17.48602 c 0.0222,-0.0793 -0.0254,-0.16488 -0.10771,-0.1839 -0.0602,-0.0159 -0.12356,0.006 -0.16158,0.0571 l -14.25737,19.62937 c -0.12673,0.17439 -0.15524,0.3995 -0.0792,0.59926 l 1.59999,4.21375 c 0.0412,0.11099 0.16792,0.16806 0.27564,0.12367 0.0222,-0.01 0.0412,-0.019 0.0602,-0.0349 l 2.64236,-2.18456 z"
+       fill="#000000"
+       id="path2-62"
+       style="fill:#6c584c;fill-opacity:1;stroke-width:0.264583" />
+  </g>
+</svg>

index.html

@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <meta charset="UTF-8">
-<title>RPG Dices</title>
+<title>Role Playing Game Dices</title>
+<meta name="application-name" content="Role Playing Game Dices">
+<meta name="application-version" content="v0.2.0">
 
 <meta name="viewport" content="width=device-width,initial-scale=1">
 
 <meta name="theme-color" content="#ffffff" />
 <meta name="apple-mobile-web-app-status-bar" content="#ffffff" />
 
+<link rel="icon" type="image/x-icon" href="assets/icons/icon.svg">
 <link rel="apple-touch-icon" href="assets/icons/icon-72x72.png" />
 <link rel="apple-touch-icon" href="assets/icons/icon-96x96.png" />
 <link rel="apple-touch-icon" href="assets/icons/icon-128x128.png" />
@@ -55,6 +58,32 @@
             <div class="dices" id="dices"></div>
 
             <div class="form-container">
+                <div class="actions">
+                    <button id="roll-add-button" onclick="addSelected()"><img src="./assets/add.svg"> Add
+                        Selected</button>
+                    <button id="roll-button" onclick="rollSelected()"><img src="./assets/roll.svg"> Roll
+                        Selected</button>
+                </div>
+            </div>
+        </div>
+
+        <div class="history-container">
+            <div class="history" id="history"></div>
+
+            <div class="actions">
+                <button id="history-button" onclick="clearHistory()"><img src="./assets/history.svg"> Clear
+                    History</button>
+            </div>
+
+            <div class="form-container">
+                <div class="form">
+                    <input type="text" id="inputText" placeholder="1D6+1 + 2W4">
+                </div>
+                <div class="actions">
+                    <button onclick="addDicesText()"><img src="./assets/plus.svg"> Add Dices</button>
+                    <button onclick="rollText()"><img src="./assets/roll.svg"> Roll</button>
+                </div>
+
                 <div class="form">
                     <input min="1" value="1" type="number" id="inputCount">
                     D
@@ -78,26 +107,7 @@
                     <button onclick="addDiceForm()"><img src="./assets/plus.svg"> Add Dice</button>
                     <button onclick="rollForm()"><img src="./assets/roll.svg"> Roll</button>
                 </div>
-
-                <div class="form">
-                    <input type="text" id="inputText">
             </div>
-                <div class="actions">
-                    <button onclick="addDicesText()"><img src="./assets/plus.svg"> Add Dices</button>
-                    <button onclick="rollText()"><img src="./assets/roll.svg"> Roll</button>
-                </div>
-            </div>
-        </div>
-
-        <div class="history-container">
-            <div class="actions">
-                <button id="history-button" onclick="clearHistory()"><img src="./assets/history.svg"> Clear
-                    History</button>
-                <button id="roll-add-button" onclick="addSelected()"><img src="./assets/add.svg"> Add Selected</button>
-                <button id="roll-button" onclick="rollSelected()"><img src="./assets/roll.svg"> Roll Selected</button>
-            </div>
-
-            <div class="history" id="history"></div>
         </div>
     </div>
 

js/libs/sidebar/sidebar.js

@@ -4,14 +4,10 @@ window.Sidebar = function () {
   let toggle = document.querySelector("#sidebar-toggle-input");
 
   sidebar.addEventListener("click", function (event) {
-      if (document.body.clientWidth < 1280) {
     toggle.checked = false;
-      }
   })
 
   close.addEventListener("click", function (event) {
-      if (document.body.clientWidth < 1280) {
     event.preventDefault();
-      }
   })
 }

script.js

@@ -49,7 +49,7 @@ class DiceHistoryEntry {
 }
 
 const default_sides = [4, 6, 8, 10, 12, 20, 100];
-const default_colors = ["#de324c", "#f4895f", "#f8e16f", "#95cf92", "#369acc", "#9656a2", "#000000"];
+const default_colors = ["#de324c", "#f4895f", "#f8e16f", "#95cf92", "#369acc", "#9656a2", "#6c584c"];
 
 const dice_regex = /(\d+)?[D|d](\d+)([\+|\-]\d+)?(\[(.+)\])?/;
 
@@ -228,12 +228,18 @@ function renderHistory() {
             diceResult.innerText = entry.result;
             historyContainer.appendChild(diceResult);
 
-            const diceFormula = document.createElement("span");
+            const diceFormulaContainer = document.createElement("span");
-            diceFormula.classList.add("formula");
+            diceFormulaContainer.classList.add("formula-container");
-            historyContainer.appendChild(diceFormula);
+            historyContainer.appendChild(diceFormulaContainer);
 
             if (entry.formula) {
-                diceFormula.innerText = " = " + entry.formula;
+                const diceFormulaEqual = document.createElement("span");
+                diceFormulaEqual.innerText = " = ";
+                diceFormulaContainer.appendChild(diceFormulaEqual);
+                const diceFormula = document.createElement("span");
+                diceFormula.classList.add("formula");
+                diceFormula.innerText = entry.formula;
+                diceFormulaContainer.appendChild(diceFormula);
             }
 
             const diceTime = document.createElement("span");
@@ -463,6 +469,12 @@ if (localStorage.getItem('history')) {
 
 document.getElementById("importFile").addEventListener("change", importData);
 
+document.getElementById("inputText").addEventListener("keyup", (event) => {
+    if (event.key.toUpperCase() === 'ENTER') {
+        this.rollText();
+    }
+});
+
 renderDices();
 renderHistory();
 updateCustom();
@@ -481,4 +493,3 @@ if ("serviceWorker" in navigator) {
             .catch(err => console.error("service worker not registered", err))
     })
 }
-  

style.css

@@ -59,14 +59,19 @@ body {
     margin-right: 0.2em;
 }
 
-.container,
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: start;
+}
+
 .dices-container,
 .history-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    max-width: 100%;
+    min-width: 400px;
 }
 
 .dices-container {
@@ -204,18 +209,17 @@ body {
     display: grid;
     align-items: center;
     row-gap: 1em;
-    grid-template-columns: auto auto;
+    grid-template-columns: auto;
 }
 
 .form-container .actions {
     display: flex;
-    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
 }
 
 .form {
-    font-size: 1.5em;
+    font-size: 1.2em;
     display: flex;
     flex-wrap: wrap;
     justify-content: start;
@@ -254,7 +258,6 @@ body {
 
 .history-container .actions button {
     font-size: 1em;
-    margin: 0 0.5em;
 }
 
 .history {
@@ -273,6 +276,8 @@ body {
 
 .history .label {
     font-size: 1.2em;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .history .result {
@@ -281,7 +286,14 @@ body {
     font-weight: bold;
 }
 
-.history .formula {
+.history .formula-container {
+    display: flex;
+    margin: 0 0.5em;
+}
+
+
+.history .formula-container .formula {
+    display: flex;
     margin: 0 0.5em;
 }
 
@@ -300,6 +312,7 @@ button {
     border: none;
     outline: none;
     font-size: 1.3em;
+    margin: 0.5em;
 }
 
 button:hover {
@@ -352,18 +365,19 @@ body.dark .form select {
     border-color: #fff;
 }
 
-@media screen and (min-width: 768px) {
-    .container {
-        padding: 0 250px;
-    }
-}
-
 @media screen and (max-width: 767px) {
     .dices {
         font-size: 0.65em;
     }
 
-    .form-container {
+    .container {
-        grid-template-columns: auto;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .dices-container,
+    .history-container {
+        min-width: auto;
+        width: 100%;
     }
 }

sw.js

@@ -1,4 +1,4 @@
-const rpgDicesVersion = "rpg-dices-v0.1"
+const rpgDicesVersion = "rpg-dices-v0.2.0"
 const assets = [
     "/",
     "/index.html",
@@ -25,7 +25,8 @@ const assets = [
     "/assets/dices/12.svg",
     "/assets/dices/20.svg",
     "/assets/dices/100.svg",
-    "/assets/dices/custom.svg",
+    "/assets/dices/custom.svg",,
+    "/assets/icons/icon.svg",
 ]
 
 self.addEventListener("install", installEvent => {