diff --git a/grado.nimble b/grado.nimble index 5c10a36..e2ee7b3 100644 --- a/grado.nimble +++ b/grado.nimble @@ -68,12 +68,12 @@ task makedist, "Creates the dist directory": }.newStringTable() task htmlpage, "Generates a single html page": - cssTask() htmljsTask() + cssTask() makedistTask() -task rhtmlpage, "Generates a single html page": - exec "nimble c -r -d:release --mm:refc src/buildcss" +task rhtmlpage, "Generates a release version single html page": + cssTask() exec "nim js -d:relativePath -d:release --out:dist/app.js src/frontend" makedistTask() diff --git a/public/css/style.css b/public/css/style.css index 97cb180..9e66abd 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -4069,12 +4069,12 @@ body { .form-radio { min-height: 0.7rem !important; } -@use 'sass:math' {}#stars { +#stars { width: 1px; height: 1px; background: transparent; - box-shadow: 583px 624px #FFF , 1012px 1890px #FFF , 521px 1934px #FFF , 672px 1073px #FFF , 362px 30px #FFF , 969px 664px #FFF , 1648px 957px #FFF , 1456px 72px #FFF , 81px 82px #FFF , 1875px 259px #FFF , 947px 1760px #FFF , 41px 1489px #FFF , 115px 147px #FFF , 214px 1417px #FFF , 682px 1209px #FFF , 1175px 1621px #FFF , 1003px 1427px #FFF , 1951px 1358px #FFF , 1px 1676px #FFF , 494px 1769px #FFF , 1328px 244px #FFF , 1455px 1629px #FFF , 250px 1262px #FFF , 30px 1653px #FFF , 1130px 1404px #FFF , 801px 1017px #FFF , 405px 700px #FFF , 1596px 132px #FFF , 8px 1627px #FFF , 1888px 1682px #FFF , 786px 627px #FFF , 1591px 608px #FFF , 186px 949px #FFF , 1235px 170px #FFF , 294px 1859px #FFF , 1579px 1524px #FFF , 699px 956px #FFF , 689px 772px #FFF , 1800px 1320px #FFF , 1314px 233px #FFF , 350px 1752px #FFF , 1801px 883px #FFF , 381px 1759px #FFF , 81px 843px #FFF , 117px 1877px #FFF , 1101px 45px #FFF , 1592px 1698px #FFF , 1983px 999px #FFF , 1180px 1073px #FFF , 1460px 748px #FFF , 367px 457px #FFF , 727px 1712px #FFF , 1376px 1972px #FFF , 1754px 1755px #FFF , 103px 1566px #FFF , 270px 646px #FFF , 1503px 1036px #FFF , 1380px 540px #FFF , 131px 407px #FFF , 253px 1019px #FFF , 1625px 290px #FFF , 415px 821px #FFF , 761px 1259px #FFF , 1074px 1486px #FFF , 324px 1644px #FFF , 1469px 420px #FFF , 1763px 694px #FFF , 225px 1262px #FFF , 1917px 158px #FFF , 6px 1999px #FFF , 1867px 151px #FFF , 488px 19px #FFF , 243px 1813px #FFF , 1638px 169px #FFF , 111px 1626px #FFF , 419px 1579px #FFF , 773px 216px #FFF , 1021px 263px #FFF , 721px 265px #FFF , 49px 1795px #FFF , 291px 748px #FFF , 537px 752px #FFF , 1689px 1083px #FFF , 1244px 896px #FFF , 1839px 20px #FFF , 1450px 1356px #FFF , 1388px 1586px #FFF , 1322px 1657px #FFF , 1392px 335px #FFF , 869px 895px #FFF , 1510px 351px #FFF , 112px 276px #FFF , 178px 1622px #FFF , 36px 1010px #FFF , 919px 309px #FFF , 60px 1025px #FFF , 1788px 1640px #FFF , 1018px 413px #FFF , 927px 352px #FFF , 1997px 597px #FFF , 1099px 716px #FFF , 1756px 756px #FFF , 1447px 458px #FFF , 1097px 1697px #FFF , 193px 287px #FFF , 454px 1736px #FFF , 69px 825px #FFF , 2px 1686px #FFF , 324px 214px #FFF , 1914px 1455px #FFF , 1353px 1252px #FFF , 1736px 565px #FFF , 585px 1301px #FFF , 1173px 986px #FFF , 1841px 1714px #FFF , 1529px 372px #FFF , 1623px 1825px #FFF , 1745px 1701px #FFF , 345px 825px #FFF , 1941px 1133px #FFF , 1721px 267px #FFF , 1356px 1931px #FFF , 618px 767px #FFF , 1324px 21px #FFF , 1526px 1206px #FFF , 460px 1500px #FFF , 744px 528px #FFF , 550px 449px #FFF , 1710px 1966px #FFF , 1469px 586px #FFF , 351px 1519px #FFF , 740px 1510px #FFF , 789px 804px #FFF , 899px 1192px #FFF , 857px 215px #FFF , 824px 958px #FFF , 1788px 1378px #FFF , 1410px 61px #FFF , 267px 1470px #FFF , 995px 1591px #FFF , 1477px 397px #FFF , 116px 716px #FFF , 631px 560px #FFF , 1636px 1413px #FFF , 1126px 1698px #FFF , 302px 283px #FFF , 381px 383px #FFF , 951px 1751px #FFF , 824px 732px #FFF , 341px 801px #FFF; - animation: animStar 222s linear infinite; } + box-shadow: 1890px 31px #FFF, 1356px 851px #FFF, 951px 858px #FFF, 185px 1431px #FFF, 1451px 1983px #FFF, 9px 699px #FFF, 954px 631px #FFF, 1544px 613px #FFF, 25px 1148px #FFF, 1906px 1556px #FFF, 973px 177px #FFF, 1562px 1633px #FFF, 276px 1909px #FFF, 597px 238px #FFF, 1955px 882px #FFF, 1138px 1180px #FFF, 140px 862px #FFF, 1548px 1067px #FFF, 1931px 1469px #FFF, 1348px 1362px #FFF, 1851px 1340px #FFF, 986px 1976px #FFF, 1828px 654px #FFF, 1592px 1247px #FFF, 668px 1056px #FFF, 616px 1649px #FFF, 211px 98px #FFF, 945px 916px #FFF, 230px 720px #FFF, 1840px 246px #FFF, 1198px 246px #FFF, 790px 361px #FFF, 920px 241px #FFF, 602px 1553px #FFF, 898px 1115px #FFF, 1282px 1324px #FFF, 656px 1286px #FFF, 277px 1362px #FFF, 594px 1467px #FFF, 1692px 1635px #FFF, 1893px 1368px #FFF, 1672px 425px #FFF, 1662px 153px #FFF, 767px 738px #FFF, 885px 92px #FFF, 596px 685px #FFF, 832px 1015px #FFF, 1609px 242px #FFF, 897px 1582px #FFF, 1338px 850px #FFF, 103px 174px #FFF, 281px 211px #FFF, 1955px 398px #FFF, 1724px 282px #FFF, 1082px 1865px #FFF, 1919px 1082px #FFF, 1228px 1134px #FFF, 1618px 1082px #FFF, 650px 660px #FFF, 216px 394px #FFF, 1975px 226px #FFF, 540px 315px #FFF, 131px 1546px #FFF, 156px 301px #FFF, 1834px 1515px #FFF, 1501px 1623px #FFF, 859px 1067px #FFF, 1435px 491px #FFF, 1784px 1770px #FFF, 63px 788px #FFF, 159px 35px #FFF, 442px 794px #FFF, 654px 486px #FFF, 206px 705px #FFF, 1176px 724px #FFF, 1614px 1956px #FFF, 1092px 1002px #FFF, 1250px 1846px #FFF, 1646px 1520px #FFF, 1128px 69px #FFF, 989px 1342px #FFF, 261px 689px #FFF, 568px 287px #FFF, 349px 839px #FFF, 1164px 177px #FFF, 29px 174px #FFF, 1766px 1229px #FFF, 555px 1030px #FFF, 718px 794px #FFF, 814px 1595px #FFF, 507px 1988px #FFF, 1838px 1761px #FFF, 740px 699px #FFF, 1848px 417px #FFF, 419px 1644px #FFF, 1682px 1137px #FFF, 1560px 992px #FFF, 1230px 844px #FFF, 1594px 508px #FFF, 733px 413px #FFF, 1999px 1163px #FFF, 1592px 643px #FFF, 1983px 424px #FFF, 1682px 731px #FFF, 1872px 87px #FFF, 1453px 1766px #FFF, 1440px 1184px #FFF, 1553px 1879px #FFF, 987px 965px #FFF, 1512px 864px #FFF, 1522px 1333px #FFF, 883px 1204px #FFF, 1377px 1417px #FFF, 1347px 1418px #FFF, 1147px 1247px #FFF, 1132px 556px #FFF, 171px 1274px #FFF, 1459px 1909px #FFF, 147px 1766px #FFF, 1397px 314px #FFF, 1184px 883px #FFF, 637px 1716px #FFF, 1722px 364px #FFF, 432px 1171px #FFF, 756px 789px #FFF, 1795px 1766px #FFF, 1309px 1176px #FFF, 96px 468px #FFF, 123px 955px #FFF, 871px 339px #FFF, 1286px 1676px #FFF, 416px 320px #FFF, 1869px 249px #FFF, 309px 276px #FFF, 443px 669px #FFF, 339px 577px #FFF, 243px 922px #FFF, 1367px 836px #FFF, 536px 133px #FFF, 207px 1348px #FFF, 1490px 1586px #FFF, 1771px 1523px #FFF, 1739px 686px #FFF, 34px 1965px #FFF, 479px 1473px #FFF, 1158px 1560px #FFF, 1821px 1659px #FFF, 1742px 1076px #FFF, 1110px 175px #FFF, 1234px 727px #FFF; + animation: animStar 100s linear infinite; } #stars:after { content: " "; position: absolute; @@ -4082,14 +4082,14 @@ body { width: 1px; height: 1px; background: transparent; - box-shadow: 583px 624px #FFF , 1012px 1890px #FFF , 521px 1934px #FFF , 672px 1073px #FFF , 362px 30px #FFF , 969px 664px #FFF , 1648px 957px #FFF , 1456px 72px #FFF , 81px 82px #FFF , 1875px 259px #FFF , 947px 1760px #FFF , 41px 1489px #FFF , 115px 147px #FFF , 214px 1417px #FFF , 682px 1209px #FFF , 1175px 1621px #FFF , 1003px 1427px #FFF , 1951px 1358px #FFF , 1px 1676px #FFF , 494px 1769px #FFF , 1328px 244px #FFF , 1455px 1629px #FFF , 250px 1262px #FFF , 30px 1653px #FFF , 1130px 1404px #FFF , 801px 1017px #FFF , 405px 700px #FFF , 1596px 132px #FFF , 8px 1627px #FFF , 1888px 1682px #FFF , 786px 627px #FFF , 1591px 608px #FFF , 186px 949px #FFF , 1235px 170px #FFF , 294px 1859px #FFF , 1579px 1524px #FFF , 699px 956px #FFF , 689px 772px #FFF , 1800px 1320px #FFF , 1314px 233px #FFF , 350px 1752px #FFF , 1801px 883px #FFF , 381px 1759px #FFF , 81px 843px #FFF , 117px 1877px #FFF , 1101px 45px #FFF , 1592px 1698px #FFF , 1983px 999px #FFF , 1180px 1073px #FFF , 1460px 748px #FFF , 367px 457px #FFF , 727px 1712px #FFF , 1376px 1972px #FFF , 1754px 1755px #FFF , 103px 1566px #FFF , 270px 646px #FFF , 1503px 1036px #FFF , 1380px 540px #FFF , 131px 407px #FFF , 253px 1019px #FFF , 1625px 290px #FFF , 415px 821px #FFF , 761px 1259px #FFF , 1074px 1486px #FFF , 324px 1644px #FFF , 1469px 420px #FFF , 1763px 694px #FFF , 225px 1262px #FFF , 1917px 158px #FFF , 6px 1999px #FFF , 1867px 151px #FFF , 488px 19px #FFF , 243px 1813px #FFF , 1638px 169px #FFF , 111px 1626px #FFF , 419px 1579px #FFF , 773px 216px #FFF , 1021px 263px #FFF , 721px 265px #FFF , 49px 1795px #FFF , 291px 748px #FFF , 537px 752px #FFF , 1689px 1083px #FFF , 1244px 896px #FFF , 1839px 20px #FFF , 1450px 1356px #FFF , 1388px 1586px #FFF , 1322px 1657px #FFF , 1392px 335px #FFF , 869px 895px #FFF , 1510px 351px #FFF , 112px 276px #FFF , 178px 1622px #FFF , 36px 1010px #FFF , 919px 309px #FFF , 60px 1025px #FFF , 1788px 1640px #FFF , 1018px 413px #FFF , 927px 352px #FFF , 1997px 597px #FFF , 1099px 716px #FFF , 1756px 756px #FFF , 1447px 458px #FFF , 1097px 1697px #FFF , 193px 287px #FFF , 454px 1736px #FFF , 69px 825px #FFF , 2px 1686px #FFF , 324px 214px #FFF , 1914px 1455px #FFF , 1353px 1252px #FFF , 1736px 565px #FFF , 585px 1301px #FFF , 1173px 986px #FFF , 1841px 1714px #FFF , 1529px 372px #FFF , 1623px 1825px #FFF , 1745px 1701px #FFF , 345px 825px #FFF , 1941px 1133px #FFF , 1721px 267px #FFF , 1356px 1931px #FFF , 618px 767px #FFF , 1324px 21px #FFF , 1526px 1206px #FFF , 460px 1500px #FFF , 744px 528px #FFF , 550px 449px #FFF , 1710px 1966px #FFF , 1469px 586px #FFF , 351px 1519px #FFF , 740px 1510px #FFF , 789px 804px #FFF , 899px 1192px #FFF , 857px 215px #FFF , 824px 958px #FFF , 1788px 1378px #FFF , 1410px 61px #FFF , 267px 1470px #FFF , 995px 1591px #FFF , 1477px 397px #FFF , 116px 716px #FFF , 631px 560px #FFF , 1636px 1413px #FFF , 1126px 1698px #FFF , 302px 283px #FFF , 381px 383px #FFF , 951px 1751px #FFF , 824px 732px #FFF , 341px 801px #FFF; } + box-shadow: 1890px 31px #FFF, 1356px 851px #FFF, 951px 858px #FFF, 185px 1431px #FFF, 1451px 1983px #FFF, 9px 699px #FFF, 954px 631px #FFF, 1544px 613px #FFF, 25px 1148px #FFF, 1906px 1556px #FFF, 973px 177px #FFF, 1562px 1633px #FFF, 276px 1909px #FFF, 597px 238px #FFF, 1955px 882px #FFF, 1138px 1180px #FFF, 140px 862px #FFF, 1548px 1067px #FFF, 1931px 1469px #FFF, 1348px 1362px #FFF, 1851px 1340px #FFF, 986px 1976px #FFF, 1828px 654px #FFF, 1592px 1247px #FFF, 668px 1056px #FFF, 616px 1649px #FFF, 211px 98px #FFF, 945px 916px #FFF, 230px 720px #FFF, 1840px 246px #FFF, 1198px 246px #FFF, 790px 361px #FFF, 920px 241px #FFF, 602px 1553px #FFF, 898px 1115px #FFF, 1282px 1324px #FFF, 656px 1286px #FFF, 277px 1362px #FFF, 594px 1467px #FFF, 1692px 1635px #FFF, 1893px 1368px #FFF, 1672px 425px #FFF, 1662px 153px #FFF, 767px 738px #FFF, 885px 92px #FFF, 596px 685px #FFF, 832px 1015px #FFF, 1609px 242px #FFF, 897px 1582px #FFF, 1338px 850px #FFF, 103px 174px #FFF, 281px 211px #FFF, 1955px 398px #FFF, 1724px 282px #FFF, 1082px 1865px #FFF, 1919px 1082px #FFF, 1228px 1134px #FFF, 1618px 1082px #FFF, 650px 660px #FFF, 216px 394px #FFF, 1975px 226px #FFF, 540px 315px #FFF, 131px 1546px #FFF, 156px 301px #FFF, 1834px 1515px #FFF, 1501px 1623px #FFF, 859px 1067px #FFF, 1435px 491px #FFF, 1784px 1770px #FFF, 63px 788px #FFF, 159px 35px #FFF, 442px 794px #FFF, 654px 486px #FFF, 206px 705px #FFF, 1176px 724px #FFF, 1614px 1956px #FFF, 1092px 1002px #FFF, 1250px 1846px #FFF, 1646px 1520px #FFF, 1128px 69px #FFF, 989px 1342px #FFF, 261px 689px #FFF, 568px 287px #FFF, 349px 839px #FFF, 1164px 177px #FFF, 29px 174px #FFF, 1766px 1229px #FFF, 555px 1030px #FFF, 718px 794px #FFF, 814px 1595px #FFF, 507px 1988px #FFF, 1838px 1761px #FFF, 740px 699px #FFF, 1848px 417px #FFF, 419px 1644px #FFF, 1682px 1137px #FFF, 1560px 992px #FFF, 1230px 844px #FFF, 1594px 508px #FFF, 733px 413px #FFF, 1999px 1163px #FFF, 1592px 643px #FFF, 1983px 424px #FFF, 1682px 731px #FFF, 1872px 87px #FFF, 1453px 1766px #FFF, 1440px 1184px #FFF, 1553px 1879px #FFF, 987px 965px #FFF, 1512px 864px #FFF, 1522px 1333px #FFF, 883px 1204px #FFF, 1377px 1417px #FFF, 1347px 1418px #FFF, 1147px 1247px #FFF, 1132px 556px #FFF, 171px 1274px #FFF, 1459px 1909px #FFF, 147px 1766px #FFF, 1397px 314px #FFF, 1184px 883px #FFF, 637px 1716px #FFF, 1722px 364px #FFF, 432px 1171px #FFF, 756px 789px #FFF, 1795px 1766px #FFF, 1309px 1176px #FFF, 96px 468px #FFF, 123px 955px #FFF, 871px 339px #FFF, 1286px 1676px #FFF, 416px 320px #FFF, 1869px 249px #FFF, 309px 276px #FFF, 443px 669px #FFF, 339px 577px #FFF, 243px 922px #FFF, 1367px 836px #FFF, 536px 133px #FFF, 207px 1348px #FFF, 1490px 1586px #FFF, 1771px 1523px #FFF, 1739px 686px #FFF, 34px 1965px #FFF, 479px 1473px #FFF, 1158px 1560px #FFF, 1821px 1659px #FFF, 1742px 1076px #FFF, 1110px 175px #FFF, 1234px 727px #FFF; } #stars2 { width: 3px; height: 3px; background: transparent; - box-shadow: 1702px 460px #FFF , 1037px 690px #FFF , 273px 425px #FFF , 664px 1081px #FFF , 443px 427px #FFF , 1214px 1306px #FFF , 1562px 185px #FFF , 1343px 634px #FFF , 1859px 883px #FFF , 443px 640px #FFF , 1352px 1552px #FFF , 294px 1229px #FFF , 1763px 575px #FFF , 1051px 846px #FFF , 136px 112px #FFF , 1533px 847px #FFF , 994px 2000px #FFF , 1589px 257px #FFF , 71px 1345px #FFF , 612px 157px #FFF , 1509px 1274px #FFF , 429px 208px #FFF , 316px 1464px #FFF , 1939px 766px #FFF , 1529px 1592px #FFF , 1094px 985px #FFF , 831px 1717px #FFF , 1443px 1958px #FFF , 1317px 1481px #FFF , 815px 676px #FFF , 810px 1017px #FFF , 1082px 1182px #FFF , 162px 1954px #FFF , 1939px 1923px #FFF , 1596px 765px #FFF , 1785px 1297px #FFF , 1252px 1039px #FFF , 1686px 298px #FFF , 434px 1096px #FFF , 1603px 254px #FFF , 211px 1651px #FFF , 1517px 1285px #FFF , 649px 755px #FFF , 1497px 1151px #FFF , 1541px 1914px #FFF , 1522px 179px #FFF , 356px 25px #FFF , 57px 17px #FFF , 495px 1155px #FFF , 640px 309px #FFF , 1846px 826px #FFF , 172px 1062px #FFF , 1650px 1395px #FFF , 464px 814px #FFF , 448px 1547px #FFF , 1072px 407px #FFF , 1413px 198px #FFF , 642px 748px #FFF , 1030px 129px #FFF , 1563px 1911px #FFF; - animation: animStar 666s linear infinite; } + box-shadow: 402px 1891px #FFF, 1693px 1360px #FFF, 1618px 1474px #FFF, 1126px 471px #FFF, 1225px 1158px #FFF, 176px 637px #FFF, 1989px 1207px #FFF, 1970px 1449px #FFF, 754px 664px #FFF, 1331px 907px #FFF, 1943px 1638px #FFF, 922px 1227px #FFF, 1884px 1353px #FFF, 755px 1093px #FFF, 1390px 1324px #FFF, 1203px 493px #FFF, 430px 956px #FFF, 1731px 1043px #FFF, 183px 249px #FFF, 1997px 1595px #FFF, 542px 457px #FFF, 1334px 1788px #FFF, 877px 514px #FFF, 1821px 1538px #FFF, 1747px 1173px #FFF, 224px 870px #FFF, 880px 372px #FFF, 1089px 1228px #FFF, 1125px 758px #FFF, 1173px 129px #FFF, 1343px 596px #FFF, 1290px 300px #FFF, 219px 1516px #FFF, 1225px 1902px #FFF, 111px 413px #FFF, 730px 1973px #FFF, 1373px 127px #FFF, 1670px 728px #FFF, 1409px 1943px #FFF, 334px 1897px #FFF, 68px 979px #FFF, 1952px 923px #FFF, 1995px 1723px #FFF, 132px 132px #FFF, 408px 489px #FFF, 694px 936px #FFF, 983px 1385px #FFF, 1988px 356px #FFF, 1810px 360px #FFF, 469px 556px #FFF, 119px 1350px #FFF, 595px 1874px #FFF, 1774px 99px #FFF, 1289px 491px #FFF, 1413px 1319px #FFF, 498px 1799px #FFF, 675px 1940px #FFF, 531px 850px #FFF, 734px 707px #FFF; + animation: animStar 250s linear infinite; } #stars2:after { content: " "; position: absolute; @@ -4097,14 +4097,14 @@ body { width: 3px; height: 3px; background: transparent; - box-shadow: 1702px 460px #FFF , 1037px 690px #FFF , 273px 425px #FFF , 664px 1081px #FFF , 443px 427px #FFF , 1214px 1306px #FFF , 1562px 185px #FFF , 1343px 634px #FFF , 1859px 883px #FFF , 443px 640px #FFF , 1352px 1552px #FFF , 294px 1229px #FFF , 1763px 575px #FFF , 1051px 846px #FFF , 136px 112px #FFF , 1533px 847px #FFF , 994px 2000px #FFF , 1589px 257px #FFF , 71px 1345px #FFF , 612px 157px #FFF , 1509px 1274px #FFF , 429px 208px #FFF , 316px 1464px #FFF , 1939px 766px #FFF , 1529px 1592px #FFF , 1094px 985px #FFF , 831px 1717px #FFF , 1443px 1958px #FFF , 1317px 1481px #FFF , 815px 676px #FFF , 810px 1017px #FFF , 1082px 1182px #FFF , 162px 1954px #FFF , 1939px 1923px #FFF , 1596px 765px #FFF , 1785px 1297px #FFF , 1252px 1039px #FFF , 1686px 298px #FFF , 434px 1096px #FFF , 1603px 254px #FFF , 211px 1651px #FFF , 1517px 1285px #FFF , 649px 755px #FFF , 1497px 1151px #FFF , 1541px 1914px #FFF , 1522px 179px #FFF , 356px 25px #FFF , 57px 17px #FFF , 495px 1155px #FFF , 640px 309px #FFF , 1846px 826px #FFF , 172px 1062px #FFF , 1650px 1395px #FFF , 464px 814px #FFF , 448px 1547px #FFF , 1072px 407px #FFF , 1413px 198px #FFF , 642px 748px #FFF , 1030px 129px #FFF , 1563px 1911px #FFF; } + box-shadow: 402px 1891px #FFF, 1693px 1360px #FFF, 1618px 1474px #FFF, 1126px 471px #FFF, 1225px 1158px #FFF, 176px 637px #FFF, 1989px 1207px #FFF, 1970px 1449px #FFF, 754px 664px #FFF, 1331px 907px #FFF, 1943px 1638px #FFF, 922px 1227px #FFF, 1884px 1353px #FFF, 755px 1093px #FFF, 1390px 1324px #FFF, 1203px 493px #FFF, 430px 956px #FFF, 1731px 1043px #FFF, 183px 249px #FFF, 1997px 1595px #FFF, 542px 457px #FFF, 1334px 1788px #FFF, 877px 514px #FFF, 1821px 1538px #FFF, 1747px 1173px #FFF, 224px 870px #FFF, 880px 372px #FFF, 1089px 1228px #FFF, 1125px 758px #FFF, 1173px 129px #FFF, 1343px 596px #FFF, 1290px 300px #FFF, 219px 1516px #FFF, 1225px 1902px #FFF, 111px 413px #FFF, 730px 1973px #FFF, 1373px 127px #FFF, 1670px 728px #FFF, 1409px 1943px #FFF, 334px 1897px #FFF, 68px 979px #FFF, 1952px 923px #FFF, 1995px 1723px #FFF, 132px 132px #FFF, 408px 489px #FFF, 694px 936px #FFF, 983px 1385px #FFF, 1988px 356px #FFF, 1810px 360px #FFF, 469px 556px #FFF, 119px 1350px #FFF, 595px 1874px #FFF, 1774px 99px #FFF, 1289px 491px #FFF, 1413px 1319px #FFF, 498px 1799px #FFF, 675px 1940px #FFF, 531px 850px #FFF, 734px 707px #FFF; } #stars3 { width: 5px; height: 5px; background: transparent; - box-shadow: 269px 1392px #FFF , 1865px 1152px #FFF , 1317px 1737px #FFF , 89px 1967px #FFF , 472px 884px #FFF , 1865px 1498px #FFF , 590px 1192px #FFF , 1388px 833px #FFF , 1998px 1898px #FFF , 375px 1012px #FFF; - animation: animStar 1111s linear infinite; } + box-shadow: 1970px 338px #FFF, 867px 1371px #FFF, 1548px 20px #FFF, 1401px 1645px #FFF, 1609px 726px #FFF, 170px 519px #FFF, 1065px 73px #FFF, 636px 154px #FFF, 1731px 1833px #FFF, 1573px 568px #FFF; + animation: animStar 650s linear infinite; } #stars3:after { content: " "; position: absolute; @@ -4112,10 +4112,10 @@ body { width: 5px; height: 5px; background: transparent; - box-shadow: 269px 1392px #FFF , 1865px 1152px #FFF , 1317px 1737px #FFF , 89px 1967px #FFF , 472px 884px #FFF , 1865px 1498px #FFF , 590px 1192px #FFF , 1388px 833px #FFF , 1998px 1898px #FFF , 375px 1012px #FFF; } + box-shadow: 1970px 338px #FFF, 867px 1371px #FFF, 1548px 20px #FFF, 1401px 1645px #FFF, 1609px 726px #FFF, 170px 519px #FFF, 1065px 73px #FFF, 636px 154px #FFF, 1731px 1833px #FFF, 1573px 568px #FFF; } @keyframes animStar { from { transform: translateX(0px) translateY(0px); } to { - transform: translateX(-2000px) translateY(-750px); } } + transform: translateX(-2000px) translateY(-550px); } } diff --git a/public/css/style.sass b/public/css/style.sass index ad5086f..1d3b616 100644 --- a/public/css/style.sass +++ b/public/css/style.sass @@ -16,9 +16,6 @@ body .form-radio min-height: 0.7rem !important -// @import compass -@use 'sass:math' - // n is number of stars required @function multiple-box-shadow ($n) $value: "#{random(2000)}px #{random(2000)}px #FFF" @@ -27,19 +24,19 @@ body @return unquote($value) -$shadows-small: multiple-box-shadow(150) -$shadows-medium: multiple-box-shadow(60) -$shadows-big: multiple-box-shadow(10) -// $shadows-small: 319px 1002px #FFF , 1110px 1598px #FFF , 51px 989px #FFF , 1220px 278px #FFF , 1431px 649px #FFF , 1084px 1103px #FFF , 515px 224px #FFF , 119px 583px #FFF , 266px 1267px #FFF , 1288px 727px #FFF , 835px 333px #FFF , 615px 440px #FFF , 1824px 949px #FFF , 1057px 123px #FFF , 1989px 1988px #FFF , 1156px 1818px #FFF , 1492px 376px #FFF , 740px 492px #FFF , 1933px 1109px #FFF , 1100px 1893px #FFF , 842px 319px #FFF , 1793px 1084px #FFF , 717px 1911px #FFF , 1998px 1775px #FFF , 98px 1130px #FFF , 177px 1267px #FFF , 850px 760px #FFF , 389px 96px #FFF , 427px 1260px #FFF , 1062px 1039px #FFF , 220px 1623px #FFF , 612px 136px #FFF , 691px 1158px #FFF , 1224px 848px #FFF , 1845px 659px #FFF , 277px 737px #FFF , 833px 1023px #FFF , 659px 1902px #FFF , 293px 881px #FFF , 1023px 425px #FFF , 327px 1991px #FFF , 550px 1619px #FFF , 1492px 599px #FFF , 786px 1337px #FFF , 1016px 1840px #FFF , 857px 20px #FFF , 1742px 1136px #FFF , 1470px 434px #FFF , 1064px 1410px #FFF , 983px 1087px #FFF , 499px 1915px #FFF , 606px 797px #FFF , 1135px 1590px #FFF , 1198px 890px #FFF , 1136px 569px #FFF , 62px 1073px #FFF , 394px 1062px #FFF , 155px 830px #FFF , 1474px 1429px #FFF , 1908px 1922px #FFF , 1449px 971px #FFF , 1077px 1289px #FFF , 76px 74px #FFF , 1572px 399px #FFF , 860px 114px #FFF , 1051px 423px #FFF , 1622px 1845px #FFF , 1749px 902px #FFF , 586px 1802px #FFF , 550px 1916px #FFF , 1968px 361px #FFF , 1443px 659px #FFF , 1201px 786px #FFF , 1318px 805px #FFF , 1768px 883px #FFF , 1603px 1798px #FFF , 291px 1032px #FFF , 844px 1831px #FFF , 1042px 1548px #FFF , 792px 899px #FFF , 1144px 819px #FFF , 521px 122px #FFF , 1005px 477px #FFF , 752px 1498px #FFF , 1162px 1696px #FFF , 97px 570px #FFF , 701px 1543px #FFF , 474px 1659px #FFF , 1927px 519px #FFF , 1984px 441px #FFF , 517px 1825px #FFF , 214px 577px #FFF , 1308px 1722px #FFF , 583px 1604px #FFF , 1126px 1367px #FFF , 59px 1718px #FFF , 1740px 339px #FFF , 177px 1284px #FFF , 909px 188px #FFF , 1865px 614px #FFF -// $shadows-medium: 870px 1742px #FFF , 758px 1004px #FFF , 856px 1216px #FFF , 156px 172px #FFF , 270px 235px #FFF , 838px 845px #FFF , 1797px 20px #FFF , 605px 1761px #FFF , 400px 46px #FFF , 21px 439px #FFF , 1488px 427px #FFF , 1975px 1614px #FFF , 339px 47px #FFF , 1878px 297px #FFF , 866px 1200px #FFF , 745px 1952px #FFF , 1460px 1508px #FFF , 1394px 188px #FFF , 4px 1317px #FFF , 851px 749px #FFF , 1229px 761px #FFF , 814px 1065px #FFF , 669px 1702px #FFF , 367px 1061px #FFF , 861px 1022px #FFF , 1956px 1206px #FFF , 1324px 703px #FFF , 595px 275px #FFF , 1447px 41px #FFF , 732px 1428px #FFF , 1484px 695px #FFF , 457px 950px #FFF , 1481px 1941px #FFF , 1627px 663px #FFF , 643px 1470px #FFF , 1078px 1918px #FFF , 1082px 225px #FFF , 1448px 1119px #FFF , 196px 394px #FFF , 1815px 1530px #FFF , 150px 121px #FFF , 1654px 1500px #FFF , 1334px 658px #FFF , 479px 268px #FFF , 1079px 788px #FFF , 757px 564px #FFF , 1349px 771px #FFF , 236px 1117px #FFF , 1988px 1657px #FFF , 475px 577px #FFF , 1756px 1529px #FFF , 530px 1373px #FFF , 22px 1987px #FFF , 1227px 1808px #FFF , 835px 933px #FFF , 708px 86px #FFF , 1130px 1240px #FFF , 1415px 666px #FFF , 1292px 700px #FFF , 163px 1183px #FFF , 175px 712px #FFF , 627px 458px #FFF , 356px 59px #FFF , 698px 1399px #FFF , 7px 551px #FFF , 1478px 1503px #FFF , 816px 1305px #FFF , 546px 122px #FFF , 1838px 599px #FFF , 3px 614px #FFF , 976px 103px #FFF , 1132px 1031px #FFF , 1634px 1962px #FFF , 447px 774px #FFF , 1708px 1966px #FFF , 1246px 160px #FFF , 768px 831px #FFF , 1488px 1792px #FFF , 461px 1419px #FFF , 816px 1511px #FFF , 270px 1737px #FFF , 405px 1243px #FFF , 1598px 631px #FFF , 1686px 1422px #FFF , 383px 1768px #FFF , 1936px 760px #FFF , 660px 335px #FFF , 800px 1270px #FFF , 1010px 1936px #FFF , 1183px 1801px #FFF , 209px 532px #FFF , 1641px 1191px #FFF , 1461px 282px #FFF , 976px 644px #FFF , 1041px 1563px #FFF , 1214px 644px #FFF , 475px 523px #FFF , 478px 918px #FFF , 129px 1052px #FFF , 399px 189px #FFF -// $shadows-big: 1530px 1109px #FFF , 311px 224px #FFF , 1424px 1136px #FFF , 932px 1980px #FFF , 1738px 227px #FFF , 767px 1321px #FFF , 1332px 1454px #FFF , 526px 132px #FFF , 567px 1742px #FFF , 84px 503px #FFF , 1070px 934px #FFF , 141px 1749px #FFF , 930px 1719px #FFF , 464px 969px #FFF , 1071px 760px #FFF , 1622px 1403px #FFF , 1352px 109px #FFF , 266px 99px #FFF , 1147px 726px #FFF , 361px 1091px #FFF , 1847px 886px #FFF , 775px 1491px #FFF , 726px 148px #FFF , 1981px 73px #FFF , 1497px 1432px #FFF , 259px 376px #FFF , 376px 1715px #FFF , 1085px 267px #FFF , 369px 88px #FFF , 689px 680px #FFF , 30px 1520px #FFF , 774px 794px #FFF , 975px 1460px #FFF , 364px 250px #FFF , 589px 794px #FFF , 1499px 1146px #FFF , 1715px 192px #FFF , 1388px 632px #FFF , 1510px 587px #FFF , 1942px 1630px #FFF , 1047px 300px #FFF , 1040px 1566px #FFF , 1234px 1723px #FFF , 1440px 1779px #FFF , 1310px 45px #FFF , 602px 893px #FFF , 45px 1480px #FFF , 156px 1395px #FFF , 570px 445px #FFF , 6px 135px #FFF , 126px 1135px #FFF , 1355px 297px #FFF , 1169px 1379px #FFF , 339px 210px #FFF , 1695px 1755px #FFF , 361px 1484px #FFF , 1276px 69px #FFF , 829px 298px #FFF , 225px 908px #FFF , 550px 310px #FFF , 471px 727px #FFF , 1317px 176px #FFF , 493px 366px #FFF , 277px 1855px #FFF , 115px 108px #FFF , 918px 518px #FFF , 1514px 416px #FFF , 1290px 93px #FFF , 961px 689px #FFF , 86px 328px #FFF , 556px 1789px #FFF , 211px 277px #FFF , 658px 1743px #FFF , 332px 1801px #FFF , 929px 1646px #FFF , 341px 830px #FFF , 1189px 38px #FFF , 864px 286px #FFF , 835px 777px #FFF , 392px 1243px #FFF , 958px 458px #FFF , 1807px 403px #FFF , 34px 741px #FFF , 1962px 116px #FFF , 1176px 1269px #FFF , 52px 1616px #FFF , 1115px 892px #FFF , 679px 311px #FFF , 739px 1953px #FFF , 397px 414px #FFF , 1061px 782px #FFF , 1283px 1357px #FFF , 195px 1252px #FFF , 933px 543px #FFF , 483px 1856px #FFF , 1325px 665px #FFF , 1137px 1946px #FFF , 1636px 1094px #FFF , 1274px 343px #FFF , 1507px 517px #FFF +// $shadows-small: multiple-box-shadow(150) +// $shadows-medium: multiple-box-shadow(60) +// $shadows-big: multiple-box-shadow(10) +$shadows-small: 1890px 31px #FFF , 1356px 851px #FFF , 951px 858px #FFF , 185px 1431px #FFF , 1451px 1983px #FFF , 9px 699px #FFF , 954px 631px #FFF , 1544px 613px #FFF , 25px 1148px #FFF , 1906px 1556px #FFF , 973px 177px #FFF , 1562px 1633px #FFF , 276px 1909px #FFF , 597px 238px #FFF , 1955px 882px #FFF , 1138px 1180px #FFF , 140px 862px #FFF , 1548px 1067px #FFF , 1931px 1469px #FFF , 1348px 1362px #FFF , 1851px 1340px #FFF , 986px 1976px #FFF , 1828px 654px #FFF , 1592px 1247px #FFF , 668px 1056px #FFF , 616px 1649px #FFF , 211px 98px #FFF , 945px 916px #FFF , 230px 720px #FFF , 1840px 246px #FFF , 1198px 246px #FFF , 790px 361px #FFF , 920px 241px #FFF , 602px 1553px #FFF , 898px 1115px #FFF , 1282px 1324px #FFF , 656px 1286px #FFF , 277px 1362px #FFF , 594px 1467px #FFF , 1692px 1635px #FFF , 1893px 1368px #FFF , 1672px 425px #FFF , 1662px 153px #FFF , 767px 738px #FFF , 885px 92px #FFF , 596px 685px #FFF , 832px 1015px #FFF , 1609px 242px #FFF , 897px 1582px #FFF , 1338px 850px #FFF , 103px 174px #FFF , 281px 211px #FFF , 1955px 398px #FFF , 1724px 282px #FFF , 1082px 1865px #FFF , 1919px 1082px #FFF , 1228px 1134px #FFF , 1618px 1082px #FFF , 650px 660px #FFF , 216px 394px #FFF , 1975px 226px #FFF , 540px 315px #FFF , 131px 1546px #FFF , 156px 301px #FFF , 1834px 1515px #FFF , 1501px 1623px #FFF , 859px 1067px #FFF , 1435px 491px #FFF , 1784px 1770px #FFF , 63px 788px #FFF , 159px 35px #FFF , 442px 794px #FFF , 654px 486px #FFF , 206px 705px #FFF , 1176px 724px #FFF , 1614px 1956px #FFF , 1092px 1002px #FFF , 1250px 1846px #FFF , 1646px 1520px #FFF , 1128px 69px #FFF , 989px 1342px #FFF , 261px 689px #FFF , 568px 287px #FFF , 349px 839px #FFF , 1164px 177px #FFF , 29px 174px #FFF , 1766px 1229px #FFF , 555px 1030px #FFF , 718px 794px #FFF , 814px 1595px #FFF , 507px 1988px #FFF , 1838px 1761px #FFF , 740px 699px #FFF , 1848px 417px #FFF , 419px 1644px #FFF , 1682px 1137px #FFF , 1560px 992px #FFF , 1230px 844px #FFF , 1594px 508px #FFF , 733px 413px #FFF , 1999px 1163px #FFF , 1592px 643px #FFF , 1983px 424px #FFF , 1682px 731px #FFF , 1872px 87px #FFF , 1453px 1766px #FFF , 1440px 1184px #FFF , 1553px 1879px #FFF , 987px 965px #FFF , 1512px 864px #FFF , 1522px 1333px #FFF , 883px 1204px #FFF , 1377px 1417px #FFF , 1347px 1418px #FFF , 1147px 1247px #FFF , 1132px 556px #FFF , 171px 1274px #FFF , 1459px 1909px #FFF , 147px 1766px #FFF , 1397px 314px #FFF , 1184px 883px #FFF , 637px 1716px #FFF , 1722px 364px #FFF , 432px 1171px #FFF , 756px 789px #FFF , 1795px 1766px #FFF , 1309px 1176px #FFF , 96px 468px #FFF , 123px 955px #FFF , 871px 339px #FFF , 1286px 1676px #FFF , 416px 320px #FFF , 1869px 249px #FFF , 309px 276px #FFF , 443px 669px #FFF , 339px 577px #FFF , 243px 922px #FFF , 1367px 836px #FFF , 536px 133px #FFF , 207px 1348px #FFF , 1490px 1586px #FFF , 1771px 1523px #FFF , 1739px 686px #FFF , 34px 1965px #FFF , 479px 1473px #FFF , 1158px 1560px #FFF , 1821px 1659px #FFF , 1742px 1076px #FFF , 1110px 175px #FFF , 1234px 727px #FFF +$shadows-medium: 402px 1891px #FFF , 1693px 1360px #FFF , 1618px 1474px #FFF , 1126px 471px #FFF , 1225px 1158px #FFF , 176px 637px #FFF , 1989px 1207px #FFF , 1970px 1449px #FFF , 754px 664px #FFF , 1331px 907px #FFF , 1943px 1638px #FFF , 922px 1227px #FFF , 1884px 1353px #FFF , 755px 1093px #FFF , 1390px 1324px #FFF , 1203px 493px #FFF , 430px 956px #FFF , 1731px 1043px #FFF , 183px 249px #FFF , 1997px 1595px #FFF , 542px 457px #FFF , 1334px 1788px #FFF , 877px 514px #FFF , 1821px 1538px #FFF , 1747px 1173px #FFF , 224px 870px #FFF , 880px 372px #FFF , 1089px 1228px #FFF , 1125px 758px #FFF , 1173px 129px #FFF , 1343px 596px #FFF , 1290px 300px #FFF , 219px 1516px #FFF , 1225px 1902px #FFF , 111px 413px #FFF , 730px 1973px #FFF , 1373px 127px #FFF , 1670px 728px #FFF , 1409px 1943px #FFF , 334px 1897px #FFF , 68px 979px #FFF , 1952px 923px #FFF , 1995px 1723px #FFF , 132px 132px #FFF , 408px 489px #FFF , 694px 936px #FFF , 983px 1385px #FFF , 1988px 356px #FFF , 1810px 360px #FFF , 469px 556px #FFF , 119px 1350px #FFF , 595px 1874px #FFF , 1774px 99px #FFF , 1289px 491px #FFF , 1413px 1319px #FFF , 498px 1799px #FFF , 675px 1940px #FFF , 531px 850px #FFF , 734px 707px #FFF +$shadows-big: 1970px 338px #FFF , 867px 1371px #FFF , 1548px 20px #FFF , 1401px 1645px #FFF , 1609px 726px #FFF , 170px 519px #FFF , 1065px 73px #FFF , 636px 154px #FFF , 1731px 1833px #FFF , 1573px 568px #FFF #stars width: 1px height: 1px background: transparent box-shadow: $shadows-small - animation : animStar 222s linear infinite + animation : animStar 100s linear infinite &:after content: " " @@ -55,7 +52,7 @@ $shadows-big: multiple-box-shadow(10) height: 3px background: transparent box-shadow: $shadows-medium - animation : animStar 666s linear infinite + animation : animStar 250s linear infinite &:after content: " " @@ -71,7 +68,7 @@ $shadows-big: multiple-box-shadow(10) height: 5px background: transparent box-shadow: $shadows-big - animation : animStar 1111s linear infinite + animation : animStar 650s linear infinite &:after content: " " @@ -86,4 +83,4 @@ $shadows-big: multiple-box-shadow(10) from transform: translateX(0px) translateY(0px) to - transform: translateX(-2000px) translateY(-750px) + transform: translateX(-2000px) translateY(-550px) diff --git a/src/frontend/simulations/parabola.nim b/src/frontend/simulations/parabola.nim index ecf2241..e4ce37e 100644 --- a/src/frontend/simulations/parabola.nim +++ b/src/frontend/simulations/parabola.nim @@ -173,9 +173,14 @@ const canonBaseTexture = path "img/canonBase.png" canonPlatformTexture = path "img/canonPlatform.png" - trajectoryStrokeStyles = ["Orange", "Salmon", "Crimson", "Pink", "HotPink", "Tomato", - "Gold", "Khaki", "Violet", "SlateBlue", "YellowGreen", "LightSeaGreen", - "SkyBlue"] + trajectoryStrokeStyles = ["Orange", # 16 colors = 16 possible trajectories + "Khaki", "Gold", + "YellowGreen", "LightSeaGreen", + "rgb(200, 200, 250)", "SkyBlue", "CornflowerBlue", # First one is a bluer Lavanda + "SlateBlue", "DarkOrchid", "Violet", "Pink", "HotPink", + "Crimson", "OrangeRed", "Salmon" + ] + trajectoryLineWidth = 2 trajectoryPointRadius = 7 # The radius of the trajectory point hovered by the mouse @@ -265,7 +270,7 @@ proc unpause(state: var ParabolaState) = state.paused = false proc freeze(state: var ParabolaState) = - state.pause() + state.runner.enabled = false Matter.Render.stop(state.render) # I realized that sometimes the canvas would go blank when it froze so I # thought the render might stop and leave the canvas blank so we run it once @@ -275,7 +280,7 @@ proc freeze(state: var ParabolaState) = state.frozen = true proc unfreeze(state: var ParabolaState) = - state.unpause() + state.runner.enabled = true Matter.Render.run(state.render) state.frozen = false @@ -951,7 +956,7 @@ proc initParabolaState*(): ParabolaState = zIndex: 0, isStatic: false, frictionAir: 0, friction: 1, frictionStatic: 1, collisionFilter: JsObject{mask: 0}, sleepThreshold: 1, label: cstring"bullet", }), - trajectories: @[initTrajectory()], lang: English + trajectories: @[initTrajectory()], lang: Spanish ) proc onAfterUpdate(state: var ParabolaState, event: JsObject) = @@ -1548,7 +1553,7 @@ proc load*(state: var ParabolaState) = state.canvasSize.y * 0.6, 20, 80, JsObject{zIndex: 0, isStatic: false, label: cstring"Thingy", frictionAir: 0.1, friction: 1, frictionStatic: 1, plugin: JsObject{wrap: state.wrapObject}, - collisionFilter: JsObject{category: 2, mask: 3}, sleepThreshold: 1, + collisionFilter: JsObject{category: 1, mask: 3}, sleepThreshold: 1, }) #Matter.Body.setInertia(state.thingy, 0.1) @@ -1740,6 +1745,7 @@ proc renderStateAccordion(state: var ParabolaState): VNode = proc onwheel(e: Event, n: VNode) = e.preventDefault() + if document.activeElement.isNil or not document.activeElement.toJs.isEqualNode(n.dom).to(bool): return var h = 0.0 discard parseFloat($n.value, h) @@ -1784,6 +1790,7 @@ proc renderStateAccordion(state: var ParabolaState): VNode = proc onwheel(e: Event, n: VNode) = e.preventDefault() + if document.activeElement.isNil or not document.activeElement.toJs.isEqualNode(n.dom).to(bool): return var s = 0.0 discard parseFloat($n.value, s) @@ -1834,6 +1841,8 @@ proc renderStateAccordion(state: var ParabolaState): VNode = proc onwheel(e: Event, n: VNode) = e.preventDefault() + if document.activeElement.isNil or not document.activeElement.toJs.isEqualNode(n.dom).to(bool): return + var g = 0.0 discard parseFloat($n.value, g) if e.toJs.wheelDelta.to(float) > 0: g += 1 @@ -2027,6 +2036,8 @@ proc renderPointAccordion(state: var ParabolaState): VNode = proc onwheel(e: Event, n: VNode) = e.preventDefault() + if document.activeElement.isNil or not document.activeElement.toJs.isEqualNode(n.dom).to(bool): return + var x = 0.0 discard parseFloat($n.value, x) if e.toJs.wheelDelta.to(float) > 0: x += 1 @@ -2054,6 +2065,8 @@ proc renderPointAccordion(state: var ParabolaState): VNode = proc onwheel(e: Event, n: VNode) = e.preventDefault() + if document.activeElement.isNil or not document.activeElement.toJs.isEqualNode(n.dom).to(bool): return + var t = 0.0 discard parseFloat($n.value, t) if e.toJs.wheelDelta.to(float) > 0: t += 0.1 @@ -2179,6 +2192,39 @@ proc addTrajectory(state: var ParabolaState) = state.calcTrajectory() if not kxi.surpressRedraws: redraw(kxi) +proc renderHelpModal(state: var ParabolaState): VNode = + buildHtml tdiv(class = "modal", id = "help-modal"): + a(class = "modal-overlay", `aria-label`="Close"): + proc onclick() = + getElementById("help-modal").classList.remove("active") + + tdiv(class = "modal-container"): + tdiv(class = "modal-header"): + a(class = "btn btn-clear float-right", `aria-label`="Close"): + proc onclick() = + getElementById("help-modal").classList.remove("active") + + tdiv(class = "modal-title h5"): text state.lang.help + + tdiv(class = "modal-body"): + tdiv(class = "content"): + ul: + li text state.lang.help1 + li text state.lang.help2 + li text state.lang.help3 + li text state.lang.help4 + li text state.lang.help5 + li text state.lang.help6 + li text state.lang.help7 + li text state.lang.help8 + li text state.lang.help9 + li text state.lang.help10 + + tdiv(class = "modal-footer"): + text state.lang.helpFooter("v", config.version) + a(href = cstring config.website): text "GitHub" + text "." + proc renderSettingsModal(state: var ParabolaState): VNode = proc onClickStep(t: float): auto = proc(e: Event, n: VNode) = @@ -2226,6 +2272,11 @@ proc renderSettingsModal(state: var ParabolaState): VNode = discard parseInt($n.value, i) state.lang = Locale(i) if not kxi.surpressRedraws: redraw(kxi) + discard setTimeout(proc() = + state.updateFormulaAccordion() + state.updateStateAccordion() + state.updatePointAccordion() + , 100) tdiv(class = "form-group"): label(class = "form-switch"): @@ -2270,7 +2321,7 @@ proc renderSettingsModal(state: var ParabolaState): VNode = italic(class = "form-icon") text state.lang.showFormulaResults - tdiv(class = "form-group"): + tdiv(class = "form-group tooltip", `data-tooltip` = cstring state.lang.animationWarning): label(class = "form-switch"): input(`type` = "checkbox", id = "settings-sa", checked = false): @@ -2297,10 +2348,40 @@ proc renderSettingsModal(state: var ParabolaState): VNode = n.dom.parentElement.setAttr("data-tooltip", n.value) tdiv(class = "modal-footer"): - text state.lang.aboutMsg(config.version) + text state.lang.aboutMsg("v", config.version) a(href = cstring config.website): text "GitHub" text "." +proc renderButtons(state: var ParabolaState): VNode = + buildHtml tdiv(class = "btn-group btn-group-block", style = toCss "margin-left: 1rem; margin-right: 1rem;"): + button(class = "btn btn-action btn-primary tooltip", `data-tooltip` = cstring state.lang.fireTooltip): + span(class = "material-symbols-outlined"): text "rocket_launch" + + proc onclick() = + state.fireBullet() + + button(class = "btn btn-action btn-primary tooltip", `data-tooltip` = cstring state.lang.togglePauseTooltip): + span(class = "material-symbols-outlined"): + if state.paused: text "play_arrow" + else: text "pause" + + proc onclick() = + if not state.startedRendering: return + + if state.paused: + if state.frozen: + state.unfreeze() + state.unpause() + else: + state.pause() + + button(class = "btn btn-action btn-primary tooltip", `data-tooltip` = cstring state.lang.reloadTooltip): + span(class = "material-symbols-outlined"): text "refresh" + + proc onclick() = + if state.startedRendering: + state.reload() + proc renderTrajectories(state: var ParabolaState): VNode = proc onRadioChange(e: int): auto = proc() = @@ -2340,7 +2421,9 @@ proc renderTrajectories(state: var ParabolaState): VNode = tdiv(class = "col-7", id = "traj-radios"): if state.trajectories.len < trajectoryStrokeStyles.len: button(class = "btn btn-action btn-sm", style = "margin-right: 0.5rem;".toCss): - italic(class = "icon icon-plus") + #italic(class = "icon icon-plus") + span(class = "material-symbols-outlined"): text "add" + proc onclick() = state.addTrajectory() for e, t in state.trajectories: @@ -2349,28 +2432,30 @@ proc renderTrajectories(state: var ParabolaState): VNode = label(class = "form-radio form-inline", ondblclick = onRemoveClick(e)): input(`type` = "radio", name = "trajectory", onchange = onRadioChange(e), checked = checked) - italic(class = "form-icon", style = toCss &"background-color: {color}; border-color: {color}") + italic(class = "form-icon", style = toCss &"background-color: {color}; border-color: color-mix(in srgb, black 15%, {color});") - tdiv(class = "col-2", style = toCss "padding-right: 0.2rem; display: flex; justify-content: flex-end;"): + tdiv(class = "col-2", style = toCss "padding-right: 0.4rem; display: flex; justify-content: flex-end;"): button(class = "btn btn-action btn-sm", style = toCss "border: none;"): span(class = "material-symbols-outlined"): text "help" proc onclick() = - discard - #getElementById("settings-modal").classList.add("active") + getElementById("help-modal").classList.add("active") button(class = "btn btn-action btn-sm", style = toCss "border: none;"): span(class = "material-symbols-outlined"): text "settings" proc onclick() = getElementById("settings-modal").classList.add("active") + state.renderHelpModal() state.renderSettingsModal() proc renderRightDiv(state: var ParabolaState): VNode = buildHtml tdiv(class = "column col-4", style = toCss "overflow: auto; height: 100%; " & - "scrollbar-width: thin;"): + "scrollbar-width: thin; border-left: 0.3rem solid darkgray;"): state.renderTrajectories() + state.renderButtons() + tdiv(class = "accordion"): input(`type` = "checkbox", name = "accordion-checkbox", id = "accordion-1", hidden = true, checked = true) @@ -2440,6 +2525,7 @@ proc addEventListeners*(state: var ParabolaState) = state.reload() of "p": state.togglePause() + if not kxi.surpressRedraws: redraw(kxi) of "Enter": state.addTrajectory() of "d": diff --git a/src/translations.nim b/src/translations.nim index 50bc12b..ee002c0 100644 --- a/src/translations.nim +++ b/src/translations.nim @@ -98,7 +98,7 @@ i18nInit Locale, true: Spanish = "Trayectorias" trajTooltip: English = "Double-click a trajectory to delete it" - Spanish = "Da doble click sobre una trajectoria\npara eliminarla" + Spanish = "Da doble clic sobre una trajectoria\npara eliminarla" iniState: English = "Initial State" Spanish = "Estado Inicial" @@ -130,18 +130,55 @@ i18nInit Locale, true: English = "Animate background stars" Spanish = "Animar las estrellas de fondo" aboutMsg: - English = "Made by Patitotective. Source code in " + English = "$v. Made by Patitotective. Source code in " Spanish = "Hecho por Patitotective. Código fuente en " + animationWarning: + English = "Has a high impact in the performance" + Spanish = "Tiene un alto impacto en el rendimiento" + help: + English = "Help" + Spanish = "Ayuda" + help1: + English = "You can change the initial angle of the canon by dragging the canon or by pressing the right and left keys." + Spanish = "Puedes cambiar el ángulo inicial del cañón arrastrando el cañon o presionando las flechas de derecha y izquierda." + help2: + English = "You can move the canon in the Y axis by dragging the base of the canon or the platform below the canon." + Spanish = "Puedes mover el cañón en el eje Y arrastrando la base del cañón o la plataforma debajo del cañón." + help3: + English = "You can change the inital speed of the canon by moving the wheel on your mouse, by dragging with two fingers in your touchpad or by pressing the up and down keys." + Spanish = "Puiedes cambiar la rapidez inicial del cañón moviendo la rueda del mouse, arrastrando con dos dedos en el touchpad o presionando las flechas de arriba y abajo." + help4: + English = "You can select any point in the trajectory by double-clicking and dragging the mouse, you can remove this point by double-clicking far from the trajectory." + Spanish = "Puedes seleccionar cualquier punto en la trayectoria dando doble clic y arrastrando el mouse, puedes quitar este punto dando doble clic lejos de la trayectoria." + help5: + English = "You can pause the simulation by pressing the key P." + Spanish = "Puedes pausar la simulación presionand la tecla P." + help6: + English = "You can fire a bullet by pressing the wheel on your mouse, pressing with three fingers in your touchpad or by pressing the spacebar." + Spanish = "Puedes disparar una bala presionando la rueda del mouse, presionando con tres dedos en el touchpad o presionando la barra espaciadora." + help7: + English = "You can add a new trajectory by pressing the enter key." + Spanish = "Puedes añadir una trayectoria nueva presionando la tecla enter." + help8: + English = "You can grab any bullet or rectangle and move it around the screen." + Spanish = "Puedes agarrar cualquier bala o rectángulo y moverlo alrededor de la pantalla." + help9: + English = "You can restart the simulation to the initial state by pressing the backspace key." + Spanish = "Puedes reiniciar la simulación a su estado inicial presionando la tecla backspace o retroceso." + help10: + English = "Remember that all of the values are rounded to two decimal places." + Spanish = "Recuerda que todos los valores están redondeados a dos decimales." - #ihaveCat: - # English = "I've many cats." - # Chinese = "我有很多小猫。" - # Myanmar = "ငါ့ဆီမှာ ကြောင် အများကြီးရှိတယ်။" - # # translation definition can have sub-translation definition - # withCount: - # # translations can be lambda / closure - # English = proc(count: int): string = - # case count - # of 0: "I don't have a cat." - # of 1: "I have one cat." - # else: "I have " & $count & " cats." + helpFooter: + English = "v$v. Feel free to ask more questions or report bugs in " + Spanish = "v$v. Si tienes más preguntas o quieres reportar un problema visita " + + togglePauseTooltip: + English = "Press P" + Spanish = "Presiona la P" + reloadTooltip: + English = "Press backspace" + Spanish = "Presiona retroceso" + fireTooltip: + English = "Press space or middle-click" + Spanish = "Presiona espacio o\nda clic con la rueda"