X-Git-Url: https://gerrit.akraino.org/r/gitweb?a=blobdiff_plain;f=blueprints%2Fcommon%2Feliot-ui%2Ffrontend-src%2Fsrc%2Fapp%2Fhome%2Fhome.component.html;h=85e799241b43a37cfdd2d804a52d7c9d8014a486;hb=5c2048d4d3e672783eea4f306aa9a03f33a1a9f2;hp=f3f4d6204c5b29e08f4659dfa1109b3d8f65dd82;hpb=59f512662c02a16c1d5c45b090b185d2e773310f;p=eliot.git

diff --git a/blueprints/common/eliot-ui/frontend-src/src/app/home/home.component.html b/blueprints/common/eliot-ui/frontend-src/src/app/home/home.component.html
index f3f4d62..85e7992 100644
--- a/blueprints/common/eliot-ui/frontend-src/src/app/home/home.component.html
+++ b/blueprints/common/eliot-ui/frontend-src/src/app/home/home.component.html
@@ -1,7 +1,176 @@
-<!-- <div>
-    <button mat-button color="accent"> ELIOT UI </button>
+<div class="main" *ngIf="(toolbarService.visible|async)">
+  <div class="toolbar">
+    <app-toolbar></app-toolbar>
+  </div>
+  <div class="carousel">
+    <ngb-carousel *ngIf="images">
+      <ng-template ngbSlide>
+        <div class="picsum-img-wrapper">
+          <img [src]="images[0]" alt="Random first slide">
 
-</div> -->
+        </div>
+        <div class="carousel-caption">
+        </div>
+      </ng-template>
+      <ng-template ngbSlide>
+        <div class="picsum-img-wrapper">
+          <img [src]="images[1]" alt="Random second slide">
+        </div>
 
-<div class="background">
+        <div class="carousel-caption">
+        </div>
+
+      </ng-template>
+      <ng-template ngbSlide>
+
+        <div class="picsum-img-wrapper">
+          <img [src]="images[2]" alt="Random third slide">
+        </div>
+
+        <div class="carousel-caption">
+        </div>
+      </ng-template>
+    </ngb-carousel>
+  </div>
 </div>
+
+<section id="services" class="services section-bg">
+  <div class="container">
+
+    <div class="section-title text-center" data-aos="fade-up">
+      <h2>Features</h2>
+      <p>Features provided by the ELIOT includes Deploy the new Edge Application on ELIOT Cluster, Monitoring the
+        existing ELIOT Cluster tablewise data as well as graphical manner and providing some predefined app deployment
+        packages</p>
+    </div>
+    <div style="padding:30px;">
+    <div class="row mat-elevation-z8" style="padding:20px;">
+      <div class="col-lg-3 col-md-6">
+        <div class="icon-box">
+          <div class="icon"><i class="fas fa-cloud"></i></div>
+          <h4 class="title"><a href="" [routerLink]="'/nodes'">ELIOT Cluster-Nodes</a></h4>
+          <p class="description">Monitoring the existing ELIOT Cluster Nodes with tablewise data management</p>
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-6">
+        <div class="icon-box">
+          <div class="icon"><i class="fas fa-cloud"></i></div>
+          <h4 class="title"><a href="" [routerLink]="'/pods'">ELIOT Cluster-Pods</a></h4>
+          <p class="description">Detailed Information on ELIOT Cluster Pods with tablewise structured data</p>
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-6">
+        <div class="icon-box">
+          <div class="icon"><i class="material-icons">dashboard</i></div>
+          <h4 class="title"><a href="" [routerLink]="'/dashboard'">Cluster Monitoring</a></h4>
+          <p class="description">Monitoring the existing ELIOT Cluster with graphical data view
+          </p>
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-6">
+        <div class="icon-box">
+          <div class="icon"><i class="fas fa-cloud"></i></div>
+          <h4 class="title"><a href="" [routerLink]="'/services'">ELIOT Cluster-Services</a></h4>
+          <p class="description">Detailed Information on ELIOT Cluster Services with tablewise structured data</p>
+        </div>
+      </div>
+    </div>
+    </div>
+  
+    <!-- graphana App Managment, Deployment History & App solution -->
+  
+    <div style="padding:30px;">
+      <div class="row mat-elevation-z8" style="padding:20px;">
+        <div class="col-lg-3 col-md-6">
+          <div class="icon-box">
+            <div class="icon"><i class="material-icons">dashboard</i></div>
+            <h4 class="title"><a href="" [routerLink]="'/graphana'">Graphana</a></h4>
+            <p class="description">Monitoring the system availability and existing cluster and information about the
+              nodes,pods
+            </p>
+          </div>
+        </div>
+        <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
+          <div class="icon-box">
+            <div class="icon"><i class="material-icons">card_travel</i></div>
+            <h4 class="title"><a href="" [routerLink]="'/deployments'">Application Management</a></h4>
+            <p class="description">Deployment of custom app .csar package, uninstallation and Monitoring the app</p>
+          </div>
+        </div>
+        <div class="col-lg-3 col-md-6">
+          <div class="icon-box">
+            <div class="icon"><i class="material-icons">date_range</i></div>
+            <h4 class="title"><a href="" [routerLink]="'/history'">Deployment History</a></h4>
+            <p class="description">App csar package (Current as well as Past) history Deployment data can be viewed
+            </p>
+          </div>
+        </div>
+        <div class="col-lg-3 col-md-6">
+          <div class="icon-box">
+            <div class="icon"><i class="material-icons">offline_pin</i></div>
+            <h4 class="title"><a href="">App Solution</a></h4>
+            <p class="description">Provides predefined app solution for some of the applications through deploy ready csar
+              packages</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<section id="about" class="about section-bg">
+  <div class="container">
+
+    <div class="row">
+      <div class="col-xl-5 col-lg-6 video-box d-flex justify-content-center align-items-stretch">
+        <a href="https://www.youtube.com/watch?v=t2pRRwCRr_k" class="venobox play-btn mb-4" data-vbtype="video"
+          data-autoplay="true"></a>
+      </div>
+
+      <div
+        class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5 mat-elevation-z8">
+        <h4 data-aos="fade-up">About us</h4>
+        <h3 data-aos="fade-up">Edge Lightweight IOT</h3>
+        <p data-aos="fade-up">ELIOT is "Enterprise Edge Lightweight and IOT" project under Akraino approved blueprint
+          family
+          and part of Akraino Edge Stack, which intends to provide an platform for a fully integrated edge network
+          infrastructure and running edge computing applications, on lightweight Edge Nodes. ELIOT targets on making the
+          edge node a
+          lightweight software stack which can be deployed on edge nodes which have limited hardware capacity by
+          leveraging lightweight OS, a container running environment and container orchestration applications.</p>
+
+        <div class="icon-box" data-aos="fade-up">
+          <div class="icon"><i class="fas fa-cloud"></i></div>
+          <h4 class="title"><a href="" [routerLink]="'/describe'">ELIOT IOT Gateway</a></h4>
+          <p class="description">IoT Gateway Blueprint will provide an infrastructure platform for an edge node
+            to provide features of an IoT Gateway. This is achieved by leveraging the upstream opensource
+            application like Dockers, Kubernetes , Prometheus , cAdvisor, KubeEdge and EdgeX. Companies having
+            applications to be deployed on edge nodes related to IoT application , can use the IoT Gateway
+            platform to have a functional end to end to ecosystem of IoT.
+          </p>
+        </div>
+
+        <div class="icon-box" data-aos="fade-up" data-aos-delay="200">
+          <div class="icon"><i class="fas fa-cloud"></i></div>
+          <h4 class="title"><a href="" [routerLink]="'/describe'">ELIOT SD-WAN</a></h4>
+          <p class="description">Enterprise WAN edge use of SD-WAN solutions or universal CPE (uCPE)</p>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+</section><!-- End About Section -->
+
+<footer id="footer">
+
+  <div class="container d-lg-flex py-4">
+
+    <div class="mr-lg-auto text-center text-lg-left">
+      <div class="copyright">
+        &copy; Copyright <strong><span>ELIOT Akraino</span></strong>. All Rights Reserved
+      </div>
+    </div>
+  </div>
+</footer><!-- End Footer -->
\ No newline at end of file