ui work

angular.json

@@ -113,5 +113,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

package-lock.json

@@ -20,11 +20,15 @@
         "chart.js": "^4.3.0",
         "chartjs-adapter-moment": "^1.0.1",
         "moment": "^2.29.4",
+        "ng-particles": "^3.10.1",
+        "ngx-device-detector": "^6.0.2",
         "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
         "primeng": "16.0.2",
         "rxjs": "~7.8.1",
         "tslib": "^2.3.0",
+        "tsparticles": "^2.10.1",
+        "tsparticles-engine": "^2.10.1",
         "zone.js": "~0.13.1"
       },
       "devDependencies": {
@@ -8106,6 +8110,46 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ng-particles": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/ng-particles/-/ng-particles-3.10.1.tgz",
+      "integrity": "sha512-/LKM6SSfvyXlJJU0tcENuaP5BOtX+05BGdB2eCsRDwvp9N7ko4E3O0nPDWhYCljPxf7e0WsXcWY/lRVdCquWxg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "dependencies": {
+        "tslib": "^2.4.1"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=2.0.0",
+        "@angular/core": ">=2.0.0",
+        "rxjs": ">=7.0.0",
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/ngx-device-detector": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ngx-device-detector/-/ngx-device-detector-6.0.2.tgz",
+      "integrity": "sha512-+zaYUYGepNE4vMBA/6kyc1rhuUm5uU4cwbvFEEy0gAY4OarId15zwcb1iyvQbyrLCXhZW0DrPZTBoQxzp7dyVw==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^16.0.0",
+        "@angular/core": "^16.0.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -10728,6 +10772,450 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
       "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
     },
+    "node_modules/tsparticles": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-2.10.1.tgz",
+      "integrity": "sha512-MIPty6UvjRDbFBtnXjedr68WrxlCSa4XmNND7beRcqqdUb+fQKy/3u64sZ15qBQ4JVV5GcvKYijlOGbmTU3SCw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1",
+        "tsparticles-interaction-external-trail": "^2.10.1",
+        "tsparticles-plugin-absorbers": "^2.10.1",
+        "tsparticles-plugin-emitters": "^2.10.1",
+        "tsparticles-slim": "^2.10.1",
+        "tsparticles-updater-destroy": "^2.10.1",
+        "tsparticles-updater-roll": "^2.10.1",
+        "tsparticles-updater-tilt": "^2.10.1",
+        "tsparticles-updater-twinkle": "^2.10.1",
+        "tsparticles-updater-wobble": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-engine": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.10.1.tgz",
+      "integrity": "sha512-DV2gYsbChyiXYIZYgnXtKHSAZdvnNMJpVf9Cw0gO7vjQ6pcgLAeyboRtvsaTfwKZNzzA7BeSf1lVhgGxorL4CQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "hasInstallScript": true
+    },
+    "node_modules/tsparticles-interaction-external-attract": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-attract/-/tsparticles-interaction-external-attract-2.10.1.tgz",
+      "integrity": "sha512-n/G8YWmoBc8CxZgwPwRA858bWe0dyl/7HS7sUi72m64ptzZlMEcUzfMD6v+PoqTsypLRLN4vWIiGoczkZKxOuw==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-bounce": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-bounce/-/tsparticles-interaction-external-bounce-2.10.1.tgz",
+      "integrity": "sha512-XKsZ8eQJy3w+bjqJYbgOTs3BpL4ykB4Ank7xUNxOgkjtVz/YtUJyCEBlVN+2aRZGLnbFEs2ZZGQVIx+6wyjcCw==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-bubble": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-bubble/-/tsparticles-interaction-external-bubble-2.10.1.tgz",
+      "integrity": "sha512-tY2rySRyyn89K2bjE0gWXI5nuBZljjIW2UbY7rOqd7YeGm6FrcUfuuU1G0sG13cX/u0ufRYi0kDnzCvlfLqwJg==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-connect": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-connect/-/tsparticles-interaction-external-connect-2.10.1.tgz",
+      "integrity": "sha512-tNPlc0csQa9vrzSarlAw+K2YbB5EDU302OkejVUWc7h58hxpPgzR3Fy8O2CsFy8OC1Pw6MNUO+5grG+QvCMj3A==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-grab": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-grab/-/tsparticles-interaction-external-grab-2.10.1.tgz",
+      "integrity": "sha512-5HPjZ4BaRi0k6dUq3UBf/vQ+eMS/e2GERsFMQz8p1Efm7SLz3Uu6gDu3AnamKtzQLUPVtlaUIS+BCsFPZ6EM8w==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-pause": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-pause/-/tsparticles-interaction-external-pause-2.10.1.tgz",
+      "integrity": "sha512-eW5mh/+tM2ipKXyvDZ1MCj6pMTEBStzB+p4coVYfvn2mBXgviY1ktPbN4yGAJc8Fii6YdeqgKQxw7JHSFe6HbQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-push": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-push/-/tsparticles-interaction-external-push-2.10.1.tgz",
+      "integrity": "sha512-cjpEnjxN0OEIZwVRDVLdBIEnS0aYxOlV8K7TVtIDvWCAEWi52C+YnVu7XHzr9CGERVlBOElQSLua5CvoM0XYSA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-remove": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-remove/-/tsparticles-interaction-external-remove-2.10.1.tgz",
+      "integrity": "sha512-6qi4Q61JkmOhPCOf8NXGqWHb1uMlp/BQteSWSEBR1a/jztcbzEpz90spYsObettfZaNDPqVSUiGN4uHtX747CA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-repulse": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-repulse/-/tsparticles-interaction-external-repulse-2.10.1.tgz",
+      "integrity": "sha512-t4P9ReEBejBYP6Hjrm9jRioFcFTlEuahD1BK7roYaG2pvesBubCmIzS5Gzr79ZEvUQNpQ0r3KmYFIVZyBqaVbQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-slow": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-slow/-/tsparticles-interaction-external-slow-2.10.1.tgz",
+      "integrity": "sha512-XAnUscVedw/cMiGJIM7rJ+7RfJSLYWET1WT2eo86B/A3YrDawg2xL5QdzfqurKalvnwRBhAYjpQM0qp6w9//Pw==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-trail": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-trail/-/tsparticles-interaction-external-trail-2.10.1.tgz",
+      "integrity": "sha512-ubGdlLi7JPeunof4roAx/c1BAVWPHqwRcnZK61TPVF3yITsrWli3j5g52KU+kcPaqfdlnRB1rqB6dMjUU2omlA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-particles-attract": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-attract/-/tsparticles-interaction-particles-attract-2.10.1.tgz",
+      "integrity": "sha512-o7p8Te65HXMM/8Qev8wyA4if4W+5VtfD/hTziQEt5Fp3mdxXWdit7jgfvOYnphJoswD0Cr5rEEjvhGuHGoC3dw==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-particles-collisions": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-collisions/-/tsparticles-interaction-particles-collisions-2.10.1.tgz",
+      "integrity": "sha512-xSijIyjhUOOZEvdk59HZJksBM8BXUbOtNHx7di7qguUmeQ+MeB2GbP8sje/xSEA1wAEzeD6FFBmOTtDlZQTWOg==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-interaction-particles-links": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-links/-/tsparticles-interaction-particles-links-2.10.1.tgz",
+      "integrity": "sha512-O6NkvV5muOsitJkicW3eqwPCjkRDWZzY5Twq8NkqCKTXkzpQtow8ByTMKcIWsW1GR6ltylrgyCId5KMwLRArbA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-move-base": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-move-base/-/tsparticles-move-base-2.10.1.tgz",
+      "integrity": "sha512-Q7JHIRPuJZw/Jz7vEeCePMR/69ace5rpWPqZ3+KLJnrtayxDEvj4tNRjnPtZusJ1Ve+wp0IxjOwrfGxeHxbmsQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-move-parallax": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-move-parallax/-/tsparticles-move-parallax-2.10.1.tgz",
+      "integrity": "sha512-FeP+rwanLZvFtftPjTbzJCTZa6kSgP2UWa9WL3VUWzXWTt2UKqPeahhtNqXyRvjqxtVlcZDxFeX7lOvdDHxTNA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-particles.js": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-particles.js/-/tsparticles-particles.js-2.10.1.tgz",
+      "integrity": "sha512-9mtKrvAJ6bQVUvZlPfea48RwoKUM5qz/NYtXbxpPjJxfsHLnie6R6brHl+8DgrP710UO4rVN2jyPZLvwHWVfyQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-plugin-absorbers": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-plugin-absorbers/-/tsparticles-plugin-absorbers-2.10.1.tgz",
+      "integrity": "sha512-OSQCtIrWyDJc32Q6hk1B0vWrMATTZtqeu2mGR1Jg5d2/Ur4q9QkDB5oSYmAT1LVCEz0aipyOwqMaRBh5a65S2Q==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-plugin-easing-quad": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-plugin-easing-quad/-/tsparticles-plugin-easing-quad-2.10.1.tgz",
+      "integrity": "sha512-KJHqsEgX4PSaG0gUE/oSd9kcxxRKuC+VbblN1YLsamMw1lPwNulxgh0hOWg3j87YasiUH+LkyC+XvyzF8/x8pQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-plugin-emitters": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-plugin-emitters/-/tsparticles-plugin-emitters-2.10.1.tgz",
+      "integrity": "sha512-SHuPH0qYA70gWNeOzn3DXk9W/IjTMtbeYhHWLOruTThrcLgBT4bRI5ooLnITjraMaTYf4FWdl7Mi/1MRkT5yUg==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-shape-circle": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-circle/-/tsparticles-shape-circle-2.10.1.tgz",
+      "integrity": "sha512-oWfoF1rwBNDS8X8EBZVwt/UF9wBqh3OpV71LxCvTE9lh73FeUeQZ9aSW46t9XODIsNBMPbnAQNkP1wz4zNiw2A==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-shape-image": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-image/-/tsparticles-shape-image-2.10.1.tgz",
+      "integrity": "sha512-elayAfRPJquv9GhPYpWmDQ4oyRQqa1poxidyKL0qhnU35nyk2yW3fW2awX2QrBDdU+HusBQgP64k+v6HZApsdg==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-shape-line": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-line/-/tsparticles-shape-line-2.10.1.tgz",
+      "integrity": "sha512-3BWNjY0l1vsvKJvMMjkFNtCts3YPOnnd9w4d0d19XXv03jWNbhXC159Xeho/w+jlVcQWsExMxhVPlJYLOPa+Qw==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-shape-polygon": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-polygon/-/tsparticles-shape-polygon-2.10.1.tgz",
+      "integrity": "sha512-ycNJ9j3fNDkqh02J2NUQhNSXxXjQ/GYa9XIuy8dbUTfOrTcMnx7+u0dOSG8gcqp0F8EovLhOlansLYQbEuV4wQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-shape-square": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-square/-/tsparticles-shape-square-2.10.1.tgz",
+      "integrity": "sha512-mThpV69K96piNuuti74t2xWKXUJ8fGBXVRg+s72lP34mTbF2O5S4A+HMQMixLLbiq1TFgcLGf7MfxRMRo9sZBA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-shape-star": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-star/-/tsparticles-shape-star-2.10.1.tgz",
+      "integrity": "sha512-IWydbZ+ttv8+yyC3OucZvOffyYDZxfsHQYg1w8pWS5p/CyB4Ln+dn0Jp7TDDz/Y7HEaEr4mIzMHyL7ZQTj2wIw==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-shape-text": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-text/-/tsparticles-shape-text-2.10.1.tgz",
+      "integrity": "sha512-g2f3CPj/M4rKCKA18eKFOC6D90p+aToPFKzADVmJhDx7I3k5VAM/y/IDkQTDc1w6DmTOvEd5BY+QrYbfTvs+YQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-slim": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-slim/-/tsparticles-slim-2.10.1.tgz",
+      "integrity": "sha512-A2DMPfZKINQp4GtW2rVv435flaLAun8MMZnOEdZdpnk51tbPHiBTVybfzYZVSOK2B7z8uCzmaplTyYkyDZsk1A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1",
+        "tsparticles-interaction-external-attract": "^2.10.1",
+        "tsparticles-interaction-external-bounce": "^2.10.1",
+        "tsparticles-interaction-external-bubble": "^2.10.1",
+        "tsparticles-interaction-external-connect": "^2.10.1",
+        "tsparticles-interaction-external-grab": "^2.10.1",
+        "tsparticles-interaction-external-pause": "^2.10.1",
+        "tsparticles-interaction-external-push": "^2.10.1",
+        "tsparticles-interaction-external-remove": "^2.10.1",
+        "tsparticles-interaction-external-repulse": "^2.10.1",
+        "tsparticles-interaction-external-slow": "^2.10.1",
+        "tsparticles-interaction-particles-attract": "^2.10.1",
+        "tsparticles-interaction-particles-collisions": "^2.10.1",
+        "tsparticles-interaction-particles-links": "^2.10.1",
+        "tsparticles-move-base": "^2.10.1",
+        "tsparticles-move-parallax": "^2.10.1",
+        "tsparticles-particles.js": "^2.10.1",
+        "tsparticles-plugin-easing-quad": "^2.10.1",
+        "tsparticles-shape-circle": "^2.10.1",
+        "tsparticles-shape-image": "^2.10.1",
+        "tsparticles-shape-line": "^2.10.1",
+        "tsparticles-shape-polygon": "^2.10.1",
+        "tsparticles-shape-square": "^2.10.1",
+        "tsparticles-shape-star": "^2.10.1",
+        "tsparticles-shape-text": "^2.10.1",
+        "tsparticles-updater-color": "^2.10.1",
+        "tsparticles-updater-life": "^2.10.1",
+        "tsparticles-updater-opacity": "^2.10.1",
+        "tsparticles-updater-out-modes": "^2.10.1",
+        "tsparticles-updater-rotate": "^2.10.1",
+        "tsparticles-updater-size": "^2.10.1",
+        "tsparticles-updater-stroke-color": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-updater-color": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-color/-/tsparticles-updater-color-2.10.1.tgz",
+      "integrity": "sha512-/7FCR/VzpOuiE0ztGEzzN4vNeLGbS9QUBX78OM59GDZujlHfjfWh1jqedyNXrhkb6mf08B3FZWiQWGysPeL31Q==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-updater-destroy": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-destroy/-/tsparticles-updater-destroy-2.10.1.tgz",
+      "integrity": "sha512-lFTyVgLNt4x1T4jBHRs+V8gFUQKwXkMbeNF5JUNwlrmGBr/Mx0A36XBcJ4BKZR5+jWO1C6I8jgYzIrFPx6Z+MQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-updater-life": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-life/-/tsparticles-updater-life-2.10.1.tgz",
+      "integrity": "sha512-qhd+uVxxGLS50bN75POU2lHgqBhXBpRmdY/RnW6mwHGrs5SgiU0XoM0il3+RoAnvpscWG/5ZgEXvpm7ZvbNUWA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-updater-opacity": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-opacity/-/tsparticles-updater-opacity-2.10.1.tgz",
+      "integrity": "sha512-l1FOevfK9CMz9cBRT5prQpHACijYJ+3dHvIfx0Y5M5Do4etoT+PurZxDpQlQU6Yd0vXKm3r37paPiQbH5U3Vqg==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-updater-out-modes": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-out-modes/-/tsparticles-updater-out-modes-2.10.1.tgz",
+      "integrity": "sha512-nzP/puePd97FlME9gzmjwdQWoqm+O7GtnkbD33a4NBlzJMgtjbGtmz/Tmc4hLicb/qwS5D8j9xvB+srsuxT7LA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-updater-roll": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-roll/-/tsparticles-updater-roll-2.10.1.tgz",
+      "integrity": "sha512-5v43esqjPy/GbXXJKOqOF4fD7zndQFE7G5iqF76dp8RaG2V+tIb96j8+wx2B32K9VjEOk3XwOKjYnHtdpYPhvg==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-updater-rotate": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-rotate/-/tsparticles-updater-rotate-2.10.1.tgz",
+      "integrity": "sha512-GWCyLrB0JaEY0nugFU5E22b/LjSF6Bv4q5dXsbtzqjD9Ka/DPMJ8js8bzJhNf3jftQzf6zBXf72W0kyZH79VIQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-updater-size": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-size/-/tsparticles-updater-size-2.10.1.tgz",
+      "integrity": "sha512-Kdtskqm0CRrlsovOsJLcS6NXF0alJ6NlwmW7oWnTK6EeLvEKaqisG/hjcFf+l7eXlmL8j9rYgh6wctaef6GBCw==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-updater-stroke-color": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-stroke-color/-/tsparticles-updater-stroke-color-2.10.1.tgz",
+      "integrity": "sha512-iYLO1y9lH0bOxxE5gPRdsYR5UVIvtxWpera8C5JBXaHywROkJ8CSXxA2pIe01kUIwIOcOv8j26RJvKNdttv9kQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-updater-tilt": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-tilt/-/tsparticles-updater-tilt-2.10.1.tgz",
+      "integrity": "sha512-MLNZPSc+nM+M5KV9i6tHtzxqSIhQ9VQAuKOuKqHRxs3fkFXboc1dNKA5Ou16roi/efqpc1gXrtZvhPF+holp2Q==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-updater-twinkle": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-twinkle/-/tsparticles-updater-twinkle-2.10.1.tgz",
+      "integrity": "sha512-Y+/34BCG2/tTm1lpHniNhh3P5M0u5i6qjt/MGquR6yXzQqjmRkhW29vtqd8tZcVx4KZ7Rj0mOUIHFX8bc3YRHQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
+    "node_modules/tsparticles-updater-wobble": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-wobble/-/tsparticles-updater-wobble-2.10.1.tgz",
+      "integrity": "sha512-Kf5MfhjkXKlB0hiZPUJCv0PCxRH2E1nmyUnqu05xSZGjQDTS+A/uNtUvIA1nrq7l38VVgpRREtnYka2whOhzwQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.10.1"
+      }
+    },
     "node_modules/tuf-js": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-1.1.7.tgz",

package.json

@@ -22,11 +22,15 @@
     "chart.js": "^4.3.0",
     "chartjs-adapter-moment": "^1.0.1",
     "moment": "^2.29.4",
+    "ng-particles": "^3.10.1",
+    "ngx-device-detector": "^6.0.2",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primeng": "16.0.2",
     "rxjs": "~7.8.1",
     "tslib": "^2.3.0",
+    "tsparticles": "^2.10.1",
+    "tsparticles-engine": "^2.10.1",
     "zone.js": "~0.13.1"
   },
   "devDependencies": {

src/app/app.component.html

@@ -1 +1,2 @@
+<app-background-particles></app-background-particles>
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -4,17 +4,19 @@ import { CommonModule, HashLocationStrategy, LocationStrategy } from '@angular/c
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { NgParticlesModule } from 'ng-particles';
 
 import { PrimeNGModule } from '../prime-ng.module';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { BackgroundParticlesComponent } from './components/background-particles/background-particles.component';
 import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { SplashComponent } from './components/splash/splash.component';
+import { WorkerGroupComponent } from './components/worker-group/worker-group.component';
 import { WorkerComponent } from './components/worker/worker.component';
 import { AppLayoutModule } from './layout/app.layout.module';
-import { NumberSuffixPipe } from './pipes/number-suffix.pipe';
 import { DateAgoPipe } from './pipes/date-ago.pipe';
-import { WorkerGroupComponent } from './components/worker-group/worker-group.component';
+import { NumberSuffixPipe } from './pipes/number-suffix.pipe';
 
 
 
@@ -26,7 +28,8 @@ import { WorkerGroupComponent } from './components/worker-group/worker-group.com
     WorkerComponent,
     NumberSuffixPipe,
     DateAgoPipe,
-    WorkerGroupComponent
+    WorkerGroupComponent,
+    BackgroundParticlesComponent
   ],
   imports: [
     CommonModule,
@@ -35,7 +38,8 @@ import { WorkerGroupComponent } from './components/worker-group/worker-group.com
     PrimeNGModule,
     AppLayoutModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    NgParticlesModule
   ],
   providers: [
     { provide: LocationStrategy, useClass: HashLocationStrategy },

src/app/components/background-particles/background-particles.component.html

@@ -0,0 +1,2 @@
+<ng-particles id="particles" [options]="particleOptions" [style]="particleStyles" [particlesInit]="particlesInit"
+    (particlesLoaded)="particlesLoaded($event)"></ng-particles>

src/app/components/background-particles/background-particles.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BackgroundParticlesComponent } from './background-particles.component';
+
+describe('BackgroundParticlesComponent', () => {
+  let component: BackgroundParticlesComponent;
+  let fixture: ComponentFixture<BackgroundParticlesComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BackgroundParticlesComponent]
+    });
+    fixture = TestBed.createComponent(BackgroundParticlesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/background-particles/background-particles.component.ts

@@ -0,0 +1,89 @@
+import { Component, OnInit } from '@angular/core';
+import { IParticlesProps } from 'ng-particles';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { loadFull } from 'tsparticles';
+import { Container, Engine } from 'tsparticles-engine';
+
+@Component({
+  selector: 'app-background-particles',
+  templateUrl: './background-particles.component.html',
+  styleUrls: ['./background-particles.component.scss']
+})
+export class BackgroundParticlesComponent implements OnInit {
+  public particleStyles!: any;
+  public particleOptions!: IParticlesProps;
+
+
+  constructor(private deviceService: DeviceDetectorService) { }
+
+  ngOnInit(): void {
+    this.particleStyles = {
+      position: 'fixed',
+      width: '100%',
+      height: '100%',
+      'z-index': -1,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    };
+
+    const color: string = '#96bcf9';
+    const lineColor: string = '#afccfa';
+
+    this.particleOptions = {
+      fpsLimit: this.deviceService.isDesktop() ? 30 : 1,
+      detectRetina: true,
+      background: {
+        position: "50% 50%",
+        repeat: "no-repeat",
+        size: "cover"
+      },
+      fullScreen: {
+        zIndex: 1
+      },
+      particles: {
+        number: {
+          value: 80,
+          density: {
+            enable: true,
+            value_area: 800
+          }
+        },
+        color: {
+          value: color
+        },
+        opacity: { value: 0.6 },
+        links: {
+          distance: 150,
+          enable: true,
+          color: {
+            value: lineColor
+          },
+          opacity: 0.6
+        },
+        move: {
+          enable: true,
+          speed: 0.4
+        },
+        size: {
+          random: true,
+
+        }
+      }
+    }
+  }
+
+  particlesLoaded(container: Container): void {
+    console.log(container);
+  }
+
+  async particlesInit(engine: Engine): Promise<void> {
+    console.log(engine);
+
+    // Starting from 1.19.0 you can add custom presets or shape here, using the current tsParticles instance (main)
+    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
+    // starting from v2 you can add only the features you need reducing the bundle size
+    await loadFull(engine);
+  }
+}

src/app/components/splash/splash.component.html

@@ -4,7 +4,7 @@
         <div class="col-12">
 
             <div class="card text-center">
-                <div class="col-12 text-center mt-8 mb-4">
+                <div class="col-12 text-center mt-4 mb-4">
                     <h2 class="text-900 font-normal mb-2">Public Pool</h2>
                 </div>
 
@@ -13,12 +13,14 @@
 
                 </div>
                 <div>
+                    <div class="info">
                         <code>stratum+tcp://public-pool-web.airdns.org:40557</code>
                         <br>
-                    <code>username: &lt;your address&gt;, password: x</code>
+                        <code>username: &lt;your BTC address&gt;.&lt;worker name&gt;, password: x</code>
                         <br>
                         <br>
-                    <code>1.8% fee</code>
+                    </div>
+                    <code>1.8% fee includes donations to <a href="https://discord.gg/pF9smpe3yE" target="_blank">open source Bitcoin mining</a></code>
                     <br>
                     <code>No second best.</code>
                 </div>
@@ -27,7 +29,7 @@
 
                     <input [formControl]="address" placeholder="Address (bc1...)" pInputText id="address" type="text"
                         class="p-inputtext p-component p-element">
-                    <button [disabled]="address.invalid" class="ml-3" pButton label="My Account"
+                    <button [disabled]="address.invalid" class="ml-3" pButton label="My Workers"
                         [routerLink]="['app',address.value]"></button>
                 </div>
             </div>

src/app/components/splash/splash.component.scss

@@ -1,3 +1,7 @@
 #address {
     min-width: 325px;
 }
+
+.info {
+    font-weight: bold;
+}