CORD GUI -- Dashboard and login pages have new look. WIP.
Change-Id: Ib38870c8acb5f443d2aedb6580180f5457f944df
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
index f6b511d..b8746d6 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
@@ -15,18 +15,17 @@
*/
div.foot {
- width: 960px;
+ width: 100%;
height: 30px;
- background-color: rgb(122, 188, 229);
+ background-color: white;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin-left: auto;
margin-right: auto;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
z-index: 100;
+ box-shadow: 0 10px 5px 10px gray;
}
.foot div {
@@ -35,7 +34,7 @@
transform: translate(0, -50%);
font-style: italic;
font-size: 12px;
- color: rgba(255, 255, 255, 0.7);
+ color: #3C3C3C;
}
.foot div.left {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
index c1a6ec3..a2c3b00 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
@@ -16,9 +16,11 @@
div.mast {
width: 100%;
- height: 50px;
- background-color: rgb(122, 188, 229);
+ height: 85px;
+ background-color: white;
position: relative;
+ box-shadow: 0 10px 5px -7px gray;
+ z-index: 100;
}
.mast div {
@@ -32,15 +34,14 @@
}
.mast div.right {
- right: 25px;
+ right: 7%;
+ width: 30%;
}
-.mast a {
- text-decoration: none;
- color: white;
-}
+.mast a,
.mast a:visited {
- color: white;
+ text-decoration: none;
+ color: #3C3C3C;
}
.mast svg {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html
index b89520d..cd73f6c 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.html
@@ -1,19 +1,3 @@
-<!--
- ~ Copyright 2015 Open Networking Laboratory
- ~
- ~ 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.
- -->
-
<!--Mast HTML-->
<div class="mast">
@@ -23,6 +7,6 @@
</div>
<div class="right">
-
+ <nav ng-show="page.curr !== 'login'"></nav>
</div>
</div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
index 361f0d8..91044d0 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
@@ -19,31 +19,27 @@
table-layout: fixed;
list-style-type: none;
width: 100%;
- margin-bottom: 2%;
}
.nav li {
- background-color: lightgray;
padding: 2.5% 0;
- transition: background-color 0.4s;
+ color: #3C3C3C;
}
.nav li:hover {
- background-color: #BD5643;
-
+ border-bottom: 2px solid #CE5650;
+ color: black;
}
.nav li.selected {
- font-weight: bold;
- color: white;
- background: linear-gradient(#A56151, #BD5643);
+ font-weight: bolder;
+ color: #3C3C3C;
letter-spacing: 0.03em;
+ border-bottom: 2px solid #CE5650;
}
-.nav a {
+.nav a,
+.nav a:visited {
display: table-cell;
text-align: center;
text-decoration: none;
color: black;
}
-.nav a:visited {
- color: black;
-}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html
index 56e62c4..4fdbad1 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html
@@ -1,32 +1,17 @@
-<!--
- ~ Copyright 2015 Open Networking Laboratory
- ~
- ~ 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.
- -->
-
+<!--Nav HTML-->
<div class="nav">
<ul>
<a href="#/home">
- <li ng-class="{selected: page === 'dashboard'}"
+ <li ng-class="{selected: page.curr === 'dashboard'}"
ng-click="$route.reload()">Dashboard</li>
</a>
- <a href="#/user">
- <li ng-class="{selected: page === 'user'}"
- ng-click="$route.reload()">Users</li>
- </a>
<a href="#/bundle">
- <li ng-class="{selected: page === 'bundle'}"
+ <li ng-class="{selected: page.curr === 'bundle'}"
ng-click="$route.reload()">Bundles</li>
</a>
+ <a href="#/user">
+ <li ng-class="{selected: page.curr === 'user'}"
+ ng-click="$route.reload()">Users</li>
+ </a>
</ul>
</div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
index 055860a..1fafa79 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
@@ -1,6 +1,5 @@
<!-- Bundle page partial html -->
<div id="bundle" class="container">
- <nav></nav>
<div class="main-left">
<h4>You are subscribed to the</h4>
<h3>{{name}}</h3>
@@ -16,6 +15,5 @@
<div class="main-right">
<h2>Available Bundles</h2>
<div bundle-available></div>
- <!--Can use ng-repeat on the above div for how many bundles are available-->
</div>
</div>
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
index c383b36..c7281f9 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
@@ -27,7 +27,7 @@
function ($log, $scope, $resource) {
var BundleData, resource,
getData;
- $scope.page = 'bundle';
+ $scope.page.curr = 'bundle';
getData = function (id) {
if (!id) { id = ''; }
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
index b95f5b3..20d1bf81 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
@@ -26,11 +26,12 @@
h1, h2, h3, h4, h5, h6,
p, a, li, th, td,
select, input, option, label {
- font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
+ font-family: sans-serif, "Droid Sans", "Lucida Grande", Arial, Helvetica;
}
body {
- background-color: #efefef;
+ background-color: white;
+ overflow: hidden;
}
table {
border-spacing: 0;
@@ -40,10 +41,15 @@
color: rgba(0, 0, 0, 0.8);
}
h3 {
- font-weight: normal;
margin-bottom: 4%;
+ font-size: xx-large;
+ font-weight: lighter;
}
h4 {
+ font-size: large;
+ font-weight: lighter;
+}
+h5 {
color: rgb(107, 107, 107);
font-style: italic;
font-weight: normal;
@@ -86,7 +92,7 @@
}
div.container {
- width: 75%;
+ width: 85%;
margin: 0 auto;
}
div.main-left, div.main-right {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css
index fd873a1..1f44657 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.css
@@ -14,36 +14,73 @@
* limitations under the License.
*/
+#home div.main-left {
+ width: 55%;
+ padding: 0;
+}
+#home div.main-right {
+ padding: 1% 0 0 3%;
+ width: 42%;
+}
+#home div.move-down {
+ margin-top: 19%;
+}
+
+#home div.image-holder {
+ width: 100%;
+ position: relative;
+}
+
+#home div.main-left img {
+ width: 100%;
+ opacity: 0.8;
+ box-shadow: 10px 0 12px 1px rgba(54, 136, 210, 0.25);
+}
+
+#home div.main-right div.bundle-title {
+ padding: 2% 0;
+}
+
+#home h4 {
+ padding-bottom: 2%;
+}
+
+#home p {
+ margin-bottom: 3%;
+}
+
#home table {
width: 94%;
table-layout: fixed;
margin-left: 6%;
-}
-#home table.title {
- background: linear-gradient(lightgray, darkgray);
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
-}
-#home table.title th {
- text-align: center;
+ border-left: 1px solid #CE5650;
}
-#home table.content th,
-#home table.content td {
+#home table.users th,
+#home table.users td {
font-size: 90%;
}
-#home table.content th {
- background-color: rgba(173, 216, 230, 0.75);
-}
-
-#home table.content tbody tr:nth-of-type(even) {
- background-color: rgba(173, 216, 230, 0.25);
-}
-#home table.content tbody tr:nth-of-type(odd) {
- background-color: rgba(173, 216, 230, 0.5);
+#home table.users th {
+ background-color: #7AB6EA;
+ color: white;
+ letter-spacing: 0.05em;
+ font-weight: lighter;
}
#home td, #home th {
text-align: left;
padding: 2%;
}
+
+#home table.users th.user-pic {
+ background-color: white;
+}
+#home table.users th.user-pic,
+#home table.users td.user-pic {
+ width: 30px;
+ padding-left: 4%;
+}
+#home table.users td.user-pic img {
+ width: 25px;
+ opacity: 0.5;
+}
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
index 857d694..2c634ee 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.html
@@ -1,38 +1,46 @@
<!-- Home page partial html -->
<div id="home" class="container">
- <nav></nav>
<div class="main-left">
- <h4>You are subscribed to the</h4>
- <h3>{{bundle}}</h3>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit
- amet ultricies metus. Praesent pretium diam et nibh lacinia
- faucibus. Donec commodo efficitur ex quis faucibus.
- Pellentesque nec commodo metus. Nulla ultrices odio vitae tellus
- tempor, quis fringilla arcu pellentesque. Duis efficitur massa
- libero, et molestie diam vulputate nec. Nulla vitae lacinia odio.
- </p>
+ <img src="/imgs/bin_ball.jpg">
</div>
<div class="main-right">
- <table class="title">
- <tr>
- <th>Users</th>
- </tr>
- </table>
- <table class="content">
- <thead>
- <tr>
- <th>Name</th>
- <th>MAC Address</th>
- </tr>
- </thead>
- <tbody>
+ <div class="move-down">
+ <div class="bundle-title">
+ <h5>You are subscribed to the</h5>
+ <h3>{{bundle}}</h3>
+ </div>
+
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit
+ amet ultricies metus. Praesent pretium diam et nibh lacinia
+ faucibus. Donec commodo efficitur ex quis faucibus.
+ Pellentesque nec commodo metus. Nulla ultrices odio vitae tellus
+ tempor, quis fringilla arcu pellentesque. Duis efficitur massa
+ libero, et molestie diam vulputate nec. Nulla vitae lacinia odio.
+ </p>
+
+
+ <h4>Users</h4>
+ <table class="users">
+ <thead>
+ <tr>
+ <th class="user-pic"></th>
+ <th>Name</th>
+ <th>Last Login</th>
+ </tr>
+ </thead>
+ <tbody>
+
<tr ng-repeat="user in users" class="fadein">
- <td>{{user.name}}</td>
- <td>{{user.mac}}</td>
- </tr>
- </tbody>
- </table>
+ <td class="user-pic">
+ <img ng-src="{{'/imgs/' + user.icon_id + '.png'}}">
+ </td>
+ <td>{{user.name}}</td>
+ <td>Session Activity</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
index c28cb81..4460f14 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/home/home.js
@@ -23,7 +23,7 @@
.controller('CordHomeCtrl', ['$log', '$scope', '$resource',
function ($log, $scope, $resource) {
var DashboardData, resource;
- $scope.page = 'dashboard';
+ $scope.page.curr = 'dashboard';
DashboardData = $resource($scope.shared.url + urlSuffix);
resource = DashboardData.get({},
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.css b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.css
index e35062b..3fde6f8 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.css
@@ -21,15 +21,15 @@
#login h2 {
margin: 1%;
color: rgb(115, 115, 115);
- font-size: 100%;
- font-style: italic;
+ font-size: xx-large;
+ font-weight: lighter;
text-align: left;
position: absolute;
top: -140px;
}
div#login-logo {
- margin-top: 7%;
+ margin-top: 13%;
width: 217px;
}
div#login-logo, div#login-form {
@@ -37,16 +37,26 @@
}
#login-logo use.glyph.bird {
- fill: #800;
+ fill: #CE5650;
}
#login-logo circle {
fill: none;
}
+#login div.outline {
+ position: absolute;
+ border: 1px solid rgba(115, 115, 115, 0.7);
+ top: -160px;
+ left: -25px;
+ width: 300px;
+ height: 245px;
+ border-radius: 1px;
+}
+
div#login-form {
margin-left: 2.5%;
position: relative;
- width: 240px;
+ width: 255px;
}
#login-form form {
@@ -60,20 +70,19 @@
font-size: 19px;
padding: 0 5px;
margin-bottom: 3.5%;
- border-radius: 3px;
+ border-radius: 1px;
position: absolute;
}
#login-form input[type="text"] {
- top: -110px;
+ top: -90px;
}
#login-form input[type="password"] {
- top: -60px;
+ top: -35px;
}
#login-form input[type="text"],
#login-form input[type="password"] {
- box-shadow: none;
- border: none;
+ border: 2px solid rgba(115, 115, 115, 0.7);
transition: border 0.1s;
}
#login-form input[type="text"]:focus,
@@ -88,15 +97,13 @@
}
#login-form input[type="button"] {
- top: -5px;
- width: 240px;
+ top: 25px;
+ width: 245px;
height: 30px;
- box-shadow: none;
- border: none;
- outline: none;
cursor: pointer;
letter-spacing: 0.02em;
- font-size: 14px;
+ font-size: 100%;
+ color: #3C3C3C;
background-color: lightgray;
transition: background-color 0.4s;
}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
index 9835fd4..0ce4112 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
@@ -6,12 +6,13 @@
</div>
<div id="login-form">
- <h2>Subscriber Portal</h2>
- <form>
- <input type="text" placeholder="email">
- <input type="password" placeholder="password">
- <a href="#/home"><input type="button" value="Log In"></a>
- </form>
+ <div class="outline"></div>
+ <h2>Subscriber Portal</h2>
+ <form>
+ <input type="text" placeholder="email">
+ <input type="password" placeholder="password">
+ <a href="#/home"><input type="button" value="Log In"></a>
+ </form>
</div>
</div>
</div>
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.js b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.js
index b26355b..e13a0ef 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.js
@@ -18,7 +18,9 @@
'use strict';
angular.module('cordLogin', [])
- .controller('CordLoginCtrl', ['$log', function ($log) {
+ .controller('CordLoginCtrl', ['$log', '$scope',
+ function ($log, $scope) {
+ $scope.page.curr = 'login';
$log.debug('Cord Login Ctrl has been created.');
}]);
}());
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
index 6dcb40d..6a8f4b3 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.css
@@ -112,6 +112,9 @@
width: 30%;
}
+#user td.buttons div {
+ display: inline;
+}
#user td.buttons svg {
vertical-align: middle;
}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
index adc672f..38aae59 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.html
@@ -1,6 +1,5 @@
<!-- Users page partial html -->
<div class="container">
- <nav></nav>
<div id="user">
<div class="main-left" ng-class="{family: isFamily}">
<table class="user-info">
@@ -32,8 +31,9 @@
</tr>
<tr>
<td class="buttons">
- <icon size="20px" id="checkMark"
- ng-show="showCheck"></icon>
+ <div ng-show="showCheck">
+ <icon size="20px" id="checkMark"></icon>
+ </div>
<input type="reset" value="Cancel"
ng-click="cancelChanges(changeLevels)"
ng-disabled="changeLevels.$pristine">
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
index 032abea..76bf16a 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/user/user.js
@@ -26,7 +26,7 @@
.controller('CordUserCtrl', ['$log', '$scope', '$resource', '$timeout',
function ($log, $scope, $resource, $timeout) {
var BundleData, bundleResource;
- $scope.page = 'user';
+ $scope.page.curr = 'user';
$scope.isFamily = false;
$scope.newLevels = {};
$scope.showCheck = false;
diff --git a/apps/demo/cord-gui/src/main/webapp/cord.js b/apps/demo/cord-gui/src/main/webapp/cord.js
index 2d012ae..be81978 100644
--- a/apps/demo/cord-gui/src/main/webapp/cord.js
+++ b/apps/demo/cord-gui/src/main/webapp/cord.js
@@ -73,8 +73,9 @@
}])
.controller('CordCtrl', ['$scope', '$location',
function ($scope, $location) {
- $scope.shared = {
- url: 'http://' + $location.host() + ':' + $location.port()
- };
- }]);
+ $scope.shared = {
+ url: 'http://' + $location.host() + ':' + $location.port()
+ };
+ $scope.page = {};
+ }]);
}());
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/bin_ball.jpg b/apps/demo/cord-gui/src/main/webapp/imgs/bin_ball.jpg
new file mode 100644
index 0000000..b7b8136
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/bin_ball.jpg
Binary files differ
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/binary.jpg b/apps/demo/cord-gui/src/main/webapp/imgs/binary.jpg
new file mode 100644
index 0000000..3c67124
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/binary.jpg
Binary files differ
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/boy1.png b/apps/demo/cord-gui/src/main/webapp/imgs/boy1.png
new file mode 100644
index 0000000..2bd6e1e
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/boy1.png
Binary files differ
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/boy2.png b/apps/demo/cord-gui/src/main/webapp/imgs/boy2.png
new file mode 100644
index 0000000..954c8f9
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/boy2.png
Binary files differ
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/dad.png b/apps/demo/cord-gui/src/main/webapp/imgs/dad.png
new file mode 100644
index 0000000..b5dde7e
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/dad.png
Binary files differ
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/girl1.png b/apps/demo/cord-gui/src/main/webapp/imgs/girl1.png
new file mode 100644
index 0000000..8cd443e
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/girl1.png
Binary files differ
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/girl2.png b/apps/demo/cord-gui/src/main/webapp/imgs/girl2.png
new file mode 100644
index 0000000..14c2575
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/girl2.png
Binary files differ
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/gma.png b/apps/demo/cord-gui/src/main/webapp/imgs/gma.png
new file mode 100644
index 0000000..fdb6ee5
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/gma.png
Binary files differ
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/gpa.png b/apps/demo/cord-gui/src/main/webapp/imgs/gpa.png
new file mode 100644
index 0000000..70bdb18
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/gpa.png
Binary files differ
diff --git a/apps/demo/cord-gui/src/main/webapp/imgs/mom.png b/apps/demo/cord-gui/src/main/webapp/imgs/mom.png
new file mode 100644
index 0000000..417bc6a
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/imgs/mom.png
Binary files differ
