X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=blobdiff_plain;f=webapp-frontend%2Fsrc%2Fapp%2Fapp.component.html;h=202afc526a31a8461692a406e698d0f55e8cf0ba;hb=ad70d4114bbfc5dbf20fd1a8151095d89610c759;hp=838606d45099c9a7ff55a30d023507b0a891de86;hpb=0ad7c39f68411d7cbd1f013d1d46c8d4b1849bca;p=portal%2Fnonrtric-controlpanel.git

diff --git a/webapp-frontend/src/app/app.component.html b/webapp-frontend/src/app/app.component.html
index 838606d..202afc5 100644
--- a/webapp-frontend/src/app/app.component.html
+++ b/webapp-frontend/src/app/app.component.html
@@ -1,8 +1,109 @@
-<div style="text-align:center">
-    <h1>
-      Welcome to {{title}}!
-    </h1>
-    <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
-  </div>
- 
-<router-outlet></router-outlet>
\ No newline at end of file
+<!--
+  ========================LICENSE_START=================================
+  O-RAN-SC
+  %%
+  Copyright (C) 2019 AT&T Intellectual Property
+  %%
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ========================LICENSE_END===================================
+  -->
+<!-- Slide Menu-->
+<mat-drawer-container autosize>
+  <mat-drawer #drawer mode="push" [ngClass]="{'side-menu__dark': darkMode}">
+    <section class="menu-header" [ngClass]="{'menu-header__dark': darkMode}">
+
+      <div class="left__section3Col" *ngIf="drawer.opened" [ngClass]="{'menumargin-top': drawer.opened}">
+        <svg (click)="drawer.toggle()" class="hamburger__icon" id="Menu_Burger_Icon" data-name="Menu Burger Icon"
+          viewBox="31.5 30 49.9 32">
+          <rect id="Rectangle_9" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkMode}"
+            class="hamburger__icon__fill" data-name="Rectangle 9" rx="2" transform="translate(31.5 58)" />
+          <rect id="Rectangle_10" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkMode}"
+            class="hamburger__icon__fill" data-name="Rectangle 10" rx="2" transform="translate(31.5 44)" />
+          <rect id="Rectangle_11" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkMode}"
+            class="hamburger__icon__fill" data-name="Rectangle 11" rx="2" transform="translate(31.5 30)" />
+        </svg>
+        <img src="assets/oran-logo.png" width="180%" height="100%" style="position: relative; z-index: 50" />
+        <svg class="logo__icon" viewBox="150.3 22.2 450 50">
+          <text [ngClass]="{'logo__text-dark': darkMode}" class="logo__text" fill="#432c85" font-size="30"
+            font-weight="600" letter-spacing=".1em" transform="translate(149 56)">
+            <tspan x="0" y="0">Non-RT RIC Control Panel</tspan>
+          </text>
+        </svg>
+
+      </div>
+    </section>
+    <section #sidenav class="menu-body">
+      <nrcp-sidenav-list (sidenavClose)="drawer.toggle()">></nrcp-sidenav-list>
+    </section>
+    <section class="menu-footer">
+
+    </section>
+  </mat-drawer>
+
+  <mat-drawer-content>
+    <div class="root__container">
+
+      <header [ngClass]="{'main__header-dark': darkMode}" class="main__header">
+
+        <div class="left__section3Col" *ngIf="!drawer.opened">
+          <svg (click)="drawer.toggle()" class="hamburger__icon" id="Menu_Burger_Icon" data-name="Menu Burger Icon"
+            viewBox="31.5 30 49.9 32">
+            <rect id="Rectangle_9" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkMode}"
+              class="hamburger__icon__fill" data-name="Rectangle 9" rx="2" transform="translate(31.5 58)" />
+            <rect id="Rectangle_10" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkMode}"
+              class="hamburger__icon__fill" data-name="Rectangle 10" rx="2" transform="translate(31.5 44)" />
+            <rect id="Rectangle_11" width="49.9" height="4" [ngClass]="{'hamburger__icon__fill-dark': darkMode}"
+              class="hamburger__icon__fill" data-name="Rectangle 11" rx="2" transform="translate(31.5 30)" />
+          </svg>
+          <img src="assets/oran-logo.png" width="180%" height="100%" style="position: relative; z-index: 50" />
+          <svg class="logo__icon" viewBox="150.3 22.2 450 50">
+            <text [ngClass]="{'logo__text-dark': darkMode}" class="logo__text" fill="#432c85" font-size="30"
+              font-weight="600" letter-spacing=".1em" transform="translate(149 56)">
+              <tspan x="0" y="0">Non-RT RIC Control Panel</tspan>
+            </text>
+          </svg>
+
+        </div>
+
+        <h3 class="date__text"></h3>
+
+        <div class="mode-toggle__container">
+          <span class="mode-toggle__text">Light</span>
+          <label class="toggle-button__container">
+            <input id="darkModeSwitch" (click)="modeToggleSwitch()" type="checkbox" class="mode-toggle__input" />
+            <span [ngClass]="{'mode-toggle__bg-checked': darkMode}" class="mode-toggle__bg"></span>
+            <span [ngClass]="{'mode-toggle__circle-checked': darkMode}" class="mode-toggle__circle"></span>
+          </label>
+          <span class="mode-toggle__text">Dark</span>
+        </div>
+
+      </header>
+
+      <!-- Main Content -->
+      <main class="main__container" [ngClass]="{'main-container__bg-dark': darkMode}">
+        <div class=main__container__body [ngClass]="{'dark-theme': darkMode}">
+          <div class="main-container__bg"></div>
+          <router-outlet></router-outlet>
+        </div>
+      </main>
+
+      <!-- Footer -->
+      <footer class="main__footer" [ngClass]="{'main-footer__bg-dark': darkMode}">
+        <div class="main-footer__bg">
+          <nrcp-footer></nrcp-footer>
+        </div>
+      </footer>
+
+    </div>
+  </mat-drawer-content>
+</mat-drawer-container>
\ No newline at end of file