diff options
Diffstat (limited to 'ui/client')
-rw-r--r-- | ui/client/accounts-config.js | 11 | ||||
-rw-r--r-- | ui/client/css/accordionNavMenu.styl | 259 | ||||
-rw-r--r-- | ui/client/css/components.styl | 187 | ||||
-rw-r--r-- | ui/client/css/d3graph.styl | 47 | ||||
-rw-r--r-- | ui/client/css/flex.styl | 23 | ||||
-rw-r--r-- | ui/client/css/header.styl | 118 | ||||
-rw-r--r-- | ui/client/css/landing.css | 122 | ||||
-rw-r--r-- | ui/client/css/loading.styl | 19 | ||||
-rw-r--r-- | ui/client/css/modals.styl | 10 | ||||
-rw-r--r-- | ui/client/css/plugins.styl | 4 | ||||
-rw-r--r-- | ui/client/css/wizard.css | 28 | ||||
-rw-r--r-- | ui/client/main.html | 18 | ||||
-rw-r--r-- | ui/client/main.js | 10 | ||||
-rw-r--r-- | ui/client/main.styl | 85 | ||||
-rw-r--r-- | ui/client/style/d3plusgraph.css | 14 | ||||
-rw-r--r-- | ui/client/style/landingpage.css | 138 | ||||
-rw-r--r-- | ui/client/style/multilevelorig.css | 43 | ||||
-rw-r--r-- | ui/client/style/threeTest.css | 65 | ||||
-rw-r--r-- | ui/client/style/threeTest2.css | 41 | ||||
-rw-r--r-- | ui/client/templates/envdialog.html | 131 | ||||
-rw-r--r-- | ui/client/templates/header.html | 13 | ||||
-rw-r--r-- | ui/client/templates/mainPage.html | 207 |
22 files changed, 0 insertions, 1593 deletions
diff --git a/ui/client/accounts-config.js b/ui/client/accounts-config.js deleted file mode 100644 index 68901ea..0000000 --- a/ui/client/accounts-config.js +++ /dev/null @@ -1,11 +0,0 @@ -///////////////////////////////////////////////////////////////////////////////////////// -// Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others / -// / -// All rights reserved. This program and the accompanying materials / -// are made available under the terms of the Apache License, Version 2.0 / -// which accompanies this distribution, and is available at / -// http://www.apache.org/licenses/LICENSE-2.0 / -///////////////////////////////////////////////////////////////////////////////////////// -Accounts.ui.config({ - passwordSignupFields: 'USERNAME_ONLY', -});
\ No newline at end of file diff --git a/ui/client/css/accordionNavMenu.styl b/ui/client/css/accordionNavMenu.styl deleted file mode 100644 index b5ba1d5..0000000 --- a/ui/client/css/accordionNavMenu.styl +++ /dev/null @@ -1,259 +0,0 @@ -// for WIKI - -.os-accordion-nav-menu - .sm-menu-items-list - >.os-accordion-tree-node - >a - display none - -.left-nav-content-wiki { - width: 300px; - height: 100vh - background brand-blue - top 90px - position fixed -} - - -.left-nav-menu - float: left; - min-width: 100px; - outline: 0; - position: relative; - //margin-top -40px - shadow-level(1) - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - outline: 0; - .menu-footer, .menu-header - background: brand-blue; - color: #f0f0f0; - float: left; - font-weight: normal; - line-height: 50px; - font-size: 0.8em; - width: 100%; - border-bottom 1px solid black - .menu-footer - text-align: center; - .menu-header - height: 39px; - p - font-size 1.7em - padding 6px - margin 0px - - - i - cursor pointer - position absolute - top -5px - right 0 - display block - color white - padding-right 5px - trans() - &:hover - color spark-blue - opacity 0.8 - - ul - list-style: none; - margin: 0; - padding: 0; - li - display: block; - float: left; - position: relative; - width: 100%; - .menu-label - background: #f0f0f0; - border-radius: 100%; - color: #555555; - font-size: 11px; - font-weight: 800; - line-height: 18px; - min-width: 20px; - padding: 1px 2px 1px 1px; - position: absolute; - right: 18px; - text-align: center; - top: 14px; - a - background: brand-blue; - color: #f0f0f0; - float: left; - font-size: 13px; - overflow: hidden; - padding: 14px 22px; - position: relative; - text-decoration: none; - white-space: nowrap; - width: 100%; - trans() - &:hover - background: @background - 20%; - i - float: left; - font-size: 16px; - line-height: 18px; - text-align: left; - width: 34px; - -.left-nav-menu ul li .menu-label { - background: #f0f0f0; - border-radius: 100%; - color: #555555; - font-size: 11px; - font-weight: 800; - line-height: 18px; - min-width: 20px; - padding: 1px 2px 1px 1px; - position: absolute; - right: 18px; - text-align: center; - top: 14px; -} - -.left-nav-menu - ul - .submenu - display: none; - position: static; - width: 100%; - .submenu-indicator - line-height: 16px - li - clear: both; - width: 100%; - ul.submenu - display: none; - position: static; - width: 100%; - overflow: hidden; - a - background: brand-blue - 10% - border-left: solid 6px transparent; - border-top: none; - float: left; - font-size: 11px; - position: relative; - width: 100%; - &:hover - background @background - 20% - - -.left-nav-menu ul .submenu li .menu-label { - background: #f0f0f0; - border-radius: 100%; - color: #555555; - font-size: 11px; - font-weight: 800; - line-height: 18px; - min-width: 20px; - padding: 1px 2px 1px 1px; - position: absolute; - right: 18px; - text-align: center; - top: 12px; - top: 14px; -} - -.left-nav-menu ul .submenu li a - padding-left 40px - background brand-blue - 20% - -.left-nav-menu ul .submenu > li > ul.submenu > li > a - padding-left: 40px - background brand-blue - 30% - -.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > a - padding-left: 40px; - background brand-blue - 40% -.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > a - padding-left: 50px; - background brand-blue - 50% -.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > a - padding-left: 60px; - background brand-blue - 60% -.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > a - padding-left: 70px; - background brand-blue - 70% -.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > a - padding-left: 80px; - background brand-blue - 80% - -.left-nav-menu .sm-open-close-indicator - float: right; - - i.fa - font-size: 10px; - width: 10px; - -.left-nav-menu .submenu-indicator { - -moz-transition: "transform .3s linear"; - -o-transition: "transform .3s linear"; - -webkit-transition: "transform .3s linear"; - transition: "transform .3s linear"; - float: right; - font-size: 20px; - line-height: 19px; - position: absolute; - right: 22px; -} - -.left-nav-menu .submenu-indicator-minus > .submenu-indicator { - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -.left-nav-menu > ul > li.active > a { - background: #3b424d; - color: #ffffff; -} - - -.left-nav-menu > ul > li > a { border-bottom: solid 1px #3b424d; } - -.ink { - -moz-transform: scale(0); - -ms-transform: scale(0); - -o-transform: scale(0); - -webkit-transform: scale(0); - background: rgba(255, 255, 255, 0.3); - border-radius: 100%; - display: block; - position: absolute; - transform: scale(0); -} - -.animate-ink { - -moz-animation: ripple .3s linear; - -ms-animation: ripple .3s linear; - -o-animation: ripple .3s linear; - -webkit-animation: ripple .3s linear; - animation: ripple .3s linear; -} - -// @-moz-keyframes 'ripple' { -// 100% { -// opacity: 0; -// transform: scale(2.5); -// } -// } -// @-webkit-keyframes 'ripple' { -// 100% { -// opacity: 0; -// transform: scale(2.5); -// } -// } -// @keyframes 'ripple' { -// 100% { -// opacity: 0; -// transform: scale(2.5); -// } -// } diff --git a/ui/client/css/components.styl b/ui/client/css/components.styl deleted file mode 100644 index a4b2f04..0000000 --- a/ui/client/css/components.styl +++ /dev/null @@ -1,187 +0,0 @@ -.main-layout - margin 30px 30px 30px 330px - -.main-layout-no-nav - margin 0px - -.site-sidenav - width: 300px; - min-width: 300px; - max-width: 300px; - //height: 100vh - height: initial; - align-self: stretch; - min-height: 95vh; - background brand-blue - trans() - -.site-sidenav-collapse - width: 30px - min-width: 30px - max-width: 30px - min-height 100vh - background brand-blue - color white - margin-top -40px - trans() - -.cards - color #FFF - padding 20px - margin-bottom 30px - .material-icons - padding-top 20px - shadow-level(1) - trans() - &:hover - shadow-level(2) - &.not-active - shadow-level (0) - &.blue - background-color spark-blue - &.green - background-color status-green - &.grey - background-color dk-gray1 - &.light-grey - background-color light-grey - &.dk-blue - background-color dk-blue - &.orange - background-color status-orange - &.red - background-color status-red - &.white - background #FFF - color #000 - &.blue-text - color spark-blue - &.green-text - .fa, .material-icons - color status-green - h5 - border-bottom 3px solid status-green - p.active - padding-top 3px - font-size 1.2em - color status-green - &.orange-text - .fa, .material-icons - color status-orange - h5 - border-bottom 3px solid status-orange - p.active - padding-top 3px - font-size 1.2em - color status-orange - &.red-text - .fa, .material-icons - color status-red - h5 - border-bottom 3px solid status-red - p.active - padding-top 3px - font-size 1.2em - color status-red - h3 - color spark-blue - font-size 2em - border-bottom 3px solid spark-blue - p.text - color #000 - .fa, .material-icons - font-size 4em - &.title - h4 - margin 0 - text-align center - color spark-blue - -.cards-w250 - @extend .cards - padding 20px 5px - max-height 100px - width: 250px - max-width: 250px - min-width: 250px - text-align center - .fa, .material-icons - font-size 3em - p - margin 0 - span - font-size 1.3em - font-weight bold - -.cards-w300 - @extend .cards - max-height 100px - width: 300px - max-width: 300px - min-width: 300px; - p - font-size 1.1em - span - font-size 1.3em - font-weight bold - -.cards-w300-h60 - @extend .cards-w300 - font-size 0.9em - height 60px - .fa, .material-icons - font-size 2em - &:hover - shadow-level(1) - -.cards-flex-col-h120 - @extend .cards - height: 120px - max-height 120px - min-height 120px - h5 - padding 0px - margin 0px - a - color spark-blue - p - font-size 1em - padding 0px - margin 0px - span - font-size 1.3em - font-weight bold - -.cards-450 - @extend .cards - width: 520px - max-width: 520px - min-width: 520px - p - font-size 1.1em - span - font-size 1.3em - font-weight bold - .material-icons - color spark-blue - font-size 5em - padding 40px 30px - -.cards-flex-col-h500 - @extend .cards - margin-right 30px - height 500px - max-height 500px - min-height 500px - p - font-size 1.1em - span - font-size 1.3em - font-weight bold - .material-icons - color spark-blue - font-size 8em - padding 40px - -.margin-top-40 - margin-top 40px diff --git a/ui/client/css/d3graph.styl b/ui/client/css/d3graph.styl deleted file mode 100644 index 6d53c45..0000000 --- a/ui/client/css/d3graph.styl +++ /dev/null @@ -1,47 +0,0 @@ - -.node circle { - fill: steelblue; -} -.node text { - font: bold 14px sans-serif; - fill: rgb(16, 15, 15); - text-shadow: 0 0px 0 #fff; - /*font-size: 0.8em;*/ -} -.link { - /* - fill: #1313AB; - stroke: #1313AB; - */ -} -.different-groups{ - stroke: #999; -} -.default { - stroke: #fbb; - stroke-width: 4px; -} -.outline { - stroke: #844; - stroke-width: 6px; -} - -div.tooltip { - position: absolute; - text-align: left; - opacity 1 - font: bold 18px sans-serif !important; - /* width: 60px; */ - /* height: 28px; */ - padding: 20px; - font: 16px sans-serif; - background: dk-gray1; - color white - border: 2px solid stark-blue - pointer-events: none; -} -.background { - stroke: white; - stroke-width: 1px; - fill: white; -} diff --git a/ui/client/css/flex.styl b/ui/client/css/flex.styl deleted file mode 100644 index e780d78..0000000 --- a/ui/client/css/flex.styl +++ /dev/null @@ -1,23 +0,0 @@ -// flex grid system -.flex-box - list-style none - display flex - flex-wrap wrap - // border 2px solid red - .flex-box-1 - flex 1 - // border 2px solid green - .flex-box-2 - flex 2 - .flex-box-3 - flex 3 - .flex-box-4 - flex 4 -.flex-col - flex-direction column -.justify-content-around - justify-content space-around -.justify-content-between - justify-content space-between -.justify-content-start - justify-content flex-start
\ No newline at end of file diff --git a/ui/client/css/header.styl b/ui/client/css/header.styl deleted file mode 100644 index ebc3ff6..0000000 --- a/ui/client/css/header.styl +++ /dev/null @@ -1,118 +0,0 @@ -.os-alarm-icons - display: flex; - flex-flow: row; - justify-content: flex-end; - - padding-top 50px - //background-color dk-gray1 - background-color: brand-blue - border-bottom: solid 1px black; - - .breadcrumb - background-color dk-gray1 - - .alarm-icons - padding-top 15px - padding-right 10px - color #FFF - //text-align right - - .material-icons:hover - cursor pointer - color spark-grey - trans() - - .dropdown - display inline - trans() - - .dropdown-menu-right - right 25px - - .dropdown-header - font-size 1.4em - color dk-gray1 - - >a - font-size: 20px; - color dk-gray1 - line-height: 1.42857143; - padding-left: 4px; - -img.navbar-brand.navbar-custom { - padding-left: 40px; -} - -p.navbar-brand.navbar-custom{ - margin: 0px; - padding-left: 95px; - color: #FFF; -} - -nav.navbar-inverse.navbar-custom - background-color: brand-blue - color: #FFF; - a - color: #FFF; - .login-close-text - color: #555; - #login-name-link:hover - color: rgb(63,81,181); - &:hover - color: rgb(63,81,181); - trans() - a.droplist - color: brand-blue - padding: 10px 0px 0px 10px - - .search - position: relative; - color: white - input - height: 30px; - background: brand-blue - // text-indent: 25px; - padding-left: 20px; - border 0px - border-bottom 2px solid spark-grey - width 175px - &:hover, &:active, &:focus - border-bottom 2px solid white - ::-webkit-input-placeholder - color: white - .fa-search - position: absolute; - top: 7px; - - .search-auto-complete - position: absolute; - right: 0; - top: 34px - z-index: 1000; - -.navbar-inverse .navbar-nav > .open > a, -.navbar-inverse .navbar-nav > .open > a:hover, -.navbar-inverse .navbar-nav > .open > a:focus { - color: brand-blue - background-color: #fff; -} - -/* Login form style */ -.sign-in #login-sign-in-link, #login-name-link, #login-name-link.login-link-text { - color: #FFF; - text-decoration: none; -} - -.login-button#login-buttons-open-change-password, -.login-button#login-buttons-password, -.login-button#login-buttons-logout { - background-color: brand-blue - border: brand-blue -} - -.login-button#login-buttons-open-change-password:hover, -.login-button#login-buttons-password:hover, -.login-button#login-buttons-logout:hover { - background-color: rgb(63,81,181); - border: rgb(63,81,181); -} diff --git a/ui/client/css/landing.css b/ui/client/css/landing.css deleted file mode 100644 index 59c0806..0000000 --- a/ui/client/css/landing.css +++ /dev/null @@ -1,122 +0,0 @@ -/****************************************************************************************/ -/* Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others */ -/* */ -/* All rights reserved. This program and the accompanying materials */ -/* are made available under the terms of the Apache License, Version 2.0 */ -/* which accompanies this distribution, and is available at */ -/* http://www.apache.org/licenses/LICENSE-2.0 */ -/****************************************************************************************/ -/* ======= landging page =======*/ - -a.mdl-button:hover{ - text-decoration: none; -} - -.mdl-button--raised.mdl-button--colored { - background-color: #2196F3; -} - -.mdl-button--accent.mdl-button--accent.mdl-button--raised:hover { - background-color: rgb(63,81,181); - -} - -section.section-margin-50 { - margin: 50px 0; -} - -.background-blue{ - background-color: #2196F3; - color: #f9f9f9; -} -.background-white { - border-color: #FFF; -} - -.background-grey { - background-color: #f9f9f9; -} - -.home-fullscreen { - /* padding: 25px; */ -} - -.mtop-50{ - margin-top: 100px; -} - -.font20{ - font-size: 20px; -} - -.title-border-bottom{ - border-bottom: 5px solid #2196F3; -} -.text-align-center{ - text-align: center; -} - -/* -.home_mockups { - position: relative; - margin-top: 4rem; - margin-bottom: -1rem; - z-index: 3; -} - -.home_mockups_1 { - position: relative; - animation-delay: 0.5s; -} - -.home_mockups_2 { - animation-delay: 1s; -} - -.home_mockups_2, .home_mockups_3 { - position: absolute; - margin: 0 auto; - top: 0; - right: 0; - left: 0; - bottom: 0; -} -*/ - -.box { - margin: 50px; -} - -.box-side{ - margin: 10px 50px; -} -/* ======= End of section =========*/ - -/*====== Main page =======*/ -.logo{ - padding: 10px; -} - -.view-100{ - height: 100vh; -} - -.user-bar{ - background: #42A5F5; - color: #fff; - padding-left: 15px; -} -/* ======= End of section =======*/ - -/*// Rules for sizing the icon.*/ -.material-icons.md-18 { font-size: 21px; } -.material-icons.md-24 { font-size: 24px; } -.material-icons.md-36 { font-size: 36px; } -.material-icons.md-48 { font-size: 48px; } -/*// Rules for using icons as black on a light background.*/ -.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } -.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } -/*// Rules for using icons as white on a dark background.*/ -.material-icons.md-light { color: rgba(255, 255, 255, 1); } -.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } -/* ======= End of section ===========*/ diff --git a/ui/client/css/loading.styl b/ui/client/css/loading.styl deleted file mode 100644 index 1545b58..0000000 --- a/ui/client/css/loading.styl +++ /dev/null @@ -1,19 +0,0 @@ - - -.loading-message { - color: white; - font-size: 2.5em; - font-weight: 300; - font-family: sans-serif; -} - -.sk-spinner-rotating-plane.sk-spinner { - background-color: white; -} - -.landing - .material-icons - font-size 64px - -.margin-50 - margin 80px 0px
\ No newline at end of file diff --git a/ui/client/css/modals.styl b/ui/client/css/modals.styl deleted file mode 100644 index f0d4741..0000000 --- a/ui/client/css/modals.styl +++ /dev/null @@ -1,10 +0,0 @@ -.modal-header - .material-icons - color spark-blue - -.modal-body - a - color spark-blue - h5 - color spark-blue - border-bottom 2px solid spark-blue diff --git a/ui/client/css/plugins.styl b/ui/client/css/plugins.styl deleted file mode 100644 index cd602ba..0000000 --- a/ui/client/css/plugins.styl +++ /dev/null @@ -1,4 +0,0 @@ -.graph - width: 100%; - height: 400px; - border: 3px solid spark-blue;
\ No newline at end of file diff --git a/ui/client/css/wizard.css b/ui/client/css/wizard.css deleted file mode 100644 index ebac04f..0000000 --- a/ui/client/css/wizard.css +++ /dev/null @@ -1,28 +0,0 @@ -/****************************************************************************************/ -/* Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others */ -/* */ -/* All rights reserved. This program and the accompanying materials */ -/* are made available under the terms of the Apache License, Version 2.0 */ -/* which accompanies this distribution, and is available at */ -/* http://www.apache.org/licenses/LICENSE-2.0 */ -/****************************************************************************************/ -.btn-mgt-5 { - margin-top: 5px; -} - -.nav > li > a { - color: #2196F3; -} - -.form-horizontal { - margin-top: 25px; -} - -.mdl-button { - color: #2196F3; -} - -.mdl-button:hover { - background-color: rgb(63,81,181); - color: #FFF; -} diff --git a/ui/client/main.html b/ui/client/main.html deleted file mode 100644 index 5aabed7..0000000 --- a/ui/client/main.html +++ /dev/null @@ -1,18 +0,0 @@ -<!-- -######################################################################################## -# Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others # -# # -# All rights reserved. This program and the accompanying materials # -# are made available under the terms of the Apache License, Version 2.0 # -# which accompanies this distribution, and is available at # -# http://www.apache.org/licenses/LICENSE-2.0 # -######################################################################################## - --> -<head> - <title>Cisco Calipso</title> - <link rel="shortcut icon" href="/cisco-favicon.ico"> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <!-- TODO: this was need because d3.event was null when included as a module. research other ways --> - <script src="https://d3js.org/d3.v4.js"></script> -</head> diff --git a/ui/client/main.js b/ui/client/main.js deleted file mode 100644 index 1502661..0000000 --- a/ui/client/main.js +++ /dev/null @@ -1,10 +0,0 @@ -///////////////////////////////////////////////////////////////////////////////////////// -// Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others / -// / -// All rights reserved. This program and the accompanying materials / -// are made available under the terms of the Apache License, Version 2.0 / -// which accompanies this distribution, and is available at / -// http://www.apache.org/licenses/LICENSE-2.0 / -///////////////////////////////////////////////////////////////////////////////////////// -import '/imports/startup/client'; -import '/imports/startup/both'; diff --git a/ui/client/main.styl b/ui/client/main.styl deleted file mode 100644 index e142eda..0000000 --- a/ui/client/main.styl +++ /dev/null @@ -1,85 +0,0 @@ -/* CSS declarations go here */ -normalize-css() - -// Colors -black = #222 -grey = #D8D8D8 -purp = #524763 -dark-purp = #373142 -red = #E54B4B -teal = #82D8D8 -dark-teal = #66A6A6 -green = #CBE56C -blue = #16528E -bright-blue = #0082C8 -maroon = #6A2140 -light-red = #CA5765 -pink = #CF256D -orange = #E8846B - -// cisco brand Colors -brand-blue = #2196F3 -spark-blue = #0A9AD7 -spark-green = #73BE46 -spark-grey = #D1D2D1 -dk-blue = #303f9f -light-grey = #efefef -dk-gray1 = #58585b -// cisco brand status Colors -status-blue = #64bbe3 -status-turq = #14a792 -status-green = #6cc04a -status-yellow = #ffcc00 -status-orange = #ff7300 -status-red = #cf2030 -// cisco accepteble colors - -// Material Shadows -shadow-level(l = 1) - if l == -1 - box-shadow: inset -2px 7px 9px -7px rgba(0,0,0,0.7); - if l == 0 - box-shadow: none; - if l == 1 - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); - if l == 2 - box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); - if l == 3 - box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); - if l == 4 - box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); - if l == 5 - box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); - -// Common Transition -trans($sec = 0.3s) - transition: all $sec ease - -// Grid -$xsmall = 340px -$small = 500px -$med = 700px -$large = 960px -$wide = 1200px - -z = { - neg: -7, - lowest: 1, - low: 4, - mid: 5, - video: 6, - header: 7, - nav: 8, - mini: 9, - modal: 10, - highest: 11 -} - -$side-nav = 100px -$side-nav-large = 200px - -body{ - background light-grey -} - -@import 'css/*' diff --git a/ui/client/style/d3plusgraph.css b/ui/client/style/d3plusgraph.css deleted file mode 100644 index f811c80..0000000 --- a/ui/client/style/d3plusgraph.css +++ /dev/null @@ -1,14 +0,0 @@ -/****************************************************************************************/ -/* Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others */ -/* */ -/* All rights reserved. This program and the accompanying materials */ -/* are made available under the terms of the Apache License, Version 2.0 */ -/* which accompanies this distribution, and is available at */ -/* http://www.apache.org/licenses/LICENSE-2.0 */ -/****************************************************************************************/ -#viz{ - /*margin: 166px 134px;*/ - color: white; - width: 90%; - height: 90%; -}
\ No newline at end of file diff --git a/ui/client/style/landingpage.css b/ui/client/style/landingpage.css deleted file mode 100644 index 1fd3035..0000000 --- a/ui/client/style/landingpage.css +++ /dev/null @@ -1,138 +0,0 @@ -/****************************************************************************************/ -/* Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others */ -/* */ -/* All rights reserved. This program and the accompanying materials */ -/* are made available under the terms of the Apache License, Version 2.0 */ -/* which accompanies this distribution, and is available at */ -/* http://www.apache.org/licenses/LICENSE-2.0 */ -/****************************************************************************************/ -/* wizard */ -.mdl-dialog { - width: 90vw !important; -} - -.mdl-tabs__panel{ - margin-top: 30px; -} - -.mdl-dialog__content { - border-left: 5px solid #2196F3; -} - - -/* ======= Home page =======*/ -.background-blue{ - background-color: #2196F3; - color: #f9f9f9; -} -.background-white { - border-color: #FFF; -} - -.background-grey { - background-color: #f9f9f9; -} - -.home-fullscreen { - /* padding: 25px; */ -} - -.mtop-50{ - margin-top: 100px; -} - -.font20{ - font-size: 20px; -} - -.title-border-bottom{ - border-bottom: 5px solid #2196F3; -} -.text-align-center{ - text-align: center; -} - -/* -.home_mockups { - position: relative; - margin-top: 4rem; - margin-bottom: -1rem; - z-index: 3; -} - -.home_mockups_1 { - position: relative; - animation-delay: 0.5s; -} - -.home_mockups_2 { - animation-delay: 1s; -} - -.home_mockups_2, .home_mockups_3 { - position: absolute; - margin: 0 auto; - top: 0; - right: 0; - left: 0; - bottom: 0; -} -*/ - -.box { - margin: 50px; -} - -.box-side{ - margin: 10px 50px; -} -/* ======= End of section =========*/ - - -/* ======= Login - Register pages ======= */ -.login-bg-primary { - width: 100%; - height: 30vh; - background-color: #2196F3; -} - -.login-bg-accent { - width: 100%; - height: 30vh; - background-color: #9C27B0; -} - -.login-card{ - margin-top: -70px; - padding: 10px; -} -/* ======= End of section =======*/ - -/*====== Main page =======*/ -.logo{ - padding: 10px; -} - -.view-100{ - height: 100vh; -} - -.user-bar{ - background: #42A5F5; - color: #fff; - padding-left: 15px; -} -/* ======= End of section =======*/ - -/*// Rules for sizing the icon.*/ -.material-icons.md-18 { font-size: 21px; } -.material-icons.md-24 { font-size: 24px; } -.material-icons.md-36 { font-size: 36px; } -.material-icons.md-48 { font-size: 48px; } -/*// Rules for using icons as black on a light background.*/ -.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } -.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } -/*// Rules for using icons as white on a dark background.*/ -.material-icons.md-light { color: rgba(255, 255, 255, 1); } -.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } -/* ======= End of section ===========*/ diff --git a/ui/client/style/multilevelorig.css b/ui/client/style/multilevelorig.css deleted file mode 100644 index c73c7e6..0000000 --- a/ui/client/style/multilevelorig.css +++ /dev/null @@ -1,43 +0,0 @@ -/****************************************************************************************/ -/* Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others */ -/* */ -/* All rights reserved. This program and the accompanying materials */ -/* are made available under the terms of the Apache License, Version 2.0 */ -/* which accompanies this distribution, and is available at */ -/* http://www.apache.org/licenses/LICENSE-2.0 */ -/****************************************************************************************/ -/* -body { - margin: 0; - padding: 0; - background: rgb(161, 183, 206); - overflow: hidden; -} -*/ -#menu{ - margin-top: -50px; -} -#pushobj { - position: absolute; - top: 92px; - left: 384px; - color: #fff; - background: rgb(161, 183, 206); - font-family: 'Open Sans Condensed', sans-serif; - font-size: 2em; - z-index: 1; - width: 100%; - height: 89%; -} -/* -.breadcrumb > li + li:before { - color: #CCCCCC; - content: "/ "; - padding: 0 5px; -} -.breadcrumb{ - margin-bottom: 0px; - padding: 14px 15px; - font-size: 0.6em; -} -*/ diff --git a/ui/client/style/threeTest.css b/ui/client/style/threeTest.css deleted file mode 100644 index 7a04d9c..0000000 --- a/ui/client/style/threeTest.css +++ /dev/null @@ -1,65 +0,0 @@ -/****************************************************************************************/ -/* Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others */ -/* */ -/* All rights reserved. This program and the accompanying materials */ -/* are made available under the terms of the Apache License, Version 2.0 */ -/* which accompanies this distribution, and is available at */ -/* http://www.apache.org/licenses/LICENSE-2.0 */ -/****************************************************************************************/ -/* -body, html { - width: 100%; - height: 100%; - padding: 0; - margin: 0; - position: relative; - overflow: hidden; - background: rgb(161, 183, 206); -} -*/ -/* -svg { - !*background-color: antiquewhite;*! - background-color: rgb(161, 183, 206); - padding-top: 100px; - -} - -.node circle { - fill: steelblue; -} -.node text { - font: bold 12px sans-serif; - fill: rgb(16, 15, 15); - text-shadow: 0 0px 0 #fff; - font-size: 0.6em; -} -.link { - fill: #1313AB; - stroke: #1313AB; -} -.default { - stroke: #fbb; - stroke-width: 4px; -} -.outline { - stroke: #844; - stroke-width: 6px; -} -.link-group text{ - font-size: 0.5em; - fill: rgba(8, 8, 8, 0.73); -} -div.tooltip { - position: absolute; - text-align: left; - font: bold 18px sans-serif !important; - !* width: 60px; *! - !* height: 28px; *! - padding: 2px; - font: 16px sans-serif; - background: #50DFE0; - border: 0px; - border-radius: 10px; - pointer-events: none; -}*/ diff --git a/ui/client/style/threeTest2.css b/ui/client/style/threeTest2.css deleted file mode 100644 index 83ec163..0000000 --- a/ui/client/style/threeTest2.css +++ /dev/null @@ -1,41 +0,0 @@ -/****************************************************************************************/ -/* Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others */ -/* */ -/* All rights reserved. This program and the accompanying materials */ -/* are made available under the terms of the Apache License, Version 2.0 */ -/* which accompanies this distribution, and is available at */ -/* http://www.apache.org/licenses/LICENSE-2.0 */ -/****************************************************************************************/ -#canvas { -} - -#canvas-force { - width: 100%; - height: 100%; - /*float: left;*/ -} - -/* -body { - margin: 0px; -} -*/ - -#tooltip-container { - position: absolute; - background-color: #404040; - color: #fff; - opacity: 0.9; - padding-left: 10px; - padding-right: 10px; - padding-top: 5px; - padding-bottom: 5px; - border: 1px solid; - display: none; - font-family: "Arial"; - font-size: 12px; -} - -.tooltip_key { - font-weight: bold; -}
\ No newline at end of file diff --git a/ui/client/templates/envdialog.html b/ui/client/templates/envdialog.html deleted file mode 100644 index 77d8375..0000000 --- a/ui/client/templates/envdialog.html +++ /dev/null @@ -1,131 +0,0 @@ -<!-- -######################################################################################## -# Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others # -# # -# All rights reserved. This program and the accompanying materials # -# are made available under the terms of the Apache License, Version 2.0 # -# which accompanies this distribution, and is available at # -# http://www.apache.org/licenses/LICENSE-2.0 # -######################################################################################## - --> -<template name="envdialog"> - <!-- <button id="show-dialog" type="button" class="mdl-button">Show Dialog</button> --> - <!-- Colored FAB button with ripple --> - <button id="show-dialog" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"> - <i class="material-icons">add</i> - </button> - <div class="mdl-tooltip" for="show-dialog"> - Add new environment - </div> - - <dialog class="mdl-dialog"> - <h5 class="mdl-dialog__title">Add new environment</h5> - - <div class="mdl-dialog__content"> - - <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"> - <div class="mdl-tabs__tab-bar"> - <a href="#main-info-panel" class="mdl-tabs__tab is-active">Main Info</a> - <a href="#endpoin-panel" class="mdl-tabs__tab">OS API endpoin</a> - <a href="#db-credentials-panel" class="mdl-tabs__tab">OpenStack DB Credentials</a> - <a href="#master-host-panel" class="mdl-tabs__tab">Master Host Credentials</a> - <a href="#nfv-panel" class="mdl-tabs__tab">NFV Credentials</a> - </div> - - <div class="mdl-tabs__panel is-active" id="main-info-panel"> - <!-- Textfield with Floating Label --> - <form action="#"> - <div class="mdl-grid"> - <div class="mdl-cell mdl-cell--4-col"> - <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> - <input class="mdl-textfield__input" type="text" id="ownerName" value="Koren Lev"> - <label class="mdl-textfield__label" for="ownerName">Owner</label> - </div> - </div> - <div class="mdl-cell mdl-cell--8-col"> - <h6>Admin name, owner of project</h6> - </div> - <div class="mdl-cell mdl-cell--4-col"> - <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> - <input class="mdl-textfield__input" type="text" id="initialEnvName"> - <label class="mdl-textfield__label" for="initialEnvName">Enviroment name</label> - </div> - </div> - <div class="mdl-cell mdl-cell--8-col"> - <h6>Enter name of your project</h6> - </div> - </div> - </form> - </div> - - <div class="mdl-tabs__panel" id="endpoin-panel"> - <form action="#"> - <div class="mdl-grid"> - <div class="mdl-cell mdl-cell--4-col"> - <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> - <input class="mdl-textfield__input" type="text" id="apiHost" pattern="-?[0-9]*(\.[0-9]+)?"> - <label class="mdl-textfield__label" for="apiHost">API host</label> - <span class="mdl-textfield__error">Input is not a number!</span> - </div> - </div> - <div class="mdl-cell mdl-cell--8-col"> - <h6>This is API bla bla...</h6> - </div> - <div class="mdl-cell mdl-cell--4-col"> - <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> - <input class="mdl-textfield__input" type="text" id="adminToken"> - <label class="mdl-textfield__label" for="adminToken">Admin token</label> - </div> - </div> - <div class="mdl-cell mdl-cell--8-col"> - <h6>You can find token ..</h6> - </div> - <div class="mdl-cell mdl-cell--4-col"> - <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> - <input class="mdl-textfield__input" type="text" id="apiUsername"> - <label class="mdl-textfield__label" for="apiUsername">Username</label> - </div> - </div> - <div class="mdl-cell mdl-cell--8-col"> - <h6>Some info about user name</h6> - </div> - <div class="mdl-cell mdl-cell--4-col"> - <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> - <input class="mdl-textfield__input" type="password" id="apiPassword"> - <label class="mdl-textfield__label" for="apiPassword">Password</label> - </div> - </div> - <div class="mdl-cell mdl-cell--8-col"> - <h6></h6> - </div> - </div> - </form> - </div> - - <div class="mdl-tabs__panel" id="db-credentials-panel"> - <ul> - <li>Viserys</li> - </ul> - </div> - - <div class="mdl-tabs__panel" id="master-host-panel"> - <ul> - <li>St</li> - </ul> - </div> - - <div class="mdl-tabs__panel" id="nfv-panel"> - <ul> - <li>Kor</li> - </ul> - <div class="mdl-dialog__actions"> - <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">Submit</button> - <button type="button" class="mdl-button close">Close</button> - </div> - </div> - </div> - </div> - - </dialog> - <script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.3/dialog-polyfill.min.js"></script> -</template> diff --git a/ui/client/templates/header.html b/ui/client/templates/header.html deleted file mode 100644 index 0bfda0b..0000000 --- a/ui/client/templates/header.html +++ /dev/null @@ -1,13 +0,0 @@ -<!-- -######################################################################################## -# Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others # -# # -# All rights reserved. This program and the accompanying materials # -# are made available under the terms of the Apache License, Version 2.0 # -# which accompanies this distribution, and is available at # -# http://www.apache.org/licenses/LICENSE-2.0 # -######################################################################################## - --> -<template name ="header"> - -</template>
\ No newline at end of file diff --git a/ui/client/templates/mainPage.html b/ui/client/templates/mainPage.html deleted file mode 100644 index 1b85c15..0000000 --- a/ui/client/templates/mainPage.html +++ /dev/null @@ -1,207 +0,0 @@ -<!-- -######################################################################################## -# Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others # -# # -# All rights reserved. This program and the accompanying materials # -# are made available under the terms of the Apache License, Version 2.0 # -# which accompanies this distribution, and is available at # -# http://www.apache.org/licenses/LICENSE-2.0 # -######################################################################################## - --> -<template name="mainPage"> - <header> - <div class="navbar" role="navigation"> - <div class="container"> - <div class="navbar-header"> - {{#if currentUser}} - <a class="navbar-brand" id="logo" href="{{pathFor route='home'}}">Calipso - Dashboard</a> - {{/if }} - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynav"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - </div> - <div class="collapse navbar-collapse" id="mynav"> - <ul class="nav navbar-nav navbar-right"> - <li><a href="#about">About</a></li> - <li><a href="#clients">Clients</a></li> - <li><a href="#process">Process</a></li> - <li><a href="#testimonials">Testimonials</a></li> - <li><a href="#blogs">Blogs</a></li> - <li><a href="{{pathFor route='landingpage'}}">LandingPage</a></li> - <li><a href="#">{{> loginButtons}}</a></li> - </ul> - </div> - </div> - </div> - <div class="banner"> - <h2>Calipso - OpenStack Network Discovery N Assurance</h2> - <div class="info"> - <a href="#process" title="">See our process</a> - <a href="#clients" title="">See our clients</a> - </div> - </div> - </header> - <section class="about" id="about"> - <div class="container"> - <div class="row"> - <div class="col-xs-12"> - <h2>About</h2> - </div> - </div> - <div class="row"> - <div class="col-xs-12 col-sm-4"> - <h4>Our history</h4> - <p class="visible-lg">We are going to enhance the way Cloud Network Administrators (CNA) and Tenant Network Administrators (TNA) Understands, Monitors and Troubleshoot highly distributed OpenStack Environments.</p> - </div> - <div class="col-xs-12 col-sm-4"> - <h4>Our vision & Strategy</h4> - <p>Vision: Substantially Simplifying OpenStack networking operations: maintenance, troubleshooting and monitoring, with added-value analytics.</p> - <p>Strategy: Drive the adoption of a commercial, cisco-supported neutron networking assurance application.Create Operations application that dynamically discovers, display, monitors and analyze virtual networks in any OpenStack distribution with any Neutron plugin and dynamically analyze the information for assurance reporting, potentially a commercial offering (with limited open sourced functionality), to be sold to any OpenStack customers, admins and operators.</p> - <p class="visible-lg">Focus on multiple distributions and multiple plugins per distribution at High performance and scale.</p> - </div> - <div class="col-xs-12 col-sm-4"> - <h4>Application Intent</h4> - <p>Provide CNA and TNA with support for: </p> - <p>1. Building virtual Network inventory and visualizing all low level details, inter-connections in real-time. </p> - <p>2. Monitor virtual network objects.</p> - <p class="visible-lg">3. Troubleshoot failures and analyzing the root cause of failures in virtual networks. </p> - <p class="visible-lg">4. Assess impact of failure in virtual networks.</p> - - </div> - </div> - </div> - </section> <!-- end of about section--> - <hr> - <section class="clients" id="clients"> - <div class="container"> - <div class="row"> - <div class="col-xs-12"> - <h2>Our Clients</h2> - </div> - </div> - <div class="row"> - <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> - <div class="clients-info"> - <h3>Client1</h3> - </div> - </div> - <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> - <div class="clients-info"> - <h3>Client2</h3> - </div> - </div> - <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> - <div class="clients-info"> - <h3>Client3</h3> - </div> - </div> - <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> - <div class="clients-info"> - <h3>Client4</h3> - </div> - </div> - </div> - </div> - </section> <!-- end of clients section--> - <hr> - <section class="process" id="process"> - <div class="container"> - <div class="row"> - <div class="col-xs-12"> - <h2>Our Process</h2> - </div> - </div> - <div class="row"> - <div class="col-xs-12 col-sm-6 col-md-3"> - <div class="method"> - <h3>Analyze</h3> - <hr> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - <h4>1</h4> - </div> - </div> - <div class="col-xs-12 col-sm-6 col-md-3"> - <div class="method"> - <h3>Develop</h3> - <hr> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - <h4>2</h4> - </div> - </div> - <div class="col-xs-12 col-sm-6 col-md-3"> - <div class="method"> - <h3>Test</h3> - <hr> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - <h4>3</h4> - </div> - </div> - <div class="col-xs-12 col-sm-6 col-md-3"> - <div class="method"> - <h3>Deploy</h3> - <hr> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> - <h4>4</h4> - </div> - </div> - </div> - </div> - </section> <!-- end of method section--> - <hr> - <section class="testimonials" id="testimonials"> - <div class="container"> - <div class="row"> - <div class="col-xs-12"> - <h2>Our Testimonials</h2> - </div> - </div> - <div class="row"> - <div class="col-xs-12 col-sm-4"> - <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eligendi a officiis aspernatur nesciunt ducimus, placeat. Eum, ratione maxime fugiat deserunt doloremque laborum hic quisquam in, libero voluptatibus! Assumenda, eligendi. - </p> - </blockquote> - </div> - <div class="col-xs-12 col-sm-4"> - <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eligendi a officiis aspernatur nesciunt ducimus, placeat. Eum, ratione maxime fugiat deserunt doloremque laborum hic quisquam in, libero voluptatibus! Assumenda, eligendi. - </p> - </blockquote> - </div> - <div class="col-xs-12 col-sm-4"> - <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore eligendi a officiis aspernatur nesciunt ducimus, placeat. Eum, ratione maxime fugiat deserunt doloremque laborum hic quisquam in, libero voluptatibus! Assumenda, eligendi. - </p> - </blockquote> - </div> - </div> - </div> - </section><!-- end of testimonials section--> - <hr> - <section class="blogs" id="blogs"> - <div class="container"> - <div class="row"> - <div class="col-xs-12"> - <h2>Latest Blogs</h2> - </div> - </div> - <div class="row"> - <div class="col-xs-12 col-lg-8"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar scelerisque aliquet. Aliquam eu ultrices nisl. Mauris sit amet odio tincidunt, congue magna a, malesuada odio. Maecenas egestas metus leo, nec vulputate odio pulvinar sodales. Aenean a nunc nisi. Donec eleifend sodales mauris, ut egestas tellus ultrices nec. Integer in nisl vitae libero lobortis egestas. Proin nisi lacus, iaculis sit amet nibh vel, fringilla pellentesque est.</p> - <p class="visible-lg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut delectus ratione aut est, minus eius, dolorem blanditiis culpa ad iusto, accusamus iure alias nihil voluptatem soluta esse velit laudantium eum.</p> - <p class="visible-lg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p> - <button type="button" class="btn btn-primary">Learn more</button> - </div> - <div class="visible-lg col-lg-4"> - <img class="img-responsive" src="http://placehold.it/450x300" /> - </div> - </div> - </div> - </section><!-- end of blogs section--> - <footer> - <p>Made by Ofir Ashery.</p> - </footer> -</template> |