landpage card

ui/pi-web-agent-app/src/app/app.module.ts

@@ -18,6 +18,8 @@ import { MainViewComponent } from './main-view/main-view.component';
 import { UpdateManagementComponent } from './update-management/update-management.component';
 import { ConsoleComponent } from './console/console.component';
 import { NgTerminalModule } from 'ng-terminal';
+import { MatCardModule } from '@angular/material/card';
+
 
 @NgModule({
   declarations: [
@@ -26,7 +28,7 @@ import { NgTerminalModule } from 'ng-terminal';
     PoweroffComponent,
     MainViewComponent,
     UpdateManagementComponent,
-    ConsoleComponent
+    ConsoleComponent,
   ],
   imports: [
     BrowserModule,
@@ -40,7 +42,8 @@ import { NgTerminalModule } from 'ng-terminal';
     MatSidenavModule,
     MatToolbarModule,
     MatButtonModule,
-    NgTerminalModule
+    NgTerminalModule,
+    MatCardModule
   ],
   providers: [],
   bootstrap: [AppComponent]

ui/pi-web-agent-app/src/app/live-info/live-info.component.html

@@ -1,9 +1,20 @@
-
-
-<mat-list *ngIf='systemInfo$ | async as systemInfo'>
-    <mat-list-item>OS: {{systemInfo.OS_Info.Id}} {{systemInfo.OS_Info.Version_Codename}}</mat-list-item>
+<div class='bg'>
+<mat-card class='example-card' class='section'>
+  <mat-card-header>
+    <mat-card-title class='fade-in-image' ><b>System Info</b></mat-card-title>
+    <mat-card-subtitle></mat-card-subtitle>
+  </mat-card-header>
+  <img mat-card-image src='/assets/images/info.png' alt="SYstem Infomrmation">
+  <mat-card-content>
+  <mat-list *ngIf='systemInfo$ | async as systemInfo' >
+    <mat-list-item ><b>OS:</b>&nbsp; {{systemInfo.OS_Info.Id}} {{systemInfo.OS_Info.Version_Codename}}</mat-list-item>
     <mat-divider></mat-divider>
-    <mat-list-item>Kernel: {{systemInfo.Kernel}}</mat-list-item>
+    <mat-list-item><b>Kernel:</b>&nbsp; {{systemInfo.Kernel}}</mat-list-item>
     <mat-divider></mat-divider>
-    <mat-list-item>Temperature: {{systemInfo.Temperature}}</mat-list-item>
+    <mat-list-item><b>Temperature:</b>&nbsp; {{systemInfo.Temperature}}</mat-list-item>
 </mat-list>
+  </mat-card-content>
+</mat-card></div>
+
+
+

ui/pi-web-agent-app/src/app/live-info/live-info.component.scss

@@ -0,0 +1,55 @@
+body {
+height: 90vh;
+  background-color: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.example-card {
+  max-width: 400px;
+}
+
+.section {
+position: absolute;
+left: 50%;
+top: 50%;
+width: 20rem;
+height: 30rem;
+transform: translate(-50%, -50%);
+display: flex;
+flex-wrap: wrap;
+box-shadow: 7px 7px 15px rgba(55, 84, 170, 0.15),
+    -2px -2px 10px rgba(255, 255, 255, 1),
+    inset 0px 0px 4px rgba(255, 255, 255, 0.2),
+    inset 7px 7px 15px rgba(55, 84, 170, 0),
+    inset -7px -7px 20px rgba(255, 255, 255, 0),
+    0px 0px 4px rgba(255, 255, 255, 0);
+
+}
+
+
+.bg {
+  height: 100%;
+  background: url();
+  /* Center and scale the image nicely */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.fade-in-image {
+  animation: fadeIn 5s;
+}
+
+@keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@media screen and (min-width : 991px ){
+  .bg{
+    display: flex;
+    align-items: center;
+  }
+}