ui work

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>
-                    <code>stratum+tcp://public-pool-web.airdns.org:40557</code>
-                    <br>
-                    <code>username: &lt;your address&gt;, password: x</code>
-                    <br>
-                    <br>
-                    <code>1.8% fee</code>
+                    <div class="info">
+                        <code>stratum+tcp://public-pool-web.airdns.org:40557</code>
+                        <br>
+                        <code>username: &lt;your BTC address&gt;.&lt;worker name&gt;, password: x</code>
+                        <br>
+                        <br>
+                    </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;
 }