landpage card (#202)

* landpage card ui enhancement

Author: antoniasymeonidou

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;
+}
+}

ui/pi-web-agent-app/src/app/main-view/main-view.component.scss

@@ -1,37 +1,36 @@
 .main-container {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-  
-  .main-is-mobile .main-toolbar {
-    position: fixed;
-    /* Make sure the toolbar will stay on top of the content as it scrolls past. */
-    z-index: 2;
-  }
-  
-  .example-spacer {
-    flex: 1 1 auto;
-  }
-  
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
 
-  h1.main-app-name {
-    margin-left: 8px;
-  }
-  
-  .main-sidenav-container {
-    /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
-       causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
-    flex: 1;
-  }
-  
-  .main-is-mobile .main-sidenav-container {
-    /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
-       `<body>` to be our scrolling element for mobile layouts. */
-    flex: 1 0 auto;
-  }
-  
+.main-is-mobile .main-toolbar {
+  position: fixed;
+  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
+  z-index: 2;
+}
+
+.example-spacer {
+  flex: 1 1 auto;
+}
+
+
+h1.main-app-name {
+  margin-left: 8px;
+}
+
+.main-sidenav-container {
+  /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
+      causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
+  flex: 1;
+}
+
+.main-is-mobile .main-sidenav-container {
+  /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
+      `<body>` to be our scrolling element for mobile layouts. */
+  flex: 1 0 auto;
+}